:root {
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #181c22;
  --paper: #f2efe8;
  --ink: #121418;
  --muted: #8e969f;
  --line: rgba(255,255,255,.11);
  --orange: #ff6a2a;
  --orange-2: #ffb077;
  --cyan: #45d5e8;
  --green: #a6ef67;
  --magenta: #e272ff;
  --mono: "DM Mono", monospace;
  --sans: "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #eef0f2; background: var(--bg); font-family: var(--sans); }
button, input, select { font: inherit; }
button { color: inherit; }
.line-icon { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.noise { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.topbar { position: fixed; top: 0; left: 0; right: 0; height: 70px; z-index: 9; display: flex; align-items: center; padding: 0 30px; border-bottom: 1px solid var(--line); background: rgba(11,13,16,.9); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; width: 270px; color: #fff; text-decoration: none; font-weight: 900; letter-spacing: -.03em; }
.brand > span:last-child span { color: var(--orange); }
.brand-mark { display: flex; align-items: end; gap: 2px; width: 20px; height: 20px; }
.brand-mark i { display: block; width: 4px; border-radius: 3px; background: var(--orange); animation: eq 1s ease-in-out infinite; }
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 19px; animation-delay: -.3s; }
.brand-mark i:nth-child(3) { height: 13px; animation-delay: -.6s; }
@keyframes eq { 50% { height: 5px; } }
.signal-status { display: flex; align-items: center; gap: 8px; color: #7e8790; font: 10px var(--mono); letter-spacing: .08em; }
.signal-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.top-progress { margin-left: auto; display: grid; grid-template-columns: auto auto; column-gap: 16px; align-items: center; font: 11px var(--mono); color: #929aa3; }
.top-progress strong { color: #fff; font-weight: 500; }
.progress-track { grid-column: 1 / -1; width: 175px; height: 2px; background: #2a2e34; margin-top: 6px; }
.progress-track i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .5s; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; border-radius: 5px; padding: 7px 10px; }

.sidebar { position: fixed; z-index: 8; left: 0; top: 70px; bottom: 0; width: 300px; padding: 30px 24px; border-right: 1px solid var(--line); background: #0d1013; overflow-y: auto; }
.course-meta p { margin: 0 0 13px; color: var(--orange); font: 10px var(--mono); letter-spacing: .12em; }
.course-meta h1 { margin: 0; font-size: 25px; line-height: 1.28; letter-spacing: -.04em; }
.course-meta > span { display: block; margin-top: 10px; color: #717982; font-size: 12px; }
.stage-nav { margin: 29px -8px 0; }
.nav-item { position: relative; display: grid; grid-template-columns: 34px 1fr 12px; gap: 4px; width: 100%; padding: 14px 8px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: .25s; }
.nav-item:last-child { border-bottom: 1px solid var(--line); }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.04); }
.nav-index { color: #5d646c; font: 11px var(--mono); }
.nav-item.active .nav-index { color: var(--orange); }
.nav-item b { display: block; color: #ced2d6; font-size: 13px; font-weight: 600; }
.nav-item.active b { color: #fff; }
.nav-item small { color: #626a73; font: 9px var(--mono); }
.nav-state { align-self: center; width: 8px; height: 8px; border: 1px solid #4b525a; border-radius: 50%; }
.nav-item.completed .nav-state { border-color: var(--green); background: var(--green); box-shadow: 0 0 8px rgba(166,239,103,.5); }
.sidebar-tip { display: flex; gap: 10px; margin-top: 26px; padding: 14px; border: 1px solid rgba(255,106,42,.22); background: rgba(255,106,42,.05); }
.sidebar-tip span { color: var(--orange); font-size: 20px; }
.sidebar-tip p { margin: 0; color: #777f88; font-size: 11px; line-height: 1.6; }
.sidebar-tip b { display: block; color: #d4d7da; }
.reset-button { width: 100%; margin-top: 18px; border: 0; background: transparent; color: #555d66; font: 10px var(--mono); cursor: pointer; }
.reset-button:hover { color: var(--orange); }

main { margin-left: 300px; padding-top: 70px; }
.stage { display: none; animation: stageIn .35s ease; }
.stage.active { display: block; }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); } }
.stage-hero { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; padding: 70px clamp(40px,6vw,100px); overflow: hidden; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #7f8790; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow span { color: var(--orange); }
.eyebrow i { width: 35px; height: 1px; background: #4a5058; }
.hero h2, .compact-hero h2 { margin: 22px 0; font-size: clamp(44px,5.5vw,78px); line-height: 1.07; letter-spacing: -.065em; }
.hero h2 em { color: var(--orange); font-style: normal; }
.hero > div:first-child > p { max-width: 620px; color: #8f979f; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.primary-button, .secondary-button, .danger-button, .complete-button { border: 0; cursor: pointer; transition: .2s; }
.primary-button { padding: 14px 20px; border-radius: 4px; background: var(--orange); color: #111; font-weight: 700; box-shadow: 0 8px 30px rgba(255,106,42,.18); }
.primary-button:hover { transform: translateY(-2px); background: #ff7d46; }
.primary-button span { margin-left: 20px; }
.primary-button.small { padding: 10px 16px; }
.secondary-button { padding: 10px 16px; background: transparent; border: 1px solid var(--line); border-radius: 4px; }
.danger-button { padding: 10px 16px; border: 1px solid #ff5454; border-radius: 4px; background: rgba(255,84,84,.1); color: #ff7777; }
.time-chip { color: #6f7780; font: 10px var(--mono); }
.hero-visual { position: relative; max-width: 520px; justify-self: center; }
.live-card { position: relative; width: min(40vw,480px); aspect-ratio: 1.18; border: 1px solid #30363e; border-radius: 9px; background: #12161b; box-shadow: 0 30px 80px #000; transform: rotate(1.5deg); }
.live-card-top, .telemetry { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font: 9px var(--mono); color: #88919a; }
.live-card-top span { color: #fff; }
.live-card-top i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ff4c4c; box-shadow: 0 0 8px red; }
.live-scene { position: relative; height: calc(100% - 84px); overflow: hidden; background: radial-gradient(circle at 50% 50%, #24313a 0, #101419 48%, #090b0e 100%); }
.live-scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px); background-size: 25px 25px; }
.camera-lens { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border: 1px solid #40515d; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 60px rgba(69,213,232,.12); }
.camera-lens::before, .camera-lens::after { content: ""; position: absolute; border-radius: 50%; inset: 17px; border: 1px solid #33434e; }
.camera-lens::after { inset: 38px; background: radial-gradient(circle at 35% 30%, #2d7280, #0b161c 55%); box-shadow: inset 0 0 20px #000; }
.camera-lens i { position: absolute; z-index: 2; width: 13px; height: 13px; top: 47px; left: 48px; background: rgba(135,242,255,.4); border-radius: 50%; filter: blur(2px); }
.scan-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); opacity: .5; animation: scan 3s linear infinite; }
@keyframes scan { from { top: 0; } to { top: 100%; } }
.waveform { position: absolute; display: flex; align-items: center; gap: 3px; left: 20px; bottom: 18px; height: 32px; }
.waveform i { width: 2px; height: 8px; background: var(--orange); opacity: .8; animation: wave .8s ease-in-out infinite alternate; }
@keyframes wave { to { height: 27px; } }
.telemetry { gap: 10px; justify-content: flex-start; color: #77818b; }
.telemetry span:last-child { margin-left: auto; color: var(--cyan); }
.packet { position: absolute; padding: 10px; border: 1px solid #333a42; background: #161a20; color: #7c858e; font: 8px var(--mono); box-shadow: 0 10px 30px #000; }
.packet b { display: block; margin-top: 3px; color: #d7dcdf; }
.packet-a { top: 13%; right: -42px; animation: float 4s ease-in-out infinite; }
.packet-b { left: -52px; bottom: 11%; animation: float 5s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translateY(-12px); } }

.lesson { padding: 85px clamp(40px,7vw,110px); background: var(--paper); color: var(--ink); }
.lesson + .lesson { border-top: 1px solid #d6d2ca; }
.lesson-heading { max-width: 740px; margin-bottom: 40px; }
.lesson-no { display: inline-block; color: var(--orange); font-family: var(--mono); font-size: clamp(12px,1vw,14px); font-weight: 500; line-height: 1.5; letter-spacing: .1em; }
.lesson-heading h3 { margin: 16px 0 13px; font-size: clamp(30px,4vw,48px); letter-spacing: -.055em; }
.lesson-heading p { margin: 0; color: #62666b; line-height: 1.8; }
.lesson-heading p b { color: var(--ink); }
.two-column-heading { max-width: none; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; }
.concept-strip { display: flex; align-items: center; justify-content: space-between; margin: 35px 0; padding: 20px 30px; border: 1px solid #d4d0c7; background: #eae6dd; }
.concept-strip div { display: flex; flex-direction: column; gap: 5px; }
.concept-strip span { color: #7f7c76; font-size: 10px; }
.concept-strip b { font-size: 14px; }
.concept-strip i { color: var(--orange); font-style: normal; }
.concept-strip .concept-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border: 1px solid #cbc5ba; border-radius: 50%; color: var(--orange); background: #f5f1e9; }
.concept-icon .line-icon { width: 20px; height: 20px; }
.guided-lesson { margin: 28px 0; border: 1px solid #cbc6bc; background: #111418; color: #eef0f2; box-shadow: 0 18px 50px rgba(18,20,24,.12); }
.guided-topline { display: flex; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--orange); font: 9px var(--mono); letter-spacing: .08em; }
.guided-topline b { color: #7e8790; font-weight: 400; }
.journey-map { position: relative; display: grid; grid-template-columns: repeat(13,auto); align-items: center; gap: 4px; padding: 25px 22px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.journey-map::before { content: ""; position: absolute; left: 50px; right: 50px; top: 43px; height: 1px; background: #31373e; }
.journey-stop { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 67px; border: 0; background: transparent; color: #656e77; font-size: 9px; cursor: pointer; }
.journey-stop-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3f464e; border-radius: 50%; background: #111418; color: #5f6972; transition: .25s; }
.journey-stop-icon .line-icon { width: 17px; height: 17px; }
.journey-stop.active { color: #fff; }.journey-stop.active .journey-stop-icon { border-color: var(--orange); background: var(--orange); color: #111418; box-shadow: 0 0 15px rgba(255,106,42,.5); }
.journey-stop.passed .journey-stop-icon { border-color: var(--green); color: var(--green); }
.journey-map > b { position: relative; z-index: 2; color: #4a5159; font-weight: 400; }
.journey-signal { display: none; }
.journey-content { display: grid; grid-template-columns: 1.45fr .55fr; min-height: 270px; }
.journey-copy { padding: 28px 32px; }
.journey-copy > span { color: var(--orange); font: 9px var(--mono); }
.journey-kicker { display: flex; align-items: center; gap: 8px; }
.journey-kicker .line-icon { width: 16px; height: 16px; }
.journey-copy h4 { margin: 8px 0 12px; font-size: 31px; }
.journey-copy h4 small { display: block; margin-top: 5px; color: #7b848c; font-size: 11px; font-weight: 400; }
.journey-copy > p { max-width: 680px; color: #adb4ba; font-size: 13px; line-height: 1.8; }
.journey-analogy { margin-top: 18px; padding: 13px 15px; border-left: 2px solid var(--orange); background: rgba(255,106,42,.07); }
.journey-analogy b { color: var(--orange-2); font: 8px var(--mono); }.journey-analogy p { margin: 5px 0 0; color: #949ca4; font-size: 11px; line-height: 1.7; }
.teacher-note { padding: 28px 23px; border-left: 1px solid var(--line); background: #171b20; }
.teacher-note span { display: block; margin-bottom: 6px; color: #68717a; font: 8px var(--mono); }
.teacher-note b { display: block; margin-bottom: 28px; color: var(--green); font-size: 13px; line-height: 1.5; }
.teacher-note p { margin: 0; color: #929aa2; font-size: 11px; line-height: 1.7; }
.guided-controls { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-top: 1px solid var(--line); }
.guided-controls button:disabled { cursor: not-allowed; opacity: .35; }
.journey-dots { display: flex; gap: 6px; }.journey-dots i { width: 5px; height: 5px; border-radius: 50%; background: #434a52; }.journey-dots i.active { width: 18px; border-radius: 4px; background: var(--orange); }
.lab-card { border: 1px solid #d5d0c5; border-radius: 7px; padding: 28px; background: #faf8f2; box-shadow: 0 16px 50px rgba(18,20,24,.07); }
.lab-header { display: flex; justify-content: space-between; gap: 20px; }
.lab-tag { color: var(--orange); font: 9px var(--mono); }
.lab-header h4 { margin: 7px 0; font-size: 22px; }
.lab-score { font: 12px var(--mono); color: #85817a; }
.lab-intro { color: #78756f; font-size: 13px; }
.pipeline-slots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 28px 0 15px; }
.pipeline-slot { position: relative; height: 74px; display: grid; place-items: center; border: 1px dashed #c3bfb6; border-radius: 4px; color: #a19d95; font: 10px var(--mono); }
.pipeline-slot::after { content: "→"; position: absolute; right: -11px; z-index: 2; color: var(--orange); }
.pipeline-slot:last-child::after { display: none; }
.pipeline-slot.filled { gap: 5px; border-style: solid; border-color: #25292e; background: #171a1e; color: #fff; font: 12px var(--sans); cursor: pointer; }
.pipeline-slot .line-icon { width: 20px; height: 20px; color: var(--orange); }
.pipeline-slot.correct { border-color: #5aa724; box-shadow: inset 0 -3px #83cb4d; }
.pipeline-slot.wrong { border-color: #d84d43; animation: shake .3s; }
@keyframes shake { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
.pipeline-pool, .term-pool, .arch-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 47px; padding: 14px; background: #ece8df; border-radius: 4px; }
.module-chip, .term-chip, .arch-chip { border: 1px solid #c6c1b7; background: #fff; border-radius: 3px; padding: 9px 13px; color: #24272b; font-size: 12px; cursor: pointer; }
.module-chip { display: inline-flex; align-items: center; gap: 7px; }
.module-chip .line-icon { width: 16px; height: 16px; color: var(--orange); }
.module-chip:hover, .term-chip:hover, .term-chip.selected { border-color: var(--orange); color: var(--orange); }
.lab-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.feedback { min-height: 22px; margin-top: 15px; color: #69655f; font-size: 13px; }
.feedback.success { color: #347313; }
.feedback.error { color: #b8372e; }
.insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.insight { padding: 20px; border-top: 2px solid var(--ink); background: #e9e5dd; }
.insight span, .triad span { color: var(--orange); font: 9px var(--mono); }
.insight .insight-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: #171a1e; color: var(--orange); }
.insight-icon .line-icon { width: 19px; height: 19px; }
.insight b { display: block; margin: 11px 0; }
.insight p { margin: 0; color: #76726c; font-size: 12px; line-height: 1.7; }
.terminology-section { background: #e9e5dd; }
.glossary-lab { padding: 0; overflow: hidden; }
.glossary-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #d5d0c5; }
.glossary-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.glossary-filters button { padding: 7px 11px; border: 1px solid #d0cbc1; border-radius: 3px; background: transparent; color: #716d66; font-size: 11px; cursor: pointer; }
.glossary-filters button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.glossary-shell { display: grid; grid-template-columns: minmax(245px,.8fr) minmax(450px,1.6fr); min-height: 570px; }
.glossary-grid { align-content: start; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; padding: 1px; background: #d8d3c9; }
.glossary-card { position: relative; min-height: 91px; padding: 16px; border: 0; background: #f4f1ea; color: var(--ink); text-align: left; cursor: pointer; transition: .2s; }
.glossary-card:hover { background: #fff; }
.glossary-card.active { z-index: 1; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.glossary-card span { display: block; color: #969189; font: 8px var(--mono); letter-spacing: .08em; }
.glossary-card.active span { color: rgba(0,0,0,.55); }
.glossary-card .glossary-card-icon { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #d2cdc3; border-radius: 50%; color: #716c64; }
.glossary-card-icon .line-icon { width: 15px; height: 15px; }
.glossary-card.active .glossary-card-icon { border-color: rgba(0,0,0,.22); color: #191b1e; }
.glossary-card .glossary-card-en { padding-right: 34px; }
.glossary-card b { display: block; margin-top: 8px; font-size: 15px; }
.glossary-card i { position: absolute; right: 12px; bottom: 12px; width: 6px; height: 6px; border: 1px solid #aaa49a; border-radius: 50%; }
.glossary-card.visited i { border-color: #347313; background: #6eb93d; }
.glossary-card.active i { border-color: #181a1e; background: #181a1e; }
.glossary-detail { display: grid; grid-template-rows: auto 1fr; background: #12151a; color: #eef0f2; }
.glossary-visual { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 50%,#252c33,#12151a 67%); }
.glossary-visual::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size: 24px 24px; }
.glossary-visual.with-image::before { z-index: 2; opacity: .06; pointer-events: none; }
.memory-image { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #101419; }
.memory-image picture, .memory-image img { display: block; width: 100%; height: 100%; }
.memory-image img { object-fit: contain; transition: filter .25s ease; }
.memory-image:hover img { filter: brightness(1.04); }
.memory-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(7,9,11,.92)); pointer-events: none; }
.memory-image figcaption { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 13px; color: #eef0f2; font-size: 10px; line-height: 1.45; }
.memory-image figcaption span { display: block; margin-bottom: 3px; color: var(--orange); font: 7px var(--mono); letter-spacing: .12em; }
.motion-preview { position: relative; z-index: 1; width: 240px; height: 130px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: #0b0e12; box-shadow: inset 0 0 35px rgba(69,213,232,.035); cursor: zoom-in; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.motion-preview-label { position: absolute; z-index: 3; top: 7px; left: 9px; color: var(--cyan); font: 7px var(--mono); letter-spacing: .08em; }
.motion-preview-hint { position: absolute; z-index: 3; top: 7px; right: 9px; color: #707983; font: 7px var(--mono); letter-spacing: .06em; transition: color .2s ease; }
.motion-preview-canvas { position: absolute; left: 0; top: 19px; width: 100%; height: calc(100% - 19px); overflow: hidden; }
.motion-preview-stage { position: relative; display: grid; place-items: center; width: 340px; height: 160px; transform: scale(.68); transform-origin: left top; }
.motion-preview-stage .visual-caption { bottom: 7px; }
.motion-preview:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .motion-preview:hover, .motion-preview:focus-visible { z-index: 20; border-color: rgba(69,213,232,.62); box-shadow: 0 24px 60px rgba(0,0,0,.52),0 0 0 1px rgba(69,213,232,.2),inset 0 0 35px rgba(69,213,232,.07); transform: translateY(-40px) scale(1.55); transform-origin: right center; }
  .motion-preview:hover .motion-preview-hint, .motion-preview:focus-visible .motion-preview-hint { color: var(--cyan); }
}
.glossary-copy { padding: 24px 28px 28px; }
.term-overview { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 20px; align-items: center; margin-bottom: 15px; }
.term-category { display: flex; align-items: center; gap: 7px; color: var(--orange); font: 9px var(--mono); letter-spacing: .1em; }
.term-category .line-icon { width: 15px; height: 15px; }
.term-title { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.term-title h4 { margin: 0; font-size: 33px; letter-spacing: -.04em; }
.term-title small { color: #69727b; font: 9px var(--mono); }
.term-summary { margin: 8px 0 15px; color: #cdd2d6; font-size: 14px; }
.term-explain { padding: 13px 15px; border-left: 2px solid var(--orange); background: rgba(255,106,42,.08); }
.term-explain span, .term-facts span { color: var(--orange-2); font: 8px var(--mono); letter-spacing: .08em; }
.term-explain p, .term-facts p { margin: 5px 0 0; color: #9ba3ab; font-size: 11px; line-height: 1.7; }
.term-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.term-facts div:last-child span { color: #ff7e76; }
.visual-caption { position: absolute; bottom: 14px; color: #6f7982; font: 8px var(--mono); }
.visual-pixels { display: grid; grid-template-columns: repeat(8,15px); gap: 3px; transform: rotate(-3deg); }
.visual-pixels i { width: 15px; height: 15px; background: hsl(calc(175 + var(--i) * 4) 62% 45%); animation: pixelPulse 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -35ms); }
@keyframes pixelPulse { 50% { filter: brightness(1.6); transform: scale(.86); } }
.visual-resolution { position: relative; display: flex; gap: 30px; align-items: center; z-index: 1; }
.visual-resolution > div { text-align: center; color: #7f8992; font: 8px var(--mono); }
.visual-resolution i { display: block; width: 105px; height: 80px; margin-bottom: 8px; border: 1px solid #5c6670; background: radial-gradient(circle at 62% 38%,var(--cyan) 0 9%,transparent 10%),linear-gradient(145deg,#16343b 48%,#0d1318 49%); }
.visual-resolution .res-low i { image-rendering: pixelated; background-size: 28px 28px,40px 40px; filter: blur(2.5px); }
.visual-resolution .res-high i { box-shadow: 0 0 25px rgba(69,213,232,.16); }
.visual-fps { position: relative; width: 290px; height: 120px; }
.visual-fps i { position: absolute; left: calc(var(--i) * 31px); top: 10px; width: 45px; height: 70px; border: 1px solid #56616b; background: radial-gradient(circle at calc(20% + var(--i) * 8%) 50%,var(--orange) 0 9%,transparent 11%); opacity: calc(.32 + var(--i) * .08); animation: frameFlip 1.6s steps(1) infinite; animation-delay: calc(var(--i) * -200ms); }
.visual-fps span { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; color: #727c85; font: 8px var(--mono); }
@keyframes frameFlip { 50% { border-color: var(--orange); transform: translateY(-4px); } }
.visual-bitrate { position: relative; z-index: 1; display: flex; align-items: center; gap: 17px; color: #717b84; font: 9px var(--mono); }
.visual-bitrate b { color: var(--green); }
.bit-pipe { display: flex; align-items: center; gap: 7px; width: 200px; height: 42px; padding: 0 10px; overflow: hidden; border: 2px solid #3f4952; border-left: 0; border-right: 0; }
.bit-pipe i { flex: 0 0 17px; height: 17px; background: var(--orange); animation: packetFlow 1.8s linear infinite; animation-delay: calc(var(--i) * -220ms); }
@keyframes packetFlow { from { transform: translateX(-50px); opacity: 0; } 15%,80% { opacity: 1; } to { transform: translateX(235px); opacity: 0; } }
.visual-sample { position: relative; z-index: 1; width: 300px; height: 120px; }
.sample-wave { position: absolute; top: 10px; left: 0; right: 0; height: 80px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 C25 0 50 0 75 40 S125 80 150 40 S200 0 225 40 S275 80 300 40' fill='none' stroke='%2345d5e8' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.visual-sample > i { position: absolute; left: calc(var(--i) * 24px); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: sampleBlink 1.5s infinite; animation-delay: calc(var(--i) * -80ms); }
.visual-sample > span { position: absolute; bottom: 0; width: 100%; text-align: center; color: #747e87; font: 8px var(--mono); }
@keyframes sampleBlink { 50% { box-shadow: 0 0 12px var(--orange); } }
.visual-codec { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; }
.raw-blocks, .packed-blocks { display: grid; grid-template-columns: repeat(4,12px); gap: 4px; }
.packed-blocks { grid-template-columns: repeat(2,12px); }
.raw-blocks i, .packed-blocks i { width: 12px; height: 12px; background: var(--cyan); }
.packed-blocks i { background: var(--orange); }
.visual-codec b { color: #7a848d; font: 9px var(--mono); animation: compressArrow 1.4s ease-in-out infinite; }
@keyframes compressArrow { 50% { transform: scale(.8); color: var(--orange); } }
.visual-container { position: relative; z-index: 1; width: 280px; height: 130px; }
.media-track { position: absolute; top: 10px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 3px; color: #111; font: 11px var(--mono); animation: packItem 2.4s ease-in-out infinite; }
.media-track.video { left: 30px; background: var(--cyan); }.media-track.audio { left: 95px; background: var(--orange); animation-delay: -.8s; }.media-track.time { left: 160px; background: var(--green); animation-delay: -1.6s; }
.media-box { position: absolute; bottom: 0; left: 50%; width: 150px; height: 58px; transform: translateX(-50%); border: 2px solid #717b84; border-top: 8px solid #717b84; text-align: center; }
.media-box span { color: #9ea6ae; font: 9px var(--mono); }
@keyframes packItem { 55%,100% { transform: translate(48px,67px) scale(.65); opacity: .3; } }
.visual-protocol { position: relative; z-index: 1; display: grid; grid-template-columns: auto 210px auto; align-items: center; color: #c7cdd2; font-size: 11px; }
.visual-protocol b { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); color: var(--orange); font: 9px var(--mono); }
.visual-protocol::before { content: ""; grid-column: 2; height: 2px; background: repeating-linear-gradient(90deg,#59636c 0 8px,transparent 8px 14px); }
.route-dot { position: absolute; left: 48px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: routeMove 2s linear infinite; }
@keyframes routeMove { to { transform: translateX(205px); } }
.visual-timestamp { position: relative; z-index: 1; width: 310px; }
.visual-timestamp > div { position: relative; display: grid; grid-template-columns: 50px 1fr 60px; align-items: center; gap: 8px; margin: 22px 0; color: #68727b; font: 8px var(--mono); }
.visual-timestamp i { height: 3px; background: #3c464f; }.visual-timestamp b { color: #b8c0c7; font-weight: 400; }
.visual-timestamp em { position: absolute; left: 110px; top: 0; width: 2px; height: 72px; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: syncCursor 2s linear infinite; }
@keyframes syncCursor { to { transform: translateX(150px); } }
.visual-gop { position: relative; z-index: 1; display: flex; gap: 7px; align-items: center; }
.visual-gop > * { display: grid; place-items: center; width: 38px; height: 52px; border: 1px solid #59636d; color: #8a949d; font: 11px var(--mono); }
.visual-gop b { height: 72px; border-color: var(--orange); background: var(--orange); color: #111; animation: keyframePulse 1.8s infinite; }
@keyframes keyframePulse { 50% { box-shadow: 0 0 18px rgba(255,106,42,.55); } }
.visual-latency { position: relative; z-index: 1; display: grid; grid-template-columns: 65px 190px 65px; align-items: center; text-align: center; color: #89939c; font-size: 9px; }
.visual-latency b { color: #dce1e5; font: 9px var(--mono); }.visual-latency > div { height: 2px; background: #49535c; }.visual-latency i { display: block; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--orange); animation: latencyMove 2.1s linear infinite; }
@keyframes latencyMove { to { transform: translateX(178px); } }
.visual-jitter { position: relative; z-index: 1; width: 310px; height: 100px; }
.jitter-packets { display: flex; gap: 20px; align-items: end; height: 40px; }
.jitter-packets i { width: 17px; height: 17px; background: var(--cyan); animation: jitterDrop 1.8s ease-in infinite; animation-delay: calc(var(--i) * -230ms); }
.jitter-buffer { position: absolute; right: 0; bottom: 3px; display: flex; gap: 4px; padding: 8px; border: 2px solid #5d6770; }
.jitter-buffer span { width: 18px; height: 18px; background: var(--orange); }
.visual-jitter > b { position: absolute; right: 10px; top: 4px; color: #737d86; font: 8px var(--mono); }
@keyframes jitterDrop { 30% { transform: translateY(18px); } 60% { transform: translate(205px,38px); } 100% { transform: translate(250px,38px); opacity: 0; } }
.dark-lesson { background: #111418; color: #eef0f2; border-top-color: #24282e !important; }
.dark-lesson .lesson-heading p { color: #8c949d; }
.dark-lesson .lesson-heading p b { color: #fff; }
.analogy-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.analogy-card { min-height: 300px; padding: 16px; overflow: hidden; border: 1px solid var(--line); background: #161a1f; }
.analogy-card figure { position: relative; height: 145px; margin: -16px -16px 18px; overflow: hidden; background: #0d1013; }
.analogy-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,#161a1f); }
.analogy-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.analogy-card:hover img { transform: scale(1.035); }
.analogy-icon { position: absolute; z-index: 2; right: 13px; bottom: 8px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #121418; }
.analogy-icon .line-icon { width: 21px; height: 21px; }
.analogy-card small { display: block; margin-top: 0; color: #69717a; font: 9px var(--mono); }
.analogy-card h4 { margin: 9px 0; font-size: 19px; }
.analogy-card p { color: #7c858e; font: 11px var(--mono); }
.lab-card.inverted { border-color: #31363d; background: #0e1114; box-shadow: none; }
.inverted .lab-intro { color: #747d86; }
.term-pool { background: #171b20; }
.term-chip { color: #dce0e3; background: #242930; border-color: #353b43; }
.bucket-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.bucket { position: relative; min-height: 100px; border: 1px dashed #3b424a; border-radius: 4px; background: #15191e; text-align: left; padding: 18px; cursor: pointer; }
.bucket:hover { border-color: var(--orange); }
.bucket .bucket-index { position: absolute; right: 12px; top: 10px; color: #394048; font: 16px var(--mono); }
.bucket .bucket-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border: 1px solid #343b43; border-radius: 50%; color: var(--orange); }
.bucket-icon .line-icon { width: 15px; height: 15px; }
.bucket b { display: block; font-size: 13px; }
.bucket small { color: #66707a; }
.bucket.good { animation: goodFlash .5s; }
@keyframes goodFlash { 50% { border-color: var(--green); background: rgba(166,239,103,.08); } }
.bitrate-lab { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.teaching-block { margin-bottom: 24px; padding: 25px; border: 1px solid #d3cec4; background: #ebe7df; }
.teaching-block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }.teaching-block-head span { color: var(--orange); font: 9px var(--mono); }.teaching-block-head h4 { margin: 0; font-size: 20px; }
.teach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.teach-grid > div { padding: 17px; background: #f7f4ee; }.teach-grid span { color: var(--orange); font: 9px var(--mono); }.teach-grid h5 { margin: 8px 0; font-size: 13px; }.teach-grid p { margin: 0; color: #77736d; font-size: 11px; line-height: 1.7; }
.teach-card figure { position: relative; height: 120px; margin: -17px -17px 15px; overflow: hidden; background: #111418; }
.teach-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(9,11,14,.72)); }
.teach-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teach-card figure > span { position: absolute; z-index: 2; right: 10px; bottom: 9px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #15181c; }
.teach-card figure .line-icon { width: 18px; height: 18px; }
.derivation-card { margin-top: 10px; padding: 17px; background: #15181c; color: #fff; }.derivation-card > span { color: var(--orange); font: 9px var(--mono); }.derivation-card p { margin: 6px 0; color: #929aa2; font-size: 11px; }.derivation-card code { display: block; margin: 11px 0; color: var(--green); font: 14px var(--mono); }
.control-panel label { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 25px; font-size: 13px; font-weight: 600; }
.control-panel output { color: var(--orange); font: 11px var(--mono); }
input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--orange); }
.scene-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.scene-options button { padding: 12px 5px; border: 1px solid #d3cec4; background: transparent; color: #66635e; cursor: pointer; }
.scene-options button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.bitrate-result { padding: 25px 30px; background: #12151a; color: #fff; }
.bitrate-result > span { color: #747c85; font: 10px var(--mono); }
.bitrate-result strong { display: block; margin: 6px 0 20px; color: var(--orange); font-size: 24px; }
.bitrate-result strong b { font-size: 66px; letter-spacing: -.06em; }
.quality-meter { position: relative; height: 6px; background: #30353b; }
.quality-meter i { display: block; height: 100%; width: 60%; background: linear-gradient(90deg,var(--orange),var(--green)); transition: width .3s; }
.uplink { display: flex; flex-direction: column; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.uplink span, .uplink small { color: #757e87; font-size: 10px; }
.uplink b { margin: 4px 0; font: 20px var(--mono); }
.bitrate-result p { margin-bottom: 0; color: #99a1a9; font-size: 12px; line-height: 1.7; }
.knowledge-callout { display: flex; gap: 15px; margin-top: 20px; padding: 17px; border-left: 3px solid var(--orange); background: #e7e2d9; }
.knowledge-callout span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: var(--orange); color: #fff; }
.knowledge-callout .callout-icon .line-icon { width: 14px; height: 14px; }
.knowledge-callout p { margin: 0; font-size: 13px; line-height: 1.7; }
.gop-section { background: #e9e5dd; }
.lesson-figure { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); margin: 0 0 18px; overflow: hidden; border: 1px solid #2e343b; border-radius: 6px; background: #12151a; color: #eef0f2; }
.lesson-figure > img { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; }
.lesson-figure figcaption { display: flex; gap: 15px; align-items: center; padding: 25px; }
.lesson-figure figcaption > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #15181c; }
.lesson-figure figcaption .line-icon { width: 22px; height: 22px; }
.lesson-figure figcaption b { display: block; margin-bottom: 7px; font-size: 14px; }
.lesson-figure figcaption p { margin: 0; color: #8f979f; font-size: 11px; line-height: 1.75; }
.frame-teacher { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.frame-teach-card { display: flex; gap: 16px; align-items: flex-start; padding: 19px; border: 1px solid #d0cbc1; background: #f5f2ec; }.frame-teach-card > b { display: grid; place-items: center; flex: 0 0 43px; height: 57px; border: 1px solid #a9a49b; font: 17px var(--mono); }.frame-teach-card.key > b { border-color: var(--orange); background: var(--orange); color: #111; }.frame-teach-card span { font-size: 12px; font-weight: 700; }.frame-teach-card p { margin: 6px 0 0; color: #77736d; font-size: 10px; line-height: 1.7; }
.teacher-summary { display: flex; gap: 18px; margin-bottom: 22px; padding: 16px 20px; border-left: 3px solid var(--cyan); background: #dfe5e4; }.teacher-summary span { flex: 0 0 auto; color: #237685; font: 9px var(--mono); }.teacher-summary p { margin: 0; color: #555e60; font-size: 12px; line-height: 1.7; }
.gop-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gop-controls label { display: flex; align-items: center; gap: 15px; font-size: 12px; }
.gop-controls input { width: 180px; }
.gop-controls output { color: var(--orange); font: 11px var(--mono); }
.frame-track { display: flex; align-items: center; gap: 7px; min-height: 100px; margin-top: 25px; overflow-x: auto; }
.frame { position: relative; display: grid; place-items: center; flex: 1 0 55px; max-width: 80px; height: 72px; border-radius: 4px; background: #ded9cf; color: #827e77; font: 14px var(--mono); transition: .25s; }
.frame.i-frame { height: 88px; background: var(--orange); color: #17191c; font-weight: 600; }
.frame.lost { background: repeating-linear-gradient(45deg,#322b2b,#322b2b 5px,#4c2929 5px,#4c2929 10px); color: #ff8181; filter: blur(.5px); }
.playhead { height: 2px; margin-top: 8px; background: #d5d0c7; }
.playhead i { display: block; width: 15%; height: 100%; background: var(--orange); animation: play 5s linear infinite; }
@keyframes play { from { margin-left: 0; } to { margin-left: 85%; } }
.gop-stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; margin-top: 24px; }
.gop-stats div { border-right: 1px solid #d3cec4; }
.gop-stats span { display: block; color: #88837c; font-size: 10px; }
.gop-stats b { font: 15px var(--mono); }
.gop-stats p { margin: 0; color: #77736d; font-size: 11px; line-height: 1.7; }
.checkpoint { background: var(--orange); color: #17191b; }
.checkpoint-head span { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; }
.checkpoint-head h3 { margin: 10px 0 4px; font-size: 44px; letter-spacing: -.05em; }
.checkpoint-head p { margin: 0 0 30px; }
.quiz { display: grid; gap: 12px; }
.quiz-questions { display: grid; gap: 12px; }
.quiz fieldset { min-width: 0; border: 1px solid rgba(0,0,0,.22); padding: 20px; background: rgba(255,255,255,.15); }
.quiz legend { max-width: 100%; padding: 0 7px; overflow-wrap: anywhere; font-weight: 700; }
.quiz legend span { margin-right: 10px; font: 11px var(--mono); }
.quiz label { display: inline-flex; gap: 6px; margin: 10px 20px 0 0; font-size: 13px; cursor: pointer; }
.quiz .primary-button { justify-self: start; background: #111; color: #fff; box-shadow: none; }
.quiz .feedback.success { color: #102d04; font-weight: 700; }
.quiz .feedback.error { color: #61110b; font-weight: 700; }

.compact-hero { min-height: 350px; padding: 80px clamp(40px,7vw,110px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 90% 10%,rgba(255,106,42,.2),transparent 35%); }
.compact-hero h2 { margin-bottom: 10px; }
.compact-hero p { max-width: 700px; color: #8f979f; }
.compact-hero.cyan { background: radial-gradient(circle at 90% 10%,rgba(69,213,232,.18),transparent 35%); }
.compact-hero.magenta { background: radial-gradient(circle at 90% 10%,rgba(226,114,255,.18),transparent 35%); }
.compact-hero.green { background: radial-gradient(circle at 90% 10%,rgba(166,239,103,.16),transparent 35%); }
.builder-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.builder-options label { display: flex; flex-direction: column; gap: 7px; color: #706c65; font-size: 11px; }
.builder-options select, .builder-options input { width: 100%; padding: 11px; border: 1px solid #d0cbc2; background: #fff; color: #222; }
.terminal { margin: 22px 0; min-height: 200px; border-radius: 6px; overflow: hidden; background: #0b0d10; color: #e5e8ea; }
.terminal-bar { padding: 10px 14px; background: #20242a; }
.terminal-bar i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #ff6359; }
.terminal-bar i:nth-child(2) { background: #ffc653; }.terminal-bar i:nth-child(3) { background: #55cd63; }
.terminal-bar span { margin-left: 10px; color: #767f88; font: 9px var(--mono); }
.terminal pre { margin: 0; padding: 20px; color: var(--green); white-space: pre-wrap; word-break: break-all; font: 12px/1.8 var(--mono); }
.terminal-log { padding: 0 20px 20px; color: #818a93; font: 10px/1.7 var(--mono); }
.triad, .ops-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 25px 0; background: #cbc6bd; }
.triad div, .ops-grid div { padding: 25px; background: #eae6de; }
.triad b { display: block; margin: 8px 0; font: 18px var(--mono); }
.triad p { color: #77736d; font-size: 12px; }
.complete-button { display: block; width: 100%; padding: 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; }
.complete-button:hover, .complete-button.done { background: var(--ink); color: #fff; }
.stage-preview { min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.stage-preview > span { color: var(--orange); font: 10px var(--mono); letter-spacing: .12em; }
.stage-preview h3 { margin: 12px 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.05em; }
.stage-preview p { max-width: 620px; margin: 0 0 25px; color: #73706a; line-height: 1.8; }
.race-stage { display: grid; grid-template-columns: 90px 1fr 90px; gap: 20px; align-items: center; min-height: 270px; }
.host-dot, .viewer-dot { display: grid; place-items: center; height: 80px; border-radius: 50%; background: var(--orange); font-weight: 700; }
.viewer-dot { background: #16191d; color: #fff; }
.host-dot span, .viewer-dot span { display: block; font-size: 9px; }
.race-lanes { display: grid; gap: 16px; }
.race-lane { position: relative; height: 37px; border-bottom: 1px dashed #bbb6ad; }
.race-lane label { position: absolute; left: 0; top: -3px; font: 9px var(--mono); }
.race-runner { position: absolute; left: 0; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); transition-timing-function: linear; }
.race-runner::after { content: attr(data-time); position: absolute; left: 20px; top: 0; white-space: nowrap; color: #76726b; font: 9px var(--mono); }
.scenario-picker { margin: 28px 0; }
.scenario-picker > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.scenario-card { padding: 18px; border: 1px solid #cec9bf; background: transparent; color: #26292d; text-align: left; cursor: pointer; }
.scenario-card:hover { border-color: var(--orange); }
.scenario-card b { display: block; margin-bottom: 8px; }.scenario-card small { color: #7b7770; }
.incident-lab { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.incident-list { display: grid; gap: 8px; }
.incident-button { padding: 17px; border: 1px solid #d4cfc6; background: transparent; color: #282b2f; text-align: left; cursor: pointer; }
.incident-button.active { border-color: var(--magenta); background: rgba(226,114,255,.08); }
.incident-button b { display: block; }.incident-button small { color: #7c7871; }
.evidence-panel { min-height: 280px; padding: 25px; background: #14171b; color: #fff; }
.evidence-panel > span { color: var(--magenta); font: 9px var(--mono); }
.evidence-panel p { color: #8b939c; font-size: 12px; line-height: 1.7; }
.evidence-options { display: grid; gap: 7px; margin-top: 18px; }
.evidence-options button { padding: 11px; border: 1px solid #343a42; background: transparent; color: #b8bec4; text-align: left; cursor: pointer; }
.evidence-options button.correct { border-color: var(--green); color: var(--green); }
.evidence-options button.wrong { border-color: #ff6262; color: #ff8585; }
.diagnostic-chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 25px 0; color: #68645e; font: 10px var(--mono); }
.diagnostic-chain i { color: var(--orange); font-style: normal; }
.arch-flow { display: grid; grid-template-columns: repeat(9,auto); gap: 8px; align-items: center; overflow-x: auto; padding-bottom: 10px; }
.arch-node { min-width: 105px; padding: 20px 12px; border: 1px solid #d1ccc2; text-align: center; font-size: 12px; }
.arch-node.empty { border-style: dashed; color: #aaa69e; cursor: pointer; }
.arch-arrow { color: var(--orange); }
.arch-pool { margin-top: 20px; }
.arch-chip.selected { opacity: .35; pointer-events: none; }
.ops-grid { grid-template-columns: repeat(4,1fr); }
.ops-grid span { display: block; color: #85817a; font-size: 10px; }.ops-grid b { font-size: 13px; }

/* Stage 02: push stream course */
.stage2-hero { min-height: 660px; display: grid; grid-template-columns: minmax(360px,.78fr) minmax(480px,1.22fr); gap: clamp(28px,5vw,70px); align-items: center; padding: 70px clamp(40px,6vw,100px); overflow: hidden; background: radial-gradient(circle at 82% 25%,rgba(69,213,232,.11),transparent 28%),radial-gradient(circle at 35% 65%,rgba(255,106,42,.12),transparent 32%); }
.stage2-hero-copy h2 { margin: 22px 0; font-size: clamp(48px,5.7vw,82px); line-height: 1.02; letter-spacing: -.065em; }
.stage2-hero-copy h2 em { color: var(--orange); font-style: normal; }
.stage2-hero-copy > p { max-width: 610px; color: #9199a1; font-size: 15px; line-height: 1.9; }
.stage2-hero-figure { position: relative; margin: 0; overflow: hidden; border: 1px solid #30363e; border-radius: 10px; background: #0e1115; box-shadow: 0 35px 90px #000; transform: rotate(1deg); }
.stage2-hero-figure picture, .stage2-hero-figure img { display: block; width: 100%; }
.stage2-hero-figure img { aspect-ratio: 16 / 9; object-fit: cover; animation: stage2HeroDrift 10s ease-in-out infinite alternate; }
@keyframes stage2HeroDrift { to { transform: scale(1.035); } }
.stage2-hero-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 56%,rgba(7,9,12,.92)); }
.stage2-hero-figure figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: grid; grid-template-columns: 39px 1fr; gap: 4px 12px; align-items: center; }
.stage2-hero-figure figcaption > span { grid-row: 1 / 3; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--orange); color: #111418; }
.stage2-hero-figure figcaption .line-icon { width: 20px; height: 20px; }
.stage2-hero-figure figcaption b { font-size: 13px; }.stage2-hero-figure figcaption small { color: #8e979f; font: 9px var(--mono); }
.stage2-lesson-nav { position: sticky; z-index: 7; top: 70px; display: grid; grid-template-columns: repeat(6,1fr); border-block: 1px solid #2a3036; background: rgba(13,16,20,.94); backdrop-filter: blur(16px); }
.stage2-lesson-nav button { display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 49px; border: 0; border-right: 1px solid #292f35; background: transparent; color: #8b949c; font-size: 10px; cursor: pointer; transition: .2s; }.stage2-lesson-nav button:last-child { border-right: 0; }.stage2-lesson-nav button:hover { background: rgba(255,106,42,.09); color: #fff; }.stage2-lesson-nav small { color: var(--orange); font: 8px var(--mono); }
#stage-2 article[id] { scroll-margin-top: 125px; }
.stage2-overview { background: #e9e5dd; }
.stage2-teacher-note { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; padding: 18px 21px; border: 1px solid #cfc9be; background: #f7f4ed; }
.stage2-teacher-note > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #111418; }.stage2-teacher-note .line-icon { width: 20px; height: 20px; }
.stage2-teacher-note b { display: block; margin-bottom: 3px; font-size: 13px; }.stage2-teacher-note p { margin: 0; color: #6f6b65; font-size: 12px; line-height: 1.7; }
.stage2-journey { padding: 0; overflow: hidden; }
.stage2-journey .lab-header { padding: 24px 27px 18px; }
.stage2-journey-steps { position: relative; display: grid; grid-template-columns: repeat(9,auto); align-items: center; gap: 8px; padding: 24px 26px; overflow-x: auto; border-block: 1px solid #dad5cc; background: #eeebe4; }
.stage2-journey-steps::before { content: ""; position: absolute; left: 58px; right: 58px; top: 50%; height: 1px; background: #c9c3b9; }
.stage2-journey-steps > i { position: relative; z-index: 1; color: #aaa49a; font-style: normal; }
.stage2-journey-step { position: relative; z-index: 2; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; min-width: 124px; padding: 13px; border: 1px solid #d0cbc1; border-radius: 5px; background: #faf8f2; color: #24272b; text-align: left; cursor: pointer; transition: .25s; }
.stage2-journey-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #171a1e; color: var(--orange); }.stage2-journey-step .line-icon { width: 17px; height: 17px; }
.stage2-journey-step small { color: #99938a; font: 8px var(--mono); }.stage2-journey-step b { font-size: 12px; }
.stage2-journey-step:hover, .stage2-journey-step.active { border-color: var(--orange); transform: translateY(-2px); }
.stage2-journey-step.active { background: var(--orange); box-shadow: 0 9px 24px rgba(255,106,42,.2); }.stage2-journey-step.active > span { background: #111418; }.stage2-journey-step.active small { color: rgba(0,0,0,.52); }
.stage2-journey-detail { display: grid; grid-template-columns: 1.45fr .55fr; min-height: 230px; background: #12151a; color: #eef0f2; }
.stage2-journey-detail > div { padding: 30px; }.stage2-journey-detail > div > span { color: var(--orange); font: 9px var(--mono); }.stage2-journey-detail h4 { max-width: 700px; margin: 8px 0 12px; font-size: 26px; }.stage2-journey-detail p { margin: 0; color: #959da5; font-size: 12px; line-height: 1.8; }
.stage2-journey-detail aside { display: flex; flex-direction: column; padding: 29px 24px; border-left: 1px solid var(--line); background: #181c21; }.stage2-journey-detail aside small { color: #707983; font: 8px var(--mono); }.stage2-journey-detail aside b { margin: 6px 0 22px; color: var(--green); font-size: 12px; line-height: 1.6; }.stage2-journey-detail aside p { font-size: 10px; }
.stage2-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
.stage2-role-grid > div { position: relative; padding: 23px; border: 1px solid #d0cbc1; background: #f6f3ec; }.stage2-role-grid small { display: block; color: var(--orange); font: 9px var(--mono); }.stage2-role-grid b { display: block; margin: 10px 0 7px; font-size: 17px; }.stage2-role-grid p { margin: 0; color: #74706a; font-size: 11px; line-height: 1.7; }
.stage2-role-icon { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #171a1e; color: var(--orange); }.stage2-role-icon .line-icon { width: 19px; height: 19px; }
.stage2-wide-figure { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); min-height: 300px; margin: 0 0 22px; overflow: hidden; border: 1px solid #30363e; border-radius: 6px; background: #0d1014; }
.stage2-wide-figure picture, .stage2-wide-figure img { display: block; width: 100%; height: 100%; }.stage2-wide-figure img { object-fit: cover; }
.stage2-wide-figure figcaption { display: flex; gap: 15px; align-items: center; padding: 25px; }.stage2-wide-figure figcaption > span { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #111418; }.stage2-wide-figure figcaption .line-icon { width: 22px; height: 22px; }.stage2-wide-figure figcaption b { display: block; margin-bottom: 7px; }.stage2-wide-figure figcaption p { margin: 0; color: #858e97; font-size: 11px; line-height: 1.75; }
.stage2-wide-figure.light { border-color: #d0cbc1; background: #171a1e; color: #fff; }
.stage2-address-demo { margin: 24px 0; padding: 26px; border: 1px solid #343a42; background: #0c0f12; }
.stage2-address-demo > code { display: flex; flex-wrap: wrap; row-gap: 7px; color: #fff; font: clamp(12px,1.65vw,20px) var(--mono); word-break: break-all; }
.stage2-address-demo > code span { padding: 8px 7px; border-bottom: 3px solid; }.stage2-address-demo [data-part="scheme"] { color: #ff9567; border-color: #ff6a2a; }.stage2-address-demo [data-part="host"] { color: #76dfec; border-color: #45d5e8; }.stage2-address-demo [data-part="app"] { color: #b8f083; border-color: #87c956; }.stage2-address-demo [data-part="stream"] { color: #f1c877; border-color: #dca94b; }.stage2-address-demo [data-part="query"] { color: #d5a1f0; border-color: #b877d9; }
.stage2-address-parts { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; margin-top: 22px; }.stage2-address-parts > div { padding: 13px; border: 1px solid #292e35; background: #14181c; }.stage2-address-parts i { display: block; width: 17px; height: 3px; margin-bottom: 10px; background: var(--orange); }.stage2-address-parts > div:nth-child(2) i { background: var(--cyan); }.stage2-address-parts > div:nth-child(3) i { background: var(--green); }.stage2-address-parts > div:nth-child(4) i { background: #dca94b; }.stage2-address-parts > div:nth-child(5) i { background: #b877d9; }.stage2-address-parts small { display: block; color: #737d86; font: 8px var(--mono); }.stage2-address-parts b { display: block; margin-top: 7px; color: #dce0e3; font-size: 10px; line-height: 1.6; }
.stage2-url-lab .builder-options { grid-template-columns: repeat(4,1fr); margin-top: 18px; }.stage2-url-lab .builder-options label { color: #7e8790; }.stage2-url-lab .builder-options input { border-color: #333a42; background: #171b20; color: #fff; }
.stage2-address-ticket { margin-top: 20px; padding: 18px; border-left: 3px solid var(--orange); background: #171b20; }.stage2-address-ticket span, .stage2-address-ticket small { display: block; color: #727b84; font: 8px var(--mono); }.stage2-address-ticket code { display: block; margin: 8px 0; color: var(--green); font: 12px/1.7 var(--mono); overflow-wrap: anywhere; }.stage2-address-ticket small { color: #555e67; }
.stage2-playback-map { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 1px; margin-top: 12px; background: #30363e; }.stage2-playback-map > * { min-width: 0; padding: 16px; background: #13171b; }.stage2-playback-map span { color: var(--cyan); font: 8px var(--mono); }.stage2-playback-map p { margin: 6px 0 0; color: #747d86; font-size: 9px; line-height: 1.6; }.stage2-playback-map p b { color: #b9c0c6; }.stage2-playback-map code small { display: block; margin-bottom: 7px; color: #69727b; font: 8px var(--mono); }.stage2-playback-map code b { display: block; overflow-wrap: anywhere; color: #cbd1d6; font: 10px/1.6 var(--mono); }.stage2-example-warning { margin: 9px 0 0; color: #69727b; font-size: 9px; }
.stage2-command-anatomy { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-bottom: 22px; background: #ccc7bd; }.stage2-command-anatomy > div { padding: 22px; background: #ede9e1; }.stage2-command-anatomy span { color: var(--orange); font: 8px var(--mono); }.stage2-command-anatomy code { display: block; min-height: 42px; margin: 10px 0; color: #1c6f7a; font: 11px/1.6 var(--mono); }.stage2-command-anatomy p { margin: 0; color: #716d66; font-size: 10px; line-height: 1.7; }.stage2-command-anatomy p b { color: #24272b; }
.stage2-command-options { grid-template-columns: repeat(5,1fr); }.stage2-terminal { min-height: 250px; }.stage2-terminal pre { min-height: 120px; }.stage2-terminal .terminal-log { min-height: 82px; border-top: 1px solid #20252a; padding-top: 16px; white-space: pre-line; }.stage2-command-hint { margin: -6px 0 0; color: #73706a; font-size: 11px; }.stage2-command-lab button:disabled { opacity: .5; cursor: wait; }
.stage2-command-health { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding: 17px; border: 1px solid #d4cfc5; background: #efebe3; }.stage2-command-health > div > span { display: flex; justify-content: space-between; color: #55524d; font-size: 10px; }.stage2-command-health > div > span b { color: var(--orange); font: 10px var(--mono); }.stage2-command-health [role="meter"] { height: 6px; margin: 9px 0 6px; overflow: hidden; background: #d2cdc3; }.stage2-command-health [role="meter"] i { display: block; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--orange)); transition: width .35s; }.stage2-command-health small { color: #8a857e; font-size: 8px; }.stage2-command-health > p { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid #d5d0c7; color: #67635d; font-size: 10px; line-height: 1.7; }
.stage2-publish-map { overflow: hidden; border: 1px solid #30363e; background: #0d1014; }
.stage2-publish-track { position: relative; display: grid; grid-template-columns: repeat(5,1fr); padding: 32px 25px; overflow-x: auto; border-bottom: 1px solid var(--line); }.stage2-publish-track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 51px; height: 1px; background: #3b424a; }
.stage2-publish-step { position: relative; z-index: 2; min-width: 110px; border: 0; background: transparent; color: #69727b; cursor: pointer; }.stage2-publish-step i { display: block; width: 18px; height: 18px; margin: 10px auto 12px; border: 2px solid #4b535c; border-radius: 50%; background: #0d1014; transition: .25s; }.stage2-publish-step small { display: block; font: 8px var(--mono); }.stage2-publish-step b { font: 10px var(--mono); }.stage2-publish-step.active { color: #fff; }.stage2-publish-step.active i { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 20px rgba(255,106,42,.65); }.stage2-publish-step.passed i { border-color: var(--green); background: var(--green); }
.stage2-packet { position: absolute; z-index: 1; left: 9%; top: 45px; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: stage2PacketTravel 4.5s linear infinite; }
@keyframes stage2PacketTravel { to { left: 89%; } }
.stage2-publish-reader { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 245px; }.stage2-publish-reader > div { padding: 30px; }.stage2-publish-reader > div > span { color: var(--orange); font: 9px var(--mono); }.stage2-publish-reader h4 { margin: 7px 0; font-size: 29px; }.stage2-publish-reader code { display: inline-block; margin: 7px 0 14px; padding: 7px 10px; background: #1e242a; color: var(--green); font: 11px var(--mono); }.stage2-publish-reader p { max-width: 720px; color: #929aa2; font-size: 12px; line-height: 1.8; }.stage2-publish-reader aside { padding: 30px 24px; border-left: 1px solid var(--line); background: #171b20; }.stage2-publish-reader aside b { color: var(--cyan); font-size: 12px; }.stage2-publish-reader aside p { color: #858e97; font-size: 10px; line-height: 1.8; }
.stage2-srs-flow { display: grid; grid-template-columns: minmax(170px,.7fr) 105px minmax(260px,1.2fr); gap: 34px; align-items: center; margin: 26px 0; }.stage2-srs-source, .stage2-srs-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 128px; padding: 18px; border: 1px solid #cdc8be; background: #ede9e1; text-align: center; }.stage2-srs-source::after, .stage2-srs-core::after { content: "→"; position: absolute; right: -28px; color: var(--orange); }.stage2-srs-source > span, .stage2-srs-core > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 9px; border-radius: 50%; background: #171a1e; color: var(--orange); }.stage2-srs-source .line-icon, .stage2-srs-core .line-icon { width: 20px; height: 20px; }.stage2-srs-source small, .stage2-srs-core small { color: #8a857e; font: 8px var(--mono); }.stage2-srs-source b, .stage2-srs-core b { margin-top: 4px; font: 11px var(--mono); }.stage2-srs-core { min-height: 145px; border-color: #23272c; background: #171a1e; color: #fff; }.stage2-srs-core i { position: absolute; inset: -5px; border: 1px solid rgba(69,213,232,.35); animation: stage2ServerPulse 2s ease-out infinite; }
@keyframes stage2ServerPulse { to { inset: -18px; opacity: 0; } }
.stage2-srs-routes { display: grid; gap: 7px; }.stage2-srs-route { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid #d2cdc4; opacity: .38; transition: .3s; }.stage2-srs-route > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dcd7ce; color: #66615a; }.stage2-srs-route .line-icon { width: 17px; height: 17px; }.stage2-srs-route b { font-size: 11px; }.stage2-srs-route small { color: #817d76; font-size: 9px; }.stage2-srs-route.active { border-color: var(--cyan); opacity: 1; box-shadow: inset 3px 0 var(--cyan); }.stage2-srs-route.active > span { background: #152328; color: var(--cyan); }
.stage2-srs-controls { display: flex; flex-wrap: wrap; gap: 9px; }.stage2-srs-controls label { padding: 9px 12px; border: 1px solid #d0cbc1; background: #fff; font-size: 11px; cursor: pointer; }.stage2-srs-controls input { accent-color: var(--orange); }.stage2-srs-summary { min-height: 21px; color: #67635d; font-size: 11px; line-height: 1.7; }
.stage2-config-reader { margin-bottom: 22px; overflow: hidden; border: 1px solid #2d3339; background: #0d1014; color: #eef0f2; }.stage2-config-head { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 35px; align-items: end; padding: 22px 25px; border-bottom: 1px solid var(--line); }.stage2-config-head span { color: var(--orange); font: 8px var(--mono); }.stage2-config-head h4 { grid-row: 2; margin: 0; font-size: 21px; }.stage2-config-head p { grid-column: 2; grid-row: 1 / 3; margin: 0; color: #7e8790; font-size: 10px; line-height: 1.7; }.stage2-config-body { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 285px; }.stage2-config-lines { display: grid; align-content: stretch; border-right: 1px solid var(--line); }.stage2-config-lines button { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); background: #12161a; color: #aeb5bb; text-align: left; cursor: pointer; }.stage2-config-lines button:last-child { border-bottom: 0; }.stage2-config-lines button:hover, .stage2-config-lines button[aria-pressed="true"] { background: #1a2025; color: var(--green); box-shadow: inset 3px 0 var(--orange); }.stage2-config-lines small { color: #606971; font: 8px var(--mono); }.stage2-config-lines code { overflow-wrap: anywhere; font: 10px var(--mono); }.stage2-config-detail { padding: 29px; }.stage2-config-detail > span { color: var(--orange); font: 8px var(--mono); }.stage2-config-detail h5 { margin: 8px 0 12px; color: var(--green); font: 18px var(--mono); }.stage2-config-detail > p { color: #9199a1; font-size: 11px; line-height: 1.8; }.stage2-config-detail > div { margin-top: 20px; padding: 14px; border-left: 2px solid var(--cyan); background: #151a1f; }.stage2-config-detail small { display: block; margin-bottom: 6px; color: #66717a; font: 8px var(--mono); }.stage2-config-detail b { color: #b9c0c6; font-size: 10px; line-height: 1.7; }
.stage2-srs-checks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 20px; background: #ccc7bd; }.stage2-srs-checks > div { padding: 22px; background: #e9e5dd; }.stage2-srs-checks span { color: var(--orange); font: 8px var(--mono); }.stage2-srs-checks b { display: block; margin: 8px 0; font-size: 14px; }.stage2-srs-checks p { margin: 0; color: #736f69; font-size: 10px; line-height: 1.7; }
.stage2-diagnostic-lesson { background: #e9e5dd; }.stage2-diagnostic-chain { padding: 14px; border: 1px solid #d0cbc1; background: #f5f2eb; }.stage2-incident-lab { margin-top: 20px; }.stage2-evidence-panel h4 { margin: 8px 0; font-size: 23px; }.stage2-evidence-panel pre { padding: 14px; overflow-x: auto; border: 1px solid #2e353c; background: #0b0d10; color: var(--green); white-space: pre-wrap; font: 10px/1.7 var(--mono); }.stage2-evidence-panel > small { display: block; color: #88919a; font-size: 10px; line-height: 1.7; }.stage2-evidence-panel .feedback.success { color: var(--green); }.stage2-evidence-panel .feedback.error { color: #ff8585; }.stage2-evidence-panel button:disabled { cursor: default; opacity: .7; }
.stage2-checkpoint { background: linear-gradient(135deg,#ff6a2a,#f48a3a); }
.stage2-readiness { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 26px; background: rgba(0,0,0,.25); }.stage2-readiness > div { padding: 19px; background: rgba(255,255,255,.13); }.stage2-readiness small { font: 8px var(--mono); }.stage2-readiness b { display: block; margin: 7px 0; font-size: 12px; }.stage2-readiness p { margin: 0; font-size: 9px; line-height: 1.65; }
.stage2-trailer { display: grid; grid-template-columns: minmax(240px,.62fr) minmax(0,1.38fr); gap: 1px; margin-bottom: 22px; overflow: hidden; border: 1px solid #30363e; border-radius: 7px; background: #30363e; color: #fff; }.stage2-trailer > div { display: flex; flex-direction: column; justify-content: center; padding: 30px; background: #11151a; }.stage2-trailer > div > span { color: var(--orange); font: 9px var(--mono); }.stage2-trailer h4 { margin: 8px 0 12px; font-size: 25px; }.stage2-trailer p { margin: 0; color: #89939b; font-size: 11px; line-height: 1.8; }.stage2-trailer video { display: block; width: 100%; height: 100%; min-height: 285px; object-fit: cover; background: #050607; }
.stage2-journey-steps { grid-template-columns: repeat(13,auto); }
.stage2-journey-detail { grid-template-columns: minmax(250px,.9fr) minmax(310px,1.1fr) minmax(210px,.55fr); min-height: 360px; }.stage2-journey-detail > figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #080a0d; }.stage2-journey-detail picture, .stage2-journey-detail img { display: block; width: 100%; height: 100%; }.stage2-journey-detail img { object-fit: cover; animation: stage2TourImage 9s ease-in-out infinite alternate; }@keyframes stage2TourImage { to { transform: scale(1.045); } }.stage2-journey-detail figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(5,7,10,.94)); pointer-events: none; }.stage2-journey-detail figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; }.stage2-journey-detail figcaption small { display: block; color: var(--cyan); font: 8px var(--mono); }.stage2-journey-detail figcaption b { display: block; margin-top: 5px; font-size: 15px; }
.stage2-journey-detail > .stage2-tour-story { padding: 29px; }.stage2-tour-story > span { color: var(--orange); font: 9px var(--mono); }.stage2-tour-story h4 { margin: 8px 0 13px; font-size: 25px; }.stage2-tour-story > p { margin: 0; color: #9aa2a9; font-size: 12px; line-height: 1.85; }.stage2-tour-story > div { margin-top: 22px; padding: 15px; border-left: 2px solid var(--cyan); background: #181d22; }.stage2-tour-story > div small { color: var(--cyan); font: 8px var(--mono); }.stage2-tour-story > div p { margin: 7px 0 0; color: #9aa2a9; font-size: 10px; line-height: 1.75; }
.stage2-tour-controls { border-top: 1px solid var(--line); background: #101419; }.stage2-tour-controls button { min-width: 110px; }.stage2-role-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 28px 0 13px; }.stage2-role-heading span { font-size: 21px; font-weight: 700; }.stage2-role-heading p { max-width: 500px; margin: 0; color: #77736d; font-size: 10px; line-height: 1.7; }
.stage2-story-figure { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr); min-height: 300px; margin: 0 0 22px; overflow: hidden; border: 1px solid #d0cbc1; background: #171b20; color: #fff; }.stage2-story-figure picture, .stage2-story-figure img { display: block; width: 100%; height: 100%; }.stage2-story-figure img { object-fit: cover; }.stage2-story-figure figcaption { display: flex; flex-direction: column; justify-content: center; padding: 28px; }.stage2-story-figure figcaption > span { color: var(--cyan); font: 8px var(--mono); }.stage2-story-figure h4 { margin: 9px 0 12px; font-size: 22px; }.stage2-story-figure p { margin: 0; color: #929ba3; font-size: 11px; line-height: 1.8; }

/* Stage 03: playback protocols */
.stage3-hero { min-height: 660px; display: grid; grid-template-columns: minmax(360px,.78fr) minmax(480px,1.22fr); gap: clamp(28px,5vw,70px); align-items: center; padding: 70px clamp(40px,6vw,100px); overflow: hidden; background: radial-gradient(circle at 80% 25%,rgba(69,213,232,.16),transparent 31%),radial-gradient(circle at 30% 70%,rgba(255,106,42,.1),transparent 30%); }
.stage3-hero-copy h2 { margin: 22px 0; font-size: clamp(48px,5.7vw,82px); line-height: 1.02; letter-spacing: -.065em; }.stage3-hero-copy h2 em { color: var(--cyan); font-style: normal; }.stage3-hero-copy > p { max-width: 620px; color: #9199a1; font-size: 15px; line-height: 1.9; }
.stage3-hero-figure { position: relative; margin: 0; overflow: hidden; border: 1px solid #30363e; border-radius: 10px; background: #0e1115; box-shadow: 0 35px 90px #000; transform: rotate(1deg); }.stage3-hero-figure picture, .stage3-hero-figure img { display: block; width: 100%; }.stage3-hero-figure img { aspect-ratio: 16 / 9; object-fit: cover; animation: stage3HeroDrift 10s ease-in-out infinite alternate; }@keyframes stage3HeroDrift { to { transform: scale(1.035); } }.stage3-hero-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(7,9,12,.94)); pointer-events: none; }.stage3-hero-figure figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: grid; grid-template-columns: 39px 1fr; gap: 4px 12px; align-items: center; }.stage3-hero-figure figcaption > span { grid-row: 1 / 3; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--cyan); color: #111418; }.stage3-hero-figure figcaption .line-icon { width: 20px; height: 20px; }.stage3-hero-figure figcaption b { font-size: 13px; }.stage3-hero-figure figcaption small { color: #8e979f; font: 9px var(--mono); }
.stage3-lesson-nav { position: sticky; z-index: 7; top: 70px; display: grid; grid-template-columns: repeat(7,1fr); border-block: 1px solid #2a3036; background: rgba(13,16,20,.94); backdrop-filter: blur(16px); }.stage3-lesson-nav button { display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 49px; border: 0; border-right: 1px solid #292f35; background: transparent; color: #8b949c; font-size: 10px; cursor: pointer; transition: .2s; }.stage3-lesson-nav button:last-child { border-right: 0; }.stage3-lesson-nav button:hover { background: rgba(69,213,232,.09); color: #fff; }.stage3-lesson-nav small { color: var(--cyan); font: 8px var(--mono); }#stage-3 article[id] { scroll-margin-top: 125px; }
.stage3-overview { background: #e8eceb; }.stage3-wide-figure { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); min-height: 300px; margin: 0 0 22px; overflow: hidden; border: 1px solid #c9cfcd; border-radius: 6px; background: #111519; color: #fff; }.stage3-wide-figure picture, .stage3-wide-figure img { display: block; width: 100%; height: 100%; }.stage3-wide-figure img { object-fit: cover; }.stage3-wide-figure figcaption { display: flex; gap: 15px; align-items: center; padding: 25px; }.stage3-wide-figure figcaption > span { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: #111418; }.stage3-wide-figure figcaption .line-icon { width: 22px; height: 22px; }.stage3-wide-figure figcaption b { display: block; margin-bottom: 7px; }.stage3-wide-figure figcaption p { margin: 0; color: #858e97; font-size: 11px; line-height: 1.75; }.stage3-wide-figure.dark { border-color: #30363e; }.stage3-wide-figure.light { border-color: #c9cfcd; }
.stage3-teacher-note { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; padding: 18px 21px; border: 1px solid #c9cfcd; background: #f7f9f7; }.stage3-teacher-note > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--cyan); color: #111418; }.stage3-teacher-note .line-icon { width: 20px; height: 20px; }.stage3-teacher-note b { display: block; margin-bottom: 3px; font-size: 13px; }.stage3-teacher-note p { margin: 0; color: #67706f; font-size: 12px; line-height: 1.7; }
.stage3-trailer { display: grid; grid-template-columns: minmax(240px,.62fr) minmax(0,1.38fr); gap: 1px; margin-bottom: 22px; overflow: hidden; border: 1px solid #30363e; border-radius: 7px; background: #30363e; color: #fff; }.stage3-trailer > div { display: flex; flex-direction: column; justify-content: center; padding: 30px; background: #11151a; }.stage3-trailer > div > span { color: var(--cyan); font: 9px var(--mono); }.stage3-trailer h4 { margin: 8px 0 12px; font-size: 25px; }.stage3-trailer p { margin: 0; color: #89939b; font-size: 11px; line-height: 1.8; }.stage3-trailer video { display: block; width: 100%; height: 100%; min-height: 285px; object-fit: cover; background: #050607; }
.stage3-playback-lab { padding: 0; overflow: hidden; }.stage3-playback-lab .lab-header { padding: 24px 27px 18px; }.stage3-playback-steps { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 24px 18px; overflow-x: auto; border-block: 1px solid #d2d8d5; background: #eef2f0; scroll-snap-type: x proximity; }.stage3-playback-steps::before { content: ""; position: absolute; left: 58px; right: 58px; top: 50%; height: 1px; background: #c4ccca; }.stage3-playback-steps > i { position: relative; z-index: 1; flex: 0 0 auto; color: #9ba6a3; font-style: normal; }.stage3-playback-step { position: relative; z-index: 2; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; flex: 1 0 106px; min-width: 106px; padding: 12px 8px; border: 1px solid #cbd2cf; border-radius: 5px; background: #fafcfb; color: #24272b; text-align: left; cursor: pointer; scroll-snap-align: center; transition: .25s; }.stage3-playback-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #171a1e; color: var(--cyan); }.stage3-playback-step .line-icon { width: 16px; height: 16px; }.stage3-playback-step small { color: #919b98; font: 8px var(--mono); }.stage3-playback-step b { font-size: 11px; }.stage3-playback-step:hover, .stage3-playback-step.active { border-color: var(--cyan); transform: translateY(-2px); }.stage3-playback-step.active { background: var(--cyan); box-shadow: 0 9px 24px rgba(69,213,232,.2); }.stage3-playback-step.active > span { color: var(--cyan); background: #111418; }.stage3-playback-step.active small { color: rgba(0,0,0,.52); }
.stage3-playback-step { min-height: 68px; }
.stage3-playback-detail { display: grid; grid-template-columns: 1.45fr .55fr; min-height: 225px; background: #12151a; color: #eef0f2; }.stage3-playback-detail > div { padding: 30px; }.stage3-playback-detail > div > span { color: var(--cyan); font: 9px var(--mono); }.stage3-playback-detail h4 { max-width: 700px; margin: 8px 0 12px; font-size: 26px; }.stage3-playback-detail p { margin: 0; color: #959da5; font-size: 12px; line-height: 1.8; }.stage3-playback-detail aside { display: flex; flex-direction: column; padding: 29px 24px; border-left: 1px solid var(--line); background: #181c21; }.stage3-playback-detail aside small { color: #707983; font: 8px var(--mono); }.stage3-playback-detail aside b { margin: 6px 0 22px; color: var(--green); font-size: 12px; line-height: 1.6; }.stage3-playback-detail aside p { font-size: 10px; }
.stage3-playback-detail { grid-template-columns: minmax(250px,.9fr) minmax(310px,1.1fr) minmax(210px,.55fr); min-height: 360px; }.stage3-playback-detail > figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #080a0d; }.stage3-playback-detail picture, .stage3-playback-detail img { display: block; width: 100%; height: 100%; }.stage3-playback-detail img { object-fit: cover; animation: stage3TourImage 9s ease-in-out infinite alternate; }@keyframes stage3TourImage { to { transform: scale(1.045); } }.stage3-playback-detail figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(5,7,10,.94)); pointer-events: none; }.stage3-playback-detail figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; }.stage3-playback-detail figcaption small { display: block; color: var(--cyan); font: 8px var(--mono); }.stage3-playback-detail figcaption b { display: block; margin-top: 5px; font-size: 15px; }.stage3-tour-story > span { color: var(--cyan); font: 9px var(--mono); }.stage3-tour-story > div { margin-top: 22px; padding: 15px; border-left: 2px solid var(--orange); background: #181d22; }.stage3-tour-story > div small { color: var(--orange); font: 8px var(--mono); }.stage3-tour-story > div p { margin-top: 7px; font-size: 10px; line-height: 1.75; }.stage3-tour-controls { border-top: 1px solid var(--line); background: #101419; }.stage3-tour-controls button { min-width: 110px; }
.stage3-protocol-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin: 30px 0 13px; }.stage3-protocol-heading span { font-size: 21px; font-weight: 700; }.stage3-protocol-heading p { max-width: 540px; margin: 0; color: #6c7472; font-size: 10px; line-height: 1.7; }.stage3-protocol-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.stage3-protocol-card { padding: 22px; border: 1px solid #c9d0ce; background: #f7faf8; }.stage3-protocol-card header { display: flex; gap: 12px; align-items: center; }.stage3-protocol-card header > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #12161a; color: var(--cyan); }.stage3-protocol-card header .line-icon { width: 21px; height: 21px; }.stage3-protocol-card small { color: #7d8885; font: 8px var(--mono); }.stage3-protocol-card h4 { margin: 2px 0; font-size: 22px; }.stage3-protocol-card blockquote { min-height: 57px; margin: 18px 0; padding: 12px; border-left: 2px solid var(--cyan); background: #e7eeee; color: #41504d; font-size: 11px; line-height: 1.6; }.stage3-protocol-card.flv blockquote { border-color: var(--orange); }.stage3-protocol-card.webrtc blockquote { border-color: var(--green); }.stage3-protocol-card dl { display: grid; gap: 10px; }.stage3-protocol-card dl div { padding-top: 9px; border-top: 1px solid #d9dfdd; }.stage3-protocol-card dt { color: #858f8d; font-size: 8px; }.stage3-protocol-card dd { margin: 3px 0 0; font-size: 10px; line-height: 1.55; }.stage3-protocol-card > p { margin: 17px 0 0; color: #65706d; font-size: 10px; line-height: 1.6; }
.stage3-manifest-reader { margin-bottom: 22px; overflow: hidden; border: 1px solid #30363e; background: #0c0f12; }.stage3-manifest-head { padding: 20px 24px; border-bottom: 1px solid var(--line); }.stage3-manifest-head span { color: var(--cyan); font: 8px var(--mono); }.stage3-manifest-head h4 { margin: 6px 0 0; font-size: 20px; }.stage3-manifest-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 310px; }.stage3-manifest-lines { display: grid; border-right: 1px solid var(--line); }.stage3-manifest-lines button { display: grid; grid-template-columns: 30px 1fr; align-items: center; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line); background: #12161a; color: #acb4ba; text-align: left; cursor: pointer; }.stage3-manifest-lines button:last-child { border-bottom: 0; }.stage3-manifest-lines button:hover, .stage3-manifest-lines button[aria-pressed="true"] { background: #1a2025; color: var(--green); box-shadow: inset 3px 0 var(--cyan); }.stage3-manifest-lines small { color: #5f6971; font: 8px var(--mono); }.stage3-manifest-lines code { overflow-wrap: anywhere; font: 10px var(--mono); }.stage3-manifest-detail { padding: 29px; }.stage3-manifest-detail span { color: var(--cyan); font: 8px var(--mono); }.stage3-manifest-detail h5 { margin: 9px 0 14px; color: var(--green); font: 16px var(--mono); overflow-wrap: anywhere; }.stage3-manifest-detail p { color: #929ba3; font-size: 11px; line-height: 1.8; }
.stage3-hls-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 20px 0; }.stage3-hls-controls label { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: #d8dde1; font-size: 11px; }.stage3-hls-controls output { color: var(--cyan); font: 10px var(--mono); }.stage3-hls-timeline { display: flex; gap: 6px; padding: 19px; overflow-x: auto; border: 1px solid #2d343a; background: #14181d; }.stage3-segment { position: relative; display: grid; place-items: center; flex: 1 0 70px; min-height: 70px; border: 1px solid #353d44; color: #68727a; font: 9px var(--mono); }.stage3-segment small { position: absolute; left: 6px; top: 5px; }.stage3-segment b { font-weight: 400; }.stage3-segment.buffered { border-color: var(--cyan); background: rgba(69,213,232,.1); color: var(--cyan); }.stage3-segment.playing { box-shadow: inset 0 -4px var(--orange); color: #fff; }.stage3-segment.live { border-color: var(--orange); color: var(--orange); animation: stage3LivePulse 1.6s infinite; }@keyframes stage3LivePulse { 50% { box-shadow: 0 0 15px rgba(255,106,42,.5); } }.stage3-hls-stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; margin-top: 20px; }.stage3-hls-stats div { border-right: 1px solid #30363d; }.stage3-hls-stats span { display: block; color: #737d85; font-size: 8px; }.stage3-hls-stats b { color: #fff; font: 14px var(--mono); }.stage3-hls-stats p { margin: 0; color: #8a939b; font-size: 10px; line-height: 1.7; }
.stage3-flv-pipeline { display: grid; grid-template-columns: repeat(7,auto); align-items: center; gap: 8px; margin-bottom: 22px; padding: 20px; border: 1px solid #ccd1cf; background: #edf0ee; }.stage3-flv-pipeline > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; min-width: 0; padding: 11px; background: #f9fbfa; }.stage3-flv-pipeline > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #171a1e; color: var(--orange); }.stage3-flv-pipeline .line-icon { width: 18px; height: 18px; }.stage3-flv-pipeline small { color: #8a9290; font: 8px var(--mono); }.stage3-flv-pipeline b { font-size: 10px; }.stage3-flv-pipeline > i { color: var(--orange); font-style: normal; }
.stage3-flv-teacher { margin: 24px 0; padding: 27px; border: 1px solid #30373d; border-radius: 7px; background: #11151a; color: #edf1f3; box-shadow: 0 18px 55px rgba(18,20,24,.13); }.stage3-flv-teacher-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid #2d343a; }.stage3-flv-teacher-head span { color: var(--orange); font: 10px var(--mono); letter-spacing: .08em; }.stage3-flv-teacher-head h4 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.03em; }.stage3-flv-teacher-head > p { margin: 0; color: #a7afb5; font-size: 13px; line-height: 1.75; }
.stage3-flv-definitions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }.stage3-flv-definitions > article { padding: 20px; border: 1px solid #30383f; background: #171c22; }.stage3-flv-term-title { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; }.stage3-flv-term-title > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #111; font: 500 10px var(--mono); }.stage3-flv-term-title small { color: #76818a; font: 9px var(--mono); letter-spacing: .08em; }.stage3-flv-term-title h5 { margin: 4px 0 0; font-size: 17px; line-height: 1.4; }.stage3-flv-definitions article > p { color: #aab2b8; font-size: 12px; line-height: 1.75; }.stage3-flv-definitions article > p b { color: #fff; }
.stage3-tag-anatomy { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 9px; margin: 17px 0; }.stage3-tag-anatomy > div { min-width: 0; padding: 13px; border: 1px solid #46515a; background: #0d1115; }.stage3-tag-anatomy > div:first-child { border-color: #9f4b29; }.stage3-tag-anatomy small,.stage3-mse-anatomy small { display: block; color: var(--orange); font: 8px var(--mono); }.stage3-tag-anatomy b { display: block; margin: 7px 0; font-size: 11px; }.stage3-tag-anatomy span { color: #7f8991; font-size: 9px; line-height: 1.5; }.stage3-tag-anatomy > i { align-self: center; color: var(--orange); font-style: normal; }
.stage3-mse-anatomy { display: grid; grid-template-columns: 1fr auto 1fr auto .8fr; align-items: center; gap: 7px; margin: 17px 0; }.stage3-mse-anatomy > span { display: grid; place-items: center; min-height: 76px; padding: 9px; border: 1px solid #3b4851; background: #0d1115; text-align: center; }.stage3-mse-anatomy b { margin-top: 5px; color: #eef2f4; font: 10px var(--mono); }.stage3-mse-anatomy > i { color: var(--cyan); font: 8px var(--mono); font-style: normal; text-align: center; }
.stage3-flv-boundary { margin-bottom: 0; padding: 11px 13px; border-left: 2px solid var(--cyan); background: #11171c; }.stage3-flv-boundary b { color: var(--cyan) !important; }.stage3-flv-real-path { display: grid; grid-template-columns: repeat(11,auto); align-items: center; gap: 7px; margin-top: 12px; padding: 16px; overflow-x: auto; border: 1px solid #30383f; background: #0d1115; }.stage3-flv-real-path span { min-width: 105px; color: #dbe0e3; font-size: 10px; line-height: 1.55; text-align: center; }.stage3-flv-real-path i { color: var(--orange); font-style: normal; }.stage3-flv-teacher > aside { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--orange); background: rgba(255,106,42,.08); color: #aab2b8; font-size: 12px; line-height: 1.75; }.stage3-flv-teacher > aside b { color: var(--orange-2); }
.stage3-flv-modes, .stage3-route-modes { display: flex; gap: 7px; margin: 18px 0; }.stage3-flv-modes button, .stage3-route-modes button { padding: 9px 12px; border: 1px solid #d0d4d2; background: transparent; color: #6f7674; font-size: 10px; cursor: pointer; }.stage3-flv-modes button.active, .stage3-route-modes button.active { border-color: #171a1e; background: #171a1e; color: #fff; }
.stage3-flv-stream { display: grid; grid-template-columns: 75px 1fr 135px 80px; align-items: center; min-height: 130px; padding: 20px; overflow: hidden; border: 1px solid #cbd1ce; background: #e9edeb; }.stage3-flv-server, .stage3-flv-player { display: grid; place-items: center; height: 70px; border-radius: 5px; background: #171b20; color: #fff; font: 10px var(--mono); }.stage3-flv-pipe { position: relative; height: 34px; overflow: hidden; border: 2px solid #adb6b3; border-inline: 0; background: #d9dfdc; }.stage3-flv-pipe > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 13px; }.stage3-flv-pipe i { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 2px; background: var(--orange); animation: stage3FlvPacket 2.7s linear infinite; animation-delay: calc(var(--i) * -170ms); }@keyframes stage3FlvPacket { from { transform: translateX(-40px); } to { transform: translateX(510px); } }.stage3-flv-stream.mode-jitter .stage3-flv-pipe i { animation-duration: var(--speed); }.stage3-flv-stream.mode-outage .stage3-flv-pipe > span { animation: stage3Outage 4s steps(1) infinite; }@keyframes stage3Outage { 48%,75% { opacity: .08; } }.stage3-flv-buffer { display: flex; gap: 5px; justify-content: center; padding: 10px; border: 2px solid #727d79; }.stage3-flv-buffer span { width: 22px; height: 30px; background: var(--cyan); }.stage3-flv-stream.danger .stage3-flv-buffer span:last-child { background: #d34b43; animation: stage3BufferBlink .6s infinite; }@keyframes stage3BufferBlink { 50% { opacity: .2; } }.stage3-flv-buffer-control { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 20px 0; font-size: 11px; }.stage3-flv-buffer-control output { color: var(--orange); font: 10px var(--mono); }.stage3-flv-stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; }.stage3-flv-stats div { border-right: 1px solid #d0d5d2; }.stage3-flv-stats span { display: block; color: #7e8683; font-size: 8px; }.stage3-flv-stats b { font: 14px var(--mono); }.stage3-flv-stats b.danger { color: #bd352e; }.stage3-flv-stats p { margin: 0; color: #68706e; font-size: 10px; line-height: 1.7; }
.stage3-webrtc-connect { margin-bottom: 22px; overflow: hidden; border: 1px solid #30363e; background: #0d1014; }.stage3-webrtc-track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); padding: 28px 25px; border-bottom: 1px solid var(--line); }.stage3-webrtc-track::before { content: ""; position: absolute; left: 12%; right: 12%; top: 47px; height: 1px; background: #3b424a; }.stage3-webrtc-step { position: relative; z-index: 2; min-width: 105px; border: 0; background: transparent; color: #69727b; cursor: pointer; }.stage3-webrtc-step i { display: block; width: 18px; height: 18px; margin: 10px auto; border: 2px solid #4b535c; border-radius: 50%; background: #0d1014; }.stage3-webrtc-step small { display: block; font: 8px var(--mono); }.stage3-webrtc-step b { font: 10px var(--mono); }.stage3-webrtc-step.active { color: #fff; }.stage3-webrtc-step.active i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 20px rgba(69,213,232,.55); }.stage3-webrtc-step.passed i { border-color: var(--green); background: var(--green); }.stage3-webrtc-reader { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 225px; }.stage3-webrtc-reader > div { padding: 28px; }.stage3-webrtc-reader > div > span { color: var(--cyan); font: 8px var(--mono); }.stage3-webrtc-reader h4 { margin: 7px 0; font-size: 27px; }.stage3-webrtc-reader code { display: inline-block; margin: 7px 0 13px; padding: 7px 10px; background: #1e242a; color: var(--green); font: 10px var(--mono); }.stage3-webrtc-reader p { color: #929aa2; font-size: 11px; line-height: 1.8; }.stage3-webrtc-reader aside { padding: 28px 23px; border-left: 1px solid var(--line); background: #171b20; }.stage3-webrtc-reader aside b { color: var(--orange); font-size: 11px; }.stage3-webrtc-reader aside p { color: #858e97; font-size: 10px; line-height: 1.8; }
.stage3-route-lab { color: #eef0f2; }.stage3-route-modes button { border-color: #343b42; color: #818a92; }.stage3-route-modes button.active { border-color: var(--cyan); background: rgba(69,213,232,.1); color: var(--cyan); }.stage3-webrtc-route { display: grid; grid-template-columns: 90px 1fr 80px 1fr 90px; gap: 8px; align-items: center; min-height: 150px; padding: 23px; border: 1px solid #30363d; background: #14181d; }.stage3-webrtc-route .endpoint, .stage3-webrtc-route .turn-node { display: grid; place-items: center; height: 72px; border: 1px solid #3b434a; border-radius: 50%; color: #d9dfe3; font-size: 10px; }.stage3-webrtc-route .turn-node { height: 58px; border-radius: 5px; color: #66717a; transition: .3s; }.stage3-webrtc-route .direct-line, .stage3-webrtc-route .relay-line { position: relative; height: 3px; overflow: hidden; background: rgba(69,213,232,.35); }.stage3-webrtc-route .direct-line i, .stage3-webrtc-route .relay-line i { display: block; width: 22px; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: stage3RoutePulse 1.4s linear infinite; }@keyframes stage3RoutePulse { to { transform: translateX(220px); } }.stage3-webrtc-route.relay .turn-node { border-color: var(--orange); background: rgba(255,106,42,.1); color: var(--orange); }.stage3-webrtc-route.relay .direct-line, .stage3-webrtc-route.relay .relay-line { background: rgba(255,106,42,.3); }.stage3-webrtc-route.relay .direct-line i, .stage3-webrtc-route.relay .relay-line i { background: var(--orange); box-shadow: 0 0 10px var(--orange); }.stage3-route-stats { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 15px; margin-top: 17px; }.stage3-route-stats div { border-right: 1px solid #30363d; }.stage3-route-stats span { display: block; color: #727c84; font-size: 8px; }.stage3-route-stats b { color: #fff; font: 11px/1.5 var(--mono); }.stage3-route-hint { color: #89929a; font-size: 10px; line-height: 1.7; }
.stage3-distribution-lesson { background: #e7ecea; }
.stage3-delivery-terms { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 22px; }
.stage3-delivery-terms > section { padding: 21px; border: 1px solid #c6cecb; background: #f7faf8; }
.stage3-delivery-terms small { color: #438b96; font: 8px var(--mono); }
.stage3-delivery-terms b { display: block; margin: 8px 0; font-size: 15px; }
.stage3-delivery-terms p { margin: 0; color: #69736f; font-size: 10px; line-height: 1.75; }
.stage3-distribution-lab { color: #edf1f3; border-color: #30373d; background: #0d1115; box-shadow: none; }
.stage3-distribution-lab .lab-score { max-width: 260px; color: #737e86; font-size: 9px; text-align: right; }
.stage3-distribution-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.stage3-distribution-modes button { padding: 10px 15px; border: 1px solid #343c43; background: transparent; color: #818b93; font-size: 10px; cursor: pointer; }
.stage3-distribution-modes button.active { border-color: var(--cyan); background: rgba(69,213,232,.12); color: var(--cyan); }
.stage3-distribution-map { position: relative; display: grid; grid-template-columns: 120px 1fr 190px 1fr 250px; align-items: center; gap: 14px; min-height: 260px; padding: 29px; overflow: hidden; border: 1px solid #303840; background: radial-gradient(circle at 70% 45%,rgba(69,213,232,.08),transparent 35%),#14191e; }
.stage3-distribution-map::before { content: "CDN EDGE DELIVERY"; position: absolute; left: 15px; top: 13px; color: #4d5861; font: 7px var(--mono); letter-spacing: .12em; }
.stage3-origin-node { display: grid; place-items: center; gap: 6px; min-height: 105px; border: 1px solid #4b555d; border-radius: 7px; background: #1c2228; }
.stage3-origin-node small { color: #65717a; font: 8px var(--mono); }.stage3-origin-node b { font-size: 14px; }.stage3-origin-node span { padding: 4px 7px; border-radius: 3px; background: rgba(166,239,103,.12); color: var(--green); font: 7px var(--mono); }
.stage3-delivery-trunk,.stage3-delivery-fan { position: relative; height: 4px; overflow: visible; background: rgba(69,213,232,.24); }
.stage3-delivery-trunk > i,.stage3-delivery-fan > i { position: absolute; left: -10px; top: -4px; width: 12px; height: 12px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(69,213,232,.65); animation: stage3DeliveryPacket 2.1s linear infinite; }
.stage3-delivery-trunk > i:nth-child(2),.stage3-delivery-fan > i:nth-child(2) { animation-delay: -.7s; }.stage3-delivery-trunk > i:nth-child(3),.stage3-delivery-fan > i:nth-child(3) { animation-delay: -1.4s; }
@keyframes stage3DeliveryPacket { to { left: calc(100% + 8px); } }
.stage3-edge-layer { display: grid; gap: 10px; }
.stage3-edge-layer > div { display: grid; place-items: center; min-height: 53px; border: 1px solid #367984; border-radius: 5px; background: rgba(69,213,232,.09); color: var(--cyan); font: 9px var(--mono); transition: .3s; }
.stage3-viewer-layer { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding-top: 24px; }
.stage3-viewer-layer::before { content: "VIEWERS"; position: absolute; left: 0; top: 0; color: #5d6870; font: 7px var(--mono); }
.stage3-viewer-layer::after { content: "PEER ↔ PEER"; position: absolute; right: 0; top: 0; color: var(--green); font: 7px var(--mono); opacity: 0; transition: .3s; }
.stage3-viewer-layer span { display: grid; place-items: center; min-height: 57px; border: 1px solid #444d54; border-radius: 50%; background: #20262c; color: #a2abb2; font-size: 8px; transition: .3s; }
.stage3-distribution-map.mode-direct .stage3-edge-layer { opacity: .2; filter: grayscale(1); }
.stage3-distribution-map.mode-direct .stage3-delivery-trunk,.stage3-distribution-map.mode-direct .stage3-delivery-fan { background: rgba(255,106,42,.28); }
.stage3-distribution-map.mode-direct .stage3-delivery-trunk > i,.stage3-distribution-map.mode-direct .stage3-delivery-fan > i { background: var(--orange); box-shadow: 0 0 10px rgba(255,106,42,.65); }
.stage3-distribution-map.mode-direct .stage3-origin-node { border-color: #b4493d; box-shadow: 0 0 22px rgba(180,73,61,.18); }
.stage3-distribution-map.mode-direct .stage3-origin-node span { background: rgba(239,93,83,.12); color: #ff8279; }
.stage3-distribution-map.mode-p2p .stage3-viewer-layer::after { opacity: 1; }
.stage3-distribution-map.mode-p2p .stage3-viewer-layer span { border-color: #6a9c47; color: var(--green); box-shadow: inset 0 0 14px rgba(166,239,103,.08); animation: stage3PeerPulse 1.8s ease-in-out infinite alternate; }
.stage3-distribution-map.mode-p2p .stage3-viewer-layer span:nth-child(even) { animation-delay: -.9s; }
@keyframes stage3PeerPulse { to { transform: translateY(-3px); box-shadow: 0 0 16px rgba(166,239,103,.18); } }
.stage3-distribution-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0; }
.stage3-distribution-controls label { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #cbd2d7; font-size: 10px; transition: opacity .2s; }
.stage3-distribution-controls output { color: var(--cyan); font: 9px var(--mono); }.stage3-distribution-controls input { grid-column: 1 / -1; }.stage3-distribution-controls label.disabled { opacity: .38; }
.stage3-distribution-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #30373e; }
.stage3-distribution-stats > div { padding: 16px; background: #171c21; }
.stage3-distribution-stats span { display: block; color: #747f87; font-size: 8px; }.stage3-distribution-stats b { display: block; margin-top: 7px; color: #fff; font: 14px var(--mono); }
.stage3-distribution-hint { min-height: 45px; margin: 17px 0 0; color: #8c969e; font-size: 10px; line-height: 1.75; }
.stage3-delivery-matrix { margin: 22px 0; border: 1px solid #c5cdca; background: #f8faf9; }
.stage3-delivery-matrix header { display: grid; grid-template-columns: .45fr 1.55fr; gap: 20px; padding: 20px; border-bottom: 1px solid #d2d8d5; background: #dce5e2; }
.stage3-delivery-matrix header span { font-size: 16px; font-weight: 700; }.stage3-delivery-matrix header p { margin: 0; color: #68716e; font-size: 10px; line-height: 1.7; }
.stage3-delivery-matrix > div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #dce1df; }
.stage3-delivery-matrix > div:last-child { border-bottom: 0; }.stage3-delivery-matrix b { font: 10px var(--mono); }.stage3-delivery-matrix span { color: #68716e; font-size: 10px; line-height: 1.65; }
.stage3-selector-lesson { background: #e8eceb; }.stage3-choice-rule { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 22px; }.stage3-choice-rule > div { padding: 19px; border: 1px solid #cbd1cf; background: #f6f8f7; }.stage3-choice-rule small { color: var(--cyan); font: 8px var(--mono); }.stage3-choice-rule b { display: block; margin: 7px 0; font-size: 12px; }.stage3-choice-rule p { margin: 0; color: #737b79; font-size: 9px; }.stage3-choice-rule > i { color: var(--orange); font-style: normal; }.stage3-scenario-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 20px; }.stage3-scenario-card { padding: 19px; border: 1px solid #d0d5d2; background: #f7f9f8; }.stage3-scenario-card > small { color: #8a9390; font: 8px var(--mono); }.stage3-scenario-card h4 { margin: 6px 0; font-size: 17px; }.stage3-scenario-card p { min-height: 39px; color: #6f7775; font-size: 10px; line-height: 1.65; }.stage3-scenario-card > div { display: flex; gap: 6px; }.stage3-scenario-card button { padding: 7px 9px; border: 1px solid #c9cfcd; background: #fff; color: #4f5755; font-size: 9px; cursor: pointer; }.stage3-scenario-card button.correct { border-color: #4f9a27; color: #3e7f1e; }.stage3-scenario-card button.wrong { border-color: #bd423a; color: #a42f29; }.stage3-scenario-card button:disabled { cursor: default; }.stage3-scenario-card > span { display: block; min-height: 33px; margin-top: 9px; font-size: 9px; line-height: 1.6; }.stage3-scenario-card > span.success { color: #3c7e1d; }.stage3-scenario-card > span.error { color: #a83630; }
.stage3-diagnostic-lesson { background: #f1eee7; }.stage3-diagnostic-chain { padding: 14px; border: 1px solid #d0cbc1; background: #faf8f2; }.stage3-evidence-panel h4 { margin: 8px 0; font-size: 23px; }.stage3-evidence-panel pre { padding: 14px; overflow-x: auto; border: 1px solid #2e353c; background: #0b0d10; color: var(--green); white-space: pre-wrap; font: 10px/1.7 var(--mono); }.stage3-evidence-panel > small { display: block; color: #88919a; font-size: 10px; line-height: 1.7; }.stage3-evidence-panel .feedback.success { color: var(--green); }.stage3-evidence-panel .feedback.error { color: #ff8585; }.stage3-evidence-panel button:disabled { cursor: default; opacity: .72; }
.stage3-checkpoint { background: linear-gradient(135deg,#45d5e8,#60c8d5); }.stage3-readiness { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-bottom: 26px; background: rgba(0,0,0,.23); }.stage3-readiness > div { padding: 19px; background: rgba(255,255,255,.17); }.stage3-readiness small { font: 8px var(--mono); }.stage3-readiness b { display: block; margin: 7px 0; font-size: 12px; }.stage3-readiness p { margin: 0; font-size: 9px; line-height: 1.65; }
.stage4-hero { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(35px,5vw,75px); min-height: 650px; padding: 76px clamp(42px,7vw,110px); overflow: hidden; background: radial-gradient(circle at 82% 42%,rgba(226,114,255,.14),transparent 34%),linear-gradient(135deg,#0b0d10 20%,#15101a); }.stage4-hero::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(226,114,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,213,232,.06) 1px,transparent 1px); background-size: 34px 34px; }.stage4-hero-copy,.stage4-hero-figure { position: relative; z-index: 1; }.stage4-hero-copy h2 { margin: 22px 0; font-size: clamp(48px,5.6vw,80px); line-height: 1.04; letter-spacing: -.065em; }.stage4-hero-copy h2 em { color: var(--magenta); font-style: normal; }.stage4-hero-copy > p { max-width: 640px; color: #9591a0; font-size: 15px; line-height: 1.9; }.stage4-hero-figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #3b2e42; border-radius: 10px; background: #090b0e; box-shadow: 0 30px 90px rgba(0,0,0,.62),0 0 55px rgba(226,114,255,.09); }.stage4-hero-figure picture,.stage4-hero-figure img { display: block; width: 100%; }.stage4-hero-figure img { aspect-ratio: 16 / 9; object-fit: cover; }.stage4-hero-figure figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(8,10,13,.86); backdrop-filter: blur(12px); }.stage4-hero-figure figcaption > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--magenta); color: #111; }.stage4-hero-figure figcaption .line-icon { width: 21px; height: 21px; }.stage4-hero-figure figcaption b { font-size: 12px; }.stage4-hero-figure figcaption small { color: #8d8791; font: 8px var(--mono); }
.stage4-lesson-nav { position: sticky; z-index: 6; top: 70px; display: grid; grid-template-columns: repeat(6,1fr); border-block: 1px solid var(--line); background: rgba(13,15,19,.94); backdrop-filter: blur(16px); }.stage4-lesson-nav button { display: flex; gap: 8px; justify-content: center; padding: 14px 10px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #9d98a2; font-size: 10px; cursor: pointer; }.stage4-lesson-nav button:hover { color: #fff; background: rgba(226,114,255,.08); }.stage4-lesson-nav small { color: var(--magenta); font: 8px var(--mono); }
.stage4-overview { background: #f0ece6; }.stage4-wide-figure { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; min-height: 360px; margin: 0 0 22px; overflow: hidden; border: 1px solid #c9c5bd; background: #111418; }.stage4-wide-figure picture,.stage4-wide-figure img { display: block; width: 100%; height: 100%; }.stage4-wide-figure img { object-fit: cover; }.stage4-wide-figure figcaption { display: flex; gap: 15px; align-items: center; padding: 28px; background: #171a1f; color: #eef0f2; }.stage4-wide-figure figcaption > span { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--magenta); color: #111; }.stage4-wide-figure figcaption .line-icon { width: 23px; height: 23px; }.stage4-wide-figure figcaption b { display: block; margin-bottom: 7px; font-size: 15px; }.stage4-wide-figure figcaption p { margin: 0; color: #8f979e; font-size: 10px; line-height: 1.7; }.stage4-wide-figure.dark { border-color: #30343b; }.stage4-wide-figure.light { background: #f7f4ee; }.stage4-teacher-note { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; padding: 17px 20px; border-left: 3px solid var(--magenta); background: #e5dce5; }.stage4-teacher-note > span { color: var(--magenta); font-size: 24px; }.stage4-teacher-note .line-icon { width: 24px; height: 24px; }.stage4-teacher-note b { font-size: 12px; }.stage4-teacher-note p { margin: 4px 0 0; color: #706a72; font-size: 10px; line-height: 1.7; }
.stage4-trailer { display: grid; grid-template-columns: .72fr 1.28fr; margin-bottom: 22px; overflow: hidden; border: 1px solid #2f333b; background: #0d1014; color: #eef0f2; }.stage4-trailer > div { padding: 27px; }.stage4-trailer span { color: var(--magenta); font: 8px var(--mono); }.stage4-trailer h4 { margin: 8px 0; font-size: 23px; }.stage4-trailer p { color: #8d959c; font-size: 10px; line-height: 1.75; }.stage4-trailer video { display: block; width: 100%; min-height: 290px; object-fit: cover; background: #080a0d; }
.stage4-tour { padding: 0; overflow: hidden; background: #0d1014; color: #eef0f2; border-color: #2d3239; }.stage4-tour .lab-header { padding: 23px 25px 15px; }.stage4-tour-steps { display: grid; grid-template-columns: repeat(11,auto); align-items: center; gap: 5px; padding: 19px 24px; overflow-x: auto; border-block: 1px solid var(--line); }.stage4-tour-step { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 8px; min-width: 118px; padding: 9px; border: 1px solid #333943; background: #15191e; color: #747d85; text-align: left; cursor: pointer; }.stage4-tour-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #20262c; }.stage4-tour-step .line-icon { width: 17px; height: 17px; }.stage4-tour-step small { font: 8px var(--mono); }.stage4-tour-step b { font-size: 10px; }.stage4-tour-step.active { border-color: var(--magenta); color: #fff; box-shadow: inset 0 -3px var(--magenta); }.stage4-tour-step.active > span { background: var(--magenta); color: #111; }.stage4-tour-steps > i { color: #505761; font-style: normal; }.stage4-tour-detail { display: grid; grid-template-columns: minmax(250px,.9fr) minmax(310px,1.1fr) minmax(210px,.55fr); min-height: 360px; }.stage4-tour-detail > figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #080a0d; }.stage4-tour-detail picture,.stage4-tour-detail img { display: block; width: 100%; height: 100%; }.stage4-tour-detail img { object-fit: cover; animation: stage4TourImage 9s ease-in-out infinite alternate; }@keyframes stage4TourImage { to { transform: scale(1.045); } }.stage4-tour-detail figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(5,7,10,.94)); pointer-events: none; }.stage4-tour-detail figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; }.stage4-tour-detail figcaption small { display: block; color: var(--magenta); font: 8px var(--mono); }.stage4-tour-detail figcaption b { display: block; margin-top: 5px; font-size: 15px; }.stage4-tour-story { padding: 29px; }.stage4-tour-story > span { color: var(--magenta); font: 9px var(--mono); }.stage4-tour-story h4 { margin: 8px 0 13px; font-size: 25px; }.stage4-tour-story > p { color: #a1a8af; font-size: 11px; line-height: 1.8; }.stage4-tour-story > div { margin-top: 22px; padding: 15px; border-left: 2px solid var(--cyan); background: #181d22; }.stage4-tour-story > div small { color: var(--cyan); font: 8px var(--mono); }.stage4-tour-story > div p { margin: 7px 0 0; color: #9099a1; font-size: 10px; line-height: 1.75; }.stage4-tour-detail aside { padding: 28px 23px; border-left: 1px solid var(--line); background: #171b20; }.stage4-tour-detail aside small { display: block; color: #68717a; font: 8px var(--mono); }.stage4-tour-detail aside b { display: block; margin: 7px 0 30px; color: var(--green); font-size: 12px; line-height: 1.5; }.stage4-tour-detail aside p { color: #929aa2; font-size: 10px; line-height: 1.7; }.stage4-tour-controls { background: #101419; }.stage4-tour-controls button { min-width: 110px; }
.stage4-latency-controls { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px 24px; margin: 22px 0; }.stage4-latency-controls label { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: #d8dde1; font-size: 10px; }.stage4-latency-controls output { color: var(--magenta); font: 9px var(--mono); }.stage4-latency-controls input { grid-column: 1 / -1; }.stage4-latency-bars { display: grid; gap: 8px; padding: 18px; border: 1px solid #30363d; background: #12161a; }.stage4-latency-bars > div { display: grid; grid-template-columns: 85px 1fr 70px; align-items: center; gap: 10px; color: #8d969e; font-size: 9px; }.stage4-latency-bars i { display: block; width: var(--share); height: 10px; border-radius: 5px; background: var(--bar); box-shadow: 0 0 12px color-mix(in srgb,var(--bar),transparent 50%); transition: width .3s; }.stage4-latency-bars b { color: #d9dfe3; font: 9px var(--mono); }.stage4-latency-summary { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; margin-top: 18px; }.stage4-latency-summary div { border-right: 1px solid #30363d; }.stage4-latency-summary span { display: block; color: #78818a; font-size: 8px; }.stage4-latency-summary b { font: 15px var(--mono); }.stage4-latency-summary b.safe { color: var(--green); }.stage4-latency-summary b.warning { color: var(--orange); }.stage4-latency-summary b.danger { color: #ff7474; }.stage4-latency-summary p { margin: 0; color: #8d969e; font-size: 10px; line-height: 1.7; }
.stage4-stutter-modes,.stage4-sync-modes { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }.stage4-stutter-modes button,.stage4-sync-modes button { padding: 9px 12px; border: 1px solid #ccd1cf; background: transparent; color: #747b79; font-size: 10px; cursor: pointer; }.stage4-stutter-modes button.active,.stage4-sync-modes button.active { border-color: #171a1e; background: #171a1e; color: #fff; }.stage4-stutter-monitor { display: grid; grid-template-columns: 1fr 90px 100px; align-items: center; gap: 18px; min-height: 185px; padding: 25px; overflow: hidden; border: 1px solid #cbd0ce; background: #e7ebe9; }.stage4-arrival-wave { display: flex; align-items: end; gap: 5px; height: 105px; padding: 13px; border-bottom: 1px solid #89938f; background: #12161a; }.stage4-arrival-wave i { flex: 1; height: var(--h); background: var(--cyan); transform-origin: bottom; animation: stage4Pulse 1.2s ease-in-out infinite alternate; }@keyframes stage4Pulse { to { transform: scaleY(.62); opacity: .55; } }.stage4-buffer-tank { position: relative; height: 130px; overflow: hidden; border: 3px solid #66716d; border-top: 0; border-radius: 0 0 8px 8px; background: #d8deda; }.stage4-buffer-tank > span { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(#55d9e8,#3098aa); transition: height .35s; }.stage4-buffer-tank > i { position: absolute; left: 0; right: 0; top: 20%; border-top: 1px dashed #52605b; }.stage4-buffer-tank.danger { border-color: #c34942; animation: stage4TankAlarm .7s infinite alternate; }@keyframes stage4TankAlarm { to { box-shadow: 0 0 18px rgba(195,73,66,.45); } }.stage4-player-patient { display: grid; place-items: center; gap: 7px; height: 100px; border-radius: 50%; background: #161a1e; color: #fff; }.stage4-player-patient > span { color: var(--magenta); }.stage4-player-patient .line-icon { width: 25px; height: 25px; }.stage4-player-patient b { font: 9px var(--mono); }.stage4-player-patient i { width: 32px; height: 5px; background: var(--green); animation: stage4Heartbeat .9s infinite; }@keyframes stage4Heartbeat { 50% { width: 55px; background: var(--orange); } }.stage4-buffer-control,.stage4-sync-control { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 20px 0; font-size: 11px; }.stage4-buffer-control output,.stage4-sync-control output { color: var(--magenta); font: 10px var(--mono); }.stage4-buffer-control input,.stage4-sync-control input { grid-column: 1 / -1; }.stage4-stutter-stats,.stage4-sync-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr 2fr; gap: 15px; }.stage4-stutter-stats div,.stage4-sync-stats div { border-right: 1px solid #d0d4d2; }.stage4-stutter-stats span,.stage4-sync-stats span { display: block; color: #7c8582; font-size: 8px; }.stage4-stutter-stats b,.stage4-sync-stats b { font: 11px/1.5 var(--mono); }.stage4-stutter-stats b.safe,.stage4-sync-stats b.safe { color: #3d861d; }.stage4-stutter-stats b.warning,.stage4-sync-stats b.warning { color: #a56717; }.stage4-stutter-stats b.danger,.stage4-sync-stats b.danger { color: #b93b34; }.stage4-stutter-stats p,.stage4-sync-stats p { margin: 0; color: #69716e; font-size: 10px; line-height: 1.7; }
.stage4-stutter-lab { margin-inline: -56px; padding: 40px; }
.stage4-stutter-lab .lab-header h4 { font-size: 28px; }
.stage4-stutter-lab .lab-tag { font-size: 11px; }
.stage4-stutter-lab .lab-score { font-size: 14px; }
.stage4-stutter-modes { gap: 10px; margin: 25px 0; }
.stage4-stutter-modes button { padding: 12px 18px; font-size: 12px; }
.stage4-stutter-monitor { display: block; min-height: 0; padding: 28px; overflow: hidden; background: #e7ebe9; }
.stage4-flow-track { display: grid; grid-template-columns: minmax(260px,1.65fr) 24px minmax(135px,.75fr) 24px minmax(145px,.8fr) 24px minmax(155px,.9fr); align-items: center; gap: 8px; }
.stage4-flow-stop { min-width: 0; padding: 18px; border: 1px solid #c2c9c6; background: #f8faf9; box-shadow: 0 7px 18px rgba(17,22,26,.06); }
.stage4-flow-stop header { display: grid; grid-template-columns: 1fr auto; gap: 4px 9px; min-height: 58px; margin-bottom: 14px; }
.stage4-flow-stop header small { color: #89918e; font: 9px var(--mono); }
.stage4-flow-stop header b { grid-column: 1; color: #242a2d; font-size: 14px; }
.stage4-flow-stop header span { grid-column: 2; grid-row: 1 / 3; align-self: center; max-width: 72px; color: #616a67; font-size: 10px; line-height: 1.45; text-align: right; }
.stage4-flow-arrow { color: var(--orange); font: normal 26px var(--mono); text-align: center; }
.stage4-packet-road { position: relative; height: 100px; overflow: hidden; border: 1px solid #343b40; background: repeating-linear-gradient(90deg,#171c21 0 26px,#1c2228 26px 52px); }
.stage4-packet-road::after { content: "DATA ROAD"; position: absolute; right: 7px; bottom: 5px; color: #596169; font: 6px var(--mono); }
.stage4-packet-road > i { position: absolute; z-index: 1; left: -38px; top: 28px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #101418; border-radius: 5px; background: var(--cyan); box-shadow: 0 0 15px rgba(69,213,232,.5); animation: stage4PacketTravel var(--duration) linear infinite; animation-delay: var(--delay); }
.stage4-packet-road > i span { color: #101418; font: 9px var(--mono); }
.stage4-packet-road > i.lost { border-color: #7e1f1b; background: #ed5c54; box-shadow: 0 0 14px rgba(237,92,84,.55); animation-name: stage4PacketLost; }
.stage4-packet-road > i.lost span { color: #fff; font-size: 13px; }
@keyframes stage4PacketTravel { from { left: -38px; } to { left: calc(100% + 38px); } }
@keyframes stage4PacketLost { 0% { left: -38px; opacity: 1; transform: rotate(0); } 58% { left: 54%; opacity: 1; transform: rotate(0); } 72%,100% { left: 57%; opacity: 0; transform: rotate(25deg) scale(.4); } }
.stage4-buffer-stop { text-align: center; }
.stage4-buffer-stop header { text-align: left; }
.stage4-buffer-tank { width: 94px; height: 130px; margin-inline: auto; }
.stage4-buffer-tank > span { height: var(--water-level); transition: none; animation: stage4WaterStable 2.8s ease-in-out infinite alternate; }
.stage4-buffer-tank > small { position: absolute; z-index: 2; left: 3px; right: 3px; top: 16%; color: #3f4a46; font: 8px var(--mono); text-align: center; }
.stage4-stutter-monitor[data-mode="jitter"] .stage4-buffer-tank > span { animation-name: stage4WaterJitter; animation-duration: 2.2s; }
.stage4-stutter-monitor[data-mode="loss"] .stage4-buffer-tank > span { animation-name: stage4WaterLoss; animation-duration: 3.2s; }
.stage4-stutter-monitor[data-mode="decode"] .stage4-buffer-tank > span { animation-name: stage4WaterDecode; animation-duration: 2.6s; }
@keyframes stage4WaterStable { from { height: var(--water-level); } to { height: var(--water-low); } }
@keyframes stage4WaterJitter { 0%,100% { height: var(--water-level); } 35% { height: var(--water-low); } 58% { height: calc(var(--water-low) + 18%); } 78% { height: calc(var(--water-low) + 5%); } }
@keyframes stage4WaterLoss { 0%,20% { height: var(--water-level); } 72%,100% { height: var(--water-low); } }
@keyframes stage4WaterDecode { from { height: var(--water-level); } to { height: var(--water-low); } }
.stage4-decode-stop { text-align: center; }
.stage4-decode-stop header { text-align: left; }
.stage4-decoder-worker { position: relative; display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 4px; width: 112px; height: 112px; margin-inline: auto; border: 2px solid #394148; border-radius: 9px; background: #171c21; }
.stage4-decoder-worker > i { width: 38px; height: 38px; border: 6px dotted var(--cyan); border-radius: 50%; animation: stage4DecoderSpin 1s linear infinite; }
.stage4-decoder-worker > i:nth-child(2) { width: 29px; height: 29px; margin-top: 15px; border-color: var(--orange); animation-direction: reverse; }
.stage4-decoder-worker > b { grid-column: 1 / -1; color: #9da6ad; font: 9px var(--mono); }
.stage4-decoder-worker > span { position: absolute; left: -9px; width: 13px; height: 13px; border-radius: 2px; background: #ed5c54; opacity: 0; }
.stage4-decoder-worker > span:nth-last-child(3) { top: 17px; }.stage4-decoder-worker > span:nth-last-child(2) { top: 37px; }.stage4-decoder-worker > span:last-child { top: 57px; }
.stage4-decoder-worker.overloaded { border-color: #c24842; box-shadow: 0 0 16px rgba(194,72,66,.3); }
.stage4-decoder-worker.overloaded > i { border-color: #ed5c54; animation-duration: 3.4s; }
.stage4-decoder-worker.overloaded > span { opacity: 1; animation: stage4DecoderBacklog .8s ease-in-out infinite alternate; }
@keyframes stage4DecoderSpin { to { transform: rotate(360deg); } }
@keyframes stage4DecoderBacklog { to { transform: translateX(-5px); opacity: .45; } }
.stage4-screen-stop { text-align: center; }
.stage4-screen-stop header { text-align: left; }
.stage4-viewer-screen { position: relative; width: 140px; height: 98px; margin-inline: auto; overflow: hidden; border: 6px solid #1b2025; border-radius: 6px; background: #07090b; box-shadow: 0 8px 16px rgba(0,0,0,.2); }
.stage4-viewer-screen::after { content: ""; position: absolute; left: 45%; bottom: -13px; width: 10px; height: 13px; background: #1b2025; box-shadow: -16px 13px 0 6px #1b2025; }
.stage4-viewer-screen > span { position: absolute; inset: 5px; background: radial-gradient(circle at 72% 32%,#ffe998 0 5%,transparent 6%),linear-gradient(155deg,transparent 42%,#402e58 43% 56%,transparent 57%),linear-gradient(180deg,#59c9df,#d979ad 55%,#2b3442 56%); animation: stage4ScreenMotion 2.4s ease-in-out infinite alternate; }
.stage4-viewer-screen > i { position: absolute; z-index: 2; left: 8px; right: 8px; top: 50%; height: 1px; background: rgba(255,255,255,.3); }
.stage4-viewer-screen > b { position: absolute; z-index: 3; right: 6px; bottom: 6px; padding: 4px 6px; background: rgba(9,12,15,.82); color: var(--green); font: 8px var(--mono); }
.stage4-viewer-screen.danger > b { color: #ff7b74; }
.stage4-viewer-screen.mode-jitter > span { animation: stage4ScreenJitter 2.6s steps(1) infinite; }
.stage4-viewer-screen.mode-loss > span { animation: stage4ScreenLoss 3.2s steps(1) infinite; }
.stage4-viewer-screen.mode-decode > span { animation: stage4ScreenDecode .8s steps(2,end) infinite; }
@keyframes stage4ScreenMotion { to { transform: translateX(4px) scale(1.05); } }
@keyframes stage4ScreenJitter { 0%,18%,52%,67%,100% { transform: translateX(0); filter: none; } 19%,51%,68%,82% { transform: translateX(-5px); filter: saturate(.65); } }
@keyframes stage4ScreenLoss { 0%,25%,82%,100% { filter: none; } 26%,81% { filter: grayscale(.9) brightness(.55); } }
@keyframes stage4ScreenDecode { 0% { transform: translateX(-5px); } 100% { transform: translateX(6px); } }
.stage4-cause-callout { display: grid; grid-template-columns: 125px minmax(150px,.75fr) 2fr; align-items: center; gap: 18px; margin-top: 21px; padding: 18px 21px; border-left: 4px solid var(--orange); background: #151a1f; color: #edf1f3; }
.stage4-cause-callout small { color: #78828a; font: 9px var(--mono); }.stage4-cause-callout b { color: var(--orange); font-size: 14px; }.stage4-cause-callout p { margin: 0; color: #a5adb3; font-size: 12px; line-height: 1.7; }
.stage4-signal-panels { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 1px; background: #cbd0ce; border: 1px solid #cbd0ce; }
.stage4-signal-panels > section { min-width: 0; padding: 22px; background: #f7f9f8; }
.stage4-signal-panels header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.stage4-signal-panels header span { color: #343b39; font-size: 12px; }.stage4-signal-panels header b { color: #707976; font: 9px var(--mono); }
.stage4-signal-panels small { display: block; margin-top: 10px; color: #747d7a; font-size: 9px; line-height: 1.55; }
.stage4-mini-chart { display: flex; align-items: end; gap: 5px; height: 120px; margin-top: 14px; padding: 10px 8px 0; border-left: 1px solid #8f9995; border-bottom: 1px solid #8f9995; background: repeating-linear-gradient(0deg,transparent 0 29px,rgba(60,70,67,.07) 30px); }
.stage4-mini-chart i { flex: 1; min-width: 3px; height: var(--value); border-radius: 2px 2px 0 0; background: var(--cyan); transition: height .35s; }
.stage4-mini-chart.buffer i { background: var(--magenta); }.stage4-mini-chart.drop i { background: var(--orange); }
.stage4-stutter-lab .stage4-buffer-control { margin: 28px 0; font-size: 14px; }
.stage4-stutter-lab .stage4-buffer-control output { font-size: 12px; }
.stage4-stutter-lab .stage4-stutter-stats { gap: 22px; }
.stage4-stutter-lab .stage4-stutter-stats span { font-size: 10px; }
.stage4-stutter-lab .stage4-stutter-stats b { font-size: 14px; }
.stage4-stutter-lab .stage4-stutter-stats p { font-size: 12px; line-height: 1.75; }
.stage4-metric-reader { overflow: hidden; border: 1px solid #30363e; background: #0c0f12; }.stage4-metric-head { padding: 21px 24px; border-bottom: 1px solid var(--line); }.stage4-metric-head span { color: var(--magenta); font: 8px var(--mono); }.stage4-metric-head h4 { margin: 6px 0 0; font-size: 21px; }.stage4-metric-cards { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: #30363d; }.stage4-metric-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto auto; gap: 3px 8px; min-width: 0; padding: 14px 11px; border: 0; background: #15191e; color: #7c858d; text-align: left; cursor: pointer; }.stage4-metric-card > span { grid-row: 1 / 4; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #20262c; }.stage4-metric-card .line-icon { width: 17px; height: 17px; }.stage4-metric-card small { font: 7px var(--mono); }.stage4-metric-card b { overflow-wrap: anywhere; font-size: 9px; }.stage4-metric-card em { color: #59616a; font: normal 7px var(--mono); }.stage4-metric-card.active { background: #211927; color: #fff; box-shadow: inset 0 -3px var(--magenta); }.stage4-metric-card.active > span { background: var(--magenta); color: #111; }.stage4-metric-detail { display: grid; grid-template-columns: 1.1fr 1fr .8fr; min-height: 245px; }.stage4-metric-detail > div,.stage4-metric-detail > dl,.stage4-metric-detail > aside { margin: 0; padding: 27px; }.stage4-metric-detail > div span { color: var(--magenta); font: 8px var(--mono); }.stage4-metric-detail h4 { margin: 8px 0 12px; font-size: 27px; }.stage4-metric-detail p { color: #929aa2; font-size: 11px; line-height: 1.8; }.stage4-metric-detail > dl { border-left: 1px solid var(--line); }.stage4-metric-detail dl div + div { margin-top: 20px; }.stage4-metric-detail dt { color: #69727b; font-size: 8px; }.stage4-metric-detail dd { margin: 6px 0 0; color: #d2d7db; font-size: 10px; line-height: 1.6; }.stage4-metric-detail > aside { border-left: 1px solid var(--line); background: #171b20; }.stage4-metric-detail aside small { color: var(--green); font: 8px var(--mono); }
.stage4-sync-mission { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr; align-items: stretch; gap: 10px; margin: 20px 0; padding: 12px; border: 1px solid #cbd0ce; background: #e6eae8; }
.stage4-sync-mission > div { padding: 14px 16px; background: #f8faf9; }
.stage4-sync-mission small { display: block; margin-bottom: 6px; color: #858e8b; font: 8px var(--mono); }
.stage4-sync-mission b { color: #242a2d; font-size: 11px; line-height: 1.55; }
.stage4-sync-mission > i { align-self: center; color: var(--orange); font-style: normal; }
.stage4-sync-stage { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 25px; min-height: 210px; padding: 25px; border: 1px solid #cbd0ce; background: #e6eae8; }.stage4-mouth { position: relative; width: 130px; height: 130px; border-radius: 50%; background: #171b20; }.stage4-mouth::before,.stage4-mouth::after { content: ""; position: absolute; top: 42px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }.stage4-mouth::before { left: 35px; }.stage4-mouth::after { right: 35px; }.stage4-mouth i { position: absolute; left: 47px; bottom: 29px; width: 36px; height: 10px; border: 2px solid var(--orange); border-radius: 50%; animation: stage4Talk .7s infinite alternate; }@keyframes stage4Talk { to { height: 27px; bottom: 21px; } }.stage4-mouth span { position: absolute; left: 50%; top: 13px; width: 2px; height: 16px; background: var(--magenta); }.stage4-sync-timeline { position: relative; height: 145px; border: 1px solid #8b9490; background: repeating-linear-gradient(90deg,transparent 0 39px,rgba(20,25,29,.08) 40px); }.stage4-sync-timeline > i { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed #5e6864; }.stage4-sync-timeline > span { position: absolute; width: 76px; height: 45px; margin-left: -38px; display: grid; place-items: center; border-radius: 4px; transition: left .3s; }.stage4-sync-timeline > span b { font: 9px var(--mono); }.stage4-sync-timeline .video { top: 22px; background: var(--orange); color: #111; }.stage4-sync-timeline .audio { bottom: 22px; background: var(--cyan); color: #111; }.stage4-sync-stage.drifting .audio { animation: stage4Drift 2.5s ease-in-out infinite alternate; }@keyframes stage4Drift { to { transform: translateX(-32px); } }.stage4-sync-stats { grid-template-columns: 1fr 1.2fr 2fr; }
.stage4-diagnostic-chain { background: #e9e0ea; }.stage4-incident-lab-card { margin-top: 20px; }.stage4-evidence-panel h4 { margin: 8px 0; font-size: 23px; }.stage4-evidence-panel pre { padding: 14px; overflow-x: auto; border: 1px solid #2e353c; background: #0b0d10; color: var(--green); white-space: pre-wrap; font: 10px/1.7 var(--mono); }.stage4-evidence-panel > small { display: block; color: #88919a; font-size: 10px; line-height: 1.7; }.stage4-evidence-panel .feedback.success { color: var(--green); }.stage4-evidence-panel .feedback.error { color: #ff8585; }.stage4-evidence-panel button:disabled { cursor: default; opacity: .72; }
.stage4-checkpoint { background: linear-gradient(135deg,#d56bf0,#9f6de3); }.stage4-readiness { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 26px; background: rgba(0,0,0,.23); }.stage4-readiness > div { padding: 19px; background: rgba(255,255,255,.17); }.stage4-readiness small { font: 8px var(--mono); }.stage4-readiness b { display: block; margin: 7px 0; font-size: 12px; }.stage4-readiness p { margin: 0; font-size: 9px; line-height: 1.65; }
.stage5-hero { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(25px,3vw,50px); min-height: 650px; padding: 68px clamp(34px,5vw,75px); overflow: hidden; background: radial-gradient(circle at 75% 45%,rgba(166,239,103,.12),transparent 34%),linear-gradient(135deg,#0b0d10 15%,#101910); }
.stage5-hero::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(166,239,103,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,213,232,.06) 1px,transparent 1px); background-size: 32px 32px; }
.stage5-hero-copy,.stage5-hero-visual { position: relative; z-index: 1; }
.stage5-hero-copy h2 { margin: 22px 0; font-size: clamp(44px,3.7vw,60px); line-height: 1.04; letter-spacing: -.065em; white-space: nowrap; }.stage5-hero-copy h2 em { color: var(--green); font-style: normal; }.stage5-hero-copy > p { max-width: 620px; color: #919b96; font-size: 15px; line-height: 1.9; }
.stage5-hero-visual { display: grid; grid-template-columns: repeat(9,auto); align-items: center; gap: 8px; min-height: 360px; padding: 45px 26px 80px; border: 1px solid #2c3a2f; border-radius: 10px; background: rgba(10,14,12,.88); box-shadow: 0 30px 85px rgba(0,0,0,.55); }
.stage5-hero-visual > i { color: #536359; font-style: normal; }.stage5-hero-node { position: relative; display: grid; place-items: center; gap: 7px; min-width: 60px; min-height: 90px; padding: 10px; border: 1px solid #34423a; border-radius: 6px; background: #151d18; text-align: center; }.stage5-hero-node small { color: var(--green); font: 7px var(--mono); }.stage5-hero-node b { font-size: 9px; }.stage5-hero-node span { width: 32px; height: 3px; background: var(--cyan); box-shadow: 0 -8px var(--orange),0 8px var(--green); }.stage5-hero-node.edge { border-color: #3a8290; box-shadow: 0 0 22px rgba(69,213,232,.12); }.stage5-hero-radar { position: absolute; left: 9%; right: 9%; bottom: 22px; display: flex; align-items: center; gap: 13px; padding-top: 15px; border-top: 1px solid #29362d; color: var(--green); }.stage5-hero-radar span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px var(--green); animation: stage5RadarPulse 1.2s infinite alternate; }.stage5-hero-radar b { font: 8px var(--mono); }@keyframes stage5RadarPulse { to { opacity: .35; } }
.stage5-lesson-nav { position: sticky; z-index: 7; top: 70px; display: grid; grid-template-columns: repeat(7,1fr); border-block: 1px solid #29332c; background: rgba(12,16,13,.95); backdrop-filter: blur(16px); }.stage5-lesson-nav button { display: flex; gap: 8px; justify-content: center; padding: 14px 10px; border: 0; border-right: 1px solid #29332c; background: transparent; color: #8c9891; font-size: 10px; cursor: pointer; }.stage5-lesson-nav button:hover { color: #fff; background: rgba(166,239,103,.07); }.stage5-lesson-nav small { color: var(--green); font: 8px var(--mono); }#stage-5 article[id] { scroll-margin-top: 125px; }
.stage5-overview { background: #edf0e9; }.stage5-architecture-rule { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 24px; }.stage5-architecture-rule > div { min-height: 142px; padding: 22px; border: 1px solid #ccd2c7; background: #f8faf5; }.stage5-architecture-rule > i { color: var(--orange); font-style: normal; font-size: 22px; }.stage5-architecture-rule small { color: #728078; font: 8px var(--mono); }.stage5-architecture-rule b { display: block; margin: 9px 0; font-size: 15px; }.stage5-architecture-rule p { margin: 0; color: #6d7770; font-size: 10px; line-height: 1.7; }
.stage5-blueprint-lab { padding: 0; overflow: hidden; border-color: #303a33; background: #0e1310; color: #edf1ee; }.stage5-blueprint-lab .lab-header { padding: 23px 26px 16px; }.stage5-blueprint-steps { position: relative; display: grid; grid-template-columns: repeat(11,auto); align-items: center; gap: 7px; padding: 20px 24px; overflow-x: auto; border-block: 1px solid #2a342d; }.stage5-blueprint-step { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; gap: 3px 9px; min-width: 127px; padding: 11px; border: 1px solid #303b34; background: #151c18; color: #79857e; text-align: left; cursor: pointer; }.stage5-blueprint-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #202a23; }.stage5-blueprint-step .line-icon { width: 17px; height: 17px; }.stage5-blueprint-step small { font: 7px var(--mono); }.stage5-blueprint-step b { font-size: 10px; }.stage5-blueprint-step.active { border-color: var(--green); color: #fff; box-shadow: inset 0 -3px var(--green); }.stage5-blueprint-step.active > span { background: var(--green); color: #111; }.stage5-blueprint-steps > i { color: #4a554e; font-style: normal; }
.stage5-blueprint-detail { display: grid; grid-template-columns: .75fr 1.35fr .7fr; min-height: 350px; }.stage5-blueprint-visual { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; overflow: hidden; border-right: 1px solid #2a342d; background: radial-gradient(circle,rgba(166,239,103,.1),transparent 48%),#111713; }.stage5-blueprint-visual > span { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid #4c6251; border-radius: 50%; color: var(--green); box-shadow: 0 0 35px rgba(166,239,103,.13); }.stage5-blueprint-visual .line-icon { width: 44px; height: 44px; }.stage5-blueprint-visual small { color: #66736b; font: 8px var(--mono); }.stage5-blueprint-visual b { font-size: 17px; }.stage5-blueprint-visual > i { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); animation: stage5Orbit 3.6s linear infinite; }.stage5-blueprint-visual > i:nth-last-child(3) { animation-delay: -1.2s; }.stage5-blueprint-visual > i:nth-last-child(2) { animation-delay: -2.4s; }@keyframes stage5Orbit { from { transform: rotate(0) translateX(84px) rotate(0); } to { transform: rotate(360deg) translateX(84px) rotate(-360deg); } }
.stage5-blueprint-story { padding: 30px; }.stage5-blueprint-story > small { color: var(--green); font: 8px var(--mono); }.stage5-blueprint-story h4 { margin: 8px 0 13px; font-size: 25px; }.stage5-blueprint-story > p { color: #99a49d; font-size: 11px; line-height: 1.85; }.stage5-blueprint-story > div { margin-top: 20px; padding: 15px; border-left: 2px solid var(--cyan); background: #18201b; }.stage5-blueprint-story > div b { color: var(--cyan); font-size: 9px; }.stage5-blueprint-story > div p { margin: 7px 0 0; color: #8f9a93; font-size: 10px; line-height: 1.75; }.stage5-blueprint-detail aside { padding: 29px 23px; border-left: 1px solid #2a342d; background: #171e1a; }.stage5-blueprint-detail aside small { display: block; color: #6f7a73; font: 8px var(--mono); }.stage5-blueprint-detail aside b { display: block; margin: 7px 0 28px; color: var(--green); font-size: 12px; line-height: 1.55; }.stage5-blueprint-detail aside p { color: #929d96; font-size: 10px; line-height: 1.75; }.stage5-blueprint-controls { background: #101612; }.stage5-blueprint-controls button { min-width: 110px; }
.stage5-teach-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; margin-bottom: 22px; }.stage5-teach-strip > div { padding: 20px; border: 1px solid #313a34; background: #141a16; }.stage5-teach-strip > i { color: var(--green); font-style: normal; }.stage5-teach-strip small { color: #6f7b73; font: 8px var(--mono); }.stage5-teach-strip b { display: block; margin: 8px 0; font-size: 13px; }.stage5-teach-strip p { margin: 0; color: #8c9790; font-size: 9px; line-height: 1.65; }
.stage5-profile-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; margin: 23px 0; }.stage5-profile { position: relative; display: grid; min-height: 145px; padding: 17px; overflow: hidden; border: 1px solid #323b35; background: #141a16; color: #7f8a83; text-align: left; cursor: pointer; }.stage5-profile small { color: #5d6a62; font: 7px var(--mono); }.stage5-profile b { margin-top: 10px; font-size: 20px; }.stage5-profile span { font: 8px/1.5 var(--mono); }.stage5-profile i { position: absolute; left: 0; bottom: 0; width: var(--level); height: 5px; background: #3a463e; }.stage5-profile.active { border-color: var(--green); color: #fff; background: rgba(166,239,103,.06); }.stage5-profile.active i { background: var(--green); box-shadow: 0 0 14px var(--green); }
.stage5-audience-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #303933; }.stage5-audience-grid > div { padding: 17px; background: #171e1a; }.stage5-audience-grid small { font: 7px var(--mono); }.stage5-audience-grid .covered small { color: var(--green); }.stage5-audience-grid .missing small { color: #ff756f; }.stage5-audience-grid b { display: block; margin: 7px 0; font-size: 11px; }.stage5-audience-grid p { margin: 0; color: #849087; font-size: 9px; line-height: 1.6; }.stage5-ladder-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 16px; margin-top: 20px; }.stage5-ladder-stats div { border-right: 1px solid #303933; }.stage5-ladder-stats span { display: block; color: #707c74; font-size: 8px; }.stage5-ladder-stats b { font: 13px var(--mono); }.stage5-ladder-stats p { margin: 0; color: #8d9891; font-size: 10px; line-height: 1.75; }
.stage5-distribution-lesson { background: #e8eee9; }.stage5-routing-controls,.stage5-capacity-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 25px; margin: 23px 0; }.stage5-routing-controls label,.stage5-capacity-controls label { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: #4d5751; font-size: 10px; }.stage5-routing-controls output,.stage5-capacity-controls output { color: #278b99; font: 9px var(--mono); }.stage5-routing-controls input,.stage5-capacity-controls input { grid-column: 1 / -1; }
.stage5-routing-map { display: grid; grid-template-columns: 150px auto 1fr auto 130px; align-items: center; gap: 18px; min-height: 230px; padding: 25px; border: 1px solid #c8d0cb; background: #f4f7f4; }.stage5-routing-map > i { color: var(--orange); font-style: normal; }.stage5-routing-map .origin { display: grid; place-items: center; min-height: 90px; border: 1px solid #3c4a42; background: #18201b; color: #fff; }.stage5-routing-map .origin small { color: var(--green); font: 7px var(--mono); }.stage5-routing-map .origin b { font-size: 10px; }.stage5-routing-map .routes { display: grid; gap: 9px; }.stage5-routing-map .routes span { display: grid; place-items: center; min-height: 42px; border: 1px solid; font: 9px var(--mono); transition: .25s; }.stage5-routing-map .cdn-a { border-color: #45d5e8; color: #248f9d; background: rgba(69,213,232,.08); }.stage5-routing-map .cdn-b { border-color: #ff6a2a; color: #c9511e; background: rgba(255,106,42,.08); }.stage5-routing-map .p2p { border-color: #77ac4f; color: #4c8129; background: rgba(166,239,103,.1); }.stage5-routing-map .audience { display: grid; place-items: center; gap: 11px; }.stage5-routing-map .audience > span { width: 82px; height: 82px; border: 9px solid #1b211d; border-radius: 50%; transition: background .25s; }.stage5-routing-map.fault-cdnA .cdn-a,.stage5-routing-map.fault-p2p .p2p { opacity: .2; text-decoration: line-through; }.stage5-fault-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 19px 0; }.stage5-fault-buttons button { padding: 9px 12px; border: 1px solid #cbd1cd; background: transparent; color: #6f7873; font-size: 9px; cursor: pointer; }.stage5-fault-buttons button.active { border-color: #1a211d; background: #1a211d; color: #fff; }.stage5-routing-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 16px; }.stage5-routing-stats div { border-right: 1px solid #cfd5d1; }.stage5-routing-stats span { display: block; color: #7d8681; font-size: 8px; }.stage5-routing-stats b { font: 14px var(--mono); }.stage5-routing-stats p { margin: 0; color: #69726d; font-size: 10px; line-height: 1.7; }
.stage5-capacity-controls label { color: #d4dad6; }.stage5-capacity-bars { display: grid; gap: 9px; padding: 19px; border: 1px solid #303933; background: #141a16; }.stage5-capacity-bars > div { display: grid; grid-template-columns: 110px 1fr 85px; align-items: center; gap: 10px; color: #8a958e; font-size: 9px; }.stage5-capacity-bars i { display: block; width: var(--width); height: 12px; border-radius: 6px; background: var(--color); transition: width .3s; }.stage5-capacity-bars b { color: #e6ebe8; font: 9px var(--mono); }.stage5-capacity-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 17px; margin-top: 19px; }.stage5-capacity-stats div { border-right: 1px solid #303933; }.stage5-capacity-stats span { display: block; color: #6f7b73; font-size: 8px; }.stage5-capacity-stats b { font: 14px var(--mono); }.stage5-capacity-stats p { margin: 0; color: #8d9891; font-size: 10px; line-height: 1.7; }
.stage5-resilience-lesson { background: #edf0e9; }.stage5-observe-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 22px; }.stage5-observe-grid > div { padding: 20px; border: 1px solid #ccd3c9; background: #fafbf7; }.stage5-observe-grid small { color: #568263; font: 8px var(--mono); }.stage5-observe-grid b { display: block; margin: 8px 0; font-size: 11px; }.stage5-observe-grid p { margin: 0; color: #727c75; font-size: 9px; line-height: 1.65; }
.stage5-protection-switches { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 22px 0; }.stage5-protection-switches button { display: grid; grid-template-columns: 22px 1fr; gap: 10px; min-height: 92px; padding: 14px; border: 1px solid #cbd2cd; background: #f8faf7; color: #5f6963; text-align: left; cursor: pointer; }.stage5-protection-switches button > i { width: 22px; height: 12px; margin-top: 3px; border-radius: 7px; background: #c7ceca; box-shadow: inset 10px 0 #7b8580; }.stage5-protection-switches button.active { border-color: #65953e; background: rgba(166,239,103,.1); }.stage5-protection-switches button.active > i { background: var(--green); box-shadow: inset -10px 0 #488424; }.stage5-protection-switches b { display: block; font-size: 10px; }.stage5-protection-switches small { display: block; margin-top: 5px; color: #848d88; font-size: 8px; line-height: 1.5; }
.stage5-failure-console { display: grid; grid-template-columns: .75fr 1.25fr; min-height: 330px; border: 1px solid #303933; background: #0f1411; color: #edf1ee; }.stage5-failure-list { display: grid; border-right: 1px solid #303933; }.stage5-failure-list button { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; padding: 13px 17px; border: 0; border-bottom: 1px solid #29322c; background: #151b17; color: #78837c; text-align: left; cursor: pointer; }.stage5-failure-list button.active { color: #fff; box-shadow: inset 3px 0 var(--orange); }.stage5-failure-list button.solved { color: var(--green); }.stage5-failure-list small { font: 8px var(--mono); }.stage5-failure-list b { font-size: 10px; }.stage5-failure-console > section { padding: 28px; }.stage5-failure-console > section > small { color: var(--orange); font: 8px var(--mono); }.stage5-failure-console h4 { margin: 8px 0; font-size: 24px; }.stage5-failure-console p { color: #929d96; font-size: 10px; line-height: 1.75; }.stage5-failure-required { margin: 15px 0; }.stage5-failure-console section > div:not(.feedback) { margin: 16px 0; padding: 14px; border-left: 2px solid var(--green); background: #19211b; }.stage5-failure-console section > div small { color: #738078; font: 7px var(--mono); }.stage5-failure-console section > div b { display: block; margin: 5px 0; color: var(--green); font-size: 11px; }.stage5-failure-console .feedback.success { color: var(--green); }.stage5-failure-console .feedback.error { color: #ff7a73; }
.stage5-chain-lesson { background: #0d1210; }.stage5-chain-mission { display: grid; grid-template-columns: .7fr 1.15fr 1.15fr; gap: 1px; margin-bottom: 18px; border: 1px solid #2e3932; background: #2e3932; }.stage5-chain-mission > * { margin: 0; padding: 18px 20px; background: #151c18; color: #98a39c; font-size: 11px; line-height: 1.75; }.stage5-chain-mission small { display: block; color: var(--green); font: 8px var(--mono); }.stage5-chain-mission b { display: block; margin-top: 6px; color: #fff; font-size: 14px; }
.stage5-chain-reality-note { display: flex; gap: 16px; margin-bottom: 18px; padding: 19px 21px; border-left: 3px solid var(--cyan); background: #141c1d; }.stage5-chain-reality-note > span { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 50%; background: var(--cyan); color: #0c1113; }.stage5-chain-reality-note .line-icon { width: 20px; height: 20px; }.stage5-chain-reality-note b { color: #e9f3f4; font-size: 13px; }.stage5-chain-reality-note p { margin: 6px 0 0; color: #93a2a4; font-size: 11px; line-height: 1.8; }
.stage5-chain-primer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr) 22px) minmax(0,1fr); align-items: stretch; gap: 5px; margin-bottom: 25px; }.stage5-chain-primer > div { padding: 18px; border: 1px solid #303a34; background: #151b18; }.stage5-chain-primer > i { align-self: center; color: var(--green); font-style: normal; text-align: center; }.stage5-chain-primer small { color: var(--green); font: 8px var(--mono); }.stage5-chain-primer b { display: block; margin: 8px 0; color: #e8eeea; font-size: 11px; line-height: 1.6; }.stage5-chain-primer p { margin: 0; color: #818d86; font-size: 9px; line-height: 1.7; }
.stage5-chain-builder { padding: 0; overflow: hidden; border-color: #344038; background: #0e1411; color: #eef2ef; }.stage5-chain-builder .lab-header { padding: 24px 26px 17px; }.stage5-chain-route { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 18px 21px; border-block: 1px solid #2b352f; background: #101612; scroll-snap-type: x proximity; }.stage5-chain-route > i { flex: 0 0 auto; color: #46524b; font-style: normal; }.stage5-chain-node { flex: 0 0 145px; min-height: 75px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; align-content: center; gap: 4px 8px; padding: 11px; border: 1px solid #2e3932; background: #151c18; color: #657169; scroll-snap-align: center; }.stage5-chain-node > span { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #202923; }.stage5-chain-node .line-icon { width: 16px; height: 16px; }.stage5-chain-node small { font: 7px var(--mono); }.stage5-chain-node b { font-size: 10px; line-height: 1.4; }.stage5-chain-node.current { border-color: var(--orange); color: #fff; box-shadow: inset 0 -3px var(--orange); }.stage5-chain-node.current > span { background: var(--orange); color: #111; }.stage5-chain-node.done { border-color: #4e6a51; color: #cbe4cd; background: #172219; }.stage5-chain-node.done > span { background: var(--green); color: #102010; }.stage5-chain-node.done small { color: var(--green); }
.stage5-chain-current { min-height: 500px; }.stage5-chain-current:not(:has(.stage5-chain-finished)) { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(0,1.1fr); }.stage5-chain-station { display: flex; flex-direction: column; justify-content: center; padding: 30px; border-right: 1px solid #2b352f; background: radial-gradient(circle at 50% 25%,rgba(166,239,103,.1),transparent 32%),#111713; }.stage5-chain-station > span { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 15px; border: 1px solid #526659; border-radius: 50%; color: var(--green); }.stage5-chain-station > span .line-icon { width: 32px; height: 32px; }.stage5-chain-station > small { color: var(--green); font: 8px var(--mono); }.stage5-chain-station h4 { margin: 7px 0 2px; font-size: 27px; }.stage5-chain-station > b { color: #68756d; font: 8px var(--mono); }
.stage5-chain-io { display: grid; grid-template-columns: 1fr 20px 1.2fr 20px 1fr; align-items: center; gap: 4px; margin-top: 28px; }.stage5-chain-io > div { min-height: 103px; padding: 13px; border: 1px solid #303b34; background: #171e1a; }.stage5-chain-io > div.active { border-color: var(--green); background: rgba(166,239,103,.07); }.stage5-chain-io > i { color: var(--green); font-style: normal; text-align: center; }.stage5-chain-io small { color: #69756d; font: 7px var(--mono); }.stage5-chain-io .active small { color: var(--green); }.stage5-chain-io p { margin: 8px 0 0; color: #a5afa8; font-size: 9px; line-height: 1.65; }
.stage5-chain-task { padding: 30px; }.stage5-chain-task > small { color: var(--orange); font: 8px var(--mono); }.stage5-chain-task > p { min-height: 67px; margin: 8px 0 20px; color: #a0aaa3; font-size: 11px; line-height: 1.85; }.stage5-chain-question { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 11px; }.stage5-chain-question b { font-size: 14px; }.stage5-chain-question span { color: #667169; font-size: 8px; }.stage5-chain-options { display: grid; gap: 7px; }.stage5-chain-options button { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid #344038; background: #171e1a; color: #d9dfdb; text-align: left; cursor: pointer; }.stage5-chain-options button:hover:not(:disabled) { border-color: var(--orange); background: rgba(255,106,42,.06); }.stage5-chain-options button b { font-size: 11px; }.stage5-chain-options button small { color: #77827b; font-size: 9px; line-height: 1.55; }.stage5-chain-options button.correct { border-color: var(--green); background: rgba(166,239,103,.1); }.stage5-chain-options button.correct b { color: var(--green); }.stage5-chain-options button.wrong { border-color: #d65a51; background: rgba(214,90,81,.08); }.stage5-chain-options button.wrong b { color: #ff8178; }.stage5-chain-options button:disabled { cursor: default; opacity: .68; }.stage5-chain-options button.correct:disabled { opacity: 1; }.stage5-chain-feedback { min-height: 44px; margin-top: 13px; padding: 12px 14px; border-left: 2px solid #49544d; background: #151b18; color: #89948d; font-size: 10px; line-height: 1.7; }.stage5-chain-feedback.success { border-color: var(--green); color: #b9ddb5; }.stage5-chain-feedback.error { border-color: #d65a51; color: #ff9b94; }
.stage5-chain-controls { display: flex; justify-content: space-between; gap: 12px; padding: 16px 21px; border-top: 1px solid #2b352f; background: #101612; }.stage5-chain-controls button { min-width: 130px; }.stage5-chain-controls button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.stage5-chain-finished { display: grid; place-items: center; align-content: center; min-height: 500px; padding: 38px; background: radial-gradient(circle at 50% 22%,rgba(166,239,103,.13),transparent 30%),#111713; text-align: center; }.stage5-chain-finished > span { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--green); color: #102010; box-shadow: 0 0 40px rgba(166,239,103,.2); }.stage5-chain-finished .line-icon { width: 38px; height: 38px; }.stage5-chain-finished > small { margin-top: 17px; color: var(--green); font: 8px var(--mono); }.stage5-chain-finished h4 { margin: 8px 0; font-size: 28px; }.stage5-chain-finished > p { max-width: 850px; color: #87938b; font-size: 9px; line-height: 1.8; }.stage5-chain-finished > div { width: 100%; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 18px; }.stage5-chain-finished section { padding: 15px; border: 1px solid #334038; background: #171f1a; text-align: left; }.stage5-chain-finished section small { color: var(--green); font: 7px var(--mono); }.stage5-chain-finished section b { display: block; margin-top: 7px; color: #b7c2ba; font-size: 9px; line-height: 1.65; }
.stage5-capstone-lesson { background: #e5ebe7; }.stage5-capstone-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; margin-top: 22px; }.stage5-capstone-card { padding: 20px; border: 1px solid #cbd2cd; background: #f8faf7; }.stage5-capstone-card > small { color: #6b7770; font: 8px var(--mono); }.stage5-capstone-card h4 { margin: 7px 0; font-size: 18px; }.stage5-capstone-card > p { min-height: 38px; color: #6d7771; font-size: 10px; line-height: 1.65; }.stage5-capstone-card > div { display: grid; gap: 6px; }.stage5-capstone-card button { padding: 10px; border: 1px solid #c9d0cb; background: #fff; color: #515b55; font-size: 9px; text-align: left; cursor: pointer; }.stage5-capstone-card button.correct { border-color: #57942e; color: #3f781c; background: rgba(166,239,103,.12); }.stage5-capstone-card button.wrong { border-color: #bd4a43; color: #a2342e; }.stage5-capstone-card > span { display: block; min-height: 31px; margin-top: 9px; font-size: 9px; line-height: 1.6; }.stage5-capstone-card > span.success { color: #3f781c; }.stage5-capstone-card > span.error { color: #a2342e; }
.stage5-checkpoint { background: linear-gradient(135deg,#a6ef67,#63c788); color: #102010; }.stage5-readiness { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-bottom: 26px; background: rgba(0,0,0,.2); }.stage5-readiness > div { padding: 19px; background: rgba(255,255,255,.2); }.stage5-readiness small { font: 8px var(--mono); }.stage5-readiness b { display: block; margin: 7px 0; font-size: 12px; }.stage5-readiness p { margin: 0; font-size: 9px; line-height: 1.65; }
.term-explainer { margin: 28px 0; overflow: hidden; border: 1px solid #30363d; border-radius: 7px; background: #12161b; color: #eef0f2; box-shadow: 0 18px 50px rgba(0,0,0,.13); }
.term-explainer-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.75fr); align-items: end; gap: 35px; padding: 25px 28px 22px; border-bottom: 1px solid var(--line); }
.term-explainer-head span { color: var(--orange); font: 500 13px/1.45 var(--mono); letter-spacing: .06em; }
.term-explainer-head h4 { margin: 8px 0 0; color: #fff; font-size: 25px; letter-spacing: -.035em; }
.term-explainer-head p { margin: 0; color: #929aa2; font-size: 12px; line-height: 1.75; }
.term-explainer-tabs { display: flex; gap: 1px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #414952 transparent; }
.term-explainer-tab { flex: 0 0 auto; min-width: 118px; padding: 14px 13px 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #747d86; text-align: left; cursor: pointer; }
.term-explainer-tab:hover { color: #d9dde1; background: rgba(255,255,255,.03); }
.term-explainer-tab.active { border-bottom-color: var(--orange); background: rgba(255,106,42,.07); color: #fff; }
.term-explainer-tab small { display: block; margin-bottom: 4px; color: #59616a; font: 8px var(--mono); }
.term-explainer-tab.active small { color: var(--orange); }
.term-explainer-tab b { font-size: 11px; font-weight: 600; white-space: nowrap; }
.term-explainer-detail { display: grid; grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr); min-height: 330px; }
.term-explainer-visual { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 32px 28px; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 45%,rgba(69,213,232,.08),transparent 48%),#0d1115; }
.term-explainer-visual > span { color: #68717a; font: 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.term-scene { display: grid; grid-template-columns: minmax(82px,1fr) 38px minmax(98px,1.15fr) 38px minmax(82px,1fr); align-items: center; gap: 4px; }
.term-scene > div { min-height: 92px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 13px 10px; border: 1px solid #343c44; border-radius: 5px; background: #171c22; text-align: center; }
.term-scene > div.active { border-color: var(--orange); background: rgba(255,106,42,.1); box-shadow: 0 0 24px rgba(255,106,42,.12); }
.term-scene small { color: #69737c; font: 7px var(--mono); }
.term-scene div.active small { color: var(--orange-2); }
.term-scene b { color: #dce1e5; font-size: 10px; line-height: 1.45; }
.term-scene > i { position: relative; height: 1px; background: #3d464e; }
.term-scene > i::after { content: "›"; position: absolute; right: -1px; top: 50%; color: var(--cyan); font: 14px var(--mono); transform: translateY(-52%); }
.term-scene > i span { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(69,213,232,.7); animation: termPacket 2.2s ease-in-out infinite; }
@keyframes termPacket { 50%,100% { transform: translateX(30px); } }
.term-explainer-copy { padding: 30px 32px; }
.term-explainer-copy header { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.term-explainer-copy header small { color: var(--orange); font: 8px var(--mono); letter-spacing: .1em; }
.term-explainer-copy h5 { margin: 7px 0 10px; color: #fff; font-size: 29px; letter-spacing: -.04em; }
.term-explainer-copy header p { margin: 0; color: #b4bbc1; font-size: 13px; line-height: 1.8; }
.term-explainer-copy dl { display: grid; gap: 0; margin: 0; }
.term-explainer-copy dl > div { display: grid; grid-template-columns: 105px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.term-explainer-copy dl > div:last-child { border-bottom: 0; }
.term-explainer-copy dt { color: var(--orange-2); font-size: 10px; font-weight: 700; }
.term-explainer-copy dd { margin: 0; color: #939ba3; font-size: 11px; line-height: 1.72; }

.toast { position: fixed; z-index: 20; right: 25px; bottom: 25px; padding: 14px 18px; border-radius: 4px; background: #fff; color: #16191d; box-shadow: 0 15px 40px #0008; transform: translateY(100px); opacity: 0; transition: .3s; font-size: 13px; }
.toast.show { transform: none; opacity: 1; }

@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); transition: .3s; box-shadow: 20px 0 40px #0008; }
  .sidebar.open { transform: none; }
  main { margin-left: 0; }
  .brand { width: auto; }
  .signal-status { display: none; }
  .menu-toggle { display: block; margin-left: 18px; }
  .stage-hero { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .pipeline-slots { grid-template-columns: repeat(4,1fr); }
  .two-column-heading { grid-template-columns: 1fr; gap: 0; }
  .journey-content { grid-template-columns: 1fr; }
  .teacher-note { border-top: 1px solid var(--line); border-left: 0; }
  .glossary-shell { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: repeat(4,1fr); }
  .stage2-hero { grid-template-columns: 1fr; padding-top: 65px; }
  .stage2-hero-figure { max-width: 850px; }
  .stage2-command-options { grid-template-columns: repeat(3,1fr); }
  .stage2-address-parts { grid-template-columns: repeat(3,1fr); }
  .stage2-lesson-nav { grid-template-columns: repeat(6,minmax(115px,1fr)); overflow-x: auto; }
  .stage2-playback-map { grid-template-columns: 1fr 1fr; }.stage2-playback-map > div { grid-column: 1 / -1; }
  .stage2-journey-detail { grid-template-columns: minmax(230px,.9fr) minmax(300px,1.1fr); }
  .stage2-journey-detail aside { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .stage3-hero { grid-template-columns: 1fr; padding-top: 65px; }.stage3-hero-figure { max-width: 850px; }.stage3-lesson-nav { grid-template-columns: repeat(7,minmax(115px,1fr)); overflow-x: auto; }.stage3-protocol-cards { grid-template-columns: 1fr; }.stage3-flv-pipeline { grid-template-columns: repeat(4,1fr); }.stage3-flv-pipeline > i { display: none; }
  .stage3-playback-detail { grid-template-columns: minmax(230px,.9fr) minmax(300px,1.1fr); }.stage3-playback-detail aside { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .stage3-delivery-terms { grid-template-columns: repeat(2,1fr); }
  .stage3-distribution-map { grid-template-columns: 100px 1fr 160px 1fr 200px; padding: 22px 17px; gap: 9px; }
  .stage4-hero { grid-template-columns: 1fr; padding-top: 65px; }.stage4-hero-figure { max-width: 850px; }.stage4-lesson-nav { grid-template-columns: repeat(6,minmax(120px,1fr)); overflow-x: auto; }.stage4-tour-detail { grid-template-columns: minmax(230px,.9fr) minmax(300px,1.1fr); }.stage4-tour-detail aside { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }.stage4-metric-cards { grid-template-columns: repeat(3,1fr); }
  .stage5-hero { grid-template-columns: 1fr; padding-top: 65px; }.stage5-hero-visual { max-width: 850px; }.stage5-lesson-nav { grid-template-columns: repeat(7,minmax(120px,1fr)); overflow-x: auto; }.stage5-blueprint-detail { grid-template-columns: minmax(230px,.8fr) minmax(310px,1.2fr); }.stage5-blueprint-detail aside { grid-column: 1 / -1; border-top: 1px solid #2a342d; border-left: 0; }.stage5-profile-grid { grid-template-columns: repeat(3,1fr); }.stage5-protection-switches { grid-template-columns: repeat(3,1fr); }.stage5-observe-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  .term-explainer-detail { grid-template-columns: 1fr; }
  .term-explainer-visual { min-height: 245px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stage5-chain-mission { grid-template-columns: 1fr; }
  .stage5-chain-primer { grid-template-columns: 1fr; }
  .stage5-chain-primer > i { justify-self: center; transform: rotate(90deg); }
  .stage5-chain-current:not(:has(.stage5-chain-finished)) { grid-template-columns: 1fr; }
  .stage5-chain-station { border-right: 0; border-bottom: 1px solid #2b352f; }
  .stage5-chain-finished > div { grid-template-columns: repeat(2,1fr); }
  .stage4-stutter-lab { margin-inline: 0; padding: 28px; }
  .stage4-flow-track { grid-template-columns: 1fr; gap: 10px; }
  .stage4-flow-arrow { transform: rotate(90deg); }
  .stage4-network-stop { min-height: 210px; }
  .stage4-packet-road { height: 105px; }
  .stage4-cause-callout { grid-template-columns: 1fr; gap: 6px; }
  .stage4-signal-panels { grid-template-columns: 1fr; }
  .stage4-sync-mission { grid-template-columns: 1fr; }
  .stage4-sync-mission > i { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 680px) {
  .topbar { height: 60px; padding: 0 16px; }
  .top-progress > span, .top-progress strong { display: none; }
  .progress-track { width: 70px; }
  .sidebar { top: 60px; width: min(85vw,300px); }
  main { padding-top: 60px; }
  .stage-hero, .compact-hero { min-height: auto; padding: 55px 22px; }
  .hero h2, .compact-hero h2 { font-size: 43px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .lesson { padding: 55px 20px; }
  .term-explainer-head { grid-template-columns: 1fr; gap: 10px; padding: 21px 18px 18px; }
  .term-explainer-head span { font-size: 12px; }
  .term-explainer-head h4 { font-size: 22px; }
  .term-explainer-tabs { padding-inline: 7px; }
  .term-explainer-tab { min-width: 108px; padding: 12px 10px 11px; }
  .term-explainer-detail { min-height: 0; }
  .term-explainer-visual { min-height: 0; gap: 16px; padding: 22px 16px; }
  .term-scene { grid-template-columns: 1fr; gap: 7px; }
  .term-scene > div { min-height: 68px; }
  .term-scene > i { justify-self: center; width: 1px; height: 20px; }
  .term-scene > i::after { right: auto; left: 50%; top: auto; bottom: -4px; transform: translateX(-50%) rotate(90deg); }
  .term-scene > i span { top: 0; left: -2px; animation-name: termPacketMobile; }
  @keyframes termPacketMobile { 50%,100% { transform: translateY(16px); } }
  .term-explainer-copy { padding: 23px 18px; }
  .term-explainer-copy h5 { font-size: 25px; }
  .term-explainer-copy dl > div { grid-template-columns: 1fr; gap: 6px; }
  .lesson-heading h3, .checkpoint-head h3 { font-size: 32px; }
  .concept-strip { align-items: stretch; flex-direction: column; gap: 10px; }
  .concept-strip i { transform: rotate(90deg); align-self: center; }
  .lab-card { padding: 18px; }
  .pipeline-slots { grid-template-columns: repeat(2,1fr); }
  .pipeline-slot:nth-child(even)::after { display: none; }
  .insight-grid, .analogy-row, .bucket-grid, .bitrate-lab, .builder-options, .triad, .scenario-picker > div, .ops-grid, .teach-grid, .frame-teacher { grid-template-columns: 1fr; }
  .journey-map { padding-inline: 13px; }
  .journey-copy { padding: 24px 18px; }
  .guided-controls { gap: 10px; }.journey-dots { display: none; }
  .glossary-toolbar { align-items: flex-start; flex-direction: column; }
  .glossary-grid { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x proximity; }
  .glossary-card { flex: 0 0 145px; scroll-snap-align: start; }
  .glossary-detail { grid-template-rows: auto 1fr; }
  .term-overview { grid-template-columns: 1fr; gap: 12px; }
  .motion-preview { width: 100%; height: 120px; }
  .motion-preview-stage { transform: scale(.65); }
  .glossary-copy { padding: 22px 18px; }
  .term-facts { grid-template-columns: 1fr; gap: 12px; }
  .visual-resolution { gap: 12px; transform: scale(.85); }
  .visual-protocol { grid-template-columns: auto 145px auto; }
  .route-dot { animation-name: routeMoveMobile; }
  @keyframes routeMoveMobile { to { transform: translateX(140px); } }
  .gop-controls, .gop-stats { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .lesson-figure { grid-template-columns: 1fr; }
  .lesson-figure > img { min-height: 0; aspect-ratio: 16 / 9; }
  .lesson-figure figcaption { padding: 18px; }
  .teach-card figure { height: 180px; }
  .gop-stats div { border-right: 0; border-bottom: 1px solid #d3cec4; padding-bottom: 10px; }
  .quiz label { display: flex; }
  .incident-lab { grid-template-columns: 1fr; }
  .race-stage { grid-template-columns: 55px 1fr 55px; gap: 8px; }
  .host-dot, .viewer-dot { height: 55px; font-size: 11px; }
  .stage2-hero { min-height: auto; padding: 55px 20px; gap: 35px; }
  .stage2-hero-copy h2 { font-size: 43px; }
  .stage2-lesson-nav { top: 60px; justify-content: start; }
  .stage2-hero-figure figcaption { left: 14px; right: 14px; bottom: 12px; }
  .stage2-teacher-note { align-items: flex-start; }
  .stage2-trailer, .stage2-story-figure { grid-template-columns: 1fr; }
  .stage2-trailer > div, .stage2-story-figure figcaption { padding: 22px 18px; }
  .stage2-trailer video { min-height: 0; aspect-ratio: 16 / 9; }
  .stage2-journey .lab-header { padding: 20px 18px 14px; }
  .stage2-journey-steps { padding-inline: 17px; }
  .stage2-journey-detail, .stage2-publish-reader { grid-template-columns: 1fr; }
  .stage2-journey-detail > figure { min-height: 220px; }
  .stage2-journey-detail > .stage2-tour-story { padding: 23px 18px; }
  .stage2-journey-detail aside, .stage2-publish-reader aside { border-top: 1px solid var(--line); border-left: 0; }
  .stage2-tour-controls { flex-wrap: wrap; }
  .stage2-tour-controls button { flex: 1 1 125px; min-width: 0; }
  .stage2-role-heading { align-items: flex-start; flex-direction: column; }
  .stage2-story-figure picture, .stage2-story-figure img { aspect-ratio: 16 / 9; }
  .stage2-role-grid, .stage2-command-anatomy, .stage2-srs-checks { grid-template-columns: 1fr; }
  .stage2-wide-figure { grid-template-columns: 1fr; min-height: 0; }
  .stage2-wide-figure picture, .stage2-wide-figure img { aspect-ratio: 16 / 9; }
  .stage2-address-parts, .stage2-url-lab .builder-options, .stage2-command-options { grid-template-columns: 1fr; }
  .stage2-playback-map, .stage2-command-health, .stage2-config-head, .stage2-config-body, .stage2-readiness { grid-template-columns: 1fr; }
  .stage2-playback-map > div, .stage2-command-health > p, .stage2-config-head p { grid-column: 1; }
  .stage2-config-head h4, .stage2-config-head p { grid-row: auto; }.stage2-config-head p { margin-top: 9px; }
  .stage2-config-lines { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage2-address-demo { padding: 18px; }
  .stage2-address-demo > code { font-size: 12px; }
  .stage2-publish-track { grid-template-columns: repeat(5,110px); }
  .stage2-publish-reader > div, .stage2-publish-reader aside { padding: 23px 18px; }
  .stage2-publish-map .guided-controls { flex-wrap: wrap; }
  .stage2-srs-flow { grid-template-columns: 1fr; gap: 25px; }
  .stage2-srs-source::after, .stage2-srs-core::after { right: 50%; bottom: -21px; transform: rotate(90deg); }
  .stage2-srs-controls { flex-direction: column; }
  .stage2-srs-controls label { width: 100%; }
  .stage3-hero { min-height: auto; padding: 55px 20px; gap: 35px; }.stage3-hero-copy h2 { font-size: 43px; }.stage3-hero-figure figcaption { left: 14px; right: 14px; bottom: 12px; }.stage3-lesson-nav { top: 60px; justify-content: start; }.stage3-wide-figure { grid-template-columns: 1fr; min-height: 0; }.stage3-wide-figure picture, .stage3-wide-figure img { aspect-ratio: 16 / 9; }.stage3-teacher-note { align-items: flex-start; }.stage3-playback-lab .lab-header { padding: 20px 18px 14px; }.stage3-playback-steps { padding-inline: 17px; }.stage3-playback-detail, .stage3-manifest-body, .stage3-webrtc-reader { grid-template-columns: 1fr; }.stage3-playback-detail aside, .stage3-webrtc-reader aside { border-top: 1px solid var(--line); border-left: 0; }.stage3-manifest-lines { border-right: 0; border-bottom: 1px solid var(--line); }.stage3-protocol-heading { align-items: flex-start; flex-direction: column; }.stage3-hls-controls, .stage3-hls-stats, .stage3-flv-stats, .stage3-route-stats, .stage3-scenario-grid, .stage3-readiness { grid-template-columns: 1fr; }.stage3-hls-stats div, .stage3-flv-stats div, .stage3-route-stats div { padding-bottom: 9px; border-right: 0; border-bottom: 1px solid #30363d; }.stage3-flv-pipeline { grid-template-columns: 1fr; }.stage3-flv-stream { grid-template-columns: 58px 1fr 92px 62px; padding: 12px; }.stage3-flv-server, .stage3-flv-player { height: 58px; font-size: 8px; }.stage3-flv-buffer span { width: 15px; height: 25px; }.stage3-webrtc-track { grid-template-columns: repeat(4,105px); overflow-x: auto; }.stage3-webrtc-route { grid-template-columns: 60px 1fr 50px 1fr 60px; padding: 13px 8px; }.stage3-webrtc-route .endpoint, .stage3-webrtc-route .turn-node { height: 55px; font-size: 8px; }.stage3-choice-rule { grid-template-columns: 1fr; }.stage3-choice-rule > i { justify-self: center; transform: rotate(90deg); }
  .stage3-flv-teacher { padding: 18px; }.stage3-flv-teacher-head,.stage3-flv-definitions { grid-template-columns: 1fr; }.stage3-flv-teacher-head { gap: 12px; }.stage3-flv-teacher-head h4 { font-size: 22px; }.stage3-flv-definitions > article { padding: 16px; }.stage3-tag-anatomy,.stage3-mse-anatomy,.stage3-flv-real-path { grid-template-columns: 1fr; }.stage3-tag-anatomy > i,.stage3-mse-anatomy > i,.stage3-flv-real-path > i { justify-self: center; transform: rotate(90deg); }.stage3-flv-real-path { overflow: visible; }.stage3-flv-real-path span { min-width: 0; }
  .stage3-trailer { grid-template-columns: 1fr; }.stage3-trailer video { min-height: 220px; }.stage3-playback-detail > figure { min-height: 220px; }.stage3-tour-controls { flex-wrap: wrap; }.stage3-tour-controls button { flex: 1 1 125px; min-width: 0; }
  .stage3-delivery-terms { grid-template-columns: 1fr; }
  .stage3-distribution-lab .lab-header { align-items: flex-start; flex-direction: column; }
  .stage3-distribution-lab .lab-score { max-width: none; text-align: left; }
  .stage3-distribution-modes button { flex: 1 1 100%; }
  .stage3-distribution-map { grid-template-columns: 1fr; gap: 10px; padding: 30px 15px 18px; }
  .stage3-delivery-trunk,.stage3-delivery-fan { justify-self: center; width: 4px; height: 45px; }
  .stage3-delivery-trunk::after,.stage3-delivery-fan::after { content: "↓"; position: absolute; left: -6px; bottom: -4px; color: var(--cyan); font: 14px var(--mono); }
  .stage3-delivery-trunk > i,.stage3-delivery-fan > i { display: none; }
  .stage3-edge-layer { grid-template-columns: repeat(3,1fr); }
  .stage3-viewer-layer { grid-template-columns: repeat(2,1fr); }
  .stage3-distribution-controls,.stage3-distribution-stats { grid-template-columns: 1fr; }
  .stage3-distribution-stats > div { border-bottom: 1px solid #30373e; }
  .stage3-delivery-matrix header,.stage3-delivery-matrix > div { grid-template-columns: 1fr; gap: 8px; }
  .stage4-hero { min-height: auto; padding: 55px 20px; gap: 35px; }.stage4-hero-copy h2 { font-size: 43px; }.stage4-hero-figure figcaption { left: 14px; right: 14px; bottom: 12px; }.stage4-lesson-nav { top: 60px; justify-content: start; }.stage4-wide-figure { grid-template-columns: 1fr; min-height: 0; }.stage4-wide-figure picture,.stage4-wide-figure img { aspect-ratio: 16 / 9; }.stage4-teacher-note { align-items: flex-start; }.stage4-trailer { grid-template-columns: 1fr; }.stage4-trailer video { min-height: 220px; }.stage4-tour .lab-header { padding: 20px 18px 14px; }.stage4-tour-steps { padding-inline: 17px; }.stage4-tour-detail { grid-template-columns: 1fr; }.stage4-tour-detail > figure { min-height: 220px; }.stage4-tour-detail aside { border-top: 1px solid var(--line); border-left: 0; }.stage4-tour-controls { flex-wrap: wrap; }.stage4-tour-controls button { flex: 1 1 125px; min-width: 0; }.stage4-latency-controls,.stage4-latency-summary,.stage4-stutter-stats,.stage4-sync-stats,.stage4-readiness { grid-template-columns: 1fr; }.stage4-latency-summary div,.stage4-stutter-stats div,.stage4-sync-stats div { padding-bottom: 9px; border-right: 0; border-bottom: 1px solid #cdd2cf; }.stage4-latency-bars > div { grid-template-columns: 60px 1fr 58px; }.stage4-buffer-tank { height: 110px; }.stage4-metric-cards { grid-template-columns: repeat(2,1fr); }.stage4-metric-detail { grid-template-columns: 1fr; }.stage4-metric-detail > dl,.stage4-metric-detail > aside { border-top: 1px solid var(--line); border-left: 0; }.stage4-sync-stage { grid-template-columns: 95px 1fr; padding: 15px 10px; gap: 10px; }.stage4-mouth { width: 88px; height: 88px; }.stage4-mouth::before,.stage4-mouth::after { top: 28px; width: 7px; height: 7px; }.stage4-mouth::before { left: 24px; }.stage4-mouth::after { right: 24px; }.stage4-mouth i { left: 31px; bottom: 20px; width: 26px; }.stage4-sync-timeline > span { width: 58px; margin-left: -29px; }
  .stage4-stutter-lab { margin-inline: 0; padding: 18px; }
  .stage4-stutter-lab .lab-header h4 { font-size: 23px; }
  .stage4-stutter-lab .lab-tag { font-size: 9px; }
  .stage4-stutter-lab .lab-score { font-size: 11px; }
  .stage4-stutter-modes button { flex: 1 1 calc(50% - 5px); padding: 11px 8px; font-size: 11px; }
  .stage4-stutter-monitor { display: block; padding: 13px; }
  .stage4-flow-track { grid-template-columns: 1fr; gap: 8px; }
  .stage4-flow-arrow { transform: rotate(90deg); }
  .stage4-packet-road { height: 72px; }
  .stage4-buffer-tank { height: 100px; }
  .stage4-cause-callout { grid-template-columns: 1fr; gap: 5px; }
  .stage4-signal-panels { grid-template-columns: 1fr; }
  .stage5-hero { min-height: auto; padding: 55px 20px; gap: 35px; }.stage5-hero-copy h2 { font-size: 43px; }.stage5-hero-visual { grid-template-columns: repeat(9,88px); min-height: 270px; padding: 35px 20px 75px; overflow-x: auto; }.stage5-lesson-nav { top: 60px; justify-content: start; }
  .stage2-lesson-nav,.stage3-lesson-nav,.stage4-lesson-nav,.stage5-lesson-nav,.stage5-hero-visual { scrollbar-width: none; }
  .stage2-lesson-nav::-webkit-scrollbar,.stage3-lesson-nav::-webkit-scrollbar,.stage4-lesson-nav::-webkit-scrollbar,.stage5-lesson-nav::-webkit-scrollbar,.stage5-hero-visual::-webkit-scrollbar { display: none; }
  .stage5-architecture-rule,.stage5-teach-strip { grid-template-columns: 1fr; }.stage5-architecture-rule > i,.stage5-teach-strip > i { justify-self: center; transform: rotate(90deg); }
  .stage5-blueprint-lab .lab-header { padding: 20px 18px 14px; }.stage5-blueprint-steps { padding-inline: 17px; }.stage5-blueprint-detail { grid-template-columns: 1fr; }.stage5-blueprint-detail > * { min-height: 230px; }.stage5-blueprint-detail aside { border-left: 0; }.stage5-blueprint-controls { flex-wrap: wrap; }.stage5-blueprint-controls button { flex: 1 1 110px; min-width: 0; }
  .stage5-profile-grid { grid-template-columns: repeat(2,1fr); }.stage5-audience-grid,.stage5-ladder-stats { grid-template-columns: 1fr; }.stage5-ladder-stats div { padding-bottom: 9px; border-right: 0; border-bottom: 1px solid #303933; }
  .stage5-routing-controls,.stage5-routing-stats,.stage5-capacity-controls,.stage5-capacity-stats { grid-template-columns: 1fr; }.stage5-routing-stats div,.stage5-capacity-stats div { padding-bottom: 9px; border-right: 0; border-bottom: 1px solid #cfd5d1; }.stage5-capacity-stats div { border-color: #303933; }
  .stage5-routing-map { grid-template-columns: 1fr; }.stage5-routing-map > i { justify-self: center; transform: rotate(90deg); }.stage5-routing-map .routes { width: 100%; }.stage5-capacity-bars > div { grid-template-columns: 90px 1fr 70px; }
  .stage5-observe-grid,.stage5-protection-switches,.stage5-capstone-grid,.stage5-readiness { grid-template-columns: 1fr; }.stage5-failure-console { grid-template-columns: 1fr; }.stage5-failure-list { border-right: 0; border-bottom: 1px solid #303933; }
  .stage5-chain-reality-note { align-items: flex-start; }
  .stage5-chain-builder .lab-header { align-items: flex-start; flex-direction: column; padding: 21px 18px 15px; }
  .stage5-chain-route { padding-inline: 16px; }
  .stage5-chain-current { min-height: 0; }
  .stage5-chain-station,.stage5-chain-task { padding: 23px 18px; }
  .stage5-chain-io { grid-template-columns: 1fr; gap: 7px; }
  .stage5-chain-io > i { justify-self: center; transform: rotate(90deg); }
  .stage5-chain-question { align-items: flex-start; flex-direction: column; gap: 5px; }
  .stage5-chain-task > p { min-height: 0; }
  .stage5-chain-controls { flex-direction: column-reverse; }
  .stage5-chain-controls button { width: 100%; }
  .stage5-chain-finished { min-height: 0; padding: 30px 18px; }
  .stage5-chain-finished h4 { font-size: 24px; }
  .stage5-chain-finished > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .motion-preview { transition: none; }
}