:root {
  color-scheme: light;
  --paper: #fff8ed;
  --surface: #fffdf8;
  --surface-strong: #ffefcf;
  --ink: #3f2315;
  --muted: #795e4d;
  --line: #d8b892;
  --line-light: #ecd9bf;
  --orange: #e86f24;
  --orange-dark: #b94712;
  --gold: #f3b83f;
  --teal: #28786c;
  --code: #241a14;
  --code-ink: #f8ead8;
  --code-muted: #9f8978;
  font-family: Aptos, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(109, 52, 24, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 52, 24, 0.026) 1px, transparent 1px);
  background-size: 32px 32px;
}

button, input, select { font: inherit; }

.topbar {
  min-height: 66px;
  padding: 11px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255, 253, 248, 0.97);
  border-bottom: 1px solid var(--line);
}

.topbar h1 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: 0; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-actions > code { color: var(--orange-dark); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#glossary-toggle { height: 32px; padding: 0 10px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 750; }
#glossary-toggle:hover { background: var(--surface-strong); }
#glossary-toggle span { margin-right: 4px; color: var(--orange-dark); font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

main { max-width: 1500px; margin: 0 auto; padding: 16px 28px 30px; }

.controls {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(150px, 210px) auto minmax(220px, 1fr) auto 36px 36px 36px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.controls label { color: var(--muted); font-size: 12px; font-weight: 700; }
.controls input, .controls select {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
}
.controls input:focus, .controls select:focus { border-color: var(--orange-dark); box-shadow: 0 0 0 2px rgba(232, 111, 36, 0.16); }
.controls button {
  height: 34px;
  padding: 0 14px;
  color: #fff;
  background: var(--orange-dark);
  border: 1px solid var(--orange-dark);
  border-radius: 4px;
  cursor: pointer;
}
.controls button:hover { background: #6d3418; }
.controls .icon-button { width: 36px; padding: 0; color: var(--ink); background: transparent; border-color: var(--line); font-size: 18px; }
.controls .icon-button:hover { background: var(--surface-strong); }

.lesson-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 2px;
}
.lesson-heading span { color: var(--orange-dark); font-size: 12px; font-weight: 750; }
.lesson-heading h2 { margin: 2px 0 0; font-size: 19px; letter-spacing: 0; }
.lesson-heading > b { color: var(--muted); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.lesson-progress { display: grid; grid-template-columns: repeat(16, minmax(88px, 1fr)); overflow-x: auto; border: 1px solid var(--line); border-bottom: 0; scrollbar-width: thin; }
.lesson-progress button {
  min-width: 0;
  height: 36px;
  padding: 0 5px;
  color: var(--muted);
  background: rgba(255, 253, 248, 0.78);
  border: 0;
  border-right: 1px solid var(--line-light);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-progress button:last-child { border-right: 0; }
.lesson-progress button.is-current { color: #fff; background: var(--orange-dark); }
.lesson-progress button.is-orientation.is-current { background: var(--teal); }
.lesson-progress button.is-complete { color: var(--ink); background: #ffe6b3; }
.lesson-progress button.is-runtime.is-complete { background: #d9eee8; }

.workspace {
  height: 570px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  background: var(--surface);
  border: 1px solid var(--line);
}

.code-panel, .value-panel { min-width: 0; min-height: 0; }
.code-panel { display: grid; grid-template-rows: 43px 1fr; background: var(--code); border-right: 1px solid var(--line); }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 14px; color: var(--code-muted); border-bottom: 1px solid #4e382b; }
.file-tabs { align-self: stretch; display: flex; gap: 20px; }
.file-tabs button { padding: 0; color: var(--code-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: 650 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.file-tabs button.is-active { color: #fff1de; border-bottom-color: var(--orange); }
.code-toolbar > span { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.code-scroll { min-height: 0; overflow: auto; scroll-behavior: smooth; padding: 10px 0 18px; }
#source-code { display: block; min-width: max-content; color: var(--code-ink); font: 12px/21px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-line { min-height: 21px; display: grid; grid-template-columns: 46px minmax(620px, 1fr); border-left: 3px solid transparent; transition: background-color 130ms ease, border-color 130ms ease; }
.code-line .line-number { padding-right: 12px; color: #735f51; text-align: right; user-select: none; }
.code-line .line-text { padding-right: 24px; white-space: pre; }
.code-line.is-active { background: #54301d; border-left-color: var(--orange); }
.code-line.is-active .line-number { color: #ffbd77; }
.code-line.is-active .line-text { color: #fff7e9; }
.token-keyword { color: #ffb36b; font-weight: 700; }
.token-string { color: #f6d778; }
.token-comment { color: #9eb79f; }
.token-number { color: #83d1c5; }

.value-panel { display: grid; grid-template-rows: 62px 1fr; background: rgba(255, 253, 248, 0.93); }
.value-panel > header { padding: 11px 18px; border-bottom: 1px solid var(--line); }
.value-panel > header span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.value-panel > header strong { display: block; margin-top: 3px; color: var(--orange-dark); font-size: 16px; }
.visual { min-height: 0; overflow: auto; padding: 18px; }

.seed-table, .artifact-table, .evidence-table { width: 100%; border-collapse: collapse; }
.seed-table th, .seed-table td, .artifact-table th, .artifact-table td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line-light); font-size: 12px; }
.seed-table th, .artifact-table th { color: var(--muted); font-weight: 700; }
.seed-table td:last-child { color: var(--orange-dark); font-weight: 700; }
.seed-table th, .seed-table td { padding: 4px 9px; font-size: 11px; line-height: 1.25; }
.csv-preview { margin-top: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.csv-preview > header { min-height: 32px; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-strong); }
.csv-preview > header b { color: var(--orange-dark); font: 750 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.csv-preview > header span { color: var(--muted); font-size: 10px; }
.csv-source { padding: 3px 0 4px; overflow-x: auto; color: var(--code-ink); background: var(--code); }
.csv-line { min-width: 280px; min-height: 17px; display: grid; grid-template-columns: 30px minmax(230px, 1fr); align-items: center; font: 10.5px/17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.csv-line i { padding-right: 9px; color: #735f51; font-style: normal; text-align: right; user-select: none; }
.csv-line code { padding-left: 8px; color: var(--code-ink); border-left: 1px solid #4e382b; white-space: pre; }
.csv-line.is-header code { color: #f6d778; font-weight: 750; }
.contrast-line { margin: 8px 0 0; padding: 6px 0; display: grid; grid-template-columns: auto 1fr; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contrast-line b { color: var(--teal); }
.contrast-line span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.sample-word { margin: 2px 0 12px; font: 750 24px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fragments { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 5px; }
.fragment { padding: 6px 4px; overflow: hidden; color: #5b2d16; background: #ffe4ad; border: 1px solid #dfad5f; border-radius: 2px; font: 700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; opacity: 0; animation: fragment-in 180ms ease forwards; animation-delay: calc(var(--order) * 24ms); }
.fragment.is-unknown { color: var(--muted); background: transparent; border-style: dashed; opacity: 0; }
.detail-note { margin: 15px 0 0; color: var(--muted); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.training-row { padding: 3px 0 12px 12px; border-left: 3px solid var(--orange-dark); border-bottom: 1px solid var(--line-light); }
.training-row span, .training-row b { display: block; }
.training-row span { color: var(--muted); font-size: 10px; font-weight: 750; }
.training-row b { margin-top: 4px; font-size: 17px; }
.training-row i { padding: 0 7px; color: var(--orange-dark); font-style: normal; }
.ngram-groups { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ngram-groups section { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line-light); }
.ngram-groups header, .candidate-group header { margin-bottom: 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ngram-groups header b, .candidate-group header b { color: var(--muted); font-size: 10px; }
.ngram-groups header span, .candidate-group header span { color: var(--orange-dark); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.orientation-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.orientation-map button { min-width: 0; padding: 13px 0 13px 14px; color: var(--ink); background: transparent; border: 0; border-left: 3px solid var(--teal); border-bottom: 1px solid var(--line-light); cursor: pointer; text-align: left; opacity: 0; animation: trace-in 260ms ease forwards; }
.orientation-map button:nth-child(2) { animation-delay: 80ms; }
.orientation-map button:nth-child(3) { animation-delay: 160ms; }
.orientation-map button:nth-child(4) { animation-delay: 240ms; }
.orientation-map b, .orientation-map span { display: block; }
.orientation-map b { color: var(--teal); font-size: 13px; }
.orientation-map span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.42; }
.open-glossary { margin-top: 16px; padding: 9px 0; color: var(--orange-dark); background: transparent; border: 0; border-bottom: 1px solid var(--orange-dark); cursor: pointer; font-size: 12px; font-weight: 800; }

.code-note { margin: 20px 0 2px; padding: 14px 0 2px 15px; border-top: 1px solid var(--line); border-left: 3px solid var(--orange-dark); }
.code-note > span { color: var(--orange-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.code-note h3 { margin: 4px 0 6px; font-size: 14px; letter-spacing: 0; }
.code-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.term-links { margin-top: 12px; padding-top: 9px; display: flex; flex-wrap: wrap; gap: 5px 12px; border-top: 1px solid var(--line-light); }
.term-links > span { flex-basis: 100%; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.term-links button { padding: 0; color: var(--teal); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font-size: 11px; font-weight: 750; }
.note-formula { display: block; margin-top: 10px; padding: 9px 10px; overflow-x: auto; color: var(--ink); background: var(--surface-strong); font-size: 11px; white-space: nowrap; }
.math-steps { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: 1px solid var(--line-light); }
.math-steps div { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line-light); }
.math-steps b { display: block; color: var(--orange-dark); font-size: 11px; }
.math-steps code { display: block; margin-top: 3px; overflow-wrap: anywhere; color: var(--ink); font-size: 10px; }

.matrix-flow { min-height: 250px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.matrix-block { min-width: 0; padding: 16px 10px; text-align: center; border-top: 3px solid var(--orange); border-bottom: 1px solid var(--line); }
.matrix-block.teal { border-top-color: var(--teal); }
.matrix-block b { display: block; font-size: 26px; }
.matrix-block span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.matrix-arrow { color: var(--orange-dark); font-size: 21px; }
.formula { margin: 16px 0 0; padding: 12px; color: var(--ink); background: var(--surface-strong); border-left: 3px solid var(--orange-dark); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.fit-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr); align-items: center; gap: 8px; padding: 2px 0 12px; }
.fit-flow > div { min-width: 0; padding: 9px 6px; text-align: center; border-top: 3px solid var(--orange); border-bottom: 1px solid var(--line-light); }
.fit-flow > div.teal { border-top-color: var(--teal); }
.fit-flow span, .fit-flow b, .fit-flow small { display: block; }
.fit-flow span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.fit-flow b { margin-top: 4px; font-size: 19px; }
.fit-flow small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.fit-flow > strong { color: var(--orange-dark); font-size: 17px; text-align: center; }

.parameter-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.parameter-table th, .parameter-table td { padding: 7px 7px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-light); }
.parameter-table th { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.parameter-table th:nth-child(1) { width: 21%; }
.parameter-table th:nth-child(2) { width: 19%; }
.parameter-table th:nth-child(3) { width: 60%; }
.parameter-table td { color: var(--muted); font-size: 10px; line-height: 1.36; }
.parameter-table td button { padding: 0; color: var(--teal); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: 750 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.parameter-table td code { color: var(--orange-dark); font-size: 10px; font-weight: 750; }
.fit-observation { margin-top: 10px; padding: 9px 0 2px 12px; border-left: 3px solid var(--teal); }
.fit-observation b, .fit-observation span { display: block; }
.fit-observation b { color: var(--teal); font-size: 11px; }
.fit-observation span { margin-top: 3px; color: var(--muted); font-size: 10px; }

.artifact-table td:first-child { color: var(--orange-dark); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.artifact-table td:last-child { overflow-wrap: anywhere; }
.export-trace { margin-top: 14px; padding: 10px 0; display: grid; grid-template-columns: 1fr auto auto 1fr auto; align-items: center; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-light); }
.export-trace span { color: var(--muted); font-size: 10px; font-weight: 750; }
.export-trace code { color: var(--orange-dark); font-size: 12px; font-weight: 750; }
.export-trace b { color: var(--teal); }

.text-pair { margin: 0; }
.text-pair div { padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.text-pair dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.text-pair dd { margin: 6px 0 0; overflow-wrap: anywhere; font: 750 20px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.execution-flow { display: grid; gap: 10px; }
.execution-flow.horizontal { min-height: 180px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.execution-step { min-width: 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-light); opacity: 0; animation: trace-in 260ms ease forwards; }
.execution-step:nth-of-type(3) { animation-delay: 100ms; }
.execution-step:nth-of-type(4) { animation-delay: 180ms; }
.execution-step.is-live { padding-left: 12px; border-left: 3px solid var(--orange-dark); }
.execution-step b, .execution-step span, .execution-step code { display: block; }
.execution-step b { color: var(--orange-dark); font-size: 12px; }
.execution-step span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.execution-step code { margin-top: 6px; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.flow-arrow { color: var(--muted); font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }

.artifact-memory-flow { min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.8fr) auto minmax(0, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.artifact-memory-flow > span { min-width: 0; color: var(--muted); font-size: 9px; }
.artifact-memory-flow b { display: block; margin-bottom: 3px; overflow: hidden; color: var(--ink); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.artifact-memory-flow i { color: var(--orange-dark); font-style: normal; }
.artifact-memory-flow .is-live { padding-left: 8px; border-left: 3px solid var(--teal); }

.json-viewer { max-height: 205px; margin-top: 12px; padding: 8px 10px 10px; overflow: auto; color: var(--code-ink); background: var(--code); border: 1px solid #4e382b; font: 10.5px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; scrollbar-width: thin; }
.json-viewer:focus, .artifact-index-scroll:focus { outline: 2px solid rgba(185, 71, 18, 0.34); outline-offset: 2px; }
.json-viewer details { min-width: max-content; }
.json-viewer summary { min-height: 22px; color: var(--code-ink); cursor: pointer; white-space: nowrap; }
.json-viewer summary::marker { color: #ffb36b; }
.json-viewer summary > * { margin-right: 6px; }
.json-viewer summary b { color: #fff1de; }
.json-viewer summary i, .json-line i { color: var(--code-muted); font-style: normal; }
.json-viewer summary em { color: var(--code-muted); font-size: 9px; font-style: normal; }
.json-branch-body { margin-left: 7px; padding-left: 13px; border-left: 1px solid #4e382b; }
.json-line { min-height: 22px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.json-key { color: #f6d778; }
.json-string { color: #9eb79f; }
.json-number { color: #83d1c5; }
.json-bracket { color: #ffb36b; font-weight: 750; }
.json-index { min-width: 15px; color: #ffb36b; }
.json-comment, .json-more { color: var(--code-muted); }
.json-more { padding-left: 1px; font-size: 9px; }
.json-array-summary { min-height: 25px; display: grid; grid-template-columns: 18px 48px minmax(185px, auto) auto; align-items: baseline; gap: 7px; white-space: nowrap; }
.json-array-summary > span:nth-child(2) { color: #fff1de; }
.json-array-summary code { color: #83d1c5; }
.json-array-summary em { color: var(--code-muted); font-size: 9px; font-style: normal; }

.artifact-index-example { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.artifact-index-example > header { min-height: 34px; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.artifact-index-example > header b { font-size: 11px; }
.artifact-index-example > header span { color: var(--muted); font-size: 9px; }
.artifact-index-scroll { overflow-x: auto; scrollbar-width: thin; }
.artifact-index-example table { width: 100%; min-width: 390px; border-collapse: collapse; }
.artifact-index-example th, .artifact-index-example td { height: 27px; padding: 4px 7px; text-align: right; border-top: 1px solid var(--line-light); font: 9.5px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.artifact-index-example th { color: var(--muted); font-weight: 700; }
.artifact-index-example th:first-child, .artifact-index-example td:first-child { text-align: left; }
.artifact-index-example td:first-child code { color: var(--orange-dark); font-weight: 750; }
.artifact-index-example td:nth-child(4) { color: var(--teal); font-weight: 750; }

.call-stack { display: grid; gap: 8px; }
.call-stack > div { padding: 12px 0 12px 14px; border-left: 3px solid var(--line); border-bottom: 1px solid var(--line-light); opacity: 0; animation: trace-in 260ms ease forwards; }
.call-stack > div:nth-child(2) { animation-delay: 100ms; }
.call-stack > div:nth-child(3) { animation-delay: 200ms; }
.call-stack > div.is-live { border-left-color: var(--orange-dark); }
.call-stack > div.is-next { border-left-color: var(--teal); }
.call-stack span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.call-stack b, .call-stack code { display: block; margin-top: 4px; }
.call-stack b { font-size: 15px; }
.call-stack code { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }

.candidate-key { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--muted); font-size: 10px; }
.candidate-key span { display: flex; align-items: center; gap: 6px; }
.candidate-key i { width: 13px; height: 8px; background: transparent; border: 1px dashed var(--line); }
.candidate-key i.known { background: #ffe4ad; border: 1px solid #dfad5f; }
.candidate-scroll { max-height: 235px; overflow-y: auto; padding: 7px 10px 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.candidate-scroll:focus, .evidence-scroll:focus { outline: 2px solid rgba(185, 71, 18, 0.34); outline-offset: 2px; }
.candidate-group { padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.candidate-group:last-child { border-bottom: 0; }

.math-table { width: 100%; border-collapse: collapse; }
.math-table th, .math-table td { padding: 11px 8px; text-align: right; border-bottom: 1px solid var(--line-light); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.math-table th { color: var(--muted); font-weight: 700; }
.math-table th:first-child, .math-table td:first-child { text-align: left; }
.math-table td:first-child b, .math-table td:first-child span { display: block; }
.math-table td:first-child span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.math-table tbody tr { opacity: 0; animation: trace-in 300ms ease forwards; }
.math-table tbody tr:nth-child(2) { animation-delay: 140ms; }
.baseline-explainer { margin-bottom: 12px; padding: 10px 0 8px 12px; border-left: 3px solid var(--teal); }
.baseline-explainer b, .baseline-explainer span { display: block; }
.baseline-explainer b { color: var(--teal); font-size: 12px; }
.baseline-explainer span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.formula-trace { margin-top: 18px; padding: 12px 0 2px 14px; border-left: 3px solid var(--orange-dark); }
.formula-trace b, .formula-trace span { display: block; }
.formula-trace b { font-size: 12px; }
.formula-trace span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sum-line { margin-top: 16px; padding-top: 11px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); font: 700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.winner-trace { display: grid; gap: 9px; }
.winner-trace > div { padding: 13px 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line-light); opacity: 0; animation: trace-in 260ms ease forwards; }
.winner-trace > div:nth-child(2) { animation-delay: 130ms; }
.winner-trace > div:nth-child(3) { animation-delay: 260ms; }
.winner-trace > div.is-live { padding-left: 12px; border-left: 3px solid var(--orange-dark); }
.winner-trace b { font-size: 12px; }
.winner-trace code { min-width: 0; overflow-wrap: anywhere; color: var(--orange-dark); font-size: 12px; }

.terminal-output { min-height: 125px; padding: 18px; color: var(--code-ink); background: var(--code); border-left: 3px solid var(--orange); }
.terminal-output span { display: block; color: var(--code-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.terminal-output code { display: block; margin-top: 28px; overflow-wrap: anywhere; color: #fff1de; font: 700 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity: 0; animation: trace-in 420ms ease 180ms forwards; }

.relative-key { padding: 2px 0 9px 11px; border-left: 3px solid var(--teal); }
.relative-key b, .relative-key span { display: block; }
.relative-key b { color: var(--teal); font-size: 11px; }
.relative-key span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.evidence-scroll { max-height: 235px; margin-top: 9px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.evidence-head, .evidence-row { display: grid; grid-template-columns: minmax(52px, 0.45fr) minmax(230px, 1.8fr); gap: 10px; align-items: center; }
.evidence-head { position: sticky; top: 0; z-index: 1; min-height: 32px; padding: 0 7px; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; }
.evidence-row { min-height: 44px; padding: 4px 7px; border-bottom: 1px solid var(--line-light); }
.evidence-row code { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.evidence-value { min-width: 0; display: grid; grid-template-columns: minmax(150px, auto) minmax(50px, 1fr) auto; gap: 8px; align-items: center; font-size: 10px; }
.evidence-value code { color: var(--ink); font-size: 10px; white-space: nowrap; }
.evidence-value span { color: var(--muted); white-space: nowrap; }
.evidence-track { height: 8px; background: #f2e4d2; }
.evidence-bar { height: 100%; width: var(--width); background: var(--orange); animation: bar-in 520ms ease both; }
.evidence-bar.other { margin-left: auto; background: var(--teal); }
.score-equation { margin-top: 10px; border-top: 1px solid var(--line-light); }
.score-equation > div { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-light); }
.score-equation span { color: var(--muted); font-size: 10px; }
.score-equation code { color: var(--ink); font-size: 11px; font-weight: 750; }
.score-equation .total span, .score-equation .total code { color: var(--orange-dark); font-weight: 800; }
.baseline-line { margin-top: 13px; padding: 10px 0 2px 12px; border-left: 3px solid var(--teal); }
.baseline-line b, .baseline-line span { display: block; }
.baseline-line b { color: var(--teal); font-size: 11px; }
.baseline-line span { margin-top: 3px; color: var(--muted); font-size: 11px; }

.probability { margin-bottom: 22px; }
.probability-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 750; }
.probability-label code { color: var(--muted); font-size: 11px; }
.probability-track { height: 17px; background: #f0dfc9; border: 1px solid #dec29e; }
.probability-bar { height: 100%; width: var(--width); background: var(--orange); animation: bar-in 650ms ease both; }
.probability.other .probability-bar { background: var(--teal); }
.output { margin-top: 34px; padding: 19px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; border-top: 2px solid var(--orange-dark); border-bottom: 1px solid var(--line); }
.output span { overflow-wrap: anywhere; font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.output strong { color: var(--orange-dark); font-size: 19px; }
.output b { color: var(--orange-dark); font-size: 28px; }
.output em { grid-column: 3; color: var(--muted); font-size: 14px; font-style: normal; }

.reference-band { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(255, 253, 248, 0.82); border: 1px solid var(--line); border-top: 0; }
.reference-band > div { min-width: 0; padding: 14px 18px; border-right: 1px solid var(--line); }
.reference-band > div:last-child { border-right: 0; }
.reference-band h2 { margin: 0 0 5px; font-size: 13px; }
.reference-band p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.reference-band code { color: var(--orange-dark); font-size: 11px; font-weight: 700; }

@keyframes fragment-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bar-in { from { width: 0; } to { width: var(--width); } }
@keyframes trace-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

body.glossary-open { overflow: hidden; }
.glossary-layer { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; }
.glossary-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(63, 35, 21, 0.22); border: 0; cursor: default; }
.glossary-drawer { position: relative; z-index: 1; width: min(520px, 100%); height: 100%; display: grid; grid-template-rows: auto auto 1fr; color: var(--ink); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(63, 35, 21, 0.12); animation: drawer-in 180ms ease both; }
.glossary-drawer > header { min-height: 78px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.glossary-drawer > header span { color: var(--orange-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.glossary-drawer h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: 0; }
#glossary-close { width: 34px; height: 34px; padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 24px; line-height: 1; }
#glossary-search { height: 38px; margin: 14px 20px 8px; padding: 0 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; outline: none; }
#glossary-search:focus { border-color: var(--orange-dark); box-shadow: 0 0 0 2px rgba(232, 111, 36, 0.16); }
.glossary-list { min-height: 0; overflow-y: auto; padding: 0 20px 28px; }
.glossary-list article { padding: 14px 0 14px 13px; border-left: 3px solid var(--line); border-bottom: 1px solid var(--line-light); }
.glossary-list article.is-highlighted { border-left-color: var(--orange-dark); background: #fff6e5; }
.glossary-list article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.glossary-list h3 { margin: 0; font-size: 14px; letter-spacing: 0; }
.glossary-list article span { color: var(--orange-dark); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.glossary-list article p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.48; }
.glossary-empty { color: var(--muted); font-size: 13px; }
@keyframes drawer-in { from { transform: translateX(18px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 1050px) {
  .controls { grid-template-columns: auto 1fr auto 1.4fr; padding: 8px 0; }
  .controls button { grid-row: 2; }
  .controls button[type="submit"] { grid-column: 2; }
  .controls .icon-button { grid-column: auto; }
  .workspace { height: auto; grid-template-columns: 1fr; }
  .code-panel { height: 510px; border-right: 0; border-bottom: 1px solid var(--line); }
  .value-panel { min-height: 500px; }
}

@media (max-width: 680px) {
  .topbar { align-items: flex-start; padding: 12px 16px; }
  .topbar-actions > code { display: none; }
  main { padding: 10px 16px 24px; }
  .controls { grid-template-columns: repeat(3, 1fr); }
  .controls label, .controls input, .controls select { grid-column: 1 / -1; }
  .controls button[type="submit"] { grid-column: 1 / -1; grid-row: auto; }
  .controls .icon-button { grid-column: auto; grid-row: auto; width: 100%; }
  .lesson-heading h2 { font-size: 16px; }
  .lesson-progress { grid-template-columns: repeat(16, minmax(94px, 1fr)); }
  .code-panel { height: 470px; }
  .code-line { grid-template-columns: 40px minmax(600px, 1fr); }
  .value-panel { min-height: 520px; }
  .visual { padding: 14px; }
  .math-steps { grid-template-columns: 1fr; }
  .orientation-map { grid-template-columns: 1fr; }
  .matrix-flow { grid-template-columns: 1fr; gap: 7px; }
  .matrix-arrow { transform: rotate(90deg); text-align: center; }
  .ngram-groups { grid-template-columns: 1fr; }
  .fit-flow { grid-template-columns: 1fr; gap: 6px; }
  .fit-flow > strong { transform: rotate(90deg); }
  .parameter-table, .parameter-table tbody { display: block; }
  .parameter-table thead { display: none; }
  .parameter-table tr { padding: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border-bottom: 1px solid var(--line-light); }
  .parameter-table td { padding: 0 5px; border-bottom: 0; }
  .parameter-table td:nth-child(3) { grid-column: 1 / -1; }
  .export-trace { grid-template-columns: 1fr auto; }
  .export-trace b { display: none; }
  .execution-flow.horizontal { min-height: 0; grid-template-columns: 1fr; }
  .flow-arrow { padding: 2px 0; }
  .artifact-memory-flow { grid-template-columns: 1fr auto 1fr; }
  .artifact-memory-flow > span:nth-of-type(2), .artifact-memory-flow > i:nth-of-type(2) { display: none; }
  .json-viewer { max-height: 300px; }
  .evidence-scroll { overflow: auto; }
  .evidence-head, .evidence-row { min-width: 300px; grid-template-columns: 48px minmax(230px, 1fr); }
  .evidence-value { grid-template-columns: minmax(150px, 1fr) auto; }
  .evidence-value .evidence-track { grid-column: 1 / -1; }
  .winner-trace > div { grid-template-columns: 1fr; gap: 5px; }
  .reference-band { grid-template-columns: 1fr; }
  .reference-band > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .reference-band > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}