:root{color-scheme:light;--paper:#fff;--surface:#fff;--ink:#202020;--muted:#626262;--line:#d5d5d5;--accent:#006f99;--tint:#edf8fc;--magenta:#b21a63;--yellow:#f3cf47;--code-paper:#202020;--code-ink:#f8f8f8;--focus:#b21a63;--font:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--measure:58rem;--space:1.25rem}*{box-sizing:border-box}body{color:var(--ink);background:var(--paper);font:16px/1.85 var(--font);margin:0}button,input{font:inherit}button,summary,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,summary{cursor:pointer}a{color:var(--accent);text-underline-offset:.2em;overflow-wrap:anywhere}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}[hidden]{display:none!important}button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:5px;min-height:44px;padding:.55rem 1rem}button:hover:enabled{background:var(--tint)}button:disabled{opacity:.5;cursor:default}button.primary{color:var(--paper);background:var(--accent);border-color:var(--accent)}button.primary:hover:enabled{filter:brightness(.9);background:var(--accent)}.page{max-width:var(--measure);margin:auto;padding:3.5rem 1.5rem 2rem}.brand,.eyebrow{color:var(--muted);letter-spacing:.06em;font-size:.8rem}.brand{font-family:var(--mono)}h1{overflow-wrap:anywhere;margin:.5rem 0 1rem;font-size:clamp(1.65rem,4vw,2.35rem);font-weight:650;line-height:1.45}h2{margin:2rem 0 .75rem;font-size:1.2rem;font-weight:650}h3{margin:0 0 .6rem;font-size:.9rem;font-weight:600}p{overflow-wrap:anywhere;margin:.6rem 0 1rem}.prose{white-space:pre-line}.muted,.prerequisite,.example-note{color:var(--muted);font-size:.85rem}.home-header{margin-bottom:2rem}.home-header p{max-width:42rem}.tree-toolbar{gap:.5rem;margin-bottom:1.25rem;font-size:.8rem;display:flex}.tree ul{margin:0;padding:0 0 0 1.5rem;list-style:none}.tree .tree-root{padding-left:0}.tree li{position:relative}.tree li li{border-left:1px solid var(--line);padding-left:1rem}.tree li li:before{content:"";border-top:1px solid var(--line);width:.8rem;position:absolute;top:1.35rem;left:0}.tree li li:last-child{border-left-color:#0000}.tree li li:last-child:after{content:"";border-left:1px solid var(--line);height:1.35rem;position:absolute;top:0;left:-1px}.tree summary{padding:.5rem 0;line-height:1.7}.tree summary::marker{color:var(--muted)}.tree summary .count{font:.75rem var(--mono);color:var(--muted);margin-left:.8rem}.tree-root>li{margin-bottom:.25rem}.tree .leaf a{align-items:baseline;gap:.8rem;padding:.45rem 0;line-height:1.8;text-decoration:none;display:flex}.tree .leaf a:hover span:last-child{text-decoration:underline}.lesson-id{font:.75rem/1.8 var(--mono);color:var(--muted);white-space:nowrap}.lesson-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1.25rem;font-size:.85rem;display:flex}.goal{font-size:1.05rem}.prerequisite{border-left:2px solid var(--line);padding-left:1rem}.guided-example{border:1px solid var(--line);background:var(--surface);border-radius:8px;margin:2rem 0;padding:1.5rem}.example-heading{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.example-heading h2{margin:0}.step-status{color:var(--muted);font-size:.8rem}.pattern{margin:1.25rem 0}.pattern p,.pattern dd{white-space:pre-wrap}pre{font:.85rem/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;margin:0}code{font-family:var(--mono)}.window-label{font:.75rem var(--mono);border-bottom:1px solid var(--line);color:var(--muted);padding:.75rem 1rem}.terminal{background:var(--code-paper);color:var(--code-ink);border-radius:6px;overflow:hidden}.terminal .window-label{color:#d5d5d5;border-color:#626262}.terminal section{padding:1rem}.terminal h3{color:#f3cf47}.code-state,.comparison{grid-template-columns:minmax(0,1fr);gap:.75rem;display:grid}.state-panel,.code-panel,.comparison-change,.concept-node,.evidence-panel,.analysis-panel,.observation>section{border:1px solid var(--line);border-radius:5px;padding:1rem}.code-panel{background:var(--code-paper);color:var(--code-ink)}.result-panel{background:var(--tint)}.sequence,.pipeline{padding:0;list-style:none}.sequence li{border-bottom:1px solid var(--line);gap:1rem;padding:1rem 0;display:flex}.step-number{border:1px solid var(--line);color:var(--accent);width:2rem;height:2rem;font:.8rem var(--mono);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.sequence p{margin-bottom:0}.browser-request{border:1px solid var(--line);border-radius:6px;overflow:hidden}.browser-request section{padding:1rem}.request-pane{background:var(--tint)}table{border-collapse:collapse;width:100%}caption{text-align:left;padding:0 0 .65rem;font-size:.85rem}th,td{border:1px solid var(--line);vertical-align:top;text-align:left;padding:.8rem}th{background:var(--tint);font-size:.85rem;font-weight:600}.mapping th:first-child{width:7rem}.settings{border:1px solid var(--line);border-radius:6px}.settings dl{margin:0}.settings dl>div{grid-template-columns:9rem 1fr;gap:1rem;padding:1rem;display:grid}.settings dt{color:var(--muted);font-size:.8rem}.settings dd{margin:0}.concept{max-width:38rem;margin-inline:auto}.concept-relation{text-align:center;color:var(--accent);padding:.5rem 1rem}.concept-relation p{margin:.25rem 0}.concept-relation>span{font-size:1.5rem}.pipeline li{border-left:3px solid var(--accent);background:var(--tint);margin-bottom:.75rem;padding:1rem}.pipeline .step-number{margin-bottom:.6rem}.observation{gap:.75rem;display:grid}.takeaway{border-top:1px solid var(--line);margin-top:1.25rem;padding-top:1rem}.step-controls{flex-wrap:wrap;gap:.6rem;padding-top:1rem;display:flex}.step-controls button:last-child{margin-left:auto}.references{border-top:1px solid var(--line);margin:2.5rem 0 1rem;padding-top:1rem;font-size:.85rem}.references summary{min-height:44px}.references li{margin-bottom:1rem}.references a{font-size:.8rem;display:block}.site-footer{border-top:1px solid var(--line);color:var(--muted);margin-top:3rem;padding-top:1rem;font-size:.8rem}.skip-link{background:var(--surface);z-index:10;padding:.75rem;position:absolute;top:-5rem;left:1rem}.skip-link:focus{top:1rem}.concept-node+.concept-node{margin-top:.75rem}.relation-arrow{color:var(--accent);margin-bottom:.5rem;font-size:1.25rem;display:block}.example-table{margin-top:1rem;overflow-x:auto}.example-table th,.example-table td{overflow-wrap:anywhere}.terminal .example-table,.code-panel .example-table{color:var(--ink);background:var(--surface)}.sequence li>div{flex:1;min-width:0}@media (width<=40rem){.page{padding:2rem 1rem}.guided-example{padding:1rem}.tree ul{padding-left:.5rem}.tree li li{padding-left:.8rem}.tree .leaf a,.tree .lesson-id{display:block}.settings dl>div{grid-template-columns:1fr;gap:.25rem}.step-controls button{flex:auto}.step-controls button:last-child{margin-left:0}.mapping th:first-child{width:5rem}th,td{padding:.5rem}}@media print{:root{--paper:#fff;--surface:#fff;--ink:#000;--muted:#333;--accent:#000;--tint:#f4f4f4}.step-controls,.tree-toolbar,.skip-link{display:none!important}[data-at-step][hidden]{display:block!important}tr[data-at-step][hidden]{display:table-row!important}.terminal,.code-panel{color:#000;background:#f4f4f4}.page{max-width:none;padding:0}}.example-table .is-current-row>td{background:#fff5b8;font-weight:650}.example-table .is-current-row>td:first-child{border-left:4px solid #b50062}.table-focus-note{font-size:.8em;font-weight:400}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.home-page .page{max-width:72rem;font-family:var(--mono);padding:1.5rem;font-size:.85rem}.home-page h1{font:600 1.1rem var(--mono);margin:0 0 .5rem}.home-page .home-header{margin-bottom:1rem}.home-page .home-header p{color:var(--muted);font-size:.75rem}.home-page .tree summary{padding:.15rem 0}.home-page .tree .leaf a{gap:.6rem;padding:.1rem 0}.home-page .tree li li:before{top:.9rem}.home-page .tree li li:last-child:after{height:.9rem}.home-page .tree-toolbar{margin-bottom:.75rem}.home-page .tree-toolbar button{background:0 0;border:0;padding:.25rem .5rem;text-decoration:underline}.home-page .tree-toolbar{flex-wrap:wrap;align-items:center}.tree-toolbar input,.tree-toolbar select{border:1px solid var(--line);color:var(--ink);background:var(--surface);font:inherit;padding:.35rem}.tree-toolbar input{width:15rem}.experience-label{color:var(--magenta);font:.65rem var(--mono);white-space:nowrap}.home-page .site-footer{border:0;margin-top:1rem}.home-page .tree .leaf a span:last-child:not(.sr-only){display:inline}.home-page .tree .leaf a:hover span:nth-child(2){text-decoration:underline}.module-page .page{max-width:100rem;padding:1rem}.module-page .lesson-header{max-height:8dvh;margin:0 0 .5rem;padding-bottom:.5rem;overflow:auto}.module-title{max-height:24dvh;margin-bottom:.75rem;overflow:auto}.module-title h1{margin:0 0 .35rem;font-size:clamp(1.15rem,2.2vw,1.6rem)}.module-title .goal{margin:0;font-size:.85rem}.workbench{grid-template-columns:minmax(0,1fr);gap:1rem;display:grid}.explanation-panel,.module-page .guided-example{border:1px solid var(--line);background:var(--surface);border-radius:5px;min-width:0;height:68dvh;min-height:0;overflow:hidden}.explanation-panel{grid-template-rows:auto minmax(0,1fr);display:grid}.explanation-tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:.25rem;padding:.35rem;display:flex}.explanation-tabs button{border:0;flex:1;padding:.3rem .5rem;font-size:.85rem}.explanation-tabs [aria-selected=true]{background:var(--tint);color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.explanation-content{overscroll-behavior:contain;padding:1rem;overflow:auto}.explanation-content h2{margin:.4rem 0 .75rem;font-size:1.05rem}.explanation-content section+section{margin-top:1.5rem}.explanation-content [role=tabpanel]{margin:0;font-size:.9rem}.source-list{padding-left:1.25rem;font-size:.8rem}.source-list li{margin-bottom:1rem}.source-list a{display:block}.module-page .guided-example{grid-template-rows:auto auto minmax(0,1fr) auto;margin:0;padding:.75rem;display:grid}.module-page .example-heading h2{font-size:1.05rem}.module-page .example-note{margin:.25rem 0 .5rem;font-size:.75rem}.guided-viewport{overscroll-behavior:contain;min-height:0;padding:.25rem;overflow:auto}.guided-viewport .pattern{margin:0}.guided-viewport .pattern p{font-size:.85rem}.module-page .step-controls{border-top:1px solid var(--line);padding-top:.65rem;font-size:.8rem}.module-page .step-status{font-size:.7rem}.interaction{border-top:1px solid var(--line);margin:1rem 0 0;padding-top:.75rem}.instruction{color:var(--accent);font-weight:600}.terminal .instruction,.code-panel .instruction{color:#f3cf47}.guided-target{border:2px solid var(--accent);background:var(--tint);box-shadow:0 0 0 2px var(--surface)}.guided-target[aria-pressed=true]{border-style:dashed}.guided-choices{flex-wrap:wrap;gap:.5rem;display:flex}.command-session{background:var(--code-paper);color:var(--code-ink);font-family:var(--mono);border-radius:4px;padding:.85rem;font-size:.8rem}.command-session label{font-size:.75rem;display:block}.command-line{margin:.5rem 0;padding:.5rem 0;line-height:1.7;display:flex;overflow-x:auto}.command-entry{flex:1;min-width:0;display:block;position:relative}.ghost-command{white-space:pre;color:#989898;pointer-events:none;position:absolute;inset:0;overflow:hidden}.command-entry input{width:100%;font:inherit;line-height:inherit;color:#fff;caret-color:#fff;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:block;position:relative}.command-session pre{white-space:pre-wrap;border-top:1px solid #626262;padding-top:.75rem}.command-session .input-feedback{color:#d5d5d5;font:.7rem/1.6 var(--font)}.artifact-title{font-family:var(--font)}.hex-dump{background:var(--code-paper);color:var(--code-ink);white-space:pre-wrap;word-break:normal;flex-wrap:wrap;align-items:center;gap:.2ch;padding:.65rem;font-size:.8rem;display:flex}.hex-dump span{white-space:nowrap}.byte-focus{color:#202020;background:#f3cf47}.hex-dump .byte-focus{max-width:100%;min-height:0;font:inherit;white-space:normal;overflow-wrap:anywhere;border:1px solid #f3cf47;border-radius:0;flex-wrap:wrap;gap:.2ch;padding:0;display:inline-flex}.hex-dump .byte-focus:hover:enabled{background:#ffe995}.hex-dump .byte-focus[aria-pressed=true]{border-color:var(--code-ink);border-style:dashed}.field-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.5rem;margin-top:.75rem;display:grid}.field-list button{text-align:left;grid-template-columns:minmax(0,1fr);padding:.5rem;font-size:.8rem;display:grid}.field-list button:disabled{opacity:.7}.field-list code{white-space:pre-wrap;overflow-wrap:anywhere}.field-list small{font:.7rem/1.5 var(--mono)}.field-detail{background:var(--tint);color:var(--ink);border-left:3px solid var(--accent);padding:.75rem}.technical-note{border-top:1px solid var(--line);padding-top:1rem;font-size:.85rem}.computed-result{border:1px solid var(--yellow);margin-top:.75rem;padding:.75rem}.computed-result>span{color:var(--yellow);font:.75rem var(--font)}.bit-grid{flex-wrap:wrap;gap:.25rem;display:flex}.bit-grid>div{text-align:center;min-width:2rem;font-family:var(--mono);gap:.35rem;display:grid}.bit-grid span{font-size:.8rem}.bit-grid button{font:1.2rem var(--mono);padding:.4rem}.bit-total{border-bottom:3px solid var(--magenta);padding:.75rem}.bit-total strong{font:1.6rem var(--mono);color:var(--magenta)}.reference-table{font-family:var(--mono);margin-bottom:1.5rem;overflow:auto}.reference-table th{position:sticky;top:0}.reference-table th,.reference-table td{padding:.35rem .5rem;font-size:.8rem}.reference-table td{white-space:pre-wrap;overflow-wrap:anywhere}.terminal-history{border-bottom:1px solid var(--muted);max-height:24dvh;padding:.75rem 1rem;overflow:auto}.terminal-history pre{margin-bottom:.6rem}.terminal-history-label{color:#d5d5d5;margin:.5rem 0 .2rem;font-size:.8rem}.selection-result{background:var(--tint);color:var(--ink);border-left:3px solid var(--magenta);margin-top:.75rem;padding:.75rem}.packet-layers{font-family:var(--font);flex-wrap:wrap;gap:3px;margin:.75rem 0;display:flex}.packet-layers>span{border:1px solid var(--line);min-width:6rem;color:var(--ink);background:var(--surface);flex:1;padding:.4rem .6rem;display:grid}.packet-layers small{font-size:.65rem}.packet-layers .layer-active{border-color:var(--magenta);box-shadow:inset 0 3px var(--magenta)}.byte-view{background:var(--surface);max-height:30dvh;color:var(--ink);border:1px solid var(--line);font-family:var(--mono);padding:.5rem;overflow:auto}.byte-view-head,.byte-row{grid-template-columns:6ch 48ch 16ch;align-items:center;gap:1ch;width:max-content;font-size:.75rem;line-height:1.8;display:grid}.byte-view-head{color:var(--muted);padding-bottom:.4rem;font-size:.75rem}.byte-values{grid-template-columns:repeat(16,3ch);display:grid}.byte-values>span,.byte-values>button{width:2.6ch;font:inherit;text-align:center;border:0;border-radius:1px;min-height:1.8em;padding:0}.byte-values>.byte-focus{color:var(--ink);background:var(--yellow)}.byte-values>.byte-focus:hover:enabled{background:var(--magenta);color:#fff}.byte-ascii{white-space:pre}.ascii-focus{background:var(--yellow)}.byte-legend{font:.7rem/1.5 var(--font);color:var(--muted)}.terminal .byte-legend,.code-panel .byte-legend,.terminal .artifact-title .muted,.code-panel .artifact-title .muted{color:inherit}.field-target{text-align:left;width:100%;color:var(--ink);gap:.25rem;margin-top:.75rem;padding:.75rem;display:grid}.field-target code{white-space:pre-wrap;overflow-wrap:anywhere}.field-target small{color:var(--muted)}.all-fields{background:var(--surface);color:var(--ink);margin-top:.75rem}.all-fields summary{padding:.5rem;font-size:.8rem}.all-fields table{table-layout:fixed;font-size:.75rem}.all-fields th,.all-fields td{overflow-wrap:anywhere;padding:.4rem}.all-fields .current-field{background:var(--tint)}.all-fields th:first-child{width:5rem}@media (width>=70rem){.workbench{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.explanation-panel,.module-page .guided-example{height:72dvh}}@media (width<=40rem){.home-page .tree .leaf a{flex-wrap:wrap;display:flex}.home-page .tree .lesson-id{display:inline}.module-page .page{padding:.6rem}.explanation-content{padding:.75rem}}@media print{.explanation-panel,.module-page .guided-example,.module-title{height:auto;max-height:none;overflow:visible}.workbench{display:block}.explanation-tabs,.interaction input{display:none}[role=tabpanel][hidden],[data-command-output][hidden],[data-field-detail][hidden]{display:block!important}.guided-viewport,.explanation-content{overflow:visible}}.command-line{gap:.5ch}.byte-reading{font:.8rem/1.7 var(--mono);border-left:3px solid var(--magenta);background:var(--surface);color:var(--ink);overflow-wrap:anywhere;padding:.4rem .7rem}
