:root{
  --bg:#E9EDF1; --surface:#FFFFFF; --surface-2:#F2F5F8; --ink:#1C232A; --ink-2:#56616B; --line:#C9D1D9;
  --bar:#454D56; --bar-ink:#EEF2F5; --tool:#F7F9FB;
  --accent:#1E5FC2; --accent-ink:#FFFFFF; --accent-soft:#E2EBFA;
  --series:#2E6FB8; --series-new:#D07A1F; --grid:#DDE3E9;
  --ok:#23794A; --ok-soft:#E1F2E7; --bad:#AC3F35; --bad-soft:#F8E3E0; --warn-soft:#FFF3D6; --focus:#E8A317;
  --hl:#FFE680; --hl-ink:#1C232A; --water:#BFDDF2; --glass:#8FA3B3; --tablet:#2B3238;
  --body:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1419; --surface:#171E25; --surface-2:#1E2731; --ink:#E4EAF0; --ink-2:#9EABB7; --line:#303C48;
    --bar:#252E37; --bar-ink:#D5DDE5; --tool:#1E2731;
    --accent:#6A9EF0; --accent-ink:#0B1422; --accent-soft:#1D2D48;
    --series:#6FA8E8; --series-new:#EDA04F; --grid:#26313C;
    --ok:#62C68D; --ok-soft:#15352A; --bad:#E8806F; --bad-soft:#3B201C; --warn-soft:#3A3116;
    --hl:#7A6515; --hl-ink:#FFF6CF; --water:#23506F; --glass:#6E8394; --tablet:#0A0E12;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1419; --surface:#171E25; --surface-2:#1E2731; --ink:#E4EAF0; --ink-2:#9EABB7; --line:#303C48;
  --bar:#252E37; --bar-ink:#D5DDE5; --tool:#1E2731;
  --accent:#6A9EF0; --accent-ink:#0B1422; --accent-soft:#1D2D48;
  --series:#6FA8E8; --series-new:#EDA04F; --grid:#26313C;
  --ok:#62C68D; --ok-soft:#15352A; --bad:#E8806F; --bad-soft:#3B201C; --warn-soft:#3A3116;
  --hl:#7A6515; --hl-ink:#FFF6CF; --water:#23506F; --glass:#6E8394; --tablet:#0A0E12;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; padding-inline:16px; padding-block:0 40px}
button{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1120px; margin:0 auto; display:flex; flex-direction:column}

/* ---------- figures (classes used inside question SVG files) ---------- */
.f-line{stroke:var(--ink); stroke-width:1.3}
.f-label{fill:var(--ink); font-family:var(--body); font-size:15px; font-weight:700}
.f-caption{fill:var(--ink-2); font-family:var(--body); font-size:12px}
.f-glass{fill:none; stroke:var(--glass); stroke-width:4}
.f-water{fill:var(--water)}
.f-dark{fill:var(--tablet)}
.f-screen{fill:#DDEBF7}
.f-screen-text{fill:#10324F; font-family:var(--body); font-size:15px; font-weight:700}
.f-stroke-soft{fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round}
.f-fill-soft, .f-dot-soft{fill:var(--ink-2)}
.f-dot{fill:var(--series)}
.f-box{fill:var(--surface); stroke:var(--ink-2); stroke-width:1.5}
.f-dot-soft{pointer-events:none}
.f-red{fill:#C8453A} .f-metal{fill:#A9B6BA} .f-metal2{fill:#7E8E93} .f-hole{fill:var(--surface)}
.f-lens{fill:#CFE8EF; stroke:#7E8E93; stroke-width:6}
.f-handle{stroke:var(--ink-2); stroke-width:9; stroke-linecap:round; fill:none}
.f-toolbox{fill:var(--surface); stroke:var(--line); stroke-width:1.5}
.f-toolname{fill:var(--ink); font-family:var(--body); font-size:12.5px; font-weight:700}

/* ---------- charts ---------- */
.c-grid{stroke:var(--grid); stroke-width:1}
.c-axis{stroke:var(--ink-2); stroke-width:1.5}
.c-txt{fill:var(--ink-2); font-family:var(--body); font-size:11.5px}
.c-title{fill:var(--ink); font-family:var(--body); font-size:12px; font-weight:700}
.c-line{fill:none; stroke:var(--series); stroke-width:2.5; stroke-linejoin:round}
.c-pt{fill:var(--series); stroke:var(--surface); stroke-width:2}
.c-newpt{fill:var(--series-new); stroke:var(--surface); stroke-width:2.5; cursor:move}
.c-guide{stroke:var(--series-new); stroke-width:1.2; stroke-dasharray:3 3}
.c-bar{fill:var(--series)}
.c-newbar{fill:var(--series-new)}
.c-slot{fill:var(--accent-soft); stroke:var(--accent); stroke-dasharray:4 3; stroke-width:1}
.c-handle{fill:var(--ink); cursor:ns-resize}
.bins{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.binbox{border:1.5px solid var(--ink-2); border-radius:4px; padding:10px; min-height:120px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; background:var(--surface-2); cursor:pointer}
.binbox .h{font-weight:700; font-size:14.5px}
.binbox.armed{border-color:var(--accent); border-style:dashed}
.binbox.over{background:var(--accent-soft)}
.fill{margin:0; line-height:2.3; max-width:62ch}
.fill select{font:inherit; padding:3px 6px; border:1.5px solid var(--accent); border-radius:4px; background:var(--accent-soft); color:var(--ink); font-weight:700}
.hs-reg{fill:var(--accent); fill-opacity:0; cursor:pointer}
.hs-reg:hover{fill-opacity:.1}
.hs-reg.sel{fill-opacity:.2; stroke:var(--accent); stroke-width:2.5}
.hs-reg:focus-visible{outline:none; stroke:var(--focus); stroke-width:3}
.fig{display:flex; flex-direction:column; align-items:center; gap:6px}
.fig svg{width:100%; max-width:440px; height:auto; display:block}
.figt{font-weight:700; font-size:15px; text-align:center}
table.data{border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; margin:0 auto}
table.data th, table.data td{border:1px solid var(--ink-2); padding:6px 14px; text-align:center}
table.data th{font-weight:700; background:var(--surface-2)}
.tablewrap{overflow-x:auto; max-width:100%}
mark{background:var(--hl); color:var(--hl-ink); padding:0 1px}

/* ---------- player chrome ---------- */
.toolbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--tool); border-bottom:1px solid var(--line); margin-inline:-16px; padding:8px 16px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.tgroup{display:flex; gap:6px; align-items:center}
.tb{border:1px solid var(--line); background:var(--surface); border-radius:6px; height:36px; min-width:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-size:14.5px; text-decoration:none; color:var(--ink)}
.tb:hover{border-color:var(--accent)}
.tb:disabled{opacity:.4; cursor:default}
.tb.nav{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-size:18px; font-weight:700; padding:0 14px}
.tb.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700}
.tb svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tools{display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.tools .tb{border:0; border-radius:0; border-right:1px solid var(--line)}
.tools .tb:last-child{border-right:0}
.spacer{flex:1}
.toggle{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; cursor:pointer}
.toggle input{accent-color:var(--accent); width:17px; height:17px; margin:0}
.subbar{background:var(--bar); color:var(--bar-ink); margin-inline:-16px; padding:7px 16px; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.crumbs{display:flex; flex-wrap:wrap; gap:6px}
.crumbs span+span::before{content:"/"; margin-right:6px; opacity:.6}
.prog{display:flex; align-items:center; gap:8px; flex:1; min-width:140px; max-width:260px}
.prog .track{flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden}
.prog .track span{display:block; height:100%; background:var(--bar-ink); border-radius:99px}
.toolhint{font-size:13px; color:var(--ink-2); padding:8px 2px 0}
.card{margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:6px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){ .cols{grid-template-columns:1fr} }
.stim{padding:18px; border-right:1px solid var(--line)}
@media (max-width:860px){ .stim{border-right:0; border-bottom:1px solid var(--line)} }
.stimbox{border:1px solid var(--ink-2); border-radius:3px; padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.stimbox p{margin:0; font-weight:700; max-width:62ch}
.q{padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; min-width:0}
.dir{font-weight:700; margin:0}
.stem{font-weight:700; margin:0; max-width:62ch}
.host{display:flex; flex-direction:column; gap:12px}

.opts{display:flex; flex-direction:column; gap:10px}
.opts.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:460px){ .opts.grid{grid-template-columns:1fr} }
.opt{display:flex; gap:12px; align-items:flex-start; text-align:left; background:none; border:1.5px solid transparent; border-radius:6px; padding:8px 10px; cursor:pointer; width:100%}
.opt:hover{border-color:var(--line)}
.opt .dot{flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-2); margin-top:1px; display:grid; place-items:center}
.opt[aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft)}
.opt[aria-checked="true"] .dot{border-color:var(--accent)}
.opt[aria-checked="true"] .dot::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent)}
.opt .ltr{font-weight:700; flex:none}
.opt.struck .txt, .opt.struck .ltr{text-decoration:line-through; opacity:.45}
.opt.struck svg{opacity:.35}
.opt svg{width:120px; height:auto; display:block}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:2px solid var(--ink-2); max-width:520px}
.tile{border:1px solid var(--ink-2); background:var(--surface); padding:10px; min-height:48px; cursor:pointer; font-size:15px; text-align:center}
.tile:hover{background:var(--surface-2)}
.tile[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:700}
.count{font-size:13.5px; color:var(--ink-2); margin:0}
.slots-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.ends{display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; max-width:620px}
.slot{min-width:118px; min-height:46px; border:2px dashed var(--ink-2); border-radius:4px; display:flex; align-items:center; justify-content:center; padding:4px; background:var(--surface-2); cursor:pointer; flex:1}
.slot.filled{border-style:solid; border-color:var(--accent); background:var(--surface)}
.slot.armed{border-color:var(--accent)}
.slot.over{background:var(--accent-soft)}
.arrow{color:var(--ink-2); font-weight:700}
.mtable{border-collapse:collapse; width:100%; max-width:620px}
.mtable td{border:1px solid var(--ink-2); padding:6px 10px; vertical-align:middle}
.mtable td.drop{width:44%; padding:6px}
.mtable .slot{min-width:0; width:100%}
.bank{display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); min-height:58px}
.bank:empty::before{content:"All answers placed."; color:var(--ink-2); font-size:14px; align-self:center}
.tok{border:1px solid var(--ink-2); background:var(--surface); border-radius:3px; padding:7px 12px; font-size:14.5px; cursor:grab; line-height:1.25}
.tok.sel{outline:3px solid var(--accent); outline-offset:1px}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.readout{font-weight:700; font-variant-numeric:tabular-nums}
.hint{font-size:13.5px; color:var(--ink-2); margin:0}
.practice{border-top:1px solid var(--line); padding:12px 20px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--surface-2)}
.btn{border:1.5px solid var(--line); background:var(--surface); border-radius:6px; padding:8px 16px; font-weight:700; cursor:pointer; text-decoration:none; color:var(--ink); display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.fb{flex:1 1 280px; border-radius:6px; padding:9px 12px; font-size:14.5px}
.fb b{margin-right:6px}
.fb.ok{background:var(--ok-soft); border-left:4px solid var(--ok)}
.fb.bad{background:var(--bad-soft); border-left:4px solid var(--bad)}
.fb.warn{background:var(--surface); border-left:4px solid var(--line)}
.tnote{border-top:1px solid var(--line); padding:14px 20px 16px; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:14.5px}
.tnote h3{grid-column:1/-1; margin:0 0 4px; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent)}
.tnote dt{font-weight:700; color:var(--ink-2)}
.tnote dd{margin:0}
.panel{padding:20px; display:flex; flex-direction:column; gap:14px}
.panel h2{font-size:20px; margin:0}
.rlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.ritem{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:6px; padding:9px 12px; background:var(--surface); cursor:pointer; text-align:left}
.ritem:hover{border-color:var(--accent)}
.st{font-size:12.5px; font-weight:700; padding:2px 8px; border-radius:99px; margin-left:auto}
.st.ans{background:var(--accent-soft); color:var(--accent)}
.st.un{background:var(--bad-soft); color:var(--bad)}
.st.ok{background:var(--ok-soft); color:var(--ok)}
.bmk{color:var(--series-new); font-weight:700}
.big{font-size:42px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.bars{display:flex; flex-direction:column; gap:12px; max-width:620px}
.bars .r{display:grid; grid-template-columns:minmax(0,1fr) 54px; gap:4px 10px; font-size:14.5px}
.bars .r .pct{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.bars .t{grid-column:1/-1; height:9px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.bars .t span{display:block; height:100%; background:var(--accent)}
.label{font-size:12px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--ink-2)}
.foot{color:var(--ink-2); font-size:13px; text-align:center; margin-top:16px}

/* ---------- library ---------- */
.lib-head{padding-block:28px 12px; display:flex; flex-direction:column; gap:6px}
.lib-head h1{margin:0; font-size:clamp(26px,4vw,34px); text-wrap:balance}
.lib-head p{margin:0; color:var(--ink-2); max-width:64ch}
.stats{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{font-size:13px; padding:3px 10px; border-radius:99px; background:var(--surface); border:1px solid var(--line)}
.grade{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.grade h2{margin:0; font-size:18px; letter-spacing:.02em}
.std{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.std-top{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.code{font-weight:700; font-variant-numeric:tabular-nums; min-width:2.6em}
.std-title{font-weight:700}
.std-count{margin-left:auto; font-size:13px; color:var(--ink-2)}
.kis{margin:0; padding-left:20px; font-size:14px; color:var(--ink-2)}
.set{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; border-top:1px solid var(--line); padding-top:10px}
.set-name{font-weight:700}
.badge{font-size:12px; font-weight:700; padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.05em}
.badge.draft{background:var(--warn-soft); color:var(--ink)}
.badge.reviewed{background:var(--accent-soft); color:var(--accent)}
.badge.published{background:var(--ok-soft); color:var(--ok)}
.set .links{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.set .links .btn{padding:5px 12px; font-size:14px}
.empty{font-size:14px; color:var(--ink-2)}

/* ---------- worksheet + answer key (screen preview and print) ---------- */
body.paper{background:#FFFFFF; color:#111; padding-inline:0}
.paper .sheet{max-width:7.5in; margin:0 auto; padding:0.4in 0 0.9in}
.printbar{max-width:7.5in; margin:12px auto 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-inline:16px}
.ws-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; border-bottom:2px solid #111; padding-bottom:8px; margin-bottom:14px}
.ws-head h1{margin:0; font-size:20px}
.ws-head .sub{font-size:13px; color:#444}
.ws-name{font-size:14px; white-space:nowrap}
.ws-name span{display:inline-block; border-bottom:1px solid #111; width:2.2in; margin-left:4px}
.ws-stim{border:1.5px solid #111; padding:12px 14px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px; break-inside:avoid}
.ws-stim p{margin:0; font-weight:700}
.ws-stim .figs{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.ws-stim .figs .fig:last-child:nth-child(odd){grid-column:1/-1}
.ws-note{font-size:13px; font-style:italic; margin:0 0 8px}
.ws-q{display:grid; grid-template-columns:28px 1fr; gap:4px 8px; padding:10px 0 14px; border-bottom:1px solid #ccc; break-inside:avoid}
.ws-q .num{font-weight:700}
.ws-q .body{display:flex; flex-direction:column; gap:8px; min-width:0}
.ws-opts{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.ws-opts.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ws-opts li{display:flex; gap:8px; align-items:flex-start}
.ws-opts .bub{flex:none; width:16px; height:16px; border:1.5px solid #111; border-radius:50%; margin-top:2px}
.ws-opts svg{width:110px; height:auto}
.ws-tiles{display:grid; grid-template-columns:1fr 1fr; border:1.5px solid #111; max-width:5.2in}
.ws-tiles div{border:1px solid #111; padding:7px 8px; display:flex; gap:8px; align-items:center; font-size:14.5px}
.ws-tiles .box{flex:none; width:14px; height:14px; border:1.5px solid #111}
.ws-boxes{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ws-boxes .b{flex:1; min-width:1.2in; height:40px; border:1.5px solid #111}
.ws-bank{border:1px dashed #111; padding:6px 10px; font-size:14px}
.ws-bank b{margin-right:6px}
.ws-mtable{border-collapse:collapse; width:100%}
.ws-mtable td{border:1px solid #111; padding:8px; font-size:14.5px}
.ws-mtable td.blank{width:38%}
.paper .fig svg{max-width:4.2in}
.paper .fig > div{width:100%; display:flex; justify-content:center}
.paper .ws-hot svg{max-width:6in}
.ws-foot{max-width:7.5in; margin:0 auto 24px; text-align:center; font-size:11px; color:#444}
.ws-bins{display:grid; grid-template-columns:repeat(auto-fit,minmax(2in,1fr)); gap:10px}
.ws-bin{border:1.5px solid #111; padding:8px 10px}
.ws-bin .h{font-weight:700; margin-bottom:6px}
.ws-bin .line{border-bottom:1px solid #111; height:26px}
.ws-fill{margin:0; line-height:1.9}
.key-list{display:flex; flex-direction:column; gap:0}
.key-row{display:grid; grid-template-columns:28px 1fr; gap:2px 8px; padding:8px 0; border-bottom:1px solid #ccc; break-inside:avoid; font-size:14.5px}
.key-row .ans{font-weight:700}
.key-row .meta{font-size:12.5px; color:#444}
@media print{
  .printbar{display:none}
  body.paper{padding:0}
  .paper .sheet{padding:0}
  .ws-foot{display:none}
  @page{margin:0.55in 0.6in 0.75in}
}