/* Chart-first walkthrough. Supporting text lives in stable, optional layers. */
html.lecture-open { height:100%; overflow:hidden; }
body[data-view=walkthrough] { --header-height:48px; height:100dvh; overflow:hidden; padding:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
body[data-view=walkthrough] #audio { display:none; }
body[data-view=walkthrough] .site-header { position:relative; grid-row:1; }
body[data-view=walkthrough] .site-nav,body[data-view=walkthrough] .player-inner { width:calc(100% - 64px); }
body[data-view=walkthrough] .site-nav { min-height:48px; }
body[data-view=walkthrough] .site-nav .wordmark { font-size:26px; }
body[data-view=walkthrough] .site-nav>nav a { min-height:48px; font-size:13px; }
body[data-view=walkthrough] .player { position:relative; grid-row:3; }
body[data-view=walkthrough] .player-guide { display:none; }
.publication-menu { display:none; }
.lecture { width:calc(100% - 64px); margin-inline:auto; min-height:0; display:grid; grid-row:2; grid-template-rows:56px minmax(0,1fr); }
.lecture-toolbar { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid var(--rule); }
.chart-navigation { display:flex; align-items:center; gap:8px; min-width:0; flex:1; max-width:720px; }
.chart-arrow { flex:none; width:44px; padding:10px; }
.chart-arrow svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.chart-arrow:not(:disabled):hover { background:var(--lilac); }
.state-choice { flex:1; min-width:0; }
.state-choice select { width:100%; padding:8px; font-size:14px; border:0; background:var(--paper); color:var(--plum); text-overflow:ellipsis; }
.chart-step-count { flex:none; font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); }
.lecture-actions,.lecture-modes { display:flex; align-items:center; gap:4px; }
.lecture-actions { flex:none; gap:24px; }
.lecture-modes button,.evidence-toggle { padding:8px 12px; font-size:13px; color:var(--muted); white-space:nowrap; }
.lecture-modes #explore { width:120px; }
.lecture-modes #resume { width:128px; }
.lecture-modes button[aria-pressed=true] { color:var(--plum); background:var(--lilac); }
.lecture-modes #resume[aria-pressed=true] { background:var(--citron); }
.evidence-toggle { color:var(--plum); text-decoration:underline; text-underline-offset:4px; }
.lecture-stage,.teaching-board { position:relative; min-height:0; min-width:0; }
.lecture-stage { grid-row:2; }
.teaching-board { height:100%; }
.board-figure { position:absolute; inset:8px 0 80px; min-height:0; min-width:0; margin:0; }
#chart { width:100%; height:100%; overflow:visible; display:block; }
#chart text { fill:var(--plum); font-family:Arial,Helvetica,sans-serif; pointer-events:none; }
#chart text.axis { fill:var(--muted); font-variant-numeric:tabular-nums; }
#chart text.constraint { fill:var(--red); }
#chart [data-detail] { cursor:pointer; }
#chart.is-inspecting [data-detail]:not(.is-inspected) { opacity:.38; }
#chart [data-detail].is-inspected>rect { stroke:var(--plum); stroke-width:1.5; vector-effect:non-scaling-stroke; }
#chart [data-detail]:focus-visible { outline:none; }
#chart [data-detail]:focus-visible>rect { stroke:var(--plum); stroke-width:2.5; vector-effect:non-scaling-stroke; }
#chart[data-following=true] [data-detail] { cursor:default; }
.lecture-focus { fill:var(--citron); fill-opacity:.25; stroke:var(--plum); stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
.lecture-cursor { transform:translate(var(--cursor-x,0px),var(--cursor-y,0px)); transition:transform 360ms cubic-bezier(.16,1,.3,1); opacity:1; pointer-events:none; }
.lecture-cursor path { fill:var(--plum); stroke:var(--paper); stroke-width:2; stroke-linejoin:round; paint-order:stroke fill; }
#chart.is-cue-change[data-playing=true] .lecture-cursor { animation:narration-cursor 1800ms ease-out both; }
#chart.is-cue-change[data-playing=true] .lecture-focus { animation:narration-highlight 2400ms ease-out both; }
@keyframes narration-cursor { 0% { opacity:0; } 12%,78% { opacity:1; } 100% { opacity:0; } }
@keyframes narration-highlight { 0% { opacity:0; } 9%,59% { opacity:1; } 100% { opacity:0; } }

/* Explore inspection stays in one layer; text changes cannot move the diagram. */
.chart-context { position:absolute; inset:auto auto 8px 0; width:min(760px,calc(100% - 480px)); height:64px; }
.chart-inspection { position:absolute; inset:0; min-height:0; padding:4px 0; border:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.chart-inspection { font-size:13px; line-height:1.5; visibility:hidden; opacity:0; pointer-events:none; }
.chart-inspection strong { display:block; font-weight:700; }
.chart-inspection p { color:var(--muted); max-width:75ch; }
.exploring .chart-inspection { visibility:visible; opacity:1; pointer-events:auto; }
.experiment-slot { position:absolute; right:0; bottom:8px; width:440px; max-width:100%; min-height:0; }
.experiment { display:flex; align-items:center; gap:12px; min-height:64px; font-size:12px; }
.experiment label { flex:none; max-width:120px; }
.experiment input { flex:1; min-width:60px; width:100px; height:44px; cursor:ew-resize; }
.experiment output { font-variant-numeric:tabular-nums; min-width:44px; }
.experiment button { padding:0; text-decoration:underline; font-size:12px; }
/* Evidence is a nonmodal drawer at every size, over the unchanged chart. */
.lecture-evidence { position:absolute; inset:8px 0 8px auto; z-index:46; width:min(440px,100%); min-height:0; min-width:0; padding:16px 24px; background:var(--paper); box-shadow:-12px 8px 32px #30253724; display:grid; grid-template-rows:44px 80px 44px minmax(0,1fr) 44px 44px 44px; gap:8px; }
.evidence-heading { grid-row:1; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.evidence-heading h2 { font:400 24px/1.3 'Bitstream Charter',Georgia,serif; }
#close-evidence { padding:0; font-size:13px; text-decoration:underline; }
.lecture-evidence .formula { grid-row:2; min-height:0; overflow:auto; scrollbar-gutter:stable; font:18px/1.5 'Liberation Mono',monospace; overflow-wrap:anywhere; padding:12px; margin:0; background:var(--lilac); }
.evidence-tabs { grid-row:3; display:flex; gap:20px; border-bottom:1px solid var(--rule); }
.evidence-tabs button { min-width:0; padding:8px 0; font-size:13px; border-bottom:2px solid transparent; }
.evidence-tabs button[aria-selected=true] { border-color:var(--plum); font-weight:700; }
#evidence-panel { grid-row:4; min-height:0; overflow-y:auto; scrollbar-gutter:stable; font-size:16px; line-height:1.6; }
#evidence-copy { margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.evidence-pages { grid-row:5; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.evidence-pages button { padding:0; font-size:13px; text-decoration:underline; }
.evidence-pages.no-pages { visibility:hidden; pointer-events:none; }
.lecture-evidence>a { grid-row:6; font-size:13px; display:flex; align-items:center; gap:12px; min-height:44px; }
.lecture-evidence>a span { margin-left:auto; }
.lecture-evidence #inline-notes-link { grid-row:7; color:var(--muted); }
body[data-view=walkthrough].audio-problem { grid-template-rows:auto auto minmax(0,1fr) auto; }
body[data-view=walkthrough].audio-problem .audio-status { position:relative; grid-row:2; padding:8px 24px; font-size:14px; gap:8px 16px; }
body[data-view=walkthrough].audio-problem .lecture { grid-row:3; }
body[data-view=walkthrough].audio-problem .player { grid-row:4; }
#chart.jumping .lecture-cursor,#chart.jumping .lecture-focus { transition:none; animation:none; }
@media (max-width:1100px) {
  .lecture-toolbar { gap:16px; }
  .lecture-actions { gap:8px; }
  .chart-context { width:calc(100% - 400px); }
  .experiment-slot { width:360px; }
  .experiment { gap:8px; }
}
@media (max-width:900px) {
  :root { --header-height:84px; }
  .site-nav { display:grid; gap:0; padding-top:7px; }
  .site-nav .wordmark { justify-self:start; line-height:30px; }
  .site-nav nav { width:100%; gap:12px; justify-content:space-between; }
  .site-nav nav a { min-height:44px; }
  body[data-view=walkthrough] .site-nav,body[data-view=walkthrough] .player-inner,.lecture { width:calc(100% - 32px); }
  body[data-view=walkthrough] .site-nav { display:flex; padding:0; min-height:44px; }
  body[data-view=walkthrough] .site-nav .wordmark { font-size:24px; line-height:1; }
  body[data-view=walkthrough] .site-nav>nav { display:none; }
  body[data-view=walkthrough] .publication-menu { display:block; }
  .publication-menu summary { display:flex; align-items:center; min-height:44px; padding:0 8px; font-size:13px; text-decoration:underline; cursor:pointer; list-style:none; }
  .publication-menu summary::-webkit-details-marker { display:none; }
  .publication-menu nav { position:absolute; right:16px; top:44px; width:200px; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:12px 16px; background:var(--paper); box-shadow:0 8px 24px #30253724; }
  .publication-menu nav a { min-height:44px; }
  .lecture { grid-template-rows:96px minmax(0,1fr); }
  .lecture-toolbar { display:grid; grid-template-rows:48px 48px; gap:0; }
  .chart-navigation { width:100%; max-width:none; gap:4px; }
  .lecture-actions { justify-content:space-between; }
  .lecture-modes button,.evidence-toggle { font-size:12px; padding:8px 12px; }
  .lecture-modes #explore { width:104px; }
  .lecture-modes #resume { width:112px; }
  .board-figure { inset:8px 0 88px; }
  .chart-context { width:100%; bottom:8px; height:72px; }
  .chart-inspection { font-size:12px; }
  .experiment-slot { top:0; bottom:auto; width:360px; background:var(--paper); }
  .experiment { min-height:44px; }
  .lecture-evidence { inset:8px 0; width:min(440px,100%); padding:12px 16px; }
}
@media (max-height:740px) {
  .lecture-evidence { grid-template-rows:44px 0 44px minmax(0,1fr) 32px 44px 44px; gap:4px; }
  .lecture-evidence .formula { display:none; }
}
@media (max-height:500px) and (min-width:600px) {
  body[data-view=walkthrough] .site-header { display:none; }
  .lecture { grid-template-rows:48px minmax(0,1fr); }
  .lecture-toolbar { display:flex; gap:8px; }
  .lecture-actions { gap:4px; }
  .chart-step-count { display:none; }
  .board-figure { inset:0 0 48px; }
  .chart-context { height:40px; width:calc(100% - 380px); }
  .experiment-slot { top:auto; bottom:0; }
  .lecture-evidence { overflow:auto; grid-template-rows:44px 0 44px minmax(64px,1fr) 44px 44px 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .lecture-focus,.lecture-cursor { transition:none; animation:none !important; opacity:1; }
}