.netcode-page { --article-muted:#a5acb6; }
.netcode-page .topbar { position:relative; background:var(--bg); border-bottom:1px solid var(--hair); padding:24px clamp(20px,5vw,64px); }
.netcode-page .nav a { display:inline-flex; }
.skip-link { position:absolute; top:-80px; left:20px; z-index:100; padding:12px; background:var(--lime); color:var(--bg); }
.skip-link:focus { top:12px; }
.post-hero { max-width:1240px; margin:auto; padding:80px 32px 64px; }
.post-kicker,.figure-number,.post-meta,.contents-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.post-kicker { color:var(--lime); margin-bottom:28px; }
.post-hero h1 { font-family:var(--impact); font-weight:400; text-transform:uppercase; font-size:clamp(58px,8.5vw,116px); line-height:1.03; max-width:950px; letter-spacing:-.015em; }
.post-hero h1 span { color:var(--lime); }
.post-deck { color:var(--article-muted); font-size:clamp(15px,1.5vw,19px); line-height:1.8; max-width:720px; margin:28px 0; }
.post-meta { display:flex; flex-wrap:wrap; gap:12px 28px; color:var(--article-muted); }
.post-meta span:first-child { color:var(--cyan); }
.post-layout { max-width:1240px; margin:auto; padding:0 32px 100px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; border-top:1px solid var(--hair); }
.post-contents { align-self:start; position:sticky; top:28px; padding-top:42px; }
.contents-label { color:var(--article-muted); margin-bottom:20px; }
.post-contents a { display:block; font-size:12px; line-height:1.6; padding:8px 0; color:var(--article-muted); }
.post-contents a:hover { color:var(--lime); }
.post-body { min-width:0; padding-top:36px; }
.post-body p { max-width:72ch; margin:0 0 23px; font-size:15px; line-height:1.9; color:#c6cbd1; }
.post-body strong { color:var(--ink); font-weight:700; }
.post-body h2 { font-family:var(--impact); text-transform:uppercase; font-weight:400; font-size:clamp(28px,3vw,39px); line-height:1.2; margin:54px 0 22px; scroll-margin-top:24px; }
.post-body > p:first-child { font-size:18px; color:var(--ink); }
.net-figure { margin:36px 0 48px; border:1px solid #30373b; background:var(--bg-2); padding:28px; }
.figure-number { color:var(--lime); display:block; margin-bottom:12px; }
.net-figure h3 { font-family:var(--impact); font-size:29px; line-height:1.2; font-weight:400; text-transform:uppercase; margin-bottom:10px; }
.net-figure p,.net-figure figcaption { font-size:12px; line-height:1.8; color:var(--article-muted); }
.net-figure figcaption { margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); }
.diagram-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0; }
.diagram-controls button { color:var(--ink); background:transparent; border:1px solid #59616a; padding:10px 14px; min-height:44px; font:12px var(--mono); cursor:pointer; }
.diagram-controls button[aria-pressed="true"] { background:var(--lime); color:var(--bg); border-color:var(--lime); }
.netcode-page :focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
.timeline-row { display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center; margin:24px 0; }
.lane-label { font-size:11px; line-height:1.5; color:var(--article-muted); }
.tick-track { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; position:relative; }
.tick-track::before { content:""; position:absolute; top:17px; height:1px; background:#4b5158; width:100%; }
.tick { z-index:1; border:1px solid #4b5158; background:var(--bg-2); text-align:center; padding:9px 0; color:var(--article-muted); font-size:12px; }
.tick.done { color:var(--bg); background:var(--lime); border-color:var(--lime); }
.tick.source { color:var(--bg); background:var(--cyan); border-color:var(--cyan); }
.tick.replayed { color:var(--cyan); border-color:var(--cyan); background:#132324; }
.timeline-key { display:flex; flex-wrap:wrap; gap:12px 22px; margin:12px 0 20px; font-size:11px; color:var(--article-muted); }
.timeline-key span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:8px; background:var(--lime); }
.timeline-key span:last-child::before { background:var(--cyan); }
.stage-copy { min-height:5.4em; }
.slider-label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; line-height:1.7; margin:22px 0 12px; }
.slider-label output { color:var(--lime); font-weight:700; }
.net-figure input[type="range"] { width:100%; min-height:32px; accent-color:var(--lime); cursor:pointer; }
.push-row { margin:20px 0; }
.push-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:10px; line-height:1.6; }
.push-head output { white-space:nowrap; }
.push-track { height:32px; background:#242a2e; position:relative; overflow:hidden; }
.push-fill { width:14.28%; height:100%; background:var(--red); }
.push-row.bounded .push-fill { width:10.32%; background:var(--lime); }
.push-row.bounded output { color:var(--lime); }
.push-row.unbounded output { color:#ff8390; }
.budget-note { padding:14px 16px; border-left:2px solid var(--lime); background:#17200d; }
.net-figure .budget-note p { margin:0; color:var(--ink); }
.smoothing-chart { display:block; width:100%; height:auto; margin:12px 0; overflow:visible; }
.chart-label { display:flex; justify-content:space-between; gap:10px; color:var(--article-muted); font-size:11px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px 22px; font-size:12px; margin:20px 0; }
.chart-legend .snap { color:#ff8390; }
.chart-legend .smooth { color:var(--cyan); }
.chart-values { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.chart-values div { border-top:1px solid #394147; padding-top:14px; font-size:11px; color:var(--article-muted); line-height:1.7; }
.chart-values output { display:block; font-size:22px; color:var(--ink); }
.post-end { margin-top:48px; border-top:1px solid var(--hair); padding-top:26px; display:flex; flex-wrap:wrap; gap:24px; font-size:12px; color:var(--lime); }
.netcode-page .footer { margin-top:0; }
@media(max-width:900px) { .post-layout { grid-template-columns:1fr; gap:0; } .post-contents { position:static; display:flex; flex-wrap:wrap; gap:8px 22px; padding:22px 0; border-bottom:1px solid var(--hair); } .contents-label { flex-basis:100%; margin:0; } .post-contents a { padding:0; } .post-hero { padding-top:52px; } }
@media(max-width:520px) { .post-hero { padding:40px 20px; } .post-layout { padding:0 20px 60px; } .netcode-page .brand-rev { display:none; } .netcode-page .topbar { padding:20px; } .netcode-page .nav { gap:16px; } .net-figure { padding:20px 14px; margin-inline:-6px; } .timeline-row { grid-template-columns:1fr; gap:8px; margin:18px 0; } .lane-label br { display:none; } .diagram-controls { gap:6px; } .diagram-controls button { padding:10px; font-size:11px; } .post-body p { font-size:14px; } .net-figure p { font-size:12px; } .chart-values output { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { .netcode-page { scroll-behavior:auto; } html:has(.netcode-page) { scroll-behavior:auto; } }