html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

:root{
  --ground:#F2F5F4; --surface:#FFFFFF; --surface-2:#E8EEEC; --ink:#15211F; --ink-2:#4A5A57; --ink-3:#586764; --line:#D4DDDA;
  --accent:#0E6A62; --accent-ink:#FFFFFF; --accent-soft:#D4E9E5;
  --good:#23704A; --good-soft:#DDEFE3; --near:#94590B; --near-soft:#F5E8D0; --bad:#A6382D; --bad-soft:#F6DFDA;
  --shadow:0 1px 2px rgba(16,40,36,.06);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0E1413; --surface:#151D1C; --surface-2:#1E2927; --ink:#E2EBE9; --ink-2:#A2B3AF; --ink-3:#7F918D; --line:#2A3735;
    --accent:#4DB3A5; --accent-ink:#06201C; --accent-soft:#173A36;
    --good:#62C290; --good-soft:#15342A; --near:#E2A94E; --near-soft:#392B14; --bad:#EF7E70; --bad-soft:#3B1D19;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1413; --surface:#151D1C; --surface-2:#1E2927; --ink:#E2EBE9; --ink-2:#A2B3AF; --ink-3:#7F918D; --line:#2A3735;
  --accent:#4DB3A5; --accent-ink:#06201C; --accent-soft:#173A36;
  --good:#62C290; --good-soft:#15342A; --near:#E2A94E; --near-soft:#392B14; --bad:#EF7E70; --bad-soft:#3B1D19;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--ink); font:0.9375rem/1.5 var(--sans)}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px; padding-block:28px 72px}
.eyebrow{font:500 0.7188rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0}
h1{font:600 clamp(1.75rem,4.2vw,2.375rem)/1.08 var(--serif); margin:8px 0 8px; text-wrap:balance; letter-spacing:-.01em}
.sub{color:var(--ink-2); margin:0; max-width:68ch}
.sub b{font-weight:600; color:var(--ink)}

/* charting-grid navigator */
.chart{margin:22px 0 22px; padding:14px 16px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.chart-top{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.chart-title{font:500 0.75rem var(--mono); color:var(--ink-2); letter-spacing:.04em}
.legend{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:0.75rem; color:var(--ink-3)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block; border:1px solid var(--line)}
.arch{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)) 9px repeat(8,minmax(0,1fr)); gap:6px}
.occl{height:1px; background:var(--line); margin:7px 0}
.mid{width:1px; background:var(--line); justify-self:center; align-self:stretch}
.cell{min-width:0; height:36px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:500 0.75rem var(--mono); border-radius:6px 6px 11px 11px; cursor:pointer; padding:0}
.cell.lo{border-radius:11px 11px 6px 6px}
.cell.done{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.cell.good{background:var(--good-soft); color:var(--good); border-color:transparent}
.cell.near{background:var(--near-soft); color:var(--near); border-color:transparent}
.cell.bad{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.cell.cur{outline:2px solid var(--accent); outline-offset:2px; color:var(--ink)}

.layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow); min-width:0}
.qhead{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between}
.qnum{font:600 0.8125rem var(--mono); color:var(--ink-2)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font:500 0.75rem/1 var(--sans); padding:6px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2)}
.chip.type{background:var(--accent-soft); color:var(--accent)}
.scenario{font:400 1.1562rem/1.55 var(--serif); margin:18px 0 12px; max-width:66ch; text-wrap:pretty}
.instr{font-size:0.875rem; color:var(--ink-2); font-style:italic; margin:0 0 12px; max-width:66ch}
.scale{display:flex; justify-content:space-between; gap:12px; font:500 0.75rem var(--mono); color:var(--ink-3); margin:0 0 10px}
.scale.warn{color:var(--bad)}
.opts{display:grid; gap:10px}
.opt{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:left; width:100%; font:inherit; color:inherit}
.letter{font:600 0.8125rem var(--mono); width:28px; height:28px; display:grid; place-items:center; border-radius:6px; background:var(--surface-2); color:var(--ink-2)}
.otext{font-size:0.9375rem; line-height:1.5; display:block}
.ranks{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.rk{width:38px; height:34px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:500 0.875rem var(--mono); cursor:pointer}
.rk:hover{border-color:var(--accent)}
.rk[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.opt.ranked .letter{background:var(--accent); color:var(--accent-ink)}
.pick{cursor:pointer; transition:border-color .12s, background-color .12s}
.pick:hover{border-color:var(--accent)}
.pick[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.pick[aria-pressed="true"] .letter{background:var(--accent); color:var(--accent-ink)}
.opt.was-picked{border-color:var(--ink-3)}
.fb{margin-top:10px; padding:10px 12px; border-radius:8px; font-size:0.8438rem; line-height:1.45; border-left:3px solid var(--line); background:var(--surface-2); color:var(--ink)}
.fb.b4,.fb.b3{background:var(--good-soft); border-color:var(--good)}
.fb.b2{background:var(--near-soft); border-color:var(--near)}
.fb.b1,.fb.b0{background:var(--bad-soft); border-color:var(--bad)}
.fbmeta{font:500 0.75rem var(--mono); display:block; margin-bottom:3px; color:var(--ink-2)}
.result{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:10px}
.scoreline{font:600 1rem var(--mono)}
.keyline{font:500 0.8125rem var(--mono); color:var(--ink-2)}
.takeaway{background:var(--surface-2); border-radius:10px; padding:12px 14px; font-size:0.9062rem; max-width:66ch}
.tlabel{display:block; font:500 0.7188rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-top:20px}
.act-r{display:flex; gap:10px; flex-wrap:wrap}
.hint{font-size:0.8125rem; color:var(--ink-3); margin:10px 0 0}
.btn{font:500 0.875rem var(--sans); padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.small{padding:7px 12px; font-size:0.8125rem}
.btn.danger{color:var(--bad)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; display:grid; gap:18px; box-shadow:var(--shadow); position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px)}
.plabel{font:500 0.7188rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px}
.big{font:600 1.875rem/1.1 var(--mono); font-variant-numeric:tabular-nums}
.big small{font-size:0.875rem; color:var(--ink-2); font-weight:500}
.muted{font-size:0.8125rem; color:var(--ink-2); margin:4px 0 0}
.seg{display:grid; grid-template-columns:1fr 1fr; background:var(--surface-2); padding:3px; border-radius:9px; gap:3px}
.seg button{font:500 0.8125rem var(--sans); border:0; background:transparent; color:var(--ink-2); padding:8px 6px; border-radius:7px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.doms{display:grid; gap:10px}
.dom{display:grid; grid-template-columns:1fr auto; gap:5px 8px; font-size:0.8125rem}
.dom span:last-of-type{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-2)}
.bar{grid-column:1/-1; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:3px}
.clock{display:flex; align-items:center; justify-content:space-between; gap:10px}
.clock .t{font:600 1.25rem var(--mono); font-variant-numeric:tabular-nums}
.confirm{display:grid; gap:8px; font-size:0.8125rem; color:var(--ink-2)}
.confirm .row{display:flex; gap:8px; flex-wrap:wrap}
.note{font-size:0.7812rem; color:var(--ink-3); line-height:1.5; margin:0}
.note a{color:var(--accent)}
.divider{height:1px; background:var(--line)}

/* paper tabs */
.ptabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.ptab{display:inline-flex; align-items:baseline; gap:8px; font:500 0.8438rem var(--sans); padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); cursor:pointer}
.ptab small{font:500 0.7188rem var(--mono); color:inherit; opacity:.85}
.ptab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chip.hard{background:var(--near-soft); color:var(--near)}

/* drag-to-rank */
.rend{font:500 0.7188rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px}
.rend.bottom{margin:8px 0 0}
.rlist{list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:rk}
.ritem{display:grid; grid-template-columns:34px 12px 28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 10px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); cursor:grab; user-select:none; -webkit-user-select:none}
.ritem::before{counter-increment:rk; content:counter(rk); display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font:600 1rem var(--mono)}
.rlist.unset .ritem::before{background:var(--surface-2); color:var(--ink-3)}
.ritem:hover{border-color:var(--accent)}
.grip{display:grid; place-items:center; color:var(--ink-3)}
.mv{display:flex; flex-direction:column; gap:4px}
.mvb{width:34px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:600 0.8125rem var(--mono); cursor:pointer; padding:0}
.mvb:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.mvb:disabled{opacity:.35; cursor:default}
.ghost{opacity:.45; border-style:dashed; border-color:var(--accent); background:var(--accent-soft)}
.chosen{border-color:var(--accent)}
.dragging{box-shadow:0 10px 28px rgba(10,30,28,.22); cursor:grabbing; border-color:var(--accent); opacity:1 !important}
.dragging::before{content:"↕"; background:var(--accent-soft); color:var(--accent)}
.setrow{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; margin-top:12px; padding:10px 12px; border-radius:8px; background:var(--surface-2); font-size:0.8125rem; color:var(--ink-2)}

/* explanations + answer comparison */
.xhead{font:500 0.7188rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px}
.xlist{display:grid; gap:8px}
.xitem{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.xwhy{display:block; font-size:0.8438rem; color:var(--ink-2); margin-top:6px; line-height:1.45}
.xwhy b{font-weight:600}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ccol{border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface); min-width:0}
.ccol h4{margin:0 0 8px; font:600 0.75rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2)}
.ccol.key h4{color:var(--accent)}
.crows{display:grid; gap:5px}
.crow{display:grid; grid-template-columns:20px 24px minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px; border-radius:8px; background:var(--surface-2); font-size:0.8438rem; line-height:1.4}
.crow .pos{font:600 0.8125rem/24px var(--mono); color:var(--ink-2)}
.crow .letter{width:24px; height:24px; font-size:0.75rem}
.crow .pts{font:600 0.75rem/24px var(--mono); white-space:nowrap}
.crow.b4,.crow.b3{background:var(--good-soft)}
.crow.b4 .pts,.crow.b3 .pts,.crow.b4 .pos,.crow.b3 .pos{color:var(--good)}
.crow.b2{background:var(--near-soft)}
.crow.b2 .pts,.crow.b2 .pos{color:var(--near)}
.crow.b1,.crow.b0{background:var(--bad-soft)}
.crow.b1 .pts,.crow.b0 .pts,.crow.b1 .pos,.crow.b0 .pos{color:var(--bad)}
.cempty{font-size:0.8125rem; color:var(--ink-3); padding:8px}
@media (max-width:640px){
  .compare{grid-template-columns:1fr}
  .ritem{grid-template-columns:30px 28px minmax(0,1fr) auto; gap:8px; padding:10px}
  .ritem::before{width:30px; height:30px; font-size:0.9375rem}
  .grip{display:none}
}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .panel{position:static}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .card{padding:18px 16px}
  .arch{grid-template-columns:repeat(8,minmax(0,1fr))}
  .mid{display:none}
  .scenario{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- v4 additions ---------- */
.top{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-end; justify-content:space-between; margin-bottom:14px}
.top h1{margin-bottom:0}
.views{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:10px; flex-wrap:wrap}
.views button{font:500 0.875rem var(--sans); border:0; background:transparent; color:var(--ink-2); padding:8px 14px; border-radius:7px; cursor:pointer}
.views button[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.views button:hover{color:var(--ink)}
.sub{margin:0 0 4px}
.ptab.quiz{border-style:dashed}
.ptab.new{background:transparent; border-style:dashed; color:var(--accent)}
.ptab.new[aria-pressed="true"]{background:var(--accent-soft)}
.flat{display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:6px}
.qfrom{font-weight:500; color:var(--ink-3)}
.foot{margin-top:32px; font-size:0.7812rem; color:var(--ink-3)}
.foot a,.note a,.gsec a,.rtable a,.muted a{color:var(--accent)}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center}

/* builder */
.bh{font:600 1.5rem/1.2 var(--serif); margin:0 0 6px}
.bsub{font:600 0.75rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin:22px 0 10px}
.bgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-top:14px}
.bcard{display:grid; gap:6px; text-align:left; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.bcard b{font:600 1rem var(--sans)}
.bcard span{font-size:0.8438rem; color:var(--ink-2); line-height:1.45}
.bcard:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.bcard:disabled{opacity:.5; cursor:not-allowed}
.chips.wrap{gap:8px}
.chipbtn{font:500 0.8125rem var(--sans); padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer}
.chipbtn small{font:500 0.6875rem var(--mono); color:var(--ink-3); margin-left:4px}
.chipbtn:hover{border-color:var(--accent)}

/* takeaway link + community stats */
.tlink{display:block; margin-top:8px; font-size:0.8438rem; color:var(--accent); font-weight:500; text-decoration:none}
.tlink:hover{text-decoration:underline}
.stats{border:1px solid var(--line); border-radius:10px; padding:14px; display:grid; gap:10px}
.stats .muted{margin:0}
.heat{display:grid; gap:4px; overflow-x:auto}
.hrow{display:grid; grid-template-columns:28px repeat(5, minmax(34px, 1fr)) 76px; gap:4px; align-items:center}
.hhead span{font:500 0.7188rem var(--mono); color:var(--ink-3); text-align:center}
.hhead span:last-child{text-align:right}
.hcell{height:30px; border-radius:6px; display:grid; place-items:center; font:500 0.7188rem var(--mono); color:var(--ink); background:color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--surface-2))}
.hcell.hi{color:var(--accent-ink)}
.hcell.key{outline:2px solid var(--ink); outline-offset:-2px}
.hagree{font:600 0.7812rem var(--mono); text-align:right}
.picks{display:grid; gap:6px}
.prow{display:grid; grid-template-columns:28px minmax(0,1fr) 96px; gap:10px; align-items:center}
.pbar{height:10px; background:var(--surface-2); border-radius:5px; overflow:hidden}
.pbar i{display:block; height:100%; background:var(--accent); border-radius:5px}
.pval{font:500 0.7812rem var(--mono); text-align:right}
.kbadge{font:600 0.6875rem var(--mono); text-transform:uppercase; letter-spacing:.05em; background:var(--accent-soft); color:var(--accent); padding:2px 5px; border-radius:4px}
.fbline{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.fbform{display:grid; gap:8px}
.fbform label{font-size:0.8125rem; color:var(--ink-2)}
textarea{font:0.875rem/1.45 var(--sans); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; width:100%; resize:vertical}
textarea:focus{border-color:var(--accent)}

/* results */
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:14px 0 6px}
.tile{background:var(--surface-2); border-radius:10px; padding:14px; display:grid; gap:4px}
.tl{font:500 0.7188rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.tv{font:600 1.625rem/1.1 var(--mono); font-variant-numeric:tabular-nums}
.tv small{font-size:0.875rem; color:var(--ink-2); font-weight:500}
.tv.sm{font:600 1rem/1.3 var(--sans)}
.callout{margin-top:16px; border:1px solid var(--near); background:var(--near-soft); border-radius:10px; padding:14px; display:grid; gap:8px}
.callout .xhead{color:var(--near); margin:0}
.wrow{display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; align-items:center; font-size:0.875rem}
.doms.wide{max-width:560px}
.chartbox{overflow-x:auto}
.chartbox svg{width:100%; min-width:320px; height:auto; display:block}
.chartbox .gl{stroke:var(--line); stroke-width:1}
.chartbox .ax{fill:var(--ink-3); font:500 11px var(--mono)}
.chartbox .area{fill:var(--accent-soft); opacity:.7}
.chartbox .ln{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round}
.chartbox .pt{fill:var(--surface); stroke:var(--accent); stroke-width:2}
.chartbox .pt.last{fill:var(--accent)}
.tscroll{overflow-x:auto}
.rtable{width:100%; border-collapse:collapse; font-size:0.875rem; font-variant-numeric:tabular-nums}
.rtable th{font:500 0.7188rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:8px; border-bottom:1px solid var(--line)}
.rtable td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle}
.rtable a{text-decoration:none}
.pill{font:600 0.75rem var(--mono); padding:3px 8px; border-radius:999px}
.pill.good{background:var(--good-soft); color:var(--good)}
.pill.near{background:var(--near-soft); color:var(--near)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}

/* guide */
.guide{max-width:820px}
.toc{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 4px}
.toc a{font:500 0.8125rem var(--sans); padding:6px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink); text-decoration:none}
.toc a:hover{background:var(--accent-soft); color:var(--accent)}
.gsec{padding-top:22px; margin-top:22px; border-top:1px solid var(--line); scroll-margin-top:16px}
.gsec h3{font:600 1.3125rem/1.25 var(--serif); margin:0 0 10px}
.gsec h4{font:600 0.75rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin:18px 0 8px}
.gsec h4.hi{color:var(--good)}
.gsec h4.lo{color:var(--bad)}
.gsec p,.gsec li{font-size:0.9375rem; line-height:1.55; max-width:68ch}
.gsec ul,.gsec ol{padding-left:22px; margin:6px 0}
.gsec li{margin:4px 0}
.lead{font:400 1.0625rem/1.5 var(--serif)}
.gtable{border-collapse:collapse; width:100%; font-size:0.875rem; margin:8px 0}
.gtable th,.gtable td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.gtable tbody th{width:28%; font-weight:600}
.gtable thead th{font:500 0.7188rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.gcols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.steps{counter-reset:none}
.ladder{list-style:none; padding:0 !important; display:grid; gap:8px}
.ladder li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; background:var(--surface-2); border-radius:10px; padding:10px 12px}
.ladder li span{width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font:600 0.9375rem var(--mono)}
.ladder li:first-child span{background:var(--bad)}
.gnote{background:var(--surface-2); border-radius:8px; padding:10px 12px}

/* settings */
.sset{padding-top:18px; margin-top:18px; border-top:1px solid var(--line); display:grid; gap:10px; max-width:640px}
.sset h3{font:600 1.125rem/1.3 var(--serif); margin:0}
.sset .muted{margin:0}
.sset ul{margin:0; padding-left:20px}
.toggle{display:flex; gap:10px; align-items:center; font-weight:500; cursor:pointer}
.toggle input{width:18px; height:18px; accent-color:var(--accent)}
.code{font:0.75rem/1.4 var(--mono); word-break:break-all}
.lbl{font-size:0.8125rem; color:var(--ink-2)}

@media (max-width:640px){
  .gcols{grid-template-columns:1fr}
  .top{align-items:flex-start}
  .views{width:100%}
  .views button{flex:1 1 auto; padding:8px 6px}
  .hrow{grid-template-columns:24px repeat(5, minmax(30px, 1fr)) 58px}
  .prow{grid-template-columns:24px minmax(0,1fr) 84px}
}

/* saved indicator */
.saved{font-size:0.7812rem; color:var(--good); margin:0}
.saved.warn{color:var(--bad)}

/* answer comparison: the correct answer is green; your answer stays neutral, with lost marks flagged */
.ccol:not(.key) .crow{background:var(--surface-2)}
.ccol:not(.key) .crow .pos,.ccol:not(.key) .crow.b4 .pts,.ccol:not(.key) .crow.b3 .pts{color:var(--ink-2)}
.ccol:not(.key) .crow.b2 .pts{color:var(--near)}
.ccol:not(.key) .crow.b1 .pts,.ccol:not(.key) .crow.b0 .pts{color:var(--bad)}
.ccol.key{border-color:var(--good)}
.ccol.key h4{color:var(--good)}
.ccol.key .crow{background:var(--good-soft)}
.ccol.key .crow .pos{color:var(--good)}
.ccol.key .crow .letter{background:var(--good); color:var(--surface)}

/* one-time notice */
.notice{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; background:var(--accent-soft); color:var(--ink); border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:0.875rem}

/* set bar + screen-reader-only status */
.setbar{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; margin-bottom:12px}
.setbar .ptabs{margin-bottom:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.qnum:focus,.scoreline:focus{outline:none}

/* cross-device sync */
.syncbtn{display:inline-flex; align-items:center; gap:7px; max-width:12em}
.syncbtn .slabel{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sdot{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none}
.syncbtn[data-state="synced"] .sdot{background:var(--good)}
.syncbtn[data-state="saving"] .sdot{background:var(--near); animation:sdotPulse 1s ease-in-out infinite}
.syncbtn[data-state="pending"] .sdot{background:transparent; box-shadow:inset 0 0 0 2px var(--ink-3)}
.syncbtn[data-state="conflict"] .sdot{background:var(--near)}
.syncbtn[data-state="failed"] .sdot{background:var(--bad); box-shadow:0 0 0 2px var(--bad-soft)}
.syncbtn[data-state="failed"] .slabel{color:var(--bad)}
@keyframes sdotPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.syncbtn[data-state="saving"] .sdot{animation:none}}
.sstate{margin:0 0 6px; font-weight:600}
.sstate[data-s="synced"]{color:var(--good)}
.sstate[data-s="failed"]{color:var(--bad)}
.sstate[data-s="saving"],.sstate[data-s="pending"]{color:var(--ink-2)}
.syncpanel{margin:0 0 18px; display:grid; gap:10px; max-width:720px}
.syncpanel p{margin:0; max-width:66ch}
.sphead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sphead h2{margin:0; font:600 1.1875rem/1.3 var(--serif)}
.syncform{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; align-items:end}
.syncform .row{grid-column:1/-1}
.sf{display:grid; gap:4px}
.sf label{font-size:0.8125rem; color:var(--ink-2)}
.sf input{font:0.9375rem var(--sans); padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); width:100%}
.sf input:focus{outline:2px solid var(--accent); outline-offset:1px}
.syncpanel .err{color:var(--bad); font-size:0.875rem}
@media (max-width:640px){ .syncform{grid-template-columns:1fr} }

/* ---------- flags, timed mock and motion (Oct 2026) ---------- */
.flagbtn{display:inline-flex; align-items:center; gap:6px; font:500 0.75rem/1 var(--sans); padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer}
.flagbtn:hover{border-color:var(--near); color:var(--near)}
.flagbtn[aria-pressed="true"]{background:var(--near-soft); border-color:transparent; color:var(--near)}
.flagbtn[aria-pressed="true"] svg path{fill:currentColor; fill-opacity:.25}
.cell{position:relative}
.cell.flagged::after{content:""; position:absolute; top:-1px; right:-1px; width:0; height:0; border-style:solid; border-width:0 11px 11px 0; border-color:transparent var(--near) transparent transparent; border-top-right-radius:6px}
.cell.lo.flagged::after{border-top-right-radius:11px}
.legend .lflag{width:10px; height:10px; border:0; border-radius:0; background:linear-gradient(225deg, var(--near) 50%, transparent 50%)}
.flaglist{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.fchip{min-width:34px; height:30px; padding:0 8px; border-radius:7px; border:1px solid transparent; background:var(--near-soft); color:var(--near); font:600 0.7812rem var(--mono); cursor:pointer}
.fchip:hover,.fchip.cur{border-color:var(--near)}
.ptab.mockgo{display:inline-flex; align-items:center; gap:6px}

.mockbar{position:sticky; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:5; display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:-8px -8px 18px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); box-shadow:0 6px 18px rgba(16,40,36,.08)}
.mockbar .mt{font:600 1.375rem/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); min-width:5ch}
.mockbar .mstat{font-size:0.8125rem; color:var(--ink-2); flex:1}
.mockbar .mstat b{font-family:var(--mono); color:var(--ink)}
.mockbar.low{background:var(--near-soft); border-color:transparent}
.mockbar.low .mt{color:var(--near)}
.mockbar.crit{background:var(--bad-soft); border-color:transparent}
.mockbar.crit .mt{color:var(--bad)}
.lead{font:400 1.125rem/1.55 var(--serif); max-width:62ch; margin:10px 0 14px}
.mocklist{margin:0; padding-left:20px; display:grid; gap:8px; max-width:66ch; color:var(--ink-2)}
.mocklist b{color:var(--ink); font-family:var(--mono)}
.sumtop{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin:16px 0 6px; padding:16px; border-radius:12px; background:var(--surface-2)}
.sumtop .big{font-size:1.625rem}
.card .doms{max-width:520px}

/* motion: only when the visitor hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  @keyframes q-next{from{opacity:0; transform:translateX(22px)}to{opacity:1; transform:none}}
  @keyframes q-prev{from{opacity:0; transform:translateX(-22px)}to{opacity:1; transform:none}}
  @keyframes fade-up{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes wave{0%{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
  @keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--near) 55%, transparent)}100%{box-shadow:0 0 0 14px transparent}}
  @keyframes tick{0%,100%{opacity:1}50%{opacity:.55}}

  [data-view-panel]:not([hidden]){animation:fade-in .28s ease-out}
  .card.in-next{animation:q-next .32s cubic-bezier(.2,.8,.2,1)}
  .card.in-prev{animation:q-prev .32s cubic-bezier(.2,.8,.2,1)}
  .card.in-fade{animation:fade-up .3s cubic-bezier(.2,.8,.2,1)}
  .card.in-reveal .xhead{animation:fade-in .25s ease-out both}
  .card.in-reveal .xitem{animation:fade-up .38s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 55ms)}
  .card.in-reveal .result{animation:fade-up .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:.32s}
  .card.in-reveal .crow{animation:fade-up .35s cubic-bezier(.2,.8,.2,1) both; animation-delay:.5s}
  .card.in-fade .bcard{animation:fade-up .35s cubic-bezier(.2,.8,.2,1) both}
  .card.in-fade .bcard:nth-child(2){animation-delay:.05s}
  .card.in-fade .bcard:nth-child(3){animation-delay:.1s}
  .card.in-fade .bcard:nth-child(4){animation-delay:.15s}
  .card.in-fade .bar i, .panel.anim .bar i{transform-origin:left; animation:grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.15s}
  .card.in-fade .sumtop{animation:fade-up .4s cubic-bezier(.2,.8,.2,1) both}
  .panel.anim .big{animation:fade-up .35s cubic-bezier(.2,.8,.2,1)}
  .pick.popped .letter{animation:pop .28s cubic-bezier(.2,.8,.2,1)}
  .flagbtn.waved svg{transform-origin:3px 14px; animation:wave .45s ease-out}
  .mockbar.ping{animation:ping .9s ease-out 2}
  .mockbar.crit .mt{animation:tick 1s steps(2, jump-none) infinite}
  .syncpanel:not([hidden]){animation:fade-up .28s cubic-bezier(.2,.8,.2,1)}

  .btn,.ptab,.views button,.seg button,.chipbtn,.bcard,.opt,.ritem,.mvb,.fchip,.flagbtn,.cell{transition:background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s}
  .btn:active:not(:disabled),.ptab:active,.chipbtn:active,.bcard:active:not(:disabled),.fchip:active,.flagbtn:active{transform:scale(.97)}
  .pick:active,.ritem:active{transform:scale(.995)}
  .cell:hover{transform:translateY(-1px)}
  .cell.cur{transition:outline-offset .18s}
  .bcard:hover:not(:disabled){box-shadow:0 6px 18px rgba(16,40,36,.10)}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important} }