/* brand fonts (same files as the itsnobody.net homepage) */
  @font-face{
    font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;
    src:url('michroma-latin.woff2') format('woff2');
  }
  @font-face{
    font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
    src:url('jost-latin.woff2') format('woff2');
  }
  @font-face{
    font-family:'Inter';font-style:normal;font-weight:200 800;font-display:swap;
    src:url('inter.woff2') format('woff2');
  }
  :root{
    --glow:#FFC467; --shell:#FFF2DD; --rose:#FF6F7D; --bg:#050308;
    --white:#ffffff; --gray-light:#e0e0e0;
    /* brand tokens (from itsnobody.net) */
    --b-ink:#eef0f4; --b-silver:#c4c8d0; --b-dim:#6a6e78;
    --b-crimson:#c8102e; --b-crimson-soft:rgba(200,22,44,.55);
    --b-radius:clamp(14px,1.6vw,19px); --b-ease:cubic-bezier(0.22,0.68,0.16,1);
    --font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
    --global-grain-opacity:0.035; --global-scanline-opacity:0.02; --global-vignette-strength:0.4;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* declare the page as already-dark so Samsung Internet / Chrome auto dark-mode
     don't re-colour the brand palette */
  :root{color-scheme:dark}
  html,body{height:100%;background:var(--bg);overflow:hidden;
    font-family:var(--font-main);color:var(--white);color-scheme:dark;
    -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
  #app{position:fixed;inset:0;z-index:0}
  canvas{display:block;position:fixed;inset:0}
  /* baked playback: the pre-rendered film fills the screen (vertical master; desktop crops sides) */
  #film{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
    background:var(--bg);z-index:0;pointer-events:none}

  .experience-tools{position:fixed;top:14px;right:14px;z-index:24;display:flex;gap:10px;
    flex-wrap:wrap;justify-content:flex-end;max-width:min(92vw,32rem)}
  .tool-button,.tool-link{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(226,230,238,.14);
    background:rgba(6,6,9,.52);backdrop-filter:blur(10px);color:var(--b-ink);font-family:'Jost',sans-serif;
    font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;display:inline-flex;
    align-items:center;justify-content:center}
  .tool-button{cursor:pointer}
  .tool-button:hover,.tool-link:hover{border-color:rgba(226,230,238,.3);color:#fff}

  /* warm nebula reacts to the music (kept from the particle build) */
  #atmo{position:fixed;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(120% 80% at 50% 38%, rgba(150,180,210,0.10), transparent 60%),
      radial-gradient(80% 60% at 50% 60%, rgba(120,140,180,0.06), transparent 55%);
    mix-blend-mode:screen;transition:opacity .8s ease}

  /* ───── cinematic overlays (from WALLCAM) ───── */
  /* oversized so the grain animation never exposes an uncovered band at the screen edges */
  .grain-overlay{position:fixed;top:-150%;left:-150%;width:400%;height:400%;
    pointer-events:none;z-index:9998;opacity:var(--global-grain-opacity);
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain .5s steps(1) infinite}
  @keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}
    20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}
    50%{transform:translate(-15%,10%)}60%{transform:translate(15%,0)}70%{transform:translate(0,15%)}
    80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}
  .scanlines{position:fixed;inset:0;pointer-events:none;z-index:9996;
    opacity:var(--global-scanline-opacity);
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 4px)}
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:9995;
    background:radial-gradient(ellipse at center,transparent 0 36%,
      rgba(0,0,0,calc(0.10 + var(--global-vignette-strength)*0.16)) 64%,
      rgba(0,0,0,calc(0.30 + var(--global-vignette-strength)*0.45)) 100%)}

  /* ───── lyric stage ───── */
  #stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    pointer-events:none;padding:1.5rem;z-index:3}

  .lyric-text{text-align:center;max-width:90vw;line-height:1.3;
    will-change:transform,opacity;text-wrap:balance;overflow-wrap:anywhere;
    position:relative;isolation:isolate;transform-origin:center center;
    text-shadow:0 0 calc(8px + (var(--line-energy,0)*16px)) rgba(255,255,255,.06),
      0 0 calc(var(--line-presence,0)*30px) rgba(255,196,103,.1);
    filter:saturate(var(--line-saturation,1)) brightness(var(--line-brightness,1))}
  .lyric-text[data-line-animation='word-by-word']{display:flex;flex-wrap:wrap;
    justify-content:center;align-items:flex-end;gap:.1em .22em}
  /* Sizes tuned for the pre-rendered film (1440px-wide frame). The old caps (2rem / 1.5rem)
     left every non-NOBODY line tiny on a large canvas; raised so the words read big on screen
     while NOBODY (size-hero / Michroma wordmark) still dominates the hierarchy. */
  .lyric-text.size-normal{font-size:clamp(1.7rem,6.4vw,4.3rem);font-weight:300}
  .lyric-text.size-large{font-size:clamp(2.1rem,8vw,5.2rem);font-weight:400}
  .lyric-text.size-hero{font-size:clamp(3rem,14.5vw,6.8rem);font-weight:800;
    text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
  .lyric-text.size-intimate{font-size:clamp(1.45rem,5vw,3.25rem);font-weight:200;color:var(--gray-light)}

  .lyric-text--haunted{text-shadow:0 0 14px rgba(255,255,255,.08),0 0 26px rgba(255,196,103,.14)}
  .lyric-text--impact{filter:drop-shadow(0 0 18px rgba(255,255,255,.06))}
  .lyric-text--treatment-hook{text-shadow:0 0 22px rgba(255,255,255,.14),0 0 56px rgba(255,140,70,.18)}
  .lyric-text--treatment-climax{text-shadow:0 0 26px rgba(255,255,255,.16),0 0 72px rgba(255,150,70,.24),0 0 120px rgba(255,255,255,.08)}
  .lyric-text--treatment-whisper{max-width:80vw;color:rgba(242,239,232,.9);font-style:normal;
    text-shadow:0 0 12px rgba(255,255,255,.06),0 0 28px rgba(255,196,103,.1)}

  /* ───── NOBODY — the brand wordmark identity (Michroma + brushed-metal + sheen),
     matched to the itsnobody.net homepage logo. ───── */
  .lyric-text--treatment-hook .glitch-text,
  .lyric-text--treatment-climax .glitch-text{
    font-family:'Michroma','Inter',sans-serif;font-weight:400;letter-spacing:.04em;
    font-size:clamp(2.2rem,11.5vw,5rem);
    color:#d6dae1;                                     /* visible silver fallback if no text-clip */
    text-shadow:none;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
  }
  /* brushed-metal gradient + travelling sheen, only where text-clip is supported */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .lyric-text--treatment-hook .glitch-text,
    .lyric-text--treatment-climax .glitch-text{
      color:transparent;-webkit-text-fill-color:transparent;
      background:
        linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.85) 50%, transparent 62% 100%) 250% 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #ffffff 0%, #d3d7de 36%, #888d98 58%, #eef1f6 76%, #b7bbc5 100%);
      -webkit-background-clip:text;background-clip:text;
      animation:brandSheen 8s ease-in-out 1s infinite;
    }
  }
  @keyframes brandSheen{
    0%,100%{background-position:250% 0, 0 0}
    50%{background-position:-160% 0, 0 0}
  }
  /* crisp brand mark: kill the glitch ghosting + echo doubling so NOBODY isn't smeared */
  .lyric-text--treatment-hook .glitch-text.active::before,
  .lyric-text--treatment-climax .glitch-text.active::before,
  .lyric-text--treatment-hook .glitch-text.active::after,
  .lyric-text--treatment-climax .glitch-text.active::after{content:none}
  .lyric-text--treatment-hook .lyric-text__echo-layer,
  .lyric-text--treatment-climax .lyric-text__echo-layer{display:none}

  .lyric-text__echo-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
  .lyric-text__core{position:relative;z-index:1}
  .lyric-text[data-line-animation='word-by-word'] .lyric-text__core{display:contents}
  .lyric-text__echo{position:absolute;left:50%;top:50%;white-space:nowrap;
    opacity:var(--line-echo,0);filter:blur(.5px);transform:translate(-50%,-50%)}
  .lyric-text__echo--left{transform:translate(calc(-50% - .08em - var(--line-echo,0)*.16em),-50%);color:rgba(255,132,92,.4)}
  .lyric-text__echo--right{transform:translate(calc(-50% + .08em + var(--line-echo,0)*.16em),-50%);color:rgba(169,214,255,.34)}

  .word{display:inline-block;opacity:0;transform:translateY(20px);transform-origin:center 72%;
    will-change:transform,opacity,filter;
    transition:opacity 110ms linear,transform 120ms var(--ease-out-expo),filter 90ms linear,text-shadow 120ms linear}
  .word.visible{opacity:1}
  .word--active{color:#fff}
  .lyric-text--treatment-hook .word--active,.lyric-text--treatment-climax .word--active{color:#fff8f0}
  .word.emphasis{font-weight:600}
  .word.flicker{animation:flicker .18s steps(2,end) infinite alternate}
  .word.glitch{animation:glitch .28s steps(2,end) infinite}
  @keyframes flicker{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}
    40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}}

  .glitch-text{position:relative;text-shadow:0 0 10px rgba(255,255,255,.08),0 0 34px rgba(255,255,255,.05)}
  .glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}
  .glitch-text.active::before{animation:glitchTop .42s steps(2,end) infinite;
    clip-path:polygon(0 0,100% 0,100% 42%,0 42%);color:rgba(255,255,255,.64);filter:blur(.5px);opacity:.44}
  .glitch-text.active::after{animation:glitchBottom .55s steps(2,end) infinite;
    clip-path:polygon(0 48%,100% 48%,100% 100%,0 100%);color:rgba(255,255,255,.3);filter:blur(1px);opacity:.34}
  @keyframes glitchTop{0%,100%{transform:translate(0,0);opacity:.18}18%{transform:translate(-1px,-1px);opacity:.5}
    36%{transform:translate(1px,0);opacity:.28}58%{transform:translate(-2px,1px);opacity:.42}78%{transform:translate(1px,-1px);opacity:.2}}
  @keyframes glitchBottom{0%,100%{transform:translate(0,0);opacity:.12}22%{transform:translate(2px,1px);opacity:.32}
    44%{transform:translate(-1px,0);opacity:.18}66%{transform:translate(1px,2px);opacity:.38}84%{transform:translate(-2px,-1px);opacity:.16}}

  .shake{animation:shake .15s ease-in-out}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

  /* ───── autoplay tap-hint (only shown if the browser blocks autoplay) ───── */
  #taphint{position:fixed;inset:0;z-index:12;display:none;flex-direction:column;
    align-items:center;justify-content:center;gap:18px;cursor:pointer;
    background:radial-gradient(circle at 50% 46%,rgba(10,8,12,.45),var(--bg) 78%)}
  #taphint.show{display:flex}
  #taphint .ring{width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;
    background:rgba(255,255,255,.04);backdrop-filter:blur(4px);animation:tapPulse 2.4s ease-in-out infinite}
  #taphint p{opacity:.5;letter-spacing:.36em;font-size:12px;text-transform:uppercase}
  @keyframes tapPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.12);transform:scale(1)}
    50%{box-shadow:0 0 0 14px rgba(255,255,255,0);transform:scale(1.04)}}

  /* progress */
  #bar{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);z-index:100}
  #barfill{height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.5),var(--glow));box-shadow:0 0 12px rgba(255,196,103,.5)}

  /* ───── end screen — early access, in the itsnobody.net brand language ───── */
  #end{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
    padding:1.5rem;opacity:0;transition:opacity 1.6s ease;
    font-family:'Jost','Inter',sans-serif;
    background:radial-gradient(ellipse 64% 54% at 50% 42%,rgba(160,180,210,.08),rgba(5,5,6,.94) 60%,#050506 100%)}
  #end.show{display:flex;opacity:1}
  /* glass card — same recipe as the homepage cards */
  #end .inner{position:relative;width:100%;max-width:30rem;display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:clamp(28px,6vw,46px) clamp(20px,5vw,38px);border-radius:var(--b-radius);
    background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),
      linear-gradient(157deg,#101015 0%,#0a0a0d 52%,#060608 100%);
    border:1px solid rgba(226,230,238,.08);
    box-shadow:0 30px 70px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
  #end .inner::before{content:"";position:absolute;inset:-14%;border-radius:calc(var(--b-radius) + 10px);
    background:radial-gradient(closest-side,rgba(160,180,210,.12),rgba(160,180,210,0) 72%);
    filter:blur(8px);opacity:.5;z-index:-1;pointer-events:none}
  #end .kicker{font-weight:300;font-size:clamp(.6rem,1.4vw,.72rem);letter-spacing:.42em;text-indent:.42em;
    text-transform:uppercase;color:var(--b-silver)}
  #end h2{margin-top:16px;font-weight:300;letter-spacing:.02em;font-size:clamp(1.45rem,5.4vw,2.05rem);color:var(--b-ink)}
  #end .sub{margin-top:12px;font-weight:300;font-size:.95rem;line-height:1.65;color:var(--b-dim);max-width:23rem}
  #end .cin-line{margin-top:20px;width:4rem;height:1px;
    background:linear-gradient(90deg,transparent,rgba(196,200,208,.4),transparent)}
  #end form{margin-top:22px;width:100%;max-width:22rem;display:flex;flex-direction:column;gap:10px}
  #end input{min-height:48px;width:100%;border-radius:var(--b-radius);border:1px solid rgba(226,230,238,.12);
    background:linear-gradient(157deg,#0c0c11,#070709);padding:0 16px;color:var(--b-ink);
    font-family:'Jost',sans-serif;font-size:1rem;letter-spacing:.02em;outline:none;transition:all .35s var(--b-ease)}
  #end input::placeholder{color:rgba(196,200,208,.3)}
  #end input:focus{border-color:rgba(226,230,238,.3);box-shadow:0 0 0 1px rgba(226,230,238,.06),0 0 26px -8px rgba(160,180,210,.3)}
  #end button.submit{min-height:48px;border:1px solid rgba(226,230,238,.2);border-radius:var(--b-radius);cursor:pointer;
    background:linear-gradient(180deg,rgba(226,230,238,.08),rgba(226,230,238,.02));color:var(--b-ink);
    font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
    font-size:.74rem;transition:all .35s var(--b-ease)}
  #end button.submit:hover{border-color:var(--b-crimson-soft);color:#fff;
    box-shadow:0 0 30px -8px rgba(200,22,44,.4),inset 0 0 0 1px rgba(255,255,255,.04)}
  #end button.submit:disabled{opacity:.4;cursor:wait}
  #end .msg{margin-top:14px;font-size:.82rem;letter-spacing:.04em;min-height:1em}
  #end .msg.err{color:var(--b-crimson)}
  #end .msg.ok{color:var(--b-silver)}
  #end .actions{margin-top:24px;display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
  #end .ghost{background:none;border:0;cursor:pointer;font-family:'Jost',sans-serif;font-weight:300;font-size:.66rem;
    letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--b-dim);transition:color .3s ease}
  #end .ghost:hover{color:var(--b-silver)}

  /* countdown — silver, turns crimson (brand restraint) as it runs out */
  #end .timer{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:9px}
  #end .timer__num{font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:300;letter-spacing:.18em;
    color:var(--b-silver);transition:color .3s ease}
  #end .timer__bar{width:min(70vw,18rem);height:1px;background:rgba(226,230,238,.1);overflow:hidden}
  #end .timer__fill{height:100%;width:100%;
    background:linear-gradient(90deg,rgba(196,200,208,.5),var(--b-silver));transition:width .12s linear}
  #end .timer.low .timer__num{color:var(--b-crimson);animation:timerPulse .9s ease-in-out infinite}
  #end .timer.low .timer__fill{background:linear-gradient(90deg,var(--b-crimson-soft),var(--b-crimson))}
  #end .timer.expired .timer__num{color:var(--b-silver)}
  #end .timer.expired .timer__fill{width:0 !important;background:linear-gradient(90deg,rgba(196,200,208,.22),rgba(196,200,208,.46))}
  @keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.45}}
  #end .timer-note{margin-top:10px;max-width:20rem;font-size:.74rem;line-height:1.5;color:var(--b-dim)}
  #gate{display:flex;flex-direction:column;align-items:center;gap:6px}
  #gate button.submit{min-width:min(80vw,15rem)}

  /* locked state — access denied, brand crimson with restraint */
  #end.locked #endKicker{color:var(--b-crimson);animation:timerPulse 1.7s ease-in-out infinite}
  #end.locked #endTitle{color:var(--b-ink)}
  #end .seal{display:none;margin-top:18px;align-items:center;justify-content:center;gap:14px;
    font-family:'Jost',sans-serif;font-weight:300;color:rgba(200,22,44,.72);font-size:.6rem;
    letter-spacing:.4em;text-indent:.4em;text-transform:uppercase}
  #end.locked .seal{display:flex}
  #end .seal::before,#end .seal::after{content:"";width:34px;height:1px;
    background:linear-gradient(90deg,transparent,var(--b-crimson-soft),transparent)}
  #end.locked #replay{color:var(--b-silver)}
  #end.locked #replay:hover{color:#fff}
  /* typed reveal of the lock lines */
  #end .typing::after{content:"▍";margin-left:.06em;animation:caret .7s step-end infinite}
  @keyframes caret{50%{opacity:0}}
  #end #endSub{transition:opacity .6s ease}

  /* screen glitch flash when the timer fails */
  #lockfx{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.28) 2px 3px)}
  #lockfx.fire{animation:lockGlitch .55s steps(2,end) 1}
  @keyframes lockGlitch{
    0%{opacity:0;transform:translateX(0)}
    8%{opacity:.92;background-color:rgba(200,22,44,.28);transform:translateX(-9px) skewX(-2deg)}
    16%{opacity:.5;background-color:rgba(255,255,255,.12);transform:translateX(8px)}
    26%{opacity:.85;background-color:rgba(200,22,44,.2);transform:translateX(-4px) skewX(1.5deg)}
    40%{opacity:.32;transform:translateX(3px)}
    62%{opacity:.55;background-color:rgba(255,255,255,.08);transform:translateX(-2px)}
    100%{opacity:0;transform:none}}

  /* ───── accessibility additions (a11y, consent, legal links) ───── */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* visible keyboard focus everywhere (WCAG 2.4.7) */
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
    outline:3px solid #9db4ff;outline-offset:3px;border-radius:6px}

  /* marketing-consent row in the early-access form */
  #end .consent{display:flex;gap:.6rem;align-items:flex-start;text-align:start;
    margin-top:4px;font-family:'Jost',sans-serif;font-weight:300;font-size:.8rem;line-height:1.5;
    color:var(--b-silver);cursor:pointer}
  #end .consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:2px;
    accent-color:var(--b-crimson);cursor:pointer}
  #end .consent a{color:var(--b-ink);text-underline-offset:2px}
  #end button.submit:disabled{opacity:.4;cursor:not-allowed}

  /* legal links under the end-screen actions */
  #end .legal-links{margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;
    align-items:center;justify-content:center}
  #end .legal-links a{color:var(--b-dim);text-decoration:none;font-family:'Jost',sans-serif;
    font-weight:300;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
    transition:color .3s ease}
  #end .legal-links a:hover{color:var(--b-silver)}

  @media (max-width: 640px){
    .experience-tools{left:12px;right:12px;top:12px}
    .tool-button,.tool-link{flex:1 1 auto}
  }

  /* honour reduced-motion: kill decorative animation + flashing (WCAG 2.3.1 / 2.2.2) */
  @media (prefers-reduced-motion: reduce){
    .grain-overlay,.scanlines{animation:none !important;opacity:0 !important}
    .shake,.word.flicker,.word.glitch,.glitch-text.active::before,.glitch-text.active::after,
    #lockfx,.lyric-text--treatment-hook .glitch-text,.lyric-text--treatment-climax .glitch-text{
      animation:none !important}
    *{transition-duration:.001ms !important}
  }