@layer reset, tokens, base, gate, intro, loader, shop, pdp, bag, player, secret, utilities, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body, h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }

  ul, ol { padding: 0; list-style: none; }

  img, video, canvas, svg { display: block; max-width: 100%; }

  button, input, select, textarea { font: inherit; color: inherit; }

  button {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  table { border-collapse: collapse; width: 100%; }

  [hidden] { display: none; }
}

@layer tokens {
  :root {

    --black: #000000;
    --shell: #0a0a0a;
    --shell-2: #121212;
    --ink: #f0efe9;
    --ink-2: #a3a29c;
    --ink-3: #74736e;
    --line-d: rgba(240, 239, 233, 0.15);
    --line-d-soft: rgba(240, 239, 233, 0.08);

    --paper: #f0f0f0;
    --paper-2: #e6e6e6;
    --dark: #1e1e1e;
    --dark-2: #4d4d4d;
    --dark-3: #7a7a7a;
    --line-l: rgba(0, 0, 0, 0.17);
    --line-l-soft: rgba(0, 0, 0, 0.09);

    --alert: #a8342a;

    --ie-face: #f0f0f0;
    --ie-line: #a6b3c2;
    --ie-line-soft: #c9d1da;
    --ie-blue: #2c62a8;
    --ie-blue-soft: #dce9f7;
    --ie-dim: #5a6672;
    --ie-gold: #b8912f;
    --ie-gold-soft: #f2d98a;

    --aero-edge: #aeb4bb;
    --aero-rim: #ffffff;
    --aero-client-lt: #d8dde1;
    --aero-client-dk: #0b1a2c;
    --aero-face: #eeeeee;
    --aero-link: #005cb0;
    --aero-select-lt: #dcebfc;
    --aero-select-dk: #c1dbfc;
    --aero-select-line: #7da2ce;

    --aero-glass:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 16px, rgba(0, 18, 44, 0) 22px, rgba(0, 18, 44, 0.14) 64px) 0 0 / 100% 64px no-repeat,
      linear-gradient(53deg, #a8b8cc 0%, #a8b8cc 6%, #a5b5c9 30%, #8fa2ba 36%, #6f89a8 42%, #4a678c 47%, #33557f 52%, #2d517c 58%, #3f618a 62%, #42648e 65%, #2c517e 69%, #34567f 73%, #5d789b 79%, #8b9fb8 85%, #a8b8cc 92%, #a8b8cc 100%) 0 0 / 1000px 64px repeat-x,
      linear-gradient(180deg, #899cb6 64px, #98aabe 70px, #c5cedb 78px, #e3e6ec 84px, #e7eaec 86px, #7f92aa 90px, #657f9f 98px, #5e7695 110px, #4c6586 120px, #3d587b 130px, #2a496c 140px, #1c3d62 148px, #14345a 156px, #1c3e67 180px, #214672 220px),
      #214672;

    --w7-btn-line: #707070;
    --w7-btn: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 50%, #dddddd 50%, #cfcfcf 100%);
    --w7-btn-hot-line: #3c7fb1;
    --w7-btn-hot: linear-gradient(180deg, #eaf6fd 0%, #d9f0fc 50%, #bee6fd 50%, #a7d9f5 100%);
    --w7-btn-down-line: #2c628b;
    --w7-btn-down: linear-gradient(180deg, #e5f4fc 0%, #c4e5f6 50%, #98d1ef 50%, #68b3db 100%);

    --w7-tip-line: #767676;
    --w7-tip: linear-gradient(180deg, #ffffff 0%, #e4e5f0 100%);
    --w7-tip-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    --w7-tip-text: #575757;

    --font: "Segoe UI", "Segoe UI Variable Text", -apple-system,
      BlinkMacSystemFont, "Helvetica Neue", Tahoma, Arial, sans-serif;

    --t-xs: 12px;
    --t-sm: 13px;
    --t-md: 15px;
    --t-lg: 17px;
    --t-xl: clamp(20px, 2vw, 24px);
    --t-2xl: clamp(26px, 3.4vw, 40px);
    --t-3xl: clamp(34px, 6vw, 64px);

    --track-label: 0.1em;
    --track-tight: -0.01em;

    --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
    --s9: 96px;  --s10: 128px;

    --gutter: clamp(20px, 4vw, 56px);
    --maxw: 1680px;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.3s;

    --z-shop: 10;

    --z-player: 30;
    --z-intro: 40;
    --z-loader: 55;
    --z-secret: 60;
    --z-toast: 70;
    --z-gate: 90;
  }
}

@layer base {

  body {
    min-height: 100svh;
    background: var(--paper);
    color: var(--dark);
    font: var(--t-md) / 1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  @media (hover: hover) and (pointer: fine) {
    :root {
      --cursor-arrow: default;
      --cursor-link: pointer;
      --cursor-select: text;
      --cursor-working: progress;
      --cursor-busy: wait;
      --cursor-move: move;
      --cursor-unavail: not-allowed;
    }
  }

  html.is-locked, html.is-locked body { overflow: hidden; }

  a { color: inherit; text-decoration: none; }

  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

  ::selection { background: #3399ff; color: #fff; }

  .skip-link {
    position: fixed;
    top: -100px;
    left: var(--s4);
    z-index: 999;
    padding: var(--s3) var(--s4);
    background: var(--paper);
    color: var(--dark);
    font-size: var(--t-sm);
    transition: top var(--dur-fast) var(--ease);
  }
  .skip-link:focus { top: var(--s4); }

  .btn {
    display: block;
    width: 100%;
    padding: var(--s4) var(--s5);
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }

  .btn--solid {
    border-color: var(--w7-btn-hot-line);
    border-radius: 3px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px #98d1ef, inset 0 0 0 2px rgba(255, 255, 255, 0.6);
    color: #000;
  }
  .btn--solid:hover:not(:disabled) { background: var(--w7-btn-hot); }
  .btn--solid:active:not(:disabled) {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .btn--solid:disabled {
    border-color: #adb2b5;
    background: #f4f4f4;
    box-shadow: none;
    color: #838383;
    cursor: not-allowed;
  }

  .btn--buy { padding-block: var(--s4); }

  .toast {
    position: fixed;
    left: 50%;
    bottom: var(--s6);
    z-index: var(--z-toast);
    max-width: calc(100vw - var(--s8));
    padding: var(--s2) var(--s4);

    border: 1px solid var(--w7-tip-line);
    border-radius: 3px;
    background: var(--w7-tip);
    box-shadow: var(--w7-tip-shadow);
    color: var(--w7-tip-text);
    font-size: var(--t-sm);
    text-align: center;
    transform: translate(-50%, 16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .toast.is-on { opacity: 1; transform: translate(-50%, 0); }

  .aero-title {
    min-width: 0;

    margin: -6px -8px;
    padding: 6px 8px;
    overflow: hidden;
    color: #000;
    font: 12px/15px "Segoe UI", Tahoma, Arial, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;

    text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 3px #fff;
  }

  .aero-min,
  .aero-max,
  .aero-close {
    position: relative;
    display: block;
    flex: 0 0 auto;
    height: 19px;
    margin: 0;
    padding: 0;
    border: 0 solid #0f1d2e;
    border-width: 0 1px 1px 0;
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #fff 1px 2px, #dbe1e9 2px, #c8d3de 5px, #b0bbc9 8px, #a3b3c4 10px, #6f86a1 10px, #7189a4 14px, #8d9eb5 15.5px, #c6ccd8 18px);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.4), 0 1px rgba(226, 232, 238, 0.85);
  }
  .aero-min {
    width: 26px;
    border-left-width: 1px;
    border-bottom-left-radius: 4px;
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.4), 0 1px rgba(226, 232, 238, 0.85), -1px 0 rgba(226, 232, 238, 0.85);
  }
  .aero-max { width: 26px; }
  .aero-close {
    width: 43px;
    border-color: #510505;
    border-bottom-right-radius: 4px;
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #fbedea 1px 2px, #edbeba 2px, #e39994 4px, #e18f87 6px, #d57165 10px, #c03a2e 10px, #bb2d1c 11px, #c03928 13px, #c65f4d 15px, #deaa98 17px, #e4b19e 18px);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.25), 0 1px rgba(226, 232, 238, 0.85), 1px 0 rgba(226, 232, 238, 0.85);

    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .aero-min::after,
  .aero-max::after,
  .aero-close::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }

  .aero-min::after {
    left: 6px;
    top: 9px;
    width: 12px;
    height: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 5'%3E%3Crect x='.5' y='.5' width='11' height='4' rx='1' fill='%23fff' stroke='%23172230' stroke-opacity='.85'/%3E%3C/svg%3E");
  }
  .aero-max::after {
    left: 7px;
    top: 4px;
    width: 11px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10'%3E%3Crect x='.5' y='.5' width='10' height='9' rx='1' fill='%23fff' stroke='%23172230' stroke-opacity='.85'/%3E%3Crect x='3.5' y='3.5' width='4' height='3' fill='%237d91ab' stroke='%23172230' stroke-opacity='.85'/%3E%3C/svg%3E");
  }

  .aero-min.is-restore::after,
  .aero-max.is-restore::after {
    left: 7px;
    top: 4px;
    width: 11px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10'%3E%3Crect x='3.5' y='.5' width='7' height='6' rx='1' fill='%23fff' stroke='%23172230' stroke-opacity='.85'/%3E%3Crect x='.5' y='3.5' width='7' height='6' rx='1' fill='%23fff' stroke='%23172230' stroke-opacity='.85'/%3E%3Crect x='2.5' y='5.5' width='3' height='2' fill='%237d91ab' stroke='%23172230' stroke-opacity='.85'/%3E%3C/svg%3E");
  }
  .aero-close::after {
    left: 15px;
    top: 4px;
    width: 12px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 1.5h2.6L6 3.6l1.9-2.1h2.6L7.3 5l3.2 3.5H7.9L6 6.4 4.1 8.5H1.5L4.7 5z' fill='%23fff' stroke='%233a0d08' stroke-opacity='.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .aero-min:hover,
  .aero-max:hover {
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #fff 1px 2px, #e3f1fc 2px, #c6e2f8 6px, #a9d2f2 10px, #3b8fd6 10px, #2a7fcc 14px, #5fb6ee 16px, #9fe3ff 18px);
  }
  .aero-min:active,
  .aero-max:active {
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #c9d6e4 1px 2px, #b3c6d9 2px, #93aecb 10px, #1d5a9c 10px, #174e8c 14px, #2f7fc0 16px, #58a8dc 18px);
  }
  .aero-close:hover {
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #fff1ee 1px 2px, #f7c6bd 2px, #f0a293 5px, #e8806c 10px, #d8402a 10px, #d4381f 12px, #e2573a 15px, #f59a6c 17px, #ffc58f 18px);
  }
  .aero-close:active {
    background: linear-gradient(180deg, var(--aero-edge) 0 1px, #e7b3aa 1px 2px, #d98b7d 2px, #c86b5a 10px, #9e2413 10px, #8f1f10 14px, #b3452c 16px, #d77757 18px);
  }
  .aero-min:focus-visible,
  .aero-max:focus-visible,
  .aero-close:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
}

@layer gate {

  .gate {
    position: fixed;
    inset: 0;
    z-index: var(--z-gate);
    display: grid;
    justify-items: center;

    align-items: safe center;
    overflow-y: auto;
    padding: var(--gutter);
    background: var(--black);
  }
  .gate[hidden] { display: none; }

  .gate__win {
    display: grid;
    width: min(360px, 100%);
    overflow: hidden;
    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);
    color: #000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-shadow: inset 0 0 0 1px var(--aero-rim),
      0 18px 42px rgba(0, 0, 0, 0.62);
  }

  .gate__bar {
    position: relative;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 110px 0 4px;
  }

  .gate__icon {
    position: relative;
    width: 12px;
    height: 14px;
    flex: 0 0 auto;
    margin-right: 7px;
    background: linear-gradient(180deg, #ffffff 0%, #eff2f6 100%);
    border: 1px solid #93a1af;
    border-radius: 1px;
    clip-path: polygon(0 0, 68% 0, 100% 27%, 100% 100%, 0 100%);
  }

  .gate__barlabel { flex: 1; }

  .gate__controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .gate__client {
    border: 1px solid var(--aero-client-dk);
    background: var(--aero-face);
    box-shadow: 0 0 0 1px var(--aero-client-lt);
  }

  .gate__body {
    display: grid;
    justify-items: start;
    gap: var(--s3);
    padding: var(--s5) var(--s5) var(--s4);
  }

  .gate__mark {
    width: auto;
    height: 26px;
    margin-bottom: var(--s2);
    filter: invert(1);
    opacity: 0.88;
  }

  .gate__title {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--aero-link);
  }

  .gate__note {
    font-size: 11.5px;
    color: var(--dark-2);
  }

  .gate__label {
    margin-top: var(--s2);
    font-size: 11.5px;
    color: #000;
  }

  .gate__input {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-family: inherit;
    font-size: 16px;
  }
  .gate__input:focus {
    outline: none;
    border-color: #3d7bad #a4c9e3 #b7d9ed #b5cfe7;
  }

  .gate__error {
    min-height: 1.3em;
    font-size: 11.5px;
    color: #b4291d;
  }

  .gate__actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--s3) var(--s5) var(--s5);
    padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  }
  .gate__enter { min-width: 96px; }

  .gate.is-wrong .gate__win { animation: gate-shake 0.4s var(--ease); }

  @keyframes gate-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(5px); }
  }
}

@layer intro {
  .intro {
    position: fixed;
    inset: 0;
    z-index: var(--z-intro);
    display: grid;
    place-items: center;
    background: var(--black);
    overflow: hidden;
  }
  .intro.is-gone { display: none; }

  .intro__frame {
    position: relative;
    width: min(72vw, 1100px, calc(80vh * 16 / 9));
    width: min(72vw, 1100px, calc(80dvh * 16 / 9));
    aspect-ratio: 16 / 9;

    pointer-events: auto;

    -webkit-mask-image: linear-gradient(
      to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(
      to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }

  @media (max-width: 900px) {
    .intro__frame {
      width: min(88vw, calc(72vh * 16 / 9));
      width: min(88vw, calc(72dvh * 16 / 9));
    }
  }

  .intro__video {
    width: 100%;
    height: 100%;
    pointer-events: none;

    object-fit: contain;
    background: var(--black);

    -webkit-mask-image: linear-gradient(
      to bottom, transparent 0, #000 4%, #000 88%, transparent 100%);
    mask-image: linear-gradient(
      to bottom, transparent 0, #000 4%, #000 88%, transparent 100%);
  }

  .intro__moon,
  .intro__door {
    position: absolute;
    background: transparent;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .intro__moon {
    left: 47.86%;
    top: 21.76%;
    width: 4.85%;
    height: 6.48%;
    z-index: 3;
    cursor: default;
  }

  .intro__moon::before {
    content: "";
    position: absolute;
    inset: -14px;
  }
  .intro__moon:focus-visible { outline-offset: 6px; }

  .intro__door {
    left: 16.88%;
    top: 48.80%;
    width: 65.57%;
    height: max(6.85%, 44px);
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
  }
  .intro__door::before {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }
  .intro__door:focus-visible { outline-offset: 8px; }

  .intro__enter {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 5vh, 52px);
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.42;
  }

  @media (max-aspect-ratio: 3 / 4) {
    .intro__frame {
      width: min(92vw, calc(70vh * 16 / 9));
      width: min(92vw, calc(70dvh * 16 / 9));
    }
    .intro__moon {
      left: calc(50.285% - 24px);
      top: calc(25% - 24px);
      width: 48px;
      height: 48px;
    }
    .intro__moon::before { inset: 0; }
    .intro__enter { font-size: 9px; letter-spacing: 0.14em; opacity: 0.38; }
  }
}

@layer loader {

  .page-transition-wash {
    --font-ui: "Segoe UI", Tahoma, Arial, sans-serif;
    --s-2: 8px;
  }

  .page-transition-wash {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: grid;
    place-items: center;
    padding: 14px;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .page-transition-wash {
    --crt-frame-w: 1100px;
    --crt-px: 3px;
    --crt-py: 5px;
    --crt-ox: 0px;
    --crt-oy: 0px;
    --crt-ax: 0.16;
    --crt-ay: 0.27;
    --crt-ax-top: 0.06;
    --crt-ay-top: 0.1;
  }

  .page-transition-wash::before {
    content: "";
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--loader-w, min(408px, calc(100vw - 28px))) - 16px);
    height: calc(var(--loader-h, 204px) - 16px);
    border-radius: 3px;
    pointer-events: none;
    translate: calc(-50% + var(--loader-dx, 0px)) calc(-50% + var(--loader-dy, 0px));
    box-shadow:
      0 0 21px 9px rgba(214, 228, 255, 0.26),
      0 0 80px 16px rgba(190, 210, 255, 0.12),
      0 0 300px 38px rgba(170, 196, 255, 0.07);
  }

  body.tsnk-entering .page-transition-wash {
    opacity: 1;
    visibility: visible;
  }

  body.tsnk-revealing .page-transition-wash {
    opacity: 0;
    visibility: visible;
    transition: opacity 0.18s linear;
  }

  .tsnk-loader-window {
    position: relative;
    z-index: 1;
    width: min(408px, calc(100vw - 28px));
    height: 204px;
    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 7px;

    padding: 0 6px 6px;
    background: var(--aero-glass);
    color: #000;
    font-family: var(--font-ui);
    opacity: 1;
    visibility: hidden;
    transform: none;

    -webkit-mask: var(--crt-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--crt-mask) 0 0 / 100% 100% no-repeat;
  }

  .page-transition-wash {
    --crt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 408 204' preserveAspectRatio='none'%3E%3Cpath d='M7 1.865Q204 -1.865 401 1.865Q406.081 1.961 406.265 7Q409.735 102 406.265 197Q406.081 202.039 401 202.135Q204 205.865 7 202.135Q1.919 202.039 1.735 197Q-1.735 102 1.735 7Q1.919 1.961 7 1.865Z'/%3E%3C/svg%3E");
    --crt-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 408 204' preserveAspectRatio='none'%3E%3Cpath d='M7 2.374Q204 -1.374 401 2.374Q405.581 2.461 405.748 7Q409.252 102 405.748 197Q405.581 201.539 401 201.626Q204 205.374 7 201.626Q2.419 201.539 2.252 197Q-1.252 102 2.252 7Q2.419 2.461 7 2.374Z' fill='none' stroke='%23aeb4bb'/%3E%3Cpath d='M7 3.393Q204 -0.393 401 3.393Q404.58 3.462 404.713 7Q408.287 102 404.713 197Q404.58 200.538 401 200.607Q204 204.393 7 200.607Q3.42 200.538 3.287 197Q-0.287 102 3.287 7Q3.42 3.462 7 3.393Z' fill='none' stroke='%23fff' stroke-opacity='.9'/%3E%3C/svg%3E");
  }

  .tsnk-loader-lens {
    position: relative;
    z-index: 1;
    padding: 12px;
    margin: -12px;
    filter: blur(0.2px);
    translate: var(--loader-dx, 0px) var(--loader-dy, 0px);
  }

  .tsnk-loader-lens::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 2;
    pointer-events: none;
    background: var(--crt-outline) 0 0 / 100% 100% no-repeat;

    visibility: hidden;
  }

  body.tsnk-entering.tsnk-loader-ready .tsnk-loader-lens::after {
    visibility: visible;
  }

  .tsnk-loader-window::before,
  .tsnk-loader-window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .tsnk-loader-window::after {
    z-index: 2;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(0, 5, 12, var(--crt-ax)) var(--crt-ox),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.38),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.62),
        rgba(0, 5, 12, var(--crt-ax)) calc(var(--crt-ox) + var(--crt-px))
      ),
      repeating-linear-gradient(
        180deg,
        rgba(0, 5, 12, var(--crt-ay)) var(--crt-oy),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.32),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.68),
        rgba(0, 5, 12, var(--crt-ay)) calc(var(--crt-oy) + var(--crt-py))
      ),
      radial-gradient(
        calc(var(--crt-frame-w) * 0.56) calc(var(--crt-frame-w) * 0.34)
          at calc(50% - var(--loader-dx, 0px)) calc(50% - var(--loader-dy, 0px)),
        transparent 22%,
        rgba(0, 4, 10, 0.34) 100%
      ),
      linear-gradient(rgba(2, 8, 16, 0.07), rgba(2, 8, 16, 0.07));
  }

  .tsnk-loader-window::before {
    z-index: 4;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(0, 5, 12, var(--crt-ax-top)) var(--crt-ox),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.38),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.62),
        rgba(0, 5, 12, var(--crt-ax-top)) calc(var(--crt-ox) + var(--crt-px))
      ),
      repeating-linear-gradient(
        180deg,
        rgba(0, 5, 12, var(--crt-ay-top)) var(--crt-oy),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.32),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.68),
        rgba(0, 5, 12, var(--crt-ay-top)) calc(var(--crt-oy) + var(--crt-py))
      );
  }

  .tsnk-loader-titletext,
  .tsnk-loader-heading,
  .tsnk-loader-status,
  .tsnk-loader-moretext,
  .tsnk-loader-label {
    position: relative;
    z-index: 3;
  }

  .tsnk-loader-heading,
  .tsnk-loader-status,
  .tsnk-loader-moretext,
  .tsnk-loader-label {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0.4em rgba(255, 255, 255, 0.6);
  }

  body.tsnk-entering.tsnk-loader-ready .tsnk-loader-window {
    visibility: visible;
    animation: none;
  }

  body.tsnk-entering.tsnk-loader-ready .page-transition-wash::before {
    opacity: 1;
  }

  .tsnk-loader-titlebar {
    position: relative;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 100px 0 6px;
    font-size: 12px;
    color: #000;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px #fff, 0 0 8px #fff;
  }

  .tsnk-loader-titletext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tsnk-window-controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .tsnk-loader-body {
    height: 125px;
    padding: 14px 19px 13px;
    border: 1px solid var(--aero-client-dk);
    border-bottom: 0;
    background: #fff;
    box-shadow: 0 -1px var(--aero-client-lt), -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt);
  }

  .tsnk-loader-heading {
    margin: 0 0 var(--s-2);
    padding-left: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--aero-link);
  }

  .tsnk-loader-status {
    height: 38px;

    overflow: hidden;
    margin: 0 0 10px;
    padding-left: 2px;
    font-size: 12px;
    line-height: 1.42;
    color: #171717;
  }

  .tsnk-loader-track {
    height: 17px;
    padding: 2px;
    border: 1px solid #8b8b8b;
    border-radius: 3px;
    background: linear-gradient(#fbfbfb 0%, #eee 48%, #d8d8d8 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22),
      inset 1px 0 rgba(0, 0, 0, 0.06), inset -1px 0 rgba(0, 0, 0, 0.06),
      0 1px rgba(255, 255, 255, 0.9);
  }

  .tsnk-loader-fill {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    transition: transform 180ms cubic-bezier(0.22, 0.62, 0.3, 1);
    background: linear-gradient(
      180deg,
      #8cf47c 0%,
      #53df49 38%,
      #28c832 51%,
      #3fd642 72%,
      #79e870 100%
    );
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.78),
      inset 0 -1px rgba(15, 112, 22, 0.34);
  }

  .tsnk-loader-fill::before,
  .tsnk-loader-fill::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .tsnk-loader-fill::before {
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      transparent 42%,
      rgba(0, 92, 8, 0.06) 68%,
      rgba(255, 255, 255, 0.09) 100%
    );
  }

  .tsnk-loader-fill::after {
    top: 0;
    bottom: 0;
    left: -42%;
    width: 46%;
    background: linear-gradient(
      100deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.62) 50%,
      rgba(255, 255, 255, 0.12) 72%,
      transparent 100%
    );
    filter: blur(0.15px);
    animation: win7-progress-shine 1.45s ease-in-out infinite;
  }

  body.tsnk-revealing .tsnk-loader-fill::after {
    animation: none;
  }

  body.tsnk-revealing .tsnk-loader-fill {
    transition-duration: 260ms;
  }

  @keyframes win7-progress-shine {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(330%);
    }
  }

  .tsnk-loader-footer {
    height: 44px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 7px 9px 7px 19px;
    border: 1px solid var(--aero-client-dk);
    border-top-color: #d5d5d5;
    background: linear-gradient(#f7f7f7 0%, #ededed 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.82),
      -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt), 0 1px var(--aero-client-lt);
    font-size: 12px;
    color: #000;
  }

  .tsnk-loader-more {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
    border: 1px solid #a7a7a7;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 8 3 3 3-3' fill='none' stroke='%23565b60' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"),
      linear-gradient(#fff, #dedede);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: inset 0 1px #fff;
  }

  .tsnk-loader-cancel {
    margin-left: auto;
    min-width: 78px;
    height: 26px;
    border: 1px solid var(--w7-btn-hot-line);
    border-radius: 3px;
    background: var(--w7-btn);
    color: #000;
    font: 12px / 1 var(--font-ui);
    box-shadow: inset 0 0 0 1px #98d1ef, inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  }

  .entry-reveal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-loader) + 1);
    pointer-events: none;
    background: #000;
    opacity: 1;
    will-change: opacity;
  }

  .entry-reveal[hidden] { display: none; }

  .entry-reveal.is-leaving {
    opacity: 0;
    transition: opacity 620ms cubic-bezier(0.33, 0, 0.2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .entry-reveal.is-leaving { transition-duration: 120ms; }
  }

  @media (max-width: 700px), (hover: none) and (pointer: coarse) {

    .page-transition-wash {
      --crt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 115' preserveAspectRatio='none'%3E%3Cpath d='M5 1.031Q115 -1.031 225 1.031Q228.921 1.105 229.06 5Q230.94 57.5 229.06 110Q228.921 113.895 225 113.969Q115 116.031 5 113.969Q1.079 113.895 0.94 110Q-0.94 57.5 0.94 5Q1.079 1.105 5 1.031Z'/%3E%3C/svg%3E");
      --crt-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 115' preserveAspectRatio='none'%3E%3Cpath d='M5 1.54Q115 -0.54 225 1.54Q228.42 1.605 228.544 5Q230.456 57.5 228.544 110Q228.42 113.395 225 113.46Q115 115.54 5 113.46Q1.58 113.395 1.456 110Q-0.456 57.5 1.456 5Q1.58 1.605 5 1.54Z' fill='none' stroke='%23aeb4bb'/%3E%3Cpath d='M5 2.559Q115 0.441 225 2.559Q227.419 2.605 227.509 5Q229.491 57.5 227.509 110Q227.419 112.395 225 112.441Q115 114.559 5 112.441Q2.581 112.395 2.491 110Q0.509 57.5 2.491 5Q2.581 2.605 5 2.559Z' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3C/svg%3E");
    }

    .tsnk-loader-lens {
      filter: blur(0.12px);
    }

    .tsnk-loader-window {
      width: min(230px, calc(100vw - 42px));
      height: 115px;
      padding: 0 3px 3px;
      border-radius: 5px;
    }

    .tsnk-loader-titlebar {
      height: 16px;
      padding: 0 56px 0 4px;
      font-size: 8px;
      text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 5px #fff, 0 0 5px #fff;
    }

    .tsnk-window-controls {
      transform: scale(0.56);
      transform-origin: 100% 0;
    }

    .tsnk-loader-body {
      height: 69px;
      padding: 8px 10px 7px;
    }
    .tsnk-loader-heading {
      padding-left: 1px;
      margin-bottom: 4px;
      font-size: 10px;
      line-height: 1.16;
    }
    .tsnk-loader-status {
      height: 22px;
      margin-bottom: 4px;
      padding-left: 1px;
      font-size: 7.75px;
      line-height: 1.32;
    }
    .tsnk-loader-track {
      height: 10px;
      padding: 1px;
      border-radius: 2px;
    }

    .tsnk-loader-footer {
      height: 25px;
      padding: 3px 6px 3px 10px;
      gap: 4px;
      font-size: 7.75px;
    }
    .tsnk-loader-more {
      width: 11px;
      height: 11px;
      flex-basis: 11px;
    }
    .tsnk-loader-cancel {
      min-width: 49px;
      height: 16px;
      padding: 0 6px 0 5px;
      border-radius: 3px;
      font-size: 7.75px;
    }
  }

  @media (max-width: 360px) and (hover: none) and (pointer: coarse) {
    .tsnk-loader-window {
      width: min(218px, calc(100vw - 32px));
      height: 109px;
    }
    .page-transition-wash {
      --crt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 109' preserveAspectRatio='none'%3E%3Cpath d='M5 0.973Q109 -0.973 213 0.973Q216.977 1.048 217.118 5Q218.882 54.5 217.118 104Q216.977 107.952 213 108.027Q109 109.973 5 108.027Q1.023 107.952 0.882 104Q-0.882 54.5 0.882 5Q1.023 1.048 5 0.973Z'/%3E%3C/svg%3E");
      --crt-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 109' preserveAspectRatio='none'%3E%3Cpath d='M5 1.482Q109 -0.482 213 1.482Q216.476 1.548 216.602 5Q218.398 54.5 216.602 104Q216.476 107.452 213 107.518Q109 109.482 5 107.518Q1.524 107.452 1.398 104Q-0.398 54.5 1.398 5Q1.524 1.548 5 1.482Z' fill='none' stroke='%23aeb4bb'/%3E%3Cpath d='M5 2.501Q109 0.499 213 2.501Q215.475 2.548 215.568 5Q217.432 54.5 215.568 104Q215.475 106.452 213 106.499Q109 108.501 5 106.499Q2.525 106.452 2.432 104Q0.568 54.5 2.432 5Q2.525 2.548 5 2.501Z' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3C/svg%3E");
    }
    .tsnk-loader-titlebar { height: 15px; }
    .tsnk-loader-body { height: 65px; padding: 7px 9px 6px; }
    .tsnk-loader-heading { font-size: 9.5px; margin-bottom: 4px; }
    .tsnk-loader-status { height: 21px; margin-bottom: 4px; font-size: 7.25px; }
    .tsnk-loader-track { height: 9px; }
    .tsnk-loader-footer { height: 24px; padding-block: 3px; font-size: 7.25px; }
    .tsnk-loader-cancel { min-width: 47px; height: 15px; font-size: 7.25px; }
  }
}

@layer shop {

  .shop {
    position: relative;
    z-index: var(--z-shop);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
    background: var(--paper);
    color: var(--dark);
  }
  .shop[hidden] { display: none; }

  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;

    min-width: 0;
    gap: var(--s4);
    padding: var(--s5) var(--gutter) 0;
    background: var(--paper);
    border-bottom: 0;
  }

  .nav__masthead {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    min-height: 30px;
  }

  .nav__home { line-height: 0; }

  .nav__mark {
    display: block;
    width: clamp(220px, 24vw, 340px);
    height: auto;
    filter: invert(1);
    opacity: 0.9;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .nav__home:hover .nav__mark { opacity: 1; }

  .nav__drift-x,
  .nav__drift-y,
  .nav__drift-t {
    display: inline-block;
    will-change: transform;
  }
  .nav__drift-x { animation: drift-x 19s ease-in-out infinite; }
  .nav__drift-y { animation: drift-y 23s ease-in-out infinite; }
  .nav__drift-t { animation: drift-t 31s ease-in-out infinite; }

  .shop.is-revealing .nav__drift-x,
  .shop.is-revealing .nav__drift-y,
  .shop.is-revealing .nav__drift-t {
    animation-play-state: paused;
  }

  @keyframes drift-x {
    0%, 100% { transform: translateX(-1.5px); }
    50% { transform: translateX(1.5px); }
  }
  @keyframes drift-y {
    0%, 100% { transform: translateY(0.8px); }
    50% { transform: translateY(-0.8px); }
  }
  @keyframes drift-t {
    0%, 100% { transform: rotate(-0.12deg); }
    50% { transform: rotate(0.12deg); }
  }

  .nav__bag {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--t-sm);
    color: var(--dark-2);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav__bag:hover { color: var(--dark); }
  .nav__count { margin-left: 6px; color: var(--dark); }

  .nav__readout {
    justify-self: center;
    display: flex;
    align-items: stretch;
    margin-top: 5px;

    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    background: #fff;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
  }

  .field {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
  }
  .field[hidden] { display: none; }
  .field + .field { border-left: 1px solid #e2e3ea; }

  .field__k {
    font-size: 8px;
    letter-spacing: 0.12em;
    color: #6d6d6d;
  }
  .field__v {
    font-size: 10px;
    color: #000;
    font-variant-numeric: tabular-nums;
  }

  .toolbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: var(--t-sm);
    color: var(--dark-2);
    transition: background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }

  .toolbtn:hover {
    border-color: #b8d6fb;
    background: linear-gradient(180deg, #fafbfd 0%, #ebf3fd 100%);
    color: #000;
  }

  .toolbtn:active,
  .toolbtn[aria-pressed="true"],
  .toolbtn[aria-expanded="true"],
  .toolbtn[aria-current="true"] {
    border-color: var(--aero-select-line);
    background: linear-gradient(180deg, var(--aero-select-lt) 0%, var(--aero-select-dk) 100%);
  }

  .toolbtn__icon {
    position: relative;
    width: 13px;
    height: 12px;
    flex: 0 0 auto;
  }
  .toolbtn__icon::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 0;
    height: 5px;
    border: 1px solid #2f6fb4;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
  }
  .toolbtn__icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    border: 1px solid #1d5391;
    border-radius: 1px;
    background: linear-gradient(180deg, #f3f8ff 0%, #cfe0f5 52%, #b6cfee 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  }

  .nav__count {
    min-width: 17px;
    padding: 0 4px;
    border: 1px solid #abadb3;
    background: #fff;
    color: var(--dark);
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .toolbtn:hover .nav__count { border-color: var(--aero-select-line); }

  .ie {
    position: relative;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: var(--maxw);
    margin: var(--s4) auto 0;
    padding-inline: 0;
  }
  .ie::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -7px;
    border: 1px solid var(--aero-edge);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--aero-glass);
    box-shadow: inset 0 1px var(--aero-rim), inset 1px 0 var(--aero-rim), inset -1px 0 var(--aero-rim);
  }

  .ie__caption {
    position: relative;
    display: flex;
    align-items: center;
    height: 27px;
    padding: 1px 110px 0 2px;
  }
  .ie__appicon {
    width: 32px;
    height: 12px;
    flex: 0 0 32px;
    margin-right: 7px;
    background: url("assets/thyshallnotkill-monogram.png") center / contain no-repeat;
    filter: invert(1);
    opacity: 0.82;
  }
  .ie__windowtitle { flex: 1; }
  .ie__windowcontrols {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
  }

  .ie__strip {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: -1px;
    padding: 1px 1px 0;
  }
  .ie__strip::-webkit-scrollbar { display: none; }

  .ie__tab {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 190px;
    height: 24px;
    margin-bottom: 1px;
    padding: 0 14px 1px;
    border: 1px solid rgba(8, 20, 38, 0.62);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.48) 49%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0.44) 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.75), inset 1px 0 rgba(255, 255, 255, 0.3), inset -1px 0 rgba(255, 255, 255, 0.3);
    color: #000;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.95);
  }

  .ie__tab:hover {
    border-color: var(--w7-btn-hot-line);
    background: var(--w7-btn-hot);
  }
  .ie__tab:active:not(.is-on) {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
  }

  .ie__tab.is-on {
    height: 26px;
    margin-bottom: 0;
    z-index: 2;
    border-color: var(--aero-client-dk);
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow: inset 0 1px #fff, 0 -1px var(--aero-client-lt), -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt);
    text-shadow: none;
  }

  .ie__tab.is-flick { animation: ie-tab-flick 120ms steps(1, end) 1; }

  @keyframes ie-tab-flick {
    0%, 45% { background: #cce8ff; }
    46%, 100% { background: #f9f9f9; }
  }

  .ie__toolbar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 7px var(--s4);
    border: 1px solid var(--aero-client-dk);
    border-bottom-color: #b9c0c7;
    background: linear-gradient(180deg, #f9f9f9 0%, var(--aero-face) 100%);
    box-shadow: 0 -1px var(--aero-client-lt), -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt);
    font-size: var(--t-xs);
    color: var(--dark-2);
  }

  .ie__nav {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .ie__nav:hover:not(:disabled) {
    border-color: #9db8d2;
    background: radial-gradient(circle, rgba(199, 230, 255, 0.9) 0%, rgba(226, 240, 252, 0.5) 62%, transparent 70%);
  }
  .ie__nav:active:not(:disabled) .ie__chev {
    filter: brightness(0.86);
  }
  .ie__nav:disabled { opacity: 0.58; }
  .ie__nav--back { width: 28px; height: 28px; }

  .ie__chev {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236ba3de'/%3E%3Cstop offset='.48' stop-color='%232f6fb4'/%3E%3Cstop offset='1' stop-color='%231d5391'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.5' cy='1' r='.62'%3E%3Cstop offset='0' stop-color='%239fdcff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%239fdcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11.5' fill='url(%23b)' stroke='%231a4478'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23r)'/%3E%3Cellipse cx='12' cy='7.4' rx='8.2' ry='4.7' fill='url(%23s)'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23fff' stroke-opacity='.35'/%3E%3Cpath d='M6.84 12.75 12.84 7.25V10.95H17.24V14.55H12.84V18.25Z' fill='%230b2f5c' fill-opacity='.45'/%3E%3Cpath d='M6.84 12 12.84 6.5V10.2H17.24V13.8H12.84V17.5Z' fill='%23fff' stroke='%23fff' stroke-width='.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .ie__nav--back:disabled { opacity: 1; }
  .ie__nav:disabled .ie__chev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236ba3de'/%3E%3Cstop offset='.48' stop-color='%232f6fb4'/%3E%3Cstop offset='1' stop-color='%231d5391'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.5' cy='1' r='.62'%3E%3Cstop offset='0' stop-color='%239fdcff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%239fdcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11.5' fill='url(%23b)' stroke='%231a4478'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23r)'/%3E%3Cellipse cx='12' cy='7.4' rx='8.2' ry='4.7' fill='url(%23s)'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23fff' stroke-opacity='.35'/%3E%3Cpath d='M6.84 12.75 12.84 7.25V10.95H17.24V14.55H12.84V18.25Z' fill='%230b2f5c' fill-opacity='.2'/%3E%3Cpath d='M6.84 12 12.84 6.5V10.2H17.24V13.8H12.84V17.5Z' fill='%23fff' fill-opacity='.5' stroke='%23fff' stroke-opacity='.5' stroke-width='.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .ie__home {
    position: relative;
    width: 15px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
  }
  .ie__chev {
    flex: 0 0 auto;
    margin: 0;
  }
  .ie__home::before {
    content: "";
    position: absolute;
    inset: 0 0 1px;
    background: linear-gradient(180deg, #6ba3de 0%, #2f6fb4 48%, #1d5391 100%);
    clip-path: polygon(50% 2%, 100% 46%, 86% 46%, 86% 100%, 14% 100%, 14% 46%, 0 46%);
  }
  .ie__home::after {
    content: "";
    position: absolute;
    left: 41%;
    bottom: 1px;
    width: 18%;
    height: calc(13px * 0.36);
    background: #eef4fb;
  }

  .ie__nav[hidden] { display: none; }
  .ie__player {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, #6ba3de 0%, #2f6fb4 48%, #1d5391 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.2 2.6 13 .8v2.2L4.2 4.8z'/%3E%3Crect x='11.5' y='.8' width='1.5' height='9.4'/%3E%3Crect x='4.2' y='2.6' width='1.5' height='9.4'/%3E%3Cellipse cx='10.5' cy='10.4' rx='2.5' ry='1.8' transform='rotate(-20 10.5 10.4)'/%3E%3Cellipse cx='3.2' cy='12' rx='2.5' ry='1.8' transform='rotate(-20 3.2 12)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.2 2.6 13 .8v2.2L4.2 4.8z'/%3E%3Crect x='11.5' y='.8' width='1.5' height='9.4'/%3E%3Crect x='4.2' y='2.6' width='1.5' height='9.4'/%3E%3Cellipse cx='10.5' cy='10.4' rx='2.5' ry='1.8' transform='rotate(-20 10.5 10.4)'/%3E%3Cellipse cx='3.2' cy='12' rx='2.5' ry='1.8' transform='rotate(-20 3.2 12)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .ie__addr {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    background: #fff;
    overflow: hidden;
  }

  .ie__folder {
    position: relative;
    width: 16px;
    height: 13px;
    flex: 0 0 auto;
  }

  .ie__folder::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #b0851f;
    border-radius: 1px 2px 2px 2px;
    background: linear-gradient(180deg, #ffdf8e 0%, #f0bd4c 100%);
    clip-path: polygon(0 12%, 40% 12%, 52% 0, 100% 0, 100% 100%, 0 100%);
  }

  .ie__folder::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76%;
    border: 1px solid #b8912f;
    border-radius: 1px;
    background: linear-gradient(180deg, #fff2c4 0%, #ffd978 34%, #f2c257 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .ie__addr--tree {
    height: 30px;
    gap: 9px;
    padding-inline: 8px;
  }

  .ie__tree-label {
    flex: 0 0 auto;
    color: #30353a;
    font: 11px/1 Tahoma, "Segoe UI", sans-serif;
  }

  .ie__foldertree {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ie__foldertree::-webkit-scrollbar { display: none; }

  .ie__branch-separator {
    flex: 0 0 8px;
    width: 8px;
    height: 16px;
    display: block;
    align-self: center;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    user-select: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0 0 6 5 0 10V7.6L3.48 5 0 2.4Z' fill='%237a8794'/%3E%3C/svg%3E") center / 6px 10px no-repeat;
  }

  .ie__treeitem {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 2px 5px;
    border: 1px solid transparent;
    color: #1d2329;
    font: 11px/16px Tahoma, "Segoe UI", sans-serif;
    white-space: nowrap;
    user-select: none;
  }

  .ie__treeitem.is-on {
    display: flex;
    border-color: var(--aero-select-line);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--aero-select-lt) 0%, var(--aero-select-dk) 100%);
    color: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  }

  .ie__zone {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .catalog {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: var(--s7) var(--gutter) var(--s9);
  }

  @media (min-width: 721px) {
    .catalog {
      position: relative;
      width: calc(100% - var(--gutter) * 2);
      max-width: var(--maxw);
      margin-top: 0;
      padding: var(--s7) var(--s6) var(--s9);
      border: 0 solid var(--aero-client-dk);
      border-inline-width: 1px;
      background: #fff;
      box-shadow: -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt);
    }

    .catalog::before {
      content: "";
      position: absolute;
      z-index: -1;

      inset: -1px -8px;
      border-inline: 1px solid var(--aero-edge);
      background: linear-gradient(180deg, #627a99 0, #4c6586 21px, #3d587b 31px, #2a496c 41px, #1c3d62 49px, #14345a 57px, #1c3e67 81px, #214672 121px);
      box-shadow: inset 1px 0 var(--aero-rim), inset -1px 0 var(--aero-rim);
    }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s7) var(--s5);
  }

  .catalog__empty {
    grid-column: 1 / -1;
    min-height: clamp(180px, 30vh, 320px);
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--ie-dim);
    font-size: var(--t-md);
  }

  @media (min-width: 1500px) {
    .grid { grid-template-columns: repeat(5, 1fr); gap: var(--s7) var(--s4); }
  }
  @media (min-width: 1100px) and (max-width: 1499px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
  }

  .card { display: block; width: 100%; text-align: left; }

  .card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    margin-bottom: var(--s4);
    background: #ffffff;
    overflow: hidden;
  }

  .card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    transition: opacity var(--dur) var(--ease);
  }

  .card__img--back { opacity: 0; }

  @media (hover: hover) {
    .card:hover .card__img--back { opacity: 1; }
    .card:hover .card__img--front { opacity: 0; }
  }

  .card__flag {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    z-index: 2;
    padding: 5px var(--s2);
    background: var(--dark);
    color: var(--paper);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .card__name {
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: var(--track-tight);
    color: var(--dark);
  }

  .card__meta {
    margin-top: 2px;
    font-size: var(--t-sm);
    color: var(--dark-3);
  }

  .card__price { margin-top: var(--s1); font-size: var(--t-md); color: var(--dark); }

  .card__price.is-sold { color: var(--dark-3); }

  .statusbar {
    display: none;
  }

  @media (min-width: 721px) {
    .statusbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: var(--s3);
      width: calc(100% - var(--gutter) * 2);

      max-width: var(--maxw);
      margin: 0 auto 8px;
      padding: 4px var(--s6);
      border: 1px solid var(--aero-client-dk);
      border-top-color: #c9ccd1;
      background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
      box-shadow: -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt), 0 1px var(--aero-client-lt);
      font-size: var(--t-xs);
      color: var(--dark-2);
      font-variant-numeric: tabular-nums;
    }
    .statusbar::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -2px -8px -8px;
      border: 1px solid var(--aero-edge);
      border-top: 0;
      border-radius: 0 0 7px 7px;
      background: linear-gradient(180deg, #214672 0, #214672 calc(100% - 7px), #2b5484 calc(100% - 6px), #1d4774 100%);
      box-shadow: inset 0 -1px var(--aero-rim), inset 1px 0 var(--aero-rim), inset -1px 0 var(--aero-rim);
    }
  }

  .statusbar__sep {
    width: 1px;
    height: 12px;
    background: var(--ie-line-soft);
  }

  .statusbar__zone {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
  }

  .statusbar__globe {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #5f7fa6;
    background:
      radial-gradient(circle at 34% 26%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, #8fc0ea 0%, #3f82c4 52%, #2a63a0 100%);
    overflow: hidden;
  }
  .statusbar__globe::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: 45%;
    height: 1px;
    background: rgba(255, 255, 255, 0.65);
  }

  .foot {
    border-top: 1px solid var(--line-l-soft);
    padding: var(--s8) var(--gutter) var(--s6);
  }

  .foot__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s7) var(--s5);
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
  }

  .foot__brandcol {
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
  }

  .foot__brand {
    display: block;
    width: min(340px, 100%);
  }

  .foot__wordmark {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.9;
    transition: opacity var(--dur) var(--ease);
  }
  .foot__brand:hover .foot__wordmark { opacity: 1; }

  .foot__place {
    margin-top: var(--s4);
    width: min(340px, 100%);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--dark-2);
  }

  .foot__h {
    margin-bottom: var(--s3);
    font-size: var(--t-md);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--aero-link);
  }

  .foot__col li + li { margin-top: var(--s2); }
  .foot__col a, .foot__pay li { font-size: var(--t-sm); }
  .foot__col a { color: var(--aero-link); }
  .foot__col a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .foot__pay li { color: var(--dark-2); }

  .foot__note {
    margin-top: var(--s3);
    max-width: 26ch;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--dark-3);
  }

  .foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4) var(--s6);
    justify-content: space-between;
    width: 100%;
    max-width: var(--maxw);
    margin: var(--s8) auto 0;
    padding-top: var(--s5);
    border-top: 1px solid var(--line-l-soft);
    font-size: var(--t-xs);
    color: var(--dark-3);
  }

  @media (max-width: 900px) {
    .foot__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 720px) {

    .nav { position: relative; }

    .nav {
      gap: var(--s3);
      padding: var(--s4) var(--s4) 0;
    }

    .ie { margin-bottom: 8px; }
    .ie::before {
      bottom: -7px;
      border-bottom: 1px solid var(--aero-edge);
      border-radius: 7px;
      box-shadow: inset 0 0 0 1px var(--aero-rim);
    }
    .ie__toolbar {
      border-bottom-color: var(--aero-client-dk);
      box-shadow: 0 0 0 1px var(--aero-client-lt);
    }

    .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s3); }
    .card__name, .card__price { font-size: var(--t-sm); }
  }

  @media (hover: none) and (pointer: coarse) and (max-height: 540px) {
    .nav { position: relative; }
  }

  @media (max-width: 460px) {
    .nav__mark { width: min(205px, 56vw); }
    .nav__baglabel {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
    .ie__toolbar { gap: var(--s2); padding-inline: var(--s2); }
    .ie__zone { display: none; }
    .grid { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: 1fr; }

    .ie__strip { overflow-x: visible; gap: 1px; }
    .ie__tab {
      flex: 0 1 auto;
      min-width: 0;
      max-width: none;
      padding: 0 8px 1px;
      font-size: 11px;
    }

    .ie__tree-label { display: none; }
    .ie__addr--tree {
      height: auto;
      min-height: 30px;
      gap: 6px;
      padding-block: 3px;
      padding-inline: 6px;
    }
    .ie__foldertree {
      flex-wrap: wrap;
      overflow: visible;
      row-gap: 3px;
    }
    .ie__treeitem { padding: 1px 4px; font-size: 10px; gap: 4px; }

    .ie__treeitem:not(.is-on) .ie__folder { display: none; }

    .ie__chev { width: 18px; height: 18px; }

    .catalog { padding-bottom: var(--s6); }
    .catalog__empty { min-height: clamp(110px, 16vh, 170px); }

    .catalog { padding-inline: 16px; }

    .card__media {
      aspect-ratio: 3 / 2;
      background: var(--paper);
    }
    .card__img { padding: 2%; }
  }

  .shop-decor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--s5);
    width: 100%;
    max-width: var(--maxw);
    margin: var(--s7) auto 0;
    padding-inline: var(--gutter);
    pointer-events: none;
    user-select: none;
  }
  .decor-left,
  .decor-right,
  .decor-right__low { display: contents; }
  .decor-right__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .decor-item { position: relative; display: block; flex: 0 0 auto; }

  :where(img.decor-item),
  .decor-item > img:first-child { display: block; width: 100%; height: auto; }

  .decor-network__globe,
  .decor-messages__mail { position: absolute; display: block; height: auto; }
  .decor-network__globe { left: 6.3%; top: 21%; width: 20.9%; }
  .decor-messages__mail { left: 5.91%; top: 26.42%; width: 18.74%; }

  .decor-close {
    position: absolute;
    top: 0;
    display: block;
    padding: 0;
    border-radius: 0 0 4px 4px;
    pointer-events: auto;
  }
  .decor-network .decor-close { left: 83.4%; width: 14.4%; height: 10%; }
  .decor-messages .decor-close { left: 84.4%; width: 13.5%; height: 12.8%; }

  .decor-online .decor-close { top: -1px; right: 6px; width: 49px; height: 19px; }
  .decor-close:hover {
    background: linear-gradient(180deg, rgba(255, 226, 214, 0.5) 0%, rgba(255, 128, 72, 0.32) 55%, rgba(255, 200, 120, 0.55) 100%);
    mix-blend-mode: screen;
  }
  .decor-close:active { background: rgba(70, 0, 0, 0.25); mix-blend-mode: normal; }

  .decor-online {
    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);
    background-size: 100% 64px, 233px 64px, 100% 100%;
    background-position: 0 0, 13px 0, 0 -21px;
    background-repeat: no-repeat, repeat-x, no-repeat;
    box-shadow: inset 0 0 0 1px var(--aero-rim);
  }
  .online__bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 27px;
    padding: 0 116px 3px 5px;
  }
  .online__title { flex: 1; }
  .online__controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }
  .online__controls .aero-min { width: 29px; }
  .online__controls .aero-max { width: 28px; }
  .online__controls .aero-close { width: 49px; }

  .online__controls .aero-min::after { left: 8px; }
  .online__controls .aero-max::after { left: 8px; }
  .online__controls .aero-close::after { left: 18px; }

  .online__client {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--aero-client-dk);
    background: #f0eff0;
    box-shadow: 0 0 0 1px var(--aero-client-lt);
  }
  .decor-win { transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); }
  .decor-win.is-closing { opacity: 0; transform: scale(0.96); }
  .decor-win.is-closed { visibility: hidden; }

  .decor-earth,
  .decor-welcome,
  .decor-eye,
  .decor-tsnk { display: none; }

  .decor-online { width: 340px; zoom: 0.8824; }
  .decor-network { width: clamp(160px, 44vw, 300px); }
  .decor-stars { width: 130px; }
  .decor-messages { width: clamp(160px, 44vw, 300px); }

  .decor-eye {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }

  .tally {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
  }
  .tally[hidden] { display: none; }
  .tally__digits {
    display: flex;
    gap: 1px;
    border: 1px solid #cccccc;
    border-radius: 1px;
    background: #cccccc;
  }
  .tally__digit {
    width: 14px;
    height: 20px;
    background: linear-gradient(180deg, #fcfbfb 0%, #dedede 80%, #e1e1e1 95%, #dddddd 100%);
    color: #666666;
    font: 700 12.5px/20px Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: center;
  }
  .tally__digit:first-child,
  .tally__digit:last-child { width: 15px; }
  .tally__digit + .tally__digit { box-shadow: inset 1px 0 #fdfdfd; }

  .decor-left .tally { margin-top: -18px; }

  @media (min-width: 2240px) {
    .shop-decor {
      position: fixed;
      inset: 0;
      z-index: 25;
      display: block;
      max-width: none;
      margin: 0;
      padding: 0;
    }
    .decor-left,
    .decor-right {
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      width: calc((100% - var(--maxw)) / 2);
    }
    .decor-left { left: 0; gap: 28px; padding-top: 24px; }
    .decor-right { right: 0; justify-content: space-between; padding: 104px 0 90px; }
    .decor-right__low { display: flex; flex-direction: column; align-items: center; gap: 30px; }

    .decor-earth,
    .decor-welcome,
    .decor-eye,
    .decor-tsnk { display: block; }

    .decor-online { width: 340px; zoom: 1; }
    .decor-earth { width: 110px; }
    .decor-welcome { width: 190px; }
    .decor-network { width: min(340px, 100% - 56px); }
    .decor-stars { width: 170px; }
    .decor-messages { width: min(340px, 100% - 56px); }
    .decor-eye { width: 130px; }
    .decor-tsnk { width: 180px; }
  }

  @media (min-width: 2240px) and (max-height: 900px) {
    .decor-welcome,
    .decor-eye,
    .decor-tsnk { display: none; }
  }
  @media (min-width: 2240px) and (max-height: 700px) {
    .shop-decor { display: none; }
  }

  @media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
    .shop-decor { display: none; }
  }}

@layer pdp {
  .pdp {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;

    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);
    box-shadow: inset 0 0 0 1px var(--aero-rim);
    color: var(--dark);

    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    overflow: hidden;
  }
  .pdp::backdrop { background: rgba(0, 0, 0, 0.9); }

  .pdp__chrome {
    height: 56px;
    position: relative;
    z-index: 10;
    color: #000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  }

  .pdp__titlebar {
    position: relative;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 110px 0 2px;
  }

  .pdp__appicon {
    width: 32px;
    height: 12px;
    flex: 0 0 32px;
    align-self: center;
    margin-right: 8px;
    background: url("assets/thyshallnotkill-monogram.png") center / contain no-repeat;
    filter: invert(1);
    opacity: 0.82;
  }

  .pdp__windowtitle { flex: 1; }

  .pdp__windowcontrols {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .pdp__toolbar {
    height: 29px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 1px 4px 3px;
  }
  .pdp__browsermark {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    color: #1475b8;
    font: italic 700 18px/1 Georgia, serif;
    text-shadow: 0 0 5px #fff, 0 0 2px #fff;
  }
  .pdp__address {
    flex: 1;
    height: 22px;
    display: flex;
    align-items: center;
    padding-inline: 8px;
    overflow: hidden;
    border: 1px solid rgba(8, 20, 38, 0.62);
    background: #fff;
    box-shadow: 0 1px rgba(255, 255, 255, 0.35);
    color: #1e1e1e;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pdp__inner {
    display: grid;
    grid-template-columns: 62fr 38fr;

    height: calc(100dvh - 64px);
    overflow-y: auto;
    border: 1px solid var(--aero-client-dk);
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--aero-client-lt);

    align-content: start;
  }

  .pdp__gallery {
    display: grid;
    gap: var(--s2);
    padding: var(--s2);
    background: var(--paper-2);
  }

  .pdp__shot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--paper);
    color: inherit;
    text-align: left;
    overflow: hidden;
  }

  .pdp__shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    padding: 3% 4% 12%;
    object-position: center center;
  }

  .pdp__shotlabel {
    position: absolute;
    left: var(--s4);
    bottom: var(--s4);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--dark-3);
  }

  .photo-zoom {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) 28px;
    padding: max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    background: #000;
    color: #fff;
  }
  .photo-zoom[hidden] { display: none; }
  .photo-zoom__close {
    width: 44px;
    height: 44px;
    justify-self: end;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .photo-zoom__close:focus,
  .photo-zoom__close:focus-visible {
    outline: none;
    box-shadow: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .photo-zoom__close:focus-visible {
      outline: 1px dotted #fff;
      outline-offset: -8px;
    }
  }
  .photo-zoom__stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pinch-zoom;
  }
  .photo-zoom__image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .photo-zoom__label {
    align-self: end;
    text-align: center;
    font-size: 10px;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
  }

  .pdp__side { position: relative; }

  .pdp__panel {
    position: sticky;
    top: 0;
    padding: var(--s8) var(--s7) var(--s8) var(--s6);

    padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
  }

  .pdp__eyebrow {
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--dark-3);
  }

  .pdp__name {
    margin-top: var(--s2);
    font-size: var(--t-xl);
    font-weight: 500;
    letter-spacing: var(--track-tight);
    line-height: 1.15;
  }

  .pdp__price {
    margin-top: var(--s3);
    font-size: var(--t-lg);
    color: var(--dark);
  }
  .pdp__price.is-sold { color: var(--dark-3); }

  .pdp__row {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line-l-soft);
  }

  .pdp__rowhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
  }

  .pdp__label {
    font-size: var(--t-sm);
    color: var(--aero-link);
  }

  .pdp__value { font-size: var(--t-sm); color: var(--dark); }

  .pdp__guidebtn {
    font-size: var(--t-sm);
    color: var(--aero-link);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pdp__guidebtn:hover { color: #0a3f82; }
  .pdp__guidebtn:active { opacity: 0.7; }

  .pdp__swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }

  .swatch {
    padding: 6px var(--s3);
    border: 1px solid var(--w7-btn-line);
    border-radius: 3px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    font-size: var(--t-sm);
    color: #000;
  }
  .swatch:hover { border-color: var(--w7-btn-hot-line); background: var(--w7-btn-hot); }
  .swatch:active,
  .swatch.is-on {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  }
  .swatch.is-sold { color: #838383; text-decoration: line-through; }

  .pdp__sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: var(--s2);
  }

  .size {
    padding: var(--s3) var(--s2);
    border: 1px solid var(--w7-btn-line);
    border-radius: 3px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    font-size: var(--t-md);
    text-align: center;
    color: #000;
  }
  .size:hover:not(:disabled) { border-color: var(--w7-btn-hot-line); background: var(--w7-btn-hot); }
  .size:active:not(:disabled),
  .size.is-on {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
    color: #000;
  }
  .size:disabled {
    border-color: #adb2b5;
    background: #f4f4f4;
    box-shadow: none;
    color: #838383;
    text-decoration: line-through;
    cursor: not-allowed;
  }

  .pdp__fit {
    margin-top: var(--s3);
    font-size: var(--t-sm);
    color: var(--dark-2);
  }

  .pdp__guide {
    margin-top: var(--s4);
    padding: var(--s4);
    border: 1px solid var(--line-l);
  }
  .pdp__guide caption {
    margin-bottom: var(--s3);
    font-size: var(--t-sm);
    color: var(--dark-2);
    text-align: left;
  }
  .pdp__guide th, .pdp__guide td {
    padding: var(--s2) var(--s1);
    border-bottom: 1px solid var(--line-l-soft);
    font-size: var(--t-sm);
    font-weight: 400;
    text-align: left;
  }
  .pdp__guide th { color: var(--dark-2); }
  .pdp__guide tr:last-child td { border-bottom: 0; }

  .qty {
    display: flex;
    align-items: center;
    width: max-content;
    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    background: #fff;
  }
  .qty__btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: var(--t-lg);
    color: #000;
  }
  .qty__btn:hover:not(:disabled) { background: var(--w7-btn-hot); }
  .qty__btn:active:not(:disabled) { background: var(--w7-btn-down); }
  .qty__btn:disabled { color: #838383; cursor: not-allowed; }
  .qty__val {
    min-width: 48px;
    text-align: center;
    font-size: var(--t-md);
    border-inline: 1px solid #e2e3ea;
    line-height: 44px;
  }

  .btn--buy { margin-top: var(--s6); }

  .pdp__terms {
    margin-top: var(--s3);
    font-size: var(--t-xs);
    color: var(--dark-3);
    text-align: center;
  }

  .pdp__copy {
    margin-top: var(--s7);
    padding-top: var(--s6);
    border-top: 1px solid var(--line-l-soft);
    font-family: var(--font);
  }

  .pdp__desc {
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--dark-2);
  }

  .pdp__h {
    margin: var(--s6) 0 var(--s3);
    font-size: var(--t-md);
    font-weight: 400;
    color: var(--aero-link);
  }

  .pdp__list li {
    position: relative;
    padding-left: var(--s4);
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--dark-2);
  }
  .pdp__list li + li { margin-top: var(--s2); }
  .pdp__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 7px;
    height: 1px;
    background: var(--dark-3);
  }

  .pdp__specs {
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: var(--t-sm);
  }
  .pdp__specs dt {
    padding: var(--s2) var(--s4) var(--s2) 0;
    border-top: 1px solid var(--line-l-soft);
    color: var(--dark-3);
    white-space: nowrap;
  }
  .pdp__specs dd {
    padding: var(--s2) 0;
    border-top: 1px solid var(--line-l-soft);
    color: var(--dark-2);
  }

  @media (max-width: 900px) {
    .pdp__inner { grid-template-columns: 1fr; }
    .pdp__panel {
      position: static;
      max-height: none;
      padding: var(--s6) var(--s4) var(--s8);
      overflow: visible;
    }

    .pdp__gallery {
      grid-auto-flow: column;
      grid-auto-columns: 86%;
      height: min(72vw, 46svh);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 0;
      gap: 2px;
    }
    .pdp__shot {
      aspect-ratio: auto;
      height: 100%;
      scroll-snap-align: center;
      cursor: zoom-in;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .pdp__close,
    .pdp__close:focus,
    .pdp__close:active {
      -webkit-appearance: none;
      appearance: none;
      outline: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .pdp__appicon { flex: 0 0 36px; width: 36px; height: 16px; opacity: 0.9; }

  }

  @media (max-width: 720px) {
    .pdp {
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .pdp__titlebar { padding-left: 8px; }
    .pdp__windowcontrols { top: 0; }
    .pdp__toolbar { padding-inline: 8px; }
    .pdp__inner {
      height: calc(100dvh - 56px);
      border-width: 1px 0 0;
      box-shadow: 0 -1px var(--aero-client-lt);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp__close:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
  }
}

@layer bag {

  .bag {
    width: min(560px, calc(100vw - var(--s6)));
    max-width: none;

    height: fit-content;
    max-height: min(760px, calc(100dvh - var(--s7)));
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dark);
    overflow: visible;
  }
  .bag::backdrop { background: rgba(0, 0, 0, 0.55); }

  .bag__win {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(760px, calc(100dvh - var(--s7)));
    overflow: hidden;

    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);

    box-shadow: inset 0 0 0 1px var(--aero-rim), 0 14px 30px rgba(0, 0, 0, 0.52);
  }

  .bag__bar {
    position: relative;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 110px 0 4px;
  }

  .bag__icon {
    position: relative;
    width: 12px;
    height: 10px;
    flex: 0 0 auto;
    border: 1px solid #9b7525;
    border-radius: 1px;
    background: linear-gradient(180deg, #fff1a8 0%, #e8bd55 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
    margin-right: var(--s2);
  }
  .bag__icon::before {
    content: "";
    position: absolute;
    left: 3px;
    top: -4px;
    width: 4px;
    height: 4px;
    border: 1px solid #9b7525;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
  }

  .bag__title { flex: 1; }

  .bag__controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .bag__client {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--aero-client-dk);
    background: var(--aero-face);
    box-shadow: 0 0 0 1px var(--aero-client-lt);
  }

  .bag__cols {
    display: grid;
    grid-template-columns: 1fr 58px 78px;
    gap: var(--s3);
    padding: 5px var(--s4);
    border-bottom: 1px solid #d5d5d5;
    background: linear-gradient(180deg, #ffffff 0%, #f1f2f4 100%);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    color: #4c607a;
  }
  .bag__cols span:nth-child(2) { text-align: center; }
  .bag__cols span:nth-child(3) { text-align: right; }

  .bag__items {
    padding: 0 var(--s4);
    background: #fff;
    overflow-y: auto;
  }

  .bag__row {
    display: grid;
    grid-template-columns: 46px 1fr 58px 78px;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line-l-soft);
  }
  .bag__row:last-child { border-bottom: 0; }

  .bag__thumb {
    width: 46px;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border: 1px solid var(--ie-line-soft);
    background: #fff;
  }

  .bag__name {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.3;
  }
  .bag__variant {
    margin-top: 2px;
    font-size: var(--t-xs);
    color: var(--ie-dim);
  }

  .bag__qty { text-align: center; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

  .bag__right { text-align: right; }
  .bag__price {
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .bag__remove {
    margin-top: 3px;
    font-size: var(--t-xs);
    color: var(--aero-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .bag__remove:hover { color: var(--alert); }

  .bag__empty {
    padding: var(--s8) 0;
    font-size: var(--t-sm);
    color: var(--ie-dim);
    text-align: center;
  }

  .bag__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: 6px var(--s4);
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--ie-dim);
  }
  .bag__sub { color: var(--dark); }
  .bag__sub strong {
    font-size: var(--t-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .bag__actions {
    display: grid;
    gap: var(--s3);
    padding: var(--s4);

    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
    background: var(--ie-face);
  }

  .bag__note {
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ie-dim);
  }

  .bag__buttons {
    display: flex;
    gap: var(--s2);
    justify-content: flex-end;
  }

  .winbtn {
    width: 144px;
    min-width: 0;
    height: 38px;
    flex: 0 0 144px;
    padding: 0 10px;
    border: 1px solid var(--w7-btn-line);
    border-radius: 3px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    color: #000;
    font-size: var(--t-sm);
    white-space: nowrap;
  }
  .winbtn:hover {
    border-color: var(--w7-btn-hot-line);
    background: var(--w7-btn-hot);
  }
  .winbtn:active {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .winbtn--go {
    border-color: var(--w7-btn-hot-line);
    box-shadow: inset 0 0 0 1px #98d1ef, inset 0 0 0 2px rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  .winbtn--go:active {
    border-color: var(--w7-btn-down-line);
    background: var(--w7-btn-down);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  }

  @media (max-width: 560px) {

    .bag {
      width: calc(100vw - 20px);
      max-width: calc(100vw - 20px);
      height: fit-content;
      max-height: calc(100dvh - 32px);
    }
    .bag__win { max-height: calc(100dvh - 32px); }
    .bag__row { grid-template-columns: 40px 1fr 44px 68px; gap: var(--s2); }
    .bag__cols { grid-template-columns: 1fr 44px 68px; gap: var(--s2); }
    .bag__buttons { flex-direction: column-reverse; }
    .winbtn { width: 100%; flex: 0 0 auto; }

    .bag__close,
    .bag__close:focus,
    .bag__close:active {
      -webkit-appearance: none;
      appearance: none;
      outline: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .bag__close:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
  }
}

@layer player {
  .player,
  .player-note {

    --player-orb-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236ba3de'/%3E%3Cstop offset='.48' stop-color='%232f6fb4'/%3E%3Cstop offset='1' stop-color='%231d5391'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.5' cy='1' r='.62'%3E%3Cstop offset='0' stop-color='%239fdcff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%239fdcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11.5' fill='url(%23b)' stroke='%231a4478'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23r)'/%3E%3Cellipse cx='12' cy='7.4' rx='8.2' ry='4.7' fill='url(%23s)'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23fff' stroke-opacity='.35'/%3E%3Cpath d='M9.9 7.65v9.6l7.2-4.8z' fill='%230b2f5c' fill-opacity='.45'/%3E%3Cpath d='M9.6 6.9v9.6l7.2-4.8z' fill='%23fff'/%3E%3C/svg%3E");
    --player-orb-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236ba3de'/%3E%3Cstop offset='.48' stop-color='%232f6fb4'/%3E%3Cstop offset='1' stop-color='%231d5391'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.5' cy='1' r='.62'%3E%3Cstop offset='0' stop-color='%239fdcff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%239fdcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11.5' fill='url(%23b)' stroke='%231a4478'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23r)'/%3E%3Cellipse cx='12' cy='7.4' rx='8.2' ry='4.7' fill='url(%23s)'/%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23fff' stroke-opacity='.35'/%3E%3Cpath d='M8.4 8.15h2.8v9.1H8.4zM12.8 8.15h2.8v9.1h-2.8z' fill='%230b2f5c' fill-opacity='.45'/%3E%3Cpath d='M8.4 7.4h2.8v9.1H8.4zM12.8 7.4h2.8v9.1h-2.8z' fill='%23fff'/%3E%3C/svg%3E");
  }

  .player-dock {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .player {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    position: relative;
    display: grid;
    grid-template-rows: 27px minmax(0, 1fr);
    width: 320px;
    max-width: 100%;
    margin: var(--s7) auto;
    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);

    box-shadow: inset 0 0 0 1px var(--aero-rim), 0 14px 30px rgba(0, 0, 0, 0.52);
    color: var(--dark);
    font-size: var(--t-sm);
  }
  .player[hidden] { display: none; }

  .player[data-place="fixed"] {
    position: fixed;
    z-index: var(--z-player);
    top: 0;
    left: 0;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    margin: 0;
  }

  .player.is-max {
    position: fixed;
    z-index: var(--z-player);
    inset: 0;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
  }

  .player.is-min .player__client { display: none; }

  .player__bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 27px;
    padding: 1px 110px 0 4px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .player[data-place="flow"] .player__bar { touch-action: pan-y; }

  .player__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-right: 6px;
    background: var(--player-orb-play) center / 100% 100% no-repeat;
  }
  .player__title { flex: 1; }
  .player__controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .player__client {
    display: grid;
    align-content: start;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--aero-client-dk);
    background: var(--aero-face);
    box-shadow: 0 0 0 1px var(--aero-client-lt);
  }
  .player.is-max .player__client {
    grid-template-rows: minmax(120px, 1fr);
    align-content: stretch;
  }

  .player__visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--aero-client-dk);
    background: #000;
  }
  .player.is-max .player__visual { aspect-ratio: auto; min-height: 0; }
  .player__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--player-fit, contain);
  }

  .player__visual.is-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/thyshallnotkill-monogram.png") center / 38% auto no-repeat;
    opacity: 0.2;
  }

  .player__info {
    min-width: 0;
    padding: 7px 10px 3px;
    background: linear-gradient(180deg, #f9f9f9 0%, var(--aero-face) 100%);
  }
  .player__eyebrow {
    font-size: var(--t-xs);
    line-height: 16px;
    color: var(--aero-link);
  }
  .player__track,
  .player__artist {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .player__track {
    min-height: 18px;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 18px;
    color: #000;
  }
  .player__artist {
    font-size: var(--t-xs);
    line-height: 16px;
    color: var(--ie-dim);
  }

  .player__seek {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 2px 10px 0;
  }
  .player__time {
    min-width: 30px;
    font-size: var(--t-xs);
    color: var(--dark-2);
    font-variant-numeric: tabular-nums;
  }
  .player__time:last-child { text-align: right; }

  .player__range {
    --fill: 0%;
    width: 100%;
    min-width: 0;
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
  }
  .player__range::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    border-radius: 2px;
    background: linear-gradient(180deg, #6ba3de 0%, #2f6fb4 100%) 0 0 / var(--fill) 100% no-repeat, #fff;
  }
  .player__range::-moz-range-track {
    height: 6px;
    border: 1px solid;
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    border-radius: 2px;
    background: #fff;
  }
  .player__range::-moz-range-progress {
    height: 4px;
    background: linear-gradient(180deg, #6ba3de 0%, #2f6fb4 100%);
  }
  .player__range::-webkit-slider-thumb {
    width: 10px;
    height: 16px;
    margin-top: -6px;
    border: 1px solid var(--w7-btn-line);
    border-radius: 2px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    -webkit-appearance: none;
    appearance: none;
  }
  .player__range::-moz-range-thumb {
    width: 10px;
    height: 16px;
    border: 1px solid var(--w7-btn-line);
    border-radius: 2px;
    background: var(--w7-btn);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }
  .player__range:hover::-webkit-slider-thumb { border-color: var(--w7-btn-hot-line); background: var(--w7-btn-hot); }
  .player__range:hover::-moz-range-thumb { border-color: var(--w7-btn-hot-line); background: var(--w7-btn-hot); }
  .player__range:active::-webkit-slider-thumb { border-color: var(--w7-btn-down-line); background: var(--w7-btn-down); }
  .player__range:active::-moz-range-thumb { border-color: var(--w7-btn-down-line); background: var(--w7-btn-down); }
  .player__range:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
  .player.is-volume-locked .player__range--volume { display: none; }

  .player__transport {
    display: flex;
    align-items: center;
    padding: 4px 8px 6px;
  }
  .player__group {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .player__group--sound { flex: 1; min-width: 0; }

  .player__range--volume { flex: 0 1 96px; }
  .player__btn--list { margin-left: auto; }

  .player__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    margin-inline: 5px;
    background: #d5d5d5;
    box-shadow: 1px 0 #fff;
  }

  .player__btn {
    position: relative;
    flex: 0 0 auto;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
  }
  .player__btn::after {
    content: "";
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #6ba3de 0%, #2f6fb4 48%, #1d5391 100%);
    -webkit-mask: var(--glyph) center / 100% 100% no-repeat;
    mask: var(--glyph) center / 100% 100% no-repeat;
  }
  .player__btn--shuffle { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 4.6h2.6l5.8 6.8H12M1 11.4h2.6l2-2.35M7.4 6.95l2-2.35H12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M11.6 2.2 15 4.6l-3.4 2.4zM11.6 9 15 11.4l-3.4 2.4z'/%3E%3C/svg%3E"); }
  .player__btn--repeat { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 9.4V7.2a2.4 2.4 0 0 1 2.4-2.4H12M13.2 6.6v2.2a2.4 2.4 0 0 1-2.4 2.4H4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M11.4 2.4 14.8 4.8l-3.4 2.4zM4.6 8.8 1.2 11.2l3.4 2.4z'/%3E%3C/svg%3E"); }
  .player__btn--repeat[data-mode="one"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 9.4V7.2a2.4 2.4 0 0 1 2.4-2.4H12M13.2 6.6v2.2a2.4 2.4 0 0 1-2.4 2.4H4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M11.4 2.4 14.8 4.8l-3.4 2.4zM4.6 8.8 1.2 11.2l3.4 2.4z'/%3E%3Cpath d='M7.4 7 8.7 6.2h.9v3.6H8.5V7.6l-1.1.5z'/%3E%3C/svg%3E"); }
  .player__btn--prev { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3h2v10h-2zM14 3v10L5.5 8z'/%3E%3C/svg%3E"); }
  .player__btn--next { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 3h2v10h-2zM2 3v10l8.5-5z'/%3E%3C/svg%3E"); }
  .player__btn--mute { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.8h2.8L8 2.6v10.8L4.3 10.2H1.5z'/%3E%3Cpath d='M10.2 5.4a3.6 3.6 0 0 1 0 5.2M12.1 3.5a6.3 6.3 0 0 1 0 9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
  .player__btn--mute[aria-pressed="true"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.8h2.8L8 2.6v10.8L4.3 10.2H1.5z'/%3E%3Cpath d='M10.2 5.6l4.6 4.8M14.8 5.6l-4.6 4.8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
  .player__btn--list { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3h8.5v1.6H1zM1 7h8.5v1.6H1zM1 11h5.5v1.6H1z'/%3E%3Cpath d='M12.2 2.4h1.5v8.6a2.2 1.8 0 1 1-1.5-1.7z'/%3E%3C/svg%3E"); }

  .player__play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-inline: 3px;
    border-radius: 50%;
    background: var(--player-orb-play) center / 100% 100% no-repeat;
  }
  .player__play.is-playing { background-image: var(--player-orb-pause); }
  .player__play:hover { filter: brightness(1.08); }
  .player__play:active { filter: brightness(0.86); }
  .player__play:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
  .player__btn:focus-visible,
  .player__item:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }

  .player__playlist {
    border-top: 1px solid #d5d5d5;
    background: #fff;
  }
  .player__cols,
  .player__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .player__cols {
    padding: 4px 11px;
    border-bottom: 1px solid #d5d5d5;
    background: linear-gradient(180deg, #ffffff 0%, #f1f2f4 100%);
    font-size: var(--t-xs);
    color: #4c607a;
  }
  .player__cols span:last-child { text-align: right; }
  .player__list {
    max-height: 124px;
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .player__item {
    width: 100%;
    height: 24px;
    padding: 0 8px;
    font-size: var(--t-xs);
    color: #000;
    text-align: left;
  }
  .player__itemnum,
  .player__itemlen {
    color: var(--ie-dim);
    font-variant-numeric: tabular-nums;
  }
  .player__itemname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .player__itemlen { text-align: right; }
  .player.is-max .player__list { max-height: 30vh; }

  .player__status {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 10px;
    border-top: 1px solid #d5d5d5;
    background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
    font-size: var(--t-xs);
    color: var(--ie-dim);
    font-variant-numeric: tabular-nums;
  }

  .player-note {
    position: fixed;
    z-index: calc(var(--z-player) + 1);
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(260px, calc(100vw - 16px));
    padding: 6px 12px 7px 9px;
    border: 1px solid var(--w7-tip-line);
    border-radius: 3px;
    background: var(--w7-tip);
    box-shadow: var(--w7-tip-shadow);
    color: var(--w7-tip-text);
    font-size: var(--t-xs);
    line-height: 16px;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .player-note.is-on { opacity: 1; }
  .player-note::before,
  .player-note::after {
    content: "";
    position: absolute;
    left: calc(var(--tail-x, 20px) - 7px);
    border: 7px solid transparent;
  }
  .player-note::before { top: 100%; border-top-color: var(--w7-tip-line); }
  .player-note::after { top: calc(100% - 1px); border-top-color: #e4e5f0; }
  .player-note.is-below::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--w7-tip-line);
  }
  .player-note.is-below::after {
    top: auto;
    bottom: calc(100% - 1px);
    border-top-color: transparent;
    border-bottom-color: #ffffff;
  }

  .player-note.is-inside::before,
  .player-note.is-inside::after { display: none; }

  .player-note__app {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
    color: #000;
    font-weight: 600;
  }
  .player-note__app::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: var(--player-orb-play) center / 100% 100% no-repeat;
  }
  .player-note__label { color: var(--aero-link); }
  .player-note__track {
    overflow: hidden;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  @media (max-width: 720px) {
    .player-dock { padding-inline: 16px; }
    .player {
      width: 100%;
      max-width: 520px;
      margin-block: var(--s5);
    }

    .player[data-place="fixed"] {
      width: calc(100vw - 16px);
      max-width: none;
    }

    .player.is-max {
      width: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .player.is-max .player__bar { padding-left: 8px; }
    .player.is-max .player__controls { top: 0; }
    .player.is-max .player__client {
      border-width: 1px 0 0;
      box-shadow: 0 -1px var(--aero-client-lt);
    }
  }

  @media (max-width: 720px), (max-height: 540px) {
    .player[data-place="fixed"]:not(.is-max) .player__visual { display: none; }
  }

  @media (hover: none) and (pointer: coarse) {
    .player__transport {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "main main" "modes sound";
      row-gap: 2px;
    }
    .player__group--main { grid-area: main; justify-content: center; gap: 14px; }
    .player__group--modes { grid-area: modes; }
    .player__group--sound { grid-area: sound; }
    .player__sep { display: none; }
    .player__btn { width: 40px; height: 40px; }
    .player__btn::after { width: 18px; height: 18px; }
    .player__play { width: 46px; height: 46px; }
    .player__range { height: 32px; }
    .player__range::-webkit-slider-thumb { width: 14px; height: 22px; margin-top: -9px; }
    .player__range::-moz-range-thumb { width: 14px; height: 22px; }
    .player__item { height: 40px; font-size: var(--t-sm); }
    .player__list { max-height: 164px; }

    .player__controls > button::before {
      content: "";
      position: absolute;
      inset: -10px 0 -12px;
    }
  }
}

@layer secret {

  .secret {
    --secret-w: min(720px, calc(100vw - 48px));
    --secret-h: min(450px, calc(100vh - 48px));
    --crt-frame-w: 1100px;
    --crt-px: 3px;
    --crt-py: 5px;
    --crt-ox: 0px;
    --crt-oy: 0px;
    --crt-ax: 0.16;
    --crt-ay: 0.27;
    --crt-ax-top: 0.06;
    --crt-ay-top: 0.1;
    position: fixed;
    inset: 0;
    z-index: var(--z-secret);
    display: grid;
    place-items: center;
    padding: var(--s5);
    background: transparent;
    opacity: 1;
  }
  @supports (height: 1dvh) {
    .secret { --secret-h: min(450px, calc(100dvh - 48px)); }
  }
  .secret[hidden] { display: none; }

  .secret:not(.is-on) {
    opacity: 0;
    transition: opacity 0.14s var(--ease);
  }

  .secret::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--secret-w) - 16px);
    height: calc(var(--secret-h) - 16px);
    border-radius: 3px;
    translate: calc(-50% + var(--secret-dx, 0px)) calc(-50% + var(--secret-dy, 0px));
    pointer-events: none;
    opacity: 0;
    box-shadow:
      0 0 21px 9px rgba(214, 228, 255, 0.26),
      0 0 80px 16px rgba(190, 210, 255, 0.12),
      0 0 300px 38px rgba(170, 196, 255, 0.07);
  }

  .secret.is-ready::before { opacity: 1; }
  .secret.is-ready .secret__window { visibility: visible; }

  body.secret-open .intro__enter { visibility: hidden; }

  .secret__window {
    position: relative;
    z-index: 1;
    translate: var(--secret-dx, 0px) var(--secret-dy, 0px);
    visibility: hidden;
    width: var(--secret-w);
    height: var(--secret-h);
    display: grid;
    grid-template-rows: 27px 29px minmax(0, 1fr) 24px;
    overflow: hidden;

    padding: 0 6px 6px;
    border: 1px solid var(--aero-edge);
    border-radius: 7px;
    background: var(--aero-glass);
    box-shadow: inset 0 0 0 1px var(--aero-rim);
    color: #000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  }

  .secret__window::before,
  .secret__window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .secret__window::after {
    z-index: 2;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(0, 5, 12, var(--crt-ax)) var(--crt-ox),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.38),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.62),
        rgba(0, 5, 12, var(--crt-ax)) calc(var(--crt-ox) + var(--crt-px))
      ),
      repeating-linear-gradient(
        180deg,
        rgba(0, 5, 12, var(--crt-ay)) var(--crt-oy),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.32),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.68),
        rgba(0, 5, 12, var(--crt-ay)) calc(var(--crt-oy) + var(--crt-py))
      ),
      radial-gradient(62vw 62vh at calc(50% - var(--secret-dx, 0px)) calc(50% - var(--secret-dy, 0px)), transparent 40%, rgba(0, 4, 10, 0.28) 100%),
      linear-gradient(rgba(2, 8, 16, 0.05), rgba(2, 8, 16, 0.05));
  }

  .secret__window::before {
    z-index: 4;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(0, 5, 12, var(--crt-ax-top)) var(--crt-ox),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.38),
        rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.62),
        rgba(0, 5, 12, var(--crt-ax-top)) calc(var(--crt-ox) + var(--crt-px))
      ),
      repeating-linear-gradient(
        180deg,
        rgba(0, 5, 12, var(--crt-ay-top)) var(--crt-oy),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.32),
        rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.68),
        rgba(0, 5, 12, var(--crt-ay-top)) calc(var(--crt-oy) + var(--crt-py))
      );
  }

  @media (hover: hover) and (pointer: fine) {
    .secret {
      --crt-ax: 0.07;
      --crt-ay: 0.15;
      --crt-ax-top: 0.035;
      --crt-ay-top: 0.06;
    }

    .secret__window::after {
      background:
        repeating-linear-gradient(
          90deg,
          rgba(0, 5, 12, var(--crt-ax)) var(--crt-ox),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.854)) calc(var(--crt-ox) + var(--crt-px) * 0.125),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.5)) calc(var(--crt-ox) + var(--crt-px) * 0.25),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.146)) calc(var(--crt-ox) + var(--crt-px) * 0.375),
          rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.5),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.146)) calc(var(--crt-ox) + var(--crt-px) * 0.625),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.5)) calc(var(--crt-ox) + var(--crt-px) * 0.75),
          rgba(0, 5, 12, calc(var(--crt-ax) * 0.854)) calc(var(--crt-ox) + var(--crt-px) * 0.875),
          rgba(0, 5, 12, var(--crt-ax)) calc(var(--crt-ox) + var(--crt-px))
        ),
        repeating-linear-gradient(
          180deg,
          rgba(0, 5, 12, var(--crt-ay)) var(--crt-oy),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.854)) calc(var(--crt-oy) + var(--crt-py) * 0.125),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.5)) calc(var(--crt-oy) + var(--crt-py) * 0.25),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.146)) calc(var(--crt-oy) + var(--crt-py) * 0.375),
          rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.5),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.146)) calc(var(--crt-oy) + var(--crt-py) * 0.625),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.5)) calc(var(--crt-oy) + var(--crt-py) * 0.75),
          rgba(0, 5, 12, calc(var(--crt-ay) * 0.854)) calc(var(--crt-oy) + var(--crt-py) * 0.875),
          rgba(0, 5, 12, var(--crt-ay)) calc(var(--crt-oy) + var(--crt-py))
        ),
        radial-gradient(62vw 62vh at calc(50% - var(--secret-dx, 0px)) calc(50% - var(--secret-dy, 0px)), transparent 40%, rgba(0, 4, 10, 0.28) 100%),
        linear-gradient(rgba(2, 8, 16, 0.05), rgba(2, 8, 16, 0.05));
    }

    .secret__window::before {
      background:
        repeating-linear-gradient(
          90deg,
          rgba(0, 5, 12, var(--crt-ax-top)) var(--crt-ox),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.854)) calc(var(--crt-ox) + var(--crt-px) * 0.125),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.5)) calc(var(--crt-ox) + var(--crt-px) * 0.25),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.146)) calc(var(--crt-ox) + var(--crt-px) * 0.375),
          rgba(0, 5, 12, 0) calc(var(--crt-ox) + var(--crt-px) * 0.5),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.146)) calc(var(--crt-ox) + var(--crt-px) * 0.625),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.5)) calc(var(--crt-ox) + var(--crt-px) * 0.75),
          rgba(0, 5, 12, calc(var(--crt-ax-top) * 0.854)) calc(var(--crt-ox) + var(--crt-px) * 0.875),
          rgba(0, 5, 12, var(--crt-ax-top)) calc(var(--crt-ox) + var(--crt-px))
        ),
        repeating-linear-gradient(
          180deg,
          rgba(0, 5, 12, var(--crt-ay-top)) var(--crt-oy),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.854)) calc(var(--crt-oy) + var(--crt-py) * 0.125),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.5)) calc(var(--crt-oy) + var(--crt-py) * 0.25),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.146)) calc(var(--crt-oy) + var(--crt-py) * 0.375),
          rgba(0, 5, 12, 0) calc(var(--crt-oy) + var(--crt-py) * 0.5),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.146)) calc(var(--crt-oy) + var(--crt-py) * 0.625),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.5)) calc(var(--crt-oy) + var(--crt-py) * 0.75),
          rgba(0, 5, 12, calc(var(--crt-ay-top) * 0.854)) calc(var(--crt-oy) + var(--crt-py) * 0.875),
          rgba(0, 5, 12, var(--crt-ay-top)) calc(var(--crt-oy) + var(--crt-py))
        );
    }
  }

  .secret__title,
  .secret__addresstext,
  .secret__hint,
  .secret__zonetext {
    position: relative;
    z-index: 3;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0.4em rgba(255, 255, 255, 0.6);
  }

  .secret__addresstext,
  .secret__hint,
  .secret__zonetext {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.55);
  }
  .secret__addresstext {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .secret__titlebar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 110px 0 4px;
  }

  .secret__appicon {
    width: 14px;
    height: 14px;
    position: relative;
    border: 1px solid #2d7598;
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 28%, #fff 0 8%, transparent 10%),
      linear-gradient(145deg, #9ee7ff 0%, #2ca5d5 48%, #146593 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      0 1px 1px rgba(0, 42, 70, 0.25);
    margin-right: 7px;
  }
  .secret__appicon::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 3px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: rotate(-18deg);
  }

  .secret__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px #fff, 0 0 8px #fff;
  }

  .secret__controls {
    position: absolute;
    top: -1px;
    right: 0;
    display: flex;
  }

  .secret__toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 1px 4px 3px;
  }
  .secret__browsermark {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    color: #1475b8;
    font: italic 700 18px/1 Georgia, serif;
    text-shadow: 0 0 5px #fff, 0 0 2px #fff;
  }
  .secret__address {
    flex: 1;
    height: 22px;
    display: flex;
    align-items: center;
    padding-inline: 8px;
    overflow: hidden;
    border: 1px solid rgba(8, 20, 38, 0.62);
    background: #fff;
    box-shadow: 0 1px rgba(255, 255, 255, 0.35);
    color: #1e1e1e;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .secret__stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--aero-client-dk);
    border-bottom: 0;
    box-shadow: 0 -1px var(--aero-client-lt), -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt);
    background:
      radial-gradient(ellipse at 50% 46%, #ccd6e0 0%, #c5cfda 45%, #b3bfcb 80%, #a4b1bf 100%);
  }

  .secret__stage::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 7%;
    height: 13%;
    background: radial-gradient(closest-side ellipse at 50% 50%,
      rgba(51, 66, 78, 0.20) 0%,
      rgba(51, 66, 78, 0.13) 45%,
      rgba(51, 66, 78, 0.05) 72%,
      rgba(51, 66, 78, 0) 100%);
    pointer-events: none;
  }
  .secret__stage canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
  }

  .secret__statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 7px;
    border: 1px solid var(--aero-client-dk);
    border-top-color: #c9ccd1;
    background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
    box-shadow: -1px 0 var(--aero-client-lt), 1px 0 var(--aero-client-lt), 0 1px var(--aero-client-lt);

    color: #44505c;
    font-size: 10px;
  }
  .secret__hint {
    flex: 1;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s var(--ease);
  }
  .secret__hint.is-off { opacity: 0.35; }
  .secret__zone { display: inline-flex; align-items: center; gap: 5px; }
  .statusbar__globe--offline {
    box-shadow: 0 0 0 1px #7d858c;
    background:
      radial-gradient(circle at 34% 26%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, #c5cbd0 0%, #858e96 54%, #626a71 100%);
  }
  .statusbar__globe--offline::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 5px;
    width: 13px;
    height: 2px;
    background: #b74136;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
    transform: rotate(-45deg);
    z-index: 2;
  }

  @media (max-width: 640px) {

    .secret {
      padding: 8px;
      --secret-w: min(420px, calc(100vw - 32px));
      --secret-h: min(520px, 62vh);
    }
    @supports (height: 1dvh) {
      .secret { --secret-h: min(520px, 62dvh); }
    }
  }
}

@layer utilities {

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    html, body, body * { cursor: var(--cursor-arrow); }
    p, h1, h2, h3, li, dt, dd, td, th, input, textarea, [contenteditable="true"] {
      cursor: var(--cursor-select);
    }
    a, a *, button, button *, [role="button"], [role="button"] * {
      cursor: var(--cursor-link);
    }
    .intro__moon, .intro__moon * { cursor: var(--cursor-arrow); }
    button:disabled, button:disabled *, [aria-disabled="true"], [aria-disabled="true"] * {
      cursor: var(--cursor-unavail);
    }
    .page-transition-wash, .page-transition-wash * { cursor: var(--cursor-busy); }
    .ie.is-working, .ie.is-working * { cursor: var(--cursor-working); }
    .secret.is-loading, .secret.is-loading * { cursor: var(--cursor-working); }

    .secret:not(.is-loading) .secret__stage canvas { cursor: var(--cursor-arrow); }
    .secret .secret__stage canvas.is-grabbable,
    .secret .secret__stage canvas.is-dragging { cursor: var(--cursor-move); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
    .gate.is-wrong .gate__win { animation: none; }
    .card:hover .card__img--back,
    .card:hover .card__img--front { opacity: 1; }
    .card:hover .card__img--back { opacity: 0; }
  }
}