@font-face { font-family: Geist; src: url("static/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Geist Mono; src: url("static/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Geist Pixel; src: url("static/fonts/GeistPixel-Square.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --paper: #f4f2eb; --surface: #fffefa; --ink: #171917; --subtle: #e2e0d7; --muted: #66706a; --green: #0a7952; --lime: #b7ef63; --orange: #e45e2b; --blue: #315fd2; --code: #101210; --measure: 48rem; --rail: 16.5rem; --sans: Geist, ui-sans-serif, system-ui, sans-serif; --mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pixel: Geist Pixel, var(--mono); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 430 1rem/1.72 var(--sans); text-rendering: optimizeLegibility; }
::selection { background: var(--lime); color: var(--ink); }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; padding: .65rem .8rem; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); transform: translateY(-180%); font: 750 .75rem var(--mono); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; overflow: hidden; min-height: 17.25rem; padding: clamp(2.2rem, 6vw, 4.6rem) max(1.2rem, calc((100% - 92rem) / 2)); background: var(--ink); color: var(--surface); border-bottom: 6px solid var(--green); }
.masthead { position: relative; z-index: 1; max-width: 37rem; }
.course-code, .eyebrow, .header-note { margin: 0; font: 700 .71rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.course-code { color: var(--lime); }
.site-header h1 { max-width: 11ch; margin: .6rem 0 .75rem; font: 720 clamp(3rem, 7.4vw, 6.2rem)/.88 var(--sans); letter-spacing: -.085em; }
.subtitle { margin: 0; color: #c9d1cc; font: 470 .95rem/1.4 var(--mono); }
.subtitle span { color: var(--lime); }
.header-note { position: absolute; z-index: 1; right: max(1.2rem, calc((100% - 92rem) / 2)); bottom: 2rem; color: #aab4ae; }
.machine-tape { position: absolute; z-index: 0; width: min(57rem, 62vw); height: auto; right: -5rem; bottom: 1.4rem; overflow: visible; color: #b7ef63; opacity: .68; }
.tape-rail { stroke: #707b74; stroke-width: 1; }
.tape-signal { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; fill: none; stroke-dasharray: 820; animation: signal-draw 14s linear infinite; }
.tape-bits { fill: #ccd6cf; font: 11px var(--mono); letter-spacing: .15em; animation: tape-drift 18s linear infinite alternate; }
.tape-cursor { fill: var(--orange); filter: drop-shadow(0 0 8px #e45e2b); animation: cursor-run 14s linear infinite; }
@keyframes signal-draw { to { stroke-dashoffset: -820; } }
@keyframes tape-drift { to { transform: translateX(16px); } }
@keyframes cursor-run { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(440px); } }

.reading-shell { display: grid; grid-template-columns: var(--rail) minmax(0, var(--measure)) minmax(8rem, 11rem); justify-content: center; gap: clamp(1.2rem, 3vw, 4rem); padding: 2rem max(1.1rem, calc((100% - 92rem) / 2)) 5rem; }
.book-nav { position: sticky; top: .8rem; align-self: start; max-height: calc(100vh - 1.6rem); overflow: auto; padding: .9rem .75rem; border: 1px solid var(--ink); background: var(--surface); font: 580 .76rem/1.42 var(--mono); box-shadow: 4px 4px 0 var(--ink); }
.nav-home { display: block; margin-bottom: .75rem; padding-bottom: .75rem; color: var(--green); border-bottom: 1px solid var(--ink); text-decoration: none; }
.nav-home::before { content: "> "; color: var(--orange); }
.book-nav details { border-top: 1px solid var(--subtle); }
.book-nav summary { padding: .6rem 0; cursor: pointer; font-weight: 720; list-style: none; }
.book-nav summary::before { content: "+ "; color: var(--green); }
.book-nav details[open] summary::before { content: "− "; color: var(--orange); }
.book-nav ol { margin: 0 0 .7rem; padding-left: 1.35rem; }
.book-nav li { margin: .42rem 0; padding: 0; }
.book-nav a:not(.nav-home) { color: var(--muted); text-decoration: none; }
.book-nav a:not(.nav-home):hover { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }
.book-nav a.is-active { color: var(--ink); font-weight: 760; }
.book-nav a.is-active::before { content: "> "; color: var(--orange); }

main { min-width: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); scroll-margin-top: 1rem; }
main > h1 { margin: 3.2rem 0 .8rem; font: 750 clamp(2.6rem, 5vw, 4.8rem)/.92 var(--sans); letter-spacing: -.075em; }
main > h2, .chapter-header h2 { margin: 3.5rem 0 1.1rem; font: 710 clamp(1.8rem, 3.5vw, 3.05rem)/1 var(--sans); letter-spacing: -.06em; }
main h3 { margin: 2.8rem 0 .75rem; padding-top: .75rem; border-top: 2px solid var(--ink); font: 700 1.1rem/1.2 var(--sans); letter-spacing: -.025em; }
main h4, main h5, main h6 { margin: 2rem 0 .55rem; font: 720 .86rem/1.25 var(--mono); letter-spacing: .02em; }
p { margin: 0 0 1.12rem; }
a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .17em; }
strong { font-weight: 700; }
em { color: #3f4943; }
code { padding: .06em .25em; background: #e8eee6; color: #075739; font: .88em/1.4 var(--mono); }
pre { position: relative; overflow: auto; margin: 1.65rem 0; padding: 2.1rem 1.15rem 1.1rem; border: 1px solid var(--ink); background: var(--code); color: #e8f2e9; }
pre::before { content: "SOURCE / BUFFER"; position: absolute; top: 0; left: 0; right: 0; padding: .42rem .65rem; border-bottom: 1px solid #3b463e; color: var(--lime); font: 700 .65rem var(--mono); letter-spacing: .08em; }
pre code { padding: 0; background: none; color: inherit; font-size: .84rem; }
ul, ol { margin: .7rem 0 1.3rem; padding-left: 1.4rem; }
li { margin: .42rem 0; padding-left: .18rem; }
hr { height: 0; margin: 3rem 0; border: 0; border-top: 2px dashed var(--ink); }
.part { margin: 5.5rem -1rem 4rem; padding: 1.2rem 1rem 0; border-top: 5px solid var(--green); }
.part-header { margin-bottom: 2rem; }
.part-header .eyebrow { color: var(--green); }
.part-header h1 { margin: .55rem 0 0; font: 720 clamp(2.4rem, 4.5vw, 4rem)/.92 var(--sans); letter-spacing: -.075em; }
.chapter { margin: 4.2rem 0; }
.chapter-header { margin: 0 0 2rem; padding: 1rem 0 1.15rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.chapter-header .eyebrow { color: var(--orange); }
.chapter-header h2 { margin: .3rem 0 0; }
.chapter-header::after { content: "[ chapter loaded ]"; display: block; margin-top: .9rem; color: var(--muted); font: 650 .66rem var(--mono); letter-spacing: .06em; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--ink); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font: 510 .84rem/1.42 var(--sans); }
th, td { padding: .72rem .8rem; text-align: left; vertical-align: top; border-right: 1px solid var(--subtle); border-bottom: 1px solid var(--subtle); }
th { background: var(--ink); color: var(--surface); font: 680 .7rem var(--mono); letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.callout { margin: 1.8rem 0; padding: 1rem 1.1rem; border: 2px solid var(--blue); border-left-width: .5rem; background: #eef2ff; font: .93rem/1.55 var(--sans); }
.callout::before { content: "NOTE //"; display: block; margin-bottom: .45rem; color: var(--blue); font: 720 .67rem var(--mono); letter-spacing: .08em; }
.callout p { margin: 0; }

.widget { position: relative; margin: 2.4rem 0; padding: 1.15rem; border: 2px solid var(--ink); background: var(--surface); box-shadow: 6px 6px 0 var(--lime), 8px 8px 0 var(--ink); }
.widget::before { content: "[ MODEL: LIVE ]"; position: absolute; top: -.72rem; right: .85rem; padding: .18rem .35rem; background: var(--surface); color: var(--green); font: 720 .62rem var(--mono); letter-spacing: .08em; }
.widget-heading { padding-bottom: .85rem; border-bottom: 1px dashed var(--ink); }
.widget .eyebrow { color: var(--orange); }
.widget h3 { margin: .35rem 0 .35rem; padding: 0; border: 0; font-size: 1.3rem; }
.widget-heading > p:last-child { margin: 0; color: var(--muted); font: 500 .88rem/1.5 var(--sans); }
.widget-fallback { margin-top: 1rem; color: var(--muted); font: .88rem/1.5 var(--mono); }
.widget-stage { padding-top: 1rem; font: .88rem/1.48 var(--mono); }
.trace-line { display: grid; grid-template-columns: 2rem minmax(5rem, .8fr) 2fr; gap: .6rem; align-items: center; padding: .75rem; border: 1px solid var(--ink); background: #eaf1e8; }
.trace-line b { color: var(--orange); font: 800 .8rem var(--pixel); }
.widget-controls { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
button { min-height: 2.5rem; border: 2px solid var(--ink); border-radius: 0; padding: .55rem .75rem; background: var(--surface); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 .72rem/1 var(--mono); cursor: pointer; }
button:hover, button[aria-pressed="true"] { background: var(--lime); }
button:active { transform: translate(2px, 2px); box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.widget-status, .model-note { margin: .85rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--subtle); color: var(--muted); font-size: .76rem; }
.widget-status::before { content: "> "; color: var(--green); }
.bit-row { display: flex; flex-wrap: wrap; gap: .32rem; }
.bit-row button { width: 2.55rem; padding: 0; font: 400 1.05rem var(--pixel); }
.number-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 0; }
.number-readout div { padding: .7rem; border: 1px solid var(--ink); background: #edf5e8; }
.number-readout dt { color: var(--muted); font: 720 .62rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.number-readout dd { margin: .2rem 0 0; font: 680 1.15rem var(--mono); }
.frame-stack { display: grid; gap: .45rem; }
.frame { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; border: 1px solid var(--ink); background: #edf5e8; }
.frame b { color: var(--green); font: 700 .72rem var(--mono); }
.memory-map, .heap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.memory-cell, .heap-block { min-height: 3.65rem; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--surface); font: 650 .7rem var(--mono); }
.memory-cell { gap: .15rem; align-content: center; }
.memory-cell span { color: var(--muted); }
.memory-cell.selected, .heap-block.live { border-color: var(--ink); background: var(--lime); color: var(--ink); }
.flag-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.flag-list label { display: flex; gap: .5rem; align-items: center; padding: .65rem; border: 1px solid var(--ink); background: #edf5e8; font: 700 .75rem var(--mono); }
.flag-list code { margin-left: auto; }
.register-readout { margin-top: 1rem; font-weight: 700; }
.pipeline { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; }
.pipeline li { margin: 0; padding: .45rem .62rem; border: 1px solid var(--ink); background: var(--surface); color: var(--muted); font: 700 .7rem var(--mono); }
.pipeline li.active { background: var(--orange); color: #fff; }
.reading-context { position: sticky; top: 1rem; align-self: start; padding-left: .85rem; border-left: 2px solid var(--ink); color: var(--muted); font: .71rem/1.45 var(--mono); }
.reading-context .eyebrow { color: var(--green); }
.reading-context [data-reading-label] { margin-top: .4rem; color: var(--ink); font-weight: 700; }
.reading-context progress { width: 100%; height: .3rem; accent-color: var(--orange); }
.site-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem max(1.1rem, calc((100% - 92rem) / 2)); border-top: 2px solid var(--ink); background: var(--ink); color: #bdc6c0; font: .72rem/1.45 var(--mono); }
.site-footer p { max-width: 38rem; margin: 0; }

@media (max-width: 980px) { .reading-shell { grid-template-columns: 13.5rem minmax(0, var(--measure)); } .reading-context { display: none; } .machine-tape { width: 44rem; right: -13rem; opacity: .44; } }
@media (max-width: 680px) { body { font-size: .96rem; } .site-header { min-height: 15rem; padding: 2rem 1.15rem; } .site-header h1 { font-size: clamp(3rem, 15vw, 4.7rem); } .machine-tape { width: 37rem; right: -18rem; bottom: 1.5rem; } .header-note { left: 1.15rem; bottom: 1rem; right: auto; } .reading-shell { display: block; padding: 1rem 1.1rem 3rem; } .book-nav { position: static; max-height: 18rem; margin-bottom: 2.5rem; } .part { margin-inline: 0; } .number-readout, .flag-list { grid-template-columns: 1fr; } .site-footer { display: block; padding: 1.2rem; } .site-footer p + p { margin-top: .55rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media print { .skip-link, .book-nav, .reading-context, .widget-controls, .site-header { display: none; } body { background: #fff; } .reading-shell { display: block; padding: 0; } .widget, pre { box-shadow: none; break-inside: avoid; } }