/* SCOREBORN */
:root{--base:#0C0C0D;--surface:#121214;--surface2:#17171A;--elev:#1C1C1F;--line:#1C1C1E;--line-strong:#3D3D3A;--text:#EDEBE6;--text2:#8A8884;--muted:#6E6B66;--ghost:#3B3B39;--signal:#7C6CFF;--rea:#FF5A2D;--pre:#B7BEC9;--mem:#2E8B54;--rcl:#5B8DFF;--spd:#84FF00;--log:#FF6E9C;--knw:#98E8DF;--slf:#871E2C;--good:#7DE248;--bad:#E5484D;--sans:"Poppins","Archivo",system-ui,sans-serif;--mono:"Poppins","Archivo",system-ui,sans-serif;--score:"JetBrains Mono",ui-monospace,monospace;--r-card:12px;--r-btn:2px;--cta:#7C6CFF;--cta-ink:#FFFFFF;--wm:#0F0F10;--nav-bg:rgba(12,12,13,.86)}

body[data-theme=hybrid]{--base:#0D1120;--surface:#141A2E;--surface2:#1A2138;--elev:#202A48;--line:#1E2740;--line-strong:#3A4A73;--text:#F2F4FA;--text2:#9AA3BC;--muted:#66708E;--ghost:#454E68;--cta:#7C6CFF;--cta-ink:#FFFFFF;--wm:#101527;--nav-bg:rgba(13,17,32,.88)}
body[data-theme=bright]{--base:#EDEEF0;--surface:#FFFFFF;--surface2:#E9EEF6;--elev:#FFFFFF;--line:#DFE5EF;--line-strong:#C2CCDC;--text:#10131C;--text2:#4C5568;--muted:#7B8496;--ghost:#A2AAB8;--rea:#E33D0F;--pre:#6F737A;--mem:#22633D;--rcl:#2E62C8;--spd:#4FB300;--log:#D14B78;--good:#2F9E50;--bad:#E03A10;--cta:#5B48E8;--cta-ink:#FFFFFF;--wm:#EAEFF7;--nav-bg:rgba(242,240,234,.94)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--text);font-family:var(--mono);font-size:11px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--mono);cursor:pointer}
:focus-visible{outline:1px solid var(--text2);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hidden{display:none!important}
.scream{font-family:var(--sans);font-weight:600;font-size:clamp(64px,14vw,120px);letter-spacing:-.03em;line-height:.95;color:var(--text);font-variant-numeric:tabular-nums}
/* Headline: solid ink, zero transparent-fill tricks — cannot render invisible on any GPU/driver.
   Depth comes from weight, tracking, a two-edge chisel shadow, and the solid molten mark. */
.h1{font-family:var(--sans);font-weight:700;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.028em;line-height:1.04;color:var(--h1-ink,#F4F1E8);text-wrap:balance;text-shadow:0 2px 0 rgba(0,0,0,.55),0 -1px 0 rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.5)}
.h1 .mark,.h2 .mark{font-style:normal;color:var(--signal);text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 30px rgba(124,108,255,.38)}
body[data-theme=bright] .h1{--h1-ink:#14120D;text-shadow:0 1px 0 rgba(255,255,255,.7)}
body[data-theme=bright] .h1{--h1-ink:#0E1118}
body[data-theme=hybrid] .h1{--h1-ink:#F4F6FC}
.h2{font-family:var(--sans);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.lede{font-family:var(--sans);font-size:clamp(15px,1.5vw,17px);color:var(--text2);line-height:1.7;text-transform:none;letter-spacing:0}
.body-t{font-family:var(--sans);font-size:14.5px;color:var(--text2);line-height:1.65;text-transform:none;letter-spacing:0}
.whisper{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.whisper-t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.whisper-2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.ghost-t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6a6660;line-height:1.8}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--signal);vertical-align:middle;margin-right:10px}
.sig{color:var(--signal)}
#tbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 28px;height:82px;background:var(--nav-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#tbar .wm .wm-word,.wm .wm-dot{font-weight:inherit;font-style:normal;letter-spacing:inherit}
.wm{background:none;border:none;padding:0;font-family:var(--mono);font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.18em;color:var(--text);cursor:pointer;text-transform:uppercase;white-space:nowrap;text-decoration:none;text-shadow:0 0 12px rgba(244,241,232,.34),0 0 36px rgba(120,108,255,.24)}
#tbar nav{display:flex;gap:4px;flex:1;justify-content:center}
#tbar nav button,#tbar nav a{background:none;border:none;font-size:11px;letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;color:var(--muted);padding:8px 13px;border-radius:11px;transition:color .15s;display:inline-block}
#tbar nav button:hover,#tbar nav a:hover{color:var(--text)}
#tbar nav button.on{color:var(--text)}
#tbar .rec{font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;cursor:pointer;border:1px solid var(--line-strong);border-radius:11px;padding:8px 14px;background:none;white-space:nowrap;transition:color .15s,border-color .15s}
#tbar .rec:hover{color:var(--text);border-color:var(--text2)}
main{padding-top:82px}
#homeHero{position:relative;overflow:hidden}
#homeHero .hero2{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;min-height:calc(100vh - 60px);padding-top:56px;padding-bottom:90px;position:relative;z-index:1}
#watermark{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:min(340px,52vw);color:var(--wm);pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1;z-index:0}
#themeSel{position:fixed;bottom:56px;right:18px;z-index:210;display:flex;gap:4px;background:var(--nav-bg);border:1px solid var(--line-strong);border-radius:11px;padding:4px}
#themeSel button{background:none;border:none;color:var(--muted);font-size:9px;letter-spacing:.1em;padding:6px 10px;text-transform:uppercase}
#themeSel button.on{color:var(--text);background:var(--surface2)}
.hero-ctas{display:flex;gap:10px;flex-wrap:nowrap;margin-top:16px}
.hero-ctas .btn{white-space:nowrap}
@media(max-width:460px){.hero-ctas .btn{padding:11px 16px;font-size:10.5px;letter-spacing:.1em}}
.hero-ctas .btn-lg{padding:14px 30px;font-size:12px;letter-spacing:.14em}
#ticker{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);display:flex;justify-content:center;gap:clamp(18px,2.6vw,38px);padding:13px 24px;flex-wrap:wrap;z-index:1}
#ticker span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#ticker .live{color:var(--signal)}
#ticker .coord{color:var(--text2)}
.membercard.micro{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.membercard.micro .mc-gpa{transition:color .15s}
.membercard.micro.armed{border-color:var(--signal)}
.micro-hint{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:none;border:1px solid var(--line);color:var(--text2);border-radius:11px;padding:8px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.15s}
.chip.on{border-color:var(--text2);color:var(--text)}
.chip:hover{color:var(--text)}
.featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:40px}
.feat{background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:10px}
.feat .f-cta{margin-top:auto}
.bests-strip{display:flex;gap:26px;flex-wrap:wrap;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:14px 20px;margin-bottom:40px}
.bests-strip span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bests-strip b{color:var(--text);font-weight:500}
#navAcct{display:flex;gap:8px;align-items:center}
#navAcct .signin{background:none;border:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 10px;transition:color .15s}
#navAcct .signin:hover{color:var(--text)}
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.door{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:20px 18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:background .15s,border-color .15s,transform .15s;min-height:104px}
.door:hover{background:var(--surface2);border-color:var(--text2);transform:translateY(-1px)}
.door .d-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.door .d-t{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text)}
.door.primary{background:var(--cta)}
.door.primary .d-k{color:color-mix(in srgb,var(--cta-ink) 62%,transparent)}
.door.primary .d-t{color:var(--cta-ink)}
.door.primary:hover{filter:brightness(1.1)}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:8px;animation:pulseDot 1.6s ease infinite}
@keyframes pulseDot{0%,to{opacity:1}50%{opacity:.35}}
.pressure{border:1px solid var(--line);border-left:2px solid var(--signal);border-radius:11px;background:var(--surface);padding:13px 18px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.calc{animation:calcPulse 1s ease infinite alternate}
@keyframes calcPulse{0%{opacity:.4}to{opacity:1}}
.sec{padding:26px 0;border-top:1px solid var(--line-strong)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sec-link{background:none;border:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0;transition:color .15s}
.sec-link:hover{color:var(--text)}
.daily-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:22px 24px}
.prem{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:18px 22px}
#stickyCta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#0c0c0deb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
body.testing #stickyCta{display:none!important}
main{animation:pageIn .3s ease both;padding-bottom:80px}
@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.ph{margin:34px 0 22px}
.ph .whisper{display:block;margin-bottom:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.rule{height:1px;background:var(--line)}
.tag{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:11px;padding:3px 9px;color:var(--muted)}
.tag-rec{color:var(--good);border-color:var(--good)}
.tag-done{color:var(--good);border-color:color-mix(in srgb,var(--good) 55%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.tag-todo{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 45%,transparent)}

.notice{border:1px solid var(--line);border-left:2px solid var(--line-strong);border-radius:11px;background:var(--surface);padding:14px 18px;color:var(--text2);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--r-btn);padding:12px 22px;border:1px solid var(--line-strong);background:transparent;color:var(--text);transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-fill{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn-fill:hover{filter:brightness(1.12)}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:10px}
.testgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.testcard{--tint:var(--pre);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 6%,var(--surface)) 0%,var(--surface) 55%);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:24px 22px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s;min-height:190px}
.testcard:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 11%,var(--surface2)) 0%,var(--surface2) 60%);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.42);border-color:color-mix(in srgb,var(--tint) 55%,var(--line-strong))}
.testcard .tc-top{display:flex;justify-content:space-between;align-items:center}
.testcard .tc-glyph{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tint);background:color-mix(in srgb,var(--tint) 10%,transparent);border:1px solid color-mix(in srgb,var(--tint) 26%,transparent);transition:background .15s}
.testcard:hover .tc-glyph{background:color-mix(in srgb,var(--tint) 17%,transparent)}
.testcard{border-top:2px solid color-mix(in srgb,var(--tint) 34%,transparent)}
.testcard:hover{border-top-color:var(--tint)}
.testcard .tc-name{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--text);letter-spacing:0}
.testcard .tc-domain{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tint);margin-top:5px}
.testcard .tc-desc{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--text2);flex:1;text-transform:none;letter-spacing:0}
.testcard .tc-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.testcard .tc-best{color:var(--text2)}
.testcard .tc-cta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);border:1px solid var(--line-strong);border-radius:11px;padding:9px 0;text-align:center;margin-top:2px;transition:border-color .15s,color .15s}
.testcard:hover .tc-cta{border-color:var(--text);color:var(--text)}
.tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tab{background:none;border:1px solid var(--line);color:var(--text2);border-radius:11px;padding:8px 18px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.15s}
.tab.on{border-color:var(--text2);color:var(--text)}
.tab:disabled{opacity:.4;cursor:default}
.lb-row{display:grid;grid-template-columns:64px 1fr 110px;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.lb-row.full{grid-template-columns:52px 1.5fr 110px 76px 90px}
.lb-move{font-size:10px;letter-spacing:.1em;color:var(--muted);text-align:right;text-transform:uppercase}
.lb-move .up{color:var(--good)}
.lb-row:hover{background:var(--surface)}
.lb-row.you{border-left:2px solid var(--signal);padding-left:16px}
.lb-rank{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.lb-handle{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);display:flex;gap:12px;align-items:center;min-width:0}
.lb-handle small{color:var(--ghost);font-size:9px;letter-spacing:.1em}
.lb-gpa{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.lb-str{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right}
.bars{display:grid;gap:16px}
.bar-row{display:grid;grid-template-columns:120px 1fr 40px;gap:16px;align-items:center}
.bar-row .b-name{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.bar-row .b-track{height:5px;border-radius:11px;background:var(--surface2);overflow:hidden}
.bar-row .b-fill{height:100%;border-radius:11px;width:0;transition:width .9s ease}
.bar-row .b-val{font-size:11px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.bar-row.locked .b-name,.bar-row.locked .b-val{color:var(--ghost)}
.bar-row.locked .b-track{background:var(--surface)}
.unseal .bar-row{opacity:0;animation:unseal .5s ease forwards}
.unseal .bar-row:nth-child(2){animation-delay:.06s}
.unseal .bar-row:nth-child(3){animation-delay:.12s}
.unseal .bar-row:nth-child(4){animation-delay:.18s}
.unseal .bar-row:nth-child(5){animation-delay:.24s}
.unseal .bar-row:nth-child(6){animation-delay:.3s}
@keyframes unseal{to{opacity:1}}
.char-frame{background:#0c0c0d;border:1px solid #2A2A28;border-radius:11px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}
.char-frame .cf-plate{display:flex;justify-content:space-between;width:100%;align-items:baseline}
.char-frame .cf-plate span{color:#8a8884}
.char-frame svg{display:block}
.creator-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.sel-group{margin-bottom:26px}
.sel-group .whisper{display:block;margin-bottom:12px}
.face-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.face-tile{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:6px 2px 0;cursor:pointer;display:flex;justify-content:center;transition:border-color .15s;overflow:hidden;height:74px}
.face-tile:hover{border-color:var(--line-strong)}
.face-tile.on{border-color:var(--cta)}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);cursor:pointer;transition:.15s}
.opt:hover{color:var(--text)}
.opt.on{border-color:var(--cta);color:var(--text)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:11px;border:1px solid var(--line-strong);cursor:pointer;transition:transform .12s,border-color .15s}
.swatch:hover{transform:scale(1.06)}
.swatch.on{border:2px solid var(--text);transform:scale(1.06)}
.attr-board{display:grid;gap:11px}
.attr-row{display:grid;grid-template-columns:150px 1fr 40px;gap:14px;align-items:center}
.attr-row .a-name{font-size:11px;letter-spacing:.16em;color:var(--text)}
.attr-row .a-name small{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.attr-row .a-pips{display:flex;gap:5px}
.attr-row .a-pips i{width:16px;height:9px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);transition:background .3s}
.attr-row .a-pips i.on{border-color:transparent}
.attr-row .a-val{font-family:var(--sans);font-weight:600;font-size:14px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.attr-row.locked .a-name,.attr-row.locked .a-val{color:var(--ghost)}
.rec-char-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start;margin-top:8px}
@media(max-width:1000px){.creator-grid,.rec-char-grid{grid-template-columns:1fr;gap:28px}.attr-row{grid-template-columns:118px 1fr 36px}.attr-row .a-pips i{width:12px}}
.rec-title{font-family:var(--sans);font-weight:700;font-size:clamp(26px,6.4vw,40px);line-height:1.04;letter-spacing:-.01em;margin:4px 0 6px;text-shadow:0 0 22px currentColor}
.rec-blurb{font:400 12px/1.62 var(--mono);color:var(--text2);max-width:460px;margin:0 0 26px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.statbox{background:var(--base);padding:20px 16px;text-align:center}
.statbox .s-val{font-family:var(--sans);font-weight:600;font-size:22px;color:var(--text);font-variant-numeric:tabular-nums}
.statbox .s-lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.badge{background:var(--base);padding:16px 12px;text-align:center}
.badge .b-nm{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:6px}
.badge .b-ht{font-size:9px;letter-spacing:.06em;color:var(--ghost);margin-top:3px;text-transform:uppercase}
.badge .b-ic{font-size:13px;color:var(--text2)}
.badge:not(.earned){opacity:.35}
.runlist .lb-row{grid-template-columns:100px 1fr 80px 80px}
#testView{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--base);display:none;flex-direction:column}
#testView.on{display:flex;animation:pageIn .25s ease}
#testTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line)}
#testTop .t-mode{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
#testTop .wm{font-size:10px;letter-spacing:.28em;color:var(--text);text-transform:uppercase}
#testQuit,#tMute{background:none;border:1px solid var(--line-strong);color:var(--text2);border-radius:11px;padding:8px 14px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
#testQuit:hover,#tMute:hover{color:var(--text);border-color:var(--text2)}
#testProg{height:2px;background:var(--surface2)}
#testProg i{display:block;height:100%;width:0;background:var(--text);transition:width .45s ease}
#stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;max-width:860px;width:100%;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:16px}
.g-domain{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.g-name{font-family:var(--sans);font-weight:600;font-size:clamp(28px,4.5vw,40px);letter-spacing:-.02em}
.g-desc{font-family:var(--sans);font-size:15px;color:var(--text2);max-width:440px;line-height:1.6}
.g-score-line{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.g-big{font-family:var(--sans);font-weight:600;font-size:clamp(54px,8vw,78px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.g-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.g-pb{font-size:10px;letter-spacing:.14em;color:var(--text2);text-transform:uppercase}
.newbest{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--signal);animation:nbPulse 1.1s ease infinite alternate}
@keyframes nbPulse{0%{opacity:.6}to{opacity:1}}
.best-flash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(55% 45% at 50% 45%,rgba(124,108,255,.12),transparent 70%);animation:bFlash .8s ease both}
@keyframes bFlash{0%{opacity:0}25%{opacity:1}to{opacity:0}}
.shake{animation:shake .3s}
@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-9px)}75%{transform:translate(9px)}}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.9);opacity:0}}
#cdOverlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:5;background:#0c0c0ddb}
#cdOverlay .cd-n{font-family:var(--sans);font-weight:600;font-size:5.5rem;color:var(--text);animation:cdPop .5s ease both}
@keyframes cdPop{0%{transform:scale(1.4);opacity:0}}
.grid-g{display:grid;gap:8px;touch-action:manipulation}
.cell{border-radius:6px;background:var(--surface2);border:1px solid var(--line-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--text);transition:background .12s,transform .08s}
.cell:active{transform:scale(.93)}
.cell.lit{background:var(--text);border-color:transparent;color:var(--base)}
.cell.good{border-color:var(--good);color:var(--good)}
.cell.err{border-color:var(--bad);color:var(--bad)}
.duo{display:flex;gap:12px;width:100%;max-width:440px}
.duo .btn{flex:1;padding:18px 0;font-size:12px}
.btn-no{border-color:#e5484d8c;color:var(--bad)}
.btn-no:hover{border-color:var(--bad)}
.choices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.choice{min-width:76px;padding:18px;border-radius:6px;background:var(--surface2);border:1px solid var(--line-strong);font-size:1.6rem;color:var(--text);cursor:pointer;transition:transform .08s,border-color .15s}
.choice:hover{border-color:var(--text2)}
.choice:active{transform:scale(.95)}
#tgt{position:absolute;border-radius:50%;cursor:pointer;background:var(--text);box-shadow:0 0 0 1px var(--base),0 0 24px #edebe640}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:9px;justify-content:center}
.pad .cell{height:58px}
.minirow{display:grid;gap:1px;max-width:440px;width:100%;background:var(--line);border:1px solid var(--line)}
.mini{background:var(--base);padding:14px 8px;text-align:center}
.mini b{font-family:var(--sans);font-weight:600;font-size:1.3rem;display:block}
.mini span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.res-wrap{text-align:center;padding-top:40px}
.res-gpa{font-family:var(--sans);font-weight:600;font-size:clamp(80px,16vw,150px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;animation:pop .5s ease both}
.res-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;text-align:left;margin-top:56px}
.membercard{--text:#EDEBE6;--text2:#8A8884;--muted:#5A5A58;--ghost:#6A6660;--line:#1A1A19;--line-strong:#2A2A28;--surface2:#151516;background:#0c0c0d;border:1px solid var(--line-strong);border-radius:11px;color:var(--text);aspect-ratio:4/5;max-width:400px;margin:0 auto;padding:30px;position:relative;display:flex;flex-direction:column}
.membercard .mc-top{display:flex;justify-content:space-between;align-items:center}
.membercard .mc-gpa{font-family:var(--sans);font-weight:600;font-size:clamp(64px,9vw,92px);letter-spacing:-.03em;line-height:1;margin:auto 0;font-variant-numeric:tabular-nums}
.membercard .mc-rows{display:grid;gap:8px;margin-bottom:26px}
.membercard .mc-row{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.membercard .mc-row span:first-child{color:var(--muted)}
.membercard .mc-row span:last-child{color:var(--text)}
.membercard .mc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.membercard .mc-serial{font-size:9px;letter-spacing:.18em;color:var(--muted)}
.membercard .mc-wm{font-size:9px;letter-spacing:.28em;color:var(--text)}
.claim-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:14px 15px;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--text2)}
.benefits li{list-style:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);padding:13px 0;border-bottom:1px solid var(--line)}
.sci-block{border-bottom:1px solid var(--line);padding:22px 0}
.sci-block h3{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);font-weight:500;margin-bottom:10px;font-family:var(--mono)}
.sci-block p{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--text2)}
footer{border-top:1px solid var(--line);padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer span,footer button,footer a{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost);background:none;border:none;padding:0}
footer button:hover,footer a:hover{color:var(--muted)}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%) translateY(16px);z-index:200;background:var(--elev);border:1px solid var(--line-strong);border-radius:11px;padding:12px 22px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);opacity:0;transition:.22s ease;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%)}
#lookup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;background:#0c0c0de6;display:none;align-items:center;justify-content:center;padding:24px}
#lookup.on{display:flex;animation:pageIn .2s ease}
#lookup .membercard{width:100%}
::selection{background:var(--signal);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--base)}
::-webkit-scrollbar-thumb{background:var(--surface2);border:2px solid var(--base);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}
/* hero glow — one warm pool of light behind the headline */
#homeHero:before{content:"";position:absolute;top:-20%;left:-12%;width:64%;height:120%;pointer-events:none;background:radial-gradient(48% 42% at 38% 46%,rgba(124,108,255,.08),transparent 70%);z-index:0}

/* ---------- Mindwright additions ---------- */
/* Brand break — the rotating-brain logo film. Plays while in view; poster first paint. */
#brandBreak{border-top:1px solid var(--line);position:relative;overflow:hidden}
#brandBreak .bb-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:84px 0}
#brandBreak video{width:min(420px,80vw);aspect-ratio:1/1;display:block;margin:0 auto;border:1px solid var(--line-strong);border-radius:11px;background:#000;box-shadow:0 0 64px rgba(124,108,255,.08)}
#brandBreak .bb-copy .whisper{display:block;margin-bottom:14px}
#brandBreak .bb-copy .h2{margin-bottom:14px}
@media(max-width:1000px){#brandBreak .bb-inner{grid-template-columns:1fr;gap:36px;padding:60px 0;text-align:center}#brandBreak .bb-copy{order:2}}
/* Static SEO test-card links share .testcard styles; keep anchor semantics */
a.testcard{display:flex}
/* Classic-arena tests (legacy engine) */
.testcard .tc-classic{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:11px;padding:3px 8px}
/* Battery doors */
.battery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.battery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.battery-grid{grid-template-columns:1fr}}
.bat{background:linear-gradient(180deg,color-mix(in srgb,var(--tint,var(--text2)) 7%,var(--surface)) 0%,var(--surface) 62%);border:1px solid var(--line-strong);border-top:2px solid color-mix(in srgb,var(--tint,var(--text2)) 40%,transparent);border-radius:var(--r-card);padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:background .15s,transform .18s,box-shadow .18s,border-color .18s}
.bat:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--tint,var(--text2)) 12%,var(--surface2)) 0%,var(--surface2) 65%);border-color:color-mix(in srgb,var(--tint,var(--text2)) 55%,var(--line-strong));border-top-color:var(--tint,var(--text2));transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.42)}
/* completionist: cards flip state when their test is done */

.bat .b-kicker{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--tint,var(--muted))}
.bat .b-glyph{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--tint,var(--text2));background:color-mix(in srgb,var(--tint,var(--text2)) 10%,transparent);border:1px solid color-mix(in srgb,var(--tint,var(--text2)) 26%,transparent);margin-bottom:2px}
.collection-strip a[data-next]{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);border-radius:11px;padding:9px 14px;white-space:nowrap;transition:border-color .15s}
.collection-strip a[data-next]:hover{border-color:var(--signal)}
.bat .b-name{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text)}
.bat .b-desc{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--text2);flex:1}
.bat .b-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:11px}
/* Collection strip */
.collection-strip{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:20px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between}
.collection-strip .c-track{flex:1;min-width:180px;height:5px;border-radius:11px;background:var(--surface2);overflow:hidden}
.collection-strip .c-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--good));transition:width .9s ease}
.collection-strip .c-count{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text);white-space:nowrap}
/* Test landing pages */
.tp-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.tp-hero .tp-domain{margin-bottom:14px;display:block}
.tp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;padding:56px 0}
@media(max-width:1000px){.tp-grid{grid-template-columns:1fr;gap:32px}}
.prose{font-family:var(--sans);font-size:15px;line-height:1.75;color:var(--text2);text-transform:none;letter-spacing:0}
.prose h2{font-family:var(--sans);font-weight:600;font-size:22px;color:var(--text);margin:34px 0 12px;letter-spacing:-.01em}
.prose p{margin-bottom:14px}
.prose strong{color:var(--text);font-weight:600}
.tp-panel{position:sticky;top:84px}
.tp-facts{display:grid;gap:0;border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:18px}
.tp-facts div{display:flex;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.tp-facts div:last-child{border-bottom:none}
.tp-facts span:first-child{color:var(--muted)}
.tp-facts span:last-child{color:var(--text)}
.tp-related{margin-top:26px}
.tp-related .whisper{display:block;margin-bottom:12px}
.tp-related a{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);transition:color .15s}
.tp-related a:hover{color:var(--text)}
.crumbs{padding:38px 0 0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ghost)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
@media(max-width:1000px){.testgrid{grid-template-columns:repeat(2,1fr)}.res-cols,.claim-grid{grid-template-columns:1fr;gap:36px}#homeHero .hero2{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:48px;padding-bottom:110px}.lb-row.full{grid-template-columns:44px 1.4fr 96px}.lb-row.full .lb-str,.lb-row.full .lb-move{display:none}#tbar nav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}#tbar nav::-webkit-scrollbar{display:none}#tbar nav button{padding:8px 9px;font-size:10px;letter-spacing:.1em}#tbar .rec{display:none}}
@media(max-width:640px){.wrap,#tbar{padding:0 18px}#ticker{gap:16px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}#ticker::-webkit-scrollbar{display:none}.testgrid{grid-template-columns:1fr}.sec{padding:30px 0}#stickyCta.on{display:block}main{padding-bottom:76px}.duo .btn{padding:16px 0}#testTop .wm{display:none}.runlist .lb-row{grid-template-columns:84px 1fr 70px}.runlist .lb-row span:last-child{display:none}}
/* persistent top completion bar */
#topProgress{position:fixed;top:82px;left:0;right:0;z-index:45;background:var(--nav-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#topProgress .tp-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:9px 24px}
#topProgress .tp-track{flex:1;min-width:80px;height:4px;border-radius:11px;background:var(--surface2);overflow:hidden}
#topProgress .tp-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--good));transition:width .9s ease}
#topProgress .tp-count{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--text);white-space:nowrap}
#topProgress a[data-next]{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);white-space:nowrap}
#topProgress a[data-next]:hover{text-decoration:underline}
#topProgress .tp-all{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:11px;padding:6px 10px;white-space:nowrap}
#topProgress .tp-all:hover{color:var(--text);border-color:var(--text2)}
body.has-progress main{padding-top:104px}
/* header: profile chip + hamburger */
#hdrChip{display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px;cursor:pointer;transition:opacity .15s}
#hdrChip:hover{opacity:.8}
#hdrChip .hc-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-family:var(--sans);background:var(--surface2);color:var(--muted)}
#hdrChip .hc-gpa{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--muted);letter-spacing:.04em}
#menuBtn{background:none;border:1px solid var(--line-strong);border-radius:11px;color:var(--text);padding:7px 11px;font-size:13px;line-height:1;cursor:pointer}
#menuBtn:hover{border-color:var(--text2)}
#menuPanel{position:fixed;top:82px;right:0;width:min(300px,86vw);bottom:0;z-index:220;background:var(--surface);border-left:1px solid var(--line-strong);transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column;padding:18px;overflow-y:auto}
#menuPanel.on{transform:translateX(0)}
#menuPanel a,#menuPanel button.mlink{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text2);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:15px 4px;cursor:pointer;transition:color .15s}
#menuPanel a:hover,#menuPanel button.mlink:hover{color:var(--text)}
#menuPanel .mp-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:20px 4px 8px}
#menuPanel #themeSel{position:static;display:flex;gap:4px;background:none;border:1px solid var(--line-strong);border-radius:11px;padding:4px}
/* compact, dense test grid — 4-wide desktop, 3-wide mobile */
.testgrid{grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.testgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.testgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.testcard{padding:10px 9px;min-height:0;gap:7px}
.testcard .tc-glyph{width:26px;height:26px;font-size:12px}
.testcard .tc-name{font-size:11px;line-height:1.25}
.testcard .tc-domain{display:none}
.testcard .tc-desc{display:none}
.testcard .tc-meta{display:none}
.testcard .tc-cta{display:none}
.testcard .tag,.testcard .tc-classic{font-size:7px;padding:2px 5px;letter-spacing:.06em}}
/* hero video (moved up from brand break) */
#heroVideoWrap video{width:min(400px,78vw);aspect-ratio:1/1;display:block;margin:0 auto;border:1px solid var(--line-strong);border-radius:11px;background:#000;box-shadow:0 0 64px rgba(124,108,255,.08)}
/* compact cards (round 10): symbol + name + how-it-plays only */
.testcard{min-height:0;padding:14px 14px 15px;gap:8px;position:relative}
.testcard .tc-glyph{width:30px;height:30px;font-size:13px}
.testcard .tc-name{font-size:14px;line-height:1.25}
.testcard .tc-desc{font-size:12px;line-height:1.45;flex:initial}
.testcard .tag,.testcard .tc-classic{font-size:7.5px;padding:2px 6px}
/* compact trials */
.bat{padding:16px 15px;gap:7px}
.bat .b-glyph{width:30px;height:30px;font-size:13px}
.bat .b-name{font-size:15px}
.bat .b-desc{font-size:12px;line-height:1.45}
.bat .b-meta{padding-top:8px;font-size:8px}
.battery-grid{grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.battery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.battery-grid{grid-template-columns:1fr}}
/* hover demo overlay */
.tc-demo{position:absolute;inset:0;background:color-mix(in srgb,var(--base) 88%,transparent);display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--r-card);z-index:2;padding:10px;pointer-events:none;animation:pageIn .15s ease}
.testcard.demoing{border-color:var(--tint)}
.tc-demo i{font-style:normal;display:block}
.tc-demo .dm-wait{font-size:13px;letter-spacing:.2em;color:var(--muted)}
.tc-demo .dm-now{font-size:15px;letter-spacing:.2em;color:var(--signal);font-weight:600}
.tc-demo .dm-big{font-family:var(--sans);font-weight:600;font-size:19px;color:var(--text)}
.tc-demo .dm-q{font-size:9.5px;letter-spacing:.16em;color:var(--text2)}
.tc-demo .dm-good{font-size:11px;letter-spacing:.14em;color:var(--good)}
.tc-demo .dm-bad{font-size:11px;letter-spacing:.14em;color:var(--bad)}
.tc-demo .dm-mono{font-size:11px;color:var(--text)}
.tc-demo .dm-dot{width:13px;height:13px;border-radius:50%;background:var(--text);box-shadow:0 0 10px rgba(237,235,230,.5)}
.tc-demo .dm-grid{display:grid;grid-template-columns:repeat(3,16px);gap:3px;justify-content:center;align-items:center;font-size:9px;letter-spacing:.14em;color:var(--text2)}
.tc-demo .dm-grid b{width:16px;height:16px;border-radius:11px;background:var(--surface2);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text)}
.tc-demo .dm-grid b.on{background:var(--text);border-color:transparent}
.tc-demo .dm-grid b.m{background:var(--line-strong)}
.tc-demo .dm-grid b.odd{color:var(--signal);border-color:var(--signal)}
.tc-demo .dm-grid b.o{background:none;border:none;color:var(--muted)}
.tc-demo .dm-grid.dm-q{display:flex}
.tc-demo .dm-bars{display:grid;gap:4px;width:80px}
.tc-demo .dm-bars b{display:block;height:5px;border-radius:11px;background:var(--signal)}
/* ticker: one line always */
#ticker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:center;gap:clamp(14px,2.2vw,32px)}
#ticker::-webkit-scrollbar{display:none}
#ticker .live .pulse{margin-right:7px}
/* tighter mobile sections */
@media(max-width:640px){.sec{padding:22px 0}}
/* top bar: guaranteed single line, mobile-tight */
#topProgress .tp-in{flex-wrap:nowrap;overflow:hidden}
#topProgress a[data-next]{overflow:hidden;text-overflow:ellipsis;max-width:44vw}
@media(max-width:640px){
#topProgress .tp-in{gap:9px;padding:8px 12px}
#topProgress .tp-track{min-width:34px}
#topProgress .tp-count{font-size:10.5px}
#topProgress a[data-next]{font-size:8px;letter-spacing:.08em}
#topProgress .tp-all{font-size:8px;padding:5px 7px;letter-spacing:.08em}
body.has-progress main{padding-top:94px}}
/* primary button: subtle breathing press-me indicator */
.btn-fill:not(#stickyStart),[data-autostart]{position:relative;animation:ctaPulse 2.4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,108,255,.05)}50%{box-shadow:0 0 26px 5px rgba(124,108,255,.65)}}
.btn-fill:hover,[data-autostart]:hover{animation:none;box-shadow:0 0 30px 6px rgba(124,108,255,.7)}
/* slimmer top progress bar */
#topProgress .tp-in{padding:5px 24px;gap:12px}
#topProgress .tp-track{height:3px}
#topProgress .tp-count{font-size:11px}
#topProgress a[data-next]{font-size:8.5px}
#topProgress .tp-all{padding:4px 8px;font-size:8.5px}
body.has-progress main{padding-top:100px}
@media(max-width:640px){
#topProgress .tp-in{padding:4px 10px;gap:8px}
#topProgress .tp-count{font-size:10px}
#topProgress a[data-next]{font-size:7.5px}
#topProgress .tp-all{padding:3px 6px;font-size:7.5px}
body.has-progress main{padding-top:96px}}
/* top bar: NEXT is a box matching ALL TESTS; shorter track */
#topProgress a[data-next]{border:1px solid var(--line-strong);border-radius:11px;padding:4px 8px}
#topProgress a[data-next]:hover{text-decoration:none;border-color:var(--signal)}
#topProgress .tp-track{flex:0 1 200px;max-width:200px}
#topProgress .tp-in{justify-content:flex-start}
#topProgress .tp-all{margin-left:auto}
@media(max-width:640px){#topProgress .tp-track{flex:0 1 72px;max-width:72px}}
/* done = one unmistakable mark: a lime corner tick + score tag. Category color always stays. */
.testcard.done::after{content:"✓";position:absolute;top:-1px;right:-1px;width:18px;height:18px;background:var(--good);color:#0B0B0C;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:0 2px 0 3px;z-index:1}
.testcard.done .tc-classic,.testcard.done .tag-done{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:none}
/* cleared tests grouped at the top inside an indigo frame */
.done-cluster{border:1px solid var(--signal);border-radius:11px;padding:12px 10px 10px;margin-bottom:12px;position:relative}
.done-cluster .dc-label{position:absolute;top:-8px;left:12px;background:var(--base);padding:0 8px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal)}
.done-cluster .testgrid{margin:0}
/* chip avatar can hold the saved character */
#hdrChip .hc-avatar.hc-char{background:var(--surface2);overflow:hidden;padding:0}
#hdrChip .hc-avatar svg{width:100%;height:100%;display:block}
/* daily button in the top bar */
#topProgress .tp-daily{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cta-ink);background:var(--cta);border:1px solid var(--cta);border-radius:11px;padding:4px 9px;white-space:nowrap;cursor:pointer}
#topProgress .tp-daily:hover{filter:brightness(1.12)}
@media(max-width:640px){#topProgress .tp-daily{font-size:7.5px;padding:3px 6px}}
/* ticker: centered on desktop, seamless loop on mobile */
#ticker{padding-left:0;padding-right:0}
#ticker .tk-track{display:flex;width:100%;justify-content:center}
#ticker .tk-set{display:flex;gap:clamp(14px,2.2vw,32px);padding:0 20px;white-space:nowrap;align-items:center}
#ticker .tk-b{display:none}
@media(max-width:640px){
#ticker{overflow:hidden}
#ticker .tk-track{width:max-content;justify-content:flex-start;animation:tkScroll 26s linear infinite}
#ticker .tk-b{display:flex}
@keyframes tkScroll{to{transform:translateX(-50%)}}}
/* top bar: a touch more readable */
#topProgress .tp-count{font-size:12.5px}
#topProgress a[data-next]{font-size:9.5px;letter-spacing:.12em}
#topProgress .tp-daily{font-size:9.5px}
#topProgress .tp-all{font-size:9.5px}
@media(max-width:640px){
#topProgress .tp-count{font-size:11px}
#topProgress a[data-next]{font-size:8.5px}
#topProgress .tp-daily{font-size:8.5px}
#topProgress .tp-all{font-size:8.5px}}
/* taller profile chip + hamburger; avatar actually visible */
#hdrChip{padding:2px;gap:10px}
#hdrChip .hc-avatar{width:36px;height:36px;font-size:14px}
#hdrChip .hc-gpa{font-size:14px}
#menuBtn{padding:12px 15px;font-size:16px}
/* DAILY: same box treatment as NEXT, in the Daily's green */
#topProgress .tp-daily{background:none;color:var(--good);border:1px solid color-mix(in srgb,var(--good) 45%,transparent);padding:4px 8px}
#topProgress .tp-daily:hover{filter:none;border-color:var(--good)}
/* subtle category label in each card */
.testcard .tc-cat{font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:var(--tint);opacity:.85;margin-top:auto}
@media(max-width:640px){.testcard .tc-cat{font-size:6.5px}}
/* svg icon set inside glyph boxes */
.tc-glyph svg{width:19px;height:19px;display:block}
.b-glyph svg{width:18px;height:18px;display:block}
a.testcard{color:inherit}
/* breathing room under the fixed header + progress bar (was flush, clipped page tops) */
body.has-progress main{padding-top:120px}   /* fixed chrome measured at 119px desktop / 118px mobile - one value for all widths */


/* ============ WORDMARK: fine-pitch LED matrix, ivory fading into violet ============ */
#tbar .wm{font-family:'Anton','Archivo',sans-serif;font-size:34px;font-weight:400;letter-spacing:.06em;line-height:1;color:#F4F1E8;text-shadow:none;padding-top:2px}
@supports ((-webkit-mask-image:radial-gradient(#000,transparent)) or (mask-image:radial-gradient(#000,transparent))){
#tbar .wm{color:transparent}
#tbar .wm .wm-word,#tbar .wm .wm-dot{color:transparent;background-image:linear-gradient(180deg,#F4F1E8 12%,#7C6CFF 108%);-webkit-background-clip:text;background-clip:text;-webkit-mask-image:radial-gradient(circle at 1.45px 1.45px,#000 .87px,transparent 1.15px);mask-image:radial-gradient(circle at 1.45px 1.45px,#000 .87px,transparent 1.15px);-webkit-mask-size:2.9px 2.9px;mask-size:2.9px 2.9px}}
@media(max-width:640px){#tbar .wm{font-size:29px}}
/* light themes: dark-to-violet fade so the matrix stays visible on ivory */
@supports ((-webkit-mask-image:radial-gradient(#000,transparent)) or (mask-image:radial-gradient(#000,transparent))){
body[data-theme=bright] #tbar .wm .wm-word,body[data-theme=bright] #tbar .wm .wm-dot{background-image:linear-gradient(180deg,#14120D 10%,#5B48E8 108%)}}
/* color recall: gradient slider tracks — the control shows its own axis */
.cl-range{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:8px;border:1px solid rgba(255,255,255,.18);outline:none;cursor:pointer}
.cl-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid #0C0C0D;box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.5)}
.cl-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid #0C0C0D;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
/* vertical gradient dials — full length on mobile */
.cl-cols{display:flex;gap:26px;align-items:flex-end}
.cl-col{display:flex;flex-direction:column;align-items:center;gap:7px}
.cl-col span{font-size:9px;letter-spacing:.18em;color:#B8B4C6}
.cl-vwrap{height:min(34vh,270px);width:24px;position:relative}
@media(max-width:640px){.cl-vwrap{height:min(44vh,340px)}}
.cl-range.cl-v{position:absolute;top:50%;left:50%;width:var(--vlen,250px);height:18px;transform:translate(-50%,-50%) rotate(-90deg)}
/* richer stage motion */
.center.pop{animation:stageIn .4s cubic-bezier(.2,.85,.25,1) both}
@keyframes stageIn{0%{opacity:0;transform:translateY(16px) scale(.975)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toneRing{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,108,255,.55)}70%{transform:scale(1.12);box-shadow:0 0 0 18px rgba(124,108,255,0)}100%{transform:scale(1)}}
@keyframes wipeL{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}
@keyframes wipeR{0%{transform:translateX(100%)}100%{transform:translateX(0)}}

/* ---- all-tests filter bar ---- */
.filterbar{margin:0 0 24px}
.fsearch{position:relative;display:flex;align-items:center}
.fs-ic{position:absolute;left:14px;color:var(--muted);font-size:15px;pointer-events:none}
#gridSearch{width:100%;background:var(--surface);border:1px solid var(--line-strong);color:var(--text);font:500 13px/1.2 var(--mono);letter-spacing:.05em;padding:14px 96px 14px 38px;border-radius:11px;outline:none;transition:border-color .15s,box-shadow .15s}
#gridSearch:focus{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
#gridSearch::placeholder{color:var(--muted);font-size:10px;letter-spacing:.16em}
.fs-clear{position:absolute;right:8px;background:none;border:1px solid var(--line-strong);color:var(--text2);font:600 9px var(--mono);letter-spacing:.14em;padding:6px 10px;border-radius:11px;cursor:pointer}
.fs-clear:hover{color:var(--text);border-color:var(--text2)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.fchip{--fc:var(--text2);background:none;border:1px solid color-mix(in srgb,var(--fc) 45%,var(--line));color:var(--fc);border-radius:11px;padding:7px 12px;font:600 9.5px var(--mono);letter-spacing:.13em;cursor:pointer;transition:border-color .15s,background .15s,color .15s;text-transform:uppercase}
.fchip:hover{border-color:var(--fc)}
.fchip.on{background:var(--fc);color:#0C0C0D;border-color:var(--fc)}
.fchip-t.on{color:#0C0C0D}
.chiplbl{font:600 9px var(--mono);letter-spacing:.18em;color:var(--muted);margin-right:4px}
.f-hide{display:none!important}
@media (max-width:640px){#gridSearch{padding:13px 84px 13px 34px}.chiprow{gap:6px}.fchip{padding:6px 9px;font-size:9px}}

/* ---- Simon pads (sequence) ---- */
.seq-cell{background:color-mix(in srgb,var(--c) 14%,var(--surface2));border-color:color-mix(in srgb,var(--c) 40%,var(--line-strong))}
.seq-cell.lit{background:var(--c)!important;border-color:var(--c)!important;box-shadow:0 0 22px color-mix(in srgb,var(--c) 70%,transparent)}
/* ---- typing live words ---- */
.tw-wrap{font-family:var(--mono);font-size:17px;line-height:2.1;max-width:640px;text-align:left;color:var(--muted);cursor:text;user-select:none;padding:6px 2px}
.tw{display:inline-block;margin-right:.62ch}
.tw.wrong .twl{text-decoration:underline;text-decoration-color:var(--bad);text-underline-offset:4px}
.twl{color:var(--muted);transition:color .06s}
.twl.ok{color:var(--text)}
.twl.bad{color:var(--bad)}
.twl.extra{color:color-mix(in srgb,var(--bad) 62%,transparent)}
.twc{display:inline-block;width:2px;height:1.05em;background:var(--signal);vertical-align:-.18em;margin:0 -1px;animation:twblink 1.05s steps(2) infinite}
@keyframes twblink{50%{opacity:0}}
@media (max-width:640px){.tw-wrap{font-size:15px;line-height:2}}

/* ---- favorites ---- */
.favbtn{background:none;border:none;color:var(--ghost);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;margin-left:auto;transition:color .15s,transform .15s;z-index:2}
.favbtn:hover{color:var(--text2);transform:scale(1.18)}
.favbtn.on{color:var(--signal);text-shadow:0 0 10px color-mix(in srgb,var(--signal) 55%,transparent)}
/* ---- dailies panel ---- */
#dailyPanel{position:fixed;inset:0;background:rgba(8,8,9,.74);z-index:340;display:flex;align-items:flex-start;justify-content:center;padding:11vh 16px 16px;backdrop-filter:blur(3px)}
.dp-card{width:min(500px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;padding:18px;animation:dpIn .18s ease-out}
@keyframes dpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dp-x{background:none;border:1px solid var(--line-strong);color:var(--text2);border-radius:11px;padding:4px 10px;cursor:pointer;font-size:11px}
.dp-x:hover{color:var(--text)}
.dp-run{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;background:linear-gradient(180deg,color-mix(in srgb,var(--signal) 8%,var(--surface2)),var(--surface2));border:1px solid var(--line-strong);border-radius:11px;padding:14px 16px;cursor:pointer}
.dp-run:hover{border-color:var(--signal)}
.dp-k{font:600 9px var(--mono);letter-spacing:.16em;color:var(--signal)}
.dp-t{font:600 12px var(--mono);color:var(--text);line-height:1.5}
.dp-cta{font:600 10px var(--mono);letter-spacing:.14em;color:var(--cta-ink);background:var(--cta);align-self:flex-start;padding:8px 13px;border-radius:11px;margin-top:4px}
.dp-sub{margin:18px 2px 8px;font:600 10px var(--mono);letter-spacing:.15em;color:var(--text2)}
.dp-sub small{color:var(--muted);letter-spacing:.12em}
.dp-list{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.dp-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;color:var(--text);font:600 12px var(--mono);text-align:left}
.dp-row:hover{border-color:var(--line-strong)}
.dp-cat{font:600 8.5px var(--mono);letter-spacing:.13em}
.dp-go{font:600 9px var(--mono);letter-spacing:.13em;color:var(--signal)}

/* ---- WORDBORN ---- */
.wb-grid{display:flex;flex-direction:column;gap:5px;margin:14px 0 10px}
.wb-row{display:flex;gap:5px;justify-content:center}
.wb-cell{width:50px;height:50px;border:1px solid var(--line-strong);border-radius:11px;display:flex;align-items:center;justify-content:center;font:700 21px var(--mono);text-transform:uppercase;background:var(--surface);transition:.15s;position:relative}
.wb-cell.f{border-color:var(--text2)}
.wb-cell.wb-g{background:#5BA25F;border-color:#5BA25F;color:#fff}
.wb-cell.wb-y{background:#C9A94B;border-color:#C9A94B;color:#141210}
.wb-cell.wb-x{background:#1c1c1f;border-color:#1c1c1f;color:var(--muted)}
.wb-kb{display:flex;flex-direction:column;gap:5px;align-items:center;width:min(480px,94%);margin-top:6px}
.wb-krow{display:flex;gap:4px;justify-content:center;width:100%}
.wb-key{flex:1;max-width:42px;height:48px;background:var(--surface2);border:1px solid var(--line);color:var(--text);font:600 12px var(--mono);border-radius:11px;cursor:pointer;text-transform:uppercase}
.wb-key.wide{max-width:66px;flex:1.55;font-size:9px}
.wb-key.wb-g{background:#5BA25F;border-color:#5BA25F;color:#fff}
.wb-key.wb-y{background:#C9A94B;border-color:#C9A94B;color:#141210}
.wb-key.wb-x{background:#151517;color:#4a4a48;border-color:#151517}
.wb-pool{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:520px;margin-top:14px}
.wb-pool.sm{margin-top:8px}.wb-pool.sm .wb-tile{width:34px;height:34px;font-size:14px}
.wb-tile{width:44px;height:44px;background:var(--surface2);border:1px solid var(--line-strong);border-radius:11px;display:flex;align-items:center;justify-content:center;font:700 18px var(--mono);text-transform:uppercase;position:relative;color:var(--text)}
.wb-tile i{position:absolute;right:3px;bottom:1px;font:600 8px var(--mono);font-style:normal;color:var(--muted)}
.wb-found{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:560px;margin-top:10px;max-height:20vh;overflow:auto}
.wb-chip{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:5px 9px;font:600 11px var(--mono);color:var(--text2)}
.wb-chip b{color:var(--signal)}
.wb-share{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}
.wb-emoji{font:14px/1.3 var(--mono);letter-spacing:1px}
.wb-words{font:600 11px/1.9 var(--mono);color:var(--text2);max-width:300px;text-align:left}
@media(max-width:430px){.wb-cell{width:44px;height:44px;font-size:19px}}

.wb-rules{display:flex;flex-direction:column;gap:7px;background:var(--surface2);border:1px solid var(--line-strong);border-left:2px solid var(--signal);border-radius:11px;padding:14px 16px;margin-top:14px;max-width:520px;text-align:left}
.wb-rules b{font:700 10px var(--mono);letter-spacing:.15em;color:var(--signal)}
.wb-rules span{font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--text)}

.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;width:min(460px,92vw);margin:18px auto 0;text-align:left}
.pf-grid label{display:flex;flex-direction:column;gap:6px;font:700 9px var(--mono);letter-spacing:.14em;color:var(--text2)}
.pf-grid input,.pf-grid select{background:var(--surface2);border:1px solid var(--line2);color:var(--text);font:600 13px var(--mono);padding:10px 11px;border-radius:11px;outline:none;width:100%}
.pf-grid input:focus,.pf-grid select:focus{border-color:var(--signal)}
@media(max-width:430px){.pf-grid{grid-template-columns:1fr}}

/* ---- carousels ---- */
.crsl{position:relative;margin-top:18px;touch-action:pan-y;cursor:grab;user-select:none}
.crsl-vp{overflow:hidden;padding:6px 0}
.crsl-track{display:flex;gap:14px;will-change:transform}
.crsl-card{flex:0 0 min(220px,30vw);background:var(--surface);background:linear-gradient(180deg,color-mix(in srgb,var(--tint,var(--text2)) 8%,var(--surface)) 0%,var(--surface) 62%);border:1px solid var(--line-strong);border-top:2px solid var(--tint,var(--line-strong));border-radius:12px;padding:12px 12px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--text);position:relative;overflow:hidden;transform:scale(.82);opacity:.5;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.crsl-card.mid{transform:scale(1);opacity:1}
.crsl-card:hover{opacity:1}
.crsl-card .b-head{display:flex;align-items:center;gap:6px;min-width:0}
.crsl-card .b-glyph{font-size:18px;color:var(--tint,var(--text));line-height:1;flex:none}
.crsl-card .b-kicker{font:700 8.5px var(--mono);letter-spacing:.13em;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crsl-card .b-name{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.15;letter-spacing:-.01em}
.crsl-card .b-desc{font:400 10px/1.45 var(--mono);color:var(--text2);min-height:38px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.crsl-peek{position:absolute;inset:0;background:rgba(12,12,13,.9);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:18px}
.crsl-peek.on{opacity:1}
.crsl-peek .pk-g{font-size:30px;color:var(--tint,var(--signal))}
.crsl-peek b{font-family:var(--sans);font-size:17px}
.crsl-peek small{font:400 10px/1.6 var(--mono);color:var(--text2);max-width:300px}
.crsl-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap;max-width:min(480px,90vw);margin-left:auto;margin-right:auto}
.crsl-dots i{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.8;transition:all .3s;cursor:pointer}
.crsl-dots i.on{background:var(--signal);opacity:1;width:12px;height:12px;margin-top:-2px}
/* condensed carousel sections (match the small cards) */
#trialsGroups,#testsRow{padding:14px 0}
#trialsGroups .h2,#testsRow .h2,#trials .h2,section[aria-label="Leaderboard preview"] .h2{font-size:clamp(20px,3.4vw,26px)}
#trialsGroups .h2,#testsRow .h2{margin-bottom:7px}
#trialsGroups .crsl,#testsRow .crsl{margin-top:9px}
#trialsGroups .crsl-dots,#testsRow .crsl-dots{margin-top:9px}
@media(max-width:720px){.crsl-card{flex-basis:calc((100% - 22px)/3)}.crsl-track{gap:11px}.crsl-vp{padding:6px 0 2px}}

.testcard,.bat{min-width:0}
.collection-strip>*{min-width:0}
.tp-facts div{flex-wrap:wrap;gap:4px}

.sec-head>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-head .whisper{display:inline!important;margin:0!important;order:2}
.sec-head .h2{margin:0}

/* hero entrance: sign powers on, then the headline / subline / CTAs rise in, staggered */
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes signOn{0%{opacity:0;filter:brightness(.5)}55%{opacity:1;filter:brightness(1.7) drop-shadow(0 0 12px rgba(140,120,255,.7))}100%{opacity:1;filter:brightness(1)}}
body:has(#homeHero) .wm{animation:signOn .8s .1s ease both}
#homeHero .h1{animation:heroRise .8s .5s cubic-bezier(.2,.75,.2,1) both}
#homeHero .lede{animation:heroRise .8s .68s cubic-bezier(.2,.75,.2,1) both}
#homeHero .hero-ctas{animation:heroRise .8s .84s cubic-bezier(.2,.75,.2,1) both}
/* mobile containment: every page fits the screen — scroll down, never sideways */
@media(max-width:640px){
html,body{overflow-x:clip}
#stage{padding-left:12px;padding-right:12px}
#stage>*{max-width:100%}
.choice{min-width:0}
canvas,svg,img,video,iframe,table,pre{max-width:100%}
.g-title,.g-num,.g-desc,.mono,.res-gpa{overflow-wrap:anywhere}
}
@media(max-width:600px){
.hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center}
.hero-ctas .btn{width:auto;white-space:nowrap}
}
@media(max-width:600px){.btn{white-space:normal}}
#hdrChip .hc-cr{font-family:var(--sans);font-weight:600;font-size:12px;color:#E2B84B;letter-spacing:.04em}
@media(max-width:640px){#hdrChip .hc-cr{font-size:14px}}
/* ---- split-flap wordmark ---- */
#tbar .wm.wm-flap{display:flex;gap:2px;align-items:center;perspective:320px;text-shadow:none;padding-top:0;color:inherit}
#tbar .wm.wm-flap .fl{position:relative;display:flex;align-items:center;justify-content:center;min-width:23px;height:36px;padding:1px 4px 0;color:#050505;background:linear-gradient(180deg,#FAF7EE 0%,#F4F0E6 46%,#E9E4D6 54%,#F1EDE1 100%);border:1px solid rgba(0,0,0,.24);border-radius:11px;font-family:"Chakra Petch","Teko","Oswald","Arial Narrow",sans-serif;font-style:normal;font-weight:700;font-size:23px;letter-spacing:.01em;-webkit-text-stroke:.7px currentColor;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.13),0 2px 0 #C7C2B2,0 3px 3px rgba(0,0,0,.3);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
#tbar .wm.wm-flap .fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(0,0,0,.16);box-shadow:0 1px 0 rgba(255,255,255,.38)}
body[data-theme=bright] #tbar .wm.wm-flap .fl{color:#F2F0EA;background:linear-gradient(180deg,#33343A 0%,#232428 46%,#101013 54%,#1B1C20 88%,#26272C 100%),radial-gradient(circle at 2.6px 50%,#43454C 1.3px,transparent 1.7px),radial-gradient(circle at calc(100% - 2.6px) 50%,#43454C 1.3px,transparent 1.7px);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 1px rgba(0,0,0,.7),0 2px 0 #000,0 3px 4px rgba(0,0,0,.55);text-shadow:0 1px 1px rgba(0,0,0,.9)}
body[data-theme=bright] #tbar .wm.wm-flap .fl::after{height:2px;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.4));box-shadow:0 1px 0 rgba(255,255,255,.08)}
#tbar .wm.wm-flap.flip .fl{animation:flFlip .66s cubic-bezier(.55,0,.25,1) both;animation-delay:var(--d,0ms)}
@keyframes flFlip{0%{transform:rotateX(0)}45%{transform:rotateX(-88deg);filter:brightness(.55)}80%{transform:rotateX(2deg)}100%{transform:rotateX(0);filter:brightness(1)}}
@media(max-width:640px){#tbar .wm.wm-flap{gap:1.5px}#tbar .wm.wm-flap .fl{min-width:19px;height:32px;font-size:20px;border-radius:11px;padding:1px 3px 0;-webkit-text-stroke:.55px currentColor}}
@media(max-width:480px){#tbar .wm.wm-flap{gap:1px}#tbar .wm.wm-flap .fl{min-width:15.5px;height:29px;font-size:17px;padding:1px 2.5px 0}
#tbar{gap:8px;padding:0 12px}
#tbar .signin{font-size:9px;padding:8px 6px;letter-spacing:.1em}
#hdrChip{gap:6px}
#hdrChip .hc-avatar{width:30px;height:30px}
#hdrChip .hc-gpa{font-size:12px}
#hdrChip .hc-cr{font-size:12px}
#tbar>*{flex-shrink:0}
#tbar .wm.wm-flap{flex-shrink:1;min-width:0;overflow:hidden}}
@media(max-width:400px){#hdrChip .hc-avatar{display:none}}
@media (prefers-reduced-motion:reduce){#tbar .wm.wm-flap .fl{animation:none!important}}

@media(min-width:768px){
#topProgress .tp-in{justify-content:flex-end;max-width:none;padding-right:28px}
#topProgress .tp-track{flex:0 0 200px;margin-left:auto}
}
#topProgress .tp-daily{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);border:1px solid var(--line-strong);border-radius:11px;padding:4px 8px;background:none;cursor:pointer;white-space:nowrap;filter:none}
#topProgress .tp-daily:hover{background:none;color:var(--signal);border-color:var(--signal);filter:none}
#menuBtn.as-av{padding:0;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface2);width:72px;height:76px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#menuBtn.as-av svg{display:block;width:100%;height:100%;transform:scale(1.66);transform-origin:50% 37%}
body.avnav #hdrChip .hc-avatar{display:none}
@media(max-width:640px){#menuBtn.as-av{width:58px;height:62px;border-radius:12px}#menuBtn.as-av svg{transform:scale(1.87);transform-origin:50% 37%}}

.testcard{position:relative}
.testcard.demoing .favbtn{position:absolute;top:8px;right:8px;z-index:3;margin:0;background:color-mix(in srgb,var(--base) 72%,transparent);border:1px solid var(--line);border-radius:7px;padding:4px 7px;backdrop-filter:blur(2px)}
.testcard.demoing .favbtn:hover{color:var(--signal);transform:scale(1.15)}

#hdrChip .hc-col{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15}
#hdrChip .hc-handle{font-family:var(--sans);font-weight:600;font-size:9.5px;color:var(--text2);letter-spacing:.06em}

.statrow{flex-wrap:wrap}
.statbox.sb-sm .s-val{font-size:15px;letter-spacing:.02em}
.statbox.sb-sm .s-lbl{font-size:7.5px}
.sb-take{color:var(--signal);text-decoration:none;font-size:12px;letter-spacing:.06em}
.sb-take:hover{text-decoration:underline}

.b5row{display:flex;gap:8px;align-items:flex-end}
.b5row .b5t{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.b5row .b5t b{font-family:var(--sans);font-weight:600;font-size:10px;color:var(--text2)}
.b5row .b5t i{font-style:normal;font-family:var(--sans);font-weight:600;font-size:12px;color:var(--text)}
.b5row .b5t.top b,.b5row .b5t.top i{color:var(--signal)}

.statbox.sb-b5{min-width:214px;align-items:stretch;text-align:left}
.b5r{display:grid;grid-template-columns:96px 1fr 22px;gap:7px;align-items:center;padding:1.5px 0}
.b5r em{font-style:normal;font:600 7.5px var(--mono);letter-spacing:.08em;color:var(--text2)}
.b5r .b5bar{height:4px;border-radius:11px;background:var(--surface2);overflow:hidden;display:block}
.b5r .b5bar i{display:block;height:100%;background:var(--text2);border-radius:11px}
.b5r b{font-family:var(--sans);font-weight:600;font-size:10.5px;color:var(--text);text-align:right}
.b5r.top em,.b5r.top b{color:var(--signal)}
.b5r.top .b5bar i{background:var(--signal)}

.statbox.sb-b5{min-width:168px}
.b5r{grid-template-columns:1fr 26px}
.b5r b{font-size:11px}

@media(min-width:721px){.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}}
@media(max-width:720px){.statrow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}}
.statrow .statbox{min-width:0;width:auto}
.statbox.sb-b5{min-width:0}
.b5r{grid-template-columns:1fr 20px;gap:5px;padding:.5px 0}
.b5r em{font-size:6.8px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b5r b{font-size:9.5px}

@media(min-width:721px){.statrow{grid-auto-flow:row}}
.b5r{grid-template-columns:minmax(0,1fr) auto}
.b5r b{white-space:nowrap;padding-left:4px}
.statrow .statbox{height:100%;box-sizing:border-box}

/* stat grid: uniform boxes, centered values, labels on one baseline */
.statrow .statbox{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;min-height:92px;padding:9px 12px}
.statrow .statbox.sb-b5{min-height:118px;padding:12px 14px}
.rec-handle{font-family:var(--mono);font-weight:700;font-size:19px;color:var(--text);letter-spacing:.14em}
.statrow .statbox .s-val{flex:1;display:flex;align-items:center;justify-content:center;width:100%;margin:0}
.statrow .statbox .s-lbl{margin-top:6px;line-height:1.2}
.statbox.sb-b5 .s-val{align-items:center}
.statbox.sb-b5 .s-val>*{width:100%}
.statbox.sb-sm .s-val{font-size:15px}
@media(max-width:720px){.statrow .statbox{min-height:104px}}

/* big five: verified column layout */
.statbox.sb-b5 .s-val{flex-direction:column;justify-content:center;align-items:stretch}
.statbox.sb-b5 .b5r{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:.5px 0;align-items:center;text-align:left}

.iq-fine{display:block;margin-top:4px;font:600 6.8px var(--mono);letter-spacing:.07em;color:var(--muted);text-decoration:none;text-align:center;line-height:1.4}
.iq-fine:hover{color:var(--signal)}

.sb-info{position:absolute;top:6px;right:8px;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--muted);font:700 9px var(--mono);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.sb-info:hover{color:var(--signal);border-color:var(--signal)}
.sb-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:240px;background:var(--surface2);border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;font:400 9px/1.65 var(--mono);color:var(--text2);text-align:left;z-index:40;display:none;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.sb-tip.on{display:block}

/* living avatar: blink + occasional glance right (header button only) */
#menuBtn.as-av .av-eye{transform-box:fill-box;transform-origin:center;animation:avBlink 6s infinite}
#menuBtn.as-av .av-ir{transform-box:fill-box;transform-origin:center;animation:avLook 20s infinite}
@keyframes avBlink{0%,95.5%,99.5%,100%{transform:scaleY(1)}96.8%,98.2%{transform:scaleY(.06)}}
@keyframes avLook{0%,80%,96%,100%{transform:translateX(0)}83%,93%{transform:translateX(1.7px)}}
@media (prefers-reduced-motion:reduce){#menuBtn.as-av .av-eye,#menuBtn.as-av .av-ir{animation:none}}

/* ---- home chat ---- */
#sbChat{border:1px solid var(--line2);background:var(--surface);border-radius:11px;padding:12px}
#sbcTabs{display:flex;gap:6px;align-items:center;margin-bottom:8px}
#sbcState{margin-left:auto;font:600 8.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
#sbcMsgs{height:min(38vh,340px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;font:500 11px var(--mono);padding:4px 2px;scrollbar-width:thin}
.sbc-m{line-height:1.5;word-break:break-word}
.sbc-h{color:var(--text2);cursor:pointer;letter-spacing:.06em;font-weight:700}
.sbc-m.fr .sbc-h{color:#39FF14}
.sbc-m.me .sbc-h{color:var(--signal)}
.sbc-m.mn{background:rgba(216,183,94,.09);outline:1px solid rgba(216,183,94,.28);padding:3px 6px;border-radius:11px}
#sbcRow{display:flex;gap:8px;margin-top:10px}
#sbcIn{flex:1;min-width:0;background:var(--base);border:1px solid var(--line2);border-radius:11px;color:var(--text);font:500 12px var(--mono);padding:10px 12px}
#sbcIn:focus{outline:none;border-color:var(--signal)}
.sbc-acts{display:flex;gap:6px;margin:3px 0 5px 14px;flex-wrap:wrap}
.sbc-acts button{font:600 8.5px var(--mono);letter-spacing:.1em;background:var(--base);border:1px solid var(--line2);color:var(--text2);padding:4px 8px;border-radius:11px;cursor:pointer}
.lb-handle.fr-h{color:#39FF14}

div:has(>#sbBoardRows){display:none}

.crsl-plain{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.crsl-plain .crsl-card{flex:0 0 300px}

/* breadcrumb must clear the fixed header + progress strip at every width */
div.wrap.crumbs{padding-top:44px;padding-bottom:0}
@media(max-width:600px){div.wrap.crumbs{padding-top:26px}}

/* ---- ticker chat toggle ---- */
#chatToggle{position:absolute;left:0;bottom:0;z-index:4;height:41px;display:flex;align-items:center;background:var(--base);border:0;border-top:1px solid var(--line);border-right:1px solid var(--line);color:#E2B84B;font:700 10px var(--mono);letter-spacing:.2em;padding:0 18px;cursor:pointer}
#chatToggle:hover{color:#ffe9b0}
#ticker{padding-left:96px}

.fr-add{display:inline-flex;align-items:center;justify-content:center;margin-left:7px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--muted);cursor:pointer;vertical-align:middle;padding:0;flex:0 0 auto}
.fr-add:hover{border-color:#39FF14;color:#39FF14}
.fr-add.on{border-color:#39FF14;color:#39FF14}

.sbc-ev{font:500 10px var(--mono);color:var(--muted);letter-spacing:.06em;line-height:1.5;word-break:break-word}

/* ---- FIND A GAME: open room cards ---- */
#sbcTabs{flex-wrap:wrap}   /* four controls will not fit one line on a phone */
.sbc-room{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line2);border-radius:11px;padding:8px 10px;background:var(--base)}
.sbc-room .sr-g{font:700 9px var(--mono);letter-spacing:.16em;color:var(--signal)}
.sbc-room .sr-w{font:500 9px var(--mono);letter-spacing:.1em;color:var(--muted);flex:1 1 auto;min-width:0}
.sbc-room .sr-j{flex:0 0 auto;font:700 9px var(--mono);letter-spacing:.16em;cursor:pointer;
  background:var(--signal);border:none;color:#fff;padding:6px 14px;border-radius:11px}
.sbc-room .sr-j:hover{filter:brightness(1.12)}
.sbc-room .sr-f{flex:0 0 auto;font:700 9px var(--mono);letter-spacing:.16em;color:var(--muted)}
.sbc-empty{font:500 10px var(--mono);letter-spacing:.08em;color:var(--muted);
  text-align:center;line-height:1.7;padding:14px 0 4px}
.sbc-start{font:600 8.5px var(--mono);letter-spacing:.18em;color:var(--muted);padding:8px 0 2px;text-align:center}
.sbc-srow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-bottom:4px}
.sbc-srow .sr-n{font:600 9px var(--mono);letter-spacing:.12em;cursor:pointer;
  background:var(--base);border:1px solid var(--line2);color:var(--text2);padding:7px 11px;border-radius:11px}
.sbc-srow .sr-n:hover{border-color:var(--signal);color:var(--text)}
.sbc-ev .sbc-h{color:var(--text2)}
.sbc-ev.fr .sbc-h{color:#39FF14}

.sbc-acts button svg{vertical-align:-2px;margin-right:4px}
.sbc-acts{align-items:center}

.sbc-acts .sbi{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--base);color:var(--text2);font:700 17px var(--mono);cursor:pointer;padding:0}
.sbc-acts .sbi.red{color:#ff5d5d;border-color:rgba(255,93,93,.45)}
.sbc-acts .sbi.on{color:#39FF14;border-color:rgba(57,255,20,.4)}
.sbc-acts .sbi:hover{border-color:var(--text2)}
.sbc-acts .sbi.red:hover{border-color:#ff5d5d}
.sbc-acts .sbi.on:hover{border-color:#39FF14}

/* ---- phone legibility & touch (measured pass) ---- */
@media(max-width:600px){
 .fchip{padding:11px 13px;font-size:10.5px}
 .chip{padding:12px 16px}
 .sec-link{padding:12px 6px}
 .tc-classic{font-size:10px}
 .b-kicker{font-size:10px}
 .tc-cat{font-size:10px}
 .dp-cat{font-size:10px}
 #topProgress a[data-next],#topProgress .tp-all,#topProgress .tp-daily{font-size:10px}
 .dc-label{font-size:10px}
 .b-head{font-size:10px}
}

/* classic-test screens: scroll inside the overlay instead of clipping */
#stage .clscroll{max-height:100%;overflow-y:auto;margin:auto;padding:18px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
body.testing{overflow:hidden}

.lbp{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.lbp:hover{color:var(--text);border-bottom-color:var(--text2)}

/* ===== app-tile card redesign — grid test cards ===== */
.testcard{aspect-ratio:1/1.09;min-height:0;padding:14px 12px 18px;gap:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;border-radius:16px;border:2.6px solid color-mix(in srgb,var(--tint) 55%,#1c1c20);box-shadow:0 6px 13px -5px rgba(0,0,0,.8);background:linear-gradient(to top,color-mix(in srgb,var(--tint) 96%,#0a0a0c) 0%,color-mix(in srgb,var(--tint) 60%,#0a0a0c) 38%,color-mix(in srgb,var(--tint) 16%,#0a0a0c) 74%,#0a0a0c 100%);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.testcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tint);z-index:1}
.testcard:hover{transform:translateY(-5px) scale(1.02)}
.testcard .tc-top{display:contents}
.testcard .tc-glyph{order:1;width:52px;height:52px;background:none!important;border:none!important;color:#fff;border-radius:0;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.testcard .tc-glyph svg{width:100%;height:100%;display:block;stroke-width:1.5px}
.testcard .tc-cat{order:2;display:block;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.72;margin:0}
.testcard .tc-name{order:3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);line-height:1.06;letter-spacing:.01em}
.testcard .tag{order:4;background:none;border:none;padding:0;font:600 11px var(--mono);letter-spacing:.05em;color:#fff;opacity:.85;text-transform:uppercase}
.testcard .tag-todo{opacity:.62}
.testcard .tc-classic{order:4;background:none;border:none;padding:0;font:600 10px var(--mono);letter-spacing:.05em;color:#fff;opacity:.82}
.testcard .favbtn{position:absolute;top:9px;right:9px;z-index:3;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(8,8,10,.42);border:none;border-radius:50%;color:#fff;opacity:.7;line-height:1}
.testcard .favbtn.on{color:#FF6E9C;opacity:1}
.testcard .tc-desc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(7,7,9,.93);color:#EDEBE6;font:400 13px/1.6 'Archivo',system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s;z-index:4}
.testcard:hover .tc-desc{opacity:1}
@media(max-width:520px){
 .testcard{padding:12px 10px 15px;border-radius:13px;border-width:2px}
 .testcard .tc-glyph{width:46px;height:46px}
 .testcard .tc-name{font-size:14px}
 .testcard .tc-cat{font-size:8.5px}
 .testcard .tag,.testcard .tc-classic{font-size:9px}
}
/* ===== mobile: lock scroll during a game/test ===== */
body.testing{overflow:hidden;overscroll-behavior:none;touch-action:none}
#testView{overscroll-behavior:none}

/* app-tile grid sizing */
.testgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:12px}
@media(max-width:520px){.testgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}}

/* ===== app-tile redesign — carousel cards (keeps scale + peek) ===== */
.crsl-card{background:linear-gradient(to top,color-mix(in srgb,var(--tint) 96%,#0a0a0c) 0%,color-mix(in srgb,var(--tint) 60%,#0a0a0c) 38%,color-mix(in srgb,var(--tint) 16%,#0a0a0c) 74%,#0a0a0c 100%)!important;border:2.6px solid color-mix(in srgb,var(--tint) 55%,#1c1c20);border-top:2.6px solid color-mix(in srgb,var(--tint) 55%,#1c1c20);border-radius:16px;box-shadow:0 6px 13px -5px rgba(0,0,0,.8);align-items:center;text-align:center;gap:8px;padding:18px 14px 20px}
.crsl-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tint);z-index:1}
.crsl-card .b-head{flex-direction:column;align-items:center;gap:5px}
.crsl-card .b-glyph{width:58px;height:58px;color:#fff;font-size:40px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.crsl-card .b-glyph svg{width:100%;height:100%;display:block;stroke-width:1.5px}
.crsl-card .b-kicker{color:#fff;opacity:.72;text-align:center;white-space:normal}
.crsl-card .b-name{font-family:'Chakra Petch',sans-serif;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6);font-size:17px}
.crsl-card .b-desc{color:#fff;opacity:.78;text-align:center;-webkit-line-clamp:2}

/* ===== modern aesthetic: Poppins body + rounded + iphone chat ===== */
.hc-gpa,.hc-cr,.hc-handle,.lb-gpa,.lb-rank,.lb-move,.res-gpa,.mc-gpa,#gpaNum,.mc-serial,.mc-gpa,.b-val{font-family:var(--score)}
#tbar .wm.wm-flap .fl{border-radius:2.5px}
.btn,.chip,.fchip,.signin,.rec,.door,.sec-link,.mlink,#tbar nav button,#tbar nav a,input,select,textarea,.dp-run,.dp-row,.dp-x,.fs-clear,#sbcIn,#sbcSend,.tag,.pill{border-radius:11px}
#sbcMsgs{gap:3px;display:flex;flex-direction:column}
.sbc-m{max-width:80%;width:fit-content;padding:8px 13px;border-radius:18px;margin:1px 0;line-height:1.35;word-break:break-word;font-family:var(--sans);font-size:13px;letter-spacing:0}
.sbc-m .sbc-h{display:block;font-size:10px;margin:0 0 2px 4px;font-weight:600;opacity:.75;letter-spacing:.02em}
.sbc-m:not(.me){background:#26262b;color:#EDEBE6;align-self:flex-start;margin-right:auto;border-bottom-left-radius:5px}
.sbc-m.me{background:#2f6bff;color:#fff;align-self:flex-start;margin-right:auto;border-bottom-left-radius:5px}
.sbc-m.me .sbc-h{display:none}
.sbc-m.fr .sbc-h{color:#39FF14}
.sbc-m.mn{outline:2px solid #E2B84B;outline-offset:1px}
.sbc-ev{align-self:center;text-align:center;font-size:11px;opacity:.72;margin:5px 0}

/* ===== square tiles, no copy ===== */
.testcard .tc-desc{display:none!important}
.crsl-card{aspect-ratio:1/1.09;justify-content:center;flex:0 0 min(190px,42vw)}
.crsl-card .b-desc{display:none}
.crsl-card .crsl-peek{display:none}

/* carousel: always show 3, no scale dimming */
.crsl-card{flex:0 0 min(220px,30vw)!important;transform:scale(.85);opacity:.62;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s}
@media(max-width:600px){.crsl-card{flex:0 0 calc((100% - 20px)/3)!important}}
.crsl-card.mid{transform:scale(1)!important;opacity:1!important}
.crsl-card.mid:hover{transform:translateY(-4px) scale(1.03)!important}
.crsl-track{gap:12px}

/* leaderboard: stop name/score/friend-button overlap */
.lb-handle{min-width:0;overflow:hidden;letter-spacing:.08em}
.lb-handle .lbp{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.lb-handle .fr-add{flex:0 0 auto;margin-left:6px}
.lb-handle>small{flex:0 0 auto}
.lb-gpa{white-space:nowrap}

/* uniform font size across tests / trials / games / grid (same everywhere) */
.testcard .tc-glyph,.crsl-card .b-glyph{width:48px!important;height:48px!important;font-size:32px!important}
.testcard .tc-name,.crsl-card .b-name{font-size:16px!important;line-height:1.15;max-height:2.35em;overflow:hidden;display:block;width:100%;flex-shrink:0}
.testcard .tc-cat,.crsl-card .b-kicker{font-size:9px!important}
.testcard .tag,.testcard .tc-classic,.crsl-card .b-desc{font-size:10px!important}
.crsl-card .b-head{gap:6px}
.testcard .cface,.crsl-card .cface{gap:7px}
@media(max-width:600px){
 .testcard{aspect-ratio:auto;min-height:118px;padding:10px 8px 14px;gap:4px}
 .testcard .tc-glyph,.crsl-card .b-glyph{width:32px!important;height:32px!important;font-size:22px!important}
 .testcard .tc-name,.crsl-card .b-name{font-size:12px!important;line-height:1.15}
 .testcard .tc-cat,.crsl-card .b-kicker{font-size:8px!important}
 .testcard .tag,.testcard .tc-classic,.crsl-card .b-desc{font-size:9px!important}
 .crsl-card{aspect-ratio:auto;min-height:118px}
 .crsl-card .cface{gap:4px;padding:10px 8px 14px}
}

/* leaderboard: score/time not too big, names get room */
.lb-gpa{font-size:14px!important}
.lb-row .lb-gpa small{font-size:9px}
.lb-rank{white-space:nowrap}
@media(max-width:520px){.lb-row{padding:12px 12px!important;gap:8px!important}.lb-gpa{font-size:13px!important}}

/* standard menu: normal-case links, primary sign-up, avatar row, clean theme */
#menuPanel .mlink{display:block;width:100%;text-align:left;text-decoration:none;border:none;border-bottom:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;padding:14px 4px}
#menuPanel .mlink:hover{color:var(--signal)}
.mp-links{margin:2px 0 4px}
#menuPanel .mp-label{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:var(--muted);margin:18px 4px 8px}
.mbtn{flex:1;background:none;border:1px solid var(--line-strong);color:var(--text);font-family:var(--sans);font-size:13px;font-weight:500;padding:11px 10px;border-radius:11px;cursor:pointer;text-transform:none;letter-spacing:0;text-align:center;white-space:nowrap;transition:border-color .15s,filter .15s}
.mbtn:hover{border-color:var(--text2)}
.mbtn-primary{background:var(--signal);border-color:var(--signal);color:#fff}
.mbtn-primary:hover{filter:brightness(1.08)}
.mp-av{width:36px;height:36px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text)}
.mp-av svg{width:100%;height:100%}
#menuPanel #themeSel button{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;padding:7px 14px}

#menuPanel button.mlink,#menuPanel a.mlink{font-family:var(--sans)!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important}

/* status line pops on any card color: tight dark shadow + faint pill */
.testcard .tag,.testcard .tc-classic{text-shadow:0 1px 2px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.7);background:rgba(8,8,10,.42);padding:2.5px 9px;border-radius:9px;opacity:1!important}
.crsl-card .b-kicker{text-shadow:0 1px 2px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.7)}

/* compare overlay */
.cmpb{font-size:11px}
#cmpWrap{position:fixed;inset:0;z-index:340;background:rgba(8,8,10,.72);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:38px 14px 60px}
#cmpWrap.on{display:flex}
.cmp-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;max-width:440px;width:100%;padding:18px 18px 22px}
.cmp-hd{display:flex;align-items:center;gap:10px;font-family:'Chakra Petch',sans-serif;font-size:16px;margin-bottom:12px}
.cmp-hd span{color:var(--muted)}
.cmp-hd b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38%}
.cmp-hd #cmpX{margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:50%;width:30px;height:30px;color:var(--text2);cursor:pointer}
.cmp-row{display:grid;grid-template-columns:1fr 82px 82px;gap:8px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.cmp-row span:first-child{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-row span:nth-child(2),.cmp-row span:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.cmp-top{font-size:14px;border-bottom:1px solid var(--line-strong)}
.cmp-sec{font-size:9.5px;letter-spacing:.16em;color:var(--muted);margin:14px 0 2px}

/* public profile: action buttons two sizes down */
#profileView .btn{font-size:11px;padding:10px 14px;letter-spacing:.08em}

/* chat rank badge */
.sbc-rk{font-style:normal;font-weight:700;font-size:9px;letter-spacing:.05em;color:var(--muted);background:rgba(255,255,255,.07);border-radius:7px;padding:1px 5px;margin-right:2px;vertical-align:1px}

.rec-rk{font-family:var(--sans);font-weight:600;font-size:11px;color:var(--text2);background:rgba(255,255,255,.07);border-radius:8px;padding:2px 8px;margin-left:9px;vertical-align:2px}

#hdrChip .hc-avatar.hc-char svg{width:100%;height:100%;margin:0;display:block}

/* Info popovers must stay inside the window. A stat card on a phone is often
   narrower than the 240px tip and can sit hard against the screen edge, so the
   card-anchored version spills off-screen. Below 640px the tip becomes a sheet
   pinned to the viewport instead of to the card. sb-tip stays inside the window. */
@media (max-width:640px){
  .sb-tip{position:fixed;left:12px;right:12px;bottom:14px;top:auto;width:auto;
    transform:none;max-height:56vh;overflow-y:auto;z-index:230;
    font-size:11px;line-height:1.7;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
}
@media (min-width:641px){
  .sb-tip{max-width:calc(100vw - 24px)}
}

/* ---- SCOREBORN INSTRUMENTS: store discovery orb (home only) ---- */
#shopOrb{position:fixed;right:26px;bottom:30px;width:52px;height:52px;border-radius:50%;background:#C6301E;z-index:30;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(198,48,30,.35);animation:orbDrift 46s ease-in-out infinite}
#shopOrb[hidden]{display:none}
#shopOrb .so-label{font:700 8px/1 var(--score,monospace);letter-spacing:.18em;color:#fff;opacity:1;transition:opacity .18s}
#shopOrb:hover,#shopOrb:focus-visible{animation-play-state:paused}
#shopOrb:hover .so-label,#shopOrb:focus-visible .so-label{opacity:1}
#shopOrb:focus-visible{outline:2px solid #fff;outline-offset:3px}
#shopOrb.docked{animation-duration:64s}   /* calmer once discovered - but still drifting */
#shopOrb.expanding{animation:none;transform:scale(30);transition:transform .24s ease-in;pointer-events:none}
@keyframes orbDrift{0%,100%{transform:translate(0,0)}12%{transform:translate(-84px,-46px)}26%{transform:translate(-150px,-132px)}38%{transform:translate(-72px,-208px)}52%{transform:translate(-196px,-262px)}64%{transform:translate(-248px,-150px)}78%{transform:translate(-120px,-88px)}90%{transform:translate(-34px,-176px)}}
@media(max-width:700px){#shopOrb{right:16px;bottom:88px;width:48px;height:48px;animation:orbDriftSm 38s ease-in-out infinite}#shopOrb .so-label{opacity:1}}@keyframes orbDriftSm{0%,100%{transform:translate(0,0)}25%{transform:translate(-26px,-40px)}50%{transform:translate(-8px,-78px)}75%{transform:translate(-40px,-24px)}}
@media(prefers-reduced-motion:reduce){#shopOrb{animation:none}#shopOrb.expanding{transform:none;transition:none}}
#menuPanel a.mlink{display:block;text-decoration:none;color:inherit}
/* Store and its RED DOT? opt-out share one row. The row carries the divider so
   the link can drop its own, otherwise the two would stack a double border. */
#menuPanel .mp-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
#menuPanel .mp-row .mlink{flex:1 1 auto;width:auto;border-bottom:none}
#menuPanel .mp-dot{flex:0 0 auto;display:flex;align-items:center;gap:5px;cursor:pointer;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:4px 4px 4px 0;white-space:nowrap;-webkit-user-select:none;user-select:none;
  transition:color .15s}
#menuPanel .mp-dot:hover{color:var(--text2)}
#menuPanel .mp-dot input{flex:0 0 auto;width:12px;height:12px;margin:0;border-radius:3px;
  accent-color:#C6301E;cursor:pointer}

/* ---- store orb: dodges once, then the goblin lets you in ---- */
/* after the encounter it wanders instead - JS sets the duration for each hop */
#shopOrb.roam{animation:none;transition:transform 18s cubic-bezier(.45,.05,.55,.95)}
#shopOrb.dodging{animation:none;transition:transform .20s cubic-bezier(.34,1.56,.64,1)}
#sbGoblin{position:fixed;z-index:60;width:120px;pointer-events:none;opacity:0;
  transform:translateY(10px) scale(.7);transition:opacity .18s,transform .22s cubic-bezier(.34,1.56,.64,1)}
#sbGoblin.on{opacity:1;transform:translateY(0) scale(1)}
#sbGoblin .gob-art{display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
#sbGoblin.laughing .gob-art{animation:gobLaugh .28s ease-in-out 4}
#sbGoblin .gob-say{margin-top:6px;background:#12331B;border:1px solid #4ED07A;border-radius:10px;
  padding:7px 10px;text-align:center;color:#B9F5CE;
  font:700 9px/1.5 var(--score,monospace);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .14s}
#sbGoblin.talking .gob-say{opacity:1}
@keyframes gobLaugh{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}
@media(prefers-reduced-motion:reduce){
  #shopOrb.dodging{transition:none}
  #shopOrb.roam{transition:none}
  #sbGoblin{transition:none}
  #sbGoblin.laughing .gob-art{animation:none}
}

/* ---- portal: the page smears, spirals in, and opens onto the shop ---- */
#sbPortal{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;
  transition:opacity .34s ease, backdrop-filter 1.5s ease, -webkit-backdrop-filter 1.5s ease}
#sbPortal.on{opacity:1;
  backdrop-filter:blur(34px) saturate(2.8) contrast(1.38) hue-rotate(-42deg) brightness(.78);
  -webkit-backdrop-filter:blur(34px) saturate(2.8) contrast(1.38) hue-rotate(-42deg) brightness(.78)}
/* the destination itself, revealed through an opening that grows from the orb.
   Background matches the shop's paper so a slow iframe still lands correctly. */
#sbPortal .sbp-view{position:absolute;inset:0;background:#F4F2ED;overflow:hidden;
  clip-path:circle(0px at var(--cx) var(--cy));
  -webkit-clip-path:circle(0px at var(--cx) var(--cy));
  transition:clip-path 1.5s cubic-bezier(.62,0,.84,.36),-webkit-clip-path 1.5s cubic-bezier(.62,0,.84,.36)}
/* --r is a PIXEL radius set in JS. Both ends must be the same unit type or
   WebKit refuses to interpolate and the opening never appears on iOS. */
#sbPortal.on .sbp-view{clip-path:circle(var(--r,1400px) at var(--cx) var(--cy));
  -webkit-clip-path:circle(var(--r,1400px) at var(--cx) var(--cy))}
#sbPortal .sbp-view iframe{width:100%;height:100%;border:0;pointer-events:none}
/* the destination untwists into place behind the opening. Desktop only:
   transformed iframes are unreliable on mobile WebKit. */
#sbPortal .sbp-spin{position:absolute;inset:0;transform:rotate(-11deg) scale(1.35);
  transition:transform 1.5s cubic-bezier(.62,0,.84,.36);will-change:transform}
#sbPortal.on .sbp-spin{transform:none}
@media(max-width:700px){#sbPortal .sbp-spin{transform:none;transition:none;will-change:auto}}
/* three counter-spinning cones, so the swirl reads as depth rather than a wheel */
#sbPortal .sbp-cone{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(198,48,30,0),rgba(198,48,30,.9),rgba(124,108,255,.95),
    rgba(78,208,122,.75),rgba(198,48,30,0));
  filter:blur(9px);transform:scale(0);opacity:0;mix-blend-mode:screen}
#sbPortal.on .sbp-cone{animation:sbpSuck 1.5s cubic-bezier(.5,0,.86,.4) forwards}
#sbPortal.on .sbp-cone.b{animation:sbpSuckB 1.5s cubic-bezier(.5,0,.86,.4) forwards}
#sbPortal.on .sbp-cone.c{animation:sbpSuckC 1.5s cubic-bezier(.45,0,.9,.45) forwards}
#sbPortal.on .sbp-cone.d{animation:sbpSuckD 1.5s cubic-bezier(.4,0,.92,.5) forwards}
@keyframes sbpSuck{
  0%{transform:scale(0) rotate(0deg);opacity:0}
  14%{opacity:1}
  78%{opacity:1}
  100%{transform:scale(30) rotate(2040deg);opacity:0}}
@keyframes sbpSuckB{
  0%{transform:scale(0) rotate(0deg);opacity:0}
  14%{opacity:.85}
  78%{opacity:.85}
  100%{transform:scale(22) rotate(-1620deg);opacity:0}}
@keyframes sbpSuckC{
  0%{transform:scale(0) rotate(0deg);opacity:0}
  20%{opacity:.6}
  74%{opacity:.6}
  100%{transform:scale(38) rotate(1280deg);opacity:0}}
@keyframes sbpSuckD{
  0%{transform:scale(0) rotate(0deg);opacity:0}
  18%{opacity:.7}
  70%{opacity:.7}
  100%{transform:scale(15) rotate(-2320deg);opacity:0}}
@media(prefers-reduced-motion:reduce){#sbPortal{display:none}}

/* ---- carousel card titles: same size on screen as the grid ----
   .crsl-card is drawn at transform:scale(.85), so a 16px title lands at 13.6px
   while the identical 16px title in the All Tests grid lands at a true 16px.
   Declared sizes were never the problem - the card is shrunk. Compensate per
   state (16/.85 = 18.8) so both read the same, and so the centre card is right
   whether or not its scale(1) wins. Appended last: same specificity as the
   16px!important rule above, so source order decides. */
.crsl-card .b-name{font-size:18.8px!important}
@media(max-width:600px){
  .crsl-card .b-name{font-size:14.1px!important}
}
/* Deliberately NOT overridden for .crsl-card.mid. That rule declares scale(1),
   but all three .mid cards measured at 0.85 on the live page, so the centre
   card is drawn at the same scale as its neighbours. Compensating .mid
   separately would leave the focused card the smallest of the row if that
   holds. Uniform is right either way: worst case the centre card reads
   slightly larger, which looks like focus rather than a fault. */

/* the player's most recent run, shown under a board they did not place on */
.lb-yourrun{margin:10px 0 0;padding:8px 10px;border:1px solid var(--line2);border-radius:11px;
  background:var(--base);font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--muted)}
.lb-yourrun b{color:var(--text);font-weight:700}

/* ---- grid cards must grow, not clip ----
   Cmd+Plus shrinks the CSS-pixel viewport, so a grid card narrows while its
   px-sized glyph and title do not. aspect-ratio:1/1.09 then derives a height
   smaller than the content and the card clips its own NOT TESTED badge.
   Measured on the live grid: 10 of 37 cards clipped at a 900px viewport, 6 at
   1100px and 760px, worst 6px.

   min-height:auto / min-content / max-content all fail here, because the
   automatic minimum size of a grid item whose overflow is not visible is zero -
   tested all three, no change. Letting the height follow the content is what
   actually works, and it is exactly what the mobile rule below 600px already
   does. Grid rows equalise, so a row with a two-line title is simply taller. */
@media(min-width:601px){.testcard{aspect-ratio:auto}}