:root{
  --bg:#eaecf1; --surface:#ffffff; --surface-2:#e1e3ea; --surface-hover:#d6d9e2;
  --border:#c5c8d2; --border-strong:#acb0bc;
  --ink:#23293a; --ink-muted:#5a606f; --ink-dim:#5d6372;
  --accent:#33529e; --accent-ink:#233a70; --accent-soft:#e6ebf7;
  --amber:#b0530f; --amber-ink:#7c3a0a; --amber-soft:#faeee0;
  --success:#1c7a44; --success-soft:#e6f4ea; --success-border:#b6ddc4;
  --danger:#b23a3a; --danger-soft:#fbeaea; --danger-border:#e3b8b8;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(20,26,23,.05), 0 1px 1px rgba(20,26,23,.03);
  --shadow-md:0 8px 24px rgba(20,26,23,.07);
  --shadow-lg:0 22px 54px rgba(15,20,18,.16), 0 6px 16px rgba(15,20,18,.08);
  --diagram-bg:#ffffff;
}
[data-theme="dark"]{
  --bg:#141b30; --surface:#1b243d; --surface-2:#1a2238; --surface-hover:#202a47;
  --border:#2f3953; --border-strong:#3d4867;
  --ink:#eef0f5; --ink-muted:#b7bcc9; --ink-dim:#9399a8;
  --accent:#8aa2f2; --accent-ink:#b7c5f9; --accent-soft:rgba(138,162,242,.14);
  --amber:#e8863a; --amber-ink:#f4a662; --amber-soft:rgba(232,134,58,.14);
  --success:#34d399; --success-soft:rgba(52,211,153,.14); --success-border:rgba(52,211,153,.35);
  --danger:#f16565; --danger-soft:rgba(241,101,101,.14); --danger-border:rgba(241,101,101,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 22px 54px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35);
  --diagram-bg:#1b3d33;
}
body{transition:background .2s ease,color .2s ease}
#theme-toggle{background:none;border:1px solid rgba(255,255,255,.32);color:rgba(244,242,234,.9);border-radius:var(--radius-sm);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
#theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.5)}
#theme-toggle svg{width:17px;height:17px}
#theme-toggle .icon-sun{display:none}
[data-theme="dark"] #theme-toggle .icon-moon{display:none}
[data-theme="dark"] #theme-toggle .icon-sun{display:block}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:8px;top:-48px;z-index:1000;padding:10px 16px;background:var(--surface);color:var(--ink);
  border:1px solid var(--accent);border-radius:8px;font-weight:600;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tablist{display:contents}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [style*="animation:fadein"]{opacity:1!important}
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);
  margin:0;padding:0;line-height:1.6}
.page{margin:0 auto;padding:0 24px 90px;max-width:920px}
.hero{background:linear-gradient(175deg,#0f1830,#1b2a52 65%,#111c38);padding:56px 24px 46px;position:relative;overflow:hidden}
#focus-toggle{background:none;border:1px solid rgba(255,255,255,.32);color:rgba(244,242,234,.9);border-radius:var(--radius-sm);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:6px}
#focus-toggle:hover{color:#fff;border-color:rgba(255,255,255,.5)}
#focus-toggle svg{width:17px;height:17px}
#focus-toggle[aria-pressed="true"]{background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff}
#focus-exit-btn{display:none;position:fixed;top:14px;right:14px;z-index:120;padding:8px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm)}
.ss-focus-mode .hero,.ss-focus-mode .nav-spacer,.ss-focus-mode .filter-row-wrap,.ss-focus-mode .ss-sticky-top{display:none!important}
.ss-focus-mode #focus-exit-btn{display:block}
.hero-inner{margin:0 auto;position:relative;z-index:1}
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.09;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='%23e8c874' stroke='none'><path d='M30 8 L34 20 L47 20 L37 28 L41 40 L30 32 L19 40 L23 28 L13 20 L26 20 Z'/><path d='M130 90 L133 99 L143 99 L135 105 L138 114 L130 108 L122 114 L125 105 L117 99 L127 99 Z'/><path d='M70 140 L73 149 L83 149 L75 155 L78 164 L70 158 L62 164 L65 155 L57 149 L67 149 Z'/></g><g stroke='%238aa2f2' stroke-width='1.2' opacity='0.6'><line x1='0' y1='60' x2='180' y2='60'/><line x1='0' y1='125' x2='180' y2='125'/></g></svg>");background-size:180px 180px;background-repeat:repeat}
.hero .kicker{color:#c7d3fa;display:flex;align-items:center;gap:8px;font-size:20px}
.kicker-logo{width:20px;height:20px;flex-shrink:0;border-radius:4px}
.hero h1{font-family:'Space Grotesk',-apple-system,sans-serif;font-size:clamp(40px,4.6vw,58px);font-weight:800;letter-spacing:-.01em;line-height:1.15;color:#f4f2ea;margin-bottom:14px}
.hero h1 .grad{background:linear-gradient(110deg,#8aa2f2,#d6dffb 55%,#e8c874);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .edition{color:rgba(244,242,234,.78)}
.hero .subtitle{color:rgba(244,242,234,.82);margin-bottom:28px}
.hero .nav{border-bottom:none;padding-bottom:0;margin-bottom:0}
.hero .tab-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:rgba(244,242,234,.9);box-shadow:none}
.hero .tab-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);color:#fff}
.hero .tab-btn.active{background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff}
.breadcrumb{margin-bottom:14px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;font-family:'Inter',sans-serif;font-size:14px}
.breadcrumb li{color:rgba(244,242,234,.78);display:flex;align-items:center;gap:6px}
.breadcrumb li:not(:last-child)::after{content:'›';margin-left:6px;color:rgba(244,242,234,.55)}
.breadcrumb a{color:rgba(244,242,234,.85);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:rgba(244,242,234,.95);font-weight:600}
.nav-spacer{height:0}
body.nav-pinned .nav-spacer{display:block}
.nav-slot .nav.nav-pinned{position:fixed;top:0;left:0;right:0;z-index:100;background:#111c38;padding:12px 24px;
  border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 8px 20px rgba(0,0,0,.35);margin:0}
.page>.spc-card{margin-top:-26px;position:relative;z-index:2;box-shadow:var(--shadow-lg)}
h1,h2,h3,.tab-btn,.unit-title,.q-text,.ex-qtext,.ex-header h2,.term,.qr-h,.btn,.chip,.ex-part-hd h3,.result .big{
  font-family:'Space Grotesk',-apple-system,sans-serif}
.kicker{font-size:18px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
h1{font-size:48px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin-bottom:6px;color:var(--ink)}
.edition{font-family:'Space Grotesk';font-size:19.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim);vertical-align:middle;margin-left:2px}
.subtitle{font-size:22.5px;color:var(--ink-muted);margin-bottom:30px;line-height:1.65}
.nav{display:flex;gap:9px;margin-bottom:28px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:16px}
.tab-btn{padding:9px 18px;border:1px solid var(--border);background:var(--surface);border-radius:999px;cursor:pointer;
  font-size:21px;font-weight:600;color:var(--ink-muted);transition:all .15s ease;box-shadow:var(--shadow-sm)}
.tab-btn:hover{color:var(--ink);border-color:var(--border-strong);background:var(--surface-hover);transform:scale(1.02)}
.tab-btn:active{transform:scale(.98)}
.tab-btn.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.view{display:none}.view.active{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* ---- sticky search + filter header ---- */
.ss-sticky-top{position:sticky;top:var(--ss-nav-h,0px);z-index:40;background:var(--bg);padding-top:2px;margin:0 -24px;padding-left:24px;padding-right:24px;transition:top .15s ease}
@media(max-width:600px){.ss-sticky-top{margin:0 -16px;padding-left:16px;padding-right:16px}}
.search-wrap{position:relative;margin-bottom:10px}
.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-dim);pointer-events:none}
#search-box{width:100%;height:48px;padding:0 84px 0 44px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:16.5px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}
#search-box::placeholder{color:var(--ink-dim)}
#search-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-kbd{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;font-size:14px;
  color:var(--ink-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;pointer-events:none}
#search-box:focus~.search-kbd,#search-box:not(:placeholder-shown)~.search-kbd{display:none}
.search-clear{display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  border:none;background:var(--surface-2);color:var(--ink-muted);cursor:pointer;align-items:center;justify-content:center}
.search-clear:hover{background:var(--surface-hover);color:var(--ink)}
#search-box:not(:placeholder-shown)~.search-clear{display:flex}
#search-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:50;max-height:360px;overflow-y:auto;padding:8px}
#search-results.show{display:block}
#search-results>div[onclick]{transition:background .12s ease}
#search-results>div[onclick]:hover{background:var(--surface-2)!important;border-color:var(--border-strong)!important}
.filter-row-wrap{position:relative}
.filter-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.filter-row::-webkit-scrollbar{height:4px}.filter-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.chip{white-space:nowrap;flex-shrink:0;padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;cursor:pointer;color:var(--ink-muted);transition:all .15s ease}
.chip:hover{border-color:var(--border-strong);color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.chip:active{transform:scale(.98)}
.chip.on{background:var(--accent-solid,var(--accent));color:#fff;border-color:var(--accent)}
.ss-overall-progress{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.ss-overall-progress-track{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.ss-overall-progress-fill{height:100%;width:0%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.ss-overall-progress-label{font-size:14px;color:var(--ink-dim);white-space:nowrap;flex-shrink:0}
.unit{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:var(--surface);
  transition:border-color .15s ease,box-shadow .15s ease}
.unit:hover{border-color:var(--border-strong)}
.unit.open{box-shadow:var(--shadow-sm)}
.unit-hd{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;cursor:pointer;user-select:none;transition:background .15s,transform .15s ease}
.unit-hd:hover{background:var(--surface-2);transform:scale(1.01)}
.unit-hd:active{transform:scale(.99)}
.unit.open .unit-hd{border-bottom:1px solid var(--border)}
.unit-title{font-size:22.5px;font-weight:600;color:var(--ink)}
.unit-meta{font-family:'Inter';font-size:18px;color:var(--ink-dim);margin-left:8px;font-weight:400}
/* Per-unit weighted progress badge, shown in the unit accordion header once
   the student has any tracked activity for that unit (see unitWeightedPct()
   in logic.js) — omitted entirely at 0% so untouched units stay clean. */
.unit-progress{display:inline-flex;align-items:center;gap:6px;margin-left:10px;flex-shrink:0}
.unit-progress-track{width:52px;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.unit-progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.unit-progress-label{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink-dim)}
.unit-tts-btn{background:none;border:1px solid var(--border);border-radius:8px;width:30px;height:30px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted);cursor:pointer;margin-left:8px}
.unit-tts-btn:hover{border-color:var(--accent);color:var(--accent)}
.unit-tts-btn.on{background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff}
.chevron{font-size:24px;color:var(--ink-dim);transition:transform .2s ease;display:inline-block}
.unit.open .chevron{transform:rotate(180deg);color:var(--accent)}
.unit-body{display:none;padding:14px 20px 22px}
.unit.open .unit-body{display:block;animation:fadein .25s ease}
.concept{margin-top:16px;padding:18px 20px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.concept:first-child{margin-top:2px}
.c-label{font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.c-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.c-text{font-size:21.8px;color:var(--ink-muted);line-height:1.7}
.c-list{margin:6px 0 0;padding-left:20px}
.c-list li{font-size:21.8px;color:var(--ink-muted);line-height:1.7;margin-bottom:4px}
.c-list li:last-child{margin-bottom:0}
.formula{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:10px 14px;margin-top:9px;font-family:'IBM Plex Mono',monospace;font-size:19.5px;font-weight:500;color:var(--ink)}
.trap{background:var(--amber-soft);border-left:3px solid var(--amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 14px;margin-top:10px;font-size:20.2px;color:var(--amber-ink);line-height:1.6}
.trap::before{content:"Watch out";display:block;font-family:'Space Grotesk';font-size:15.8px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.diagram{background:var(--diagram-bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-top:16px}
.diagram svg{display:block;max-width:420px;margin:0 auto}
.dcap{font-family:'Inter';font-size:18px;color:#5c6a63;line-height:1.5;margin-top:10px;text-align:center}
.dlabel{font-size:16.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#8b968e;margin-bottom:8px}
.fc-bar,.q-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.diag-btn{display:block;width:100%;box-sizing:border-box;text-align:left;padding:14px 18px;margin-bottom:16px;
  border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.diag-btn:hover{background:var(--accent-solid,var(--accent));color:#fff}
.diag-btn:disabled{opacity:.6;cursor:default}
.diag-skip-btn{display:block;width:100%;box-sizing:border-box;text-align:center;background:none;border:none;
  padding:0 0 18px;margin-top:-6px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.diag-skip-btn:hover{color:var(--ink)}
#view-quiz.diag-mode #qbox{border:2px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);padding:16px}
.fc-bar select,.q-bar select{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  font-family:'Inter';font-size:21px;color:var(--ink);cursor:pointer;max-width:100%;box-sizing:border-box}
.fc-count,.q-prog{font-size:20.2px;color:var(--ink-muted)}
.q-sc{font-size:20.2px;font-weight:600;color:var(--success);margin-left:auto}
.fc-count{margin-left:auto}
.scene{perspective:1200px;margin-bottom:14px;cursor:pointer}
/* Both faces share one grid cell, so the card is as tall as the longer of the two (never less than 220px) instead of a fixed
   height that long definitions overflowed onto the buttons below. */
.inner{display:grid;min-height:220px;transition:transform .5s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d;position:relative}
.scene.flipped .inner{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center}
.face.front{background:var(--surface)}
.face.back{background:var(--accent-soft);border-color:var(--accent);transform:rotateY(180deg)}
.face .lbl{font-family:'Space Grotesk';font-size:16.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin-bottom:14px}
.face.back .lbl{color:var(--accent-ink)}
.face .term{font-size:clamp(22px,6vw,31.5px);overflow-wrap:anywhere;font-weight:600;color:var(--ink);line-height:1.4}
.face .def{font-size:clamp(17px,4.6vw,21px);overflow-wrap:anywhere;color:var(--ink-muted);line-height:1.65}
.hint{text-align:center;font-size:18.8px;color:var(--ink-dim);margin-bottom:16px}
.fc-nav{display:flex;gap:10px;justify-content:center}
.fc-type-row{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow-sm);padding:28px;margin-bottom:14px;min-height:220px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.fc-type-def{font-size:21px;color:var(--ink-muted);line-height:1.65}
.fc-type-row input{width:100%;max-width:340px;padding:11px 16px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font-size:18px;font-family:inherit;text-align:center}
.fc-type-row input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fc-type-row input:disabled{opacity:.7}
.fc-type-feedback{font-size:15.5px;font-weight:700;min-height:1.3em}
.fc-type-feedback.correct{color:var(--success)}
.fc-type-feedback.wrong{color:var(--danger)}
.ss-concept-btn{position:absolute;transform:translate(-50%,0);z-index:60;background:var(--ink);color:var(--surface);
  border:none;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22);white-space:nowrap}
.ss-concept-btn:hover{opacity:.92}
.btn{padding:10px 22px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);
  cursor:pointer;font-size:21px;font-weight:600;transition:all .15s ease;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--surface-hover);border-color:var(--border-strong);transform:scale(1.02)}
.btn:active{transform:scale(.98)}
.guess-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;margin-bottom:14px;border:1px dashed var(--border-strong);
  border-radius:99px;background:transparent;color:var(--ink-dim);font-size:16px;font-family:inherit;cursor:pointer;transition:all .18s ease}
.guess-btn:hover{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.guess-btn.on{background:var(--amber-soft);border-style:solid;border-color:var(--amber);color:var(--amber-ink)}
.guess-flag{display:inline-block;margin-left:8px;font-size:14px;font-weight:700;color:var(--amber-ink);background:var(--amber-soft);
  border:1px solid var(--amber);border-radius:99px;padding:2px 10px;vertical-align:middle}
.q-block{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--surface);box-shadow:var(--shadow-sm);margin-bottom:22px;transition:transform .15s ease,box-shadow .15s ease}
.q-block:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.q-block-hd{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px}
.q-text{font-size:24.8px;font-weight:600;color:var(--ink);line-height:1.55;flex:1}
.q-diff{flex:none;display:inline-block;padding:3px 11px;border-radius:999px;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;align-self:flex-start;margin-top:2px}
.q-diff-easy{background:var(--success-soft);color:var(--success);border-color:var(--success-border)}
.q-diff-medium{background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber)}
.q-diff-hard{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.q-topic{font-size:14.5px;color:var(--ink-dim);margin:-14px 0 14px;font-style:italic}
.mistake-log-btn{position:relative}
.mistake-log-count{display:inline-block;margin-left:6px;background:var(--danger);color:#fff;border-radius:999px;
  font-size:12px;font-weight:700;padding:1px 7px}
.mistake-log-empty{padding:24px;text-align:center;color:var(--ink-muted);font-size:18px}
.q-bookmark{flex:none;background:none;border:none;cursor:pointer;color:var(--ink-dim);padding:2px;border-radius:6px;transition:color .15s ease,transform .15s ease}
.q-bookmark:hover{color:var(--amber);transform:scale(1.08)}
.q-bookmark.on{color:var(--amber)}
.q-bookmark svg{display:block}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opt{padding:13px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-family:'Inter';
  font-size:21.8px;color:var(--ink-muted);background:var(--surface);transition:all .15s ease;text-align:left;
  display:flex;align-items:center;gap:9px}
.q-opt:hover:not(:disabled){background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
.q-opt:active:not(:disabled){transform:scale(.98)}
.q-opt:disabled{cursor:default}
.q-opt.q-opt-eliminated{opacity:.45;text-decoration:line-through}
.q-opt .q-opt-icon{flex:none;display:none}
.q-opt.correct{background:var(--success-soft);color:var(--success);border-color:var(--success-border);font-weight:600}
.q-opt.correct .q-opt-icon.icon-correct{display:inline-flex}
.q-opt.wrong{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.q-opt.wrong .q-opt-icon.icon-wrong{display:inline-flex}
.q-hint-btn{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:6px 14px;border:1px dashed var(--border-strong);
  border-radius:99px;background:transparent;color:var(--ink-dim);font-size:14px;font-family:inherit;cursor:pointer;transition:all .15s ease}
.q-hint-btn:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.q-hint-box{display:none;margin:-6px 0 14px;padding:10px 14px;background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;color:var(--accent-ink);line-height:1.5}
.q-hint-box.show{display:block}
.q-exp{margin-top:16px;padding:13px 16px;background:var(--surface-2);border-radius:var(--radius-sm);font-family:'Inter';
  font-size:21px;color:var(--ink-muted);line-height:1.65;display:none}
.q-exp.show{display:block}
.q-explain-wrong-btn{margin-top:10px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--ink-muted);cursor:pointer;font-family:'Inter';font-size:15px;font-weight:600}
.q-explain-wrong-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.q-next{margin-top:16px;padding:11px 24px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--surface);
  cursor:pointer;font-family:'Space Grotesk';font-size:21px;font-weight:600;display:none}
.q-next.show{display:inline-block}.q-next:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.result{text-align:center;padding:56px 20px}
.result .big{font-size:78px;font-weight:700;color:var(--ink)}
.result .sub{font-family:'Inter';font-size:22.5px;color:var(--ink-muted);margin:10px 0 26px}
.q-session-stats{display:flex;justify-content:center;gap:18px;margin-bottom:22px;font-family:'Inter';font-size:16px;font-weight:700;color:var(--accent-ink)}
.qr-section{margin-bottom:28px;max-width:100%;overflow-x:auto}
.qr-h{font-size:24px;font-weight:600;margin-bottom:13px;color:var(--ink);display:flex;align-items:center;gap:8px}
.qr-h::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);display:inline-block;flex:none}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.qr-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.qr-k{font-family:'Space Grotesk';font-size:16.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:5px}
.qr-v{font-size:19.5px;color:var(--ink);font-family:'IBM Plex Mono',monospace;font-weight:500;line-height:1.5}
.qr-table{width:100%;min-width:max-content;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;font-size:19.5px}
.qr-table th{background:var(--surface-2);text-align:left;padding:10px 12px;font-family:'Space Grotesk';font-weight:600;
  font-size:17.2px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);border-bottom:1px solid var(--border)}
.qr-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--ink-muted)}
.practice-archive{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.practice-archive>summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:18px;color:var(--accent);list-style:none}
.practice-archive>summary::-webkit-details-marker{display:none}
.practice-archive>summary::before{content:"▸ ";display:inline-block}
.practice-archive[open]>summary::before{content:"▾ "}
.fc-archive-body,.qb-archive-body{padding:0 18px 18px}
.fc-archive-body h4{font-size:16px;color:var(--ink);margin:16px 0 8px;border-top:1px solid var(--border);padding-top:14px}
.fc-archive-body h4:first-child{border-top:none;margin-top:0}
.fc-archive-list{margin:0}
.fc-archive-list dt{font-weight:700;color:var(--ink);margin-top:8px}
.fc-archive-list dd{margin:2px 0 0;color:var(--ink-muted);font-size:15px}
.qb-unit{border:1px solid var(--border);border-radius:var(--radius-sm);margin:10px 0;background:var(--surface-2)}
.qb-unit>summary{cursor:pointer;padding:10px 14px;font-weight:600;color:var(--ink);list-style:none}
.qb-unit>summary::-webkit-details-marker{display:none}
.qb-list{margin:0;padding:0 14px 12px 30px}
.qb-list>li{margin-bottom:14px}
.qb-q{font-weight:600;color:var(--ink);margin:0 0 6px}
.qb-opts{margin:0 0 6px;padding-left:18px;color:var(--ink-muted);font-size:15px}
.qb-opts .qb-correct{color:var(--success);font-weight:700}
.qb-exp{margin:0;font-size:14px;color:var(--ink-dim)}
.qr-table tr:last-child td{border-bottom:none}
.qr-table tr:hover td{background:var(--surface-2)}
.qr-ol,.qr-ul{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 14px 14px 34px;margin:0}
.qr-ol li,.qr-ul li{font-size:20.2px;color:var(--ink-muted);line-height:1.65;margin-bottom:8px}
.qr-ol li:last-child,.qr-ul li:last-child{margin-bottom:0}
.spc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-md)}
.spc-summary{display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--ink);padding:0;text-align:left}
.spc-summary .spc-chevron{font-size:18px;color:var(--ink-dim);transition:transform .2s ease;flex-shrink:0}
#spc-card.collapsed{padding:16px 20px;cursor:pointer}
#spc-card.collapsed .spc-summary{display:flex}
#spc-card.collapsed .spc-body{display:none}
#spc-card.collapsed .spc-chevron{transform:rotate(-90deg)}
#spc-card:not(.collapsed) .spc-collapse-btn{display:inline-flex}
.spc-collapse-btn{display:none;align-items:center;gap:4px;background:none;border:1px solid var(--border);border-radius:999px;
  color:var(--ink-muted);font-size:14px;font-weight:600;padding:5px 12px;cursor:pointer;margin-left:auto}
.spc-collapse-btn:hover{color:var(--ink);border-color:var(--border-strong)}
.spc-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.spc-head-text{flex:1;min-width:0}
.spc-card h2{font-size:30px;font-weight:600;color:var(--ink);margin-bottom:6px}
.spc-card>.spc-body>p{font-size:21px;color:var(--ink-muted);line-height:1.55;margin-bottom:24px}
.spc-row{margin-bottom:20px;padding:10px 0}
.spc-row label{display:flex;justify-content:space-between;align-items:center;font-size:21px;font-weight:600;color:var(--ink);margin-bottom:9px}
.spc-row label span{color:var(--accent-ink);font-weight:700}
.spc-val-input{width:64px;font-family:inherit;font-size:18px;font-weight:700;color:var(--accent-ink);background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:2px 6px;text-align:right}
input[type=range].spc-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:var(--surface-2);outline:none;
  background-image:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,0%), var(--surface-2) var(--fill,0%), var(--surface-2) 100%)}
input[type=range].spc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:4px solid var(--surface);box-shadow:0 2px 8px rgba(15,122,112,.4),0 0 0 3px var(--accent-soft)}
input[type=range].spc-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--accent);cursor:pointer;border:4px solid var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=range].spc-slider::-moz-range-progress{background:var(--accent);height:8px;border-radius:99px}
.spc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:24px 0 16px}
.spc-stat{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;box-shadow:var(--shadow-sm)}
.spc-stat-val{font-size:37.5px;font-weight:700;color:var(--accent-ink);line-height:1}
.spc-stat-label{font-family:'Inter';font-size:17.2px;color:var(--ink-dim);margin-top:6px;line-height:1.3;cursor:help}
.spc-tier{border-radius:var(--radius-sm);padding:13px 16px;font-size:21px;text-align:center;transition:background .2s,color .2s}
.spc-tier b{display:block;font-size:22.5px;margin-bottom:2px}
.spc-tier.good{background:var(--success-soft);color:var(--success)}
.spc-tier.moderate{background:var(--accent-soft);color:var(--accent-ink)}
.spc-tier.behind{background:var(--amber-soft);color:var(--amber-ink)}
.spc-reset-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px 16px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--ink-muted);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}
.spc-reset-btn:hover{color:var(--ink);border-color:var(--border-strong);background:var(--surface-hover)}
@media (prefers-reduced-motion: no-preference){
  .spc-body{transition:opacity .2s ease}
}
.unit:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.q-block{box-shadow:var(--shadow-md)}
.diagram{box-shadow:var(--shadow-sm)}
.face{box-shadow:var(--shadow-md)}
.mobile-only-select{display:none}
@media(max-width:600px){
  .page{padding:0 16px 70px}
  .hero{padding:40px 16px 32px}
  .q-block{padding:18px}
  .spc-stats{grid-template-columns:1fr}
  /* ---- touch targets: >=44x44px effective hit area ---- */
  .chip{padding:12px 16px;min-height:44px;display:inline-flex;align-items:center}
  .q-opt{min-height:44px;padding:13px 16px}
  #theme-toggle{width:44px;height:44px}
  .tab-btn{min-height:44px;padding:11px 18px;display:inline-flex;align-items:center}
  /* slider thumbs stay visually small but gain a transparent padded hit-area */
  input[type=range].spc-slider{height:44px;padding:18px 0;background-clip:content-box;box-sizing:border-box}
  input[type=range].spc-slider::-webkit-slider-thumb{width:26px;height:26px}
  input[type=range].spc-slider::-moz-range-thumb{width:26px;height:26px}
  .back-to-top{width:48px;height:48px}
  /* ---- mobile unit filter: dropdown replaces the pill row ---- */
  .filter-row-wrap .filter-row{display:none}
  .mobile-only-select{display:block;width:100%;min-height:44px;padding:10px 14px;margin-bottom:6px;
    border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);
    font-family:'Inter',sans-serif;font-size:16px;cursor:pointer}
}
#sg-timer{margin-left:auto;display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;
  color:rgba(244,242,234,.85);font-size:21px;font-variant-numeric:tabular-nums}
.sgt-label{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(244,242,234,.7)}
.sgt-b{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:rgba(244,242,234,.9);
  border-radius:6px;padding:5px 9px;cursor:pointer;font-size:18px;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center}
.sgt-b:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.sgt-b svg{width:15px;height:15px;display:block}
.mem-intro{font-size:21px;color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:20px;line-height:1.6}
.mem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:11px}
.mem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px;transition:all .15s ease}
.mem-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.mem-t{font-size:21.8px;font-weight:700;color:var(--accent-ink);margin-bottom:6px;line-height:1.3}
.mem-d{font-family:'Inter';font-size:20.2px;color:var(--ink-muted);line-height:1.6}
.mem-d b{color:var(--ink)}

/* The AI Study Helper is opened from the toolkit menu (no separate FAB of
   its own — see .toolkit-fab/.toolkit-menu above). */
#cbot-panel{position:fixed;top:100px;left:64px;width:min(360px,calc(100vw - 32px));
  height:min(520px,calc(100dvh - 120px));background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;
  display:none;flex-direction:column;overflow:hidden}
#cbot-panel.open{display:flex}
.cbot-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.cbot-hd b{font-family:'Space Grotesk';font-size:22.5px;color:var(--ink);flex:1}
.cbot-hd button{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:24px;padding:4px 6px;border-radius:6px}
.cbot-hd button:hover{color:var(--ink);background:var(--surface-hover)}
.cbot-disclaimer{font-size:14px;color:var(--ink-muted);padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
  border-radius:6px;color:var(--ink);padding:7px 9px;font-size:20.2px;margin-bottom:8px;font-family:inherit}
  background:var(--surface);color:var(--ink-muted);cursor:pointer;font-size:18.8px}
#cbot-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cbot-msg{max-width:86%;padding:9px 12px;border-radius:12px;font-size:21px;line-height:1.5;white-space:pre-wrap;font-family:'Inter'}
.cbot-msg.bot{background:var(--surface-2);color:var(--ink);align-self:flex-start;border-bottom-left-radius:3px}
.cbot-msg.user{background:var(--accent-soft);color:var(--ink);align-self:flex-end;border-bottom-right-radius:3px}
.cbot-msg .cbot-src{display:block;font-size:16.5px;color:var(--ink-dim);margin-top:6px}
.cbot-typing{display:flex;align-items:center;gap:4px;padding:12px 14px}
.cbot-typing-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-dim);opacity:.5;animation:cbotTypingBounce 1.1s ease-in-out infinite}
.cbot-typing-dot:nth-child(2){animation-delay:.15s}
.cbot-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes cbotTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion: reduce){.cbot-typing-dot{animation:none;opacity:.7}}
.cbot-jump{display:inline-block;margin-top:7px;padding:4px 10px;border-radius:99px;border:1px solid var(--accent);
  color:var(--accent-ink);background:none;cursor:pointer;font-size:18px;font-family:'Inter'}
.cbot-jump:hover{background:var(--accent-soft)}
#cbot-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface-2)}
#cbot-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:99px;color:var(--ink);
  padding:9px 14px;font-size:21px;font-family:'Inter'}
#cbot-input:focus{outline:none;border-color:var(--accent)}
#cbot-form button{width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);
  color:#fff;cursor:pointer;font-size:24px;flex-shrink:0}
#cbot-form button:disabled{opacity:.4;cursor:default}
.back-link{display:inline-flex;align-items:center;gap:6px;font-family:'Inter';font-size:15px;font-weight:600;
  color:rgba(244,242,234,.8);text-decoration:none;margin-bottom:18px;transition:color .15s ease}
.back-link:hover{color:#fff}

.auth-gate{max-width:460px;margin:40px auto;text-align:center;padding:36px 28px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.auth-gate-icon{font-size:32px;margin-bottom:10px}
.auth-gate h3{font-family:'Space Grotesk';font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px}
.auth-gate p{font-family:'Inter';font-size:14px;color:var(--ink-muted);line-height:1.6;margin-bottom:22px}
.ss-oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--ink);
  font-family:'Inter';font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;margin-bottom:9px;
  box-sizing:border-box;transition:all .15s ease}
.ss-oauth-btn:hover{border-color:var(--accent);background:var(--surface-hover)}
.auth-gate .ss-oauth-btn{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.auth-gate .ss-oauth-btn:hover{background:var(--accent-solid,var(--accent));color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ss-status{font-family:'Inter';font-size:14px;color:var(--ink-dim);margin-top:10px;min-height:16px}
.ss-account{display:flex;align-items:center;gap:10px;font-family:'Inter';font-size:14px;color:rgba(244,242,234,.88)}
.ss-account button{background:none;border:1px solid rgba(255,255,255,.32);border-radius:var(--radius-sm);
  color:rgba(244,242,234,.85);padding:5px 11px;font-size:14px;cursor:pointer;font-family:'Inter'}
.ss-account button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483647;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.q-kbd-hint{margin-left:auto;font-size:14px;color:var(--ink-dim)}
@media(max-width:640px){.q-kbd-hint{display:none}}
.ex2-intro{font-size:15px;color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px}
.ex2-unit{margin-bottom:26px}
.ex2-h{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em}
.ex2-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;transition:all .2s ease}
.ex2-card.done{border-color:var(--success-border);box-shadow:0 0 0 1px var(--success-border) inset}
.ex2-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ex2-card.done .ex2-title::after{content:"✓ mastered";font-size:14px;font-weight:700;color:var(--success);background:var(--success-soft);border:1px solid var(--success-border);padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.ex2-prompt{font-size:15.5px;color:var(--ink-muted);line-height:1.6;margin-bottom:12px}
.ex2-steps{display:flex;flex-direction:column;gap:8px}
.ex2-step{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-muted);background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px}
.ex2-step span{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ex2-answer{font-size:15px;font-weight:700;color:var(--success);background:var(--success-soft);border:1px solid var(--success-border);border-radius:var(--radius-sm);padding:10px 12px;margin-top:4px}
.ex2-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ex2-actions .btn{font-size:14px;padding:7px 14px}
.ex2-reveal{border-color:var(--accent)!important;color:var(--accent)!important}
.ex2-done{margin-left:auto}

/* ---- back-to-top ---- */
.back-to-top{position:fixed;bottom:22px;left:22px;width:52px;height:52px;border-radius:50%;
  background:var(--surface);color:var(--ink-muted);border:1px solid var(--border-strong);cursor:pointer;
  box-shadow:var(--shadow-md);z-index:200;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,color .15s ease,border-color .15s ease}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{color:var(--ink);border-color:var(--accent)}
.back-to-top svg{width:20px;height:20px;display:block}

/* ---- study toolkit: one floating FAB (bottom-right, clear of back-to-top
   at bottom-left) that pops open a small speed-dial menu of the individual
   tools below, instead of each tool having its own separate floating
   button. ---- */
.toolkit-fab{position:fixed;bottom:90px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--accent-solid,var(--accent));color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 24px -6px rgba(15,122,112,.4);z-index:220;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease}
.toolkit-fab:hover{transform:scale(1.06)}
.toolkit-fab[aria-expanded="true"]{transform:rotate(15deg)}
.toolkit-menu{position:fixed;bottom:156px;right:22px;z-index:219;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.toolkit-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease}
.toolkit-item{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;
  background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);cursor:pointer;
  box-shadow:var(--shadow-md);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;white-space:nowrap}
.toolkit-item:hover{border-color:var(--accent);color:var(--accent-ink)}
.toolkit-item svg{flex-shrink:0}
@media(max-width:600px){
  .toolkit-fab{right:16px;bottom:82px}
  .toolkit-menu{right:16px;bottom:148px}
}

.qref-drawer{position:fixed;top:70px;left:24px;height:min(560px,calc(100dvh - 120px));width:min(420px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:210;display:none;flex-direction:column}
.qref-drawer.open{display:flex}
.qref-drawer-hd{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0}
.qref-drawer-hd b{font-family:'Space Grotesk';font-size:20px;color:var(--ink);flex:1}
.qref-drawer-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:18px;padding:6px 8px;border-radius:6px}
.qref-drawer-close:hover{color:var(--ink);background:var(--surface-hover)}
.qref-drawer-body{flex:1;overflow-y:auto;padding:16px}
.qref-drawer-body .qr-section:not(:last-child){margin-bottom:20px}
@media(max-width:600px){
  .qref-drawer{width:calc(100vw - 16px);left:8px}
}

/* ---- optional Desmos graphing calculator (see DESMOS_API_KEY in logic.js).
   Markup is only ever created by JS when a key is configured, so this CSS
   has no visible effect until then. Opened from the toolkit menu, so it
   anchors under the single toolkit FAB (bottom:22/right:22). ---- */
.desmos-panel{position:fixed;top:130px;left:104px;width:min(380px,calc(100vw - 32px));
  height:min(420px,calc(100dvh - 160px));background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:225;display:none;flex-direction:column;overflow:hidden}
.desmos-panel.open{display:flex}
.desmos-panel-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.desmos-panel-hd b{font-family:'Space Grotesk';font-size:18px;color:var(--ink);flex:1}
.desmos-panel-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:18px;padding:4px 6px;border-radius:6px}
.desmos-panel-close:hover{color:var(--ink);background:var(--surface-hover)}
.desmos-calc{flex:1;width:100%;height:100%}
@media(max-width:600px){
  .desmos-panel{left:12px;top:100px}
}
/* On narrow screens the toolkit windows' staggered desktop cascade
   (see ssMakeDraggable() defaults above) would push some of them
   partly off-screen -- start them all flush against the left edge
   instead. They're still fully draggable from there. */
@media(max-width:480px){
  #cbot-panel,.reference-panel{left:8px}
  .reference-panel{top:100px}
}

/* ---- keyboard-shortcuts reference modal, opened with "?" (see
   shortcutsModalToggle() in logic.js). Follows the same fixed-panel +
   Escape-to-close + open-class pattern as .desmos-panel/.qref-drawer, but
   centered like a dialog rather than docked to an edge. ---- */
.shortcuts-modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:20px}
.shortcuts-modal.open{display:flex}
.shortcuts-modal-card{width:min(420px,100%);max-height:min(500px,calc(100dvh - 40px));overflow-y:auto;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.shortcuts-modal-hd{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.shortcuts-modal-hd b{font-family:'Space Grotesk';font-size:19px;color:var(--ink);flex:1}
.shortcuts-modal-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px}
.shortcuts-modal-close:hover{color:var(--ink);background:var(--surface-hover)}
.shortcuts-modal-body{padding:6px 16px 16px}
.shortcuts-modal-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.shortcuts-modal-row:last-child{border-bottom:none}
.shortcuts-modal-row span{font-size:15px;color:var(--ink-muted)}
.shortcuts-modal-row kbd{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:3px 8px}

/* ---- official reference sheet modal (self-contained formula reference,
   e.g. the Digital SAT's on-screen Math Reference — inline content instead
   of linking out to a PDF). Same fixed-panel + Escape-to-close pattern as
   .shortcuts-modal, just wider to fit a grid of formulas. ---- */
.reference-panel{position:fixed;top:160px;left:144px;z-index:230;display:none;flex-direction:column;
  width:min(680px,calc(100vw - 32px));max-height:min(600px,calc(100dvh - 40px));
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.reference-panel.open{display:flex}
.reference-panel-card{display:flex;flex-direction:column;min-height:0;flex:1}
.reference-panel-hd{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
  display:flex;align-items:flex-start;gap:8px;flex-shrink:0}
.reference-panel-hd-text{flex:1}
.reference-panel-hd b{font-family:'Space Grotesk';font-size:19px;color:var(--ink);display:block}
.reference-panel-hd small{font-size:14px;color:var(--ink-muted)}
.reference-panel-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px;flex-shrink:0}
.reference-panel-close:hover{color:var(--ink);background:var(--surface-hover)}
.reference-panel-body{padding:18px;overflow-y:auto;flex:1;min-height:0}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px 12px;margin-bottom:18px}
.ref-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ref-item svg{color:var(--ink);flex-shrink:0}
.ref-item .ref-eq{font-size:14px;color:var(--ink);line-height:1.5}
.ref-facts{border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.ref-facts p{margin:0;font-size:14px;color:var(--ink-muted)}
.ref-conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 18px;margin-bottom:18px;font-size:14px;color:var(--ink)}
.ref-section-label{font-family:'Space Grotesk';font-size:14px;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.reference-panel-pdf-link{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.reference-panel-pdf-link a{font-size:14px;font-weight:600;color:var(--accent)}

/* ---- printable flashcard sheet / worksheet (printFlashcardSheet(),
   printWorksheet() in logic.js build #ss-print-container on demand and
   call window.print(); this hides the rest of the page for that one job
   instead of trying to print the interactive flip-card/quiz UI as-is). ---- */
#ss-print-container{display:none}
#ss-print-container h1{font-family:'Space Grotesk';font-size:22px;margin:0 0 4px}
#ss-print-container h2{font-family:'Space Grotesk';font-size:16px;margin:22px 0 8px;border-bottom:1px solid #999;padding-bottom:4px}
.ss-print-table{width:100%;border-collapse:collapse;margin:8px 0 4px}
.ss-print-table th,.ss-print-table td{border:1px solid #999;padding:6px 10px;text-align:left;font-size:13.5px;vertical-align:top}
.ss-print-q{margin-bottom:14px;break-inside:avoid}
.ss-print-q-text{font-weight:700;margin-bottom:4px;font-size:14px}
.ss-print-opts{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding-left:14px;font-size:13.5px}
.ss-print-key{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;font-size:13px}
.ss-print-pagebreak{page-break-before:always}
@media print{
  /* Only inside an actual print/preview does the container take over the
     page -- kept out of screen styles so it never flashes visible on-screen
     during the brief window before window.print() opens (see
     ssRunPrintJob() in logic.js). */
  body.ss-printing > *:not(#ss-print-container){display:none!important}
  body.ss-printing #ss-print-container{display:block!important;padding:24px;max-width:800px;margin:0 auto;color:#000}
}

/* ---- print / export ---- */
@media print{
  :root,[data-theme="dark"]{
    --bg:#fff;--surface:#fff;--surface-2:#f2f2f2;--surface-hover:#f2f2f2;
    --border:#ccc;--border-strong:#999;--ink:#000;--ink-muted:#222;--ink-dim:#444;
    --accent:#000;--accent-ink:#000;--accent-soft:#eee;
    --amber:#000;--amber-ink:#000;--amber-soft:#eee;
    --success:#000;--success-soft:#eee;--success-border:#999;
    --danger:#000;--danger-soft:#eee;--danger-border:#999;
    --shadow-sm:none;--shadow-md:none;--shadow-lg:none;
  }
  body{background:#fff;color:#000}
  body::before,.hero::after{display:none!important}
  #theme-toggle,.search-wrap,.ss-sticky-top .filter-row-wrap,.mobile-only-select,.nav,.nav-spacer,.tablist,
  #spc-card,#cbot-panel,.back-to-top,.toolkit-fab,.toolkit-menu,.qref-drawer,.desmos-panel,.shortcuts-modal,.q-bookmark,.guess-btn,.q-hint-btn,.search-clear,
  .search-kbd,.ss-overall-progress,.unit-progress,.q-kbd-hint,.diag-btn,.diag-skip-btn,.unit-tts-btn{display:none!important}
  *{position:static!important;box-shadow:none!important}
  .unit-body{display:block!important}
  .unit .chevron{display:none!important}
  .ex-part-body{display:block!important}
  .q-exp,.q-hint-box{display:block!important}
  .q-opt{border:1px solid #999!important}
  details{display:block!important}
  details>*{display:block!important}
  a{color:#000;text-decoration:underline}
}

.site-foot{border-top:1px solid var(--border);margin-top:32px;padding:16px;text-align:center}
.site-foot a{display:inline-block;padding:10px 8px;color:var(--text-muted);font-size:13px;text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--text);text-decoration:underline}