/* Reactdle 2 - one dark look on purpose (the game's own). Lime is the go
   signal; each kind of test has its own color. */
:root{
  color-scheme: dark;
  --bg:#0a0c11; --panel:rgba(18,21,29,.9); --panel-solid:#12151d; --panel-2:#181c27; --line:#242a37; --line-2:#333b4d;
  --fg:#eef1f7; --soft:#c6ccd8; --muted:#8c95a9; --dim:#5d6578;
  --go:#c3ff3d; --go-ink:#0d1400; --wait-bg:#b3122b; --on-wait:#ffffff;
  --good:#c3ff3d; --mid:#ffc93d; --bad:#ff5a6a; --red:#ff4057; --amber:#ffb224; --amber-ink:#1c1000;
  --reflex:#ff6b4a; --aim:#4fd1ff; --brain:#b28cff; --timing:#ffc93d; --words:#5ef0a8;
  --dd:#232a39; --dm:#39425a; --hole:#05070b;
  --ink-red:#ff4d4d; --ink-blue:#4a8dff; --ink-green:#2fd46b; --ink-yellow:#ffd43b;
  --disp:"Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --body:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cb{ --good:#5aa9ff; --mid:#ff9d3d; --bad:#8a93a6 }
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; background:var(--bg)}
/* the page color lives on html only: a body background would paint over the
   z-index:-1 background canvas and hide it */
body{background:transparent; color:var(--fg); font:500 16px/1.5 var(--body); min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden}
button{font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--go); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* reduced motion: no animations or transitions at all. Everything that
   carries meaning is a state (a class), never only an animation. */
.still *, .still *::before, .still *::after{animation:none !important; transition:none !important}
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block}

/* ---------- header ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom:1px solid var(--line); background:rgba(10,12,17,.78); position:relative; z-index:2}
.brand{display:flex; align-items:baseline; gap:8px; min-width:0}
.logo{font:700 italic 25px/1 var(--disp); letter-spacing:.03em; text-transform:uppercase; color:var(--fg); text-decoration:none}
.logo span{color:var(--go)}
.beta{font:700 10px var(--disp); letter-spacing:.14em; color:var(--go-ink); background:var(--go); border-radius:4px; padding:1px 5px; align-self:center}
.beta:empty{display:none}
.puzzno{color:var(--muted); font:600 13px var(--disp); font-variant-numeric:tabular-nums}
nav{display:flex; gap:6px}
.iconbtn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:transparent; border:1px solid var(--line-2); color:var(--muted); padding:0}
.iconbtn svg{width:18px; height:18px}
.iconbtn:hover:not(:disabled){color:var(--fg); border-color:var(--muted)}
.iconbtn:disabled,.iconbtn.off{opacity:.35}
.iconbtn.on{color:var(--go); border-color:rgba(195,255,61,.6)}
.iconbtn.dcbtn:hover:not(:disabled){color:#8c95ff; border-color:#5865f2}
/* ---------- Reactdle on Discord (js/discord.js) ---------- */
.dc-lead{margin:0 0 12px; color:var(--soft)}
.dc-demo{display:flex; gap:10px; padding:12px; border-radius:12px; background:#313338; color:#dbdee1; font:400 13.5px/1.35 system-ui, sans-serif; text-align:left}
.dc-ava{flex:none; width:36px; height:36px; border-radius:50%; background:#0a0c11; display:grid; place-items:center}
.dc-ava svg{width:22px; height:22px}
.dc-msg{min-width:0}
.dc-msg > b{color:#fff; font-weight:600}
.dc-msg > b span{margin-left:4px; padding:1px 4px; border-radius:3px; background:#5865f2; color:#fff; font-size:10px; vertical-align:2px}
.dc-msg p{margin:2px 0 6px !important; color:#dbdee1 !important; font-size:13.5px !important}
.dc-msg u{text-decoration:none; color:#c9cdfb; background:rgba(88,101,242,.3); border-radius:3px; padding:0 2px}
.dc-embed{display:grid; gap:3px; padding:8px 10px; border-left:4px solid #c3ff3d; border-radius:4px; background:#2b2d31}
.dc-embed b{color:#00a8fc; font-weight:600}
.dc-embed small{font-size:11.5px; color:#b5bac1}
.dc-steps{list-style:none; counter-reset:dc; margin:14px 0 0; padding:0; display:grid; gap:10px}
.dc-steps li{counter-increment:dc; position:relative; display:grid; gap:10px; padding:12px 14px 12px 48px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line-2); text-align:left}
.dc-steps li::before{content:counter(dc); position:absolute; left:13px; top:11px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); background:var(--panel-solid); color:var(--soft); font:700 13px/22px var(--disp); text-align:center}
.dc-steps li.done::before{content:"✓"; background:var(--go); border-color:var(--go); color:var(--go-ink)}
.dc-steps b{display:block; font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.05em}
.dc-steps small{display:block; margin-top:3px; font-size:13px; color:var(--muted)}
.dc-steps code{padding:1px 5px; border-radius:5px; background:var(--panel-solid); color:var(--fg); font:600 12.5px ui-monospace, Consolas, monospace; white-space:nowrap}
.dc-btn{justify-self:start; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 18px; border-radius:21px; background:#5865f2; color:#fff; font:700 14px var(--body); text-decoration:none}
.dc-btn:hover{background:#4752c4}
.dc-btn svg{width:20px; height:20px}
.dc-connect{display:grid; gap:6px}
.dc-ok{font-weight:700; color:var(--go)}
.dc-ok::before{content:"✓ "}
.dc-nudge{display:flex; align-items:center; gap:10px; margin:12px 0 0; padding:10px 12px; border-radius:14px; background:rgba(88,101,242,.14); border:1px solid rgba(88,101,242,.45); text-align:left; font-size:13px; line-height:1.35; color:var(--soft)}
.dc-nudge[hidden]{display:none}
.dc-nudge > svg{flex:none; width:22px; height:22px; color:#8c95ff}
.dc-nudge b{color:var(--fg)}
.dc-nudge .dc-btn{flex:none; height:34px; padding:0 14px; font-size:13px}
@media (max-width:380px){ .dc-nudge{flex-wrap:wrap} .dc-nudge span{flex:1 1 200px} }
.dc-link{padding:0; background:none; border:0; color:var(--fg); font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.iconbtn.sm{width:30px; height:30px; font-size:13px}
main{flex:1; width:100%; max-width:660px; margin:0 auto; padding:16px 16px 8px}

/* ---------- buttons ---------- */
.primary{display:block; width:100%; border:0; border-radius:14px; padding:15px 18px; background:var(--go); color:var(--go-ink); font:700 17px/1.2 var(--disp); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 0 0 1px rgba(195,255,61,.35), 0 12px 32px -12px rgba(195,255,61,.6); transition:transform .08s, filter .15s, opacity .2s; text-align:center; text-decoration:none}
.primary:hover:not(:disabled){filter:brightness(1.07)}
.primary:active:not(:disabled){transform:translateY(1px) scale(.995)}
.primary:disabled{opacity:.45}
.primary.sm{display:inline-block; width:auto; padding:9px 14px; font-size:13px; border-radius:10px}
.ghost{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:transparent; border:1px solid var(--line-2); color:var(--soft); border-radius:12px; padding:11px 14px; font:600 14px var(--disp); letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
.ghost:hover{color:var(--fg); border-color:var(--muted)}
.ghost.sm{padding:7px 11px; font-size:12px; border-radius:9px}
.kicker{font:600 12px var(--disp); letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.sub{font:600 12px var(--disp); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px}

/* ---------- home ---------- */
.hero{text-align:center; padding:12px 0 6px}
.hero h2{margin:.28em 0 .2em; font:700 italic clamp(44px, 12vw, 66px)/.95 var(--disp); text-transform:uppercase; letter-spacing:.01em}
.hero h2 em{font-style:inherit; color:var(--go); text-shadow:0 0 28px rgba(195,255,61,.35)}
.hero p{margin:0; color:var(--muted)}
.hsub{margin:8px 0 0; font:600 11.5px var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.modeswitch{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:18px auto 0; max-width:320px; background:var(--panel); border:1px solid var(--line); border-radius:12px}
.modeswitch button{border:0; background:transparent; color:var(--muted); border-radius:9px; padding:8px; font:700 13px var(--disp); letter-spacing:.1em; text-transform:uppercase}
.modeswitch button.on{background:var(--panel-2); color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2)}
.modeswitch button[data-mode="hard"].on{color:var(--amber)}
.hardnote{margin:10px auto 0; max-width:30em; text-align:center; font-size:13.5px; color:var(--soft)}
.lineup{list-style:none; margin:16px 0; padding:0; display:grid; gap:8px}
.lc{display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--c); border-radius:14px; padding:8px 14px 8px 8px; min-width:0}
.lc .demo{height:52px; border-radius:9px; border:0; background:var(--panel-2); overflow:hidden; color:var(--c)}
.lc-b{min-width:0}
.lc-cat{display:block; font:600 11px var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--c)}
.lc b{display:block; font:700 16px/1.25 var(--disp); letter-spacing:.03em; text-transform:uppercase}
.lc-n{font:700 13px var(--disp); color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap}
.lc.done .lc-n{font-size:14px}
.lc.g .lc-n{color:var(--good)} .lc.y .lc-n{color:var(--mid)} .lc.r .lc-n{color:var(--bad)}
.ways{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.way{display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; min-width:0}
.way:hover{border-color:var(--line-2)}
.way b{font:700 14px/1.2 var(--disp); text-transform:uppercase; letter-spacing:.04em}
.way span{font-size:12.5px; color:var(--muted); line-height:1.35}
@media (max-width:520px){ .ways{grid-template-columns:1fr} }
.challenge{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; margin:16px 0 0; padding:12px 14px; border-radius:14px; background:rgba(195,255,61,.08); border:1px solid rgba(195,255,61,.45)}
.challenge b{color:var(--fg)}
.challenge span{display:block; font-size:14px; color:var(--soft)}
.cacts{display:flex; align-items:center; gap:8px}
.cnote{font-size:13px; color:var(--muted)}

/* ---------- play ---------- */
.track{list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px}
.track li{min-width:0; background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--c); border-radius:10px; padding:7px 3px 6px; text-align:center; color:var(--dim)}
.track .t{display:block; font:600 11.5px/1.3 var(--disp); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.track li.now{border-color:var(--go); border-top-color:var(--c); color:var(--fg); box-shadow:inset 0 0 0 1px var(--go)}
.track li.done{color:var(--muted)}
.track li.g .t{color:var(--good)} .track li.y .t{color:var(--mid)} .track li.r .t{color:var(--bad)}
.track.long{display:flex; align-items:center; gap:12px}
.track.long .bar{flex:1; height:8px; border-radius:4px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line)}
.track.long .bar i{display:block; height:100%; background:var(--go); border-radius:4px}
.track.long span{font:600 12.5px var(--disp); color:var(--muted); font-variant-numeric:tabular-nums}
.stagehead{display:flex; align-items:baseline; gap:10px; margin:0 2px 10px; min-width:0}
.stageno{font:700 13px var(--disp); color:var(--go); letter-spacing:.12em; font-variant-numeric:tabular-nums; white-space:nowrap}
.stagehead h2{margin:0; font:700 20px/1.1 var(--disp); letter-spacing:.03em; text-transform:uppercase; min-width:0}
.mtag{display:inline-block; margin-left:8px; vertical-align:3px; font:700 10px var(--disp); letter-spacing:.14em; padding:2px 6px; border-radius:5px; border:1px solid var(--line-2); color:var(--muted)}
.mtag.hard{color:var(--amber-ink); background:var(--amber); border-color:var(--amber)}
.live{margin-left:auto; font:600 13px var(--disp); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.arena{position:relative; height:clamp(360px, 60vh, 540px); background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.arena.auto{height:auto; min-height:360px; touch-action:manipulation}
.card{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center}
.arena.auto .card{position:relative; min-height:358px}
/* the start card can need more room than a test's fixed panel (small phones, or
   Hard mode's extra line), so the panel grows while the card is showing */
.arena:has(> .card.ready){height:auto; min-height:clamp(360px, 60vh, 540px)}
.arena:has(> .card.ready) > .card{position:relative; inset:auto; min-height:clamp(358px, calc(60vh - 2px), 538px)}
.card .demo.big{width:min(280px, 82%); height:118px; border-radius:16px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--c); margin-bottom:4px}
.card h3{margin:2px 0 0; font:700 26px/1.1 var(--disp); text-transform:uppercase; letter-spacing:.03em}
.card p{margin:0; color:var(--muted); max-width:28em; font-size:15px}
.card p b{color:var(--fg)}
.card .hardhow{color:var(--amber); font-size:14px}
.card .primary{max-width:320px; margin-top:10px}
.hint{margin:0; font-size:12.5px; color:var(--dim)}
#tryBtn{margin-top:2px}
.card.in{animation:cardin .22s cubic-bezier(.2,.8,.3,1)}
@keyframes cardin{from{opacity:0; transform:translateY(10px) scale(.98)}}
.bigtime{font:700 clamp(60px, 17vw, 88px)/1 var(--disp); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.bigtime small{font-size:.32em; color:var(--muted); margin-left:.18em; letter-spacing:.06em}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font:700 12.5px var(--disp); letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor}
.chip.g{color:var(--good)} .chip.y{color:var(--mid)} .chip.r{color:var(--bad)}
.chip.pb{color:var(--go-ink); background:var(--go); border-color:var(--go)}
.detail{font-size:14px}
.cardbtns{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%}

/* ---------- results ---------- */
.score{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:22px 18px 18px; text-align:center; box-shadow:0 30px 80px -40px rgba(195,255,61,.25)}
.mascot-wrap{display:flex; justify-content:center; margin:12px 0 0}
.mascot{width:112px; height:112px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.rank{font:700 italic 24px var(--disp); text-transform:uppercase; letter-spacing:.04em; margin-top:6px}
.avg{margin:8px 0 2px; font:700 clamp(64px, 19vw, 100px)/1 var(--disp); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.avg small{font-size:.3em; color:var(--muted); margin-left:.15em; letter-spacing:.06em}
.avglabel{font:600 12px var(--disp); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.pct{margin:12px 0 0; font:600 15px var(--disp); color:var(--soft); letter-spacing:.02em}
.pct b{color:var(--go); font-size:18px}
.pct small{color:var(--dim); font-size:12px}
.strip{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:16px auto 10px; max-width:420px}
.sq{width:28px; height:28px; border-radius:8px; background:var(--line)}
.sq.g{background:var(--good); box-shadow:0 0 16px rgba(195,255,61,.35)} .sq.y{background:var(--mid)} .sq.r{background:var(--bad)}
.rows{list-style:none; margin:18px 0 12px; padding:0; display:grid; gap:8px; text-align:left}
.rows li{display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:10px 14px 10px 10px}
.rows .rd{width:10px; height:36px; border-radius:5px; background:var(--c)}
.rows .rx{min-width:0}
.rows b{display:block; font:700 15px/1.2 var(--disp); letter-spacing:.03em; text-transform:uppercase}
.rows small{display:block; font-size:12.5px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.rows .tm{font:700 19px var(--disp); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.rows li.g .tm{color:var(--good)} .rows li.y .tm{color:var(--mid)} .rows li.r .tm{color:var(--bad)}
.pbtag{display:inline-block; margin-left:8px; vertical-align:2px; font:700 9.5px var(--disp); letter-spacing:.12em; color:var(--go-ink); background:var(--go); border-radius:4px; padding:1px 5px}
.reveal .rows li{animation:rowin .45s cubic-bezier(.2,.8,.3,1) both}
.reveal .mascot{animation:pop .6s cubic-bezier(.2,1.6,.4,1) 1.1s both}
@keyframes rowin{from{opacity:0; transform:translateX(-14px)}}
@keyframes pop{from{opacity:0; transform:scale(.4) rotate(-12deg)}}
.total{margin:0 0 14px; font:600 12.5px var(--disp); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.vs{margin:4px 0 16px; padding:14px; border-radius:14px; background:var(--panel-2); border:1px solid rgba(195,255,61,.4)}
.vs h3{margin:0 0 10px; font:700 18px var(--disp); text-transform:uppercase; letter-spacing:.03em}
.vs table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14px}
.vs th{font:600 11px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:right; padding:4px 6px}
.vs td{padding:6px; text-align:right; border-top:1px solid var(--line)}
.vs td:first-child{text-align:left; font:600 13px var(--disp); text-transform:uppercase; letter-spacing:.05em}
.vs td.w{color:var(--go); font-weight:800}
.vs tr.tot td{font-weight:800; font-size:15px}
.actions{display:grid; gap:8px}
.actions2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.next{margin:14px 0 0; color:var(--muted); font-size:14px}
.next time{font:700 15px var(--disp); color:var(--fg); font-variant-numeric:tabular-nums}
.after{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px}

/* ---------- practice + archive ---------- */
.pagehead h2{margin:4px 0 6px; font:700 italic 36px/1 var(--disp); text-transform:uppercase}
.pagehead p{margin:0 0 6px; color:var(--muted)}
.pcat h3{margin:22px 0 10px; font:700 18px var(--disp); text-transform:uppercase; letter-spacing:.04em; color:var(--c); display:flex; align-items:baseline; gap:10px}
.pcat h3 small{font:500 13px var(--body); text-transform:none; letter-spacing:0; color:var(--muted)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:8px}
.ptile{display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 12px 8px 8px; min-width:0; color:var(--c)}
.ptile:hover{border-color:var(--c)}
.ptile .demo.sm{height:46px; border-radius:8px; background:var(--panel-2)}
.pt-b{min-width:0; color:var(--fg)}
.pt-b b{display:block; font:700 14.5px/1.2 var(--disp); text-transform:uppercase; letter-spacing:.03em}
.pt-b small{display:block; font-size:12px; color:var(--muted)}
.spark{width:80px; height:24px}
.spark .sl{fill:none; stroke:var(--c, var(--go)); stroke-width:1.6}
.spark .sa{fill:var(--c, var(--go)); opacity:.12}
.spark .se{fill:var(--c, var(--go))}
.archive{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.archive li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 14px}
.archive li.empty{display:block; color:var(--muted)}
.ar-h b{display:block; font:700 15px var(--disp); text-transform:uppercase; letter-spacing:.03em}
.ar-h span{font-size:12.5px; color:var(--muted)}
.ar-t{display:flex; flex-wrap:wrap; gap:4px; min-width:0}
.ar-t span{font:600 11px var(--disp); letter-spacing:.06em; text-transform:uppercase; color:var(--c); border:1px solid var(--line-2); border-radius:6px; padding:1px 6px}
.ar-r{display:flex; align-items:center; gap:10px}
.ar-you{font:700 13px var(--disp); color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.ar-you.none{color:var(--dim); font-weight:600}
@media (max-width:560px){ .archive li{grid-template-columns:1fr auto} .ar-t{grid-column:1 / -1; grid-row:2} }

/* ---------- dialogs ---------- */
dialog{background:var(--panel-solid); color:var(--fg); border:1px solid var(--line-2); border-radius:22px; padding:22px 20px 18px; width:min(92vw, 480px); max-height:88dvh; overflow:auto}
dialog::backdrop{background:rgba(4,5,8,.74)}
dialog h2{margin:0 0 12px; font:700 22px var(--disp); text-transform:uppercase; letter-spacing:.04em}
dialog p{margin:0 0 10px; color:var(--soft); font-size:15px}
dialog b.g{color:var(--good)} dialog b.y{color:var(--mid)} dialog b.r{color:var(--bad)}
dialog > .primary, dialog > .ghost{width:100%; margin-top:10px}
.dlgbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.dlgbtns > *{flex:1}
.tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:var(--panel-2); border-radius:11px; margin-bottom:14px}
.tabs button{border:0; background:transparent; color:var(--muted); border-radius:8px; padding:7px; font:700 12px var(--disp); letter-spacing:.1em; text-transform:uppercase}
.tabs button.on{background:var(--panel-solid); color:var(--fg)}
.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.stat{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px 4px; text-align:center}
.stat .n{font:700 22px var(--disp); font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.chart{width:100%; height:auto; display:block}
.chart .cg{stroke:var(--line); stroke-dasharray:3 4}
.chart .cl{fill:var(--muted); font:600 11px var(--disp)}
.chart .ca{fill:var(--go); opacity:.10}
.chart .cline{fill:none; stroke:var(--go); stroke-width:2}
.chart .cdot{fill:var(--go)} .chart .cend{fill:var(--go); stroke:var(--panel-solid); stroke-width:2}
.empty{color:var(--muted); font-size:14px}
.tstats{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.tstats li{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:8px 10px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--c); border-radius:10px}
.ts-n{min-width:0} .ts-n b{display:block; font:700 13.5px var(--disp); text-transform:uppercase; letter-spacing:.03em} .ts-n small{font-size:12px; color:var(--muted)}
.ts-b{font:700 14px var(--disp); text-align:right; font-variant-numeric:tabular-nums} .ts-b small{display:block; font:600 10px var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.badges{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px}
.badges li{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); opacity:.5}
.badges li.on{opacity:1; border-color:rgba(195,255,61,.5)}
.bi{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--bg); color:var(--dim)}
.badges li.on .bi{background:var(--go); color:var(--go-ink)}
.bi svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.badges b{display:block; font:700 12.5px/1.25 var(--disp); text-transform:uppercase; letter-spacing:.03em}
.badges small{display:block; font-size:11.5px; color:var(--muted); line-height:1.35}
@media (max-width:440px){ .badges{grid-template-columns:1fr} }
.setrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.setrow label{min-width:0} .setrow b{display:block; font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.05em} .setrow small{display:block; font-size:12.5px; color:var(--muted)}
.setrow input[type=range]{width:160px; accent-color:var(--go)}
.setnote{font-size:12.5px !important; color:var(--muted) !important; margin:8px 0 4px !important}
.tracks{display:grid; gap:6px}
.trk{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); cursor:pointer}
.trk:has(input:checked){border-color:var(--go)}
.trk input{accent-color:var(--go); width:17px; height:17px; margin:0}
.trk b{display:block; font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.04em} .trk small{font-size:12px; color:var(--muted)}
.bgpick{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; margin-bottom:6px}
.bgpick label{display:block; cursor:pointer}
.bgpick input{position:absolute; opacity:0; pointer-events:none}
.bgpick span{display:block; text-align:center; padding:9px 4px; border-radius:10px; border:1px solid var(--line-2); font:700 11.5px var(--disp); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.bgpick .bgdaily{grid-column:1 / -1}
.bgpick span small{display:block; font:500 11px var(--body); text-transform:none; letter-spacing:0; color:var(--muted); margin-top:2px}
.bgpick input:checked + span{border-color:var(--go); color:var(--go); background:rgba(195,255,61,.07)}
.bgpick input:focus-visible + span{outline:2px solid var(--go); outline-offset:2px}
@media (max-width:420px){ .bgpick{grid-template-columns:1fr 1fr} }
.bgpick.tappick{grid-template-columns:repeat(5, minmax(0,1fr))}
@media (max-width:420px){ .bgpick.tappick{grid-template-columns:repeat(3, minmax(0,1fr))} }
.sw{position:relative; display:inline-block; width:44px; height:26px; flex:none}
.sw input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:1}
.sw i{position:absolute; inset:0; border-radius:999px; background:var(--line-2); transition:background .15s; pointer-events:none}
.sw i::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--fg); transition:transform .15s}
.sw input:checked + i{background:var(--go)}
.sw input:checked + i::after{transform:translateX(18px); background:var(--go-ink)}
.sw input:focus-visible + i{outline:2px solid var(--go); outline-offset:2px}
#shareImg{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}
.fld{display:block; font:600 12px var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 0 6px}
.fld small{text-transform:none; letter-spacing:0}
dialog input[type=text], dialog textarea{width:100%; background:var(--panel-2); color:var(--fg); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; font:500 15px var(--body); margin-bottom:10px}
dialog input[type=text]:focus, dialog textarea:focus{outline:2px solid var(--go); outline-offset:1px}
#chalOut{margin-top:10px}

/* ---------- account ---------- */
.acct{padding:12px 14px 10px; margin:0 0 14px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line-2)}
.acct b{display:block; font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.05em}
.acct small{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}
.gis{margin-top:10px; min-height:44px}
.acct-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.acct-msg{margin:8px 0 0 !important; font-size:12.5px !important; color:var(--amber) !important; min-height:0}
.acct-msg:empty{display:none}
.acct-priv{display:inline-block; margin-top:6px; font-size:12px; color:var(--dim)}
.gis-host iframe{color-scheme:light}
/* Discord, Reddit and passkey buttons, dressed like Google's filled_black pill */
.alt-host{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:8px}
.alt-host:empty{display:none}
.alt-btn{position:relative; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:260px; max-width:100%; height:40px; margin:0; padding:0 38px; border-radius:20px; background:#131314; border:1px solid #8e918f; color:#e3e3e3; font:500 14px/1 Roboto, "Segoe UI", system-ui, sans-serif; letter-spacing:.01em; text-decoration:none; cursor:pointer}
.alt-btn:hover{background:#202124; border-color:#c4c7c5}
.alt-btn:disabled, .alt-btn.busy{opacity:.55; cursor:progress}
.alt-btn svg{position:absolute; left:11px; top:9px; width:20px; height:20px}
.alt-new{margin:0; padding:2px 0; background:none; border:0; color:var(--muted); font:500 12.5px var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.alt-new:hover{color:var(--fg)}
.pk-new{width:260px; max-width:100%}
.pk-new[hidden]{display:none}
.pk-new input{padding:9px 12px !important; font-size:14px !important}
.alt-msg{margin:0 !important; font-size:12.5px; color:var(--amber)}
.alt-msg:empty{display:none}   /* else Chrome paints the button frame white on a dark page */
.homeacct{margin-top:12px}
.ha-out{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; padding:10px 12px 10px 14px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line)}
.ha-out span{font-size:13.5px; color:var(--soft); flex:1 1 180px}
.ha-out .gis-host{min-height:40px; min-width:190px; display:flex; align-items:center}
.ha-btns{display:flex; flex-direction:column; align-items:center; gap:2px}
.ha-more{margin:0; padding:2px 4px; background:none; border:0; color:var(--dim); font:500 12px var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.ha-more:hover{color:var(--soft)}
.ha-in{display:flex; gap:8px}
.ha-in > button{display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border-radius:12px; background:none; border:1px dashed var(--line-2); color:var(--muted); font:500 13px var(--body); cursor:pointer}
.ha-in > button:hover{color:var(--fg); border-color:var(--dim)}
.ha-acct{flex:1; min-width:0}
.ha-acct span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ha-acct b{color:var(--fg); font-weight:700}
.ha-acct i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--go); box-shadow:0 0 8px var(--go)}
.ha-in > .ha-fr{border-style:solid; color:var(--fg); font:700 12px var(--disp); letter-spacing:.08em; text-transform:uppercase}

/* ---------- friends ---------- */
.frcard{margin:4px 0 16px; padding:14px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line-2); text-align:left}
.frcard h3{margin:0 0 8px; font:700 15px var(--disp); text-transform:uppercase; letter-spacing:.06em; color:var(--go)}
.fr-cta{display:flex; align-items:center; gap:12px}
.fr-cta span{flex:1; font-size:13.5px; color:var(--muted)}
.fr-cta b{display:block; color:var(--fg); font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px}
.fr-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:12.5px; color:var(--muted)}
.fr-list{list-style:none; margin:0; padding:0}
.fr-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto 76px; align-items:center; gap:10px; padding:9px 6px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
.fr-list > li:first-child{border-top:0}
.fr-row[data-key]{cursor:pointer; border-radius:8px}
.fr-row[data-key]:hover, .fr-row.open{background:rgba(255,255,255,.035)}
.fr-row.me{background:rgba(195,255,61,.07); border-radius:8px}
.fr-rank{font:700 14px var(--disp); color:var(--muted); text-align:center}
.fr-row.first .fr-rank{color:var(--go)}
.fr-name{font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fr-row:not(.none) .fr-name{display:flex; align-items:center; gap:6px}
.fr-name .nm{min-width:0; overflow:hidden; text-overflow:ellipsis}
.fr-dev{flex:none; display:inline-flex; width:15px; height:15px; color:var(--muted)}
.fr-dev svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fr-row.me .fr-name{color:var(--go)}
.fr-sq{display:flex; gap:3px}
.fr-sq .sq{width:10px; height:10px; border-radius:3px; box-shadow:none}
.fr-avg{text-align:right; line-height:1.15}
.fr-avg b{display:block; font-size:14px}
.fr-gap{font-size:11.5px; color:var(--muted)}
.fr-row.none{grid-template-columns:22px minmax(0,1fr) auto; color:var(--dim)}
.fr-row.none .fr-name{color:var(--muted)}
.fr-wait{font-size:12px; color:var(--dim)}
.fr-cmp{padding:4px 6px 12px}
.fr-cmp table{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.fr-cmp th{font:600 11px var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; padding:4px 6px}
.fr-cmp td{padding:5px 6px; text-align:right; border-top:1px solid var(--line)}
.fr-cmp td:first-child{text-align:left; font:600 12px var(--disp); text-transform:uppercase; letter-spacing:.05em; color:var(--soft)}
.fr-cmp td.w{color:var(--go); font-weight:800}
.fr-cmp p{margin:8px 0 0; font-size:13px}
.frmode{margin:0 auto 12px}
.fr-day{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.fr-day span{text-align:center}
.fr-day b{display:block; font:700 16px var(--disp); text-transform:uppercase; letter-spacing:.05em}
.fr-day small{font-size:12px; color:var(--muted)}
.fr-day .iconbtn{font:700 20px/1 var(--disp); color:var(--soft)}
.fr-day .iconbtn:disabled{opacity:.3}
.fr-sub{text-align:center; font-size:12.5px !important; color:var(--muted) !important}
.fr-note{font-size:12.5px !important; color:var(--muted) !important; margin-top:10px !important}
.fr-note i, .fr-week .dots i{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--dd); vertical-align:-1px}
.fr-week .dots i.play, .fr-note i.play{background:var(--dm)}
.fr-week .dots i.win, .fr-note i.win{background:var(--go)}
.fr-week{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.fr-week th{font:600 11px var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; padding:4px 5px}
.fr-week td{padding:8px 5px; text-align:right; border-top:1px solid var(--line)}
.fr-week th:first-child, .fr-week td:first-child{text-align:left; font:700 13px var(--disp); text-transform:uppercase; letter-spacing:.04em; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fr-week .dots{text-align:center; white-space:nowrap}
.fr-week .dots i{margin:0 1px}
.fr-week tr.me td{background:rgba(195,255,61,.07)}
.fr-week tr.me td:first-child{color:var(--go)}
.fr-empty{text-align:center; padding:14px 6px 4px}
.fr-empty b{font:700 15px var(--disp); text-transform:uppercase; letter-spacing:.05em}
.fr-empty p{font-size:13.5px; margin:6px 0 12px}
.fr-load{text-align:center; color:var(--muted) !important; font-size:13.5px !important; padding:14px 0}
.fr-add{padding:14px; border-radius:16px; background:var(--panel-2); border:1px solid rgba(195,255,61,.35)}
.fr-add .fr-lbl{margin-top:0; color:var(--fg)}
.fr-or{display:flex; align-items:center; gap:10px; margin:14px 0 10px; font:600 11px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fr-or::before, .fr-or::after{content:""; flex:1; height:1px; background:var(--line-2)}
.fr-addrow{display:block; width:100%; margin-top:8px; padding:11px; border-radius:10px; background:none; border:1px dashed var(--line-2); color:var(--go); font:700 13px var(--disp); letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.fr-addrow:hover{border-color:var(--go)}
.fr-btns{display:flex; gap:6px; flex:none}
.primary.sm{width:auto; padding:9px 14px; font-size:13px; border-radius:10px; flex:none}
.iconbtn.pip{position:relative; color:var(--go); border-color:rgba(195,255,61,.5)}
.iconbtn.pip::after{content:"+"; position:absolute; top:-6px; right:-6px; width:15px; height:15px; border-radius:50%; background:var(--go); color:var(--go-ink); font:800 12px/15px var(--body); text-align:center}
.fr-code{text-align:center}
#frTabs{grid-template-columns:repeat(4, auto)}   /* Global, Friends, 7 days, Add friends */
#frTabs button{padding:7px 4px; letter-spacing:.06em; white-space:nowrap}
@media (max-width:400px){ #frTabs button{font-size:11px; letter-spacing:.02em; padding:7px 2px} }
#frTabs button[data-tab="people"]:not(.on){color:var(--go)}
.ha-in > .ha-fr.add{background:var(--go); border-color:var(--go); color:var(--go-ink)}
.fr-code small{display:block; font:600 11px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fr-code b{display:block; margin:4px 0 2px; font:700 30px var(--disp); letter-spacing:.12em; color:var(--go); user-select:all}
.fr-code .acct-btns{justify-content:center}
.fr-fine{font-size:12.5px !important; color:var(--muted) !important; margin:8px 0 12px !important}
.fr-check{display:flex; align-items:center; gap:10px; margin:16px 0 0; font-size:14px; cursor:pointer}
.fr-check input{width:18px; height:18px; margin:0; accent-color:var(--go); flex:none}
.fr-name .nm small{font-size:11px; color:var(--muted); font-weight:500}
#frOutBoard{margin-bottom:14px}
#frOutBoard:empty, #frOutBoard[hidden]{display:none}
.fr-cta .fr-btns{display:flex; gap:6px; flex-wrap:wrap}
.fr-lbl{display:block; margin:14px 0 6px; font:600 12px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fr-inline{display:flex; gap:8px}
.fr-inline input{margin:0 !important; flex:1; min-width:0}
.fr-inline .primary, .fr-inline .ghost{width:auto; flex:none; padding:10px 18px}
#frCodeIn{font:700 17px var(--disp) !important; letter-spacing:.12em; text-transform:uppercase}
.fr-people{list-style:none; margin:0 0 4px; padding:0}
.fr-people li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--line); font:700 14px var(--disp); text-transform:uppercase; letter-spacing:.04em}
.fr-people li:first-child{border-top:0}
.fr-flash{padding:10px 12px; border-radius:12px; background:rgba(195,255,61,.1); border:1px solid rgba(195,255,61,.35); color:var(--fg) !important; font-size:14px !important}
.linkbtn{display:block; margin:16px 0 0; padding:0; background:none; border:0; color:var(--soft); font:600 13px var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
@media (max-width:420px){
  .fr-row{gap:8px; grid-template-columns:20px minmax(0,1fr) auto 66px}
  .fr-week .dots i{width:8px; height:8px; margin:0}
  /* five header icons since Friends: the puzzle number is on the home kicker anyway */
  .puzzno{display:none}
  .logo{font-size:21px}
  .top{gap:6px; padding-left:12px; padding-right:12px}
  nav{gap:3px}
  .iconbtn{width:31px; height:31px}
  .iconbtn svg{width:17px; height:17px}
  .logo{font-size:19px}
}
@media (max-width:379px){ .beta{display:none} }
/* six header icons since More games: squeeze a little more on the smallest phones */
@media (max-width:350px){ .iconbtn{width:27px; height:27px} .iconbtn svg{width:15px; height:15px} .logo{font-size:16px} nav{gap:2px} .top{padding-left:10px; padding-right:10px} }
@media (max-width:350px){ .fr-row{grid-template-columns:20px minmax(0,1fr) 66px} .fr-row .fr-sq{display:none} }
@media (max-width:420px){ .ha-out{justify-content:center; text-align:center} }

/* ---------- toasts ---------- */
#toasts{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:50; display:grid; gap:8px; width:min(92vw, 380px); pointer-events:none}
.toast{padding:12px 16px; border-radius:14px; background:var(--panel-solid); border:1px solid rgba(195,255,61,.55); box-shadow:0 16px 40px -16px rgba(0,0,0,.7); font-size:14px; opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s}
.toast.in{opacity:1; transform:none}
.toast b{display:block; font:700 11px var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--go)}

/* ---------- footer ---------- */
.foot{text-align:center; padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.kofi{display:inline-flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:7px 14px; font:600 13px var(--disp); letter-spacing:.04em}
.kofi:hover{color:var(--go); border-color:var(--go)}
.flinks{margin:12px 0 0; font-size:11.5px; color:var(--dim)}
.flinks + .flinks{margin-top:4px}
.flinks a{color:var(--dim); text-decoration:none}
.flinks a:hover{color:var(--muted); text-decoration:underline}

/* ================= the tests ================= */
@keyframes shake{20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}}
.no{animation:shake .3s}

/* wait for green - no transition on the pad, ever: the color change IS the signal */
.pad{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; cursor:pointer; background:var(--panel-2); transition:none !important; padding:20px}
.pad .m{font:700 italic clamp(36px, 10vw, 58px)/1.02 var(--disp); text-transform:uppercase; font-variant-numeric:tabular-nums}
.pad .s{font:600 13px var(--disp); letter-spacing:.14em; text-transform:uppercase; opacity:.8; min-height:1.5em}
.pad[data-s=wait]{background:radial-gradient(120% 95% at 50% 38%, #e0263f, #8a0c22); color:var(--on-wait)}
.pad[data-s=decoy]{background:radial-gradient(120% 95% at 50% 38%, #ffe066, #c9a100); color:var(--amber-ink)}
.pad[data-s=go]{background:radial-gradient(120% 95% at 50% 38%, #d8ff66, #86d314); color:var(--go-ink)}
.pad[data-s=early]{background:radial-gradient(120% 95% at 50% 38%, #ffc34a, #d77f00); color:var(--amber-ink)}
.pad[data-s=shown] .m{color:var(--go); font-style:normal}

/* start lights */
.gantry{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; cursor:pointer; padding:16px}
.pods{display:flex; gap:clamp(6px, 2vw, 14px); padding:14px clamp(10px, 3vw, 20px); background:#05070b; border-radius:18px; border:1px solid var(--line-2)}
.pod{display:flex; flex-direction:column; gap:8px; padding:8px; background:#11141c; border-radius:12px}
.pod i{width:clamp(30px, 9vw, 52px); height:clamp(30px, 9vw, 52px); border-radius:50%; background:#2a1216; box-shadow:inset 0 3px 8px rgba(0,0,0,.6); transition:none !important}
.pod.on i{background:radial-gradient(circle at 40% 35%, #ff8a8a, #ff1f3d 55%, #a0001a); box-shadow:0 0 22px rgba(255,40,70,.75), inset 0 -3px 6px rgba(0,0,0,.35)}
/* the go signal: far brighter than the red, so the switch reads by brightness as well as hue; blue in colorblind mode */
.pod.go i{background:radial-gradient(circle at 40% 35%, #f2ffc9, #b6f53a 50%, #4f8f00); box-shadow:0 0 28px rgba(195,255,61,.85), inset 0 -3px 6px rgba(0,0,0,.25)}
.cb .pod.go i{background:radial-gradient(circle at 40% 35%, #e3f1ff, #5aa9ff 50%, #1c5fb8); box-shadow:0 0 28px rgba(90,169,255,.85), inset 0 -3px 6px rgba(0,0,0,.25)}
.lmsg{font:700 italic clamp(28px, 7vw, 40px) var(--disp); text-transform:uppercase; font-variant-numeric:tabular-nums; min-height:1.2em}
.lsub{font:600 13px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-height:1.4em}
.gantry.foul .lmsg{color:var(--amber)}

/* go / no-go - shape AND color differ, so it never depends on color vision */
.gng{position:absolute; inset:0; display:grid; place-items:center; cursor:pointer}
.gng-shape{width:132px; height:132px; transition:none !important}
.gng-shape.dot{width:10px; height:10px; border-radius:50%; background:var(--dim)}
.gng-shape.go{border-radius:50%; background:radial-gradient(circle at 40% 35%, #e3ff8a, #8fd61a); box-shadow:0 0 40px rgba(195,255,61,.5)}
.gng-shape.stop{border-radius:16px; background:radial-gradient(circle at 40% 35%, #ff8a8a, #d0102c); box-shadow:0 0 40px rgba(255,40,70,.4)}
.gng-shape.hit,.gng-shape.gone{visibility:hidden}
.gng-msg{position:absolute; bottom:18%; font:700 18px var(--disp); letter-spacing:.06em; text-transform:uppercase}
.gng-msg.bad{color:var(--amber)}

/* light pods (was whack-a-mole; id still 'whack'): nine flat pads, one lights
   at a time. Lime = tap it; red with a cross = leave it. Lit state switches
   instantly (no transition) because the reaction clock starts on that frame. */
.holes{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:10px; padding:18px; cursor:pointer}
.hole{position:relative; display:grid; place-items:center; border-radius:18px}
.lpad{position:relative; width:min(78%, 96px); aspect-ratio:1; border-radius:50%; background:#1a1e29; border:3px solid var(--line-2); box-shadow:inset 0 4px 10px rgba(0,0,0,.55); transition:none !important; pointer-events:none}
.lpad::before,.lpad::after{content:""; position:absolute; visibility:hidden}
.hole.up .lpad{background:var(--go); border-color:var(--go); box-shadow:0 0 0 6px rgba(195,255,61,.22), 0 0 30px rgba(195,255,61,.55)}
.hole.up .lpad::before{visibility:visible; inset:22%; border-radius:50%; background:#e6ffa6}
.hole.bombup .lpad{background:var(--red); border-color:var(--red); box-shadow:0 0 0 6px rgba(255,64,87,.2), 0 0 26px rgba(255,64,87,.5)}
.hole.bombup .lpad::before,.hole.bombup .lpad::after{visibility:visible; left:50%; top:50%; width:52%; height:12%; margin:-6% 0 0 -26%; border-radius:6px; background:#fff; transform:rotate(45deg)}
.hole.bombup .lpad::after{transform:rotate(-45deg)}
.hole.whacked .lpad{border-color:var(--go); box-shadow:0 0 0 10px rgba(195,255,61,.12)}
.hole.boom .lpad{border-color:var(--red); box-shadow:0 0 0 10px rgba(255,64,87,.18)}

/* snap */
.snapbox{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; cursor:pointer; padding:16px}
.cards2{display:flex; gap:clamp(12px, 4vw, 26px); align-items:center}
.sc{width:clamp(108px, 30vw, 150px); aspect-ratio:3/4; border-radius:16px; background:var(--panel-2); border:2px solid var(--line-2); display:grid; place-items:center}
.sc svg{width:72%; height:72%; fill:var(--c)}
.sc.prev{opacity:.45; transform:scale(.88)}
.sc.cur.flip{animation:flip .08s ease-out}
@keyframes flip{from{transform:scaleX(.7)}}
.snapbtn{min-width:200px; padding:14px 26px; border:0; border-radius:14px; background:var(--go); color:var(--go-ink); font:700 italic 22px var(--disp); letter-spacing:.06em; pointer-events:none}
.snapmsg{min-height:1.4em; font:700 16px var(--disp); letter-spacing:.06em; text-transform:uppercase}
.snapmsg.good{color:var(--go)} .snapmsg.bad{color:var(--amber)}

/* targets + skeet */
.range{position:absolute; inset:0; cursor:crosshair; background-image:radial-gradient(circle, rgba(238,241,247,.06) 1px, transparent 1.5px); background-size:28px 28px}
.count{position:absolute; top:12px; left:14px; font:700 13px var(--disp); color:var(--muted); letter-spacing:.12em; font-variant-numeric:tabular-nums; pointer-events:none}
.tgt{position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle, #fff 0 12%, var(--go) 13% 31%, #0d1400 32% 45%, var(--go) 46% 64%, rgba(195,255,61,.14) 65%); box-shadow:0 0 0 2px rgba(195,255,61,.5), 0 0 26px rgba(195,255,61,.55); animation:tpop .09s ease-out}
.tgt.fly{left:0; top:0; animation:none; will-change:transform}
@keyframes tpop{from{scale:.55}}
.boom{position:absolute; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; border:3px solid var(--go); pointer-events:none; animation:boom .35s ease-out forwards}
@keyframes boom{to{transform:scale(2.3); opacity:0}}
.miss{position:absolute; font:700 15px var(--disp); color:var(--bad); transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; animation:missf .6s ease-out forwards}
@keyframes missf{to{opacity:0; transform:translate(-50%,-110%)}}

/* number rush + odd one out */
.nums{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); gap:8px; padding:14px}
.nums.n16{grid-template-rows:repeat(4, 1fr)}
.num{border:1px solid var(--line-2); border-radius:14px; background:var(--panel-2); font:700 clamp(22px, 6vw, 32px) var(--disp); color:var(--fg); touch-action:none}
.num.done{background:transparent; border-color:var(--line); color:var(--dim)}
.num.no{border-color:var(--bad)}
.oddgrid{position:absolute; inset:0; display:grid; gap:6px; padding:14px; align-content:center}
.oc{aspect-ratio:1; max-height:64px; border:0; border-radius:10px; background:transparent; padding:4px; display:grid; place-items:center; touch-action:none}
.oc svg{width:100%; height:100%}
.sh-fill{fill:var(--c)} .sh-line{fill:none; stroke:var(--c); stroke-width:4; stroke-linecap:round}
.oc.found{background:rgba(195,255,61,.2); box-shadow:inset 0 0 0 2px var(--go)}
.oc.no{background:rgba(255,90,106,.18)}

/* color clash */
.clash{position:absolute; inset:0; display:flex; flex-direction:column; gap:14px; padding:16px}
.stim{flex:1; display:grid; place-items:center; min-height:0}
.wordsvg{width:min(100%, 440px); height:auto; max-height:100%}
.cw{font:700 92px var(--disp); letter-spacing:.04em; fill:var(--fg)}
.cw.fix{fill:var(--dim); font-size:60px}
.opts{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.opt{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:14px; padding:19px 6px; font:700 16px var(--disp); letter-spacing:.08em; touch-action:none}
.opt kbd{position:absolute; top:6px; left:9px; font:600 10.5px var(--disp); color:var(--dim)}
.sw8{width:16px; height:16px; flex:none}
.opt.ok{border-color:var(--go); background:rgba(195,255,61,.14)}
.opt.no{border-color:var(--bad); background:rgba(255,90,106,.14)}
@media (max-width:520px){ .opts{grid-template-columns:1fr 1fr} .opt{padding:22px 6px} }

/* arrow storm */
.arrows{position:absolute; inset:0; display:flex; flex-direction:column; padding:16px; gap:14px}
.arow{flex:1; position:relative; display:grid; place-items:center; min-height:0}
.arow svg{width:min(100%, 460px); height:auto}
.ag path{fill:none; stroke:var(--fg); stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.ag .amid path{stroke:var(--c); stroke-width:7}
.afix{position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--dim)}
.abtns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.abtn{padding:22px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line-2); font-size:28px; color:var(--fg); touch-action:none}
.abtn.no{border-color:var(--bad)}

/* quiz family: math, count, trivia, true or false, word or not */
.quiz{display:flex; flex-direction:column; gap:18px; padding:26px 16px 18px}
.q{margin:6px 0 4px; font:700 clamp(21px, 5.6vw, 27px)/1.28 var(--disp); text-align:center; text-wrap:balance}
.q.big{font-size:clamp(40px, 11vw, 60px); font-variant-numeric:tabular-nums}
.q.word{font-size:clamp(36px, 10vw, 56px); letter-spacing:.04em; text-transform:lowercase; min-height:1.3em}
.q.def{font:600 italic clamp(20px, 5.4vw, 26px)/1.3 var(--body); min-height:2.6em; display:grid; place-items:center}
.d-def{font:700 italic 9px var(--body); text-anchor:middle; fill:var(--soft)}
.d-chip.d-chipok{fill:var(--c); stroke:var(--c)}   /* .d-chip (other demos) is defined further down and would win otherwise */
.d-ct{font:700 8.5px var(--disp); text-anchor:middle; fill:var(--fg); letter-spacing:.04em}
.d-chip.d-chipok + .d-ct{fill:var(--go-ink)}
.answers{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ans{position:relative; display:flex; align-items:center; gap:12px; text-align:left; min-height:60px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; font:700 16.5px/1.25 var(--body); touch-action:none}
.answers.four .ans,.answers.two .ans{justify-content:center; font:700 22px var(--disp); letter-spacing:.04em}
.answers.two .ans{text-transform:uppercase; font-size:19px; min-height:72px}
.ans kbd{flex:none; width:27px; height:27px; border-radius:8px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line-2); font:700 12px var(--disp); color:var(--muted)}
.answers.four .ans kbd,.answers.two .ans kbd{position:absolute; top:7px; left:8px; width:20px; height:20px; font-size:10px}
.ans.ok{border-color:var(--go); background:rgba(195,255,61,.14)}
.ans.ok kbd{color:var(--go); border-color:var(--go)}
.ans.no{border-color:var(--bad); background:rgba(255,90,106,.16)}
.plus{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; font:700 italic 22px var(--disp); color:var(--bad); text-shadow:0 0 14px rgba(255,90,106,.55); animation:plus .8s ease-out forwards}
@keyframes plus{0%{opacity:0; transform:translateY(-50%) scale(.6)} 18%{opacity:1; transform:translateY(-50%) scale(1.15)} 100%{opacity:0; transform:translateY(-190%) scale(1)}}
.tfmsg{margin:0; min-height:1.4em; text-align:center; font:600 14px var(--disp); letter-spacing:.06em; color:var(--amber); text-transform:uppercase}
@media (max-width:440px){ .answers:not(.four):not(.two){grid-template-columns:1fr} }
.countbox{position:absolute; inset:0; display:flex; flex-direction:column; padding:16px; gap:14px}
.dotfield{position:relative; flex:1; min-height:0; border-radius:16px; background:var(--panel-2)}
.dotfield i{position:absolute; width:clamp(14px, 4vw, 20px); aspect-ratio:1; border-radius:50%; background:var(--c); transform:translate(-50%,-50%)}
.cfix{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:700 44px var(--disp); color:var(--dim)}

/* stop the clock + sweet spot + beat keeper */
.clockbox,.sweetbox,.beatbox{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; cursor:pointer; text-align:center}
.ctarget{font:600 15px var(--disp); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ctarget b{color:var(--go); font-size:18px}
/* stop the clock: dial, hand, the target mark at the top */
.cdial{width:min(62vw, 230px); height:auto; overflow:visible}
.crim{fill:none; stroke:var(--line-2); stroke-width:3}
.cface{fill:var(--panel-2)}
.ctk{stroke:var(--dm); stroke-width:2; stroke-linecap:round} .ctk.big{stroke:var(--muted); stroke-width:3}
.cmark{fill:var(--c)}
.chand{stroke:var(--fg); stroke-width:5; stroke-linecap:round}
.chub{fill:var(--c)}
.cdial.hidden .chand{opacity:0 !important}   /* the fade itself is drawn frame by frame in the test */
.cdial.hidden .crim{stroke:var(--c); stroke-opacity:.35}
.cdial.hidden.tk .crim{stroke-opacity:1; filter:drop-shadow(0 0 6px var(--c))}
.cdial.shown .chand{stroke:var(--c)} .cdial.shown.g .chand{stroke:var(--good)} .cdial.shown.y .chand{stroke:var(--mid)} .cdial.shown.r .chand{stroke:var(--bad)}
.cmsg,.smsg,.bmsg{min-height:1.4em; font:700 18px var(--disp); letter-spacing:.05em; text-transform:uppercase}
.csub{font:600 12px var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.strack{position:relative; width:min(92%, 480px); height:64px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line-2)}
.zone{position:absolute; top:-8px; bottom:-8px; width:4px; margin-left:-2px; border-radius:2px; background:var(--c); box-shadow:0 0 14px var(--c)}
.needle{position:absolute; left:0; top:6px; bottom:6px; width:6px; margin-left:-3px; border-radius:3px; background:var(--fg); box-shadow:0 0 12px rgba(238,241,247,.5); will-change:transform}
.pulse{width:150px; height:150px; border-radius:50%; border:4px solid var(--c); background:transparent}
.pulse.beat{background:var(--c); box-shadow:0 0 50px var(--c); animation:beat .14s ease-out}
@keyframes beat{from{transform:scale(1.12)}}
.bdots{display:flex; gap:10px}
.bdots i{width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2)}
.bdots i.on{background:var(--c); border-color:var(--c)}
.bdots i.tap{background:var(--go); border-color:var(--go)}

/* type it */
.typer{display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 16px 24px}
.tiles{display:flex; justify-content:center; gap:5px; min-height:62px; align-items:center}
.tile{width:clamp(26px, 7.6vw, 44px); height:clamp(40px, 11vw, 58px); display:grid; place-items:center; border-radius:10px; background:var(--panel-2); border:1px solid var(--line-2); font:700 clamp(19px, 5.8vw, 28px) var(--disp); text-transform:uppercase}
.tile.ok{background:rgba(195,255,61,.14); border-color:var(--go); color:var(--go)}
.tile.bad{background:rgba(255,90,106,.16); border-color:var(--bad); color:var(--bad)}
.tile.cur{box-shadow:inset 0 -3px 0 var(--fg)}
.cd{font:700 italic 68px/1 var(--disp); color:var(--go); animation:cd .6s ease-out}
@keyframes cd{from{transform:scale(1.5); opacity:0}}
.tin{width:100%; max-width:420px; background:var(--bg); border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; font:700 24px var(--disp); color:var(--fg); letter-spacing:.14em; text-align:center; text-transform:lowercase}
.tin:focus{outline:none; border-color:var(--go); box-shadow:0 0 0 3px rgba(195,255,61,.18)}
.tiles.nudge{animation:shake .3s}

/* ================= start-card demos ================= */
.demo{color:var(--c)}
.demo svg{display:block; width:100%; height:100%}
.d-t{font:700 15px var(--disp); text-anchor:middle; letter-spacing:.06em}
.d-s{font:700 9.5px var(--disp); text-anchor:middle; letter-spacing:.16em}
.d-big{font:700 24px var(--disp); text-anchor:middle; letter-spacing:.06em}
.d-mut{fill:var(--muted)}
.d-box,.d-kb,.d-card,.d-r2{fill:var(--dd)}
.d-card{stroke:var(--dm)}
.d-r1{fill:var(--c)}
.d-p2,.d-p3{opacity:0}
.d-p1{animation:dP1 3.3s infinite} .d-p2{animation:dP2 3.3s infinite} .d-p3{animation:dP3 3.3s infinite}
@keyframes dP1{0%,32%{opacity:1} 33%,100%{opacity:0}}
@keyframes dP2{0%,32%{opacity:0} 33%,65%{opacity:1} 66%,100%{opacity:0}}
@keyframes dP3{0%,65%{opacity:0} 66%,100%{opacity:1}}
.d-wfg{fill:var(--wait-bg); animation:dWfg 3.2s infinite}
@keyframes dWfg{0%,64%{fill:var(--wait-bg)} 65%,100%{fill:var(--go)}}
.d-wa{fill:var(--on-wait); animation:dShowA 3.2s infinite}
.d-wb{fill:var(--go-ink); opacity:0; animation:dShowB 3.2s infinite}
@keyframes dShowA{0%,64%{opacity:1} 65%,100%{opacity:0}}
@keyframes dShowB{0%,64%{opacity:0} 65%,100%{opacity:1}}
.d-lt{fill:var(--dm)}
.d-l0{animation:dL0 3.6s infinite} .d-l1{animation:dL1 3.6s infinite} .d-l2{animation:dL2 3.6s infinite} .d-l3{animation:dL3 3.6s infinite} .d-l4{animation:dL4 3.6s infinite}
@keyframes dL0{0%,9%{fill:var(--dm)} 10%,73%{fill:var(--red)} 74%,94%{fill:var(--go)} 95%,100%{fill:var(--dm)}}
@keyframes dL1{0%,20%{fill:var(--dm)} 21%,73%{fill:var(--red)} 74%,94%{fill:var(--go)} 95%,100%{fill:var(--dm)}}
@keyframes dL2{0%,31%{fill:var(--dm)} 32%,73%{fill:var(--red)} 74%,94%{fill:var(--go)} 95%,100%{fill:var(--dm)}}
@keyframes dL3{0%,42%{fill:var(--dm)} 43%,73%{fill:var(--red)} 74%,94%{fill:var(--go)} 95%,100%{fill:var(--dm)}}
@keyframes dL4{0%,53%{fill:var(--dm)} 54%,73%{fill:var(--red)} 74%,94%{fill:var(--go)} 95%,100%{fill:var(--dm)}}
.d-go{fill:var(--go); opacity:0; animation:dGo 3.6s infinite}
@keyframes dGo{0%,73%{opacity:0} 75%,92%{opacity:1} 100%{opacity:0}}
.d-gng{fill:var(--go); animation:dGng 4s infinite}
@keyframes dGng{0%,18%{fill:var(--go)} 19%,25%{fill:var(--dm)} 26%,43%{fill:var(--red)} 44%,50%{fill:var(--dm)} 51%,68%{fill:var(--go)} 69%,75%{fill:var(--dm)} 76%,93%{fill:var(--red)} 94%,100%{fill:var(--dm)}}
.d-gr{fill:none; stroke:var(--go); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:dGr 4s infinite}
@keyframes dGr{0%{transform:scale(1); opacity:.9} 15%{transform:scale(1.8); opacity:0} 50%{transform:scale(1); opacity:0} 51%{transform:scale(1); opacity:.9} 65%{transform:scale(1.8); opacity:0} 100%{opacity:0}}
.d-gt{fill:var(--go); animation:dGt 4s infinite}
@keyframes dGt{0%,18%{opacity:1} 19%,50%{opacity:0} 51%,68%{opacity:1} 69%,100%{opacity:0}}
.d-pad{fill:var(--dd); stroke:var(--dm); stroke-width:1.5}
.d-lit{fill:var(--go); opacity:0; animation:dLit 3.2s infinite}
/* Light Pods' stagger. Its own names: as .d-l2-4 it also delayed Start Lights' lamps 3-5, which lit out of order (fixed 2026-10-21) */
.d-pd2{animation-delay:-.8s} .d-pd3{animation-delay:-1.6s} .d-pd4{animation-delay:-2.4s}
@keyframes dLit{0%,4%{opacity:0} 5%,20%{opacity:1} 21%,100%{opacity:0}}
.d-red{fill:var(--red)} .d-x{stroke:#fff; stroke-width:2.2; stroke-linecap:round}
.d-sym{fill:var(--c)}
.d-snap{fill:var(--go); opacity:0; animation:dSnap 3.3s infinite}
@keyframes dSnap{0%,68%{opacity:0} 70%,95%{opacity:1} 100%{opacity:0}}
.d-tg{animation:dTg 2.7s infinite}
@keyframes dTg{0%,32%{transform:translate(44px,30px)} 33%,65%{transform:translate(112px,58px)} 66%,100%{transform:translate(78px,40px)}}
.d-arc{fill:none; stroke:var(--dm); stroke-dasharray:3 4}
.d-sk{animation:dSk 2.4s linear infinite}
@keyframes dSk{0%{transform:translate(6px,76px)} 25%{transform:translate(43px,40px)} 50%{transform:translate(80px,30px)} 75%{transform:translate(117px,40px)} 100%{transform:translate(154px,76px)}}
.d-cross{stroke:var(--fg); stroke-width:1.5; opacity:.55}
.d-cell{fill:var(--dd); animation:dCell 4.8s infinite}
@keyframes dCell{0%,7.9%{fill:var(--c)} 8.3%,100%{fill:var(--dd)}}
.d-num{font:700 12px var(--disp); text-anchor:middle; fill:var(--fg); animation:dNum 4.8s infinite}
@keyframes dNum{0%,7.9%{fill:var(--go-ink)} 8.3%,100%{fill:var(--fg)}}
.d-dot{fill:var(--c)}
.d-oddp{fill:none; stroke:var(--c); stroke-width:3}
.d-oddh{fill:none; stroke:var(--go); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:dOdd 2.2s infinite}
@keyframes dOdd{0%,40%{opacity:0; transform:scale(1.6)} 55%{opacity:1; transform:scale(1)} 85%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1)}}
.d-ar{fill:none; stroke:var(--fg); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.d-ar.d-mid{stroke:var(--c)}
.d-focus{fill:none; stroke:var(--c); stroke-width:1.5; stroke-dasharray:3 3}
.d-chip{fill:var(--dd); stroke:var(--dm)}
.d-ok{animation:dOk 3s infinite}
@keyframes dOk{0%,49%{fill:var(--dd)} 51%,100%{fill:var(--c)}}
.d-ct{font:700 11px var(--disp); text-anchor:middle; fill:var(--fg)}
.d-flash{fill:var(--c); animation:dFlash 3s infinite}
@keyframes dFlash{0%,14%{opacity:1} 16%,100%{opacity:0}}
.d-q{fill:var(--fg); opacity:0; animation:dQ 3s infinite}
@keyframes dQ{0%,15%{opacity:0} 18%,100%{opacity:1}}
.d-bar{fill:var(--dm)}
.d-t1{animation:dT1 3.6s infinite} .d-t2{animation:dT2 3.6s infinite}
@keyframes dT1{0%,24%{fill:var(--dd)} 26%,48%{fill:var(--c)} 50%,100%{fill:var(--dd)}}
@keyframes dT2{0%,74%{fill:var(--dd)} 76%,98%{fill:var(--c)} 100%{fill:var(--dd)}}
.d-dial{fill:var(--dd); stroke:var(--dm); stroke-width:1.5}
.d-mark{stroke:var(--go); stroke-width:3}
.d-hand{stroke:var(--c); stroke-width:2.5; stroke-linecap:round; transform-origin:80px 44px; animation:dHand 3.6s linear infinite, dHandOp 3.6s linear infinite}
@keyframes dHand{0%{transform:rotate(0deg)} 83%{transform:rotate(362deg)} 100%{transform:rotate(362deg)}}
@keyframes dHandOp{0%,25%{opacity:1} 30%,81%{opacity:0} 83%,100%{opacity:1}}
.d-read{fill:var(--go); opacity:0; animation:dRead 3.6s infinite}
@keyframes dRead{0%,82%{opacity:0} 85%,100%{opacity:1}}
/* Sweet Spot: the needle crosses once and fades, then starts again from the left */
.d-swz{fill:var(--c); filter:drop-shadow(0 0 3px var(--c))}
.d-swn{fill:var(--fg)}
.d-sw{animation:dSw 2.4s infinite}
@keyframes dSw{0%{transform:translateX(0); opacity:0; animation-timing-function:linear} 6%{opacity:1; animation-timing-function:linear} 72%{transform:translateX(118px); opacity:1} 84%,100%{transform:translateX(118px); opacity:0}}
.d-once{fill:var(--soft); font-size:12px}
.d-onc{fill:none; stroke:var(--soft); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.d-bf{fill:var(--c)}
.d-bh{fill:none; stroke:var(--c); stroke-width:2}
.d-bf,.d-bh{transform-box:fill-box; transform-origin:center; animation:dBeat 2s infinite}
@keyframes dBeat{0%,9%{transform:scale(1.35); opacity:1} 14%,100%{transform:scale(1); opacity:.45}}
.d-lt2{font:700 16px var(--disp); text-anchor:middle; fill:var(--fg)}
.d-k0{animation:dK0 3.4s infinite} .d-k1{animation:dK1 3.4s infinite} .d-k2{animation:dK2 3.4s infinite} .d-k3{animation:dK3 3.4s infinite} .d-k4{animation:dK4 3.4s infinite}
@keyframes dK0{0%,9%{opacity:.18} 10%,92%{opacity:1} 96%,100%{opacity:.18}}
@keyframes dK1{0%,21%{opacity:.18} 22%,92%{opacity:1} 96%,100%{opacity:.18}}
@keyframes dK2{0%,33%{opacity:.18} 34%,92%{opacity:1} 96%,100%{opacity:.18}}
@keyframes dK3{0%,45%{opacity:.18} 46%,92%{opacity:1} 96%,100%{opacity:.18}}
@keyframes dK4{0%,57%{opacity:.18} 58%,92%{opacity:1} 96%,100%{opacity:.18}}
.d-caret{fill:var(--c); animation:dCaret 3.4s infinite}
@keyframes dCaret{0%,9%{transform:translateX(0); opacity:1} 10%,21%{transform:translateX(23px); opacity:1} 22%,33%{transform:translateX(46px); opacity:1} 34%,45%{transform:translateX(69px); opacity:1} 46%,57%{transform:translateX(92px); opacity:1} 58%,100%{transform:translateX(92px); opacity:0}}
.d-real{fill:var(--words)}
.d-fake{fill:var(--red)}