/* Same Alterna palette; semantic types retain meaning across every chapter. */
:root { --mg-gradient: #e66c71; --mg-attention: #b694f6; --mg-output: #58c49b; }
[data-theme="alakazam"], [data-theme="porygon-z"] { --mg-gradient: #a72440; --mg-attention: #7040a8; --mg-output: #177150; }
.mini-gpt,.mg-depth,.mg-map-global,.mg-derivation { --text:var(--ink); --border:var(--line); --mono:"JetBrains Mono",monospace; }
.mini-gpt { border:1px solid var(--border); border-top:3px solid var(--cyan); border-radius:14px; padding:clamp(14px,3vw,30px); margin:24px 0 38px; background:var(--panel,var(--bg)); min-width:0; }
.mini-gpt h2 { margin:10px 0; }.mini-gpt h3 { margin:18px 0 10px; }.mini-gpt p { max-width:78ch; line-height:1.65; overflow-wrap:anywhere; }
.mg-kicker,.mg-session { font:12px/1.7 var(--mono,monospace); color:var(--muted); }.mg-problem { border-left:3px solid var(--cyan); padding-left:14px; }
.mg-controls,.mg-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:14px 0; }.mg-controls > label { display:grid; gap:5px; flex:1 1 140px; min-width:0; font-size:13px; }.mg-controls > label:has(input[type="text"]) { flex-basis:280px; }
.mini-gpt input,.mini-gpt select,.mini-gpt textarea { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; min-height:44px; font-size:16px; width:100%; min-width:0; box-sizing:border-box; }.mini-gpt input[type="checkbox"] { width:22px; min-height:22px; }.mini-gpt input[type="range"] { padding:0; }.mini-gpt label:has(input[type="checkbox"]) { display:flex; align-items:center; }
.mini-gpt button { border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); padding:10px 13px; min-height:44px; cursor:pointer; font-size:13px; line-height:1.4; }.mini-gpt button:hover { border-color:var(--cyan); }.mini-gpt button:disabled { opacity:.5; cursor:default; }.mini-gpt :focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.mg-model-map { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:12px 0; }.mg-model-map button { font:11px/1.5 var(--mono,monospace); padding:8px; }.mg-model-map [aria-pressed="true"] { border:2px solid var(--cyan); font-weight:bold; }.mg-model-map [data-kind="weight"] { border-bottom:3px solid var(--amber); }.mg-model-map [data-kind="attention"] { border-bottom:3px solid var(--mg-attention); }.mg-model-map [data-kind="gradient"] { border-bottom:3px solid var(--mg-gradient); }.mg-model-map [data-kind="output"] { border-bottom:3px solid var(--mg-output); }.mg-map-note { font-size:13px; }
.mg-debugger { padding:14px 0; border-block:1px solid var(--border); min-width:0; }.mg-frame-heading h3 { color:var(--cyan); }.mg-table { overflow:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:8px; margin:14px 0; }.mg-table table { border-collapse:collapse; width:100%; font:12px/1.5 var(--mono,monospace); }.mg-table caption { padding:12px; text-align:left; font-weight:bold; color:var(--text); }.mg-table th,.mg-table td { padding:8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }.mg-table th { color:var(--muted); }.mg-table td small { display:block; color:var(--amber); }.mg-tensor td { padding:3px; }.mg-tensor button { font:12px/1.4 var(--mono,monospace); padding:8px; min-width:66px; }.mg-tensor .mg-masked { border-style:dashed; color:var(--muted); }
.mg-cell-explanation { border-left:3px solid var(--amber); padding:4px 14px; margin:14px 0; overflow-wrap:anywhere; }.mg-equation { font:14px/1.7 var(--mono,monospace); color:var(--cyan); }.mg-code pre,.mg-static-code { white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; background:var(--bg); border-radius:8px; font-size:13px; }.mg-symbol { border-bottom:2px dotted var(--amber)!important; }.mg-error { border-left:4px solid var(--mg-gradient); padding:12px; color:var(--text); }.mg-tensor-label { font-size:13px; }.mg-svg { width:100%; max-width:760px; height:auto; display:block; margin:14px auto; background:var(--bg); border:1px solid var(--border); border-radius:8px; touch-action:pan-y; }.mg-svg text { fill:var(--text); font-size:12px; font-family:var(--mono,monospace); }.mg-svg [data-mg-drag] { cursor:grab; touch-action:none; }.mg-svg [data-mg-wire] { cursor:pointer; }
.mg-ablation,.mg-selfcheck,.mg-parameter-panel,.mg-chapter-experiment section { margin-top:20px; padding-top:10px; border-top:1px solid var(--border); }.mini-gpt details summary,.mg-derivation > summary,.mg-map-global > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; font-weight:600; }.mini-gpt details summary::before,.mg-derivation > summary::before,.mg-map-global > summary::before { content:'▸'; }.mini-gpt details[open] > summary::before,.mg-derivation[open] > summary::before { content:'▾'; }.mg-selfcheck textarea { resize:vertical; }.mg-cursor { display:block; font-size:13px; }.mg-cursor input { width:100%; }
.mg-depth { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0; }.mg-depth select { font-size:16px; min-height:44px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; }.mg-map-global { margin:16px 0; border-block:1px solid var(--border); padding:8px 0; }.mg-global-links { display:flex; flex-wrap:wrap; gap:10px; padding:10px 0; }.mg-global-links a { border:1px solid var(--border); border-radius:6px; padding:10px; min-height:44px; font-size:12px; }.mg-derivation { margin:12px 0; border-bottom:1px solid var(--border); }.mg-real { border-left:3px solid var(--mg-output); padding-left:14px; }.mg-chapter-formula { margin:16px 0; }
@media(max-width:480px) { .mini-gpt { padding:12px; }.mg-controls > label { flex-basis:calc(50% - 10px); }.mg-actions button { flex:1 1 100px; }.mg-model-map button { flex:1 1 105px; }.mg-model-map > span { display:none; }.mg-cell-explanation { padding-left:9px; }.mg-svg text { font-size:13px; }.mg-session { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .mini-gpt * { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

/* Pedagogical default: one explanation and one result dominate; dumps are optional. */
.teacher-depth { display:block; position:relative; border-left:3px solid var(--cyan); padding:12px 18px; background:var(--panel); border-radius:8px; }
.teacher-depth label { font-size:18px; font-weight:700; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }.teacher-depth p { color:var(--muted); font-size:14px; margin:10px 0 0; max-width:75ch; }
.teacher-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }.teacher-toolbar span { flex:1 1 180px; text-align:center; font-weight:600; font-size:14px; }
.teacher-location { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0; font-size:12px; color:var(--muted); }.teacher-location [aria-current] { color:var(--ink); border-bottom:2px solid var(--cyan); font-weight:bold; }.teacher-location > span { padding:4px; }
.teacher-select { display:flex; gap:15px; flex-wrap:wrap; align-items:end; margin:18px 0; }.teacher-select label { flex:1 1 220px; display:grid; gap:7px; font-size:14px; }
.teacher-coach { padding:12px 0; max-width:78ch; }.teacher-coach h3 { font-size:clamp(20px,3vw,26px); margin:8px 0 14px; }.teacher-coach p { font-size:16px; line-height:1.8; }.teacher-term { border-left:3px solid var(--amber); padding:10px 16px; background:var(--bg); }.teacher-next { color:var(--muted); font-size:14px!important; }
.teacher-example-live { margin:16px 0; padding-left:15px; border-left:3px solid var(--amber); max-width:80ch; }.teacher-example-live p { white-space:pre-line; }.teacher-arithmetic { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); border-radius:8px; padding:16px; font:15px/1.9 var(--mono); }
.teacher-scene { display:block; width:100%; height:auto; max-width:760px; margin:12px auto 20px; background:var(--bg); border:1px solid var(--line); border-radius:12px; }.teacher-scene text { font:13px var(--mono); fill:var(--ink); }.teacher-scene .scene-input { fill:var(--panel); stroke:var(--cyan); stroke-width:1.5; }.teacher-scene .scene-output { fill:var(--panel); stroke:var(--mg-output); stroke-width:2; }.teacher-scene .scene-chosen { fill:var(--panel2); stroke:var(--amber); stroke-width:2.5; }.teacher-scene .scene-forbidden { fill:var(--bg); stroke:var(--muted); stroke-dasharray:4 3; }.teacher-scene .scene-arrow { fill:none; stroke:var(--mg-attention); stroke-width:3; }
.teacher-visual .mg-table,.teacher-visual .mg-tensor-label { display:none; }.teacher-visual .mg-svg { max-width:720px; }.teacher-workshop details { border-bottom:1px solid var(--line); margin:10px 0; padding:6px 0; }.teacher-products { padding-left:24px; line-height:2; font-family:var(--mono); }.teacher-equation { overflow-wrap:anywhere; white-space:pre-wrap; color:var(--cyan); font:16px/1.9 var(--mono); }.teacher-formula dl { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; }.teacher-formula dd { margin:0; }
.teacher-do { border-top:1px solid var(--line); margin-top:20px; padding:10px 0; }.teacher-primary-action > label { display:block; max-width:500px; padding:10px 0; }.teacher-primary-action > button { margin:8px 6px 8px 0; }.teacher-primary-action output { font-family:var(--mono); }.teacher-memory-controls { display:flex; flex-wrap:wrap; gap:10px; }.teacher-memory-controls label { display:grid; gap:8px; flex:1 1 160px; font-size:14px; }
.teacher-main { padding:14px 18px; border-left:3px solid var(--mg-output); border-radius:6px; background:var(--bg); max-width:80ch; font-size:16px; line-height:1.8; }.teacher-main strong { display:inline-block; margin-bottom:5px; }.teacher-reflect { margin:20px 0; }.teacher-reflect label { display:grid; gap:8px; }.teacher-reflect p:last-child { color:var(--muted); font-size:13px; }
.teacher-course-details { margin:22px 0; border-block:1px solid var(--line); padding:12px 0; }.teacher-course-details > summary { cursor:pointer; min-height:48px; font-weight:700; font-size:17px; padding:10px; }.mg-technical-debugger { margin-top:24px; border-top:1px solid var(--line); padding:12px 0; }.teacher-pipeline { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:14px 0; }.teacher-pipeline span:not([aria-hidden]) { padding:9px; border:1px solid var(--line); border-radius:7px; font-size:13px; color:var(--muted); }.teacher-pipeline [aria-current] { color:var(--ink)!important; border-color:var(--amber)!important; font-weight:600; }.teacher-notice:not(:empty) { border-left:3px solid var(--cyan); padding:10px 15px; }.teacher-topic { font-size:14px; color:var(--muted); }
.mg-heat { background:color-mix(in srgb,var(--mg-attention) var(--heat),var(--bg))!important; }
@media(max-width:480px) { .teacher-coach p { font-size:16px; }.teacher-toolbar button { flex:1 1 120px; }.teacher-toolbar span { order:-1; flex-basis:100%; }.teacher-formula dl { display:block; }.teacher-formula dt { font-weight:bold; margin-top:12px; }.teacher-scene text { font-size:14px; }.teacher-depth { padding:12px; } }
.teacher-scene[viewBox="0 0 320 280"],.teacher-scene[viewBox="0 0 320 290"] { max-width:440px; }
.teacher-attention-readout { display:grid; gap:6px; padding:10px 0 10px 24px; font-size:15px; }.teacher-attention-readout .chosen { border-left:3px solid var(--amber); padding-left:10px; }.teacher-token-strips { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0; }