
:root{--paper:#f3f1e9;--ink:#202c32;--muted:#657174;--line:#d7dcd5;--accent:#ba542f;--green:#dfe8dc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.wrap{max-width:1160px;margin:auto;padding:0 38px}.top{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line);gap:22px}.brand{text-decoration:none;font-size:23px;font-weight:760;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.mark{width:27px;height:27px;display:inline-block;border:6px solid var(--ink);border-right-color:var(--accent);transform:rotate(-12deg)}nav{display:flex;gap:28px;font-size:14px}.eyebrow,.meta,.tag{font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:1.7px}.eyebrow{color:var(--accent);margin:0 0 22px}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding:84px 0 76px;align-items:center}h1{font-size:clamp(44px,5.7vw,72px);line-height:1.06;letter-spacing:-3.2px;margin:0 0 28px;font-weight:640}h2{font-size:29px;line-height:1.25;letter-spacing:-.8px;margin:0 0 17px}h3{font-size:21px;line-height:1.3;letter-spacing:-.4px;margin:10px 0}.lead{max-width:520px;font-size:18px;color:var(--muted);margin:0 0 28px}.button{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;padding:13px 21px}.button:hover{background:var(--accent);color:white}.diagram{min-height:330px;background:var(--green);padding:30px;position:relative;border:1px solid #ced9ca;display:flex;flex-direction:column;justify-content:center;gap:17px}.diagram .meta{position:absolute;top:20px;left:24px;color:#5c7061}.strip{background:#f8f8f2;border:1px solid #b9c7b5;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:14px;box-shadow:5px 5px 0 #cdd9c8}.strip:nth-of-type(2){margin-right:42px}.strip:nth-of-type(3){margin-left:30px}.strip b{font-size:21px;font-weight:500;color:var(--accent)}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--ink);padding-top:23px}.list{margin:18px 0 64px}.entry{display:grid;grid-template-columns:80px 1fr 160px;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none}.entry p{margin:7px 0 0;color:var(--muted);font-size:15px;max-width:660px}.entry .num{font:15px ui-monospace,monospace;color:var(--accent);padding-top:9px}.entry .meta{color:var(--muted);padding-top:12px;text-align:right}.note{display:grid;grid-template-columns:1fr 1.8fr;gap:60px;padding:34px 0 64px}.note p{margin:0;color:var(--muted)}footer{border-top:1px solid var(--line);padding:25px 0 35px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:24px}.article{max-width:770px;margin:70px auto 85px}.article h1{font-size:clamp(36px,4.5vw,54px);letter-spacing:-2px}.article h2{font-size:25px;margin:36px 0 12px}.article p,.article li{font-size:17px}.article .intro{font-size:20px;color:var(--muted)}.article code{font-size:.9em;background:#e5e8df;padding:2px 6px}.article .back{display:inline-block;margin-bottom:25px;font-size:13px;color:var(--muted)}.callout{border-left:3px solid var(--accent);padding:13px 22px;background:#e9ebdf;margin:28px 0}.skip{position:absolute;left:-10000px}.skip:focus{left:20px;top:10px;background:white;padding:10px;z-index:2}@media(max-width:720px){.wrap{padding:0 22px}.top{flex-wrap:wrap;padding:20px 0}nav{gap:20px}.hero{grid-template-columns:1fr;gap:30px;padding:54px 0 42px}h1{letter-spacing:-2px}.diagram{min-height:260px}.entry{grid-template-columns:35px 1fr;gap:12px}.entry .meta{grid-column:2;text-align:left;padding:0}.section-head{align-items:start;flex-direction:column;gap:0}.note{grid-template-columns:1fr;gap:10px;padding-bottom:40px}.article{margin-top:45px}footer{flex-direction:column;gap:10px}}
