:root{--paper:#fafbf7;--ink:#233b31;--muted:#657069;--accent:#dc673c;--accent-ink:#a34423;--mint:#eaf0e6;--line:#233b3126;--white:#fff;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;--xs:clamp(.75rem,.72rem + .15vw,.82rem);--sm:clamp(.875rem,.84rem + .15vw,.94rem);--base:clamp(1rem,.96rem + .16vw,1.1rem);--lg:clamp(1.2rem,1.05rem + .6vw,1.5rem);--h2:clamp(1.8rem,1.2rem + 1.8vw,2.75rem);--hero:clamp(3.4rem,2rem + 3.5vw,5.6rem);--display:'Cabinet Grotesk',sans-serif;--body:'Satoshi',sans-serif}
body{background:var(--paper);color:var(--ink);font:400 var(--base)/1.65 var(--body)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:var(--s6)}.wordmark{font:800 var(--lg)/1 var(--display);letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.wordmark span{color:var(--accent-ink)}.header nav{display:flex;gap:var(--s10)}.header nav a{text-decoration:none;font-size:var(--sm)}.header nav a:hover{color:var(--accent-ink)}.edition,.eyebrow,.scene-label,.section-top>span,.card-header,.intro-line,.scene-caption{font-size:var(--xs);letter-spacing:.1em;font-weight:700}.edition{border:1px solid var(--line);padding:var(--s2) var(--s3);border-radius:4px;font-weight:500}.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:515px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}.hero-copy{padding:var(--s16) var(--s6) var(--s12) 0;position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:var(--s2);line-height:1.5}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#577b46;flex-shrink:0}h1{font:800 var(--hero)/.99 var(--display);letter-spacing:-.055em;margin:var(--s6) 0;text-wrap:balance}h1>span{color:var(--accent)}.hero-copy>p{color:var(--muted);font-size:var(--base);line-height:1.7}.hero-actions{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s8)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s6);padding:var(--s3) var(--s5);min-height:48px;font-size:var(--sm);font-weight:700;text-decoration:none;border:1px solid transparent;border-radius:5px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:var(--white)}.primary:hover,.dark:hover{background:#375545}.dark{background:var(--ink);color:var(--white)}.reading-time,.hero-footnote{font-size:var(--xs);color:var(--muted)}.hero-footnote{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s2)}.tiny-packet{color:var(--accent-ink)}.hero-art{position:relative;isolation:isolate;overflow:hidden;background:#e6eee5;min-height:480px}.town{position:absolute;height:100%;width:100%;object-fit:cover;object-position:65% center;z-index:-1;opacity:.92}.scene-label{position:absolute;left:var(--s6);top:var(--s6);font-size:var(--xs);line-height:1.7;letter-spacing:.06em}.scene-label span{display:block;font-weight:400;letter-spacing:0}.bubble{position:absolute;background:var(--white);top:30%;left:10%;width:75%;padding:var(--s5);border-radius:12px;font:700 var(--lg)/1.3 var(--display);box-shadow:0 4px 20px #233b310b;transform:rotate(-3deg)}.bubble:after{content:"";position:absolute;bottom:-12px;left:45px;border-top:14px solid white;border-right:16px solid transparent}.bubble span{display:block;font:500 var(--xs)/1.5 var(--body);letter-spacing:.055em;margin-top:var(--s2);color:var(--muted)}.cast{position:absolute;width:94%;height:auto;left:3%;bottom:16%;filter:drop-shadow(0 9px 4px #233b3118);transition:transform .35s}.hero-art:hover .cast{transform:translateY(-5px)}.packet-tag{position:absolute;bottom:15%;left:47%;background:var(--white);border:1px solid var(--line);padding:var(--s2) var(--s3);font-size:var(--xs);font-weight:700;transform:rotate(5deg);box-shadow:3px 4px 0 #233b3112}.packet-tag span{color:var(--accent-ink);margin-left:var(--s3)}.scene-caption{position:absolute;bottom:var(--s5);width:100%;text-align:center;font-size:var(--xs);letter-spacing:0;font-weight:500;color:#485d51}.intro-line{display:flex;justify-content:space-between;padding:var(--s5) 0;color:var(--muted);font-size:var(--xs)}.intro-line>span:last-child{letter-spacing:0;font-weight:400}.story{padding-top:var(--s16);padding-bottom:var(--s16)}.section-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);margin-bottom:var(--s8)}h2{font:700 var(--h2)/1.1 var(--display);letter-spacing:-.035em;text-wrap:balance}.section-top h2{font-size:var(--lg);letter-spacing:-.02em}.section-top>span{color:var(--muted);white-space:nowrap}.chapters{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line);gap:var(--s4)}.chapter{border:0;background:transparent;color:var(--muted);text-align:left;padding:var(--s4) 0 var(--s5);position:relative;font-size:var(--sm);font-weight:500;min-height:76px;line-height:1.4}.chapter>span{display:block;font-size:var(--xs);margin-bottom:var(--s2);color:var(--muted)}.chapter.active{color:var(--ink);font-weight:700}.chapter.active:after{content:"";height:3px;background:var(--accent);position:absolute;bottom:-1px;left:0;right:0}.chapter.active>span{color:var(--accent-ink)}.chapter:hover{color:var(--accent-ink)}.chapter-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--s20);padding:var(--s12) 0;align-items:center;min-height:390px}.chapter-prose>p{color:var(--muted);margin:var(--s5) 0;max-width:54ch}.character-line{display:flex;gap:var(--s3);align-items:center;font-size:var(--sm);font-weight:700;margin-bottom:var(--s5)}.avatar{display:block;width:38px;height:38px;border-radius:50%;background-color:#e7eadd;background-image:url('./assets/cast.webp');background-size:204px auto;background-repeat:no-repeat;background-position:0 0;border:1px solid var(--line)}.avatar.kyle{background-position:-43px 0}.avatar.cartman{background-position:-93px 0}.avatar.kenny{background-position:-162px 0}.character-line>span:last-child{color:var(--muted);font-weight:400}.dialogue{font-size:var(--base);color:var(--ink)!important}.inline-source{font-size:var(--xs);color:var(--muted);text-underline-offset:4px}.visual-card{background:var(--mint);padding:var(--s8);border-radius:8px;min-height:270px;display:flex;flex-direction:column;justify-content:center}.card-header{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:var(--s6)}.toggle{display:flex;gap:var(--s1);background:#233b310a;padding:var(--s1);border-radius:5px}.toggle button{background:none;border:0;border-radius:3px;padding:var(--s2) var(--s3);min-height:44px;font-size:var(--xs);color:var(--muted)}.toggle button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px #233b3110}.address-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:var(--s5) 0}.octet{text-align:center;padding:var(--s4) var(--s1);background:var(--white);border:1px solid var(--line);border-radius:4px;font:700 var(--h2)/1.1 var(--display)}.octet small{display:block;font:400 var(--xs)/1.6 var(--body);color:var(--muted);margin-top:var(--s2)}.address-row.binary .octet{font:700 var(--xs)/1.4 var(--body);padding:var(--s5) 0}.visual-caption{font-size:var(--sm);color:var(--muted);margin-top:var(--s4)}.visual-caption strong{color:var(--ink)}.story-bottom{border-top:1px solid var(--line);padding-top:var(--s6);display:flex;justify-content:space-between;gap:var(--s8);align-items:center}.story-bottom>span{font-size:var(--sm);color:var(--muted);max-width:58ch}.story-bottom>span:before{content:"↳";color:var(--accent-ink);margin-right:var(--s2)}.pager{display:flex;align-items:center;gap:var(--s6);flex-shrink:0}.text-button{background:transparent;border:0;font-size:var(--sm);color:var(--ink);min-height:44px;padding:var(--s2)}.text-button:disabled{opacity:.38}.playground{padding:var(--s20) 0;background:var(--mint);border-block:1px solid var(--line)}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s20);align-items:center}.lab-grid h2{margin:var(--s5) 0}.lab-grid p{color:var(--muted);max-width:48ch}.lab-grid label{display:flex;justify-content:space-between;margin:var(--s8) 0 var(--s3);font-size:var(--sm)}.lab-grid label strong{font-size:var(--lg)}input[type=range]{width:100%;height:28px;accent-color:var(--ink);cursor:pointer;margin:0}.range-labels{display:flex;justify-content:space-between;font-size:var(--xs);color:var(--muted)}.lab-note{font-size:var(--xs);margin-top:var(--s6)}.subnet-card{background:var(--paper);padding:var(--s8);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 24px #233b3105}.lab-ip{font:700 var(--h2)/1.3 var(--display);letter-spacing:-.025em;margin-bottom:var(--s5)}.lab-ip>span{color:var(--accent-ink)}#bit-map{display:grid;grid-template-columns:repeat(32,1fr);gap:3px}#bit-map span{height:28px;background:var(--ink);border-radius:2px}#bit-map span.host{background:#d7a487}.bit-legend{display:flex;gap:var(--s5);font-size:var(--xs);margin:var(--s3) 0 var(--s6);color:var(--muted)}.bit-legend i{display:inline-block;width:8px;height:8px;margin-right:var(--s1);background:var(--ink)}.bit-legend i.host{background:#d7a487}.network-stats{margin:0 0 var(--s5)}.network-stats>div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);font-size:var(--sm)}.network-stats dt{color:var(--muted)}.network-stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}.field-notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s20);padding-block:var(--s20)}.field-notes h2{margin:var(--s5) 0}.field-notes p{color:var(--muted);max-width:48ch;font-size:var(--sm)}.source-list>a{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line);font-size:var(--sm);text-decoration:none}.source-list>a:first-child{border-top:1px solid var(--line)}.source-list b{font-weight:500;display:inline-block;margin-left:var(--s6)}.source-list>a:hover{color:var(--accent-ink)}details{margin-top:var(--s5);font-size:var(--xs);color:var(--muted)}summary{cursor:pointer;min-height:44px}details p{margin:var(--s3) 0}details p.full-urls{font-size:var(--xs);overflow-wrap:anywhere;user-select:all}.footer{border-top:1px solid var(--line);padding:var(--s8) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--s8)}.footer p,.footer>span:last-child{font-size:var(--xs);color:var(--muted)}.footer .wordmark{font-size:var(--base)}.route{display:flex;align-items:center;justify-content:space-between;position:relative;gap:var(--s2);padding:var(--s6) 0}.route:before{content:"";position:absolute;top:48%;height:1px;left:10%;right:10%;border-top:2px dashed #233b3140}.route-node{position:relative;text-align:center;background:var(--paper);border:1px solid var(--line);padding:var(--s3);border-radius:5px;min-width:75px;font-size:var(--xs);z-index:1;transition:background .3s}.route-node.current{background:var(--ink);color:white}.route-node strong{display:block;font-size:var(--sm)}.route-node small{font-size:var(--xs)}.route-controls{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s4)}.ttl-label{font-size:var(--xs);font-weight:700}.packet-table{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}.packet-table div{padding:var(--s3);background:var(--paper);font-size:var(--xs);border:1px solid var(--line);border-radius:3px}.packet-table strong{display:block;font-size:var(--sm)}.packet-table .wide{grid-column:span 2}.payload{background:#d5dfcf!important}.private-range{font-size:var(--sm);padding:var(--s3) 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3)}.nat-line{font-size:var(--sm);background:var(--paper);padding:var(--s4);margin:var(--s2) 0;border-radius:4px;overflow-wrap:anywhere}.nat-line span{font-size:var(--xs);color:var(--muted);display:block}.quiz-options{display:grid;gap:var(--s2);margin:var(--s4) 0}.quiz-options button{background:var(--paper);border:1px solid var(--line);text-align:left;min-height:48px;padding:var(--s3);font-size:var(--sm);border-radius:4px}.quiz-options button.selected{border-color:var(--ink);background:#d4e2ce}.quiz-feedback{font-size:var(--sm);min-height:52px}.visual-card>label{font-size:var(--sm)}.destination{width:100%;min-height:44px;padding:var(--s2);border:1px solid var(--line);color:var(--ink);background:var(--paper);margin-top:var(--s2);border-radius:4px}.mini-network{font:700 var(--lg)/1.5 var(--display);padding:var(--s5) 0}.mini-network span{color:var(--accent-ink)}.chapter-content.enter{animation:chapter-in .3s ease-out}@keyframes chapter-in{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.bubble{top:25%}.scene-caption{bottom:0;padding:var(--s2);background:var(--paper);color:var(--muted)}
@media(min-width:1500px){.hero{min-height:570px}.hero-copy{padding-top:var(--s20)}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header nav{gap:var(--s6)}.hero-copy{padding-block:var(--s12)}.hero-actions{align-items:flex-start;flex-direction:column;gap:var(--s3)}.hero-art{min-height:490px}.chapter-content,.lab-grid,.field-notes{gap:var(--s10)}.chapters{gap:var(--s2)}.chapter{font-size:var(--xs)}.story-bottom>span{max-width:40ch}.bubble{left:7%;width:86%;padding:var(--s4)}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:80px;gap:var(--s3)}.header .wordmark{font-size:var(--base)}.header nav{gap:var(--s3)}.header nav a{font-size:var(--xs);white-space:nowrap}.edition{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:var(--s10) 0}.hero-copy .eyebrow{font-size:var(--xs);letter-spacing:.055em}h1{font-size:var(--hero);margin-block:var(--s5)}.hero-actions{flex-direction:row;align-items:center;gap:var(--s4)}.reading-time{max-width:100px}.hero-art{min-height:340px}.bubble{top:20%;left:12%;width:76%;font-size:var(--lg)}.cast{width:88%;left:6%;bottom:17%}.packet-tag{bottom:15%}.scene-label{top:var(--s4);left:var(--s4)}.scene-caption{bottom:0}.intro-line{padding-block:var(--s4);line-height:1.5}.intro-line>span:first-child{max-width:200px;font-size:var(--xs);letter-spacing:.055em}.intro-line>span:last-child{display:none}.story{padding-top:var(--s8);padding-bottom:var(--s10)}.section-top{align-items:flex-start;gap:var(--s5);margin-bottom:var(--s4)}.section-top h2{font-size:var(--lg);max-width:220px}.section-top>span{font-size:var(--xs);max-width:80px;white-space:normal;text-align:right}.chapters{grid-template-columns:repeat(3,1fr);column-gap:var(--s4)}.chapter{min-height:72px;padding:var(--s3) 0;font-size:var(--xs)}.chapter>span{margin-bottom:var(--s1)}.chapter-content,.lab-grid,.field-notes{grid-template-columns:1fr;gap:var(--s8)}.chapter-content{padding-block:var(--s8)}.chapter-prose>p{margin-block:var(--s4)}.visual-card{padding:var(--s5);min-height:260px}.story-bottom{flex-direction:column;align-items:stretch;gap:var(--s5)}.story-bottom>span{max-width:none}.pager{justify-content:space-between}.playground{padding-block:var(--s12)}.subnet-card{padding:var(--s5)}#bit-map{gap:2px}#bit-map span{height:22px}.lab-ip{font-size:var(--h2)}.network-stats>div{font-size:var(--xs)}.field-notes{padding-block:var(--s12)}.source-list b{margin-left:var(--s3)}.footer{flex-wrap:wrap;padding-block:var(--s6);gap:var(--s5)}.footer p{order:3;flex-basis:100%}.footer>span:last-child{margin-left:auto}.route-node{min-width:0;padding:var(--s3) var(--s2)}.route-node strong{font-size:var(--xs)}.desktop{display:none}}