/* ---------- tokens ---------- */
:root{
  --ground:#F3F6F4; --paper:#FFFFFF; --paper-2:#FAFCFA; --rule:#D8E2DD; --rule-2:#EAF0EC;
  --ink:#16211F; --ink2:#576660; --ink3:#879189;
  --accent:#17627A; --accent-2:#0F4D61; --accent-soft:#E1EFF3;
  --mark:#B4720F; --mark-soft:#FBF0DC;
  --right:#2E7D4F; --right-soft:#E4F2E9; --wrong:#B63A2C; --wrong-soft:#FBE8E5;
  --grid:rgba(23,98,122,.055);
  --shadow:0 1px 2px rgba(22,33,31,.05), 0 8px 24px -12px rgba(22,33,31,.14);
  --r:12px; --r-s:8px;
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Fraunces','Iowan Old Style',Georgia,serif;
  --serif:'Source Serif 4','Iowan Old Style',Georgia,serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#0F1513; --paper:#17201D; --paper-2:#131B19; --rule:#2A3733; --rule-2:#212C29;
  --ink:#E9EFEB; --ink2:#A4B1AA; --ink3:#7A867F;
  --accent:#5AB6D0; --accent-2:#8AD0E3; --accent-soft:#12303A;
  --mark:#E3A93F; --mark-soft:#332711;
  --right:#5FBE86; --right-soft:#16301F; --wrong:#E2705E; --wrong-soft:#361B17;
  --grid:rgba(90,182,208,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --ground:#0F1513; --paper:#17201D; --paper-2:#131B19; --rule:#2A3733; --rule-2:#212C29;
  --ink:#E9EFEB; --ink2:#A4B1AA; --ink3:#7A867F;
  --accent:#5AB6D0; --accent-2:#8AD0E3; --accent-soft:#12303A;
  --mark:#E3A93F; --mark-soft:#332711;
  --right:#5FBE86; --right-soft:#16301F; --wrong:#E2705E; --wrong-soft:#361B17;
  --grid:rgba(90,182,208,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink);
  background-color:var(--ground);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; line-height:1.18; text-wrap:balance; margin:0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
#app{display:flex; min-height:100%}
.rail{
  width:266px; flex:none; background:var(--paper); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  padding-top:env(safe-area-inset-top,0px);
}
.rail-all{display:block;margin:.5rem .75rem 0;padding:.42rem .6rem;border:1px solid var(--rule);border-radius:var(--r-s);font-size:.86rem;color:var(--ink2);text-decoration:none;background:var(--paper)}
.rail-all:hover{border-color:var(--accent);color:var(--accent)}
.rail-top{padding:var(--s4) var(--s3) var(--s2); border-bottom:1px solid var(--rule-2)}
.brand{display:block; text-align:left; background:none; border:0; padding:0; width:100%}
.brand b{font-family:var(--disp); font-size:1.18rem; font-weight:700; display:block; letter-spacing:-.01em}
.brand span{font-size:.74rem; color:var(--ink3); letter-spacing:.07em; text-transform:uppercase; font-weight:600}
.rail-scroll{flex:1; overflow-y:auto; padding:var(--s2) var(--s2) var(--s4)}
.strand-h{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--ink3); padding:var(--s3) var(--s2) var(--s1)}
.unit-link{
  display:grid; grid-template-columns:26px 1fr auto; gap:var(--s2); align-items:center; width:100%;
  background:none; border:0; text-align:left; padding:7px var(--s2); border-radius:var(--r-s);
  color:var(--ink2); font-size:.875rem; line-height:1.3;
}
.unit-link:hover{background:var(--rule-2); color:var(--ink)}
.unit-link[aria-current="true"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.unit-link .n{font-size:.72rem; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums; text-align:center}
.unit-link[aria-current="true"] .n{color:var(--accent)}
.ring{width:18px;height:18px;flex:none}
.rail-foot{border-top:1px solid var(--rule-2); padding:var(--s2); display:flex; flex-direction:column; gap:2px}
.navbtn{display:flex; align-items:center; gap:var(--s2); width:100%; background:none; border:0;
  padding:8px var(--s2); border-radius:var(--r-s); font-size:.875rem; color:var(--ink2)}
.navbtn:hover{background:var(--rule-2); color:var(--ink)}
.navbtn[aria-current="true"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.navbtn .cnt{margin-left:auto; font-size:.72rem; font-weight:700; background:var(--mark-soft); color:var(--mark);
  padding:1px 7px; border-radius:99px; font-variant-numeric:tabular-nums}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); padding-top:calc(var(--s2) + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.menubtn{display:none; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-s); padding:6px 10px}
.homebtn{display:inline-flex; align-items:center; gap:6px; background:var(--paper); border:1px solid var(--rule);
  border-radius:99px; padding:5px 13px 5px 11px; font-size:.82rem; font-weight:600; color:var(--ink2);
  /* Without this the label breaks inside the pill when the bar is tight, so
     "How to Build" stacks as three lines and the whole header grows. */
  white-space:nowrap; flex:none}
.homebtn:hover{border-color:var(--accent); color:var(--accent)}
.homebtn i{font-style:normal; font-size:1.05rem; line-height:1}
.topbar .sp{flex:1}
.who{display:flex; align-items:center; gap:var(--s2); background:var(--paper); border:1px solid var(--rule);
  border-radius:99px; padding:4px 5px 4px 5px}
.av{width:28px;height:28px;border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:.82rem; flex:none}
.av.z2{background:var(--mark)}
.av.z3{background:var(--right)}
.who b{font-size:.84rem; font-weight:600; padding-right:2px}
.who .sw{border:0;background:none;padding:2px 8px 2px 4px;font-size:.76rem;color:var(--ink3);border-radius:99px;
  font-family:inherit; -webkit-appearance:none; appearance:none; cursor:pointer}
.who .sw:hover{color:var(--accent)}
select.sw{padding-right:16px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 7px center,right 3px center; background-size:4px 4px,4px 4px; background-repeat:no-repeat}
select.sw:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{width:100%; max-width:920px; margin:0 auto; padding:var(--s5) var(--s4) var(--s6)}
.wrap.wide{max-width:1120px}

/* ---------- pieces ---------- */
.eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.11em; font-weight:700; color:var(--ink3)}
.sheet{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:var(--s4)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--rule);
  background:var(--paper); border-radius:var(--r-s); padding:9px 15px; font-size:.875rem; font-weight:600; color:var(--ink)}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.pri:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.sm{padding:6px 11px; font-size:.8rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.star[aria-pressed="true"]{color:var(--mark); border-color:var(--mark); background:var(--mark-soft)}
.row{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:var(--s4); overflow-x:auto}
.tab{background:none; border:0; border-bottom:2.5px solid transparent; padding:10px 14px; font-size:.9rem;
  font-weight:600; color:var(--ink3); white-space:nowrap; margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}

/* math */
/* text-indent is inherited, and flex items are blockified — so a hanging indent
   (the solution blocks use one) would drag fraction numerators out of their box. */
.m{font-family:var(--serif); text-indent:0}
.m i{font-style:italic}
.frac,.frac>.n,.frac>.d,.sq,.sq>.g,.ovl{text-indent:0}
/* vertical-align:middle puts the box centre — and so the bar, since the two rows
   match — on the parent's math axis, which is where a fraction bar belongs. */
.frac{display:inline-flex; flex-direction:column; align-items:stretch; vertical-align:middle;
  text-align:center; margin:0 .18em; line-height:1.15; font-size:.95em; white-space:nowrap}
.frac>.n{padding:0 .3em}
.frac>.d{padding:0 .3em; border-top:1.4px solid currentColor}
.sq{display:inline-flex; align-items:stretch; white-space:nowrap}
.sq>.r{transform:scaleY(1.18)}
.sq>.g{border-top:1.4px solid currentColor; padding:0 .18em; margin-top:.14em}
.ovl{border-top:1.4px solid currentColor}
.ovr{border-top:1.4px solid currentColor; position:relative; padding-right:.12em}
.ovr::after{content:""; position:absolute; right:-.05em; top:-.34em; border-left:.3em solid currentColor;
  border-top:.17em solid transparent; border-bottom:.17em solid transparent}
.hat{position:relative}
.hat::after{content:"^"; position:absolute; left:0; right:0; top:-.62em; font-size:.82em; text-align:center; line-height:1}
.boxed{border:1.3px solid currentColor; border-radius:2px; padding:.05em .28em}
.mo{font-family:var(--sans); font-size:.86em; padding-left:.25em}
.m.disp{display:block; text-align:center; margin:10px 0; font-size:1.06em}
.mat{display:inline-flex; align-items:stretch; vertical-align:middle; gap:1px}
.mat>b{font-weight:400; font-size:1.5em; line-height:1; display:flex; align-items:center; transform:scaleY(1.15)}
.mg{display:inline-flex; flex-direction:column; padding:.1em .15em}
.mr{display:flex}
.mc{min-width:1.5em; padding:.06em .3em; text-align:center}
.binom{margin:0 .1em} .binom .mc{min-width:0; padding:0 .12em; line-height:1.15}
.binom > b{font-size:1.35em}
.m sup,.m sub{font-size:.72em; line-height:0}

/* lesson */
.lead{font-family:var(--serif); font-size:1.14rem; line-height:1.62; color:var(--ink2)}
.sec{margin-top:var(--s5)}
.sec h3{font-size:1.22rem; margin-bottom:var(--s2)}
.sec p{font-family:var(--serif); font-size:1.045rem; line-height:1.72; margin:0 0 var(--s2); max-width:66ch}
.box{border-radius:var(--r-s); padding:var(--s3); margin:var(--s3) 0; border-left:3px solid; font-size:.95rem}
.box h4{font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px}
.box p{margin:0; font-family:var(--serif); line-height:1.6}
.box.key{background:var(--accent-soft); border-color:var(--accent)} .box.key h4{color:var(--accent-2)}
.box.warn{background:var(--wrong-soft); border-color:var(--wrong)} .box.warn h4{color:var(--wrong)}
.box.slow{background:var(--mark-soft); border-color:var(--mark)} .box.slow h4{color:var(--mark)}
/* Discovery opener and fun fact: full cards, no left rule — they frame the lesson
   rather than interrupting it, so they read as a different kind of voice. */
.card-note{background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:var(--s3) var(--s3) calc(var(--s3) - 4px); margin:var(--s3) 0}
.card-note > h4{font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent-2); margin:0 0 10px}
.card-note p{font-family:var(--serif); line-height:1.65; margin:0 0 12px}
.card-note p:last-child{margin-bottom:4px}
.card-note .lead-in{font-weight:600}
.card-note .figwrap{margin:14px 0}
.discover{border-color:var(--accent); background:var(--accent-soft)}
.discover > h4{color:var(--accent-2)}
.punch{border-top:1px solid var(--rule); padding-top:12px; margin-top:4px}
.punch p{font-family:var(--serif)} .punch p:last-child{margin-bottom:4px}
.ex{border:1px solid var(--rule); border-radius:var(--r); margin:var(--s3) 0; overflow:hidden}
.ex>header{background:var(--paper-2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule);
  display:flex; gap:var(--s2); align-items:baseline}
.ex>header b{font-family:var(--disp); font-size:1rem}
.ex .q{padding:var(--s3); font-family:var(--serif); font-size:1.04rem; border-bottom:1px dashed var(--rule)}
.steps{list-style:none; margin:0; padding:0; counter-reset:st}
.steps li{display:grid; grid-template-columns:26px 1fr; gap:var(--s2); padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--rule-2); counter-increment:st}
.steps li::before{content:counter(st); font-size:.72rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:50%; width:22px; height:22px; display:grid; place-items:center; margin-top:2px}
.steps .do{font-family:var(--serif); font-size:1.02rem}
.steps .why{font-size:.845rem; color:var(--ink2); margin-top:1px}
.ex .ans{padding:var(--s2) var(--s3); background:var(--right-soft); color:var(--right); font-weight:600; font-size:.95rem}
.vocab{display:grid; gap:0; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.vocab div{display:grid; grid-template-columns:170px 1fr; gap:var(--s3); padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule-2); font-size:.93rem}
.vocab div:last-child{border-bottom:0}
.vocab dt{font-weight:700; color:var(--accent-2)}
.vocab dd{margin:0; color:var(--ink2); font-family:var(--serif)}
.mist{list-style:none; padding:0; margin:0; display:grid; gap:var(--s2)}
.mist li{display:grid; grid-template-columns:auto 1fr; gap:var(--s2); font-size:.95rem; font-family:var(--serif);
  background:var(--wrong-soft); border-radius:var(--r-s); padding:var(--s2) var(--s3)}
.mist li::before{content:"!"; font-family:var(--sans); font-weight:800; color:var(--wrong); font-size:.8rem;
  width:19px;height:19px;border-radius:50%;border:1.6px solid var(--wrong);display:grid;place-items:center;margin-top:3px}

/* figures */
.figwrap{background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3); margin:var(--s3) 0}
.fig{width:100%; height:auto; max-width:100%; display:block; overflow:visible}
.fig text[text-anchor="start"]{text-anchor:start}
.fig text[text-anchor="end"]{text-anchor:end}
.fig text[text-anchor="middle"]{text-anchor:middle}
.f-axis{stroke:var(--ink2); stroke-width:1.6; fill:none}
.f-rule,.f-grid{stroke:var(--rule); stroke-width:1; fill:none}
.f-grid{stroke-dasharray:2 4}
.f-dot{fill:var(--ink2)} .f-hub{fill:var(--accent)} .f-origin{fill:var(--ink2)}
.f-lab{fill:var(--ink2); font:600 11px var(--sans); text-anchor:middle}
.f-lab2{fill:var(--accent); font:700 12px var(--sans); text-anchor:middle}
.f-lab3{fill:var(--ink3); font:500 11.5px var(--sans); text-anchor:middle}
.f-cap{fill:var(--ink2); font:500 12.5px var(--sans); text-anchor:middle}
.f-big{fill:var(--accent); font:700 25px var(--disp); text-anchor:middle}
.f-nl{fill:var(--ink2); font:600 11px var(--sans); text-anchor:middle}
.f-node{fill:#fff; font:700 12px var(--sans); text-anchor:middle}
.f-eq{fill:var(--ink); font:400 17px var(--serif)}
.f-fill{fill:var(--accent); opacity:.82} .f-fill-soft{fill:var(--accent); opacity:.3}
.f-fill2{fill:var(--mark); opacity:.85} .f-empty{fill:var(--rule-2); stroke:var(--rule); stroke-width:.7}
.f-mark{stroke:var(--mark); stroke-width:2} .f-marked{fill:var(--mark)}
.f-panel{fill:var(--paper); stroke:var(--rule); stroke-width:1}
.f-panel2{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1}
.f-pop{fill:var(--rule)} .f-sampled{fill:var(--accent)}
.f-arrow{stroke:var(--ink3); stroke-width:1.6; fill:none} .f-arrowhead{fill:var(--ink3)}
.f-sec1{fill:var(--accent); opacity:.8} .f-sec2{fill:var(--mark); opacity:.8}
.f-sec3{fill:var(--accent); opacity:.4} .f-sec4{fill:var(--mark); opacity:.4}
.f-ring{fill:none; stroke:var(--ink2); stroke-width:1.6}
.f-needle{stroke:var(--ink); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.f-branch{stroke:var(--rule); stroke-width:1.8; fill:none} .f-lit{stroke:var(--accent); stroke-width:2.4}
.f-line{stroke:var(--accent); stroke-width:2.6; fill:none} .f-runner{fill:var(--mark)}
.f-neg{stroke:var(--wrong); stroke-width:3; opacity:.22}
.f-arc{stroke:var(--accent); stroke-width:2; fill:none} .f-arc-off{stroke:var(--rule); stroke-width:1.6; fill:none; stroke-dasharray:3 3}
.f-start{fill:var(--wrong)}
.f-beam{stroke:var(--ink2); stroke-width:3; fill:none; stroke-linecap:round}
.f-pan{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.6}
.f-tick{stroke:var(--accent); stroke-width:3}
.f-shade{stroke:var(--accent); stroke-width:4.5; fill:none; opacity:.55; stroke-linecap:round}
.f-closed{fill:var(--accent)}
.f-slice{fill:var(--mark); opacity:.6} .f-slice-moved{fill:var(--mark); opacity:.6}
.f-dash{stroke:var(--ink); stroke-width:1.2; stroke-dasharray:4 3; fill:none}
.f-dim{stroke:var(--ink3); stroke-width:1.2}
.f-face-a{fill:var(--accent); opacity:.26} .f-face-b{fill:var(--accent); opacity:.45} .f-face-c{fill:var(--accent); opacity:.16}
.f-edge{fill:none; stroke:var(--ink2); stroke-width:1.8} .f-edge-in{fill:none; stroke:var(--ink3); stroke-width:1; stroke-dasharray:3 3}
.f-plane{fill:var(--mark); opacity:.55; stroke:var(--mark); stroke-width:2}
.ac-bar{fill:var(--accent)}
.ac-none{fill:var(--rule)}
.ac-axis{stroke:var(--rule); stroke-width:1}
.ac-val{fill:var(--ink2); font:600 11px var(--sans); text-anchor:middle}
.ac-tick{fill:var(--ink3); font:500 10.5px var(--sans); text-anchor:middle}
.f-tile{fill:var(--accent); fill-opacity:.16; stroke:var(--accent); stroke-width:1.2}
.f-tile2{fill:var(--mark); fill-opacity:.18; stroke:var(--mark); stroke-width:1.2}
.f-set{fill:var(--accent); fill-opacity:.07; stroke:var(--accent); stroke-width:1.4}
.f-set2{fill:var(--mark); fill-opacity:.10; stroke:var(--mark); stroke-width:1.4}
.f-name{fill:var(--ink); font:700 12.5px var(--sans); text-anchor:middle}
.f-back{stroke:var(--mark); stroke-width:1.8; fill:none; stroke-dasharray:4 3}
.f-backhead{fill:var(--mark)}
.f-angarc{stroke:var(--accent); stroke-width:2.4; fill:none} .f-angarc2{stroke:var(--mark); stroke-width:2.4; fill:none}
.f-person{fill:var(--ink2)} .f-person-2{fill:var(--accent)} .f-person-3{fill:var(--mark)}
.f-ghost{fill:none; stroke:var(--ink3); stroke-width:1.6; stroke-dasharray:4 3; opacity:.75}
.f-card{fill:var(--paper); stroke:var(--ink3); stroke-width:1.5}
.f-shadow{fill:#000; opacity:.09}
.f-title{fill:var(--ink); font:700 13px var(--sans); text-anchor:middle}
.f-step{fill:var(--ink3); font:700 11px var(--sans); text-anchor:middle}
.f-tag{fill:var(--paper); stroke:var(--rule); stroke-width:1}
.f-bag{fill:var(--mark); opacity:.5; stroke:var(--mark); stroke-width:1.6}
.f-match{stroke:#c9a15e; stroke-width:4; stroke-linecap:round}
/* geometry marks (figures-geo*.js): ticks for equal lengths, wedges and arcs for angles, compass arcs */
.f-tk{stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round}
.f-tk2{stroke:var(--mark); stroke-width:2; fill:none; stroke-linecap:round}
.f-soft{fill:var(--accent); fill-opacity:.16; stroke:none}
.f-soft2{fill:var(--mark); fill-opacity:.2; stroke:none}
.f-hi2{stroke:var(--mark); stroke-width:2.6; fill:none; stroke-linejoin:round}
.f-angarc3{stroke:var(--ink3); stroke-width:2; fill:none}
.f-headhi{fill:var(--accent)}
.f-compass{stroke:var(--ink3); stroke-width:1.2; fill:none; stroke-dasharray:3 2}
.f-sq{stroke:var(--ink2); stroke-width:1.3; fill:none}
.f-symb{stroke:var(--ink); stroke-width:1.4; fill:var(--ink)}
.f-halo{paint-order:stroke; stroke:var(--paper-2); stroke-width:5px; stroke-linejoin:round}
.f-trace{stroke:var(--mark); stroke-width:9; stroke-opacity:.26; fill:none; stroke-linecap:round; stroke-linejoin:round}
@keyframes slidefig{0%,8%{transform:translateX(0)}25%,33%{transform:translateX(100px)}50%,58%{transform:translateX(200px)}75%,83%{transform:translateX(300px)}100%{transform:translateX(0)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes spin{0%,12%{transform:rotate(0)}70%,100%{transform:rotate(773deg)}}
@keyframes hop{0%,100%{transform:translateX(-175px)}20%{transform:translateX(-140px)}40%{transform:translateX(-105px)}60%{transform:translateX(-70px)}80%{transform:translateX(-35px)}90%{transform:translateX(0)}}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:1}}
.f-slide{animation:slidefig 9s ease-in-out infinite}
.f-spin{animation:spin 6s cubic-bezier(.16,.9,.25,1) infinite; transform-origin:0 0}
.f-hop{animation:hop 6s steps(1,end) infinite}
.f-fill[style*="--d"],.f-sampled[style*="--d"]{animation:pop .7s ease-out both; animation-delay:var(--d)}
.f-step{animation:glow 5s ease-in-out infinite; animation-delay:var(--d)}
.f-arc{animation:glow 5s ease-in-out infinite; animation-delay:var(--d)}
@media (prefers-reduced-motion:reduce){ .f-slide,.f-spin,.f-hop,.f-step,.f-arc,[style*="--d"]{animation:none!important}
  .f-runner{display:none} }

/* problem player */
.player{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.pl-head{display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule);
  background:var(--paper-2); flex-wrap:wrap}
.chip{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:3px 9px; border-radius:99px}
.chip.t1{background:var(--right-soft); color:var(--right)}
.chip.t2{background:var(--accent-soft); color:var(--accent-2)}
.chip.t3{background:var(--mark-soft); color:var(--mark)}
.chip.amc{background:var(--wrong-soft); color:var(--wrong)}
.pl-body{padding:var(--s4) var(--s3)}
.qtext{font-family:var(--serif); font-size:1.2rem; line-height:1.66; margin-bottom:var(--s4)}
.choices{display:grid; gap:var(--s2)}
.choice{display:grid; grid-template-columns:30px 1fr; gap:var(--s2); align-items:center; text-align:left;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r-s); padding:11px var(--s3); font-family:var(--serif); font-size:1.04rem}
.choice:hover:not([disabled]){border-color:var(--accent); background:var(--accent-soft)}
.choice .k{font-family:var(--sans); font-weight:700; font-size:.78rem; width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--rule); display:grid; place-items:center; color:var(--ink3)}
.choice[data-state="sel"]{border-color:var(--accent); background:var(--accent-soft)}
.choice[data-state="right"]{border-color:var(--right); background:var(--right-soft)}
.choice[data-state="wrong"]{border-color:var(--wrong); background:var(--wrong-soft)}
.choice[data-state="right"] .k{border-color:var(--right); color:var(--right)}
.choice[data-state="wrong"] .k{border-color:var(--wrong); color:var(--wrong)}
.answerbar{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap}
input[type=text]{font:inherit; font-family:var(--serif); font-size:1.1rem; padding:10px var(--s3); border:1.5px solid var(--rule);
  border-radius:var(--r-s); background:var(--paper); color:var(--ink); min-width:0; flex:1 1 180px; max-width:280px}
input[type=text]:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.unitlab{font-size:.85rem; color:var(--ink3); font-weight:600}
.fb{margin-top:var(--s3); border-radius:var(--r-s); padding:var(--s3); font-size:.95rem}
.fb.ok{background:var(--right-soft); border-left:3px solid var(--right)}
.fb.no{background:var(--wrong-soft); border-left:3px solid var(--wrong)}
.fb b{display:block; margin-bottom:4px; font-size:.95rem}
.fb.ok b{color:var(--right)} .fb.no b{color:var(--wrong)}
.hintbox{margin-top:var(--s3); background:var(--mark-soft); border-left:3px solid var(--mark); border-radius:var(--r-s);
  padding:var(--s3); font-size:.95rem; font-family:var(--serif)}
.soln{margin-top:var(--s3); border:1px solid var(--rule); border-radius:var(--r-s); overflow:hidden}
.soln>b{display:block; background:var(--paper-2); padding:8px var(--s3); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink3); border-bottom:1px solid var(--rule)}
.soln ol{margin:0; padding:var(--s2) var(--s3) var(--s2) 2.4rem; font-family:var(--serif); font-size:1.02rem}
.soln li{padding:4px 0}
.notebox{margin-top:var(--s3)}
.notebox label{font-size:.8rem; font-weight:600; color:var(--ink2); display:block; margin-bottom:5px}
.notebox textarea{width:100%; font:inherit; font-size:.92rem; padding:9px var(--s2); border:1.5px solid var(--rule);
  border-radius:var(--r-s); background:var(--paper-2); color:var(--ink); resize:vertical; min-height:62px}
.notebox textarea:focus{border-color:var(--mark); outline:none; background:var(--paper)}
.pl-foot{display:flex; gap:var(--s2); align-items:center; padding:var(--s2) var(--s3); border-top:1px solid var(--rule);
  background:var(--paper-2); flex-wrap:wrap}
.pl-foot .sp{flex:1}
.prog{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:var(--s3)}
.pip{width:26px; height:6px; border-radius:99px; background:var(--rule); border:0; padding:0}
.pip[data-s="ok"]{background:var(--right)} .pip[data-s="no"]{background:var(--wrong)}
.pip[data-s="now"]{background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}

/* cards & dashboard */
.grid{display:grid; gap:var(--s3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.g6{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){ .g6{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3)}
.stat .v{font-family:var(--disp); font-size:2rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.stat .l{font-size:.78rem; color:var(--ink3); font-weight:600; margin-top:5px}
.ucard{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--r); padding:var(--s3); position:relative; overflow:hidden}
.ucard:hover{border-color:var(--accent); transform:translateY(-1px)}
.ucard .rail-strip{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.ucard h4{font-size:1.02rem; margin:3px 0 4px; padding-left:var(--s2)}
.ucard p{margin:0; font-size:.83rem; color:var(--ink3); padding-left:var(--s2); line-height:1.45}
.ucard .meta{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); padding-left:var(--s2)}
.bar{flex:1; height:5px; background:var(--rule-2); border-radius:99px; overflow:hidden}
.bar>i{display:block; height:100%; background:var(--accent); border-radius:99px}
.pct{font-size:.72rem; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums}
.empty{text-align:center; padding:var(--s6) var(--s3); color:var(--ink3)}
.empty b{display:block; font-family:var(--disp); font-size:1.2rem; color:var(--ink2); margin-bottom:6px}
.item{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3); display:grid; gap:var(--s2)}
.item .qq{font-family:var(--serif); font-size:1.04rem}
.item .note{background:var(--mark-soft); border-left:3px solid var(--mark); padding:var(--s2); border-radius:var(--r-s); font-size:.9rem}
.tagrow{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; font-size:.76rem; color:var(--ink3)}

/* login */
.login{min-height:100%; display:grid; place-items:center; padding:var(--s4)}
.lcard{background:var(--paper); border:1px solid var(--rule); border-radius:18px; box-shadow:var(--shadow);
  padding:var(--s5) var(--s4); max-width:460px; width:100%; text-align:center}
.lcard h1{font-size:1.9rem; margin-bottom:6px; letter-spacing:-.015em}
.lcard .sub{color:var(--ink2); font-size:.95rem; margin-bottom:var(--s4)}
.pickrow{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-bottom:var(--s3)}
.pick{background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r); padding:var(--s3) var(--s2);
  display:grid; gap:7px; justify-items:center}
.pick:hover{border-color:var(--accent); background:var(--accent-soft)}
.pick .av{width:42px;height:42px;font-size:1.05rem}
.pick b{font-size:.95rem}
.pick span{font-size:.74rem; color:var(--ink3)}
.or{display:flex; align-items:center; gap:var(--s2); color:var(--ink3); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.09em; font-weight:700; margin:var(--s3) 0}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--rule)}
.paceopts{display:grid; gap:var(--s1); margin:var(--s3) 0; text-align:left}
.paceopt{text-align:left; display:grid; grid-template-columns:auto 1fr; gap:var(--s2); align-items:start; border:1.5px solid var(--rule);
  border-radius:var(--r-s); padding:10px var(--s3); background:var(--paper)}
.paceopt:hover{border-color:var(--accent)}
.paceopt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.paceopt b{font-size:.9rem} .paceopt span{font-size:.78rem; color:var(--ink3); display:block; line-height:1.45}
.paceopt .rd{width:16px;height:16px;border-radius:50%;border:2px solid var(--rule); margin-top:4px}
.paceopt[aria-pressed="true"] .rd{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--paper)}

/* a whole set on one page, and the pills that choose that */
.optbar label{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--ink3);
  background:var(--paper); border:1px solid var(--rule); border-radius:99px; padding:3px 5px 3px 11px}
.optbar label .sw{color:var(--ink); font-weight:600; font-size:.78rem}
.wsheet{display:flex; flex-direction:column; gap:var(--s4)}
.wsq{display:flex; gap:var(--s3); align-items:flex-start}
.wsn{flex:none; width:30px; height:30px; margin-top:10px; border-radius:50%; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink2); font-family:var(--disp); font-weight:700; font-size:.92rem;
  display:grid; place-items:center}
.wsn[data-s="ok"]{border-color:var(--right); background:var(--right-soft); color:var(--right)}
.wsn[data-s="no"]{border-color:var(--wrong); background:var(--wrong-soft); color:var(--wrong)}
.wss{flex:1; min-width:0}
.wsfoot{position:sticky; bottom:0; display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  margin-top:var(--s4); padding:var(--s3) 0 var(--s4);
  background:linear-gradient(to top,var(--ground) 72%,transparent)}
@media (max-width:560px){ .wsq{gap:8px} .wsn{width:24px; height:24px; font-size:.8rem; margin-top:9px} }

/* knowledge map */
.mapwrap{margin:20px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); padding:10px}
.mapsvg{display:block; width:100%; height:auto}
.mape{fill:none; stroke:var(--rule); stroke-width:1.8}
.mape.lit{stroke:var(--accent); stroke-width:2.6}
.mape.dim{stroke:var(--rule-2)}
.mapn{cursor:pointer}
.mapn rect{transition:filter .15s ease}
.mapn:hover rect{filter:brightness(.97)}
.mapn.dim{opacity:.32}
.mapn.carried .mapt{fill:var(--ink2)}
.mapn.carried .mapnum{font-size:8.5px; letter-spacing:.04em; text-transform:uppercase}
.mapn:focus-visible rect{outline:2px solid var(--accent); outline-offset:2px}
.mapnum{font:700 9.5px var(--sans); fill:var(--ink3); text-anchor:start}
.mappct{font:700 9.5px var(--sans); fill:var(--ink3); text-anchor:end}
.mapt{font:600 11px var(--sans); fill:var(--ink); text-anchor:middle}
.mapkey{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--ink2)}
.mapkey i{width:14px; height:14px; border-radius:3px; border:1.5px solid; display:inline-block}
.mapnote{font-size:.82rem; color:var(--ink3); margin:12px 0 0; max-width:64ch}
.mapdrag{display:none; font-size:.78rem; color:var(--ink3); margin:8px 0 0}
@media (max-width:900px){ .mapdrag{display:block} }
.maprow{display:flex; flex-wrap:wrap; gap:8px}
.mapchip{text-align:left; border:1px solid var(--rule); border-radius:var(--r-s); padding:7px 11px; background:var(--paper)}
.mapchip:hover{border-color:var(--accent)}
.mapchip b{display:block; font-size:.84rem; font-weight:600}
.mapchip span{display:block; font-size:.72rem; color:var(--ink3); margin-top:1px}
.mapchip[data-state="weak"]{border-color:var(--wrong); background:var(--wrong-soft)}
.mapchip[data-state="solid"]{border-color:var(--right); background:var(--right-soft)}
.mapchip[data-state="shaky"]{border-color:var(--mark); background:var(--mark-soft)}
.backtrack{border-left:3px solid var(--mark); background:var(--mark-soft); border-radius:0 var(--r-s) var(--r-s) 0;
  padding:11px var(--s3); margin-top:12px; font-size:.88rem; line-height:1.55}
.backtrack b{display:block; margin-bottom:2px}

/* big ideas: the front of the knowledge map, one idea's ladder, where-am-I lines */
.findbox{display:flex; align-items:center; gap:10px; width:100%; max-width:560px; text-align:left;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r); padding:11px 14px;
  font-size:1rem; color:var(--ink3)}
.findbox:hover{border-color:var(--accent)}
.findbox span{flex:1}
.findbox kbd,.finder-in kbd{font:600 .75rem var(--sans); border:1px solid var(--rule); border-radius:5px; padding:1px 6px; color:var(--ink3)}
.ideah{font-size:1.15rem; margin:30px 0 12px}
.ideacard h4{font-size:1.08rem}
.steps-strip{display:flex; gap:4px; flex-wrap:wrap; flex:1}
.step{display:inline-block; width:18px; height:10px; border-radius:3px; border:1.5px solid var(--rule); background:var(--paper)}
.step.mine{box-shadow:0 0 0 2px var(--accent-soft); outline:1.5px solid var(--accent); outline-offset:1px}
.ladder{list-style:none; margin:24px 0 8px; padding:0; position:relative}
.ladder::before{content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px; background:var(--rule)}
.rung{display:grid; grid-template-columns:36px 1fr; gap:14px; padding:0 0 22px; position:relative}
.rungdot{width:36px; height:36px; border-radius:50%; border:2px solid; display:grid; place-items:center;
  font:700 .9rem var(--sans); color:var(--ink); background:var(--paper); position:relative; z-index:1}
.rungbody{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3)}
.rungbody h3{font-size:1.15rem; margin:2px 0 4px}
.rungbig{font-family:var(--serif); color:var(--ink2); margin:0 0 10px}
.linkbtn.big{font:inherit; color:var(--ink); margin:0}
.linkbtn.big:hover{color:var(--accent)}
.mapchip.sm{padding:4px 9px} .mapchip.sm b{font-size:.8rem}
.ideasub{margin:22px 0 8px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3)}
.crumbs{font-size:.78rem; color:var(--ink3); line-height:1.5; margin:0 0 6px}
.crumbs .linkbtn,.idealine .linkbtn{display:inline; margin:0; font-size:inherit}
.idealine{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; font-size:.84rem; margin:0 0 10px}
.idealine .linkbtn b{font-weight:700}
.linkbtn.term{display:inline; margin:0; font:inherit; color:var(--accent-2); text-align:left}
/* concepts as words: a dot and a link inside a line of text, never a wall of boxes */
.sdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 6px 1px 0; vertical-align:middle; flex:none}
.sdot.none{border:1.5px solid var(--ink3); width:8px; height:8px; background:none; opacity:.55}
.tlink{background:none; border:0; padding:0; font:inherit; color:var(--accent-2); text-align:left; cursor:pointer}
.tlink:hover{text-decoration:underline; text-underline-offset:3px}
.tsep{color:var(--ink3); margin:0 .5em}
.tlist{line-height:1.9}
.rungterms{margin:0; font-size:.9rem}
.glossbar{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:0 0 14px}
.glossbar input[type=text]{flex:1 1 220px; max-width:380px; font-family:var(--sans); font-size:1rem}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:99px; padding:2px; background:var(--paper)}
.seg button{border:0; background:none; border-radius:99px; padding:6px 13px; font-size:.84rem; font-weight:600; color:var(--ink2)}
.seg button span{font-weight:500; color:var(--ink3); margin-left:3px; font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-2)}
.glossnote{font-size:.9rem; margin:0 0 12px}
.azbar{display:flex; flex-wrap:wrap; gap:2px; margin:0 0 6px; padding:8px 0; border-bottom:1px solid var(--rule)}
.azbar a{min-width:26px; text-align:center; padding:3px 4px; border-radius:6px; font:700 .8rem var(--sans); color:var(--ink2); text-decoration:none}
.azbar a:hover{background:var(--accent-soft); color:var(--accent-2)}
.gloss{columns:2 340px; column-gap:40px}
.gl{break-inside:avoid-column}
.gl h2{font-size:1.4rem; color:var(--accent); margin:18px 0 4px; scroll-margin-top:80px}
.gl dl{margin:0}
.ge{break-inside:avoid; padding:7px 0; border-bottom:1px solid var(--rule-2)}
.ge dt{font-weight:700; font-size:.98rem}
.ge dt .tlink{color:var(--ink)}
.ge dd{margin:2px 0 0 14px; font-family:var(--serif); font-size:.92rem; color:var(--ink2); line-height:1.5}
.gwhere{display:block; font-family:var(--sans); font-size:.74rem; color:var(--ink3); margin-top:2px}
.cterm{font-size:2.4rem; margin:4px 0 8px; letter-spacing:-.02em}
.cdef{font-family:var(--serif); font-size:1.25rem; line-height:1.55; color:var(--ink); margin:0; max-width:56ch}
.cstatus{font-size:.88rem; color:var(--ink2); margin:12px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cfacts{display:grid; grid-template-columns:9rem 1fr; gap:14px 18px; margin:28px 0 0; padding-top:18px; border-top:1px solid var(--rule)}
.cfacts dt{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); padding-top:3px}
.cfacts dd{margin:0; font-size:.95rem}
.cdeep{display:block; font-size:.85rem; color:var(--ink3); margin-top:2px}
.miniladder{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.miniladder li{border:1px solid var(--rule); border-radius:8px; padding:5px 10px; font-size:.82rem; background:var(--paper)}
.miniladder li .tlink{color:var(--ink2)}
.miniladder li span{display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.miniladder li.here{border-color:var(--accent); background:var(--accent-soft)}
.miniladder li.here .tlink{color:var(--accent-2); font-weight:600}
@media (max-width:560px){ .cfacts{grid-template-columns:1fr; gap:4px} .cfacts dd{margin-bottom:10px} .cterm{font-size:2rem} }

/* the finder: one search for the whole site */
#finder{position:fixed; inset:0; z-index:90; background:rgba(10,20,18,.42); display:flex; justify-content:center;
  align-items:flex-start; padding:min(12vh,90px) 16px 16px}
body.finding{overflow:hidden}
.finder-card{width:100%; max-width:620px; max-height:calc(100vh - 120px); display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.finder-in{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--rule)}
.finder-in > span{font-size:1.2rem; color:var(--ink3)}
.finder-in input{flex:1; min-width:0; border:0; outline:none; background:none; color:var(--ink); font:400 1.05rem var(--sans); padding:6px 0}
#findres{overflow-y:auto; padding:6px 8px 12px}
.findgroup h4{margin:12px 6px 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink3)}
.findhit{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; width:100%; text-align:left; background:none;
  border:0; border-radius:var(--r-s); padding:8px 10px}
.findhit b{font-size:.95rem}
.findhit .findsub{flex-basis:100%; font-size:.78rem; color:var(--ink3)}
.findhit:hover,.findhit.on{background:var(--accent-soft)}

/* chapter reviews: the rail entry, the concept review, the practice-test report */
.unit-link.rev{color:var(--mark); font-weight:600}
.unit-link.rev .n{color:var(--mark)}
.unit-link.rev[aria-current="true"]{background:var(--mark-soft); color:var(--mark)}
.crev{border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); padding:var(--s2) var(--s3); margin:0 0 var(--s2)}
.crev > summary{cursor:pointer; font-family:var(--disp); font-weight:600; font-size:1.05rem; padding:4px 0; list-style-position:outside}
.crev > summary .eyebrow{margin-right:6px}
.crev[open] > summary{margin-bottom:4px}
.crev .chip{vertical-align:middle; margin-left:4px}
.testreport{margin-top:var(--s4); scroll-margin-top:80px}
.testreport h4{margin:18px 0 8px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3)}
.trows{width:100%; border-collapse:collapse; margin-top:14px; font-size:.9rem}
.trows td{padding:8px 6px; border-top:1px solid var(--rule-2); vertical-align:middle}
.trows td:nth-child(2){white-space:nowrap; font-weight:700; text-align:right; padding-right:14px}
.trows td:last-child{text-align:right}
@media (max-width:560px){ .trows td:last-child .row{justify-content:flex-end} }

/* a figure inside a worked example, and the interactive that may follow one */
.ex .exfig{padding:var(--s2) var(--s3); background:var(--paper-2); border-bottom:1px dashed var(--rule)}
.tryit{border:1.5px solid var(--accent); border-radius:var(--r); background:var(--paper); padding:var(--s3); margin:calc(-1 * var(--s1)) 0 var(--s4)}
.tryhead b{display:block; font-family:var(--disp); font-size:1.05rem}
.tryhead span{display:block; font-size:.85rem; color:var(--ink2); margin-top:2px}
.tryctl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s2) var(--s4); margin:var(--s3) 0 var(--s2)}
.tryctl label{display:block; font-size:.85rem; font-weight:600; color:var(--ink2)}
.tryctl output{float:right; font-variant-numeric:tabular-nums; color:var(--accent-2)}
.tryctl input[type=range]{display:block; width:100%; margin-top:6px; accent-color:var(--accent)}
.tryfig{margin:var(--s1) 0}
.pj-roof{fill:var(--rule-2); stroke:var(--ink3); stroke-width:1.2}
.pj-link{stroke:var(--mark); stroke-width:1.2; stroke-dasharray:3 3}
.pj-ball{fill:var(--mark); stroke:var(--paper); stroke-width:1.5}
.pj-trace{fill:var(--accent); stroke:var(--paper); stroke-width:1.5}
.tryread{font-size:.9rem; line-height:1.55}
.tryread p{margin:0 0 6px; font-size:1.05rem}
.tryread ul{margin:0; padding-left:1.2rem}
.tryread li{margin:3px 0}

/* concepts: key ideas in a hint, the trace-back after a miss, the concept map */
.keyidea{margin:4px 0 0}
.keyidea + .keyidea{margin-top:12px}
.keyideas{margin-top:12px; padding-top:10px; border-top:1px solid color-mix(in srgb,var(--mark) 28%,transparent)}
.linkbtn{display:block; background:none; border:0; padding:0; margin-top:4px; text-align:left;
  font:600 .8rem var(--sans); color:var(--accent)}
.linkbtn:hover{text-decoration:underline}
.trace-item{border-top:1px solid color-mix(in srgb,var(--mark) 28%,transparent); margin-top:12px; padding-top:10px}
.trace-h{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.backtrack .trace-h b{display:inline; margin:0; font-family:var(--disp); font-size:1.02rem}
.trace-item p{margin:4px 0 0; font-family:var(--serif)}
.backtrack .trace-meta,.trace-item .trace-meta{font-family:var(--sans); font-size:.8rem; color:var(--ink2); line-height:1.5}
.focusnote{margin:0 0 var(--s3)}
.sec.focus{background:var(--mark-soft); border-radius:var(--r); box-shadow:0 0 0 12px var(--mark-soft); scroll-margin-top:90px}
.vocab div.focus{background:var(--mark-soft); scroll-margin-top:90px}
input.cfind{display:block; width:100%; max-width:440px; font-family:var(--sans); font-size:1rem}
.cgroup{margin-top:var(--s4)}
.cgroup h2{font-size:1.05rem; margin:0 0 10px}
.cgroup h2 span{font:700 .72rem var(--sans); color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; margin-right:4px}
.mapchip[aria-current="true"]{box-shadow:0 0 0 2px var(--accent)}
.mapchip[data-state="started"]{border-color:var(--accent); background:var(--accent-soft)}
.cdetail{margin:var(--s3) 0 0; scroll-margin-top:80px}
.cdetail h4{margin:18px 0 6px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3)}
.cdef{font-family:var(--serif); font-size:1.08rem; margin:0}
.clevel{display:grid; grid-template-columns:7.5rem 1fr; gap:10px; align-items:start; margin-top:8px}
.clevel > span{font-size:.76rem; font-weight:600; color:var(--ink3); padding-top:8px}
@media (max-width:560px){ .clevel{grid-template-columns:1fr; gap:4px} .clevel > span{padding-top:0} }

/* drawer / responsive */
.scrim{display:none; position:fixed; inset:0; background:rgba(10,20,18,.4); z-index:40}
@media (max-width:860px){
  .rail{position:fixed; left:0; top:0; bottom:0; z-index:50; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow)}
  body.nav .rail{transform:translateX(0)} body.nav .scrim{display:block}
  .menubtn{display:inline-flex} .wrap{padding:var(--s4) var(--s3) var(--s6)} .topbar{padding-inline:var(--s3)}
  /* Five pills plus the account widget do not fit once the rail is overlaid,
     and every pill carries an icon that reads on its own. */
  .homebtn span{display:none} .homebtn{padding:5px 10px}
  .vocab div{grid-template-columns:1fr; gap:2px}
}
/* The top bar pill grew with every course added, until it pushed the whole page
   sideways on a phone. Below this width the pace and user switches live on the
   Course & pace page instead, which is one tap away in the menu. */
@media (max-width:560px){
  .who #paceBtn, .who #outBtn{display:none}
  .who b{max-width:7ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .homebtn span{display:none}
  .homebtn{padding:5px 10px}
  select.sw{max-width:11ch}
}
@media (prefers-reduced-motion:reduce){ .rail{transition:none} .ucard:hover{transform:none} }

/* ---------- printable document: shown on screen in the print view, and on paper ---------- */
#printview{position:fixed; inset:0; z-index:100; background:var(--ground); overflow-y:auto}
@media screen{ body.pv{overflow:hidden} }
.pv-bar{position:sticky; top:0; z-index:2; display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  padding:10px var(--s3); padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--paper); border-bottom:1px solid var(--rule)}
.pv-bar b{font-family:var(--disp); font-size:1rem; margin-right:auto}
.pv-hint{flex-basis:100%; font-size:.8rem; color:var(--ink3); margin:0; line-height:1.5}
.pdoc{max-width:210mm; margin:var(--s4) auto var(--s6); padding:16mm 15mm; background:#fff; color:#15171a;
  box-shadow:var(--shadow); font-size:11.5pt; line-height:1.5}
.pdoc .psheet{padding-bottom:9mm; margin-bottom:9mm; border-bottom:2px dashed #c9c9c9}
.pdoc .psheet:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.pdoc .phead{border-bottom:2px solid #000; padding-bottom:6pt; margin-bottom:12pt; display:flex;
  justify-content:space-between; align-items:flex-end; gap:12pt; flex-wrap:wrap}
.pdoc .phead h2{font-size:17pt; margin:0; font-family:var(--disp)}
.pdoc .phead .pm{font-size:9pt; color:#444; text-align:right}
.pdoc .pname{margin:8pt 0 12pt; font-size:9.5pt; color:#333; border-top:1px solid #bbb; padding-top:6pt}
.pdoc .psec{margin:0 0 11pt}
.pdoc .psec h3{font-size:12.5pt; margin:0 0 3pt; border-bottom:1px solid #999; padding-bottom:2pt; font-family:var(--disp)}
.pdoc .psec p{margin:0 0 5pt; font-family:var(--serif); line-height:1.55}
.pdoc .pdiscover .lead-in{font-weight:700}
.pdiscover .punch{border-top:.5pt solid #bbb; padding-top:5pt; margin-top:5pt}
.psheet .figwrap{margin:6pt 0}
.pbox{border:1px solid #666; padding:6pt 8pt; margin:6pt 0; background:#f4f4f4}
.pdoc .pbox h4{margin:0 0 2pt; font-size:9pt; text-transform:uppercase; letter-spacing:.06em; font-family:var(--sans)}
.pdoc .pq{margin:0 0 10pt; display:grid; grid-template-columns:22pt 1fr; gap:4pt}
.pdoc .pq .pn{font-weight:700}
.pdoc .pq .pt{font-family:var(--serif)}
.pdoc .pwork{height:52pt; border-bottom:1px dotted #999; margin-top:4pt}
.pdoc .pwork.tall{height:88pt}
.pdoc .pchoices{display:grid; grid-template-columns:repeat(auto-fit,minmax(96pt,1fr)); gap:2pt 10pt; margin-top:3pt; font-family:var(--serif)}
.pdoc .psol{margin:0 0 9pt; padding-left:22pt; text-indent:-22pt}
.pdoc .psol ol{margin:2pt 0 0 14pt; padding:0; font-family:var(--serif); text-indent:0}
.pdoc .pans{font-weight:700}
.pdoc .pex{border:1px solid #999; padding:6pt 8pt; margin:6pt 0}
.pdoc .pex ol{margin:4pt 0 0 14pt; padding:0}
.pdoc .pfoot{margin-top:10pt; font-size:8.5pt; color:#555; border-top:1px solid #bbb; padding-top:4pt}
.pdoc .pvocab{width:100%; border-collapse:collapse; font-size:10pt}
.pdoc .pvocab td{border:1px solid #999; padding:3pt 5pt; vertical-align:top}
.pdoc .pvocab td:first-child{font-weight:700; width:130pt}
.pdoc .fig{max-height:170pt}
.pdoc a{color:#000; text-decoration:none}
@media print{
  /* The address on every printed page; see the same rule in site.css. The app
     pages do not load site.css, so it is stated here too rather than left off
     the half of the site that gets printed most. */
  body::after{content:"aldenhouse.org"; position:fixed; left:0; right:0; bottom:0;
    text-align:center; font:9.5pt/1 system-ui,-apple-system,sans-serif;
    letter-spacing:.04em; color:#6b736b}
  body{background:#fff!important}
  body.pv #app, body.pv .scrim, body.pv #login, body.pv .pv-bar{display:none!important}
  body.pv #printview{position:static!important; overflow:visible!important; background:#fff!important}
  body.pv .pdoc{max-width:none; margin:0; padding:0; box-shadow:none}
  body.pv .pdoc .psheet{page-break-after:always; border-bottom:0; margin-bottom:0; padding-bottom:0}
  body.pv .pdoc .psheet:last-child{page-break-after:auto}
  .pdoc .psec,.pdoc .pq,.pdoc .psol,.pdoc .pex{break-inside:avoid}
  /* The bottom margin is wider than the sides to leave room for the printed
     address; a separate @page rule for it was silently overridden by this
     shorthand, which comes later in the file. */
  @page{margin:16mm 15mm 18mm}
}