/* Heretek Labs: a quiet reading surface around an explorable system model. */
:root {
  color-scheme: dark;
  --bg: #101113;
  --header: #080808;
  --panel: #181a1e;
  --panel2: #202329;
  --field: #121418;
  --text: #edf0f4;
  --muted: #a9b0bb;
  --faint: #86909f;
  --line: #343940;
  --line-strong: #535d6b;
  --brand: #51e37d;
  --brand-subtle: #183323;
  --brand-text: #92e5ab;
  --mint: #77d8c5;
  --mint-subtle: #19352f;
  --blue: #a5c9f3;
  --blue-subtle: #1d2c3e;
  --gold: #e9b975;
  --gold-subtle: #30291f;
  --rust: #c87533;
  --red: #ffaea4;
  --stage: #141b23;
  --stage-edge: #3b4858;
  --shadow: 0 14px 32px #0002;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
body[data-study-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f3;
  --header: #ffffff;
  --panel: #ffffff;
  --panel2: #e9edf0;
  --field: #fafbfc;
  --text: #202830;
  --muted: #535e69;
  --faint: #66717c;
  --line: #d1d8dd;
  --line-strong: #9aa6b1;
  --brand: #247341;
  --brand-subtle: #e0f1e5;
  --brand-text: #245e36;
  --mint: #1d7162;
  --mint-subtle: #e3f1ed;
  --blue: #2d5e91;
  --blue-subtle: #e8eff8;
  --gold: #855818;
  --gold-subtle: #f7ecd9;
  --rust: #99501f;
  --red: #ae352d;
  --stage: #e6edf4;
  --stage-edge: #bac6d1;
  --shadow: 0 12px 30px #21344a08;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
button, select { touch-action: manipulation; }
button {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--panel2); color: var(--text);
  font-size: .875rem; line-height: 1.4;
  transition: background .12s, border-color .12s, color .12s;
}
button:hover:not(:disabled) { background: var(--panel); border-color: var(--line-strong); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--rust); outline-offset: 3px;
}
a { color: var(--mint); text-underline-offset: 4px; }
code { font-family: var(--mono); font-size: .84em; }
.primary { color: var(--bg); background: var(--mint); border-color: var(--mint); font-weight: 650; }
.primary:hover:not(:disabled) { color: var(--text); background: var(--mint-subtle); border-color: var(--mint); }
.quiet { color: var(--muted); background: transparent; border-color: transparent; }
.quiet:hover:not(:disabled) { color: var(--text); background: var(--panel2); border-color: var(--line); }
.site-header {
  display: flex; align-items: center; gap: 28px; min-height: 64px;
  padding: 8px max(28px, calc((100vw - 1864px) / 2)); background: var(--header);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: 10px; align-items: center; white-space: nowrap; text-decoration: none; color: var(--text); font: 650 1.125rem var(--mono); letter-spacing: -.04em; }
.brand-mark { color: var(--brand); margin-right: 2px; }
.brand-divider { color: var(--line-strong); font-weight: 400; margin: 0 3px; }
.brand-section { font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.trail { color: var(--faint); font: .625rem var(--mono); letter-spacing: .11em; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.theme-control { display: flex; align-items: center; gap: 10px; }
.theme-control label { color: var(--muted); font-size: .75rem; margin: 0; }
.theme-control select { color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: 9px 28px 9px 11px; border-radius: 5px; font-size: .8125rem; min-height: 44px; }
.header-actions .quiet { font-size: .8125rem; }
.back-link { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; font-size: .8125rem; min-height: 44px; padding: 8px 0 8px 10px; }
.back-link:hover { color: var(--text); }
.back-link span { color: var(--rust); font-size: 1rem; }
main { max-width: 1920px; margin: auto; padding: 22px 28px 0; }
.intro { display: flex; align-items: baseline; gap: 22px; margin: 0 0 15px; min-height: 35px; }
.eyebrow { margin: 0 0 9px; color: var(--muted); font: 500 .6875rem var(--mono); letter-spacing: .1em; line-height: 1.5; }
h1 { font: 600 1.75rem var(--mono); line-height: 1.2; letter-spacing: -.055em; margin: 0; }
.title-dot { color: var(--rust); }
.intro-copy { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }
h2 { font-size: 1.4rem; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; margin: 12px 0; }
h3 { font-size: 1rem; font-weight: 600; }
.workspace-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs { display: flex; gap: 22px; }
.tabs button { padding: 10px 2px 12px; min-height: 46px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: none; font-size: .875rem; }
.tabs button:hover:not(:disabled) { background: none; color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }
.workspace-nav > .quiet { font-size: .75rem; }
.workbench { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.lesson-rail { padding: 8px 20px 0 0; border-right: 1px solid var(--line); min-width: 0; }
.rail-heading { margin-bottom: 28px; }
.rail-heading .eyebrow { color: var(--faint); margin-bottom: 5px; }
.rail-heading h2 { font-size: .9375rem; letter-spacing: -.01em; margin: 0; }
.journey-nav { display: flex; flex-direction: column; gap: 25px; }
.tour-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tour-group legend { padding: 0; margin-bottom: 10px; color: var(--faint); font: .625rem var(--mono); text-transform: uppercase; letter-spacing: .065em; }
.tour-group button { display: flex; align-items: center; text-align: left; gap: 10px; width: 100%; min-height: 44px; padding: 10px 9px; border-color: transparent; background: transparent; font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.tour-group button span { color: var(--faint); font: .6875rem var(--mono); flex-shrink: 0; }
.tour-group button[aria-current="true"] { color: var(--text); background: var(--brand-subtle); border-color: transparent; box-shadow: inset 2px 0 var(--brand); }
.tour-group button[aria-current="true"] span { color: var(--brand-text); }
.tour-note { color: var(--faint); font-size: .75rem; line-height: 1.65; margin: 30px 0 10px; }
.compact-topic { display: none; align-items: center; gap: 12px; }
.compact-topic label { color: var(--muted); font-size: .8125rem; margin: 0; }
.compact-topic select { border: 1px solid var(--line); color: var(--text); background: var(--panel); padding: 10px 12px; border-radius: 5px; font-size: .875rem; min-width: 0; min-height: 44px; width: 100%; }
.experiment-nav { list-style: none; margin: 0; padding: 0; counter-reset: operation; display: flex; flex-direction: column; gap: 9px; }
.experiment-nav li { counter-increment: operation; display: flex; gap: 11px; align-items: center; padding: 11px 9px; color: var(--muted); font-size: .8125rem; line-height: 1.5; min-width: 0; min-height: 46px; }
.experiment-number { flex-shrink: 0; font: .6875rem var(--mono); color: var(--faint); }
.experiment-nav li[aria-current="step"] .experiment-number { color: var(--blue); }
.experiment-nav li.visited .experiment-number { color: var(--mint); }
.experiment-nav button { width: 100%; display: flex; align-items: center; text-align: left; gap: 10px; color: var(--muted); background: transparent; border-color: transparent; padding: 10px 9px; font-size: .8125rem; }
.experiment-nav button span { flex-shrink: 0; font: .6875rem var(--mono); color: var(--faint); }
.experiment-nav button[aria-current="step"], .experiment-nav button[aria-current="true"], .experiment-nav li[aria-current="step"] { color: var(--text); background: var(--blue-subtle); box-shadow: inset 2px 0 var(--blue); border-radius: 5px; }
.experiment-nav button[aria-current] span { color: var(--blue); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; min-width: 0; }
.visual-column { min-width: 0; }
.view-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; margin: 0 0 12px; }
.view-heading .eyebrow { font-size: .625rem; }
.view-heading p { color: var(--muted); margin: 5px 0 0; font-size: .8125rem; line-height: 1.5; }
.segmented-control { display: flex; flex-shrink: 0; padding: 3px; gap: 3px; background: var(--field); border: 1px solid var(--line); border-radius: 6px; }
.segmented-control button { color: var(--muted); background: transparent; border-color: transparent; min-height: 44px; padding: 6px 12px; font-size: .75rem; }
.segmented-control button[aria-pressed="true"] { color: var(--text); background: var(--panel2); border-color: var(--line); box-shadow: 0 1px 3px #0001; }
.scene-wrap { position: relative; overflow: hidden; border: 1px solid var(--stage-edge); border-radius: 8px; background: var(--stage); box-shadow: var(--shadow); }
.scene-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 49px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.scene-caption { color: var(--muted); font: .625rem var(--mono); line-height: 1.5; letter-spacing: .045em; }
.model-badge { color: var(--faint); font: .5625rem var(--mono); letter-spacing: .055em; white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--line); }
#scene { height: clamp(360px, calc(100vh - 420px), 500px); position: relative; background: var(--stage); isolation: isolate; overflow: hidden; }
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#scene canvas:active { cursor: grabbing; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#render-fallback { position: absolute; inset: 25% 10%; padding: 30px; background: var(--panel); line-height: 1.6; }
.scene-label { position: absolute; color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 4px; font-family: inherit; font-size: .8125rem; line-height: 1.3; text-align: left; pointer-events: none; }
.scene-label.selected { border-color: var(--mint); background: var(--mint-subtle); }
.scene-label small { display: block; font-size: .75rem; color: var(--muted); }
.scene-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.view-controls { display: flex; align-items: center; gap: 5px; }
.view-controls label { margin: 0 3px 0 0; color: var(--muted); font-size: .75rem; }
.view-controls select { color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 8px; font-size: .75rem; min-height: 44px; }
.scene-toolbar button { padding: 8px 10px; font-size: .75rem; min-height: 44px; }
.camera-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.camera-buttons .active { border-color: var(--blue); background: var(--blue-subtle); }
.camera-control-menu summary { color: var(--muted); font-size: .75rem; padding: 13px 0; min-height: 44px; }
.camera-control-menu[open] { flex-basis: 100%; }
.camera-pad { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.camera-help { margin: 0; padding: 0 14px 14px; background: var(--panel); color: var(--muted); font-size: .6875rem; line-height: 1.6; }
.map-key { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel); border-top: 1px solid var(--line); color: var(--muted); font-size: .6875rem; line-height: 1.4; }
.map-key span, .legend span { display: flex; align-items: center; gap: 7px; }
.key-line, .key-dashed { width: 24px; height: 0; display: inline-block; border-top: 2px solid var(--mint); }
.key-line { position: relative; }
.key-line:after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 6px solid var(--mint); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.key-dashed { border-top: 1px dashed var(--gold); }
.key-pin { font-style: normal; border: 1px solid var(--line-strong); border-radius: 50%; width: 23px; height: 23px; display: inline-grid; place-items: center; font-size: 10px; color: var(--text); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0; color: var(--muted); font-size: .75rem; }
.legend-line { width: 24px; height: 2px; background: var(--mint); }
.legend-dots { width: 24px; border-top: 2px dashed var(--gold); }
.lesson-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; min-width: 0; box-shadow: var(--shadow); }
.lesson-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.lesson-top .eyebrow { font-size: .625rem; line-height: 1.6; margin-bottom: 0; }
.lesson-top button { font-size: .6875rem; max-width: 96px; padding: 0 0 0 6px; min-height: 36px; text-align: right; }
.steps { display: flex; gap: 5px; margin: 20px 0; }
.steps span { flex: 1; height: 3px; border-radius: 1px; background: var(--line); }
.steps span.done { background: var(--mint); }
.step-number { color: var(--faint); font: .625rem var(--mono); letter-spacing: .09em; margin: 0; }
.lesson-panel h2 { font-size: 1.35rem; margin: 10px 0 16px; }
.lesson-copy { font-size: 1rem; line-height: 1.7; color: var(--text); margin: 0 0 22px; }
.os-role { background: var(--blue-subtle); border-left: 2px solid var(--blue); padding: 14px; margin: 18px 0; border-radius: 0 4px 4px 0; }
.os-role > span { color: var(--blue); font: .625rem var(--mono); letter-spacing: .075em; }
.os-role p { color: var(--text); font-size: .875rem; line-height: 1.65; margin: 7px 0 0; }
.change-box { margin: 20px 0; padding-left: 13px; border-left: 2px solid var(--mint); }
.change-box > span { color: var(--mint); font: .625rem var(--mono); letter-spacing: .075em; }
.change-box p { margin: 7px 0 0; font-size: .875rem; line-height: 1.65; }
.api-name { display: block; color: var(--gold); background: var(--gold-subtle); border: 1px solid var(--line); border-radius: 4px; padding: 10px 11px; font-size: .6875rem; line-height: 1.6; overflow-wrap: anywhere; margin: 0 0 14px; }
.lesson-panel > #next { width: 100%; min-height: 46px; }
.lesson-controls { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.lesson-controls button { padding: 8px 3px; font-size: .75rem; }
.lesson-status { color: var(--faint); font-size: .6875rem; line-height: 1.6; margin: 20px 0 0; }
.divider { border-top: 1px solid var(--line); margin: 22px 0; }
.write-buttons { display: flex; gap: 8px; margin: 10px 0; }
.write-buttons button { flex: 1; font-size: .75rem; padding: 10px 8px; }
#heap-controls { margin-top: 18px; }
#heap-controls button { width: 100%; }
#result { color: var(--mint); font-size: .875rem; line-height: 1.6; }
#result:empty { margin: 0; }
#result.error { color: var(--red); }
.challenge { margin-top: 18px; width: 100%; border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); font-size: .8125rem; }
.goal { margin-top: 16px; padding: 14px; color: var(--gold); border: 1px solid var(--gold); background: var(--gold-subtle); border-radius: 5px; font-size: .875rem; line-height: 1.6; }
.goal.success { border-color: var(--mint); color: var(--mint); background: var(--mint-subtle); }
.learning-check { border-top: 1px solid var(--line); margin: 22px 0 0; padding-top: 20px; }
.learning-check .eyebrow { font-size: .625rem; margin-bottom: 6px; }
.lesson-panel .learning-check h2 { font-size: .9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.6; margin: 0 0 12px; }
.learning-check button { font-size: .75rem; color: var(--muted); background: transparent; }
#check-answer { margin: 14px 0 0; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.process-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.process-panel { padding: 16px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; min-width: 0; }
.process-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .875rem; flex-wrap: wrap; }
.process-letter { color: var(--mint); background: var(--mint-subtle); border-radius: 3px; width: 27px; height: 27px; display: grid; place-items: center; font: .75rem var(--mono); }
.process-letter.secondary { color: var(--blue); background: var(--blue-subtle); }
.permission { color: var(--muted); margin-left: auto; font: .5625rem var(--mono); letter-spacing: .01em; }
dl { margin: 0; font-size: .8125rem; }
dl > div { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.process-panel dd { font-family: var(--mono); font-size: .75rem; }
.read-value { border-top: 1px solid var(--line); padding-top: 12px; }
.read-value dd { color: var(--mint); }
table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
caption { text-align: left; color: var(--muted); padding: 20px 0 12px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
th { font-size: .75rem; color: var(--muted); font-weight: 500; }
.pointer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.pointer code { color: var(--gold); }
.topic-details, .notes-section { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 50px; margin-top: 38px; padding: 28px 0 0; scroll-margin-top: 24px; }
.topic-details h2, .notes-section h2 { font-size: 1.35rem; }
.topic-details details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.topic-details summary { color: var(--text); font-size: .9375rem; line-height: 1.6; min-height: 28px; }
.topic-details summary:hover { color: var(--mint); }
.topic-details details p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: 8px; }
.notes-section p { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.notes-section .note-hint { font-size: .8125rem; }
label { display: block; font-size: .875rem; color: var(--text); margin: 10px 0; }
label span { color: var(--muted); font-size: .75rem; }
input, textarea { width: 100%; min-width: 0; background: var(--field); color: var(--text); border: 1px solid var(--line-strong); border-radius: 5px; padding: 12px 14px; font-size: 1rem; }
textarea { line-height: 1.6; resize: vertical; }
textarea::placeholder { color: var(--faint); }
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#save-status { color: var(--mint); font-size: .8125rem; }
.relationship-panel { padding: 24px; margin-top: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.relationship-panel h2 { font-size: 1.25rem; }
.relationship-intro { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.relationship-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.relationship-controls button[aria-pressed="true"] { background: var(--mint-subtle); color: var(--mint); border-color: var(--mint); }
.relationship-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0; padding: 0; }
.relationship-stage { display: flex; align-items: stretch; gap: 10px; flex: 1; min-width: 220px; }
.relationship-stage:last-child { min-width: 180px; }
.relationship-node { background: var(--field); border: 1px solid var(--line); padding: 16px; border-radius: 5px; flex: 1; min-width: 150px; font-size: .875rem; line-height: 1.5; }
.relationship-stage .relationship-node { min-width: 0; }
.relationship-node strong { display: block; font-size: .75rem; letter-spacing: .03em; color: var(--blue); font-weight: 500; margin-bottom: 7px; }
.relationship-node small { display: block; color: var(--muted); font-size: .8125rem; }
.relationship-link { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 7px; max-width: 72px; color: var(--mint); text-align: center; font-size: 1.25rem; }
.relationship-link small { color: var(--muted); font-size: .6875rem; line-height: 1.35; }
.relationship-role { display: block; color: var(--blue); font: .625rem var(--mono); line-height: 1.6; margin-bottom: 8px; }
.relationship-node .relationship-title { color: var(--text); font-size: .9375rem; line-height: 1.45; letter-spacing: 0; }
.relationship-node p { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: 8px 0 0; overflow-wrap: anywhere; }
.relationship-note { color: var(--muted); max-width: 1080px; font-size: .875rem; line-height: 1.65; margin-bottom: 0; }
.relationship-node.kernel { border-color: var(--blue); }
.relationship-node.child { border-color: var(--mint); }
.relationship-output { max-width: none; min-width: 0; border-left: 3px solid var(--mint); margin-top: 14px; }
.relationship-output .relationship-title { color: var(--mint); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; margin-top: 38px; border-top: 1px solid var(--line); color: var(--faint); font: .6875rem var(--mono); line-height: 1.6; }
footer > span > span { margin: 0 8px; color: var(--rust); }
footer a { color: var(--muted); }
dialog { color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; max-width: 760px; width: calc(100% - 40px); padding: 26px; max-height: 88vh; overflow: auto; box-shadow: 0 20px 100px #0006; }
dialog::backdrop { background: #101820aa; backdrop-filter: blur(4px); }
dialog p, dialog li { color: var(--muted); font-size: .9375rem; line-height: 1.65; }
dialog li { margin: 10px 0; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.download-link { display: inline-block; min-height: 44px; padding: 12px 15px; border: 1px solid var(--mint); border-radius: 5px; background: var(--mint-subtle); color: var(--mint); font-size: .875rem; }
#export-text { font: .8125rem/1.65 var(--mono); }
#export-preview { width: 100%; height: auto; }
#scene button.component-pin { width: 30px !important; height: 30px !important; min-height: 30px !important; min-width: 30px !important; padding: 0 !important; line-height: 1 !important; border-radius: 50% !important; }
@media (max-width: 1500px) {
  .trail { display: none; }
  .workbench { grid-template-columns: 185px minmax(0, 1fr); gap: 20px; }
  .lesson-rail { padding-right: 16px; }
  .workspace { gap: 20px; grid-template-columns: minmax(0, 1fr) 310px; }
  .lesson-panel { padding: 18px; }
  .scene-caption { font-size: .5625rem; }
  .model-badge { display: none; }
  .view-heading { align-items: end; }
}
@media (max-width: 1199px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workbench { grid-template-columns: 190px minmax(0, 1fr); }
  #scene { height: clamp(360px, calc(100vh - 380px), 510px); }
  .lesson-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding: 24px; }
  .lesson-top, .steps, .step-number, .lesson-panel > .course-position, .lesson-panel > h2, .lesson-copy, .api-name, .lesson-panel > #next, .lesson-controls { grid-column: 1; }
  .lesson-panel > .os-role { grid-column: 2; grid-row: 2 / 6; align-self: start; margin-top: 0; }
  .lesson-panel > .change-box { grid-column: 2; grid-row: 6 / 8; align-self: start; margin-top: 0; }
  .lesson-panel > .learning-check, .lesson-panel > #write-panel, .lesson-panel > #heap-controls, .lesson-panel > #result, .lesson-panel > #challenge, .lesson-panel > #challenge-goal, .lesson-panel > #open-memory { grid-column: 1 / -1; }
  .lesson-panel > .lesson-status { grid-column: 1 / -1; }
  .learning-check { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .model-badge { display: inline; }
  .scene-caption { font-size: .625rem; }
  .header-actions { gap: 8px; }
}
@media (max-width: 880px) {
  .site-header { padding: 8px 20px; min-height: 64px; gap: 12px; }
  .header-actions .back-link { display: none; }
  main { padding: 20px 20px 0; }
  .intro { margin-bottom: 15px; gap: 8px; flex-wrap: wrap; }
  h1 { font-size: 1.75rem; }
  .workbench { display: block; }
  .lesson-rail { padding: 0 0 18px; border: 0; }
  .rail-heading, .journey-nav, .tour-note { display: none; }
  .compact-topic { display: flex; }
  .compact-topic label { white-space: nowrap; }
  .experiment-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .experiment-nav li { flex: 1; min-width: 115px; }
  .experiment-nav button { font-size: .75rem; padding: 8px; min-height: 52px; border: 1px solid var(--line); }
  .view-heading { min-height: 48px; }
  #scene { height: clamp(380px, calc(100vh - 330px), 500px); }
  .topic-details, .notes-section { gap: 28px; grid-template-columns: 1fr 1.6fr; }
  .relationship-stage { flex-basis: 40%; min-width: 220px; }
}
@media (max-width: 600px) {
  .site-header { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .brand { font-size: 1rem; gap: 7px; }
  .brand-section { font-size: .75rem; }
  .header-actions { gap: 5px; }
  .header-actions #open-notes { display: none; }
  .theme-control { gap: 6px; }
  .theme-control label { font-size: .625rem; max-width: 36px; line-height: 1.5; }
  .theme-control select { font-size: .75rem; padding: 9px 4px; }
  main { padding: 20px 14px 0; }
  h1 { font-size: 1.75rem; }
  .intro-copy { font-size: .875rem; max-width: 330px; }
  .eyebrow { font-size: .625rem; }
  .workspace-nav { gap: 0; flex-wrap: wrap; margin-bottom: 16px; }
  .tabs { width: 100%; gap: 8px; justify-content: space-between; }
  .tabs button { font-size: .75rem; padding: 12px 2px; }
  .workspace-nav > .quiet { margin-left: auto; padding: 8px 0; font-size: .6875rem; }
  .compact-topic { gap: 8px; }
  .compact-topic label { font-size: .75rem; white-space: normal; max-width: 76px; }
  .compact-topic select { font-size: .8125rem; }
  .view-heading { gap: 12px; margin-bottom: 12px; align-items: center; }
  .view-heading p { font-size: .75rem; max-width: 175px; }
  .view-heading .eyebrow { font-size: .5625rem; }
  .segmented-control button { padding: 6px 9px; min-height: 44px; }
  #scene { height: clamp(360px, calc(100vh - 320px), 440px); }
  .scene-top { min-height: 44px; padding: 10px 12px; }
  .scene-caption { font-size: .5625rem; }
  .model-badge { display: none; }
  .scene-toolbar { padding: 10px; }
  .view-controls { gap: 4px; }
  .view-controls label { display: none; }
  .view-controls select { max-width: 110px; }
  .scene-toolbar button { padding: 8px; }
  .camera-help { padding: 0 12px 12px; font-size: .6875rem; }
  .camera-pad button { flex: 1; min-width: 85px; }
  .map-key { font-size: .625rem; padding: 12px; gap: 10px; }
  .lesson-panel { display: block; padding: 20px; }
  .lesson-panel > .os-role, .lesson-panel > .change-box { margin: 20px 0; }
  .lesson-copy { font-size: 1rem; }
  .learning-check { display: block; }
  .process-panels { grid-template-columns: 1fr; }
  .permission { font-size: .625rem; }
  .topic-details, .notes-section { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; padding-top: 24px; }
  .topic-details h2, .notes-section h2 { margin-bottom: 0; }
  .relationship-panel { padding: 18px; }
  .relationship-flow, .relationship-stage, .relationship-concepts { flex-direction: column; }
  .relationship-stage { min-width: 0; flex-basis: auto; width: 100%; gap: 7px; }
  .relationship-node { min-width: 0; width: 100%; }
  .relationship-stage .relationship-link { align-self: center; max-width: none; }
  .relationship-stage .relationship-link > span { transform: rotate(90deg); }
  .note-actions button { flex: 1; min-width: 135px; font-size: .8125rem; }
  .pointer { font-size: .75rem; }
  th, td { padding: 10px 5px; font-size: .6875rem; }
  footer { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; }
  dialog { padding: 20px; width: calc(100% - 24px); }
  .dialog-header h2 { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Optional application practice and recoverable study notes. */
#practice-dialog { width: min(760px, calc(100% - 32px)); }
#practice-dialog select { width: 100%; min-height: 44px; padding: 10px; margin: 8px 0 24px; color: var(--text); background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; }
#open-practice { margin-left: auto; }
#sources-button { margin-left: 12px; }
#practice-dialog h3 { font-size: 1.45rem; line-height: 1.25; margin: 8px 0 16px; }
.practice-intro, .practice-situation { color: var(--muted); line-height: 1.65; }
.practice-situation { color: var(--text); padding: 18px; background: var(--panel2); border-left: 3px solid var(--blue); border-radius: 4px; }
.practice-options { padding: 0; border: 0; margin: 24px 0 16px; min-width: 0; }
.practice-options legend { padding: 0 0 12px; font-weight: 650; line-height: 1.5; }
.practice-choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; line-height: 1.55; }
.practice-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-subtle); }
.practice-choice input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 18px; accent-color: var(--blue); }
.practice-feedback { margin: 20px 0; padding: 18px; border-left: 3px solid var(--mint); background: var(--mint-subtle); border-radius: 4px; line-height: 1.65; }
.practice-feedback.needs-review { border-left-color: var(--gold); background: var(--gold-subtle); }
.practice-feedback p { margin: 10px 0; }
.practice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#note-length, #note-sync-status { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
#note-sync-status:empty { display: none; }
#note-sync-status:not(:empty) { padding: 12px; border-left: 3px solid var(--gold); background: var(--gold-subtle); color: var(--text); }
#note-conflict-dialog textarea, #restore-dialog textarea { margin: 8px 0 18px; }
#note-conflict-dialog button, #restore-dialog button { margin: 4px 4px 4px 0; }
.third-party-license { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); }
@media (max-width: 640px) {
  #practice-dialog { width: calc(100% - 24px); }
  #practice-dialog h3 { font-size: 1.2rem; }
  .practice-choice, .practice-situation, .practice-feedback { padding: 12px; }
}

/* v4.2: course position, arrow-by-arrow explanations, and the flat mapping schematic. */
.course-position { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 10px 0 0; color: var(--faint); font: .6875rem var(--mono); letter-spacing: .02em; line-height: 1.6; }
.course-position .course-heading { color: var(--brand-text); }
.lines-block { margin: 20px 0 16px; padding: 14px 14px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; }
.lines-block .eyebrow { margin-bottom: 6px; }
.lines-list { list-style: none; margin: 0; padding: 0; }
.lines-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.lines-list li:first-child { border-top: 0; padding-top: 2px; }
.lines-list li > i { position: relative; top: -3px; }
.lines-list strong { font-size: .8125rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.lines-list p { grid-column: 2; margin: 3px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.mapping-schematic { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); gap: 12px 0; align-items: stretch; margin: 16px 0; }
.schematic-head { color: var(--muted); font: 500 .6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.schematic-node.pending { border-style: dashed; background: transparent; }
.schematic-node.pending .relationship-role, .schematic-node.pending .relationship-title, .schematic-node.pending p { color: var(--muted); }
.mapping-schematic { row-gap: 22px; }
.schematic-node.c-w.r1 { position: relative; }
.schematic-node.c-w.r1:not(.pending)::after { content: ''; position: absolute; left: 50%; top: 100%; height: 22px; border-left: 2px dashed var(--gold); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.schematic-link { align-self: center; justify-self: center; width: 30px; height: 0; border-top: 2px solid var(--mint); position: relative; }
.schematic-link.dashed { border-top: 2px dashed var(--gold); }
.schematic-link:after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 6px solid var(--mint); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.schematic-link.dashed:after { border-left-color: var(--gold); }
.schematic-link.to-left { transform: rotate(180deg); }
.schematic-link.pending { visibility: hidden; }
@media (max-width: 1199px) {
  .lesson-panel > .lines-block { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .mapping-schematic { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
  .schematic-link { width: 20px; }
  .schematic-head { font-size: .5625rem; }
}
@media (max-width: 600px) {
  /* Phones keep the row-by-row DOM order: hA, object, hB, then view A, bytes, view B, joined by vertical connectors. */
  .mapping-schematic { grid-template-columns: 1fr; gap: 0; }
  .schematic-head, .schematic-spacer { display: none; }
  .schematic-link { display: block; justify-self: center; width: 0; height: 22px; margin: 4px 0; border-top: 0; border-left: 2px solid var(--mint); transform: none; }
  .schematic-link.dashed { border-top: 0; border-left: 2px dashed var(--gold); }
  .schematic-link:after { right: auto; top: auto; left: -5px; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--mint); border-bottom: 0; }
  .schematic-link.dashed:after { border-left-color: transparent; border-top-color: var(--gold); }
  .schematic-link.to-left { transform: rotate(180deg); }
  .schematic-node.c-a.r2 { margin-top: 30px; }
  .schematic-node.c-w.r1:not(.pending)::after { display: none; }
}

.third-party-license{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace}