@font-face { font-family:Inter; src:url(/fonts/inter-var.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:Archivo; src:url(/fonts/archivo-var.woff2) format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url(/fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight:100 800; font-display:swap; }

:root { --paper:#fefcf9; --canvas:#f6f3ee; --ink:#1c2635; --muted:#586473; --blue:#0c4d6a; --line:#dedbd5; --on-accent:#fff; --green:#397658; --amber:#946d23; --body:Inter,Arial,sans-serif; --mono:'JetBrains Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
a:hover { color:var(--blue); }
button { cursor:pointer; }
:focus-visible { outline:3px solid #6395ff; outline-offset:4px; }
::selection { background:#dbe7ff; color:var(--ink); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:550; }
h1 { font-size:clamp(54px,6.5vw,94px); line-height:1.02; letter-spacing:-.067em; }
h2 { font-size:40px; letter-spacing:-.045em; line-height:1.15; }

.brand-icon { display:block; width:32px; height:32px; flex-shrink:0; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:23px; font-weight:650; letter-spacing:-1px; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; position:relative; width:34px; height:34px; border-radius:8px; color:white; background:var(--blue); font-size:20px; letter-spacing:-2px; padding-right:5px; }
.brand-mark span { font-size:15px; position:absolute; top:-2px; right:2px; }

.hero { max-width:1512px; padding:76px 5% 72px; margin:auto; display:grid; grid-template-columns:1fr 1.03fr; gap:7%; align-items:center; }
.intro-label { color:var(--blue); font-size:14px; font-weight:550; margin-bottom:28px; }
.hero h1 { margin-bottom:28px; }
.hero-description { max-width:390px; font-size:19px; color:var(--muted); line-height:1.65; margin-bottom:30px; }
.hero-actions { display:flex; gap:26px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:13px 21px; border-radius:6px; font-size:14px; font-weight:550; }
.button.primary { color:#fff; background:var(--blue); box-shadow:0 3px 0 #103b9f; }
.button.primary:hover { background:#103b9f; }
.button span { font-size:20px; }
.text-link { font-size:14px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#a9b8ca; }
.hero-note { margin:27px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.hero-art { background:var(--canvas); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 18px 55px -35px #52709570; }
.art-caption { display:flex; justify-content:space-between; gap:15px; padding:18px 22px; border-bottom:1px solid var(--line); font-size:12px; }
.art-caption span:first-child { font-weight:600; }
.art-caption span:last-child { color:var(--muted); font-size:10px; }
.hero-art>img { display:block; width:100%; height:auto; min-height:390px; object-fit:contain; background:var(--paper); padding:30px 20px; }
.art-bottom { display:flex; gap:9px; align-items:center; font-size:11px; color:var(--muted); padding:15px 22px; }
.status-dot { display:inline-block; width:7px; height:7px; flex-shrink:0; background:var(--green); border-radius:50%; }
.first-command { background:var(--canvas); border-block:1px solid var(--line); display:grid; grid-template-columns:1fr 1.3fr; gap:10%; padding:70px max(5%,calc((100% - 1360px)/2)); align-items:center; }
.section-kicker { display:block; font-size:13px; color:var(--muted); margin-bottom:20px; }
.first-command h2 { margin-bottom:20px; }
.first-command p { color:var(--muted); max-width:365px; }
.terminal { background:#172e4b; color:#edf3fc; border-radius:10px; box-shadow:0 15px 30px -24px #183451; overflow:hidden; }
.terminal-top { display:flex; justify-content:space-between; padding:17px 23px; border-bottom:1px solid #ffffff20; font-size:12px; color:#b2c6e0; }
.terminal .code-block { border:0; background:none; margin:0; border-radius:0; }
.terminal .code-label { color:#b2c6e0; border:0; background:none; padding:17px 23px 0; }
.terminal pre { color:#fff; padding:14px 23px 25px; font-size:13px; }
.terminal .copy { color:#b2c6e0; border-color:#ffffff35; }
.result-line { display:flex; align-items:center; gap:12px; margin:0 23px; padding:18px 0; border-top:1px solid #ffffff20; font-size:11px; color:#b2c6e0; }
.result-line .status-dot { background:#88d4b2; }
.result-line code { color:#88d4b2; }
.result-line span:last-child { margin-left:auto; }
.curriculum { max-width:1512px; margin:auto; padding:90px 5%; }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:48px; }
.section-heading h2 { margin-bottom:0; }
.section-heading p { color:var(--muted); max-width:380px; margin:0; }
.chapter-groups { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.chapter-group { border-top:2px solid var(--blue); padding-top:20px; }
.chapter-range { color:var(--blue); font-size:12px; }
.chapter-group h3 { font-size:22px; letter-spacing:-.035em; margin:12px 0; }
.chapter-group>p { font-size:14px; color:var(--muted); min-height:88px; }
.chapter-group ol { list-style:none; padding:0; margin:0; }
.chapter-group li { border-top:1px solid var(--line); }
.chapter-group li a { display:flex; align-items:baseline; gap:12px; font-size:13px; padding:13px 0; line-height:1.5; }
.chapter-group li span { color:#75889f; font-family:var(--mono); font-size:10px; }
.closing { background:var(--canvas); padding:75px 5%; text-align:center; }
.closing p { max-width:560px; margin:0 auto 28px; color:var(--muted); }
footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:32px 5%; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
footer .brand { font-size:18px; color:var(--ink); }
.guide-layout { display:grid; grid-template-columns:270px minmax(0,840px) minmax(160px,1fr); max-width:1600px; margin:auto; }
.sidebar { position:sticky; top:88px; height:calc(100vh - 88px); overflow:auto; border-right:1px solid var(--line); padding:30px 22px; scrollbar-width:thin; }
.sidebar-heading { margin:0 10px 22px; font-weight:600; }
.menu-toggle { display:none; }
.search { display:flex; align-items:center; gap:5px; background:var(--canvas); border:1px solid var(--line); border-radius:6px; padding:9px 11px; margin-bottom:30px; }
.search input { min-width:0; width:100%; border:0; background:transparent; font-size:12px; color:var(--ink); outline-offset:8px; }
.search>span:last-child { color:#8293a9; font-size:12px; }
.sidebar nav a { display:flex; align-items:baseline; gap:11px; padding:8px 10px; border-radius:5px; font-size:12px; line-height:1.5; }
.sidebar nav a[aria-current] { background:#eaf0ff; color:var(--blue); }
.sidebar nav a>span:first-child { color:#788ba3; font-family:var(--mono); font-size:10px; }
.nav-group { margin-bottom:23px; }
.nav-group p { color:var(--ink); font-size:11px; font-weight:600; padding-left:10px; margin-bottom:7px; }
.source-link { display:block; border-top:1px solid var(--line); margin-top:27px; padding:20px 10px 0; font-size:11px; color:var(--muted); }
.guide-main { min-width:0; padding:56px clamp(24px,4vw,66px); }
.guide-intro { padding-bottom:52px; }
.guide-intro h1 { font-size:66px; margin-bottom:24px; }
.guide-intro>p:not(.intro-label) { font-size:20px; line-height:1.6; color:var(--muted); }
.guide-facts { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:11px; color:var(--muted); margin:25px 0; }
.before-start { border:1px solid var(--line); background:var(--canvas); border-radius:6px; padding:15px 20px; font-size:14px; }
summary { cursor:pointer; font-weight:550; }
.before-start summary { font-size:13px; }
.before-start[open] summary { margin-bottom:20px; }
.before-start p:last-child { margin-bottom:0; }
.before-start blockquote { margin:0; }
.before-start a { color:var(--blue); text-decoration:underline; }
.lesson { border-top:1px solid var(--line); padding-top:40px; padding-bottom:50px; scroll-margin-top:15px; }
.lesson-heading { display:grid; grid-template-columns:38px 1fr 15px; gap:14px; align-items:baseline; margin-bottom:30px; }
.lesson-number { color:var(--blue); font-family:var(--mono); font-size:16px; }
.lesson-heading h2 { font-size:30px; line-height:1.3; letter-spacing:-.035em; margin:0; }
.lesson-heading>a { color:#a6b5c7; font-size:17px; }
.prose { font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.prose p { margin-bottom:22px; }
.prose h3 { font-size:23px; line-height:1.4; letter-spacing:-.03em; margin:38px 0 20px; }
.prose h4 { font-size:18px; margin-top:28px; }
.prose a { color:var(--blue); text-decoration:underline; text-decoration-color:#c4d3ef; text-underline-offset:3px; }
.prose code:not(pre code),.before-start code { background:#edf2f8; border-radius:3px; padding:2px 4px; font-size:.85em; color:#254d81; }
code,pre { font-family:var(--mono); }
.code-block { margin:22px 0; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--canvas); }
.code-label { padding:8px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }
.copy { font-size:10px; color:var(--muted); background:transparent; padding:2px 8px; border:1px solid var(--line); border-radius:4px; }
.copy:hover { color:var(--blue); border-color:var(--blue); }
pre { margin:0; padding:19px; white-space:pre; overflow:auto; font-size:12px; line-height:1.85; tab-size:2; color:#29445f; }
.prose table { display:block; width:100%; overflow:auto; border-collapse:collapse; margin:26px 0; font-size:12px; line-height:1.6; }
.prose th { background:var(--canvas); text-align:left; font-weight:600; }
.prose td,.prose th { padding:11px 14px; border:1px solid var(--line); min-width:100px; }
.prose blockquote { border-left:3px solid var(--blue); padding:10px 20px; margin:25px 0; background:var(--canvas); }
.prose blockquote p:last-child { margin-bottom:0; }
.prose hr { display:none; }
.prose li { margin-bottom:9px; }
.diagram { margin:30px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.diagram img { display:block; width:100%; height:auto; padding:22px; max-height:700px; object-fit:contain; }
.diagram figcaption { background:var(--canvas); padding:9px; text-align:center; color:var(--muted); font-size:10px; }
.next-lesson { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:16px 20px; font-size:13px; margin-top:30px; }
.next-lesson>span:first-child { width:100%; font-size:10px; color:var(--muted); }
.reading-rail { position:sticky; top:88px; height:fit-content; padding:60px 24px 20px 10px; font-size:11px; color:var(--muted); }
.reading-rail>span { color:var(--ink); font-weight:550; }
.reading-rail nav a { display:block; line-height:1.5; padding:9px 0; }
.reading-progress { border-top:1px solid var(--line); padding-top:20px; margin-top:25px; }
progress { display:block; width:100%; height:4px; border:0; border-radius:4px; margin-top:10px; accent-color:var(--blue); }
progress::-webkit-progress-bar { background:var(--line); border-radius:4px; }
progress::-webkit-progress-value { background:var(--blue); border-radius:4px; }
.gallery { max-width:1512px; margin:auto; padding:60px 5% 80px; }
.gallery-heading h1 { font-size:72px; margin-bottom:24px; }
.gallery-heading>p:not(.intro-label) { color:var(--muted); max-width:510px; font-size:18px; }
.legend { display:flex; flex-wrap:wrap; gap:12px 26px; font-size:11px; margin:30px 0 45px; }
.legend span { display:flex; align-items:center; gap:8px; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #9db4d0; background:#edf3fc; }
.legend .legend-gate { background:#fff4de; border-color:#c6953a; }
.legend .legend-good { background:#e7f3ee; border-color:#679780; }
.legend .legend-bad { background:#fbeeee; border-color:#c78686; }
.legend .legend-hero { background:var(--blue); border-color:var(--blue); }
.diagram-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.diagram-grid figure { margin:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.gallery-figure-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 22px; background:var(--canvas); border-bottom:1px solid var(--line); }
.gallery-figure-heading h2 { font-size:17px; letter-spacing:-.02em; margin:0; }
.gallery-figure-heading a { flex-shrink:0; font-size:10px; color:var(--blue); }
.gallery-image { display:block; padding:25px; }
.gallery-image img { width:100%; height:440px; object-fit:contain; }
.diagram-grid figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:13px 20px; border-top:1px solid var(--line); font-size:9px; color:var(--muted); }
.hljs-keyword,.hljs-selector-tag,.hljs-literal { color:#794ab6; }
.hljs-string,.hljs-attr { color:#256e58; }
.hljs-number,.hljs-built_in { color:#a46525; }
.hljs-comment { color:#75839a; }
.hljs-title,.hljs-name { color:#164bc5; }
.toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; border-radius:6px; padding:10px 20px; font-size:13px; z-index:30; pointer-events:none; opacity:0; }
.toast.visible { opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:15px; top:-80px; background:var(--blue); color:white; padding:10px 20px; z-index:50; }
.skip-link:focus { top:10px; }
[hidden] { display:none !important; }
@media(min-width:1600px) { .hero { gap:100px; } }
@media(max-width:1150px) { .reading-rail { display:none; } .guide-layout { grid-template-columns:250px minmax(0,1fr); } .hero { gap:5%; } .hero h1 { font-size:72px; } .hero-art>img { height:420px; } .art-caption span:last-child { display:none; } .chapter-groups { gap:22px; } }
@media(max-width:800px) { .brand { font-size:20px; } .hero { padding-top:45px; gap:35px; } .hero h1 { font-size:58px; } .hero-description { font-size:16px; } .hero-actions { gap:16px; flex-wrap:wrap; } .hero-art>img { height:380px; padding:15px 8px; } .art-bottom { padding:12px; font-size:9px; } .first-command { gap:5%; padding-block:48px; } h2 { font-size:32px; } .chapter-groups { grid-template-columns:1fr 1fr; gap:35px; } .chapter-group>p { min-height:48px; } .section-heading { align-items:start; } .section-heading p { max-width:290px; font-size:14px; } .guide-layout { display:block; } .sidebar { position:sticky; top:72px; height:auto; padding:12px 5%; border-right:0; border-bottom:1px solid var(--line); z-index:15; background:var(--paper); overflow:visible; } .sidebar-heading { display:flex; justify-content:space-between; align-items:center; margin:0; font-size:13px; } .menu-toggle { display:block; border:1px solid var(--line); padding:4px 10px; border-radius:4px; color:var(--blue); background:var(--canvas); font-size:12px; } #chapter-navigation { display:none; max-height:65vh; overflow:auto; padding-top:20px; } .sidebar.open #chapter-navigation { display:block; } .guide-main { max-width:760px; margin:auto; padding:40px 6%; } .guide-intro h1 { font-size:55px; } html { scroll-padding-top:146px; } .diagram-grid { gap:20px; } .gallery-figure-heading { align-items:start; padding:15px; } .gallery-figure-heading h2 { font-size:14px; } .gallery-image { padding:14px; } .gallery-image img { height:330px; } footer>span { display:none; } }
@media(max-width:560px) { .brand { font-size:18px; gap:7px; } .brand-mark { width:29px; height:29px; font-size:18px; } .hero { display:block; padding-top:38px; } .hero h1 { font-size:65px; } .hero-description { max-width:330px; font-size:17px; } .intro-label { margin-bottom:24px; font-size:12px; } .hero-art { margin-top:36px; } .hero-art>img { height:395px; } .hero-note { font-size:11px; } .first-command { display:block; padding:40px 5%; } .first-command>div:first-child { margin-bottom:27px; } .terminal pre { font-size:11px; padding:15px; } .terminal .code-label { padding:12px 15px 0; } .result-line { margin-inline:15px; font-size:9px; gap:8px; } .curriculum { padding:50px 5%; } .section-heading { display:block; margin-bottom:30px; } .section-heading h2 { margin-bottom:22px; } .section-heading p { max-width:none; } .chapter-groups { grid-template-columns:1fr; gap:30px; } .chapter-group>p { min-height:0; } .chapter-group li a { font-size:14px; } .closing { padding:45px 5%; } .closing h2 { font-size:31px; } .closing p { font-size:14px; } .lesson-heading { grid-template-columns:28px 1fr 12px; gap:10px; } .lesson-heading h2 { font-size:25px; } .lesson-number { font-size:13px; } .prose { font-size:14px; } .prose pre { font-size:11px; } .guide-main { padding-inline:5%; } .guide-intro h1 { font-size:55px; } .guide-intro>p:not(.intro-label) { font-size:17px; } .guide-facts { gap:8px 14px; font-size:10px; } .diagram img { padding:10px; } .gallery { padding-top:40px; } .gallery-heading h1 { font-size:55px; } .gallery-heading>p:not(.intro-label) { font-size:16px; } .diagram-grid { grid-template-columns:1fr; } .gallery-image img { height:440px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Footer wordmarks retain the locally hosted brand face. */
.brand { font-family:Archivo,var(--body); font-stretch:112%; }
@media(prefers-color-scheme:dark) {
  :root { --paper:#0d1117; --canvas:#171e28; --ink:#e7edf5; --muted:#b2bece; --line:#34404f; --blue:#78c6e8; }
  .button.primary { background:#285776; box-shadow:0 3px 0 #173a50; }
  .button.primary:hover { background:#356c8f; }
  .sidebar nav a[aria-current] { background:#203a50; }
  .prose code:not(pre code),.before-start code { background:#243345; color:#b4d5ff; }
  pre { color:#c3d1e3; }
  .hljs-keyword,.hljs-selector-tag,.hljs-literal { color:#d6acff; }
  .hljs-string,.hljs-attr { color:#9ad9b6; }
  .hljs-number,.hljs-built_in { color:#edc38f; }
  .hljs-title,.hljs-name { color:#9ec9ff; }
  .skip-link,.toast { color:#0d1117; }
}
/* The adaptive overview supplies its own palette without a fixed white canvas. */
.hero-art>img { height:auto; min-height:0; padding:22px 18px; background:transparent; }
.diagram img,.gallery-image { background:transparent; }
@media print { .sidebar,.reading-rail,.copy,footer,.toast,.next-lesson { display:none; } .guide-layout { display:block; } .guide-main { padding:0; } .lesson { break-before:page; } pre { white-space:pre-wrap; } .diagram { break-inside:avoid; } }

/* Align the chapter controls beneath the shared one-row or two-row masthead. */
.sidebar,.reading-rail { top:61px; }
.sidebar { height:calc(100vh - 61px); }
@media(max-width:1199px) { .sidebar,.reading-rail { top:101px; } .sidebar { height:calc(100vh - 101px); } html { scroll-padding-top:125px; } }
@media(max-width:800px) { .sidebar { height:auto; } html { scroll-padding-top:175px; } }

/* Response subsections expose the contract without crowding every chapter in the index. */
.sidebar nav .chapter-sections { margin:2px 0 15px 23px; padding-left:12px; border-left:1px solid var(--line); }
.sidebar nav .chapter-sections a { display:block; padding:5px 8px; font-size:11px; line-height:1.5; }
.sidebar nav .chapter-sections a span { color:inherit; }
.sidebar nav .chapter-sections a > span:first-child { font-family:inherit; font-size:inherit; }
.search:focus-within { outline:2px solid var(--blue); outline-offset:2px; }
.search input:focus-visible { outline:none; }