:root{
  --ink:#121211; --ink-2:#171716; --panel:rgba(26,26,24,.82); --panel-2:rgba(36,36,33,.9); --panel-solid:#1c1c1a;
  --line:rgba(245,244,240,.1); --line-2:rgba(245,244,240,.2); --hairline:rgba(255,255,255,.07);
  --paint:#F5F4F0; --paper:#FCFCFC; --muted:#A9A8A1; --dim:#8C8B84;
  --sodium:#EFC84D; --yellow:#EFC84D; --led:#4868C8; --led-hi:#8FA6EC; --signal:#EC806E; --go:#45B874;
  --campW:#7d8fc4; --campC:#d0735c; --campB:#d2a356;
  --font:"Urbanist","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --r:18px; --r-lg:24px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,.75,.2);
  --lift:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 24px 60px -18px rgba(0,0,0,.7);
  --lift-sm:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --panel:rgba(26,26,24,.82); } }
:root[data-theme="dark"]{ --panel:rgba(26,26,24,.82); }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--ink); color:var(--paint); font-family:var(--font); font-weight:500; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button{ font-family:inherit; color:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--sodium); outline-offset:3px; border-radius:inherit; }
canvas#gl{ position:fixed; inset:0; width:100vw; height:100%; display:block; transition:filter .6s var(--ease); }
canvas#gl.soft{ filter:saturate(.6) brightness(.55); }
.grain{ position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette{ position:fixed; inset:0; pointer-events:none; background:radial-gradient(130% 95% at 50% 38%, rgba(0,0,0,0) 52%, rgba(6,6,5,.62) 100%); }
.shade-t{ position:fixed; left:0; right:0; top:0; height:140px; background:linear-gradient(180deg, rgba(14,14,13,.86), rgba(14,14,13,0)); pointer-events:none; }
.shade-b{ position:fixed; left:0; right:0; bottom:0; height:60%; background:linear-gradient(180deg, rgba(18,18,17,0), rgba(18,18,17,.55) 35%, rgba(18,18,17,.94) 78%); pointer-events:none; transition:opacity .6s var(--ease); }
.shade-b.off{ opacity:0; }
#tags{ position:fixed; inset:0; pointer-events:none; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - var(--panel-h, 0px) - 110px), transparent calc(100% - var(--panel-h, 0px) - 24px)); mask-image:linear-gradient(180deg, #000 calc(100% - var(--panel-h, 0px) - 110px), transparent calc(100% - var(--panel-h, 0px) - 24px)); transition:opacity .4s var(--ease); }
.tag{ position:absolute; left:0; top:0; padding:5px 10px 5px; border-radius:var(--r-pill); background:rgba(22,22,20,.82); border:1px solid var(--hairline); box-shadow:0 6px 16px -6px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--paint); font-size:13px; font-weight:600; letter-spacing:.01em; white-space:nowrap; display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .35s var(--ease), background .3s, color .3s, border-color .3s; will-change:transform; }
.tag.on{ opacity:1; }
.tag b{ font-weight:700; font-variant-numeric:tabular-nums; }
.tag small{ font-size:13px; color:var(--muted); font-weight:500; }
.tag .n{ display:inline-grid; place-items:center; min-width:19px; height:19px; border-radius:var(--r-pill); background:var(--paint); color:#171716; font-size:13px; font-weight:700; padding:0 5px; margin-left:-4px; }
.tag.pick{ background:var(--sodium); color:#171716; border-color:transparent; } .tag.pick small{ color:#3d3410; }
.tag.win{ background:var(--go); color:#062012; border-color:transparent; } .tag.win small{ color:#0b3a20; }
.tag.lose{ background:rgba(22,22,20,.86); color:var(--muted); }
.tag.cut{ background:var(--signal); color:#fff; border-color:transparent; }
.tag.home{ background:var(--led-hi); color:#101a3a; border-color:transparent; }
.tag.mini{ font-size:13px; padding:3px 7px 2px; }
@media (max-width:560px){ .tag{ font-size:13px; padding:4px 7px 3px; } }
#hud{ position:fixed; top:0; left:0; right:0; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0; display:flex; flex-direction:column; gap:10px; pointer-events:none; z-index:20; }
#hud > *{ pointer-events:auto; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.mark{ display:flex; align-items:center; gap:9px; font-weight:500; letter-spacing:-.035em; font-size:1.18rem; white-space:nowrap; color:var(--paint); text-decoration:none; min-width:0; }
.mark svg{ width:26px; height:20px; fill:currentColor; flex-shrink:0; }
.mark .game{ opacity:.7; padding-left:10px; border-left:1px solid rgba(245,244,240,.35); margin-left:1px; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:380px){ .mark .word{ display:none; } .mark .game{ border-left:0; padding-left:0; } }
@media (max-width:520px){ .count{ display:none !important; } .backlink{ padding:0 10px 0 8px; } .mark .word{ display:none; } .mark .game{ border-left:0; padding-left:0; } .iconbtn{ width:40px; height:40px; } }
.right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.count{ font-size:13px; white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; margin-right:6px; font-weight:500; }
.iconbtn{ width:42px; height:42px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:rgba(245,244,240,.06); color:var(--paint); display:grid; place-items:center; cursor:pointer; transition:background .2s var(--ease), border-color .2s, transform .2s var(--ease); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.iconbtn:hover{ background:rgba(245,244,240,.12); border-color:var(--line-2); }
.iconbtn svg{ width:19px; height:19px; }
.backlink{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px 0 12px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:rgba(245,244,240,.06); color:var(--paint); text-decoration:none; font-weight:600; font-size:13px; transition:background .2s var(--ease); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.backlink svg{ width:16px; height:16px; }
.segs{ display:flex; gap:4px; }
.segs i{ height:3px; flex:1; border-radius:3px; background:rgba(245,244,240,.14); transition:background .5s var(--ease), box-shadow .5s; }
.segs i.on{ background:rgba(245,244,240,.75); }
.segs i.gap{ margin-left:8px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r-pill); border:1px solid transparent; font-size:16px; font-weight:700; letter-spacing:-.005em; cursor:pointer; transition:transform .25s var(--ease), background .2s, box-shadow .25s var(--ease), border-color .2s, opacity .2s; text-decoration:none; -webkit-user-select:none; user-select:none; }
.btn:active{ transform:scale(.975); }
.btn-light{ background:var(--paper); color:#171716; box-shadow:inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -12px rgba(252,252,252,.35); }
.btn-light:hover{ background:#fff; transform:translateY(-1px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.25), 0 14px 34px -12px rgba(252,252,252,.45); }
.btn-dark{ background:rgba(245,244,240,.06); color:var(--paint); border-color:var(--line-2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn-dark:hover{ background:rgba(245,244,240,.11); border-color:rgba(245,244,240,.32); }
.btn-ghost{ background:transparent; color:var(--paint); border-color:var(--line-2); min-height:48px; font-size:16px; }
.btn.small{ min-height:44px; font-size:16px; padding:0 20px; border-radius:var(--r-pill); }
kbd{ display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 6px; border-radius:6px; border:1px solid currentColor; font:600 13px/1 var(--font); letter-spacing:.02em; opacity:.55; }
.btn kbd{ font-size:13px; }
.btn svg{ width:20px; height:20px; flex-shrink:0; }
.keys{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; color:var(--dim); font-size:13px; }
.keys kbd{ color:var(--paint); }
@media (hover:none){ .hide-touch{ display:none !important; } }
#intro{ position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 62px); bottom:0; padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 22px); display:flex; flex-direction:column; align-items:center; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; z-index:10; }
.intro-in{ width:min(720px, 100%); margin-top:auto; }
.eyebrow{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
h1.hero{ font-size:clamp(44px, 6vw, 84px); line-height:.94; letter-spacing:-.04em; font-weight:700; margin:0 0 18px; text-wrap:balance; }
h1.hero em{ font-style:normal; color:inherit; background:linear-gradient(90deg, #e0503f, #e9b43c 34%, #3fae6a 67%, #3d7fe8) no-repeat 0 93% / 100% .075em; padding-bottom:.02em; }
.lead{ font-size:clamp(17px, 1.6vw, 20px); line-height:1.45; margin:0 0 10px; max-width:560px; font-weight:500; color:var(--paint); text-wrap:pretty; }
.meta{ font-size:13px; line-height:1.45; color:var(--muted); margin:0 0 22px; max-width:600px; }
.intro-actions{ display:grid; grid-template-columns:1fr; gap:10px; }
.intro-actions .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.credit{ text-align:center; font-size:13px; color:var(--dim); margin:16px 0 0; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.credit button, .linkish{ background:none; border:0; padding:0; color:var(--paint); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:inherit; font-weight:600; }
.resume{ display:flex; align-items:center; gap:12px; padding:12px 14px 12px 16px; border-radius:18px; background:rgba(239,200,77,.08); border:1px solid rgba(239,200,77,.28); margin:0 0 14px; font-size:16px; box-shadow:var(--lift-sm); }
.resume b{ color:var(--sodium); }
.resume .grow{ flex:1; }
.pixel{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 72px); right:16px; width:min(330px, calc(100vw - 32px)); display:grid; grid-template-columns:48px 1fr; gap:12px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--lift); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); z-index:30; animation:rise .6s var(--ease); }
.pixel img{ width:48px; height:48px; image-rendering:pixelated; animation:bob 1.6s ease-in-out infinite; }
.pixel p{ margin:0 0 10px; font-size:13px; line-height:1.4; }
.pixel .row{ display:flex; gap:8px; }
.pixel button{ border:0; border-radius:var(--r-pill); padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; }
.pixel .yes{ background:var(--paper); color:#171716; } .pixel .no{ background:rgba(245,244,240,.08); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }
@media (max-width:560px){ .pixel{ top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); } }
.dock{ position:fixed; left:0; right:0; bottom:0; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px); display:flex; justify-content:center; z-index:15; pointer-events:none; }
.dock > *{ pointer-events:auto; }
.card{ width:min(880px, 100%); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px), var(--panel); border:1px solid var(--line); box-shadow:var(--lift); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); border-radius:var(--r-lg); padding:22px 24px 18px; animation:cardIn .5s var(--ease) backwards; }
.card .top{ display:flex; align-items:center; gap:6px; margin:0 0 12px; flex-wrap:wrap; padding-right:50px; }
.q{ font-size:clamp(23px, 2.6vw, 31px); font-weight:700; letter-spacing:-.022em; line-height:1.18; margin:0 0 16px; text-wrap:pretty; }
.opts{ display:grid; gap:10px; }
.opts.n2{ grid-template-columns:1fr 1fr; }
.opts.n3{ grid-template-columns:repeat(3, 1fr); }
.opts.n4{ grid-template-columns:repeat(4, 1fr); }
.opts.n6{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:640px){ .opts.n4, .opts.n6{ grid-template-columns:1fr 1fr; } .opts.n3{ grid-template-columns:1fr; } }
.opt{ position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 16px; border-radius:16px; border:1px solid var(--line-2); background:linear-gradient(180deg, rgba(245,244,240,.05), rgba(245,244,240,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); cursor:pointer; text-align:left; font-size:16px; font-weight:600; letter-spacing:-.005em; transition:background .2s var(--ease), border-color .2s, transform .2s var(--ease), opacity .35s, box-shadow .2s; animation:optIn .5s var(--ease) backwards; }
.opt:hover{ background:linear-gradient(180deg, rgba(245,244,240,.09), rgba(245,244,240,.04)); border-color:rgba(245,244,240,.34); transform:translateY(-1px); }
.opt:active{ transform:scale(.985); }
.opt.focus{ border-color:var(--sodium); box-shadow:0 0 0 1px var(--sodium), inset 0 1px 0 rgba(255,255,255,.04); }
.opt .k{ flex-shrink:0; }
.opt .t{ flex:1; min-width:0; line-height:1.2; }
.opt .t small{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:3px; letter-spacing:.005em; }
.opt .camp{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.opt .val{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--paint); opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease) .15s, transform .4s var(--ease) .15s; white-space:nowrap; }
.opt .bar{ position:absolute; left:10px; right:auto; bottom:6px; height:3px; border-radius:3px; background:var(--muted); width:0; max-width:calc(100% - 20px); transition:width .9s var(--ease) .1s; }
.opts.n2 .opt:last-child{ flex-direction:row-reverse; text-align:right; }
.revealed .opt{ cursor:default; }
.revealed .opt .val{ opacity:1; transform:none; }
.revealed .opt.mine{ border-color:rgba(239,200,77,.7); background:linear-gradient(180deg, rgba(239,200,77,.12), rgba(239,200,77,.05)); }
.revealed .opt.right{ border-color:rgba(69,184,116,.75); background:linear-gradient(180deg, rgba(69,184,116,.16), rgba(69,184,116,.06)); }
.revealed .opt.right .bar{ background:var(--go); }
.revealed .opt.mine:not(.right) .bar{ background:var(--sodium); }
.revealed .opt:not(.right):not(.mine){ opacity:.5; }
.badge{ position:absolute; top:-10px; right:14px; padding:3px 9px 3px; border-radius:var(--r-pill); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 4px 10px -4px rgba(0,0,0,.6); animation:badgeIn .45s var(--ease) both; }
.badge.you{ background:var(--sodium); color:#171716; }
.badge.truth{ background:var(--go); color:#06210f; }
.badge.plan{ background:var(--led-hi); color:#101a3a; }
.opts.n2 .opt:last-child .badge{ right:auto; left:14px; }
.rev{ margin:14px 0 0; display:none; }
.revealed .rev{ display:block; animation:rise .3s var(--ease); }
.verdict{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px; }
.verdict .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; animation:dotIn .6s var(--ease) both; }
.verdict.ok .dot{ background:var(--go); box-shadow:0 0 0 4px rgba(69,184,116,.18); }
.verdict.no .dot{ background:var(--sodium); box-shadow:0 0 0 4px rgba(239,200,77,.16); }
.verdict.open .dot{ background:var(--led-hi); box-shadow:0 0 0 4px rgba(143,166,236,.16); }
.fact{ font-size:16px; line-height:1.5; color:var(--paint); opacity:.9; margin:0; max-width:68ch; text-wrap:pretty; }
.src{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; font-size:13px; color:var(--muted); }
.src .s{ padding:3px 9px 3px; border-radius:var(--r-pill); background:rgba(245,244,240,.06); border:1px solid var(--hairline); line-height:1.35; }
.details{ margin:12px 0 0; padding:14px 16px; border-radius:16px; background:rgba(245,244,240,.04); border:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted); animation:rise .35s var(--ease); }
.details b{ color:var(--paint); }
.details table{ width:100%; border-collapse:collapse; margin-top:6px; }
.details td{ padding:3px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.details td:last-child{ text-align:right; color:var(--paint); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 0; flex-wrap:wrap; }
.foot .keys{ justify-content:flex-start; }
.next{ min-height:50px; }
.actx{ position:fixed; inset:0; display:grid; place-items:center; z-index:25; padding:24px; pointer-events:none; }
.act-in{ text-align:center; max-width:640px; padding:34px 34px 30px; border-radius:32px; background:radial-gradient(closest-side, rgba(14,14,13,.9), rgba(14,14,13,.72) 62%, rgba(14,14,13,0)); text-shadow:0 2px 20px rgba(0,0,0,.65); animation:actIn .7s var(--ease) backwards; pointer-events:auto; }
.act-in .num{ font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--sodium); }
.act-in h2{ font-size:clamp(44px, 7vw, 80px); line-height:.95; letter-spacing:-.045em; font-weight:700; margin:12px 0 14px; text-wrap:balance; }
.act-in p{ font-size:19px; line-height:1.5; color:var(--paint); opacity:.88; margin:0 auto 26px; max-width:520px; text-wrap:pretty; }
@keyframes actIn{ from{ opacity:0; transform:scale(.97) translateY(14px); filter:blur(4px);} to{ opacity:1; transform:none; filter:none; } }
.sheet-wrap{ position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; background:rgba(10,10,9,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:16px; animation:fadeIn .3s var(--ease); }
@media (min-width:700px){ .sheet-wrap{ align-items:center; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.sheet{ width:min(560px, 100%); max-height:calc(100% - 20px); overflow:auto; overscroll-behavior:contain; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 140px), var(--panel-solid); border:1px solid var(--line); border-radius:28px; padding:24px; box-shadow:var(--lift); animation:sheetIn .5s var(--ease) backwards; }
.sheet.wide{ width:min(860px, 100%); }
.sheet h3{ font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.15; margin:0 0 10px; text-wrap:pretty; }
.sheet p{ font-size:16px; line-height:1.5; color:var(--muted); margin:0 0 14px; text-wrap:pretty; }
.sheet .stack{ display:grid; gap:10px; }
.sheet .x{ float:right; margin:-6px -6px 0 0; }
.pgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.pgrid.n3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:560px){ .pgrid.n3{ grid-template-columns:1fr 1fr; } }
.popt{ min-height:52px; padding:10px 14px; border-radius:14px; border:1px solid var(--line-2); background:rgba(245,244,240,.04); text-align:left; font-size:16px; font-weight:600; cursor:pointer; line-height:1.25; display:flex; align-items:center; gap:10px; transition:background .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.popt:hover{ background:rgba(245,244,240,.09); border-color:rgba(245,244,240,.32); }
.popt.focus, .popt.on{ border-color:var(--sodium); background:rgba(239,200,77,.09); }
.popt .k{ flex-shrink:0; }
.how{ position:fixed; inset:0; z-index:45; background:rgba(14,14,13,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:grid; place-items:center; padding:24px 20px; overflow-y:auto; animation:fadeIn .35s var(--ease); }
.how-in{ width:min(760px, 100%); text-align:center; }
.how-step{ animation:actIn .45s var(--ease); }
.how-step .num{ font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--sodium); text-transform:uppercase; }
.how-step h2{ font-size:clamp(32px, 6vw, 60px); letter-spacing:-.04em; line-height:1.02; font-weight:700; margin:12px 0 14px; text-wrap:balance; overflow-wrap:anywhere; }
.how-step p{ font-size:clamp(16px, 2.2vw, 19px); line-height:1.5; opacity:.88; margin:0 auto 24px; max-width:560px; text-wrap:pretty; }
.how-art{ height:clamp(110px, 22vw, 150px); display:flex; align-items:flex-end; justify-content:center; gap:clamp(5px, 1.4vw, 10px); margin:0 auto 24px; max-width:100%; }
.how-art .col{ width:clamp(22px, 7.4vw, 40px); border-radius:8px 8px 3px 3px; background:linear-gradient(180deg, var(--paint), rgba(245,244,240,.72)); animation:grow 1s var(--ease) both; display:flex; justify-content:center; padding-top:8px; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); }
.how-art .col svg{ width:min(20px, 70%); height:20px; color:#171716; }
.how-art .col.gap{ background:transparent; border:2px dashed var(--signal); }
.how-art .col.gap svg{ color:var(--signal); }
@keyframes grow{ from{ transform:scaleY(.05); transform-origin:bottom; opacity:.2; } to{ transform:scaleY(1); transform-origin:bottom; opacity:1; } }
.how-dots{ display:flex; gap:6px; justify-content:center; margin:0 0 18px; }
.how-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(245,244,240,.22); transition:background .3s, transform .3s var(--ease); }
.how-dots i.on{ background:var(--sodium); transform:scale(1.25); }
.how .row{ display:flex; gap:10px; justify-content:center; }
.mini{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 18px; border-radius:var(--r-pill); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px), var(--panel); border:1px solid var(--line); box-shadow:var(--lift); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); animation:miniIn .45s var(--ease); font-size:13px; white-space:nowrap; }
.mini .hint{ color:var(--muted); }
@media (max-width:480px){ .mini .hint{ display:none; } }
#results{ position:fixed; inset:0; z-index:22; }
.r-slide{ position:absolute; left:0; right:0; bottom:0; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px); display:flex; justify-content:center; z-index:2; pointer-events:none; }
.r-card{ width:min(760px, 100%); pointer-events:auto; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px), var(--panel); border:1px solid var(--line); box-shadow:var(--lift); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); border-radius:26px; padding:24px 26px 18px; animation:slideIn .55s var(--ease) backwards; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(20px) scale(.985);} to{ opacity:1; transform:none; } }
.r-kicker{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.r-h{ font-size:clamp(24px, 3.2vw, 34px); font-weight:700; letter-spacing:-.028em; line-height:1.15; margin:0 0 10px; text-wrap:pretty; }
.r-p{ font-size:16px; line-height:1.5; color:var(--paint); opacity:.88; margin:0 0 12px; text-wrap:pretty; }
.meter{ display:flex; height:12px; border-radius:6px; overflow:hidden; margin:10px 0 6px; background:rgba(245,244,240,.08); }
.meter i{ display:block; height:100%; animation:growx .9s var(--ease) both; transform-origin:left; }
.meter-key{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.meter-key b{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.levbars{ display:grid; gap:7px; margin:6px 0; }
.levbars .row{ display:grid; grid-template-columns:120px 1fr 54px; gap:10px; align-items:center; font-weight:700; font-size:13px; }
.levbars .row i{ display:block; height:12px; border-radius:4px; background:var(--signal); animation:growx .8s var(--ease) both; transform-origin:left; }
.levbars .row span:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.share-img{ width:100%; max-width:300px; aspect-ratio:1080/1350; border-radius:16px; display:block; margin:0 auto 12px; box-shadow:0 18px 40px rgba(0,0,0,.45); background:rgba(245,244,240,.06); opacity:.4; transition:opacity .4s; }
.share-img.ready{ opacity:1; }
.board-list{ display:grid; gap:4px; margin:6px 0 14px; }
.board-row{ display:grid; grid-template-columns:28px 1fr 2fr 50px; gap:10px; align-items:center; padding:6px 8px; border-radius:10px; font-size:13px; font-weight:700; }
.board-row:nth-child(odd){ background:rgba(245,244,240,.035); }
.board-row .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.board-row .pb{ height:10px; border-radius:4px; background:rgba(245,244,240,.08); overflow:hidden; }
.board-row .pb i{ display:block; height:100%; border-radius:4px; }
.board-row .v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.board-row.home{ outline:1.5px solid var(--led-hi); }
.sig{ display:grid; grid-template-columns:86px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.sig time{ color:var(--muted); font-variant-numeric:tabular-nums; }
.wt{ display:grid; grid-template-columns:1fr 60px; gap:6px 10px; font-size:13px; margin:8px 0 14px; }
.wt div:nth-child(even){ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.toast{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 76px); transform:translateX(-50%); z-index:60; background:var(--paper); color:#171716; padding:11px 18px; border-radius:var(--r-pill); font-weight:600; font-size:13px; box-shadow:0 12px 32px -10px rgba(0,0,0,.7); animation:toastIn .45s var(--ease); white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
@media (max-width:560px){
  .card{ padding:16px 16px 12px; border-radius:20px; }
  .opt{ min-height:58px; font-size:16px; padding:10px 12px; }
  .q{ margin-bottom:12px; }
  .r-card{ padding:18px 18px 14px; }
  .foot .keys{ display:none; }
  .next{ width:100%; }
}
@media (max-height:700px) and (min-width:700px){ .card{ padding:14px 18px 12px; } .opt{ min-height:56px; } .q{ font-size:28px; } }
.coin-wrap{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; align-content:center; gap:14px; pointer-events:none; animation:fadeIn .2s ease; }
.coin-wrap.out{ opacity:0; transition:opacity .3s; }
.coin-wrap p{ margin:0; font-weight:800; font-size:16px; color:var(--paint); background:rgba(22,22,20,.86); padding:8px 14px; border-radius:10px; }
.coin{ width:92px; height:92px; position:relative; transform-style:preserve-3d; animation:flip 1.1s cubic-bezier(.3,.7,.3,1) both; }
.coin .face{ position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:28px; color:#3d3410; background:radial-gradient(circle at 35% 30%, #fff0b8, #EFC84D 55%, #b8902a); box-shadow:inset 0 0 0 5px rgba(255,255,255,.25), 0 14px 30px rgba(0,0,0,.45); backface-visibility:hidden; }
.coin .back{ transform:rotateY(180deg); }
@keyframes flip{ 0%{ transform:translateY(40px) rotateY(0) scale(.6); } 45%{ transform:translateY(-70px) rotateY(900deg) scale(1.05); } 100%{ transform:translateY(0) rotateY(1800deg) scale(1); } }
.tabs{ display:flex; gap:6px; margin:4px 0 14px; flex-wrap:wrap; }
.tabs button{ border:1px solid var(--line-2); background:transparent; border-radius:var(--r-pill); padding:8px 15px; font-weight:600; font-size:13px; cursor:pointer; transition:background .2s, border-color .2s; }
.tabs button.on{ background:var(--paper); color:#171716; border-color:transparent; }
.mtext{ font-size:16px; line-height:1.55; color:var(--paint); }
.mtext p{ color:var(--paint); opacity:.9; margin:0 0 12px; max-width:68ch; }
.mtext .mlead{ font-size:19px; font-weight:700; opacity:1; line-height:1.35; }
.mtext h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--sodium); margin:18px 0 8px; }
.mtext h4 small{ text-transform:none; letter-spacing:0; color:var(--muted); font-weight:600; margin-left:6px; }
.mtext pre{ font:500 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background:rgba(245,244,240,.05); border:1px solid var(--line); border-radius:12px; padding:12px 14px; overflow-x:auto; color:var(--paint); margin:0 0 10px; }
.mgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px; }
.mcell{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(245,244,240,.05); font-size:13px; }
.mcell svg{ width:18px; height:18px; color:var(--sodium); flex-shrink:0; }
.mcell span{ margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .mgrid{ grid-template-columns:1fr 1fr; } }
.mtable{ width:100%; border-collapse:collapse; font-size:13px; margin:0 0 8px; }
.mtable th{ text-align:left; color:var(--muted); font-weight:700; font-size:13px; padding:6px 8px; border-bottom:1px solid var(--line-2); }
.mtable td{ padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.mtable td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.msrc{ font-size:13px; color:var(--muted) !important; }
.dchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.dchip{ border:1px solid var(--line-2); background:transparent; border-radius:var(--r-pill); padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.dchip.on{ background:rgba(239,200,77,.16); border-color:rgba(239,200,77,.5); color:var(--sodium); }
.board-row{ cursor:pointer; }
.board-row:hover{ background:rgba(245,244,240,.08) !important; }
.cbars{ display:grid; gap:7px; }
.cbar{ display:grid; grid-template-columns:150px 1fr 34px; gap:10px; align-items:center; font-size:13px; font-weight:700; }
.cbar span{ display:flex; align-items:center; gap:7px; }
.cbar span svg{ width:16px; height:16px; color:var(--muted); }
.cbar i{ position:relative; height:12px; border-radius:6px; background:rgba(245,244,240,.07); }
.cbar em{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--paint); opacity:.75; }
.cbar u{ position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1px; border-radius:2px; background:var(--sodium); }
.cbar small{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.cbar.weak span, .cbar.weak span svg{ color:var(--signal); }
.lock{ margin-left:auto; }
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 10px; }
.cmp h4{ margin:0 0 6px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cmp-r{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:10px; background:rgba(245,244,240,.05); font-weight:700; font-size:16px; margin:0 0 4px; }
.cmp-r span{ width:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cmp-r em{ margin-left:auto; font-style:normal; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.cmp-r.ok{ background:rgba(69,184,116,.14); }
.legend{ position:fixed; left:16px; top:calc(env(safe-area-inset-top,0px) + 84px); z-index:12; display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--muted); background:rgba(22,22,20,.7); border:1px solid var(--hairline); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:6px 12px; border-radius:var(--r-pill); pointer-events:none; }
.legend i{ width:56px; height:6px; border-radius:6px; background:linear-gradient(90deg, #383834, #f4f1e8); }
@media (max-width:560px){ .legend{ top:calc(env(safe-area-inset-top,0px) + 64px); left:12px; font-size:13px; } .legend i{ width:40px; } }
.r-sub{ margin:14px 0 6px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.r-card a{ color:var(--sodium); }
.card, .r-card{ max-height:calc(100dvh - 76px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow-y:auto; overscroll-behavior:contain; }
.sheet{ max-height:calc(100dvh - 32px); }
@media (max-height:560px){
  #hud{ padding-top:calc(env(safe-area-inset-top,0px) + 8px); gap:6px; }
  .iconbtn, .backlink{ height:36px; } .iconbtn{ width:36px; }
  .card, .r-card{ padding:12px 16px 10px; border-radius:18px; max-height:calc(100dvh - 60px); }
  .q{ font-size:19px; margin-bottom:8px; }
  .opt{ min-height:46px; padding:8px 12px; font-size:16px; }
  .popt{ min-height:40px; padding:6px 10px; font-size:13px; }
  .pgrid{ grid-template-columns:repeat(3, 1fr); gap:6px; }
  .rk{ padding:8px 6px 6px; }
  h1.hero{ font-size:44px; margin-bottom:8px; }
  .lead{ font-size:16px; } .meta{ margin-bottom:10px; }
  .btn{ min-height:44px; font-size:16px; }
  .r-big{ font-size:44px; }
  .r-h{ font-size:19px; }
  .legend{ display:none; }
  .act-in h2{ font-size:44px; } .act-in p{ font-size:16px; margin-bottom:12px; }
  .foot{ margin-top:8px; }
}
.opt.chosen{ border-color:var(--sodium); background:linear-gradient(180deg, rgba(239,200,77,.13), rgba(239,200,77,.05)); box-shadow:0 0 0 1px var(--sodium); }
.conf{ display:flex; align-items:center; gap:12px; margin:14px 0 0; flex-wrap:wrap; animation:rise .4s var(--ease); }
.conf-q{ font-weight:700; font-size:16px; }
.conf-p{ display:flex; gap:6px; flex-wrap:wrap; }
.cp{ border:1px solid var(--line-2); background:rgba(245,244,240,.05); border-radius:var(--r-pill); padding:10px 14px; font-weight:600; font-size:13px; cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.cp:hover, .cp:focus-visible{ border-color:var(--sodium); background:rgba(239,200,77,.12); transform:translateY(-1px); }
.sig-head{ font-weight:700; }
.sig-why{ margin:-2px 0 8px; font-size:13px; line-height:1.4; color:var(--muted); }
.askrow{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; font-size:13px; }
form.lform{ display:grid; gap:8px; margin-top:6px; }
form.lform label{ font-size:13px; color:var(--muted); }
form.lform input{ font:inherit; font-size:16px; padding:11px 12px; border-radius:10px; border:1px solid var(--line-2); background:rgba(245,244,240,.06); color:var(--paint); }
form.lform input:focus-visible{ outline:2px solid var(--sodium); outline-offset:1px; }
form.lform .fine{ margin:0; font-size:13px; color:var(--muted); }
form.lform .err{ margin:0; font-size:13px; color:var(--signal); }
form.lform button{ justify-self:start; }
.spark{ display:block; width:100%; max-width:340px; height:auto; margin-top:10px; }
.spark polyline{ fill:none; stroke:var(--led-hi); stroke-width:2; }
.spark circle{ fill:var(--led-hi); stroke:var(--panel-2); stroke-width:2; }
.spark circle:last-of-type{ fill:var(--sodium); }
.frow .fine, .sheet .fine{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.resume.hot{ border-color:rgba(69,184,116,.5); background:rgba(69,184,116,.08); }
.ltable{ list-style:none; margin:6px 0 8px; padding:0; display:grid; gap:4px; }
.ltable li{ display:grid; grid-template-columns:24px minmax(0,1fr) auto 56px; gap:10px; align-items:center; padding:9px 12px; border-radius:12px; background:rgba(245,244,240,.04); border:1px solid var(--hairline); font-size:13px; }
.ltable li.me{ background:rgba(239,200,77,.1); border-color:rgba(239,200,77,.4); }
.ltable .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.ltable .nm small{ color:var(--sodium); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.ltable .tr{ color:var(--muted); font-size:13px; }
.ltable b{ text-align:right; font-variant-numeric:tabular-nums; }
label.chk{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--paint); }
label.chk input{ width:18px; height:18px; accent-color:var(--sodium); }
.weekly{ margin:18px 0 0; padding:16px 16px 14px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px), var(--panel); border:1px solid var(--line); box-shadow:var(--lift); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); }
.wk-h{ margin:0 0 4px; font-weight:600; font-size:16px; line-height:1.4; text-wrap:pretty; }
.wk-q{ margin:0 0 10px; font-size:13px; color:var(--muted); }
.wk-opts .opt{ min-height:44px; font-size:13px; }
.wk-foot{ margin:10px 0 0; font-size:13px; color:var(--muted); line-height:1.45; }
.weekly .opt.mine{ border-color:var(--sodium); background:rgba(239,200,77,.14); color:var(--paint); }
.weekly .opt:disabled:not(.mine){ opacity:.55; }
.weekly .opt .val{ font-size:13px; color:var(--muted); }
.namemsg, .lform .namemsg{ margin:6px 0 4px; font-size:13px; color:var(--sodium); }
.lform input[aria-invalid=true]{ border-color:var(--sodium); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes optIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.opts .opt:nth-child(1){ animation-delay:.06s; } .opts .opt:nth-child(2){ animation-delay:.1s; } .opts .opt:nth-child(3){ animation-delay:.14s; }
.opts .opt:nth-child(4){ animation-delay:.18s; } .opts .opt:nth-child(5){ animation-delay:.22s; } .opts .opt:nth-child(6){ animation-delay:.26s; }
@keyframes badgeIn{ from{ opacity:0; transform:translateY(6px) scale(.8); } to{ opacity:1; transform:none; } }
@keyframes dotIn{ 0%{ transform:scale(0); } 60%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%, -10px); } to{ opacity:1; transform:translate(-50%, 0); } }
@keyframes fadeOut{ to{ opacity:0; } }
#stage > .leaving{ pointer-events:none; z-index:16; animation:leave .24s var(--ease-in) both; }
@keyframes leave{ to{ opacity:0; transform:translateY(-8px) scale(.99); } }
#stage > .leaving.actx{ animation:leaveAct .3s var(--ease-in) both; }
@keyframes leaveAct{ to{ opacity:0; transform:scale(1.02); filter:blur(4px); } }
.sheet-wrap.closing{ animation:fadeOut .22s var(--ease-in) both; }
.sheet-wrap.closing .sheet{ animation:sheetOut .22s var(--ease-in) both; }
@keyframes sheetOut{ to{ opacity:0; transform:translateY(16px) scale(.985); } }
.how.closing{ animation:fadeOut .22s var(--ease-in) both; }
body.act-on #tags{ opacity:0; }
.eyebrow::before, .r-kicker::before, .step::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sodium); box-shadow:0 0 0 3px rgba(239,200,77,.16); flex-shrink:0; }
.step{ display:flex; align-items:center; gap:9px; }
.board-row > span:nth-child(2){ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.weekly.compact{ display:grid; gap:8px; padding:14px 14px 14px; }
.weekly.compact .wk-h{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.weekly.compact .wk-foot{ margin:0; }
.weekly.compact .wk-foot b{ color:var(--sodium); font-weight:700; }
.wk-open{ width:100%; justify-content:space-between; padding:0 18px 0 20px; }
.wk-time{ font-size:13px; color:var(--muted); font-weight:500; }
.weekly.full{ margin:0; padding:0; border:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.weekly.full .wk-h{ font-size:19px; font-weight:700; letter-spacing:-.015em; line-height:1.3; padding-right:44px; }
.share-img{ border-radius:18px; box-shadow:0 24px 50px -18px rgba(0,0,0,.8), 0 0 0 1px var(--hairline); }
@media (max-width:560px){
  #hud{ padding-left:12px; padding-right:12px; }
  .mark{ font-size:1.02rem; gap:8px; }
  .mark svg{ width:22px; height:17px; }
  .backlink{ width:40px; height:40px; padding:0; justify-content:center; font-size:0; gap:0; }
  .backlink svg{ width:18px; height:18px; }
  .iconbtn{ width:40px; height:40px; }
  .card{ padding:18px 16px 14px; border-radius:22px; }
  .card .top{ margin-bottom:10px; }
  .q{ font-size:19px; line-height:1.18; }
  .opt{ min-height:54px; font-size:16px; padding:10px 14px; }
  .opts.n4{ grid-template-columns:1fr; gap:8px; }
  .opts.n4 .opt{ min-height:50px; }
  .opts.n2 .opt{ min-height:60px; }
  .pgrid:not(.n3){ grid-template-columns:1fr; gap:6px; }
  .popt{ min-height:48px; font-size:16px; }
  .conf{ gap:8px; }
  .conf-q{ width:100%; }
  .conf-p{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; width:100%; }
  .cp{ padding:11px 0; text-align:center; }
  .act-in{ padding:26px 18px 22px; }
  .act-in p{ font-size:16px; }
  .sheet-wrap{ padding:24px 0 0; align-items:flex-end; }
  .sheet{ width:100%; max-height:calc(100dvh - 24px); border-radius:28px 28px 0 0; padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 20px); border-bottom:0; animation:sheetUp .5s var(--ease) backwards; }
  .sheet::before{ content:''; display:block; width:38px; height:4px; border-radius:2px; background:rgba(245,244,240,.22); margin:0 auto 14px; }
  .sheet h3{ font-size:28px; }
  .sheet-wrap.closing .sheet{ animation:sheetDown .24s var(--ease-in) both; }
  .pixel{ top:calc(env(safe-area-inset-top,0px) + 62px); bottom:auto; right:12px; width:calc(100vw - 24px); }
  body[data-stage="results"] .legend, body[data-stage="play"] .legend{ display:none; }
  .legend{ top:calc(env(safe-area-inset-top,0px) + 62px); }
  .r-card{ padding:20px 18px 14px; border-radius:24px; }
  .toast{ top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); }
  .how-step p{ margin-bottom:18px; }
  .ltable li{ grid-template-columns:20px minmax(0,1fr) 52px; }
  .ltable .tr{ display:none; }
}
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes sheetDown{ to{ transform:translateY(100%); } }
@media (max-width:560px){ .toast{ animation-name:toastUp; } }
@keyframes toastUp{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; } }
.weekly .opt{ animation:none; }
@media (max-width:560px){
  .opts.n2.long{ grid-template-columns:1fr; }
  .opts.n2.long .opt:last-child{ flex-direction:row; text-align:left; }
  .opts.n2.long .opt:last-child .badge{ left:auto; right:14px; }
}
.pxl{ width:22px; height:22px; image-rendering:pixelated; margin:-4px 0 -4px -6px; animation:bob 1.8s ease-in-out infinite; }
.intro-actions .row .btn{ white-space:nowrap; }
.me-strip{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px 12px 12px 18px; margin:0 0 20px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 80px), var(--panel); border:1px solid var(--line); box-shadow:var(--lift-sm); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); animation:rise .6s var(--ease) backwards; }
.me-strip.hot{ border-color:rgba(69,184,116,.45); background:linear-gradient(180deg, rgba(69,184,116,.12), rgba(69,184,116,.03)), var(--panel); }
.ms-r{ display:grid; gap:2px; padding-right:16px; border-right:1px solid var(--line); }
.ms-r b{ font-size:28px; line-height:1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ms-r b sup{ font-size:13px; color:var(--muted); margin-left:2px; font-weight:600; }
.ms-r .tier{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.ms-t{ margin:0; font-size:13px; line-height:1.45; color:var(--muted); }
.ms-t b{ color:var(--paint); font-weight:600; }
.ms-b{ display:flex; gap:6px; }
.ms-b .btn{ min-height:40px; font-size:13px; padding:0 16px; }
@media (max-width:560px){
  .me-strip{ grid-template-columns:auto minmax(0,1fr); gap:10px 14px; padding:12px 12px 12px 16px; margin-bottom:16px; }
  .ms-b{ grid-column:1 / -1; }
  .ms-b .btn{ flex:1; }
}
#intro::-webkit-scrollbar{ display:none; }
.popt.focus{ box-shadow:0 0 0 2px rgba(245,244,240,.85); }
.popt.on{ box-shadow:0 0 0 1px var(--sodium); }
.resume .btn{ white-space:nowrap; flex-shrink:0; }
@media (max-width:560px){
  .legend{ display:none !important; }
  .me-strip ~ .meta{ display:none; }
  body[data-stage="intro"] #tags{ opacity:0; }
}
@media (max-height:500px){ .legend{ display:none !important; } #intro{ top:calc(env(safe-area-inset-top,0px) + 52px); } }
@media (hover:none){ .foot .keys, .card .keys, .r-foot .keys{ display:none !important; } }
.r-card.fwd{ animation-name:slideFwd; } .r-card.back{ animation-name:slideBack; }
@keyframes slideFwd{ from{ opacity:0; transform:translateX(28px) scale(.99); } to{ opacity:1; transform:none; } }
@keyframes slideBack{ from{ opacity:0; transform:translateX(-28px) scale(.99); } to{ opacity:1; transform:none; } }
.badge{ display:inline-flex; align-items:center; height:20px; padding:0 9px; line-height:1; font-size:13px; font-weight:700; letter-spacing:.08em; margin:0; opacity:1; max-width:none; }
.tag.pick small{ color:#4a3d0e; } .tag.win small{ color:#0e3a20; } .tag.cut small{ color:#4a1a10; } .tag.home small{ color:#1d2c5c; }
.tag.cut{ color:#2a0d07; }
.intro-in{ position:relative; }
.intro-in::before{ content:''; position:absolute; inset:-70px -120px -30px; background:radial-gradient(closest-side, rgba(14,14,13,.82), rgba(14,14,13,.55) 60%, rgba(14,14,13,0)); z-index:-1; pointer-events:none; }
.act-in{ background:radial-gradient(closest-side, rgba(14,14,13,.94), rgba(14,14,13,.8) 60%, rgba(14,14,13,0)); }
@media (max-width:560px){
  .q{ font-size:28px; }
  .lock{ width:100%; margin-left:0; }
  form.lform button{ justify-self:stretch; min-height:48px; }
  .foot .next{ min-height:48px; }
}
@media (max-width:560px){ .board-row{ grid-template-columns:24px minmax(0,1.25fr) minmax(0,1fr) 40px; gap:8px; } }
@keyframes miniIn{ from{ opacity:0; transform:translate(-50%, 16px); } to{ opacity:1; transform:translate(-50%, 0); } }
.mini.closing{ animation:fadeOut .2s var(--ease-in) both; }
::selection{ background:rgba(239,200,77,.35); color:var(--paper); }
body.flat{ background:radial-gradient(90% 70% at 50% 30%, rgba(245,244,240,.07), rgba(18,18,17,0) 70%), linear-gradient(rgba(245,244,240,.025) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(245,244,240,.025) 1px, transparent 1px) 0 0 / 48px 48px, var(--ink); }
body.flat canvas#gl, body.flat #tags, body.flat .legend, body.flat #miniBtn{ display:none !important; }
#loading{ font:500 15px/1.5 var(--font); letter-spacing:.01em; color:var(--muted); padding:0 24px; text-align:center; }
#loading{ position:fixed; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--ink); color:var(--muted); transition:opacity .5s var(--ease), visibility .5s; }
#loading svg{ width:34px; height:26px; fill:var(--paint); animation:breathe 1.8s ease-in-out infinite; }
#loading span{ font:500 14px/1 var(--font); letter-spacing:.04em; }
#loading i{ display:block; width:120px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, rgba(245,244,240,.6), transparent) 0 0 / 50% 100% no-repeat, rgba(245,244,240,.08); animation:shimmer 1.4s var(--ease) infinite; }
#loading.done{ opacity:0; visibility:hidden; }
@keyframes breathe{ 0%,100%{ opacity:.45; transform:scale(.96); } 50%{ opacity:1; transform:none; } }
@keyframes shimmer{ from{ background-position:-60px 0, 0 0; } to{ background-position:180px 0, 0 0; } }
.sheet, .card, .r-card, .siglist, #intro{ scrollbar-width:thin; scrollbar-color:rgba(245,244,240,.18) transparent; }
.sheet::-webkit-scrollbar, .card::-webkit-scrollbar, .r-card::-webkit-scrollbar{ width:8px; }
.sheet::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb, .r-card::-webkit-scrollbar-thumb{ background:rgba(245,244,240,.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.src a.s{ color:var(--paint); text-decoration:underline; text-decoration-color:rgba(245,244,240,.3); text-underline-offset:3px; }
.src a.s:hover{ text-decoration-color:currentColor; }
@media (max-width:560px){
  .intro-in::before{ inset:-110px -20px -24px; background:linear-gradient(180deg, rgba(14,14,13,0), rgba(14,14,13,.78) 110px, rgba(14,14,13,.9) 60%, rgba(14,14,13,.94)); }
}
h1.hero{ text-shadow:0 2px 28px rgba(0,0,0,.55); }
body:not(.kb) :focus-visible{ outline:none; }
body:not(.kb) .opt.focus{ border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.opt.hop{ border-color:var(--sodium); box-shadow:0 0 0 1px var(--sodium); transition:none; }
.shade-t{ height:170px; background:linear-gradient(180deg, rgba(14,14,13,.94), rgba(14,14,13,.7) 45%, rgba(14,14,13,0)); }
.tag.pick small, .tag.win small, .tag.cut small, .tag.home small{ color:rgba(23,23,22,.78); font-weight:600; }
.tag.pick, .tag.win, .tag.home{ color:#171716; }
:root{ --t-display:44px; --t-title:28px; --t-headline:19px; --t-body:16px; --t-caption:13px; }
.q{ font-size:var(--t-title); line-height:1.2; letter-spacing:-.02em; margin:0 0 14px; }
.r-h{ font-size:var(--t-title); }
.lead{ font-size:var(--t-headline); }
@media (max-width:560px){ .lead{ font-size:var(--t-body); } }
.act-in h2{ font-size:clamp(44px, 7vw, 72px); }
.act-in p{ font-size:var(--t-headline); }
@media (max-width:560px){ .act-in p{ font-size:var(--t-body); } }
.cap{ margin:0; font-size:var(--t-caption); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.3; min-width:0; }
.card .top{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; margin:0 0 10px; padding:0; flex-wrap:nowrap; }
.sub{ margin:-6px 0 14px; font-size:var(--t-body); line-height:1.45; color:var(--muted); }
.sub .linkish{ margin-left:6px; }
.fine, .sheet .fine{ font-size:var(--t-caption); line-height:1.45; color:var(--muted); margin:10px 0 0; }
.consent{ margin-top:12px; }
.ring{ position:relative; width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; transition:opacity .2s; }
.ring svg{ position:absolute; inset:0; width:36px; height:36px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:2.5; }
.ring .tr{ stroke:rgba(245,244,240,.14); }
.ring .fg{ stroke:var(--paint); stroke-linecap:round; transition:stroke .3s; }
.ring b{ font-size:var(--t-caption); font-weight:700; font-variant-numeric:tabular-nums; }
.ring.late .fg{ stroke:var(--sodium); } .ring.late b{ color:var(--sodium); }
.ring.done{ opacity:0; }
.opt{ font-size:var(--t-body); min-height:56px; }
.opt .oi{ width:22px; height:22px; flex-shrink:0; display:grid; place-items:center; }
.opt .oi svg{ width:20px; height:20px; }
.opts.stack{ grid-template-columns:1fr !important; gap:8px; }
.opts.n7{ grid-template-columns:1fr 1fr; gap:8px; }
.opts.n7 .opt{ min-height:48px; }
.opts.n7 .opt:last-child{ grid-column:1 / -1; justify-content:center; }
.opts.stack .opt{ min-height:48px; padding:10px 16px; flex-direction:row !important; text-align:left !important; }
.opts.stack .opt .badge{ right:14px; left:auto; }
.opt .val{ font-size:var(--t-caption); color:var(--muted); }
.opt .bar{ bottom:5px; }
.badge{ top:-10px; height:22px; padding:0 9px; font-size:var(--t-caption); font-weight:700; letter-spacing:0; text-transform:none; }
.verdict{ font-size:var(--t-headline); font-weight:700; margin:0 0 6px; }
.verdict.ok{ color:var(--go); }
.verdict.no, .verdict.open{ color:var(--paint); }
.fact{ font-size:var(--t-body); line-height:1.5; }
.src{ display:block; margin:10px 0 0; font-size:var(--t-caption); line-height:1.5; color:var(--muted); }
.src a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(245,244,240,.3); }
.src .linkish{ font-size:var(--t-caption); }
.details{ font-size:var(--t-caption); }
.askrow{ margin:8px 0 0; font-size:var(--t-caption); }
.linkish{ position:relative; font-size:inherit; font-weight:600; color:var(--paint); }
.linkish::after{ content:''; position:absolute; inset:-10px -3px; }
.textrow{ row-gap:0 !important; }
.textrow .linkish{ min-height:44px; display:inline-flex; align-items:center; }
.textrow .linkish::after{ display:none; }
.conf{ display:grid; grid-template-columns:1fr; gap:8px; margin:14px 0 0; }
.conf-q{ font-size:var(--t-body); font-weight:700; }
.conf-p{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.cp{ min-height:44px; padding:0; text-align:center; font-size:var(--t-body); }
.conf-ends{ display:flex; justify-content:space-between; font-size:var(--t-caption); color:var(--muted); margin-top:-2px; }
.sigcard .sig-head{ margin:0 0 4px; padding:0; border:0; background:none; font-size:var(--t-headline); line-height:1.35; font-weight:700; opacity:1; }
.sigcard .sig-why{ margin:0 0 12px; font-size:var(--t-body); line-height:1.45; color:var(--muted); }
.sigcard .q{ font-size:var(--t-headline); line-height:1.3; margin-bottom:12px; }
.tapgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:700px){ .tapgrid.n6{ grid-template-columns:repeat(3, 1fr); } .tapgrid.n8{ grid-template-columns:repeat(4, 1fr); } }
.tap{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; border-radius:16px; border:1px solid var(--line-2); background:linear-gradient(180deg, rgba(245,244,240,.05), rgba(245,244,240,.02)); font-size:var(--t-body); font-weight:600; text-align:left; cursor:pointer; transition:background .15s var(--ease), border-color .15s, transform .15s var(--ease); animation:optIn .3s var(--ease) backwards; }
.tap:hover{ border-color:rgba(245,244,240,.34); }
.tap:active{ transform:scale(.98); }
.tap .tn{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; border:1.5px dashed rgba(245,244,240,.3); font-size:var(--t-caption); font-weight:800; font-variant-numeric:tabular-nums; transition:background .15s, border-color .15s; }
.tap.on{ border-color:rgba(239,200,77,.6); background:linear-gradient(180deg, rgba(239,200,77,.12), rgba(239,200,77,.05)); }
.tap.on .tn{ border:0; background:var(--sodium); color:#171716; animation:dotIn .25s var(--ease); }
.tap .tt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin{ margin:10px 0 0; }
.cmp-r{ font-size:var(--t-body); }
.cmp h4{ font-size:var(--t-caption); }
.pgrid{ grid-template-columns:1fr 1fr !important; gap:8px; }
.pgrid.all{ max-height:min(46vh, 380px); overflow-y:auto; overscroll-behavior:contain; padding:2px; -webkit-mask-image:linear-gradient(180deg, #000 88%, transparent); mask-image:linear-gradient(180deg, #000 88%, transparent); padding-bottom:20px; }
.popt{ min-height:48px; font-size:var(--t-body); }
.popt.more{ border-style:dashed; color:var(--muted); justify-content:center; }
.plist2{ display:grid; gap:8px; margin:4px 0 6px; }
.prow{ position:relative; display:grid; gap:4px; width:100%; padding:14px 48px 14px 16px; border-radius:16px; border:1px solid var(--hairline); background:rgba(245,244,240,.04); text-align:left; cursor:pointer; transition:background .15s, border-color .15s; }
.prow:hover{ background:rgba(245,244,240,.08); border-color:var(--line-2); }
.prow .pq{ font-size:var(--t-body); font-weight:600; line-height:1.35; color:var(--paint); }
.prow .py{ font-size:var(--t-body); color:var(--muted); } .prow .py b{ color:var(--paint); }
.prow .pm{ font-size:var(--t-caption); color:var(--muted); }
.prow.won{ border-color:rgba(69,184,116,.45); }
.chev{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); }
.chev svg{ width:20px; height:20px; }
.sheet .sub{ margin:0 0 14px; color:var(--muted); }
.board-row{ grid-template-columns:28px minmax(0,1fr) 2fr 20px; min-height:44px; position:relative; }
.board-row .chev{ position:static; transform:none; }
#results .r-card{ position:relative; }
.r-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin:-8px 0 6px; }
.r-top .r-kicker{ margin:0; }
.r-back{ width:44px; height:44px; margin-right:-8px; flex-shrink:0; }
.r-card .r-kicker{ font-size:var(--t-caption); }
body.solid canvas#gl{ filter:brightness(.3) saturate(.5); }
body.solid #tags{ opacity:0; }
body.solid .r-card{ background:var(--panel-solid); }
.r-score{ display:flex; align-items:baseline; gap:12px; margin:2px 0 0; }
.r-score b{ font-size:calc(var(--t-display) * 2); line-height:.9; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.r-score span{ font-size:var(--t-title); font-weight:700; color:var(--muted); }
.r-lead{ margin:6px 0 12px; font-size:var(--t-headline); font-weight:600; }
.sq{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.sq i{ width:22px; height:22px; border-radius:6px; background:rgba(245,244,240,.14); animation:pop .3s var(--ease) both; }
.sq i.ok{ background:var(--go); }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.r-rating{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding-top:14px; border-top:1px solid var(--line); }
.r-rating b{ font-size:var(--t-title); font-weight:800; font-variant-numeric:tabular-nums; }
.r-rating span{ font-size:var(--t-body); color:var(--muted); }
.r-rating .tier{ color:var(--sodium); font-weight:700; }
.r-rating .delta{ font-size:var(--t-caption); font-weight:700; }
.r-rating .delta.up{ color:var(--go); } .r-rating .delta.down{ color:var(--muted); }
.spark{ max-width:220px; margin:8px 0 0; }
.spark circle:hover{ r:5; }
.r-cap{ margin:8px 0 0; font-size:var(--t-caption); line-height:1.45; color:var(--muted); }
.r-p{ font-size:var(--t-body); }
.r-p.lean, .r-p.vs{ margin:12px 0 0; }
.r-act{ margin:18px 0 0; display:grid; gap:10px; }
.r-act .btn{ width:100%; }
.tabs.t5{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; padding:4px; margin:0 0 14px; border-radius:var(--r-pill); background:rgba(245,244,240,.06); }
.tabs.t5 button{ min-height:40px; border:0; padding:0 4px; font-size:var(--t-caption); font-weight:700; border-radius:var(--r-pill); color:var(--muted); }
.tabs.t5 button.on{ background:var(--paper); color:#171716; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.tabs button{ min-height:44px; font-size:var(--t-caption); }
.e-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--t-headline); margin:0 0 8px; }
.early{ font-size:var(--t-caption); font-weight:700; color:var(--sodium); }
.e5{ list-style:none; margin:0; padding:0; display:grid; }
.e5 li{ display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:40px; border-bottom:1px solid var(--line); font-size:var(--t-body); font-weight:600; animation:rise .3s var(--ease) backwards; }
.e5 li:nth-child(2){ animation-delay:.03s; } .e5 li:nth-child(3){ animation-delay:.06s; } .e5 li:nth-child(4){ animation-delay:.09s; } .e5 li:nth-child(5){ animation-delay:.12s; }
.e5 .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.e5 .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e5 .sh{ font-size:var(--t-caption); color:var(--muted); font-variant-numeric:tabular-nums; }
.e5 .you{ font-size:var(--t-caption); font-weight:700; color:var(--sodium); white-space:nowrap; }
.rowlink{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; margin:12px 0 0; padding:0 4px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:none; font-size:var(--t-body); text-align:left; cursor:pointer; color:var(--paint); }
.rowlink svg{ width:20px; height:20px; color:var(--muted); flex-shrink:0; }
.rowlink:hover svg{ color:var(--paint); }
.card-prev{ max-width:min(300px, 100%); margin:0 auto 14px; }
.r-act.stack{ margin-top:0; }
.textrow{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 10px; margin:14px 0 0; font-size:var(--t-body); }
.textrow span{ color:var(--dim); }
.r-card.s3 .r-cap{ text-align:center; }
.r-card.fwd, .r-card.back{ animation-duration:.28s; }
.me-strip .ms-b{ gap:16px; }
.ms-r .tier{ font-size:var(--t-caption); letter-spacing:.06em; color:var(--sodium); }
.weekly .cap{ margin:0 0 8px; }
.wk-streak{ color:var(--sodium); text-transform:none; letter-spacing:0; }
.wk-h{ font-size:var(--t-body); }
.wk-q{ font-size:var(--t-body); }
.wk-opts .opt{ min-height:44px; font-size:var(--t-body); }
.wk-foot{ font-size:var(--t-caption); }
.weekly.full .wk-h{ font-size:var(--t-headline); }
.cnt-ok{ color:var(--go); font-weight:800; } .cnt-of{ opacity:.6; }
.card{ animation-duration:.3s; }
.opt{ animation-duration:.3s; }
.act-in{ animation-duration:.3s; }
.sheet{ animation-duration:.3s; }
.r-card{ animation-duration:.3s; }
@media (max-width:560px){
  .card{ padding:16px 16px 14px; }
  .opts.n2 .opt{ min-height:56px; }
  .r-score b{ font-size:80px; }
  .textrow{ gap:2px 8px; }
}
body[data-stage="intro"] .shade-t{ height:96px; }
.gloss{ margin:-8px 0 12px; font-size:var(--t-caption); line-height:1.45; color:var(--muted); }
.cont{ width:100%; margin-top:12px; }
.tap .today{ margin-left:auto; font-size:var(--t-caption); color:var(--dim); font-weight:500; white-space:nowrap; }
.textrow{ gap:0 18px; }
.textrow.two{ margin-top:0; }
.ms-r .ms-l{ font-size:var(--t-caption); color:var(--muted); font-weight:600; }
.weekly .sigsrc, .sheet .weekly .sigsrc{ color:inherit; text-decoration:none; }
.weekly .sigsrc:hover{ text-decoration:underline; text-underline-offset:3px; }
:root{ --dur:250ms; --dur-fast:150ms; --t-numeral:132px; }
@media (max-width:560px){ :root{ --t-numeral:112px; } }
h1.hero{ font-size:var(--t-display); }
@media (min-width:900px){ h1.hero{ font-size:calc(var(--t-display) * 1.5); } }
.act-in h2{ font-size:var(--t-display); }
.how-step h2{ font-size:var(--t-display); }
.how-step p{ font-size:var(--t-body); }
@media (min-width:700px){ .how-step p{ font-size:var(--t-headline); } }
.mark{ font-size:var(--t-body) !important; }
.iconbtn, .backlink{ width:44px; height:44px; }
.backlink{ width:auto; }
@media (max-width:560px){ .iconbtn, .backlink{ width:44px; height:44px; } }
.tabs.t5 button{ min-height:44px; }
.linkish{ display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; vertical-align:middle; }
.linkish::after{ display:none; }
.src .linkish, .sub .linkish, .r-cap .linkish{ margin:-14px 0; }
.chg{ margin:6px 0 0; }
.card, .opt, .tap, .r-card, .sheet, .act-in, .how-step, .me-strip, .e5 li, .pixel{ animation-duration:var(--dur) !important; }
.opts .opt:nth-child(n){ animation-delay:0s; } .opts .opt:nth-child(2){ animation-delay:30ms; } .opts .opt:nth-child(3){ animation-delay:60ms; }
.opt .bar{ transition-duration:300ms; transition-delay:0s; }
.opt .val{ transition-duration:var(--dur); transition-delay:0s; }
.badge{ animation-duration:var(--dur-fast); }
canvas#gl{ transition:filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.meter i, .sq i{ animation-duration:var(--dur); }
#stage > .leaving{ animation-duration:var(--dur-fast); }
body.solid canvas#gl{ opacity:0; }
body.solid .shade-b, body.solid .legend{ opacity:0; }
.r-card.s1{ display:flex; flex-direction:column; background:var(--panel-solid); }
@media (max-width:560px){ .r-card.s1{ min-height:calc(100dvh - 92px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); } }
.r-card.s1 .r-act{ margin-top:auto; padding-top:20px; }
.r-score b{ font-size:var(--t-numeral); }
.sq i{ width:28px; height:28px; }
.r-card > .r-kicker{ margin:0 0 8px; }
.e-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.e-yr{ font-size:var(--t-caption); color:var(--muted); white-space:nowrap; }
.e5 .you{ display:inline-grid; place-items:center; min-width:24px; height:24px; border-radius:12px; background:var(--sodium); color:#171716; font-size:var(--t-caption); font-weight:800; }
.e5 .you.none{ background:none; }
.e5 .you.pick{ width:auto; padding:0 10px; }
.rowlink span{ display:grid; gap:2px; padding:8px 0; }
.rowlink b{ font-weight:600; }
.rowlink small{ font-size:var(--t-caption); color:var(--muted); }
.r-cap.center{ text-align:center; margin:0 0 14px; }
@media (max-width:560px){ .card-prev{ max-width:260px; } }
.trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin:10px 0 0; border-top:1px solid var(--line); }
.trio button{ min-height:48px; border:0; background:none; font-size:var(--t-body); font-weight:600; color:var(--paint); cursor:pointer; border-radius:12px; }
.trio button + button{ border-left:1px solid var(--line); border-radius:0; }
.trio button:hover{ background:rgba(245,244,240,.05); }
.menu{ display:grid; margin:4px 0 0; }
.menu button{ position:relative; display:grid; gap:2px; text-align:left; min-height:64px; padding:12px 40px 12px 0; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; color:var(--paint); }
.menu button b{ font-size:var(--t-body); font-weight:600; }
.menu button span{ font-size:var(--t-caption); color:var(--muted); }
.menu button svg{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); }
#segs i[role=button]{ cursor:pointer; position:relative; }
#segs i[role=button]::after{ content:''; position:absolute; inset:-20px 0; }
.hl-head{ display:flex; justify-content:space-between; font-size:var(--t-caption); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.hl{ list-style:none; margin:0 0 12px; padding:0; }
.hl li{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:36px; border-bottom:1px solid var(--line); font-size:var(--t-body); font-weight:600; }
.hl .n{ color:var(--muted); font-variant-numeric:tabular-nums; }
.hl .mk{ display:inline-flex; align-items:center; gap:4px; font-size:var(--t-caption); color:var(--muted); font-variant-numeric:tabular-nums; }
.hl .mk svg{ width:14px; height:14px; }
.hl .mk.ok{ color:var(--go); font-weight:700; }
blockquote.story{ margin:0 0 14px; padding:2px 0 2px 14px; border-left:2px solid rgba(245,244,240,.25); }
.sigcard .sig-head{ font-size:var(--t-body); font-weight:600; margin:0 0 4px; }
.sigcard .sig-why{ font-size:var(--t-body); margin:0; }
.sigcard .q{ font-size:var(--t-title); }
.intro-actions + .me-strip{ margin:16px 0 0; }
.wk-link{ display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 0; font-size:var(--t-body); }
.wk-link span{ font-size:var(--t-caption); color:var(--muted); }
#weeklyHost .weekly{ display:none; }
.textrow.lnd{ justify-content:center; margin:6px 0 0; gap:0 24px; }
.trio.two{ grid-template-columns:1fr 1fr; }
.ltable .soon{ font-size:var(--t-caption); color:var(--muted); font-weight:600; }
.intro-actions{ gap:6px; }
.wk-link span{ white-space:nowrap; }
.revealed .gloss{ display:none; }
.e5 .you, .e5 .you.pick{ display:inline; min-width:0; height:auto; padding:0; border-radius:0; background:none; color:var(--sodium); font-size:var(--t-caption); font-weight:700; white-space:nowrap; }
.sq{ flex-wrap:nowrap; gap:5px; }
.sq i{ flex:1 1 0; width:auto; max-width:28px; height:auto; aspect-ratio:1; }
.e5 .v{ font-size:var(--t-caption); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.e5 li.mine .nm{ color:var(--sodium); }
.duo{ margin:6px 0 10px; display:grid; gap:6px; }
.duo-h, .duo-r{ display:grid; grid-template-columns:minmax(56px, 24%) 1fr 1fr; gap:10px; align-items:center; }
.duo.one .duo-h, .duo.one .duo-r{ grid-template-columns:minmax(64px, 30%) 1fr; }
.duo-h span{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(245,244,240,.72); }
.duo-r b{ font-size:14px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duo-r.mine b{ color:var(--sodium); }
.duo-b{ position:relative; display:flex; align-items:center; gap:8px; min-width:0; height:22px; }
.duo-b i{ display:block; flex:none; width:calc((100% - 92px) * var(--w)); height:8px; border-radius:4px; background:rgba(245,244,240,.28); transform-origin:left; animation:duoGrow .5s var(--ease) both; }
.duo-b.plan i{ background:rgba(245,244,240,.55); }
.duo-r.mine .duo-b i{ background:var(--sodium); opacity:.55; }
.duo-r.mine .duo-b.plan i{ opacity:1; }
.duo-b em{ font-style:normal; font-size:13px; font-weight:700; color:rgba(245,244,240,.86); font-variant-numeric:tabular-nums; white-space:nowrap; }
.duo-b:hover em{ color:var(--paper); }
.duo-n{ margin:2px 0 0; font-size:var(--t-caption); color:var(--muted); }
@keyframes duoGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .duo-b i{ animation:none; } }
.e5 li.gap{ margin-top:10px; border-top:1px dashed var(--line-2); }
.r-calls{ list-style:none; margin:14px 0 6px; padding:0; display:grid; }
.r-calls li{ display:grid; grid-template-columns:84px 1fr; align-items:baseline; gap:10px; min-height:44px; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--t-body); }
.r-calls li > span:first-child{ font-size:var(--t-caption); font-weight:700; color:var(--muted); }
.r-calls li b{ color:var(--sodium); }
.duo:not(.one) .duo-b i{ width:calc((100% - 66px) * var(--w)); }
.duo:not(.one) .duo-b em{ font-size:12px; }