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:#6F7E7B; --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:15px/1.5 var(--sans)}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px; padding-block:28px 72px}
.eyebrow{font:500 11.5px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0}
h1{font:600 clamp(28px,4.2vw,38px)/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 12px var(--mono); color:var(--ink-2); letter-spacing:.04em}
.legend{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; 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 12px 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 13px var(--mono); color:var(--ink-2)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font:500 12px/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 18.5px/1.55 var(--serif); margin:18px 0 12px; max-width:66ch; text-wrap:pretty}
.instr{font-size:14px; 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 12px 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 13px 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:15px; 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 14px 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:13.5px; 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 12px 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 16px var(--mono)}
.keyline{font:500 13px var(--mono); color:var(--ink-2)}
.takeaway{background:var(--surface-2); border-radius:10px; padding:12px 14px; font-size:14.5px; max-width:66ch}
.tlabel{display:block; font:500 11.5px 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:13px; color:var(--ink-3); margin:10px 0 0}
.btn{font:500 14px 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:13px}
.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 11.5px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px}
.big{font:600 30px/1.1 var(--mono); font-variant-numeric:tabular-nums}
.big small{font-size:14px; color:var(--ink-2); font-weight:500}
.muted{font-size:13px; 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 13px 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:13px}
.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 20px var(--mono); font-variant-numeric:tabular-nums}
.confirm{display:grid; gap:8px; font-size:13px; color:var(--ink-2)}
.confirm .row{display:flex; gap:8px; flex-wrap:wrap}
.note{font-size:12.5px; 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 13.5px 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 11.5px 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 11.5px 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 16px 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 13px 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:13px; color:var(--ink-2)}

/* explanations + answer comparison */
.xhead{font:500 11.5px 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:13.5px; 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 12px 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:13.5px; line-height:1.4}
.crow .pos{font:600 13px/24px var(--mono); color:var(--ink-2)}
.crow .letter{width:24px; height:24px; font-size:12px}
.crow .pts{font:600 12px/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:13px; 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:15px}
  .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:17px}
}
@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 14px 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:12.5px; 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 24px/1.2 var(--serif); margin:0 0 6px}
.bsub{font:600 12px 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 16px var(--sans)}
.bcard span{font-size:13.5px; 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 13px 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 11px 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:13.5px; 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 11.5px 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 11.5px 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 12.5px 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 12.5px var(--mono); text-align:right}
.kbadge{font:600 10.5px 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:13px; color:var(--ink-2)}
textarea{font:14px/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 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.tv{font:600 26px/1.1 var(--mono); font-variant-numeric:tabular-nums}
.tv small{font-size:14px; color:var(--ink-2); font-weight:500}
.tv.sm{font:600 16px/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:14px}
.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:14px; font-variant-numeric:tabular-nums}
.rtable th{font:500 11.5px 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 12px 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 13px 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 21px/1.25 var(--serif); margin:0 0 10px}
.gsec h4{font:600 12px 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:15px; 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 17px/1.5 var(--serif)}
.gtable{border-collapse:collapse; width:100%; font-size:14px; 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 11.5px 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 15px 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 18px/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:12px/1.4 var(--mono); word-break:break-all}
.lbl{font-size:13px; 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:12.5px; 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:14px}

/* 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="on"] .sdot{background:var(--good)}
.syncbtn[data-state="conflict"] .sdot{background:var(--near)}
.syncbtn[data-state="offline"] .sdot{background:var(--ink-3); box-shadow:0 0 0 2px var(--near-soft)}
.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 19px/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:13px; color:var(--ink-2)}
.sf input{font:15px 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:14px}
@media (max-width:640px){ .syncform{grid-template-columns:1fr} }