:root{
    --bg:#080d13; --panel:#111a24; --edge:#22303f;
    --ink:#eaf2f8; --soft:#a4b6c6; --teal:#6fd8c8; --amber:#ffc27a;
    --tap:88px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg); color:var(--ink);
    font:500 20px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; transition:filter .8s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.dim{filter:brightness(.4)}
  .wrap{max-width:780px;margin:0 auto;padding:0 20px 60px}

  .hero{position:relative;margin:0 -20px 8px;}
  .hero img{width:100%;display:block}
  .hero-cap{
    position:absolute;left:0;right:0;top:0;padding:26px 24px;
    background:linear-gradient(180deg,rgba(8,13,19,.85),rgba(8,13,19,0));
  }
  .kicker{color:var(--teal);letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-weight:700}
  h1{font-size:clamp(28px,6.5vw,42px);margin:.2em 0 0;letter-spacing:-.01em}
  .lede{color:var(--soft);font-size:19px;max-width:56ch;margin:14px 0 0}

  .stage{background:var(--panel);border:1px solid var(--edge);border-radius:22px;padding:22px;margin:24px 0}
  .frames{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:1/1;max-width:420px;margin:0 auto}
  .frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
  .frames img.on{opacity:1}
  .cue{text-align:center;font-size:30px;font-weight:700;margin:18px 0 2px;min-height:1.3em;color:var(--amber)}
  .count{text-align:center;color:var(--soft);font-size:17px;min-height:1.5em}

  .controls{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
  button{
    font:inherit;font-weight:700;color:#08121a;background:var(--teal);border:0;border-radius:18px;
    min-height:var(--tap);padding:0 28px;flex:1 1 190px;cursor:pointer;touch-action:manipulation;
  }
  button.ghost{background:transparent;color:var(--ink);border:2px solid var(--edge)}
  button:focus-visible{outline:4px solid var(--amber);outline-offset:3px}

  .note{color:var(--soft);font-size:16px;border-top:1px solid var(--edge);margin-top:30px;padding-top:18px}
  .note strong{color:var(--ink)}
  a{color:var(--teal)}
  @media (prefers-reduced-motion:reduce){
    .frames img{transition:none}
    body{transition:none}
  }