:root {
  color-scheme: dark;
  --ink: #e7f3ed;
  --muted: #93a9a5;
  --canvas: #061015;
  --card: rgba(9, 29, 35, 0.82);
  --border: rgba(169, 221, 203, 0.15);
  --control: #74d9ff;
  --signal: #e6bd65;
  --media: #51e2a8;
  --alert: #ff7d65;
  --focus: #e9ff72;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(34, 102, 93, 0.24), transparent 26rem),
    radial-gradient(circle at 90% 24%, rgba(20, 100, 132, 0.22), transparent 28rem),
    linear-gradient(150deg, #07141a 0%, #061015 46%, #04090d 100%);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  letter-spacing: .01em;
}

#webgl { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .66; pointer-events: none; }
.app-shell { position: relative; z-index: 1; width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: clamp(28px, 5vw, 78px) 0 34px; }
.hero { display: flex; gap: 30px; justify-content: space-between; align-items: flex-start; padding: 0 2px 34px; }
.eyebrow, .stage-kicker { margin: 0 0 12px; color: var(--media); font: 700 11px/1.2 "Avenir Next Condensed", "Trebuchet MS", sans-serif; letter-spacing: .16em; }
.signal-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--media); box-shadow: 0 0 18px var(--media); animation: blink 1.5s ease-in-out infinite; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 840px; margin-bottom: 17px; font: 700 clamp(35px, 5vw, 76px)/.97 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
h1 em { color: #b5f5dc; font-weight: 400; }
.hero-copy { max-width: 630px; margin-bottom: 0; color: #afc3bd; font-size: 17px; line-height: 1.55; }
.hero-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-top: 6px; }
.webgl-badge, .mode-switch { border: 1px solid var(--border); border-radius: 999px; background: rgba(7, 20, 26, .72); backdrop-filter: blur(15px); }
.webgl-badge { padding: 7px 11px; color: #8daea5; font: 700 10px/1 monospace; letter-spacing: .09em; }
.webgl-badge.is-live { color: var(--media); border-color: rgba(81, 226, 168, .36); }
.mode-switch { display: flex; padding: 3px; }
button { font: inherit; }
.mode-button, .scenario, .term, .icon-button, .play-button, .details-toggle { border: 0; color: inherit; cursor: pointer; }
.mode-button { padding: 8px 12px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; }
.mode-button.is-active { background: #173943; color: #effff9; }

.scenario-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.scenario { min-height: 51px; border: 1px solid rgba(168, 217, 202, .1); border-radius: 13px; background: rgba(11, 29, 35, .58); color: #a3bab4; text-align: left; padding: 12px 15px; transition: .25s ease; }
.scenario span { display: inline-block; margin-right: 11px; color: #51726b; font: 700 10px monospace; }
.scenario:hover, .scenario.is-active { border-color: rgba(81, 226, 168, .45); background: rgba(20, 61, 61, .76); color: #effff9; }
.scenario.is-active span { color: var(--media); }

.stage-card, .story-card, .protocol-card, .decoder { border: 1px solid var(--border); background: var(--card); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); backdrop-filter: blur(18px); }
.stage-card { overflow: hidden; border-radius: 25px; }
.stage-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 25px 29px 16px; }
.stage-kicker { margin-bottom: 7px; color: var(--signal); }
.stage-topline h2 { margin: 0; font: 500 clamp(23px, 3vw, 38px)/1.03 Georgia, "Times New Roman", serif; letter-spacing: -.03em; }
.transport-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; max-width: 380px; color: #8da39d; font-size: 11px; }
.key { width: 20px; height: 2px; display: inline-block; border-radius: 99px; }
.key.control { background: var(--control); } .key.signal { background: var(--signal); } .key.media { background: var(--media); }

.network-stage { position: relative; min-height: 398px; overflow: hidden; isolation: isolate; background: linear-gradient(90deg, rgba(24, 55, 59, .45), rgba(6, 23, 30, .38) 42%, rgba(34, 51, 38, .2)); }
.network-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .32; background-image: linear-gradient(rgba(154, 231, 207, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 231, 207, .11) 1px, transparent 1px); background-size: 37px 37px; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.stage-glow { position: absolute; top: 48%; left: 52%; width: 390px; height: 250px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(66, 214, 170, .18), transparent 68%); filter: blur(14px); }
.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route { fill: none; stroke-width: 1.6; stroke-dasharray: 4 8; opacity: .5; }
.route.control { stroke: var(--control); } .route.webrtc { stroke: var(--signal); stroke-width: 2.1; } .route.media { stroke: var(--media); stroke-width: 2.3; }
.route.is-active { opacity: 1; filter: drop-shadow(0 0 7px currentColor); animation: route-flow 1s linear infinite; }
.node { position: absolute; z-index: 3; width: 146px; min-height: 116px; padding: 17px 12px 12px; border: 1px solid rgba(177, 228, 211, .2); border-radius: 18px; background: linear-gradient(140deg, rgba(18, 48, 56, .96), rgba(8, 25, 31, .94)); box-shadow: 0 16px 35px rgba(0,0,0,.22); text-align: center; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.node:hover, .node:focus-visible, .node.is-focused { outline: none; transform: translateY(-6px) scale(1.03); border-color: var(--focus); box-shadow: 0 0 0 4px rgba(233,255,114,.09), 0 20px 42px rgba(0,0,0,.32); }
.node.is-touched { border-color: var(--media); box-shadow: 0 0 0 2px rgba(81,226,168,.2), 0 0 34px rgba(81,226,168,.25); }
.node-icon { display: grid; place-items: center; width: 31px; height: 31px; margin: 0 auto 8px; border: 1px solid rgba(210,255,236,.25); border-radius: 9px; color: var(--media); font-size: 19px; }
.node-label { display: block; font-size: 13px; font-weight: 700; } .node small { display: block; margin-top: 5px; color: #89a09a; font-size: 9px; line-height: 1.25; }
.node-source { left: 2%; top: 58%; } .node-control { left: calc(50% - 73px); top: 12%; } .node-rtc-publisher { left: 24%; top: 58%; } .node-translator { left: calc(50% - 73px); top: 58%; } .node-rtc-subscriber { left: 62%; top: 58%; } .node-peer { right: 2%; top: 58%; }
.node-orbit { position: absolute; width: 16px; height: 16px; top: -7px; right: -7px; border: 3px solid #0b262e; border-radius: 50%; background: var(--media); box-shadow: 0 0 15px var(--media); }
.packet-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.packet { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 15px currentColor; will-change: transform, opacity; }
.packet::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: #fff; opacity: .7; }.packet.control { color: var(--control); }.packet.webrtc { color: var(--signal); }.packet.media { color: var(--media); }.packet.alert { color: var(--alert); }
.route-label { position: absolute; z-index: 2; padding: 4px 7px; border: 1px solid rgba(180,230,215,.12); border-radius: 999px; background: rgba(5,15,19,.62); color: #78928c; font: 700 9px/1 monospace; letter-spacing: .06em; }.route-label-control { top: 31%; left: 16%; }.route-label-media { bottom: 19%; left: 51%; }

.fanout-board { margin: 0 22px 17px; padding: 17px; border: 1px solid rgba(81, 226, 168, .27); border-radius: 18px; background: linear-gradient(115deg, rgba(9, 39, 43, .9), rgba(16, 33, 54, .72)); box-shadow: inset 0 1px 0 rgba(210, 255, 236, .08); }
.fanout-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }.fanout-heading p { margin: 0 0 5px; color: #83aba0; font: 700 9px/1.2 monospace; letter-spacing: .11em; }.fanout-heading h3 { margin: 0; font: 600 18px/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.015em; }.fanout-egress { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(81, 226, 168, .32); border-radius: 999px; background: rgba(4, 25, 26, .58); color: var(--media); font: 700 11px/1 monospace; box-shadow: 0 0 20px rgba(81, 226, 168, .11); }
.fanout-flow { display: grid; grid-template-columns: minmax(156px, .74fr) 92px minmax(0, 1.5fr); align-items: stretch; gap: 11px; }.fanout-origin, .fanout-path { border: 1px solid rgba(188, 235, 216, .13); background: rgba(4, 17, 23, .54); }.fanout-origin { display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 15px; border-radius: 14px; }.fanout-origin > span { color: #a7c4bc; font-size: 11px; }.fanout-origin strong { margin: 7px 0 4px; color: var(--signal); font: 700 25px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.08em; }.fanout-origin small { color: #708d85; font-size: 10px; }
.fanout-split { position: relative; display: grid; place-items: center; color: #c3e9d9; font: 700 10px/1.12 monospace; letter-spacing: .05em; text-align: center; }.fanout-split::before, .fanout-split::after { position: absolute; content: ""; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(81, 226, 168, .1), rgba(81, 226, 168, .9)); }.fanout-split::before { right: 50%; left: 0; }.fanout-split::after { right: 0; left: 50%; background: linear-gradient(90deg, rgba(81, 226, 168, .9), rgba(81, 226, 168, .1)); }.fanout-split span { position: relative; z-index: 1; padding: 8px 4px; border: 1px solid rgba(81, 226, 168, .38); border-radius: 50%; background: #0b292c; box-shadow: 0 0 26px rgba(81, 226, 168, .2); }
.fanout-paths { display: grid; gap: 7px; }.fanout-path { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; min-height: 32px; gap: 10px; padding: 7px 11px; border-radius: 10px; transition: .35s ease; }.fanout-path-pulse { width: 8px; height: 8px; border-radius: 50%; background: #576e69; }.fanout-path strong, .fanout-path small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.fanout-path strong { color: #d8ece4; font-size: 11px; }.fanout-path small { margin-top: 2px; color: #77928b; font-size: 9px; }.fanout-path b { color: #9bb8ae; font: 700 10px/1 monospace; white-space: nowrap; }.fanout-path.is-active { border-color: rgba(81, 226, 168, .37); background: rgba(18, 60, 57, .64); }.fanout-path.is-active .fanout-path-pulse { background: var(--media); box-shadow: 0 0 13px var(--media); animation: fanout-pulse 1.25s ease-in-out infinite; }.fanout-path.is-active b { color: var(--media); }.fanout-path.is-restricted { border-color: rgba(230, 189, 101, .42); background: rgba(73, 56, 24, .3); }.fanout-path.is-restricted .fanout-path-pulse { background: var(--signal); box-shadow: 0 0 13px var(--signal); }.fanout-path.is-restricted b { color: var(--signal); }
.fanout-policy { margin-top: 12px; padding: 8px 10px; border-left: 2px solid var(--media); background: rgba(81, 226, 168, .08); color: #c3e8da; font: 700 10px/1.35 monospace; }.fanout-note { margin: 10px 0 0; color: #91aaa3; font-size: 11px; line-height: 1.38; }

.stage-controls { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 17px 23px; border-top: 1px solid var(--border); background: rgba(5,15,19,.36); }.icon-button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: #0b2026; font-size: 18px; }.icon-button:hover { border-color: var(--media); color: var(--media); }.play-button { padding: 10px 16px; border-radius: 999px; background: var(--media); color: #082019; font-size: 12px; font-weight: 800; }.play-button:hover { filter: brightness(1.12); }.play-button span { margin-right: 6px; }.step-pills { display: flex; align-items: center; gap: 6px; }.step-pill { width: 10px; height: 10px; border: 1px solid #76958d; border-radius: 50%; background: transparent; cursor: pointer; }.step-pill.is-active { border-color: var(--media); background: var(--media); box-shadow: 0 0 11px var(--media); }

.explain-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: 12px; margin-top: 12px; }.story-card, .protocol-card { min-height: 276px; padding: 27px; border-radius: 22px; }.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 21px; color: #86a49d; font: 700 10px/1 monospace; letter-spacing: .1em; }.card-number { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; color: var(--signal); }.story-card h3 { max-width: 470px; margin-bottom: 13px; font: 500 clamp(25px, 2.4vw, 35px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }.story-card p { max-width: 600px; color: #abc1ba; font-size: 16px; line-height: 1.58; }.takeaway { margin-top: 20px; padding: 11px 13px; border-left: 2px solid var(--media); background: rgba(69, 191, 147, .08); color: #c7e7db; font-size: 12px; line-height: 1.4; }.protocol-card { background: linear-gradient(135deg, rgba(13,37,43,.94), rgba(7,20,26,.92)); }.protocol-lines { min-height: 132px; padding: 12px 0; }.protocol-line { display: grid; grid-template-columns: 88px 1fr; gap: 11px; padding: 8px 0; border-bottom: 1px solid rgba(192,238,221,.08); color: #bee3d4; font: 12px/1.35 "SFMono-Regular", Consolas, monospace; }.protocol-line:last-child { border-bottom: 0; }.protocol-line span { color: var(--signal); }.protocol-line i { color: #91aaa3; font-style: normal; }.details-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0 0; border-top: 1px solid rgba(192,238,221,.1); background: transparent; color: #a8c6bc; font-size: 12px; text-align: left; }.details-toggle span { color: var(--media); font-size: 18px; }.technical-details { display: none; margin-top: 13px; padding: 12px; border-radius: 12px; background: rgba(1,8,11,.42); color: #829f96; font: 11px/1.55 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }.technical-details.is-open { display: block; }

.decoder { margin-top: 12px; padding: 29px; border-radius: 22px; }.decoder-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.decoder h2 { margin: 0; font: 500 31px/1 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }.decoder-head > p { max-width: 330px; margin: 0; color: #849d96; font-size: 12px; line-height: 1.45; }.decoder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 23px; }.term { min-height: 120px; padding: 16px; border: 1px solid rgba(180,229,211,.1); border-radius: 14px; background: rgba(5, 18, 23, .45); color: #bed4cd; text-align: left; transition: .2s ease; }.term:hover { transform: translateY(-3px); border-color: rgba(81,226,168,.5); background: rgba(20, 55, 54, .72); }.term b { display: block; margin-bottom: 8px; color: var(--media); font-size: 13px; }.term span { color: #8fa7a0; font-size: 12px; line-height: 1.36; }footer { display: flex; justify-content: space-between; padding: 29px 4px 0; color: #6c8880; font: 11px monospace; }footer a { color: #a9ddca; text-decoration: none; }footer a:hover { color: var(--focus); }

@keyframes blink { 50% { opacity: .35; transform: scale(.76); } } @keyframes route-flow { to { stroke-dashoffset: -24; } } @keyframes fanout-pulse { 50% { transform: scale(.65); opacity: .5; } }
@media (max-width: 900px) { .hero { flex-direction: column; }.hero-tools { align-items: flex-start; }.scenario-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stage-topline, .decoder-head { flex-direction: column; align-items: flex-start; }.transport-key { max-width: none; }.network-stage { min-height: 515px; }.node { width: 124px; }.node-source { left: 1%; top: 61%; }.node-control { left: calc(50% - 62px); top: 10%; }.node-rtc-publisher { left: 21%; top: 61%; }.node-translator { left: calc(50% - 62px); top: 61%; }.node-rtc-subscriber { left: 59%; top: 61%; }.node-peer { right: 1%; top: 61%; }.fanout-flow { grid-template-columns: minmax(142px, .8fr) 76px minmax(0, 1.45fr); }.explain-grid { grid-template-columns: 1fr; }.decoder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .app-shell { width: min(100% - 20px, 1440px); padding-top: 26px; } h1 { font-size: 42px; }.hero-copy { font-size: 15px; }.scenario { min-height: 60px; padding: 9px; font-size: 12px; }.stage-topline, .story-card, .protocol-card, .decoder { padding: 19px; }.network-stage { min-height: 560px; }.node { width: 108px; min-height: 95px; padding: 11px 6px; border-radius: 13px; }.node-icon { width: 25px; height: 25px; margin-bottom: 5px; font-size: 15px; }.node-label { font-size: 10px; }.node small { font-size: 7px; }.node-source { left: 5%; top: 70%; }.node-control { left: calc(50% - 54px); top: 5%; }.node-rtc-publisher { left: 32%; top: 49%; }.node-translator { left: 5%; top: 28%; }.node-rtc-subscriber { right: 5%; top: 49%; }.node-peer { right: 5%; top: 70%; }.route-label { display: none; }.fanout-board { margin: 0 10px 12px; padding: 13px; }.fanout-heading { gap: 10px; }.fanout-heading h3 { font-size: 16px; }.fanout-egress { padding: 6px 8px; font-size: 10px; }.fanout-flow { grid-template-columns: 1fr; gap: 9px; }.fanout-origin { min-height: 86px; }.fanout-split { min-height: 37px; }.fanout-path { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 7px 9px; gap: 8px; }.stage-controls { gap: 8px; padding: 13px 8px; }.play-button { padding: 10px 11px; font-size: 11px; }.story-card h3 { font-size: 28px; }.decoder-grid { grid-template-columns: 1fr; }.term { min-height: 88px; } footer { gap: 16px; flex-direction: column; } }