/* AI Glassbox house style — warm, professional, "science museum not arcade" (PRD §12, §12.6). */
:root{
  --ink:#2a2620; --muted:#6d6456; --line:#e6dccb; --bg:#f2ebe0; --panel:#fffdfa;
  --accent:#2f6be6; --accent-soft:#e9f0ff;
  --accent-2:#e8703a; --accent-2-soft:#fdeadf; --gold:#e0a500;
  --ok:#1f9d6b; --warn:#c2410c;
  --shadow:0 1px 2px rgba(74,52,16,.06),0 6px 18px rgba(74,52,16,.10);
  --shadow-lift:0 8px 18px rgba(74,52,16,.13),0 22px 48px rgba(74,52,16,.17);
  --ring:inset 0 1px 0 rgba(255,255,255,.75);
  --panel-grad:linear-gradient(180deg,#fffefb,#fcf6ed);
  --brand-grad:linear-gradient(120deg,#2f6df0,#9b51e0,#e8703a,#1f9d6b);
  /* eight pillar "zones" — warm-leaning accents for per-pillar theming (PRD §12.2) */
  --zone1:#2f6be6; --zone2:#e8703a; --zone3:#1f9d6b; --zone4:#9b51e0;
  --zone5:#d6455a; --zone6:#0aa3a3; --zone7:#c98a00; --zone8:#5566d8;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
  background:
    radial-gradient(820px 360px at 10% -120px,rgba(232,112,58,.12),transparent 68%),
    radial-gradient(820px 380px at 92% -90px,rgba(85,102,216,.10),transparent 68%),
    radial-gradient(1100px 560px at 50% 118%,rgba(31,157,107,.07),transparent 70%),
    var(--bg);background-attachment:fixed}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.prism{display:inline-block;width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#2f6df0,#9b51e0,#e8703a,#1f9d6b);vertical-align:-2px;margin-right:8px;box-shadow:0 0 0 3px rgba(232,112,58,.12)}
.site-header{display:flex;align-items:center;gap:18px;padding:14px 24px;background:linear-gradient(180deg,#fffdf9,#fbf6ef);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(60,45,20,.03)}
.site-header .brand{font-size:18px;font-weight:600}
.site-header nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
.site-header nav a{color:var(--muted);transition:color .15s}
.site-header nav a:hover{color:var(--accent);text-decoration:none}
.hero{max-width:880px;margin:0 auto;padding:56px 24px 24px;text-align:center}
.hero h1{font-size:38px;line-height:1.15;margin:0 0 14px}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 24px}
.cta{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{font:inherit;font-size:15px;font-weight:600;border:1px solid transparent;background:linear-gradient(180deg,#3f78ee,var(--accent));color:#fff;padding:11px 20px;border-radius:9px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn.ghost{background:#fffdfa;color:var(--accent);border-color:var(--line)}
.btn.warm{background:linear-gradient(180deg,#f0824d,var(--accent-2));border-color:transparent}
.promises{max-width:880px;margin:24px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0 24px}
.promise{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.promise h3{margin:0 0 6px;font-size:15px}
.promise p{margin:0;color:var(--muted);font-size:13.5px}
/* studio */
.studio{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 24px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0;padding:12px 14px;border-bottom:1px solid var(--line)}
/* code editor: a transparent textarea sits over a highlighted <pre> that mirrors its text, with a
   line-number gutter pinned to the left. All three share IDENTICAL box metrics (font, line-height,
   top padding) so caret, highlight, and numbers line up. Non-wrapping (white-space:pre) keeps each
   logical line on one visual row, so a number always points at the right line; long lines scroll. */
.editor{position:relative}
.editor>.gutter{position:absolute;top:0;left:0;bottom:0;width:40px;overflow:hidden;padding:14px 0 0;background:#f1f4f9;border-right:1px solid var(--line);color:#9aa7bd;font:13.5px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;text-align:right;box-sizing:border-box;pointer-events:none;z-index:2;user-select:none}
.editor>.gutter .gutter-inner{padding:0 8px 0 0;white-space:pre}
.editor>.hl{position:absolute;inset:0;margin:0;padding:14px 14px 14px 48px;border:0;overflow:hidden;pointer-events:none;background:#fbfcfe;color:var(--ink);font:13.5px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;white-space:pre;box-sizing:border-box}
.editor>.hl code{font:inherit;white-space:inherit}
textarea#code{position:relative;z-index:1;display:block;width:100%;min-height:360px;border:0;padding:14px 14px 14px 48px;font:13.5px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;resize:vertical;background:transparent;caret-color:var(--ink);color:transparent;outline:none;white-space:pre;overflow:auto;box-sizing:border-box}
/* token colors — calm, museum palette (PRD §12) */
.tok-comment{color:#7a8aa0;font-style:italic}
.tok-string{color:#1f9d6b}
.tok-number{color:#c2410c}
.tok-keyword{color:#2f6df0;font-weight:600}
.tok-op{color:#7c3aed}
.toolbar{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:#fafbfe;flex-wrap:wrap}
button{font:inherit;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btnlink{font:inherit;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.btnlink:hover{border-color:var(--accent);text-decoration:none}
select{font:inherit;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:#fff}
.out{padding:12px 14px;max-height:560px;overflow:auto}
/* Studio Guide — a full-width helper rail under the editor + output. Context suggestions,
   a language cheat sheet, and safe ways to change the data. All text set with textContent. */
.studio>.guide{grid-column:1 / -1}
.guide-tabs{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.guide-tab{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:#f1f4f9;color:var(--muted);cursor:pointer}
.guide-tab.is-on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 -1px 0 var(--accent) inset}
.guide-body{padding:12px 14px;border-top:1px solid var(--line)}
.guide-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;background:var(--panel)}
.guide-card h3{margin:0 0 4px;font-size:14px}
.guide-card p{margin:0 0 8px;font-size:13px;color:#243049;line-height:1.5}
.guide-snippet{display:block;font:12.5px/1.5 "SF Mono",ui-monospace,Menlo,monospace;background:#f1f4f9;border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin:0 0 8px;white-space:pre-wrap;color:#243049}
.guide-actions{display:flex;gap:8px;flex-wrap:wrap}
.guide-insert{font-size:12.5px;padding:5px 10px;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;cursor:pointer}
.guide-link{font-size:12.5px;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:#f1f4f9;color:var(--ink);text-decoration:none}
.guide-ref h3{margin:12px 0 4px;font-size:13px;color:var(--accent-2)}
.guide-ref h3:first-child{margin-top:0}
.guide-ref dl{margin:0 0 4px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.guide-ref dt{font:12.5px/1.6 "SF Mono",ui-monospace,Menlo,monospace;color:#243049;white-space:nowrap}
.guide-ref dd{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
/* Curriculum "Go deeper" panel on sim pages (PRD §8 Phase A) — injected by curriculum-panel.js */
.cur-deeper{border-left:4px solid var(--accent)}
.cur-deeper .cur-lead{color:var(--muted);font-size:13.5px;margin-top:0}
.cur-deeper h3{font-size:14px;color:var(--accent-2);margin:14px 0 6px}
.cur-list{margin:0 0 6px;padding-left:20px;line-height:1.7}
.cur-list li{margin:2px 0}
.cur-history{font-size:14px;line-height:1.65;color:#243049}
.cur-history-who{font-weight:600;color:var(--ink)}
.cur-goal{font-size:14px;color:#243049;margin:0 0 8px}
.cur-starter{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px;font:13px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;color:#243049;margin:0 0 12px;overflow:auto}
.cur-starter code{font:inherit}
.cur-open{margin:0 0 10px}
.cur-todo-lead{font-weight:600;margin:6px 0 4px;color:var(--ink)}
.log{font:13px/1.55 "SF Mono",ui-monospace,Menlo,monospace;white-space:pre-wrap;color:#243049}
.err{color:var(--warn);font-weight:600;white-space:pre-wrap}
.hint{color:var(--muted);font-size:12.5px;padding:6px 0}
table.cm{border-collapse:collapse;font-size:12.5px;margin:6px 0}
table.cm td,table.cm th{border:1px solid var(--line);padding:4px 8px;text-align:center}
.net{display:flex;gap:34px;align-items:center;padding:10px 4px;flex-wrap:wrap}
.net .col{display:flex;flex-direction:column;gap:7px;align-items:center}
.net .neuron{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent)}
.net .label{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
/* decision tree */
.tree{font-size:13px;padding:4px 0}
.tree-node{padding:2px 0}
.tree-q{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent);border-radius:7px;padding:3px 9px;font-weight:600;color:#1c3a8a}
.tree-leaf{display:inline-block;background:#e7f6ee;border:1px solid var(--ok);border-radius:7px;padding:3px 9px;color:#0f6b48;font-weight:600}
.tree-branch{margin:3px 0 3px 10px;border-left:2px solid var(--line);padding-left:8px}
.tree-edge{font-size:11px;color:var(--muted);margin-left:2px}
/* train/test split */
.split-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:6px 0;font-size:11.5px;font-weight:600}
.split-train{background:#cdeede;color:#0f6b48;display:flex;align-items:center;justify-content:center;min-width:44px}
.split-test{background:#d8e6ff;color:#1c3a8a;display:flex;align-items:center;justify-content:center;min-width:44px}
/* data viewer */
table.data-table{border-collapse:collapse;font-size:12px;margin:6px 0}
table.data-table td,table.data-table th{border:1px solid var(--line);padding:3px 8px;text-align:left}
table.data-table th{background:var(--accent-soft);font-weight:600}
.data-stats{margin:6px 0;font-size:12px;color:var(--muted);padding-left:18px}
/* feature importance */
.imp{margin:6px 0;display:flex;flex-direction:column;gap:5px}
.imp-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.imp-name{width:110px;text-align:right;color:var(--ink)}
.imp-track{flex:1;background:#eef2f8;border-radius:6px;height:14px;overflow:hidden}
.imp-bar{height:100%;background:var(--accent);min-width:2px}
.imp-pct{width:48px;color:var(--muted)}
/* interactive "try a prediction" panel */
.predict-try{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.predict-field{display:flex;flex-direction:column;gap:2px;font-size:12px}
.predict-name{font-weight:600;color:var(--ink)}
.predict-input{width:88px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.predict-range{color:var(--muted);font-size:11px}
.predict-out{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:15px}
.predict-arrow{color:var(--muted)}
.predict-answer{font-weight:700;color:var(--accent);background:#eef6f1;border-radius:6px;padding:3px 10px}
/* random forest */
.forest{font-size:22px;line-height:1.4;margin:4px 0}
.forest-tree{margin-right:1px}
/* generated text samples */
.gen-list{margin:6px 0;font-size:13px;padding-left:18px}
/* transformer attention heatmap */
table.attn{border-collapse:collapse;font-size:12px;margin:6px 0}
table.attn td,table.attn th{border:1px solid var(--line);padding:4px 7px;text-align:center;min-width:30px}
table.attn th{background:var(--accent-soft);font-weight:600;color:#1c3a8a;font-size:11.5px}
/* q-learning gridworld */
.qgrid{display:grid;gap:3px;margin:8px 0}
.qcell{position:relative;width:46px;height:46px;border:1px solid var(--line);border-radius:7px;background:#fbfcfe;display:flex;align-items:center;justify-content:center;font-size:13px}
.qcell.q-goal{background:#e7f6ee;border-color:var(--ok);color:#0f6b48;font-weight:700}
.qcell.q-pit{background:#fbe7df;border-color:var(--warn);color:#9a3412;font-weight:700}
.qcell.q-on-path{box-shadow:inset 0 0 0 2px var(--accent)}
.q-arrow{font-size:20px;color:#1c3a8a;line-height:1}
.q-start{position:absolute;top:2px;left:4px;font-size:10px;font-weight:700;color:var(--muted)}
/* gallery */
.gallery{max-width:980px;margin:8px auto 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:0 24px}
.app-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.app-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.app-card h3{margin:0;font-size:16px}
.app-card p{margin:0;color:var(--muted);font-size:13.5px;flex:1}
.app-card .meta{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center}
.app-card .tag{background:var(--accent-soft);color:#1c3a8a;border-radius:20px;padding:2px 9px;font-weight:600}
.app-card.featured{border-color:var(--gold)}
.app-card .feat-badge{align-self:flex-start;background:var(--gold);color:#5a4500;border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.gallery-empty{max-width:880px;margin:0 auto;padding:0 24px;color:var(--muted)}
/* my projects */
.proj-actions{display:flex;gap:8px;margin-top:4px}
.proj-actions button{font-size:13px;padding:6px 12px}
/* deployed-app player */
.play{max-width:760px;margin:8px auto 24px;padding:0 24px}
.play .panel{padding:0}
.play .app-head{padding:16px;border-bottom:1px solid var(--line)}
.play .app-head h1{margin:0 0 6px;font-size:22px}
.play .app-head p{margin:0;color:var(--muted);font-size:14px}
.site-footer{padding:22px 24px 36px;margin-top:24px;color:var(--muted);font-size:12.5px;text-align:center;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,244,234,0),rgba(255,244,234,.5))}
.footer-links{margin-top:24px;padding:0 24px;text-align:center;font-size:13px}
.footer-links a{color:var(--muted);text-decoration:none;margin:0 10px;white-space:nowrap}
.footer-links a:hover{color:var(--accent);text-decoration:underline}
.footer-links a.donate{color:var(--accent-2);font-weight:600}
.donate-card{border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:18px 0;background:#fffdfa;box-shadow:var(--shadow)}
.donate-btn{display:inline-block;text-decoration:none}
.donate-btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.donate-soon{color:var(--muted);font-size:13.5px;margin-top:12px}
/* simulations */
.sim{max-width:1040px;margin:0 auto;padding:20px 24px 8px}
.sim-block,.sim>p{max-width:820px}
.sim-crumb{color:var(--muted);font-size:13px;margin:0 0 6px}
.sim h1{font-size:30px;margin:0 0 14px}
.sim-block{margin:22px 0}
.sim-block h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 8px}
.sim-block p{margin:0 0 10px}
.sim-block ul{margin:0;padding-left:20px}
.sim-block li{margin:5px 0}
.sim-deeper,.sim-howto{color:var(--muted);font-size:13.5px}
.sim-code{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px;font:13px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;color:#243049;margin:0 0 12px}
.sim-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sim-controls label{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sim-controls input[type=range]{vertical-align:middle}
.sim-ends{font-size:11.5px;color:var(--muted)}
.sim-words{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.sim-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;line-height:1.2}
.sim-chip.sel{border-color:var(--accent);background:var(--accent-soft)}
.sim-chip-word{font-weight:600;font-size:14px;color:var(--ink)}
.sim-chip-tag{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.sim-explain{margin:8px 0;font-size:14px;color:#243049;background:var(--accent-soft);border-radius:9px;padding:10px 12px}
table.attn tr.sel th{background:var(--accent);color:#fff}
.sim-whatif{margin:12px 0;font-size:13.5px;color:var(--muted);border-left:3px solid var(--accent);padding-left:12px}
/* live-math "go deeper" panel (shared by every sim) */
.sim-math{margin:10px 0 4px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.sim-math>summary{cursor:pointer;padding:8px 12px;font-weight:600;font-size:13px;color:var(--accent);list-style:none}
.sim-math>summary::-webkit-details-marker{display:none}
.sim-math>summary::before{content:"\25B8  "}
.sim-math[open]>summary::before{content:"\25BE  "}
.sim-math-body{padding:0 14px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);white-space:pre-wrap;line-height:1.65}
.sim-math-note{display:block;margin-top:8px;color:var(--muted);font-size:12.5px;font-style:italic}
/* line-of-best-fit sim (SVG) */
.sim-svg{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;touch-action:none}
.sim-svg .axis{stroke:var(--line);stroke-width:1.5}
.sim-svg .axlabel{fill:var(--muted);font-size:11px;text-anchor:middle}
.sim-svg .pt{fill:var(--ink)}
.sim-svg .resid{stroke:var(--warn);stroke-width:2;opacity:.65}
.sim-svg .fit-line{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.sim-svg .best-line{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:6 5;stroke-linecap:round}
.sim-svg .handle{fill:#fff;stroke:var(--accent);stroke-width:3;cursor:grab}
.sim-svg .handle:focus{outline:none;stroke:#1c3a8a}
.sim-svg .handle.drag{cursor:grabbing;fill:var(--accent-soft)}
.sim-read{margin:14px 0 6px}
.sim-num-label{font-size:12.5px;color:var(--muted);margin-bottom:5px}
.fit-bar{height:18px;background:#eef2f8;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.fit-bar-in{height:100%;background:var(--warn);width:0;transition:width .08s linear}
.fit-bar-in.win{background:var(--ok)}
.sim-num{font-size:13.5px;color:#243049;margin-top:6px;font-weight:600}
/* residuals sim (SVG): literal squares of the misses + a residual plot zero line */
.sim-svg .resq{fill:rgba(214,107,58,.16);stroke:var(--warn);stroke-width:1}
.sim-svg .zero{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:4 4;opacity:.7}
/* k-nearest-neighbors sim (SVG) */
.knn-capture{cursor:crosshair}
.sim-svg .knn-a{fill:#d23b3b}
.sim-svg .knn-b{fill:#e0a500}
.sim-svg .knn-link{stroke:var(--muted);stroke-width:1.5;opacity:.5}
.sim-svg .knn-ring{fill:none;stroke-width:2.5}
.sim-svg .knn-ring.is-a{stroke:#d23b3b}
.sim-svg .knn-ring.is-b{stroke:#e0a500}
.sim-svg .knn-q{stroke:#1c2433;stroke-width:2.5;fill:#fff}
.sim-svg .knn-q.is-a{fill:#f6d0d0}
.sim-svg .knn-q.is-b{fill:#f7e6b0}
.sim-svg .knn-qmark{text-anchor:middle;font-size:13px;font-weight:700;fill:var(--ink)}
.knn-vote{font-size:14px;color:#243049}
.knn-tally-a{color:#b32d2d;font-weight:600}
.knn-tally-b{color:#a87800;font-weight:600}
/* k-means sim (SVG) */
.sim-svg .km-pt{stroke:#fff;stroke-width:1}
.sim-svg .km-link{stroke-width:1.2;opacity:.35}
.sim-svg .km-cen{stroke:#1c2433;stroke-width:2.5}
.km-status{font-size:13.5px;color:#243049}
/* gradient descent sim (SVG) */
.sim-svg .gd-curve{fill:none;stroke:var(--line);stroke-width:3}
.sim-svg .gd-tangent{stroke:var(--warn);stroke-width:2.5;stroke-linecap:round}
.sim-svg .gd-trail{fill:var(--accent)}
.sim-svg .gd-ball{fill:var(--accent);stroke:#fff;stroke-width:2}
.gd-status{font-size:13.5px;color:#243049}
.gd-status.warn{color:var(--warn);font-weight:600}
/* randomness & probability sim (SVG) */
.sim-svg .prob-grid{stroke:var(--line);stroke-width:1}
.sim-svg .prob-ylab{fill:var(--muted);font-size:10px;text-anchor:end}
.sim-svg .prob-true{stroke:var(--ok);stroke-width:2;stroke-dasharray:6 5}
.sim-svg .prob-line{fill:none;stroke:var(--accent);stroke-width:2}
.sim-svg .prob-blue{fill:var(--accent)}
.sim-svg .prob-white{fill:#fff}
.sim-svg .prob-rim{fill:none;stroke:var(--line);stroke-width:1.5}
.sim-svg .prob-wlab{fill:var(--muted);font-size:11px;text-anchor:middle}
.prob-status{font-size:13.5px;color:#243049}
/* map of AI */
.map-intro{max-width:980px}
.map-legend{max-width:980px;margin:6px auto 2px;padding:0 24px;color:var(--muted);font-size:12.5px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.map-fam{max-width:980px;margin:20px auto;padding:0 24px}
.map-fam-head{display:flex;align-items:baseline;gap:10px;border-left:4px solid var(--line);padding-left:12px;margin-bottom:12px;flex-wrap:wrap}
.map-fam-head h2{font-size:18px;margin:0}
.map-fam-head .blurb{color:var(--muted);font-size:13.5px}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.map-node{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.map-node h4{margin:0;font-size:14.5px}
.map-node p{margin:0;color:var(--muted);font-size:12.5px;flex:1}
.map-node .node-foot{display:flex;align-items:center;gap:8px;font-size:11.5px}
.node-badge{border-radius:20px;padding:1px 9px;font-weight:600}
.node-badge.built{background:#e7f6ee;color:#0f6b48}
.node-badge.planned{background:#eef2f8;color:var(--muted)}
.node-badge.stretch{background:#f3eaff;color:#6b3fb0}
.node-pillar{color:var(--muted)}
.map-try{font-size:12px;font-weight:600;margin-top:2px}
/* learning roadmap (ordered path by pillar) */
.road-zone{max-width:880px;margin:22px auto;padding:0 24px 0 16px;border-left:4px solid var(--line)}
.road-zone-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px 8px}
.road-zone-head h2{font-size:18px;margin:0}
.road-zone-head .blurb{color:var(--muted);font-size:13.5px}
.road-count{margin-left:auto;color:var(--muted);font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:1px 10px}
.road-steps{list-style:none;margin:0 0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.road-step{display:flex;align-items:flex-start;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.road-step:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.road-step.planned,.road-step.stretch{opacity:.85}
.road-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.road-body{flex:1;min-width:0}
.road-body h4{margin:0;font-size:14.5px}
.road-body p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.road-prereq{font-style:italic;opacity:.85}
.lesson-proj{margin-left:10px;font-size:11.5px;font-weight:600;color:var(--accent-2);white-space:nowrap}
/* "you are here" compass widget */
.here{max-width:720px;margin:0 auto 18px;background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.here-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);font-weight:700}
.here-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 8px;font-size:16px;font-weight:600}
.here-step{font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:6px;padding:1px 8px}
.here-pillar{font-size:12px;font-weight:500;color:var(--muted)}
.here-row{font-size:13px;margin:2px 0}
.here-label{color:var(--muted);margin-right:6px}
.here-soft{color:var(--muted)}
.here-foot{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:13px;font-weight:600}
/* statistics sim (mean / median / spread on a number line) */
.sim-svg .st-band{fill:var(--accent-soft);opacity:.7}
.sim-svg .st-dot{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.sim-svg .st-dot.drag{fill:var(--warn);stroke:var(--ink);stroke-width:2}
.sim-svg .st-median{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:5 4}
.sim-svg .st-meanline{stroke:var(--accent);stroke-width:1.5;opacity:.45}
.sim-svg .st-mean{fill:var(--accent);stroke:#fff;stroke-width:1}
.sim-svg .st-tag{font-size:11px;font-weight:700;text-anchor:middle}
.sim-svg .st-tag.med{fill:var(--ok)}
.sim-svg .st-tag.avg{fill:var(--accent)}
.sim-explain.warn{border-color:var(--warn);color:#7a2e08}
/* outliers sim (noise vs signal on a scatter) */
.sim-svg .out-band{fill:var(--accent-soft);opacity:.6}
.sim-svg .out-bandlab{fill:var(--muted);font-size:11px;text-anchor:end}
.out-hit{cursor:pointer}
.sim-svg .out-dot{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.sim-svg .out-dot.flag{fill:var(--warn)}
.sim-svg .out-dot.gone{fill:var(--line);stroke:var(--muted);stroke-dasharray:2 2}
.sim-svg .out-dot.study{fill:var(--ok)}
.sim-svg .out-dot.sel{stroke:var(--ink);stroke-width:2.5}
.sim-svg .out-ring{fill:none;stroke:var(--warn);stroke-width:2;opacity:.55}
/* ---- richer interactive facets (added across the built sims) ---- */
/* shared: a checkbox/toggle that sits inline with the other controls */
.sim-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#243049}
.sim-check input{margin:0}
/* kNN decision map: faintly tint each grid cell by what the current k would guess there */
.sim-svg .knn-cell{stroke:none}
.sim-svg .knn-cell.is-a{fill:rgba(210,59,59,.12)}
.sim-svg .knn-cell.is-b{fill:rgba(224,165,0,.14)}
/* k-means: centers can be dragged to place a seed by hand */
.sim-svg .km-cen{cursor:grab}
/* regression: the "surprising day" outlier point */
.sim-svg .pt.surprise{fill:var(--warn);stroke:#fff;stroke-width:1.5;r:6}
/* attention: compose-your-own row of word dropdowns (fixed, safe bank) */
.sim-compose{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;font-size:13px}
.sim-compose select{padding:2px 5px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:13px}
.sim-compose-lab{color:var(--muted)}
/* probability: a second, simultaneous run drawn alongside the first */
.sim-svg .prob-line2{fill:none;stroke:#e8703a;stroke-width:2;opacity:.8}
/* decision tree: two classes (ripe circle / unripe square), split cuts, shaded leaf boxes */
.sim-svg .tr-a{fill:var(--ok);stroke:#fff;stroke-width:1.2}
.sim-svg .tr-b{fill:#8893a7;stroke:#fff;stroke-width:1.2}
.sim-svg .tree-split{stroke:#1c3a8a;stroke-width:2;stroke-dasharray:5 3;opacity:.75}
.sim-svg .tree-cell{stroke:none}
.sim-svg .tree-cell.is-a{fill:rgba(15,107,72,.13)}
.sim-svg .tree-cell.is-b{fill:rgba(136,147,167,.16)}
/* naive bayes: a learned bell curve per class per clue + a two-class belief bar */
.sim-svg .axlabel-left{fill:var(--muted);font-size:11px;font-weight:600}
.sim-svg .nb-cat{fill:none;stroke:#0f6b48;stroke-width:2}
.sim-svg .nb-dog{fill:none;stroke:#e8703a;stroke-width:2}
.sim-svg .nb-fill-cat{fill:rgba(15,107,72,.10);stroke:none}
.sim-svg .nb-fill-dog{fill:rgba(232,112,58,.10);stroke:none}
.sim-svg .nb-marker{stroke:#1c3a8a;stroke-width:1.5;stroke-dasharray:4 3}
.sim-svg .nb-dot-cat{fill:#0f6b48;stroke:#fff;stroke-width:1.2}
.sim-svg .nb-dot-dog{fill:#e8703a;stroke:#fff;stroke-width:1.2}
.nb-belief{display:flex;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);margin:10px 0 4px}
.nb-belief .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;min-width:0;transition:width .12s}
.nb-belief .seg.cat{background:#0f6b48}
.nb-belief .seg.dog{background:#e8703a}
.nb-name-cat{color:#0f6b48}
.nb-name-dog{color:#e8703a}
.sim-svg .cm-region{fill:var(--accent-soft);opacity:.5}
.sim-svg .cm-lane{fill:var(--muted);font-size:11px;font-weight:600}
.sim-svg .axis-faint{stroke:var(--line);stroke-width:1;opacity:.6}
.sim-svg .cm-ring{fill:none;stroke:#1c3a8a;stroke-width:2.5}
.sim-svg .cm-thr{stroke:#1c3a8a;stroke-width:2;stroke-dasharray:5 3}
.sim-svg .cm-thrlab{fill:var(--muted);font-size:11px}
table.cm td.cmx{cursor:pointer;font-weight:700}
table.cm td.tp,table.cm td.tn{background:rgba(15,107,72,.13)}
table.cm td.fp,table.cm td.fn{background:rgba(232,112,58,.15)}
table.cm td.cmx.sel{outline:3px solid #1c3a8a;outline-offset:-3px}
.sim-svg .ts-a{fill:#fff;stroke:var(--ok);stroke-width:2}
.sim-svg .ts-b{fill:#fff;stroke:#8893a7;stroke-width:2}
.sim-svg .ts-right{fill:none;stroke:var(--ok);stroke-width:2.5}
.sim-svg .ts-wrong{fill:none;stroke:var(--warn);stroke-width:2.5}
.sim-svg .ts-x{fill:var(--warn);font-size:13px;font-weight:700;text-anchor:middle}
.ts-scores{display:flex;gap:12px;margin:12px 0 6px;flex-wrap:wrap}
.ts-score{flex:1;min-width:160px;border:1px solid var(--line);border-radius:11px;padding:10px 13px;background:var(--panel)}
.ts-score .lab{font-size:12px;color:var(--muted);font-weight:600}
.ts-score .val{font-size:26px;font-weight:800;line-height:1.1;margin:2px 0}
.ts-score .sub{font-size:12px;color:var(--muted)}
.ts-score.seen .val{color:#1c3a8a}
.ts-score.honest .val{color:#0f6b48}
.ts-score.focus{box-shadow:0 0 0 2px var(--accent)}
.sim-svg .pr-tile{stroke:#fff;stroke-width:1}
.sim-svg .pr-tile-pup{fill:var(--ok)}
.sim-svg .pr-tile-not{fill:#8893a7}
.sim-svg .pr-tile.flag{stroke:#1c3a8a;stroke-width:2.5}
.sim-svg .pr-grid{stroke:var(--line);stroke-width:1;opacity:.6}
.sim-svg .pr-curve{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linejoin:round}
.sim-svg .pr-dot{fill:var(--accent);stroke:#fff;stroke-width:2}
.sim-svg .pr-best{fill:var(--ok);stroke:#fff;stroke-width:1}
.pr-bars{margin:12px 0 4px}
.pr-bar{display:flex;align-items:center;gap:10px;margin:7px 0}
.pr-bar .lab{width:200px;font-size:12.5px;font-weight:600;color:#243049}
.pr-track{flex:1;height:20px;background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pr-fill{height:100%;transition:width .12s}
.pr-fill.prec{background:var(--accent)}
.pr-fill.rec{background:#e8703a}
.pr-fill.f1{background:var(--ok)}
.pr-bar .num{width:46px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.sim-svg .db-line{stroke:#1c2433;stroke-width:3;stroke-linecap:round}
.sim-svg .db-unsure{fill:#1c3a8a;opacity:.14;stroke:none}
.sim-sub{margin:8px 0 4px;color:#555;font-size:14px}
.spam-belief{display:flex;height:34px;border-radius:8px;overflow:hidden;margin:10px 0;border:1px solid var(--line);font-size:13px;font-weight:700;color:#fff}
.spam-belief .seg{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;transition:width .25s}
.spam-belief .seg.spam{background:#c0392b}
.spam-belief .seg.ham{background:#2e7d32}
.spam-name-spam{color:#c0392b}
.spam-name-ham{color:#2e7d32}
.spam-votes{margin:10px 0;display:grid;gap:6px}
.spam-vote{display:grid;grid-template-columns:78px 1fr 92px;align-items:center;gap:10px;font-size:13px}
.spam-vote .w{text-align:right;font-weight:700}
.spam-vote .pct{color:#555;font-variant-numeric:tabular-nums}
.spam-vote .track{position:relative;height:16px;background:#eef1f5;border-radius:8px}
.spam-vote .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#9aa4b2}
.spam-vote .fill{position:absolute;top:0;bottom:0;border-radius:8px}
.spam-vote .fill.spam{left:50%;background:#c0392b}
.spam-vote .fill.ham{right:50%;background:#2e7d32}
.spam-empty{color:#888;font-style:italic;font-size:13px}
.spam-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.spam-chip{border:1px solid var(--line);background:#fff;border-radius:15px;padding:5px 13px;cursor:pointer;font-size:14px;color:var(--ink)}
.spam-chip.in{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.spam-board{margin:8px 0}
.sim-svg .of-fit{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.sim-svg .of-true{fill:none;stroke:#2e7d32;stroke-width:2;stroke-dasharray:6 5;opacity:.9;stroke-linejoin:round}
.sim-svg .of-test{fill:#fff;stroke:#c98a00;stroke-width:2}
.of-bars{display:grid;gap:8px;margin:12px 0 6px}
.of-bar{display:grid;grid-template-columns:210px 1fr 48px;align-items:center;gap:10px;font-size:14px}
.of-bar .lab{font-weight:600}
.of-bar .track{height:18px;background:#eef1f5;border-radius:9px;overflow:hidden}
.of-bar .fill{height:100%;border-radius:9px;transition:width .2s}
.of-bar .fill.train{background:var(--accent)}
.of-bar .fill.test{background:#c0392b}
.of-bar .num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.sim-svg .lg-thr{stroke:#b7c0cc;stroke-width:1.5;stroke-dasharray:4 4}
.sim-svg .lg-vline{stroke:#5a6b85;stroke-width:2;stroke-dasharray:5 4}
.sim-svg .lg-linear{fill:none;stroke:#9aa4b2;stroke-width:2;stroke-dasharray:2 5}
.sim-svg .mf-train{fill:#c3ccd8}
.sim-svg .dist-line{stroke:var(--accent);stroke-width:3}
.sim-svg .dist-leg{stroke:#9aa4b2;stroke-width:2;stroke-dasharray:5 4}
.sim-svg .dist-path{stroke:#c0392b;stroke-width:3;fill:none}
.sim-svg .dist-grab{cursor:grab}
.sim-svg .dist-tag{fill:var(--ink);font-size:12px;font-weight:800;text-anchor:middle}
.sim-svg .dist-num{fill:var(--accent);font-size:12px;font-weight:800}
.sim-svg .coord-grid{stroke:#eef2f7;stroke-width:1}
.sim-svg .tick-x{text-anchor:middle}
.sim-svg .scatter-lab{fill:var(--muted)}
.sim-svg .vec-a{stroke:var(--accent);stroke-width:3}
.sim-svg .vec-b{stroke:#e0a500;stroke-width:3}
.sim-svg .vec-sum{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:6 4}
.sim-svg .head-a{fill:var(--accent)}
.sim-svg .head-b{fill:#e0a500}
.sim-svg .head-sum{fill:var(--ok)}
.sim-svg .vec-grab{fill:#fff;stroke-width:2;cursor:grab}
.sim-svg .vec-grab-a{stroke:var(--accent)}
.sim-svg .vec-grab-b{stroke:#e0a500}
.sim-svg .vec-tag-a{fill:var(--accent);font-size:12px;font-weight:800}
.sim-svg .vec-tag-b{fill:#a87a00;font-size:12px;font-weight:800}
.sim-svg .vec-sum-tag{fill:var(--ok);font-size:12px;font-weight:800}
.sim-svg .hist-bar{fill:var(--accent);opacity:.85}
.sim-svg .hist-count{fill:var(--muted);font-size:10px;font-weight:700;text-anchor:middle}
.sim-svg .hist-mean{stroke:#c0392b;stroke-width:2.5;stroke-dasharray:5 4}
.sim-svg .hist-median{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:5 4}
.sim-svg .hist-mark-mean{fill:#c0392b;font-size:11px;font-weight:800}
.sim-svg .hist-mark-median{fill:var(--ok);font-size:11px;font-weight:800}
.sim-svg .pct-cell{fill:#eef2f7;stroke:#fff;stroke-width:1}
.sim-svg .pct-cell.on{fill:var(--accent)}
.sim-svg .pct-lab{fill:var(--ink);font-size:12px;font-weight:700;text-anchor:middle}
.clean-host{margin-top:8px}
.data-table.clean-table td{transition:background .12s}
.data-table .clean-bad{background:#fdecea;color:#c0392b;font-weight:700;cursor:pointer}
.data-table .clean-bad:hover{background:#f8d7d2}
.data-table .clean-ok{background:#e7f6ec;color:#1e7a3d;font-weight:700}
.sim-svg .clean-bar{fill:var(--accent)}
.sim-svg .clean-bar.bad{fill:var(--warn)}
.sim-svg .clean-badlab{fill:#c0392b;font-weight:800}
.sim-svg .ck-curve{fill:none;stroke:var(--accent);stroke-width:2.5}
.sim-svg .ck-dot{fill:#fff;stroke:var(--accent);stroke-width:2}
.sim-svg .ck-dot.best{fill:var(--ok);stroke:var(--ok)}
.sim-svg .ck-cur{fill:none;stroke:#1c2433;stroke-width:2.5}
.sim-svg .ck-elbow-rule{stroke:var(--ok);stroke-width:1.2;stroke-dasharray:4 4;opacity:.6}
.sim-svg .ck-elbow-lab{fill:var(--ok);font-size:11px;font-weight:800;text-anchor:middle}
.sim-svg .rec-line{stroke:var(--line);stroke-width:1.2;opacity:.5}
.sim-svg .rec-line.on{stroke:var(--ok);stroke-width:2;opacity:.85}
.sim-svg .rec-dot{fill:#cfd8e6;stroke:#fff;stroke-width:1.5}
.sim-svg .rec-dot.on{fill:var(--ok)}
.sim-svg .rec-seed{fill:var(--accent);stroke:#1c2433;stroke-width:2.5}
.sim-svg .rec-lab{fill:var(--muted);font-size:12px;font-weight:600}
.sim-svg .rec-lab.seed{fill:var(--ink);font-weight:800}
.rec-list{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.rec-row{display:grid;grid-template-columns:90px 1fr 92px;align-items:center;gap:8px;opacity:.55}
.rec-row.on{opacity:1}
.rec-name{font-weight:700;color:var(--ink)}
.rec-bar{height:12px;background:#eef2f7;border-radius:6px;overflow:hidden}
.rec-bar-in{height:100%;background:var(--ok)}
.rec-pct{font-size:12px;color:var(--muted);text-align:right}
.sim-svg .hc-link{stroke-width:2.4}
.sim-svg .hc-cut{stroke:#c0392b;stroke-width:1.5;stroke-dasharray:5 4}
.sim-svg .hc-cut-lab{fill:#c0392b;font-size:11px;font-weight:800;text-anchor:end}
.sim-svg .hc-lab{fill:var(--ink);font-size:12px;font-weight:700;text-anchor:middle}
.sim-svg .pca-axis{stroke:#1c2433;stroke-width:2.5}
.sim-svg .pca-perp{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.sim-svg .pca-foot{stroke:#fff;stroke-width:1}
.sim-svg .pca-tick{stroke-width:3}
.pr-fill.fpr{background:#d23b3b}
.sim-svg .roc-auc{fill:var(--accent);opacity:.14;stroke:none}
.sim-svg .roc-diag{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.sim-svg .roc-diaglab{fill:var(--muted);font-size:11px;font-weight:600}
.pr-fill.gap{background:#d23b3b}
.fair-pile-wrap{margin:6px 0 14px}
.fair-pile-lab{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.fair-pile{display:flex;flex-wrap:wrap;gap:3px}
.fair-chip{width:14px;height:14px;border-radius:3px;display:inline-block}
.fair-apple{background:#d23b3b}
.fair-banana{background:#e8b22a}
.sim-svg .pr-tile.fair-apple{fill:#d23b3b}
.sim-svg .pr-tile.fair-banana{fill:#e8b22a}
.sim-svg .pr-tile.ripe{stroke:#1c2433;stroke-width:1.5}
.sim-svg .pr-tile.fair-wrong{stroke:#1c3a8a;stroke-width:3}
.sim-svg .fair-true{stroke:var(--ok);stroke-width:2;opacity:.7}
.sim-svg .ts-raw{fill:none;stroke:#8893a7;stroke-width:1.6;stroke-linejoin:round}
.sim-svg .ts-dot{fill:#5b6577}
.sim-svg .ts-trend{stroke:#1c3a8a;stroke-width:2.4;stroke-dasharray:6 4}
.sim-svg .ts-recon{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linejoin:round}
.sim-svg .ts-year{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.sim-svg .ts-yearlab{fill:var(--muted);font-size:10px;text-anchor:middle}
.sim-svg .ts-cycle{fill:none;stroke:#b9c2d2;stroke-width:1.4;stroke-linejoin:round}
.sim-svg .ts-season{fill:none;stroke:#e8703a;stroke-width:3;stroke-linejoin:round}
.ts-cap{font-size:12.5px;color:var(--muted);margin:10px 0 2px}
.sim-svg .ma-window{fill:var(--accent-soft);opacity:.55}
.sim-svg .ma-raw{fill:none;stroke:#b9c2d2;stroke-width:1.5;stroke-linejoin:round}
.sim-svg .ma-dot{fill:#9aa6ba}
.sim-svg .ma-smooth{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.sim-svg .ma-true{fill:none;stroke:#2e7d32;stroke-width:2;stroke-dasharray:6 5;opacity:.85;stroke-linejoin:round}
.sim-svg .ma-drop{stroke:#1c2433;stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.sim-svg .ma-pick{fill:var(--accent);stroke:#fff;stroke-width:2}
.sim-svg .fc-cone{fill:var(--accent);opacity:.16;stroke:none}
.sim-svg .fc-hist{fill:none;stroke:#5b6577;stroke-width:2;stroke-linejoin:round}
.sim-svg .fc-dot{fill:#5b6577}
.sim-svg .fc-fore{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-dasharray:7 5;stroke-linejoin:round}
.sim-svg .fc-actual{fill:#c0392b;stroke:#fff;stroke-width:1.5}
.sim-svg .fc-now{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4;opacity:.7}
.sim-svg .fc-nowlab{fill:var(--muted);font-size:10px;font-weight:700;text-anchor:end}
.sim-svg .nn-link{stroke:#c3ccd8;stroke-width:1.2}
.sim-svg .nn-node{stroke:#fff;stroke-width:1.5}
.sim-svg .nn-in{fill:#5b6577}
.sim-svg .nn-hid{fill:var(--accent)}
.sim-svg .nn-out{fill:var(--ok)}
.sim-svg .nn-lab{fill:var(--muted);font-size:10px;font-weight:700;text-anchor:middle}
.sim-svg .bn-line{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 4;opacity:.65}
.sim-svg .bn-lossfull{fill:none;stroke:#c3ccd8;stroke-width:1.6}
.sim-svg .act-curve{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linejoin:round}
.sim-svg .act-bump{fill:none;stroke:var(--ok);stroke-width:2.4;stroke-dasharray:7 5;stroke-linejoin:round}
.sim-svg .act-switch{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:4 4;opacity:.7}
.sim-svg .act-dot{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.sim-svg .cnn-px{stroke:#d7dde6;stroke-width:1}
.sim-svg .cnn-px.on{fill:#1f2733}
.sim-svg .cnn-px.off{fill:#fff}
.sim-svg .cnn-win{fill:none;stroke:var(--accent);stroke-width:2.5}
.sim-svg .cnn-out{stroke:#eef1f5;stroke-width:1}
.sim-svg .cnn-cur{fill:none;stroke:var(--accent);stroke-width:2.5}
.sim-svg .cnn-hit{fill:none;stroke:var(--ok);stroke-width:2}
.sim-svg .cnn-arrow{fill:var(--muted);font-size:24px;font-weight:700;text-anchor:middle}
.sim-svg .emb-dot{stroke:#fff;stroke-width:1.2}
.sim-svg .emb-dot.on{stroke-width:1.6}
.sim-svg .emb-line{stroke:var(--ok);stroke-width:2;opacity:.7}
.sim-svg .emb-arrow{stroke:var(--accent);stroke-width:2.2;opacity:.8}
.sim-svg .emb-star{fill:#e0a500;stroke:#fff;stroke-width:1.5}
.tok-host{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px;min-height:40px}
.tok-chip{display:inline-flex;flex-direction:column;align-items:center;padding:6px 9px;border-radius:7px;border:1px solid var(--line);font-weight:600}
.tok-chip.a{background:#eaf1fe}
.tok-chip.b{background:#fff3df}
.tok-text{font-family:ui-monospace,Menlo,Consolas,monospace}
.tok-id{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
.sim-svg .maze-cell{fill:#fff;stroke:#cfd8e6;stroke-width:1.5}
.sim-svg .maze-wall{fill:#33405a}
.sim-svg .maze-goal{fill:#dff5e6}
.sim-svg .maze-pit{fill:#fde0e0}
.sim-svg .maze-arrow{stroke:#1f6feb;stroke-width:2;fill:none;stroke-linecap:round}
.sim-svg .maze-path{stroke:#e0a500;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.sim-svg .maze-icon{font-size:20px;text-anchor:middle}
.chat-card{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:6px 0;white-space:pre-line;line-height:1.5;max-width:88%}
.chat-card .who{display:block;font-weight:700;font-size:12px;margin-bottom:3px;color:var(--muted)}
.chat-you{background:#eef3fb;margin-right:auto}
.chat-bot{background:#f3fbf4;margin-left:auto}
.chat-bot .who{color:var(--ok)}
.vote-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px;min-height:28px}
.vote-dot{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px}
.vote-dot.ok{background:var(--ok)}
.vote-dot.no{background:#d23b3b}
/* dataset explorer (PRD §7.5.1) */
.ds-explorer{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:8px 24px 24px;align-items:start;max-width:1100px;margin:0 auto}
.ds-list{display:flex;flex-direction:column;padding:8px;gap:6px;max-height:78vh;overflow:auto}
.ds-item{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 11px;cursor:pointer;width:100%}
.ds-item:hover{border-color:var(--accent)}
.ds-item.active{border-color:var(--accent);background:var(--accent-soft)}
.ds-item-name{font-weight:600;font-size:14px}
.ds-item-about{font-size:11.5px;color:var(--muted);line-height:1.35}
.ds-detail{padding:16px 18px}
.ds-title{margin:0 0 4px;font-size:22px;text-transform:none;letter-spacing:0;color:var(--ink);border:0;padding:0}
.ds-about{margin:0 0 10px;color:var(--muted)}
.ds-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px}
.ds-tag{font-size:11.5px;background:var(--accent-soft);color:#1c3a8a;border-radius:999px;padding:3px 10px;font-weight:600}
.ds-open{margin-left:auto}
.ds-h{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:16px 0 6px}
.ds-find{font-size:13px;color:var(--ink);background:#fbfcfe;border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:8px 0 0}
.ds-knobs{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0}
.ds-knob{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:150px}
.ds-knob-head{display:flex;justify-content:space-between;color:var(--muted)}
.ds-knob-val{color:var(--ink);font-weight:600}
.ds-knob input[type=range]{width:100%}
.ds-picks{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0}
.ds-pick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
/* Synthetic dataset generator (PRD §7.5.2) */
.gen{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:16px;padding:8px 24px 24px;align-items:start;max-width:1200px;margin:0 auto}
.gen-form{padding:14px 16px;max-height:84vh;overflow:auto}
.gen-preview{padding:16px 18px;max-height:84vh;overflow:auto}
.gen-h{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 0 8px}
.gen-h:first-child{margin-top:2px}
.gen-section-head{display:flex;align-items:baseline;gap:10px}
.gen-top{margin-bottom:6px}
.gen-field{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.gen-flabel{font-weight:600}
.gen-field input,.gen-field select{font:inherit;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.gen-field input:focus,.gen-field select:focus{outline:none;border-color:var(--accent)}
.gen-knobs{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0}
.gen-knob{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:140px;flex:1 1 140px}
.gen-knob-head{display:flex;justify-content:space-between;color:var(--muted)}
.gen-knob-val{color:var(--ink);font-weight:600}
.gen-knob input[type=range]{width:100%}
.gen-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:#fffdfa}
.gen-card-head{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.gen-card-head .gen-field{flex:1 1 120px}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin:8px 0}
.gen-x{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:16px;line-height:1}
.gen-x:hover{border-color:var(--accent-2);color:var(--accent-2)}
.gen-add{margin:6px 0 4px}
.gen-open{margin:6px 0 10px}

/* ---- Model Builder (PRD §7.8) ---- */
.mb-lead{max-width:760px;color:var(--ink);line-height:1.6;margin:0 0 16px}
.mb-wrap{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.25fr);gap:18px;align-items:start}
.mb-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.mb-panel h2{margin:0 0 4px;font-size:18px}
.mb-subh{margin:16px 0 4px;font-size:14px;color:var(--accent)}
.mb-stack{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.mb-chip{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.mb-chip-body{flex:1;min-width:0}
.mb-chip-title{font-weight:700;font-size:13.5px;color:#243049}
.mb-chip-sub{font-size:12px;color:var(--muted)}
.mb-chip-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:5px}
.mb-chip-tag{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.mb-fixed.mb-in{border-left:4px solid #5b6577}
.mb-fixed.mb-out{border-left:4px solid var(--ok)}
.mb-hidden{border-left:4px solid var(--accent);cursor:grab}
.mb-hidden.mb-dragging{opacity:.5}
.mb-hidden.mb-over{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mb-handle{color:var(--muted);font-size:15px;cursor:grab;user-select:none}
.mb-act{font-size:12.5px;padding:3px 6px;border:1px solid var(--line);border-radius:7px;background:#fff}
.mb-size{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.mb-size input[type=range]{width:96px}
.mb-chip-btns{display:flex;gap:4px}
.mb-mini{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:13px;line-height:1;color:var(--muted);padding:0}
.mb-mini:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mb-mini:disabled{opacity:.35;cursor:default}
.mb-mini.mb-rm:hover{border-color:#d23b3b;color:#d23b3b}
.mb-add{margin:2px 0 12px;background:var(--accent-soft);border:1px dashed var(--accent);color:var(--accent);border-radius:9px;padding:8px 12px;cursor:pointer;font-weight:600}
.mb-add:disabled{opacity:.4;cursor:default}
.mb-ctl{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin:8px 0}
.mb-ctl input[type=range]{flex:1;min-width:90px}
.mb-reset{margin-top:8px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;color:var(--muted)}
.mb-reset:hover{border-color:var(--accent-2);color:var(--accent-2)}
.mb-diagram{max-width:480px}
.mb-loss{max-width:430px;margin-top:2px}
.mb-context{margin:0 0 16px;padding:11px 14px;border-radius:11px;font-size:13.5px;line-height:1.5;border:1px solid var(--line)}
.mb-context-ok{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.mb-context-info{background:#fff7ec;border-color:var(--gold,#e0a500);color:var(--ink)}
.mb-explain{margin:14px 0 6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mb-explain .mb-subh{margin:0 0 6px}
.mb-explist{margin:6px 0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ink)}
.mb-explist li{margin:5px 0}
.mb-why{font-size:13px;line-height:1.6;color:var(--ink);margin:10px 0 2px;border-left:3px solid var(--accent);padding-left:11px}
.mb-warnline{font-size:13px;line-height:1.55;color:var(--accent-2);margin:9px 0 0;font-weight:600}
.mb-flowbtn{margin:6px 0 12px;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:600}
.sim-svg .mb-link{stroke-linecap:round}
.sim-svg .mb-link.mb-pos{stroke:#3552b0}
.sim-svg .mb-link.mb-neg{stroke:#d23b3b}
.sim-svg .mb-link.mb-flow{stroke:#3552b0;stroke-dasharray:5 6;animation:mb-flow .5s linear;stroke-width:4}
@keyframes mb-flow{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
.sim-svg .mb-link.mb-flow-back{stroke:#e8703a;stroke-dasharray:5 6;animation:mb-flowback .5s linear;stroke-width:4}
@keyframes mb-flowback{from{stroke-dashoffset:-22}to{stroke-dashoffset:0}}
.mb-learnrow{display:flex;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.mb-learnbtn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:8px 16px;cursor:pointer;font-weight:600;flex:none}
.mb-learnbtn.mb-learning{background:var(--accent-2)}
.mb-phase{font-size:13px;line-height:1.5;color:var(--ink-soft,var(--ink));flex:1 1 200px;min-width:180px}
.mb-codepanel{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.mb-codehead{display:flex;align-items:baseline;gap:12px}
.mb-codehead h2{margin:0;font-size:18px}
.mb-status{font-size:12.5px;font-weight:700}
.mb-status.mb-ok{color:var(--ok)}
.mb-status.mb-warn{color:var(--accent-2)}
.mb-code{width:100%;min-height:190px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.6;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg);color:var(--ink);resize:vertical;box-sizing:border-box}
.mb-codebtns{display:flex;gap:10px;margin-top:10px}
/* ---- look & feel v2: warmth, colour accents, a hint of depth (shared by every page) ---------- */
/* dimensional surfaces: a soft top-down gradient + an inset highlight = a gentle "lift" */
.promise,.app-card,.map-node,.road-step,.mb-panel,.mb-codepanel,.panel{background:var(--panel-grad);box-shadow:var(--shadow),var(--ring)}
/* a colourful cap on the headline cards */
.promise,.app-card{position:relative;overflow:hidden}
.promise::before,.app-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}
/* colourful section rails in place of the flat grey ones */
.map-fam-head,.road-zone{border-image:var(--brand-grad) 1}
.map-node{border-left-color:var(--accent-2)}
/* a gradient accent line under the masthead */
.site-header{position:relative}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand-grad)}
/* page titles: a touch of colour + a gradient underline */
.hero h1,.ds-title{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:#2f6be6;-webkit-text-fill-color:transparent}
.sim h1{position:relative;padding-bottom:10px}
.sim h1::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:3px;background:var(--brand-grad)}
/* section names: warm colour + a small prism marker instead of plain grey/black */
.sim-block h2,.hero h2,.hero h3,.ds-h,.gen-h{display:flex;align-items:center;gap:9px;color:var(--accent-2)}
.sim-block h2::before,.hero h2::before,.hero h3::before,.ds-h::before,.gen-h::before{content:"";flex:none;width:13px;height:13px;border-radius:4px;background:var(--brand-grad);box-shadow:var(--shadow)}
/* family / zone titles on Map & Roadmap: a touch of warm colour to match the section names */
.map-fam-head h2,.road-zone-head h2{color:var(--accent-2)}
/* Decision-Tree Builder (sibling of the Model Builder; reuses .mb-* + .tree-cell/.tr-* above) */
.tb-note{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tb-map{max-width:340px}
.tb-acc{max-width:380px;margin-top:2px}
.tb-tree{margin-top:4px}
.sim-svg .tb-test{fill:#fff;stroke:var(--accent-2);stroke-width:3}
.sim-svg .tb-edge{stroke:var(--line);stroke-width:1.6}
.sim-svg .tb-edgelab{fill:var(--muted);font-size:10px;font-weight:700;text-anchor:middle}
.sim-svg .tb-q{fill:var(--panel);stroke:var(--accent);stroke-width:1.4}
.sim-svg .tb-qlab{fill:var(--ink);font-size:11px;font-weight:700;text-anchor:middle}
.sim-svg .tb-qsub{fill:var(--muted);font-size:9px;text-anchor:middle}
.sim-svg .tb-leaf{stroke:#fff;stroke-width:1.4}
.sim-svg .tb-leaf.is-a{fill:rgba(15,107,72,.5)}
.sim-svg .tb-leaf.is-b{fill:rgba(136,147,167,.6)}
.sim-svg .tb-leaflab{fill:var(--ink);font-size:11px;font-weight:700;text-anchor:middle}
.sim-svg .tb-leafn{fill:var(--muted);font-size:9px;text-anchor:middle}
.sim-svg .tb-node{transition:opacity .2s}
.sim-svg .tb-node .tb-q,.sim-svg .tb-node .tb-leaf{transition:stroke-width .15s,filter .15s}
.sim-svg .tb-nodes .tb-node:not(.tb-on){opacity:.55}
.sim-svg .tb-node.tb-on .tb-q,.sim-svg .tb-node.tb-on .tb-leaf{stroke:var(--accent-2);stroke-width:3}
.sim-svg .tb-node.tb-drop .tb-q,.sim-svg .tb-node.tb-drop .tb-leaf{filter:drop-shadow(0 0 5px var(--accent-2))}
/* ── Projector mode (teachers): ?projector=1 strips chrome + prose, keeps the live sim, big. ── */
.proj-fab{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--panel-grad);box-shadow:var(--shadow),var(--ring);
  color:var(--ink);font:600 13px/1 inherit;padding:9px 13px;border-radius:24px;cursor:pointer}
.proj-fab:hover{box-shadow:var(--shadow-lift),var(--ring)}
.proj-fab .glyph{font-size:14px}
body.projector{font-size:18px}
body.projector .site-header,body.projector .site-footer,body.projector .sim-crumb,
body.projector #here,body.projector .sim-block.proj-hide,body.projector .proj-fab{display:none}
body.projector main.sim{max-width:1180px;margin:0 auto;padding:78px 28px 36px}
body.projector .sim-block,body.projector .sim>p{max-width:none}
body.projector .sim h1{font-size:clamp(34px,5vw,52px);margin-bottom:18px}
body.projector .sim-block h2{font-size:16px}
body.projector .sim-howto,body.projector #sim-app{font-size:1.05em}
body.projector #sim-app input[type=range]{height:22px}
body.projector #sim-app label,body.projector #sim-app button{font-size:1em}
.proj-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.proj-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-grad)}
.proj-bar .proj-name{font-weight:700;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-bar .proj-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);font-weight:700}
.proj-bar button{border:1px solid var(--line);background:var(--panel-grad);color:var(--ink);
  font:600 13px/1 inherit;padding:7px 11px;border-radius:8px;cursor:pointer}
.proj-bar button:hover{box-shadow:var(--shadow)}
.proj-bar .proj-zoom{font-size:15px;width:34px;text-align:center}
@media(max-width:780px){.studio{grid-template-columns:1fr}.pr-bar .lab{width:140px}.spam-vote{grid-template-columns:64px 1fr 84px;gap:6px}.of-bar{grid-template-columns:130px 1fr 44px;gap:6px}.ds-explorer{grid-template-columns:1fr}.ds-list{flex-direction:row;flex-wrap:wrap;max-height:none}.ds-item{width:auto;flex:1 1 140px}.gen{grid-template-columns:1fr}.gen-form,.gen-preview{max-height:none}.mb-wrap{grid-template-columns:1fr}}

/* ---- Accessibility (PRD §9, target WCAG 2.1 AA) — site-wide via this shared sheet ----
   A visible keyboard focus ring on every interactive control, a screen-reader utility + a
   skip-to-content link, and a reduced-motion mode that stills transitions/animations. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;background:var(--panel);color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:8px 14px;font-weight:600;box-shadow:var(--shadow);transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:translateY(0);text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
a:focus-visible,.btn:focus-visible,.btnlink:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.app-card:focus-visible,.map-node:focus-visible,.road-step:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sim-svg .handle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.app-card:hover,.promise:hover,.map-node:hover,.road-step:hover{transform:none}
}

/* ---- Capstone Certification (PRD §15.2 / Appendix D): landing, verify, in-browser personalize ---- */
.cap-free{font-size:15px;color:var(--ink);background:var(--accent-2-soft);border:1px solid #f3c8b0;border-radius:10px;padding:10px 14px;max-width:620px;margin:0 auto 18px}
.cap-grid{max-width:880px;margin:18px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0 24px}
.cap-rubric{margin:6px 0;padding-left:20px}.cap-rubric li{margin:6px 0}
.cap-steps,.cap-how{margin:10px 0;padding-left:24px}
.cap-steps li,.cap-how li{margin:10px 0;line-height:1.5}
.cap-steps li::marker,.cap-how li::marker{color:var(--accent-2);font-weight:700}
.cap-privacy{max-width:820px;margin:18px auto;padding:18px 24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.cap-privacy h2{margin-top:0}

.cert-wrap{max-width:680px;margin:8px auto 28px;padding:0 24px;display:grid;gap:14px}
.cert-personalize{max-width:680px;margin:8px auto;padding:0 24px}
.cert-card{background:var(--panel-grad);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow),var(--ring)}
.cert-card label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.cert-card input[type=text],.cert-card input[type=email],.cert-card input[type=password],.cert-card input[type=date],.cert-card input[type=number]{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fffdfa;box-sizing:border-box}
.cert-idbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600}
.cert-idval{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;background:#fffdfa;border:1px solid var(--line);border-radius:6px;padding:4px 8px;word-break:break-all}
.cert-row{display:flex;gap:10px;align-items:stretch}.cert-row input{flex:1}
.cert-status{font-size:13.5px;color:var(--muted);min-height:1.2em;margin:10px 0 0}
.cert-result{margin-top:12px;border-radius:10px;padding:14px;border:1px solid var(--line)}
.cert-result.is-valid{background:#eafaf2;border-color:#b6e7cf}
.cert-result.is-invalid{background:#fdeeea;border-color:#f3c8b0}
.cert-verdict{font-weight:700;margin:0 0 6px}
.cert-muted{font-size:13px;color:var(--muted)}
.cert-list{list-style:none;padding:0;margin:10px 0 0}.cert-list li{margin:6px 0}
.cert-sig{border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0}
.cert-sig legend{font-weight:600;font-size:13.5px;padding:0 6px}
.cert-sig-tabs{display:inline-flex;gap:0;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cert-sig-tab{font:inherit;font-size:13px;font-weight:600;border:0;background:#fffdfa;color:var(--muted);padding:7px 16px;cursor:pointer}
.cert-sig-tab.is-on{background:var(--accent);color:#fff}
#sigpad{width:100%;height:150px;border:1px dashed var(--line);border-radius:8px;background:#fffdfa;touch-action:none;cursor:crosshair}
.cert-sig-actions{margin-top:8px}
.cert-actions{display:flex;gap:12px;align-items:center;margin-top:8px}

/* the printable certificate */
.certificate{max-width:820px;margin:14px auto 36px;padding:0 24px}
.cert-inner{position:relative;background:linear-gradient(180deg,#fffefb,#fbf4e8);border:2px solid var(--gold);border-radius:14px;box-shadow:var(--shadow-lift);padding:40px 44px;text-align:center;overflow:hidden}
.cert-inner::before{content:"";position:absolute;inset:10px;border:1px solid #ecd9a6;border-radius:9px;pointer-events:none}
.cert-mark{font-weight:700;font-size:17px;letter-spacing:.02em}
.cert-kicker{margin:14px 0 2px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--accent-2);font-weight:700}
.cert-title{margin:0 0 14px;font-size:30px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert-lead{margin:6px 0 4px;color:var(--muted)}
.cert-name{font-size:32px;font-weight:700;margin:4px 0 12px;font-family:Georgia,"Times New Roman",serif}
.cert-body{max-width:560px;margin:0 auto 16px;color:var(--ink)}
.cert-date{font-weight:600;margin:0 0 26px}
.cert-sigs{display:flex;justify-content:space-around;gap:24px;margin:18px auto 8px;max-width:620px}
.cert-sigblock{flex:1;max-width:240px}
.cert-sigline{height:54px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.cert-sig-img{max-height:52px;max-width:100%}
.cert-sig-typed{font-family:"Snell Roundhand","Brush Script MT",cursive;font-size:26px;line-height:1}
.cert-isac{height:46px;width:auto}
.cert-siglabel{font-size:12px;color:var(--muted);margin-top:6px}
.cert-id{font-size:11.5px;color:var(--muted);margin:22px 0 4px;word-break:break-all}
.cert-fine{font-size:11px;color:var(--muted);margin:0}

/* ── Teacher Unit Builder (Phase C): pick concepts → prepopulated, editable, printable plans. ── */
.unit-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0 6px}
.unit-fs{border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px;background:var(--panel)}
.unit-fs legend{padding:0 6px;font-weight:600;color:var(--ink);background:var(--panel)}
.unit-fs legend input{vertical-align:middle;margin:0 8px 0 0}
.unit-fs legend label{cursor:pointer;vertical-align:middle}
.unit-sims{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.unit-simrow{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--muted);cursor:pointer;line-height:1.4}
.unit-simrow input{margin-top:2px}
.unit-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.unit-output{max-width:none;margin:18px 0 0;padding:0}
.unit-output[contenteditable=true]{outline:none}
.unit-output[contenteditable=true]:focus-within{outline:none}
.unit-empty,.unit-cover-note{color:var(--muted)}
.unit-cover{border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:18px}
.unit-cover h2{margin:0 0 6px}
.unit-cover-line{font-size:15px;color:var(--ink);margin:6px 0}
.unit-cover-note{font-size:13px;margin:6px 0 0}
.lesson-doc{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 16px;background:var(--panel)}
/* Generated plan headings must NOT inherit the decorative .hero h2/h3 chip+flex (site.css ~735):
   inside the contenteditable output that flex heading renders over the next block on WebKit. */
.unit-output h2,.unit-output h3{display:block;color:var(--ink)}
.unit-output h2::before,.unit-output h3::before{content:none;display:none}
.lp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.lp-head h3{margin:0}
.lp-unit{font-size:12.5px;color:var(--muted);font-weight:600}
.lp-field{margin:10px 0}
.lp-field h4{margin:0 0 4px;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent)}
.lp-list{margin:4px 0 0;padding-left:20px;line-height:1.6}
.lp-field p{margin:4px 0}
.lp-sub{font-size:13px;color:var(--muted)}
.lp-code{background:var(--code-bg,#0f172a);color:var(--code-fg,#e2e8f0);border-radius:8px;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.5;margin:6px 0}
.lp-code code{white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.lp-bigidea{font-weight:600;color:var(--ink);margin:4px 0}
.lp-vocab{margin:4px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;align-items:baseline}
.lp-vocab dt{font-weight:700;color:var(--ink)}
.lp-vocab dd{margin:0;color:var(--muted)}
.lp-coding{border-left:3px solid var(--accent);padding-left:12px;margin:4px 0}
.lp-goal{font-weight:600;margin:0 0 4px}
.lp-hints{margin:2px 0 0;padding-left:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;color:var(--ink)}
.lp-ext{margin:6px 0 0;color:var(--muted)}
.unit-rubric{margin:4px 0 22px}
.unit-rubric h3{margin:0 0 8px}
.lp-rubric{width:100%;border-collapse:collapse;font-size:13px}
.lp-rubric th,.lp-rubric td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.lp-rubric thead th{background:var(--bg-soft,#f1f5f9);font-weight:700}
.lp-rubric .lp-skill{width:22%;font-weight:600;background:var(--bg-soft,#f8fafc)}

@media print{
  body{background:#fff}
  .no-print{display:none!important}
  main{padding:0!important}
  .certificate{margin:0;max-width:none;padding:0}
  .cert-inner{box-shadow:none;border-color:var(--gold)}
  .skip-link{display:none}
  /* Unit Builder: print ONLY the generated lesson plans, nothing else on the page. */
  .site-header,.site-footer{display:none!important}
  body>section.hero:not(.unit-builder){display:none!important}
  .unit-builder{max-width:none!important;padding:0!important;margin:0!important}
  .unit-intro{display:none!important}
  .unit-output{margin:0!important}
  .lesson-doc{border:none;background:none;padding:0;break-inside:avoid;page-break-inside:avoid}
  .lesson-doc+.lesson-doc,.unit-rubric{break-before:page;page-break-before:always}
  .lp-code{background:#f4f4f5;color:#111;border:1px solid #ddd}
  .lp-rubric{break-inside:avoid;page-break-inside:avoid}
}
@media(max-width:560px){.cert-sigs{flex-direction:column;align-items:center}.cert-inner{padding:28px 18px}.cert-title{font-size:24px}.cert-name{font-size:26px}}