:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --surface-2:#F6F8FA; --ink:#15202A; --muted:#5A6875; --line:#D3DAE1;
  --accent:#0B5C78; --accent-ink:#FFFFFF; --accent-soft:#DCEAF0;
  --flag:#D99E00; --flag-soft:#FBF0CF;
  --ok:#1C7A4B; --ok-soft:#DCF0E3; --bad:#B8352A; --bad-soft:#F7E0DC;
  --stripe-a:#E8B400; --stripe-b:#15202A;
  --shadow:0 1px 2px rgba(21,32,42,.06),0 4px 14px rgba(21,32,42,.06);
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E151B; --surface:#17212A; --surface-2:#1C2833; --ink:#E4ECF2; --muted:#92A2B0; --line:#2A3844;
    --accent:#56B6DB; --accent-ink:#04202B; --accent-soft:#15323E;
    --flag:#F0C02E; --flag-soft:#3A3113;
    --ok:#4FC48C; --ok-soft:#12331F; --bad:#FF7F70; --bad-soft:#3B1D19;
    --stripe-b:#0E151B;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E151B; --surface:#17212A; --surface-2:#1C2833; --ink:#E4ECF2; --muted:#92A2B0; --line:#2A3844;
  --accent:#56B6DB; --accent-ink:#04202B; --accent-soft:#15323E;
  --flag:#F0C02E; --flag-soft:#3A3113;
  --ok:#4FC48C; --ok-soft:#12331F; --bad:#FF7F70; --bad-soft:#3B1D19;
  --stripe-b:#0E151B;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html,body{background:var(--bg)}
body{color:var(--ink);font:16px/1.5 var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:640px;margin:0 auto;padding-inline:16px}
h1,h2,h3{text-wrap:balance;margin:0}
.eyebrow{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 18px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:16px;text-align:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--bad)}

/* ---------- home ---------- */
.stripe{height:6px;background:repeating-linear-gradient(-45deg,var(--stripe-a) 0 10px,var(--stripe-b) 10px 20px)}
.home-head{padding-block:28px 20px;display:grid;gap:8px}
.home-head h1{font:700 44px/0.95 var(--display);letter-spacing:.005em;text-transform:uppercase}
.home-head p{margin:0;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fact{font:500 13px/1 var(--mono);padding:7px 10px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.stack{display:grid;gap:12px}
.section{padding-block:10px 18px;display:grid;gap:12px}
.section > h2{font:700 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.mode{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px}
.mode.hero{border:2px solid var(--accent);box-shadow:var(--shadow)}
.mode-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mode h3{font:700 26px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.mode p{margin:4px 0 0;color:var(--muted);font-size:15px}
.count{font:700 30px/1 var(--display);color:var(--bad);text-align:right;white-space:nowrap}
.count small{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.resume{background:var(--flag-soft);border:1.5px solid var(--flag);border-radius:14px;padding:16px;display:grid;gap:12px}
.resume .row{display:flex;gap:10px}
.resume .row .btn{flex:1}
.toggles{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;width:100%;background:none;border:0;text-align:left}
.toggle + .toggle{border-top:1px solid var(--line)}
.switch{flex:none;width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.toggle[aria-checked="true"] .switch{background:var(--accent)}
.toggle[aria-checked="true"] .switch::after{transform:translateX(18px)}
.toggle span small{display:block;color:var(--muted);font-size:13px}
.history{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 16px}
.hrow + .hrow{border-top:1px solid var(--line)}
.hrow .when{font-size:14px}
.hrow .when small{display:block;color:var(--muted);font-size:12px}
.hrow .sc{font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.empty{padding:16px;color:var(--muted);font-size:15px}
.statline{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1 1 90px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat b{display:block;font:700 28px/1 var(--display)}
.stat span{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bands{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bands td,.bands th{padding:10px 12px;text-align:left;border-top:1px solid var(--line)}
.bands th{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:0;background:var(--surface-2)}
.bands td{font-variant-numeric:tabular-nums}
.foot{padding-block:8px 36px;color:var(--muted);font-size:12px}

/* ---------- pills ---------- */
.pill{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;border-radius:6px;white-space:nowrap}
.g-fail{background:var(--bad-soft);color:var(--bad)}
.g-pass{background:var(--accent-soft);color:var(--accent)}
.g-merit{background:var(--flag-soft);color:var(--ink)}
.g-dist{background:var(--ok-soft);color:var(--ok)}
.g-none{background:var(--surface-2);color:var(--muted)}

/* ---------- quiz ---------- */
.qbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.qbar-in{display:flex;align-items:center;gap:8px;min-height:56px}
.qbar .title{flex:1;min-width:0}
.qbar .title b{display:block;font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.qbar .title span{font-size:12px;color:var(--muted)}
.exit{min-height:40px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);font-size:14px;font-weight:600}
.timer{font:500 17px var(--mono);font-variant-numeric:tabular-nums;padding:7px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.timer.low{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.progress{height:4px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--accent);transition:width .2s}
.qbody{padding-block:18px 130px;display:grid;gap:16px}
.qmeta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qtext{font-size:18px;line-height:1.5;font-weight:500;margin:0}
.qimg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;justify-content:center}
.qimg img{max-height:260px;width:auto;object-fit:contain}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);text-align:left;font-size:16px;line-height:1.35;transition:border-color .12s,background .12s}
.opt .letter{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font:600 15px var(--mono);background:var(--surface-2);border:1px solid var(--line)}
.opt .mark{margin-left:auto;flex:none;font:600 13px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .letter{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .letter{background:var(--ok);color:var(--surface);border-color:var(--ok)}
.opt.right .mark{color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .letter{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.opt.wrong .mark{color:var(--bad)}
.opt:disabled{cursor:default;opacity:1}
.opt.dim{opacity:.6}
.feedback{border-radius:12px;padding:12px 14px;font-weight:600}
.feedback.ok{background:var(--ok-soft);color:var(--ok)}
.feedback.bad{background:var(--bad-soft);color:var(--bad)}
.feedback span{display:block;font-weight:400;color:var(--ink);margin-top:2px}
.flagbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);font-size:14px;font-weight:600}
.flagbtn[aria-pressed="true"]{border-color:var(--flag);background:var(--flag-soft)}
.flagbtn svg{width:14px;height:14px}
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.navbar-in{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;padding-block:10px}
.navbar .btn{min-height:52px;padding-inline:10px}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(10,16,22,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:640px;max-height:88%;overflow:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:16px}
.sheet h2{font:700 26px/1 var(--display);text-transform:uppercase}
.sheet p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cell{position:relative;aspect-ratio:1;max-width:100%;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font:600 15px var(--mono);display:grid;place-items:center}
.cell.ans{background:var(--accent-soft);border-color:var(--accent)}
.cell.cur{outline:3px solid var(--ink);outline-offset:1px}
.cell.flg::after{content:"";position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--flag)}
.cell.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.cell.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1.5px solid var(--line)}
.legend .l-ans{background:var(--accent-soft);border-color:var(--accent)}
.legend .l-flg{background:var(--flag);border-color:var(--flag);border-radius:50%}
.sheet-actions{display:grid;gap:10px}
.warnbox{background:var(--flag-soft);border:1px solid var(--flag);border-radius:10px;padding:12px;color:var(--ink);font-size:15px}

/* ---------- results ---------- */
.res-head{padding-block:24px 8px;display:grid;gap:14px}
.scorecard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:14px;box-shadow:var(--shadow)}
.score-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bigscore{font:700 64px/0.9 var(--display);font-variant-numeric:tabular-nums}
.bigscore small{font-size:30px;color:var(--muted)}
.score-meta{display:grid;gap:6px;justify-items:end;text-align:right}
.score-meta .pct{font:500 15px var(--mono)}
.score-meta .pill{font-size:14px;padding:8px 10px}
.scale{display:grid;gap:6px}
.scale-bar{position:relative;display:grid;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.scale-wrap{position:relative;padding-top:14px}
.scale-marker{position:absolute;top:0;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--ink);transform:translateX(-7px)}
.scale-labels{display:grid;gap:2px;font:500 10px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.scale-labels span{overflow:hidden;white-space:nowrap;text-overflow:clip}
.res-sub{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.res-sub b{color:var(--ink);font-family:var(--mono);font-weight:500}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:8px 14px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);font-size:14px;font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rlist{display:grid;gap:10px;padding-bottom:40px}
.ritem{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:12px;padding:14px;display:grid;gap:10px}
.ritem.bad{border-left-color:var(--bad)}
.ritem .q{margin:0;font-size:15px}
.ritem img{max-height:140px;width:auto;background:#fff;border-radius:8px;border:1px solid var(--line);padding:4px}
.ans-line{display:flex;gap:10px;align-items:baseline;font-size:15px}
.ans-line .k{flex:none;width:96px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ans-line.you-bad{color:var(--bad)}
.ans-line.corr{color:var(--ok);font-weight:600}
.res-actions{display:grid;gap:10px}
.allgood{background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:14px;font-weight:600}

@media (max-width:380px){
  .home-head h1{font-size:38px}
  .grid{grid-template-columns:repeat(5,1fr)}
  .navbar-in{grid-template-columns:1fr 1fr 1.3fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- picker, back bar, shared ---------- */
.backbar{padding-block:10px 0}
.back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px 6px 4px;border:0;background:none;font-weight:600;font-size:15px;color:var(--accent)}
.back svg{width:16px;height:16px}
a.mode.pick{color:inherit;text-decoration:none;gap:10px}
a.mode.pick:active{border-color:var(--accent)}
a.mode.pick:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pick .facts{margin-top:0}
.pick-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.pick-foot .arrow{font:600 22px/1 var(--body);color:var(--accent)}
.bad-t{color:var(--bad);font-weight:600}
.flag-t{color:var(--ink);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.resume-h{font:700 24px/1.1 var(--display);text-transform:uppercase;margin-top:4px}
.resume-p{margin:4px 0 0;color:var(--muted);font-size:15px}
.mode.learn{border-color:var(--accent);background:var(--accent-soft)}
.mode.learn .btn{background:var(--surface)}
.why{margin:0;font-size:14px;color:var(--muted);padding-top:8px;border-top:1px dashed var(--line)}
.feedback span + span{margin-top:6px;font-size:14px;color:var(--muted)}

/* ---------- reference list ---------- */
.regs{display:grid;gap:8px;padding-bottom:12px}
.reg{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.reg summary,.reg-sum{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;padding:14px 16px;cursor:pointer;list-style:none}
.reg-static .reg-sum{cursor:default}
.reg summary::-webkit-details-marker{display:none}
.reg summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.reg[open] summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.reg-abbr{font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--accent);min-width:0}
.reg-name{font-size:14px;line-height:1.35;color:var(--ink)}
.reg-name .mono{color:var(--muted);font-size:13px;white-space:nowrap}
.reg-body{padding:12px 16px 16px}
.reg-covers{margin:0 0 8px;font-weight:500}
.reg-body ul,.flash-points{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
@media (max-width:420px){.reg summary,.reg-sum{grid-template-columns:1fr}}

/* ---------- flashcards ---------- */
.flash{width:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 20px;border-radius:18px;border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow);text-align:center}
.flash.flipped{justify-content:flex-start;align-items:stretch;text-align:left;border-color:var(--accent);cursor:default;opacity:1}
.flash-abbr{font:700 52px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--accent);overflow-wrap:anywhere}
.flash.flipped .flash-abbr{font-size:36px}
.flash-hint{color:var(--muted);font-size:15px;max-width:30ch}
.flash-name{font-size:19px;font-weight:600;line-height:1.3}
.flash-name .mono{color:var(--muted);font-weight:500}
.flash-covers{color:var(--muted);font-size:15px}
.navbar-in.one-col{grid-template-columns:1fr}
.navbar-in.two-col{grid-template-columns:1fr 1fr}
.btn.miss{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.btn.hit{border-color:var(--ok);color:var(--surface);background:var(--ok)}