@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.12tyk43_3sh9u.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.0jzbimsg8vl84.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.0-wfv7uh4i7h9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.0nx0ww8fni_q3.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_a71539c9-module__T19VSG__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_a71539c9-module__T19VSG__variable{--font-geist-sans:"Geist", "Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_8d43a2aa-module__8Li5zG__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_8d43a2aa-module__8Li5zG__variable{--font-geist-mono:"Geist Mono", "Geist Mono Fallback"}
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.block{display:block}.contents{display:contents}.inline{display:inline}.resize{resize:both}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--cream:#fff3d9;--paper:#fffdf7;--ink:#10244f;--blue:#1647d8;--yellow:#ffd84d;--coral:#ff6b57;--mint:#63d6ac;--sky:#a8ddff;--line:#17366f;--pale-blue:#eef3ff;--pale-mint:#e8fff5;--soft-shadow:0 14px 0 #10244f1a;--display:"Arial Rounded MT Bold", "Avenir Next", var(--font-geist-sans), system-ui, sans-serif;--body:var(--font-geist-sans), "Avenir Next", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{background:var(--cream);color:var(--ink);font-family:var(--body);margin:0}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--coral);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.48}.site{min-height:100svh;position:relative;overflow-x:clip}.page-dots{z-index:-2;pointer-events:none;opacity:.18;background-image:radial-gradient(var(--coral) 1.5px, transparent 1.5px);background-size:30px 30px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 76%);mask-image:linear-gradient(#000,#0000 76%)}.skip-link{z-index:100;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:12px;padding:12px 16px;font-weight:800;position:fixed;top:-80px;left:18px}.skip-link:focus{top:18px}.site-header,.site-shell,.site-footer{width:min(1440px,100% - 56px);margin-inline:auto}.site-header{border-bottom:2px solid #10244f29;justify-content:space-between;align-items:center;gap:24px;min-height:78px;display:flex}.brand{color:var(--ink);text-transform:uppercase;font-family:var(--display);letter-spacing:.09em;align-items:center;gap:12px;font-size:14px;font-weight:900;text-decoration:none;display:inline-flex}.brand-face{border:3px solid var(--ink);background:var(--yellow);width:40px;height:40px;box-shadow:3px 3px 0 var(--ink);border-radius:12px;flex:none;position:relative;transform:rotate(-5deg)}.brand-face:before,.packet-face:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px;position:absolute;box-shadow:11px 0}.brand-face:before{top:10px;left:9px}.brand-face:after,.packet-face:after{content:"";border-bottom:3px solid;border-radius:0 0 20px 20px;position:absolute}.brand-face:after{width:14px;height:8px;top:16px;left:10px}.header-actions{align-items:center;gap:12px;display:flex}.beginner-pill,.motion-toggle{border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800}.site-footer a{color:var(--blue);text-decoration:none}.site-footer a:hover{text-decoration:underline}.beginner-pill{box-shadow:3px 3px 0 var(--ink)}.motion-toggle{cursor:pointer;min-height:44px}.motion-toggle[aria-pressed=true]{background:var(--coral);box-shadow:3px 3px 0 var(--ink)}.chapter-progress{z-index:30;min-height:72px;color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fff3d9f0;border-bottom:2px solid #10244f24;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:22px;padding:10px max(28px,50vw - 720px);display:grid;position:sticky;top:0}.progress-label{gap:2px;display:grid}.progress-label span{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900}.progress-label strong{font-size:12px}.progress-track{min-width:0;position:relative}.chapter-progress ol{grid-template-columns:repeat(8,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;position:relative}.journey-progress-marker{z-index:4;left:calc((var(--active-chapter) * 12.5%) + 6.25%);pointer-events:none;place-items:center;transition:left .42s cubic-bezier(.2,.75,.25,1);display:grid;position:absolute;top:-9px;transform:translate(-50%)}.journey-progress-marker .packet-face{background:var(--coral);width:19px;height:19px;box-shadow:2px 2px 0 var(--ink);border-width:2px;border-radius:6px 6px 8px 8px}.journey-progress-marker .packet-face:before{width:3px;height:3px;top:4px;left:4px;box-shadow:6px 0}.journey-progress-marker .packet-face:after{border-bottom-width:1px;width:7px;height:4px;top:8px;left:4px}.chapter-progress ol:before{content:"";border-top:3px dotted #10244f57;position:absolute;top:17px;left:5%;right:5%}.chapter-progress li{text-align:center;min-width:0;position:relative}.chapter-progress a{min-height:48px;color:var(--ink);justify-items:center;gap:4px;font-size:11px;font-weight:800;text-decoration:none;display:grid}.chapter-progress b{border:2px solid var(--ink);background:var(--paper);border-radius:50%;place-items:center;width:34px;height:34px;transition:transform .18s,background .18s;display:grid;position:relative}.chapter-progress .active b{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink);transform:translateY(-2px)}.chapter-progress .passed b{background:var(--mint)}.hero{grid-template-columns:1.2fr .8fr;align-items:end;gap:68px;padding:74px 0 42px;display:grid;position:relative}.hero:before,.hero:after{content:"";z-index:-1;border:3px solid var(--ink);border-radius:50%;position:absolute}.hero:before{background:var(--yellow);width:230px;height:230px;top:12px;right:-135px}.hero:after{background:var(--coral);width:82px;height:82px;bottom:30px;left:-58px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:900;display:flex}.eyebrow i{border:2px solid var(--ink);background:var(--coral);border-radius:99px;width:30px;height:9px}.hero h1{max-width:920px;font-family:var(--display);letter-spacing:-.07em;margin:18px 0 0;font-size:clamp(64px,7.2vw,116px);font-weight:950;line-height:.86}.hero h1 span{color:var(--blue);z-index:0;display:inline-block;position:relative}.hero h1 span:after{content:"";z-index:-1;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;height:20px;position:absolute;bottom:-8px;left:-1%;right:-3%;transform:rotate(-2deg)}.hero-intro{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--soft-shadow);border-radius:30px;padding:28px}.hero-intro>p{margin:0 0 22px;font-size:clamp(18px,1.7vw,24px);font-weight:650;line-height:1.38}.hero-cta-row{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.hero-cta-row>span{font-size:12px;font-weight:800}.primary-button,.small-button{border:3px solid var(--ink);min-height:44px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;font-family:var(--display);border-radius:15px;justify-content:center;align-items:center;font-weight:900;text-decoration:none;transition:transform .16s,box-shadow .16s;display:inline-flex}.primary-button{color:#fff;background:var(--blue);gap:12px;padding:13px 18px}.primary-button em{width:27px;height:27px;color:var(--ink);background:var(--yellow);border-radius:50%;place-items:center;font-style:normal;display:grid}.small-button{padding:9px 13px;font-size:12px}.primary-button:hover,.small-button:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.yellow-button{background:var(--yellow)}.coral-button{background:var(--coral)}.blue-button{color:#fff;background:var(--blue)}.route-lab{border:3px solid var(--ink);background:var(--paper);box-shadow:0 16px 0 var(--blue);isolation:isolate;border-radius:40px;padding:28px 30px 24px;position:relative}.route-lab:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background-image:radial-gradient(#1647d829 1.4px,#0000 1.4px);background-size:22px 22px;position:absolute;inset:0}.request-thread-shell{background:linear-gradient(135deg, var(--paper), var(--pale-mint));border:3px solid var(--ink);box-shadow:0 14px 0 var(--coral);border-radius:36px;margin:80px 0 92px;padding:clamp(24px,4vw,48px)}.playground-wrap{margin:104px 0 0;scroll-margin-top:96px}.lab-heading,.play-card-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.lab-kicker,.mini-kicker{color:var(--blue);text-transform:uppercase;letter-spacing:.12em;margin:0 0 4px;font-size:11px;font-weight:900}.lab-heading h2,.play-card-heading h3{font-family:var(--display);letter-spacing:-.035em;margin:0}.lab-heading h2{font-size:clamp(24px,2.6vw,38px)}.play-card-heading h3{font-size:clamp(18px,1.8vw,25px)}.lab-actions,.button-pair{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.live-pill{border:2px solid var(--ink);background:var(--pale-mint);text-transform:uppercase;border-radius:999px;align-items:center;gap:8px;min-height:40px;padding:8px 12px;font-size:11px;font-weight:900;display:inline-flex}.live-pill i{border:1px solid var(--ink);background:var(--mint);border-radius:50%;width:9px;height:9px;animation:1.4s ease-in-out infinite livePulse}.hero-route{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:0;min-height:270px;margin:18px 0 8px;padding:26px 0 0;list-style:none;display:grid}.route-stage{grid-template-columns:minmax(108px,1fr) minmax(28px,.45fr);align-items:center;min-width:0;display:grid}.route-stage:last-child{grid-template-columns:minmax(108px,1fr)}.route-station{min-width:0;min-height:210px;color:var(--ink);cursor:pointer;background:0 0;border:0;align-content:center;justify-items:center;display:grid;position:relative}.speech-bubble{border:2px solid var(--ink);background:var(--paper);max-width:138px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;border-radius:9px;margin-bottom:12px;padding:6px 9px;font-size:10px;font-weight:900;transform:rotate(-2deg)}.station-tile{aspect-ratio:1.15;border:3px solid var(--ink);width:min(126px,90%);box-shadow:6px 6px 0 var(--ink);border-radius:28px;place-items:center;transition:transform .2s;display:grid}.route-station:hover .station-tile,.route-station[aria-pressed=true] .station-tile{transform:translateY(-5px)rotate(-2deg)}.station-yellow .station-tile{background:var(--yellow)}.station-paper .station-tile{background:var(--paper)}.station-coral .station-tile{background:var(--coral)}.station-sky .station-tile{background:var(--sky)}.station-label{border:2px solid var(--ink);background:var(--paper);border-radius:999px;margin-top:16px;padding:6px 11px;font-size:12px;font-weight:900}.route-connector{border-top:4px dotted var(--line);width:100%;height:70px;display:block;position:relative}.route-connector:after{content:"›";font-family:var(--display);font-size:30px;font-weight:900;position:absolute;top:-24px;right:-2px}.packet-face{width:34px;height:34px;color:var(--ink);border:3px solid var(--ink);background:var(--yellow);border-radius:11px 11px 15px 15px;display:inline-block;position:relative}.packet-face:before{width:4px;height:4px;top:7px;left:7px;box-shadow:9px 0}.packet-face:after{border-bottom-width:2px;width:11px;height:6px;top:13px;left:8px}.hero-packet{animation:2.5s cubic-bezier(.45,0,.3,1) both heroPacket;position:absolute;top:-19px;left:-4px}.packet-delay-1{background:var(--coral);animation-delay:.22s}.packet-delay-2{background:var(--sky);animation-delay:.44s}.packet-delay-3{background:var(--mint);animation-delay:.66s}.status-strip,.result-line{border:2px solid var(--ink);background:var(--pale-blue);color:var(--ink);border-radius:14px;align-items:center;gap:12px;margin:0;font-size:13px;font-weight:650;line-height:1.45;display:flex}.status-strip{padding:11px 14px}.status-strip strong,.result-line strong{color:var(--blue);flex:none}.icon-laptop{background:var(--paper);border:4px solid;border-radius:8px;place-items:center;width:78px;height:54px;display:grid;position:relative}.icon-laptop:after{content:"";background:currentColor;border-radius:3px;height:8px;position:absolute;bottom:-13px;left:-10px;right:-10px}.icon-laptop span{font-size:12px;font-weight:900}.icon-wifi{width:78px;height:64px;position:relative}.icon-wifi i{border:5px solid;border-bottom:0;border-radius:80px 80px 0 0;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.icon-wifi i:first-child{width:76px;height:45px}.icon-wifi i:nth-child(2){width:50px;height:31px}.icon-wifi i:nth-child(3){width:25px;height:17px}.icon-wifi b{background:currentColor;border-radius:50%;width:8px;height:8px;position:absolute;bottom:1px;left:50%;transform:translate(-50%)}.icon-dns{background:var(--paper);border:3px solid;border-radius:12px;place-items:center;gap:2px;width:88px;height:72px;display:grid;transform:rotate(3deg);box-shadow:-8px 7px #10244f3b}.icon-dns strong{font-family:var(--display);font-size:22px}.icon-dns small{font-size:8px;font-weight:800}.icon-router{width:94px;height:74px;position:relative}.icon-router i{border:3px solid var(--ink);background:var(--yellow);border-radius:50%;place-items:center;width:62px;height:62px;font-size:27px;font-style:normal;font-weight:900;display:grid;position:absolute}.icon-router i:first-child{top:0;left:0}.icon-router i:last-child{background:var(--coral);bottom:0;right:0}.icon-server{gap:7px;width:82px;display:grid}.icon-server i{background:var(--paper);border:3px solid;border-radius:6px;height:19px;position:relative}.icon-server i:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px;position:absolute;top:5px;left:8px;box-shadow:11px 0}.chapter-section{--chapter-bg:var(--paper);--chapter-fg:var(--ink);--chapter-shadow:var(--blue);min-height:570px;color:var(--chapter-fg);background:var(--chapter-bg);border:3px solid var(--ink);box-shadow:0 16px 0 var(--chapter-shadow);isolation:isolate;border-radius:44px;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);align-items:center;gap:clamp(34px,5vw,82px);margin:86px 0;padding:clamp(34px,4.5vw,70px);display:grid;position:relative}.chapter-section:before{content:"";z-index:-1;border:3px solid var(--ink);background:var(--yellow);opacity:.5;border-radius:50%;width:150px;height:150px;position:absolute;top:-55px;right:-50px}.chapter-blue{--chapter-bg:var(--blue);--chapter-fg:#fff;--chapter-shadow:var(--coral)}.chapter-sky{--chapter-bg:var(--sky);--chapter-shadow:var(--blue)}.chapter-yellow{--chapter-bg:var(--yellow);--chapter-shadow:var(--coral)}.chapter-coral{--chapter-bg:var(--coral);--chapter-shadow:var(--yellow)}.chapter-mint{--chapter-bg:var(--mint);--chapter-shadow:var(--blue)}.chapter-copy{z-index:1;position:relative}.chapter-tag{color:var(--ink);background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);text-transform:uppercase;letter-spacing:.08em;border-radius:999px;margin-bottom:16px;padding:7px 11px;font-size:11px;font-weight:900;display:inline-block}.chapter-blue .chapter-tag{background:var(--paper)}.chapter-copy h2,.finish-panel h2{font-family:var(--display);letter-spacing:-.055em;margin:0;font-size:clamp(44px,5vw,76px);font-weight:950;line-height:.95}.chapter-copy>p:not(.takeaway){margin:24px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:560;line-height:1.55}.takeaway{border:2px solid;border-radius:15px;margin:24px 0 0;padding:14px 16px;font-size:13px;font-weight:700;line-height:1.45}.play-card{min-width:0;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);z-index:1;border-radius:30px;padding:clamp(22px,3vw,34px);position:relative}.play-card:before{content:"";z-index:-1;pointer-events:none;border-radius:inherit;opacity:.12;background-image:radial-gradient(var(--blue) 1.2px, transparent 1.2px);background-size:20px 20px;position:absolute;inset:0}.result-line{margin-top:24px;padding:11px 13px}.hello-scene{grid-template-columns:minmax(105px,.7fr) minmax(100px,1.5fr) minmax(105px,.7fr);align-items:center;gap:12px;margin-top:36px;display:grid}.device-tile{border:3px solid var(--ink);background:var(--yellow);min-height:130px;box-shadow:5px 5px 0 var(--ink);text-align:center;border-radius:24px;align-content:center;place-items:center;gap:18px;padding:14px;font-size:12px;font-weight:900;display:grid}.mint-device{background:var(--mint)}.phone-shape{border:4px solid var(--ink);background:var(--paper);border-radius:11px;width:42px;height:68px;position:relative}.phone-shape:after{content:"";background:var(--ink);border-radius:9px;width:10px;height:3px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.screen-shape{border:4px solid var(--ink);background:var(--paper);border-radius:8px;width:68px;height:48px;position:relative}.screen-shape:after{content:"";background:var(--ink);border-radius:3px;height:6px;position:absolute;bottom:-10px;left:-8px;right:-8px}.hello-track,.local-path{border-top:4px dotted var(--ink);min-width:0;position:relative}.hello-track:after,.local-path:after{content:"›";font-size:30px;font-weight:900;position:absolute;top:-24px;right:-2px}.hello-track .packet-face{position:absolute;top:-18px;left:0}.hello-moving{animation:1.35s ease-in-out both messageTravel}.segmented,.use-case-buttons{flex-wrap:wrap;gap:8px;display:flex}.segmented button,.use-case-buttons button,.web-stepper button,.step-controls button{border:2px solid var(--ink);background:var(--paper);min-height:44px;color:var(--ink);cursor:pointer;border-radius:12px;font-weight:850}.segmented button,.use-case-buttons button{padding:8px 12px}.segmented button[aria-pressed=true],.use-case-buttons button[aria-pressed=true]{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink)}.local-map{grid-template-columns:minmax(90px,.85fr) minmax(80px,1fr) minmax(90px,.85fr) minmax(80px,1fr) minmax(90px,.85fr);align-items:center;gap:8px;margin-top:34px;display:grid}.local-node{border:3px solid var(--ink);min-height:142px;box-shadow:5px 5px 0 var(--ink);border-radius:24px;align-content:center;place-items:center;gap:18px;font-size:12px;display:grid}.device-node{background:var(--yellow)}.router-node{background:var(--sky)}.cloud-node{background:var(--mint)}.local-path{place-items:center;display:grid}.local-path>span:not(.packet-face){white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:900;position:absolute;top:14px}.local-map.cable .local-path:first-of-type{border-top-style:solid}.local-map.wifi .local-path:first-of-type{border-top-style:double;border-top-width:7px}.local-packet{animation:1.5s ease-in-out both pathTravel;position:absolute;top:-18px;left:0}.local-packet.second{background:var(--mint);animation-delay:.38s}.cloud-shape{border:4px solid var(--ink);background:var(--paper);border-radius:40px;width:82px;height:42px;position:relative}.cloud-shape:before,.cloud-shape:after{content:"";border:4px solid var(--ink);background:var(--paper);border-bottom:0;border-radius:50% 50% 0 0;position:absolute}.cloud-shape:before{width:34px;height:28px;top:-20px;left:8px}.cloud-shape:after{width:28px;height:22px;top:-14px;right:6px}.packet-message{justify-content:center;align-items:center;gap:14px;margin:30px 0 22px;display:flex}.packet-message span{border:3px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);font-family:var(--display);letter-spacing:.08em;border-radius:14px;padding:10px 16px;font-size:24px}.packet-message i{text-transform:uppercase;font-size:11px;font-style:normal;font-weight:900}.packet-lane{border:3px dashed var(--ink);background:var(--pale-blue);border-radius:22px;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;min-height:108px;padding:20px;display:flex}.letter-packet{border:3px solid var(--ink);width:58px;height:66px;box-shadow:4px 4px 0 var(--ink);font-family:var(--display);border-radius:13px 13px 18px 18px;place-items:center;font-size:25px;animation:.7s cubic-bezier(.2,.8,.3,1) both packetArrive;display:grid;position:relative}.letter-packet b{font-size:9px;position:absolute;top:3px;left:5px}.letter-packet:nth-child(2){animation-delay:80ms}.letter-packet:nth-child(3){animation-delay:.16s}.letter-packet:nth-child(4){animation-delay:.24s}.letter-packet:nth-child(5){animation-delay:.32s}.letter-packet:nth-child(6){animation-delay:.4s}.letter-packet:nth-child(7){animation-delay:.48s}.packet-color-0{background:var(--yellow)}.packet-color-1{background:var(--coral)}.packet-color-2{background:var(--sky)}.packet-color-3{background:var(--mint)}.letter-packet.missing{opacity:.22;box-shadow:none;text-decoration:line-through;transform:translateY(30px)rotate(12deg)}.dns-flow{grid-template-columns:minmax(130px,1fr) 90px minmax(150px,1fr);align-items:center;gap:24px;margin-top:38px;display:grid;position:relative}.dns-flow:before,.dns-flow:after{content:"";border-top:4px dotted var(--ink);z-index:-1;position:absolute;top:50%}.dns-flow:before{width:24%;left:22%}.dns-flow:after{width:24%;right:22%}.dns-value{border:3px solid var(--ink);background:var(--yellow);min-height:120px;box-shadow:5px 5px 0 var(--ink);text-align:center;border-radius:22px;align-content:center;place-items:center;gap:10px;padding:16px;display:grid}.dns-value small{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:900}.dns-value strong{overflow-wrap:anywhere;font-size:clamp(14px,1.4vw,19px)}.ip-value{background:var(--mint)}.dns-book{border:3px solid var(--ink);background:var(--coral);width:90px;height:100px;box-shadow:6px 6px 0 var(--ink);font-family:var(--display);border-radius:13px 22px 22px 13px;place-items:center;font-size:20px;display:grid;position:relative}.dns-book i{border:3px solid var(--ink);background:var(--yellow);border-radius:50%;place-items:center;width:38px;height:38px;font-style:normal;display:grid;position:absolute;top:-14px;right:-12px}.dns-flow.resolved .dns-book i{background:var(--mint)}.dns-flow.resolved .dns-book i:before{content:"✓";font-style:normal}.dns-flow.resolved .dns-book i{font-size:0}.dns-flow.resolved .dns-book i:before{font-size:18px}.dns-packet{background:var(--sky);animation:1.35s ease-in-out both dnsLookup;position:absolute;top:calc(50% - 17px);left:20%}.route-map{grid-template-columns:86px minmax(0,1fr) 86px;align-items:center;gap:40px;margin-top:30px;display:grid}.map-endpoint{border:3px solid var(--ink);min-height:88px;box-shadow:4px 4px 0 var(--ink);background:var(--yellow);font-family:var(--display);border-radius:22px;place-items:center;display:grid}.end-point{background:var(--mint)}.path-stack{grid-template-columns:70px minmax(0,1fr);align-items:center;gap:22px 14px;display:grid}.route-junction{z-index:2;grid-area:1/1/span 2;align-self:stretch;place-items:center;display:grid;position:relative}.route-junction:before{content:"";background:var(--ink);clip-path:polygon(0 38%,82% 38%,82% 0,100% 50%,82% 100%,82% 62%,0 62%);z-index:-1;width:calc(50% + 40px);height:14px;position:absolute;top:calc(50% - 7px);right:50%}.route-junction:after{display:none}.direct-path{--route-color:var(--blue);--route-y:50px;grid-area:1/2}.detour-path{--route-color:var(--coral);--route-y:-50px;grid-area:2/2}.route-junction small{text-align:center;width:80px;font-size:8px;font-weight:900;position:absolute;top:calc(50% + 28px);left:50%;transform:translate(-50%)}.shared-router{background:var(--sky);box-shadow:3px 3px 0 var(--ink)}.path-stack .map-path:before{content:"";background:var(--route-color);clip-path:polygon(0 38%,82% 38%,82% 0,100% 50%,82% 100%,82% 62%,0 62%);transform-origin:100%;border:0;width:70px;height:14px;position:absolute;top:calc(50% - 7px);right:100%}.map-path{border-top:0;justify-content:space-evenly;align-items:center;min-height:78px;display:flex;position:relative}.direct-path:before{transform:rotate(-45deg)}.detour-path:before{transform:rotate(45deg)}.map-path:after{content:"";background:var(--route-color);clip-path:polygon(0 38%,82% 38%,82% 0,100% 50%,82% 100%,82% 62%,0 62%);transform-origin:0;width:98px;height:14px;position:absolute;top:calc(50% - 7px);left:100%}.direct-path:after{transform:rotate(31deg)}.detour-path:after{transform:rotate(-31deg)}.map-path>.path-name{border:2px solid var(--ink);background:var(--paper);white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:900;position:absolute;top:-30px;left:50%;transform:translate(-50%)}.map-router{border:3px solid var(--ink);background:var(--sky);border-radius:50%;place-items:center;width:46px;height:46px;font-style:normal;font-weight:900;display:grid}.detour-path .map-router{background:var(--coral)}.map-packet{position:absolute;top:calc(50% - 17px);left:-58px}.route-map.direct .direct-path .map-packet,.route-map.detour .detour-path .map-packet{animation:1.45s ease-in-out both pathTravel}.route-map.direct .detour-path,.route-map.detour .direct-path{opacity:.55}.route-map.direct .detour-path .map-packet,.route-map.detour .direct-path .map-packet{display:none}.blocked-mark{border:2px solid var(--ink);background:var(--coral);border-radius:9px;padding:5px 9px;font-size:10px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-4deg)}.route-map.detour .blocked-mark{display:block}.use-case-buttons{margin:26px 0 22px}.protocol-lanes{gap:18px;display:grid}.protocol-lane{border:3px solid var(--ink);background:var(--pale-blue);opacity:.58;border-radius:18px;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:18px;padding:14px;display:grid}.protocol-lane.recommended{opacity:1;box-shadow:5px 5px 0 var(--ink)}.protocol-lane>strong{font-family:var(--display);font-size:20px}.protocol-lane small{font-family:var(--body);margin-top:3px;font-size:10px;font-weight:800;display:block}.protocol-track{border-top:4px dotted var(--ink);min-width:0;height:54px;position:relative}.mini-packet{border:3px solid var(--ink);background:var(--yellow);border-radius:11px;place-items:center;width:38px;height:38px;font-size:11px;font-weight:900;animation:1.55s ease-in-out both protocolRace;display:grid;position:absolute;top:-20px;left:0}.udp-packet{background:var(--coral)}.mini-packet.p-2{animation-delay:.12s}.mini-packet.p-3{animation-delay:.24s}.mini-packet.p-4{animation-delay:.36s}.tcp-lane .p-3{animation-duration:2s}.udp-lane .p-3{opacity:.35;border-style:dashed}.web-stepper{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:26px 0;padding:0;list-style:none;display:grid}.web-stepper button{place-items:center;gap:5px;width:100%;min-width:0;padding:8px 5px;font-size:10px;display:grid}.web-stepper b{background:var(--pale-blue);border-radius:50%;place-items:center;width:25px;height:25px;display:grid}.web-stepper .active button{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink)}.web-stepper .active b{color:var(--ink);background:var(--yellow)}.web-stepper .complete button{background:var(--mint)}.browser-scene{grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);align-items:stretch;gap:22px;display:grid}.browser-window{border:3px solid var(--ink);background:var(--paper);min-height:265px;box-shadow:6px 6px 0 var(--ink);border-radius:22px;overflow:hidden}.browser-bar{border-bottom:3px solid var(--ink);background:var(--sky);align-items:center;gap:7px;min-height:44px;padding:8px 12px;display:flex}.browser-bar i{border:2px solid var(--ink);background:var(--coral);border-radius:50%;width:10px;height:10px}.browser-bar i:nth-child(2){background:var(--yellow)}.browser-bar i:nth-child(3){background:var(--mint)}.browser-bar span{border:2px solid var(--ink);background:var(--paper);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;min-width:0;margin-left:8px;padding:5px 10px;font-size:10px;font-weight:800;overflow:hidden}.browser-page{background:linear-gradient(135deg, var(--paper), var(--pale-blue));align-content:center;gap:11px;min-height:218px;padding:24px;display:grid;position:relative}.browser-page>b{border:2px solid var(--ink);background:var(--yellow);border-radius:8px;padding:5px 8px;font-size:10px;position:absolute;top:16px;right:18px}.page-heading,.page-line,.page-cards i{border:2px solid var(--ink);background:var(--blue);transform-origin:0;border-radius:999px;animation:.55s ease-out both pageBuild;display:block}.page-heading{width:58%;height:22px}.page-line{background:var(--sky);width:66%;height:10px;animation-delay:.12s}.page-line.long{width:86%}.page-cards{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:7px;display:grid}.page-cards i{background:var(--yellow);border-radius:12px;height:62px;animation-delay:.22s}.page-cards i:nth-child(2){background:var(--coral);animation-delay:.3s}.page-cards i:nth-child(3){background:var(--mint);animation-delay:.38s}.web-step-detail{border:3px solid var(--ink);background:var(--yellow);border-radius:20px;padding:20px}.web-step-detail>span{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:900}.web-step-detail h3{font-family:var(--display);margin:8px 0;font-size:23px}.web-step-detail p{margin:0;font-size:13px;font-weight:650;line-height:1.5}.step-controls{gap:8px;margin-top:22px;display:flex}.step-controls button{flex:1;padding:8px;font-size:11px}.performance-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;display:grid}.performance-grid label{border:2px solid var(--ink);background:var(--pale-blue);border-radius:15px;gap:9px;padding:14px;font-size:11px;font-weight:900;display:grid}.performance-grid output{font-family:var(--display);font-size:19px}.performance-grid input[type=range]{width:100%;min-height:32px;accent-color:var(--blue);cursor:pointer}.quality-scene{grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:20px;margin-top:22px;display:grid}.quality-browser{border:3px solid var(--ink);background:var(--paper);height:108px;box-shadow:5px 5px 0 var(--ink);border-radius:18px;position:relative;overflow:hidden}.quality-browser:before{content:"Teaching-model traffic…";font-size:10px;font-weight:900;position:absolute;top:14px;left:16px}.quality-flow-note{z-index:3;font-size:8px;font-weight:800;position:absolute;top:32px;left:16px}.quality-fill{background:var(--mint);border-top:3px solid var(--ink);height:14px;transition:width .24s;position:absolute;bottom:0;left:0}.quality-packet{position:absolute;top:48px;transform:scale(.78)}.quality-packet.q1{background:var(--yellow);left:14%}.quality-packet.q2{background:var(--coral);left:46%}.quality-packet.q3{background:var(--sky);left:77%}.quality-packet.lost{opacity:.18;transform:translateY(22px)rotate(15deg)scale(.78)}.quality-result{border:3px solid var(--ink);background:var(--mint);min-height:108px;box-shadow:5px 5px 0 var(--ink);text-align:center;border-radius:18px;align-content:center;place-items:center;gap:2px;padding:12px;display:grid}.quality-result span{text-transform:uppercase;letter-spacing:.06em;font-size:9px;font-weight:900}.quality-result strong{font-family:var(--display);font-size:29px}.quality-result b{font-size:11px}.quality-result small{max-width:150px;font-size:8px;font-weight:750;line-height:1.25}.finish-panel{border:3px solid var(--ink);background:var(--blue);color:#fff;max-width:1120px;box-shadow:0 16px 0 var(--coral);text-align:center;border-radius:44px;justify-items:center;margin:110px auto 80px;padding:clamp(38px,6vw,80px);display:grid;position:relative}.finish-panel .eyebrow i{background:var(--yellow)}.finish-panel h2{max-width:860px;margin-top:18px}.finish-panel>p:not(.eyebrow){max-width:760px;margin:25px 0 30px;font-size:18px;line-height:1.55}.finish-burst{border:3px solid var(--ink);background:var(--yellow);width:76px;height:76px;color:var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:50%;place-items:center;font-size:30px;display:grid;position:absolute;top:-38px;right:7%;transform:rotate(8deg)}.site-footer{border-top:2px solid #10244f2e;justify-content:space-between;align-items:center;gap:20px;min-height:90px;font-size:12px;font-weight:800;display:flex}.reveal-ready{opacity:0;transform:translateY(34px)rotate(.3deg)}.reveal-ready.is-visible{opacity:1;transition:opacity .6s,transform .7s cubic-bezier(.2,.75,.25,1);transform:none}.motion-paused *,.motion-paused :before,.motion-paused :after{scroll-behavior:auto!important;animation-play-state:paused!important}@keyframes livePulse{50%{transform:scale(1.45)}}@keyframes heroPacket{0%{left:-4px;transform:rotate(-8deg)}50%{transform:translateY(-8px)rotate(6deg)}to{left:calc(100% - 30px);transform:rotate(0)}}@keyframes messageTravel{0%{left:0;transform:rotate(-8deg)}to{left:calc(100% - 34px);transform:rotate(360deg)}}@keyframes pathTravel{0%{left:0;transform:rotate(-8deg)}to{left:calc(100% - 34px);transform:rotate(8deg)}}@keyframes packetArrive{0%{opacity:0;transform:translateY(-28px)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes dnsLookup{0%{left:20%;transform:rotate(-8deg)}45%{left:calc(50% - 17px);transform:rotate(5deg)}55%{left:calc(50% - 17px);transform:rotate(5deg)}to{left:calc(80% - 34px);transform:rotate(0)}}@keyframes protocolRace{0%{left:0;transform:rotate(-8deg)}to{left:calc(100% - 38px);transform:rotate(4deg)}}@keyframes pageBuild{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@media (min-width:901px) and (max-width:1180px){.mission-route.hero-route{overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;grid-template-columns:repeat(5,minmax(170px,1fr));max-width:100%;padding-bottom:14px;overflow-x:auto}.mission-route .route-stage{scroll-snap-align:start}}@media (max-width:1050px){.chapter-section>.play-card{min-height:0;transform:none}.concept-layout{grid-template-columns:1fr;grid-template-areas:"explanation""motion""feedback"}.concept-explanation:after{border-top:0;border-left:3px dotted var(--ink);width:0;height:18px;top:auto;bottom:-18px;left:30px}.stage-feedback{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:stretch}.motion-stage{min-height:390px}}@media (max-width:720px){.chapter-masthead{flex-direction:column;align-items:flex-start;gap:11px}.chapter-masthead h2{font-size:clamp(40px,13vw,60px)}.stage-feedback{grid-template-columns:1fr}.motion-stage{min-height:340px;padding:15px 10px}.web-dns-art,.web-handshake-art,.web-request-art,.web-files-art{grid-template-columns:1fr}.web-dns-art .web-ticket,.web-dns-art .web-art-path,.web-dns-art .web-dns-book,.web-dns-art .web-ip-ticket{grid-area:auto/1}.web-art-path,.request-track,.handshake-line,.file-stream{background-image:repeating-linear-gradient(transparent 0 5px, var(--ink) 5px 10px);background-position:50%;background-repeat:repeat-y;justify-self:center;width:5px;height:74px}.web-moving-packet,.request-packet{animation-name:heroPacketVertical;top:0;left:-15px}.handshake-out,.handshake-back{display:none}.handshake-line i{white-space:nowrap}.browser-scene{grid-template-columns:1fr}.website-concept-layout .motion-stage,.performance-concept-layout .motion-stage{min-height:0}.performance-grid{grid-template-columns:1fr}}.chapter-section{min-height:0;padding:clamp(28px,3.7vw,56px);scroll-margin-top:96px;display:block;overflow:visible}.chapter-masthead{z-index:2;align-items:center;gap:20px;margin-bottom:24px;display:flex;position:relative}.chapter-masthead .chapter-tag{flex:none;margin:0}.chapter-masthead h2{font-family:var(--display);letter-spacing:-.058em;margin:0;font-size:clamp(42px,4.8vw,72px);font-weight:950;line-height:.94}.chapter-section>.play-card{min-height:600px;transform:translateY(var(--scene-drift,0px)) rotate(var(--scene-tilt,0deg));transition:transform 80ms linear}.concept-layout{grid-template:"motion explanation""motion feedback"1fr/minmax(0,1.72fr) minmax(250px,.64fr);gap:18px 22px;margin-top:24px;display:grid}.motion-stage{isolation:isolate;background:#eef3ffd1;border:2px solid #10244f3d;border-radius:24px;grid-area:motion;align-content:center;min-width:0;min-height:410px;padding:clamp(18px,2.4vw,30px);display:grid;position:relative}.motion-stage:before{content:"";z-index:-1;opacity:.26;background-color:#0000;background-image:linear-gradient(90deg,#0000 49.5%,#1647d826 50%,#0000 50.5%),linear-gradient(#0000 49.5%,#1647d826 50%,#0000 50.5%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:44px 44px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:18px;position:absolute;inset:10px}.chapter-section.is-active .motion-stage:before{animation:12s linear infinite stageGridDrift}.concept-explanation{border:2px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);border-radius:17px;grid-area:explanation;align-self:start;margin:0;padding:18px;font-size:15px;font-weight:680;line-height:1.52;position:relative}.concept-explanation:before{content:"What the motion means";color:var(--blue);text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;font-size:10px;font-weight:950;display:block}.concept-explanation:after{content:"";border-top:3px dotted var(--ink);width:22px;position:absolute;top:34px;left:-22px}.stage-feedback{grid-area:feedback;align-content:end;gap:12px;display:grid}.stage-feedback .result-line,.stage-feedback .takeaway{margin:0}.stage-feedback .result-line{overflow-wrap:anywhere;display:block}.stage-feedback .takeaway{color:var(--ink);background:var(--pale-mint)}.attached-label{z-index:3;border:2px solid var(--ink);background:var(--paper);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:950;position:absolute;top:-14px;left:50%;transform:translate(-50%)rotate(-2deg)}.path-caption{white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:950;position:absolute;top:18px;left:50%;transform:translate(-50%)}.chapter-section.is-active:before{animation:4.8s ease-in-out infinite chapterOrb}.page-dots{animation:22s linear infinite pageDotDrift}.play-card:before{background-size:20px 20px}.chapter-section.is-active .play-card:before{animation:9s linear infinite cardDotDrift}.route-connector{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px);background-position:50%;background-repeat:repeat-x;background-size:auto 4px;border-top:0;animation:1.2s linear infinite directionalDashes}.hero-packet,.packet-delay-1,.packet-delay-2,.packet-delay-3{animation:4.4s cubic-bezier(.45,0,.3,1) infinite heroHop}.packet-delay-0{animation-delay:0s}.packet-delay-1{animation-delay:.9s}.packet-delay-2{animation-delay:1.8s}.packet-delay-3{animation-delay:2.7s}.route-stage:first-child .speech-bubble{animation:4.4s infinite both bubblePop}.route-stage:nth-child(2) .speech-bubble{animation:4.4s .9s infinite both bubblePop}.route-stage:nth-child(3) .speech-bubble{animation:4.4s 1.8s infinite both bubblePop}.route-stage:nth-child(4) .speech-bubble{animation:4.4s 2.7s infinite both bubblePop}.route-stage:nth-child(5) .speech-bubble{animation:4.4s 3.5s infinite both bubblePop}.icon-server i:before{animation:1.4s steps(2,end) infinite serverBlink}.icon-server i:nth-child(2):before{animation-delay:.25s}.icon-server i:nth-child(3):before{animation-delay:.5s}.device-tile{position:relative}.chapter-section .ambient-packet{opacity:0;animation:none}.chapter-section.is-active .ambient-packet{opacity:1;animation:3.2s ease-in-out infinite messageLoop}.chapter-section.is-active .ambient-two{background:var(--sky);animation-delay:1.6s}.chapter-section.is-active .device-tile{animation:3.2s ease-in-out infinite deviceBreathe}.chapter-section.is-active .mint-device{animation-delay:.7s}.chapter-section.is-active .hello-moving{animation:1.35s ease-in-out both messageTravel}.router-node{position:relative}.wifi-ripples{pointer-events:none;position:absolute;inset:0}.wifi-ripples i{border:3px solid var(--blue);opacity:0;border-radius:50%;width:48px;height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.chapter-section.is-active .local-map.wifi .wifi-ripples i{animation:2.8s ease-out infinite wifiWave}.chapter-section.is-active .local-map.wifi .wifi-ripples i:nth-child(2){animation-delay:.85s}.chapter-section.is-active .local-map.wifi .wifi-ripples i:nth-child(3){animation-delay:1.7s}.chapter-section .local-packet{opacity:0;animation:none}.chapter-section.is-active .local-packet{opacity:1;animation:3s ease-in-out infinite pathTravelLoop}.chapter-section.is-active .local-loop{background:var(--coral);animation-delay:1.5s}.chapter-section.is-active .local-packet.second{background:var(--mint);animation-delay:.65s}.chapter-section.is-active .return-loop{background:var(--sky);animation-delay:2.1s}.chapter-section.is-active .cloud-shape{animation:3.5s ease-in-out infinite cloudFloat}.local-path,.hello-track,.map-path,.protocol-track{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px);background-position:50%;background-repeat:repeat-x;background-size:auto 4px;border-top-color:#0000}.chapter-section.is-active .local-path,.chapter-section.is-active .hello-track,.chapter-section.is-active .map-path,.chapter-section.is-active .protocol-track{animation:1.2s linear infinite directionalDashes}.local-map.cable .local-path:first-of-type{background-image:linear-gradient(var(--ink), var(--ink))}.local-map.wifi .local-path:first-of-type{background-image:repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 11px)}.packet-motion{min-width:0}.packet-lane{background-image:linear-gradient(90deg,#0000 0 8%,#1647d81c 8% 92%,#0000 92%),repeating-linear-gradient(90deg,#0000 0 38px,#10244f1a 38px 40px);position:relative}.chapter-section .letter-packet{animation:none}.chapter-section.is-active .letter-packet{animation:4.8s cubic-bezier(.2,.8,.3,1) infinite both packetConveyor}.chapter-section.is-active .letter-packet:nth-child(2){animation-delay:.11s}.chapter-section.is-active .letter-packet:nth-child(3){animation-delay:.22s}.chapter-section.is-active .letter-packet:nth-child(4){animation-delay:.33s}.chapter-section.is-active .letter-packet:nth-child(5){animation-delay:.44s}.chapter-section.is-active .letter-packet:nth-child(6){animation-delay:.55s}.chapter-section.is-active .letter-packet:nth-child(7){animation-delay:.66s}.chapter-section .letter-packet.missing{animation:1.1s cubic-bezier(.3,0,.6,1) both packetDrop!important}.packet-lane:has(.letter-packet.missing){margin-bottom:72px}.packet-callouts{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;display:flex}.packet-callouts span{border:2px solid var(--ink);background:var(--paper);border-radius:10px;padding:7px 10px;font-size:10px;font-weight:700}.packet-callouts b{color:var(--blue)}.dns-book{perspective:400px}.page-flip{border:2px solid var(--ink);background:var(--paper);transform-origin:0;opacity:.55;border-radius:7px 14px 14px 7px;position:absolute;inset:8px}.chapter-section.is-active .page-flip{animation:1.8s ease-in-out infinite pageFlip}.chapter-section .dns-packet{animation:none}.chapter-section.is-active .dns-query{animation:2.8s ease-in-out infinite dnsQuery;display:block}.chapter-section.is-active .dns-response{background:var(--mint);animation:2.8s ease-in-out 1.35s infinite dnsResponse;display:block}.dns-flow.resolved .dns-book{animation:1.4s ease-in-out infinite alternate dnsBookPop}.protocol-simulator .result-line{display:block}.protocol-simulator .result-line strong{display:inline}.route-map .map-path{background-image:repeating-linear-gradient(90deg, var(--route-color) 0 6px, transparent 6px 14px)}.map-endpoint small{text-align:center;font-family:var(--body);margin-top:4px;font-size:8px;font-weight:800;display:block}.chapter-section .map-packet{animation:none;display:none}.chapter-section.is-active .route-map.direct .direct-path .map-packet,.chapter-section.is-active .route-map.detour .detour-path .map-packet{animation:3.3s ease-in-out infinite routeTrace;display:inline-block}.chapter-section.is-active .route-map .map-echo{background:var(--sky);animation-delay:1.65s!important}.chapter-section.is-active .route-map.direct .direct-path .map-router,.chapter-section.is-active .route-map.detour .detour-path .map-router,.chapter-section.is-active .route-map .shared-router{animation:3.3s ease-in-out infinite routerHop}.chapter-section.is-active .direct-path .map-router,.chapter-section.is-active .detour-path .map-router:first-of-type{animation-delay:.52s!important}.chapter-section.is-active .detour-path .map-router:nth-of-type(2){animation-delay:1.04s!important}.route-map.detour .blocked-mark{animation:.5s cubic-bezier(.15,.8,.25,1.25) both blockedStamp}.protocol-motion{min-width:0}.protocol-track{overflow:visible}.chapter-section .mini-packet,.chapter-section .ack,.chapter-section .retry-flag,.chapter-section .keep-going{opacity:0;animation:none}.chapter-section.is-active .mini-packet{opacity:1;animation:3.8s ease-in-out infinite protocolFlow}.chapter-section.is-active .mini-packet.p-2{animation-delay:.22s}.chapter-section.is-active .mini-packet.p-3{animation-delay:.44s}.chapter-section.is-active .mini-packet.p-4{animation-delay:.66s}.chapter-section.is-active .tcp-lane .p-3{animation-name:tcpRetry;animation-duration:4.6s}.chapter-section.is-active .udp-lane .p-3{animation-name:udpDrop;animation-duration:3.8s}.ack,.retry-flag,.keep-going{z-index:3;border:2px solid var(--ink);background:var(--mint);white-space:nowrap;border-radius:8px;padding:3px 6px;font-size:8px;font-style:normal;font-weight:950;position:absolute}.ack{top:12px;right:18%}.ack-two{top:12px;right:45%}.retry-flag{background:var(--yellow);top:16px;left:44%}.keep-going{background:var(--coral);top:16px;left:58%}.chapter-section.is-active .ack-one{animation:3.8s ease-in-out 1.1s infinite ackReturn}.chapter-section.is-active .ack-two{animation:3.8s ease-in-out 1.8s infinite ackReturn}.chapter-section.is-active .retry-flag{animation:4.6s ease-in-out 1.7s infinite labelPop}.chapter-section.is-active .keep-going{animation:3.8s ease-in-out 1.4s infinite labelPop}.website-concept-layout .motion-stage{min-height:600px}.browser-page{min-height:270px;padding:18px;display:block;overflow:hidden}.web-art{align-items:center;min-height:226px;display:grid;position:relative}.web-handshake-art,.web-request-art,.web-files-art{grid-template-columns:minmax(110px,1fr) minmax(100px,1.4fr) minmax(100px,1fr);align-items:center;gap:14px;display:grid}.web-dns-art{grid-template-columns:minmax(110px,1fr) 92px minmax(120px,1fr);align-items:center;gap:14px;min-height:246px;display:grid;position:relative}.web-dns-art .web-ticket{z-index:1;grid-area:1/1}.web-dns-art .web-art-path{z-index:0;grid-area:1/1/auto/4}.web-dns-art .web-dns-book{z-index:1;grid-area:1/2}.web-dns-art .web-ip-ticket{z-index:1;grid-area:1/3}.web-ticket,.web-ip-ticket,.web-dns-book,.handshake-node,.request-card,.request-server,.file-source,.file-browser{border:3px solid var(--ink);background:var(--yellow);min-height:86px;box-shadow:4px 4px 0 var(--ink);text-align:center;border-radius:18px;place-items:center;padding:12px;font-size:11px;font-weight:900;display:grid;position:relative}.web-ip-ticket,.server-handshake,.request-server,.file-source{background:var(--mint)}.web-dns-book{background:var(--coral);min-height:110px;font-family:var(--display);font-size:22px;animation:1s ease-in-out infinite alternate dnsBookPop}.web-art-path,.request-track{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px);height:5px;animation:1s linear infinite directionalDashes;position:relative}.web-moving-packet,.request-packet{animation:1.8s ease-in-out infinite pathTravelLoop;position:absolute;top:-15px;left:0}.handshake-line{background:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px) center 38% / auto 4px repeat-x, repeating-linear-gradient(90deg, var(--blue) 0 5px, transparent 5px 13px) center 68% / auto 4px repeat-x;align-content:center;gap:28px;min-height:100px;display:grid}.handshake-line i{border:2px solid var(--ink);background:var(--paper);border-radius:999px;justify-self:center;padding:4px 7px;font-size:9px;font-weight:900}.handshake-out,.handshake-back{margin-top:-17px;position:absolute;top:50%}.handshake-out{animation:2.6s ease-in-out infinite handshakeOut;right:-34px}.handshake-back{background:var(--mint);animation:2.6s ease-in-out 1.1s infinite handshakeBack;left:-34px}.web-lock-art{align-content:center;place-items:center;gap:14px;display:grid}.secure-tunnel{border:4px solid var(--blue);background:#a8ddff8c;border-radius:999px;width:min(90%,440px);height:74px;animation:1.8s ease-in-out infinite tunnelGlow;position:relative;overflow:hidden}.secure-packet{background:var(--mint);animation:2s ease-in-out infinite secureTravel;position:absolute;top:17px;left:10px}.lock-shape{border:4px solid var(--ink);background:var(--yellow);border-radius:14px;place-items:center;width:70px;height:58px;display:grid;position:absolute}.lock-shape:before{content:"";border:4px solid var(--ink);transform-origin:100% 100%;border-bottom:0;border-radius:28px 28px 0 0;width:38px;height:36px;animation:1.6s ease-in-out both lockClose;position:absolute;top:-31px}.lock-shape i{background:var(--ink);border-radius:999px;width:10px;height:18px}.request-card{background:var(--yellow);font-family:var(--display);font-size:22px;animation:1.2s ease-in-out infinite alternate requestCardPulse}.file-stream{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px);background-position:50%;background-repeat:repeat-x;background-size:auto 4px;height:180px;position:relative}.file-packet{border:3px solid var(--ink);background:var(--yellow);text-align:center;border-radius:11px;min-width:45px;padding:9px 6px;font-size:8px;font-style:normal;font-weight:950;animation:2.8s ease-in-out infinite fileTravel;position:absolute;top:50%;left:0;transform:translateY(-50%)}.file-1{background:var(--coral);animation-delay:.42s}.file-2{background:var(--sky);animation-delay:.84s}.file-3{background:var(--mint);animation-delay:1.26s}.web-ready-art{border:3px solid var(--ink);background:var(--paper);border-radius:18px;align-content:center;gap:12px;padding:22px;display:grid}.ready-heading,.ready-line,.ready-cards i{border:2px solid var(--ink);transform-origin:0;border-radius:999px;animation:.56s ease-out both pageBuild;display:block}.ready-heading{background:var(--blue);width:54%;height:25px}.ready-line{background:var(--sky);width:68%;height:10px;animation-delay:.12s}.ready-line.long{width:88%}.ready-cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.ready-cards i{background:var(--yellow);border-radius:12px;height:68px;animation-delay:.24s}.ready-cards i:nth-child(2){background:var(--coral);animation-delay:.36s}.ready-cards i:nth-child(3){background:var(--mint);animation-delay:.48s}.web-ready-art b{border:2px solid var(--ink);background:var(--mint);border-radius:9px;justify-self:end;padding:6px 9px;animation:1.4s .6s both labelPop}.performance-concept-layout .motion-stage{min-height:580px}.performance-grid label>span{gap:2px;display:grid}.performance-grid label small{color:var(--blue);font-size:9px}.quality-browser{background:repeating-linear-gradient(90deg, transparent 0 22px, #10244f12 22px 24px), var(--paper);height:160px}.quality-browser:after{content:"";height:var(--lane-size,18px);border:3px solid var(--ink);background:var(--sky);border-radius:999px;position:absolute;top:78px;left:12px;right:12px;transform:translateY(-50%)}.quality-browser:before{z-index:3}.quality-fill{z-index:4;width:0;animation:loadingFill var(--load-time,1s) linear forwards}.quality-packet{z-index:2;animation:qualityFlow var(--flow-duration,2s) linear infinite;top:61px;left:-40px;transform:scale(.78)}.quality-packet.q1{background:var(--yellow);animation-delay:0s;left:-40px}.quality-packet.q2{background:var(--coral);animation-delay:calc(var(--flow-duration,2s) * -.2);left:-40px}.quality-packet.q3{background:var(--sky);animation-delay:calc(var(--flow-duration,2s) * -.4);left:-40px}.quality-packet.q4{background:var(--mint);animation-delay:calc(var(--flow-duration,2s) * -.6);left:-40px}.quality-packet.q5{background:var(--yellow);animation-delay:calc(var(--flow-duration,2s) * -.8);left:-40px}.quality-packet.lost{opacity:1;animation-name:qualityDrop}@keyframes stageGridDrift{to{background-position:44px 22px,22px 44px}}@keyframes pageDotDrift{to{background-position:120px 60px}}@keyframes cardDotDrift{to{background-position:40px 20px}}@keyframes chapterOrb{50%{transform:translateY(-12px)rotate(8deg)scale(1.04)}}@keyframes directionalDashes{to{background-position:26px}}@keyframes heroHop{0%,4%{opacity:0;left:-4px;transform:rotate(-8deg)}6%{opacity:1}22%{opacity:1;left:calc(100% - 30px);transform:translateY(-7px)rotate(6deg)}26%,to{opacity:0;left:calc(100% - 30px);transform:rotate(0)}}@keyframes bubblePop{0%,4%,27%,to{opacity:.35;transform:translateY(5px)rotate(-2deg)scale(.92)}7%,23%{opacity:1;transform:translateY(0)rotate(-2deg)scale(1)}}@keyframes serverBlink{50%{opacity:.3}}@keyframes messageLoop{0%{opacity:0;left:0;transform:rotate(-8deg)}12%{opacity:1}80%{opacity:1;left:calc(100% - 34px);transform:rotate(7deg)}to{opacity:0;left:calc(100% - 34px)}}@keyframes deviceBreathe{50%{box-shadow:7px 9px 0 var(--ink);transform:translateY(-6px)rotate(-1deg)}}@keyframes wifiWave{0%{opacity:.65;transform:translate(-50%,-50%)scale(.6)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@keyframes pathTravelLoop{0%{opacity:0;left:0;transform:rotate(-7deg)}12%{opacity:1}82%{opacity:1;left:calc(100% - 34px);transform:rotate(8deg)}to{opacity:0;left:calc(100% - 34px)}}@keyframes cloudFloat{50%{transform:translateY(-9px)rotate(1deg)}}@keyframes packetConveyor{0%{opacity:0;transform:translate(-110px,-26px)rotate(-14deg)scale(.7)}14%{opacity:1}34%,72%{opacity:1;transform:translate(0)rotate(0)scale(1)}90%,to{opacity:0;transform:translate(80px,18px)rotate(10deg)scale(.88)}}@keyframes packetDrop{0%{opacity:1;transform:translateY(0)rotate(0)}25%{opacity:1;transform:translateY(-14px)rotate(-8deg)}to{opacity:.35;transform:translateY(96px)rotate(24deg)}}@keyframes pageFlip{0%,20%{transform:rotateY(0)}55%,to{transform:rotateY(-160deg)}}@keyframes dnsQuery{0%{opacity:0;left:16%;transform:rotate(-8deg)}12%{opacity:1}44%,72%{opacity:1;left:calc(50% - 17px);transform:rotate(4deg)}86%,to{opacity:0;left:calc(50% - 17px)}}@keyframes dnsResponse{0%{opacity:0;left:calc(50% - 17px);transform:rotate(7deg)}12%{opacity:1}72%{opacity:1;left:calc(84% - 34px)}to{opacity:0;left:calc(84% - 34px);transform:rotate(-3deg)}}@keyframes dnsBookPop{to{transform:translateY(-5px)rotate(2deg)}}@keyframes routeTrace{0%{opacity:0;transform:translateY(var(--route-y)) rotate(-6deg);left:-58px}10%{opacity:1}28%{opacity:1;left:8%;transform:translateY(0)rotate(2deg)}72%{opacity:1;left:calc(92% - 34px);transform:translateY(0)rotate(5deg)}90%{opacity:1;transform:translateY(var(--route-y)) rotate(6deg);left:calc(100% + 64px)}to{opacity:0;transform:translateY(var(--route-y)) rotate(6deg);left:calc(100% + 64px)}}@keyframes routerHop{0%,28%,to{transform:scale(1)}12%{box-shadow:3px 3px 0 var(--ink);transform:scale(1.16)rotate(-4deg)}}@keyframes blockedStamp{0%{opacity:0;transform:translate(-50%,-50%)rotate(-12deg)scale(1.8)}to{opacity:1;transform:translate(-50%,-50%)rotate(-4deg)scale(1)}}@keyframes protocolFlow{0%{opacity:0;left:0;transform:rotate(-7deg)}12%{opacity:1}82%{opacity:1;left:calc(100% - 38px);transform:rotate(5deg)}to{opacity:0;left:calc(100% - 38px)}}@keyframes tcpRetry{0%{opacity:0;left:0}10%{opacity:1}42%{left:46%;transform:translateY(0)rotate(5deg)}52%{opacity:.35;left:46%;transform:translateY(15px)rotate(-8deg)}62%{opacity:1;left:0;transform:translateY(0)rotate(0)}92%{opacity:1;left:calc(100% - 38px)}to{opacity:0}}@keyframes udpDrop{0%{opacity:0;left:0}12%{opacity:1}50%{left:48%;transform:translateY(0)rotate(4deg)}75%,to{opacity:0;left:56%;transform:translateY(65px)rotate(24deg)}}@keyframes ackReturn{0%,40%,to{opacity:0;transform:translate(0)}48%{opacity:1}78%{opacity:1;transform:translate(-90px)}86%{opacity:0;transform:translate(-120px)}}@keyframes labelPop{0%,28%,72%,to{opacity:0;transform:scale(.8)rotate(-3deg)}36%,64%{opacity:1;transform:scale(1)rotate(0)}}@keyframes handshakeOut{0%,6%{opacity:0;right:-34px}16%{opacity:1}48%{opacity:1;right:-180px}60%,to{opacity:0}}@keyframes handshakeBack{0%,6%{opacity:0;left:-34px}16%{opacity:1}48%{opacity:1;left:-180px}60%,to{opacity:0}}@keyframes tunnelGlow{50%{box-shadow:0 0 0 10px #1647d81f}}@keyframes secureTravel{0%{left:10px;transform:rotate(-7deg)}80%,to{left:calc(100% - 46px);transform:rotate(7deg)}}@keyframes lockClose{0%{transform:rotate(32deg)}to{transform:rotate(0)}}@keyframes requestCardPulse{to{transform:translateY(-5px)rotate(-2deg)}}@keyframes fileTravel{0%{opacity:0;left:0;transform:translateY(-50%)rotate(-8deg)}12%{opacity:1}82%{opacity:1;left:calc(100% - 45px);transform:translateY(-50%)rotate(6deg)}to{opacity:0;left:calc(100% - 45px)}}@keyframes loadingFill{0%{width:0}to{width:100%}}@keyframes qualityFlow{0%{opacity:0;left:-40px;transform:scale(.78)rotate(-7deg)}10%{opacity:1}90%{opacity:1;left:calc(100% - 36px);transform:scale(.78)rotate(6deg)}to{opacity:0;left:calc(100% - 36px)}}@keyframes qualityDrop{0%{opacity:0;left:-40px;transform:scale(.78)}10%{opacity:1}48%{opacity:1;left:46%;transform:scale(.78)rotate(5deg)}82%,to{opacity:0;left:52%;transform:translateY(68px)scale(.78)rotate(24deg)}}@media (max-width:1050px){.chapter-section>.play-card{min-height:0;transform:none}.concept-layout{grid-template-columns:1fr;grid-template-areas:"explanation""motion""feedback"}.concept-explanation:after{border-top:0;border-left:3px dotted var(--ink);width:0;height:18px;top:auto;bottom:-18px;left:30px}.stage-feedback{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:stretch}.motion-stage{min-height:390px}}@media (max-width:720px){.chapter-masthead{flex-direction:column;align-items:flex-start;gap:11px}.chapter-masthead h2{font-size:clamp(40px,13vw,60px)}.stage-feedback{grid-template-columns:1fr}.motion-stage{min-height:340px;padding:15px 10px}.web-dns-art,.web-handshake-art,.web-request-art,.web-files-art{grid-template-columns:1fr}.web-dns-art .web-ticket,.web-dns-art .web-art-path,.web-dns-art .web-dns-book,.web-dns-art .web-ip-ticket{grid-area:auto/1}.web-art-path,.request-track,.handshake-line,.file-stream{background-image:repeating-linear-gradient(transparent 0 5px, var(--ink) 5px 10px);background-position:50%;background-repeat:repeat-y;justify-self:center;width:5px;height:74px}.web-moving-packet,.request-packet{animation-name:heroPacketVertical;top:0;left:-15px}.handshake-out,.handshake-back{display:none}.handshake-line i{white-space:nowrap}.browser-scene{grid-template-columns:1fr}.website-concept-layout .motion-stage,.performance-concept-layout .motion-stage{min-height:0}.performance-grid{grid-template-columns:1fr}}.mission-flow{gap:26px;margin:24px 0 18px;display:grid}.mission-phase{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#ffffff9e;border-radius:28px;padding:20px 22px 14px}.combined-phase{background:linear-gradient(135deg, var(--coral), var(--sky))}@supports (color:color-mix(in lab, red, red)){.combined-phase{background:linear-gradient(135deg, color-mix(in srgb, var(--coral) 12%, var(--paper)), color-mix(in srgb, var(--sky) 22%, var(--paper)))}}.mission-phase-heading{align-items:flex-start;gap:12px;display:flex}.mission-phase-heading h3,.mission-phase-heading p{margin:0}.mission-phase-heading h3{font-family:var(--display);letter-spacing:-.025em;font-size:clamp(18px,1.8vw,24px)}.mission-phase-heading p{max-width:850px;margin-top:3px;font-size:12px;font-weight:700;line-height:1.45}.traffic-key{text-transform:uppercase;letter-spacing:.05em;justify-content:flex-end;gap:8px;margin:6px 0 -2px;font-size:9px;font-weight:900;display:flex}.traffic-key span{border:2px solid var(--ink);border-radius:999px;padding:3px 7px}.outbound-key{background:var(--coral)}.request-key{background:var(--yellow)}.connection-key{background:var(--sky)}.return-key{background:var(--mint)}.website-synthesis{border-top:3px dashed #10244f3d;margin-top:30px;padding-top:8px}.website-synthesis>.chapter-bridge{max-width:none;margin-top:14px}.chapter-seven-thread{box-shadow:0 9px 0 var(--coral);margin:22px 0 0;padding:clamp(20px,3vw,34px)}.performance-guide{border:2px dashed var(--ink);background:var(--paper);border-radius:14px;margin:0 0 18px;padding:13px 15px;font-size:14px;font-weight:650;line-height:1.5}.mission-route,.mission-route.hero-route{align-items:center;max-width:none;min-height:220px;margin:8px 0 0;padding:8px 0 0;list-style:none;display:grid}.mission-route.hero-route{grid-template-columns:repeat(5,minmax(0,1fr))}.combined-route{align-items:start;min-height:430px}.mission-route .route-stage{grid-template-rows:auto auto;grid-template-columns:minmax(102px,1fr) minmax(26px,.38fr);align-self:start;place-items:center stretch;min-width:0;display:grid;position:relative}.mission-route .route-stage:last-child{grid-template-columns:minmax(102px,1fr)}.mission-route .route-station{grid-template-rows:auto auto auto;grid-template-columns:1fr;place-content:center stretch;place-items:center;column-gap:0;width:auto;min-width:0;min-height:188px;display:grid}.mission-route .route-stage>.route-station{grid-area:1/1}.mission-route .speech-bubble,.mission-route .station-tile,.mission-route .station-label{grid-area:auto}.mission-flow .mission-route .speech-bubble{opacity:1;max-width:142px;margin:0 0 10px;animation:none}.mission-route .station-tile{width:min(112px,90%)}.mission-route .station-label{text-align:center;white-space:nowrap;margin:13px 0 0}.station-mint .station-tile{background:var(--mint)}.icon-isp{background:var(--paper);border:3px solid;border-radius:50% 50% 42% 42%;align-content:center;place-items:center;gap:3px;width:82px;height:70px;display:grid;box-shadow:6px 5px #10244f33}.icon-isp strong{font-family:var(--display);font-size:22px}.icon-isp small{font-size:7px;font-weight:900}.mission-flow .route-connector{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 13px);background-position:50%;background-repeat:repeat-x;background-size:auto 4px;border:0;animation:none}.mission-flow .route-connector:after{content:"⇄";font-size:21px;top:-22px;left:auto;right:-7px}.mission-route .route-stage>.route-connector{grid-area:1/2}.dns-side-lookup{border:2px dashed var(--ink);background:var(--coral);border-radius:18px;grid-area:2/1;justify-items:center;gap:6px;width:100%;margin-top:10px;padding:10px 6px 7px;display:grid}@supports (color:color-mix(in lab, red, red)){.dns-side-lookup{background:color-mix(in srgb, var(--coral) 14%, var(--paper))}}.dns-side-lookup{z-index:5;position:static}.dns-side-label{border:2px solid var(--ink);background:var(--coral);text-align:center;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:8px;font-weight:950}.dns-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.dns-controls .small-button:disabled:hover{box-shadow:4px 4px 0 var(--ink);transform:none}.dns-flow.ip-revealed .ip-value{background:var(--sky)}.dns-flow.ip-revealed .ip-value strong{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.dns-branch-connector{background-image:repeating-linear-gradient(transparent 0 5px, var(--ink) 5px 10px);background-position:50%;background-repeat:repeat-y;background-size:4px;width:4px;height:44px;position:relative}.mission-route .dns-branch-station{width:100%;min-height:145px}.dns-side-lookup .lookup-query{animation-name:missionForwardVertical;top:-2px;left:-15px}.dns-side-lookup .lookup-answer{animation-name:missionBackwardVertical;inset:auto auto -2px -15px}.mission-packet{z-index:2;opacity:0;position:absolute;top:-19px;left:-4px}.lookup-query{background:var(--coral);animation:12s linear infinite missionForward}.website-request{background:var(--yellow);animation:12s linear infinite missionForward}.lookup-answer,.website-response{background:var(--mint);animation:12s linear infinite missionBackward;left:auto;right:-4px}.lookup-query-0{animation-delay:0s}.lookup-query-1{animation-delay:.7s}.lookup-query-2{animation-delay:1.4s}.lookup-answer-2{animation-delay:2.35s}.lookup-answer-1{animation-delay:3.05s}.lookup-answer-0{animation-delay:3.75s}.website-request-0{animation-delay:4.8s}.website-request-1{animation-delay:5.5s}.website-request-2{animation-delay:6.2s}.website-request-3{animation-delay:6.9s}.website-response-3{animation-delay:7.95s}.website-response-2{animation-delay:8.65s}.website-response-1{animation-delay:9.35s}.website-response-0{animation-delay:10.05s}.route-caveat{text-align:right;margin:-5px 0 4px;font-size:10px;font-weight:800}@keyframes missionForward{0%,1%{opacity:0;left:-4px;transform:rotate(-7deg)}2%{opacity:1}7%{opacity:1;left:calc(100% - 30px);transform:translateY(-6px)rotate(6deg)}8%,to{opacity:0;left:calc(100% - 30px);transform:rotate(0)}}@keyframes missionBackward{0%,1%{opacity:0;right:-4px;transform:rotate(7deg)}2%{opacity:1}7%{opacity:1;right:calc(100% - 30px);transform:translateY(6px)rotate(-6deg)}8%,to{opacity:0;right:calc(100% - 30px);transform:rotate(0)}}@media (max-width:900px){.mission-phase{padding-inline:14px}.chapter-section{scroll-margin-top:112px}.mission-route,.mission-route.hero-route{grid-template-columns:1fr;max-width:540px;margin-inline:auto}.combined-route{min-height:0}.mission-route .route-stage,.mission-route .route-stage:last-child{grid-template-columns:1fr;justify-items:center}.dns-controls{justify-content:flex-start}.mission-route .route-stage>.route-connector{grid-area:auto/1}.dns-side-lookup{width:100%;margin:10px 0 8px;position:static;transform:none}.mission-route .dns-branch-station{width:100%;min-height:154px}.mission-route .route-station{grid-template-rows:auto auto;grid-template-columns:118px minmax(130px,210px);justify-content:center;column-gap:24px;width:100%;min-height:154px}.mission-flow .mission-route .speech-bubble{grid-column:1/-1;margin:0 0 3px}.mission-route .station-tile{grid-area:2/1}.mission-route .station-label{grid-area:2/2;margin:0}.mission-flow .route-connector{background-image:repeating-linear-gradient(transparent 0 5px, var(--ink) 5px 10px);background-position:50%;background-repeat:repeat-y;background-size:4px;width:4px;height:54px}.mission-flow .route-connector:after{content:"⇅";top:24px;left:-10px;right:auto}.mission-packet{top:-2px;left:-15px;right:auto}.lookup-query,.website-request{animation-name:missionForwardVertical}.lookup-answer,.website-response{animation-name:missionBackwardVertical;inset:auto auto -2px -15px}.route-caveat{text-align:center;margin-top:8px}}@keyframes missionForwardVertical{0%,1%{opacity:0;top:-2px;transform:rotate(-7deg)}2%{opacity:1}7%{opacity:1;top:28px;transform:rotate(6deg)}8%,to{opacity:0;top:28px;transform:rotate(0)}}@keyframes missionBackwardVertical{0%,1%{opacity:0;bottom:-2px;transform:rotate(7deg)}2%{opacity:1}7%{opacity:1;bottom:28px;transform:rotate(-6deg)}8%,to{opacity:0;bottom:28px;transform:rotate(0)}}@keyframes routeTraceMobile{0%{opacity:0;left:0;transform:rotate(-6deg)}10%{opacity:1}88%{opacity:1;left:calc(100% - 34px);transform:rotate(6deg)}to{opacity:0;left:calc(100% - 34px);transform:rotate(6deg)}}@media (max-width:540px){.route-map{grid-template-columns:1fr;gap:26px;width:100%;max-width:300px}.route-map .map-endpoint{width:120px;min-height:64px}.path-stack{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:38px;width:100%}.route-junction{grid-area:1/1;align-self:auto;min-height:58px}.direct-path{--route-y:0px;grid-area:2/1}.detour-path{--route-y:0px;grid-area:3/1}.route-junction:before,.end-point:before{background:var(--ink);clip-path:polygon(0 38%,82% 38%,82% 0,100% 50%,82% 100%,82% 62%,0 62%);transform-origin:0;width:34px;height:12px;top:-30px;left:50%;right:auto;transform:rotate(90deg)}.end-point{position:relative}.end-point:before{content:"";position:absolute}.path-stack .map-path:before,.path-stack .map-path:after{display:none}.map-path{min-height:62px}.map-packet{left:0}.chapter-section.is-active .route-map.direct .direct-path .map-packet,.chapter-section.is-active .route-map.detour .detour-path .map-packet{animation-name:routeTraceMobile}}html:has(.motion-paused){scroll-behavior:auto}.motion-paused *,.motion-paused :before,.motion-paused :after{transition-duration:0s!important;animation-play-state:paused!important}.motion-paused .chapter-section>.play-card{transform:none}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.route-map .map-packet{display:none!important}.route-map .map-path,.route-map .map-path:before,.route-map .map-path:after{animation:none!important}.route-map.direct .direct-path,.route-map.detour .detour-path{opacity:1}.chapter-section>.play-card{transform:none}.chapter-section .ambient-packet,.chapter-section .local-loop,.chapter-section .map-echo,.mission-packet,.wifi-ripples,.page-dots{display:none}.concept-explanation,.motion-stage,.stage-feedback{opacity:1!important;transform:none!important}}html{scroll-padding-top:96px}#overview,.chapter-section,.playground-wrap{scroll-margin-top:0}.concept-explanation:before{content:none}.concept-label{color:var(--blue);letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px;font-size:10px;font-weight:950;line-height:1.25;display:block}.chapter-lead{align-items:baseline;gap:10px 18px;max-width:1040px;margin:-8px 0 22px;font-size:15px;font-weight:650;line-height:1.5;display:flex}.chapter-lead strong{font-size:clamp(16px,1.35vw,19px);font-weight:850}.chapter-lead span{opacity:.82}.synthesis-intro{max-width:920px;margin:0 0 22px;font-size:15px;font-weight:700;line-height:1.55}.chapter-progress.is-overview .journey-progress-marker{display:none}.chapter-section>.play-card{min-height:0;transition:none;transform:none}.chapter-section.reveal-ready{transform:none}.concept-layout{grid-template:"motion explanation""feedback feedback"/minmax(0,1.5fr) minmax(340px,.78fr)}.stage-feedback{grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);align-items:stretch}.chapter-seven-thread{box-shadow:0 14px 0 var(--coral);margin:74px 0 88px;padding:clamp(24px,4vw,46px);scroll-margin-top:96px}.performance-guide{border:0;border-left:4px solid var(--blue);background:0 0;border-radius:0;margin:0 0 16px;padding:10px 0 10px 14px;font-size:14px;line-height:1.5}@media (max-width:900px){.mission-route,.mission-route.hero-route{grid-template-columns:1fr;max-width:540px;margin-inline:auto}.combined-route{min-height:0}.mission-route .route-stage,.mission-route .route-stage:last-child{grid-template-columns:1fr;justify-items:center}.mission-route .route-stage>.route-connector{grid-area:auto/1}.dns-side-lookup{width:100%;margin:10px 0 8px;position:static;transform:none}.mission-route .dns-branch-station{width:100%;min-height:154px}.mission-route .route-station{grid-template-rows:auto auto;grid-template-columns:118px minmax(130px,210px);justify-content:center;column-gap:24px;width:100%;min-height:154px}.mission-flow .mission-route .speech-bubble{grid-column:1/-1;margin:0 0 3px}.mission-route .station-tile{grid-area:2/1}.mission-route .station-label{grid-area:2/2;margin:0}.mission-flow .route-connector{background-image:repeating-linear-gradient(transparent 0 5px, var(--ink) 5px 10px);background-position:50%;background-repeat:repeat-y;background-size:4px;width:4px;height:46px}.mission-flow .route-connector:after{content:"⇅";top:20px;left:-10px;right:auto}.mission-packet{top:-2px;left:-15px;right:auto}.lookup-query,.website-request{animation-name:missionForwardVertical}.lookup-answer,.website-response{animation-name:missionBackwardVertical;inset:auto auto -2px -15px}}@media (max-width:1050px){.concept-layout{grid-template-columns:1fr;grid-template-areas:"motion""explanation""feedback"}.concept-explanation:after{display:none}}@media (max-width:900px){.reveal-ready{transform:translateY(18px)}.reveal-ready.is-visible{transform:none}.chapter-section{scroll-margin-top:104px;overflow:visible}.chapter-lead{flex-wrap:wrap;margin-top:-4px}.chapter-seven-thread{margin:58px 0 72px}}@media (max-width:720px){html{scroll-padding-top:82px}.site-header,.site-shell,.site-footer{width:min(100% - 28px,1440px)}.site-header{gap:10px;min-height:66px}.brand{letter-spacing:.07em;gap:8px;font-size:11px}.brand-face{width:34px;height:34px}.beginner-pill{display:none}.motion-toggle{min-height:40px;padding:7px 10px;font-size:11px}#overview,.chapter-section,.chapter-seven-thread,.playground-wrap{scroll-margin-top:0}.chapter-progress{grid-template-columns:72px minmax(0,1fr);gap:5px;min-height:64px;padding:6px 10px 8px}.progress-label span{display:none}.progress-label strong{font-size:11px}.chapter-progress a span{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.chapter-progress a{min-height:38px}.chapter-progress b{width:30px;height:30px;font-size:11px}.chapter-progress ol:before{top:14px}.journey-progress-marker{top:-7px}.hero{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:24px;padding:42px 0 30px}.hero-title-wrap,.hero-intro{width:100%;min-width:0}.hero-intro{border-radius:24px;padding:20px}.hero-intro>p{margin-bottom:16px;font-size:18px}.route-lab{box-shadow:0 10px 0 var(--blue);border-radius:28px;padding:20px 14px 18px}.lab-heading,.play-card-heading{flex-direction:column;align-items:flex-start}.lab-actions{width:100%}.chapter-section{box-shadow:0 10px 0 var(--chapter-shadow);border-radius:30px;margin:48px 0;padding:24px 16px}.chapter-masthead{gap:9px;margin-bottom:14px}.chapter-masthead h2{overflow-wrap:normal;word-break:normal;font-size:clamp(38px,11vw,52px);line-height:.98}.chapter-lead{margin:0 0 18px;font-size:14px;line-height:1.45;display:block}.chapter-lead strong{margin-bottom:3px;font-size:15px;display:block}.play-card{padding:18px 14px}.play-card-heading h3{font-size:20px;line-height:1.25}.concept-layout{gap:14px;margin-top:18px}.motion-stage{min-height:320px}.local-map{grid-template-columns:minmax(0,1fr);gap:0;margin-top:22px}.local-node{gap:12px;width:100%;min-height:104px}.local-path,.local-map.cable .local-path:first-of-type,.local-map.wifi .local-path:first-of-type{background-image:repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 13px);background-position:50%;background-repeat:repeat-y;background-size:4px;border:0;justify-self:center;width:4px;height:54px}.local-map.cable .local-path:first-of-type{background-image:linear-gradient(var(--ink), var(--ink))}.local-map.wifi .local-path:first-of-type{background-image:repeating-linear-gradient(180deg, var(--blue) 0 4px, transparent 4px 11px)}.local-path:after{content:"⌄";font-size:25px;top:17px;left:-9px;right:auto}.local-path>span:not(.packet-face){top:18px;left:14px}.local-packet{top:-2px;left:-15px}.chapter-section.is-active .local-packet{animation-name:localPacketVertical}.dns-flow{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:24px}.dns-flow:before{border-top:0;border-left:4px dotted var(--ink);width:0;height:calc(100% - 150px);top:75px;left:50%}.dns-flow:after{display:none}.dns-value{width:100%;min-height:104px}.dns-book{justify-self:center}.dns-flow .dns-packet{display:none!important}.keep-going{box-sizing:border-box;text-align:center;white-space:normal;width:calc(100% - 12px);max-width:calc(100% - 12px);font-size:10px;line-height:1.15;left:auto;right:6px}.concept-explanation{padding:15px;font-size:15px}.stage-feedback{grid-template-columns:1fr}.small-button,.segmented button,.use-case-buttons button,.web-stepper button,.step-controls button{min-height:44px}.web-stepper{overscroll-behavior-inline:contain;scrollbar-color:var(--blue) transparent;scrollbar-width:thin;scroll-snap-type:inline mandatory;gap:8px;padding:2px 2px 10px;display:flex;overflow-x:auto}.web-stepper li{scroll-snap-align:start;flex:0 0 148px}.web-stepper button{height:100%}.performance-guide{margin-bottom:12px;padding-block:6px;font-size:13px}.chapter-seven-thread{border-radius:26px;margin:48px 0 62px;padding:20px 16px}}@keyframes localPacketVertical{0%{opacity:0;top:-2px;transform:rotate(-8deg)}14%{opacity:1}84%{opacity:1;top:calc(100% - 30px);transform:rotate(7deg)}to{opacity:0;top:calc(100% - 30px)}}@media (max-width:620px){.hero{padding-top:30px}.hero h1{font-size:clamp(48px,14vw,64px)}.hero-intro{padding:18px}.lab-heading,.play-card-heading,.stacked-mobile{gap:12px}.button-pair,.dns-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;display:grid}.button-pair .small-button,.dns-controls .small-button{width:100%}.mission-phase{padding:15px 12px 12px}.mission-phase-heading{display:block}.mission-phase-heading h3{font-size:20px;line-height:1.2}.mission-phase-heading p{margin-top:7px;font-size:13px;line-height:1.5}.traffic-key{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0 4px;font-size:9px;display:grid}.traffic-key span{text-align:center;place-items:center;min-height:34px;padding:4px 6px;display:grid}.mission-route .route-station,.mission-route .dns-branch-station{grid-template-rows:auto auto;grid-template-columns:76px minmax(0,1fr);column-gap:10px;min-height:104px;padding:8px}.mission-flow .mission-route .speech-bubble{margin-bottom:2px;font-size:11px}.mission-route .station-tile{width:72px;min-height:72px}.mission-route .station-label{white-space:normal;min-width:0;font-size:14px}.mission-flow .route-connector{height:26px}.mission-flow .route-connector:after{top:9px}.dns-side-lookup{gap:4px;margin:6px 0;padding:8px 6px 6px}.dns-side-label{white-space:normal;font-size:8px}.dns-branch-connector{height:28px}.route-caveat{margin-top:8px;font-size:12px;line-height:1.45}.motion-stage{min-height:290px;padding:14px 9px}.performance-grid label{padding:12px}.synthesis-intro{margin-bottom:16px;font-size:14px}}@media (max-width:420px){.site-header,.site-shell,.site-footer{width:calc(100% - 16px)}.brand{font-size:10px}.brand-face{width:34px;height:34px}.chapter-progress{padding-inline:7px}.chapter-progress b{width:28px;height:28px}.chapter-section{padding-inline:12px}.play-card{padding-inline:11px}.button-pair,.dns-controls{grid-template-columns:1fr}}@media (min-width:901px) and (max-width:1180px){.dns-side-lookup,.mission-route .dns-branch-station{min-width:0}.dns-side-label{white-space:normal;max-width:100%}}.dns-side-lookup,.mission-route .dns-branch-station{box-sizing:border-box;min-width:0;max-width:100%}.dns-side-label{box-sizing:border-box;overflow-wrap:break-word;white-space:normal;max-width:100%;line-height:1.25}.route-caveat{margin:12px 0 4px}.browser-scene>*,.web-art>*{box-sizing:border-box;min-width:0;max-width:100%}@media (max-width:1400px){.website-concept-layout{grid-template:"motion""explanation""feedback"/minmax(0,1fr)}.website-concept-layout .concept-explanation:after{display:none}.website-concept-layout .motion-stage{min-height:0}}@media (max-width:920px){.website-concept-layout .browser-scene{grid-template-columns:minmax(0,1fr)}}.route-fork,.route-join{display:none}@media (max-width:900px){.mission-route .route-stage,.mission-route .route-stage:last-child{grid-template-columns:minmax(0,1fr);justify-items:center}.mission-route .route-station{grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:7px;width:min(100%,320px);min-height:0;padding:8px 12px 12px}.mission-flow .mission-route .speech-bubble{white-space:normal;grid-area:1/1;max-width:min(100%,220px);margin:0 0 2px}.mission-route .station-tile{grid-area:2/1;width:88px;min-height:88px}.mission-route .station-label{text-align:center;white-space:normal;grid-area:3/1;margin:2px 0 0;font-size:13px}.mission-route .route-stage>.route-connector{grid-area:auto/1;justify-self:center;width:4px;height:42px}.mission-flow .route-connector:after{content:"⇅";top:15px;left:-10px;right:auto}.dns-side-lookup{border-radius:14px;grid-template-rows:auto auto;grid-template-columns:32px minmax(0,1fr);justify-self:start;place-items:center stretch;gap:6px 0;width:min(50%,300px);margin:8px 0 12px 50%;padding:8px 7px 8px 0;display:grid}.dns-side-label{white-space:normal;border-radius:11px;grid-area:1/1/auto/-1;margin-left:6px;font-size:8px;line-height:1.25}.dns-branch-connector{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px);background-position:50%;background-repeat:repeat-x;grid-area:2/1;width:100%;height:4px}.dns-branch-connector:after{content:"⇄";font-family:var(--display);font-size:18px;font-weight:900;position:absolute;top:-22px;left:6px}.dns-side-lookup .mission-packet{display:none}.mission-route .dns-branch-station{grid-area:2/2;grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr);width:100%;min-height:126px;padding:7px 5px 9px}.mission-route .dns-branch-station .station-tile{width:62px;min-height:62px}.mission-route .dns-branch-station .station-label{font-size:10px}}@media (max-width:720px){.protocol-lane{opacity:.72;grid-template-columns:minmax(0,1fr);gap:10px;padding:13px}.protocol-lane.recommended{opacity:1}.protocol-lane>strong{font-size:21px}.protocol-lane small{font-size:11px;line-height:1.35}.protocol-track{width:100%;height:98px;margin-top:12px;overflow:visible}.chapter-section.is-active .mini-packet{animation-name:protocolFlowPhone;animation-duration:4.8s}.chapter-section.is-active .mini-packet.p-2{animation-delay:.6s}.chapter-section.is-active .mini-packet.p-3{animation-delay:1.2s}.chapter-section.is-active .mini-packet.p-4{animation-delay:1.8s}.chapter-section.is-active .tcp-lane .p-3{animation-name:tcpRetryPhone;animation-duration:5.4s}.chapter-section.is-active .udp-lane .p-3{animation-name:udpDrop;animation-duration:4.8s}.chapter-section.is-active .ack-one{animation-name:ackReturnPhone}.ack-two{display:none}.ack-one{top:64px;right:4px}.retry-flag{top:38px;left:4px}.keep-going{white-space:nowrap;width:auto;max-width:calc(100% - 8px);top:58px;left:auto;right:4px}.web-stepper{scroll-snap-type:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;display:grid;overflow:visible}.web-stepper li{flex:initial;min-width:0}.web-stepper button{height:100%;min-height:68px;padding:8px;font-size:12px;line-height:1.25}.browser-scene{flex-direction:column;gap:12px;display:flex}.web-step-detail{order:-1;padding:16px}.web-step-detail h3{margin-block:6px;font-size:20px}.web-step-detail p{font-size:13px}.step-controls{margin-top:14px}.browser-page{min-height:0;padding:52px 12px 12px}.web-art,.web-dns-art{gap:8px;min-height:0}.web-ticket,.web-ip-ticket,.handshake-node,.request-card,.request-server,.file-source,.file-browser{min-height:70px}.web-dns-book{min-height:82px}.website-concept-layout .web-ticket,.website-concept-layout .web-ip-ticket,.website-concept-layout .web-dns-book,.website-concept-layout .handshake-node,.website-concept-layout .request-card,.website-concept-layout .request-server,.website-concept-layout .file-source,.website-concept-layout .file-browser{padding:7px;font-size:10px}.website-concept-layout .web-dns-book,.website-concept-layout .request-card{font-size:16px}.website-concept-layout .web-dns-art,.website-concept-layout .web-handshake-art,.website-concept-layout .web-request-art,.website-concept-layout .web-files-art{grid-template-columns:minmax(70px,1fr) minmax(48px,.58fr) minmax(70px,1fr);align-items:center;gap:6px}.website-concept-layout .web-dns-art .web-ticket{grid-area:1/1}.website-concept-layout .web-dns-art .web-art-path{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px);background-repeat:repeat-x;grid-area:1/1/auto/4;width:100%;height:5px}.website-concept-layout .web-dns-art .web-dns-book{grid-area:1/2}.website-concept-layout .web-dns-art .web-ip-ticket{grid-area:1/3}.website-concept-layout .web-moving-packet,.website-concept-layout .request-packet{animation-name:pathTravelLoop;top:-15px;left:0}.website-concept-layout .request-track,.website-concept-layout .file-stream{background-image:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px);background-repeat:repeat-x;justify-self:stretch;width:100%;height:5px;min-height:5px}.website-concept-layout .handshake-line{background:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px) center 38% / auto 4px repeat-x, repeating-linear-gradient(90deg, var(--blue) 0 5px, transparent 5px 10px) center 68% / auto 4px repeat-x;justify-self:stretch;width:100%;height:auto;min-height:84px}.web-art-path,.request-track,.handshake-line,.file-stream{height:50px}}@media (max-width:620px){.mission-route .route-stage,.mission-route .route-stage:last-child{grid-template-columns:minmax(100px,.86fr) minmax(122px,1.14fr);justify-items:center;column-gap:8px;width:100%}.mission-route .route-stage>.route-station{grid-area:1/1;width:100%;min-height:132px;padding-inline:2px}.mission-route .route-stage>.route-connector{grid-area:2/1}.mission-route .station-tile{width:76px;min-height:76px}.mission-route .station-label{font-size:12px}.dns-side-lookup{grid-area:1/2/span 2;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);place-self:center stretch;width:100%;margin:0;padding:7px;display:grid;position:relative}.dns-side-lookup:before{content:"";border-top:4px dotted var(--ink);width:calc(38% + 10px);position:absolute;top:50%;right:100%}.dns-side-lookup:after{content:"⇄";font-family:var(--display);font-size:17px;font-weight:900;position:absolute;top:calc(50% - 20px);right:calc(119% - 8px)}.dns-side-label{grid-area:1/1;margin:0 0 6px}.dns-branch-connector{display:none}.mission-route .dns-branch-station{grid-area:2/1;min-height:118px}.mission-route .dns-branch-station .station-tile{width:58px;min-height:58px}.route-map{grid-template-columns:minmax(0,1fr);gap:26px;width:100%;max-width:360px;margin-inline:auto}.route-map .map-endpoint{justify-self:center;width:min(76%,190px);min-height:72px}.path-stack{grid-template-rows:auto 32px 190px 32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;width:100%;max-width:320px;margin-inline:auto;display:grid}.route-junction{grid-area:1/1/auto/-1;min-height:70px}.route-junction:before,.end-point:before{background:var(--ink);clip-path:polygon(0 38%,82% 38%,82% 0,100% 50%,82% 100%,82% 62%,0 62%);transform-origin:0;width:34px;height:12px;top:-30px;left:50%;right:auto;transform:rotate(90deg)}.end-point{position:relative}.end-point:before{content:"";position:absolute}.route-fork,.route-join{grid-column:1/-1;width:100%;height:32px;display:block;position:relative}.route-fork{background:linear-gradient(var(--ink), var(--ink)) center top / 3px 11px no-repeat;grid-row:2}.route-join{background:linear-gradient(var(--ink), var(--ink)) center bottom / 3px 11px no-repeat;grid-row:4}.route-fork:before,.route-fork:after,.route-join:before,.route-join:after{content:"";background:var(--ink);width:calc(25% + 5px);height:3px;position:absolute}.route-fork:before{transform-origin:100%;top:10px;right:50%;transform:rotate(-15deg)}.route-fork:after{transform-origin:0;top:10px;left:50%;transform:rotate(15deg)}.route-join:before{transform-origin:100%;bottom:10px;right:50%;transform:rotate(15deg)}.route-join:after{transform-origin:0;bottom:10px;left:50%;transform:rotate(-15deg)}.direct-path,.detour-path{grid-row:3;min-height:190px}.direct-path{grid-column:1}.detour-path{grid-column:2}.route-map .map-path{background-image:repeating-linear-gradient(180deg, var(--route-color) 0 6px, transparent 6px 14px);background-position:50%;background-repeat:repeat-y;background-size:4px;flex-direction:column;justify-content:space-evenly;min-width:0;padding:36px 4px 14px;display:flex}.map-path>.path-name{text-align:center;white-space:normal;max-width:calc(100% - 4px);padding-inline:6px;font-size:8px;line-height:1.2;top:2px}.path-stack .map-path:before,.path-stack .map-path:after{display:none}.map-packet{top:12px;left:calc(50% - 17px)}.chapter-section.is-active .route-map.direct .direct-path .map-packet,.chapter-section.is-active .route-map.detour .detour-path .map-packet{animation-name:routeTracePhone}.chapter-section.is-active .route-map .map-echo{display:none!important}}@keyframes protocolFlowPhone{0%{opacity:0;left:0;transform:rotate(-7deg)}10%{opacity:1}70%{opacity:1;left:calc(100% - 38px);transform:rotate(5deg)}78%,to{opacity:0;left:calc(100% - 38px)}}@keyframes tcpRetryPhone{0%{opacity:0;left:0;transform:translateY(0)}9%{opacity:1}38%{opacity:1;left:48%;transform:translateY(0)rotate(5deg)}46%{opacity:.3;left:48%;transform:translateY(14px)rotate(-8deg)}54%{opacity:1;left:0;transform:translateY(0)}78%{opacity:1;left:calc(100% - 38px)}84%,to{opacity:0;left:calc(100% - 38px)}}@keyframes ackReturnPhone{0%,40%,to{opacity:0;transform:translate(0)}48%{opacity:1}78%{opacity:1;transform:translate(-28px)}86%{opacity:0;transform:translate(-36px)}}@keyframes routeTracePhone{0%{opacity:0;top:12px;left:calc(50% - 17px);transform:rotate(-6deg)}10%{opacity:1}78%{opacity:1;top:calc(100% - 46px);left:calc(50% - 17px);transform:rotate(5deg)}90%,to{opacity:0;top:calc(100% - 46px);left:calc(50% - 17px);transform:rotate(5deg)}}