:root{
  color-scheme: light;
  --bg:#e6e7e9; --bar:#f8f8f9; --bar2:#eeeff1; --barline:#c8cbd0;
  --card:#ffffff; --frame:#f1f2f4; --ink:#2e3136; --muted:#5C625D; --line:#d5d8dc;
  --blue:#1c62c4; --blue-d:#154d9c; --crumb:#5d6167; --cyan:#1e9ad6;
  --tool-on:#4a4e55; --warn:#ef9d1a; --ok:#23845a; --bad:#c62f33;
  --hl-b:#bfe0f7; --hl-p:#f6c6d2; --focus:#f2b01e;
  --font:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body.contrast{
  --bg:#000; --bar:#111; --bar2:#111; --barline:#666; --card:#000; --frame:#000; --ink:#fff; --muted:#e6e6e6;
  --line:#888; --crumb:#222; --hl-b:#1d4f7a; --hl-p:#7a1d3d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,label:focus-within,.tile:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:linear-gradient(var(--bar),var(--bar2));border-bottom:1px solid var(--barline)}
.tb{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:9px 16px}
.tb .grow{flex:1}
.navpair{display:flex;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.navbtn{width:46px;height:36px;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer}
.navbtn+.navbtn{border-left:1px solid rgba(255,255,255,.25)}
.navbtn:hover:not(:disabled){background:var(--blue-d)}
.navbtn:disabled{background:#9fb6d8;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid #c3c6cb;border-bottom-color:#aeb2b8;border-radius:4px;background:#f6f6f7;cursor:pointer;font-size:13px}
.btn:hover:not(:disabled){background:#ececee}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.on{background:#e3ecfa;border-color:#8fb0e3}
body.contrast .btn{background:#222;border-color:#888;color:#fff}
.tools{display:flex;border:1px solid #c3c6cb;border-radius:4px;overflow:hidden}
.tool{width:34px;height:30px;border:0;background:#f6f6f7;display:grid;place-items:center;cursor:pointer;color:#3b3f45}
.tool+.tool{border-left:1px solid #c3c6cb}
.tool.on{background:var(--tool-on);color:#fff}
body.contrast .tool{background:#222;color:#fff}
body.contrast .tool.on{background:#ffeb3b;color:#000}
.timer{display:flex;align-items:center;border:1px solid #c3c6cb;border-radius:4px;overflow:hidden;height:30px}
.timer output{padding:0 10px;font-variant-numeric:tabular-nums;font-size:13px;min-width:74px;text-align:center}
.timer .tool{border-left:1px solid #c3c6cb}
.timer.low output{color:var(--bad);font-weight:700}
.user{position:relative;display:flex;align-items:center;gap:6px;font-size:13px}
.menu{position:absolute;right:0;top:36px;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:6px 0;z-index:40}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 14px;cursor:pointer;font-size:13px}
.menu button:hover{background:#e8effa}
body.contrast .menu button:hover{background:#333}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu .chk::before{content:"";display:inline-block;width:14px}
.menu .chk.on::before{content:"✓"}
.brand{font-size:19px;font-weight:300;letter-spacing:.3px;color:#3668b1}
.brand b{font-weight:500}
body.contrast .brand{color:#ffeb3b}
.crumbs{background:var(--crumb);border-top:5px solid var(--cyan);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:8px 16px;display:flex;gap:10px;flex-wrap:wrap;min-height:34px}
.crumbs span+span::before{content:"/";margin-right:10px;opacity:.8}

/* ---------- review dropdown ---------- */
.review-pop{position:absolute;top:46px;left:0;width:250px;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:40}
.rv-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.rv-tab{border:0;background:none;padding:8px 2px;font-size:11px;cursor:pointer;display:grid;justify-items:center;gap:4px;color:var(--ink)}
.rv-tab.on{box-shadow:inset 0 -2px 0 var(--blue)}
.rv-count{min-width:24px;height:24px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums}
.rv-tab.na .rv-count{border-radius:50%;background:var(--warn);border-color:#c77d06;color:#1a1200}
.rv-tab.bm .rv-count{background:var(--blue);border-color:var(--blue);color:#fff;border-radius:3px 3px 0 0}
.rv-list{list-style:none;margin:0;padding:6px;max-height:320px;overflow:auto}
.rv-list button{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:9px 10px 9px 24px;cursor:pointer;position:relative}
.rv-list button.cur{background:#4e5258;color:#fff}
.rv-list button:disabled{cursor:default}
.rv-list .dot{position:absolute;left:8px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--warn)}
.rv-list .bmk{position:absolute;right:10px;top:9px;color:var(--blue)}

/* ---------- stage ---------- */
main{padding-block:18px 40px;padding-inline:16px}
.stage{position:relative;max-width:1180px;margin:0 auto;background:var(--card);border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.2);padding:14px}
.scale{font-size:15px}
body.magnify .scale{font-size:19px}
.frame{background:var(--frame);border:1px solid var(--line);padding:14px}
.panel{background:var(--card);padding:18px 24px}
.center-card{max-width:520px;margin:34px auto;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.12);text-align:center}
.center-card .top{padding:26px 22px 20px}
.center-card h2{margin:0 0 14px;font-size:20px}
.center-card .pill{display:inline-block;background:#dcebf6;border:1px solid #b9d6ec;border-radius:3px;padding:5px 30px;color:#335d80;font-size:13px}
body.contrast .center-card .pill{background:#000;color:#fff}
.center-card .bottom{border-top:1px dashed #bfc3c8;background:var(--frame);padding:16px}
.primary{border:0;background:var(--blue);color:#fff;border-radius:4px;padding:9px 18px;cursor:pointer;font-weight:500}
.primary:hover{background:var(--blue-d)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.passage{border:1px solid #9a9ea4;height:min(62vh,560px);overflow:auto;padding:18px 20px 22px 12px;background:var(--card)}
.passage h3{text-align:center;font-weight:400;font-size:1.05em;margin:4px 0 14px}
.passage .src{font-size:.8em;color:var(--muted);margin:18px 0 0 36px}
.para{display:grid;grid-template-columns:28px 1fr;gap:8px;margin:0 0 .9em}
.pn{font-weight:700;font-size:.8em;text-align:right;padding-top:.15em;user-select:none;-webkit-user-select:none}
.hl-zone mark{color:inherit;border-radius:2px}
mark.hl-b{background:var(--hl-b)}
mark.hl-p{background:var(--hl-p)}
.q{padding:2px 4px}
.stem{margin:0 0 14px}
.stem .sub{display:block;margin-top:8px}
.textbox{border:1px solid #9a9ea4;padding:12px 14px;margin:0 0 14px;background:var(--card)}
.textbox p{margin:0 0 .5em}
.opts{display:grid;gap:14px}
.opt{position:relative;display:grid;grid-template-columns:22px 26px 1fr;align-items:start;gap:4px;cursor:pointer;padding:3px 6px;border-radius:3px}
.opt input{margin:.25em 0 0;accent-color:var(--blue);width:15px;height:15px}
.opt .letter{padding-top:.05em}
.opt:hover{background:rgba(28,98,196,.06)}
.opt.elim{cursor:default}
.opt.elim .letter,.opt.elim .txt{color:#8a8f96}
.opt.elim::after{content:"";position:absolute;inset:-2px 0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1.2px),var(--bad) calc(50% - 1.2px),var(--bad) calc(50% + 1.2px),transparent calc(50% + 1.2px)),
  linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--bad) calc(50% - 1.2px),var(--bad) calc(50% + 1.2px),transparent calc(50% + 1.2px))}
body.tool-elim .opt{cursor:crosshair}
.dnd{display:grid;gap:14px}
.pool{display:grid;gap:10px;justify-items:center;min-height:46px;padding:6px;border-radius:4px}
.tile{width:min(100%,290px);border:1px solid #9fb4cc;background:#eef2f7;color:#1e57a8;font-weight:700;font-size:.9em;border-radius:3px;padding:10px 12px;cursor:grab;text-align:center;line-height:1.35}
.tile.picked{outline:3px solid var(--focus)}
body.contrast .tile{background:#000;color:#ffeb3b;border-color:#ffeb3b}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{border:1px solid #c6cace;background:var(--frame);border-radius:3px;padding:10px;min-height:120px;display:grid;align-content:start;gap:8px;justify-items:center}
.box h4{margin:0;font-size:.88em;text-align:center;color:var(--muted)}
.box.over,.pool.over{background:#e3ecfa}
.fill{display:grid;gap:10px;max-width:420px}
.fill input{font:inherit;font-size:1.05em;padding:9px 10px;border:1px solid #9a9ea4;border-radius:3px;width:100%}
.fill .hint{font-size:.85em;color:var(--muted)}
.dir h2{font-size:1.05em;text-align:center;margin:0 0 4px}
.dir h3{font-size:1em;text-align:center;margin:0 0 14px;text-transform:uppercase;letter-spacing:.3px}
.dir ol{padding-left:1.4em;margin:.4em 0}
.dir li{margin:.3em 0}

/* pencil + notepad + mask + popover */
#pen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;touch-action:none}
body.tool-pencil #pen{pointer-events:auto;cursor:crosshair}
.penbar{position:absolute;right:14px;top:-40px;display:flex;gap:6px;z-index:6}
#notepad{position:fixed;z-index:50;width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid #b9bdc3;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#notepad header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--frame);border-bottom:1px solid var(--line);cursor:move;touch-action:none;font-size:15px;color:var(--muted)}
#notepad header button{border:0;background:none;font-size:18px;cursor:pointer;line-height:1}
#notepad textarea{display:block;width:calc(100% - 16px);height:220px;margin:8px;border:1px solid #9ab8df;border-radius:3px;font:inherit;padding:8px;resize:vertical;background:var(--card);color:var(--ink)}
#mask{position:fixed;inset:0;pointer-events:none;z-index:45}
#mask div{position:absolute;left:0;right:0;background:rgba(10,12,16,.62)}
#hlpop{position:fixed;z-index:60;display:flex;gap:4px;background:var(--card);border:1px solid #b9bdc3;border-radius:4px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
#hlpop button{width:28px;height:24px;border:1px solid #c3c6cb;border-radius:3px;cursor:pointer;background:#fff}
#hlpop .b{background:var(--hl-b)}
#hlpop .p{background:var(--hl-p)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:start center;padding:80px 16px 16px;z-index:70}
.modal{width:min(440px,100%);background:var(--card);border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.modal h2{margin:0;padding:12px 16px;font-size:15px;border-bottom:1px solid var(--line)}
.modal p{margin:0;padding:14px 16px;font-size:13.5px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 14px}
/* directions dialog (toolbar "Directions") */
#dirs{padding-top:clamp(16px,6vh,80px)}
.modal.dirs-modal{width:min(640px,100%)}
.modal.dirs-modal:focus{outline:none}
.dirs-body{max-height:calc(100vh - 230px);max-height:calc(100svh - 230px);min-height:120px;overflow:auto;padding:4px 18px 10px;font-size:14px}
.dirs-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.4px;margin:16px 0 4px}
.modal .dirs-body p{padding:0;margin:.4em 0;font-size:inherit}
.dirs-body ol,.dirs-body ul{padding-left:1.3em;margin:.4em 0}
.dirs-body li{margin:.3em 0}
.dirs-modal .acts{padding-top:12px;border-top:1px solid var(--line)}

/* home + report */
.home{max-width:860px;margin:10px auto;display:grid;gap:22px}
.home .eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.home h1{font-size:clamp(26px,4.4vw,38px);line-height:1.1;margin:6px 0 10px;text-wrap:balance;font-weight:500}
.home p{max-width:64ch;margin:0}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.facts div{background:var(--card);padding:12px 14px}
.facts dt{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:4px 0 0;font-weight:500}
.setup{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:end;border:1px solid var(--line);border-radius:4px;padding:16px;background:var(--frame)}
.setup fieldset{border:0;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.setup legend{font-size:12px;font-weight:500;margin-bottom:6px;padding:0}
.setup label{display:flex;gap:6px;align-items:center;cursor:pointer}
.fine{font-size:12px;color:var(--muted);max-width:none}
.report{max-width:980px;margin:0 auto;display:grid;gap:20px}
.report h1{font-size:24px;margin:0;font-weight:500}
.kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.kpi{border:1px solid var(--line);border-radius:4px;padding:14px 16px}
.kpi .lab{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.kpi .big{font-size:34px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.kpi .sub{font-size:12px;color:var(--muted)}
.scale-bar{position:relative;height:58px;margin:6px 10px 0}
.scale-bar .rail{position:absolute;left:0;right:0;top:34px;height:6px;background:linear-gradient(90deg,#dfe3e8,#b8c6d8);border-radius:3px}
.scale-bar .mk{position:absolute;top:22px;width:2px;height:30px;background:#5d6167}
.scale-bar .mk span{position:absolute;top:32px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;color:var(--muted)}
.scale-bar .you{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap}
.scale-bar .you::after{content:"";display:block;width:12px;height:12px;background:var(--blue);border-radius:50%;margin:3px auto 0;box-shadow:0 0 0 3px #fff}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paths figure{margin:0;border:1px solid var(--line);border-radius:4px;padding:12px}
.paths figcaption{font-size:12px;font-weight:500;margin-bottom:6px}
.paths svg{width:100%;height:auto;display:block}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);background:var(--frame)}
td.num{font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.chip.ok{background:#dcf1e6;color:#1a6b48}
.chip.bad{background:#f8dfe0;color:#a3262a}
.pips{display:inline-flex;gap:2px}
.pips i{width:7px;height:7px;border-radius:1px;background:#cfd3d8;display:block}
.pips i.on{background:#4a4e55}
details summary{cursor:pointer;color:var(--blue)}
details p{margin:6px 0 0;max-width:70ch}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.notes div{border:1px solid var(--line);border-radius:4px;padding:12px 16px}
.notes h3{margin:0 0 6px;font-size:13px}
.notes ul{margin:0;padding-left:1.1em}
.notes li{margin:.2em 0}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .passage{height:auto;max-height:42vh}
  .facts,.kpis,.paths,.notes{grid-template-columns:1fr}
  .boxes{grid-template-columns:1fr}
  .btn .lbl{display:none}
  .stage{padding:10px}
  .panel{padding:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* PrepCAT brand on start + report screens (test screens keep the real-test look) */
.home,.report{font-family:"Andika",Arial,sans-serif;color:#1D2320}
.home h1,.report h1{font-family:"Charis SIL",Georgia,serif;font-weight:400;font-size:clamp(2.4rem,5vw,3.8rem);letter-spacing:-.035em;line-height:1.02;color:#1E4D3A}
/* coral text uses #A8472A (5.5:1 on cream); #E8704F is kept for fills and decoration only */
.home .eyebrow,.facts dt,.kpi .lab,.report th{color:#A8472A;letter-spacing:.18em}
.kpi .lab .nt{text-transform:none;letter-spacing:0}
.kpi .sub a{color:#1E4D3A;text-underline-offset:2px}
.home .facts,.setup,.kpi,.tbl-wrap,.paths figure,.notes div{border:1px solid #1E4D3A14;border-radius:22px;box-shadow:0 20px 40px -32px #1E4D3A66;background:#fff}
.facts{gap:0;background:#fff}.facts div{background:transparent}
.kpi .big{font-family:"Charis SIL",Georgia,serif;font-weight:400;font-size:46px;color:#1E4D3A}
.home .primary,.report .primary{background:#1E4D3A;border-radius:999px;padding:12px 22px}
.home .primary:hover,.report .primary:hover{background:#163b2c}
body:has(.home),body:has(.report){background:#FBF8F3}

/* TestNav-style math item types */
.fill label{font-weight:400}
.tn-box{width:150px!important;font-size:1em!important;padding:6px 8px!important;border:1px solid #5f6368!important;border-radius:2px!important}
.cloze p{line-height:2.4;margin:0 0 .6em}
.tn-dd{font:inherit;font-size:.92em;padding:2px 6px;border:1px solid #5f6368;border-radius:2px;background:#fff;margin:0 3px}
.tray{display:inline-flex;flex-wrap:wrap;gap:6px;background:#eceef1;border-radius:4px;padding:8px;margin:0 0 14px}
.tn-tile{min-width:36px;height:30px;border:1.5px solid #3a78c4;background:#fff;color:#1e57a8;font-weight:700;border-radius:3px;cursor:grab;padding:0 8px}
.tn-tile.picked{outline:3px solid var(--focus)}
.tl{line-height:2.4;margin:0 0 .4em}
.tn-slot{display:inline-block;min-width:44px;height:30px;vertical-align:middle;border:1.5px solid #5f6368;border-radius:3px;background:#fff;text-align:center;line-height:27px;font-weight:700;color:#1e57a8;margin:0 4px;cursor:pointer}
.tn-slot.over{background:#e3ecfa}

/* ---- Answer types added for the 2026 forms: typed expressions, several boxes, number line, table ---- */
.tn-expr{width:min(320px,100%)!important}
.fill.expr{max-width:460px}
.tn-inline{display:inline-block;width:96px!important;margin:0 4px;vertical-align:middle}
.ra-p{margin:0 0 .9em}
.nl{max-width:680px}
.nl-svg{display:block;width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:3px;cursor:pointer;touch-action:manipulation}
body.tool-elim .nl-svg,body.tool-pencil .nl-svg{cursor:default}
.nl-axis,.nl-tick{stroke:var(--ink);stroke-width:2}
.nl-end{fill:var(--ink)}
.nl-lab{fill:var(--ink);font-size:17px;font-family:var(--font)}
.nl-ray{stroke:var(--blue);stroke-width:6;stroke-linecap:round}
.nl-head{fill:var(--blue)}
.nl-pt{fill:var(--blue);stroke:var(--blue);stroke-width:3}
.nl-pt.open{fill:var(--card)}
.nl-pt.unset{fill:#8a8f96;stroke:#8a8f96}
.nl-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0 4px}
.nl-grp{display:inline-flex;align-items:center;gap:6px}
.nl-val{min-width:104px;text-align:center;font-variant-numeric:tabular-nums}
.gridq{width:auto;min-width:min(100%,460px);font-size:inherit;margin:4px 0;border:1px solid var(--line)}
.gridq th,.gridq td{padding:8px 12px;vertical-align:middle;border:1px solid var(--line)}
.gridq thead th{text-transform:none;letter-spacing:0;font-size:.9em;color:var(--ink);text-align:center;font-weight:500}
.gridq tbody th{text-transform:none;letter-spacing:0;font-size:inherit;color:var(--ink);background:var(--card);font-weight:400}
.gridq td{text-align:center}
.gcell{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;cursor:pointer}
.gcell input{width:17px;height:17px;margin:0;accent-color:var(--blue)}
@media (max-width:820px){
  .nl-lab{font-size:28px}
  .gridq th,.gridq td{padding:8px 6px}
}

/* ---- Formats from NYC's sample sheet of item types: words and phrases to drag, tables, hot text,
   hot spot, the full equation editor, table grid, point graph, shape transformation ---- */
.tiles.text .tray{display:flex;flex-wrap:wrap;max-width:680px}
.tiles.text .tn-tile{height:auto;min-height:30px;padding:4px 10px;font-weight:500;text-align:left;white-space:normal;line-height:1.3}
.tn-tile.used{border-color:#c3c6cb;color:#9aa0a6;background:#f1f2f4;cursor:default}
.tn-slot.wide{min-width:150px;height:auto;min-height:30px;line-height:1.3;padding:4px 8px;font-weight:500;text-align:left;white-space:normal}
.tn-table{width:auto;min-width:min(100%,360px);font-size:inherit;margin:4px 0 10px;border:1px solid var(--line)}
.tn-table caption{caption-side:top;text-align:left;font-weight:700;padding:0 0 6px}
.tn-table th,.tn-table td{padding:8px 14px;border:1px solid var(--line);text-align:center;vertical-align:middle}
.tn-table thead th{text-transform:none;letter-spacing:0;font-size:.9em;color:var(--ink);font-weight:700}
.tn-table .tn-slot{margin:0}
.keypad{display:grid;gap:6px;max-width:520px;padding:8px;background:#f4f5f7;border:1px solid var(--line);border-radius:4px}
.kp-nav{display:flex;gap:6px}
.kp-body{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.kp-digits{display:grid;grid-template-columns:repeat(3,38px);gap:5px}
.kp-sym{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.keypad button{font:inherit;font-size:15px;min-width:38px;height:34px;padding:0 6px;border:1px solid #c3c6cb;background:#fff;border-radius:3px;cursor:pointer;color:var(--ink)}
.keypad button:hover{background:#e3ecfa}
.keypad button sup{font-size:.65em}
body.contrast .keypad{background:#111}
body.contrast .keypad button{background:#000;color:#fff;border-color:#888}
.hot{line-height:2.3;max-width:680px}
.ht{font:inherit;padding:1px 4px;margin:0 1px;border:1.5px solid #8fb0e3;border-radius:3px;background:var(--card);color:var(--ink);cursor:pointer;line-height:1.5;text-align:left}
.ht:hover{background:#e3ecfa}
.ht.on{background:#1e57a8;border-color:#1e57a8;color:#fff}
body.contrast .ht{background:#000;color:#fff}
body.contrast .ht.on{background:#5b8def;color:#000}
.spots{display:flex;flex-wrap:wrap;gap:12px;max-width:680px}
.spot{width:132px;height:112px;padding:6px;border:2px solid #b4a9f5;border-radius:3px;background:#fff;cursor:pointer}
.spot svg{width:100%;height:100%}
.spot.on{border:4px solid #1d22e6;padding:4px}
.cg{display:grid;grid-template-columns:minmax(0,400px) minmax(160px,1fr);gap:8px 18px;align-items:start;max-width:720px}
.cg-hint{grid-column:1/-1;margin:0}
.cg-svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:3px;cursor:crosshair;touch-action:manipulation}
.cg-line{stroke:#c9ccd1;stroke-width:1}
.cg-axis{stroke:#3c4043;stroke-width:2}
.cg-lab{fill:#3c4043;font-size:12px;font-family:var(--font)}
.cg-ax{font-style:italic;font-size:14px}
.cg-plab{fill:var(--ink);font-size:14px;font-weight:700;font-family:var(--font)}
.cg-given{fill:#3c4043}
.cg-pt{fill:#2a2ce0;stroke:rgba(42,44,224,.18);stroke-width:14}
.cg-poly{fill:rgba(42,44,224,.18);stroke:#2a2ce0;stroke-width:2}
.cg-base{fill:#e2e3e6;stroke:#5f6368;stroke-width:2}
.cg-image{fill:#8a4fe8;fill-opacity:.85;stroke:#4b1fa3;stroke-width:2}
.cg-side{display:grid;gap:10px;align-content:start}
.cg-count{margin:0;font-weight:500}
.cg-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cg-list li{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.cg-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cg-add input{width:64px;font:inherit;padding:4px 6px;border:1px solid #9a9ea4;border-radius:3px}
.cg-tray{display:flex;flex-wrap:wrap;gap:8px}
.cg-cand{width:96px;height:96px;padding:2px;border:2px solid #b4a9f5;border-radius:3px;background:#fff;cursor:grab}
.cg-cand svg{width:100%;height:100%}
.cg-cand.picked{outline:3px solid var(--focus)}
.cg-cand.placed{border:4px solid #1d22e6;padding:0}
@media (max-width:820px){
  .cg{grid-template-columns:1fr}
  .cg-lab{font-size:15px}
  .cg-plab{font-size:17px}
  .kp-body{grid-template-columns:1fr}
  .spot{width:calc(50% - 6px)}
}