:root{color-scheme:light;--paper:#f8f6ef;--ink:#23382e;--muted:#586b61;--line:#d6dcd3;--green:#185e47;--gold:#ad6336;--pale:#eaf1e9;--bad:#9b3328}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:var(--green);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}header{max-width:1400px;margin:auto;padding:23px 36px;display:flex;justify-content:space-between;gap:16px;font-size:13px;border-bottom:1px solid var(--line)}header span{letter-spacing:.12em;font-size:11px;align-self:center}main{max-width:1240px;padding:0 36px;margin:auto}.hero{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:60px;padding:65px 0 52px}h1{font-size:clamp(36px,4.6vw,62px);line-height:1.09;letter-spacing:-.045em;margin:12px 0 25px;font-weight:650}h2{font-size:30px;line-height:1.25;letter-spacing:-.025em;margin:8px 0 18px}h3{font-size:20px;line-height:1.35;margin:6px 0 14px}p{margin:0 0 17px}.lede{font-size:23px;line-height:1.4;max-width:630px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:750;color:var(--gold);text-transform:uppercase}.small,figcaption{font-size:13px;color:var(--muted)}.house{margin:0;text-align:center}.house svg{width:100%;max-width:350px}.bridge{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}.bridge h2{font-size:21px}.bridge p{font-size:15px;margin:0}.section{padding:52px 0;border-bottom:1px solid var(--line)}.sectionhead,.diagramhead{display:flex;justify-content:space-between;align-items:center;gap:20px}.diagramhead{margin-top:30px}.diagramhead span{font-size:12px;color:var(--muted)}button,.button{border:1px solid #a6b8aa;border-radius:7px;background:#fffdf7;padding:10px 16px;font:inherit;font-size:14px;color:var(--green);cursor:pointer;display:inline-block;text-decoration:none;min-height:44px}button:hover,.button:hover{background:#e7eee5}button[aria-pressed=true],.primary{background:var(--green);color:white;border-color:var(--green)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #bd7425;outline-offset:4px}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin:28px 0}fieldset{border:1px solid var(--line);border-radius:10px;padding:18px;min-width:0;background:#fffcf6}legend{font-weight:700;font-size:15px;padding:0 5px}label{display:block;font-size:14px;margin-bottom:10px}input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);vertical-align:middle;margin:0 7px 0 0}select{width:100%;font:inherit;font-size:14px;padding:8px 6px;border:1px solid #a6b8aa;border-radius:5px;color:var(--ink);background:white;margin-bottom:12px;min-height:44px}.result{border-left:5px solid var(--green);background:var(--pale);padding:18px 22px;line-height:1.5}.result.bad{background:#f7e8e0;border-color:var(--bad)}.result p:last-child{margin-bottom:0}.result strong{font-size:18px}.badtext{color:var(--bad)}.diagramViewport{background:#fffdf8;border:1px solid var(--line);border-radius:10px;overflow-x:auto;margin:8px 0 14px}#diagram{display:block;width:100%;min-width:960px;height:auto}#diagram .node rect{fill:#fff;stroke:#82978a;stroke-width:1.5}#diagram .node.selected rect{fill:#e4eee2;stroke:var(--green);stroke-width:3}#diagram .node text{pointer-events:none;fill:var(--ink);font-size:16px;font-weight:650}#diagram .node{cursor:pointer}#diagram .wire{fill:none;stroke:#66897e;stroke-width:2}#diagram .wirelabel{fill:var(--muted);font-size:13px;paint-order:stroke;stroke:#fffdf8;stroke-width:5px}#diagram .node .subtitle{font-size:11px;font-weight:400}#diagram .wire.badwire{stroke:var(--bad);stroke-dasharray:5 4}.boxButtons{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel{border:1px solid var(--line);border-radius:9px;padding:24px;background:#fffdf7;min-width:0}.panel p{font-size:15px}code{font-size:.88em;overflow-wrap:anywhere}.signature,.formula{font-family:ui-monospace,monospace;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;background:#edf1ea;border-radius:5px;padding:14px}.trace{padding-left:24px;font-size:14px}.trace li{padding:0 0 12px 6px}.trace b{display:block}.trace .fail{color:var(--bad)}details{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:16px 20px;background:#fffdf7}summary{cursor:pointer;font-weight:650;min-height:30px}details[open] summary{margin-bottom:20px}ul{padding-left:22px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th,td{padding:12px;vertical-align:top;border-bottom:1px solid var(--line)}th{background:#ecf0e7}caption{text-align:left;font-weight:650;margin-bottom:12px}.concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.concepts article p{font-size:15px}.number{display:block;font:42px Georgia,serif;color:#a66b45;margin:10px 0}.smc{background:#edf1ea;padding:14px;font-family:ui-monospace,monospace;font-size:11px;text-align:center;border-radius:5px;margin:20px 0}.smc span,.smc strong{display:block;padding:7px 0}.smc div{border-bottom:1px solid #b2c3b5}.callout{background:#e9f0e6;padding:27px;margin-top:26px;border-radius:8px}.callout p:last-child{margin:15px 0 0}footer{padding:30px 0 60px;font-size:14px}.skip{position:absolute;top:-100px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}@media(max-width:800px){main{padding:0 20px}header{padding:18px 20px;flex-wrap:wrap}header span{order:3;width:100%}.hero{grid-template-columns:1fr;gap:16px;padding:36px 0}.house{display:none}.bridge,.concepts{grid-template-columns:1fr;gap:22px}.controls{grid-template-columns:1fr}.split{grid-template-columns:1fr}.section{padding:35px 0}.sectionhead{align-items:flex-start}.diagramhead{display:block}h2{font-size:27px}.panel{padding:20px}.lede{font-size:21px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Retain shared base stylesheet while using the essay layout. */
h1{display:block;border:0;padding:0}.section{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:52px 0}body>main{margin-top:0}



/* The actual model is the first, full-width illustration. */
.hero{padding:28px 0 24px;grid-template-columns:1fr 210px;gap:36px}.hero h1{font-size:clamp(32px,3.4vw,46px);margin:9px 0 16px}.hero .lede{font-size:20px;margin-bottom:14px}.house svg{max-width:185px}.house figcaption{font-size:11px;line-height:1.4}.wiring-section{position:relative;width:calc(100vw - 48px);left:50%;transform:translateX(-50%);margin:0 0 34px;scroll-margin-top:12px}.wiring-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 12px 17px}.wiring-heading h2{margin:5px 0 0}.wiring-heading p{margin:0}.wiring-heading a{font-size:14px;white-space:nowrap}.canvas-stage{border:1px solid #c7d3c7;border-radius:14px;background:#fffdf8;box-shadow:0 10px 40px #23382e0b;overflow:hidden}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:#edf2e9;flex-wrap:wrap}.canvas-toolbar label{font-weight:650;margin:0}.canvas-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.canvas-tools button{font-size:12px;padding:6px 11px;min-height:38px}.canvas-tools output{min-width:42px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.canvas-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 20px 0;font-size:12px;color:var(--muted)}.canvas-meta strong{color:var(--ink)}.diagramViewport{height:clamp(400px,61vh,780px);overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;cursor:grab;margin:8px 0 0;border:0;border-radius:0;background:radial-gradient(#9ab1a22e .8px,transparent .8px) 0 0/18px 18px,#fffdf8;padding:10px}.diagramViewport.dragging{cursor:grabbing;user-select:none}#diagram{display:block;width:auto;min-width:0;height:auto;margin:auto;max-width:none;flex-shrink:0}#diagram .outer-enclosure{fill:#eef2e854;stroke:#b8cbb8;stroke-width:1.5;stroke-dasharray:9 7;pointer-events:none}#diagram .module-enclosure{fill:#e7eee18c;stroke:#769673;stroke-width:2;stroke-dasharray:5 5;pointer-events:none}#diagram .enclosure-label,#diagram .module-label{fill:#46634b;font-size:14px;letter-spacing:1px;font-weight:700;pointer-events:none}#diagram .module-label{font-size:13px;letter-spacing:.6px}#diagram .wire-group{cursor:pointer;transition:opacity .15s}#diagram .wire-group.faded{opacity:.13}#diagram .wire-halo{fill:none;stroke:#fffdf8;stroke-width:8;stroke-linejoin:round;pointer-events:none}#diagram .wire-line{fill:none;stroke-width:3;stroke-linejoin:round;pointer-events:none}#diagram .wire-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke}#diagram .wire-group.followed .wire-line,#diagram .wire-group.hovered .wire-line,#diagram .wire-group:focus-visible .wire-line{stroke-width:5}#diagram .wire-group:focus-visible{outline:none}#diagram .wire-group:focus-visible .wire-halo{stroke:#e9c363;stroke-width:12}#diagram .invalid-wire .wire-line{stroke-dasharray:6 5}#diagram .node-body{fill:#fffefa;stroke:#789381;stroke-width:1.5}#diagram .node-header{fill:#e3eddf;stroke:none}#diagram .process-node{cursor:pointer}#diagram .boundary-node{cursor:default}#diagram .boundary-node .node-header{fill:#e8e8da}#diagram .boundary-node .node-body{fill:#f8f6eb;stroke:#acae90}#diagram .process-node.selected .node-body{stroke:#155d40;stroke-width:4}#diagram .process-node.failed-node .node-header{fill:#f0d9d1}#diagram .process-node:focus-visible{outline:none}#diagram .process-node:focus-visible .node-body{stroke:#ad6336;stroke-width:4}#diagram .process-title{font-size:16px;font-weight:700;fill:#23382e;pointer-events:none}#diagram .process-subtitle{font-size:11px;fill:#526956;pointer-events:none}#diagram .port-label{font-size:14px;font-weight:550;pointer-events:none}#diagram .diagram-port{cursor:pointer}#diagram .invalid-port circle{fill:#f9d7ca}.wire-readout{padding:12px 20px;background:#edf2e8;border-top:1px solid var(--line);min-height:52px;font-size:13px;line-height:1.45}.wire-legend{display:flex;gap:7px;flex-wrap:wrap;padding:14px 20px 8px}.wire-legend button{font-size:12px;min-height:34px;padding:5px 10px}.wire-legend i{display:inline-block;background:var(--swatch);width:18px;height:3px;vertical-align:middle;margin:0 6px 2px 0}.canvas-note{font-size:12px;color:var(--muted);padding:0 20px 14px;margin:0}.wiring-section .boxButtons{padding:0 12px;justify-content:center}.wiring-section .boxButtons button{font-size:12px;min-height:34px;padding:5px 10px}.split{margin-top:22px}#canvasDialog{width:98vw;max-width:none;height:94vh;max-height:none;padding:0;border:0;border-radius:14px;background:#fffdf8;overflow:hidden}#canvasDialog::backdrop{background:#13271fbd;backdrop-filter:blur(4px)}#canvasDialog .canvas-stage{display:flex;flex-direction:column;height:100%;border:0}#canvasDialog .diagramViewport{flex:1;min-height:0;height:auto}#canvasDialog .canvas-toolbar{flex-shrink:0}#canvasDialog .canvas-note{padding-bottom:12px}@media(min-width:1800px){.wiring-section{max-width:2100px}.diagramViewport{height:700px}}@media(max-width:800px){.hero{grid-template-columns:1fr;padding:25px 0}.hero h1{font-size:36px}.wiring-section{width:calc(100vw - 24px)}.wiring-heading{align-items:start;flex-direction:column;gap:10px}.wiring-heading h2{font-size:26px}.canvas-toolbar{padding:12px}.canvas-tools button{min-height:44px}.canvas-meta{flex-direction:column;gap:2px;padding:10px 12px 0}.diagramViewport{height:390px}.wire-legend{padding:12px 12px 8px}.wire-legend button{min-height:40px}.wire-readout{padding:12px}.canvas-note{padding:0 12px 14px}.wiring-section .boxButtons{justify-content:flex-start}.wiring-section .boxButtons button{min-height:44px}#canvasDialog{height:97vh;width:98vw}.canvas-tools{gap:5px}.canvas-tools output{min-width:35px}}

.primary:hover{background:#124a36;color:white}#diagram .diagram-port:focus-visible{outline:none}#diagram .diagram-port:focus-visible circle{stroke:#ad6336;stroke-width:5}#diagram .process-node>g[role=button]:focus-visible{outline:none}#diagram .process-node>g[role=button]:focus-visible .node-header{stroke:#ad6336;stroke-width:3}

.wider-shell{margin:22px 0}.wider-shell img{display:block;width:100%;height:auto;border:1px solid #d5dacf;border-radius:8px}.wider-shell figcaption{margin-top:10px;font-size:.88rem}