/* THE FIRST NINETY — the clock is the site. Pure black, white type, one red. */
:root{--bg:#000;--fg:#fff;--muted:#a1a1a8;--line:#1c1c20;--line2:#2e2e34;--panel:#0d0d10;--accent:#ff1e2d;
  --fd:"Anton",Impact,sans-serif;--fdw:400;--fdls:.01em;--fb:"Inter Tight",system-ui,sans-serif;--fm:"JetBrains Mono",ui-monospace,monospace;--r:14px}
h1,h2,h3{text-transform:uppercase}
#open{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;align-content:center}
#open .op-num{font:400 clamp(160px,46vw,340px)/.85 var(--fd);color:#ff1e2d;font-variant-numeric:tabular-nums}
#open .op-name{font:400 30px/1 var(--fd);letter-spacing:.12em;margin:14px 0 0;text-align:center;opacity:0;animation:o9in .3s 1.2s forwards}
#open .op-name span{display:block;font:500 11px var(--fm);letter-spacing:.4em;color:#888;margin-top:8px}
#open .op-skip{position:absolute;right:18px;bottom:110px;background:none;border:1px solid #333;color:#aaa;font:600 11px var(--fm);letter-spacing:.2em;padding:10px 14px;border-radius:999px}
#open.done{animation:o9out .4s forwards}@keyframes o9in{to{opacity:1}}@keyframes o9out{to{opacity:0;visibility:hidden}}

/* the scroll clock */
.clockscroll{height:340vh;padding:0;position:relative}
.cs-sticky{position:sticky;top:62px;height:calc(100svh - 62px);display:grid;align-content:center;justify-items:start;padding:0 20px 110px;max-width:1180px;margin:0 auto;overflow:hidden}
.cs-clock{font:400 clamp(120px,34vw,330px)/.82 var(--fd);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#fff}
.cs-clock span:last-child{color:var(--accent)}
.cs-bar{width:min(100%,900px);height:6px;background:#1b1b1f;border-radius:3px;margin:18px 0 16px;overflow:hidden}.cs-bar i{display:block;height:100%;width:0;background:var(--accent)}
.cs-lines{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:clamp(17px,2.4vw,22px)}
.cs-lines li{opacity:.18;transition:opacity .35s,transform .35s;transform:translateX(-6px)}.cs-lines li.on{opacity:1;transform:none}
.cs-lines b{display:inline-block;width:64px;font:600 14px var(--fm);color:var(--accent)}
.cs-h{position:absolute;left:20px;right:20px;bottom:120px;font-size:clamp(30px,6vw,58px);opacity:0;transition:opacity .5s;max-width:900px}.cs-h.on{opacity:1}
@media(min-width:900px){.cs-sticky{padding-left:40px}.cs-h{left:40px}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chips button{border:1px solid var(--line2);background:var(--panel);color:#fff;font:600 15px var(--fb);padding:0 18px;min-height:48px;border-radius:999px;cursor:pointer}
.chips button[aria-checked=true]{background:#fff;color:#000;border-color:#fff}
.btn.big{min-height:62px;font-size:16px;padding:0 30px;margin-top:10px}
.why .quote{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:end;border-left:3px solid var(--accent);padding-left:20px}
.why .quote b{font:400 96px/.9 var(--fd);color:var(--accent)}.why .quote span{color:var(--muted);padding-bottom:12px}

/* drill page */
.setup{padding-top:46px}.setup h1{font-size:clamp(60px,15vw,140px);margin:0}
.lbl{font:600 12px var(--fm);letter-spacing:.24em;color:var(--muted);margin:24px 0 0}
.toggles{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0;color:var(--muted)}.toggles input{accent-color:var(--accent);width:20px;height:20px;vertical-align:-4px;margin-right:6px}

.console{position:fixed;inset:0;z-index:70;background:#000;display:grid;grid-template-rows:auto auto auto 1fr auto auto;justify-items:center;gap:10px;padding:16px 18px calc(18px + env(safe-area-inset-bottom));overflow:auto}
.console.alarm{animation:alarm 1s steps(2) infinite}@keyframes alarm{50%{background:#1a0003}}
.c-top{width:100%;max-width:720px;display:flex;justify-content:space-between;align-items:center;font:600 12px var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.c-top button{background:none;border:1px solid var(--line2);color:#fff;border-radius:999px;padding:10px 16px;font:600 12px var(--fm);letter-spacing:.16em;min-height:44px}
.c-ring{position:relative;width:min(58vw,300px,38svh)}.c-ring svg{transform:rotate(-90deg)}
.c-ring .rb{fill:none;stroke:#1a1a1e;stroke-width:10}.c-ring .rf{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:553;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.c-time{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(54px,15vw,96px)/1 var(--fd);font-variant-numeric:tabular-nums}
.c-call{max-width:640px;text-align:center;color:var(--accent);font:600 15px/1.4 var(--fm);margin:0}
.c-step{align-self:center;max-width:720px;text-align:center;animation:stepIn .35s cubic-bezier(.2,1,.3,1)}
.c-step span{display:block;font:600 12px var(--fm);letter-spacing:.24em;color:var(--muted);margin-bottom:10px}
.c-step b{font:400 clamp(30px,7.4vw,58px)/1.05 var(--fd);text-transform:uppercase}
@keyframes stepIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.c-done{width:min(100%,520px);min-height:76px;border:0;border-radius:20px;background:var(--accent);color:#fff;font:400 34px var(--fd);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 14px 40px rgba(255,30,45,.35)}
.c-done:active{transform:scale(.97)}
.c-dots{display:flex;gap:6px}.c-dots i{width:22px;height:5px;border-radius:3px;background:#26262b}.c-dots i.ok{background:#fff}.c-dots i.now{background:var(--accent)}

.result{padding-top:40px}.result h2{font-size:clamp(46px,10vw,96px);margin:0}
.splits{list-style:none;padding:0;margin:18px 0;counter-reset:s}.splits li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.splits li b{color:#fff;font:600 14px var(--fm)}.splits li.miss b{color:var(--accent)}
.cardwrap canvas{width:100%;height:auto;border-radius:16px;border:1px solid var(--line2);margin-bottom:12px}