/* MedPrep design system: tokens carried over from the approved Chapter 5 reference build */
:root{
  --paper:#eef2ef; --surface:#ffffff; --surface2:#f6f8f6; --ink:#1b2a33; --muted:#58696f; --line:#d4ddd8;
  --accent:#d98a1c; --teal:#1f7a74; --coral:#c94a34; --blue:#2f6fb0; --purple:#8a4fa0; --green:#3d8a4c;
  --ok:#2e8b57; --okbg:#e3f4ea; --bad:#c94a34; --badbg:#fbe6e1;
  --l6:#1f7a74; --l7:#2f6fb0; --l8:#8a4fa0; --l9:#d98a1c; --l10:#c94a34;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
  --comic:"Comic Neue",var(--body); --sfx:"Bangers",sans-serif;
  --shadow:0 10px 30px rgba(20,40,40,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11191d; --surface:#1a252b; --surface2:#162026; --ink:#e6eeea; --muted:#9fb1b4; --line:#2c3c43;
    --accent:#f0b04a; --teal:#55b9ae; --coral:#ef7c64; --blue:#7fb0e6; --purple:#c39bd6; --green:#7cc58a;
    --ok:#5fcf8f; --okbg:#173327; --bad:#ef7c64; --badbg:#3a1f1a;
    --l6:#55b9ae; --l7:#7fb0e6; --l8:#c39bd6; --l9:#f0b04a; --l10:#ef7c64;
    --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11191d; --surface:#1a252b; --surface2:#162026; --ink:#e6eeea; --muted:#9fb1b4; --line:#2c3c43;
  --accent:#f0b04a; --teal:#55b9ae; --coral:#ef7c64; --blue:#7fb0e6; --purple:#c39bd6; --green:#7cc58a;
  --ok:#5fcf8f; --okbg:#173327; --bad:#ef7c64; --badbg:#3a1f1a;
  --l6:#55b9ae; --l7:#7fb0e6; --l8:#c39bd6; --l9:#f0b04a; --l10:#ef7c64;
  --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:1280px;margin:0 auto;padding:16px 16px 48px}
@media (min-width:700px){.wrap{padding:20px 24px 56px}}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.logo svg{width:34px;height:34px}
.topbar .right{display:flex;gap:8px;align-items:center}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn svg{width:20px;height:20px}
header.top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-end;justify-content:space-between;padding:8px 0 18px;border-bottom:2px solid var(--ink)}
.brand .kicker{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.brand h1{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.05;margin:2px 0 0;text-wrap:balance;letter-spacing:-.015em}
.brand p{margin:8px 0 0;color:var(--muted);max-width:66ch}
.source{font-size:.85rem;color:var(--muted);text-align:right;max-width:36ch}
@media (max-width:700px){.source{text-align:left}}
.draft{display:flex;gap:10px;align-items:center;background:#fff4dc;color:#6b4a0c;border:1.5px solid #f0cf86;border-radius:12px;padding:8px 14px;margin:14px 0 0;font-size:.9rem;font-weight:700}
:root[data-theme="dark"] .draft{background:#3a2e14;color:#f6dca0;border-color:#6b5320}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .draft{background:#3a2e14;color:#f6dca0;border-color:#6b5320}}

/* ---------- tabs ---------- */
nav.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0 20px}
nav.tabs a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;transition:border-color .15s,transform .15s;min-height:44px}
nav.tabs a code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--teal)}
nav.tabs a span{font-family:var(--display);font-weight:700;font-size:1.05rem}
nav.tabs a small{color:var(--muted);font-size:.78rem}
nav.tabs a:hover{border-color:var(--ink);transform:translateY(-1px)}
nav.tabs a[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
nav.tabs a[aria-selected="true"] code,nav.tabs a[aria-selected="true"] small{color:var(--paper);opacity:.85}
@media (max-width:900px){nav.tabs{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}nav.tabs a{scroll-snap-align:start}}
@media (max-width:520px){nav.tabs a small,nav.tabs a code{display:none}nav.tabs{grid-template-columns:repeat(5,minmax(96px,1fr))}}
section.view{display:none}
section.view.on{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.viewhead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.viewhead h2{font-family:var(--display);font-size:1.45rem;margin:0;text-wrap:balance}
.viewhead p{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:700;font-size:.92rem;min-height:44px;display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.big{padding:12px 22px;font-size:1rem}
.btn.ghost{background:transparent}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px}
footer.foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}
footer.foot b{color:var(--ink)}
kbd{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--surface)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:700;cursor:pointer;min-height:36px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:400}
.loading{padding:60px 20px;text-align:center;color:var(--muted)}
.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--teal);animation:spin 1s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:all .3s;pointer-events:none;z-index:50;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* level badge colours */
.lv{--lc:var(--l6)}
.lv-6{--lc:var(--l6)}.lv-7{--lc:var(--l7)}.lv-8{--lc:var(--l8)}.lv-9{--lc:var(--l9)}.lv-10{--lc:var(--l10)}
.lvbadge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px 3px 4px;font-weight:800;font-size:.82rem;color:var(--lc);border:1.5px solid var(--lc);background:var(--surface)}
.lvbadge i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lc);color:#fff;font-size:.78rem}

/* =================================================================== SBA */
.sba-start{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width:880px){.sba-start{grid-template-columns:1fr}}
.hero{padding:22px 22px 20px;position:relative;overflow:hidden}
.hero h3{font-family:var(--display);font-size:1.6rem;line-height:1.1;margin:0 0 6px}
.hero p{margin:0;color:var(--muted)}
.ladder{display:flex;align-items:flex-end;gap:8px;margin:18px 0 6px;height:150px}
.rung{flex:1;border-radius:10px 10px 4px 4px;background:var(--lc);opacity:.22;position:relative;transition:opacity .3s,transform .3s;display:flex;align-items:flex-start;justify-content:center;color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem;padding-top:6px}
.rung.on{opacity:1}
.rung.here{opacity:1;transform:translateY(-6px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.rung.here::after{content:"START";position:absolute;bottom:-22px;font-size:.66rem;letter-spacing:.1em;color:var(--lc);font-family:var(--body)}
.rung-6{height:40%}.rung-7{height:55%}.rung-8{height:70%}.rung-9{height:85%}.rung-10{height:100%}
.ladder-key{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:26px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-family:var(--display);font-size:1.4rem;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:.78rem}
.modes{display:flex;flex-direction:column;gap:10px}
.mode{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;width:100%}
.mode:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow)}
.mode[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.mode .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--mc,var(--teal));color:#fff}
.mode .ic svg{width:28px;height:28px}
.mode b{font-family:var(--display);font-size:1.1rem;display:block}
.mode small{color:var(--muted);font-size:.86rem;display:block;line-height:1.35}
.mode .tagline{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mc,var(--teal))}
.mode .go{font-size:1.4rem;color:var(--muted)}
.opts{padding:16px 18px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.opts h4{margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.optline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:7px 14px;cursor:pointer;font-weight:700;font-size:.88rem;min-height:38px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* question screen */
.qhead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:10px}
.qhead .left,.qhead .rightside{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pbar{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin-bottom:14px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--accent));width:0;transition:width .4s}
.pill{border-radius:999px;padding:4px 12px;font-weight:700;font-size:.85rem;display:inline-flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.pill.soft{background:var(--surface);border:1.5px solid var(--line)}
.pill.timer{background:var(--ink);color:var(--paper);min-width:76px;justify-content:center}
.pill.timer.low{background:var(--coral);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.streak{color:var(--accent)}
.streak.hot{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.3)}}
.qgrid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media (max-width:960px){.qgrid{grid-template-columns:1fr}}
.qcard{padding:22px 22px 18px;position:relative}
.qcard .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tagchip{font-size:.74rem;font-weight:700;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.stem{font-size:1.06rem;line-height:1.6;margin:0 0 12px;max-width:75ch}
.leadin{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:0 0 14px;line-height:1.3}
.options{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.opt{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;min-height:52px}
.opt:hover:not(:disabled){border-color:var(--ink);transform:translateX(2px)}
.opt .k{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:var(--surface2);border:1.5px solid var(--line);font-family:var(--display)}
.opt .t{font-weight:700}
.opt .mark{font-weight:800;font-size:1.1rem}
.opt.picked{border-color:var(--ink);background:var(--surface2)}
.opt.picked .k{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt.right{border-color:var(--ok);background:var(--okbg)}
.opt.right .k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}
.opt.wrong .k{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.gone{opacity:.28;text-decoration:line-through}
.opt:disabled{cursor:default}
.opt.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.why{grid-column:2 / -1;font-size:.92rem;color:var(--muted);line-height:1.45;font-weight:400}
.opt.right .why,.opt.wrong .why{color:var(--ink)}
.feedback{margin-top:14px;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.feedback.good{background:var(--okbg);border:1.5px solid var(--ok)}
.feedback.badf{background:var(--badbg);border:1.5px solid var(--bad)}
.feedback .big{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.1}
.feedback p{margin:4px 0 0}
.lp{margin-top:12px;padding:12px 16px;border-left:5px solid var(--accent);background:var(--surface2);border-radius:0 12px 12px 0}
.lp b{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block}
.peer{font-size:.85rem;color:var(--muted);margin-top:8px}
.qactions{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-top:16px}
.qactions .grp{display:flex;gap:8px;flex-wrap:wrap}
.btn.flagged{border-color:var(--accent);color:var(--accent)}
.hintbox{margin-top:12px;background:#fff7e0;color:#5d4510;border:1.5px dashed #e3b44c;border-radius:12px;padding:10px 14px;font-size:.95rem}
:root[data-theme="dark"] .hintbox{background:#2f2711;color:#f5dc9c;border-color:#7a6224}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hintbox{background:#2f2711;color:#f5dc9c;border-color:#7a6224}}
.side{display:flex;flex-direction:column;gap:12px}
.side .card{padding:14px 16px}
.side h4{margin:0 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mini-ladder{display:flex;flex-direction:column-reverse;gap:5px}
.mini-ladder div{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.mini-ladder span.bar{flex:1;height:12px;border-radius:6px;background:var(--lc);opacity:.18;transition:opacity .3s}
.mini-ladder div.on span.bar{opacity:1}
.mini-ladder div.on{color:var(--ink);font-weight:800}
.navgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px}
.navgrid button{height:38px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums;position:relative}
.navgrid button.ans{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.navgrid button.cur{outline:3px solid var(--accent);outline-offset:1px}
.navgrid button.flag::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.navkey{display:flex;gap:12px;font-size:.75rem;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.confrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:.85rem;color:var(--muted)}
.confrow .chip{min-height:32px;padding:4px 10px;font-size:.8rem}
.xpfloat{position:absolute;right:22px;top:16px;font-family:var(--display);font-weight:800;color:var(--ok);font-size:1.4rem;animation:floatup 1.2s ease forwards;pointer-events:none}
@keyframes floatup{from{opacity:0;transform:translateY(10px)}20%{opacity:1}to{opacity:0;transform:translateY(-30px)}}
.levelpop{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:40}
.levelpop div{background:var(--lc);color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,2.6rem);padding:18px 34px;border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:lvpop 1.5s ease forwards;text-align:center;line-height:1.1}
.levelpop small{display:block;font-size:.9rem;font-weight:700;opacity:.9;font-family:var(--body)}
@keyframes lvpop{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.levelpop div,.xpfloat,.opt.shake,.streak.hot,section.view.on{animation:none}.levelpop{display:none}}

/* results */
.res-top{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:22px;align-items:center}
@media (max-width:700px){.res-top{grid-template-columns:1fr;justify-items:center;text-align:center}}
.ring{width:200px;height:200px}
.ring .bg{stroke:var(--line)}
.ring .fg{transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1)}
.ring text{font-family:var(--display);fill:var(--ink)}
.res-top h3{font-family:var(--display);font-size:1.8rem;margin:0;line-height:1.1}
.res-top p{margin:6px 0 0;color:var(--muted)}
.verdict-pill{display:inline-block;margin-top:10px;border-radius:999px;padding:5px 14px;font-weight:800;color:#fff}
.verdict-pill.pass{background:var(--ok)}.verdict-pill.fail{background:var(--coral)}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:860px){.res-grid{grid-template-columns:1fr}}
.res-grid .card{padding:16px 18px}
.res-grid h4{margin:0 0 10px;font-family:var(--display);font-size:1.1rem}
.tagbar{display:grid;grid-template-columns:150px 1fr 54px;gap:10px;align-items:center;font-size:.88rem;margin:6px 0}
.tagbar .track{height:12px;border-radius:8px;background:var(--line);overflow:hidden}
.tagbar .track i{display:block;height:100%;border-radius:8px;width:0;transition:width 1s}
.tagbar .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.journey svg{width:100%;height:auto;display:block}
.journey text{font-size:11px;fill:var(--muted);font-family:var(--body)}
.review-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rv{padding:0;overflow:hidden}
.rv summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 16px}
.rv summary::-webkit-details-marker{display:none}
.rv .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.rv .dot.ok{background:var(--ok)}.rv .dot.no{background:var(--bad)}.rv .dot.skip{background:var(--muted)}
.rv .s{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rv .body{padding:0 16px 16px}
.rv .body .opt{cursor:default}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
@media (prefers-reduced-motion: reduce){.confetti{display:none}}

/* =================================================================== Mind map */
.mm-shell{display:grid;grid-template-columns:1fr;gap:14px}
.mm-canvas{overflow-x:auto;padding:8px}
.mm-canvas svg{display:block;min-width:900px;width:100%;height:auto}
.mm-node{cursor:pointer;transition:opacity .2s}
.mm-node text{pointer-events:none;font-family:var(--body)}
.mm-node.dim,.mm-link.dim{opacity:.16}
.mm-node.hit rect{stroke-width:3.5}
.mm-node:hover rect{filter:brightness(1.06)}
.mm-node.sel rect{stroke:var(--ink);stroke-width:3}
.mm-node:focus{outline:none}
.mm-node:focus-visible rect{stroke:var(--accent);stroke-width:4}
.mm-leaf.hidden,.mm-link.hidden{opacity:0;pointer-events:none}
.mm-link{fill:none;stroke-width:2.2;transition:opacity .2s}
.mm-panel{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px}
.mm-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;background:var(--ink)}
.mm-panel h3{margin:4px 0 2px;font-family:var(--display);font-size:1.2rem}
.mm-panel p{margin:0;max-width:70ch}
.mm-swatch{width:14px;align-self:stretch;border-radius:8px;background:var(--ink)}
.search{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;min-width:200px;min-height:44px}
.mm-quiz{padding:14px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.mm-quiz b{font-family:var(--display)}
@media (max-width:640px){.mm-panel{grid-template-columns:auto 1fr}.mm-panel .btn{grid-column:1 / -1}.search{min-width:0;flex:1 1 100%}}

/* =================================================================== Sketchnotes */
.sk-page{padding:0;overflow:hidden;background:#fbf8f0;border-color:#e2dccb}
.sk-scroll{overflow-x:auto}
.sk-page svg{display:block;width:100%;min-width:760px;height:auto}
.sk-svg text{font-family:var(--hand);fill:#23313a}
.sk-hot{cursor:pointer}
.sk-hot:focus{outline:none}
.sk-hot:hover .hl,.sk-hot:focus .hl,.sk-hot.pinned .hl{opacity:.55}
.hl{opacity:0;transition:opacity .2s}
.sk-draw path.stroke{stroke-dasharray:var(--len);stroke-dashoffset:0}
.sk-draw.replay path.stroke{animation:draw 1.6s ease forwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.sk-draw.replay path.stroke{animation:none}}
.sk-note{position:relative;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sticky{background:#ffe9a8;color:#2b2a20;border-radius:4px 4px 14px 4px;padding:14px 18px;box-shadow:0 6px 16px rgba(0,0,0,.12);transform:rotate(-.6deg);font-family:var(--hand);font-size:1.45rem;line-height:1.2;min-height:140px}
.sticky b{font-family:var(--body);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:6px;color:#7a5c12}
.widget{padding:16px 18px}
.widget h3{margin:0 0 4px;font-family:var(--display);font-size:1.1rem}
.widget p.sub{margin:0 0 10px;color:var(--muted);font-size:.86rem}
.wgrid{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;font-size:.9rem}
.wgrid input[type=range]{width:100%;accent-color:var(--teal);min-height:28px}
.wgrid output{font-variant-numeric:tabular-nums;font-weight:700;min-width:5ch;text-align:right}
.wout{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wout .box{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface2)}
.wout .box b{font-family:var(--display);font-size:1.6rem;display:block;font-variant-numeric:tabular-nums;line-height:1.1}
.wout .box small{color:var(--muted);font-size:.78rem}
.wverdict{margin-top:10px;font-size:.9rem;border-radius:10px;padding:8px 12px;background:var(--surface2);border-left:4px solid var(--accent)}
.sexseg{margin-bottom:8px}
@media (max-width:760px){.sk-note{grid-template-columns:1fr}}

/* =================================================================== Flashcards */
.fc-layout{display:grid;grid-template-columns:270px 1fr;gap:18px}
.decks{padding:14px;display:flex;flex-direction:column;gap:6px;align-self:start}
.decks h3{margin:2px 4px 6px;font-family:var(--display);font-size:1rem}
.deck{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;border:1.5px solid transparent;background:transparent;border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left;min-height:44px}
.deck:hover{border-color:var(--line)}
.deck[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.deck .ct{font-variant-numeric:tabular-nums;font-size:.78rem;opacity:.85}
.deck .due{font-size:.72rem;font-weight:800;color:var(--coral)}
.deck[aria-pressed="true"] .due{color:var(--accent)}
.deck .meter{grid-column:1 / -1}
.meter{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:2px 0 0}
.meter i{display:block;height:100%;background:var(--teal);width:0;transition:width .3s}
.boxes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.boxes div{text-align:center;font-size:.72rem;color:var(--muted)}
.boxes b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.fc-stage{display:flex;flex-direction:column;gap:14px}
.fc-stats{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums;align-items:center}
.flip{perspective:1400px;height:330px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
@media (prefers-reduced-motion: reduce){.flip-inner{transition:none}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--shadow);gap:10px}
.face.back{transform:rotateY(180deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.face .tagrow{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.face .tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.face.back .tag{color:var(--accent)}
.face .q{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.22;text-wrap:balance;margin:0}
.face .a{font-size:clamp(1.02rem,2vw,1.28rem);line-height:1.45;margin:0;max-width:62ch}
.face .hint{font-size:.82rem;color:var(--muted)}
.face.back .hint{color:var(--paper);opacity:.7}
.fc-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fc-actions .btn{flex-direction:column;gap:0;border-radius:14px;padding:8px 6px;line-height:1.15}
.fc-actions .btn small{font-weight:400;font-size:.72rem;opacity:.8}
.btn.again{border-color:var(--coral);color:var(--coral)}
.btn.hard{border-color:var(--accent);color:var(--accent)}
.btn.good{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.easy{background:var(--blue);border-color:var(--blue);color:#fff}
.fc-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.done{padding:40px;text-align:center}
.done h3{font-family:var(--display);font-size:1.6rem;margin:0 0 6px}
@media (max-width:760px){.fc-layout{grid-template-columns:1fr}.flip{height:360px}.fc-actions{grid-template-columns:repeat(2,1fr)}}

/* =================================================================== Comic (fixed paper colours in both themes) */
.comic-page{background:#fffdf6;border:3px solid #111;border-radius:6px;padding:14px;box-shadow:8px 8px 0 #111;color:#111}
.comic-title{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between;margin:0 4px 12px}
.comic-title h3{font-family:var(--sfx);font-weight:400;font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:.04em;margin:0;line-height:1;color:#c0392b;text-shadow:3px 3px 0 #111}
.comic-title p{margin:0;font-family:var(--comic);font-weight:700;color:#333}
.panels{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.panel{border:3px solid #111;background:#fff;position:relative;overflow:hidden;color:#111}
.panel svg{display:block;width:100%;height:auto}
.panel .num{position:absolute;top:6px;right:8px;font-family:var(--sfx);font-size:1rem;color:#111;background:#ffd23f;border:2px solid #111;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.panel svg text{font-family:var(--comic);font-weight:700}
.panel svg text.sfx{font-family:var(--sfx);font-weight:400}
.quizpanel{background:#ffd23f;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;min-height:100%}
.quizpanel h4{font-family:var(--sfx);font-weight:400;font-size:1.9rem;letter-spacing:.04em;margin:0;line-height:1}
.quizpanel p{margin:0;font-family:var(--comic);font-weight:700}
.quizpanel button{font-family:var(--comic);font-weight:700;text-align:left;background:#fff;border:2.5px solid #111;border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:3px 3px 0 #111;color:#111;min-height:44px}
.quizpanel button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #111}
.quizpanel button.right{background:#7bd389}
.quizpanel button.wrong{background:#ff9b8a}
.quizpanel .fb{min-height:3em;background:#fff;border:2px dashed #111;border-radius:10px;padding:8px 10px;font-size:.95rem;font-family:var(--comic);font-weight:700}
.comic-nav{display:none;gap:10px;justify-content:center;align-items:center;margin-top:12px;font-family:var(--comic);font-weight:700;color:#111}
.reader .panels{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.reader .panel{display:none}
.reader .panel.current{display:block}
.reader .comic-nav{display:flex}
.comic-nav button{font-family:var(--sfx);font-size:1.2rem;letter-spacing:.05em;background:#ffd23f;border:2.5px solid #111;border-radius:10px;padding:4px 16px;cursor:pointer;box-shadow:3px 3px 0 #111;color:#111;min-height:44px}
@media (max-width:700px){.panels{grid-template-columns:1fr}}

/* =================================================================== Library home */
.home-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;padding:26px 0 22px;border-bottom:2px solid var(--ink)}
@media (max-width:800px){.home-hero{grid-template-columns:1fr}}
.home-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;margin:0;letter-spacing:-.02em;text-wrap:balance}
.home-hero h1 em{font-style:normal;color:var(--teal)}
.home-hero p{color:var(--muted);font-size:1.08rem;max-width:58ch;margin:12px 0 0}
.toolstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.toolstrip div{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;font-size:.8rem;font-weight:700}
.toolstrip svg{width:30px;height:30px;display:block;margin:0 auto 4px}
@media (max-width:800px){.toolstrip{grid-template-columns:repeat(5,minmax(0,1fr))}.toolstrip div{font-size:.7rem;padding:10px 4px}}
.lib-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin:26px 0 12px}
.lib-head h2{font-family:var(--display);margin:0;font-size:1.5rem}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.chap{padding:16px 18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;min-height:150px}
a.chap:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--shadow)}
.chap .no{font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--line)}
a.chap .no{color:var(--teal)}
.chap h3{margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.2}
.chap p{margin:0;color:var(--muted);font-size:.88rem}
.chap .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.chap .st{position:absolute;top:14px;right:14px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.st.live{background:var(--teal);color:#fff}
.st.soon{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.chap.soon{opacity:.62}
.chap .prog{font-size:.8rem;color:var(--ink);font-weight:700}
.chap .prog span{color:var(--coral)}

/* ---------- QA fixes ---------- */
.btn.primary kbd{background:transparent;color:var(--paper);border-color:var(--paper);opacity:.75}
.mini-ladder div>span:first-child{width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.sk-note{align-items:start}
.deck{width:100%}
.levels-key{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px}
.levels-key li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font-size:.88rem;color:var(--muted)}
.levels-key b{color:var(--ink)}
@media (max-width:760px){.fc-layout .decks{order:2}.fc-layout .fc-stage{order:1}}
@media (max-width:520px){nav.tabs{grid-template-columns:repeat(5,minmax(116px,1fr))}nav.tabs a span{font-size:.95rem;white-space:nowrap}nav.tabs a{padding:10px 12px}}