/* ============================================================================
   Math practice - styles
   Layout ported from the Algebra Step Engine prototype: one working column,
   the problem on graph paper, the solution player, then the mastery ledger.
   Colors are the Retention brand (retention_mobile/src/constants/colors.ts,
   same values as financial/public/styles.css). Fonts are system fonts, so the
   site makes no third-party requests.
   ========================================================================== */

:root {
  --bg: #e8f1fa;            /* blue-lightest, BG_SURFACE_SECONDARY */
  --surface: #ffffff;
  --paper: #fbfdff;
  --grid: rgba(23, 117, 201, 0.07);
  --ink: #1a2029;           /* black */
  --muted: #495c74;         /* neutral */
  --line: #dceaf7;          /* blue-lighter */
  --line-strong: #b7d4ee;   /* blue-light, card border */
  --accent: #1775c9;        /* brand blue */
  --accent-ink: #ffffff;
  --accent-soft: #e8f1fa;
  --mark: #fff0a6;
  --good: #0d8f52;          /* green-mid: green text needs the darker shade */
  --good-soft: #ecfdf5;
  --bad: #c9421a;           /* red-mid */
  --bad-soft: #ffeee9;
  --warn: #a8560f;
  --warn-soft: #fef4eb;
  --elevation-one: 0 6px 10px rgba(3, 139, 234, 0.1);
  --f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body: var(--f-display);
  --f-math: "STIX Two Math", "STIX Two Text", "Cambria Math", Cambria, "Latin Modern Roman", "Times New Roman", serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1520; --surface: #161e2b; --paper: #131b27; --grid: rgba(111, 176, 236, 0.07);
    --ink: #e6ebf2; --muted: #9aa7b8; --line: #263244; --line-strong: #364459;
    --accent: #6fb0ec; --accent-ink: #0e1520; --accent-soft: #1a2b42;
    --mark: #4d4212; --good: #5ccb8b; --good-soft: #132a1e; --bad: #ff8b7b; --bad-soft: #341b17; --warn: #e3b04b; --warn-soft: #30260f;
    --elevation-one: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1520; --surface: #161e2b; --paper: #131b27; --grid: rgba(111, 176, 236, 0.07);
  --ink: #e6ebf2; --muted: #9aa7b8; --line: #263244; --line-strong: #364459;
  --accent: #6fb0ec; --accent-ink: #0e1520; --accent-soft: #1a2b42;
  --mark: #4d4212; --good: #5ccb8b; --good-soft: #132a1e; --bad: #ff8b7b; --bad-soft: #341b17; --warn: #e3b04b; --warn-soft: #30260f;
  --elevation-one: none;
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ---------- site chrome ---------- */
.topbar { max-width: 780px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-left, 0px)) 0; display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { color: var(--muted); font-weight: 600; }
.site-footer { max-width: 780px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.site-footer a { color: var(--accent); }
.panel { box-shadow: var(--elevation-one); }
a.btn { text-decoration: none; }
noscript p { max-width: 780px; margin: 24px auto; padding: 0 16px; }

/* ---------- from the prototype ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body)}
.wrap{max-width:780px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 56px;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-direction:column;gap:4px}
.eyebrow{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font:600 clamp(28px,6vw,38px)/1.05 var(--f-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font:600 19px/1.2 var(--f-display);margin:0;letter-spacing:.005em}
.sub{color:var(--muted);margin:2px 0 0;max-width:62ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lbl{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:56px}
.chip{font:500 14px/1 var(--f-body);padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.chip .id{font:500 11px/1 var(--f-mono);color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip[aria-pressed="true"] .id{color:inherit;opacity:.7}
.levels{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.levels button{font:500 14px/1 var(--f-mono);width:40px;height:36px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.levels button:last-child{border-right:0}
.levels button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.lvdesc{color:var(--muted);font-size:13.5px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--muted);margin-left:auto}
.switch input{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;margin:0;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(14px)}
.btn{font:600 14px/1 var(--f-body);padding:11px 15px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent);padding-inline:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{font-size:13px;padding:8px 11px}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* problem sheet */
.sheet{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sheet-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.prompt{font:600 16px/1.3 var(--f-body)}
.math{font-family:var(--f-math);font-variant-numeric:lining-nums}
.math var{font-style:italic;font-family:var(--f-math)}
.math .eqn{font:500 12px/1 var(--f-mono);color:var(--muted);margin-right:10px;vertical-align:2px}
.math .or{font:italic 400 .8em var(--f-body);color:var(--muted);margin:0 .5em}
.display{font-size:clamp(23px,5.6vw,30px);line-height:1.45;overflow-x:auto;padding-block:4px}
.display div{white-space:nowrap}
.answer{display:flex;gap:8px;flex-wrap:wrap}
.answer input{flex:1 1 220px;min-width:0;font:400 20px/1.2 var(--f-math);padding:11px 13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink)}
.answer input:disabled{opacity:.6}
.keys{display:flex;gap:6px;flex-wrap:wrap}
.keys button{font:400 16px/1 var(--f-math);min-width:38px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);cursor:pointer}
.fmt{font-size:13px;color:var(--muted)}
.feedback{font-size:14.5px;padding:10px 12px;border-radius:9px;display:none}
.feedback.show{display:block}
.feedback.good{background:var(--good-soft);color:var(--good)}
.feedback.bad{background:var(--bad-soft);color:var(--bad)}
.feedback.warn{background:var(--warn-soft);color:var(--warn)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions .spacer{flex:1}

/* hints */
.hints{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.hints:empty{display:none}
.hint{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:9px 12px}
.hint .n{font:500 11px/1 var(--f-mono);color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.hint .t{font-weight:600}
.hint .math{font-size:18px;display:block;margin-top:2px;overflow-x:auto}

/* result */
.result{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.result .score{font:600 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
.result .meta{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--muted);min-width:0}
.result .meta strong{color:var(--ink);font-weight:600}
.result .ans{font-size:18px;color:var(--ink)}

/* tree */
.tree-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tree{display:flex;flex-direction:column;min-width:0}
.node{display:grid;grid-template-columns:30px 1fr;gap:12px;position:relative;padding-bottom:14px}
.node::before{content:"";position:absolute;left:14px;top:28px;bottom:0;width:2px;background:var(--line)}
.node.last::before{display:none}
.dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;font:500 12px/1 var(--f-mono);color:var(--muted);position:relative;z-index:1}
.node.start .dot{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.node.end .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.node.check .dot{border-color:var(--good);color:var(--good)}
.nbody{min-width:0;padding-top:3px;display:flex;flex-direction:column;gap:3px}
.act{font-weight:600;line-height:1.35}
.rule{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.expr{font-size:19px;line-height:1.5;overflow-x:auto}
.expr div{white-space:nowrap}
.node.end .expr div:first-child{background:var(--mark);display:inline-block;padding:0 6px;border-radius:4px}
.node.check .expr{color:var(--good);font-size:16px}
.fork{border:1px dashed var(--line-strong);border-radius:12px;padding:12px;margin:0 0 6px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.fork-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fork-top .lbl{min-width:0}
.tab{font:500 13.5px/1 var(--f-body);padding:8px 11px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.tab[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.tab small{font:500 10px/1 var(--f-mono);margin-left:5px;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:14px;overflow-x:auto;padding-bottom:4px}
.col{min-width:0;display:flex;flex-direction:column;gap:10px}
.col-h{font:600 14px/1 var(--f-display);color:var(--accent);padding-bottom:6px;border-bottom:1px solid var(--line)}

/* ledger */
.ledger{display:flex;flex-direction:column;gap:12px}
.mrow{display:grid;grid-template-columns:minmax(0,170px) 1fr auto;gap:12px;align-items:center}
.mname{display:flex;flex-direction:column;gap:1px;min-width:0}
.mname .id{font:500 11px/1 var(--f-mono);color:var(--muted)}
.mname .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);position:relative;overflow:visible}
.bar .fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--accent)}
.bar .fill.solid{background:var(--good)}
.bar .fill.weak{background:var(--warn)}
.bar .tick{position:absolute;left:70%;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55}
.mval{font:500 13px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;min-width:92px}
.mval small{display:block;color:var(--muted);font-size:11px}
.pill{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px;display:inline-block;margin-top:3px}
.pill.solid{background:var(--good-soft);color:var(--good)}
.pill.weak{background:var(--warn-soft);color:var(--warn)}
.pill.none{background:var(--bg);color:var(--muted)}
.legend{font-size:12.5px;color:var(--muted)}
.log-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:500 10.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
td.prob{font-family:var(--f-math);font-size:14px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
textarea#fallback{width:100%;min-height:120px;font:12px/1.4 var(--f-mono);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* view switch + player */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.seg button{font:500 13.5px/1 var(--f-body);padding:9px 12px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.seg.speed button{font:500 12.5px/1 var(--f-mono);padding:9px 9px}
.player{display:flex;flex-direction:column;gap:12px;min-width:0}
.paths{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.caption{padding:12px 14px;border-radius:10px;background:var(--accent-soft);display:flex;flex-direction:column;gap:3px;min-height:76px}
.cap-k{font:500 11px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.cap-t{font:600 17px/1.3 var(--f-body)}
.cap-t var{font-family:var(--f-math);font-size:1.08em}
.cap-n{font-size:13.5px;color:var(--muted)}
.work-wrap{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;border:1px solid var(--line);border-radius:12px;padding:18px 16px;max-height:460px;overflow:auto;min-width:0}
.work{display:grid;grid-template-columns:max-content auto max-content;column-gap:12px;row-gap:3px;width:max-content;margin-inline:auto;font-family:var(--f-math);font-size:clamp(19px,4.6vw,25px);line-height:1.45;font-variant-numeric:lining-nums}
.work>div{white-space:nowrap}
.work .L{text-align:right}
.work .E{text-align:center;color:var(--muted)}
.work .W{grid-column:1 / -1}
.work .old{color:var(--muted)}
.work .old mark{background:none}
.work .chk{color:var(--good)}
.work .eqn{font:500 12px/1 var(--f-mono);color:var(--muted);margin-right:8px;vertical-align:3px}
.work .op{color:var(--accent);font-size:.78em;padding-bottom:3px;margin-bottom:5px}
.work .op.L,.work .op.R{border-bottom:1.5px solid var(--accent)}
.work .op.L{padding-left:10px}
.work .op.R{padding-right:10px}
.work .op:not(.curop){opacity:.6}
mark.chg{background:var(--mark);color:inherit;border-radius:4px;padding:0 3px;margin:0 -1px}
.enter{animation:rise .45s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.pctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ib{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.ib svg,.btn svg{width:14px;height:14px;fill:currentColor;flex:none}
.ib:disabled{opacity:.4;cursor:not-allowed}
#pPlay{min-width:104px;justify-content:center;height:38px}
.pcount{font:500 12.5px/1 var(--f-mono);color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.pbar{height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.pfill{height:100%;background:var(--accent);width:0;transition:width .3s}
@media (prefers-reduced-motion:reduce){.enter{animation:none}}
.course{font:600 15px/1 var(--f-body);padding:10px 36px 10px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23778'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);appearance:none;cursor:pointer;max-width:100%}
.course:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
sup{font-size:.62em;line-height:0;vertical-align:.85em;margin-left:.04em}
.nl{margin-top:6px;max-width:100%;overflow-x:auto}
.nl svg{display:block;width:320px;max-width:100%;height:auto}
.nl-axis{stroke:var(--muted);stroke-width:1.5;fill:none}
.nl-tick{stroke:var(--muted);stroke-width:1}
.nl-lab{fill:var(--muted);font:11px var(--f-mono);text-anchor:middle}
.nl-shade{stroke:var(--accent);stroke-width:5;stroke-linecap:round;fill:none}
.nl-arrow{fill:var(--accent)}
.nl-dot{fill:var(--accent);stroke:var(--accent);stroke-width:2}
.nl-dot.open{fill:var(--surface)}
.nl-val{fill:var(--accent);font:600 12px var(--f-mono);text-anchor:middle}
.work .nl svg{width:300px}
@media (max-width:520px){
  .mrow{grid-template-columns:1fr auto;}
  .mrow .bar{grid-column:1 / -1;grid-row:2}
  .switch{margin-left:0}
  .lbl{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- right-triangle figures (src/figure.ts) ---------- */
:root { --opp: var(--accent); --adj: #b45309; --hyp: var(--good); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --adj: #f0a35b; } }
:root[data-theme="dark"] { --adj: #f0a35b; }
.figure { display: flex; justify-content: center; }
.figure:empty { display: none; }
svg.tri { display: block; max-width: 100%; height: auto; overflow: visible; }
.tri-fill { fill: var(--accent-soft); opacity: .55; }
.tri-side { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.tri-side.tri-opp { stroke: var(--opp); }
.tri-side.tri-adj { stroke: var(--adj); }
.tri-side.tri-hyp { stroke: var(--hyp); }
.tri-side.tri-on { stroke-width: 4.5; }
.tri-dim { opacity: .3; }
.tri-right, .tri-arc { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.tri-angle { font: italic 500 16px var(--f-math); fill: var(--ink); }
.tri-label { font: 17px var(--f-math); fill: var(--ink); }
.tri-val { font-style: italic; }
.tri-role { font: 600 11px var(--f-body); letter-spacing: .04em; text-transform: uppercase; font-style: normal; }
tspan.tri-opp { fill: var(--opp); }
tspan.tri-adj { fill: var(--adj); }
tspan.tri-hyp { fill: var(--hyp); }
.expr .fig, .work .fig { margin-top: 6px; }
.work .fig svg { width: 300px; }
.learn-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.learn-link:hover { text-decoration: underline; }

/* ---------- trig explainer (/trig/) ---------- */
.lesson p { margin: 0; max-width: 66ch; }
.lesson .panel > p + p { margin-top: -4px; }
.lesson .note { color: var(--muted); font-size: 14px; }
.lesson code { font: 13px var(--f-mono); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.lesson .math { font-family: var(--f-math); font-size: 1.08em; }
.lesson var { font-family: var(--f-math); font-style: italic; }
.defs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.defs li { display: flex; gap: 10px; align-items: baseline; }
.sw { width: 18px; height: 4px; border-radius: 2px; flex: none; transform: translateY(-3px); }
.sw.opp { background: var(--opp); } .sw.adj { background: var(--adj); } .sw.hyp { background: var(--hyp); }
.c-opp { color: var(--opp); font-weight: 600; } .c-adj { color: var(--adj); font-weight: 600; } .c-hyp { color: var(--hyp); font-weight: 600; }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.sliders label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-weight: 600; font-size: 14px; }
.sliders output { font: 500 14px var(--f-mono); color: var(--accent); }
.sliders input[type=range] { width: 100%; accent-color: var(--accent); }
.ratios { display: flex; flex-direction: column; gap: 6px; }
.ratio { display: grid; grid-template-columns: 82px 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.ratio .rname { font: 500 14px var(--f-mono); }
.ratio strong { font: 600 15px var(--f-mono); font-variant-numeric: tabular-nums; }
.ratio .math { color: var(--muted); font-variant-numeric: tabular-nums; }
.soh { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.soh div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.soh b { font: 700 22px var(--f-display); letter-spacing: .06em; color: var(--accent); }
.soh span { font-size: 14.5px; }
.recipe, .levels-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.steps { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--paper); border-radius: 0 8px 8px 0; font-size: 19px; line-height: 1.6; overflow-x: auto; }
.steps div { white-space: nowrap; }
.example { display: flex; flex-direction: column; gap: 12px; }
.ex-q { font-size: 15px; }
.ex-steps { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.ex-steps li { padding-left: 4px; }
.ex-steps li.check .expr { color: var(--good); }
.ex-steps .act { font-weight: 600; }
.ex-steps .rule { font-size: 13.5px; color: var(--muted); }
.ex-steps .expr { font-size: 18px; overflow-x: auto; }
.ex-steps .expr div { white-space: nowrap; }
.ex-steps .figure { justify-content: flex-start; }
.ex-a { font-weight: 600; padding: 10px 12px; border-radius: 8px; background: var(--good-soft); color: var(--good); }
.callout { border-left: 4px solid var(--warn); }
.cta { border: 2px solid var(--accent); }
@media (max-width: 520px) { .ratio { grid-template-columns: 1fr auto; } .ratio .math { grid-column: 1; } }

/* ---------- unit circle figures (src/figure.ts) ---------- */
svg.uc { display: block; max-width: 100%; height: auto; overflow: visible; }
.uc-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.uc-circle { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.uc-q { font: 600 11px var(--f-mono); fill: var(--muted); opacity: .7; }
.uc-tick { font: 12px var(--f-mono); fill: var(--muted); }
.uc-ray { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.uc-arc { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.uc-label { font: italic 500 15px var(--f-math); fill: var(--accent); }
.uc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.uc-pt { font: 15px var(--f-math); fill: var(--ink); }
.uc-reftri { fill: var(--accent-soft); stroke: none; opacity: .9; }
.uc-drop { stroke: var(--opp); stroke-width: 2; stroke-dasharray: 4 3; }
.uc-refarc { fill: none; stroke: var(--hyp); stroke-width: 3; }
.uc-length { fill: none; stroke: var(--adj); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.readout { font-size: 15px; }
.big-fact { font-size: 19px; font-weight: 600; text-align: center; padding: 12px; border-radius: 10px; background: var(--accent-soft); max-width: none !important; }
table.exact td { font-family: var(--f-math); font-size: 15px; }
table.exact td:first-child { font-weight: 600; }
.lesson a:not(.btn):not(.brand):not(.learn-link) { color: var(--accent); }