@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #eef6ff;--bg-soft: #dcebff;--panel: rgba(255, 255, 255, .92);--panel-strong: #f8fbff;--line: rgba(41, 102, 214, .14);--text: #0d2a57;--muted: #5b78a4;--accent: #2f7df6;--accent-strong: #175dd1;--accent-soft: #e3efff;--accent-warm: #4b8cff;--shadow: 0 24px 70px rgba(42, 99, 199, .12);--page-background: radial-gradient(circle at top left, rgba(92, 160, 255, .18), transparent 24%), radial-gradient(circle at top right, rgba(180, 215, 255, .5), transparent 34%), linear-gradient(180deg, #fbfdff 0%, #edf5ff 52%, #e4f0ff 100%);--grid-overlay: linear-gradient(rgba(47, 125, 246, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 125, 246, .06) 1px, transparent 1px)}:root[data-theme=dark]{--bg: #0b1524;--bg-soft: #101d31;--panel: rgba(14, 26, 44, .9);--panel-strong: #13243b;--line: rgba(126, 177, 255, .16);--text: #edf4ff;--muted: #a6bad8;--accent: #5f9cff;--accent-strong: #8ec1ff;--accent-soft: rgba(95, 156, 255, .14);--accent-warm: #9dccff;--shadow: 0 28px 80px rgba(0, 8, 20, .45);--page-background: radial-gradient(circle at top left, rgba(70, 129, 216, .22), transparent 25%), radial-gradient(circle at top right, rgba(31, 64, 110, .42), transparent 36%), linear-gradient(180deg, #07111d 0%, #0c1728 55%, #101d31 100%);--grid-overlay: linear-gradient(rgba(126, 177, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 177, 255, .07) 1px, transparent 1px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--page-background);color:var(--text);font-family:Space Grotesk,sans-serif}button,input{font:inherit}#root{width:100%}.app-shell{position:relative;overflow:hidden}.top-navbar{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;gap:.75rem;max-width:1240px;margin:0 auto;padding:1rem 1.5rem 0}.app-shell:before{content:"";position:fixed;inset:0;background-image:var(--grid-overlay);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 94%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 94%);pointer-events:none}.hero-section{display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:center;max-width:1240px;margin:0 auto;padding:3rem 1.5rem 2.5rem}.hero-copy h1,.section-heading h2{margin:0;line-height:1;color:var(--text)}.hero-copy h1{font-size:clamp(2.8rem,6vw,5rem);max-width:11ch}.hero-text{max-width:58ch;color:var(--muted);font-size:1.08rem;margin:1.25rem 0 2rem}.button-row{display:flex;flex-wrap:wrap;gap:.8rem}.nav-button{border:1px solid var(--line);border-radius:999px;padding:.82rem 1.15rem;color:var(--text);background:#ffffffd1;box-shadow:0 10px 24px #3d73d314;transition:transform .18s ease,border-color .18s ease,background .18s ease}.nav-button:hover{transform:translateY(-2px);border-color:#2f7df673;background:#fff}.nav-button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;border-color:transparent;font-weight:700}.top-nav-button{padding:.72rem 1rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hero-visual{position:relative;min-height:390px}.signal-card{position:absolute;width:min(100%,340px);padding:1.2rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#fffffff5,#ecf5fff5);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.signal-label{display:block;color:var(--muted);margin-bottom:.55rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.signal-card strong{font-family:IBM Plex Mono,monospace;font-size:1.05rem;color:var(--accent-strong)}.frame-card{top:0;left:0}.bits-card{top:128px;right:0}.fragment-card{bottom:20px;left:50px}.content-layout{max-width:1240px;margin:0 auto;padding:0 1.5rem 4rem}.overview-strip,.reference-grid{display:grid;gap:1.2rem}.overview-strip{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:3rem}.overview-strip article,.topic-card,.sim-card,.reference-card,.video-card,.modal-card{border:1px solid var(--line);background:var(--panel);border-radius:28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.overview-strip article,.topic-card,.sim-card,.reference-card,.video-card,.modal-card{padding:1.4rem}.overview-strip span,.sim-card-head span,.topic-subtitle{color:var(--accent-warm)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.2rem}.section-heading h2{font-size:clamp(2rem,3vw,3.1rem)}.tab-bar-section,.learn-section,.simulator-section,.video-section,.references-section{margin-bottom:3rem}.compact-tabs{max-width:760px}.main-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.topic-tab{border-radius:24px;border:1px solid var(--line);background:#ffffffd1;color:var(--muted);padding:1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;text-align:left;box-shadow:0 12px 24px #3d73d314}.topic-tab span{font-size:1rem;font-weight:700;color:var(--text)}.topic-tab small{font-size:.84rem;color:var(--muted)}.topic-tab.active{color:#fff;background:linear-gradient(145deg,#2f7df6,#114fb7);border-color:transparent}.topic-tab.active span,.topic-tab.active small{color:#fff}.topic-headline{display:flex;justify-content:space-between;gap:1rem;align-items:start}.topic-headline h3,.sim-card h3,.reference-card h3,.video-card h3,.modal-card h3,.stepwise-block h4{margin:.2rem 0 .5rem}.topic-pill{border-radius:999px;padding:.45rem .7rem;background:var(--accent-soft);color:var(--accent-strong);font-size:.82rem}.stepwise-block{margin-top:1rem;padding:1rem;border-radius:20px;background:linear-gradient(180deg,#f4f9ff,#edf5ff);border:1px solid rgba(41,102,214,.12)}.stepwise-block ol{margin:.5rem 0 0;padding-left:1.1rem;color:var(--muted)}.parameter-list{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.parameter-list span{border-radius:999px;padding:.55rem .8rem;background:var(--accent-soft);color:var(--accent-strong);font-size:.92rem}.solo-card{width:100%}.sim-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:center}.input-grid{display:grid;gap:1rem;margin:1rem 0 1.2rem}.input-grid.three-up{grid-template-columns:repeat(3,1fr)}label{display:grid;gap:.45rem;color:var(--muted);font-size:.92rem}input{width:100%;border-radius:14px;border:1px solid rgba(41,102,214,.18);padding:.85rem .95rem;background:#fff;color:var(--text)}.output-box,.error-box{border-radius:18px;padding:1rem;margin-bottom:1rem;font-family:IBM Plex Mono,monospace}.output-box{background:#eef5ff;border:1px solid rgba(47,125,246,.18)}.error-box{background:#f7fbff;border:1px solid rgba(47,125,246,.18);color:#1a4f9c}.step-list{display:grid;gap:.8rem;max-height:380px;overflow:auto;padding-right:.2rem}.step-item,.fragment-card-block{border-radius:18px;padding:.95rem;border:1px solid rgba(41,102,214,.12);background:linear-gradient(180deg,#fff,#f6faff)}.step-item p,.reference-card ul,.reference-card li,.video-card p,.modal-card p,.fragment-card-block p,.overview-strip p{color:var(--muted)}.step-item code,.output-box,.fragment-card-block p{word-break:break-word}.fragment-visuals{display:grid;gap:1rem;margin-bottom:1rem}.fragment-bar{display:flex;overflow:hidden;border-radius:999px;min-height:48px}.header-segment,.payload-segment{display:flex;align-items:center;justify-content:center;padding:.75rem;font-size:.86rem}.header-segment{min-width:110px;background:linear-gradient(135deg,#95bdff,#6ca7ff);color:#083a7e}.payload-segment{flex:1;background:linear-gradient(135deg,#dcecff,#b8d6ff);color:#0c3871}.video-card{display:grid;grid-template-columns:1fr 1.2fr;gap:1.2rem;align-items:center}.video-card a,.reference-card a{color:var(--accent-strong)}.video-card iframe{width:100%;aspect-ratio:16 / 9;border:0;border-radius:22px}.reference-grid{grid-template-columns:repeat(3,1fr)}.reference-card ul{padding-left:1.1rem;margin-bottom:0}.modal-backdrop{position:fixed;inset:0;background:#658ed43d;display:grid;place-items:center;padding:1rem;z-index:20}.modal-card{width:min(100%,560px)}@media(max-width:1080px){.hero-section,.video-card,.overview-strip,.reference-grid,.main-tabs{grid-template-columns:1fr}.hero-visual{min-height:320px}.signal-card{position:relative;width:100%;inset:auto;margin-bottom:1rem}}@media(max-width:720px){.top-navbar{justify-content:center;flex-wrap:wrap;padding-top:.85rem}.hero-section{padding-top:2.5rem}.hero-copy h1{max-width:none}.input-grid.three-up,.sim-card-head,.section-heading,.video-card,.fragment-bar,.offset-example-header,.offset-dynamic-layout{display:grid;grid-template-columns:1fr}.offset-origin-column:after,.offset-split-column:before,.offset-row-connector{display:none}.offset-split-column{padding-left:0}.offset-packet-origin{max-width:none}}.profile-section+.profile-section{margin-top:1.25rem}.profile-section-title{margin-bottom:.9rem}.profile-list{display:grid;gap:.9rem}.profile-item{display:flex;align-items:center;gap:.9rem;padding:.9rem;border-radius:20px;border:1px solid rgba(41,102,214,.12);background:linear-gradient(180deg,#fff,#f6faff)}.profile-photo{width:68px;height:68px;border-radius:18px;object-fit:cover;border:2px solid rgba(47,125,246,.2);box-shadow:0 10px 22px #3d73d31f;flex-shrink:0}.profile-name,.profile-role{margin:0}.profile-name{color:var(--text);font-weight:700}.profile-role{margin-top:.2rem}@media(max-width:520px){.profile-item{align-items:flex-start}.profile-photo{width:60px;height:60px;border-radius:16px}}.route-visual-card{margin-bottom:1.2rem;padding:1.25rem;border-radius:24px;border:1px solid rgba(41,102,214,.14);background:linear-gradient(180deg,#fffffffa,#ebf4ffeb);box-shadow:0 18px 38px #3a70cf14}.route-visual-header{display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:1rem}.route-visual-header h4,.route-fragment-card h5{margin:0}.route-visual-header p,.route-fragment-card p,.network-node small,.network-node-label,.route-link-label{color:var(--muted)}.route-flow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(80px,.8fr) minmax(160px,1fr) minmax(80px,.8fr) minmax(140px,1fr);gap:.9rem;align-items:center;margin-bottom:1.2rem}.network-node{position:relative;display:grid;gap:.25rem;padding:1rem;border-radius:22px;border:1px solid rgba(41,102,214,.14);background:linear-gradient(180deg,#fff,#f3f8ff);box-shadow:0 14px 28px #3d73d314}.network-node strong{color:var(--text)}.network-node-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.router-node{background:linear-gradient(180deg,#eef5ff,#dfeeff)}.destination-node{background:linear-gradient(180deg,#f8fbff,#edf5ff)}.route-link{position:relative;min-height:3px;border-radius:999px;background:linear-gradient(90deg,#2f7df626,#2f7df6b3)}.route-link:after{content:"";position:absolute;top:50%;right:-2px;width:12px;height:12px;border-top:3px solid rgba(47,125,246,.7);border-right:3px solid rgba(47,125,246,.7);transform:translateY(-50%) rotate(45deg)}.constrained-link{background:linear-gradient(90deg,#175dd14d,#175dd1e6)}.constrained-link:after{border-top-color:#175dd1e6;border-right-color:#175dd1e6}.route-link-label{position:absolute;left:50%;bottom:.75rem;transform:translate(-50%);white-space:nowrap;font-size:.78rem}.route-fragment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.route-fragment-card{padding:1rem;border-radius:22px;border:1px solid rgba(41,102,214,.14);background:linear-gradient(180deg,#fff,#f7fbff)}.original-datagram-card{background:linear-gradient(180deg,#f3f8ff,#e7f1ff)}.route-fragment-tag{display:inline-flex;margin-bottom:.65rem;padding:.32rem .62rem;border-radius:999px;background:#2f7df61a;color:var(--accent-strong);font-size:.76rem;font-weight:700}.mini-fragment-bar{display:flex;overflow:hidden;min-height:42px;margin:.85rem 0;border-radius:18px;box-shadow:inset 0 0 0 1px #2966d614}.mini-header-segment,.mini-payload-segment{display:flex;align-items:center;justify-content:center;padding:.65rem;font-size:.78rem}.mini-header-segment{min-width:86px;background:linear-gradient(135deg,#9fc4ff,#78adff);color:#0b3c82}.mini-payload-segment{flex:1;background:linear-gradient(135deg,#e4f0ff,#bdd9ff);color:#10417d}.original-bar .mini-payload-segment{background:linear-gradient(135deg,#d6e8ff,#a8cbff)}.theme-toggle{min-width:116px}:root[data-theme=dark] .nav-button{background:#13243beb;color:var(--text);box-shadow:0 12px 28px #00000042}:root[data-theme=dark] .nav-button:hover{background:#182c46f5}:root[data-theme=dark] .nav-button.primary{background:linear-gradient(135deg,#3d7cf2,#69b0ff)}:root[data-theme=dark] input{background:#11233a;color:var(--text);border-color:#7eb1ff2e}:root[data-theme=dark] .output-box{background:#11233ae0;border-color:#7eb1ff29}:root[data-theme=dark] .error-box{background:#221324e0;border-color:#ff7ead2e;color:#ffd8e8}:root[data-theme=dark] .step-item,:root[data-theme=dark] .fragment-card-block,:root[data-theme=dark] .profile-item{background:linear-gradient(180deg,#13243b,#102033)}:root[data-theme=dark] .stepwise-block,:root[data-theme=dark] .route-visual-card,:root[data-theme=dark] .offset-example-card{margin-bottom:1.2rem;padding:1.25rem;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,#fffffffa,#eff6fff0);box-shadow:var(--shadow)}.offset-example-header{display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:1rem}.offset-example-header h4{margin:0;color:var(--text)}.offset-example-header p,.offset-bytes,.offset-name{color:var(--muted)}.offset-dynamic-layout{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);gap:1.5rem;align-items:center}.offset-origin-column{position:relative;display:flex;align-items:center}.offset-origin-column:after{content:"";position:absolute;top:50%;right:-.9rem;width:1.4rem;height:2px;background:linear-gradient(90deg,#2047824d,#204782cc)}.offset-split-column{position:relative;display:grid;gap:1rem;padding-left:1.6rem}.offset-split-column:before{content:"";position:absolute;left:.2rem;top:1.2rem;bottom:1.2rem;width:2px;background:linear-gradient(180deg,#20478259,#204782bf)}.offset-fragment-row{position:relative;display:flex;align-items:center}.offset-row-connector{position:absolute;left:-1.4rem;width:1.4rem;height:2px;background:linear-gradient(90deg,#20478259,#204782cc)}.offset-packet-card{width:100%;padding:.9rem;border-radius:20px;border:1px solid rgba(41,102,214,.14);background:#fffffff5;box-shadow:0 18px 32px #3d73d314}.offset-packet-origin{max-width:260px}.offset-field-row{display:grid;grid-template-columns:1.1fr .8fr .8fr .8fr;gap:.35rem;margin-bottom:.75rem}.offset-field{padding:.38rem .4rem;border-radius:10px;background:#f4f8ff;border:1px solid rgba(41,102,214,.1);font-family:IBM Plex Mono,monospace;font-size:.72rem;text-align:center;color:var(--text)}.offset-highlight{background:linear-gradient(135deg,#ffd8ea,#ffbfdc);color:#8b2a56}.offset-bytes,.offset-name{margin:0;text-align:center}.offset-bytes{font-family:IBM Plex Mono,monospace;font-size:.82rem;color:var(--text)}.offset-name{margin-top:.35rem;font-size:.88rem}:root[data-theme=dark] .offset-packet-card{background:#142338f5;border-color:#7eb1ff29}:root[data-theme=dark] .offset-field{background:#0b1625eb;border-color:#7eb1ff1f}:root[data-theme=dark] .offset-highlight{background:linear-gradient(135deg,#6f2950,#8c3d68);color:#ffe1ef}:root[data-theme=dark] .offset-origin-column:after,:root[data-theme=dark] .offset-split-column:before,:root[data-theme=dark] .offset-row-connector{background:linear-gradient(90deg,#7eb1ff47,#7eb1ffcc)}