:root{
  --bg:#E6E7E9; --ink:#1D2024; --muted:#5E636A; --line:rgba(29,32,36,.14);
  --accent:#BF4730; --panel:rgba(248,248,249,.9); --solid:#F1F2F3;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#191B1E; --ink:#E8E9EB; --muted:#A0A5AC; --line:rgba(232,233,235,.16);
    --accent:#E0654B; --panel:rgba(28,31,35,.9); --solid:#202327;
  }
}
:root[data-theme="dark"]{
  --bg:#191B1E; --ink:#E8E9EB; --muted:#A0A5AC; --line:rgba(232,233,235,.16);
  --accent:#E0654B; --panel:rgba(28,31,35,.9); --solid:#202327;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#stage{position:fixed;inset:0;overflow:hidden;background:#D9DBDE;z-index:0}
.scene{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;opacity:0}
.scene img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}
.hot{position:absolute;width:0;height:0}
.hot button{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(var(--inv,1));
  width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:rgba(29,32,36,.78);color:#fff;
  font:600 13px/1 "Archivo",system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .25s;
}
.hot button::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #fff;opacity:0}
.hot.on button{background:var(--accent)}
.hot.on button::after{animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.hot .tip{position:absolute;left:0;top:0;transform:translate(22px,-50%) scale(var(--inv,1));transform-origin:-22px 50%;
  white-space:nowrap;background:#1D2024;color:#fff;font-size:13px;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}
.hot:hover .tip,.hot.on .tip{opacity:1}

header{position:fixed;top:0;left:0;right:0;z-index:6;padding:calc(14px + env(safe-area-inset-top,0px)) 24px 14px;display:flex;align-items:center;gap:12px;pointer-events:none}
header>*{pointer-events:auto}
.logo{font-weight:700;font-stretch:75%;font-size:22px;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo i{display:block;width:12px;height:19px;border:2px solid var(--ink);border-radius:2px;position:relative}
.logo i::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:5px;background:var(--accent)}
.back{font-size:13px;text-decoration:none;color:inherit;opacity:.72;background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}.back:hover{opacity:1}.hspace{flex:1}
.cta{border:0;border-radius:999px;background:var(--accent);color:#fff;padding:11px 18px;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block}

.card{
  position:fixed;z-index:4;left:24px;top:50%;transform:translateY(-50%);width:380px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 26px 24px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .35s;
}
.count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 12px;min-height:1.2em}
.count b{color:var(--accent);font-weight:600}
.card h1{font-weight:650;font-stretch:72%;line-height:.95;margin:0 0 14px;font-size:clamp(38px,3.6vw,56px)}
.card p{font-size:17px;line-height:1.5;margin:0;color:var(--muted)}
.card .cta{margin-top:20px}
.swap{transition:opacity .28s ease,transform .28s ease}
.swap.out{opacity:0;transform:translateY(8px)}
.prog{margin-top:22px;height:2px;background:var(--line);position:relative;border-radius:2px}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0;border-radius:2px}
.cue{position:fixed;z-index:4;left:calc(50% + 200px);bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:14px;color:#1D2024;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.cue span{width:1px;height:32px;background:linear-gradient(#1D2024,transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

#story{position:relative;z-index:1;height:1100vh}
#final{position:relative;z-index:5;background:var(--solid);border-top:1px solid var(--line);padding:96px 48px calc(64px + env(safe-area-inset-bottom,0px))}
#final .in{max-width:1080px;margin:0 auto}
#final h2{font-weight:650;font-stretch:72%;font-size:clamp(40px,5vw,64px);line-height:.95;margin:0 0 18px;max-width:16ch}
#final .lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:52ch;margin:0 0 40px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:28px;margin-bottom:44px}
.cols h3{font-size:17px;margin:0 0 8px;font-weight:600}
.cols p{margin:0;color:var(--muted);line-height:1.5;font-size:15px}
.fine{margin-top:40px;color:var(--muted);font-size:13px}

@media (max-width:860px){
  header{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px}
  .logo{font-size:19px;padding:7px 12px}
  .cta{padding:9px 14px;font-size:14px}
  .card{left:12px;right:12px;width:auto;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:none;padding:16px 18px 18px;border-radius:16px}
  .card h1{font-size:30px;margin-bottom:6px}
  .card p{font-size:15px}
  .count{margin-bottom:6px}
  .prog{margin-top:14px}
  .cue{display:none}
  .hot button{width:26px;height:26px;font-size:12px}
  .hot .tip{display:none}
  #final{padding:64px 20px calc(48px + env(safe-area-inset-bottom,0px))}
  .cols{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){.swap,.card{transition:none}.cue span,.hot.on button::after{animation:none}}