:root{--ink:#182824;--paper:#f8f7ef;--lime:#d6f1a0;--muted:#53645c;--line:#cdd6c5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 Arial,Helvetica,sans-serif}a{color:inherit;text-underline-offset:5px}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #527b27;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.15;font-weight:500}h1{font-size:clamp(42px,5.1vw,76px);letter-spacing:-.055em}h1 em{font-family:Georgia,serif;color:#a9ce7d}h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.04em;margin:14px 0 25px}h3{font-size:23px;margin-bottom:12px}p+p{margin-top:16px}.top{max-width:1260px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 36px;gap:20px;font-size:13px}.top a{text-decoration:none}.brand{font-size:30px;font-weight:bold;line-height:1}.brand span{display:block;font-size:8px;letter-spacing:2px;margin-top:7px}.skip{position:absolute;left:12px;top:-100px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}.hero{background:var(--ink);color:var(--paper);padding:70px max(36px,calc((100vw - 1188px)/2));display:grid;grid-template-columns:1.25fr 1fr;gap:65px;align-items:center}.eyebrow{font:11px/1.6 monospace;letter-spacing:1.4px}.hero .eyebrow{color:var(--lime);margin-bottom:25px}.lead{font-size:18px;max-width:580px;color:#d5ded1;margin-top:30px}.meta{font-size:12px;color:#b1c1b5;margin:24px 0}.button{display:inline-flex;gap:30px;align-items:center;background:var(--lime);color:var(--ink);padding:13px 20px;text-decoration:none;font-size:14px;border:0}.notebook{background:#f5f2df;color:var(--ink);padding:32px;transform:rotate(1deg);position:relative;border-radius:3px 10px 5px 8px;box-shadow:10px 12px 0 #0b171750}.tape{position:absolute;top:-12px;left:35%;width:100px;height:26px;background:#cddfaacc;transform:rotate(-5deg)}.scribble{font:italic 25px Georgia,serif}.shop{height:120px;width:165px;margin:26px auto 20px;position:relative;border:3px solid var(--ink);border-radius:3px 5px 0 0}.roof{height:28px;position:absolute;top:-16px;left:-12px;right:-12px;background:repeating-linear-gradient(90deg,var(--lime) 0 22px,var(--paper) 22px 44px);border:2px solid var(--ink);transform:rotate(-2deg)}.shop-window{position:absolute;top:30px;left:13px;border:2px solid var(--ink);padding:5px 12px;font:italic 20px Georgia}.door{position:absolute;right:12px;bottom:0;width:37px;height:76px;border:2px solid var(--ink);border-bottom:0}.notebook dl{margin:0}.notebook dl div{padding:10px 0;border-bottom:1px dashed #9caa8e}.notebook dt{font-weight:bold;font-size:14px}.notebook dd{margin:0;font-size:13px}.contents{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;padding:22px;background:#e8eddf;font-size:12px}.contents a{text-decoration:none}.section{padding:70px max(36px,calc((100vw - 1188px)/2))}.intro{max-width:800px;color:var(--muted);font-size:17px;margin-bottom:32px}.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.roles article{padding:25px;border:1px solid var(--line);border-radius:5px 16px 7px 12px}.roles h3{margin-top:20px}.roles p{font-size:15px}.num{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--lime);border-radius:50%;font:18px Georgia}.pale{background:#edf0e5}.setup-flow{display:flex;align-items:center;gap:30px;max-width:850px;margin:38px auto 18px}.sketch{border:2px solid var(--ink);border-radius:10px 4px 13px 5px;padding:25px;background:var(--paper);flex:1;transform:none}.sketch:nth-child(3){transform:none}.sketch small,.sketch strong,.sketch span{display:block}.sketch small{font:10px monospace;letter-spacing:1px}.sketch strong{font:28px Georgia;margin:14px 0}.sketch span{font-size:14px}.connector{font-size:40px}.caption{font-size:13px;color:var(--muted);margin-top:18px}.setup-flow+.caption{text-align:center}.lookup{max-width:850px;margin:35px auto 0;padding-top:30px;border-top:1px solid var(--line)}.lookup-path{font:24px Georgia;background:var(--lime);padding:18px;display:flex;gap:20px;flex-wrap:wrap;margin:20px 0}.demo{border:2px solid var(--ink);border-radius:8px 18px 6px 12px;padding:30px;background:#fffef7}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.demo button{border:1px solid var(--ink);padding:8px 14px;background:var(--paper);border-radius:4px;font-size:13px}.demo-top button{background:var(--ink);color:white;min-width:115px}.flow-nodes{list-style:none;margin:36px 0 15px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:30px}.node{position:relative;border:2px solid #aebba5;border-radius:8px 13px 5px 9px;padding:18px 10px;text-align:center;transition:background .3s,border-color .3s}.node.active{background:var(--lime);border-color:var(--ink)}.node-icon{display:block;font-size:32px;margin-bottom:10px}.node strong{display:block;font-size:16px}.node small{display:block;font-size:12px;line-height:1.5;margin-top:8px}.node.mac{border-style:dashed}.wire{position:absolute;left:calc(100% + 2px);top:45%;width:30px;font-size:9px;line-height:1.4;overflow-wrap:anywhere;color:#48613b}.mac-note{font-size:12px;color:var(--muted);text-align:right}.step-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.step-controls button[aria-pressed=true]{background:var(--lime)}.explanation{border-top:1px solid var(--line);margin-top:22px;padding-top:22px;display:grid;grid-template-columns:80px 1fr;gap:20px;min-height:155px}.explanation>span{font:13px monospace;padding-top:5px;color:var(--muted)}.explanation p{max-width:800px}.two-notes{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px}.two-notes p{font-size:15px;color:var(--muted)}.walkthrough{max-width:900px}.walkthrough article{display:grid;grid-template-columns:40px 1fr;gap:25px;padding:30px 0;border-top:1px solid var(--line)}.walkthrough p{max-width:780px}.aside{border-left:3px solid #91ad70;padding-left:18px;color:var(--muted);font-size:14px}pre{background:var(--ink);color:#e6f1d5;padding:22px;border-radius:6px;overflow:auto;font:13px/1.7 monospace;margin:20px 0}code{font-size:.9em;overflow-wrap:anywhere}pre code{font-size:inherit;overflow-wrap:normal}.lessons{max-width:900px}details{border-bottom:1px solid var(--line);padding:18px 0}summary{font-size:19px;cursor:pointer;font-weight:500}details p{margin-top:17px;color:var(--muted)}.closing{padding:60px max(36px,calc((100vw - 1188px)/2));background:var(--ink);color:var(--paper)}.closing .eyebrow{color:var(--lime)}.closing p:not(.eyebrow){max-width:650px;margin-bottom:28px}.sources h2{font-size:28px}.sources ul{padding-left:20px}.sources li{padding:5px 0}.sources{padding-block:45px}footer{border-top:1px solid var(--line)}[hidden]{display:none!important}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:45px;padding:45px 24px}.notebook{max-width:460px;width:100%;margin:auto}.section,.closing{padding:45px 24px}.top{padding:23px 24px}.roles{grid-template-columns:1fr}.roles article{padding:20px}.flow-nodes{grid-template-columns:1fr;gap:27px;margin-top:25px}.node{text-align:left;padding:16px 18px 16px 70px;min-height:91px}.node-icon{position:absolute;left:20px;top:18px}.node small{margin-top:4px}.wire{top:100%;left:15px;width:auto;height:27px;line-height:27px}.mac-note{text-align:left}.demo{padding:20px}.demo-top{align-items:flex-start}.demo-top .eyebrow{max-width:170px;font-size:9px}.two-notes{grid-template-columns:1fr;gap:25px}.explanation{grid-template-columns:1fr;gap:12px;min-height:225px}.setup-flow{gap:14px}.sketch{padding:15px}.sketch strong{font-size:23px}.connector{font-size:25px}.contents{gap:15px;justify-content:flex-start;padding:20px 24px}.walkthrough article{gap:15px;grid-template-columns:32px 1fr}.num{width:32px;height:32px}.lookup-path{font-size:20px;gap:10px}pre{font-size:12px;padding:16px}h3{font-size:21px}}@media(max-width:420px){.setup-flow{flex-direction:column;align-items:stretch}.connector{text-align:center;transform:rotate(90deg)}.top{font-size:11px;gap:15px}.demo{padding:16px}.step-controls button{padding:7px 11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Curved network paths and travelling request/response packets. */
.demo{background:#091b20;color:#e8f3ec;border:1px solid #24454a;border-radius:22px;padding:30px;box-shadow:0 18px 50px #102a1814}.demo-top .eyebrow{color:#91aca8}.demo-top button{background:#cff39c;color:#132a25;border:0;border-radius:30px}.flow-canvas{overflow-x:auto;margin:25px -8px 5px;background-image:radial-gradient(#31505370 .7px,transparent .7px);background-size:20px 20px;border-radius:16px}.flow-canvas svg{display:block;width:100%;min-width:780px}.mac-boundary{fill:#10282b;stroke:#345452;stroke-dasharray:5 7}.boundary-label,.column-label{fill:#93b7ad;font:11px monospace;letter-spacing:1px}.tracks path{stroke:#21434a;stroke-width:13;stroke-linecap:round}.path-labels text{fill:#9dbdb7;text-anchor:middle;font:11px Arial}.network-node>rect,.network-node>circle{fill:url(#node-fill);stroke:#417169;stroke-width:1.5;transition:stroke .3s,filter .3s}.network-node.active>rect,.network-node.active>circle{stroke:#d1f59f;filter:drop-shadow(0 0 9px #abec8030)}.network-node text{fill:#ecf6ed;text-anchor:middle;font:bold 16px Arial}.network-node text.node-sub{fill:#a3c0b6;font:12px Arial}.line-icon{fill:none;stroke:#d3eee1;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.packet{fill:#d2f69d;filter:drop-shadow(0 0 4px #d2f69d88)}.packet.returning{fill:#60d4e4;filter:drop-shadow(0 0 4px #60d4e488)}.flow-legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#bad0c5;margin-bottom:20px}.flow-legend span{display:flex;gap:9px;align-items:center}.flow-legend span:last-child{margin-left:auto;color:#91aca8}.flow-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.request-dot{background:#d2f69d}.response-dot{background:#60d4e4}.demo .mac-note{color:#a1b9b0;text-align:left}.demo .explanation{border-color:#31504b}.demo .explanation>span,.demo .caption{color:#a1b9b0}.demo .explanation h3{color:#d2f69d}.demo .step-controls button{border-color:#42645b;background:transparent;color:#cdded2;border-radius:50%;width:38px;height:38px;padding:0}.demo .step-controls button[aria-pressed=true]{background:#d2f69d;color:#132a25}.demo .explanation p{color:#d0dfd7}.demo a:focus-visible,.demo button:focus-visible,.flow-canvas:focus-visible{outline:3px solid #d2f69d;outline-offset:4px}@media(max-width:800px){.demo{padding:20px}.flow-legend{gap:14px}.flow-legend span:last-child{margin-left:0}.flow-canvas svg{min-width:850px}.demo .explanation{min-height:260px}}@media(prefers-reduced-motion:reduce){.network-node>rect,.network-node>circle{transition:none}}