:root{
  --bg:#F4F7F6; --surface:#FFFFFF; --surface-2:#FAFCFB; --sunk:#EDF2F1;
  --ink:#131C1B; --ink-2:#4E5C59; --ink-3:#7C8A87;
  --line:#E0E8E6; --line-2:#CBD8D5;
  --brand:#116B4E; --brand-ink:#0C583F; --brand-soft:#E5F0E9; --brand-line:#AAD2BC;
  --flag:#B93D34; --flag-soft:#FBECEA; --flag-line:#EFC3BD;
  --gold:#8A6112; --gold-soft:#FAF1DE; --gold-line:#E4D0A2;
  --blue:#2A548F; --blue-soft:#E9EFF8; --blue-line:#BDCDE6;
  --credit:#CDEFD8; --credit-ink:#0C5735;
  --shadow:0 1px 2px rgba(16,38,30,.06), 0 8px 24px -12px rgba(16,38,30,.18);
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1413; --surface:#151E1D; --surface-2:#192423; --sunk:#101817;
    --ink:#E7EFEC; --ink-2:#A2B2AE; --ink-3:#788784;
    --line:#26312F; --line-2:#33413E;
    --brand:#4CBE8E; --brand-ink:#86DBAE; --brand-soft:#132E23; --brand-line:#27553E;
    --flag:#F08D82; --flag-soft:#2E1A18; --flag-line:#5A302B;
    --gold:#E5B65C; --gold-soft:#2B2214; --gold-line:#55432A;
    --blue:#8FB1E4; --blue-soft:#16202F; --blue-line:#2C3D57;
    --credit:#164930; --credit-ink:#A4EFBE;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1413; --surface:#151E1D; --surface-2:#192423; --sunk:#101817;
  --ink:#E7EFEC; --ink-2:#A2B2AE; --ink-3:#788784;
  --line:#26312F; --line-2:#33413E;
  --brand:#4CBE8E; --brand-ink:#86DBAE; --brand-soft:#132E23; --brand-line:#27553E;
  --flag:#F08D82; --flag-soft:#2E1A18; --flag-line:#5A302B;
  --gold:#E5B65C; --gold-soft:#2B2214; --gold-line:#55432A;
  --blue:#8FB1E4; --blue-soft:#16202F; --blue-line:#2C3D57;
  --credit:#164930; --credit-ink:#A4EFBE;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.25}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
a{color:var(--brand-ink); text-decoration:none}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- app shell ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px;
  padding:10px 20px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; font-size:17px}
.brand .mark{width:26px; height:26px; border-radius:7px; background:var(--brand); display:grid; place-items:center; flex:none}
.brand .mark svg{display:block}
.picker{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:999px;
  padding:5px 12px 5px 10px; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
}
.picker b{color:var(--ink); font-weight:700}
.picker.has-menu{position:relative; cursor:pointer; user-select:none}
.picker.has-menu:hover{border-color:var(--brand); color:var(--ink)}
.picker .bchev{opacity:.6; flex:none}
.picker .bmenu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:240px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:6px;
  box-shadow:0 14px 40px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
  display:flex; flex-direction:column; gap:2px; cursor:default;
}
.picker .bmenu[hidden]{display:none}
.picker .bmenu button{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  background:none; border:0; border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit; color:var(--ink-2); width:100%;
}
.picker .bmenu button:hover{background:var(--sunk)}
.picker .bmenu button b{font-size:13.5px; color:var(--ink)}
.picker .bmenu button span{font-size:11.5px; color:var(--ink-3); font-weight:500}
.picker .bmenu button[aria-current="true"]{background:var(--brand-soft)}
.picker .bmenu button[aria-current="true"] b{color:var(--brand)}
.search{
  flex:1 1 200px; min-width:140px; max-width:360px; display:flex; align-items:center; gap:8px;
  background:var(--sunk); border:1px solid transparent; border-radius:9px; padding:7px 11px; color:var(--ink-3); font-size:13px;
}
.top-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.pill-free{
  font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--brand-ink);
  background:var(--brand-soft); border:1px solid var(--brand-line); padding:5px 10px; border-radius:999px;
}
.streak{font-size:12.5px; font-weight:700; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); padding:5px 10px; border-radius:999px}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#116B4E,#2A548F); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800}

.shell{display:grid; grid-template-columns:262px minmax(0,1fr); align-items:start}
.sidebar{
  position:sticky; top:57px; align-self:start; height:calc(100vh - 57px); overflow:auto;
  border-right:1px solid var(--line); background:var(--surface); padding:16px 12px 40px;
}
.side-h{display:flex; align-items:center; justify-content:space-between; padding:6px 8px 8px}
.side-h .eyebrow{font-size:10.5px}
.progress-mini{font-size:11px; font-weight:700; color:var(--brand-ink)}
.unit{margin-bottom:4px}
.unit-btn{
  width:100%; display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:9px;
  font-size:13px; font-weight:700; color:var(--ink-2); text-align:left;
}
.unit-btn:hover{background:var(--sunk)}
.unit-btn .chev{margin-left:auto; color:var(--ink-3); transition:transform .18s}
.unit[data-open="true"] .chev{transform:rotate(90deg)}
.unit-list{display:none; padding:2px 0 6px 8px; margin-left:8px; border-left:1px solid var(--line)}
.unit[data-open="true"] .unit-list{display:block}
.sp{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:6px 8px; border-radius:8px; font-size:12.5px; color:var(--ink-2); line-height:1.35;
}
.sp:hover{background:var(--sunk)}
.sp[aria-current="true"]{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--line-2)}
.dot.done{background:var(--brand)}
.dot.part{background:var(--gold)}
.side-sep{margin:14px 8px 8px; border-top:1px solid var(--line); padding-top:12px}

.main{min-width:0; padding:0 0 80px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px}

/* ---------- spec point header ---------- */
.sp-head{background:var(--surface); border-bottom:1px solid var(--line); padding-block:22px 0}
.crumbs{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-bottom:10px}
.crumbs span{color:var(--ink-3)}
.title-row{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.title-row h1{font-size:clamp(24px,3.4vw,32px); font-weight:800}
.code{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); padding:3px 8px; border-radius:6px; border:1px solid var(--brand-line)}
.badges{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.badge{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface-2)}
.badge.hard{color:var(--flag); background:var(--flag-soft); border-color:var(--flag-line)}
.badge.a2{color:var(--blue); background:var(--blue-soft); border-color:var(--blue-line)}
.ring-wrap{display:flex; align-items:center; gap:12px; margin-left:auto}
.ring{position:relative; width:62px; height:62px; flex:none}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:800}
.ring-wrap .lab{font-size:12px; color:var(--ink-2); font-weight:600; max-width:120px; line-height:1.35}

/* pathway tabs */
.path{display:flex; gap:2px; margin-top:6px; overflow-x:auto; scrollbar-width:thin}
.step{
  display:flex; align-items:center; gap:9px; padding:11px 15px 13px; border-bottom:2.5px solid transparent;
  white-space:nowrap; color:var(--ink-2); font-weight:700; font-size:13.5px;
}
.step:hover{color:var(--ink)}
.step[aria-selected="true"]{color:var(--brand-ink); border-bottom-color:var(--brand)}
.step .n{
  width:21px; height:21px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:11px; font-weight:800; background:var(--sunk); color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;
}
.step[aria-selected="true"] .n{background:var(--brand); color:#fff}
.step .n.ok{background:var(--brand-soft); color:var(--brand-ink)}
.step[aria-selected="true"] .n.ok{background:var(--brand); color:#fff}

/* ---------- layout inside a tab ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:30px; padding-top:26px; align-items:start}
.panel{display:none}
.panel.on{display:block}
.rail{position:sticky; top:78px; display:flex; flex-direction:column; gap:14px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-pad{padding:16px 18px}
.rail-card h4{font-size:13px; font-weight:800; margin-bottom:10px}

/* ---------- level control ---------- */
.levelbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 16px; box-shadow:var(--shadow); margin-bottom:22px;
}
.levelbar .lb-txt{font-size:12.5px; color:var(--ink-2); max-width:520px; flex:1 1 300px; line-height:1.45}
.levelbar .lb-txt b{color:var(--ink)}
.seg{display:flex; background:var(--sunk); border-radius:9px; padding:3px; gap:2px}
.seg button{padding:7px 13px; border-radius:7px; font-size:12.5px; font-weight:700; color:var(--ink-2); white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--brand-ink); box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg button .lv{font-family:"IBM Plex Mono",monospace; font-size:10.5px; opacity:.7; margin-right:5px}

/* ---------- content sections ---------- */
.sec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden}
.sec-head{display:flex; align-items:flex-start; gap:14px; padding:18px 20px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.cp{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; flex:none; margin-top:2px;
}
.sec-head h3{font-size:18px; font-weight:800; flex:1 1 240px}
.simplify{
  font-size:11.5px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid var(--brand-line); padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.simplify:hover{background:var(--brand-line)}
.sec-body{padding:16px 20px 20px}

.specquote{
  border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 8px 8px 0;
  padding:11px 14px; margin-bottom:16px;
}
.specquote .eyebrow{color:var(--blue); margin-bottom:4px}
.specquote p{font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.55; color:var(--ink)}

.prose{font-family:"Source Serif 4", Georgia, serif; font-size:16.5px; line-height:1.65; color:var(--ink)}
.prose p+p{margin-top:12px}
.prose ol,.prose ul{margin:12px 0; padding-left:22px}
.prose li+li{margin-top:7px}
.prose strong{font-weight:600}
.lvl{display:none}
.lvl.on{display:block}
.lvl-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;
  font-family:"Plus Jakarta Sans",sans-serif;
}
.lvl-tag i{width:26px; height:4px; border-radius:2px; background:var(--line-2); font-style:normal; display:block}
.lvl-tag i.f{background:var(--brand)}

mark.ms{background:var(--credit); color:var(--credit-ink); padding:1px 3px; border-radius:3px; font-weight:600}
s.rej{color:var(--flag); text-decoration-thickness:1.5px; opacity:.85}

.flag{
  border:1px solid var(--flag-line); background:var(--flag-soft); border-left:3px solid var(--flag);
  border-radius:0 8px 8px 0; padding:12px 14px; margin:16px 0;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:13.5px; line-height:1.5; color:var(--ink);
}
.flag .eyebrow{color:var(--flag); margin-bottom:5px; display:block}
.note{
  border:1px solid var(--gold-line); background:var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0; padding:12px 14px; margin:16px 0;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:13.5px; line-height:1.5;
}
.note .eyebrow{color:var(--gold); margin-bottom:5px; display:block}

figure{margin:18px 0 6px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); padding:12px; overflow-x:auto}
figure svg{display:block; min-width:520px; width:100%; height:auto}
figure img{display:block; width:100%; min-width:440px; height:auto; border-radius:6px}
.specpage{display:none}
.specpage.on{display:block}
figcaption{font-size:12.5px; color:var(--ink-2); margin-top:10px; line-height:1.45; font-family:"Plus Jakarta Sans",sans-serif}
figcaption b{color:var(--ink)}

table.t{width:100%; border-collapse:collapse; font-size:13.5px; margin:16px 0; font-family:"Plus Jakarta Sans",sans-serif}
.tscroll{overflow-x:auto; margin:16px 0}
.tscroll table.t{margin:0; min-width:480px}
table.t th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px; border-bottom:1px solid var(--line-2); font-weight:700}
table.t td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45}
table.t tr:last-child td{border-bottom:0}
table.t td:first-child{font-weight:700}

/* ---------- inline AI blocks ---------- */
.aibox{border:1px solid var(--line); border-radius:10px; background:var(--surface-2); margin-top:18px; overflow:hidden}
.aibox-h{display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface)}
.aibox-h .ic{width:22px; height:22px; border-radius:6px; background:var(--brand); display:grid; place-items:center; flex:none}
.aibox-h h4{font-size:13px; font-weight:800; flex:1}
.aibox-h .tag{font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
.aibox-b{padding:14px}
.q{font-size:14px; font-weight:700; margin-bottom:8px; line-height:1.45}
.q .marks{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-left:6px}
textarea, input.ti{
  width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:9px;
  padding:10px 12px; font:inherit; font-size:14px; resize:vertical; line-height:1.5;
}
textarea::placeholder{color:var(--ink-3)}
textarea:focus, input.ti:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center}
.btn{
  padding:8px 14px; border-radius:9px; font-size:13px; font-weight:700;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
}
.btn:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line-2)}
.btn.ghost:hover{background:var(--sunk); color:var(--ink)}
.btn.sm{padding:6px 11px; font-size:12px}
.hint{font-size:12px; color:var(--ink-3)}
.out{
  margin-top:12px; border-radius:9px; border:1px solid var(--brand-line); background:var(--brand-soft);
  padding:12px 14px; font-size:13.5px; line-height:1.55; white-space:pre-wrap;
}
.out:empty{display:none}
.out .demo-tag{display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:6px; opacity:.8}
.reveal{margin-top:10px; border:1px dashed var(--line-2); border-radius:9px; padding:12px 14px; background:var(--surface); font-size:13.5px; line-height:1.55}
.reveal[hidden]{display:none}
.reveal .eyebrow{display:block; margin-bottom:6px; color:var(--ink-3)}

/* ---------- recall tab ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:22px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.tile .big{font-size:26px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tile .lab{font-size:12px; color:var(--ink-2); font-weight:600; margin-top:2px}
.tile .sub{font-size:11.5px; color:var(--ink-3); margin-top:6px}

.card-deck{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.fc{
  perspective:1200px; height:230px;
}
.fc-inner{position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.4,.1,.2,1); transform-style:preserve-3d}
.fc[data-flipped="true"] .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column;
  justify-content:center; text-align:center; gap:10px; overflow:auto;
}
.fc-face.back{transform:rotateY(180deg); background:var(--surface-2); text-align:left; justify-content:flex-start}
.fc-face .eyebrow{position:absolute; top:14px; left:20px}
.fc-q{font-size:19px; font-weight:700; line-height:1.4}
.fc-a{font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.6; margin-top:24px}
.grades{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.grades[hidden]{display:none}
.grade{padding:8px 16px; border-radius:9px; font-size:12.5px; font-weight:700; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2)}
.grade:hover{border-color:var(--brand); color:var(--brand-ink)}
.grade small{display:block; font-size:10px; color:var(--ink-3); font-weight:600; margin-top:1px}

.blurred{filter:blur(5px); transition:filter .18s; cursor:pointer}
.blurred:hover{filter:blur(2.5px)}
.blur-list li{margin-bottom:10px}

/* ---------- past paper tab ---------- */
.qrow{
  display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.qrow:last-child{border-bottom:0}
.qrow .src{font-size:13.5px; font-weight:700; flex:1 1 260px; min-width:0}
.qrow .meta{font-size:12px; color:var(--ink-3); margin-top:3px; font-weight:500}
.cps{display:flex; gap:4px; flex-wrap:wrap}
.cpchip{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); padding:2px 6px; border-radius:5px}
.mk{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.covgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.cov{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; font-weight:600}
.cov .tick{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; color:#fff; background:var(--brand)}
.cov.no .tick{background:var(--line-2); color:var(--ink-3)}

/* ---------- mastery tab ---------- */
.bars{display:flex; flex-direction:column; gap:12px}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center}
.bar-row .nm{font-size:13px; font-weight:700}
.bar-row .vl{font-size:11.5px; font-weight:800; color:var(--flag); letter-spacing:.04em; text-transform:uppercase}
.bar{grid-column:1/-1; height:7px; border-radius:4px; background:var(--sunk); overflow:hidden}
.bar i{display:block; height:100%; border-radius:4px; background:var(--flag)}
.trap{display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line)}
.trap:last-child{border-bottom:0}
.trap .x{width:20px; height:20px; border-radius:6px; background:var(--flag-soft); color:var(--flag); display:grid; place-items:center; font-size:12px; font-weight:800; flex:none; border:1px solid var(--flag-line)}
.trap .tx{font-size:13.5px; line-height:1.5}
.trap .tx b{display:block; margin-bottom:2px}
.checkline{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.5}
.checkline:last-child{border-bottom:0}
.checkline input{margin-top:3px; accent-color:var(--brand); width:16px; height:16px; flex:none}
.sentences{display:grid; gap:10px}
.sentence{
  font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.6;
  border-left:3px solid var(--brand); background:var(--brand-soft); padding:11px 14px; border-radius:0 8px 8px 0;
}

/* ---------- corrections ---------- */
.corr{border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--surface-2); margin-bottom:10px}
.corr .ch{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px}
.corr .ch b{font-size:12.5px}
.corr .ch .when{font-size:11px; color:var(--ink-3); margin-left:auto}
.corr .was{font-size:12.5px; color:var(--flag); line-height:1.45}
.corr .now{font-size:12.5px; color:var(--credit-ink); line-height:1.45; margin-top:4px; font-weight:600}

/* ---------- AI dock ---------- */
.dock{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.dock-btn{
  display:flex; align-items:center; gap:9px; background:var(--brand); color:#fff; font-weight:700; font-size:13.5px;
  padding:11px 17px; border-radius:999px; box-shadow:0 10px 30px -8px rgba(17,107,78,.55);
}
.dock-btn:hover{background:var(--brand-ink)}
.dock-panel{
  width:min(370px, calc(100vw - 40px)); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 50px -15px rgba(0,0,0,.35); overflow:hidden;
}
.dock-panel[hidden]{display:none}
.dock-h{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line)}
.dock-h h4{font-size:13.5px; font-weight:800; flex:1}
.dock-body{padding:13px 14px; max-height:min(46vh,340px); overflow:auto; display:flex; flex-direction:column; gap:10px}
.msg{font-size:13.5px; line-height:1.55; padding:9px 12px; border-radius:10px; white-space:pre-wrap}
.msg.bot{background:var(--sunk)}
.msg.me{background:var(--brand-soft); color:var(--brand-ink); align-self:flex-end; max-width:85%; font-weight:600}
.msg.bot:has(p),.msg.bot:has(ul),.msg.bot:has(ol){white-space:normal; padding:11px 13px}
.msg p{margin:0 0 .62em}
.msg p:last-child{margin-bottom:0}
.msg b{font-weight:700; color:var(--ink)}
.msg i{font-style:italic}
.msg ul,.msg ol{margin:.15em 0 .62em; padding-left:1.15em}
.msg ul{list-style:disc}
.msg ol{list-style:decimal}
.msg li{margin:0 0 .28em}
.msg li:last-child{margin-bottom:0}
.msg li::marker{color:var(--ink-3,var(--ink-2))}
.msg sub,.msg sup{font-size:.74em; line-height:0}
.msg sub{vertical-align:-.22em}
.msg sup{vertical-align:.42em}
.msg.bot .cues{margin:.5em 0 0}
.dock-f{display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--line)}
.chips{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 12px}
.chip{font-size:11.5px; font-weight:600; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:5px 10px}
.chip:hover{border-color:var(--brand); color:var(--brand-ink)}

.mockbar{
  background:var(--gold-soft); border-bottom:1px solid var(--gold-line); color:var(--gold);
  font-size:12px; font-weight:700; padding:7px 20px; text-align:center; letter-spacing:.01em;
}
.mockbar span{font-weight:500; color:var(--ink-2)}

/* The specification list is not the page: the button that opens it is always visible,
   labelled, and sits top left. */
.sidetoggle{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px;
  border:1px solid var(--line-2); border-radius:7px; background:var(--surface);
  color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer }
.sidetoggle:hover{ border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft) }
.sidetoggle[aria-expanded="true"]{ border-color:var(--brand); color:var(--brand-ink);
  background:var(--brand-soft) }
@media (max-width:620px){ .sidetoggle .st-t{ display:none } .sidetoggle{ padding:6px 9px } }
@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; flex-direction:row; flex-wrap:wrap}
  .rail>*{flex:1 1 250px}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none; position:static; height:auto; border-right:0; border-bottom:1px solid var(--line)}
  .sidebar.open{display:block}
  .sidetoggle{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface-2)}
  .wrap{padding-inline:16px}
  .search{display:none}
}
@media (max-width:520px){
  .top-right .streak{display:none}
  .picker{display:none}
  .prose{font-size:16px}
  .fc{height:270px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- mastery meters ---------- */
.mastery{margin-left:auto; align-self:flex-start; min-width:250px; flex:0 1 300px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.mastery-h{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px}
.mastery-tot{font-size:19px; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums}
.meters{display:flex; flex-direction:column; gap:7px}
.meter{display:grid; grid-template-columns:96px 1fr 34px; align-items:center; gap:9px}
.meter .mn{font-size:11.5px; font-weight:700; color:var(--ink-2)}
.meter .mb{height:6px; border-radius:3px; background:var(--sunk); overflow:hidden}
.meter .mb i{display:block; height:100%; width:0; border-radius:3px; background:var(--brand); transition:width .45s cubic-bezier(.3,.1,.2,1)}
.meter[data-dim="recall"] .mb i{background:var(--blue)}
.meter[data-dim="application"] .mb i{background:var(--gold)}
.meter[data-dim="exam"] .mb i{background:#8B5CB8}
:root[data-theme="dark"] .meter[data-dim="exam"] .mb i{background:#B489DC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .meter[data-dim="exam"] .mb i{background:#B489DC}}
.meter .mv{font-size:11px; font-weight:800; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums}
.mastery-note{font-size:10.5px; color:var(--ink-3); margin-top:9px; line-height:1.4}

.arena-pill,.chat-pill{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface-2)}
.arena-pill:hover,.chat-pill:hover{border-color:var(--brand); color:var(--brand-ink)}
.arena-pill b{background:var(--brand); color:#fff; border-radius:999px; padding:1px 7px; font-size:11px}
.chat-pill[aria-expanded="false"]{background:var(--brand); color:#fff; border-color:var(--brand)}

.sec-foot{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 20px; border-top:1px solid var(--line); background:var(--surface-2)}
.mchk{display:flex; gap:8px; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer}
.mchk input[type="checkbox"],.mchk input[type="radio"]{accent-color:var(--brand); width:15px; height:15px}
.mchk input[type="number"],.mchk input[type="text"]{
  accent-color:var(--brand); height:auto; min-width:62px; text-align:center;
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink);
}
.arena-add{display:flex; align-items:center; gap:6px; margin-left:auto; font-size:11.5px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); padding:5px 11px; border-radius:999px}
.arena-add:hover{background:var(--brand-line)}
.arena-add.added{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---------- folder chat column ---------- */
.chatcol{position:sticky; top:78px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 96px)}
.chatbox{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; flex:1 1 auto; min-height:420px}
.chat-h{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line)}
.chat-h .ic{width:24px; height:24px; border-radius:7px; background:var(--brand); display:grid; place-items:center; flex:none}
.chat-h h4{font-size:13px; font-weight:800; flex:1; line-height:1.2}
.chat-h .sub{font-size:10.5px; color:var(--ink-3); font-weight:600; display:block; margin-top:1px}
.srcbar{display:flex; gap:4px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.src-chip{font-size:10px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2); border-radius:5px; padding:2.5px 6px; display:flex; align-items:center; gap:4px}
.src-chip i{width:5px; height:5px; border-radius:50%; background:var(--brand); font-style:normal}
.chat-log{flex:1 1 auto; overflow-y:auto; padding:13px 14px; display:flex; flex-direction:column; gap:10px; min-height:180px}
.chat-f{display:flex; gap:7px; padding:11px 12px; border-top:1px solid var(--line)}
.chat-f .ti{font-size:13px; padding:8px 10px}
.qchips{display:flex; gap:5px; flex-wrap:wrap; padding:0 14px 11px}
.cited{font-size:10.5px; color:var(--ink-3); font-weight:600; margin-top:5px; display:block}

/* ---------- exercise / workbook question bank ---------- */
.filters{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filters .lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:3px}
.fbtn{font-size:12px; font-weight:700; padding:6px 11px; border-radius:8px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface)}
.fbtn[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}
.qsec-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:26px 0 12px}
.qsec-h h4{font-size:15px; font-weight:800}
.qsec-h p{font-size:12.5px; color:var(--ink-2); flex:1 1 200px}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:11px; margin-bottom:10px; overflow:hidden}
.qcard.hide{display:none}
.qc-h{display:flex; gap:10px; align-items:flex-start; padding:13px 15px}
.qnum{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; color:var(--ink-3); flex:none; width:26px; padding-top:1px}
.qtext{flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.5; font-weight:600}  /* min-width:0 so a data table in the question scrolls in its .tscroll instead of widening the card */
.qtext .stem{display:block; font-weight:400; font-size:13px; color:var(--ink-2); font-style:italic; margin-bottom:5px}
.qtags{display:flex; gap:5px; align-items:center; flex:none; flex-wrap:wrap; justify-content:flex-end}
/* "A-level worked example · calculating a rate" is longer than a phone; it wraps inside the tag row rather than past the card */
.qtags{min-width:0; flex:0 0 auto; max-width:30%}  /* the tags never take the question's width */
.qtags .mk{white-space:normal; overflow-wrap:anywhere; min-width:0}
/* the shared stem of a real past-paper question, shown above the part in the arenas */
.qtext .pqstem{font-weight:400; font-size:13.5px; color:var(--ink-2); border-left:3px solid var(--line-2); padding:2px 0 2px 11px; margin:0 0 8px}
.qtext .pqstem p{margin:0 0 6px}
.qtext .pqstem p:last-child{margin-bottom:0}
.qc-b{padding:0 15px 14px 51px}
@media (max-width:560px){.qc-b{padding-left:15px}}
.ansbox{margin-top:9px; border:1px dashed var(--line-2); border-radius:9px; padding:11px 13px; background:var(--surface-2); font-size:13.5px; line-height:1.55}
.ansbox[hidden]{display:none}
.ansbox .lead{display:block; margin-bottom:6px}
.ansrule{font-size:12px; color:var(--ink-2); margin-top:8px; padding-top:8px; border-top:1px solid var(--line); line-height:1.5}
.ansrule b{color:var(--gold)}
.acc{color:var(--credit-ink); font-weight:600}
.rejw{color:var(--flag); font-weight:600}

/* ---------- ladder ---------- */
.ladder{margin-top:12px; border:1px solid var(--blue-line); background:var(--blue-soft); border-radius:10px; padding:13px 15px}
.ladder[hidden]{display:none}
.ladder h5{font-size:12.5px; font-weight:800; color:var(--blue); margin-bottom:9px; letter-spacing:.02em; text-transform:uppercase}
.rung{display:grid; grid-template-columns:24px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--blue-line)}
.rung:last-child{border-bottom:0}
.rung .rn{width:24px; height:24px; border-radius:7px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; font-family:"IBM Plex Mono",monospace}
.rung .rb{font-size:13.5px; line-height:1.5}
.rung .rb b{display:block; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--blue); margin-bottom:2px}

/* ---------- past paper ---------- */
.pp{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden}
.pp-h{display:flex; gap:12px; align-items:flex-start; padding:14px 17px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.pp-h .t{flex:1 1 260px; min-width:0}
.pp-h .t b{font-size:14px; display:block}
.pp-h .t span{font-size:12px; color:var(--ink-3); font-weight:600}
.scan{background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:8px; margin:15px 17px; overflow-x:auto}
.scan img{display:block; width:100%; min-width:440px; height:auto; border-radius:3px}
.scan-lab{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:0 17px; margin-top:14px}
.pp-b{padding:0 17px 16px}
.pred{font-size:11px; font-weight:700; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); padding:3px 8px; border-radius:6px; display:inline-block; margin-bottom:8px}

/* ---------- arena ---------- */
.arena{background:linear-gradient(160deg,var(--brand) 0%,#0A4A3C 100%); border-radius:14px; padding:18px 20px; color:#fff; margin-bottom:18px}
:root[data-theme="dark"] .arena{background:linear-gradient(160deg,#134034 0%,#0C2E24 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arena{background:linear-gradient(160deg,#134034 0%,#0C2E24 100%)}}
.arena-h{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.arena-h h3{font-size:19px; font-weight:800; color:#fff}
.arena-h p{font-size:12.5px; color:rgba(255,255,255,.78); flex:1 1 200px}
.arena-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:9px}
.astat{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:10px 12px}
.astat b{display:block; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.astat span{font-size:10.5px; color:rgba(255,255,255,.75); font-weight:600}
.feeds{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; margin-top:14px}
.feed{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:9px 11px; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.9)}
.feed b{display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:2px}
.feed i{font-style:normal; font-weight:800; color:#fff}

.deckbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.deck{font-size:12px; font-weight:700; padding:7px 12px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); display:flex; align-items:center; gap:7px}
.deck[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}
.deck small{font-size:10.5px; opacity:.7; font-weight:700}

.card2{perspective:1400px; height:300px; margin-bottom:14px}
.card2-in{position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.4,.1,.2,1); transform-style:preserve-3d}
.card2[data-flipped="true"] .card2-in{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); padding:26px 28px; display:flex; flex-direction:column; overflow:auto}
.face.b{transform:rotateY(180deg); background:var(--surface-2)}
.face .ftop{display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.ftag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); padding:2px 7px; border-radius:5px}
.ftag.origin{color:var(--gold); background:var(--gold-soft); border-color:var(--gold-line)}
.fcue{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-left:auto}
.fprompt{font-size:20px; font-weight:700; line-height:1.38; flex:1 1 auto; display:flex; align-items:center}
@media (max-width:560px){.fprompt{font-size:17px}}
.fans{font-family:"Source Serif 4",Georgia,serif; font-size:16px; line-height:1.62; flex:1 1 auto}
.fans ul{margin:0; padding-left:19px}
.fans li+li{margin-top:6px}
.fhow{font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; color:var(--ink-2); border-top:1px solid var(--line); margin-top:13px; padding-top:10px; line-height:1.45}
.fhow b{color:var(--gold)}

@media (max-width:1180px){
  .chatcol{position:static; max-height:none}
  .chatbox{min-height:360px}
}
@media (max-width:900px){
  .mastery{margin-left:0; flex:1 1 100%}
  .meter{grid-template-columns:88px 1fr 32px}
}

/* ---------- section gating ---------- */
.sec[data-locked="true"] > *:not(.sec-head):not(.lockbar){display:none}
.sec[data-locked="true"]{box-shadow:none; background:var(--surface-2)}
.sec[data-locked="true"] .sec-head{border-bottom:0; opacity:.65}
.sec[data-locked="true"] .simplify{display:none}
.lockbar{display:none; align-items:center; gap:11px; padding:14px 20px; border-top:1px dashed var(--line-2); font-size:13px; color:var(--ink-2); background:var(--sunk)}
.sec[data-locked="true"] .lockbar{display:flex}
.lockbar svg{flex:none; color:var(--ink-3)}
.lockbar b{color:var(--ink)}
.gatehint{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); padding:6px 11px; border-radius:8px; margin-top:12px}
.gatehint.done{color:var(--brand-ink); background:var(--brand-soft); border-color:var(--brand-line)}
.cpcounts{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; margin-bottom:4px}
.cpcount{border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--surface-2)}
.cpcount b{display:block; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums}
.cpcount span{font-size:11px; color:var(--ink-2); font-weight:600}

/* ---------- arena pages ---------- */
.arena-page{padding-block:26px 80px}
.arena-hero{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px}
.arena-hero h1{font-size:clamp(24px,3.2vw,31px); font-weight:800}
.arena-hero p{font-size:14px; color:var(--ink-2); max-width:60ch; margin-top:7px}
.arena-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px; margin:20px 0 24px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:12px 14px; box-shadow:var(--shadow)}
.kpi b{display:block; font-size:23px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi span{font-size:11.5px; color:var(--ink-2); font-weight:600}
.kpi.hot b{color:var(--flag)}
.duebar{background:linear-gradient(160deg,var(--brand) 0%,#0A4A3C 100%); border-radius:14px; padding:18px 20px; color:#fff; margin-bottom:24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
:root[data-theme="dark"] .duebar{background:linear-gradient(160deg,#134034 0%,#0C2E24 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .duebar{background:linear-gradient(160deg,#134034 0%,#0C2E24 100%)}}
.duebar h3{font-size:18px; font-weight:800; color:#fff}
.duebar p{font-size:12.5px; color:rgba(255,255,255,.8); margin-top:4px; max-width:50ch}
.duebar .spread{display:flex; gap:5px; flex-wrap:wrap; margin-top:11px}
.duebar .spread span{font-size:10.5px; font-weight:700; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); padding:3px 8px; border-radius:6px}
.arena-tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.arena-tools .lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.dtable{width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
/* an essay plan, opened from its own row in the Essay Arena */
.essayrow{cursor:pointer}
.essayrow:hover{background:var(--sunk)}
.essayplan>td{background:var(--surface-2); border-top:0}
.essaybody{padding:4px 2px 10px; max-width:74ch}
.essaybody .eyebrow{display:block; margin:12px 0 4px}
.essaybody .eyebrow:first-child{margin-top:2px}

.dwrap{overflow-x:auto; border-radius:12px; box-shadow:var(--shadow)}
.dtable th{text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line-2); white-space:nowrap}
.dtable td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable tr.topic td{background:var(--sunk); font-weight:800; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); padding:8px 12px}
.dtable td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace; font-size:12px; white-space:nowrap}
.dcode{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--brand-ink); font-weight:600}
.dname{font-weight:600}
.mbar{display:inline-flex; align-items:center; gap:8px; min-width:118px}
.mbar .t{width:64px; height:6px; border-radius:3px; background:var(--sunk); overflow:hidden; flex:none}
.mbar .t i{display:block; height:100%; border-radius:3px; background:var(--brand)}
.mbar.low .t i{background:var(--flag)}
.mbar.mid .t i{background:var(--gold)}
.mbar em{font-style:normal; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.duepill{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--sunk); color:var(--ink-3)}
.duepill.on{background:var(--flag-soft); color:var(--flag); border:1px solid var(--flag-line)}
/* New cards are not a warning: a count of cards never met is neutral, so it reads in
   the brand colour rather than the flag one the due count uses. */
.newpill{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-line)}

/* ---- full-screen study: the card, the grades, nothing else ----
   One class on the study host. The bar carries the deck name, what the number keys do
   and the way out; the card centres in whatever height is left. */
.studyfs{position:fixed; inset:0; z-index:70; background:var(--bg); overflow:auto; padding:0 18px 28px;
  display:flex; flex-direction:column; align-items:center}
.studyfs>*{width:100%; max-width:720px; flex:0 0 auto}
.studyfs .studycard{margin-top:6px}
body.studyfs-on{overflow:hidden}
.fsbar{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0 11px; margin-bottom:4px; background:var(--bg); border-bottom:1px solid var(--line)}
.fs-deck{font-weight:650; font-size:14px; letter-spacing:-.01em; flex:1 1 180px; min-width:0; overflow-wrap:anywhere}
.fs-keys{font-size:11.5px; color:var(--ink-3)}
.fs-keys b{font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-weight:700}
.fsbar kbd{font-family:"IBM Plex Mono",monospace; font-size:10px; opacity:.7; margin-left:4px}
@media(max-width:640px){ .studyfs{padding:0 13px 22px} .fs-keys{flex:1 1 100%; order:3} }
.dtable .go{font-size:11.5px; font-weight:700; color:var(--brand-ink); white-space:nowrap}
.dtable tr[data-row]:hover td{background:var(--surface-2); cursor:pointer}
.arena-link b{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--ink-3)}
.arena-link[aria-current="true"] b{color:var(--brand-ink)}
.studycard{margin-bottom:22px}
.et{font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px; white-space:nowrap}
.et.gap{background:var(--flag-soft); color:var(--flag); border:1px solid var(--flag-line)}
.et.rare{background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line)}
.et.ok{background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-line)}


/* ---------- exam application items ---------- */
.appitem{border-top:1px solid var(--line); padding:18px 0 4px}
.appitem:first-of-type{border-top:0; padding-top:4px}
.ap-h{display:flex; gap:11px; align-items:center; margin-bottom:8px}
.ap-h .apn{width:24px; height:24px; border-radius:7px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:800; font-family:"IBM Plex Mono",monospace; flex:none}
.ap-h h4{font-size:15.5px; font-weight:800}
.ap-how{font-size:13.5px; color:var(--ink-2); line-height:1.55; max-width:66ch; margin-bottom:4px}
.ap-do{font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.62; margin-top:12px}
.ap-do ol,.ap-do ul{margin:10px 0; padding-left:22px}
.ap-do li+li{margin-top:6px}
.ap-do p+p{margin-top:10px}
.prose h4{font-family:"Plus Jakarta Sans",sans-serif; font-size:15px; font-weight:800; margin:22px 0 8px; letter-spacing:-.01em}
.prose .lvl>h4:first-of-type{margin-top:14px}

/* ---------- multiple choice ---------- */
.mcq-score{
  font-size:13px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:9px 13px; margin-bottom:14px;
}
.mcq-score b{color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums}
.qcard.mcq .qtext{font-weight:500; font-size:14px; line-height:1.55}
.qcard.mcq .qtext .stem{
  font-style:normal; font-weight:700; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.opts{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.opt{
  display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; background:var(--surface);
  font-size:14px; line-height:1.5; color:var(--ink); transition:border-color .14s, background .14s;
}
.opt:hover:not(:disabled){border-color:var(--brand); background:var(--brand-soft)}
.opt:disabled{cursor:default}
.opt .ol{
  width:23px; height:23px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700;
  background:var(--sunk); color:var(--ink-2);
}
.opt .ot{flex:1 1 auto; min-width:0}
.opt.right{border-color:var(--brand); background:var(--brand-soft)}
.opt.right .ol{background:var(--brand); color:#fff}
.opt.wrong{border-color:var(--flag-line); background:var(--flag-soft)}
.opt.wrong .ol{background:var(--flag); color:#fff}
.opt:disabled:not(.right):not(.wrong){opacity:.62}
.mcq-out{margin-top:14px; border-top:1px solid var(--line); padding-top:13px}
.mcq-out[hidden]{display:none}
.mcq-verdict{font-size:13.5px; line-height:1.5; padding:10px 13px; border-radius:9px; margin-bottom:12px}
.mcq-verdict.ok{background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--ink)}
.mcq-verdict.no{background:var(--flag-soft); border:1px solid var(--flag-line); color:var(--ink)}
.mcq-verdict b{display:block; margin-bottom:2px}
.mcq-why .eyebrow{display:block; margin-bottom:7px}
.mcq-why ol{margin:0; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.mcq-why li+li{margin-top:7px}
.mcq-why li:first-child{color:var(--ink); font-weight:500}
.mcq-think{
  margin-top:12px; font-size:13.5px; line-height:1.5; border-left:3px solid var(--brand);
  background:var(--brand-soft); border-radius:0 8px 8px 0; padding:10px 13px;
}
.mcq-think b{color:var(--brand-ink)}
.dsub{font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.45}


/* =====================================================
   #landingView Landing page.
   Left-aligned and editorial. Deep slabs of colour rather than a
   soft wash; a tight sans for display rather than a serif; a sticky
   index down the stages rather than alternating tilted screenshots.
   ============================================================ */
#landingView{display:none}
#landingView.on{display:block}
body.landing .topbar, body.landing .shell{display:none}

#landingView .wrap-l{max-width:1180px; margin:0 auto; padding-inline:28px}
#landingView .h2{
  font-size:clamp(27px,3.7vw,43px); font-weight:800; letter-spacing:-.032em; line-height:1.06;
  margin-bottom:16px; text-wrap:balance; hyphens:manual;
}
#landingView .tag{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:16px;
}
#landingView .tag::before{content:""; width:20px; height:2px; background:var(--brand); border-radius:2px}
#landingView .lede{font-size:clamp(15.5px,1.5vw,18px); line-height:1.62; color:var(--ink-2); max-width:64ch}
#landingView .lsec{padding-block:clamp(64px,8.5vw,118px); opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1)}
#landingView .lsec.in{opacity:1; transform:none}
#landingView .lsec.band{background:var(--surface); border-block:1px solid var(--line)}
#landingView .lsec-head{max-width:70ch; margin-bottom:clamp(34px,4vw,56px)}

/* ---------- hero: a deep slab ---------- */
#landingView .hero{
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255,255,255,.1) 0%, transparent 55%),
    linear-gradient(168deg, #0F5F47 0%, #0A4735 52%, #073226 100%);
  color:#EAF3EE; position:relative; overflow:hidden;
  padding-block:clamp(32px,4vw,52px) clamp(56px,7vw,92px);
}
#landingView .hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
#landingView .hero-in{
  max-width:1180px; margin:0 auto; padding-inline:28px;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1.02fr);
  gap:clamp(30px,4vw,60px); align-items:start;
}
#landingView .hero-r{padding-top:6px}
#landingView .hero-brand{
  display:inline-flex; align-items:center; gap:9px; font-weight:800;
  letter-spacing:-.03em; font-size:16.5px; margin-bottom:clamp(30px,5vw,58px);
}
#landingView .hero-brand .mark{
  width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.14);
  display:grid; place-items:center; flex:none; color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
#landingView .hero-kicker{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(234,243,238,.62); margin-bottom:18px;
}
#landingView .hero-h1{
  font-size:clamp(31px,4.55vw,54px); font-weight:800; letter-spacing:-.038em;
  line-height:1.06; margin-bottom:20px; text-wrap:balance;
}
#landingView .hero-h1 .hl{color:#8FE3B4}
#landingView .hero-sub{font-size:clamp(14.5px,1.5vw,17px); line-height:1.6; color:rgba(234,243,238,.74); max-width:50ch}
#landingView .hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
#landingView .btn-xl{
  padding:13px 22px; border-radius:11px; font-size:14.5px; font-weight:700;
  background:#fff; color:#0A4735; border:1px solid #fff; white-space:nowrap;
  transition:transform .14s, background .14s;
}
#landingView .btn-xl:hover{transform:translateY(-1px); background:#F2FAF6}
#landingView .btn-xl.ghost{background:transparent; color:#EAF3EE; border-color:rgba(255,255,255,.3)}
#landingView .btn-xl.ghost:hover{background:rgba(255,255,255,.08)}
#landingView .hero-stats{
  display:flex; flex-wrap:wrap; gap:8px 34px; margin:clamp(28px,4vw,44px) 0 0;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
}
#landingView .hero-stats div{display:flex; flex-direction:column; gap:1px}
#landingView .hero-stats dt{font-size:23px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
#landingView .hero-stats dd{margin:0; font-size:11.5px; font-weight:600; color:rgba(234,243,238,.6)}

/* the stage rail — the drifting between stages */
#landingView .srail{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px}
#landingView .srail-b{
  position:relative; display:flex; align-items:center; gap:6px; padding:8px 11px 10px;
  border-radius:9px; font-size:12px; font-weight:700; color:rgba(234,243,238,.6);
  background:rgba(255,255,255,.06); border:1px solid transparent; overflow:hidden;
  transition:color .18s, background .18s;
}
#landingView .srail-b em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10.5px; opacity:.65}
#landingView .srail-b:hover{color:#EAF3EE; background:rgba(255,255,255,.12)}
#landingView .srail-b.on{color:#08301f; background:#8FE3B4}
#landingView .srail-b.on em{opacity:.8}
#landingView .srail-p{position:absolute; left:0; bottom:0; height:2px; width:0; background:rgba(8,48,31,.45)}
#landingView .srail-b.on .srail-p{animation:railfill 4.2s linear forwards}
#landingView.paused .srail-b.on .srail-p{animation:none; width:100%}
@keyframes railfill{from{width:0}to{width:100%}}

#landingView .hero-screens{position:relative; min-height:360px}
#landingView .hero-screen{
  position:absolute; inset:0; opacity:0; transform:translateY(10px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.25,1); pointer-events:none;
}
#landingView .hero-screen.on{position:relative; opacity:1; transform:none; pointer-events:auto}

/* ---------- the drawn screen ---------- */
#landingView .scr{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  box-shadow:0 26px 60px -26px rgba(4,26,18,.55), 0 2px 6px rgba(4,26,18,.1);
  overflow:hidden; text-align:left; color:var(--ink);
}
#landingView .scr-top{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
#landingView .scr-dot{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
#landingView .scr-top b{
  margin-left:9px; font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
#landingView .scr-body{padding:18px 20px 22px; min-height:250px}
#landingView .lsec.dark .scr, #landingView .hero .scr{color:var(--ink)}

#landingView .mk-seg{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px}
#landingView .mk-seg span{font-size:11px; font-weight:700; padding:5px 10px; border-radius:7px; background:var(--sunk); color:var(--ink-3)}
#landingView .mk-seg span.on{background:var(--brand-soft); color:var(--brand-ink)}
#landingView .mk-h{font-size:16.5px; font-weight:800; margin-bottom:10px; letter-spacing:-.02em}
#landingView .mk-h.sm{font-size:14px; margin-bottom:12px}
#landingView .mk-p{font-family:"Source Serif 4",Georgia,serif; font-size:14.5px; line-height:1.6; margin-bottom:9px}
#landingView .mk-p.dim{color:var(--ink-3)}
#landingView .mk-p u{text-decoration:none; background:var(--credit); color:var(--credit-ink); padding:1px 3px; border-radius:3px; font-weight:600}
#landingView .mk-flag{
  margin-top:14px; font-size:11.5px; font-weight:700; color:var(--gold);
  background:var(--gold-soft); border:1px solid var(--gold-line);
  padding:7px 11px; border-radius:8px; display:inline-block;
}
#landingView .mk-flag.bad{color:var(--flag); background:var(--flag-soft); border-color:var(--flag-line)}
#landingView .mk-cap{font-size:11px; color:var(--ink-3); font-weight:600; margin-top:10px}
#landingView .mk-face{border:1px solid var(--line-2); border-radius:11px; padding:20px 18px; background:var(--surface-2); margin-bottom:13px}
#landingView .mk-tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--brand-ink); display:block; margin-bottom:8px}
#landingView .mk-tag.ctx{color:var(--blue)}
#landingView .mk-q{font-size:16px; font-weight:700; line-height:1.4}
#landingView .mk-grades{display:flex; gap:6px; flex-wrap:wrap}
#landingView .mk-grades span{font-size:11px; font-weight:700; padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); color:var(--ink-3)}
#landingView .mk-grades span.on{background:var(--brand); border-color:var(--brand); color:#fff}
#landingView .mk-bars{display:flex; gap:7px; align-items:flex-end; height:58px; margin-top:16px}
#landingView .mk-bars i{flex:1; background:var(--brand-soft); border-radius:4px 4px 0 0; display:block; border-top:3px solid var(--brand); min-height:8px}
#landingView .mk-opt{
  display:flex; gap:10px; align-items:center; border:1px solid var(--line-2);
  border-radius:9px; padding:9px 12px; margin-bottom:6px; font-size:13.5px; color:var(--ink-2);
}
#landingView .mk-opt b{
  width:20px; height:20px; border-radius:6px; background:var(--sunk); display:grid;
  place-items:center; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-2); flex:none;
}
#landingView .mk-opt.right{border-color:var(--brand); background:var(--brand-soft)}
#landingView .mk-opt.right b{background:var(--brand); color:#fff}
#landingView .mk-opt.wrong{border-color:var(--flag-line); background:var(--flag-soft)}
#landingView .mk-opt.wrong b{background:var(--flag); color:#fff}
#landingView .mk-ctx{border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 8px 8px 0; padding:10px 12px; margin-bottom:12px}
#landingView .mk-sheet{border:1px solid var(--line-2); border-radius:9px; padding:14px; background:#fff}
#landingView .mk-lines i{display:block; height:6px; border-radius:3px; background:var(--sunk); margin-bottom:7px}
#landingView .mk-ctx .mk-lines i{background:rgba(42,84,143,.16)}
#landingView .mk-figbox{
  height:74px; border:1px dashed var(--gold-line); border-radius:6px; margin:12px 0;
  display:grid; place-items:center; background:var(--gold-soft);
}
#landingView .mk-figbox span{font-size:11px; font-weight:700; color:var(--gold)}
#landingView .mk-trap{display:flex; gap:10px; align-items:center; font-size:13px; color:var(--ink-2); padding:8px 0; border-bottom:1px solid var(--line)}
#landingView .mk-trap b{
  width:19px; height:19px; border-radius:6px; background:var(--flag-soft); color:var(--flag);
  display:grid; place-items:center; font-size:10.5px; flex:none; border:1px solid var(--flag-line);
}
#landingView .mk-meters{display:grid; grid-template-columns:auto 1fr auto; gap:8px 11px; align-items:center; margin-top:16px}
#landingView .mk-meters span{font-size:11.5px; font-weight:700; color:var(--ink-2)}
#landingView .mk-meters i{display:block; height:6px; border-radius:3px; background:var(--sunk); overflow:hidden}
#landingView .mk-meters i b{display:block; height:100%; border-radius:3px; background:var(--brand)}
#landingView .mk-meters em{font-style:normal; font-size:11px; font-weight:800; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ---------- the problem, as a numbered list ---------- */
#landingView .probs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
#landingView .probs li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,3vw,44px);
  padding:clamp(20px,3vw,32px) 0; border-bottom:1px solid var(--line); align-items:start}
#landingView .probs-n{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600;
  color:var(--brand); padding-top:5px;
}
#landingView .probs h3{font-size:clamp(17px,2vw,23px); font-weight:800; letter-spacing:-.02em; margin-bottom:7px}
#landingView .probs p{font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:70ch; margin:0}

/* ---------- a dark section ---------- */
#landingView .lsec.dark{
  background:linear-gradient(170deg, #0E5942 0%, #0A4130 100%);
  color:#E7F1EB; border-block:1px solid rgba(255,255,255,.08);
}
#landingView .lsec.dark .h2{color:#fff}
#landingView .lsec.dark .lede, #landingView .lsec.dark p{color:rgba(231,241,235,.76)}
#landingView .lsec.dark .tag{color:#8FE3B4}
#landingView .lsec.dark .tag::before{background:#8FE3B4}

#landingView .contrasts{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2.4vw,26px)}
#landingView .contrast{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:20px 22px 22px}
#landingView .contrast-s{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#8FE3B4; margin-bottom:16px;
}
#landingView .contrast-row{padding:14px 0; border-top:1px solid rgba(255,255,255,.12)}
#landingView .contrast-row:first-of-type{border-top:0; padding-top:0}
#landingView .contrast-k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(231,241,235,.5); margin-bottom:9px}
#landingView .contrast-row p{font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.6; color:#F2F8F5 !important; margin:0 0 9px}
#landingView .contrast-row u{text-decoration:none; background:rgba(143,227,180,.2); color:#B9EFD1; padding:1px 4px; border-radius:3px; font-weight:600}
#landingView .contrast-row em{font-style:normal; font-size:12.5px; font-weight:700}
#landingView .contrast-row.bad em{color:#F4A79C}
#landingView .contrast-row.good em{color:#8FE3B4}

/* ---------- the five stages, with a sticky index ---------- */
#landingView .stages{display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(24px,5vw,68px); align-items:start}
#landingView .stages-ix{position:sticky; top:34px; display:flex; flex-direction:column; gap:2px}
#landingView .ix{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  font-size:13px; font-weight:700; color:var(--ink-3); border-left:2px solid transparent;
  transition:color .18s, background .18s, border-color .18s;
}
#landingView .ix em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10.5px; opacity:.7}
#landingView .ix:hover{color:var(--ink-2); background:var(--sunk)}
#landingView .ix.on{color:var(--brand-ink); background:var(--brand-soft); border-left-color:var(--brand)}
#landingView .stages-b{display:flex; flex-direction:column; gap:clamp(44px,7vw,96px)}
#landingView .stage{scroll-margin-top:34px}
#landingView .stage-h{display:flex; align-items:baseline; gap:12px; margin-bottom:12px}
#landingView .stage-h em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600; color:var(--brand)}
#landingView .stage-h h3{font-size:clamp(22px,2.8vw,31px); font-weight:800; letter-spacing:-.03em}
#landingView .stage-lead{font-size:clamp(15px,1.6vw,17.5px); line-height:1.55; color:var(--ink); font-weight:600; margin-bottom:11px; max-width:56ch}
#landingView .stage-body{font-size:14.5px; line-height:1.68; color:var(--ink-2); max-width:66ch}
#landingView .stage-m{margin-top:24px; max-width:640px}
#landingView .ticks{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px}
#landingView .ticks li{position:relative; padding-left:26px; font-size:14px; line-height:1.5; color:var(--ink-2)}
#landingView .ticks li::before{
  content:""; position:absolute; left:0; top:5px; width:15px; height:15px; border-radius:5px;
  background:var(--brand-soft); border:1px solid var(--brand-line);
}
#landingView .ticks li::after{
  content:""; position:absolute; left:4.5px; top:9.5px; width:5px; height:2.5px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg); border-radius:1px;
}
#landingView .lsec.dark .ticks li{color:rgba(231,241,235,.82)}
#landingView .lsec.dark .ticks li::before{background:rgba(143,227,180,.15); border-color:rgba(143,227,180,.35)}
#landingView .lsec.dark .ticks li::after{border-color:#8FE3B4}

/* ---------- arenas ---------- */
#landingView .arenas{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden}
#landingView .larenas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line);
  gap:1px; margin-top:clamp(26px,3.4vw,44px);
}
#landingView .larena{background:var(--surface-2); padding:22px 22px 24px}
#landingView .larena-n{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--brand); display:block; margin-bottom:10px}
#landingView .larena h3{font-size:15px; font-weight:800; margin-bottom:7px; letter-spacing:-.01em}
#landingView .larena p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0}

/* ---------- the tutor ---------- */
#landingView .tutor-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(26px,4.5vw,60px); align-items:start}
#landingView .tutor-l p{font-size:15px; line-height:1.68; margin-bottom:14px}
#landingView .tutor-r{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px}
#landingView .tutor-k{display:block; font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:rgba(231,241,235,.55); margin-bottom:16px}
#landingView .tutor-read{margin:0 0 20px}
#landingView .tutor-read div{padding:11px 0; border-top:1px solid rgba(255,255,255,.1)}
#landingView .tutor-read div:first-child{border-top:0; padding-top:0}
#landingView .tutor-read dt{font-size:13.5px; font-weight:800; color:#fff; margin-bottom:3px}
#landingView .tutor-read dd{margin:0; font-size:13px; line-height:1.55; color:rgba(231,241,235,.72)}
#landingView .tutor-read dd em{font-style:italic; color:#B9EFD1}
#landingView .tutor-chat{display:flex; flex-direction:column; gap:8px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
#landingView .tutor-msg{font-size:13px; line-height:1.55; padding:10px 13px; border-radius:11px; background:rgba(255,255,255,.08); color:rgba(231,241,235,.85) !important}
#landingView .tutor-msg.me{background:#8FE3B4; color:#08301f !important; font-weight:600; align-self:flex-end; max-width:86%}

/* ---------- boards ---------- */
#landingView .bcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px}
#landingView .bcard{
  display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line-2); border-radius:15px; padding:22px 22px 20px;
  box-shadow:var(--shadow); transition:transform .18s, border-color .18s, box-shadow .18s;
}
#landingView .bcard.live:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:0 18px 40px -22px rgba(9,60,42,.5)}
#landingView .bcard.soon{background:var(--surface-2); border-style:dashed; box-shadow:none}
#landingView .bcard-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
#landingView .bcard-sub{font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
#landingView .bcard-state{
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line);
  padding:3px 8px; border-radius:999px;
}
#landingView .bcard-state.soon{color:var(--gold); background:var(--gold-soft); border-color:var(--gold-line)}
#landingView .bcard h3{font-size:20px; font-weight:800; letter-spacing:-.025em; margin-bottom:8px}
#landingView .bcode{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; color:var(--ink-3)}
#landingView .bcard-n{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-bottom:15px}
#landingView .bcard-n b{color:var(--ink); font-variant-numeric:tabular-nums}
#landingView .bcard-l{list-style:none; margin:0 0 17px; padding:0; display:grid; gap:7px}
#landingView .bcard-l li{position:relative; padding-left:15px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
#landingView .bcard-l li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--brand)}
#landingView .bcard.soon .bcard-l li::before{background:var(--line-2)}
#landingView .bcard-go{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--brand-ink)}
#landingView .bcard-go.muted{color:var(--ink-3)}
#landingView .bcard.live:hover .bcard-go svg{transform:translateX(3px)}
#landingView .bcard-go svg{transition:transform .2s}

/* ---------- signup ---------- */
#landingView .signup{
  margin-top:clamp(30px,4vw,48px); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:clamp(22px,3vw,32px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(20px,3vw,44px); align-items:center;
}
#landingView .signup h3{font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.025em; margin-bottom:8px}
#landingView .signup p{font-size:14px; line-height:1.55; color:var(--ink-2); margin:0}
#landingView .sform{display:flex; gap:8px; flex-wrap:wrap}
#landingView .sform .ti{flex:1 1 170px; text-align:left}
#landingView .sform .btn-xl{flex:0 0 auto; background:var(--brand); color:#fff; border-color:var(--brand)}
#landingView .sform .btn-xl:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
#landingView .sform-msg{margin-top:12px; font-size:13.5px; font-weight:600; min-height:1.2em}
#landingView .sform-msg.ok{color:var(--brand-ink)}
#landingView .sform-msg.no{color:var(--flag)}
#landingView .fine{font-size:11.5px; color:var(--ink-3); margin-top:10px}

/* ---------- footer ---------- */
#landingView .foot{background:#073226; color:rgba(234,243,238,.7); padding-block:34px 42px}
#landingView .foot-in{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
#landingView .foot .hero-brand{margin:0; color:#EAF3EE}
#landingView .foot p{font-size:13px; margin:0}

/* ---------- home button in the app topbar ---------- */
.homebtn{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-2); flex:none;
}
.homebtn:hover{border-color:var(--brand); color:var(--brand-ink)}

@media (max-width:980px){
  #landingView .hero-in{grid-template-columns:minmax(0,1fr); gap:38px}
  #landingView .hero-screens{min-height:0}
  #landingView .tutor-in{grid-template-columns:minmax(0,1fr)}
  #landingView .stages{grid-template-columns:minmax(0,1fr)}
  #landingView .stages-ix{position:static; flex-direction:row; flex-wrap:wrap; gap:4px; margin-bottom:8px}
  #landingView .ix{border-left:0; border-bottom:2px solid transparent}
  #landingView .ix.on{border-left:0; border-bottom-color:var(--brand)}
  #landingView .signup{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  #landingView .wrap-l, #landingView .hero-in{padding-inline:18px}
  #landingView .srail{gap:3px}
  #landingView .srail-b{flex:1 1 auto; justify-content:center; padding:8px 9px 10px; font-size:11.5px}
  #landingView .srail-b em{display:none}
  #landingView .hero-cta .btn-xl{flex:1 1 100%; text-align:center}
  #landingView .sform .ti{flex:1 1 100%}
  #landingView .sform .btn-xl{width:100%}
  #landingView .probs li{grid-template-columns:minmax(0,1fr); gap:6px}
  #landingView .foot-in{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  #landingView .lsec{opacity:1; transform:none}
  #landingView .hero-screen{transition:none}
  #landingView .srail-b.on .srail-p{animation:none; width:100%}
}

/* ======================================================================
   Restored + rebuilt: rules for markup that app/app.js renders.
   The past-paper stem/figure block was dropped when the landing block was
   rewritten; everything below it supports the marker, the test builder,
   the analysis view, the blurt, the digest layouts and the highlight key.
   ====================================================================== */

/* ---------- past-paper context: the stem, and a recovered figure ---------- */
.pp-stem,.pp-fig{
  margin:14px 17px 0; border:1px solid var(--line-2); border-radius:10px;
  background:var(--surface-2); padding:12px 13px 4px;
}
.pp-stem{border-left:3px solid var(--blue)}
.pp-fig{border-left:3px solid var(--gold)}
.pp-stem>.eyebrow{color:var(--blue); display:block; margin-bottom:2px}
.pp-angle{margin:14px 17px 0; font-size:13px; letter-spacing:.01em}
.pp-fig>.eyebrow{color:var(--gold); display:block; margin-bottom:2px}
.pp-stem .scan,.pp-fig .scan{margin:8px 0 12px; border:0; padding:0; background:transparent}
.pp-stem .scan img,.pp-fig .scan img{border:1px solid var(--line); background:#fff}
:root[data-theme="dark"] .pp-stem .scan img,:root[data-theme="dark"] .pp-fig .scan img{background:#f6f6f4}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pp-stem .scan img,
  :root:not([data-theme="light"]) .pp-fig .scan img{background:#f6f6f4}
}

/* ---------- past-paper body ---------- */
.pp-body{padding:0 0 4px}
.pp-q{padding-bottom:2px}
.pp-ans{margin:14px 17px 0; padding-top:14px; border-top:1px dashed var(--line-2)}
.pp-ans .seg{margin-bottom:11px; width:fit-content; max-width:100%; flex-wrap:wrap}
.pp-ans textarea,.pp-corr textarea{
  width:100%; font:inherit; font-size:13.5px; line-height:1.55; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:9px;
  padding:10px 11px; resize:vertical;
}
.pp-ans textarea:focus,.pp-corr textarea:focus{outline:2px solid var(--brand-line); outline-offset:1px; border-color:var(--brand)}
.pp-ms{border-top:1px solid var(--line)}
.pp-body.ms-open{background:var(--surface-2)}
.pp-body.ms-open .pp-ms{border-top-color:var(--line-2)}
.pp-corr{margin:0 17px 14px; padding:12px 13px; border:1px solid var(--flag-line); border-left:3px solid var(--flag); border-radius:10px; background:var(--flag-soft)}
.pp-corr .eyebrow{color:var(--flag); display:block}

/* ---------- past-paper content-point filter bar ---------- */
.pp-cpbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.cpb-t{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:3px}
.cpb{font-size:12px; font-weight:700; padding:6px 11px; border-radius:8px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface); display:inline-flex; gap:6px; align-items:center}
.cpb b{font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.75}
.cpb:hover{border-color:var(--brand-line)}
.cpb.on{background:var(--brand); color:#fff; border-color:var(--brand)}
.cpb.on b{opacity:.85}
.cpfilters{margin-bottom:18px}

/* ---------- segmented control groups ---------- */
.segs{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:14px 0 4px}
.applyseg,.layoutseg,.levelseg,.paperseg{flex-wrap:wrap; width:fit-content; max-width:100%}

/* ---------- digest layouts: bullets, flows, term tables ---------- */
.lead-in{margin-bottom:8px}
ul.pts{list-style:none; padding:0; margin:10px 0}
ul.pts>li{position:relative; padding-left:19px; margin-bottom:7px; line-height:1.6}
ul.pts>li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--brand-line)}
ol.flow{list-style:none; counter-reset:flow; padding:0; margin:10px 0}
ol.flow>li{counter-increment:flow; position:relative; padding-left:29px; margin-bottom:9px; line-height:1.6}
ol.flow>li::before{
  content:counter(flow); position:absolute; left:0; top:.1em;
  width:19px; height:19px; border-radius:6px; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-line);
}
ol.flow>li:not(:last-child)::after{content:""; position:absolute; left:9px; top:calc(.1em + 21px); bottom:-9px; width:1px; background:var(--brand-line)}
.flow-in{display:inline-flex; gap:5px; flex-wrap:wrap; align-items:baseline}
.flow-in>span{background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px; padding:1px 7px}
.flow-in>i{font-style:normal; color:var(--ink-3); font-weight:700}
table.t.terms td:first-child{font-weight:700; color:var(--ink); white-space:nowrap}
table.t.terms td:first-child{width:1%}

/* ---------- the highlight key, and tinted credited wording ---------- */
.hlkey{display:flex; gap:7px 14px; flex-wrap:wrap; margin-top:11px}
.hlkey>span{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-3)}
.hlkey i{width:11px; height:11px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.08)}
.hlkey .k-term i{background:var(--credit)}
.hlkey .k-mech i{background:var(--brand-soft)}
.hlkey .k-seq  i{background:var(--blue-soft)}
.hlkey .k-val  i{background:var(--gold-soft)}
.hlkey .k-prec i{background:var(--flag-soft)}
mark.ms.k-mech{background:var(--brand-soft); color:var(--brand-ink)}
mark.ms.k-seq {background:var(--blue-soft);  color:var(--blue)}
mark.ms.k-val {background:var(--gold-soft);  color:var(--gold); font-variant-numeric:tabular-nums}
mark.ms.k-prec{background:var(--flag-soft);  color:var(--flag)}

/* ---------- blurt ---------- */
.blurt{border:1px solid var(--line-2); border-radius:12px; background:var(--surface); padding:15px 16px; margin-bottom:14px}
.blurt-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.blurt-h h4{font-size:14.5px; font-weight:800; flex:1 1 200px; line-height:1.3}
.blurt-p{font-size:13px; color:var(--ink-2); line-height:1.6; margin-bottom:11px}
.blurt textarea{
  width:100%; font:inherit; font-size:13.5px; line-height:1.6; color:var(--ink);
  background:var(--sunk); border:1px solid var(--line-2); border-radius:9px; padding:11px 12px; resize:vertical;
}
.blurt textarea:focus{outline:2px solid var(--brand-line); outline-offset:1px; border-color:var(--brand)}
ul.blurt-ms{list-style:none; padding:0; margin:4px 0 0; font-size:13px}
ul.blurt-ms>li{padding:9px 0; border-bottom:1px solid var(--line); line-height:1.55}
ul.blurt-ms>li:last-child{border-bottom:0}
ul.blurt-ms>li>b{display:block; margin-bottom:3px; color:var(--ink)}
ul.blurt-ms ol,ul.blurt-ms ul{margin:5px 0 0 17px; color:var(--ink-2)}
ul.blurt-ms li li{margin-bottom:3px}
.cues{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:11px}
.cues>span{font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px}

/* ---------- answer input modes: photo drop, microphone ---------- */
.drop{
  display:block; border:1.5px dashed var(--line-2); border-radius:11px; background:var(--sunk);
  padding:22px 16px; text-align:center; cursor:pointer;
}
.drop:hover{border-color:var(--brand-line); background:var(--brand-soft)}
.drop>span{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.drop>span b{color:var(--brand-ink)}
.drop img{display:block; max-width:100%; margin:12px auto 0; border-radius:8px; border:1px solid var(--line-2)}
.drop.big{padding:30px 18px}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin-top:12px}
.thumbs:empty{display:none}
.thumb{border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:var(--surface); text-align:center; padding-bottom:6px}
.thumb img{display:block; width:100%; height:92px; object-fit:cover}
.thumb>span{display:block; font-size:10.5px; font-weight:700; color:var(--ink-3); padding:5px 4px 2px}
.mic{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px solid var(--line-2); border-radius:11px; background:var(--sunk); padding:13px 14px}
.mic .dot{width:9px; height:9px; border-radius:50%; background:var(--line-2); flex:none}
.mic.rec .dot{background:var(--flag); animation:micpulse 1.1s ease-in-out infinite}
.mic-t{font-size:12.5px; font-weight:600; color:var(--ink-2); flex:1 1 200px}
@keyframes micpulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.mic.rec .dot{animation:none}}

/* ---------- AI past-paper marker ---------- */
.marker{display:grid; gap:16px}
.sec.builder .sec-body{padding-top:16px}
.mkres{margin-top:16px}
.mkres .meter{margin-bottom:9px}
.mkseg{flex-wrap:wrap; width:fit-content; max-width:100%}
.mkmeta{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:14px}
.mkf{display:flex; flex-direction:column; gap:5px; min-width:0}
.mkf>span{font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.mkf .ti{width:100%}
.mklog-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.mklog-bar input.ti{flex:2 1 260px; min-width:0}
.mklog-bar select.ti{flex:1 1 180px; min-width:0; max-width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:4px; padding:10px 12px; font:inherit; font-size:14px}
.mklog-bar select.ti:focus{border-color:var(--ink-3); outline:1px solid var(--ink-3)}
.mkagg{margin:14px 0}
.mkagg summary{cursor:pointer; margin:0}
.mkagg tr[data-mk-sp]{cursor:pointer}
.mkagg tr[data-mk-sp]:hover td{background:var(--sunk)}
.mklog{background:var(--surface); border:1px solid var(--line); border-radius:11px; margin-top:10px; overflow:hidden}
.mklog[open]{border-color:var(--brand-line)}
.mklog-s{display:flex; gap:12px; align-items:center; padding:12px 15px; cursor:pointer; list-style:none}
.mklog-s::-webkit-details-marker{display:none}
.mklog-s:hover{background:var(--sunk)}
.mklog-t{flex:1 1 auto; min-width:0; font-size:14px; overflow-wrap:anywhere}
.mklog-t>span{color:var(--ink-2)}
.mklog-m{font-size:12px; color:var(--ink-3); margin-top:3px}
.mklog-score{flex:none; text-align:right; font-variant-numeric:tabular-nums}
.mklog-score b{display:block; font-size:15px}
.mklog-score span{font-size:11.5px; color:var(--ink-3)}
.mklog-b{padding:0 15px 15px; border-top:1px solid var(--line)}
.mklog-b:empty{display:none}
.mklog-edit{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; padding-top:14px; align-items:end}
.mklog-edit .btnrow{grid-column:1/-1}

/* ---------- build your own test ---------- */
.tickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}
.tickgroup{border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2); padding:11px 12px}
.tickgroup .mchk{margin-bottom:5px; align-items:flex-start; line-height:1.4}
.tickgroup .mchk:last-child{margin-bottom:0}
.mchk.tg-h{padding-bottom:7px; margin-bottom:7px; border-bottom:1px solid var(--line-2); color:var(--ink)}
.mchk.tg-h b{font-size:12px; letter-spacing:.02em}
.testpaper{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); padding:18px 20px; margin-top:18px}
/* the two builders, large and first: options, then points, then one big button */
.sec.bb{border:2px solid var(--brand-line); padding:24px 26px 26px; overflow:visible}
.bb-head h2{font-size:26px; line-height:1.15; margin:0 0 6px; letter-spacing:-.01em}
.bb-head p{font-size:15px; color:var(--ink-2); max-width:62ch; margin:0}
.bb-opts{display:flex; flex-direction:column; gap:12px; margin:20px 0; padding:16px 18px; border-radius:12px; background:var(--brand-soft); border:1px solid var(--brand-line)}
.bb-opts>.mchk,.bb-row{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center}
.bb-opts .mchk{font-size:14.5px}
.bb-opts .mchk input[type="checkbox"]{width:18px; height:18px}
.bb-opts input[type="number"]{width:76px; padding:7px 9px; margin:0 5px}
.bb-opts:not(:has(.bb-row)){flex-direction:row; flex-wrap:wrap; gap:12px 22px; align-items:center}
.bb-l{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.bb-pick>.bb-l{display:block; margin-bottom:10px}
.bb-done{flex-direction:column; align-items:flex-start; gap:4px; padding-top:10px; border-top:1px solid var(--brand-line)}
.bb-note{font-size:13px; color:var(--ink-2); margin:0; max-width:64ch}
/* the button stays in view while a long list of points is ticked, centred so it
   never sits under the Report a problem button in the corner */
.bb-go{position:sticky; bottom:14px; z-index:5; display:flex; justify-content:center; margin-top:20px}
.bb-btn{font-size:17px; padding:15px 34px; border-radius:12px; min-width:260px; box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.bb-ready{margin-top:18px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow)}
.bb-sum{font-size:16px; margin:0 0 4px}
.bb-ask{font-size:13.5px; color:var(--ink-2); margin:0 0 12px}
.bb-choice{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.bb-way{display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; color:var(--ink); background:var(--surface-2); border:2px solid var(--line-2); border-radius:12px; padding:15px 17px; cursor:pointer}
.bb-way b{font-size:16px}
.bb-way span{font-size:13px; color:var(--ink-2); line-height:1.45}
.bb-way:hover{border-color:var(--brand-line)}
.bb-way[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft)}
.bb-warn{margin-top:10px}
.bb-left{margin:0 0 8px}
[data-bbset]:not(:empty){margin-top:16px}
@media (max-width:520px){
  .sec.bb{padding:18px 16px 20px}
  .bb-head h2{font-size:22px}
  .bb-go{bottom:10px}
  .bb-btn{flex:1 1 auto; min-width:0; margin-left:44px}
}
/* one answer box per printed part */
.pp-part{display:block; margin:0 0 10px}
.pp-part:last-child{margin-bottom:0}
.pp-pl{display:block; font-size:12.5px; font-weight:800; color:var(--ink-2); margin:0 0 4px; font-variant-numeric:tabular-nums}
.pp-pl em{font-style:normal; font-weight:600; color:var(--ink-3)}
.pp-ans .pp-part textarea{min-height:64px}

/* ---------- analysis ---------- */
.ana-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
.ana-h{font-size:14.5px; font-weight:800; margin-bottom:3px}
.ana-row{display:grid; grid-template-columns:minmax(96px,1.1fr) minmax(70px,2fr) auto; gap:11px; align-items:center; padding:6px 0}
.ana-row .nm{font-size:12.5px; font-weight:600; color:var(--ink-2); min-width:0}
.ana-row .vl{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace; color:var(--ink-2); text-align:right}
.hb{display:block; height:7px; border-radius:999px; background:var(--sunk); overflow:hidden; min-width:44px}
.hb>i{display:block; height:100%; border-radius:999px; background:var(--brand); transition:width .5s ease}
.hb.low>i{background:var(--flag)}
.hb.mid>i{background:var(--gold)}
.hb.gold>i{background:var(--gold)}
@media (prefers-reduced-motion:reduce){.hb>i{transition:none}}
ul.advice{list-style:none; padding:0; margin:9px 0 0}
ul.advice>li{position:relative; padding-left:17px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.88); margin-bottom:5px}
ul.advice>li::before{content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55)}
.tscroll.ana{margin-top:14px}
table.t.anat td{font-size:12.5px}
table.t.anat .cell{line-height:1.5}
.cell.long{font-size:12px; color:var(--ink-2); max-width:44ch}
.tick-y{color:var(--brand); font-weight:800}

/* ---------- corrections ---------- */
.corrbar{background:var(--surface); border:1px solid var(--flag-line); border-left:3px solid var(--flag); border-radius:14px; padding:16px 18px; margin-bottom:22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.corrbar h3{font-size:16px; font-weight:800}
.corrbar p{font-size:12.5px; color:var(--ink-2); margin-top:4px; max-width:58ch}
/* the correction cards, one deck per specification point (Flashcard Arena) */
/* the account gate \u2014 a skeleton until a database is attached */
.gate{display:contents}
/* The panel scrolls rather than overflowing: sign-up carries a board picker as
   well as the two fields, and on a short laptop screen the old 390px column ran
   off the bottom with the Create button below the fold. */
#gateHost{position:fixed; inset:0; z-index:95; display:flex; align-items:flex-start;
  justify-content:center; padding:max(16px,4vh) 16px; overflow-y:auto;
  background:rgba(8,14,13,.6); backdrop-filter:blur(3px); -webkit-overflow-scrolling:touch}
#gateHost[hidden]{display:none}
.gatecard{
  width:100%; max-width:560px; margin:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:28px 30px 22px; position:relative;
}
/* a student can always change their mind: × top right (Escape and a press outside also close) */
.gateclose{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-2); cursor:pointer }
.gateclose:hover{ color:var(--ink); border-color:var(--line-2) }
.gatecard h2{font-size:23px; letter-spacing:-.015em; margin:4px 0 8px}
.gatelede{font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 20px; max-width:56ch}
.gateform{display:flex; flex-direction:column; gap:14px}
/* the two fields sit side by side where there is room: they are short, and
   stacking them pushed everything below out of sight */
.gatefields{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gatel{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink-2); min-width:0}
.gatel .ti{width:100%}
.gateform .btn{margin-top:2px; justify-content:center; align-self:flex-start; padding:11px 22px}
.gatecard .fine{margin-top:14px; display:block}
@media (max-width:560px){
  #gateHost{padding:12px 12px}
  .gatecard{padding:22px 18px 18px; border-radius:14px}
  .gatecard h2{font-size:20px}
  .gatefields{grid-template-columns:1fr}
  .gateform .btn{align-self:stretch}
}

.mx-notes>summary{font-size:13px; font-weight:700; color:var(--ink-2)}
.mx-notes[open]>summary{margin-bottom:2px}

/* the AI version: what a gated control opens instead of doing nothing */
.promodal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px}
.promodal[hidden]{display:none}
.proscrim{position:absolute; inset:0; background:rgba(8,14,13,.55); backdrop-filter:blur(2px)}
.propanel{
  position:relative; max-width:520px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px;
}
.prohead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.prohead b{font-size:15.5px}
.probadge{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--brand); border-radius:999px; padding:3px 9px;
}
.propanel p{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0 0 14px; max-width:60ch}
.btn.pro::after{content:" \00b7 AI"; font-size:10px; font-weight:800; opacity:.75; letter-spacing:.04em}

.corrgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:10px}
.corrdeck{
  text-align:left; display:flex; flex-direction:column; gap:3px; padding:12px 13px;
  border:1px solid var(--line-2); border-radius:11px; background:var(--surface);
  cursor:pointer; transition:border-color .12s ease, transform .12s ease;
}
.corrdeck:hover{border-color:var(--brand); transform:translateY(-1px)}
.corrdeck .cd-c{font-family:var(--mono,ui-monospace,monospace); font-size:11px; color:var(--ink-2); letter-spacing:.02em}
.corrdeck .cd-n{font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ink)}
.corrdeck .cd-m{font-size:12px; color:var(--ink-2); margin-top:2px}
.corrdeck .cd-m i{font-style:normal; font-weight:700; color:var(--flag)}
.corrdeck .cd-go{font-size:12px; font-weight:700; color:var(--brand-ink); margin-top:6px}
.corrpill{font-size:12px; font-weight:700; color:var(--flag); background:var(--flag-soft); border:1px solid var(--flag-line); border-radius:999px; padding:3px 10px; font-variant-numeric:tabular-nums}
.corrpill:hover{background:var(--flag); color:#fff; border-color:var(--flag)}
.corrpill i{font-style:normal; font-weight:600; opacity:.8}
.card2.is-corr,.face.is-corr{border-color:var(--flag-line)}
.card2.is-corr .fcue,.face.is-corr .fcue{color:var(--flag)}

/* ---------- checklist counter ---------- */
.badge.chkcount{font-variant-numeric:tabular-nums}
.badge.chkcount.done{color:var(--brand-ink); background:var(--brand-soft); border-color:var(--brand-line)}

/* ---------- flashcard image face ---------- */
.fimg{margin:10px 0 0}
.fimg img,.fimg svg{display:block; max-width:100%; height:auto; margin:0 auto; border-radius:8px}

/* ---------- small inline link-styled button ---------- */
.linkbtn{font-size:12px; font-weight:700; color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; background:none; border:0; padding:0}
.linkbtn:hover{color:var(--brand)}

/* ---------- streak, when nothing is logged yet ---------- */
.streak.off{opacity:.45}

/* ---------- chat panel open/closed ---------- */
body:not(.chat-open) .chatcol{display:none}
body:not(.chat-open) .cols{grid-template-columns:minmax(0,1fr)}
.chat-close{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:var(--ink-3); flex:none}
.chat-close:hover{background:var(--sunk); color:var(--ink)}
.chat-input{flex:1 1 auto; min-width:0}
.chat-send{flex:none; padding-inline:14px}
:root[data-theme="dark"] .hlkey i{border-color:rgba(255,255,255,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hlkey i{border-color:rgba(255,255,255,.22)}}

@media (max-width:1000px){#landingView .larenas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){#landingView .larenas{grid-template-columns:minmax(0,1fr)}}

/* ---------- Extended Response Arena: every question with its plan (batch 4) ---------- */
.ext-sp{font-size:14px; font-weight:800; margin:22px 0 8px; display:flex; gap:8px; align-items:center}
.ext{border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:8px; box-shadow:var(--shadow)}
.ext-h{width:100%; display:flex; gap:10px; align-items:center; padding:12px 14px; text-align:left}
.ext-h .ext-t{flex:1; font-weight:700; font-size:14px; min-width:0}
.ext-h .chev{color:var(--ink-3); transition:transform .2s; flex:none}
.ext-h[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ext-b{border-top:1px solid var(--line); padding:14px 16px 18px}
.ext-src{display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px}
.ext-q{font-size:15.5px; margin-bottom:14px}
.ext-q .stemtab{font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.5; overflow-x:auto; background:var(--sunk); border-radius:8px; padding:10px 12px; margin:10px 0}
.ext-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px}
@media (max-width:900px){ .ext-cols{grid-template-columns:minmax(0,1fr)} }
.ext-plan .prose.sm,.ext-ans .prose.sm{font-size:14px; line-height:1.6}
.prose.sm h5{font-family:"Plus Jakarta Sans",sans-serif; font-size:12.5px; font-weight:800; margin:12px 0 4px; letter-spacing:.02em}
.prose.sm ul,.prose.sm ol{margin:6px 0 10px; padding-left:20px}
.prose.sm li+li{margin-top:4px}
.prose.sm p+p{margin-top:8px}
.ext-plan .eyebrow,.ext-ans .eyebrow{display:block; margin-bottom:6px}
.ext-ans textarea{margin-bottom:8px}


/* ---------- app rules restored after the landing-redesign zip replaced styles.css (16 Sept) ---------- */
:root{
  --bg:#F4F7F6; --surface:#FFFFFF; --surface-2:#FAFCFB; --sunk:#EDF2F1;
  --ink:#131C1B; --ink-2:#4E5C59; --ink-3:#7C8A87;
  --line:#E0E8E6; --line-2:#CBD8D5;
  --brand:#0B6E63; --brand-ink:#085B52; --brand-soft:#E4F1EE; --brand-line:#A9D4CD;
  --flag:#B93D34; --flag-soft:#FBECEA; --flag-line:#EFC3BD;
  --gold:#96650A; --gold-soft:#FCF2DF; --gold-line:#E8D3A4;
  --blue:#2A548F; --blue-soft:#E9EFF8; --blue-line:#BDCDE6;
  --credit:#CFF0E4; --credit-ink:#0A5C46;
  --hl-term:#DCE8FA; --hl-term-ink:#1F4A8A; --hl-val:#FCEBC4; --hl-val-ink:#7A4E05; --hl-prec:#F9E1EA; --hl-prec-ink:#8E2C5A; --hl-seq:#E6E0F8; --hl-seq-ink:#4B3390;
  --shadow:0 1px 2px rgba(16,40,38,.06), 0 8px 24px -12px rgba(16,40,38,.18);
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1413; --surface:#151E1D; --surface-2:#192423; --sunk:#101817;
    --ink:#E7EFEC; --ink-2:#A2B2AE; --ink-3:#788784;
    --line:#26312F; --line-2:#33413E;
    --brand:#45BCA9; --brand-ink:#7FD8C8; --brand-soft:#13302C; --brand-line:#27554E;
    --flag:#F08D82; --flag-soft:#2E1A18; --flag-line:#5A302B;
    --gold:#E5B65C; --gold-soft:#2B2214; --gold-line:#55432A;
    --blue:#8FB1E4; --blue-soft:#16202F; --blue-line:#2C3D57;
    --credit:#16493B; --credit-ink:#9DECCF;
    --hl-term:#1B2F4C; --hl-term-ink:#A9C7F2; --hl-val:#3A2C10; --hl-val-ink:#F1CB7A; --hl-prec:#3B1A2B; --hl-prec-ink:#F2A9CB; --hl-seq:#2A2145; --hl-seq-ink:#C6B6F5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1413; --surface:#151E1D; --surface-2:#192423; --sunk:#101817;
  --ink:#E7EFEC; --ink-2:#A2B2AE; --ink-3:#788784;
  --line:#26312F; --line-2:#33413E;
  --brand:#45BCA9; --brand-ink:#7FD8C8; --brand-soft:#13302C; --brand-line:#27554E;
  --flag:#F08D82; --flag-soft:#2E1A18; --flag-line:#5A302B;
  --gold:#E5B65C; --gold-soft:#2B2214; --gold-line:#55432A;
  --blue:#8FB1E4; --blue-soft:#16202F; --blue-line:#2C3D57;
  --credit:#16493B; --credit-ink:#9DECCF;
  --hl-term:#1B2F4C; --hl-term-ink:#A9C7F2; --hl-val:#3A2C10; --hl-val-ink:#F1CB7A; --hl-prec:#3B1A2B; --hl-prec-ink:#F2A9CB; --hl-seq:#2A2145; --hl-seq-ink:#C6B6F5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#0B6E63,#2A548F); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800}
.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:30px; padding-top:26px; align-items:start}
mark.ms.hl-term{background:var(--hl-term); color:var(--hl-term-ink)}
mark.ms.hl-val{background:var(--hl-val); color:var(--hl-val-ink)}
mark.ms.hl-prec{background:var(--hl-prec); color:var(--hl-prec-ink)}
mark.ms.hl-seq{background:var(--hl-seq); color:var(--hl-seq-ink)}
.hlkey{display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center; font-size:11.5px; font-weight:600; color:var(--ink-3); margin-top:12px}
.hlkey span{display:inline-flex; align-items:center; gap:6px}
.hlkey i{width:14px; height:10px; border-radius:3px; display:inline-block}
.hlkey .k-mech i{background:var(--credit); border:1px solid var(--credit-ink)}
.hlkey .k-term i{background:var(--hl-term); border:1px solid var(--hl-term-ink)}
.hlkey .k-val i{background:var(--hl-val); border:1px solid var(--hl-val-ink)}
.hlkey .k-prec i{background:var(--hl-prec); border:1px solid var(--hl-prec-ink)}
.hlkey .k-seq i{background:var(--hl-seq); border:1px solid var(--hl-seq-ink)}
.dock-btn{
  display:flex; align-items:center; gap:9px; background:var(--brand); color:#fff; font-weight:700; font-size:13.5px;
  padding:11px 17px; border-radius:999px; box-shadow:0 10px 30px -8px rgba(11,110,99,.55);
}
@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; flex-direction:row; flex-wrap:wrap}
  .rail>*{flex:1 1 250px}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none; position:static; height:auto; border-right:0; border-bottom:1px solid var(--line)}
  .sidebar.open{display:block}
  .sidetoggle{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface-2)}
  .wrap{padding-inline:16px}
  .search{display:none}
}
@media (max-width:520px){
  .top-right .streak{display:none}
  .top-right{gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:0}
  .top-right .pill-free{display:none}
  .picker{display:none}
  .prose{font-size:16px}
  .fc{height:270px}
  .levelbar{flex-wrap:wrap}
  .seg{flex-wrap:wrap; max-width:100%}
  .seg button{padding:6px 9px; font-size:12px}
  html,body{overflow-x:hidden}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .meter[data-dim="exam"] .mb i{background:#B489DC}}
.chat-pill{background:var(--brand); color:#fff; border-color:var(--brand)}
.chat-pill[aria-expanded="true"]{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff}
.chatcol{display:none; position:fixed; right:16px; top:70px; bottom:16px; width:min(400px, calc(100vw - 32px)); z-index:60; flex-direction:column; gap:12px}
body.chat-open .chatcol{display:flex}
.ai-scrim{display:none; position:fixed; inset:0; z-index:55; background:rgba(8,20,18,.28)}
body.chat-open .ai-scrim{display:block}
.chat-close{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:var(--ink-3); flex:none}
.chatbox{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 12px 40px -10px rgba(0,0,0,.35); overflow:hidden; flex:1 1 auto; min-height:0}
@media (max-width:560px){.qc-b{padding-left:15px}}
.scan img{display:block; width:100%; height:auto; border-radius:3px}
.pp-body{display:grid; grid-template-columns:minmax(0,1fr); align-items:start}
.pp-body>.pp-q,.pp-body>.pp-b,.pp-body>.pp-ms{min-width:0}
.pp-body>.pp-b{padding-top:15px}
@media (min-width:1100px){
  .pp-body{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); column-gap:4px}
  .pp-body>.pp-q .scan{margin-right:0}
  .pp-body>.pp-ms{grid-column:1 / -1}
}
.pp-ms .reveal .scan{margin:10px 0 0}
.pp-ms .scan img{max-width:960px; margin:0 auto}
.pp-q .scan img{max-width:760px; margin:0 auto}
.pp-ans{margin:0 17px 14px; border:1px dashed var(--line-2); border-radius:10px; padding:12px 14px; background:var(--surface-2)}
.pp-ans .seg{margin-bottom:10px}
.pp-ans textarea{width:100%; min-height:88px}
.pp-ans .drop{display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px; border:1px dashed var(--line-2); border-radius:9px; color:var(--ink-3); font-size:12.5px; text-align:center; background:var(--surface)}
.pp-ans .drop img{max-width:100%; max-height:240px; border-radius:6px; border:1px solid var(--line)}
.pp-ans .mic{display:flex; align-items:center; gap:10px; padding:14px; border:1px dashed var(--line-2); border-radius:9px; background:var(--surface); color:var(--ink-2); font-size:12.5px}
.pp-ans .mic .dot{width:12px; height:12px; border-radius:50%; background:var(--flag); flex:none}
.pp-ans .mic.rec .dot{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.pp-ans .soon{font-size:11px; color:var(--ink-3); margin-top:8px; font-weight:600}
.pp-cpbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:16px 0 4px}
.pp-cpbar .cpb{font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface)}
.pp-cpbar .cpb b{font-weight:800; margin-left:4px; color:var(--ink-3)}
.pp-cpbar .cpb.on{background:var(--brand); border-color:var(--brand); color:#fff}
.pp-cpbar .cpb.on b{color:#fff}
.pp-cpbar .cpb.empty{opacity:.5}
.pp-cpbar .cpb-t{font-size:12px; font-weight:700; color:var(--ink-3); margin-right:4px}
.arena{background:linear-gradient(160deg,var(--brand) 0%,#0A4F58 100%); border-radius:14px; padding:18px 20px; color:#fff; margin-bottom:18px}
:root[data-theme="dark"] .arena{background:linear-gradient(160deg,#12433D 0%,#0C2F38 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arena{background:linear-gradient(160deg,#12433D 0%,#0C2F38 100%)}}
@media (max-width:560px){.fprompt{font-size:17px}}
.fimg{margin:8px 0 10px; text-align:center}
.fimg img{max-width:100%; max-height:170px; border-radius:10px; border:1px solid var(--line); background:#fff; padding:4px}
@media (max-width:560px){.fimg img{max-height:130px}}
@media (max-width:600px){
  .chatcol{right:8px; left:8px; width:auto; top:64px; bottom:8px}
}
@media (max-width:900px){
  .mastery{margin-left:0; flex:1 1 100%}
  .meter{grid-template-columns:88px 1fr 32px}
}
.duebar{background:linear-gradient(160deg,var(--brand) 0%,#0A4F58 100%); border-radius:14px; padding:18px 20px; color:#fff; margin-bottom:24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
:root[data-theme="dark"] .duebar{background:linear-gradient(160deg,#12433D 0%,#0C2F38 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .duebar{background:linear-gradient(160deg,#12433D 0%,#0C2F38 100%)}}
@media (max-width:520px){
  .lwrap{padding-inline:16px}
  .lpills{width:100%; justify-content:stretch}
  .lpill{flex:1 1 auto; justify-content:center; padding:9px 11px}
  .lform .ti{max-width:none; flex:1 1 100%}
  .lform .btn{width:100%}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pp-stem .scan img,
  :root:not([data-theme="light"]) .pp-fig .scan img{background:#f6f6f4}
}
.linkbtn{font-size:12px; font-weight:700; color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; padding:0}
.corrbar{display:flex; gap:18px; align-items:center; flex-wrap:wrap; border:1px solid var(--gold-line); background:var(--gold-soft); border-radius:14px; padding:16px 20px; margin-bottom:22px}
.corrbar p{font-size:12.5px; color:var(--ink-2); margin-top:4px; max-width:56ch}
.corrpill{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line)}
.corrpill i{font-style:normal; opacity:.75; margin-left:3px}
.corrpill:hover{background:var(--gold-line)}
.card2.is-corr .face{border-color:var(--gold-line)}
.card2.is-corr .fcue{color:var(--gold)}
.pp.hide{display:none}
.pp-corr{margin-top:12px; border-top:1px dashed var(--line-2); padding-top:10px}
.pp-corr textarea{margin:6px 0 8px; font-size:13px}
.testpaper{margin-top:18px}
.tickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px 20px}
.tickgroup{display:flex; flex-direction:column; gap:6px}
.tickgroup .tg-h{padding-bottom:4px; border-bottom:1px solid var(--line); margin-bottom:2px; font-size:12px}
.tickgroup .mchk{font-weight:500; align-items:flex-start; line-height:1.35}
.tickgroup .mchk input{margin-top:2px; flex:none}
.tickgroup .mchk em{font-style:normal; color:var(--ink-3); font-size:11px; margin-left:auto; white-space:nowrap}
.blurt{border:1px solid var(--line); border-radius:12px; padding:14px 16px 16px; background:var(--surface-2); margin-bottom:14px}
.blurt-h{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.blurt-h h4{font-size:14.5px; font-weight:800; flex:1}
.blurt-p{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-bottom:10px}
.blurt textarea{margin-top:8px}
.cues{display:flex; gap:5px; flex-wrap:wrap}
.cues span{font-size:11.5px; font-weight:600; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; background:var(--surface)}
.blurt-ms{margin:0; padding-left:18px; font-size:13.5px}
.blurt-ms>li{margin-bottom:8px}
.blurt-ms>li>b{display:block; margin-bottom:2px}
.blurt-ms ul,.blurt-ms ol{margin:0; padding-left:18px; color:var(--ink-2)}
.tscroll.ana{margin-top:0; max-height:70vh; overflow:auto; border:1px solid var(--line); border-radius:10px}
.tscroll.ana table.t{min-width:0}
.anat th{position:sticky; top:0; background:var(--surface); z-index:1; white-space:nowrap}
.anat td{font-size:12.5px; min-width:80px}
.anat td:first-child{font-weight:600}
.anat .cell{max-width:34ch}
.anat .cell.long{max-width:56ch; white-space:pre-wrap; font-size:12px}
.anat tr.topic td{background:var(--sunk); font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2)}
.tick-y{display:inline-block; width:18px; height:18px; border-radius:50%; background:var(--brand); color:#fff; font-size:11px; font-weight:800; text-align:center; line-height:18px}

/* ---------- digestible notes: bullets, flows, term tables (batch 3) ---------- */
.segs{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.digest{margin:10px 0 14px}
.digest+.digest{margin-top:0}
.digest .lead-in{margin:0 0 8px; font-weight:600}
.digest ul.pts{margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.digest ul.pts>li{position:relative; padding-left:20px; line-height:1.55}
.digest ul.pts>li::before{content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--brand); opacity:.75}
.digest ol.flow{margin:0; padding:0; list-style:none; counter-reset:flow; display:flex; flex-direction:column}
.digest ol.flow>li{counter-increment:flow; position:relative; padding:10px 14px 10px 44px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); line-height:1.5}
.digest ol.flow>li::before{content:counter(flow); position:absolute; left:12px; top:10px; width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:800; display:grid; place-items:center}
.digest ol.flow>li+li{margin-top:18px}
.digest ol.flow>li+li::after{content:""; position:absolute; left:22px; top:-19px; width:2px; height:18px; background:var(--brand-line)}
.digest table.terms td:first-child{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; width:28%}
.flow-in{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; vertical-align:baseline; margin:2px 0}
.flow-in>span{display:inline-block; padding:1px 8px; border-radius:6px; border:1px solid var(--brand-line); background:var(--brand-soft); font-family:"Plus Jakarta Sans",sans-serif; font-size:13.5px; font-weight:600; color:var(--brand-ink); line-height:1.5}
.flow-in>span mark.ms{background:transparent; color:inherit; padding:0}
.flow-in>i{font-style:normal; color:var(--brand); font-weight:800}
.mkres table.t td.num{white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}
.mkres table.t td:nth-child(2){min-width:120px}

/* ======================================================================
   Landing page: two subjects on one page (16 Sept).
   Biology keeps the green; everything inside .subj-chem re-tokens to blue.
   ====================================================================== */
#landingView .subj-chem, #landingView .hsub.chem, #landingView .subjtab.chem, #landingView .bcard.subj-chem{
  --brand:#2A548F; --brand-ink:#1F4A8A; --brand-soft:#E9EFF8; --brand-line:#BDCDE6; --credit:#DCE8FA; --credit-ink:#1F4A8A;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #landingView .subj-chem, :root:not([data-theme="light"]) #landingView .hsub.chem, :root:not([data-theme="light"]) #landingView .subjtab.chem, :root:not([data-theme="light"]) #landingView .bcard.subj-chem{
    --brand:#8FB1E4; --brand-ink:#A9C7F2; --brand-soft:#16202F; --brand-line:#2C3D57; --credit:#1B2F4C; --credit-ink:#A9C7F2;
  }
}
:root[data-theme="dark"] #landingView .subj-chem, :root[data-theme="dark"] #landingView .hsub.chem, :root[data-theme="dark"] #landingView .subjtab.chem, :root[data-theme="dark"] #landingView .bcard.subj-chem{
  --brand:#8FB1E4; --brand-ink:#A9C7F2; --brand-soft:#16202F; --brand-line:#2C3D57; --credit:#1B2F4C; --credit-ink:#A9C7F2;
}
#landingView .subj-chem .lsec.dark{background:linear-gradient(170deg,#173B6B 0%,#10294C 100%)}
#landingView .subj-chem .lsec.dark .tag{color:#9FC4F6}
#landingView .subj-chem .lsec.dark .tag::before{background:#9FC4F6}
#landingView .subj-chem .contrast-s{color:#9FC4F6}
#landingView .subj-chem .contrast-row u{background:rgba(159,196,246,.22); color:#CFE1FA}
#landingView .subj-chem .contrast-row.good em{color:#9FC4F6}
#landingView .subj-chem .lsec.dark .ticks li::before{background:#9FC4F6}

/* hero: one card per subject instead of the stage rail */
#landingView .hero-subjects{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
#landingView .hsub{
  display:block; text-align:left; padding:14px 14px 12px; border-radius:16px; color:inherit;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); transition:transform .18s, background .18s;
}
#landingView .hsub:hover{transform:translateY(-3px); background:rgba(255,255,255,.11)}
#landingView .hsub-k{display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; color:#fff}
#landingView .hsub-s{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,243,238,.6); margin:2px 0 12px}
#landingView .hsub.chem .hsub-s{color:#BFD5F5}
#landingView .hsub .scr{transform:scale(.98); transform-origin:top left; pointer-events:none}
#landingView .hsub .scr-body{min-height:190px; max-height:230px; overflow:hidden; font-size:12.5px}
#landingView .hsub .mk-h{font-size:14.5px}
#landingView .hsub .mk-p{font-size:12.5px}
#landingView .btn-xl.chem{border-color:rgba(159,196,246,.55); color:#CFE1FA}

/* the subject bar */
#landingView .subjbar{position:sticky; top:0; z-index:30; background:var(--surface); border-block:1px solid var(--line); box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
#landingView .subjbar-in{display:flex; align-items:center; gap:18px; padding-block:12px; flex-wrap:wrap}
#landingView .subjbar-k{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
#landingView .subjtabs{display:flex; gap:8px; flex-wrap:wrap}
#landingView .subjtab{
  display:flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:999px; border:1px solid var(--line-2);
  font-size:15px; font-weight:800; color:var(--ink-2); background:var(--surface-2); letter-spacing:-.01em;
}
#landingView .subjtab i{width:10px; height:10px; border-radius:50%; background:var(--brand); flex:none}
#landingView .subjtab small{font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:0}
#landingView .subjtab.on{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink)}
#landingView .subjtab.on small{color:var(--brand-ink); opacity:.8}
#landingView .subjtab:hover{border-color:var(--brand)}
#landingView .subj[hidden]{display:none}

/* the idea, in three panels */
#landingView .contrasts.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
#landingView .contrast-h{display:block; font-size:14px; font-weight:800; color:#fff; margin:-8px 0 10px}
#landingView .contrast-row.ms ol{margin:0 0 10px; padding-left:20px; font-size:14px; line-height:1.55; color:#F2F8F5}
#landingView .contrast-row.ms ol li+li{margin-top:5px}
#landingView .contrast-row.ms em{color:#F3D28B}
#landingView .lsec-head .lede em{font-style:italic; color:#fff}

/* the past-paper screen: a real question and its scheme, both scaled to the box */
#landingView .mk-paper{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; align-items:start}
#landingView .mk-pcol{min-width:0}
#landingView .mk-pph{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
#landingView .mk-scan{background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:5px; overflow:hidden}
#landingView .mk-scan img{display:block; width:100%; height:auto}
#landingView .mk-pcol > .mk-tag.ctx{display:inline-block; margin-bottom:8px}
#landingView .hsub .mk-paper, #landingView .stage-m .mk-paper{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:640px){ #landingView .mk-paper{grid-template-columns:minmax(0,1fr)} }
#landingView .mk-p u.v{background:rgba(252,235,196,.9); color:#7A4E05}
#landingView .mk-p u.p{background:rgba(249,225,234,.95); color:#8E2C5A}
#landingView .lsec.dark .mk-p u.v, #landingView .hero .mk-p u.v{background:rgba(252,235,196,.25); color:#F3D28B}
#landingView .lsec.dark .mk-p u.p, #landingView .hero .mk-p u.p{background:rgba(249,225,234,.22); color:#F5B8D0}

/* chemistry blanks */
#landingView .mk-blank{padding:6px 0 4px}
#landingView .mk-blank .mk-lines{margin:12px 0 14px}
#landingView .mk-blank p{font-size:12.5px; color:var(--ink-3); margin:0; font-style:italic}
#landingView .hsub .mk-seg{display:none}
#landingView .hsub .scr-body{min-height:150px; max-height:190px}
@media (max-width:1280px) and (min-width:981px){
  #landingView .hero-subjects{grid-template-columns:minmax(0,1fr)}
  #landingView .hsub{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:center}
  #landingView .hsub .hsub-s{margin-bottom:8px}
  #landingView .hsub .scr-body{min-height:0; max-height:150px}
}
@media (max-width:560px){
  #landingView .hero-subjects{grid-template-columns:minmax(0,1fr)}
}
#landingView .hsub-txt{display:block}
#landingView .hsub-go{display:block; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:10px}
#landingView .hsub.chem .hsub-go{color:#CFE1FA}
#landingView .stages-ix{top:78px}
#landingView .stage{scroll-margin-top:84px}
#landingView .stage-m .scr-body:has(.mk-blank){min-height:0}

/* ======================================================================
   Shared parts of the landing page are neutral slate; the subject halves
   keep their own colour (Biology green, Chemistry blue).
   ====================================================================== */
#landingView .shared, #landingView .hero, #landingView .foot{
  --brand:#3E4F5B; --brand-ink:#2B3A45; --brand-soft:#ECF0F2; --brand-line:#C7D1D8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #landingView .shared{ --brand:#A7B7C2; --brand-ink:#C3D0D9; --brand-soft:#1C242A; --brand-line:#34414A; }
}
:root[data-theme="dark"] #landingView .shared{ --brand:#A7B7C2; --brand-ink:#C3D0D9; --brand-soft:#1C242A; --brand-line:#34414A; }
#landingView .hero{
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255,255,255,.09) 0%, transparent 55%),
    linear-gradient(168deg, #2A3742 0%, #1B252D 52%, #10171C 100%);
  color:#EEF2F5;
}
#landingView .hero-kicker{color:#C9B27F}
#landingView .hero-h1 .hl{color:#E6C98A}
#landingView .hero-sub{color:rgba(238,242,245,.78)}
#landingView .hero-stats dd{color:rgba(238,242,245,.6)}
#landingView .btn-xl{color:#1B252D}
#landingView .btn-xl:hover{background:#F4F1EA}
#landingView .btn-xl.ghost{color:#EEF2F5; border-color:rgba(255,255,255,.3)}
#landingView .hero-brand{color:#EEF2F5}
#landingView .hero-brand .mark{background:rgba(255,255,255,.12); color:#E6C98A}
#landingView .hsub-go{color:#E6C98A}
#landingView .hsub.bio .hsub-go{color:#8FE3B4}
#landingView .hsub.chem .hsub-go{color:#9FC4F6}
#landingView .lsec.dark.shared{background:linear-gradient(170deg,#25313A 0%,#171F26 100%); color:#EEF2F5}
#landingView .lsec.dark.shared .tag{color:#E6C98A}
#landingView .lsec.dark.shared .tag::before{background:#E6C98A}
#landingView .lsec.dark.shared .lede, #landingView .lsec.dark.shared p{color:rgba(238,242,245,.76)}
#landingView .lsec.dark.shared .ticks li::before{background:rgba(230,201,138,.15); border-color:rgba(230,201,138,.4)}
#landingView .lsec.dark.shared .ticks li::after{border-color:#E6C98A}
#landingView .lsec.dark.shared .tutor-msg.me{background:#E6C98A; color:#2A2210 !important}
#landingView .foot{background:#10171C; color:rgba(238,242,245,.7)}
#landingView .foot .hero-brand{color:#EEF2F5}
#landingView .subjbar.shared .subjtab.bio{--brand:#0B6E63; --brand-ink:#085B52; --brand-soft:#E4F1EE; --brand-line:#A9D4CD}
#landingView .subjbar.shared .subjtab.chem{--brand:#2A548F; --brand-ink:#1F4A8A; --brand-soft:#E9EFF8; --brand-line:#BDCDE6}
#landingView .shared .bcard.live{--brand:#0B6E63; --brand-ink:#085B52; --brand-soft:#E4F1EE; --brand-line:#A9D4CD}
#landingView .shared .signup .btn-xl{background:#2A3742; border-color:#2A3742; color:#fff}
#landingView .shared .signup .btn-xl:hover{background:#1B252D}

/* the hero subject cards show the whole Learn screen — nothing clipped */
#landingView .hsub .scr-body{min-height:0; max-height:none; overflow:visible; padding:12px 13px 13px}
#landingView .hsub .scr{transform:none}
#landingView .hsub .mk-h{font-size:13px; margin-bottom:6px; line-height:1.3}
#landingView .hsub .mk-p{font-size:11.5px; line-height:1.5; margin-bottom:6px}
#landingView .hsub .mk-flag{font-size:10px; padding:5px 8px}
#landingView .hsub .mk-blank p{font-size:11.5px}
@media (max-width:1280px) and (min-width:981px){ #landingView .hsub .scr-body{max-height:none} }
/* hero subject cards: text sits at the top, the preview fills the rest of the card */
@media (min-width:981px){
  #landingView .hsub{align-items:start}
  #landingView .hsub .scr{display:flex; flex-direction:column; height:100%}
  #landingView .hsub .scr-body{flex:1 1 auto}
  #landingView .hero-subjects{align-items:stretch}
  #landingView .hsub.chem .scr-body{min-height:200px}
  #landingView .hsub .mk-blank{display:flex; flex-direction:column; justify-content:center; height:100%}
  #landingView .hsub .mk-blank .mk-lines{margin:14px 0 16px}
  #landingView .hsub .mk-blank .mk-lines i{height:7px; margin-bottom:9px}
}
/* the preview stays inside its card: the card is a column, the screen takes the leftover height */
@media (min-width:1281px){
  #landingView .hsub{display:flex; flex-direction:column; align-items:stretch}
  #landingView .hsub .hsub-txt{flex:0 0 auto}
  #landingView .hsub .scr{flex:1 1 auto; height:auto; min-height:0}
  #landingView .hsub .scr-body{flex:1 1 auto}
}
@media (min-width:981px) and (max-width:1280px){
  #landingView .hsub{align-items:stretch}
  #landingView .hsub .scr{height:auto; min-height:100%}
}

/* ======================================================================
   Chemistry: the app re-tokens to blue on a chemistry board, and the
   six-stage page adds the Angles stage.
   ====================================================================== */
body[data-subject="chemistry"]{--brand:#2A548F; --brand-ink:#1F4A8A; --brand-soft:#E9EFF8; --brand-line:#BDCDE6; --credit:#DCE8FA; --credit-ink:#1F4A8A; --hl-term:#DFF0EA; --hl-term-ink:#0A5C46}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body[data-subject="chemistry"]{--brand:#8FB1E4; --brand-ink:#A9C7F2; --brand-soft:#16202F; --brand-line:#2C3D57; --credit:#1B2F4C; --credit-ink:#A9C7F2; --hl-term:#16493B; --hl-term-ink:#9DECCF} }
:root[data-theme="dark"] body[data-subject="chemistry"]{--brand:#8FB1E4; --brand-ink:#A9C7F2; --brand-soft:#16202F; --brand-line:#2C3D57; --credit:#1B2F4C; --credit-ink:#A9C7F2; --hl-term:#16493B; --hl-term-ink:#9DECCF}
body[data-subject="chemistry"] .brand .mark{background:var(--brand)}
body[data-subject="chemistry"] .duebar{background:linear-gradient(160deg,var(--brand) 0%,#1B3A66 100%)}
.path.chem .step{font-size:12.5px}
.angle{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px 14px; margin-bottom:12px; box-shadow:var(--shadow)}
.angle.hide{display:none}
.angle-h{display:flex; gap:12px; align-items:flex-start; margin-bottom:8px}
.angle-h .apn{width:26px; height:26px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12.5px; flex:none}
.angle-t{flex:1; min-width:0}
.angle-t h4{font-size:15px; font-weight:800; margin-bottom:6px}
.angle-q{font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.55; margin:0 0 10px; color:var(--ink)}
.angle-src{display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.angle-src .eyebrow{margin-right:4px}
.angle-pts{margin:6px 0 10px}
.angle-pts .eyebrow{display:block; margin-bottom:4px}
.angle-pts ol{margin:0; padding-left:22px; font-size:14px; line-height:1.55}
.angle-pts li+li{margin-top:5px}
.angle-more{margin-top:8px; font-size:13.5px; color:var(--ink-2)}
.angle-more summary{cursor:pointer; font-weight:700; color:var(--brand-ink); font-size:12.5px}
.angle-more p{margin:8px 0 0; line-height:1.55}
.stemtab{font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.5; overflow-x:auto; background:var(--sunk); border-radius:8px; padding:10px 12px; margin:8px 0; white-space:pre}
.qcard .stem .stemtab{display:block}

/* ===== Chemistry page, template format (.chem2) — ported from the 3.3.4.2 interactive page ===== */
.chem2{--key:#1c4f86; --key-wash:#e8f0f9; --key-ink:#132f4f; --num:#5b3a86; --num-wash:#f0eaf9; --num-ink:#3a265a; --warn-ink:#71171e; --acc-ink:#5f4209; --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-family:"Source Serif 4",Georgia,serif; font-size:16px; line-height:1.6; color:var(--ink);
  display:grid; grid-template-columns:224px minmax(0,1fr); gap:32px; align-items:start; padding-bottom:70px}
@media (max-width:920px){.chem2{grid-template-columns:minmax(0,1fr);gap:0}}
:root[data-theme="dark"] .chem2{--key:#9cc0f0; --key-wash:#16283f; --key-ink:#d3e4fb; --num:#c6a8ee; --num-wash:#2a1f3d; --num-ink:#e2d5f8; --warn-ink:#f6bcb6; --acc-ink:#f1d9a3}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chem2{--key:#9cc0f0; --key-wash:#16283f; --key-ink:#d3e4fb; --num:#c6a8ee; --num-wash:#2a1f3d; --num-ink:#e2d5f8; --warn-ink:#f6bcb6; --acc-ink:#f1d9a3} }
.chem2 h1,.chem2 h2,.chem2 h3,.chem2 h4,.chem2 .ui,.chem2 button,.chem2 select,.chem2 label,.chem2 th,.chem2 .tag,.chem2 .chip,.chem2 .cal .k,.chem2 .stat,.chem2 .eyebrow,.chem2 .cpk,.chem2 .cpt,.chem2 .cpgo,.chem2 .atb,.chem2 .mini,.chem2 .btn,.chem2 .stg,.chem2 .rlab,.chem2 .scount,.chem2 .src,.chem2 .qm,.chem2 .kind,.chem2 .seen,.chem2 .mp,.chem2 .arow .ttl,.chem2 .pqh .id,.chem2 .filelab,.chem2 .rv>summary,.chem2 .pick>summary,.chem2 .back,.chem2 .sbody h4,.chem2 .stat .k,.chem2 .stat .v,.chem2 .wst .wi,.chem2 .fstep .fi,.chem2 .brow .bn{font-family:var(--ui)}
.chem2 code,.chem2 .mono,.chem2 .qn,.chem2 .arow .num,.chem2 .tick .tn,.chem2 .brow .bv{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.chem2 p{margin:0 0 .8em} .chem2 p:last-child{margin-bottom:0}
.chem2 img{max-width:100%;height:auto}
.chem2 .ppfig{margin:10px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.chem2 .ppfig img{display:block;width:100%}
:root[data-theme="dark"] .chem2 .ppfig img,:root[data-theme="dark"] .chem2 .msscan img{background:#f6f6f4}
.chem2 .ppstem{border-left:3px solid var(--line-2);padding:2px 0 2px 12px;margin:0 0 10px;color:var(--ink-2);font-size:14px}
.chem2 .ppq{font-size:15px}
.chem2 .qline{color:var(--ink-3);font-size:13.5px;border-bottom:1px dotted var(--line-2);padding-bottom:2px;margin:6px 0 0}
.chem2 .qm.mark,.chem2 span.qm{font-family:var(--ui);font-weight:700;font-size:12px;color:var(--ink-3);white-space:nowrap}
.chem2 .msline{margin:0 0 5px;font-size:14px}
.chem2 .msscan{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.chem2 .msscan .k{display:block;font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);padding:7px 10px;background:var(--sunk);border-bottom:1px solid var(--line)}
.chem2 .msscan img{display:block;width:100%}
.chem2 .rail .stg .n{background:var(--surface)}
.chem2 .checkline{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin:0 0 5px;cursor:pointer}
.chem2 .checkline input{margin-top:4px;accent-color:var(--brand);width:15px;height:15px;flex:0 0 auto}
.chem2 .checkline .kind{margin-left:auto}
.chem2 .pp-corr{margin-top:12px}
.chem2 .pp-corr textarea{width:100%;min-height:52px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px;background:var(--surface);color:var(--ink);margin:4px 0 8px}
.chem2 .tscroll{overflow-x:auto;margin:0 0 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.chem2 table.t{width:100%;border-collapse:collapse;font-size:14px}
.chem2 .stemtab{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;white-space:pre;overflow-x:auto;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.chem2 .bar .lab{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3)}
/* highlights */
.chem2 mark{padding:0 2px;border-radius:3px;color:inherit;background:none}
.chem2 mark.ms{background:var(--credit);box-shadow:inset 0 -2px 0 var(--brand)}
.chem2 mark.key{background:var(--key-wash);box-shadow:inset 0 -2px 0 var(--key);color:var(--key-ink)}
.chem2 mark.num{background:var(--num-wash);box-shadow:inset 0 -2px 0 var(--num);color:var(--num-ink)}
.chem2 mark.warn{background:var(--flag-soft);box-shadow:inset 0 -2px 0 var(--flag);color:var(--warn-ink)}
.chem2 mark.acc{background:var(--gold-soft);box-shadow:inset 0 -2px 0 var(--gold);color:var(--acc-ink)}
/* rail */
.chem2 .c2rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);padding-top:24px}
.chem2 .rlab{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.chem2 .stages{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}
.chem2 .stg{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 10px;border-radius:9px;color:var(--ink-2);font-size:13.5px;font-weight:600;font-family:inherit;line-height:1.28}
.chem2 .stg:hover{background:var(--sunk);color:var(--ink)}
.chem2 .stg[aria-current="true"]{background:var(--brand-soft);color:var(--brand)}
.chem2 .stg .n{flex:0 0 19px;height:19px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--ink-3);margin-top:1px}
.chem2 .stg[aria-current="true"] .n{border-color:var(--brand);color:var(--brand);background:var(--surface)}
.chem2 .stg .sub{display:block;font-weight:500;font-size:10.5px;color:var(--ink-3);margin-top:1px}
@media (max-width:920px){ .chem2 .c2rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 50px);padding:7px 0;background:var(--surface);border-bottom:1px solid var(--line);z-index:20}
  .chem2 .rlab{display:none}
  .chem2 .stages{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px}
  .chem2 .stg{white-space:nowrap;padding:6px 11px;border:1px solid var(--line)}
  .chem2 .stg .sub{display:none}
}
/* panels */
.chem2 .c2panel{padding-top:28px}
.chem2 .eyebrow{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.chem2 h1.ph{font-size:clamp(27px,4.2vw,38px);line-height:1.08;letter-spacing:-.8px;margin:0 0 10px;text-wrap:balance;font-weight:800}
.chem2 .lede{font-size:16.5px;color:var(--ink-2);max-width:64ch;margin:0 0 20px}
.chem2 h2.sh{font-size:19px;font-weight:700;letter-spacing:-.3px;margin:30px 0 12px;text-wrap:balance}
.chem2 h3.tt{font-size:15px;font-weight:700;margin:0 0 6px}
.chem2 .muted{color:var(--ink-3);font-size:12.5px}
.chem2 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:0 0 22px}
@media (max-width:620px){ .chem2 .stats{grid-template-columns:repeat(2,1fr)}
}
.chem2 .stat{background:var(--surface);padding:12px 13px}
.chem2 .stat .k{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3)}
.chem2 .stat .v{font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.chem2 .stat .f{font-size:11px;color:var(--ink-3);line-height:1.3}
.chem2 .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 13px}
.chem2 .cal{border-radius:var(--r);padding:12px 15px;margin:0 0 13px;font-size:14.5px}
.chem2 .cal .k{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;display:block;margin-bottom:4px}
.chem2 .cal.rule{border:1px solid var(--gold-line);background:var(--gold-soft)}
 .chem2 .cal.rule .k{color:var(--gold)}
.chem2 .cal.trap{border:1px solid var(--flag-line);background:var(--flag-soft)}
 .chem2 .cal.trap .k{color:var(--flag)}
.chem2 .cal.note{border:1px solid var(--line);background:var(--sunk)}
 .chem2 .cal.note .k{color:var(--ink-3)}
.chem2 .spec{border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 var(--r) var(--r) 0;
  padding:11px 15px;margin:0 0 16px;font-size:14.5px}
.chem2 .spec .k{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:3px}
/* level switch */
.chem2 .levels{display:flex;gap:6px;align-items:center;margin:0 0 18px;flex-wrap:wrap}
.chem2 .levels .lab{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin-right:3px}
.chem2 .chip{font-family:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;line-height:1.3}
.chem2 .chip:hover{border-color:var(--line-2)}
.chem2 .chip[aria-pressed="true"],.chem2 .chip[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--surface)}
/* the chemistry .bar is a row of controls, not the biology progress bar of the
   same class name — undo that rule's height, clipping and fill */
.chem2 .bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 16px;
  height:auto;border-radius:0;background:none;overflow:visible}
/* figures / tables / flow */
.chem2 figure{margin:13px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px}
.chem2 figure svg{display:block;width:100%;min-width:0;max-width:100%;height:auto}
.chem2 figcaption{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}
.chem2 .tw{overflow-x:auto;margin:0 0 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.chem2 table{width:100%;border-collapse:collapse;font-size:14px}
.chem2 th,.chem2 td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.chem2 tr:last-child td{border-bottom:0}
/* data tables authored as <table class="dat"> (page-pack convention): same container
   treatment as .tscroll, and scrollable on a phone instead of pushing the page wide */
.chem2 table.dat,.chem2 table.data{display:block;overflow-x:auto;max-width:100%;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 13px}
.chem2 table.dat th,.chem2 table.data th{white-space:nowrap}
.chem2 th{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);background:var(--sunk)}
.chem2 .flow{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:0 0 13px}
.chem2 .fstep{flex:1 1 150px;min-width:140px;background:var(--sunk);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:13.5px;position:relative}
.chem2 .fstep .fi{font-family:inherit;font-size:9.5px;font-weight:700;color:var(--brand);display:block;margin-bottom:2px}
.chem2 .fstep::after{content:"";position:absolute;right:-8px;top:50%;width:0;height:0;
  border-left:6px solid var(--line-2);border-top:5px solid transparent;border-bottom:5px solid transparent}
.chem2 .fstep:last-child::after{display:none}
@media (max-width:560px){ .chem2 .fstep::after{display:none}
}
/* stepper */
.chem2 .stepper{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin:0 0 14px}
.chem2 .sbar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.chem2 .dots{display:flex;gap:5px;flex:1}
.chem2 .dot{width:100%;max-width:56px;height:4px;border-radius:99px;background:var(--line-2)}
.chem2 .dot.on{background:var(--brand)}
.chem2 .scount{font-family:inherit;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.chem2 .sbody{padding:16px 18px;min-height:96px}
.chem2 .sbody h4{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:-.2px}
.chem2 .snav{display:flex;gap:8px;padding:0 18px 16px}
.chem2 .btn{font-family:inherit;font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;border:1px solid var(--brand);
  background:var(--brand);color:var(--surface);cursor:pointer}
.chem2 .btn[disabled]{opacity:.35;cursor:default}
.chem2 .btn.ghost{background:var(--surface);color:var(--brand)}
.chem2 .fade{animation:fi .22s ease-out}
@keyframes fi{from{opacity:0;transform:translateY(4px)}
.chem2 to{opacity:1;transform:none}
}
/* angles */
.chem2 .alist{display:flex;flex-direction:column;gap:6px}
.chem2 .arow{display:flex;gap:11px;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:11px 14px}
.chem2 .arow:hover{border-color:var(--brand);background:var(--brand-soft)}
.chem2 .arow .num{font-family:"IBM Plex Mono";font-size:12px;font-weight:600;color:var(--brand);flex:0 0 20px}
.chem2 .arow .ttl{font-family:inherit;font-weight:700;font-size:14.5px;flex:1;line-height:1.3;color:var(--ink)}
/* when the title and its "N in past papers" tag cannot share a phone-width row, the tag takes the next line, right-aligned, instead of running off the edge */
.chem2 .arow{flex-wrap:wrap}
.chem2 .arow .ttl{flex:1 1 150px;min-width:0}
.chem2 .arow>.tag{margin-left:auto}
.chem2 .tag{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.chem2 .tag.b{border-color:var(--brand);color:var(--brand)}
.chem2 .back{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--brand);background:none;border:0;cursor:pointer;padding:0;margin:0 0 12px}
/* questions */
.chem2 .q{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:13px 15px;margin:0 0 8px}
.chem2 .qh{display:flex;gap:9px;align-items:baseline}
.chem2 .qn{font-size:12px;font-weight:600;color:var(--brand);flex:0 0 auto}
.chem2 .qt{flex:1;font-size:15px}
/* a part can carry a spectrum, a drawn structure or a data table: the text column shrinks to
   the screen (min-width:0) and a table wider than it scrolls inside it rather than pushing the
   part off the right edge of a phone */
.chem2 .qh .qt{min-width:0;overflow-wrap:anywhere}
.chem2 .qh .qt table{display:block;overflow-x:auto;max-width:100%}
.chem2 .qh .qt img,.chem2 .qh .qt svg{max-width:100%;height:auto}
.chem2 .qm{font-family:inherit;font-weight:700;font-size:12px;color:var(--ink-3);white-space:nowrap}
.chem2 .rv{margin-top:9px}
.chem2 .rv>summary{cursor:pointer;list-style:none;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--brand);
  display:inline-flex;gap:6px;border:1px solid var(--line);border-radius:99px;padding:4px 11px;background:var(--sunk)}
.chem2 .rv>summary::-webkit-details-marker{display:none}
.chem2 .rv[open]>summary{color:var(--ink-3)}
.chem2 .work{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.chem2 .wst{display:flex;gap:9px;font-size:14.5px}
.chem2 .wst .wi{flex:0 0 20px;height:20px;border-radius:50%;background:var(--brand);color:var(--surface);font-family:inherit;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;margin-top:2px}
.chem2 .ansb{margin-top:10px;border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 8px 8px 0;padding:10px 13px;font-size:14.5px}
.chem2 .noteb{margin-top:7px;font-size:13px;color:var(--ink-2)}
.chem2 .pq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 10px;overflow:hidden}
.chem2 .pqh{display:flex;gap:9px;align-items:baseline;padding:10px 14px;background:var(--sunk);border-bottom:1px solid var(--line);flex-wrap:wrap}
.chem2 .pqh .id{font-family:inherit;font-weight:800;font-size:15px;color:var(--brand)}
.chem2 .src{font-size:11.5px;color:var(--ink-3)}
.chem2 .pqb{padding:13px 15px;font-size:14.5px}
.chem2 .msb{border-top:1px solid var(--line);background:var(--sunk);padding:12px 15px;font-size:14px}
.chem2 .msb h4{margin:0 0 7px;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--brand);font-weight:700}
.chem2 .msb div{margin:0 0 4px}
/* mastery */
.chem2 .bars{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.chem2 .brow{display:grid;grid-template-columns:160px 1fr 40px;gap:11px;align-items:center;font-size:13.5px}
@media (max-width:520px){ .chem2 .brow{grid-template-columns:104px 1fr 34px;gap:8px;font-size:12.5px}
}
.chem2 .brow .bn{font-family:inherit;font-weight:600}
.chem2 .track{height:7px;border-radius:99px;background:var(--sunk);overflow:hidden;border:1px solid var(--line)}
.chem2 .fill{height:100%;background:var(--brand)}
.chem2 .fill.hot{background:var(--flag)}
 .chem2 .fill.mid{background:var(--gold)}
.chem2 .brow .bv{font-family:"IBM Plex Mono";font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.chem2 .band{border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;margin:0 0 10px;background:var(--surface)}
.chem2 .band h4{margin:0 0 6px;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.chem2 .band ul{margin:0;padding-left:17px;font-size:14px}
.chem2 .band li{margin:0 0 2px}
.chem2 .check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.chem2 .check li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px}
.chem2 .check input{margin-top:4px;accent-color:var(--brand);width:15px;height:15px;flex:0 0 auto}
.chem2 .kind{font-family:inherit;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:99px;padding:1px 6px;margin-left:auto;white-space:nowrap;align-self:center}
.chem2 .seen{font-family:inherit;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.chem2 .seen.no{background:var(--flag-soft);color:var(--flag);border:1px solid var(--flag-line)}
.chem2 .seen.yes{background:var(--brand-soft);color:var(--brand);border:1px solid var(--line-2)}
.chem2 .sent{border-left:3px solid var(--brand);padding-left:12px;margin:0 0 8px;font-size:14.5px}
.chem2 .foot{border-top:1px solid var(--line);margin-top:40px;padding-top:16px;font-size:12.5px;color:var(--ink-3)}
.chem2 .pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 0}
/* content-point cards */
.chem2 .cpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:0 0 20px}
@media (max-width:860px){ .chem2 .cpgrid{grid-template-columns:1fr}
}
.chem2 .cpcard{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;font-family:inherit;color:inherit}
.chem2 .cpcard:hover{border-color:var(--brand);background:var(--brand-soft)}
.chem2 .cpcard[aria-current="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.chem2 .cpcard .cpk{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--brand)}
.chem2 .cpcard .cpt{font-family:inherit;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.2px}
.chem2 .cpcard .cpl{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.chem2 .cpcard .cpgo{font-family:inherit;font-size:11.5px;font-weight:700;color:var(--brand);margin-top:auto;padding-top:4px}
/* pickers */
.chem2 .pick{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 14px;overflow:hidden}
.chem2 .pick>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 15px;background:var(--sunk);font-family:inherit;font-size:13px;font-weight:700}
.chem2 .pick>summary::-webkit-details-marker{display:none}
.chem2 .pick>summary::marker{content:""}
.chem2 .pick>summary:hover{background:var(--brand-soft)}
.chem2 .pick>summary .hint{font-weight:600;color:var(--ink-3);font-size:11.5px;margin-left:auto}
.chem2 .pick>summary .plab{font-size:13.5px;color:var(--ink)}
.chem2 .pick>summary .psel{font-weight:600;color:var(--ink-3);font-size:12px;flex:1 1 130px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chem2 .pick>summary .pchev{flex:0 0 auto;width:0;height:0;border-left:6px solid var(--brand);
  border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .16s ease}
.chem2 .pick[open]>summary .pchev{transform:rotate(90deg)}
.chem2 .pick[open]>summary{border-bottom:1px solid var(--line)}
/* before the stage is revealed the chooser is the only thing on the page, so it
   carries the accent and asks to be opened */
.chem2 .pick.armed{border-color:var(--brand-line)}
.chem2 .pick.armed>summary{background:var(--brand-soft)}
.chem2 .pick.armed>summary .plab{color:var(--brand-ink)}
.chem2 .pickb{padding:13px 15px}
.chem2 .pickh{margin:0 0 10px;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.chem2 .tickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
@media (max-width:700px){ .chem2 .tickgrid{grid-template-columns:1fr}
  .chem2 .pick>summary{padding:10px 12px;gap:8px}
  .chem2 .pick>summary .psel{flex-basis:100%;order:9}
  .chem2 .pick>summary .hint{font-size:11px}
  .chem2 .pickgo{width:100%;justify-content:center}
}
.chem2 .tick{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;padding:5px 6px;border-radius:7px;cursor:pointer}
.chem2 .tick:hover{background:var(--sunk)}
.chem2 .tick input{margin-top:3px;accent-color:var(--brand);width:15px;height:15px;flex:0 0 auto}
.chem2 .tick .tn{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--brand);flex:0 0 20px}
.chem2 .tick .tc{margin-left:auto;font-family:inherit;font-size:11px;color:var(--ink-3);white-space:nowrap}
.chem2 .pickact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.chem2 .pickgo{margin-left:auto;padding:8px 16px;font-size:12.5px}
.chem2 .mini{font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.chem2 .mini:hover{border-color:var(--brand);color:var(--brand)}
/* answer box */
.chem2 .ans{margin-top:11px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunk)}
.chem2 .anst{display:flex;gap:4px;padding:7px 9px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.chem2 .anst .al{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.chem2 .atb{font-family:inherit;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.chem2 .atb[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.chem2 .atb.rec{background:var(--flag);border-color:var(--flag);color:var(--surface)}
.chem2 .ansb2{padding:10px}
.chem2 .ans textarea{width:100%;min-height:76px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-family:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--surface)}
.chem2 .ans .fine{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.chem2 .shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chem2 .shots img{width:104px;height:104px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2)}
.chem2 .filelab{display:inline-block;font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:99px;
  border:1px dashed var(--line-2);background:var(--surface);color:var(--brand);cursor:pointer}
.chem2 .filelab input{display:none}
/* mixed drill */
.chem2 .mixq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin:0 0 12px}
.chem2 .mixh{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:10px 15px;background:var(--sunk);border-bottom:1px solid var(--line)}
.chem2 .mixh .mp{font-family:inherit;font-size:11px;font-weight:700;color:var(--ink-3)}
.chem2 .mixb{padding:15px 17px}
.chem2 .mixb .qtext{font-size:16px;margin:0 0 4px}
/* must / do not */
.chem2 .md{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 13px}
@media (max-width:760px){ .chem2 .md{grid-template-columns:1fr}
}
.chem2 .mdcol{border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;background:var(--surface)}
.chem2 .mdcol.must{border-color:#bcdccf;background:#f4fbf7}
.chem2 .mdcol.dont{border-color:var(--flag-line);background:var(--flag-soft)}
.chem2 .mdcol h4{margin:0 0 7px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700}
.chem2 .mdcol.must h4{color:var(--brand)}
 .chem2 .mdcol.dont h4{color:var(--flag)}
.chem2 .mdcol ul{margin:0;padding-left:17px;font-size:14px}
.chem2 .mdcol li{margin:0 0 6px;line-height:1.5}.chem2 [hidden]{display:none!important}
.chem2 .c2main{min-width:0;max-width:100%}
.chem2 .c2rail{min-width:0}

/* ---------- extended-response / essay arena list ---------- */
.extlist{display:flex; flex-direction:column; gap:10px}
.extlist .ext-sp:first-child{margin-top:0}

/* ================= Organic Mechanism Arena + Synthetic Route Arena =================
   The mechanism drawings and the reaction maps arrive as inline SVG in
   data/mechanisms/<board>.js and data/routes/<board>.js. Everything the SVG needs
   is scoped under .molbox / .rt-map so none of it leaks into a spec page. */

/* ---------- the structure canvas ---------- */
.molbox{--arrow:#DE5323; --struct:var(--ink); --struct-dim:var(--ink-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; overflow-x:auto}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .molbox{--arrow:#FF7A45} }
:root[data-theme="dark"] .molbox{--arrow:#FF7A45}
.molbox .mol{display:block; width:100%; height:auto; max-width:100%; min-width:300px; overflow:visible}
.molbox .mol text{font-family:inherit; fill:var(--struct)}
.molbox .mol .bd{stroke:var(--struct); stroke-width:1.7; stroke-linecap:round; fill:none}
.molbox .mol .bd.dim{stroke:var(--struct-dim)}
.molbox .mol .arw{stroke:var(--arrow); stroke-width:2; fill:none; stroke-linecap:round}
.molbox .mol .arwh{fill:var(--arrow)}
.molbox .mol .arwn circle{fill:var(--arrow); stroke:var(--surface); stroke-width:2.6}
.molbox .mol .arwn text{fill:var(--surface); font-weight:700}
.molbox .mol .chg{fill:var(--struct)}
.molbox .mol .dl{fill:var(--arrow); font-weight:600}
.molbox .mol .lp{fill:var(--struct)}
/* the arrow renders complete by default; the keyframes only hide it while the draw-on is pending */
@media (prefers-reduced-motion: no-preference){
  .molbox .mol .anim{animation:molDraw .62s ease-out backwards}
  .molbox .mol .animh, .molbox .mol .arwn{animation:molPop .2s ease-out backwards}
  @keyframes molDraw{ from{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)} to{stroke-dasharray:var(--len); stroke-dashoffset:0} }
  @keyframes molPop{ from{opacity:0} to{opacity:1} }
}
.molcap{font-size:12px; color:var(--ink-3); margin:7px 2px 0}

/* ---------- mechanism arena ---------- */
.mx-pick{display:flex; flex-direction:column; gap:12px; margin:0 0 18px}
.mx-grp{display:flex; flex-wrap:wrap; gap:7px; align-items:baseline}
.mx-grp > b{flex:0 0 132px; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding-top:6px}
.mxb{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px;
  padding:7px 12px; font:inherit; font-size:13.5px; cursor:pointer; transition:.14s; text-align:left}
.mxb:hover{border-color:var(--brand); color:var(--brand)}
.mxb[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.mxb .tick{color:var(--brand); font-weight:700; margin-right:5px}
.mxb[aria-pressed="true"] .tick{color:#fff}
.mx-head{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; margin:0 0 4px}
.mx-head h3{font-size:19px}
.mx-eqn{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13.5px; color:var(--ink-2);
  background:var(--sunk); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin:10px 0 0; overflow-x:auto}
.mx-facts{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:14px 0 0; font-size:14px}
.mx-facts dt{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding-top:3px}
.mx-facts dd{margin:0; color:var(--ink-2)}
.mx-asked{margin:14px 0 0; padding-left:19px; font-size:14px; color:var(--ink-2)}
.mx-asked li{margin:0 0 5px}
.mx-stepbar{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.mxs{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px;
  padding:6px 13px; font:inherit; font-size:12.5px; cursor:pointer; transition:.14s}
.mxs:hover{border-color:var(--brand); color:var(--brand)}
.mxs[aria-pressed="true"]{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink); font-weight:600}
.mx-step h4{font-size:15.5px; margin:0 0 11px}
.mx-eqs{display:flex; flex-direction:column; gap:7px; margin:0 0 13px}
.mx-eqs span{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:14px; background:var(--sunk);
  border:1px solid var(--line); border-radius:8px; padding:9px 13px; color:var(--ink)}
.mx-pts{display:flex; flex-direction:column; gap:8px; margin:13px 0 0}
.mx-pt{display:flex; gap:11px; align-items:flex-start; padding:10px 13px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); font-size:14px}
.mx-pt > i{flex:none; width:20px; height:20px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink);
  font-style:normal; font-size:11.5px; font-weight:700; display:grid; place-items:center}
.mx-nav{display:flex; gap:9px; align-items:center; margin:15px 0 0; flex-wrap:wrap}
.mx-nav .n{font-size:12.5px; color:var(--ink-3); margin-left:auto}
.mx-traps{margin:0; padding-left:19px; font-size:14px; color:var(--ink-2)}
.mx-traps li{margin:0 0 6px}
.mx-drill{display:flex; flex-direction:column; gap:12px}
.mx-q{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:13px 15px}
.mx-q p{font-size:14.5px; margin:0 0 9px}
.mx-q .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.mx-in{flex:1 1 220px; min-width:0; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink);
  border-radius:8px; padding:8px 11px; font:inherit; font-size:14px}
.mx-in:focus{outline:none; border-color:var(--brand); background:var(--brand-soft)}
.mx-in.ok{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink)}
.mx-in.bad{border-color:var(--flag); background:var(--flag-soft); color:var(--flag)}
.mx-fb{font-size:13px; margin:9px 0 0; color:var(--ink-2)}
.mx-fb.ok{color:var(--brand-ink)}
.mx-fb.bad{color:var(--flag)}
.mx-score{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; font-size:13px; color:var(--ink-2); margin:0 0 11px}
/* the hint after the score takes a line of its own on a phone instead of a 120px column beside it */
.mx-score>span{flex:1 1 240px; min-width:0}
@media (max-width:600px){ .mx-score>span{flex-basis:100%} }
.mx-score b{font-size:17px; color:var(--ink)}
@media (max-width:640px){
  .mx-grp > b{flex:1 1 100%; padding-top:0}
  .mx-facts{grid-template-columns:1fr; gap:2px 0}
  .mx-facts dd{margin:0 0 8px}
  /* on a phone the tier and marks sit under the question, not beside it */
  .qc-h{flex-wrap:wrap}
  .qc-h .qtext{flex:1 1 100%; order:2}
  .qc-h .qtags{flex:1 1 100%; max-width:none; order:3; justify-content:flex-start; margin-top:2px}
}

/* ---------- synthetic route arena ---------- */
.rt-map{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:auto; box-shadow:var(--shadow); margin:0 0 14px}
.rt-map .mapsvg{display:block; width:100%; height:auto; min-width:880px}
.rt-map .node{cursor:pointer}
.rt-map .node rect{fill:var(--sunk); stroke:var(--line-2); stroke-width:1.4}
.rt-map .node:hover rect{stroke:var(--brand)}
.rt-map .node.hot rect{fill:var(--brand-soft); stroke:var(--brand); stroke-width:2}
.rt-map .node.tgt rect{fill:var(--credit); stroke:var(--brand); stroke-width:2}
.rt-map .node text{fill:var(--ink); font-family:inherit; font-size:12.5px; font-weight:600; text-anchor:middle; pointer-events:none}
.rt-map .node text.f{fill:var(--ink-3); font-size:10px; font-weight:500}
.rt-map .node.dim{opacity:.38}
.rt-map .edge{stroke:var(--line-2); stroke-width:1.6; fill:none; cursor:pointer; opacity:.62}
.rt-map .edge:hover, .rt-map .edge.hot{stroke:var(--brand); stroke-width:2.6; opacity:1}
.rt-map .edge.dim{opacity:.14}
.rt-map .elab{cursor:pointer; transition:.15s}
.rt-map .elab text{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px; fill:var(--ink-2); pointer-events:none}
.rt-map .elab .elab-bg{fill:var(--surface); stroke:var(--line); stroke-width:1}
.rt-map .elab .elab-tie{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 2}
.rt-map .elab:hover text, .rt-map .elab.hot text{fill:var(--brand); font-weight:600}
.rt-map .elab:hover .elab-bg{stroke:var(--brand)}
.rt-map .elab.hot .elab-bg{fill:var(--brand-soft); stroke:var(--brand)}
.rt-map .elab.hot .elab-tie{stroke:var(--brand)}
.rt-map .elab.dim{opacity:.2}
.rt-hint{font-size:12.5px; color:var(--ink-3); margin:0 0 12px}
.rt-info{border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:var(--r); padding:14px 16px; margin:0 0 16px}
.rt-info h4{font-size:15.5px; margin:0 0 3px}
.rt-info .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 13px; margin:10px 0 0; font-size:14px}
.rt-info .kv dt{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding-top:3px}
.rt-info .kv dd{margin:0; color:var(--ink-2)}
.rt-info .eg{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px}
.rt-flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:4px 0 2px}
.rt-node{font-weight:600; font-size:14.5px; background:var(--sunk); border:1px solid var(--line-2); border-radius:8px; padding:6px 13px}
.rt-node.q{color:var(--brand); border-style:dashed; border-color:var(--brand-line); background:transparent}
.rt-node.tgt{background:var(--credit); color:var(--credit-ink); border-color:var(--brand-line)}
.rt-arr{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:96px}
.rt-arr .r{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px; color:var(--ink-2); text-align:center}
.rt-arr .g{color:var(--brand); font-size:17px; line-height:1}
.rt-arr .c{font-size:10.5px; color:var(--ink-3); text-align:center}
.rt-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin:0 0 16px}
.rtrow{display:grid; grid-template-columns:minmax(96px,1fr) 16px minmax(96px,1fr) minmax(130px,1.6fr) minmax(110px,1.2fr);
  gap:10px; align-items:baseline; background:var(--surface); border:0; padding:9px 13px; text-align:left;
  cursor:pointer; font:inherit; font-size:13px; color:var(--ink); width:100%}
.rtrow:hover{background:var(--brand-soft)}
.rtrow[aria-pressed="true"]{background:var(--brand-soft)}
.rtrow .a, .rtrow .b{font-weight:600}
.rtrow .ar{color:var(--brand); text-align:center}
.rtrow .rg{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; color:var(--ink-2)}
.rtrow .cn{font-size:12px; color:var(--ink-3)}
@media (max-width:760px){ .rtrow{grid-template-columns:1fr; gap:2px} .rtrow .ar{display:none} }
.rt-pick{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px}
.rt-plan{display:flex; flex-direction:column; gap:11px}
.rt-step{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:12px 15px}
.rt-step > .h{display:flex; gap:9px; align-items:baseline; font-size:14.5px; font-weight:600; margin:0 0 9px}
.rt-step > .h i{flex:none; width:20px; height:20px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink);
  font-style:normal; font-size:11.5px; font-weight:700; display:grid; place-items:center}
.rt-two{display:grid; grid-template-columns:1fr 1fr; gap:9px}
@media (max-width:640px){ .rt-two{grid-template-columns:1fr} }
.rt-princ{margin:0; padding-left:19px; font-size:14px; color:var(--ink-2)}
.rt-princ li{margin:0 0 7px}



/* ==========================================================================
   BioChemLearn — visual identity layer  (design pass, 29 Sept)

   WHY THIS EXISTS.  Every surface in the app was the same object: a white
   rounded card with the same soft shadow, sitting on a light grey wash, with
   the same generous padding — the standard revision-dashboard look.  Metadata
   was a cloud of pill chips, stages opened with a strip of big numbers in
   boxes, and the brand green was used as a flat fill on buttons, tabs, ticks
   and headers.  Nothing on the page had more weight than anything else, and
   the one thing that IS the product — the credited wording in <mark class="ms">
   — was quieter than the furniture around it.

   WHAT THIS LAYER DOES INSTEAD.  It rebuilds the same components as a printed
   reference work rather than a dashboard:

     · the reading column becomes one continuous sheet and the chrome becomes
       the wash — the inverse of card-on-grey;
     · sections stop being cards and become ruled passages hung off a single
       vertical spine, with the content-point numeral knocked out on the rule;
     · headings move to the serif at a real typographic scale, so hierarchy
       comes from type rather than from boxes;
     · pills, tiles, KPI strips and shadows are replaced by rules, hanging
       indents and set text;
     · the brand colour stops being a flat fill for furniture and is kept for
       the credited wording, live state and links, so the highlight is the
       loudest thing on the page.

   NOTHING IS DELETED ABOVE.  This file is appended, so every existing rule
   still resolves and every class still has a rule (scripts/audit_css.js).
   No colour token changes value; the tokens added below are new names only.
   ========================================================================== */

:root{
  --paper:var(--surface);              /* the reading sheet */
  --ui:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --tt:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure:72ch;
  --gutter:30px;                       /* the width of the spine's margin */
  --lift:0 22px 54px -24px rgba(6,18,15,.45), 0 2px 8px rgba(6,18,15,.09);
  /* the neutral slab the landing hero already uses, so the app and the front
     door read as one product instead of two */
  --slab:#25313A; --slab-2:#171F26; --slab-ink:#EEF2F5;
  --slab-dim:rgba(238,242,245,.66); --slab-line:rgba(255,255,255,.15);
  --slab-accent:#E6C98A;
}
:root[data-theme="dark"]{ --lift:0 24px 60px -24px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.5) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --lift:0 24px 60px -24px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.5) }
}

/* --------------------------------------------------------------------------
   1.  THE SHEET.  The main column is the page; the sidebar and the margins
   are the desk it sits on.  This single inversion is what stops the app
   reading as a grid of tiles floating on a wash.
   -------------------------------------------------------------------------- */
body{ background:var(--paper) }        /* the product's ground is paper… */
.shell{ background:var(--bg) }         /* …and the wash is only the chrome */
#landingView{ background:var(--bg) }   /* the landing keeps its own ground so .lsec.band still reads */
.main{ background:var(--paper); border-left:1px solid var(--line); min-height:100vh }
@media (max-width:900px){ .main{ border-left:0 } }
.sidebar{ background:var(--bg); border-right:0 }
.wrap{ max-width:1120px }

/* --------------------------------------------------------------------------
   2.  THE MASTHEAD.  A thin ruled bar of set text, not a row of pills.
   -------------------------------------------------------------------------- */
.topbar{ background:var(--paper); border-bottom:1px solid var(--line-2); padding:9px 20px; gap:12px }
.brand{ font-size:16px; letter-spacing:-.02em; font-weight:700 }
.brand .mark{ background:none; border-radius:0; width:24px; height:24px }
.brand .mark svg{ width:24px; height:24px }
.homebtn{ border:0; background:none; border-radius:0; width:24px; color:var(--ink-3) }
.homebtn:hover{ background:none; color:var(--ink) }
.sidetoggle{ border-radius:4px }

.picker{
  border:0; border-left:1px solid var(--line-2); border-radius:0;
  background:none; padding:2px 0 2px 12px; font-size:12.5px; letter-spacing:.01em;
}
.picker.has-menu:hover{ border-color:var(--line-2); color:var(--ink) }
.picker b{ font-weight:700 }
.picker .bmenu{ border-radius:4px; box-shadow:var(--lift); border-color:var(--line-2) }
.picker .bmenu button{ border-radius:3px }
.picker .bmenu button[aria-current="true"]{ background:none; box-shadow:inset 2px 0 0 var(--brand) }

.search{
  background:none; border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  padding:5px 2px; font-size:12.5px; max-width:300px;
}
.top-right{ gap:14px }
.pill-free,.streak{
  background:none; border:0; border-radius:0; padding:0; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.pill-free{ color:var(--ink-3) }
.streak{ color:var(--gold) }
.arena-pill,.chat-pill{
  border-radius:4px; border:1px solid var(--line-2); background:none; color:var(--ink-2);
  font-size:12px; font-weight:700; padding:5px 10px; letter-spacing:.01em;
}
.arena-pill:hover,.chat-pill:hover{ border-color:var(--ink-3); color:var(--ink) }
.arena-pill b{ background:none; color:var(--brand); padding:0 0 0 2px; font-size:12px; font-weight:800 }
.chat-pill,.chat-pill[aria-expanded="false"]{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.chat-pill[aria-expanded="true"]{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.chat-pill:hover{ background:var(--ink-2); border-color:var(--ink-2); color:var(--surface) }
.avatar{
  border-radius:3px; width:26px; height:26px; background:var(--sunk); color:var(--ink-2);
  font-size:10.5px; letter-spacing:.04em; border:1px solid var(--line-2);
}

/* --------------------------------------------------------------------------
   3.  THE INDEX.  The sidebar stops being a stack of hoverable pills and
   becomes a ruled contents list: unit names set as small capitals, the live
   page marked by a rule in the margin rather than a filled tablet.
   -------------------------------------------------------------------------- */
.sidebar{ padding:18px 0 60px }
.side-h{ padding:0 18px 12px; margin-bottom:6px; border-bottom:1px solid var(--line) }
.side-h .eyebrow{ font-size:10px; letter-spacing:.14em }
.progress-mini{ font-family:var(--tt); font-size:10.5px; font-weight:600; color:var(--ink-3) }
.unit{ margin-bottom:0 }
.unit-btn{
  border-radius:0; padding:11px 18px 6px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.unit-btn:hover{ background:none; color:var(--ink-2) }
.unit-btn .chev{ opacity:.5 }
.unit-list{ border-left:0; margin-left:0; padding:0 0 8px }
.sp{
  border-radius:0; padding:5px 18px 5px 17px; border-left:2px solid transparent;
  font-size:12.5px; gap:9px;
}
.sp:hover{ background:none; color:var(--ink); border-left-color:var(--line-2) }
.sp[aria-current="true"]{ background:none; color:var(--ink); font-weight:700; border-left-color:var(--brand) }
.dot{ width:5px; height:5px; border-radius:0 }
.side-sep{ margin:16px 18px 8px; padding-top:14px }
.arena-link b{ font-family:var(--tt); font-size:10px }

/* --------------------------------------------------------------------------
   4.  THE TITLE BLOCK.  A standfirst, not a header card: the code set as an
   eyebrow above the title, the title in the serif at display size, the badges
   as a ruled credit line, and the mastery meters demoted to a marginal note.
   -------------------------------------------------------------------------- */
.sp-head{ background:none; border-bottom:0; padding-block:30px 0 }
.crumbs{ font-size:11.5px; font-weight:600; letter-spacing:.01em; margin-bottom:18px; color:var(--ink-3) }
.title-row{ gap:26px; align-items:flex-end }
.title-row h1{
  font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,41px);
  letter-spacing:-.012em; line-height:1.12;
}
.code{
  flex:0 0 100%; background:none; border:0; border-radius:0; padding:0;
  font-family:var(--tt); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--ink-3); margin-bottom:2px;
}
.badges{ gap:0 18px; margin-top:14px; row-gap:6px }
.badge{
  background:none; border:0; border-radius:0; padding:1px 0 1px 9px;
  border-left:2px solid var(--line-2); color:var(--ink-3);
  font-size:11px; font-weight:600; letter-spacing:.01em;
}
.badge.hard{ background:none; border-left-color:var(--flag); color:var(--flag) }
.badge.a2{ background:none; border-left-color:var(--blue); color:var(--blue) }
.badge.chkcount.done{ background:none; border-left-color:var(--brand); color:var(--brand-ink) }

.mastery{
  background:none; border:0; border-left:1px solid var(--line); border-radius:0;
  padding:2px 0 2px 22px; min-width:230px; flex:0 1 270px;
}
.mastery-h{ margin-bottom:11px }
.mastery-tot{ font-family:var(--tt); font-size:16px; font-weight:600; color:var(--ink) }
.meter .mb{ height:3px; border-radius:0; background:var(--line) }
.meter .mb i{ border-radius:0 }
.meter .mn{ font-size:11px; font-weight:600; color:var(--ink-3) }
.meter .mv{ font-family:var(--tt); font-size:10.5px; font-weight:600 }
.mastery-note{ font-size:10px; max-width:30ch }
@media (max-width:900px){ .mastery{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; margin-top:6px } }

/* --------------------------------------------------------------------------
   5.  THE STAGE RAIL.  Rule-topped section tabs — a newspaper section head —
   in place of underline tabs with filled numeral discs.
   -------------------------------------------------------------------------- */
.path{ gap:0; margin-top:26px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
.step{
  padding:13px 0 12px; margin-right:30px; border-bottom:0;
  border-top:2px solid transparent; margin-top:-1px;
  font-size:13px; font-weight:600; letter-spacing:.005em; gap:8px; color:var(--ink-3);
}
.step:last-child{ margin-right:0 }
.step:hover{ color:var(--ink-2) }
.step[aria-selected="true"]{ color:var(--ink); border-top-color:var(--ink); font-weight:700 }
.step .n,.step .n.ok{
  background:none; border-radius:0; width:auto; height:auto; display:inline;
  font-family:var(--tt); font-size:11px; font-weight:600; color:var(--ink-3);
}
.step[aria-selected="true"] .n,.step[aria-selected="true"] .n.ok{ background:none; color:var(--brand) }
.path.chem .step{ font-size:12.5px; margin-right:24px }
@media (max-width:560px){ .step{ margin-right:20px; font-size:12.5px } }

/* --------------------------------------------------------------------------
   6.  THE LEVEL BAR.  The controls sit on a rule under the stage head rather
   than inside a floating card.
   -------------------------------------------------------------------------- */
.cols{ padding-top:14px }
.levelbar{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--line); padding:14px 0 18px; margin-bottom:0;
  align-items:flex-start; gap:26px;
}
.levelbar .lb-txt{ font-size:12.5px; max-width:60ch }
.seg{ background:none; border:1px solid var(--line-2); border-radius:4px; padding:0; gap:0 }
.seg button{
  border-radius:0; padding:7px 13px; font-size:12px; font-weight:600;
  border-right:1px solid var(--line-2); color:var(--ink-3);
}
.seg button:last-child{ border-right:0 }
.seg button:hover{ color:var(--ink) }
/* the live option is marked by a rule under the word, not by a filled tablet */
.seg button[aria-pressed="true"]{ background:none; color:var(--ink); font-weight:700; box-shadow:inset 0 -2px 0 var(--ink) }
.seg button .lv{ font-family:var(--tt); opacity:.6 }
.segs{ gap:10px }
.hlkey{ margin-top:14px }
.hlkey i{ border-radius:0 }

/* --------------------------------------------------------------------------
   7.  THE SPINE.  Sections butt against one another so their left rules join
   into one continuous vertical line down the page; the content-point numeral
   is knocked out on that rule, the way a reference work marks a clause.
   -------------------------------------------------------------------------- */
.sec{
  position:relative; background:none; border:0; border-radius:0; box-shadow:none;
  overflow:visible; margin-bottom:0;
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  padding:34px 0 26px var(--gutter);
}
.sec:first-of-type{ border-top:0 }
.sec-head{ padding:0 0 14px; border-bottom:0; gap:12px; align-items:baseline; flex-wrap:wrap }
.sec-head h3{
  font-family:var(--display); font-weight:600; font-size:clamp(20px,2.3vw,26px);
  letter-spacing:-.008em; line-height:1.2; flex:1 1 240px;
}
.sec .sec-head > .cp{
  position:absolute; left:0; top:33px; transform:translateX(-50%);
  background:var(--paper); border:0; border-radius:0; margin:0; padding:4px 0;
  font-family:var(--tt); font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-3); text-align:center; min-width:30px;
}
.sec-body{ padding:0; max-width:none }
.sec-foot{ background:none; border-top:1px solid var(--line); padding:14px 0 0; margin-top:24px }
.simplify{
  background:none; border:0; border-bottom:1px solid var(--brand-line); border-radius:0;
  padding:0 0 1px; font-size:11.5px; color:var(--brand-ink); font-weight:600;
}
.simplify:hover{ background:none; border-bottom-color:var(--brand) }
.arena-add{
  background:none; border:0; border-bottom:1px solid var(--brand-line); border-radius:0;
  padding:0 0 1px; font-size:11.5px;
}
.arena-add:hover{ background:none; border-bottom-color:var(--brand) }
.arena-add.added{ background:none; color:var(--brand); border-bottom-color:var(--brand) }
@media (max-width:760px){
  :root{ --gutter:0px }
  .sec{ padding-left:0; border-left:0 }
  .sec .sec-head > .cp{ position:static; transform:none; text-align:left; background:none; padding:0; min-width:0 }
}

/* the quoted specification: a block quotation set off by a rule, not a tinted
   box.  The monospace stays — it is what says "this is the board's own words". */
.specquote{
  background:none; border:0; border-left:2px solid var(--blue); border-radius:0;
  padding:2px 0 2px 15px; margin-bottom:20px;
}
.specquote p{ color:var(--ink-2) }

/* the two callouts keep their colour but lose the tinted tablet */
.flag,.note{
  background:none; border:0; border-left:2px solid var(--line-2); border-radius:0;
  padding:2px 0 2px 15px; margin:18px 0; font-size:13.5px;
}
.flag{ border-left-color:var(--flag) }
.note{ border-left-color:var(--gold) }

/* --------------------------------------------------------------------------
   8.  THE PROSE.  A measure that can actually be read, and a real scale from
   the section head down to the running text.
   -------------------------------------------------------------------------- */
/* The measure is held on the text, not on the column, so a paragraph reads at a
   comfortable line length while a table, a figure or a scan still gets the whole
   width of the page. */
.prose{ font-size:17px; line-height:1.68; max-width:none }
.prose p,.prose h4,.prose ul,.prose ol,.prose .lead-in,
.ap-how,.ap-do p,.ap-do ul,.ap-do ol,.levelbar .lb-txt,.blurt-p,
.arena-hero p,.trap .tx,.checkline{ max-width:var(--measure) }
.prose .tscroll,.prose figure,.prose table,.prose .flow-in,.prose .aibox{ max-width:none }
.prose h4{ font-family:var(--display); font-weight:600; font-size:17.5px; margin:26px 0 8px; letter-spacing:-.004em }
.lvl-tag{ font-size:10px; letter-spacing:.12em }
.lvl-tag i{ border-radius:0; height:2px }

/* figures become plates between rules rather than framed cards */
figure{
  background:none; border:0; border-radius:0; padding:20px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:24px 0;
}
figure img{ border-radius:0 }
figcaption{ font-size:11.5px; color:var(--ink-3); letter-spacing:.005em }

/* the digest layouts: a numbered flow is a ruled sequence, not a stack of
   rounded tablets, and a bullet is a short rule rather than a brand dot */
.digest ol.flow>li{
  background:none; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:11px 0 11px 34px;
}
.digest ol.flow>li+li{ margin-top:0 }
.digest ol.flow>li::before,ol.flow>li::before{
  background:none; border:0; border-radius:0; color:var(--brand);
  font-family:var(--tt); font-size:11px; font-weight:600;
  width:24px; height:auto; display:block; line-height:1.6;
}
/* the numeral is set on the same baseline as the line it numbers, so the two
   offsets differ by exactly the list item's own top padding */
ol.flow>li::before{ top:4px }
.digest ol.flow>li::before{ top:15px }
.digest ol.flow>li+li::after{ display:none }
ol.flow>li:not(:last-child)::after{ display:none }
ul.pts>li::before,.digest ul.pts>li::before{
  border-radius:0; width:7px; height:1.5px; top:.82em; left:2px;
  background:var(--ink-3); opacity:1;
}
ul.pts>li,.digest ul.pts>li{ padding-left:20px }
.flow-in>span{ border-radius:3px }

/* ruled tables: a head rule, a body rule, nothing else */
table.t{ font-size:13.5px }
table.t th{
  font-size:10px; letter-spacing:.12em; border-bottom:1.5px solid var(--ink-3);
  padding:0 14px 7px 0; color:var(--ink-3);
}
table.t td{ padding:9px 14px 9px 0; border-bottom:1px solid var(--line) }
table.t th:last-child,table.t td:last-child{ padding-right:0 }
.tscroll{ margin:20px 0 }

/* the credited wording — the product — is the one loud thing on the page */
mark.ms{
  border-radius:0; padding:1px 2px; box-shadow:inset 0 -2px 0 currentColor;
  font-weight:600;
}
mark.ms.hl-term,mark.ms.hl-val,mark.ms.hl-prec,mark.ms.hl-seq,
mark.ms.k-mech,mark.ms.k-seq,mark.ms.k-val,mark.ms.k-prec{ box-shadow:inset 0 -2px 0 currentColor }

/* --------------------------------------------------------------------------
   9.  CONTROLS.  The brand stops being a flat fill for furniture: a primary
   action is ink, a secondary action is a rule, and green is left to the
   highlight, to live state and to links.
   -------------------------------------------------------------------------- */
.btn{ border-radius:4px; padding:8px 15px; font-size:12.5px; background:var(--ink); border-color:var(--ink); color:var(--surface) }
.btn:hover{ background:var(--ink-2); border-color:var(--ink-2) }
.btn.ghost{ background:none; border-color:var(--line-2); color:var(--ink-2) }
.btn.ghost:hover{ background:none; border-color:var(--ink-3); color:var(--ink) }
.grade{ border-radius:4px }
.fbtn,.cpb,.deck,.mxb,.mxs,.chip,.mini,.cpb.on{ border-radius:4px }
.fbtn[aria-pressed="true"],.deck[aria-pressed="true"],.cpb.on,.mxb[aria-pressed="true"],
.pp-cpbar .cpb.on{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.pp-cpbar .cpb{ border-radius:4px }
.pp-cpbar .cpb.on b{ color:var(--surface) }
.mxs[aria-pressed="true"]{ background:none; border-color:var(--ink); color:var(--ink); font-weight:700 }
.linkbtn{ text-underline-offset:3px }
textarea,input.ti{ border-radius:4px }
textarea:focus,input.ti:focus{ box-shadow:none; border-color:var(--ink-3); outline:1px solid var(--ink-3) }
.out{ border:0; border-left:2px solid var(--brand); background:none; border-radius:0; padding:2px 0 2px 15px }
.reveal{ border:0; border-left:2px solid var(--line-2); border-radius:0; background:none; padding:2px 0 2px 15px }
.ansbox{ border:0; border-left:2px solid var(--line-2); border-radius:0; background:none; padding:2px 0 2px 15px }
.drop{ border-radius:4px; background:none; border-style:dashed }
.drop:hover{ background:none; border-color:var(--ink-3) }
.mic{ border-radius:4px; background:none }
.thumb{ border-radius:4px }

/* --------------------------------------------------------------------------
   10.  THE NUMBERS.  Every stage used to open with a strip of boxed figures.
   They become a single ruled statistics line — the same numbers, read as a
   masthead rather than as a dashboard.
   -------------------------------------------------------------------------- */
.tiles,.cpcounts,.arena-kpis{
  display:flex; flex-wrap:wrap; gap:0 42px; row-gap:16px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; margin:0 0 26px;
}
.tile,.cpcount,.kpi{
  background:none; border:0; border-radius:0; box-shadow:none; padding:0; min-width:0;
}
.tile .big,.cpcount b,.kpi b{
  font-family:var(--tt); font-size:20px; font-weight:600; letter-spacing:-.01em; display:block;
}
.kpi.hot b{ color:var(--flag) }
.tile .lab,.cpcount span,.kpi span{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-top:3px;
}
.tile .sub{ font-size:11px; margin-top:4px; max-width:26ch }
.covgrid{ display:flex; flex-wrap:wrap; gap:0 26px; row-gap:8px }
.cov{ background:none; border:0; border-radius:0; padding:0; font-size:12px }
.cov .tick{ border-radius:0; width:14px; height:14px; font-size:9px }

/* --------------------------------------------------------------------------
   11.  THE ARENA SLABS.  The green gradient banner is the clearest dashboard
   tell left, and it fights the highlight for the brand colour.  They become
   the same neutral slab the landing hero already uses, which also ties the
   app to the front door.
   -------------------------------------------------------------------------- */
.arena,.duebar,
body[data-subject="chemistry"] .duebar,
:root[data-theme="dark"] .arena,:root[data-theme="dark"] .duebar{
  background:linear-gradient(168deg,var(--slab) 0%,var(--slab-2) 100%);
  border-radius:0; border-left:3px solid var(--slab-accent); padding:22px 24px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .arena,:root:not([data-theme="light"]) .duebar{
    background:linear-gradient(168deg,var(--slab) 0%,var(--slab-2) 100%);
  }
}
.arena-h h3,.duebar h3{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.01em }
.arena-h p,.duebar p{ color:var(--slab-dim) }
.arena-stats{ display:flex; flex-wrap:wrap; gap:0 38px; row-gap:12px }
.astat{ background:none; border:0; border-radius:0; padding:0 }
.astat b{ font-family:var(--tt); font-size:19px; font-weight:600 }
.astat span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--slab-dim) }
.feed{ background:none; border:0; border-left:1px solid var(--slab-line); border-radius:0; padding:2px 0 2px 13px }
.feeds{ gap:0; column-gap:24px; row-gap:12px }
.duebar .spread span{ background:none; border:0; border-left:1px solid var(--slab-line); border-radius:0; padding:0 0 0 9px }
ul.advice>li::before{ border-radius:0; width:4px; height:1.5px; top:.75em }

/* --------------------------------------------------------------------------
   12.  ARENA PAGES.  Same document grammar as a spec page.
   -------------------------------------------------------------------------- */
.arena-page{ padding-block:30px 80px }
.arena-hero h1{ font-family:var(--display); font-weight:600; font-size:clamp(27px,3.4vw,38px); letter-spacing:-.012em }
.arena-hero p{ font-size:15px; max-width:64ch; margin-top:10px }
.arena-tools .lbl,.filters .lbl,.cpb-t{ letter-spacing:.12em; font-size:10px }
.dwrap{ border-radius:0; box-shadow:none; border-top:1px solid var(--line) }
.dtable{ border:0; border-radius:0; background:none }
.dtable th{
  background:none; border-bottom:1.5px solid var(--ink-3); font-size:10px;
  letter-spacing:.12em; padding:9px 14px 7px;
}
.dtable td{ border-bottom:1px solid var(--line) }
.dtable tr.topic td{ background:none; border-bottom:1px solid var(--line-2); color:var(--ink-3); letter-spacing:.12em }
.dtable tr[data-row]:hover td{ background:var(--sunk) }
.dcode{ font-size:11px; letter-spacing:.06em; color:var(--ink-3) }
.mbar .t{ border-radius:0; height:3px; background:var(--line) }
.mbar .t i{ border-radius:0 }
.mbar em{ font-family:var(--tt); font-size:11px }
.duepill,.duepill.on{ border-radius:3px }
.et{ border-radius:0; border:0; border-left:2px solid var(--line-2); background:none; padding:0 0 0 7px; font-size:10.5px }
.et.gap{ border-left-color:var(--flag); color:var(--flag) }
.et.rare{ border-left-color:var(--gold); color:var(--gold) }
.et.ok{ border-left-color:var(--brand); color:var(--brand-ink) }
.studycard{ margin-bottom:26px }
.card{ background:none; border:0; border-radius:0; box-shadow:none; border-top:1px solid var(--line) }
.card-pad{ padding:16px 0 4px }
.ana-grid{ gap:0 42px }
.ana-h{ font-family:var(--display); font-weight:600; font-size:16px }
.hb{ border-radius:0; height:4px; background:var(--line) }
.hb>i{ border-radius:0 }
.ana-row .vl{ font-family:var(--tt) }
.tscroll.ana{ border-radius:0; border-left:0; border-right:0 }
.tick-y{ border-radius:0; width:14px; height:14px; line-height:14px; font-size:9px }
.corrbar{
  border-radius:0; background:none; border:0; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); border-left:2px solid var(--gold); padding:18px 0 18px 18px;
}
.corrbar h3{ font-family:var(--display); font-weight:600; font-size:18px }
.corrpill{ border-radius:3px }
.corr{ border:0; border-radius:0; border-left:1px solid var(--line-2); background:none; padding:2px 0 12px 15px }

/* --------------------------------------------------------------------------
   13.  CARDS THAT ARE ACTUALLY CARDS.  A flashcard is the one object on the
   site that should look like a physical card, so it keeps a face and an edge
   — and it is now the only thing on a page that lifts off the sheet.
   -------------------------------------------------------------------------- */
.face,.fc-face{ border-radius:6px; box-shadow:none; border:1px solid var(--line-2) }
.card2{ height:320px }
.fprompt{ font-family:var(--display); font-weight:600; font-size:23px; line-height:1.3 }
.fans{ font-size:16.5px; line-height:1.66 }
.ftag,.ftag.origin{ border-radius:0; border:0; border-left:2px solid var(--brand-line); background:none; padding:0 0 0 7px }
.ftag.origin{ border-left-color:var(--gold-line) }
.fcue{ letter-spacing:.12em; font-size:10px }
.fimg img{ border-radius:3px }
/* A past-paper crop that turned out to be a run of pages is folded away, so the
   default view is the question and not the data sheet that followed it. */
details.tallscan{ margin:14px 0 0; border-top:1px solid var(--line-2) }
details.tallscan>summary{ cursor:pointer; padding:9px 0; font-size:12px; font-weight:600; color:var(--ink-3); list-style:none }
details.tallscan>summary::-webkit-details-marker{ display:none }
details.tallscan>summary::before{ content:"▸ "; color:var(--ink-3) }
details.tallscan[open]>summary::before{ content:"▾ " }
details.tallscan>summary:hover{ color:var(--ink) }

/* Across the specification — one cross-topic question per row, opened in place.
   Ruled rows rather than cards, to match the identity layer. */
.synlist{ margin-top:6px }
.syn{ border-bottom:1px solid var(--line) }
.syn>summary{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; padding:13px 0; cursor:pointer; list-style:none }
.syn>summary::-webkit-details-marker{ display:none }
.syn>summary:hover .synt{ color:var(--ink) }
.synn{ font-family:var(--tt,monospace); font-size:11px; color:var(--ink-3); min-width:26px }
.synt{ flex:1 1 300px; font-weight:600; font-size:14px; color:var(--ink-2) }
.syntopics{ display:flex; gap:5px; flex-wrap:wrap }
.synm{ font-family:var(--tt,monospace); font-size:11px; color:var(--ink-3) }
.syngo{font-size:12px; font-weight:700; color:var(--brand-ink); white-space:nowrap; margin-left:10px}
.syn[open] .syngo{color:var(--ink-2)}
.syn[open] .syngo::after{content:" \2014 open"}
.synb{ padding:2px 0 18px 38px }
@media (max-width:560px){ .synb{ padding-left:0 } }
.synsp{ font-size:13px; margin:16px 0 6px; color:var(--ink-2) }
.synq{ border-top:1px solid var(--line); padding:12px 0 }
.synqh{ display:flex; gap:10px; align-items:baseline; margin-bottom:6px }

/* Write your correction — the manual entry that sits under any question a
   student is assessed on. Every one of these becomes a flashcard. */
.corrwrite{ margin:12px 0 0; display:flex; flex-direction:column; gap:7px; align-items:flex-start }
.corrwrite .eyebrow{ margin:0 }
.corrwrite textarea.corrnote{ width:100%; min-height:52px; resize:vertical }

/* a chemistry card quotes a drawing from its own page onto the answer side —
   it is an inline <svg>, not an <img>, so it needs its own box */
.fimg svg{ display:block; max-width:100%; max-height:190px; height:auto; margin:0 auto }
@media (max-width:560px){ .fimg svg{ max-height:150px } }

/* question blocks in the banks: ruled entries, not stacked tiles */
.qcard{ background:none; border:0; border-radius:0; border-bottom:1px solid var(--line); margin-bottom:0 }
.qc-h{ padding:15px 0 0 }
.qc-b{ padding:0 0 16px 40px }
@media (max-width:560px){ .qc-b{ padding-left:0 } }
.qnum{ font-size:11px; width:30px }
.qtext .pqstem{ border-left-width:2px }
.cpchip{ border-radius:0; border:0; border-left:2px solid var(--brand-line); background:none; padding:0 0 0 7px; font-size:10.5px }
.opt{ border-radius:4px }
.opt .ol{ border-radius:3px }
.opt.right .ol{ background:var(--brand) }
.mcq-score{ background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 12px }
.mcq-verdict{ border-radius:0; border:0 !important; border-left:2px solid var(--line-2) !important; background:none; padding:2px 0 2px 15px }
.mcq-verdict.ok{ border-left-color:var(--brand) !important }
.mcq-verdict.no{ border-left-color:var(--flag) !important }
.mcq-think{ background:none; border-radius:0; border-left-width:2px; padding:2px 0 2px 15px }
.ladder{ background:none; border:0; border-left:2px solid var(--blue); border-radius:0; padding:2px 0 2px 15px }
.rung .rn{ border-radius:0; background:none; color:var(--blue); font-family:var(--tt) }
.rung{ border-bottom-color:var(--line) }
.ext{ border:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line); margin-bottom:0 }
.ext-h{ padding:14px 0 }
.ext-b{ border-top:1px solid var(--line); padding:16px 0 22px }
.ext-sp{ font-family:var(--display); font-weight:600; font-size:17px }
.testpaper{ background:none; border:0; border-radius:0; box-shadow:none; border-top:1px solid var(--line-2); padding:20px 0 0 }
.tickgroup .tg-h{ letter-spacing:.06em }
.blurt{ background:none; border:0; border-radius:0; border-top:1px solid var(--line); padding:16px 0 0 }
.blurt-h h4{ font-family:var(--display); font-weight:600; font-size:16px }
.cues span,.src-chip{ border-radius:3px; background:none }
.aibox{ background:none; border:0; border-top:1px solid var(--line); border-radius:0; margin-top:24px }
.aibox-h{ background:none; border-bottom:0; padding:14px 0 6px }
.aibox-h .ic{ background:none; border-radius:0; width:auto; height:auto; display:none }
.aibox-h h4{ font-family:var(--display); font-weight:600; font-size:16px }
.aibox-b{ padding:0 0 18px }

/* past-paper blocks: the question and the scheme are documents, so they sit
   on the sheet with rules, and only the scan keeps a frame */
.pp{ background:none; border:0; border-radius:0; box-shadow:none; border-top:1px solid var(--line-2); margin-bottom:0 }
.pp-h{ padding:18px 0 12px; border-bottom:0 }
.pp-h .t b{ font-family:var(--display); font-weight:600; font-size:16px }
.pp-b{ padding:0 0 22px }
.pp-stem,.pp-fig{ margin:14px 0 0; border:0; border-left:2px solid var(--line-2); border-radius:0; background:none; padding:2px 0 2px 15px }
.pp-stem{ border-left-color:var(--blue) }
.pp-fig{ border-left-color:var(--gold) }
.pp-ans{ margin:0 0 16px; border:0; border-top:1px dashed var(--line-2); border-radius:0; background:none; padding:14px 0 0 }
.pp-corr{ margin:0 0 16px }
.pp-ms .reveal{ padding-left:0; border-left:0 }
.pp-body.ms-open{ background:none }
.scan{ background:#fff; border:1px solid var(--line-2); border-radius:0; padding:6px; margin:15px 0 }
.scan-lab{ padding:0; letter-spacing:.12em }
.pred{ border-radius:0; border:0; border-left:2px solid var(--gold); background:none; padding:0 0 0 7px }
.mk{ font-family:var(--tt); font-size:11.5px }

/* --------------------------------------------------------------------------
   14.  OVERLAYS.  The only things left that lift off the page.
   -------------------------------------------------------------------------- */
.chatbox,.dock-panel{ border-radius:6px; box-shadow:var(--lift) }
.chat-h .ic,.aibox-h .ic{ border-radius:3px }
.msg{ border-radius:4px }
.msg.me{ background:var(--sunk); color:var(--ink) }
.chip{ border-radius:3px }
.dock-btn{ border-radius:4px; background:var(--ink); box-shadow:var(--lift) }
.dock-btn:hover{ background:var(--ink-2) }
.srcbar{ background:none }

/* --------------------------------------------------------------------------
   15.  THE CHEMISTRY PAGE.  Six stages, the same grammar: one UI face across
   both subjects, a spine under the stage rail, de-boxed panels and stats.
   -------------------------------------------------------------------------- */
.chem2{ --ui:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; font-size:16.5px }
.chem2 .c2rail{ border-right:1px solid var(--line); padding-right:18px }
@media (max-width:920px){ .chem2 .c2rail{ border-right:0; padding-right:0; background:var(--paper) } }
.chem2 .rlab{ letter-spacing:.14em; font-size:10px }
.chem2 .stg{ border-radius:0; padding:8px 0 8px 12px; border-left:2px solid transparent }
.chem2 .stg:hover{ background:none; border-left-color:var(--line-2); color:var(--ink) }
.chem2 .stg[aria-current="true"]{ background:none; border-left-color:var(--brand); color:var(--ink); font-weight:700 }
.chem2 .stg .n,.chem2 .rail .stg .n,.chem2 .stg[aria-current="true"] .n{
  border:0; background:none; border-radius:0; font-family:var(--tt); font-size:10.5px; color:var(--ink-3);
}
.chem2 .stg[aria-current="true"] .n{ color:var(--brand) }
.chem2 h1.ph{ font-family:var(--display); font-weight:600; letter-spacing:-.012em }
.chem2 h2.sh{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.008em; margin:34px 0 12px }
.chem2 h3.tt,.chem2 .sbody h4{ font-family:var(--display); font-weight:600; font-size:16.5px }
.chem2 .lede{ max-width:66ch }
.chem2 .c2panel{ padding-top:30px }
.chem2 .eyebrow{ letter-spacing:.14em }
.chem2 .stats{
  display:flex; flex-wrap:wrap; gap:0 42px; row-gap:14px; background:none; border:0; border-radius:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin:0 0 26px;
}
.chem2 .stat{ background:none; padding:0 }
.chem2 .stat .k{ font-size:10px; letter-spacing:.12em }
.chem2 .stat .v{ font-family:var(--tt); font-size:19px; font-weight:600; letter-spacing:0 }
.chem2 .card,.chem2 .q,.chem2 .mixq,.chem2 .pq,.chem2 .stepper,.chem2 .pick,
.chem2 .band,.chem2 .mdcol,.chem2 .cpcard,.chem2 .arow,.chem2 .check li,.chem2 .checkline{
  background:none; border-radius:0;
}
.chem2 .card,.chem2 .band{ border:0; border-top:1px solid var(--line); padding:16px 0 4px }
.chem2 .q,.chem2 .mixq{ border:0; border-bottom:1px solid var(--line); padding:14px 0 }
.chem2 .pq,.chem2 .stepper{ border:0; border-top:1px solid var(--line-2); padding:0 }
.chem2 .pqh,.chem2 .mixh,.chem2 .sbar{ background:none; border-bottom:1px solid var(--line); padding-inline:0 }
.chem2 .pqb,.chem2 .mixb,.chem2 .sbody{ padding-inline:0 }
.chem2 .snav{ padding:0 0 18px }
.chem2 .msb{ background:none; border-top:1px solid var(--line); padding:14px 0 }
.chem2 .msb h4{ letter-spacing:.14em }
.chem2 .pqh .id{ font-family:var(--display); font-weight:600 }
.chem2 .arow{ border:0; border-bottom:1px solid var(--line); padding:12px 0 }
.chem2 .arow:hover{ background:none; border-color:var(--ink-3) }
.chem2 .arow .ttl{ font-family:var(--display); font-weight:600; font-size:16px }
.chem2 .alist{ gap:0 }
.chem2 .cpgrid{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line) }
.chem2 .cpcard{ border:0; border-bottom:1px solid var(--line); padding:14px 0 }
.chem2 .cpcard:hover{ background:none }
.chem2 .cpcard[aria-current="true"]{ box-shadow:none; border-bottom-color:var(--brand) }
.chem2 .cpcard .cpt{ font-family:var(--display); font-weight:600; font-size:17px }
.chem2 .cpcard .cpk{ letter-spacing:.14em }
.chem2 .check li,.chem2 .checkline{ border:0; border-bottom:1px solid var(--line); padding:9px 0 }
.chem2 .cal{ border-radius:0; border:0 !important; border-left:2px solid var(--line-2) !important; background:none !important; padding:2px 0 2px 15px }
.chem2 .cal.rule{ border-left-color:var(--gold) !important }
.chem2 .cal.trap{ border-left-color:var(--flag) !important }
.chem2 .cal .k{ letter-spacing:.14em }
.chem2 .spec{ background:none; border-radius:0; border-left-width:2px; padding:2px 0 2px 15px }
.chem2 .spec .k{ letter-spacing:.14em }
.chem2 .ansb{ background:none; border-radius:0; border-left-width:2px; padding:2px 0 2px 15px }
.chem2 .mdcol{ border:0; border-top:2px solid var(--line-2); padding:12px 0 0 }
.chem2 .mdcol.must{ background:none; border-top-color:var(--brand) }
.chem2 .mdcol.dont{ background:none; border-top-color:var(--flag) }
.chem2 .mdcol h4{ letter-spacing:.14em }
.chem2 .chip,.chem2 .mini,.chem2 .tag,.chem2 .kind,.chem2 .seen,.chem2 .btn,
.chem2 .atb,.chem2 .filelab,.chem2 .rv>summary{ border-radius:4px }
.chem2 .chip[aria-pressed="true"],.chem2 .chip[aria-current="true"],
.chem2 .atb[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.chem2 .btn{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.chem2 .btn.ghost{ background:none; color:var(--ink-2); border-color:var(--line-2) }
.chem2 .rv>summary{ background:none; border-color:var(--line-2); color:var(--ink-2) }
.chem2 .wst .wi{ border-radius:0; background:none; color:var(--brand); font-family:var(--tt); text-align:left }
.chem2 .fstep{ background:none; border:0; border-top:2px solid var(--line-2); border-radius:0; padding:9px 0 0 }
.chem2 .fstep::after{ display:none }
.chem2 .fstep .fi{ letter-spacing:.12em }
.chem2 .dot{ border-radius:0; height:2px }
.chem2 figure{ background:none; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; padding:18px 0 }
.chem2 .tw,.chem2 .tscroll,.chem2 table.dat,.chem2 table.data{ border:0; border-radius:0; background:none; border-top:1px solid var(--line) }
.chem2 th{ background:none; border-bottom:1.5px solid var(--ink-3); letter-spacing:.12em; padding:0 14px 7px 0 }
.chem2 td{ padding:9px 14px 9px 0 }
.chem2 th:last-child,.chem2 td:last-child{ padding-right:0 }
.chem2 .track{ border:0; border-radius:0; height:4px; background:var(--line) }
.chem2 .fill{ border-radius:0 }
.chem2 .ppfig,.chem2 .msscan{ border-radius:0; border-color:var(--line-2) }
.chem2 .msscan .k{ background:none; letter-spacing:.14em; padding:7px 0 }
.chem2 .sent{ border-left-width:2px }
.chem2 .ans{ background:none; border:0; border-top:1px solid var(--line); border-radius:0 }
.chem2 .anst{ padding:9px 0; border-bottom:0 }
.chem2 .ansb2{ padding:0 0 10px }
.chem2 .stemtab{ border-radius:0; border:0; border-left:2px solid var(--line-2); background:none; padding:6px 0 6px 13px }
.chem2 .molbox,.molbox{ border-radius:0; border-left:0; border-right:0; background:none; padding:14px 0 }
.chem2 .pick>summary{ background:none; border-bottom:1px solid var(--line) }
.chem2 .pick>summary:hover{ background:none }
.chem2 .pick.armed>summary{ background:none }
.chem2 .pick.armed{ border-color:var(--line-2) }
.chem2 .pick.armed>summary .plab{ color:var(--ink) }
.chem2 .pickb{ padding:13px 0 }
.chem2 .pickact{ border-top:1px solid var(--line) }
.chem2 .foot{ border-top:1px solid var(--line-2) }

/* --------------------------------------------------------------------------
   16.  MECHANISM AND ROUTE ARENAS.
   -------------------------------------------------------------------------- */
.mx-q,.rt-step,.mx-pt{ background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 0 }
.mx-pt > i,.rt-step > .h i{ border-radius:0; background:none; color:var(--brand); font-family:var(--tt); text-align:left }
.mx-eqn,.mx-eqs span,.mx-in{ border-radius:3px }
.mx-head h3,.rt-info h4{ font-family:var(--display); font-weight:600 }
.mx-grp > b,.mx-facts dt,.rt-info .kv dt{ letter-spacing:.12em }
.rt-map{ border-radius:0; box-shadow:none; border-left:0; border-right:0 }
.rt-info{ background:none; border:0; border-left:2px solid var(--brand); border-radius:0; padding:2px 0 2px 15px }
.rt-list{ border-radius:0; border-left:0; border-right:0; background:var(--line) }
.rt-node,.rt-node.tgt,.rt-node.q{ border-radius:3px }
.rt-pick .mxb{ border-radius:4px }

/* --------------------------------------------------------------------------
   17.  LANDING PAGE.  It already reads as editorial, so it is only brought
   into line: the same serif display face, the same squared metadata, and the
   same single lift.  Everything stays scoped under #landingView.
   -------------------------------------------------------------------------- */
#landingView .hero-h1,#landingView .h2,#landingView .probs h3,#landingView .stage-h h3,
#landingView .larena h3,#landingView .bcard h3,#landingView .signup h3{
  font-family:var(--display); font-weight:600; letter-spacing:-.014em;
}
#landingView .hero-h1{ line-height:1.1 }
#landingView .contrast-h,#landingView .hsub-k{ font-family:var(--display); font-weight:600 }
#landingView .bcard{ border-radius:6px; box-shadow:none; border-color:var(--line-2) }
#landingView .bcard.live:hover{ box-shadow:none; border-color:var(--ink-3); transform:none }
#landingView .bcard-state{ border-radius:0; border:0; border-left:2px solid var(--brand-line); background:none; padding:0 0 0 7px }
#landingView .bcard-state.soon{ border-left-color:var(--gold-line) }
#landingView .btn-xl{ border-radius:4px }
#landingView .btn-xl:hover{ transform:none }
#landingView .scr{ border-radius:6px; box-shadow:var(--lift) }
#landingView .hsub{ border-radius:6px }
#landingView .hsub:hover{ transform:none }
#landingView .subjtab{ border-radius:4px }
#landingView .larenas,#landingView .arenas{ border-radius:0; border-left:0; border-right:0 }
#landingView .signup{ border-radius:0; border-left:0; border-right:0 }
#landingView .contrast,#landingView .tutor-r{ border-radius:6px }
#landingView .ix{ border-radius:0 }
#landingView .srail-b{ border-radius:3px }
#landingView .mk-p u{ border-radius:0; box-shadow:inset 0 -2px 0 currentColor }
#landingView .ticks li::before{ border-radius:0 }
#landingView .larena-n,#landingView .probs-n,#landingView .stage-h em{ letter-spacing:.1em }

/* --------------------------------------------------------------------------
   18.  SMALL SCREENS.  The sheet runs full bleed, the spine folds away and
   nothing is allowed to push the page sideways.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .wrap{ padding-inline:18px }
  .topbar{ padding:9px 14px; gap:10px }
  .sidebar{ background:var(--paper) }
}
@media (max-width:560px){
  .title-row h1{ font-size:27px }
  .sec{ padding-top:26px; padding-bottom:20px }
  .sec-head h3{ font-size:19px }
  .prose{ font-size:16.5px }
  .tiles,.cpcounts,.arena-kpis,.chem2 .stats{ gap:0 26px }
  .levelbar{ gap:14px }
  .seg{ max-width:100% }
  .path{ overflow-x:auto }
  .chem2{ font-size:16px }
  .fprompt{ font-size:19px }
  html,body{ overflow-x:hidden }
  /* hidden on body makes body its own scroll box, and then nothing inside it can be
     position:sticky — the landing bar scrolled away on a phone and stayed put on a
     computer. clip cuts the overflow off the same way without making a scroll box.
     A browser that does not know clip keeps the hidden above. Landing page only: the
     app's topbar is three rows deep on a phone, and pinning it would cost a sixth of
     the screen on every page. */
  body.landing{ overflow-x:clip }
}

/* --------------------------------------------------------------------------
   19.  THE ORGANIC QUESTION BANK.  The Organic Mechanism Arena stopped being
   only mechanisms: it now carries the whole organic course as topic pools —
   every question each topic has been set as, the short answers that come with
   it, the formula/name pairs and what goes wrong — plus a four-track drill, and
   the Synthetic Route Arena gains the fill-the-blanks drill over every arrow.

   Nothing here is a new object.  A question list is a ruled list with a hanging
   numeral, metadata is a rule of set text rather than a cloud of pills, and the
   brand appears only on the numeral, the live state and the highlight.
   -------------------------------------------------------------------------- */

/* the line of molecules a topic is set on, and the metadata under a question */
.bk-mol{ font-size:13.5px; color:var(--ink-2); line-height:1.7; margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid var(--line) }
.bk-mol > b{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-right:9px }

/* every way a topic has been asked: a hanging numeral against a rule */
.bk-v{ display:flex; flex-direction:column }
.bk-vrow{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line) }
.bk-vrow:first-child{ padding-top:0 }
.bk-vrow > i{ flex:none; min-width:26px; font-family:var(--tt); font-style:normal; font-size:12.5px;
  color:var(--brand); padding-top:3px }
.bk-vrow > div{ min-width:0; flex:1 1 auto }
.bk-vrow p{ font-size:15px; line-height:1.6; margin:0; max-width:var(--measure) }
.bk-vmeta{ font-size:12.5px; color:var(--ink-3); margin-top:7px !important; line-height:1.7 }
/* a lettered compound drawn beside its question (build/arenas/lettered/) */
.molbox.bk-fig{ display:inline-block; max-width:100%; margin:8px 0 2px; padding:6px 0; border:0; background:none }
.molbox.bk-fig .mol{ height:140px; width:auto; min-width:0; max-width:100% }
/* a figure cropped from a paper is wider than a molecule, and is black on white in either theme */
.molbox.bk-fig > img{ display:block; width:auto; max-width:100%; height:auto; background:#fff; border-radius:8px; padding:6px }
.molbox.bk-fig > svg{ max-width:100%; height:auto }
.bk-vmeta > b{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; margin-right:5px }
.bk-vmeta > span{ color:var(--line-2); margin:0 4px }
.bk-tw{ font-size:13.5px; color:var(--ink-2); margin-top:9px !important; padding-left:13px;
  border-left:2px solid var(--brand-line) }
.bk-tw > b{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; display:block; margin-bottom:2px }
.bk-pg{ display:flex; gap:12px; align-items:center; margin-top:14px }
.bk-pg > span{ font-size:12.5px; color:var(--ink-3); font-family:var(--tt) }

/* an answer's equivalent wordings, and the wording it is not */
.bk-alt{ font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:11px 0 0;
  padding-top:10px; border-top:1px solid var(--line) }
.bk-alt > b{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-right:9px }
.bk-alt.no{ border-top-style:dashed }
.bk-alt.no > b{ color:var(--flag) }

/* formula against name, and the self-test that hides one side */
.bk-nm{ display:grid; grid-template-columns:1fr; gap:0 }
.bk-nmrow{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(150px,1.2fr); gap:6px 20px;
  align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line) }
.bk-nmrow .f{ font-family:var(--tt); font-size:13px; color:var(--ink) }
.bk-nmrow .n{ font-size:14px; color:var(--ink-2) }
.bk-nm.blind .n{ color:transparent; background:var(--sunk); border-radius:2px; cursor:pointer }
.bk-nm.blind .bk-nmrow:hover .n,.bk-nm.blind .bk-nmrow:focus .n,
.bk-nm.blind .bk-nmrow.shown .n{ color:var(--ink-2); background:none }
.bk-nm.blind .bk-nmrow{ cursor:pointer }
.bk-nm.blind .bk-nmrow:focus{ outline:2px solid var(--brand); outline-offset:2px }

/* a formula or an equation set on its own line inside a drill question */
.bk-eq{ display:inline-block; font-family:var(--tt); font-size:14px; color:var(--ink);
  background:var(--sunk); border-radius:3px; padding:5px 10px; margin:6px 0 2px }
.bk-eq.big{ font-size:17px }
.bk-fields{ display:flex; flex-direction:column; gap:9px; margin-top:14px; max-width:var(--measure) }
/* .mx-in is flex:1 1 220px for a row; in a column that 220px would be its HEIGHT */
.bk-fields .mx-in{ flex:0 0 auto; width:100% }

/* Build the route — one blank step per block, the sequence read top to bottom */
.brstep{ border:1px solid var(--line); border-radius:9px; padding:12px 13px; margin-top:11px;
  background:var(--surface-2) }
.brstep .bk-fields{ margin-top:9px }
.brh{ display:flex; align-items:center; gap:9px }
.brto{ font-weight:650; font-size:13.5px; color:var(--ink-2) }

/* a labelled field — the label above the box it names */
.brl{ display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-top:11px }
.brl input,.brl textarea{ display:block; width:100%; margin-top:5px; font:inherit; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:7px; padding:9px 11px }
.brl textarea{ resize:vertical; line-height:1.55 }
.brl input:focus,.brl textarea:focus{ outline:none; border-color:var(--brand) }

/* plan practice — the bank of specification points to choose from and order */
.epbank{ display:flex; flex-wrap:wrap; gap:8px }
.epchip{ display:inline-flex; align-items:center; gap:8px; max-width:100%; text-align:left;
  font-size:13px; line-height:1.35; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:7px; padding:8px 11px; cursor:pointer }
.epchip:hover{ border-color:var(--line-2) }
.epchip[aria-pressed="true"],.epchip.on{ border-color:var(--brand); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--brand) }
.epchip.ok{ border-color:var(--brand); color:var(--ink); background:var(--brand-soft) }
.epchip.bad{ border-color:var(--flag-line); color:var(--flag); background:var(--flag-soft) }
/* the right answer you did NOT choose: shown, not scolded */
.epchip.miss{ border-style:dashed; border-color:var(--brand-line); color:var(--brand-ink) }
.epchip .dcode{ flex:0 0 auto }

/* essay history — every plan and essay a student makes of a title, kept and read back */
.eh-title{ margin:4px 0 14px }
.eh-mode{ display:inline-flex; flex-wrap:wrap; margin:0 0 12px }
.eh-hist{ margin:0 0 16px }
.eh-none{ margin:0 }
.eh-sec{ background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:0 14px; margin-top:8px }
.eh-sec[open]{ padding-bottom:12px; border-color:var(--brand-line) }
.eh-sec>summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:11px 0; cursor:pointer; list-style:none; font-size:13.5px }
.eh-sec>summary::-webkit-details-marker{ display:none }
.eh-sec>summary span{ margin-left:auto; font-size:12px; color:var(--ink-3); overflow-wrap:anywhere }
.eh-body .eyebrow{ display:block; margin:14px 0 6px }
.eh-chips .epchip{ cursor:default }
.eh-text,.eh-fb{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:1.6; color:var(--ink);
  background:var(--sunk); border-radius:7px; padding:10px 12px; max-height:420px; overflow:auto }
.eh-fb{ background:var(--brand-soft); border:1px solid var(--brand-line) }
.eh-ord{ margin:0; padding-left:22px; font-size:13px; line-height:1.55 }
.eh-ord li{ margin:2px 0 }
.eh-ord li.ok{ color:var(--brand-ink) }
.eh-ord li.bad{ color:var(--flag) }
.eh-miss{ margin:0; padding-left:20px; font-size:13px; line-height:1.55; color:var(--ink-2) }
.eh-fix{ margin-top:12px }
.eh-fix.has textarea{ background:var(--gold-soft); border-color:var(--gold-line) }
.eh-over{ color:var(--flag); font-weight:700 }
.eh-cmp{ margin-bottom:6px }
.eh-tag{ white-space:nowrap }
.ehw{ margin-top:6px }
.eh-clock{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:9px 12px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface) }
.eh-clock .btn{ margin-left:auto }
.eh-time{ font-variant-numeric:tabular-nums; font-size:20px; font-weight:800; color:var(--ink); min-width:62px }
.eh-cl{ font-size:12.5px; color:var(--ink-3); flex:1 1 200px; min-width:0 }
.eh-clock.on{ border-color:var(--brand-line) }
.eh-clock.on .eh-time{ color:var(--brand-ink) }
.eh-clock.over{ border-color:var(--flag-line); background:var(--flag-soft) }
.eh-clock.over .eh-time,.eh-clock.over .eh-cl{ color:var(--flag) }
@media (max-width:600px){
  .eh-sec>summary span{ margin-left:0; flex-basis:100% }
  .eh-clock .btn{ margin-left:0 }
}
.epchip .wi{ flex:0 0 auto }

/* the corrections book, offered as something to take away and learn from */
.dlbar{ border:1px solid var(--line); border-radius:14px; padding:17px 19px; margin-bottom:22px;
  background:var(--surface-2); display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.dlbar h3{ font-size:15px; font-weight:800; margin:0 0 5px }
.dlbar p{ font-size:13.5px; color:var(--ink-2); margin:0; max-width:62ch }
.dlbar .btnrow{ margin:0; flex:0 0 auto }

/* Sit a paper — the clock stays with you as the paper scrolls */
/* the topbar is sticky and 92px tall, so the clock sits under it rather than behind it */
.sithud{ position:sticky; top:96px; z-index:40; display:flex; gap:18px; align-items:center;
  flex-wrap:wrap; margin:0 0 20px; padding:14px 18px; border:1px solid var(--line); border-radius:13px;
  background:var(--surface); box-shadow:0 2px 14px rgba(0,0,0,.06) }
:root[data-theme="dark"] .sithud{ box-shadow:0 2px 14px rgba(0,0,0,.45) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sithud{ box-shadow:0 2px 14px rgba(0,0,0,.45) } }
.sithud > div:first-child{ flex:1 1 240px }
.sithud h3{ font-size:17px; font-weight:800; margin:2px 0 3px }
.sithud p{ font-size:13px; color:var(--ink-2); margin:0 }
.sithud .btnrow{ margin:0; flex:0 0 auto }
.sitclock{ flex:0 0 auto; text-align:center; padding:4px 14px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--line) }
.sitclock .t{ display:block; font-variant-numeric:tabular-nums; font-size:26px; font-weight:800; letter-spacing:-.5px }
.sitclock .l{ display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); font-weight:700 }
.sitclock.low .t{ color:var(--gold, #9A6B10) }
.sitclock.over{ border-color:var(--flag-line); background:var(--flag-soft) }
.sitclock.over .t{ color:var(--flag) }
.sitq{ margin-bottom:18px }
.sitq .brl{ margin-top:14px }
.sitmark{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line) }
.sitmark .lbl{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); font-weight:700 }
.sitmark .of{ font-size:13.5px; color:var(--ink-2) }
.sitmark input{ font:inherit; font-size:15px; text-align:center; padding:7px 8px; border:1px solid var(--line);
  border-radius:7px; background:var(--surface); color:var(--ink) }
.sitmark input:focus{ outline:none; border-color:var(--brand) }

/* the blurt machine — rounds, not a box with a button */
.bl-skel{ font-size:14px; color:var(--ink-2); margin:4px 0 0; font-style:italic }
.bl-track{ display:flex; align-items:flex-end; gap:9px; margin:12px 0 4px; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2) }
.bl-track .l{ font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; white-space:nowrap; padding-bottom:2px }
.bl-track .bars{ flex:1 1 auto; display:flex; align-items:flex-end; gap:3px; height:34px }
.bl-track .bars i{ flex:1 1 auto; min-width:4px; max-width:24px; background:var(--brand);
  border-radius:2px 2px 0 0; opacity:.75 }
.bl-track .bars i:last-child{ opacity:1 }
.bl-track b{ font-size:13px; font-weight:800; white-space:nowrap; padding-bottom:2px }
.bl-hist{ margin:10px 0 0; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2) }
.bl-run{ padding:9px 0; border-bottom:1px solid var(--line) }
.bl-run:last-of-type{ border-bottom:0 }
.bl-run .h{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.bl-run .h b{ font-size:13.5px }
.bl-run .when{ font-size:12px; color:var(--ink-3) }
.bl-run .miss{ font-size:13.5px; color:var(--ink-2); margin:6px 0 0; white-space:pre-line }
.bl-run .miss .k{ display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:2px }
.bl-check{ margin-top:13px; padding:14px 16px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2) }
.bl-check .check{ margin-top:8px }
.bl-check .mx-score{ display:block; margin:11px 0 0 }

/* a round in the history: what you wrote, what you had, what you missed, your words */
/* Two columns, not four: the panel is about 700px even on a wide screen, and four
   strips of prose that narrow are unreadable. Row 1 is what you wrote beside what you
   had; row 2 is what you missed beside what you wrote down about it. */
.bl-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px }
@media (max-width:700px){ .bl-cols{ grid-template-columns:minmax(0,1fr) } }
.bl-col{ min-width:0; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  background:var(--surface); overflow-wrap:anywhere }
.bl-col .k{ display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:5px }
.bl-col p{ font-size:13.5px; color:var(--ink-2); margin:0; white-space:pre-line; line-height:1.55 }
.bl-col p.none{ color:var(--ink-3); font-style:italic }
.bl-col ul{ margin:0; padding-left:17px }
.bl-col li{ font-size:13px; color:var(--ink-2); margin:0 0 4px; line-height:1.5 }
.bl-col.mine{ border-color:var(--brand-line); background:var(--brand-soft) }
.bl-col.mine .k{ color:var(--brand-ink) }
.bl-col.gone{ border-color:var(--flag-line); background:var(--flag-soft) }
.bl-col.gone .k{ color:var(--flag) }
.bl-col.miss{ border-color:var(--gold-line); background:var(--gold-soft) }
.bl-col.miss .k{ color:var(--gold) }
.bl-prog{ font-size:13px; color:var(--ink-2); margin:12px 0 0; padding-top:10px;
  border-top:1px solid var(--line) }

/* the tick list: every point is its own tick, under the heading it belongs to.
   Everything here must stay inside the panel, so each level that can hold long
   unbreakable content gets min-width:0 and is allowed to break. */
.bl-group{ margin:0 0 14px }
.bl-gh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 6px;
  padding-bottom:5px; border-bottom:1px solid var(--line) }
.bl-gh b{ flex:1 1 auto; min-width:0; font-size:13.5px; overflow-wrap:anywhere }
.bl-pt{ display:flex; align-items:flex-start; gap:9px; min-width:0; margin:0 0 5px }
.bl-pt > input{ flex:0 0 auto; margin-top:3px }
.bl-pt > span{ flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.55;
  color:var(--ink-2); overflow-wrap:anywhere }
.bl-pt mark{ overflow-wrap:anywhere }
.bl-check{ min-width:0; overflow:hidden }
.bl-check .blurt-ms,.bl-check .blurt-ms li{ min-width:0; overflow-wrap:anywhere }
.blurt,.bl-hist,.bl-run{ min-width:0 }
.blurt textarea,.bl-check textarea{ max-width:100%; box-sizing:border-box }
/* a table or a drawing inside a scheme point scrolls rather than pushing the panel wide */
.bl-pt table,.bl-check table{ display:block; max-width:100%; overflow-x:auto }
.bl-pt svg,.bl-check svg,.bl-pt img,.bl-check img{ max-width:100%; height:auto }

/* Phone. `flex:1 1 200px` on the title leaves it a 200px column beside the chips, so a
   long content-point name stacks one word per line; below 560px the title takes the
   whole row and the chips sit under it. */
@media (max-width:560px){
  .blurt-h{ align-items:flex-start }
  .blurt-h h4{ flex:1 1 100%; order:-1; font-size:15px }
  .bl-track{ flex-wrap:wrap }
  .bl-track .bars{ order:3; flex:1 1 100%; height:28px }
  .bl-gh{ align-items:flex-start }
  .bl-check{ padding:12px 13px }
  .blurt{ padding:14px 13px }
}

/* Foundation's own Learn / Recall switch */
.fseg{ margin-bottom:18px }


/* the drill head: a ruled statistics line with one progress rule, not a row of tiles */
.dr-hud{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; font-size:12.5px;
  color:var(--ink-3); padding:0 0 12px; margin:0 0 4px; border-bottom:1px solid var(--line) }
.dr-hud b{ font-family:var(--tt); font-size:15px; color:var(--ink); font-weight:500 }
.dr-bar{ flex:1 1 130px; min-width:110px; height:2px; background:var(--line); display:block; position:relative }
.dr-bar > i{ position:absolute; inset:0 auto 0 0; background:var(--brand); display:block }
.dr-q{ font-family:var(--display); font-size:20px; font-weight:600; line-height:1.4;
  letter-spacing:-.01em; margin:0 0 16px; max-width:var(--measure) }
.dr-q b{ font-weight:600; color:var(--brand-ink) }
.mxb .cnt{ font-family:var(--tt); font-size:11px; color:var(--ink-3); margin-left:7px }
.mxb[aria-pressed="true"] .cnt{ color:#fff }

@media (max-width:640px){
  .bk-nmrow{ grid-template-columns:1fr; gap:2px }
  .bk-vrow{ gap:10px }
  .dr-q{ font-size:18px }
}

/* ============================================================================
   Quiet page layer.
   Everything that is ABOUT the page rather than the content — the badge row, the
   mastery meters, the stat strip, the specification quote — folds behind a press or a
   "?", so a student meets the chemistry first and the furniture only when they ask.
   Nothing is deleted; it is all one press away.
   ========================================================================== */

/* the ? chip */
.qmw{ position:relative; display:inline-flex; align-items:center; gap:0; vertical-align:middle }
/* the small label beside a ?, so a student knows what it opens before they press it */
.qmt{ font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-3);
  font-weight:700 }
button.qm{ width:17px; height:17px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-3); font:700 11px/1 var(--ui,inherit);
  cursor:pointer; padding:0; margin-left:6px; vertical-align:middle }
button.qm:hover,button.qm[aria-expanded="true"]{ border-color:var(--brand); color:var(--brand-ink);
  background:var(--brand-soft) }
.qmp{ position:absolute; z-index:60; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  min-width:230px; max-width:min(380px,78vw); padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); box-shadow:0 6px 24px rgba(0,0,0,.12);
  font-size:13px; line-height:1.55; color:var(--ink-2); text-align:left; white-space:normal }
:root[data-theme="dark"] .qmp{ box-shadow:0 6px 24px rgba(0,0,0,.5) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .qmp{ box-shadow:0 6px 24px rgba(0,0,0,.5) } }
.qmp b{ display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:5px }
.qmp[hidden]{ display:none }
.qmbadges{ display:flex; flex-wrap:wrap; gap:6px }
.qmp .stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.qmp .stat{ display:block }
.qmp .stat .k{ display:block; font-size:10px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700 }
.qmp .stat .v{ display:block; font-size:17px; font-weight:800; color:var(--ink) }
.qmp .stat .f{ display:block; font-size:11.5px; color:var(--ink-3) }
/* on a phone it would run off the edge, so it pins to the left instead */
@media (max-width:560px){ .qmp{ left:0; transform:none; max-width:min(300px,86vw) } }

/* mastery opens on a press */
.mastery-h{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
  background:none; border:0; padding:0; text-align:left; color:inherit; font:inherit }
.mastery-h .mchev{ margin-left:auto; color:var(--ink-3); transition:transform .15s ease }
.mastery-h[aria-expanded="true"] .mchev{ transform:rotate(90deg) }
.mastery .meters[hidden]{ display:none }

/* the specification quote opens on a press */
details.spec,details.specquote{ border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); padding:0; margin:0 0 14px }
details.spec > summary,details.specquote > summary{ cursor:pointer; list-style:none;
  padding:9px 13px; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700 }
details.spec > summary::-webkit-details-marker,
details.specquote > summary::-webkit-details-marker{ display:none }
details.spec > summary::after,details.specquote > summary::after{ content:" \203a"; color:var(--ink-3) }
details.spec[open] > summary::after,details.specquote[open] > summary::after{ content:" \2304" }
details.spec > div,details.specquote > p{ margin:0; padding:0 13px 12px; font-size:14px;
  color:var(--ink-2); line-height:1.6 }

/* the sidebar collapses out of the grid so the page runs full width */
body.nosidebar .shell{ grid-template-columns:minmax(0,1fr) }
body.nosidebar .sidebar{ display:none }
body.nosidebar .main{ border-left:0 }

/* the skeleton, as steps */
ol.bl-skel{ margin:6px 0 0; padding-left:20px }
ol.bl-skel li{ font-size:13.5px; color:var(--ink-2); margin:0 0 4px; line-height:1.5 }

/* mastery says what pressing it does */
.mastery-h .mhint{ font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-left:9px }
.mastery-h:hover .mhint{ color:var(--brand-ink) }
@media (max-width:560px){ .mastery-h .mhint{ display:none } }

/* the Foundation meta row: what to know first, and why this order */
.fmeta{ display:flex; flex-wrap:wrap; gap:18px; margin:0 0 18px }
.fmeta:empty{ display:none }
.fmeta .qmp{ font-size:13.5px }
.fmeta .qmp p{ margin:0 0 8px }
.fmeta .qmp p:last-child{ margin-bottom:0 }

/* the two organic arenas, under the six stages, with a gap between */
.chem2 .rlab-2{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line) }
.chem2 .stages.arenas .arenastg{ flex-direction:column; gap:1px; align-items:flex-start }
.chem2 .arenastg .t{ font-size:13.5px; font-weight:650 }
.chem2 .arenastg .s{ font-size:10.5px; font-weight:500; color:var(--ink-3); line-height:1.3 }
.chem2 .arenastg:hover .s{ color:var(--ink-2) }
@media (max-width:920px){
  .chem2 .rlab-2{ display:none }
  .chem2 .stages.arenas{ flex-direction:row; overflow-x:auto; gap:6px; margin-top:6px }
  .chem2 .stages.arenas .arenastg{ white-space:nowrap; padding:6px 11px; border:1px solid var(--line);
    border-radius:9px }
  .chem2 .arenastg .s{ display:none }
}

/* per-section controls, beside the heading they change */
.secctrls{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto }
.secctrl{ position:relative; display:inline-flex }
.secctrl .qm{ margin-left:0; font-size:10.5px }
.secmenu{ min-width:252px; padding:9px }
.secmenu b{ padding:0 4px }
.secopt{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:7px 8px; border-radius:7px; color:var(--ink-2); font:inherit }
.secopt:hover{ background:var(--sunk) }
.secopt[aria-current="true"]{ background:var(--brand-soft) }
.secopt .t{ display:block; font-size:13px; font-weight:650; color:var(--ink) }
.secopt[aria-current="true"] .t{ color:var(--brand-ink) }
.secopt .s{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35 }
@media (max-width:560px){
  .secctrls{ margin-left:0; width:100%; margin-top:6px }
  .secmenu{ min-width:0; width:min(280px,82vw) }
}
/* the key, inside its popover, reads as a list rather than a strip */
.qmp .hlkey{ display:flex; flex-direction:column; gap:6px }
.qmp .hlkey span{ display:flex; align-items:center; gap:8px; font-size:12.5px }

/* the mark-scheme memoriser, under the scheme it perfects */
.msmemo{ margin-top:14px; padding:14px 16px; border:1px solid var(--brand-line);
  border-radius:11px; background:var(--brand-soft) }
.msmemo > .eyebrow{ color:var(--brand-ink) }
.msmemo .hint{ margin:4px 0 0 }
.msmemo .brl{ margin-top:12px }
.msmemo .msFront{ width:100%; margin-top:5px }
.msmemo .msnote{ width:100%; margin-top:5px; box-sizing:border-box }
.msmemo .msCp{ width:100%; margin-top:5px; margin-bottom:7px }
.msmemo .btnrow{ margin-top:12px }
.msbar{ background:linear-gradient(160deg,#2B5E8F 0%,#17395B 100%) }
:root[data-theme="dark"] .msbar{ background:linear-gradient(160deg,#1C3A55 0%,#102435 100%) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .msbar{ background:linear-gradient(160deg,#1C3A55 0%,#102435 100%) } }
.msempty h3{ font-size:15px; font-weight:800; margin-bottom:5px }

/* a folded-away block: the chip sits where the block was */
.quiet{ margin:0 0 16px }
.quiet:empty{ display:none }
.qmkpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px }
.qmkpis .kpi{ display:block }
.qmp .qmkpis .k,.qmp .qmkpis .v{ display:block }

/* site search: a real input, and every hit is a door */
.search{ position:relative }
.search input{ flex:1 1 auto; min-width:0; border:0; background:none; font:inherit; font-size:13px;
  color:var(--ink); padding:0; outline:none }
.search input::placeholder{ color:var(--ink-3) }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none }
.searchpanel{ position:absolute; z-index:120; top:calc(100% + 8px); left:0; right:0; min-width:340px;
  max-height:min(70vh,560px); overflow:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.16); padding:10px }
:root[data-theme="dark"] .searchpanel{ box-shadow:0 12px 40px rgba(0,0,0,.6) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .searchpanel{ box-shadow:0 12px 40px rgba(0,0,0,.6) } }
.searchpanel[hidden]{ display:none }
.sfilters{ display:flex; flex-wrap:wrap; gap:5px; padding:0 2px 9px; border-bottom:1px solid var(--line);
  margin-bottom:8px; position:sticky; top:-10px; background:var(--surface) }
.sfilters .fbtn b{ font-weight:700; color:var(--ink-3); margin-left:3px }
.sgroup{ margin:0 0 10px }
.sglab{ font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin:0 0 4px; padding:0 4px }
.shit{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:7px 9px; border-radius:8px; color:var(--ink-2); font:inherit }
.shit:hover,.shit:focus{ background:var(--brand-soft); outline:none }
.shit .t{ display:block; font-size:13.5px; font-weight:650; color:var(--ink); line-height:1.35 }
.shit .s{ display:block; font-size:11.5px; color:var(--ink-3) }
.spad{ padding:6px 6px 2px }
@media (max-width:760px){ .searchpanel{ position:fixed; left:10px; right:10px; min-width:0; top:62px } }

/* blurt: type it, or photograph it off paper */
.blseg{ margin:0 0 9px }
.blurt .drop{ display:block; border:1px dashed var(--line-2); border-radius:10px; padding:18px 16px;
  text-align:center; cursor:pointer; background:var(--surface) }
.blurt .drop:hover{ border-color:var(--brand) }
.blurt .drop span{ display:block; font-size:13px; color:var(--ink-3) }
.blurt .drop img{ max-width:100%; border-radius:8px; margin-top:10px }

/* corrections book: filter by module, then by spec point */
.corrfilters{ border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin:0 0 18px;
  background:var(--surface-2) }
.cfrow{ display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.cfrow + .cfrow{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line) }
.cfrow .lbl{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin-right:4px }
.cfrow .fbtn b{ color:var(--ink-3); font-weight:700; margin-left:3px }
.cfrow select{ flex:1 1 260px; max-width:460px; padding:7px 9px; font-size:12.5px }
.corrmod{ margin:0 0 26px }
.cmh{ font-size:16px; font-weight:800; margin:0 0 10px; padding-bottom:7px;
  border-bottom:2px solid var(--line-2); display:flex; align-items:center; gap:9px }
.cmsp{ font-size:14px; font-weight:750; margin:16px 0 9px; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap }

/* ===== exam mastery: a contents rail, and tables that fit the page ===== */
.mnav{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 22px;
  background:var(--surface-2) }
.mnl{ font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin:0 0 8px }
.mnav ol{ margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:4px 16px; counter-reset:mn }
.mnav li{ display:flex; align-items:baseline; gap:2px; counter-increment:mn }
.mnav a{ flex:0 1 auto; font-size:13.5px; color:var(--ink-2); text-decoration:none;
  padding:4px 0; line-height:1.4 }
.mnav a::before{ content:counter(mn) ". "; color:var(--ink-3); font-weight:700 }
.mnav a:hover{ color:var(--brand-ink); text-decoration:underline }
.msec{ scroll-margin-top:120px; margin:0 0 30px }
.msec > .sh{ display:flex; align-items:center; gap:2px; flex-wrap:wrap }
.mastery6 .sh{ scroll-margin-top:120px }

/* three bands of mark, as three cards rather than three loose lists */
.mbands{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:13px; margin-top:16px }
.mband{ border:1px solid var(--line); border-top-width:3px; border-radius:10px; padding:13px 15px;
  background:var(--surface) }
.mband h4{ font-size:14px; font-weight:800; margin:0 0 2px }
.mband .s{ font-size:11.5px; color:var(--ink-3); margin:0 0 9px }
.mband ul{ margin:0; padding-left:17px }
.mband li{ font-size:13.5px; color:var(--ink-2); margin:0 0 5px; line-height:1.5 }
.mband.win{ border-top-color:var(--brand) } .mband.win h4{ color:var(--brand-ink) }
.mband.mid{ border-top-color:var(--gold) }  .mband.mid h4{ color:var(--gold) }
.mband.top{ border-top-color:var(--flag) }  .mband.top h4{ color:var(--flag) }

/* a table that stacks instead of needing a sideways drag */
.rtw{ margin:0 0 6px; container-type:inline-size }
.rtable{ width:100%; border-collapse:collapse; font-size:13.5px }
.rtable th{ text-align:left; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:0 12px 7px 0; border-bottom:2px solid var(--line-2) }
.rtable td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--line); color:var(--ink-2);
  vertical-align:top; line-height:1.55; overflow-wrap:anywhere }
.rtable td:last-child,.rtable th:last-child{ padding-right:0 }
.rtable .cost{ color:var(--flag) }
.rtable.cmd td:first-child{ white-space:nowrap }
@media (max-width:760px){
  .rtable,.rtable tbody,.rtable tr,.rtable td{ display:block; width:100% }
  .rtable thead{ display:none }
  .rtable tr{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 10px;
    background:var(--surface) }
  .rtable td{ border:0; padding:5px 0 }
  .rtable td::before{ content:attr(data-l); display:block; font-size:10px; letter-spacing:.9px;
    text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:2px }
  .rtable.pred td::before{ display:none }
}
/* the same stacking whenever the table's own column is narrow — the six-stage page
   has a rail and the sidebar beside it, so a 1000px window can leave it 460px */
@container (max-width:600px){
  .rtable,.rtable tbody,.rtable tr,.rtable td{ display:block; width:100% }
  .rtable thead{ display:none }
  .rtable tr{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 10px; background:var(--surface) }
  .rtable td{ border:0; padding:5px 0 }
  .rtable.cmd td:first-child{ white-space:normal }
  .rtable td::before{ content:attr(data-l); display:block; font-size:10px; letter-spacing:.9px;
    text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:2px }
  .rtable.pred td::before{ display:none }
}

/* A long unbreakable run — a worked line like "(+)609 = 0 marks", a formula in <code> —
   pushed stage 6 past the viewport. Nothing in the page body may widen it. */
.mastery6 .cal,.mastery6 .card,.mastery6 .sent,.mastery6 p,.mastery6 li{ min-width:0; overflow-wrap:anywhere }
.mastery6 code,.mastery6 kbd{ overflow-wrap:anywhere; white-space:normal }
.mastery6 .wst > span:last-child{ min-width:0; overflow-wrap:anywhere }

/* ─── Per-spec-point performance analysis ───────────────────────────────────
   Chemistry gets it as stage 7, biology as a block at the head of Exam mastery.
   Every number in here is computed from P — the cards the student graded, the
   boxes they ticked, the corrections they saved — so nothing is shown that was
   not earned. */
.anal{ }
.anal .anal-v{ font-weight:650; color:var(--ink) }
.anal .anal-v.good{ color:var(--ok-ink,#166534) }
.anal .anal-v.low{ color:var(--flag-ink,#9a3412) }
.anal .anal-v.none{ color:var(--ink-3) }
.anal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:18px 0 6px }
.anal-c{ border:1px solid var(--line); border-radius:12px; padding:12px 13px;
  background:var(--surface-2,var(--surface)); min-width:0 }
.anal-c .k{ margin:0; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700 }
.anal-c .v{ margin:5px 0 2px; font-size:21px; font-weight:750; color:var(--ink);
  line-height:1.1; overflow-wrap:anywhere }
.anal-c .f{ margin:0; font-size:11.5px; color:var(--ink-3); line-height:1.35 }
.anal-cp{ border-left:3px solid var(--flag); padding:2px 0 2px 13px; margin:14px 0 }
.anal-cp h3{ margin:0 0 6px; font-size:14px; display:flex; align-items:baseline;
  gap:7px; flex-wrap:wrap; min-width:0 }
.anal-cp ul{ margin:0; padding-left:18px }
.anal-cp li{ font-size:13px; color:var(--ink-2); margin:3px 0; min-width:0;
  overflow-wrap:anywhere }
.anal-runs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px; margin:14px 0 }
.anal-run{ border:1px solid var(--line); border-radius:12px; padding:12px 13px; min-width:0 }
.anal-run .u{ margin:0; font-size:11.5px; font-weight:700; color:var(--ink-2);
  overflow-wrap:anywhere }
.anal-run .n{ margin:5px 0 2px; font-size:22px; font-weight:750; color:var(--brand-ink) }
.anal-run .n span{ font-size:12.5px; font-weight:600; color:var(--ink-3) }
.anal-run .f{ margin:0; font-size:11.5px; color:var(--ink-3) }
.anal-gaps{ margin:10px 0 0; padding-left:18px }
.anal-gaps li{ font-size:13.5px; color:var(--ink-2); margin:4px 0; min-width:0;
  overflow-wrap:anywhere }
.anal-next{ margin-top:20px }
/* The biology renderer drops this in and app.js fills it after mount, so it must
   take no space while it is empty. */
.anal-host:empty{ display:none }
.anal-host{ margin:0 0 24px }
.anal-host .anal{ padding:0; border:0; background:none }
.anal-host .anal .ph{ font-size:20px }
.bmastery .mnav{ margin-bottom:24px }
.bmastery .anal-grid,.bmastery .anal-runs{ gap:9px }
@media (max-width:560px){
  .anal-grid{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) }
  .anal-c .v{ font-size:18px }
}
/* "Do this next" is one instruction, so the label sits on its own line above it
   rather than running into the sentence. */
.anal-next{ display:block }
.anal-next .k{ display:block; margin:0 0 5px; font-size:10.5px; letter-spacing:.9px;
  text-transform:uppercase; color:var(--ink-3); font-weight:700 }

/* ═══ Calculation Arena ══════════════════════════════════════════════════════
   The standalone artifact shipped its own design system — its own tokens, its own
   type scale, its own shell. None of that comes across: every rule below is written
   in this site's tokens, so the arena re-colours with the board (it is blue on a
   chemistry board because body[data-subject] re-tokens --brand) and follows the
   light/dark theme without a second switch. Everything is scoped under .calcarena
   and ca- prefixed, because the arena shares class names like .card and .chip with
   the rest of the app and an unscoped rule would leak into the spec pages. */
.calcarena{ --ca-gap:14px }
.ca-seg{ margin-bottom:20px }
.ca-count{ margin-left:7px; background:var(--flag-soft); color:var(--flag);
  border-radius:999px; padding:1px 7px; font-size:11.5px; font-weight:750 }
.ca-main{ min-width:0 }
.calcarena h2{ font-size:22px; line-height:1.2; letter-spacing:-.015em; margin:0 }
.calcarena h3{ font-size:17px; margin:0 }
.calcarena h4{ font-size:15px; margin:0 }
.ca-h{ font-size:18px; margin:0 0 10px }
.ca-h2{ font-size:18px; margin:26px 0 12px }
.ca-lbl{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:750 }
.ca-lvl,.ca-src{ font-size:11.5px; color:var(--ink-3) }
.ca-stack{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.ca-row{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; min-width:0 }
.ca-card{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:16px 17px; min-width:0 }
.ca-intro{ font-size:14.5px; color:var(--ink-2); margin:0 0 16px; max-width:70ch }

/* ---- the route every station runs ---- */
.ca-journey{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 24px }
.ca-journey span{ display:inline-flex; align-items:center; gap:7px; font-size:12px;
  font-weight:650; color:var(--ink-2); background:var(--sunk); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 5px }
.ca-journey i{ display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:var(--brand); color:#fff; font-style:normal; font-size:11px; font-weight:750 }

/* ---- the arena map: chapters, spec points, station tiles ---- */
.ca-zone{ margin:0 0 30px }
.ca-chapter{ font-size:19px; padding-bottom:9px; border-bottom:2px solid var(--brand-line);
  margin:0 0 14px }
.ca-topic{ font-size:13px; font-weight:750; color:var(--ink-2); margin:18px 0 9px;
  letter-spacing:-.005em }
.ca-sp{ display:grid; grid-template-columns:minmax(170px,210px) 1fr; gap:16px;
  padding:13px 0; border-top:1px solid var(--line); align-items:start }
.ca-splabel{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.ca-code{ font-size:11px; font-weight:750; color:var(--brand); letter-spacing:.02em }
.ca-nm{ font-size:13.5px; font-weight:650; color:var(--ink); overflow-wrap:anywhere }
.ca-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; min-width:0 }
.ca-tile{ text-align:left; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:13px 14px; cursor:pointer; display:flex;
  flex-direction:column; gap:7px; min-width:0; transition:border-color .12s, box-shadow .12s, transform .12s }
.ca-tile:hover{ border-color:var(--brand-line); box-shadow:var(--shadow); transform:translateY(-1px) }
.ca-tile h4{ font-size:14.5px; line-height:1.25; overflow-wrap:anywhere }
.ca-fx{ font-size:12px; color:var(--brand-ink); background:var(--brand-soft);
  border-radius:6px; padding:3px 7px; align-self:flex-start; overflow-wrap:anywhere }
.ca-meta{ display:flex; flex-wrap:wrap; gap:4px 11px; font-size:11.5px; color:var(--ink-3) }
.ca-meta b{ color:var(--ink-2); font-weight:750 }
.ca-pips{ display:flex; gap:4px; margin-top:1px }
.ca-pips span{ width:100%; height:3px; border-radius:2px; background:var(--line-2) }
.ca-pips span.on{ background:var(--brand) }

/* ---- a station ---- */
.ca-crumb{ display:flex; gap:5px; align-items:baseline; flex-wrap:wrap;
  font-size:12px; color:var(--ink-3); margin-bottom:12px; min-width:0 }
.ca-crumb button{ background:none; border:0; padding:0; cursor:pointer; color:var(--brand);
  font-weight:650; font-size:12px }
.ca-crumb button:hover{ text-decoration:underline }
.ca-sthead{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px }
.ca-stmain{ flex:1 1 320px; display:flex; flex-direction:column; gap:7px; min-width:0 }
.ca-tag{ font-size:14.5px; color:var(--ink-2); margin:0; max-width:66ch }
.ca-bigfx{ font-size:16px; font-weight:650; color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid var(--brand-line); border-radius:var(--r); padding:12px 15px;
  min-width:0; overflow-wrap:anywhere }
.ca-stages{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px;
  border-bottom:1px solid var(--line); scrollbar-width:thin }
.ca-stages button{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:none; border:0; border-bottom:2.5px solid transparent; padding:8px 11px 9px;
  font-size:13px; font-weight:650; color:var(--ink-3); cursor:pointer }
.ca-stages button:hover{ color:var(--ink) }
.ca-stages button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brand) }
.ca-stages i{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:var(--sunk); color:var(--ink-3); font-style:normal; font-size:10.5px; font-weight:750 }
.ca-stages button.done i{ background:var(--brand); color:#fff }
.ca-nav{ margin-top:26px; justify-content:space-between }

/* ---- stage 1 ---- */
.ca-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px }
.ca-fcard h4{ display:flex; gap:9px; align-items:baseline; font-size:15px; margin-bottom:8px }
.ca-n{ font-size:11px; font-weight:750; color:var(--ink-3); font-variant-numeric:tabular-nums }
.ca-body{ font-size:14px; color:var(--ink-2) }
.ca-check{ margin-top:12px; border-top:1px dashed var(--line-2); padding-top:11px }
.ca-check .ca-lbl{ margin-right:6px }

/* ---- stage 2 ---- */
.ca-method{ list-style:none; counter-reset:cam; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px }
.ca-mstep{ counter-increment:cam; position:relative; padding-left:34px; min-width:0 }
.ca-mstep::before{ content:counter(cam); position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:23px; height:23px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-ink); font-size:11.5px; font-weight:750 }
.ca-mstep h4{ font-size:14.5px; margin-bottom:3px }
.ca-why{ font-size:13px; color:var(--ink-3); margin-top:5px; border-left:2px solid var(--line-2);
  padding-left:10px }
.ca-wh{ font-size:16px; margin:3px 0 9px }
.ca-wsteps{ display:flex; flex-direction:column; gap:10px; margin-top:12px; min-width:0 }
.ca-wstep{ background:var(--sunk); border-radius:9px; padding:11px 13px; min-width:0 }
.ca-work{ font-size:14.5px; margin-top:4px; overflow-wrap:anywhere }
.ca-answer{ margin-top:12px; font-weight:700; color:var(--brand-ink);
  background:var(--brand-soft); border-radius:8px; padding:9px 12px; overflow-wrap:anywhere }
.ca-traps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:11px }
.ca-trap{ border:1px solid var(--flag-line); background:var(--flag-soft);
  border-radius:var(--r); padding:12px 14px; min-width:0 }
.ca-trap b{ display:block; font-size:14px; color:var(--flag); margin-bottom:4px }
.ca-trap p{ margin:0; font-size:13.5px; color:var(--ink-2) }

/* ---- stage 3 ---- */
.ca-angle{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap }
.ca-angmain{ flex:1 1 320px; display:flex; flex-direction:column; gap:5px; min-width:0 }
.ca-point{ font-size:15.5px; margin:0 }
.ca-angle p{ font-size:13.5px; color:var(--ink-2); margin:0 }
.ca-bar{ height:5px; border-radius:3px; background:var(--sunk); margin-top:5px; overflow:hidden }
.ca-bar span{ display:block; height:100%; background:var(--brand); border-radius:3px }

/* ---- stage 4 ---- */
.ca-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.ca-chip{ border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer }
.ca-chip:hover{ border-color:var(--brand-line) }
.ca-chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff }
.ca-score{ display:flex; flex-wrap:wrap; gap:7px 18px; font-size:12.5px; color:var(--ink-3);
  background:var(--sunk); border-radius:9px; padding:9px 13px; margin-bottom:14px }
.ca-score b{ color:var(--ink); font-weight:750 }
.ca-drill{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; align-items:start }
.ca-qcard{ position:relative }
.ca-marks{ position:absolute; top:14px; right:15px; font-size:11px; font-weight:700;
  color:var(--ink-3); background:var(--sunk); border-radius:999px; padding:2px 9px }
.ca-qtext{ margin-top:7px; font-size:15px }
.ca-parts{ display:flex; flex-direction:column; gap:12px; margin-top:16px }
.ca-part{ border-top:1px dashed var(--line-2); padding-top:11px; min-width:0 }
.ca-in{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:7px }
.ca-in input,.calcarena .ca-check input{ border:1px solid var(--line-2); border-radius:8px;
  background:var(--surface); padding:7px 10px; font-size:14.5px; min-width:0; flex:0 1 190px }
.ca-in input:focus,.calcarena .ca-check input:focus{ outline:2px solid var(--brand); outline-offset:1px }
.ca-unit{ font-size:13px; color:var(--ink-3); overflow-wrap:anywhere }
.ca-opts{ display:flex; flex-wrap:wrap; gap:7px }
.ca-opt{ display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer }
.ca-opt:hover{ border-color:var(--brand-line) }
.ca-fb{ margin-top:7px; font-size:13.5px; border-radius:8px; padding:8px 11px; overflow-wrap:anywhere }
.ca-fb.ok{ background:var(--brand-soft); color:var(--brand-ink) }
.ca-fb.bad{ background:var(--flag-soft); color:var(--flag) }
.ca-fb.warn{ background:var(--gold-soft); color:var(--gold) }
.ca-side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:11px }
.ca-ms{ margin:5px 0 0; padding-left:20px; font-size:13.5px; color:var(--ink-2) }
.ca-ms li{ margin:3px 0; overflow-wrap:anywhere }
.ca-msnotes{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-3) }
.ca-aiblock{ display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--line);
  padding-top:11px }
.calcarena textarea.ca-note{ width:100%; min-height:62px; border:1px solid var(--line-2);
  border-radius:9px; background:var(--surface); padding:9px 11px; font-size:14px;
  font-family:inherit; resize:vertical }
.calcarena textarea.ca-ansbox{ min-height:120px }
.ca-ai{ font-size:14px; color:var(--ink-2); min-width:0; overflow-wrap:anywhere }
.ca-ai h4{ font-size:14px; margin:12px 0 4px; color:var(--ink) }
.ca-ai ul,.ca-ai ol{ margin:5px 0; padding-left:20px }
.ca-ai p{ margin:6px 0 }
.ca-thinking{ font-size:13.5px; color:var(--ink-3); font-style:italic }

/* ---- stage 5 ---- */
.ca-ppgroup{ margin:18px 0 9px }
.ca-pplist{ display:flex; flex-direction:column; gap:6px }
.ca-ppitem{ display:flex; gap:11px; align-items:center; text-align:left; width:100%;
  border:1px solid var(--line); border-radius:9px; background:var(--surface);
  padding:10px 13px; cursor:pointer; min-width:0 }
.ca-ppitem:hover{ border-color:var(--brand-line) }
.ca-ppmain{ flex:1 1 auto; min-width:0 }
.ca-ppt{ font-size:14px; font-weight:600; overflow-wrap:anywhere }
.ca-mk{ font-size:11.5px; color:var(--ink-3); white-space:nowrap }
.ca-status{ width:9px; height:9px; border-radius:50%; background:var(--line-2); flex:0 0 auto }
.ca-status.ok{ background:var(--brand) }
.ca-status.bad{ background:var(--flag) }
.ca-pager{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:12px }
.ca-qhead{ margin-bottom:12px; display:flex; flex-direction:column; gap:4px; min-width:0 }
.ca-credit{ font-size:12.5px; color:var(--ink-3); display:flex; gap:7px; align-items:center;
  flex-wrap:wrap }
.ca-ppview{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; align-items:start }
.ca-paperq{ font-size:14.5px }
.ca-ctx{ margin-bottom:11px; color:var(--ink-2) }
.ca-qfig{ display:block; max-width:100%; height:auto; border:1px solid var(--line);
  border-radius:8px; margin:9px 0; background:#fff }
.ca-ppart{ display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:baseline;
  border-top:1px dashed var(--line-2); padding-top:9px; margin-top:9px; min-width:0 }
.ca-plabel{ font-weight:750; color:var(--ink-3); font-size:13px }
.ca-ptext{ min-width:0; overflow-wrap:anywhere }
.ca-pmarks{ font-size:12px; color:var(--ink-3); white-space:nowrap }
.ca-flag{ font-size:12.5px; color:var(--gold); background:var(--gold-soft);
  border:1px solid var(--gold-line); border-radius:8px; padding:7px 11px }
.calcarena .drop.ca-drop{ display:block; text-align:center; border:1.5px dashed var(--line-2);
  border-radius:9px; padding:13px; font-size:13px; color:var(--ink-3); cursor:pointer }
.calcarena .drop.ca-drop:hover{ border-color:var(--brand-line); color:var(--ink-2) }
.ca-photo{ display:block; max-width:100%; height:auto; border-radius:9px; margin-top:9px }

/* ---- what to correct ---- */
.ca-zoneh{ display:flex; justify-content:space-between; align-items:baseline; gap:11px;
  flex-wrap:wrap; margin:24px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line) }
.ca-corr>summary{ display:flex; justify-content:space-between; align-items:center; gap:11px;
  cursor:pointer; list-style:none; min-width:0 }
.ca-corr>summary::-webkit-details-marker{ display:none }
.ca-open{ font-size:12px; font-weight:650; color:var(--brand); white-space:nowrap }
.ca-corr[open]>summary{ margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--line) }
.ca-pre{ white-space:pre-wrap; font-size:14px; color:var(--ink-2); margin:4px 0 0 }
.ca-msdet>summary{ cursor:pointer; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-3); font-weight:750 }

/* ---- where the spec calculates ---- */
.ca-specrow{ display:grid; grid-template-columns:minmax(170px,220px) minmax(0,1fr) minmax(150px,200px);
  gap:16px; padding:15px 0; border-top:1px solid var(--line); align-items:start }
.ca-speclines{ margin:0; padding-left:19px; font-size:13.5px; color:var(--ink-2); min-width:0 }
.ca-speclines li{ margin:3px 0; overflow-wrap:anywhere }
.ca-speclines li.calc{ color:var(--ink) }
.ca-train{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:0 }

/* ---- the three classes the station helpers emit ---- */
.ca-tbl{ overflow-x:auto; margin:9px 0; -webkit-overflow-scrolling:touch }
.ca-tbl table{ border-collapse:collapse; width:100%; font-size:13.5px }
.ca-tbl th,.ca-tbl td{ border:1px solid var(--line); padding:6px 9px; text-align:left }
.ca-tbl th{ background:var(--sunk); font-weight:700; font-size:12.5px }
.ca-eq{ background:var(--sunk); border-radius:8px; padding:9px 13px; margin:9px 0;
  font-size:15px; text-align:center; overflow-x:auto; min-width:0 }
.ca-frac{ display:inline-flex; flex-direction:column; vertical-align:middle;
  text-align:center; margin:0 3px; font-size:.92em }
.ca-frac>span:first-child{ border-bottom:1.3px solid currentColor; padding:0 5px 1px }
.ca-frac>span:last-child{ padding:1px 5px 0 }

/* A station's prose is generated chemistry — formulae, units, long worked lines —
   so every level that can hold an unbreakable run has to be allowed to break it,
   or one equation widens the whole arena. */
.ca-q,.ca-q *{ min-width:0 }
.ca-q{ overflow-wrap:anywhere }

@media (max-width:900px){
  .ca-drill,.ca-ppview{ grid-template-columns:1fr }
  .ca-side{ position:static }
  .ca-sp{ grid-template-columns:1fr; gap:9px }
  .ca-specrow{ grid-template-columns:1fr; gap:10px }
}
@media (max-width:560px){
  .ca-tiles{ grid-template-columns:1fr }
  .ca-grid2,.ca-traps{ grid-template-columns:1fr }
  .ca-ppart{ grid-template-columns:auto 1fr; }
  .ca-pmarks{ grid-column:2; }
}

/* The one confirmation the site needed: a drill check changes nothing visible on
   its own, so it says so and fades. */
.bcl-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:120; background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:600;
  border-radius:999px; padding:9px 18px; box-shadow:var(--shadow); max-width:88vw;
  text-align:center; transition:opacity .4s, transform .4s }
.bcl-toast.out{ opacity:0; transform:translateX(-50%) translateY(6px) }

/* ─── Maths Skills Arena · stage 4, the real questions ──────────────────────
   Nothing is authored for this: the questions are the ones already on the spec
   points the skill runs through, so they render through ppBlock() exactly as
   they do on a page, grouped under the point the paper filed them in. */
.mxpp-lede{ font-size:14px; color:var(--ink-2); margin:0 0 14px; max-width:68ch }
.mxpp{ display:flex; flex-direction:column; gap:20px }
.mxpp-g>h5{ display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; margin:0 0 10px;
  font-size:13.5px; font-weight:700; padding-bottom:7px; border-bottom:1px solid var(--line) }
.mxpp-g>h5 .et{ margin-left:auto }
.mxpp-pg{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line) }

/* ─── Flashcards: look through, and see the schedule ─────────────────────────
   Browse is reading, not testing: the card is flat rather than flipping, both
   sides sit on one face, and nothing about it is graded. */
.studyseg{ display:inline-flex; margin:0 auto 16px; justify-content:center }
.studycard.browsecard{ height:auto; min-height:0; perspective:none }
.studycard.browsecard .face{ position:static; transform:none; backface-visibility:visible;
  height:auto; min-height:0 }
.browse-ans{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line-2) }
.browsebar{ display:flex; align-items:center; justify-content:center; gap:11px;
  flex-wrap:wrap; margin-top:14px }
.browsebar .hint{ min-width:0 }
/* what the schedule is doing to this card, under the grade buttons */
.sched-now{ text-align:center; font-size:12px; color:var(--ink-3); margin:10px 0 0 }

/* ─── Chemistry stage 5: say what the choice is ──────────────────────────────
   The stage used to open shut behind two collapsed pickers, so a student could
   sit in front of nothing with no sign that a tier had to be chosen. This is the
   question asked outright, with the straight route — all of them — as a button. */
.ppstart{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  padding:18px 19px; margin:0 0 18px }
.ppq1{ font-size:17px; font-weight:700; margin:0 0 12px; letter-spacing:-.01em }
.ppstart .fine{ margin-top:11px }
/* a filter you have emptied cannot be confirmed — the button says so rather than
   doing nothing when pressed */
.pick .pickgo:disabled{ opacity:.45; cursor:not-allowed }

/* ─── A page on its way: the skeleton ─────────────────────────────────────────
   Shown by showBoardLoading() in app/app.js while one spec-point file is on the
   wire. The unit, code and title are real (they come from the board config);
   only the body is placeholder bars, in the page's own tokens so it sits right in
   both themes. */
.skel-page .skel-row{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 18px }
.skel-page .skel-rail{ display:flex; gap:10px; margin:6px 0 26px }
.skel-page .skel-sec{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:18px 20px; margin:0 0 16px; display:flex; flex-direction:column; gap:10px }
.skel{ display:block; height:12px; max-width:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--sunk) 0%, var(--line) 50%, var(--sunk) 100%);
  background-size:200% 100%; animation:skelshine 1.3s ease-in-out infinite }
.skel.skel-t{ height:26px; border-radius:8px }
.skel.skel-h{ height:16px; margin-bottom:4px }
.skel.skel-chip{ display:inline-block; height:22px; border-radius:999px }
.skel.skel-pill{ display:inline-block; height:34px; flex:1 1 0; min-width:0; border-radius:10px }
.skel-page .skel-note{ font-size:13px; color:var(--ink-3); margin:4px 0 30px }
@keyframes skelshine{ from{ background-position:100% 0 } to{ background-position:-100% 0 } }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none } }

/* ─── Account: a username, a password, and the subjects you are doing ────────
   No email: a sixth-former on a school machine should not have to hand one over,
   and it is a reset route the site cannot honour until there is a server. */
.gboards{ border:0; margin:4px 0 0; padding:0 }
.gboards legend{ font-size:12.5px; font-weight:700; color:var(--ink-2); padding:0 0 8px }
.gbgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px }
.gboard{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; cursor:pointer; background:var(--surface);
  position:relative; min-width:0 }
.gboard:hover{ border-color:var(--brand-line) }
.gboard.on{ border-color:var(--brand); background:var(--brand-soft) }
.gboard input{ position:absolute; opacity:0; pointer-events:none }
.gb-k{ font-size:13.5px; font-weight:700; overflow-wrap:anywhere }
.gb-s{ font-size:11.5px; color:var(--ink-3) }
.gboard.on .gb-k{ color:var(--brand-ink) }
.gateerr{ font-size:13px; color:var(--flag); background:var(--flag-soft);
  border-radius:8px; padding:8px 11px; margin:2px 0 0 }
.gateswap{ font-size:13px; color:var(--ink-2); margin:14px 0 0; text-align:center }
.gateswap button{ background:none; border:0; padding:0; cursor:pointer;
  color:var(--brand); font-weight:650; font-size:13px; text-decoration:underline }
.bmenu-more{ border-top:1px solid var(--line); margin-top:4px; font-size:12.5px;
  color:var(--ink-2) !important }

/* ─── Landing: the feedback route ────────────────────────────────────────────
   Scoped under #landingView like every other landing rule — the app and the
   landing page share a stylesheet and several class names, and an unscoped rule
   leaks into the spec pages. */
#landingView .hero-fine{ font-size:12.5px; color:var(--ink-3); margin:12px 0 0 }
#landingView .fbwrap{ max-width:720px }
#landingView .fbform{ display:flex; flex-direction:column; gap:12px }
#landingView .fbkinds{ display:flex; flex-wrap:wrap; gap:8px }
#landingView .fbk{ position:relative; cursor:pointer }
#landingView .fbk input{ position:absolute; opacity:0; pointer-events:none }
#landingView .fbk span{ display:inline-block; border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); background:var(--surface) }
#landingView .fbk:hover span{ border-color:var(--brand-line) }
#landingView .fbk input:checked + span{ background:var(--brand); border-color:var(--brand); color:#fff }
#landingView .fbk input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px }
#landingView .fbta{ min-height:120px; resize:vertical; font-family:inherit; line-height:1.5 }
#landingView .fbform .btn-xl{ align-self:flex-start }

/* ─── Landing: the bar across the top ────────────────────────────────────────
   The rest of the page is a pitch. These two are for the people who are not
   here to read it: somebody returning wants to sign in, and somebody with
   something to tell us should not have to scroll the page to find where. */
/* It sits on top of the dark hero, so it is dark too — a light bar put the brand
   at near-invisible contrast against the gradient behind it. */
#landingView .lbar{ position:sticky; top:0; z-index:30;
  background:rgba(27,37,45,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10); color:#EEF2F5 }
#landingView .lbar-in{ display:flex; align-items:center; gap:10px; padding:11px 0 }
#landingView .lbar-sp{ flex:1 1 auto }
#landingView .lbar .hero-brand.sm{ font-size:14.5px; margin:0; color:#EEF2F5 }
#landingView .lbar-b{ border:1px solid rgba(255,255,255,.22); background:transparent;
  border-radius:999px; padding:7px 15px; font-size:13.5px; font-weight:650;
  color:rgba(238,242,245,.88); cursor:pointer; white-space:nowrap }
#landingView .lbar-b:hover{ border-color:rgba(255,255,255,.5); color:#fff }
#landingView .lbar-b.solid{ background:#E6C98A; border-color:#E6C98A; color:#1B252D }
#landingView .lbar-b.solid:hover{ filter:brightness(1.06); color:#1B252D }
@media (max-width:560px){
  #landingView .lbar-in{ gap:7px }
  #landingView .lbar-b{ padding:6px 12px; font-size:12.5px }
  #landingView .hero-brand.sm span.mark{ margin-right:4px }
}

/* The jump links. Nobody should have to scroll to reach the part of the front door
   they came for, so every section of the page is one press away from the top. On a
   phone the row scrolls sideways rather than wrapping the bar onto three lines. */
#landingView .lnav{ display:flex; gap:2px; align-items:center; min-width:0; overflow-x:auto;
  scrollbar-width:none; margin-left:6px }
#landingView .lnav::-webkit-scrollbar{ display:none }
#landingView .lnav-b{ border:0; background:transparent; cursor:pointer; white-space:nowrap;
  border-radius:7px; padding:6px 10px; font-size:13px; font-weight:600;
  color:rgba(238,242,245,.62); transition:color .13s, background .13s }
#landingView .lnav-b:hover{ color:#fff; background:rgba(255,255,255,.09) }
/* every target clears the sticky bar, so a jump lands on the heading and not under it */
#landingView .lsec, #landingView .subjbar{ scroll-margin-top:62px }
@media (max-width:900px){
  /* the row scrolls sideways here, so it has to LOOK like it does: the last link fades
     out at the edge rather than being chopped off mid-word */
  /* no negative margin: with flex-basis 100% it pushed the row 4px past the left
     edge, and iOS lets a page that is wider than the screen slide sideways */
  /* the row is pulled out by its links' own padding (10px) on each side, so the
     WORD "Why" starts exactly under the logo rather than 10px in from it — and it
     stays inside the screen, because the bar keeps the page's side margin */
  #landingView .lnav{ order:5; flex:1 1 100%; margin:2px -10px 0;
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent) }
  /* the base rule's `padding:11px 0` wiped .wrap-l's side margin and put the logo
     against the very edge of a phone, so the margin is given back here, the same as
     the page under it (18px on a phone, below) */
  #landingView .lbar-in{ flex-wrap:wrap; padding:9px 28px 7px }
  #landingView .lbar-sp{ display:none }
  /* Give feedback and Sign in sit at the right edge, level with the logo on the
     left, instead of bunched up after it. An auto margin rather than the spacer,
     because the spacer's own gap is enough to push Sign in onto a line of its own */
  #landingView .lbar-sp + .lbar-b{ margin-left:auto }
  #landingView .lsec, #landingView .subjbar{ scroll-margin-top:92px }
}
/* The front door must be exactly as wide as the phone. Two things made it look
   wider on a real phone and not in a desktop browser at phone size:
   - anything past the edge: html,body{overflow-x:hidden} does not stop iOS Safari
     panning sideways, so clip it here as well (clip, not hidden — hidden would make
     #landingView a scroll container and break the sticky bar);
   - a text box under 16px: iOS zooms the page in when one is tapped, and leaves it
     zoomed. The feedback form is on this page and the account box opens over it. */
#landingView{ overflow-x:clip }
@media (max-width:700px){
  #landingView textarea, #landingView input.ti, #landingView select,
  #gateHost textarea, #gateHost input.ti, #gateHost select{ font-size:16px }
}
/* On a computer the subject switcher pins over the jump-link bar while its half of
   the page scrolls. On a phone the jump-link bar is two rows deep and the switcher
   cannot cover it, and pinning both would take 150px of the screen — so there only
   the jump-link bar pins, and the switcher scrolls with the page. */
@media (max-width:900px){
  #landingView .subjbar{ position:static }
}
/* Wrapped onto three lines the switcher was 152px tall on a phone, so there it is one
   row: the two subjects side by side, without the label and the small print, which
   the sections under it already say. */
#landingView .lbar-short{ display:none }
@media (max-width:370px){
  #landingView .lbar-long{ display:none }
  #landingView .lbar-short{ display:inline }
  #landingView .lbar-in{ gap:6px }
  #landingView .lbar-b{ padding:6px 10px; font-size:12px }
  #landingView .lbar .hero-brand.sm{ font-size:13px }
}
@media (max-width:560px){
  #landingView .lbar-in{ padding-inline:18px }
  #landingView .subjbar-k, #landingView .subjtab small{ display:none }
  #landingView .subjbar-in{ padding-block:8px; gap:8px }
  #landingView .subjtabs{ flex:1 1 auto; flex-wrap:nowrap }
  #landingView .subjtab{ flex:1 1 0; justify-content:center; min-width:0 }
}

/* =====================================================================
   Every AI tool, as a list that opens
   Victor: list them all, let a student press one, and show how it runs.
   Collapsed, each tool is one line — number, name, where it lives, what it
   costs — so twelve of them read as a contents page rather than a wall. Open,
   the flow comes down as numbered beats with an arrow between them.
   ===================================================================== */
#landingView .aitools .lsec-head{ margin-bottom:26px }
#landingView .atgrid{ display:grid; gap:9px; max-width:1000px }
#landingView .aitool{ border:1px solid rgba(255,255,255,.13); border-radius:13px;
  background:rgba(255,255,255,.035); overflow:hidden; transition:border-color .15s, background .15s }
#landingView .aitool:hover{ border-color:rgba(255,255,255,.26) }
#landingView .aitool[open]{ border-color:rgba(230,201,138,.42); background:rgba(255,255,255,.06) }
#landingView .aitool>summary{ cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:14px; padding:14px 17px; min-width:0 }
#landingView .aitool>summary::-webkit-details-marker{ display:none }
#landingView .at-n{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:700;
  color:rgba(230,201,138,.72); flex:0 0 auto }
#landingView .at-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
#landingView .at-t b{ font-size:15.5px; font-weight:650; letter-spacing:-.012em; color:#F3F6F8 }
#landingView .at-t i{ font-style:normal; font-size:12.5px; color:rgba(238,242,245,.55);
  line-height:1.4; overflow-wrap:anywhere }
#landingView .at-c{ flex:0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
  color:rgba(238,242,245,.6); border:1px solid rgba(255,255,255,.16);
  border-radius:5px; padding:3px 7px }
/* the chevron: one element, rotated, so there is no icon font to load */
#landingView .at-x{ flex:0 0 auto; width:9px; height:9px; margin-right:2px;
  border-right:1.8px solid rgba(238,242,245,.5); border-bottom:1.8px solid rgba(238,242,245,.5);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s }
#landingView .aitool[open] .at-x{ transform:rotate(-135deg) translate(-2px,-2px) }
#landingView .at-b{ padding:2px 17px 17px 17px; border-top:1px solid rgba(255,255,255,.08);
  margin-top:2px }
#landingView .at-s{ font-size:14px; line-height:1.55; color:rgba(238,242,245,.86);
  margin:14px 0 15px; max-width:70ch }
/* the flow: beats left to right on a wide screen, top to bottom on a phone, with the
   arrow drawn between them rather than typed into the copy */
#landingView .atflow{ list-style:none; margin:0; padding:0; display:grid; gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr)) }
#landingView .atflow li{ position:relative; min-width:0; border:1px solid rgba(255,255,255,.11);
  border-radius:10px; padding:11px 12px; background:rgba(14,22,28,.4) }
#landingView .atflow li b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.005em;
  color:#E6C98A; margin-bottom:4px }
#landingView .atflow li span{ display:block; font-size:12.5px; line-height:1.5;
  color:rgba(238,242,245,.76); overflow-wrap:anywhere }
#landingView .atflow li+li::before{ content:""; position:absolute; left:-7px; top:50%;
  width:5px; height:5px; margin-top:-3px;
  border-right:1.6px solid rgba(230,201,138,.5); border-top:1.6px solid rgba(230,201,138,.5);
  transform:rotate(45deg) }
#landingView .at-g{ margin:15px 0 0; font-size:13.5px; line-height:1.55; max-width:76ch;
  color:rgba(238,242,245,.9); border-left:2px solid rgba(230,201,138,.5); padding-left:13px }
#landingView .at-g span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(230,201,138,.8); margin-bottom:3px }
#landingView .atfoot{ margin:22px 0 0; font-size:14px; color:rgba(238,242,245,.78) }
#landingView .atfoot b{ color:#fff }
#landingView .atfoot .linkbtn{ color:#E6C98A; font-size:14px }
@media (max-width:620px){
  #landingView .aitool>summary{ gap:10px; padding:12px 13px; flex-wrap:wrap }
  #landingView .at-c{ order:4 }
  #landingView .at-b{ padding:2px 13px 14px }
  /* stacked, the arrow belongs above each step rather than beside it */
  #landingView .atflow li+li::before{ left:50%; top:-7px; margin:0 0 0 -3px;
    transform:rotate(135deg) }
}

/* =====================================================================
   BioChem tutor AI (app/tutor.js)
   A sidebar beside the page when it is opened — the notes stay readable —
   and the whole screen when expanded. On a phone it is always full width.
   ===================================================================== */
#aiDrawer.bt{position:fixed; top:58px; right:0; bottom:0; left:auto; width:min(440px,100vw); z-index:60;
  display:none; flex-direction:column; padding:0; gap:0; max-height:none; height:auto; background:var(--surface); border-left:1px solid var(--line-2);
  box-shadow:-18px 0 40px -28px rgba(0,0,0,.45)}
body.tutor-open #aiDrawer.bt{display:flex}
body.tutor-open .ai-scrim{display:none}
@media (min-width:1100px){
  body.tutor-open:not(.tutor-full) .shell{padding-right:440px}
  body.tutor-open:not(.tutor-full) .topbar{padding-right:20px}
}
@media (max-width:1099px){ body.tutor-open:not(.tutor-full) .ai-scrim{display:block} }
body.tutor-open.tutor-full #aiDrawer.bt{width:100vw; border-left:0; box-shadow:none}
body.tutor-open.tutor-full .bt-log,
body.tutor-open.tutor-full .bt-cues,
body.tutor-open.tutor-full .bt-thumbs,
body.tutor-open.tutor-full .bt-f,
body.tutor-open.tutor-full .bt-focus,
body.tutor-open.tutor-full .bt-fine{width:min(820px,100%); margin-left:auto; margin-right:auto}
body.tutor-open.tutor-full .bt-log{padding-left:20px; padding-right:20px}
.bt-box{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
.bt-h{display:flex; align-items:center; gap:6px; padding:11px 12px; border-bottom:1px solid var(--line)}
.bt-ic{width:26px; height:26px; border-radius:6px; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.bt-ht{flex:1 1 auto; min-width:0; line-height:1.2}
.bt-ht b{display:block; font-size:13.5px; font-weight:800}
.bt-sub{display:block; font-size:11px; color:var(--ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bt-hb{position:relative; width:30px; height:30px; border-radius:6px; display:grid; place-items:center; color:var(--ink-2); flex:none; background:none; border:0; cursor:pointer}
.bt-hb:hover{background:var(--sunk); color:var(--ink)}
.bt-hb-n{position:absolute; top:1px; right:0; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--flag); color:#fff; font-size:9.5px; font-weight:800; line-height:15px; text-align:center}
.bt-hb-n:empty{display:none}
.bt-focus{display:flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; color:var(--ink-2); background:var(--brand-soft); border-bottom:1px solid var(--brand-line)}
.bt-focus[hidden]{display:none}
.bt-focus-k{font-weight:800; color:var(--brand-ink); text-transform:uppercase; font-size:10px; letter-spacing:.06em}
.bt-focus-x{margin-left:auto; background:none; border:0; font-size:16px; line-height:1; color:var(--ink-3); cursor:pointer}
.bt-log{flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:11px}
.bt-msg{font-size:13.5px; line-height:1.55; max-width:100%; min-width:0; overflow-wrap:anywhere}
.bt-msg p{margin:0 0 7px} .bt-msg p:last-child{margin-bottom:0}
.bt-msg ul,.bt-msg ol{margin:4px 0 8px; padding-left:19px} .bt-msg li{margin:2px 0}
.bt-msg h5{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-ink); margin:14px 0 5px}
.bt-msg h5:first-child{margin-top:2px}
.bt-msg.me{align-self:flex-end; max-width:88%; background:var(--brand); color:#fff; padding:8px 12px; border-radius:12px 12px 3px 12px}
.bt-msg.me b{color:#fff}
.bt-msg.bot{background:var(--surface-2); border:1px solid var(--line); padding:10px 13px; border-radius:3px 12px 12px 12px}
.bt-hello{border-color:var(--brand-line); background:var(--brand-soft)}
.bt-photos{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.bt-photos img{width:72px; height:72px; object-fit:cover; border-radius:5px; border:1px solid rgba(255,255,255,.4)}
.bt-photo-note{font-size:11px; opacity:.8}
.bt-demo{display:inline-block; font-size:10.5px; font-weight:700; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:4px; padding:1px 6px; margin-bottom:7px}
.bt-think{display:flex; gap:4px; margin:2px 0}
.bt-think span{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:btdot 1s infinite ease-in-out}
.bt-think span:nth-child(2){animation-delay:.15s} .bt-think span:nth-child(3){animation-delay:.3s}
@keyframes btdot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.bt-row{display:flex; flex-direction:column; gap:6px; margin:6px 0}
.bt-go{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 11px; border-radius:7px; border:1px solid var(--brand-line); background:var(--surface); cursor:pointer; color:var(--ink)}
.bt-go:hover{border-color:var(--brand); background:var(--brand-soft)}
.bt-go-k{flex:none; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border-radius:4px; padding:2px 6px}
.bt-go-t{flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:700}
.bt-go-a{flex:none; color:var(--brand)}
.bt-dead{font-size:12.5px; color:var(--ink-3)}
.bt-chip{display:inline-block; font-size:11.5px; font-weight:700; border-radius:5px; padding:3px 8px; margin:2px 0}
.bt-chip.gap{background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line)}
.bt-chip.ok{background:var(--credit); color:var(--credit-ink)}
.bt-fix{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid var(--line-2); border-radius:7px; overflow:hidden; margin:5px 0; font-size:12.5px}
.bt-fix i{display:block; font-style:normal; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px}
.bt-fix-a{padding:7px 9px; background:var(--flag-soft); color:var(--ink-2)} .bt-fix-a i{color:var(--flag)}
.bt-fix-b{padding:7px 9px; background:var(--brand-soft); color:var(--ink)} .bt-fix-b i{color:var(--brand-ink)}
@media (max-width:480px){ .bt-fix{grid-template-columns:minmax(0,1fr)} }
.bt-plan{border:1px solid var(--brand-line); border-radius:8px; padding:10px 12px; margin:6px 0; background:var(--surface)}
.bt-plan-h{display:flex; flex-direction:column; margin-bottom:6px}
.bt-plan-k{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-ink)}
.bt-plan ol{margin:0; padding-left:19px} .bt-plan li{margin:7px 0} .bt-plan li .bt-go{margin-top:5px}
.bt-saved{font-size:11.5px; color:var(--brand-ink); font-weight:700; margin:6px 0 0}
.bt-after{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line-2)}
.bt-levels{display:flex; gap:5px; flex-wrap:wrap; margin-top:9px}
.bt-levels button{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer}
.bt-levels button:hover{border-color:var(--brand); color:var(--brand-ink)}
.bt-cues{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 8px}
.bt-cues:empty{display:none}
.bt-cue{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand-ink); cursor:pointer}
.bt-cue:hover{border-color:var(--brand)}
.bt-thumbs{display:flex; gap:7px; padding:0 14px 8px; flex-wrap:wrap}
.bt-thumbs[hidden]{display:none}
.bt-thumb{position:relative} .bt-thumb img{width:54px; height:54px; object-fit:cover; border-radius:5px; border:1px solid var(--line-2); display:block}
.bt-thumb button{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:0; background:var(--ink); color:var(--surface); font-size:12px; line-height:18px; cursor:pointer}
.bt-f{display:flex; align-items:flex-end; gap:6px; padding:10px 12px; border-top:1px solid var(--line)}
.bt-tool{width:34px; height:34px; border-radius:7px; display:grid; place-items:center; flex:none; color:var(--ink-2); border:1px solid var(--line-2); background:var(--surface-2); cursor:pointer}
.bt-tool:hover{color:var(--brand-ink); border-color:var(--brand)}
.bt-tool.on{background:var(--flag); border-color:var(--flag); color:#fff; animation:btpulse 1.2s infinite}
.bt-tool.off{opacity:.45}
@keyframes btpulse{50%{box-shadow:0 0 0 5px var(--flag-soft)}}
.bt-in{flex:1 1 auto; min-width:0; resize:none; font:inherit; font-size:13.5px; line-height:1.4; padding:7px 10px; border-radius:7px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); max-height:160px}
.bt-in:focus{outline:2px solid var(--brand-line); border-color:var(--brand)}
.bt-send{width:34px; height:34px; border-radius:7px; display:grid; place-items:center; flex:none; background:var(--brand); color:#fff; border:0; cursor:pointer}
.bt-fine{font-size:10.5px; color:var(--ink-3); padding:0 14px 9px; margin:0}
.bt-fine:empty{display:none}
@media (max-width:700px){ #aiDrawer.bt{top:54px; width:100vw} }

/* the buttons on the page */
.bt-ask{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px 4px 5px; border-radius:999px;
  border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand-ink); cursor:pointer; white-space:nowrap}
.bt-ask:hover{border-color:var(--brand); background:var(--surface)}
.bt-ask-ic{width:18px; height:18px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center}
.bt-ask-ic svg{width:10px; height:10px}
.sec-head .bt-ask{margin-left:auto; flex:none}
.bt-ask.sec{margin:-4px 0 12px}
.sec-head .bt-ask.sec{margin:0 0 0 auto}
.bt-ask.step{margin-top:12px; background:none; border-style:dashed}
.bt-ask.inline{margin-left:6px}
.bt-help{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:11px 13px; border-radius:8px; border:1px solid var(--brand-line); background:var(--brand-soft)}
.bt-help-t{display:flex; gap:10px; align-items:flex-start; flex:1 1 260px; min-width:0}
.bt-help-t b{display:block; font-size:13px}
.bt-help-t span:not(.bt-ic){display:block; font-size:12px; color:var(--ink-2); line-height:1.45}
.bt-help-b{flex:none}

/* the arena */
.bt-atop{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; margin:4px 0 16px}
.bt-agroup{margin:0 0 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden}
.bt-agh{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.bt-agh b{flex:1 1 auto; font-size:14px}
.bt-gap{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:11px 14px; border-top:1px solid var(--line)}
.bt-gap:first-of-type{border-top:0}
.bt-gap-t{flex:1 1 280px; min-width:0}
.bt-gap-t b{display:block; font-size:14px}
.bt-gap-t span{display:block; font-size:12.5px; color:var(--ink-2)}
.bt-gap-t span.muted{color:var(--ink-3); font-size:11.5px; margin-top:2px}
.bt-gap-a{display:flex; gap:6px; flex-wrap:wrap}
.bt-done{margin:6px 0 20px; font-size:13px}
.bt-done summary{cursor:pointer; font-weight:700; color:var(--ink-2)}
.bt-done ul{margin:8px 0 0; padding-left:19px}
.bt-bd,.bt-pl{border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:13px 15px; margin:0 0 13px}
.bt-bd-h{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.bt-bd-h b{flex:1 1 300px; font-size:14px; min-width:0}
.bt-bd-ans p{font-size:13px; color:var(--ink-2); white-space:pre-wrap; margin:3px 0 10px}
.bt-bd-fixes{margin:0 0 10px}
.bt-bd-full{margin:4px 0 10px; font-size:13.5px; line-height:1.55}
.bt-bd-full summary{cursor:pointer; font-weight:700; font-size:13px; color:var(--brand-ink)}
.bt-bd-full h5{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-ink); margin:14px 0 5px}
.bt-pl ol{margin:4px 0 0; padding-left:21px} .bt-pl li{margin:6px 0; font-size:13.5px}
.bt-pl li.done label{text-decoration:line-through; color:var(--ink-3)}
.bt-threads{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.bt-th{display:flex; flex-direction:column; gap:3px; text-align:left; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink)}
.bt-th:hover{border-color:var(--brand)}
.bt-thw{display:flex; flex-direction:column; min-width:0}
.bt-thw .bt-th{flex:1 1 auto}
.bt-thdl{align-self:flex-start; margin:5px 2px 0; font-size:12px}
.bt-dl{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:0 0 14px; padding:10px 13px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.bt-dl span{font-size:13px; color:var(--ink-2); min-width:0}
.bt-th b{font-size:13.5px} .bt-th span{font-size:11.5px}
.bt-empty{border:1px dashed var(--line-2); border-radius:8px; padding:18px; text-align:center; color:var(--ink-2); font-size:13.5px; background:var(--surface-2)}
.bt-empty p{max-width:560px; margin:0 auto 10px}
.bt-arena .seg{flex-wrap:wrap; max-width:100%}

/* The hero's left column lost its brand line, so its first line now sits level
   with the top of the two subject cards on the right rather than below them. */
#landingView .hero-l > .hero-kicker:first-child{ margin-top:2px }
#landingView .hero-in{ align-items:start }

/* ─── The account panel ──────────────────────────────────────────────────────
   What the account holds, then the subjects, then the three that cannot be
   undone — kept apart and last, because "reset my progress" sitting beside
   "save" is how somebody loses a term's work. */
.acctfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; margin:0 0 22px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-2) }
.acctfacts div{ min-width:0 }
.acctfacts dt{ font-size:10.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-3); font-weight:750; margin:0 }
.acctfacts dd{ margin:3px 0 0; font-size:16px; font-weight:700; color:var(--ink);
  overflow-wrap:anywhere }
.acch3{ font-size:14px; font-weight:750; margin:0 0 6px; letter-spacing:-.005em }
.acctdanger{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line) }
.acctdanger .btnrow{ margin-top:10px }
.btn.warn{ color:var(--flag); border-color:var(--flag-line) }
.btn.warn:hover{ background:var(--flag-soft); border-color:var(--flag) }

/* ─── Figures on a phone ─────────────────────────────────────────────────────
   A diagram is drawn on a 520-unit canvas and held at that minimum, so on a
   narrow screen the figure scrolls sideways inside its own box. That is the
   right call on a tablet, where 520px fits; on a phone it means every diagram
   on the page has to be dragged. They all carry a viewBox, so below 560px they
   scale to the column instead — smaller, but whole and in one piece. */
@media (max-width:560px){
  figure{ overflow-x:visible; padding:10px }
  figure svg{ min-width:0; max-width:100% }
  figure img{ min-width:0 }
}

/* ─── Marking one past-paper answer ──────────────────────────────────────────
   A score on its own teaches nothing. The reply comes back as the scheme's own
   points ticked or crossed, why the marks went, and the answer written the way
   it scores — and the last of those is what feeds the two pipelines. */
.ppmark{ margin-top:12px; font-size:14px; color:var(--ink-2) }
.ppm-mark{ font-size:17px; font-weight:750; color:var(--ink); margin:0 0 10px }
.ppm-pts{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px }
.ppm-pts li{ padding-left:22px; position:relative; min-width:0; overflow-wrap:anywhere }
.ppm-pts li::before{ content:"\2022"; position:absolute; left:4px; color:var(--ink-3) }
.ppm-pts li.ok::before{ content:"\2713"; color:var(--brand); font-weight:800 }
.ppm-pts li.no::before{ content:"\2717"; color:var(--flag); font-weight:800 }
.ppm-why{ background:var(--flag-soft); border-radius:9px; padding:10px 13px; margin:0 0 12px }
.ppm-model{ background:var(--brand-soft); border-radius:9px; padding:10px 13px; margin:0 0 12px }
.ppm-model ol{ margin:6px 0 0; padding-left:20px }
.ppm-model li{ margin:3px 0; overflow-wrap:anywhere }
.ppm-next{ margin:0 0 12px }
.ppm-acts{ margin-top:4px }
/* the examiner's marking: a table against the scheme, then every statement judged */
.ppm-row{ flex-wrap:wrap }
.ppm-out:empty{ display:none }
.ppm-mark .eyebrow{ display:block; margin-bottom:2px }
.ppm-sec{ margin:0 0 14px; min-width:0; container-type:inline-size }
.ppm-sec > .eyebrow{ display:block; margin-bottom:6px }
.ppm-tab{ font-size:13.5px; width:100% }
.ppm-tab td{ vertical-align:top; overflow-wrap:anywhere }
.ppm-tab tr.ok td.ppm-ic{ color:var(--brand); font-weight:800 }
.ppm-tab tr.no td.ppm-ic{ color:var(--flag); font-weight:800 }
.ppm-tab tr.no{ background:var(--flag-soft) }
.ppm-tab td.ppm-ic{ width:22px; text-align:center }
.ppm-said{ font-style:italic; color:var(--ink) }
.ppm-said-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }
.ppm-said-l li{ border-left:3px solid var(--line-2); padding:2px 0 2px 10px; min-width:0; overflow-wrap:anywhere }
.ppm-said-l li.ok{ border-left-color:var(--brand) }
.ppm-said-l li.no{ border-left-color:var(--flag) }
.ppm-said-l li.meh{ border-left-color:var(--gold) }
.ppm-said-l q{ color:var(--ink); font-style:italic }
.ppm-v{ display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-left:4px }
.ppm-said-l li.ok .ppm-v{ color:var(--brand) }
.ppm-said-l li.no .ppm-v{ color:var(--flag) }
.ppm-r{ display:block; margin-top:2px }
.ppm-after{ border-top:1px solid var(--line); padding-top:10px; margin-top:6px }
.ppm-after > .eyebrow{ display:block; margin-bottom:6px }
.ppm-err{ color:var(--flag) }
details.mstyped{ margin-top:12px }
.pp-ms .sci{ overflow-wrap:anywhere }
.ppm-why > .eyebrow,.ppm-model > .eyebrow{ display:block; margin-bottom:4px }
/* the whole-paper marker's per-question card */
.qc-miss{ margin:6px 0 0; padding-left:20px; font-size:13.5px }
.qc-model{ margin:6px 0 0; padding-left:20px; font-size:13.5px; color:var(--ink-2) }

/* ─── AI credits ─────────────────────────────────────────────────────────────
   The AI costs money per use and the site is free, which only reconciles with a
   budget the student can see. So the week's allowance is on the topbar, and what
   each thing costs is on the profile — not discovered when something stops. */
.credit-pill{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--surface); border-radius:999px; padding:5px 12px; font-size:12px;
  font-weight:650; color:var(--ink-2); cursor:pointer; white-space:nowrap }
.credit-pill:hover{ border-color:var(--brand-line); color:var(--ink) }
.credit-pill b{ color:var(--brand); font-weight:800; font-variant-numeric:tabular-nums }
.credit-pill.low b{ color:var(--flag) }
.credbar{ display:flex; flex-direction:column; gap:7px; border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; background:var(--surface-2) }
.credbar-t{ font-size:14px; color:var(--ink-2) }
.credbar-t b{ font-size:19px; color:var(--ink); font-weight:750 }
.credbar-r{ display:block; height:7px; border-radius:4px; background:var(--sunk); overflow:hidden }
.credbar-r i{ display:block; height:100%; background:var(--brand); border-radius:4px }
.credbar-f{ font-size:11.5px; color:var(--ink-3) }
.credbar.max .credbar-t b{ color:var(--brand) }
.credtable{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px }
.credtable th,.credtable td{ border-bottom:1px solid var(--line); padding:7px 2px; text-align:left }
.credtable th{ font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3) }
.credtable .num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums }
.credwhat>summary{ cursor:pointer; font-size:12.5px; font-weight:650; color:var(--brand) }
.credwall{ margin-top:10px; border:1px solid var(--gold-line); background:var(--gold-soft);
  border-radius:10px; padding:12px 14px; font-size:13.5px; color:var(--ink-2) }
.credwall b{ color:var(--ink); display:block; margin-bottom:5px }
.credwall p{ margin:0 0 10px }
/* the plans */
.plangrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:11px; margin-top:12px }
.plancard{ border:1px solid var(--line); border-radius:12px; padding:14px 15px;
  display:flex; flex-direction:column; gap:7px; min-width:0; background:var(--surface) }
.plancard.on{ border-color:var(--brand); background:var(--brand-soft) }
.plan-h{ display:flex; flex-direction:column; gap:2px }
.plan-h b{ font-size:14.5px; overflow-wrap:anywhere }
.plan-p{ font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.02em }
.plan-p i{ font-size:11.5px; font-weight:600; font-style:normal; color:var(--ink-3) }
.plan-w{ font-size:13px; font-weight:650; color:var(--ink-2); margin:0 }
.plan-who{ font-size:12.5px; color:var(--ink-3); margin:0; flex:1 1 auto }
.plan-cur{ font-size:11.5px; font-weight:700; color:var(--brand-ink) }
.plancard .btn{ align-self:flex-start }
@media (max-width:560px){ .plangrid{ grid-template-columns:1fr } }
/* the AI section on the landing page */
#landingView .aicosts{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:28px; align-items:start }
#landingView .aicosts h3{ font-size:15px; font-weight:750; margin:0 0 10px }
#landingView .lede.sm{ font-size:14px; margin-bottom:14px }
@media (max-width:760px){ #landingView .aicosts{ grid-template-columns:1fr; gap:22px } }
#landingView .aicost-l,#landingView .aicost-r{ min-width:0 }

/* ─── The weekly AI limit (5 Oct 2026) ──────────────────────────────────────
   One limit, the same for every student, shown as how much of the week is used —
   a bar and a percentage, never a count. */
.credit-pill .credmini{ display:inline-block; width:34px; height:5px; border-radius:3px;
  background:var(--sunk); overflow:hidden }
.credit-pill .credmini i{ display:block; height:100%; background:var(--brand); border-radius:3px }
.credit-pill.low .credmini i{ background:var(--flag) }
.credbar.low .credbar-r i{ background:var(--flag) }
.creduses{ margin:6px 0 10px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.creduses li{ font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px }

/* the landing page's own section: what the limit is, beside the bar a student sees */
#landingView .ailimit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start }
@media (max-width:820px){ #landingView .ailimit{ grid-template-columns:1fr; gap:24px } }
#landingView .ailimit-pts{ list-style:none; margin:0; padding:0; counter-reset:alp; display:flex; flex-direction:column; gap:18px }
#landingView .ailimit-pts li{ counter-increment:alp; display:grid; grid-template-columns:34px minmax(0,1fr);
  column-gap:14px; row-gap:3px }
#landingView .ailimit-pts li::before{ content:counter(alp); grid-row:span 2; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line) }
#landingView .ailimit-pts b{ font-size:15.5px; color:var(--ink); line-height:1.35 }
#landingView .ailimit-pts span{ font-size:14px; color:var(--ink-2); line-height:1.55 }
#landingView .ailimit-card{ border:1px solid var(--line); border-radius:16px; background:var(--surface);
  padding:20px; box-shadow:0 18px 40px -28px rgba(0,0,0,.35); min-width:0 }
#landingView .ailimit-k{ margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3) }
#landingView .ailimit-k.sm{ margin:18px 0 8px }
/* a week of use, day by day — the shape of a normal revision week under the limit */
#landingView .ailimit-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px;
  height:96px; margin-bottom:14px; align-items:end }
#landingView .ailimit-day{ display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end }
#landingView .ailimit-day i{ display:block; width:100%; max-width:26px; border-radius:6px 6px 3px 3px;
  background:var(--brand-line) }
#landingView .ailimit-day.now i{ background:var(--brand) }
#landingView .ailimit-day i.empty{ background:var(--sunk) }
#landingView .ailimit-day em{ font-style:normal; font-size:11px; font-weight:650; color:var(--ink-3) }
#landingView .ailimit-day.now em{ color:var(--brand-ink) }
#landingView .ailimit-uses{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
#landingView .ailimit-uses li{ font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px }

/* ─── Flashcards: cram, and the scheduler's own settings ─────────────────────
   The two things an Anki user looks for and does not find on a revision site.
   They sit under the deck table: somebody opening the Arena wants their due
   cards, not a settings screen. */
.crambar{ border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;
  margin:22px 0 0; background:var(--surface) }
.cram-h{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:14px }
.cram-h h3{ font-size:17px; margin:0 0 5px }
.cram-h p{ font-size:13.5px; color:var(--ink-2); margin:0; max-width:62ch }
.examrow{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  padding:13px 0; border-top:1px solid var(--line) }
.examrow .brl{ flex:0 0 auto }
.examrow .fine{ flex:1 1 280px; margin:22px 0 0 }
.cramsets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:11px; margin-top:12px }
.cramset{ border:1px solid var(--line); border-radius:11px; padding:13px 14px;
  display:flex; flex-direction:column; gap:7px; min-width:0 }
.cs-h{ display:flex; justify-content:space-between; gap:9px; align-items:baseline }
.cs-h b{ font-size:14px; overflow-wrap:anywhere }
.cs-d{ font-size:11.5px; font-weight:700; color:var(--flag); white-space:nowrap }
.cs-bar{ height:6px; border-radius:3px; background:var(--sunk); overflow:hidden }
.cs-bar i{ display:block; height:100%; background:var(--brand); border-radius:3px }
.cs-f{ font-size:11.5px; color:var(--ink-3); margin:0 }
.crambuild{ border:1px dashed var(--line-2); border-radius:11px; padding:16px;
  margin-top:14px; display:flex; flex-direction:column; gap:11px }
.crambuild h4{ font-size:15px; margin:0 }
.cramnow{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:10px;
  padding:10px 14px; font-size:13px }
.cramnow b{ color:var(--ink) }
.cramnow span{ color:var(--ink-2); flex:1 1 auto }
.schedbar{ border:1px solid var(--line); border-radius:var(--r); padding:16px 20px;
  margin:16px 0 0; background:var(--surface) }
.schedbar>summary{ cursor:pointer; display:flex; gap:10px; align-items:baseline;
  font-size:15px; list-style:none }
.schedbar>summary::-webkit-details-marker{ display:none }
.schedbar>summary::before{ content:"\203A"; color:var(--ink-3); font-size:17px; line-height:1 }
.schedbar[open]>summary::before{ content:"\2304" }
.schedgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px; margin:14px 0 }
.schedrow{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.sr-k{ font-size:12.5px; font-weight:700; color:var(--ink-2) }
.sr-h{ font-size:11.5px; color:var(--ink-3); line-height:1.45 }

/* ─── Flashcard Arena: the shelf ─────────────────────────────────────────────
   Everything except the due queue sits behind a labelled toggle, one open at a
   time. The arena was five full-width panels stacked; a student who came to clear
   twelve due cards should not have to scroll past a settings screen to find them. */
.fshelf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px; margin:0 0 20px }
.fsbtn{ position:relative; text-align:left; cursor:pointer; min-width:0;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:12px 38px 12px 14px; display:flex; flex-direction:column; gap:3px;
  transition:border-color .13s, background .13s }
.fsbtn:hover{ border-color:var(--line-2); background:var(--sunk) }
.fsbtn b{ font-size:14px; letter-spacing:-.01em }
.fsbtn span{ font-size:11.5px; color:var(--ink-3); line-height:1.4 }
.fsbtn[aria-pressed="true"]{ border-color:var(--brand-line); background:var(--brand-soft) }
.fsbtn[aria-pressed="true"] b{ color:var(--brand-ink) }
.fsbtn::after{ content:"\203A"; position:absolute; right:14px; top:12px; font-size:17px;
  line-height:1; color:var(--ink-3) }
.fsbtn[aria-pressed="true"]::after{ content:"\2304"; top:9px }
.fsn{ position:absolute; right:32px; top:13px; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; font-weight:700; font-style:normal; color:var(--brand);
  background:var(--brand-soft); border:1px solid var(--brand-line);
  border-radius:4px; padding:1px 5px }
.fsbtn[aria-pressed="true"] .fsn{ background:var(--surface) }
.fsecp{ margin-bottom:20px }
.fsecp .crambar, .fsecp .schedbar{ margin-top:0 }
.fsecp .corrbar, .fsecp .newbar{ margin-bottom:18px }
/* the new-card bar: the same shape as the due bar, in the neutral surface, because a
   count of cards never met is not a backlog */
.newbar{ border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  background:var(--surface); display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.newbar h3{ font-size:17px; margin:0 0 5px }
.newbar p{ font-size:13.5px; color:var(--ink-2); margin:0; max-width:64ch }

/* past cram sets: kept for ever, out of the way, and scrollable so twenty of them
   cost the same space as three */
.crampastwrap{ padding-top:13px; margin-top:13px; border-top:1px solid var(--line) }
.crampast{ max-height:196px; overflow:auto; display:flex; flex-direction:column; gap:7px;
  padding-right:4px }
.cpast{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; min-width:0;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--sunk) }
.cp-n{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px }
.cp-n b{ font-size:13.5px; overflow-wrap:anywhere }
.cp-n span{ font-size:11.5px; color:var(--ink-3) }
.cp-a{ display:flex; gap:7px; flex:0 0 auto }
/* the corrections search, beside the module and spec-point filters */
.corrsearch{ flex:1 1 320px; min-width:0; max-width:520px }
/* the Feynman drill's suggestion line in the tutor */
.bt-feysug{ font-size:13px; color:var(--ink-3); margin-top:8px }

/* ─── The student's own flashcards (5 Oct 2026) ─────────────────────────────
   "Add a flashcard" beside every content point (app/mycards.js), the deck switch
   in the Flashcard Arena, and the "Your own cards" panel (app.js myCardsHTML). */
.mc-add{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); border-radius:999px; padding:4px 11px; font:inherit;
  font-size:12px; font-weight:650; cursor:pointer; white-space:nowrap }
.mc-add:hover{ border-color:var(--brand-line); color:var(--brand-ink); background:var(--brand-soft) }
.c2main [data-x="cpbody"] .mc-add{ margin:4px 0 10px 8px }
.mc-form{ border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:12px;
  padding:14px 16px; margin:10px 0 14px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.mc-t{ margin:0; font-size:13px; color:var(--ink-2) }
.mc-t b{ color:var(--ink) }
.mc-l{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink-2) }
.mc-form .ti, .mc-front, .mc-back{ background:var(--surface) }
.mc-front{ font-weight:600 }
.mc-form .btnrow{ margin-top:0 }
.mc-msg{ margin:0; font-size:13px; color:var(--ink-2) }
.mc-msg.ok{ color:var(--brand-ink) }
.mc-msg.err{ color:var(--flag) }
@media (max-width:700px){ .mc-form textarea{ font-size:16px } }

/* which deck a spec point runs: ready-made or the student's own */
.deckuse{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:var(--surface); white-space:nowrap }
.deckuse button{ border:0; background:transparent; font:inherit; font-size:11.5px; font-weight:650; color:var(--ink-3);
  padding:4px 10px; cursor:pointer }
.deckuse button + button{ border-left:1px solid var(--line-2) }
.deckuse button[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink) }
.deckuse button:hover{ color:var(--ink) }

/* "Your own cards" */
.mydeck{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:var(--surface); min-width:0 }
.mydeck-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:10px }
.mydeck-h b{ font-size:14px; flex:1 1 180px; min-width:0 }
.mycards{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.mycards li{ border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--surface-2); min-width:0 }
.myc-f{ font-weight:650; color:var(--ink); overflow-wrap:anywhere }
.myc-b{ margin-top:5px; color:var(--ink-2); font-size:13.5px; overflow-wrap:anywhere }
.myc-m{ display:flex; align-items:center; gap:8px; margin-top:7px }
.myc-m .linkbtn{ margin-left:auto; color:var(--flag) }

/* ---- corrections vs mark scheme mastery: tagged, and studied either way ---- */
.ctag{ display:inline-flex; align-items:center; font-size:11px; font-weight:750; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap }
.ctag.fix{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line) }
.ctag.msm{ background:var(--blue-soft); color:var(--blue); border-color:var(--blue-line) }
.card2.is-msm .face{ border-color:var(--blue-line) }
.card2.is-msm .fcue{ color:var(--blue) }
.corrpick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:14px 0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r,12px); background:var(--surface) }
.corrpick-q{ flex:1 0 100%; margin:0; font-weight:700; color:var(--ink) }
.corrpick-seg{ flex-wrap:wrap }
.corrpick-seg button{ display:inline-flex; align-items:center; gap:6px }
.corrpick-seg button[disabled]{ opacity:.45; cursor:not-allowed }
.cpn{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.corrpick-due{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2) }
.corrpick .fine{ flex:1 0 100%; margin:0 }

/* ---- BioChem tutor AI: how answers come, and the two ways into a question ---- */
.bt-style{ display:flex; align-items:center; gap:6px; padding:0 14px 8px; flex-wrap:wrap }
.bt-style-k{ font-size:11px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-right:2px }
.bt-style button{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer }
.bt-style button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.bt-choice{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.bt-choice button{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:2px; white-space:normal; height:auto; padding:9px 12px }
.bt-choice button span{ font-weight:500; font-size:12px; opacity:.85 }
.bt-choice button.on{ outline:2px solid var(--brand) }
body.tutor-open.tutor-full .bt-style{ width:min(820px,100%); margin-left:auto; margin-right:auto }

/* ---- the flashcard plan at the top of every page ---- */
.mc-plan{ margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); max-width:880px }
.mc-plan-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.mc-plan-k{ font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.mc-plan-seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden }
.mc-plan-seg button{ font-size:12.5px; font-weight:700; padding:5px 12px; border:0; background:transparent; color:var(--ink-2); cursor:pointer }
.mc-plan-seg button + button{ border-left:1px solid var(--line-2) }
.mc-plan-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--surface) }
.mc-plan-q{ margin:9px 0 0; font-size:13.5px; color:var(--ink-2) }
.mc-prog{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap }
.mc-bar{ flex:1 1 160px; max-width:320px; height:8px; border-radius:999px; background:var(--sunk); overflow:hidden }
.mc-bar i{ display:block; height:100%; background:var(--brand); border-radius:999px }
.mc-bar.gap i{ background:var(--gold) }
.mc-prog-t{ font-size:13px; color:var(--ink-2) }
.mc-warn{ margin:10px 0 0; padding:8px 11px; border-radius:9px; background:var(--gold-soft); color:var(--ink); font-size:13.5px }
.mc-ok{ margin:10px 0 0; font-size:13px; color:var(--brand-ink) }
.mc-secs{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px }
.mc-secs li{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line) }
.mc-secs li .mc-form{ flex:1 0 100% }
.mc-sec-t{ flex:1 1 240px; min-width:0; color:var(--ink) }
.mc-sec-n{ font-size:12px; color:var(--ink-3) }
.mc-secs li.none .mc-sec-n{ color:var(--gold); font-weight:700 }
.mc-secs li.has .mc-sec-n{ color:var(--brand) }
.mc-cov{ font-size:12px; color:var(--brand); font-weight:650 }
.mc-cov.gap{ color:var(--gold) }

/* ---- report a problem · contact us ---- */
.reportfab{ position:fixed; left:14px; bottom:14px; z-index:60; display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font:600 12.5px/1 inherit; box-shadow:var(--shadow); cursor:pointer }
.reportfab:hover{ color:var(--ink); border-color:var(--ink-3) }
body.landing .reportfab, body.studyfs-on .reportfab{ display:none }
@media (max-width:700px){ .reportfab span{ display:none } .reportfab{ padding:9px; left:10px; bottom:10px } }
@media print{ .reportfab{ display:none } }
.msgform{ display:flex; flex-direction:column; gap:12px }
.msgform .brl{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:650; color:var(--ink-2) }
.msgform textarea.ti{ min-height:110px; resize:vertical; font-family:inherit; line-height:1.5 }
.msgrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:560px){ .msgrow{ grid-template-columns:1fr } }
.msgkinds{ display:flex; flex-wrap:wrap; gap:7px }
.msgkinds .fbk{ position:relative; cursor:pointer }
.msgkinds .fbk input{ position:absolute; opacity:0; pointer-events:none }
.msgkinds .fbk span{ display:inline-block; border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface) }
.msgkinds .fbk:hover span{ border-color:var(--brand-line) }
.msgkinds .fbk input:checked + span{ background:var(--brand); border-color:var(--brand); color:#fff }
.msgkinds .fbk input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px }
.msgstat{ font-size:13.5px; font-weight:600; color:var(--ink-2) }
.msgstat.bad{ color:var(--flag) }
.msgdone{ font-size:15px; line-height:1.55; color:var(--ink); margin:4px 0 0 }
.gatecard.msgcard{ max-width:600px }
#landingView .contactwrap{ max-width:640px }
#landingView .contactwrap .msgform{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px }
#landingView .foot-links{ margin-top:6px }

/* the marking table stacks into one card per point when its column is narrow */
@container (max-width:560px){
  .ppm-tab.t, .ppm-tab.t tbody, .ppm-tab.t tr, .ppm-tab.t td{ display:block; width:auto; min-width:0 }
  .tscroll .ppm-tab.t{ min-width:0; width:100% }
  .ppm-tab.t thead{ display:none }
  .ppm-tab.t tr{ position:relative; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:9px 12px 9px 34px; margin:0 0 8px }
  .ppm-tab.t td{ border:0; padding:3px 0; background:none }
  .ppm-tab.t td.ppm-ic{ position:absolute; left:10px; top:10px; padding:0 }
  .ppm-tab td[data-l]::before{ content:attr(data-l); display:block; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3); font-weight:700; font-style:normal; margin-bottom:1px }
}

/* ================= the app tour (app/tour.js) =================
   A dimmed layer with a hole over the real feature (.tr-spot — the hole is its own
   box-shadow), a pointer that glides to it and taps, and a card beside it. Every
   rule is prefixed tr- or scoped under #tourHost, so nothing reaches the app. */
#tourHost{position:fixed; inset:0; z-index:200; font-size:14px}
#tourHost[hidden]{display:none}
#tourHost .tr-shade{position:absolute; inset:0; background:rgba(9,20,17,.62); transition:clip-path .45s cubic-bezier(.3,.8,.3,1)}
#tourHost.tr-centre .tr-shade{clip-path:none !important; backdrop-filter:blur(2px)}
#tourHost .tr-spot{position:absolute; border-radius:12px; box-shadow:0 0 0 2px var(--brand), 0 0 24px 2px rgba(255,255,255,.25);
  transition:left .45s cubic-bezier(.3,.8,.3,1), top .45s cubic-bezier(.3,.8,.3,1), width .45s cubic-bezier(.3,.8,.3,1), height .45s cubic-bezier(.3,.8,.3,1); pointer-events:none}
#tourHost .tr-spot[hidden]{display:none}
#tourHost .tr-spot::after{content:""; position:absolute; inset:-6px; border-radius:16px; border:2px solid var(--brand); opacity:0; animation:trPulse 1.8s ease-out .5s infinite}
@keyframes trPulse{0%{opacity:.8; transform:scale(.98)} 100%{opacity:0; transform:scale(1.06)}}
#tourHost.tr-busy .tr-cardw{opacity:.55}
#tourHost .tr-ghost{position:absolute; left:0; top:0; width:22px; height:22px; pointer-events:none; opacity:0; z-index:3;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6.2 1.3L16 20l-3 1.4-3.2-7.6L5 18z' fill='%23fff' stroke='%23131C1B' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
#tourHost .tr-ghost.on{animation:trGhost 1.5s cubic-bezier(.45,.05,.25,1) .15s both}
@keyframes trGhost{0%{opacity:0; transform:translate(var(--fx),var(--fy))} 15%{opacity:1} 70%{transform:translate(var(--tx),var(--ty)) scale(1)} 80%{transform:translate(var(--tx),var(--ty)) scale(.82)} 92%{opacity:1; transform:translate(var(--tx),var(--ty)) scale(1)} 100%{opacity:0; transform:translate(var(--tx),var(--ty))}}

#tourHost .tr-cardw{position:absolute; width:400px; max-width:calc(100vw - 24px); z-index:2; transition:left .4s cubic-bezier(.3,.8,.3,1), top .4s cubic-bezier(.3,.8,.3,1), opacity .2s}
#tourHost.tr-centre .tr-cardw{left:50% !important; top:50% !important; transform:translate(-50%,-50%)}
#tourHost .tr-card{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:16px 18px 14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.08); animation:trIn .35s cubic-bezier(.3,.8,.3,1) both; max-height:calc(100vh - 24px); overflow:auto}
@keyframes trIn{from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:none}}
#tourHost .tr-top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
#tourHost .tr-sec{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); padding:3px 9px; border-radius:999px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#tourHost .tr-count{margin-left:auto; font:600 11.5px "IBM Plex Mono",monospace; color:var(--ink-3)}
#tourHost .tr-x, #tourHost .tr-tocbtn{border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:600 12px inherit; font-family:inherit; padding:4px 10px; border-radius:8px; cursor:pointer}
#tourHost .tr-x:hover, #tourHost .tr-tocbtn:hover{border-color:var(--line-2); color:var(--ink)}
#tourHost .tr-tocbtn{display:none}
#tourHost .tr-title{font-size:19px; font-weight:800; letter-spacing:-.2px; margin:2px 0 10px; line-height:1.25}
#tourHost .tr-lede{color:var(--ink-2); margin:0 0 14px; font-size:15px; line-height:1.5}
#tourHost .tr-fine{color:var(--ink-3); font-size:12.5px; margin:12px 0 0; line-height:1.5}
#tourHost .tr-pts{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px}
#tourHost .tr-pts li{display:grid; grid-template-columns:86px 1fr; gap:8px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
#tourHost .tr-k{font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); padding-top:2px}
#tourHost .tr-pts li.tr-why{background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:10px; padding:7px 9px; color:var(--ink)}
#tourHost .tr-why .tr-k{color:var(--brand-ink)}
#tourHost .tr-foot{display:flex; align-items:center; gap:8px; margin-top:14px}
#tourHost .tr-prog{flex:1; height:4px; border-radius:4px; background:var(--sunk); overflow:hidden}
#tourHost .tr-prog i{display:block; height:100%; background:var(--brand); border-radius:4px; transition:width .4s}
#tourHost .tr-go, #tourHost .tr-back{font-family:inherit; font-size:14px; font-weight:700; border-radius:10px; padding:9px 16px; cursor:pointer; border:1px solid transparent}
#tourHost .tr-go{background:var(--brand); color:#fff}
#tourHost .tr-go:hover{filter:brightness(1.08)}
#tourHost .tr-back{background:transparent; color:var(--ink-2); border-color:var(--line)}
#tourHost .tr-go:focus-visible, #tourHost .tr-back:focus-visible, #tourHost .tr-tocb:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
#tourHost .tr-end{text-align:center; padding:22px 26px 20px}
#tourHost .tr-end .tr-title{font-size:23px}
#tourHost .tr-end .tr-foot{justify-content:center}
#tourHost .tr-end .tr-go{font-size:16px; padding:12px 26px}
#tourHost .tr-end .tr-top{justify-content:space-between}

/* contents: the replayable tour only */
#tourHost .tr-toc{position:absolute; left:12px; top:12px; bottom:12px; width:272px; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 8px; overflow:auto; box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
#tourHost .tr-toc[hidden]{display:none}
#tourHost .tr-toch{font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3); padding:2px 8px 8px}
#tourHost .tr-tocb{display:flex; gap:8px; align-items:center; width:100%; text-align:left; font:600 13px/1.3 inherit; font-family:inherit; color:var(--ink-2); background:none; border:0; border-radius:8px; padding:8px; cursor:pointer}
#tourHost .tr-tocb:hover{background:var(--sunk); color:var(--ink)}
#tourHost .tr-tocb.on{background:var(--brand-soft); color:var(--brand-ink)}

/* the demo stage on each card */
#tourHost .tr-demow{position:relative}
#tourHost .tr-demo{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; min-height:128px; overflow:hidden; position:relative}
#tourHost .tr-replaybtn{position:absolute; right:6px; top:6px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-3); cursor:pointer; font-size:13px; line-height:1}
#tourHost .tr-replaybtn:hover{color:var(--brand)}
.tr-d{position:relative; font-size:12.5px; color:var(--ink)}
.tr-d .tr-cap{margin-top:10px; font-size:12px; color:var(--ink-3); animation:trFade .4s both}
@keyframes trFade{from{opacity:0} to{opacity:1}}
@keyframes trUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes trPop{0%{opacity:0; transform:scale(.6)} 70%{transform:scale(1.08)} 100%{opacity:1; transform:none}}
.tr-cur{position:absolute; left:var(--x); top:var(--y); width:16px; height:16px; opacity:0; animation:trTap 1.3s ease both;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6.2 1.3L16 20l-3 1.4-3.2-7.6L5 18z' fill='%23fff' stroke='%23131C1B' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
@keyframes trTap{0%{opacity:0; transform:translate(30px,26px)} 30%{opacity:1} 60%{transform:none} 70%{transform:scale(.8)} 80%,100%{opacity:1; transform:none}}
.tr-hello{text-align:center; padding:6px 0}
.tr-logo{display:inline-block; animation:trPop .6s both}
.tr-hello-t{font-weight:800; font-size:16px; margin:6px 0 10px; animation:trUp .4s .25s both}
.tr-hello-s{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.tr-hello-s span{background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-line); border-radius:999px; padding:3px 10px; font-weight:600; font-size:12px; animation:trUp .35s both}
.tr-mockbar{display:flex; gap:4px; margin-bottom:12px}
.tr-dot{width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.tr-btnwrap{position:relative; display:flex; justify-content:center; padding:8px 0}
.tr-fakebtn{display:inline-block; border:1px solid var(--line-2); background:var(--surface); border-radius:9px; padding:7px 14px; font-weight:700; animation:trPress .4s 1s both}
@keyframes trPress{0%{transform:none} 50%{transform:scale(.94); background:var(--brand-soft); border-color:var(--brand)} 100%{background:var(--brand-soft); border-color:var(--brand)}}
.tr-after{margin-top:10px; text-align:center; font-weight:600; color:var(--brand-ink); animation:trUp .4s 1.3s both}
.tr-rail{display:flex; flex-wrap:wrap; gap:5px}
.tr-stg{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 9px 4px 5px; font-weight:600; font-size:12px; color:var(--ink-2); animation:trLit .5s both}
.tr-stg i{font-style:normal; width:17px; height:17px; border-radius:50%; background:var(--sunk); display:inline-grid; place-items:center; font-size:10px}
@keyframes trLit{from{opacity:.35} to{opacity:1; color:var(--brand-ink); border-color:var(--brand-line); background:var(--brand-soft)}}
.tr-tree{padding-right:4px}
.tr-unit{font-weight:800; font-size:12.5px; margin-bottom:6px}
.tr-leaf{display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:7px; color:var(--ink-2); animation:trUp .35s both}
.tr-leaf:first-of-type{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.tr-pip{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2)}
.tr-pip.on{background:var(--brand); border-color:var(--brand)}
.tr-pip.half{background:linear-gradient(90deg,var(--brand) 50%,transparent 50%); border-color:var(--brand)}
.tr-field{border:1px solid var(--line-2); background:var(--surface); border-radius:9px; padding:7px 10px; font-family:"IBM Plex Mono",monospace}
.tr-typed{display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:100%; border-right:2px solid var(--brand); animation:trType 1s steps(var(--ch)) .3s both, trCaret .8s step-end infinite}
@keyframes trType{from{width:0} to{width:calc(var(--ch) * 1ch)}}
@keyframes trCaret{50%{border-color:transparent}}
.tr-results{margin-top:6px; border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden}
.tr-res{padding:6px 10px; border-top:1px solid var(--line); animation:trUp .3s both}
.tr-res:first-child{border-top:0; background:var(--brand-soft)}
.tr-kind{font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3); margin-right:7px}
.tr-lvtabs{display:flex; gap:4px; margin-bottom:8px}
.tr-lv{font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:999px; padding:3px 8px; color:var(--ink-3); animation:trLvTab 7.5s infinite}
.tr-lv.l1{animation-delay:2.5s} .tr-lv.l2{animation-delay:5s}
@keyframes trLvTab{0%,30%{background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-line)} 34%,100%{background:none; color:var(--ink-3); border-color:var(--line)}}
.tr-lvtext{position:relative; min-height:76px}
.tr-lvtext p{position:absolute; inset:0; margin:0; line-height:1.5; opacity:0; animation:trLvTxt 7.5s infinite}
.tr-lvtext p.l1{animation-delay:2.5s} .tr-lvtext p.l2{animation-delay:5s}
@keyframes trLvTxt{0%{opacity:0; transform:translateY(4px)} 4%,30%{opacity:1; transform:none} 34%,100%{opacity:0}}
.tr-d mark{background:var(--hl-term,var(--brand-soft)); color:inherit; padding:0 2px; border-radius:3px}
.tr-prose{margin:0; line-height:1.5; animation:trProse 1.5s both}
@keyframes trProse{0%,70%{opacity:1; max-height:80px} 100%{opacity:0; max-height:0}}
.tr-steps{margin:0; padding-left:20px; line-height:1.5}
.tr-steps li{animation:trUp .35s both}
.tr-hl p{margin:0 0 10px; line-height:1.6}
.tr-hl mark{animation:trFade .4s both}
.tr-hl mark.h-term{background:#DFF0EA} .tr-hl mark.h-mech{background:#E6ECFA} .tr-hl mark.h-seq{background:#FBEBD8} .tr-hl mark.h-prec{background:#F6E1EC}
.tr-hlkey{display:flex; flex-wrap:wrap; gap:5px}
.tr-hlkey span{font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; color:#1d2a27; animation:trUp .3s both}
.tr-hlkey .h-term{background:#DFF0EA} .tr-hlkey .h-mech{background:#E6ECFA} .tr-hlkey .h-seq{background:#FBEBD8} .tr-hlkey .h-prec{background:#F6E1EC}
.tr-chathead, .tr-panehead, .tr-listhead{font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.tr-msg{max-width:88%; padding:7px 10px; border-radius:12px; line-height:1.45; margin-bottom:6px; animation:trUp .35s both}
.tr-msg.me{margin-left:auto; background:var(--brand); color:#fff; border-bottom-right-radius:4px; animation-delay:.3s}
.tr-msg.ai{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; animation-delay:1.9s}
.tr-typing{display:inline-flex; gap:3px; padding:7px 10px; border-radius:12px; background:var(--surface); border:1px solid var(--line); animation:trTyping 1.9s both}
.tr-typing i{width:5px; height:5px; border-radius:50%; background:var(--ink-3); animation:trBounce .9s infinite}
.tr-typing i:nth-child(2){animation-delay:.15s} .tr-typing i:nth-child(3){animation-delay:.3s}
@keyframes trTyping{0%,40%{opacity:0; height:auto} 45%,95%{opacity:1} 100%{opacity:0; display:none; position:absolute}}
@keyframes trBounce{0%,60%,100%{transform:none} 30%{transform:translateY(-3px)}}
.tr-chips{display:flex; flex-wrap:wrap; gap:5px}
.tr-chips span{font-size:11.5px; border:1px solid var(--brand-line); color:var(--brand-ink); border-radius:999px; padding:3px 9px; animation:trUp .3s both}
.tr-drawer{display:flex; gap:8px; min-height:150px}
.tr-page{flex:1; display:flex; flex-direction:column; gap:7px; padding-top:6px}
.tr-page span{height:7px; border-radius:4px; background:var(--line)}
.tr-page span.s{width:60%}
.tr-pane{width:66%; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px; box-shadow:-8px 0 20px -12px rgba(0,0,0,.3); animation:trSlide .5s .2s cubic-bezier(.3,.8,.3,1) both}
@keyframes trSlide{from{transform:translateX(110%)} to{transform:none}}
.tr-q{font-weight:600; margin-bottom:7px; line-height:1.4}
.tr-ans{border:1px solid var(--line-2); background:var(--surface); border-radius:8px; padding:6px 8px; font-family:"IBM Plex Mono",monospace; font-size:11.5px}
.tr-ans .tr-typed{animation-duration:1.4s,.8s}
.tr-photo{position:relative; height:46px; border-radius:8px; background:repeating-linear-gradient(var(--surface) 0 13px,var(--line) 13px 14px); border:1px solid var(--line-2); overflow:hidden; display:flex; align-items:center; padding:0 10px}
.tr-hand{font-family:"Source Serif 4",Georgia,serif; font-style:italic; color:var(--blue); animation:trFade .3s .6s both; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr-flash{position:absolute; inset:0; background:#fff; animation:trFlash .6s .3s both}
@keyframes trFlash{0%{opacity:0} 20%{opacity:.95} 100%{opacity:0}}
.tr-markbtn{display:inline-block; margin:8px 0 6px; background:var(--brand); color:#fff; font-weight:700; border-radius:8px; padding:5px 11px; font-size:12px; animation:trPress2 .4s 1.8s both}
@keyframes trPress2{50%{transform:scale(.93)} 100%{transform:none; box-shadow:0 0 0 3px var(--brand-soft)}}
.tr-row{display:flex; gap:7px; align-items:flex-start; padding:4px 7px; border-radius:7px; margin-bottom:3px; line-height:1.35; animation:trUp .3s both}
.tr-row b{flex:none; width:14px}
.tr-row.ok{background:var(--brand-soft)} .tr-row.ok b{color:var(--brand)}
.tr-row.no{background:var(--flag-soft)} .tr-row.no b{color:var(--flag)}
.tr-score{display:inline-block; margin-top:4px; font:700 12px "IBM Plex Mono",monospace; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line); border-radius:6px; padding:2px 8px; animation:trPop .4s both}
.tr-paper{display:flex; flex-direction:column; gap:3px; font-family:"Source Serif 4",Georgia,serif; font-style:italic; color:var(--blue); background:repeating-linear-gradient(var(--surface) 0 19px,var(--line) 19px 20px); border:1px solid var(--line); border-radius:8px; padding:3px 10px 4px; margin-bottom:8px}
.tr-paper span{line-height:17px; animation:trFade .4s both}
.tr-flip{position:relative; height:92px; perspective:700px}
.tr-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--surface); backface-visibility:hidden; font-weight:600; line-height:1.4; animation:trFlipF .6s 1.3s both}
.tr-face small{font-weight:500; font-size:10.5px; color:var(--ink-3)}
.tr-face.b{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink); transform:rotateY(180deg); animation-name:trFlipB}
@keyframes trFlipF{to{transform:rotateY(-180deg)}}
@keyframes trFlipB{to{transform:rotateY(0)}}
.tr-grades{display:flex; gap:5px; justify-content:center; margin-top:9px}
.tr-grades span{font-size:11.5px; font-weight:700; border:1px solid var(--line); border-radius:7px; padding:3px 9px; color:var(--ink-2); animation:trUp .3s 2s both}
.tr-grades span.on{animation:trUp .3s 2s both, trPick .3s 2.7s both}
@keyframes trPick{to{background:var(--brand); color:#fff; border-color:var(--brand)}}
.tr-toast{margin-top:8px; text-align:center; font-size:11.5px; color:var(--brand-ink); font-weight:600; animation:trUp .35s 3s both}
.tr-bar{display:grid; grid-template-columns:96px 1fr 38px; gap:8px; align-items:center; margin-bottom:7px}
.tr-bl{font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr-bt{height:8px; border-radius:5px; background:var(--sunk); overflow:hidden}
.tr-bt i{display:block; height:100%; width:var(--w); background:var(--brand); border-radius:5px; transform-origin:left; animation:trGrow .9s cubic-bezier(.3,.8,.3,1) both}
@keyframes trGrow{from{transform:scaleX(0)} to{transform:none}}
.tr-bar b{font:600 11.5px "IBM Plex Mono",monospace; text-align:right; animation:trFade .3s both}
.tr-li{display:flex; gap:9px; align-items:flex-start; padding:6px 8px; border:1px solid var(--line); background:var(--surface); border-radius:9px; margin-bottom:5px; animation:trUp .35s both}
.tr-li b{display:block; font-weight:600}
.tr-li small{display:block; color:var(--ink-3); font-size:11px}
.tr-ic{flex:none; width:22px; height:22px; border-radius:6px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:11.5px; font-weight:800}
.tr-menu{position:relative; padding-bottom:4px}
.tr-menubtn{display:inline-block; font-weight:700; border:1px solid var(--line-2); border-radius:8px; padding:5px 10px; background:var(--surface)}
.tr-menulist{margin-top:5px; width:72%; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; animation:trUp .3s .5s both}
.tr-menulist div{padding:6px 10px; border-top:1px solid var(--line); animation:trFade .3s both}
.tr-menulist div:first-child{border-top:0}
.tr-menulist div.pick{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
.tr-segrow{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px}
.tr-segrow span{font-size:11.5px; font-weight:700; border:1px solid var(--line); border-radius:8px; padding:4px 9px; color:var(--ink-2); animation:trLit .4s both}
.tr-segbody p{margin:0 0 5px; padding:6px 9px; border-radius:8px; background:var(--surface); border:1px solid var(--line); animation:trUp .35s both}
.tr-done{text-align:center}
.tr-burst{position:relative; width:76px; height:76px; margin:0 auto 4px}
.tr-tick{position:absolute; inset:10px; border-radius:50%; background:var(--brand); color:#fff; font-size:30px; font-weight:800; display:grid; place-items:center; animation:trPop .6s both}
.tr-burst i{position:absolute; left:50%; top:50%; width:6px; height:14px; margin:-7px 0 0 -3px; border-radius:3px; background:var(--gold); transform:rotate(var(--a)) translateY(-30px); opacity:0; animation:trBurst .8s .3s both}
.tr-burst i:nth-child(even){background:var(--brand)}
@keyframes trBurst{0%{opacity:0; transform:rotate(var(--a)) translateY(-14px)} 40%{opacity:1} 100%{opacity:0; transform:rotate(var(--a)) translateY(-46px)}}

/* phone: the card is a sheet along the bottom (or the top, when the feature is low) */
#tourHost.tr-phone .tr-cardw{left:8px !important; right:8px; top:auto !important; bottom:8px; width:auto; max-width:none}
#tourHost.tr-phone.tr-cardtop .tr-cardw{top:8px !important; bottom:auto}
#tourHost.tr-phone.tr-centre .tr-cardw{top:50% !important; bottom:auto; transform:translateY(-50%)}
#tourHost.tr-phone .tr-card{max-height:64vh; padding:12px 14px 0}
#tourHost.tr-phone .tr-foot{position:sticky; bottom:0; background:var(--surface); padding:10px 0 12px; margin-top:8px; z-index:1}
#tourHost.tr-phone .tr-end .tr-foot{position:static}
#tourHost.tr-phone .tr-top{flex-wrap:nowrap}
#tourHost.tr-phone .tr-tocbtn, #tourHost.tr-phone .tr-x{white-space:nowrap; padding:4px 8px; font-size:12px}
#tourHost.tr-phone .tr-title{font-size:17px; margin-bottom:8px}
#tourHost.tr-phone .tr-pts{gap:5px; margin-top:10px}
#tourHost.tr-phone .tr-pts li{font-size:13px}
#tourHost.tr-phone .tr-demo{min-height:0}
#tourHost.tr-phone .tr-pts li{grid-template-columns:1fr; gap:1px}
#tourHost.tr-phone .tr-toc{right:12px; width:auto; bottom:auto; max-height:70vh; display:none}
#tourHost.tr-phone.tr-tocopen .tr-toc{display:block}
#tourHost.tr-phone .tr-tocbtn{display:inline-block}
@media (max-width:1180px){
  #tourHost.tr-replay:not(.tr-phone) .tr-toc{display:none}
  #tourHost.tr-replay.tr-tocopen:not(.tr-phone) .tr-toc{display:block}
  #tourHost.tr-replay:not(.tr-phone) .tr-tocbtn{display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  #tourHost *, #tourHost *::before, #tourHost *::after{animation-duration:.01s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition:none !important}
  #tourHost .tr-lvtext p.l0{opacity:1}
}
/* the dark theme only needs the highlight swatches; everything else is tokens */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tr-hl mark.h-term, :root:not([data-theme="light"]) .tr-hlkey .h-term{background:#16493B; color:#E6F4EF}
  :root:not([data-theme="light"]) .tr-hl mark.h-mech, :root:not([data-theme="light"]) .tr-hlkey .h-mech{background:#1E2D4D; color:#E1E9FA}
  :root:not([data-theme="light"]) .tr-hl mark.h-seq, :root:not([data-theme="light"]) .tr-hlkey .h-seq{background:#4A3418; color:#FBEBD8}
  :root:not([data-theme="light"]) .tr-hl mark.h-prec, :root:not([data-theme="light"]) .tr-hlkey .h-prec{background:#4A2238; color:#F6E1EC}
}
:root[data-theme="dark"] .tr-hl mark.h-term, :root[data-theme="dark"] .tr-hlkey .h-term{background:#16493B; color:#E6F4EF}
:root[data-theme="dark"] .tr-hl mark.h-mech, :root[data-theme="dark"] .tr-hlkey .h-mech{background:#1E2D4D; color:#E1E9FA}
:root[data-theme="dark"] .tr-hl mark.h-seq, :root[data-theme="dark"] .tr-hlkey .h-seq{background:#4A3418; color:#FBEBD8}
:root[data-theme="dark"] .tr-hl mark.h-prec, :root[data-theme="dark"] .tr-hlkey .h-prec{background:#4A2238; color:#F6E1EC}
.tr-rows, .tr-check{margin-top:2px}
/* while the tour runs the tutor drawer sits under the dimmed layer, not over it */
body.touring .chatcol{z-index:150}

/* app tour: the label pinned to the lit feature, and a stronger ring */
#tourHost .tr-spot{box-shadow:0 0 0 3px var(--brand), 0 0 0 7px rgba(255,255,255,.55), 0 0 28px 6px rgba(255,255,255,.35)}
#tourHost .tr-tag{position:absolute; z-index:3; pointer-events:none; background:var(--brand); color:#fff; font-weight:700; font-size:13px; line-height:1.2;
  padding:7px 12px; border-radius:10px; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis;
  transition:left .35s cubic-bezier(.3,.8,.3,1), top .35s cubic-bezier(.3,.8,.3,1); animation:trNudge 1.4s ease-in-out infinite}
#tourHost .tr-tag[hidden]{display:none}
#tourHost .tr-tag::before{content:"\1F446\00a0"}
#tourHost .tr-tag.up::before{content:"\1F447\00a0"}
#tourHost .tr-tag::after{content:""; position:absolute; left:var(--ax,50%); top:-6px; margin-left:-6px; border:6px solid transparent; border-top:0; border-bottom-color:var(--brand)}
#tourHost .tr-tag.up::after{top:auto; bottom:-6px; border-bottom:0; border-top:6px solid var(--brand)}
#tourHost .tr-tagt{display:inline}
@keyframes trNudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}}
#tourHost .tr-tag.up{animation-name:trNudgeUp}
@keyframes trNudgeUp{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}

/* app tour: the offer to an account that existed before the tour */
#tourOffer{position:fixed; inset:0; z-index:200; display:grid; place-items:center; grid-template-columns:minmax(0,1fr); overflow-y:auto; padding:16px; background:rgba(9,20,17,.55); font-size:14px}
#tourOffer .tr-offer{width:min(420px,100%); max-width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:22px 24px 18px; text-align:center;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45); animation:trIn .35s cubic-bezier(.3,.8,.3,1) both}
#tourOffer .tr-title{font-size:21px; font-weight:800; margin:6px 0 8px}
#tourOffer .tr-lede{color:var(--ink-2); margin:0 0 16px; font-size:14.5px; line-height:1.5}
#tourOffer .tr-foot{display:flex; gap:8px; justify-content:center}
#tourOffer .tr-go, #tourOffer .tr-back{font-family:inherit; font-size:14px; font-weight:700; border-radius:10px; padding:10px 18px; cursor:pointer; border:1px solid transparent}
#tourOffer .tr-go{background:var(--brand); color:#fff}
#tourOffer .tr-back{background:transparent; color:var(--ink-2); border-color:var(--line)}
#tourOffer .tr-fine{color:var(--ink-3); font-size:12.5px; margin:12px 0 0}
@media (prefers-reduced-motion:reduce){ #tourOffer *, #tourHost .tr-tag{animation:none !important} }

/* app tour contents: a "How do I…?" search, then every step in toggle lists */
#tourHost .tr-toch{display:flex; justify-content:space-between; align-items:baseline}
#tourHost .tr-toch span{font-weight:600; letter-spacing:0; text-transform:none; font-size:11px}
#tourHost .tr-find{display:flex; align-items:center; gap:6px; margin:0 4px 8px; border:1px solid var(--line-2); background:var(--surface-2); border-radius:10px; padding:0 9px}
#tourHost .tr-find:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
#tourHost .tr-findic{color:var(--ink-3); font-size:15px}
#tourHost .tr-q{flex:1; min-width:0; border:0; background:none; outline:none; font:500 13.5px/1 inherit; font-family:inherit; color:var(--ink); padding:9px 0}
#tourHost .tr-hits{display:grid; gap:6px; padding:0 4px}
#tourHost .tr-hits[hidden], #tourHost .tr-groups[hidden]{display:none}
#tourHost .tr-hit{display:block; width:100%; text-align:left; font-family:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 10px; cursor:pointer; animation:trUp .25s both}
#tourHost .tr-hit:hover, #tourHost .tr-hit:focus-visible{border-color:var(--brand); background:var(--brand-soft); outline:none}
#tourHost .tr-hit.best{border-color:var(--brand-line)}
#tourHost .tr-hit b{display:block; font-size:13.5px; margin:2px 0}
#tourHost .tr-hit small{display:block; font-size:12px; color:var(--ink-2); line-height:1.4}
#tourHost .tr-hs{display:inline-flex; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.3px; color:var(--brand-ink)}
#tourHost .tr-none{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:6px 6px}
#tourHost .tr-grp{border-radius:9px}
#tourHost .tr-grp summary{display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:8px; border-radius:8px; font-weight:700; font-size:13px; color:var(--ink-2)}
#tourHost .tr-grp summary::-webkit-details-marker{display:none}
#tourHost .tr-grp summary::after{content:"▸"; margin-left:4px; font-size:10px; color:var(--ink-3); transition:transform .2s}
#tourHost .tr-grp[open] summary::after{transform:rotate(90deg)}
#tourHost .tr-grp summary:hover{background:var(--sunk); color:var(--ink)}
#tourHost .tr-grp.here summary{color:var(--brand-ink)}
#tourHost .tr-gn{flex:1; min-width:0}
#tourHost .tr-gc{font:600 10.5px "IBM Plex Mono",monospace; color:var(--ink-3); background:var(--sunk); border-radius:999px; padding:1px 7px}
#tourHost .tr-gi{width:18px; text-align:center}
#tourHost .tr-gl{list-style:none; margin:0 0 6px; padding:0 0 0 14px; border-left:1px solid var(--line); margin-left:17px}
#tourHost .tr-tocs{display:flex; gap:7px; align-items:baseline; width:100%; text-align:left; font:500 12.5px/1.35 inherit; font-family:inherit; color:var(--ink-2); background:none; border:0; border-radius:7px; padding:5px 7px; cursor:pointer}
#tourHost .tr-tocs:hover{background:var(--sunk); color:var(--ink)}
#tourHost .tr-tocs.on{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
#tourHost .tr-tocs:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
#tourHost .tr-n{flex:none; min-width:18px; font:600 10.5px "IBM Plex Mono",monospace; color:var(--ink-3)}
#tourHost .tr-tocs.on .tr-n{color:var(--brand-ink)}
#tourHost.tr-tocright:not(.tr-phone) .tr-toc{left:auto; right:12px}
#tourHost.tr-tochide:not(.tr-phone) .tr-toc{display:none}
#tourHost.tr-tochide.tr-tocopen:not(.tr-phone) .tr-toc{display:block}
#tourHost.tr-tochide .tr-tocbtn{display:inline-block}

/* ================= Say it — speech to text (dictate() in app.js) =================
   One control everywhere a student writes: under an answer box, in the past-paper
   answer, in the chemistry answer box. Red while it is listening. */
.dict-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:6px 0 2px}
.dict{display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--ui); padding:6px 11px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer}
.dict:hover{border-color:var(--ink-2); color:var(--ink)}
.dict.on,.chem2 .atb.dict.on,.btn.dict.on{background:var(--flag); border-color:var(--flag); color:var(--surface)}
.dict.on svg{animation:micpulse 1.1s ease-in-out infinite}
.dict-l{white-space:nowrap}
.dict-s{font-size:12px; color:var(--ink-2); flex:1 1 180px; min-width:0}
.dict-s[data-kind="err"]{color:var(--flag); font-weight:600}
.mic-t[data-kind="err"]{color:var(--flag)}

/* app tour on a phone: the Contents is a full-screen sheet ON TOP of the card, not a
   panel tucked behind it — with its search pinned at the top and its own way back.
   The card is hidden while it is open, so nothing covers the steps. */
#tourHost .tr-tocx{display:none}
#tourHost.tr-phone .tr-tocx, #tourHost.tr-tocopen .tr-tocx{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:600 12.5px/1 inherit; font-family:inherit; text-transform:none; letter-spacing:0; padding:8px 11px; border-radius:9px; cursor:pointer; white-space:nowrap}
#tourHost.tr-phone.tr-tocopen .tr-toc{display:flex; flex-direction:column; left:8px; right:8px; top:8px; bottom:8px; max-height:none; height:auto; width:auto; z-index:5; padding:0 8px 12px; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
@supports (height:100dvh){ #tourHost.tr-phone.tr-tocopen .tr-toc{top:max(8px, env(safe-area-inset-top)); bottom:max(8px, env(safe-area-inset-bottom))} }
#tourHost.tr-phone.tr-tocopen .tr-toch{position:sticky; top:0; z-index:2; background:var(--surface); padding:12px 4px 8px; margin:0 -4px; align-items:center; gap:8px}
#tourHost.tr-phone.tr-tocopen .tr-find{position:sticky; top:52px; z-index:2; background:var(--surface-2); box-shadow:0 8px 10px -8px var(--surface)}
#tourHost.tr-phone.tr-tocopen .tr-q{font-size:16px}   /* 16px stops iOS zooming the page when the box is tapped */
#tourHost.tr-phone.tr-tocopen .tr-cardw, #tourHost.tr-phone.tr-tocopen .tr-spot, #tourHost.tr-phone.tr-tocopen .tr-tag{visibility:hidden}
#tourHost.tr-phone .tr-tocs{padding:9px 7px; font-size:14px}
#tourHost.tr-phone .tr-grp summary{padding:11px 8px; font-size:14px}
#tourHost.tr-phone .tr-hit{padding:11px 12px}
/* the card's top row: the section pill gives way, the count never wraps */
#tourHost.tr-phone .tr-sec{flex:1 1 auto; min-width:0}
#tourHost .tr-count{white-space:nowrap; flex:none}

/* ================= the Specification sheet on a phone (sheetOpen() in app.js) =================
   Over the whole screen, never at the top of a page the student has scrolled away from:
   a header with the search and Close, the list under it, the page held still behind. */
#sideHead{display:none}
@media (max-width:900px){
  body.sidesheet{overflow:hidden}
  body.sidesheet #sideHead{display:block; position:fixed; left:0; right:0; top:0; z-index:131; background:var(--surface);
    border-bottom:1px solid var(--line); padding:max(10px, env(safe-area-inset-top)) 14px 10px; box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
  #sideHead .side-hrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
  #sideHead .side-hrow b{font-size:15px; font-weight:800; color:var(--ink)}
  #sideHead .side-x{font:600 13px/1 var(--ui); color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 12px; cursor:pointer}
  body.sidesheet #sideHead .search{display:flex; max-width:none; width:100%; margin-top:10px; padding:9px 11px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2)}
  body.sidesheet #sideHead .search input{font-size:16px}   /* 16px: iOS does not zoom the page when it is tapped */
  body.sidesheet #sideHead .searchpanel{position:fixed; left:8px; right:8px; top:calc(var(--sheet-h,112px) + 6px); bottom:8px; max-height:none; min-width:0; z-index:132; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  body.sidesheet .sidebar{display:block; position:fixed; left:0; right:0; top:var(--sheet-h,112px); bottom:0; height:calc(100vh - var(--sheet-h,112px)); height:calc(100dvh - var(--sheet-h,112px)); max-height:none; z-index:130;
    overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border:0; background:var(--surface); padding:8px 12px max(40px, env(safe-area-inset-bottom)); transition:none}
  body.sidesheet .unit-btn{padding:11px 9px; font-size:14px}
}

/* ================= flashcards: the session progress bar and the new-card order ================= */
.sprog{max-width:640px; margin:0 auto 14px}
.sprog[hidden]{display:none}
.sprog-bar{height:8px; border-radius:99px; background:var(--sunk); overflow:hidden; border:1px solid var(--line)}
.sprog-bar i{display:block; height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .35s cubic-bezier(.3,.8,.3,1)}
.sprog-t{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--ink-2)}
.sprog-k b{font:700 12px "IBM Plex Mono",ui-monospace,monospace; margin-left:8px}
.sprog-k b:first-child{margin-left:0}
.sprog-k .k-new{color:var(--blue)} .sprog-k .k-lrn{color:var(--flag)} .sprog-k .k-rev{color:var(--brand)}
.neworder{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:0 auto 14px; font-size:12px}
.neworder .no-k{font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px; font-size:10.5px; margin-right:2px}
.neworder button{font:600 12px/1 var(--ui); padding:6px 11px; border-radius:99px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer}
.neworder button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.neworder.arena-no{justify-content:flex-start; margin:10px 0 0}

/* ================= the review calendar (heatHTML() in app.js) =================
   Anki's review heatmap: a square a day, Monday at the top. Green behind today for what
   was reviewed, blue ahead of it for what falls due; today outlined. On a phone the year
   scrolls sideways inside its own box and opens on today. */
.heat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px 12px; margin:14px 0}
.heat-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.heat-h h3{margin:0; font-size:15px}
.heat-seg button{font-size:12px; padding:5px 10px}
.heat-y[hidden], .heat-m[hidden]{display:none}
.hm-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px}
.hm{display:inline-block; min-width:max-content}
.hm-m{display:grid; grid-template-columns:repeat(53,14px); margin-left:30px; font-size:10.5px; color:var(--ink-3); height:15px}
.hm-m span{white-space:nowrap}
.hm-g{display:flex; gap:3px}
.hm-dw{display:grid; grid-template-rows:repeat(7,11px); gap:3px; width:27px; font-size:9.5px; color:var(--ink-3); line-height:11px}
.hm-w{display:grid; grid-template-rows:repeat(7,11px); gap:3px}
.hm-d{display:block; width:11px; height:11px; border-radius:2.5px; padding:0; border:0; background:var(--sunk); cursor:pointer}
.hm-key .hm-d{cursor:default}
.hm-d.p1{background:color-mix(in srgb, var(--brand) 28%, var(--sunk))}
.hm-d.p2{background:color-mix(in srgb, var(--brand) 52%, var(--sunk))}
.hm-d.p3{background:color-mix(in srgb, var(--brand) 76%, var(--sunk))}
.hm-d.p4{background:var(--brand)}
.hm-d.f1{background:color-mix(in srgb, var(--blue) 24%, var(--sunk))}
.hm-d.f2{background:color-mix(in srgb, var(--blue) 46%, var(--sunk))}
.hm-d.f3{background:color-mix(in srgb, var(--blue) 70%, var(--sunk))}
.hm-d.f4{background:var(--blue)}
.hm-d.today{outline:2px solid var(--ink); outline-offset:1px}
.hm-d.sel, .fc-b.sel i{box-shadow:0 0 0 2px var(--gold)}
.hm-d:focus-visible, .fc-b:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.hm-key{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:8px; font-size:11px; color:var(--ink-3)}
.hm-key span{margin-right:3px}
.fc-bars{display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); gap:3px; align-items:end; height:120px; padding-bottom:18px; position:relative}
.fc-b{position:relative; height:100%; display:flex; align-items:flex-end; padding:0; border:0; background:none; cursor:pointer; min-width:0}
.fc-b i{display:block; width:100%; background:var(--blue); border-radius:3px 3px 0 0; min-height:0}
.fc-b:first-child i{background:var(--brand)}
.fc-b span{position:absolute; top:100%; left:0; margin-top:3px; font-size:10px; color:var(--ink-3); white-space:nowrap}
.heat-say{margin:8px 0 6px; font-size:12.5px; color:var(--ink-2); min-height:1.3em}
.heat-stats{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:9px}
.heat-stats b{font:700 13px "IBM Plex Mono",ui-monospace,monospace; color:var(--ink)}
@media (max-width:560px){ .heat{padding:12px 12px 10px} .heat-stats{gap:5px 12px} }

/* ================= own decks: what is still missing (ownGaps() in app.js) ================= */
.gapnote{background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:var(--r); padding:11px 14px; margin:12px auto; max-width:760px; font-size:13.5px; color:var(--ink)}
.gapnote.in{max-width:none; margin:10px 0 4px}
.gapnote p{margin:0 0 6px}
.gaplist{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.gaplist li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; color:var(--ink-2); border-top:1px dashed var(--gold-line); padding-top:4px}
.gaplist li:first-child{border-top:0; padding-top:0}
.gaplist li span{min-width:0}
.gaplist li b{color:var(--ink); font:700 12px "IBM Plex Mono",ui-monospace,monospace; margin-right:4px}
.gaplist li.more{color:var(--ink-3); font-style:italic}
.gaplist .linkbtn{flex:none}
.gappill{display:inline-block; font:700 10.5px "IBM Plex Mono",ui-monospace,monospace; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:99px; padding:1px 7px; margin-left:4px; vertical-align:middle}
.mc-left{display:block; margin-top:5px; color:var(--gold)}
.mc-left.ok{color:var(--brand)}
.mc-left .linkbtn{margin-right:4px}
.mc-add.pulse{animation:mcPulse 1.2s ease-in-out 3}
@keyframes mcPulse{0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 0 4px var(--gold-line)}}

/* "Mark scheme specific notes" — Preview and Download, under the flashcard box on every biology page (app/notes.js) */
.dln{ margin:10px 0 4px; max-width:880px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; border:1.5px solid var(--brand-line); border-radius:12px; background:var(--brand-soft) }
.dln-ic{ flex:none; width:38px; height:44px; border-radius:6px; background:var(--surface); border:1px solid var(--line-2); display:grid; place-items:center; font-size:10px; font-weight:800; letter-spacing:.04em; color:var(--brand) }
.dln-t{ flex:1 1 260px; min-width:0 }
.dln-t b{ display:block; font-size:14.5px; color:var(--ink) }
.dln-t span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px }
.dln-btns{ display:inline-flex; gap:8px; flex-wrap:wrap }
.dln .btn.dln-pv,.dln .btn.dln-go{ font-size:13.5px; padding:10px 15px; border-radius:8px; font-weight:750; display:inline-flex; gap:7px; align-items:center; justify-content:center; white-space:nowrap; text-decoration:none }
.dln .btn.dln-pv{ background:var(--surface) }
.btn.dln-go{ background:var(--brand); border-color:var(--brand); color:var(--surface); text-decoration:none; display:inline-flex; gap:6px; align-items:center }
.btn.dln-go:hover{ background:var(--brand-ink); border-color:var(--brand-ink); color:var(--surface) }
.dln-modal{ position:fixed; inset:0; z-index:9000; background:rgba(10,14,12,.55); display:grid; place-items:center; padding:16px }
.dln-sheet{ width:min(920px,100%); height:min(92vh,1200px); background:var(--surface); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.35) }
.dln-bar{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line) }
.dln-bar b{ flex:1; min-width:0; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dln-pages{ flex:1; overflow:auto; background:var(--sunk); padding:16px; display:flex; flex-direction:column; align-items:center; gap:14px }
.dln-page{ width:100%; max-width:820px; height:auto; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18); border-radius:2px }
.dln-wait{ margin:40px 0; font-size:14px; color:var(--ink-2) }
@media (max-width:600px){
  .dln-btns{ width:100% } .dln-btns > *{ flex:1 }
  .dln-modal{ padding:0 } .dln-sheet{ height:100%; border-radius:0 } .dln-pages{ padding:10px }
}
.gapfold{padding:8px 14px}
.gapfold summary{cursor:pointer; list-style:none}
.gapfold summary::-webkit-details-marker{display:none}
.gapfold summary::after{content:" \25B8"; color:var(--gold)}
.gapfold[open] summary{margin-bottom:6px}
.gapfold[open] summary::after{content:" \25BE"}

/* ================= Mark them all (ppBatchMount() in app.js) =================
   One panel at the top of every past-paper stage: tick, photograph, press once. */
.ppbatch{border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:var(--r); margin:12px 0 16px}
.ppbatch>summary{cursor:pointer; list-style:none; padding:12px 16px; font-size:14px; color:var(--ink)}
.ppbatch>summary::-webkit-details-marker{display:none}
.ppbatch>summary b{color:var(--brand-ink); margin-right:4px}
.ppbatch>summary::after{content:" \25B8"; color:var(--brand)}
.ppbatch[open]>summary::after{content:" \25BE"}
.ppb-body{padding:0 16px 14px; background:var(--surface); border-top:1px solid var(--brand-line); border-radius:0 0 var(--r) var(--r)}
.ppb-step{display:flex; gap:9px; align-items:baseline; margin:14px 0 8px; font-size:14px; color:var(--ink)}
.ppb-step>.ppb-n{flex:none; display:inline-grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--brand); color:#fff; font:700 11.5px var(--ui)}
.ppb-step i{font-style:normal; color:var(--ink-3); font-size:12.5px}
.ppb-tools{display:flex; gap:14px; margin:0 0 6px 30px; font-size:12.5px}
.ppb-list{list-style:none; margin:0 0 4px 30px; padding:0; display:grid; gap:2px; max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:9px; background:var(--surface-2)}
.ppb-list li{border-top:1px solid var(--line)}
.ppb-list li:first-child{border-top:0}
.ppb-list li.hint{padding:9px 11px}
.ppb-list label{display:flex; align-items:baseline; gap:8px; padding:8px 11px; font-size:13px; cursor:pointer}
.ppb-list label span{flex:1; min-width:0}
.ppb-list label em{font-style:normal; color:var(--ink-3); font-size:12px; white-space:nowrap}
.ppb-drop{margin-left:30px}
.ppbatch .thumbs{margin-left:30px}
.ppb-go{margin:12px 0 0 30px; align-items:center}
.ppb-res{margin-top:14px}
.ppb-total{display:flex; align-items:baseline; gap:10px; margin:0 0 8px; font-size:15px}
.ppb-total b{font:700 20px "IBM Plex Mono",ui-monospace,monospace}
.ppb-tab td:last-child{text-align:right}
@media (max-width:560px){
  .ppb-tools, .ppb-list, .ppb-drop, .ppbatch .thumbs, .ppb-go{margin-left:0}
  .ppbatch>summary{padding:11px 12px; font-size:13.5px}
  .ppb-body{padding:0 12px 12px}
}
.ppb-res .demo-tag{display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:8px; opacity:.8}

/* ==========================================================================
   Phone and desktop layout audit (8 Oct 2026)
   Each rule here closes a defect found by measuring the rendered page at 390px
   (iPhone) and 1440px (desktop) — not a restyle. In-place fixes elsewhere in this
   file are commented where they were made.
   ========================================================================== */

/* the hidden attribute must win. A component class that sets display (.seg, .qmw,
   an img in a drop zone) otherwise overrides it, and the student sees the
   page-wide L1/L2/L3 bar, a "What these measure" chip under a closed Mastery, and
   a broken "Your blurt" image in every empty photo box. */
[hidden]{ display:none !important }

/* the phone topbar fits on ONE row. It is sticky, and wrapped onto three rows it
   was 138px tall, a sixth of an iPhone screen gone on every page and every scroll.
   The words go and the things stay: the AI meter keeps "AI", the bar and its
   percentage, the flashcard pill keeps its icon and the number due, the tutor
   button says "Tutor". Every one keeps its title and aria text. The wordmark
   goes first, because the home button beside it already does its job. The same
   holds wider than a phone: the full bar only fits one row from about 1415px, so
   a phone on its side, an iPad and the common 1280/1366px laptop all got a bar two
   rows (95px) deep, and the tutor drawer opened over its second row. Under 1440px
   the streak line goes (the Flashcard Arena calendar shows it too), under 1280px the pills go
   compact, and under 761px the wordmark goes. */
@media (max-width:1439px){ .top-right .streak{ display:none } }
@media (max-width:1279px){
  .top-right{ flex-wrap:nowrap; gap:6px; min-width:0 }
  .credit-pill{ padding:5px 9px; gap:5px }
  .credit-pill>span:first-child{ font-size:0 }
  .credit-pill>span:first-child::after{ content:"AI"; font-size:12px }
  .credit-pill .credmini{ width:26px }
  .arena-pill{ padding:5px 8px; gap:5px }
  .arena-pill>span{ display:none }
  .chat-pill{ font-size:0; gap:0; padding:6px 10px }
  .chat-pill svg{ flex:none }
  .chat-pill::after{ content:"Tutor"; font-size:12px; margin-left:6px }
}
@media (max-width:760px){
  .topbar{ flex-wrap:nowrap; gap:8px; padding:8px 12px }
  .topbar .brand{ display:none }
}
/* and on a computer the search box gives way before the row does: a board with a
   longer name ("AQA Chemistry 7405") still wrapped the bar at 1440px. */
@media (min-width:761px){
  .topbar{ flex-wrap:nowrap }
  .topbar .search{ flex:1 1 200px; min-width:120px }
  .topbar .top-right,.topbar .brand,.topbar .picker,.topbar .sidetoggle,.topbar .homebtn{ flex:none }
}
@media (min-width:761px) and (max-width:1099px){
  .topbar .search{ min-width:100px }
  .sidetoggle .st-t{ display:none }
  .sidetoggle{ padding:6px 9px }
}

/* Mastery runs the full width once it stacks under the title. The quiet-layer rule
   above (flex:0 1 270px) came later in the file than the 900px one and won, so on
   a phone the box and its rule stopped two thirds of the way across. */
@media (max-width:900px){ .title-row .mastery{ flex:1 1 100%; margin-left:0; min-width:0 } }


/* the stage strip on a phone: five or six stages do not fit in 358px, and a hard
   cut at "5 Exa" with a grey scrollbar under it read as a broken row. The strip
   still scrolls; it now fades at the edge it scrolls toward, so it reads as more
   to the right, and the scrollbar is hidden as iOS hides it. */
@media (max-width:560px){
  .path{ scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); padding-right:22px }
  .path::-webkit-scrollbar{ display:none }
  .step{ margin-right:16px; white-space:nowrap }
}

/* typing on an iPhone. Safari zooms the whole page into any field whose text is
   under 16px and does not zoom back out, so every answer box, blurt box, mark-
   scheme box and search field left the student pinching the page back after each
   tap. 16px on touch screens only; the desktop sizes are untouched. */
@media (hover:none) and (pointer:coarse), (max-width:560px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea, select{ font-size:16px !important }
}

/* fingertips. The ? chips are 17px and the text buttons 19–20px tall, under half
   a fingertip. The hit area grows by an invisible margin round each one, so
   nothing on the page moves. */
@media (hover:none) and (pointer:coarse), (max-width:560px){
  button.qm,.linkbtn,.simplify,.arena-add,.ppb-tools button,#landingView .foot-links button{ position:relative }
  button.qm::before,.linkbtn::before,.simplify::before,.arena-add::before,
  #landingView .foot-links button::before{ content:""; position:absolute; inset:-10px -6px }
  button.qm::before{ inset:-11px }
}

/* sticky on a phone. overflow-x:hidden on html and body (the 520px rules) makes
   body a scroll container, and a sticky element sticks to its scroll container —
   so on a phone the chemistry stage rail, which is meant to stay in reach while a
   student works down a long stage, scrolled away with the page. clip stops the
   sideways scroll without making a container (a browser too old for clip keeps
   the hidden). The app topbar stays unpinned on a phone, as section 18 decided;
   the rail takes the top of the screen instead of sitting 50px under a bar that
   is no longer there. */
@media (max-width:520px){
  html,body{ overflow-x:hidden; overflow-x:clip }
  .topbar{ position:relative }
  .chem2 .c2rail{ top:env(safe-area-inset-top,0px) }
}

/* a checklist line is a flex row (box · sentence · tag), and the sentence must be
   ONE flex item. Unwrapped, every <mark>, <sub> and <i> inside it became a column
   of its own, so "I can write electrophilic addition — both words — for HBr, Br₂
   and concentrated H₂SO₄" stood in six narrow columns and ran 300px off a phone.
   app.js now wraps the sentence in .ck-t (the blurt points already had a span). */
.checkline>.ck-t,.checkline>span:not(.kind){ flex:1 1 auto; min-width:0 }

/* the chemistry stage rail under 920px is one row, not two. It pins to the top of
   the screen, and with the two arena links on a row of their own it was 94px deep
   on a phone. Stages and arenas now share one strip that scrolls sideways and
   fades at the edge, the same as the biology stage strip. */
@media (max-width:920px){
  .chem2 .c2rail{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent) }
  .chem2 .c2rail::-webkit-scrollbar{ display:none }
  .chem2 .c2rail .stages{ flex:none; overflow:visible; padding-bottom:0 }
  .chem2 .c2rail .stages.arenas{ margin-top:0; padding-right:26px }
  /* each stage is a box here, but section 15's desktop rule (a left bar, no right
     padding) comes later than the 920px rule that drew the boxes, so on a phone the
     label ran into the right-hand border and the current stage grew a thick left bar */
  .chem2 .stg{ padding:8px 18px; gap:8px; align-items:center; justify-content:center; text-align:center;
    line-height:1.2; border:1px solid var(--line); border-radius:8px }
  .chem2 .stg:hover{ border-color:var(--line-2) }
  .chem2 .stg[aria-current="true"]{ border-color:var(--brand); color:var(--ink) }
  .chem2 .stg .n{ margin-top:0 }
}

/* the Foundation step bar: each dot inherited flex:none from the site's small
   status dot, so six 56px dots and the "Step 1 of 6" count would not fit a phone
   and the last dot was cut off at the box edge. They now share the room. */
.chem2 .dots{ min-width:0 }
.chem2 .dot{ flex:1 1 0; min-width:6px }

/* a segmented switch that wraps on a phone. The divider was each button's right
   border, so a wrapped row left "AI marker" alone on a second line under a stray
   border, with an empty box beside it. On a phone the dividers are drawn by the
   gap instead — 1px of the line colour between buttons, in rows and in columns —
   and each row's buttons stretch to fill it, so a switch that wraps still reads
   as one grid. Unwrapped, nothing changes. */
@media (max-width:560px){
  .seg{ gap:1px; background:var(--line-2); overflow:hidden }
  .seg button{ flex:1 1 auto; border-right:0; background:var(--surface) }
  .seg button[aria-pressed="true"]{ background:var(--surface) }
}

/* a table wider than a phone scrolls sideways, and nothing said so: the Past
   Paper Arena's table stopped at "ATTEMI", with Attempted and Progress — the two
   columns about the student — out of sight. A soft shadow now sits on whichever
   edge has more table behind it, and goes when there is none (the covers scroll
   with the content, the shadows do not), so a table that fits looks exactly as
   before. */
.dwrap,.tscroll,.chem2 .tscroll,.chem2 .tw,.ca-tbl{
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 34px 100%,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 34px 100%,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 12px 100%,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 12px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll;
}

/* a drop-down is as wide as its longest option unless told otherwise. The essay
   and extended-response pickers list 25-mark titles, so on a phone they were up
   to 640px wide and ran off the screen with the title cut in half. */
.arena-tools select,.arena-tools .ti{ max-width:100%; min-width:0 }

/* the synoptic question's figure. .ppfig was only sized inside a chemistry page,
   so on a biology board the Synoptic Arena showed its figure at the scan's own
   width — 1,489px on a 390px phone. */
.ppfig img{ display:block; max-width:100%; height:auto }

/* the typed question's data tables outside a chemistry page. The Synoptic Arena
   reuses the same question markup, and there table.dat had no width rule at all,
   so a table of results ran up to 54px off a phone. Same treatment as on the page:
   it scrolls inside its own box. */
.synq table.dat,.synq table.data,.qtext table.dat,.qtext table.data{ display:block; overflow-x:auto; max-width:100% }

/* the tutor on a phone. The drawer is fixed under the topbar, but on a phone the
   topbar scrolls away with the page, so a student who opened the tutor halfway
   down a page saw a strip of the page above it. While the tutor is open the bar
   pins (body clips rather than hides now, so sticky works), and the drawer starts
   exactly where the one-row bar ends. */
@media (max-width:760px){ #aiDrawer.bt{ top:51px } }
@media (max-width:520px){ body.tutor-open .topbar{ position:sticky; top:0 } }

/* a chemistry callout is a block of prose. The biology trap box (.trap) is a flex
   row of icon + text, and its rule also caught chemistry's .cal.trap, so every
   <b>, <i>, <sup> and <code> in "The wrong answers it is built to catch" stood in
   a column of its own and the callout ran 260px off a phone. */
.chem2 .cal,.cal.trap{ display:block }

/* the tutor on a phone covers the screen, and two things sat badly in it: the
   Report a problem flag floated over the left end of the message row, and the
   placeholder, at the 16px a phone needs, wrapped and showed half a second line
   in a one-line box. The flag steps aside while the tutor is open (it is back the
   moment it closes), and the placeholder ends in an ellipsis instead. */
@media (max-width:760px){ body.tutor-open .reportfab{ display:none } }
.bt-in::placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* the four figures under the landing hero wrapped three and one on a phone,
   leaving "20,415 questions from past papers" alone on a second row. Two by two. */
@media (max-width:560px){
  #landingView .hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px }
}
/* app tour: the introduction that plays itself */
#tourHost.tr-intro .tr-cardw{width:340px}
#tourHost .tr-icard{padding:14px 16px 12px}
#tourHost .tr-icard .tr-title{font-size:18px; margin:4px 0 4px; animation:trUp .25s both}
#tourHost .tr-iline{margin:0 0 10px; color:var(--ink-2); font-size:13.5px; line-height:1.45; animation:trUp .25s .08s both}
#tourHost .tr-tick{height:3px; border-radius:3px; background:var(--sunk); overflow:hidden; margin-bottom:6px}
#tourHost .tr-tick i{display:block; height:100%; background:var(--brand); transform-origin:left; animation:trGrow linear both; animation-duration:1300ms}
#tourHost.tr-paused .tr-tick i{animation-play-state:paused}
#tourHost .tr-icard .tr-prog{height:3px; opacity:.6}
#tourHost .tr-pause{font-variant-numeric:tabular-nums}
#tourHost.tr-intro .tr-ghost.on{animation-duration:.8s; animation-delay:0s}
#tourHost.tr-intro .tr-spot::after{animation-delay:0s}
#tourHost .tr-close{font-weight:700}

/* the note after skipping the introduction: it points at the profile button */
#tourNote{position:fixed; z-index:210; top:64px; right:16px; max-width:340px; display:flex; gap:10px; align-items:flex-start; background:var(--surface); color:var(--ink);
  border:1px solid var(--brand-line); border-radius:12px; padding:11px 12px; font-size:13.5px; line-height:1.45; box-shadow:0 18px 40px -16px rgba(0,0,0,.4); animation:trIn .3s both}
#tourNote.pointing::before{content:""; position:absolute; top:-7px; right:14px; border:7px solid transparent; border-top:0; border-bottom-color:var(--brand-line)}
#tourNote .tr-noteic{font-size:16px}
#tourNote button{flex:none; border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:13px; padding:0 2px}
.tr-glow{box-shadow:0 0 0 3px var(--brand), 0 0 0 7px var(--brand-soft) !important; transition:box-shadow .3s}
#tourHost.tr-intro .tr-cardw{width:380px}
#tourHost.tr-intro .tr-top .tr-x{white-space:nowrap; padding:4px 9px; font-size:12px}
#tourHost.tr-intro .tr-sec{flex:0 1 auto}
#tourHost.tr-intro .tr-count{margin-left:auto; white-space:nowrap}

/* app tour: the introduction's control dock — fixed at the bottom centre, never moves */
#tourHost.tr-intro .tr-cardw{width:400px}
#tourHost .tr-dock{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:10px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 8px 7px 16px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5); font-size:13px; white-space:nowrap}
#tourHost .tr-dock[hidden]{display:none}
#tourHost .tr-dockn{font:600 12px "IBM Plex Mono",monospace; color:var(--ink-3); min-width:52px}
#tourHost .tr-dockbar{width:120px; height:4px; border-radius:4px; background:var(--sunk); overflow:hidden}
#tourHost .tr-dockbar i{display:block; height:100%; width:0; background:var(--brand); transition:width .4s}
#tourHost .tr-dbtn{font-family:inherit; font-size:13px; font-weight:700; border-radius:999px; padding:7px 14px; cursor:pointer; border:1px solid var(--line); background:var(--surface-2); color:var(--ink)}
#tourHost .tr-dbtn:hover{border-color:var(--line-2)}
#tourHost .tr-dbtn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
#tourHost .tr-dskip{background:var(--brand); border-color:var(--brand); color:#fff}
#tourHost.tr-paused .tr-dock{border-color:var(--brand-line)}
#tourHost .tr-card .tr-tick{margin:12px 0 0}
#tourHost.tr-phone .tr-dock{left:8px; right:8px; transform:none; justify-content:space-between; padding:6px 6px 6px 12px}
#tourHost.tr-phone .tr-dockbar{flex:1; width:auto}
#tourHost.tr-phone.tr-hasdock .tr-cardw{bottom:70px}

/* app tour: asking first — the choice of how, and the "no thanks" note */
#tourHost .tr-dbtn[hidden]{display:none}
#tourOffer .tr-offer{width:460px}
#tourOffer .tr-modes{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px}
#tourOffer .tr-mode{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-family:inherit; color:var(--ink); background:var(--surface-2);
  border:1.5px solid var(--line); border-radius:14px; padding:16px 12px 14px; cursor:pointer; transition:border-color .15s, transform .15s, background .15s}
#tourOffer .tr-mode:hover, #tourOffer .tr-mode:focus-visible{border-color:var(--brand); background:var(--brand-soft); transform:translateY(-2px); outline:none}
#tourOffer .tr-mode b{font-size:15px}
#tourOffer .tr-mode small{font-size:12.5px; color:var(--ink-2); line-height:1.4}
#tourOffer .tr-modeic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; font-size:17px}
#tourOffer .tr-noic{font-size:34px; margin-bottom:2px; animation:trPop .5s both}
#tourOffer .tr-whybox{text-align:left; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:12px; padding:11px 14px; margin:0 0 16px}
#tourOffer .tr-whybox b{display:block; color:var(--brand-ink); font-size:13px; margin-bottom:4px}
#tourOffer .tr-whybox p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink)}
@media (max-width:520px){ #tourOffer .tr-modes{grid-template-columns:1fr} }
#tourHost.tr-guided .tr-cardw{width:400px}
/* the popup never wider than the screen: the grid column is the screen, the card at most 460px of it */
#tourOffer{grid-template-columns:minmax(0,1fr); justify-items:center; overflow-y:auto}
#tourOffer .tr-offer{width:min(460px,100%); box-sizing:border-box}
@media (max-width:520px){ #tourOffer .tr-offer{padding:18px 16px 14px} #tourOffer .tr-title{font-size:19px} }
/* phone: the card is always the screen's width, whatever mode the tour is in */
#tourHost.tr-phone .tr-cardw, #tourHost.tr-phone.tr-intro .tr-cardw, #tourHost.tr-phone.tr-guided .tr-cardw{width:auto; left:8px !important; right:8px}
/* phone: the dock at the top when the feature is low down, and the sheet below it */
#tourHost.tr-phone.tr-docktop .tr-dock{top:8px; bottom:auto}
#tourHost.tr-phone.tr-docktop.tr-cardtop .tr-cardw{top:70px !important}
#tourHost.tr-phone.tr-docktop:not(.tr-cardtop) .tr-cardw{bottom:8px}
/* phone: a centred card with the dock showing stops above the dock, and scrolls inside */
#tourHost.tr-phone.tr-centre.tr-hasdock .tr-cardw{top:8px !important; bottom:72px; transform:none; display:flex; align-items:center}
#tourHost.tr-phone.tr-centre.tr-hasdock .tr-card{max-height:calc(100vh - 88px); width:100%}

/* ==========================================================================
   SPECIFICATION COVERAGE (app/progress.js) — the coverage arena, the past-paper
   bars on every page and in the Past Paper Arena, "Your mark" under every
   scheme, and the "read" tick on a section. Bars are the identity layer's: flat,
   square, 3px.
   ========================================================================== */
.cvbar{min-width:0}
.cvbar-h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin-bottom:6px}
.cvbar-l{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cvbar-n{font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cvbar-n b{font-family:var(--tt); font-weight:600; color:var(--ink)}
.cvbar-t,.cvmini-t{display:block; height:3px; background:var(--line); overflow:hidden}
.cvbar-t i,.cvmini-t i{display:block; height:100%; background:var(--brand); transition:width .3s}
.cvbar-t i.mid,.cvmini-t i.mid{background:var(--gold)}
.cvbar-t i.lo,.cvmini-t i.lo{background:var(--flag)}
.cvtop{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 40px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:0 0 22px}
.cvtop-pp{margin-bottom:0; border-bottom:0}
@media (max-width:620px){ .cvtop{grid-template-columns:minmax(0,1fr)} }
.cvfilters{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px}
.cvarena{min-width:0}
.cvsort{flex:none}
.cvchips{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.cvchips button{font:inherit; font-size:12px; font-weight:600; color:var(--ink-2); background:none; border:1px solid var(--line-2); padding:5px 10px; cursor:pointer}
.cvchips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.cvchips button:hover{border-color:var(--ink-3)}
.cvmod{margin:0 0 26px}
.cvmod-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1.5px solid var(--ink-3); padding-bottom:7px}
.cvmod-h h3{font-family:var(--display); font-size:17px; font-weight:600; margin:0; min-width:0}
.cvmod-p{font-family:var(--tt); font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.cvhead,.cvrow{display:grid; grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(0,1fr)) 64px; gap:14px; align-items:center}
.cvhead{padding:8px 4px 6px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cvrow{width:100%; text-align:left; font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line); padding:11px 4px; cursor:pointer}
.cvrow:hover{background:var(--sunk)}
.cvrow:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.cvname{font-size:13.5px; line-height:1.35; min-width:0; overflow-wrap:anywhere}
.cvname b{font-family:var(--tt); font-weight:600; font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); margin-right:4px}
.cvrow.none .cvname{color:var(--ink-2)}
.cvcell{min-width:0}
.cvmini{display:flex; flex-direction:column; gap:5px}
.cvmini-n{font-family:var(--tt); font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cvmini-n em{font-style:normal; color:var(--ink-3); font-family:inherit}
.cvna{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.cvpct{text-align:right}
.cvpct b{font-family:var(--tt); font-weight:600; font-size:14px}
.cvrow.full .cvpct b{color:var(--brand-ink)}
.cvfine{margin-top:18px; max-width:72ch}
@media (max-width:760px){
  .cvhead{display:none}
  .cvrow{grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:10px 12px; padding:12px 2px}
  .cvname{grid-column:1/-1}
  .cvcell[data-l]::before{content:attr(data-l); display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
  .cvpct{align-self:end}
}
.ppprog{margin:14px 0 4px}
.ppprog:empty{display:none}
.ppprog-in{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0 12px}
.ppprog-b{font-size:12.5px; color:var(--ink-2); margin:10px 0 0; line-height:1.5}
.ppprog-b b{font-family:var(--tt); font-weight:600; color:var(--ink)}
.cvpoint{display:grid; gap:12px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px}
.cvpoint .linkbtn{justify-self:start}
.qmark{margin:14px 0 4px; padding:12px 0 0; border-top:1px solid var(--line)}
.qmark-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:6px}
.qmark input{width:56px; font:inherit; font-family:var(--tt); font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); padding:5px 6px}
.qmark input[readonly]{background:none; border-color:transparent; padding-left:0; width:40px}
.qmark-of{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.qmark-st{font-size:12px; color:var(--ink-3); flex:1 1 200px; min-width:0}
.sec-read{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-ink);
  border-left:2px solid var(--brand); padding:0 0 0 6px; margin-left:8px; white-space:nowrap}
.cpcard.cp-read .cpk::after{content:" · read \2713"; color:var(--brand-ink); font-weight:700}

/* ==========================================================================
   MY REFERENCE SHEET (app/refsheet.js) — the student's own notes beside a blurt
   ========================================================================== */
.rs-n{font-weight:700}
.refsheet{margin:12px 0; padding:14px 16px; background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--gold); min-width:0}
.rs-h{min-width:0}
.rs-lede{font-size:13px; color:var(--ink-2); margin:4px 0 10px; max-width:66ch}
.rs-list{list-style:none; margin:0 0 10px; padding:0; border-top:1px solid var(--line)}
.rs-list li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:8px 0; border-bottom:1px solid var(--line); min-width:0}
.rs-name{font:inherit; font-size:13.5px; font-weight:600; color:var(--brand-ink); background:none; border:0; padding:0; cursor:pointer; text-align:left; min-width:0; overflow-wrap:anywhere}
.rs-name[aria-current="true"]{text-decoration:underline; text-underline-offset:3px}
.rs-meta{font-size:11.5px; color:var(--ink-3); font-family:var(--tt)}
.rs-del{margin-left:auto}
.rs-empty{color:var(--ink-3); font-size:13px}
.rs-add{display:flex; flex-wrap:wrap; gap:8px}
.rs-pick{cursor:pointer}
.rs-note{margin-top:10px}
.rs-note textarea{width:100%; box-sizing:border-box}
.rs-st{margin:8px 0 0; min-height:0}
.rs-st:empty{display:none}
.rs-view{margin-top:12px; min-width:0}
.rs-view:empty{display:none}
.rs-img{display:block; max-width:100%; height:auto; border:1px solid var(--line); background:#fff}
.rs-pdf{display:block; width:100%; height:70vh; border:1px solid var(--line); background:#fff}
.rs-text{white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:14px; line-height:1.55; background:var(--surface); border:1px solid var(--line); padding:12px 14px; margin:0; max-height:70vh; overflow:auto}
.rs-doc{background:var(--surface); border:1px solid var(--line); padding:12px 16px; max-height:70vh; overflow:auto; font-size:14px; line-height:1.55; overflow-wrap:anywhere}
.rs-doc img{max-width:100%; height:auto}
.rs-doc table{border-collapse:collapse; max-width:100%; display:block; overflow-x:auto}
.rs-doc td,.rs-doc th{border:1px solid var(--line); padding:4px 8px}
.rs-view .linkbtn{display:inline-block; margin-top:8px}

/* ==========================================================================
   HOW EVERYONE DID · DISCUSSION (app/community.js) — under every past-paper scheme
   ========================================================================== */
.qcom{margin:16px 0 4px; border-top:1px solid var(--line); min-width:0}
.qcom>summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; cursor:pointer; padding:12px 0 10px; list-style:none}
.qcom>summary::-webkit-details-marker{display:none}
.qcom>summary::before{content:"\203A"; display:inline-block; font-weight:700; color:var(--ink-3); transition:transform .15s}
.qcom[open]>summary::before{transform:rotate(90deg)}
.qcom-t{font-size:13px; font-weight:700; color:var(--ink)}
.qcom-n{font-size:12px; color:var(--ink-3); font-family:var(--tt)}
.qcom-b{padding:2px 0 6px; min-width:0}
.qcom-rule{margin:12px 0 0; font-size:11.5px}
.qc-stats{margin:0 0 14px}
.qc-stats .cvbar-t{margin-top:8px}
.qc-avg{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:6px}
.qc-avg b{font-family:var(--tt); font-weight:600; font-size:22px}
.qc-avg span{font-size:12.5px; color:var(--ink-2); margin-right:10px}
.qc-full{font-size:18px !important}
.qc-mh{display:block; margin-top:14px}
.qc-mist{list-style:none; margin:6px 0 0; padding:0}
.qc-mist li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5}
.qc-share{font-family:var(--tt); font-weight:600; font-size:12px; color:var(--flag); border-left:2px solid var(--flag); padding-left:6px; align-self:start}
.qc-list{list-style:none; margin:0 0 12px; padding:0; border-top:1px solid var(--line)}
.qc-c{padding:10px 0; border-bottom:1px solid var(--line); min-width:0}
.qc-c.pending,.qc-c.rejected{opacity:.85}
.qc-c.mine{border-left:2px solid var(--brand); padding-left:10px}
.qc-ch{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:12.5px}
.qc-when{color:var(--ink-3); font-size:11.5px}
.qc-st{font-size:11.5px; color:var(--gold)}
.qc-st.no{color:var(--flag)}
.qc-acts{margin-left:auto}
.qc-body{margin:4px 0 0; font-size:14px; line-height:1.55; overflow-wrap:anywhere}
.qc-none{margin:0 0 12px}
.qc-support{margin-top:8px; padding:10px 12px; background:var(--blue-soft); border-left:3px solid var(--blue); font-size:13.5px; line-height:1.55}
.qc-form textarea{width:100%; box-sizing:border-box; margin-top:6px}
.qc-fr{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px}
.qc-as{flex:none}
.qc-count{font-size:11.5px; color:var(--ink-3); font-family:var(--tt); margin-left:auto}
.qc-name{margin-top:10px; display:flex; flex-wrap:wrap; align-items:end; gap:8px}
.qc-name label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; flex:1 1 220px; min-width:0}
.qc-name input{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); padding:6px 8px}
.qc-msg{margin:8px 0 0}
.qc-msg:empty{display:none}

/* Exam mastery: a section reached from "On this page" lights for a moment (jumpTo in
   app.js), and a content point named in "What you have got wrong here" opens its notes */
@keyframes jumpflash{ 0%{ box-shadow:0 0 0 3px var(--brand-soft, rgba(60,140,110,.25)); background:var(--brand-soft, rgba(60,140,110,.08)) } 100%{ box-shadow:0 0 0 3px transparent; background:transparent } }
.jumpflash{ animation:jumpflash 1.5s ease-out; border-radius:10px }
.anal-cp h3 a.cpgo{ color:inherit; text-decoration:none; border-bottom:1px dashed var(--line) }
.anal-cp h3 a.cpgo:hover{ color:var(--brand-ink); border-bottom-color:currentColor }
/* the figure on an Apply-stage card (qFigHTML) — a workbook crop is drawn for an A4
   page, so it is held to a readable width instead of filling a wide card */
.qcard .pp-fig .scan img{ max-width:min(100%,640px); height:auto }
.qcard .pp-fig figure svg{ max-width:min(100%,640px); height:auto }
/* Biology flashcards and blurt schemes (Oct 2026): the wording that scores is COLOURED WORDS, not a highlight —
   the same treatment as the visual Learn stage (app/learn.css), so the card reads like the notes it came from.
   Chemistry cards keep their highlight. */
body:not([data-subject="chemistry"]) :is(.fans,.bl-check,.blurt-ms,.bl-doc) mark.ms{background:none !important; box-shadow:none !important; padding:0; border-radius:0; font-weight:700; color:var(--brand-ink)}
body:not([data-subject="chemistry"]) :is(.fans,.bl-check,.blurt-ms,.bl-doc) mark.ms.hl-term{color:var(--hl-term-ink)}
body:not([data-subject="chemistry"]) :is(.fans,.bl-check,.blurt-ms,.bl-doc) mark.ms.hl-val{color:var(--hl-val-ink)}
body:not([data-subject="chemistry"]) :is(.fans,.bl-check,.blurt-ms,.bl-doc) mark.ms.hl-prec{color:var(--hl-prec-ink)}
body:not([data-subject="chemistry"]) :is(.fans,.bl-check,.blurt-ms,.bl-doc) mark.ms.hl-seq{color:var(--hl-seq-ink)}

/* ================= the welcome presentation (app/welcome.js) =================
   Seven animated slides laid over the app straight after an account is made — what the
   landing page used to say, cut down. Everything is scoped under #welcomeDeck. */
#welcomeDeck{position:fixed; inset:0; z-index:205; display:grid; place-items:center; grid-template-columns:minmax(0,1fr); padding:16px;
  background:rgba(7,18,15,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:wdFade .3s ease both; font-size:15px}
#welcomeDeck[hidden]{display:none}
#welcomeDeck.wd-out{animation:wdFade .25s ease reverse both}
#welcomeDeck .wd-card{position:relative; width:min(860px,100%); height:min(640px,calc(100vh - 32px)); height:min(640px,calc(100dvh - 32px)); display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 80px -24px rgba(0,0,0,.55);
  overflow:hidden; animation:trIn .45s cubic-bezier(.3,.8,.3,1) both}
#welcomeDeck .wd-card::before{content:""; position:absolute; inset:0 0 auto 0; height:180px; pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, var(--brand-soft), transparent 70%)}
#welcomeDeck .wd-bars{position:relative; display:flex; gap:5px; padding:14px 22px 0}
#welcomeDeck .wd-seg{flex:1; height:4px; padding:0; border:0; border-radius:3px; background:var(--line); cursor:pointer; overflow:hidden}
#welcomeDeck .wd-seg i{display:block; height:100%; width:0; background:var(--brand); border-radius:3px}
#welcomeDeck.wd-paused .wd-seg:not(.done) i{opacity:.45}
#welcomeDeck .wd-top{position:relative; display:flex; align-items:center; justify-content:space-between; padding:12px 22px 0}
#welcomeDeck .wd-brand{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:var(--ink-2)}
#welcomeDeck .wd-mark{width:18px; height:18px; border-radius:5px; background:linear-gradient(140deg,#14877A,#084B54)}
#welcomeDeck .wd-skip{font:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer}
#welcomeDeck .wd-skip:hover{color:var(--ink); border-color:var(--line-2)}
#welcomeDeck .wd-stage{position:relative; flex:1; min-height:0; overflow-y:auto; padding:18px 30px 8px}
#welcomeDeck .wd-slide{min-height:100%; display:flex; flex-direction:column; justify-content:center}
#welcomeDeck .wd-slide > *, #welcomeDeck .wd-boards > *, #welcomeDeck .wd-stats > *, #welcomeDeck .wd-flow > *, #welcomeDeck .wd-arenas > *, #welcomeDeck .wd-ticks > *{animation:wdUp .55s cubic-bezier(.25,.8,.3,1) both; animation-delay:var(--d,0s)}
#welcomeDeck .wd-tag{margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-ink)}
#welcomeDeck .wd-h{margin:0 0 12px; font-size:clamp(22px,3.4vw,31px); line-height:1.18; font-weight:800; letter-spacing:-.01em; max-width:22em}
#welcomeDeck .wd-p{margin:0 0 14px; color:var(--ink-2); line-height:1.55; max-width:40em}
#welcomeDeck .wd-p.wd-small{font-size:13.5px; margin-top:14px}
#welcomeDeck .wd-k{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}

/* 1 · boards and counts */
#welcomeDeck .wd-boards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:4px 0 18px}
#welcomeDeck .wd-board{position:relative; display:flex; flex-direction:column; gap:2px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2)}
#welcomeDeck .wd-board.bio{border-top:3px solid var(--brand)}
#welcomeDeck .wd-board.chem{border-top:3px solid var(--blue)}
#welcomeDeck .wd-board.yours{box-shadow:0 0 0 2px var(--brand-line); background:var(--brand-soft)}
#welcomeDeck .wd-board.chem.yours{box-shadow:0 0 0 2px var(--blue-line); background:var(--blue-soft)}
#welcomeDeck .wd-bs{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
#welcomeDeck .wd-board b{font-size:15px}
#welcomeDeck .wd-board small{color:var(--ink-3); font-size:12px}
#welcomeDeck .wd-board em{position:absolute; top:10px; right:10px; font-style:normal; font-size:10.5px; font-weight:800; color:#fff; background:var(--brand); border-radius:999px; padding:2px 8px}
#welcomeDeck .wd-board.chem em{background:var(--blue)}
#welcomeDeck .wd-stats{display:flex; flex-wrap:wrap; gap:10px 34px; margin:0}
#welcomeDeck .wd-stats div{display:flex; flex-direction:column}
#welcomeDeck .wd-stats dt{font-size:28px; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums}
#welcomeDeck .wd-stats dd{margin:0; color:var(--ink-3); font-size:13px}

/* 2 · specification → notes → mark scheme */
#welcomeDeck .wd-flow{display:grid; grid-template-columns:1fr 1.7fr 1.15fr; gap:12px; align-items:stretch; margin-top:6px}
#welcomeDeck .wd-col{border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:var(--surface-2); font-size:14px; line-height:1.5}
#welcomeDeck .wd-col p{margin:0}
#welcomeDeck .wd-note{background:var(--surface); box-shadow:var(--shadow)}
#welcomeDeck .wd-q{font-weight:700; margin-bottom:6px !important; font-size:13.5px}
#welcomeDeck .wd-hl mark{background:none; color:inherit; padding:0; font-weight:700;
  animation:wdMark .6s ease forwards}
#welcomeDeck .wd-hl mark:nth-of-type(1){animation-delay:1.1s}
#welcomeDeck .wd-hl mark:nth-of-type(2){animation-delay:1.65s}
#welcomeDeck .wd-hl mark:nth-of-type(3){animation-delay:2.2s}
#welcomeDeck .wd-hl mark:nth-of-type(4){animation-delay:2.75s}
#welcomeDeck .wd-ms{list-style:none; margin:0; padding:0; display:grid; gap:7px}
#welcomeDeck .wd-ms li{position:relative; padding-left:24px; font-size:13.5px; opacity:.35; animation:wdTick .4s ease forwards; animation-delay:var(--t)}
#welcomeDeck .wd-ms li::before{content:""; position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-2)}
#welcomeDeck .wd-ms li::after{content:"✓"; position:absolute; left:3px; top:-1px; font-size:12px; font-weight:800; color:#fff; opacity:0; animation:wdIn .3s ease forwards; animation-delay:var(--t)}

/* 3 · the stage rail */
#welcomeDeck .wd-rail-w{margin:4px 0 8px}
#welcomeDeck .wd-rail{list-style:none; margin:0; padding:0; display:flex; gap:8px}
#welcomeDeck .wd-rail li{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding:9px 10px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
  opacity:.4; animation:wdLight .5s ease forwards; animation-delay:var(--t)}
#welcomeDeck .wd-rail em{font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--line); color:var(--ink-2);
  animation:wdDot .5s ease forwards; animation-delay:var(--t)}
#welcomeDeck .wd-rail.chem em{animation-name:wdDotC}
#welcomeDeck .wd-rail b{font-size:14px}
#welcomeDeck .wd-rail small{font-size:12px; color:var(--ink-3); line-height:1.35}

/* 4 · arenas */
#welcomeDeck .wd-arenas{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:9px; margin-top:4px}
#welcomeDeck .wd-arena{display:grid; grid-template-columns:auto 1fr; column-gap:9px; row-gap:2px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
#welcomeDeck .wd-ai{grid-row:span 2; font-size:19px; line-height:1}
#welcomeDeck .wd-arena b{font-size:13.5px}
#welcomeDeck .wd-arena small{font-size:12px; color:var(--ink-2); line-height:1.4}
#welcomeDeck .wd-s-arenas .wd-h{font-size:clamp(21px,2.8vw,26px); margin-bottom:10px}
#welcomeDeck .wd-s-arenas .wd-arenas{gap:7px}
#welcomeDeck .wd-s-arenas .wd-arena{padding:8px 10px}
#welcomeDeck .wd-s-arenas .wd-arena small{font-size:11.5px; line-height:1.35}
#welcomeDeck .wd-s-arenas .wd-p.wd-small{margin-top:10px; margin-bottom:0}
/* fifteen arenas must fit the card without a scroll the autoplay never makes: narrower
   tiles, each line kept to two */
#welcomeDeck .wd-s-arenas .wd-arenas{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
#welcomeDeck .wd-s-arenas .wd-arena small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; align-self:start; max-height:2.8em}
@media (max-width:720px){
  #welcomeDeck .wd-s-arenas .wd-arenas{grid-template-columns:repeat(2,minmax(0,1fr))}
  #welcomeDeck .wd-s-arenas .wd-arena{grid-template-columns:minmax(0,1fr)}
  #welcomeDeck .wd-s-arenas .wd-ai{grid-row:auto; font-size:16px}
}

/* 5, 6 · ticks beside a picture */
#welcomeDeck .wd-split{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; margin-top:4px}
#welcomeDeck .wd-ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
#welcomeDeck .wd-ticks li{position:relative; padding-left:28px; line-height:1.45; color:var(--ink-2); font-size:14.5px}
#welcomeDeck .wd-ticks li b{color:var(--ink)}
#welcomeDeck .wd-ticks li::before{content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; background:var(--brand-soft); color:var(--brand-ink)}
#welcomeDeck .wd-chat{display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2)}
#welcomeDeck .wd-msg{max-width:88%; padding:9px 12px; border-radius:14px 14px 14px 4px; background:var(--surface); border:1px solid var(--line); font-size:13.5px; line-height:1.45;
  opacity:0; animation:wdUp .45s ease forwards; animation-delay:var(--t)}
#welcomeDeck .wd-msg.me{align-self:flex-end; background:var(--brand); color:#fff; border-color:transparent; border-radius:14px 14px 4px 14px}
#welcomeDeck .wd-limit{padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2)}
#welcomeDeck .wd-bar{height:12px; border-radius:999px; background:var(--line); overflow:hidden; margin:6px 0 8px}
#welcomeDeck .wd-bar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand),#2fae86); animation:wdFill 1.6s cubic-bezier(.3,.8,.3,1) .9s forwards}
#welcomeDeck .wd-barl{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2)}
#welcomeDeck .wd-barl b{color:var(--ink)}
#welcomeDeck .wd-limit p{margin:10px 0 0; font-size:12px; color:var(--ink-3)}

/* 7 · the hand-over */
#welcomeDeck .wd-s-next{align-items:center; text-align:center}
#welcomeDeck .wd-s-next .wd-h, #welcomeDeck .wd-s-next .wd-p{margin-left:auto; margin-right:auto}
#welcomeDeck .wd-end{font-size:46px; margin-bottom:6px}

#welcomeDeck .wd-foot{position:relative; display:flex; align-items:center; gap:8px; padding:12px 22px 16px; border-top:1px solid var(--line)}
#welcomeDeck .wd-sp{flex:1}
#welcomeDeck .wd-btn{font:inherit; font-size:14px; font-weight:700; border-radius:10px; padding:10px 18px; cursor:pointer; border:1px solid transparent; background:var(--brand); color:#fff}
#welcomeDeck .wd-btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
#welcomeDeck .wd-btn:disabled{opacity:.4; cursor:default}
#welcomeDeck .wd-btn:not(:disabled):hover{filter:brightness(1.06)}

/* the real "AI this week" pill, lit while slide 6 talks about it */
/* slide 6 lifts the top bar above the dimming so the pill it describes can be seen */
body.wd-showbar .topbar{z-index:206; pointer-events:none}
.credit-pill.wd-pulse{box-shadow:0 0 0 3px var(--brand-line), 0 0 0 9px rgba(76,190,142,.25); animation:wdPulse 1.2s ease-in-out 3}
body.welcoming .reportfab{display:none}

@keyframes wdFade{from{opacity:0} to{opacity:1}}
@keyframes wdUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes wdIn{to{opacity:1}}
@keyframes wdMark{to{color:var(--brand-ink)}}
@keyframes wdTick{to{opacity:1}}
@keyframes wdLight{to{opacity:1; border-color:var(--brand-line); background:var(--surface)}}
@keyframes wdDot{to{background:var(--brand); color:#fff}}
@keyframes wdDotC{to{background:var(--blue); color:#fff}}
@keyframes wdFill{to{width:42%}}
@keyframes wdPulse{50%{box-shadow:0 0 0 3px var(--brand-line), 0 0 0 14px rgba(76,190,142,.08)}}
#welcomeDeck .wd-ms li::before{animation:wdTickC .3s ease forwards; animation-delay:var(--t)}
@keyframes wdTickC{to{background:var(--brand); border-color:var(--brand)}}

@media (max-width:720px){
  #welcomeDeck{padding:10px; font-size:14px}
  #welcomeDeck .wd-card{border-radius:18px; height:calc(100vh - 20px); height:calc(100dvh - 20px)}
  #welcomeDeck .wd-stage{padding:14px 16px 6px}
  #welcomeDeck .wd-bars, #welcomeDeck .wd-top{padding-left:16px; padding-right:16px}
  #welcomeDeck .wd-foot{padding:10px 16px 14px}
  #welcomeDeck .wd-slide{min-height:0; justify-content:flex-start}
  #welcomeDeck .wd-boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #welcomeDeck .wd-flow, #welcomeDeck .wd-split{grid-template-columns:minmax(0,1fr)}
  #welcomeDeck .wd-rail{flex-direction:column; gap:6px}
  #welcomeDeck .wd-rail li{display:grid; grid-template-columns:auto auto 1fr; align-items:center; column-gap:9px; padding:8px 10px}
  #welcomeDeck .wd-stats dt{font-size:23px}
  #welcomeDeck .wd-btn{padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  #welcomeDeck, #welcomeDeck *{animation-duration:.01s !important; animation-delay:0s !important}
}

/* ================= highlights are coloured bold letters (Victor, 20 Oct 2026) =================
   Everywhere, both subjects: the wording that scores keeps its colour — the same five kinds
   on biology, the four on a chemistry page — but as bold coloured text, never a block of
   colour behind the words. Placed last so it wins over every earlier highlight rule; colour
   is left without !important so the places that deliberately reset it (an unlit flow step)
   still can. */
mark.ms, mark.ms.hl-term, mark.ms.hl-val, mark.ms.hl-prec, mark.ms.hl-seq,
mark.ms.k-mech, mark.ms.k-seq, mark.ms.k-val, mark.ms.k-prec,
.chem2 mark, .chem2 mark.ms, .chem2 mark.key, .chem2 mark.num, .chem2 mark.warn, .chem2 mark.acc,
.tr-d mark, .tr-hl mark{background:none !important; box-shadow:none !important; padding:0; border-radius:0; font-weight:700}
.chem2 mark{color:inherit}
mark.ms{color:var(--brand-ink)}
mark.ms.hl-term{color:var(--hl-term-ink)}
mark.ms.hl-val{color:var(--hl-val-ink)}
mark.ms.hl-prec{color:var(--hl-prec-ink)}
mark.ms.hl-seq{color:var(--hl-seq-ink)}
mark.ms.k-mech{color:var(--brand-ink)}
mark.ms.k-seq{color:var(--blue)}
mark.ms.k-val{color:var(--gold)}
mark.ms.k-prec{color:var(--flag)}
.chem2 mark.key{color:var(--key)}
.chem2 mark.num{color:var(--num)}
.chem2 mark.warn{color:var(--flag)}
.chem2 mark.acc{color:var(--gold)}
.tr-d mark{color:var(--brand-ink)}
.tr-hl mark.h-term{color:var(--hl-term-ink)} .tr-hl mark.h-mech{color:var(--brand-ink)}
.tr-hl mark.h-seq{color:var(--hl-val-ink)} .tr-hl mark.h-prec{color:var(--hl-prec-ink)}
.tr-hlkey .h-term, .tr-hlkey .h-mech, .tr-hlkey .h-seq, .tr-hlkey .h-prec{background:none !important; font-weight:800}
.tr-hlkey .h-term{color:var(--hl-term-ink)} .tr-hlkey .h-mech{color:var(--brand-ink)}
.tr-hlkey .h-seq{color:var(--hl-val-ink)} .tr-hlkey .h-prec{color:var(--hl-prec-ink)}
/* the key shows a coloured bold sample instead of a swatch */
.hlkey i{width:auto; height:auto; border:0 !important; background:none !important; border-radius:0; font-style:normal; font-weight:800; font-size:12px; line-height:1}
.hlkey i::before{content:"Aa"}
.hlkey .k-mech i{color:var(--brand-ink)}
.hlkey .k-term i{color:var(--hl-term-ink)}
.hlkey .k-val i{color:var(--hl-val-ink)}
.hlkey .k-prec i{color:var(--hl-prec-ink)}
.hlkey .k-seq i{color:var(--hl-seq-ink)}

/* ================= biology Recall and Apply (20 Oct 2026) ================= */
.ex-lede{font-size:13.5px; color:var(--ink-2); margin:4px 0 12px; max-width:64ch}
.ex-lede b{color:var(--ink)}
.mcq-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.mcq-top .mcq-score{flex:1 1 240px; margin:0}

/* ================= the AI blurt marker's reply ================= */
.blai{display:grid; gap:6px; margin:10px 0 4px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); font-size:14px; line-height:1.55}
.blai p, .blai ul, .blai ol{margin:0}
.blai ul, .blai ol{padding-left:18px; display:grid; gap:3px}
.blai .blai-score{font-size:16px; font-weight:800; color:var(--ink)}
.blai .blai-sec{margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.blai .blai-sub{margin:6px 0 0; font-size:14px; font-weight:800; color:var(--brand-ink)}
.blai-note{margin:0 0 10px; padding:9px 12px; border-radius:10px; background:var(--brand-soft); color:var(--ink); font-size:13px; border:1px solid var(--brand-line)}
.blai-note.warn{background:var(--gold-soft); border-color:var(--gold-line)}
.out .blai{border:0; background:none; padding:2px 0; margin:0}

/* ==========================================================================
   THE CHEMISTRY PAGE, REDESIGNED (Oct 2026) — renderChem2() adds .c5 to .chem2
   Victor's brief: less crowded, slides you press Next through instead of scrolling,
   a contents page for the angles, the perfect answer drawn as one, one angle at a
   time in drilling. Everything new is .c5-*; the 2.1.4 drawn scenes are .cs-* (below).
   ========================================================================== */
.chem2.c5{
  --serif:var(--display); --wash:var(--sunk);
  --ok:#11704F; --ok-soft:#E3F3EB; --ok-line:#A9D7C0;
  display:block; max-width:1120px;
}
:root[data-theme="dark"] .chem2.c5{--ok:#7BD6A8; --ok-soft:#13291F; --ok-line:#28503C}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chem2.c5{--ok:#7BD6A8; --ok-soft:#13291F; --ok-line:#28503C} }

/* the stages run across the top, as tabs, instead of down a rail */
.chem2.c5 .c2rail{position:sticky; top:calc(env(safe-area-inset-top,0px) + 52px); z-index:20; display:flex; align-items:stretch; gap:6px;
  padding:0; margin:0 0 26px; border-right:0; border-bottom:1px solid var(--line-2); background:var(--paper); overflow-x:auto; scrollbar-width:none}
.chem2.c5 .c2rail::-webkit-scrollbar{display:none}
.chem2.c5 .c2rail .rlab{display:none}
.chem2.c5 .stages{flex-direction:row; gap:2px; flex:0 0 auto}
.chem2.c5 .stg{width:auto; white-space:nowrap; border:0; border-left:0; border-bottom:2px solid transparent; border-radius:0; padding:11px 9px 9px; margin:0}
.chem2.c5 .stg:hover{border-left:0; border-bottom-color:var(--line-2); background:none}
.chem2.c5 .stg[aria-current="true"]{border-left:0; border-bottom-color:var(--brand); background:none}
.chem2.c5 .stg .sub{display:block; font-size:10.5px}
.chem2.c5 .c2rail .rarena,.chem2.c5 .c2rail .rlab2{white-space:nowrap}
.chem2.c5 .c2main{max-width:none}
.chem2.c5 .c2panel{max-width:820px; margin-left:auto; margin-right:auto}
.chem2.c5 .c5-found,.chem2.c5 .c5-angles{max-width:1060px}
@media (max-width:920px){ .chem2.c5 .stg .sub{display:none} .chem2.c5 .stg{padding:10px 9px} }

/* the stage wrappers renderChem2() draws: hooks for the rules below, and for anything
   that needs to find one stage (the tour, the layout sweep) */
.c5-drill,.c5-apply,.c5-anal{min-width:0}
.c5-group{min-width:0}
.c5-rbody{min-width:0}
/* ---------- Foundation: slides ---------- */
.c5-fmeta{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:0 0 14px}
.chem2.c5 .cpgrid.c5-cptabs{display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:0 0 18px; border-top:0; grid-template-columns:none}
.chem2.c5 .cpcard.c5-cpt{display:flex; flex-direction:row; flex:0 1 auto; align-items:center; gap:8px; width:auto; max-width:100%; min-height:0; padding:8px 13px; border:1px solid var(--line-2); border-radius:4px; background:var(--paper); text-align:left; box-shadow:none}
.chem2.c5 .cpcard.c5-cpt .cpk{font-family:var(--tt); font-size:11px; color:var(--brand); margin:0}
.c5-cpts{font-size:13.5px; font-weight:600}
.chem2.c5 .cpcard.c5-cpt[aria-current="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chem2.c5 .cpcard.c5-cpt[aria-current="true"] .cpk{color:var(--paper)}
.chem2.c5 .cpcard.c5-cpt.cp-read .cpk::after{content:" \2713"}
.c5-cpline{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px}
.c5-cph{flex:1 1 420px; min-width:0}
.c5-intro{max-width:760px; margin:0 0 14px}
.c5-cpl{margin:4px 0 0; color:var(--ink-2); font-size:15px}
.c5-why{margin:6px 0 0; font-size:13.5px}
.chem2.c5 .c5-cpline h2.sh{font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 6px}
.c5-cpline details.spec{max-width:360px}
.c5-sbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.c5-sdots{display:flex; gap:6px; flex-wrap:wrap}
.c5-sdot{width:30px; height:30px; border:1px solid var(--line-2); border-radius:4px; font-family:var(--tt); font-size:12px; color:var(--ink-3); background:var(--paper); cursor:pointer}
.c5-sdot.done{color:var(--brand); border-color:var(--brand-line)}
.c5-sdot.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.c5-pos{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.chem2.c5 .stepper.c5-slides{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); border:1px solid var(--line-2); border-radius:6px; min-height:420px; overflow:visible; background:var(--paper); margin:0}
.c5-vis{position:relative; padding:24px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; min-width:0; overflow:hidden; border-radius:6px 0 0 6px}
.chem2.c5 .sbody.c5-txt,.c5-txt{padding:26px 28px; background:var(--surface-2); display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:0; border-radius:0 6px 6px 0; overflow-wrap:anywhere}
.chem2.c5 .c5-txt h4{font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 10px}
.c5-beatn{display:block; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:8px; min-height:12px}
.c5-beat{font-family:var(--serif); font-size:18.5px; line-height:1.7; animation:c5txt .45s both}
.c5-beat p+p{margin-top:8px}
.c5-clauses{margin:6px 0 0; padding-left:20px} .c5-clauses li{margin:5px 0}
@keyframes c5txt{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.c5-ctl{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap}
.c5-bdots{display:flex; gap:5px}
.c5-bdots i{width:24px; height:3px; background:var(--line-2)}
.c5-bdots i.done{background:var(--brand-line)} .c5-bdots i.on{background:var(--brand)}
.c5-fbtns{display:flex; gap:10px; margin-left:auto}
.chem2.c5 .btn.c5-next{background:var(--ink); border-color:var(--ink); color:var(--paper); padding:12px 20px; font-size:14.5px; max-width:520px; text-align:left}
.chem2.c5 .btn.c5-next:hover{background:var(--ink-2); border-color:var(--ink-2)}
.c5-aux{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.c5-kbd{margin-left:auto; font-size:12px; color:var(--ink-3)}
.c5-whole{margin-top:14px; padding:16px 20px; background:var(--wash); border-left:2px solid var(--brand); font-size:15px}
.c5-whole p{color:var(--ink-2); margin:6px 0} .c5-whole p.cur{color:var(--ink)}
.chem2.c5 .c5-slides.c5-check{display:block; min-height:0; padding:24px 28px; border:1px solid var(--line-2); border-radius:6px}
.c5-sth{font-family:var(--serif); font-weight:600; font-size:20px; margin:0 0 10px}
.c5-cklist{list-style:none; margin:0 0 14px; padding:0}
.c5-cklist li{padding:10px 0; border-top:1px solid var(--line); font-size:16px; animation:c5pop .5s both; animation-delay:calc(var(--i,0)*120ms)}
.c5-cklist li:first-child{border-top:0}
/* the automatic picture: the step's own figure, then what the sentence on screen says */
.c5-gscene{display:flex; flex-direction:column; gap:14px}
.c5-gfig{background:#fff; border:1px solid var(--line); border-radius:4px; padding:6px}
.c5-gfig svg,.c5-gfig img{display:block; width:100%; height:auto}
.c5-gfig.fresh{animation:c5pop .55s both}
.c5-pan{display:none} .c5-pan.c5-in{display:block}
.c5-pop{opacity:0}
.c5-pan.c5-in .c5-pop,.c5-aslide .c5-pop{animation:c5pop .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i,0)*170ms)}
@keyframes c5pop{from{opacity:0; transform:translateY(10px) scale(.97)}to{opacity:1; transform:none}}
.c5-gcard{display:flex; flex-direction:column; gap:10px; align-items:center}
.c5-geq{font-family:var(--serif); font-size:20px; font-weight:600; border:1.5px solid var(--brand); background:var(--brand-soft); border-radius:6px; padding:8px 16px; text-align:center}
.chem2.c5 .c5-geq mark{background:none; box-shadow:none; color:inherit; padding:0}
.c5-gchips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.chem2.c5 .c5-gk mark.key{display:inline-block; padding:5px 10px; border:1px solid var(--line-2); border-radius:4px; font-family:var(--serif); font-size:15px}
.c5-lab{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:4px 0 12px; text-align:center}
.c5-gflow{display:flex; flex-direction:column; gap:2px; max-width:440px; margin:0 auto; width:100%}
.c5-gfs{display:flex; gap:12px; align-items:center; border:1px solid var(--line-2); border-radius:6px; padding:9px 12px; font-size:14.5px; background:var(--paper)}
.c5-gfs span{width:24px; height:24px; flex:none; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800}
.c5-gfa{text-align:center; color:var(--brand); font-size:16px; line-height:1.1}
.c5-bespoke{min-width:0}
/* hover definitions on the key words */
.chem2.c5 mark.key.c5-def{position:relative; cursor:help; outline:none}
.chem2.c5 mark.key.c5-def::after{content:attr(data-def); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); width:max-content; max-width:260px;
  background:var(--ink); color:var(--paper); font-family:var(--ui); font-size:13px; font-weight:500; line-height:1.45; padding:9px 12px; border-radius:4px;
  display:none; pointer-events:none; z-index:30; white-space:normal; text-align:left; box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.chem2.c5 mark.key.c5-def:hover::after,.chem2.c5 mark.key.c5-def:focus::after{display:block}

/* ---------- Angles: contents and reader ---------- */
.c5-groups{display:grid; gap:24px}
.c5-grouph{display:flex; align-items:baseline; gap:12px; margin-bottom:10px; padding:0 4px}
.c5-gl{font-family:var(--tt); font-size:12px; color:var(--brand)}
.chem2.c5 .c5-grouph h3{font-family:var(--serif); font-weight:600; font-size:19px; margin:0}
.c5-grouph p{color:var(--ink-3); font-size:13.5px; font-style:italic; margin:0 0 0 auto; text-align:right}
.c5-alist{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.chem2.c5 .arow.c5-arow{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:13px 6px; border:0; border-radius:0; background:none; margin:0}
.chem2.c5 .arow.c5-arow+.arow.c5-arow{border-top:1px solid var(--line)}
.chem2.c5 .arow.c5-arow:hover{background:var(--wash)}
.chem2.c5 .c5-arow .num{width:26px; color:var(--ink-3); font-size:13px}
.chem2.c5 .c5-arow .ttl{flex:1; min-width:0; font-family:var(--serif); font-size:16.5px; font-weight:600}
.c5-meta{display:flex; gap:6px; align-items:center; flex:none}
.c5-chev{color:var(--brand); font-size:18px}
.c5-prog{font-size:12px; color:var(--ink-3); font-weight:600; white-space:nowrap}
.c5-mini{width:60px; height:5px; border-radius:3px; background:var(--wash); overflow:hidden; display:inline-block; vertical-align:middle; margin-left:6px}
.c5-mini i{display:block; height:100%; background:var(--ok)}
.c5-start{display:flex; align-items:center; gap:18px; width:100%; text-align:left; padding:20px 24px; margin:6px 0 28px; border:1px solid var(--line-2); border-left:3px solid var(--brand); border-radius:4px; background:var(--paper); cursor:pointer}
.c5-start:hover{background:var(--wash)}
.c5-s1{display:block; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.c5-s2{display:block; font-family:var(--serif); font-size:20px; font-weight:600; margin-top:4px}
.c5-arr{margin-left:auto; color:var(--brand); font-size:22px}
.c5-reader{display:grid; grid-template-columns:240px minmax(0,1fr); gap:34px; align-items:start}
.c5-toc{position:sticky; top:118px; max-height:calc(100vh - 140px); overflow:auto; padding-right:12px; border-right:1px solid var(--line); font-size:13px}
.c5-toc button{display:flex; gap:10px; width:100%; text-align:left; padding:7px 10px; border:0; border-radius:0; background:none; color:var(--ink-2); line-height:1.35; cursor:pointer}
.c5-toc button:hover{background:var(--wash); color:var(--ink)}
.c5-toc button.on{box-shadow:inset 2px 0 0 var(--brand); color:var(--ink); font-weight:700}
.c5-toc .c5-back{color:var(--brand); font-weight:700; margin-bottom:4px}
.c5-tg{font-family:var(--tt); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:16px 0 6px 10px}
.c5-ti{font-family:var(--tt); font-size:11.5px; color:var(--ink-3); width:18px; flex:none}
.c5-tocm{display:none; margin-bottom:14px}
.c5-tocm select{width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:4px; background:var(--paper); color:var(--ink); font:inherit; font-weight:600}
.c5-angh{margin-bottom:10px}
.c5-gl2{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.c5-apos{color:var(--ink-3)}
.chem2.c5 .c5-angh h2{font-family:var(--serif); font-weight:600; font-size:24px; margin:4px 0 0; line-height:1.25}
.c5-tabrow{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0}
.c5-atabs{display:flex; gap:4px; flex-wrap:wrap}
.c5-atab{font-size:12.5px; padding:6px 11px; border:1px solid var(--line-2); border-radius:4px; color:var(--ink-3); background:var(--paper); cursor:pointer}
.c5-atab.done{color:var(--brand); border-color:var(--brand-line)}
.c5-atab.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.c5-atab:last-child:not(.on){color:var(--ok); border-color:var(--ok-line)}
.c5-angnav{display:flex; gap:6px}
.c5-aslide{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border:1px solid var(--line-2); border-radius:6px; min-height:380px; background:var(--paper)}
.c5-aslide .c5-beat{font-size:16.5px}
.c5-aslide .c5-beat p+p{margin-top:10px}
.c5-aslide .c5-gfig{animation:c5pop .5s .1s both}
.c5-afcap{font-size:12.5px; color:#4F5B6B; margin-top:8px; line-height:1.45}
.c5-bignum{text-align:center}
.c5-bignum span{display:block; font-family:var(--serif); font-size:96px; font-weight:600; color:var(--brand-line); line-height:1}
.c5-bignum b{display:block; font-family:var(--serif); font-size:20px; max-width:320px; margin:10px auto 0}
.c5-qpaper{border:1px solid var(--line-2); border-radius:4px; padding:20px 22px; background:#fff; box-shadow:0 10px 26px -18px rgba(16,26,46,.4); max-width:440px; margin:0 auto; width:100%; animation:c5pop .5s .1s both}
.c5-qph{display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #E3E8EF; padding-bottom:10px; margin-bottom:14px; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.c5-qph .tag{margin-left:4px}
.c5-qq{font-family:var(--serif); font-size:17px; line-height:1.55; color:#141B26; margin:0 0 12px}
.c5-qlines i{display:block; border-bottom:1px dotted #B8C2CE; height:24px}
/* the perfect answer */
.c5-pfgrid{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:18px; align-items:start; padding:16px; border:1px solid var(--line-2); border-radius:6px}
.c5-perfect{border:2px solid var(--ok); border-radius:8px; overflow:hidden; animation:c5pop .5s both; min-width:0}
.c5-pfh{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 16px; background:var(--ok); color:#fff; flex-wrap:wrap}
:root[data-theme="dark"] .c5-pfh{color:#0B1A13}
.c5-pfb{font-family:var(--serif); font-weight:600; font-size:18px}
.c5-pfs{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.c5-paper{position:relative; padding:16px 20px 16px 46px; background:repeating-linear-gradient(#fff 0 29px,#E6EDF5 29px 30px)}
.c5-paper::before{content:""; position:absolute; left:30px; top:0; bottom:0; border-left:2px solid #F0B9B4}
.c5-ptext{font-family:var(--serif); font-size:18px; line-height:30px; color:#141B26; overflow-wrap:anywhere}
.chem2.c5 .c5-ptext mark.ms{background:#DFF3E8; box-shadow:inset 0 -2px 0 #11704F; color:#0B4F37}
.c5-tick{display:inline-block; color:#fff; background:#11704F; border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:12px; font-family:var(--ui); font-weight:800; margin:0 4px 0 3px; vertical-align:2px; animation:c5tick .4s both; animation-delay:calc(.5s + var(--i)*.35s)}
@keyframes c5tick{from{transform:scale(0); opacity:0}70%{transform:scale(1.3)}to{transform:scale(1); opacity:1}}
.c5-pff{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 16px; background:var(--ok-soft); border-top:1px solid var(--ok-line); font-size:13.5px; color:var(--ok)}
.c5-pff span:last-child{margin-left:6px; font-weight:600}
.c5-mkcard{padding:10px 16px; border-top:1px solid var(--line)}
.c5-mkdone{font-size:13.5px; font-weight:600; color:var(--ok)}
.c5-tk{width:18px; height:18px; border-radius:50%; background:var(--ok); color:#fff; display:inline-grid; place-items:center; font-size:11px; font-weight:800; animation:c5tick .4s both; animation-delay:calc(.5s + var(--i)*.35s)}
.c5-pfmore{display:grid; gap:16px; min-width:0}
.c5-pfm{border-left:2px solid var(--line-2); padding:4px 0 4px 14px; font-size:13.5px; color:var(--ink-2); overflow-wrap:anywhere}
.c5-pfk{display:block; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:4px}
.c5-say{font-family:var(--serif); font-size:16px; color:var(--ink); font-style:italic}
.c5-atables{margin-top:14px}
/* the big button at the end of every angle */
.c5-drillbig{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 20px; width:100%; text-align:left; margin-top:18px; padding:22px 26px; border:1.5px solid var(--ink); border-radius:6px; background:var(--ink); color:var(--paper); cursor:pointer}
.c5-drillbig:hover{background:var(--ink-2)}
.c5-dl{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.c5-dt{font-family:var(--serif); font-size:26px; font-weight:600; grid-column:1}
.c5-ds{font-size:14px; opacity:.75; grid-column:1}
.c5-da{grid-column:2; grid-row:1/4; font-size:30px}
.c5-lastnav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px}
.c5-nextang{text-align:left; border:1px solid var(--line-2); border-radius:6px; padding:10px 16px; background:var(--paper); max-width:60%; cursor:pointer}
.c5-nextang:hover{border-color:var(--brand); background:var(--wash)}
.c5-nl{display:block; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.c5-nn{display:block; font-family:var(--serif); font-weight:600; font-size:15px; margin-top:4px; line-height:1.3}

/* ---------- Drilling: one angle at a time ---------- */
.c5-dtop{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.chem2.c5 .c5-back{background:none; border:0; color:var(--brand); font-weight:700; font-size:13px; cursor:pointer; padding:4px 0}
.c5-dbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 10px; flex-wrap:wrap}
.c5-qdots{display:flex; gap:4px; flex-wrap:wrap}
.c5-qdots button{width:22px; height:6px; border:0; border-radius:3px; background:var(--line-2); padding:0; cursor:pointer}
.c5-qdots button.cur{background:var(--brand-line)} .c5-qdots button.y{background:var(--ok)} .c5-qdots button.n{background:var(--flag)}
.c5-self{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.chem2.c5 .btn.c5-yes{border-color:var(--ok-line); color:var(--ok); background:var(--ok-soft)}
.chem2.c5 .btn.c5-no{border-color:var(--flag-line); color:var(--flag); background:var(--flag-soft)}
.c5-summary{text-align:center; padding:30px 20px; border-top:1px solid var(--line-2); margin-top:14px}
.c5-summary .btnrow{justify-content:center}
.c5-big{font-family:var(--serif); font-size:44px; font-weight:600; color:var(--brand)}

/* ---------- Applying: two tabs ---------- */
.c5-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line-2); margin:6px 0 20px}
.c5-tabs button{padding:10px 14px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink-2); cursor:pointer}
.c5-tabs button[aria-pressed="true"]{border-bottom-color:var(--brand); color:var(--ink)}
.c5-tabs .c{font-family:var(--tt); font-size:11.5px; color:var(--ink-3); margin-left:4px}
.c5-chips{margin:0 0 20px}
.c5-chips .c,.c5-ppf .chip .c{font-family:var(--tt); font-size:11px; opacity:.7; margin-left:3px}
.chem2.c5 .c5-cph2{display:flex; gap:10px; align-items:baseline}
.c5-code{font-family:var(--tt); font-size:12px; color:var(--brand)}

/* ---------- Past papers: filed under their angles ---------- */
.c5-ppf{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:14px 0; margin:0 0 18px}
.c5-ppfh{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0}
.c5-ppfh b{font-size:14px}
.c5-ppg{margin-top:10px}
.c5-ppgt{font-family:var(--tt); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.chem2.c5 .c5-ppf .chip{font-size:12.5px; text-align:left; max-width:100%}
.c5-pph{display:flex; gap:12px; align-items:baseline; margin:28px 0 12px}
.c5-an{font-family:var(--tt); font-size:11px; color:var(--brand); white-space:nowrap}
.chem2.c5 .c5-pph h3{font-family:var(--serif); font-weight:600; font-size:17px; margin:0}
/* the typed questions carry the paper's answer lines as runs of dots, which cannot wrap;
   now the questions are on screen from the first look, they must not widen the card */
.chem2.c5 .ppq,.chem2.c5 .ppstem{overflow-wrap:anywhere; min-width:0}

/* ---------- Exam mastery: the lines to learn, sorted ---------- */
.c5-sg{margin-bottom:20px}
.c5-sgh{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:8px}
.chem2.c5 .c5-sgh h3{font-family:var(--serif); font-weight:600; font-size:17px; margin:0}
.c5-sgh span{font-size:13px; color:var(--ink-3)}
.c5-eqcard{position:relative; border:1px solid var(--line-2); border-left:3px solid var(--brand); border-radius:4px; padding:14px 18px 12px; margin:12px 0; background:var(--surface-2)}
.c5-eqtag{position:absolute; top:-8px; right:12px; background:var(--paper); padding:0 6px; font-family:var(--tt); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.c5-eqbig{font-family:var(--serif); font-size:21px; font-weight:600}
.c5-eqnote{font-size:14px; color:var(--ink-2); margin-top:4px}
.c5-chain{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 0; font-family:var(--serif); font-size:16.5px}
.c5-chain span{border:1px solid var(--line-2); border-radius:4px; padding:4px 10px; background:var(--paper)}
.c5-chain b{color:var(--brand)}

/* ---------- How you are doing: angle by angle ---------- */
.c5-dg{margin-top:14px}
.c5-dgh{font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); padding-bottom:6px; border-bottom:1px solid var(--line-2)}
.c5-drow{display:grid; grid-template-columns:28px 1fr 160px 50px; gap:12px; align-items:center; width:100%; text-align:left; padding:9px 4px; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer}
.c5-drow:hover{background:var(--wash)}
.c5-dn{font-family:var(--tt); color:var(--ink-3); font-size:12px}
.c5-dt2{font-family:var(--serif); font-size:15px; font-weight:600}
.c5-dbar2{display:flex; height:8px; background:var(--wash); border-radius:2px; overflow:hidden}
.c5-dbar2 i.y{background:var(--ok)} .c5-dbar2 i.n{background:var(--flag)}
.c5-dv{font-family:var(--tt); font-size:12px; color:var(--ink-2); text-align:right}

@media (max-width:900px){
  .chem2.c5 .stepper.c5-slides,.c5-aslide{grid-template-columns:1fr; min-height:0}
  .c5-vis{border-right:0; border-bottom:1px solid var(--line); border-radius:6px 6px 0 0}
  .chem2.c5 .sbody.c5-txt,.c5-txt{border-radius:0 0 6px 6px}
  .c5-reader{grid-template-columns:1fr; gap:0}
  .c5-toc{display:none} .c5-tocm{display:block}
  .c5-pfgrid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .c5-vis{padding:16px 12px} .chem2.c5 .sbody.c5-txt,.c5-txt{padding:18px 16px}
  .c5-beat{font-size:16.5px}
  .c5-kbd{display:none}
  .c5-fbtns{width:100%} .chem2.c5 .btn.c5-next{flex:1}
  .c5-grouph{flex-wrap:wrap} .c5-grouph p{margin-left:0; text-align:left; width:100%}
  .c5-meta .tag{display:none}
  .c5-paper{padding:14px 14px 14px 34px; background:repeating-linear-gradient(#fff 0 29px,#E6EDF5 29px 30px)} .c5-paper::before{left:22px}
  .c5-ptext{font-size:16.5px}
  .c5-lastnav .c5-nextang{max-width:none; flex:1}
  .c5-dt{font-size:21px}
  .c5-drow{grid-template-columns:24px 1fr 60px 40px}
  .c5-pph{flex-direction:column; gap:2px}
}

/* ---------- the drawn 2.1.4 scenes (app/chem-scenes.js), every class prefixed cs- ---------- */

.cs-pan{display:none}
.cs-pan.cs-in{display:block}
.cs-pop{opacity:0}
.cs-pan.cs-in .cs-pop{animation:cs-pop .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i,0)*170ms)}
@keyframes cs-pop{from{opacity:0; transform:translateY(10px) scale(.97)}to{opacity:1; transform:none}}
.cs-lab{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:4px 0 12px; text-align:center}
.cs-lab:not(:first-child){margin-top:20px}
.cs-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin:8px 0}
.cs-row.cs-nowrap{flex-wrap:nowrap}
.cs-tile{border:1px solid var(--line-2); border-radius:6px; padding:12px 14px; text-align:center; background:var(--paper); min-width:96px; transition:border-color .3s, box-shadow .3s}
.cs-tile .cs-f{font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.2}
.cs-tile .cs-nm{font-size:12px; color:var(--ink-3); margin-top:3px; max-width:150px}
.cs-tile .cs-stag{margin-top:8px}
.cs-tile.cs-focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cs-tile.cs-hp .cs-f,.cs-tile.cs-oh .cs-f{color:var(--brand)}
.cs-tile.cs-an .cs-f{color:var(--ink)}
.cs-stag{display:inline-block; font-family:var(--tt); font-size:10.5px; letter-spacing:.04em; padding:3px 8px; border:1px solid var(--line-2); border-radius:3px; color:var(--ink-2); background:var(--paper)}
.cs-stag.cs-b2{border-color:var(--brand-line); color:var(--brand-ink); background:#F3F7FD}
.cs-stag.cs-warn{border-color:var(--flag-line); color:var(--flag); background:var(--flag-soft)}
.cs-stag.cs-big{font-size:12.5px; padding:6px 12px}
.cs-eqn{font-family:var(--serif); font-size:19px; text-align:center; margin:8px auto; line-height:1.5}
.cs-eqn.cs-hero{font-size:24px; font-weight:600}
.cs-eqn .cs-ss{font-size:.62em; color:var(--ink-3); font-weight:400; margin-left:1px; transition:color .3s}
.cs-eqn .cs-ss.cs-on{color:var(--brand); font-weight:700; font-size:.7em}
.cs-glowbox{border:1.5px solid var(--brand); background:#F3F7FD; border-radius:6px; padding:8px 16px; display:table}
.cs-arr{font-size:26px; color:var(--brand); display:flex; flex-direction:column; align-items:center; line-height:1}
.cs-arr span{font-family:var(--tt); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px}
.cs-gb{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border:1px solid var(--line-2); border-radius:6px; font-size:16px; margin:8px 0; background:var(--paper)}
.cs-gb .cs-ic{width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px}
.cs-gb.cs-good{border-color:var(--ok-line)} .cs-gb.cs-good .cs-ic{background:var(--ok)}
.cs-gb.cs-bad{border-color:var(--flag-line)} .cs-gb.cs-bad .cs-ic{background:var(--flag)}
.cs-gb.cs-bad span:last-child{color:var(--ink-2)}
.cs-col2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cs-note-chip{font-size:14px; color:var(--ink-2); padding:8px 14px; border-left:2px solid var(--line-2); margin:8px auto; max-width:440px}
.cs-note-chip.cs-brand{border-left-color:var(--brand); color:var(--ink)}
.cs-big-f{font-family:var(--serif); font-size:52px; font-weight:600; text-align:center; margin:10px 0 18px; letter-spacing:.01em}
.cs-hH{font-weight:inherit; transition:all .4s}
.cs-showH .cs-hH,.cs-hH.cs-glow{color:var(--brand); background:#E3ECF9; box-shadow:inset 0 -2px 0 var(--brand); padding:0 2px; border-radius:2px}
.cs-hH.cs-glow{animation:cs-glow 1.6s .4s ease-in-out infinite}
@keyframes cs-glow{50%{background:#C9DAF4}}
.cs-hO{font-weight:inherit} .cs-showO .cs-hO{color:var(--ok); background:var(--ok-soft); box-shadow:inset 0 -2px 0 var(--ok); padding:0 2px}
.cs-ch3{transition:opacity .4s} .cs-dimmed{opacity:.3}
.cs-defcard{text-align:center; padding:20px 10px}
.cs-defcard .cs-dk{font-family:var(--tt); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.cs-defcard .cs-dv{font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.3; margin:12px auto 18px; max-width:460px}
.cs-defcard .cs-dv b{color:var(--brand)}
.cs-water{font-family:var(--tt); font-size:12px; padding:8px 12px; background:#EAF3FC; color:#2A6AA8; border-radius:20px}
.cs-split{display:flex; gap:10px}
.cs-split .cs-pop:last-child{animation-name:cs-popR!important}
@keyframes cs-popR{from{opacity:0; transform:translateX(-30px)}to{opacity:1; transform:none}}
.cs-checks{display:grid; gap:10px; margin-top:12px}
.cs-ck{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:6px; padding:12px 14px}
.cs-ck .cs-n{font-family:var(--tt); color:var(--brand); font-size:13px; padding-top:2px}
.cs-tally{display:flex; gap:10px; font-family:var(--serif); font-size:22px; font-weight:600; margin-top:4px}
.cs-tally span:nth-child(odd){color:var(--brand)}
.cs-mini-map{font-size:14px; color:var(--ink-2); margin-top:4px}
.cs-venn{position:relative; height:260px; display:grid; place-items:center}
.cs-vo{width:330px; height:240px; border-radius:50%; border:2px solid var(--line-2); display:flex; flex-direction:column; align-items:center; padding-top:26px; background:var(--wash)}
.cs-venn>.cs-pop{grid-area:1/1; display:grid; place-items:center}
.cs-vi{position:relative; width:200px; height:130px; border-radius:50%; border:2px solid var(--brand); background:#F3F7FD; display:flex; flex-direction:column; align-items:center; justify-content:center; top:40px; text-align:center}
.cs-vt{font-family:var(--serif); font-weight:600; font-size:20px}
.cs-vs{font-size:12.5px; color:var(--ink-2)}
.cs-lattice{display:grid; grid-template-columns:repeat(4,auto); gap:4px; padding:10px; border:1px solid var(--line-2); border-radius:4px}
.cs-lattice i{font-style:normal; font-family:var(--serif); font-size:13px; padding:3px 6px; background:var(--wash); border-radius:3px}
.cs-lattice i.cs-o{color:var(--ok); background:var(--ok-soft)}
.cs-hop span{display:inline-block; font-family:var(--serif); font-weight:700; color:var(--brand); padding:4px 8px; border:1.5px dashed var(--brand); border-radius:20px; animation:cs-hop 1.8s 1s ease-in-out infinite}
.cs-hop.cs-in span{animation-name:cs-hopL}
@keyframes cs-hop{0%,100%{transform:translateX(30px)}50%{transform:translateX(-30px)}}
@keyframes cs-hopL{0%{transform:translateX(30px)}60%,100%{transform:translateX(-10px)}}
.cs-seesaw{display:flex; align-items:center; justify-content:center; gap:14px; transform:rotate(-6deg); margin:24px 0}
.cs-ss-l,.cs-ss-r{font-family:var(--serif); font-size:22px; font-weight:600; padding:16px 18px; border:1px solid var(--line-2); border-radius:6px; text-align:center}
.cs-ss-l{font-size:26px; border-color:var(--brand); background:#F3F7FD}
.cs-ss-r{font-size:16px; opacity:.75}
.cs-ss-l span,.cs-ss-r span{display:block; font-family:var(--tt); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.cs-ss-m{font-size:28px; color:var(--brand)}
.cs-beaker{display:flex; flex-direction:column; align-items:center; gap:6px}
.cs-glass{width:170px; height:150px; border:2px solid var(--ink-3); border-top:0; border-radius:0 0 18px 18px; position:relative; background:linear-gradient(to top,#EAF3FC 78%,transparent 78%); display:flex; flex-wrap:wrap; align-content:flex-end; justify-content:center; gap:4px; padding:8px; overflow:hidden}
.cs-beaker.cs-small .cs-glass{width:120px; height:110px}
.cs-beaker.cs-big .cs-glass{width:150px; height:160px}
.cs-beaker .cs-bl{font-family:var(--tt); font-size:11px; color:var(--ink-2); letter-spacing:.04em}
.cs-mol{display:inline-flex; gap:2px; font-size:10.5px}
.cs-mol i{font-style:normal; padding:2px 4px; border-radius:3px; background:#fff; border:1px solid var(--line-2)}
.cs-mol.cs-dis i{animation:cs-apart 1s both; animation-delay:calc(.6s + var(--i)*.12s)}
.cs-mol.cs-dis i.cs-h{color:var(--brand); border-color:var(--brand-line)}
@keyframes cs-apart{from{transform:translateX(0)}to{transform:translateX(var(--dx,0))}}
.cs-mol.cs-dis i.cs-h{--dx:-3px} .cs-mol.cs-dis i.cs-a{--dx:3px}
.cs-strong .cs-glass{background:linear-gradient(to top,#E6EEFB 78%,transparent 78%)}
.cs-cmp{display:grid; gap:10px; max-width:520px; margin:0 auto}
.cs-cmp-h,.cs-cmp-r{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; align-items:center}
.cs-cmp-h span{font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cs-cl{font-size:14px}
.cs-cb{position:relative; height:28px; background:var(--wash); border-radius:3px; overflow:hidden}
.cs-cb em{position:absolute; left:8px; top:4px; font-style:normal; font-size:12.5px; font-weight:600}
.cs-fillbar{display:block; height:100%; width:0; background:#D6E3F6}
.cs-fillbar.cs-w{background:#ECE3F6}
.cs-pan.cs-in .cs-fillbar{animation:cs-fill 1s .4s both}
@keyframes cs-fill{to{width:var(--w)}}
.cs-axcard{border:1px solid var(--line-2); border-radius:6px; padding:18px 22px; text-align:center; min-width:200px}
.cs-axcard b{display:block; font-family:var(--serif); font-size:21px}
.cs-axcard span{color:var(--ink-2); font-size:14px}
.cs-axes{max-width:540px; margin:0 auto}
.cs-ax-top,.cs-ax-row{display:grid; grid-template-columns:70px 1fr 1fr; gap:8px; align-items:stretch}
.cs-ax-top span{font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:center}
.cs-ax-row{margin-top:8px}
.cs-ax-l{font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center}
.cs-cell{border:1px solid var(--line-2); border-radius:6px; padding:10px; text-align:center; transition:all .4s; height:100%}
.cs-cell b{display:block; font-size:13.5px} .cs-cell span{font-size:12px; color:var(--ink-3)}
.cs-cell .cs-dots{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; min-height:22px; margin-bottom:6px}
.cs-cell .cs-dots i{width:7px; height:7px; border-radius:50%; background:var(--brand-line)}
.cs-mv .cs-cell.cs-from{opacity:.45; border-style:dashed}
.cs-mv .cs-cell.cs-to{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.cs-ax-cap{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-top:8px}
.cs-map2{display:grid; gap:10px; max-width:500px; margin:0 auto 10px}
.cs-map2>div>div,.cs-map2>.cs-pop>div{display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--line-2); border-radius:6px; align-items:center}
.cs-map2 span{color:var(--ink-2); font-size:14px} .cs-map2 b{font-family:var(--serif); font-size:17px; text-align:right}
.cs-tree{text-align:center}
.cs-troot{display:inline-block; font-family:var(--serif); font-weight:600; font-size:22px; padding:10px 22px; border:1.5px solid var(--ink); border-radius:6px}
.cs-troot span{display:block; font-family:var(--tt); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.cs-tkids{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:22px; position:relative}
.cs-tkids::before{content:""; position:absolute; left:12%; right:12%; top:-12px; border-top:1px solid var(--line-2)}
.cs-tkid{border:1px solid var(--line-2); border-radius:6px; padding:10px 8px; transition:all .4s; height:100%}
.cs-tkid b{display:block; font-family:var(--serif); font-size:15.5px} .cs-tkid span{font-size:12px; color:var(--ink-3)}
.cs-tkid .cs-stag{margin-top:8px; font-size:9.5px; white-space:normal}
.cs-tkid.cs-alk{border-color:var(--brand); background:#F3F7FD}
.cs-tkid.cs-focus{border-color:var(--flag-line); background:var(--flag-soft)}
.cs-bubbles i{position:absolute; bottom:6px; left:var(--x); width:9px; height:9px; border-radius:50%; border:1.5px solid #6A9CCF; animation:cs-rise 1.8s var(--d) ease-in infinite}
@keyframes cs-rise{from{transform:translateY(0); opacity:1}to{transform:translateY(-120px); opacity:0}}
.cs-fizz .cs-glass{background:linear-gradient(to top,#EEF4FB 70%,transparent 70%)}
.cs-milky .cs-glass{animation:cs-milk 2.4s 1s both}
@keyframes cs-milk{from{background:linear-gradient(to top,#EEF4FB 70%,transparent 70%)}to{background:linear-gradient(to top,#E8E8E4 70%,transparent 70%)}}
.cs-cuo .cs-glass .cs-solid{position:absolute; bottom:6px; left:30%; right:30%; height:16px; background:#222; border-radius:8px 8px 2px 2px; animation:cs-dissolve 2.4s 1.2s both}
@keyframes cs-dissolve{to{opacity:0; transform:scaleY(.2)}}
.cs-blue .cs-glass{animation:cs-blue 2.4s 1.4s both}
@keyframes cs-blue{from{background:linear-gradient(to top,#EEF4FB 70%,transparent 70%)}to{background:linear-gradient(to top,#7DB2E8 70%,transparent 70%)}}
.cs-ind .cs-glass{animation:cs-pinkoff 2.4s 1s infinite alternate}
@keyframes cs-pinkoff{from{background:linear-gradient(to top,#F5B9D6 70%,transparent 70%)}to{background:linear-gradient(to top,#F4F6F8 70%,transparent 70%)}}
.cs-thermo{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--ink-2)}
.cs-thermo .cs-tube{width:16px; height:140px; border:2px solid var(--ink-3); border-radius:10px; position:relative; overflow:hidden}
.cs-thermo .cs-tube i{position:absolute; bottom:0; left:0; right:0; height:20%; background:var(--flag); animation:cs-warm 2s .8s both}
@keyframes cs-warm{to{height:78%}}
.cs-ions .cs-t{display:inline-block; margin:0 4px; position:relative; transition:opacity .5s}
.cs-ions .cs-t.cs-x{opacity:.32}
.cs-ions .cs-t.cs-x::after{content:""; position:absolute; left:-3px; right:-3px; top:52%; border-top:2px solid var(--flag); animation:cs-strike .5s .6s both; transform-origin:left}
@keyframes cs-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cs-ions .cs-t.cs-ar{color:var(--brand)}
.cs-fan{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.cs-fan span{font-family:var(--serif); font-size:16px; padding:6px 12px; border:1px solid var(--line-2); border-radius:4px}
.cs-crystal{font-family:var(--serif); font-size:26px; font-weight:600; padding:16px 20px; border:2px solid var(--ink-3); transform:rotate(45deg)}
.cs-evap .cs-glass{gap:8px; align-content:center}
.cs-ion{font-family:var(--serif); font-size:14px; padding:2px 6px; background:#fff; border:1px solid var(--line-2); border-radius:3px; animation:cs-shrink 3s 1.4s both}
@keyframes cs-shrink{to{opacity:.25}}
.cs-namemap{display:grid; gap:8px; max-width:520px; margin:0 auto}
.cs-nm-r{display:grid; grid-template-columns:1.2fr 20px .8fr 20px 1fr; gap:8px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:6px}
.cs-nm-r .cs-mono{font-family:var(--serif); font-size:18px; color:var(--brand)}
.cs-nm-s{font-family:var(--serif); font-weight:600; font-size:17px}
.cs-arrow-s{color:var(--brand)}
.cs-ox{font-family:var(--serif); font-size:40px; font-weight:600; color:var(--flag)}
.cs-dock{display:flex; flex-direction:column; gap:6px}
.cs-pr{font-family:var(--serif); font-weight:700; color:var(--brand); padding:3px 9px; border:1.5px solid var(--brand); border-radius:20px; display:inline-block}
.cs-pan.cs-in .cs-dock .cs-pop{animation-name:cs-dockin}
@keyframes cs-dockin{from{opacity:0; transform:translateX(60px)}to{opacity:1; transform:none}}
.cs-count{display:grid; gap:8px; max-width:440px; margin:0 auto 10px}
.cs-count>div>div,.cs-count>.cs-pop>div{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:6px; text-align:center}
.cs-count b{font-family:var(--serif); font-size:18px} .cs-count span{font-size:12px; color:var(--ink-3); font-family:var(--tt); text-transform:uppercase; letter-spacing:.1em}
.cs-calc{display:inline-flex; gap:10px; align-items:baseline; font-family:var(--serif); font-size:20px; padding:10px 18px; border:1px solid var(--line-2); border-radius:6px}
.cs-calc b{color:var(--brand); font-size:24px}
.cs-calc-col{display:grid; gap:12px; justify-items:center}
.cs-eqsign{font-size:28px; color:var(--ink-3)}
.cs-br{color:var(--brand)}
.cs-flow{display:flex; align-items:stretch; gap:5px; justify-content:center; flex-wrap:wrap; margin:8px 0 16px}
.cs-fbox{flex:1 1 0; min-width:92px; max-width:200px; border:1px solid var(--line-2); border-radius:6px; padding:12px; text-align:center; position:relative; transition:all .35s; background:var(--paper)}
.cs-fbox .cs-fi{display:block; font-family:var(--tt); font-size:11px; color:var(--ink-3); margin-bottom:4px}
.cs-fbox b{display:block; font-family:var(--serif); font-size:17px}
.cs-fbox span:last-child{display:block; font-size:12.5px; color:var(--ink-2); margin-top:4px}
.cs-fbox.cs-on{border-color:var(--brand); background:#F3F7FD; box-shadow:0 0 0 3px var(--brand-soft); transform:translateY(-3px)}
.cs-fbox.cs-on .cs-fi{color:var(--brand)}
.cs-fbox.cs-done{border-color:var(--brand-line)}
.cs-farr{align-self:center; color:var(--brand); font-size:20px}
.cs-pan.cs-in .cs-flow .cs-fbox{animation:cs-pop .5s both; animation-delay:calc(var(--i)*150ms)}
.cs-examples,.cs-statekey,.cs-ratios,.cs-chain,.cs-ticklist{display:grid; gap:8px; max-width:520px; margin:0 auto}
.cs-ex{display:flex; gap:12px; justify-content:center; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:6px; font-size:15px}
.cs-ex b{font-family:var(--serif); font-size:19px; color:var(--brand)}
.cs-statekey>div>div,.cs-statekey>.cs-pop>div,.cs-ratios>.cs-pop>div,.cs-chain>.cs-pop>div{display:flex; justify-content:space-between; gap:14px; align-items:center; padding:10px 16px; border:1px solid var(--line); border-radius:6px}
.cs-statekey b{font-family:var(--serif); font-size:18px; color:var(--brand); flex:none}
.cs-statekey span{color:var(--ink-2); font-size:14px; text-align:right}
.cs-ratios b,.cs-chain b{font-family:var(--serif); font-size:19px; color:var(--brand)}
.cs-chain>.cs-pop+.cs-pop{position:relative}
.cs-chain>.cs-pop+.cs-pop::before{content:"↓"; position:absolute; left:50%; top:-14px; color:var(--brand-line); font-size:13px}
.cs-steps6{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cs-s6{border:1px solid var(--line); border-radius:6px; padding:12px; text-align:center; height:100%}
.cs-s6 .cs-si{display:block; font-size:22px; margin-bottom:4px}
.cs-s6 b{display:block; font-family:var(--serif); font-size:15.5px}
.cs-s6 span:last-child{font-size:12px; color:var(--ink-2)}
.cs-formula{display:flex; justify-content:center; gap:14px; font-family:var(--serif); font-size:44px; font-weight:600; margin:10px 0}
.cs-formula>.cs-pop{display:flex; gap:14px; align-items:baseline}
.cs-formula span:nth-child(2n){color:var(--ink-3); font-weight:400}
.cs-formula.cs-sm{font-size:22px}
.cs-formula.cs-sm b{color:var(--brand)}
.cs-rig-wrap{display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center}
.cs-rig{position:relative; height:330px}
.cs-bur{position:absolute; left:58px; top:0; width:20px; height:200px; border:2px solid var(--ink-3); border-radius:3px 3px 0 0; background:repeating-linear-gradient(to bottom,transparent 0 17px,var(--line-2) 17px 18px)}
.cs-bur .cs-liq{position:absolute; left:0; right:0; bottom:0; height:0; background:#BFD6F2; transition:height 1s}
.cs-r1 .cs-bur .cs-liq,.cs-r2 .cs-bur .cs-liq{height:92%} .cs-r3 .cs-bur .cs-liq{height:40%}
.cs-bur .cs-tap{position:absolute; bottom:-12px; left:-8px; width:32px; height:8px; background:var(--ink-3); border-radius:2px}
.cs-bur::after{content:""; position:absolute; bottom:-30px; left:7px; width:2px; height:18px; background:var(--ink-3)}
.cs-bur .cs-drop{position:absolute; left:5px; bottom:-34px; width:6px; height:8px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:#7FA8DA; opacity:0}
.cs-drip .cs-bur .cs-drop{animation:cs-drip 1.1s .6s infinite ease-in}
@keyframes cs-drip{0%{opacity:1; transform:translateY(0)}100%{opacity:0; transform:translateY(42px)}}
.cs-flask{position:absolute; left:28px; top:240px; width:80px; height:66px; clip-path:polygon(38% 0,62% 0,62% 24%,100% 100%,0 100%,38% 24%); background:var(--ink-3)}
.cs-flask .cs-fl-liq{position:absolute; inset:2px; clip-path:polygon(38% 0,62% 0,62% 24%,100% 100%,0 100%,38% 24%); background:linear-gradient(to top,#F5B9D6 45%,#fff 45%); transition:background 1s}
.cs-r0 .cs-flask .cs-fl-liq{background:linear-gradient(to top,#F5B9D6 45%,#fff 45%)}
.cs-r2 .cs-flask{animation:cs-swirl 1.2s ease-in-out infinite}
@keyframes cs-swirl{50%{transform:rotate(4deg)}}
.cs-end .cs-flask .cs-fl-liq{background:linear-gradient(to top,#FCEFF5 45%,#fff 45%)}
.cs-tile-w{position:absolute; left:10px; top:306px; width:120px; height:14px; background:#fff; border:1px solid var(--line-2); font-family:var(--tt); font-size:8px; text-align:center; color:var(--ink-3); line-height:12px}
.cs-rig-notes{display:grid; gap:10px}
.cs-rn{border-left:2px solid var(--brand); padding:6px 0 6px 14px}
.cs-rn b{display:block; font-family:var(--serif); font-size:17px}
.cs-rn span{display:block; font-size:13.5px; color:var(--ink-2); margin-top:2px}
.cs-sw{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:4px; vertical-align:-1px; border:1px solid rgba(0,0,0,.1)}
.cs-sw.cs-pink{background:#F08CBE} .cs-sw.cs-yel{background:#F2D24B} .cs-sw.cs-red{background:#D9473B} .cs-sw.cs-ora{background:#EE8E37}
.cs-uni{display:flex; height:38px; border-radius:4px; overflow:hidden; max-width:420px; margin:0 auto 12px}
.cs-uni i{flex:1}
table.cs-tt{border-collapse:collapse; margin:0 auto; font-family:var(--serif); font-size:16px; width:auto}
table.cs-tt th,table.cs-tt td{border:1px solid var(--line-2); padding:7px 14px; text-align:center; transition:all .4s}
table.cs-tt th{background:var(--wash); font-family:var(--tt); font-size:11px; letter-spacing:.08em}
table.cs-tt td:first-child{text-align:left; font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; color:var(--ink-2)}
table.cs-tt .cs-titre td{font-weight:600}
.cs-k1 .cs-titre td:not(:first-child){animation:cs-pop .5s both; animation-delay:calc(.4s + var(--i)*.2s)}
.cs-k2 .cs-trial,.cs-k3 .cs-trial,.cs-k4 .cs-trial{opacity:.35; text-decoration:line-through}
.cs-k3 .cs-con,.cs-k4 .cs-con{background:#E3ECF9; color:var(--brand-ink)}
.cs-k3 .cs-out,.cs-k4 .cs-out{color:var(--flag)}
.cs-scale{position:relative; width:90px; height:200px; margin:0 auto; border:2px solid var(--ink-3); border-radius:4px; background:#EAF3FC}
.cs-scale .cs-ticks{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:6px 0}
.cs-scale .cs-ticks i{display:block; width:24px; border-top:1px solid var(--ink-3)} .cs-scale .cs-ticks i.cs-l{width:44px}
.cs-scale .cs-men{position:absolute; left:0; right:0; top:46%; height:14px; border-bottom:2px solid var(--brand); border-radius:0 0 50% 50%}
.cs-scale span{position:absolute; right:-70px; top:44%; font-family:var(--serif); font-weight:600; color:var(--brand)}
.cs-bandbar{position:relative; height:60px; max-width:440px; margin:12px auto; border-top:1px solid var(--line-2)}
.cs-bandbar span{position:absolute; top:6px; transform:translateX(-50%); font-family:var(--serif); font-size:14px; color:var(--flag)}
.cs-bandbar span.cs-c{color:var(--brand)}
.cs-bandbar i{position:absolute; top:30px; height:10px; background:#D6E3F6; border:1px solid var(--brand)}
.cs-bandbar i::after{content:"within 0.10"; position:absolute; top:12px; left:0; font-family:var(--tt); font-size:10px; color:var(--brand); white-space:nowrap}
.cs-bars{display:grid; gap:8px; max-width:480px; margin:0 auto}
.cs-br{display:grid; grid-template-columns:70px 1fr 60px; gap:10px; align-items:center; font-size:13px}
.cs-br .cs-bt{height:20px; background:var(--wash); border-radius:3px; overflow:hidden}
.cs-br .cs-bv{font-family:var(--serif); font-weight:600}
.cs-ticklist>.cs-pop>div{display:flex; gap:12px; align-items:center; padding:9px 14px; border:1px solid var(--line); border-radius:6px; font-size:15px}
.cs-tk{width:22px; height:22px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800}
.cs-targets{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cs-tg{text-align:center}
.cs-tg .cs-board{position:relative; width:150px; height:150px; margin:0 auto 8px; border-radius:50%; background:radial-gradient(circle,#fff 0 12%,#E3ECF9 12% 30%,#fff 30% 50%,#E3ECF9 50% 70%,#fff 70%); border:1px solid var(--line-2)}
.cs-tg .cs-board i{position:absolute; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:var(--flag)}
.cs-tg b{display:block; font-family:var(--serif); font-size:17px} .cs-tg span{font-size:13px; color:var(--ink-2)}
.cs-s11 .cs-tile{min-width:104px; padding:10px 10px} .cs-s11 .cs-row{gap:8px}

@media (max-width:600px){
  .cs-row.cs-nowrap{flex-wrap:wrap}
  .cs-col2,.cs-targets{grid-template-columns:1fr}
  .cs-tkids{grid-template-columns:1fr 1fr}
  .cs-steps6{grid-template-columns:1fr 1fr}
  .cs-eqn.cs-hero{font-size:19px} .cs-big-f{font-size:38px} .cs-formula{font-size:32px} .cs-defcard .cs-dv{font-size:23px}
  .cs-vo{width:280px} .cs-vi{width:180px}
  .cs-rig-wrap{grid-template-columns:1fr} .cs-rig{width:150px; margin:0 auto}
  .cs-nm-r{grid-template-columns:auto 14px auto 14px auto; font-size:13px; padding:8px 10px}
  .cs-glass{width:130px}
}

/* ==========================================================================
   THE BIOLOGY PAGE IN THE CHEMISTRY STYLE (Victor, Oct 2026) — renderSpecPage()
   adds .b5 to every biology page. Learn is left exactly as it is; Recall, Apply,
   Past papers and Exam mastery take the look of the redesigned chemistry page.
   Every new class is b5-*; the existing controls keep their own classes.
   ========================================================================== */
.b5{--serif:var(--display); --wash:var(--sunk); --ok:#11704F; --ok-soft:#E3F3EB; --ok-line:#A9D7C0}
/* the stages: tabs across the top, as on chemistry */
.b5 .path{display:flex; gap:2px; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:none; padding:0; margin-top:18px; overflow-x:auto; box-shadow:none}
.b5 .path .step{flex:0 0 auto; display:flex; align-items:flex-start; gap:8px; padding:11px 12px 9px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--ink-2); font-family:var(--serif); font-size:15.5px; font-weight:600; white-space:nowrap}
.b5 .path .step[aria-selected="true"]{border-bottom-color:var(--brand); color:var(--ink); background:none}
.b5 .path .step .n{background:none!important; border:0; width:auto; height:auto; font-family:var(--tt); font-size:11.5px; font-weight:500; color:var(--ink-3); padding-top:3px}
.b5 .path .step[aria-selected="true"] .n{color:var(--brand)}
.b5-stx{display:flex; flex-direction:column; line-height:1.2; text-align:left}
.b5-stx em{font-style:normal; font-family:var(--ui); font-size:10.5px; font-weight:500; color:var(--ink-3); margin-top:2px}
/* the stage heads */
.b5-head{margin:8px 0 22px}
.b5 .b5-head .eyebrow{font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0}
.b5-h{font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-.01em; margin:6px 0 6px}
.b5-lede{font-family:var(--serif); font-size:16.5px; color:var(--ink-2); margin:0}
/* the doors: Flashcards / Blurt / Exercises, Written / Multiple choice */
.b5 .seg.b5-choose{display:grid; gap:14px; background:none; border:0; padding:0; margin:0 0 30px; border-radius:0}
.b5 .seg.b5-three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.b5 .seg.b5-two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.b5 .seg.b5-choose button{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto; gap:2px 14px; align-items:start; text-align:left; padding:20px 20px 16px; border:1.5px solid var(--line-2); border-radius:8px; background:var(--paper); color:var(--ink); box-shadow:none; height:auto; min-height:150px; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.b5 .seg.b5-choose button:hover{border-color:var(--brand-line)}
.b5 .seg.b5-choose button[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:var(--paper)}
.b5-ic{grid-row:1/3; width:42px; height:42px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:20px; font-weight:800; font-family:var(--tt)}
.b5 .seg.b5-choose button[aria-pressed="true"] .b5-ic{background:var(--brand); color:#fff}
.b5-dt{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.2}
.b5-dn{font-family:var(--tt); font-size:11px; letter-spacing:.06em; color:var(--brand)}
.b5-dd{grid-column:1/-1; font-size:14px; color:var(--ink-2); line-height:1.45; margin-top:10px; font-weight:400}
.b5-dgo{grid-column:1/-1; font-family:var(--tt); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:12px}
.b5 .seg.b5-choose button[aria-pressed="true"] .b5-dgo{color:var(--brand)}
/* flashcards on the page */
.b5-deck{margin:0 0 26px}
.b5-dchips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.b5-dchips .c{font-family:var(--tt); font-size:11px; opacity:.7; margin-left:3px}
.b5 .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.b5-card{border:1.5px solid var(--line-2); border-radius:10px; padding:26px 30px; min-height:240px; background:var(--paper); box-shadow:0 14px 34px -24px rgba(16,26,46,.45); animation:b5in .35s both}
.b5-card.flipped{border-color:var(--ok); background:linear-gradient(var(--paper),var(--paper)) padding-box}
@keyframes b5in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.b5-cardk{display:flex; justify-content:space-between; gap:10px; font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:14px}
.b5-cardk span{color:var(--ink-3)}
.b5-front{font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.4}
.b5-back{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-2); font-family:var(--serif); font-size:17px; line-height:1.6; animation:b5in .35s both}
.b5-back ul{margin:0; padding-left:20px} .b5-back li{margin:6px 0}
.b5-hint{margin-top:22px; color:var(--ink-3); font-size:14px}
.b5-dctl{display:flex; justify-content:space-between; gap:10px; margin-top:14px}
.b5 .btn.b5-next{background:var(--ink); border-color:var(--ink); color:var(--paper); padding:12px 22px}
.b5-dnote{margin-top:10px}
.b5 .lnk{background:none; border:0; padding:0; color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:inherit}
/* content-point filters as chips */
.b5 .filters.cpfilters,.b5 .pp-cpbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; border:0; background:none; padding:0; margin:0 0 22px}
.b5 .filters .lbl,.b5 .pp-cpbar .cpb-t{font-family:var(--tt); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-right:4px}
.b5 .filters .fbtn,.b5 .pp-cpbar .cpb{border:1px solid var(--line-2); border-radius:4px; background:var(--paper); padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.b5 .filters .fbtn[aria-pressed="true"],.b5 .pp-cpbar .cpb.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.b5 .pp-cpbar .cpb b{font-family:var(--tt); font-weight:500; opacity:.7; margin-left:3px}
/* section headings inside a stage: content point, then its questions */
.b5 .qsec-h{margin:30px 0 12px; padding:0 0 8px; border-bottom:1px solid var(--line-2); background:none}
.b5 .qsec-h h4{font-family:var(--serif); font-weight:600; font-size:18px; margin:0; display:flex; gap:10px; align-items:baseline}
.b5 .qsec-h p{color:var(--ink-3); font-size:13.5px; margin:4px 0 0}
.b5 .qsec-h.b5-cph{margin-top:34px}
.b5-code{font-family:var(--tt); font-size:12px; color:var(--brand); font-weight:500}
.b5-cnt{font-family:var(--tt); font-size:11px; color:var(--ink-3); font-weight:500; margin-left:auto}
/* question cards: ruled sheets, serif questions */
.b5 .panel[data-tab="recall"] .qcard,.b5 .panel[data-tab="apply"] .qcard{border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:none; padding:20px 0; margin:0}
.b5 .qcard .qc-h{padding:0; background:none; border:0}
.b5 .qcard .qtext{font-family:var(--serif); font-size:17px; line-height:1.6}
.b5 .qcard .qnum{font-family:var(--tt); color:var(--ink-3)}
.b5 .qcard .qc-b{padding:12px 0 0}
.b5 .qcard textarea{border-radius:4px}
.b5 .qcard .opt{border-radius:4px}
/* the old one-line blurbs go: the stage head says it */
.b5 .panel[data-tab="recall"] > .levelbar,.b5 .panel[data-tab="apply"] > .levelbar{display:none}
.b5 .panel[data-tab="recall"] .sec,.b5 .panel[data-tab="apply"] .sec,.b5 .panel[data-tab="papers"] .sec{border:0; border-top:1px solid var(--line-2); border-radius:0; box-shadow:none; background:none}
.b5 .sec-head h3{font-family:var(--serif); font-weight:600}
.b5 .sec-head .cp{font-family:var(--tt); font-weight:500; color:var(--brand); background:none; border:0}
/* past papers */
.b5 .pp{border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:none; padding:22px 0; margin:0}
/* exam mastery: every section folds */
.b5 .panel[data-tab="mastery"] .sec.b5-fold{border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:none; margin:0}
.b5 .sec.b5-fold > .sec-head{cursor:pointer; padding:18px 0; position:relative}
.b5 .sec.b5-fold > .sec-head::after{content:"+"; position:absolute; right:0; top:14px; font-size:22px; color:var(--ink-3)}
.b5 .sec.b5-fold.open > .sec-head::after{content:"–"}
.b5 .sec.b5-fold > .sec-body{display:none; padding:0 0 22px}
.b5 .sec.b5-fold.open > .sec-body{display:block}
.b5 .sec.b5-fold .sec-head h3{font-size:19px}
details.b5-anal{border-top:1px solid var(--line-2); margin:0 0 6px}
details.b5-anal > summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; flex-direction:column; position:relative}
details.b5-anal > summary::-webkit-details-marker{display:none}
details.b5-anal > summary::after{content:"+"; position:absolute; right:0; top:14px; font-size:22px; color:var(--ink-3)}
details.b5-anal[open] > summary::after{content:"–"}
.b5-mt{font-family:var(--serif); font-weight:600; font-size:19px}
.b5-ms{font-size:13.5px; color:var(--ink-3); margin-top:2px}
.b5 .mnav{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:14px 0; margin:0 0 6px; background:none; border-radius:0}
.b5 .mnav ol{columns:2}
@media (max-width:900px){ .b5 .seg.b5-three,.b5 .seg.b5-two{grid-template-columns:1fr} .b5 .seg.b5-choose button{min-height:0} .b5-stx em{display:none} .b5 .mnav ol{columns:1} }
@media (max-width:600px){ .b5-h{font-size:24px} .b5-card{padding:20px 18px} .b5-front{font-size:19px} .b5 .path .step{padding:10px 8px; font-size:14px} }
.b5 .seg.b5-choose button,.b5 .seg.b5-choose button *{white-space:normal; overflow:visible; text-overflow:clip}
.b5 .seg.b5-choose button{width:auto; min-width:0}
.b5-ic{font-size:15px; letter-spacing:-.02em; overflow:hidden}

/* ================= onboarding first, account last (app/onboard.js) =================
   The boards, then the sign-up screen that comes after the welcome and the tour.
   Every rule is scoped under #obHost (and #obToast). */
#obHost{position:fixed; inset:0; z-index:210; display:grid; place-items:center; grid-template-columns:minmax(0,1fr); padding:16px;
  background:rgba(7,18,15,.66); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:obFade .3s ease both; font-size:15px; overflow-y:auto}
#obHost[hidden]{display:none}
/* the page underneath stays put while the boards or the sign-up are on screen */
body.onboarding{overflow:hidden}
#obHost .ob-sign{width:min(1020px,100%)}
#obHost .ob-card{position:relative; width:min(980px,100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 80px -24px rgba(0,0,0,.55);
  overflow:hidden; animation:obIn .45s cubic-bezier(.3,.8,.3,1) both}
#obHost .ob-card::before{content:""; position:absolute; inset:0 0 auto 0; height:220px; pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, var(--brand-soft), transparent 70%)}
#obHost .ob-pick{width:min(860px,100%)}
#obHost .ob-top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px 0; flex-wrap:wrap}
#obHost .ob-brand{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:var(--ink-2)}
#obHost .ob-mark{width:18px; height:18px; border-radius:5px; background:linear-gradient(140deg,#14877A,#084B54)}
#obHost .ob-link{font:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer}
#obHost .ob-link:hover{color:var(--ink); border-color:var(--line-2)}
#obHost .ob-body{position:relative; padding:22px 32px 6px; overflow-y:auto}
#obHost .ob-tag{margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-ink)}
#obHost .ob-h{margin:0 0 12px; font-family:"Source Serif 4",Georgia,serif; font-size:clamp(24px,3.6vw,34px); line-height:1.15; font-weight:600; letter-spacing:-.01em; max-width:20em}
#obHost .ob-p{margin:0 0 16px; color:var(--ink-2); line-height:1.55; max-width:40em}
#obHost .ob-fine{font-size:12.5px; color:var(--ink-3); line-height:1.45; margin:0}

/* the board tiles */
#obHost .ob-boards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 22px}
#obHost .ob-board{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  padding:14px 14px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform .15s, box-shadow .15s, background .15s}
#obHost .ob-board:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
#obHost .ob-board.bio{border-top:3px solid var(--brand)}
#obHost .ob-board.chem{border-top:3px solid var(--blue)}
#obHost .ob-board.on{box-shadow:0 0 0 2px var(--brand); background:var(--brand-soft)}
#obHost .ob-board.chem.on{box-shadow:0 0 0 2px var(--blue); background:var(--blue-soft)}
#obHost .ob-bs{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
#obHost .ob-board b{font-size:16px}
#obHost .ob-board small{color:var(--ink-3); font-size:12px}
#obHost .ob-tick{position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  font-size:11px; font-weight:800; color:#fff; background:var(--line-2); opacity:.0; transition:opacity .15s}
#obHost .ob-board.on .ob-tick{opacity:1; background:var(--brand)}
#obHost .ob-board.chem.on .ob-tick{background:var(--blue)}

/* the three steps */
#obHost .ob-steps{list-style:none; margin:0 0 6px; padding:0; display:flex; gap:8px; flex-wrap:wrap}
#obHost .ob-steps li{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-3);
  padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2)}
#obHost .ob-steps em{font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; background:var(--line); color:var(--ink-2)}
#obHost .ob-steps li.done{color:var(--brand-ink)}
#obHost .ob-steps li.done em{background:var(--brand); color:#fff}
#obHost .ob-steps li.now{color:var(--ink); border-color:var(--brand-line); background:var(--brand-soft)}
#obHost .ob-steps li.now em{background:var(--ink); color:var(--surface)}
#obHost .ob-top .ob-steps{margin:0}

#obHost .ob-foot{position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 32px 22px; border-top:1px solid var(--line); flex-wrap:wrap}
#obHost .ob-btn{font:inherit; font-size:15px; font-weight:800; color:#fff; background:var(--brand); border:0; border-radius:12px; padding:13px 22px; cursor:pointer;
  box-shadow:0 8px 20px -10px var(--brand); transition:transform .15s, filter .15s}
#obHost .ob-btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
#obHost .ob-btn[disabled]{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
#obHost .ob-btn.ob-wide{width:100%; margin-top:4px}

/* the sign-up screen */
#obHost .ob-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; padding:22px 32px 28px; overflow-y:auto}
#obHost .ob-pitch > *, #obHost .ob-stats > *, #obHost .ob-value > *{animation:obUp .55s cubic-bezier(.25,.8,.3,1) both; animation-delay:var(--d,0s)}
#obHost .ob-stats{display:flex; flex-wrap:wrap; gap:8px 30px; margin:0 0 20px}
#obHost .ob-stats div{display:flex; flex-direction:column}
#obHost .ob-stats dt{font-size:26px; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums}
#obHost .ob-stats dd{margin:0; color:var(--ink-3); font-size:13px}
#obHost .ob-value{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:12px}
#obHost .ob-value li{display:flex; gap:12px; align-items:flex-start}
#obHost .ob-vi{flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:var(--brand-soft); border:1px solid var(--brand-line)}
#obHost .ob-value b{display:block; font-size:14.5px; margin-bottom:2px}
#obHost .ob-value small{display:block; color:var(--ink-2); font-size:13px; line-height:1.45}
#obHost .ob-loss{margin:0; font-size:13px; color:var(--ink-3); font-style:italic}
#obHost .ob-formcard{align-self:start; border:1px solid var(--line); border-radius:18px; padding:22px 22px 18px; background:var(--surface-2); box-shadow:var(--shadow)}
#obHost .ob-formcard h2{margin:0 0 10px; font-size:20px; font-weight:800}
#obHost .ob-chips{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
#obHost .ob-chips li{font-size:12px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:3px 10px}
#obHost .ob-chips li::before{content:"✓ "}
#obHost .ob-form{display:grid; gap:12px}
#obHost .ob-form label{display:grid; gap:5px; font-size:13px; font-weight:700; color:var(--ink-2)}
#obHost .ob-form input{width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink)}
#obHost .ob-form input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent}
#obHost .ob-form fieldset{border:0; margin:0; padding:0; min-width:0}
#obHost .ob-form legend{font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px; padding:0}
#obHost .ob-mini{display:flex; flex-wrap:wrap; gap:6px}
#obHost .ob-mchip{font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:5px 11px; cursor:pointer}
#obHost .ob-mchip.on{color:#fff; background:var(--brand); border-color:var(--brand)}
#obHost .ob-mchip.chem.on{background:var(--blue); border-color:var(--blue)}
#obHost .ob-err{margin:0; font-size:13px; color:var(--flag); font-weight:600}
#obHost .ob-swap{margin:12px 0 0; font-size:13px; color:var(--ink-3); text-align:center}
#obHost .ob-swap button{font:inherit; font-weight:700; color:var(--brand-ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
#obHost .ob-formcard .ob-fine{margin-top:12px; text-align:center}

@media (max-width:760px){
  #obHost{padding:0; place-items:stretch}
  #obHost .ob-card{max-height:none; min-height:100dvh; border-radius:0; border:0}
  #obHost .ob-body, #obHost .ob-grid{padding:18px 16px 8px}
  #obHost .ob-top{padding:14px 16px 0}
  #obHost .ob-foot{padding:14px 16px 18px}
  #obHost .ob-foot .ob-btn{width:100%}
  #obHost .ob-boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #obHost .ob-grid{grid-template-columns:minmax(0,1fr); gap:20px}
  #obHost .ob-top .ob-steps li{font-size:11.5px; padding:4px 9px 4px 4px}
  #obHost .ob-top .ob-steps em{width:18px; height:18px; font-size:10px}
}

#obHost .ob-jump{display:none}
@media (max-width:760px){
  #obHost .ob-jump{display:block; position:fixed; left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:2; font:inherit; font-size:15px; font-weight:800;
    color:#fff; background:var(--brand); border:0; border-radius:14px; padding:14px; box-shadow:0 14px 30px -10px rgba(0,0,0,.45); transition:opacity .2s, transform .2s}
  #obHost .ob-jump.gone{opacity:0; transform:translateY(12px); pointer-events:none}
  #obHost .ob-grid{padding-bottom:28px}
  #obHost .ob-loss{margin-bottom:0}
}
#obToast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:220; display:flex; gap:10px; align-items:center;
  background:var(--ink); color:var(--surface); font-weight:700; font-size:14px; padding:12px 18px; border-radius:14px; box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
  animation:obUp .4s ease both; max-width:calc(100vw - 32px)}
#obToast.out{opacity:0; transition:opacity .4s}

@keyframes obFade{from{opacity:0}to{opacity:1}}
@keyframes obIn{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
@keyframes obUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ #obHost *, #obHost, #obToast{animation:none !important; transition:none !important} }

/* ---- Practise it on paper: the Apply / Past papers download row ---- */
.pdf-dl{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px}
.pdf-dl .pdf-l{font-size:12.5px; color:var(--ink-3); margin-right:2px}
@media (max-width:520px){ .pdf-dl .pdf-l{flex-basis:100%} }
/* the Download as PDF chooser */
.pdfform{display:flex; flex-direction:column; gap:6px}
.pdfform .pdfh{margin:10px 0 2px; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3)}
.pdfform .pdfh:first-child{margin-top:0}
.pdfopt{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; font-size:14px; color:var(--ink)}
.pdfopt:hover{border-color:var(--line-2)}
.pdfopt input{flex:none; width:16px; height:16px; margin:0; accent-color:var(--brand)}
.pdfopt .t{flex:1; min-width:0; overflow-wrap:anywhere}
.pdfopt .t b{font-family:var(--mono, monospace); font-size:12px; color:var(--brand); margin-right:4px}
.pdfopt .c{flex:none; font-size:12px; color:var(--ink-3)}
.pdfopt.all{background:var(--sunk); font-weight:600}
.pdfcps{display:flex; flex-direction:column; gap:6px; max-height:min(46vh,340px); overflow:auto; padding-left:14px}
.pdfdocs{display:flex; gap:8px; flex-wrap:wrap}
.pdfdocs .pdfopt{flex:1; min-width:130px}
.pdfform .btnrow{margin-top:12px}