:root {
  --paper: oklch(98% .004 215); --surface: oklch(96% .006 215);
  --ink: oklch(26% .018 225); --muted: oklch(46% .015 225); --line: oklch(85% .012 215);
  --accent: oklch(44% .1 200); --selected: oklch(94% .025 200); --waiting: oklch(52% .11 75);
}
body { font-size: 15px; line-height: 1.55; }
main { max-width: 1120px; padding: 24px 28px; }
header { margin-bottom: 16px; }
.embedded-diagram #return-to-lesson { display: none; }
.embedded-diagram main { padding-top: 8px; }
h1 { font-size: 24px; margin: 8px 0 0; letter-spacing: -.02em; }
h2 { font-size: 16px; line-height: 1.4; margin: 0 0 12px; }
button, select, input:not([type=range]) {
  min-height: 36px; font: inherit; line-height: 1.25; border-radius: 5px;
  border: 1px solid var(--line); background-color: var(--paper); color: var(--ink);
  padding: 7px 10px; box-shadow: none;
}
button { font-weight: 500; transition: background-color 150ms, border-color 150ms; }
button:hover:not(:disabled), select:hover:not(:disabled) { background-color: var(--selected); border-color: var(--accent); }
button:active:not(:disabled) { background-color: oklch(90% .03 200); }
button:disabled, input:disabled { opacity: .5; cursor: default; }
select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23516970' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; min-height: 32px; margin: 0; }
input[aria-invalid=true] { outline: 1px solid oklch(50% .16 25); }
label { gap: 8px; font-size: 13px; color: var(--muted); }
.toolbar { min-height: 58px; padding: 10px 0; gap: 12px 20px; border-color: var(--line); justify-content: start; }
.toolbar .action-group, .toolbar .mode-switch { margin-left: auto; }
.toolbar label, .choices label { min-width: 0; }
.toolbar input, .toolbar select { max-width: 100%; min-width: 0; }
.toolbar .offset-input { flex: 0 1 auto; }
.toolbar .offset-input input { width: 140px; }
.choices { gap: 16px; }
.action-group, .navigation { display: flex; gap: 6px; align-items: center; margin: 0; }
.navigation #reset { margin-left: auto; }
#next, #writer-run, #reader-run { background-color: var(--accent); border-color: var(--accent); color: var(--paper); }
#next:hover:not(:disabled), #writer-run:hover:not(:disabled), #reader-run:hover:not(:disabled) { background-color: oklch(37% .09 200); }
.mode-switch { display: flex; gap: 0; }
.mode-switch button { border-radius: 0; white-space: nowrap; }
.mode-switch button:first-child { border-radius: 5px 0 0 5px; }
.mode-switch button:last-child { border-radius: 0 5px 5px 0; margin-left: -1px; }
.mode-switch button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--selected); position: relative; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: 20px 0; align-items: start; }
.stage, .inspector { min-width: 0; }
.inspector { border-left: 1px solid var(--line); padding: 0 0 0 20px; }
.inspector p { font-size: 13px; line-height: 1.6; margin: 8px 0; }
.selection-field { display: flex; align-items: center; justify-content: space-between; }
.selection-tools { display: flex; gap: 12px; align-items: center; }
.selection-tools .selection-field { flex: 1; }
.selection-status { min-height: 24px; font-size: 13px; font-weight: 500; }
.step-copy, .step-panel { padding: 0; }
.step-copy h2, .step-panel h2 { margin: 0 0 6px; }
.step-copy p, .step-panel p { min-height: 64px; color: var(--muted); margin: 0 0 12px; }
.state-table { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 16px 0; font-size: 13px; }
.state-table dt { color: var(--muted); }
.state-table dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.object-status { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-block: 1px solid var(--line); font-size: 13px; }
.object-status output { font: 13px ui-monospace, monospace; }
.transport { margin-top: 16px; }
.experiment-timeline { margin-top: 12px; }
.experiment-timeline label { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 12px; }
.experiment-timeline output { font: 12px ui-monospace, monospace; text-align: right; }
.timeline-ticks { display: flex; justify-content: space-between; padding: 0 60px 0 76px; font: 11px ui-monospace, monospace; color: var(--muted); }
.timeline-ticks .selected { color: var(--accent); font-weight: 700; }
.change-list { display: grid; gap: 8px; min-height: 32px; margin: 12px 0; padding: 0; list-style: none; font: 12px/1.6 ui-monospace, monospace; }
.change-list li { overflow-wrap: anywhere; }
.change-list:empty { display: none; }
.secondary { border-top: 1px solid var(--line); }
.secondary > summary { padding: 12px 0; font-size: 13px; font-weight: 500; }
.secondary p { font-size: 13px; color: var(--muted); }
.source { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.6; }
.execution-figure, .queue-figure, .index-figure, .occupancy-figure { margin: 0; }
figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; }
figcaption > span { color: var(--muted); font-size: 11px; font-weight: 400; }
.mechanism-svg { display: block; width: 100%; overflow: visible; }
.mechanism-svg text { fill: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.mechanism-svg .lane-label { font-size: 13px; }
.mechanism-svg .axis-label { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.plot-grid { stroke: var(--line); stroke-width: 1; }
.execution-figure .mechanism-svg { height: 300px; }
.execution-segment { fill: none; stroke: var(--line); stroke-width: 2; }
.execution-segment.visited { stroke: var(--accent); }
.execution-segment.context-switch.visited { stroke: var(--waiting); stroke-width: 3; }
.execution-stop { cursor: pointer; }
.stop-hit { fill: transparent; pointer-events: all; }
.stop-dot { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; }
.execution-stop.selected .stop-dot { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.execution-stop:hover .stop-dot, .execution-stop:focus-visible .stop-dot { stroke: var(--accent); stroke-width: 3; }
.execution-stop:focus { outline: none; }
.execution-stop:focus-visible .stop-hit { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 2; }
.context-transfer { display: grid; gap: 8px; }
.context-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; font-size: 12px; }
.context-row code, .context-row > span { overflow-wrap: anywhere; color: var(--muted); }
.context-row.active code, .context-row.active > span { color: var(--accent); }
.context-row:last-child.active code, .context-row:last-child.active > span { color: var(--waiting); }
.plot-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11px; color: var(--muted); margin: 4px 0 12px; }
.plot-legend span::before { content: ''; display: inline-block; width: 18px; border-top: 2px solid var(--accent); margin-right: 6px; vertical-align: middle; }
.plot-legend span + span::before { border-color: var(--waiting); }
.comparison { max-width: 440px; }
.comparison-edge { stroke: var(--waiting); stroke-width: 1.5; fill: none; }
.comparison-skip { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.offset-scale { margin: 12px 0; }
.offset-scale output { display: block; font: 11px ui-monospace, monospace; color: var(--muted); margin-top: 4px; }
.offset-scale label { font-size: 12px; }
.index-bands { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin: 12px 0 16px; }
.index-band { text-align: center; font-size: 12px; border-radius: 0; background: var(--surface); padding: 8px 4px; }
.index-band:first-child { border-radius: 5px 0 0 5px; }
.index-band:last-child { border-radius: 0 5px 5px 0; }
.index-band + .index-band { margin-left: -1px; }
.index-band span { display: none; }
.index-band[aria-pressed=true] { color: var(--accent); background: var(--selected); border-color: var(--accent); position: relative; }
.block-offset { display: flex; align-items: center; height: 34px; margin-top: 12px; border: 1px solid var(--line); background: var(--surface); position: relative; }
.block-offset .byte-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); }
.block-offset span { padding: 8px; font: 12px ui-monospace, monospace; }
.address-equation { display: flex; flex-wrap: wrap; align-items: start; gap: 8px 10px; margin: 16px 0; font-variant-numeric: tabular-nums; }
.address-equation > span { display: flex; flex-direction: column; align-items: start; gap: 4px; }
.address-equation strong { font: 16px ui-monospace, monospace; }
.address-equation span span { color: var(--muted); font-size: 11px; }
.index-block { border: 1px solid var(--line); border-radius: 4px; justify-content: start; min-height: 0; padding: 12px 8px; gap: 8px; }
.index-block > strong { font-size: 13px; }
.node.active.index-block { background: transparent; }
.index-slots { display: grid; width: 100%; gap: 2px; margin-top: 8px; }
.index-slots button { font: 11px ui-monospace, monospace; min-height: 32px; border-radius: 2px; padding: 6px 2px; }
.index-slots button[aria-pressed=true], .inode-pointer { background: var(--selected); border-color: var(--accent); color: var(--accent); }
.inode-pointer { border: 1px solid var(--accent); border-radius: 2px; padding: 8px; margin-top: 10px; font: 12px ui-monospace, monospace; }
.slot-gap { font-size: 14px; line-height: 12px; color: var(--muted); }
.byte-window { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; width: 100%; }
.byte-window button { padding: 6px 2px; min-width: 0; min-height: 32px; font: 11px ui-monospace, monospace; border-radius: 2px; }
.byte-window button span, .byte-window button code { display: block; }
.byte-window button span { color: var(--muted); font-size: 10px; }
.byte-window button[data-unread=true] { background: var(--selected); }
.byte-window button[aria-pressed=true] { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.block-stepper { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.block-stepper > span { color: var(--muted); font-size: 11px; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lab-controls label { display: flex; justify-content: space-between; width: 100%; }
.lab-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.lab-actions button { text-align: left; }
.lab-message { font-size: 13px; min-height: 64px; margin: 12px 0; }
.queue-figure .mechanism-svg { height: 250px; }
.buffer-visual { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 20px; align-items: center; }
.buffer-circle { width: 100%; height: 260px; cursor: crosshair; overflow: visible; }
.buffer-circle .ring-base { stroke: var(--line); stroke-width: 18; fill: none; }
.buffer-circle .ring-used { stroke: var(--accent); stroke-width: 18; fill: none; }
.buffer-circle text { fill: var(--ink); font: 12px ui-monospace, monospace; }
.buffer-circle .ring-label { font: 11px system-ui, sans-serif; fill: var(--muted); }
.buffer-circle .read-pointer { stroke: var(--waiting); stroke-width: 2; }
.buffer-circle .write-pointer { stroke: var(--accent); stroke-width: 2; }
.ring-division { stroke: var(--paper); stroke-width: 1; }
#selected-byte { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.pointer-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.pointer-legend span::before { content: ''; display: inline-block; width: 16px; border-top: 2px solid var(--waiting); vertical-align: middle; margin-right: 6px; }
.pointer-legend span + span::before { border-color: var(--accent); }
.pointer-legend #ring-unit::before { display: none; }
.pointer-legend #ring-unit { color: var(--muted); }
.byte-inspector label { display: flex; flex-direction: column; align-items: stretch; }
.byte-inspector input { width: 100%; }
.byte-inspector output { display: block; font: 12px/1.6 ui-monospace, monospace; white-space: pre-line; }
.byte-details summary { padding: 8px 0; font-size: 12px; }
.operation-progress { display: grid; gap: 8px; margin-top: 12px; }
.operation-progress label { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
.operation-progress progress { width: 100%; height: 8px; accent-color: var(--accent); }
.operation-progress output { font: 12px ui-monospace, monospace; }
.occupancy-figure { padding: 8px 0; max-width: 760px; }
.occupancy-line { stroke: var(--accent); fill: none; stroke-width: 2; }
.sample { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.current-sample { fill: var(--accent); stroke: var(--paper); stroke-width: 1.5; }
@media (max-width: 860px) {
  main { padding: 16px; }
  .workbench { grid-template-columns: 1fr; gap: 20px; padding: 16px 0; }
  .inspector { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .execution-figure .mechanism-svg { height: 240px; }
  .queue-figure .mechanism-svg { height: 210px; }
  .buffer-circle { height: 190px; }
  .lab-actions { grid-template-columns: 1fr 1fr; }
  .lab-controls { align-items: center; justify-content: space-between; }
  .lab-controls label { width: auto; }
  .lab-message { min-height: 44px; }
}
@media (max-width: 600px) {
  #block-path .index-block { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; text-align: left; align-items: start; }
  #block-path .index-block > strong, #block-path .index-block > span { grid-column: 1; }
  #block-path .index-block > span { font-size: 11px; white-space: normal; }
  #block-path .index-slots, #block-path .byte-window, #block-path .inode-pointer { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .index-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .index-slots button { flex: 1 0 auto; }
  .slot-gap { display: inline; }
  .node.index-block { min-height: 60px; padding: 8px; }
}
@media (max-width: 440px) {
  main { padding: 12px; } h1 { font-size: 20px; } header { margin-bottom: 12px; }
  button, select, input:not([type=range]) { min-height: 40px; font-size: 13px; padding: 8px; }
  select { padding-right: 26px; background-position: right 6px center; }
  .toolbar { gap: 8px; min-height: 56px; flex-wrap: wrap; }
  .toolbar label { gap: 6px; }
  .choices { gap: 8px; width: 100%; }
  .choices label { flex: 1; }
  .choices select { width: 0; flex: 1; }
  .toolbar .offset-input { flex: 1; }
  .toolbar .offset-input input { width: 0; flex: 1; }
  .toolbar .mode-switch { margin-left: auto; } .mode-switch button { font-size: 12px; }
  .workbench { gap: 12px; padding: 12px 0; }
  .execution-figure .mechanism-svg { height: 220px; } .queue-figure .mechanism-svg { height: 190px; }
  figcaption { margin-bottom: 8px; } .transport { margin-top: 12px; }
  .buffer-visual { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
  .buffer-circle { height: 150px; } .buffer h2 { font-size: 14px; }
  .buffer-circle text { font-size: 16px; } .buffer-circle .ring-label { font-size: 14px; }
  .byte-inspector label, .byte-details summary { font-size: 11px; }
  .lab-actions button { padding: 8px 6px; font-size: 12px; min-height: 44px; }
  .embedded-diagram main { padding: 10px 12px; } .inspector { padding-top: 12px; }
  .embedded-diagram #controls[data-mode=free] .workbench { row-gap: 8px; }
  .embedded-diagram #controls[data-mode=free] .object-status { padding-block: 6px; }
  .embedded-diagram #controls[data-mode=free] .inspector { padding-top: 8px; }
  .embedded-diagram #controls[data-mode=free] .selection-status { margin-block: 4px; }
  .embedded-diagram #controls[data-mode=free] .lab-actions { margin-top: 8px; gap: 6px; }
  .step-copy p, .step-panel p { min-height: 48px; } .source { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media print { .toolbar, .transport, .lab-controls, .lab-actions { display: none; } }