.module-heading { display: grid; grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: 14px; }
.module-heading > p { color: #9fb4c7; line-height: 1.45; }
.planned-card { cursor: default; opacity: .64; }
.planned-card em { color: #b6c1cc !important; }
.launch-setup { display: grid; gap: 22px; }
.launch-boundary { display: grid; gap: 5px; padding: 14px 16px; border-left: 4px solid #6be5b0; background: #0c2a29; color: #c9f6df; }
.launch-boundary span { color: #a9d9c8; }
.launch-setup ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; counter-reset: route; }
.launch-setup li { display: grid; gap: 7px; min-height: 96px; padding: 14px; border: 1px solid #35526d; border-radius: 10px; background: #091522; list-style: none; counter-increment: route; }
.launch-setup li::before { content: counter(route, decimal-leading-zero); color: #58c8ff; font-size: .72rem; font-weight: 850; }
.launch-setup li span, .launch-setup .setup-actions > span { color: #aebfd0; font-size: .82rem; line-height: 1.4; }
.projection-header.without-runtime { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.launch-shell { grid-template-rows: 48px minmax(0, 1fr) 128px 22px; }
.launch-canvas { display: grid; min-height: 0; padding: clamp(24px, 3.7vw, 68px); overflow: auto; background:
  radial-gradient(circle at 85% 15%, #164c6855, transparent 29%),
  linear-gradient(145deg, #0b1b2d 0%, #08131f 58%, #0b1927 100%); }
.launch-kicker { color: #64d9ff; font-size: clamp(.72rem, .9vw, .9rem); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.launch-heading { align-self: end; max-width: 1480px; }
.launch-heading.compact { align-self: start; }
.launch-heading h1, .launch-hero h1, .baseline-card h1, .baseline-neutral h1, .transition-card h1, .curiosity-card h1 { max-width: 18ch; margin-top: 12px; font-size: clamp(2.25rem, 4.6vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.launch-heading > p:last-child, .launch-hero > p:not(.launch-kicker), .baseline-card > p:not(.launch-kicker), .baseline-neutral > p:not(.launch-kicker), .transition-card > p:not(.launch-kicker), .curiosity-card > p:not(.launch-kicker) { max-width: 68ch; margin-top: 18px; color: #b9ccdd; font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.5; }
.launch-hero { align-self: center; max-width: 950px; }
.launch-welcome .launch-canvas { grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr); align-items: center; gap: clamp(24px, 5vw, 90px); }
.launch-response-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.launch-response-row span { padding: 8px 12px; border: 1px solid #4d718c; border-radius: 999px; color: #e0eef9; background: #102a40; font-weight: 750; }
.signal-orbit { position: relative; display: grid; width: min(36vw, 520px); aspect-ratio: 1; place-items: center; justify-self: center; border: 1px solid #315672; border-radius: 50%; box-shadow: inset 0 0 80px #0c719522; }
.signal-orbit::before { position: absolute; inset: 18%; border: 1px dashed #5ba5c0; border-radius: 50%; content: ""; }
.signal-orbit strong { display: grid; width: 34%; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #052131; background: #76ddff; font-size: clamp(1rem, 1.8vw, 1.6rem); }
.signal-orbit span { position: absolute; padding: 7px 10px; border: 1px solid #38617b; border-radius: 7px; color: #c8d9e8; background: #0a1b2a; }
.signal-orbit span:nth-child(1) { top: 5%; left: 38%; }.signal-orbit span:nth-child(2) { top: 27%; right: -2%; }.signal-orbit span:nth-child(3) { right: 8%; bottom: 12%; }.signal-orbit span:nth-child(4) { bottom: 8%; left: 7%; }.signal-orbit span:nth-child(5) { top: 28%; left: -2%; }
.launch-journey .launch-canvas { grid-template-rows: max-content minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); }
.journey-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-self: center; margin: 0; padding: 0; }
.journey-track li { position: relative; display: grid; grid-template-rows: max-content max-content 1fr; gap: 10px; min-width: 0; padding: 0 12px; list-style: none; }
.journey-track li:not(:last-child)::after { position: absolute; z-index: 0; top: 17px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: #477b98; content: ""; }
.journey-track li > span { z-index: 1; display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid #62d5ff; border-radius: 50%; color: #061723; background: #62d5ff; font-weight: 900; }
.journey-track strong { color: #f2f7fb; font-size: clamp(.85rem, 1.15vw, 1.15rem); }
.journey-track small { color: #9fb5c7; font-size: clamp(.7rem, .9vw, .9rem); line-height: 1.4; }
.launch-participation .launch-canvas { grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.participation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.participation-grid article { display: grid; gap: 6px; min-height: 108px; padding: clamp(14px, 1.8vw, 24px); border: 1px solid #31536d; border-radius: 12px; background: #10253a; }
.participation-grid strong { color: #78ddff; font-size: clamp(1rem, 1.45vw, 1.35rem); }
.participation-grid span { color: #bdcede; line-height: 1.4; }
.launch-baseline-ready .launch-canvas, .launch-baseline .launch-canvas, .launch-transition .launch-canvas, .launch-curiosity .launch-canvas { place-items: center; }
.baseline-card, .baseline-neutral, .transition-card, .curiosity-card { display: grid; width: min(1050px, 88%); padding: clamp(34px, 5vw, 76px); border: 1px solid #345b76; border-radius: 24px; background: #0d2235; box-shadow: 0 32px 80px #02070d66; }
.baseline-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.baseline-notes span { padding: 13px 16px; border-left: 4px solid #72dfad; color: #d5eee3; background: #0c302e; font-weight: 750; }
.baseline-neutral { place-items: center; text-align: center; }
.baseline-neutral h1 { max-width: none; }
.baseline-neutral > strong { margin-top: 24px; color: #8ca5b8; font-size: .9rem; }
.paper-mark { width: 62px; height: 80px; margin-bottom: 22px; border: 2px solid #7a9aad; border-radius: 6px; background: linear-gradient(#7a9aad 0 0) 13px 20px/34px 2px no-repeat, linear-gradient(#7a9aad 0 0) 13px 32px/34px 2px no-repeat, linear-gradient(#7a9aad 0 0) 13px 44px/26px 2px no-repeat; }
.transition-card { grid-template-columns: 1fr max-content; align-items: end; }
.transition-card > *:not(.transition-arrow) { grid-column: 1; }
.transition-card > strong { margin-top: 26px; color: #81ddff; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.transition-arrow { grid-column: 2; grid-row: 1 / span 5; align-self: center; color: #67d8ff; font-size: clamp(5rem, 10vw, 10rem); }
.launch-categories .launch-canvas { grid-template-rows: max-content 1fr; gap: 30px; }
.category-field { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px); }
.category-field span { padding: clamp(12px, 1.7vw, 22px) clamp(16px, 2.2vw, 30px); border: 1px solid #3b6682; border-radius: 999px; color: #dcedf8; background: #0f2a41; font-size: clamp(.95rem, 1.45vw, 1.35rem); font-weight: 780; }
.launch-lens .launch-canvas { grid-template-rows: max-content 1fr max-content; gap: 24px; }
.ipo-lens { display: grid; grid-template-columns: 1fr max-content 1fr max-content 1fr max-content 1fr; align-items: center; gap: clamp(8px, 1.2vw, 18px); }
.ipo-lens > div { display: grid; min-height: 150px; place-content: center; gap: 6px; padding: 18px; border: 1px solid #3b6c87; border-radius: 18px; background: #102b43; text-align: center; }
.ipo-lens > div > span { color: #63d8ff; font-weight: 900; }.ipo-lens strong { font-size: clamp(1.15rem, 1.8vw, 1.7rem); }.ipo-lens small { color: #a9bfce; }.ipo-lens b { color: #66d7ff; font-size: 2rem; }
.lens-context { display: flex; justify-content: center; gap: 10px; }.lens-context span { padding: 7px 11px; border: 1px dashed #75889a; border-radius: 7px; color: #c5d1db; }
.launch-explore .launch-canvas { grid-template-columns: minmax(300px, .65fr) minmax(620px, 1.35fr); grid-template-rows: 1fr max-content; gap: 22px clamp(26px, 4vw, 60px); align-items: center; }
.explore-title > span { display: block; margin-top: 24px; color: #8da9bc; font-weight: 750; }.explore-title h1 { margin-top: 5px; color: #7de0ff; font-size: clamp(2.6rem, 5vw, 5.2rem); letter-spacing: -.055em; }.explore-title > p:last-child { max-width: 47ch; margin-top: 18px; color: #b8cbda; line-height: 1.5; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.prompt-grid article { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 11px; min-height: 92px; padding: 14px; border: 1px solid #345b74; border-radius: 11px; background: #0e263b; }.prompt-grid article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #082133; background: #6edbff; font-weight: 950; }.prompt-grid strong { font-size: clamp(.9rem, 1.25vw, 1.15rem); }
.reasoning-key { display: flex; grid-column: 1 / -1; justify-content: center; gap: clamp(12px, 2.5vw, 36px); color: #bed0dc; }.reasoning-key span { display: flex; align-items: center; gap: 8px; }.reasoning-key i { width: 13px; height: 13px; border-radius: 50%; }.reasoning-key .observed { border: 3px solid #69dfa8; }.reasoning-key .guess { border: 3px dashed #ffc760; }.reasoning-key .question { background: #7fdcff; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.teacher-select { display: flex; width: 210px; align-items: center; gap: 8px; color: #bcd0df; font-size: .75rem; }.teacher-select select { width: 100%; padding: 9px; border: 1px solid #4d708a; border-radius: 7px; color: #eef7ff; background: #0a1928; }
.launch-share .launch-canvas { align-items: stretch; }.share-stage { display: grid; grid-template-columns: minmax(300px, .6fr) minmax(600px, 1.4fr); gap: clamp(30px, 5vw, 84px); align-items: center; }.share-stage h1 { margin-top: 6px; color: #7ee0ff; font-size: clamp(2.6rem, 5vw, 5.2rem); letter-spacing: -.055em; }.share-stage > div:first-child > span { display: block; margin-top: 30px; color: #93abbd; }.share-stage > div:first-child > p:last-of-type { max-width: 44ch; margin-top: 16px; color: #b8cbd8; line-height: 1.5; }.reasoning-key.vertical { display: grid; justify-content: start; margin-top: 24px; }
.connection-stack, .course-connections { display: grid; gap: 10px; }.connection-stack article, .course-connections article, .listening-card { display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: 18px; align-items: center; min-height: 68px; padding: 14px 18px; border: 1px solid #355d76; border-radius: 11px; background: #10283e; }.connection-stack strong, .course-connections strong { color: #79ddff; }.connection-stack span, .course-connections span, .listening-card span { color: #b9cbd9; line-height: 1.4; }
.launch-connections .launch-canvas { grid-template-columns: minmax(330px, .75fr) minmax(640px, 1.25fr); gap: clamp(30px, 5vw, 80px); align-items: center; }.course-connections article { min-height: 76px; }
.curiosity-card blockquote { margin: 28px 0 0; padding: 18px 22px; border-left: 5px solid #68d9ff; color: #f1f8fc; background: #102b43; font-size: clamp(1.15rem, 1.8vw, 1.7rem); font-weight: 750; line-height: 1.35; }
.blank-display { display: grid; width: 100vw; height: 100vh; place-items: end center; padding: 24px; overflow: hidden; background: #000; }.blank-display > div { display: flex; gap: 8px; }.blank-display button { padding: 9px 13px; border: 1px solid #333; border-radius: 7px; color: #777; background: #090909; }.blank-display button:focus-visible { color: #fff; outline: 3px solid #75d5ff; }

/* Course Launch 2026-09-01: one continuous short-video story. */
.launch-swipe-hook .launch-canvas, .launch-reentry .launch-canvas { grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); align-items: center; gap: clamp(30px, 6vw, 100px); }
.launch-story-copy { max-width: 920px; }.launch-story-copy h1 { max-width: 13ch; margin: 14px 0 0; font-size: clamp(3rem, 6vw, 6.8rem); line-height: .94; letter-spacing: -.065em; }.launch-story-copy > p:last-child { max-width: 64ch; margin-top: 24px; color: #b9ccdd; font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.55; }
.short-video-phone { position: relative; width: auto; height: min(63vh, 610px); aspect-ratio: 9 / 16; justify-self: center; overflow: hidden; border: 8px solid #1c2a36; border-radius: 44px; background: #05080c; box-shadow: 0 36px 90px #0009, 0 0 0 1px #5e7180; }
.phone-camera { position: absolute; z-index: 3; top: 10px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 99px; background: #05080c; }
.video-scene { position: absolute; inset: 0; display: grid; align-content: end; gap: 8px; padding: 38px 30px; background: radial-gradient(circle at 62% 32%, #f4d37b 0 6%, transparent 7%), linear-gradient(145deg, transparent 0 40%, #183f58 41% 56%, transparent 57%), linear-gradient(180deg, #7cc5dd, #24526c 54%, #1a2b36 55%); }.video-scene span { color: #e5f5ff; font-size: .82rem; }.video-scene strong { max-width: 10ch; color: #fff; font-size: clamp(1.2rem, 2vw, 2rem); }
.swipe-finger { position: absolute; z-index: 4; right: 30%; bottom: 13%; display: grid; width: 68px; height: 68px; place-items: center; border: 2px solid #fff8; border-radius: 50%; color: #fff; background: #09141bcc; font-size: 2.5rem; animation: launch-swipe 1.8s ease-in-out infinite; }.phone-actions { position: absolute; z-index: 4; right: 14px; bottom: 26%; display: grid; gap: 16px; color: #fff; font-size: 1.5rem; font-style: normal; }
@keyframes launch-swipe { 0%, 100% { transform: translateY(18px); opacity: .65; } 48% { transform: translateY(-36px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .swipe-finger { animation: none; } }

.launch-signals .launch-canvas, .launch-ranking .launch-canvas, .launch-compression .launch-canvas, .launch-network .launch-canvas, .launch-security .launch-canvas, .launch-impact .launch-canvas, .launch-big-ideas .launch-canvas, .launch-course-journey .launch-canvas, .launch-learning-rhythm .launch-canvas { grid-template-columns: minmax(360px, .72fr) minmax(620px, 1.28fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.launch-heading.compact h1 { max-width: 15ch; margin-top: 10px; font-size: clamp(2.35rem, 4.5vw, 5rem); line-height: .98; letter-spacing: -.055em; }.launch-heading.compact > p:last-child { max-width: 58ch; margin-top: 18px; color: #b8cad9; font-size: clamp(.95rem, 1.25vw, 1.2rem); line-height: 1.5; }
.signal-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.signal-ledger article { display: grid; grid-template-columns: 32px 1fr; gap: 4px 10px; padding: 16px; border: 1px solid #355c75; border-radius: 14px; background: #0f293f; }.signal-ledger article > span { grid-row: 1 / 3; color: #67dafd; font-weight: 900; }.signal-ledger strong { color: #f3f7fa; }.signal-ledger small { color: #9db3c4; }.ledger-conclusion { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 18px; padding: 16px; border-radius: 12px; color: #dff8ed; background: #0c342e; font-weight: 800; }.ledger-conclusion b { color: #6ce1b1; font-size: 1.5rem; }
.ranking-board { display: grid; gap: 9px; }.ranking-board article { display: grid; grid-template-columns: 36px minmax(145px, .8fr) minmax(170px, 1fr) 42px; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #365c74; border-radius: 12px; background: #0e263b; }.ranking-board article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #061820; background: #68dcff; font-weight: 950; }.ranking-board article small { display: block; margin-top: 3px; color: #9fb3c4; }.ranking-board article > b { color: #8bdef5; text-align: right; }.score-track { height: 9px; overflow: hidden; border-radius: 99px; background: #20394b; }.score-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fc7ff, #78e4b2); }.ranking-board > p { color: #8298aa; font-size: .78rem; text-align: right; }
.video-versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.video-versions article { display: grid; gap: 7px; padding: 12px; border: 1px solid #365b74; border-radius: 15px; background: #0e263b; }.version-preview { display: grid; aspect-ratio: 16 / 10; place-items: end start; padding: 12px; border-radius: 10px; color: #fff; background: linear-gradient(150deg, #90d7e8 0 48%, #326c86 49% 65%, #173648 66%); }.quality-2 { filter: contrast(.92) blur(.5px); }.quality-3 { filter: contrast(.82) blur(1.5px); image-rendering: pixelated; }.version-preview span { padding: 5px 8px; border-radius: 6px; background: #07131bcc; font-weight: 850; }.video-versions small { color: #9eb4c4; }.bandwidth-line { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; color: #a9bfd0; }.bandwidth-line i { flex: 1; height: 7px; border-radius: 99px; background: linear-gradient(90deg, #6fe1ae, #ffd06f, #ef7886); }
.network-model { position: relative; display: grid; grid-template-columns: minmax(170px, .55fr) minmax(300px, 1.2fr) minmax(170px, .55fr); align-items: center; gap: 32px; min-height: 320px; }.endpoint, .network-cloud { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; }.endpoint { min-height: 170px; padding: 18px; border: 2px solid #61d7ff; border-radius: 22px; background: #0d2a40; }.endpoint > span, .network-cloud > span { color: #6edcff; font-size: .72rem; font-weight: 950; letter-spacing: .15em; }.endpoint strong { margin-top: 7px; font-size: 1.35rem; }.endpoint small { margin-top: 8px; color: #a5bbca; }.network-cloud { min-height: 245px; padding: 26px; border: 2px dashed #5e91aa; border-radius: 48% 52% 45% 55% / 55% 44% 56% 45%; background: #0c2234ee; }.router-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0; }.router-grid i { display: grid; width: 48px; height: 42px; place-items: center; border: 1px solid #5e97b1; border-radius: 9px; color: #d5ebf5; background: #15364b; font-style: normal; font-weight: 850; }.network-cloud small { color: #a9becd; }.network-route { position: absolute; z-index: 1; inset: 72px 0 auto; width: 100%; height: 180px; overflow: visible; }.network-route path { fill: none; stroke: #72e2b2; stroke-width: 4; stroke-dasharray: 10 8; }.network-route circle { fill: #72e2b2; }
.security-flow { display: grid; grid-template-columns: 1fr max-content 1.15fr max-content 1fr; align-items: center; gap: 12px; }.security-flow article { display: grid; min-height: 200px; place-content: center; gap: 9px; padding: 18px; border: 1px solid #376079; border-radius: 16px; background: #0e283e; text-align: center; }.security-flow article > span { color: #64d9ff; font-weight: 900; }.security-flow article strong { font-size: 1.15rem; }.security-flow article small { color: #a8bdcc; line-height: 1.4; }.security-flow > b { color: #65dcff; font-size: 2rem; }.security-flow code { margin-top: 8px; padding: 8px; border-radius: 7px; color: #7de5b7; background: #061712; }
.impact-balance { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; gap: 22px; }.impact-balance article { display: grid; gap: 11px; min-height: 245px; align-content: center; padding: 28px; border-radius: 20px; }.impact-balance article span { margin-bottom: 7px; font-size: .78rem; font-weight: 900; letter-spacing: .12em; }.impact-balance article strong { padding: 9px 12px; border-radius: 8px; background: #ffffff0d; }.impact-balance .benefit { border: 1px solid #49bd91; background: #0c302b; }.impact-balance .cost { border: 1px solid #d8857e; background: #351d29; }.impact-balance > div { display: grid; width: 100px; gap: 9px; place-items: center; text-align: center; }.impact-balance > div b { color: #6fdcff; font-size: 2rem; }.impact-balance > div small { color: #aebfca; line-height: 1.35; }
.big-idea-grid { display: grid; gap: 8px; }.big-idea-grid article { display: grid; grid-template-columns: 38px minmax(170px, .55fr) 1fr; align-items: center; gap: 14px; padding: 12px 15px; border: 1px solid #355d76; border-radius: 11px; background: #0f293f; }.big-idea-grid article > span { color: #63d9ff; font-weight: 950; }.big-idea-grid strong, .big-idea-grid small { display: block; }.big-idea-grid small { margin-top: 2px; color: #88a4b7; }.big-idea-grid p { color: #c1d1dd; line-height: 1.35; }
.swipe-trail { display: grid; gap: 10px; align-content: center; }.swipe-trail span { padding: 18px 24px; border: 1px solid #3a6780; border-radius: 12px; color: #d9eef8; background: #102b42; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 850; }.swipe-trail span:nth-child(2n) { transform: translateX(28px); border-color: #4f9b86; }
.course-journey-cards { display: grid; gap: 8px; margin: 0; padding: 0; }.course-journey-cards li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 13px 16px; border: 1px solid #355d76; border-radius: 12px; background: #0f293f; list-style: none; }.course-journey-cards li > span { color: #67dcff; font-weight: 950; }.course-journey-cards strong, .course-journey-cards b, .course-journey-cards small { display: block; }.course-journey-cards b { margin-top: 2px; color: #75dab3; font-size: .82rem; }.course-journey-cards small { margin-top: 4px; color: #9fb5c5; }
.learning-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.learning-loop article { position: relative; display: grid; min-height: 210px; align-content: center; gap: 8px; padding: 22px; border: 1px solid #356079; border-radius: 18px; background: #0e293f; }.learning-loop article:not(:last-child)::after { position: absolute; top: 50%; right: -20px; z-index: 2; color: #68daff; content: "→"; font-size: 1.7rem; }.learning-loop span { color: #62d8ff; font-weight: 950; }.learning-loop strong { font-size: 1.4rem; }.learning-loop small { color: #a7bdcc; }
/* Persistent short-video systems lab: CL-01 is an app, not a slide deck. */
.launch-lab-shell { background: #06101a; }
.lab-canvas { display: grid; grid-template-rows: 58px minmax(0, 1fr); min-height: 0; overflow: hidden; background: radial-gradient(circle at 35% 25%, #16385177, transparent 30%), linear-gradient(145deg, #071522, #09101a 72%); }
.lab-stagebar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 8px 14px; border-bottom: 1px solid #263d4f; background: #08131eeb; }
.lab-stagebar button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; border: 1px solid transparent; border-radius: 8px; color: #70899b; background: transparent; font: inherit; cursor: pointer; }
.lab-stagebar button span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #3c5669; border-radius: 50%; font-size: .68rem; font-weight: 900; }.lab-stagebar button strong { font-size: .8rem; white-space: nowrap; }
.lab-stagebar button.visited { color: #9db6c7; }.lab-stagebar button.visited span { border-color: #4e957e; color: #081a15; background: #6edcaf; }.lab-stagebar button.active { border-color: #3c7897; color: #edf9ff; background: #102a3f; }.lab-stagebar button.active span { border-color: #65d9ff; color: #04151f; background: #65d9ff; }
.lab-workspace { display: grid; grid-template-columns: minmax(220px, .54fr) minmax(520px, 1.45fr) minmax(300px, .78fr); min-height: 0; gap: clamp(18px, 2.2vw, 38px); padding: clamp(18px, 2vw, 34px); }
.lab-phone { position: relative; align-self: center; justify-self: center; width: min(18vw, 286px); aspect-ratio: 9 / 16; overflow: hidden; border: 7px solid #21303b; border-radius: 34px; background: #05080c; box-shadow: 0 24px 70px #000a, 0 0 0 1px #536675; transition: filter .25s ease; }
.lab-phone > header { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 13px 17px; color: #fff; font-size: .68rem; }.lab-phone > header b { font-size: .62rem; }
.lab-video { position: absolute; inset: 0; display: grid; align-content: end; gap: 5px; padding: 34px 23px 72px; color: #fff; background: radial-gradient(circle at 58% 30%, #f3cc75 0 6%, transparent 6.5%), linear-gradient(148deg, transparent 0 41%, #245d78 42% 58%, transparent 59%), linear-gradient(180deg, #81cce1, #2a607a 55%, #172e3b 56%); }.lab-video::after { position: absolute; inset: 0; background: linear-gradient(transparent 55%, #04080bcf); content: ""; }.lab-video > * { z-index: 1; }.lab-video strong { max-width: 12ch; font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1.15; }.lab-video small { color: #cfdee7; }.lab-quality { position: absolute; z-index: 2; top: 45px; left: 16px; padding: 4px 7px; border-radius: 5px; background: #08131dbb; font-size: .62rem; font-weight: 850; }
.lab-phone.quality-medium .lab-video { filter: contrast(.92) saturate(.88) blur(.35px); }.lab-phone.quality-slow .lab-video { filter: contrast(.8) saturate(.72) blur(1.35px); }.lab-phone-actions { position: absolute; z-index: 4; right: 11px; bottom: 24%; display: grid; gap: 13px; color: #fff; font-size: 1.25rem; }.lab-phone > footer { position: absolute; z-index: 5; inset: auto 0 0; display: flex; height: 52px; align-items: center; justify-content: space-around; color: #dce8ef; background: #070a0d; font-size: .66rem; }.lab-phone > footer strong { font-size: 1.45rem; }
.lab-model { display: grid; min-height: 0; align-items: center; overflow: hidden; border: 1px solid #2d4b60; border-radius: 20px; background: #0a1c2aaa; box-shadow: inset 0 1px #ffffff08; }.lab-model button { font: inherit; }
.lab-question { display: grid; align-self: center; gap: 14px; max-height: 100%; padding: 4px; overflow: auto; }.lab-question > p { color: #65d9ff; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }.lab-question h1 { max-width: 12ch; font-size: clamp(1.85rem, 2.6vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }.lab-current-task { display: grid; gap: 6px; margin-top: 8px; padding: 16px; border-left: 4px solid #72e1b2; border-radius: 0 10px 10px 0; background: #0d302c; }.lab-current-task span { color: #81bba7; font-size: .7rem; font-weight: 900; }.lab-current-task strong { color: #e7faf3; font-size: clamp(.9rem, 1.15vw, 1.1rem); line-height: 1.4; }.lab-question details { border-top: 1px solid #294252; padding-top: 12px; color: #9eb2c0; font-size: .82rem; line-height: 1.5; }.lab-question summary { color: #b9ccd8; cursor: pointer; }.lab-question details p { margin-top: 8px; }
.lab-action-stage, .lab-signal-panel, .lab-algorithm-panel, .lab-quality-panel, .lab-security-panel, .lab-impact-panel, .lab-big-picture { display: grid; width: 100%; height: 100%; min-height: 0; place-content: center; gap: 22px; padding: clamp(20px, 3vw, 48px); }

.swipe-pad { display: grid; width: min(320px, 55%); aspect-ratio: 1.25; place-items: center; gap: 2px; justify-self: center; border: 1px solid #37708d; border-radius: 28px; color: #dff6ff; background: radial-gradient(circle, #17445d, #0b2638); box-shadow: 0 20px 50px #0005; cursor: pointer; }.swipe-pad:hover, .swipe-pad:focus-visible { border-color: #76dcff; outline: 3px solid #76dcff44; }.swipe-pad span { color: #6ee0ff; font-size: 3rem; }.swipe-pad strong { font-size: 1.25rem; }.swipe-pad small { color: #8caabc; }.swipe-pad.done { border-color: #68d9a9; background: radial-gradient(circle, #174b40, #0b2b27); }
.system-pulse { display: flex; align-items: center; justify-content: center; gap: 12px; color: #587184; }.system-pulse span { padding: 9px 12px; border: 1px solid #2b4659; border-radius: 8px; background: #0a1722; }.system-pulse.active span { color: #dff5ff; border-color: #3e7c96; background: #102e42; }.system-pulse.active b { color: #71dfb0; }
.lab-control-title { display: grid; gap: 4px; }.lab-control-title span { color: #6ad9ff; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }.lab-control-title strong { font-size: 1.25rem; }.signal-buttons, .quality-controls, .objective-controls { display: flex; gap: 10px; }.signal-buttons button, .quality-controls button, .objective-controls button { flex: 1; display: grid; min-height: 82px; place-content: center; gap: 5px; border: 1px solid #345b72; border-radius: 13px; color: #dcebf3; background: #0d273a; cursor: pointer; }.signal-buttons button:hover, .signal-buttons button.active, .quality-controls button:hover, .quality-controls button.active, .objective-controls button:hover, .objective-controls button.active { border-color: #62d9ff; color: #fff; background: #153d54; box-shadow: inset 0 0 0 1px #62d9ff55; }.signal-buttons small, .quality-controls small { color: #85a0b1; font-size: .68rem; }
.signal-readout { display: grid; grid-template-columns: max-content 1fr max-content max-content 1fr; align-items: center; gap: 10px; padding: 15px; border-radius: 12px; background: #0b302b; }.signal-readout span { color: #7ab49f; font-size: .7rem; }.signal-readout b { color: #ddf6ed; }.signal-readout i { color: #71dfb0; font-style: normal; }
.lab-ranking-list { display: grid; gap: 8px; }.lab-ranking-list article { display: grid; grid-template-columns: 30px minmax(130px, .7fr) minmax(140px, 1fr) 38px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2f5064; border-radius: 10px; background: #0d2536; transition: transform .2s ease; }.lab-ranking-list.is-ranked article:first-child { border-color: #5ecb9f; background: #10352f; transform: translateX(7px); }.lab-ranking-list article > span { color: #65d9ff; font-weight: 900; }.lab-ranking-list small { display: block; margin-top: 2px; color: #829cad; }.lab-ranking-list i { height: 7px; overflow: hidden; border-radius: 99px; background: #223a4a; }.lab-ranking-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60d5ff, #72dfae); transition: width .35s ease; }.lab-ranking-list em { color: #8edebf; font-style: normal; text-align: right; }
.lab-run-button { justify-self: center; padding: 11px 18px; border: 1px solid #5ecff3; border-radius: 9px; color: #071921; background: #6ddcff; font-weight: 900; cursor: pointer; }.lab-disclaimer { color: #718a9b; font-size: .68rem; text-align: center; }
.bandwidth-meter { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; align-items: center; }.bandwidth-meter span { color: #8aa2b2; }.bandwidth-meter strong { justify-self: end; }.bandwidth-meter i { grid-column: 1 / -1; height: 12px; overflow: hidden; border-radius: 99px; background: #223746; }.bandwidth-meter i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ef7886, #f0cd6f, #6fdfaf); }.bandwidth-meter i.fast b { width: 94%; }.bandwidth-meter i.medium b { width: 58%; }.bandwidth-meter i.slow b { width: 24%; }.quality-readout, .objective-result { display: grid; gap: 6px; padding: 18px; border-left: 4px solid #6ddfb0; background: #0b302b; }.quality-readout span, .objective-result span { color: #7bb19f; font-size: .7rem; }.quality-readout strong, .objective-result strong { color: #e1f6ee; font-size: 1.1rem; }
.lab-network-panel { position: relative; display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 20px; width: 100%; padding: 45px 32px 80px; }.lab-endpoint { display: grid; min-height: 120px; place-content: center; gap: 7px; border: 2px solid #5dd4fa; border-radius: 18px; background: #0e2c40; text-align: center; }.lab-endpoint span { color: #66dafd; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }.lab-route { position: relative; display: flex; align-items: center; justify-content: space-between; }.lab-route > b { color: #496477; }.lab-route > small { position: absolute; top: 62px; left: 50%; width: 100%; transform: translateX(-50%); color: #8fa8b8; text-align: center; }.router { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #42677d; border-radius: 10px; color: #9cb3c2; background: #10283a; font-style: normal; font-weight: 850; }.router.passed { border-color: #66d9a9; color: #0b211a; background: #6edfaf; }.packet { position: absolute; z-index: 3; top: -35px; left: 0; color: #72e2b2; font-style: normal; transition: left .35s ease; }.packet.step-1 { left: 12%; }.packet.step-2 { left: 38%; }.packet.step-3 { left: 63%; }.packet.step-4 { left: 93%; }.lab-network-panel .lab-run-button { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); }
.packet-reader { display: grid; gap: 13px; padding: 22px; border: 1px solid #c66d73; border-radius: 16px; background: #341b24; }.packet-reader.locked { border-color: #51bd91; background: #0e302b; }.packet-reader header { display: flex; justify-content: space-between; }.packet-reader header span { color: #a9bcc9; }.packet-reader header strong { color: #f08b91; font-size: .72rem; }.packet-reader.locked header strong { color: #6de0ac; }.packet-reader code { padding: 15px; border-radius: 9px; color: #ffc2c5; background: #10070a; font-size: 1rem; }.packet-reader.locked code { color: #83e9bd; background: #071713; }.packet-reader p { color: #afc1cc; }.security-switch { display: flex; align-items: center; justify-content: center; gap: 10px; justify-self: center; border: 0; color: #d4e3eb; background: transparent; cursor: pointer; }.security-switch i { position: relative; width: 54px; height: 29px; border-radius: 99px; background: #763d45; }.security-switch i::after { position: absolute; top: 4px; left: 4px; width: 21px; height: 21px; border-radius: 50%; background: #fff; content: ""; transition: transform .2s ease; }.security-switch.on i { background: #3ca47e; }.security-switch.on i::after { transform: translateX(25px); }.security-labels { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }.security-labels span { padding: 10px 18px; border: 1px solid #34576c; border-radius: 9px; color: #dbebf2; background: #0c2435; }.security-labels small { color: #8fa8b8; }
.objective-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }.objective-controls > span { grid-column: 1 / -1; color: #8ca5b5; }.objective-controls button { min-height: 74px; }.objective-result p { color: #9eb5aa; line-height: 1.4; }
.lab-big-picture { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 9px; place-content: stretch; }.lab-big-picture article { display: grid; align-content: center; gap: 3px; padding: 13px; border: 1px solid #34586f; border-radius: 11px; background: #0d283b; }.lab-big-picture article span { color: #67d9ff; font-weight: 900; }.lab-big-picture article strong { color: #8edebd; font-size: .72rem; }.lab-big-picture article small { margin-top: 4px; color: #9bb0bf; line-height: 1.3; }.big-picture-center { grid-column: 2; grid-row: 2; display: grid; place-content: center; border: 2px solid #66d9ff; border-radius: 50%; background: #123b52; text-align: center; }.big-picture-center span { color: #8cb1c3; font-size: .7rem; }.big-picture-center strong { color: #fff; }

@media (max-width: 1350px) {
  .launch-shell { grid-template-rows: 48px minmax(0, 1fr) 112px 18px; }
  .launch-canvas { padding: 18px 30px; }
  .launch-welcome .launch-canvas { grid-template-columns: 1fr; }.launch-welcome .signal-orbit { display: none; }
  .journey-track strong { font-size: .9rem; }.journey-track small { font-size: .72rem; }
  .launch-heading h1, .launch-hero h1, .baseline-card h1, .baseline-neutral h1, .transition-card h1, .curiosity-card h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
  .launch-explore .launch-canvas { grid-template-columns: minmax(260px, .55fr) minmax(560px, 1.45fr); }.prompt-grid article { min-height: 72px; }
  .share-stage h1 { font-size: 3rem; }.share-stage > div:first-child > span { margin-top: 12px; }.share-stage > div:first-child > p:last-of-type { margin-top: 9px; line-height: 1.35; }.reasoning-key.vertical { gap: 6px; margin-top: 12px; font-size: .86rem; }
  .connection-stack { gap: 6px; }.connection-stack article, .course-connections article, .listening-card { min-height: 52px; padding: 8px 12px; }
  .launch-signals .launch-canvas, .launch-ranking .launch-canvas, .launch-compression .launch-canvas, .launch-network .launch-canvas, .launch-security .launch-canvas, .launch-impact .launch-canvas, .launch-big-ideas .launch-canvas, .launch-course-journey .launch-canvas, .launch-learning-rhythm .launch-canvas { grid-template-columns: minmax(300px, .68fr) minmax(560px, 1.32fr); gap: 28px; }
  .launch-heading.compact h1 { font-size: clamp(2rem, 4vw, 3.25rem); }.launch-heading.compact > p:last-child { margin-top: 12px; font-size: .95rem; line-height: 1.4; }
  .signal-ledger article, .ranking-board article { padding: 10px 12px; }.network-model { min-height: 260px; }.network-cloud { min-height: 205px; padding: 18px; }.security-flow article { min-height: 170px; }.impact-balance article { min-height: 205px; padding: 20px; }.learning-loop article { min-height: 170px; }
}
@media (max-width: 1000px) {
  .module-heading { grid-template-columns: 1fr; gap: 8px; }.launch-setup ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch-welcome .launch-canvas, .launch-participation .launch-canvas, .launch-explore .launch-canvas, .launch-connections .launch-canvas { grid-template-columns: 1fr; }
  .signal-orbit { display: none; }.journey-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 0; }.journey-track li:nth-child(4)::after { display: none; }
  .launch-explore .launch-canvas { grid-template-rows: max-content 1fr max-content; }.prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.prompt-grid article { min-height: 64px; }
  .share-stage { grid-template-columns: minmax(250px, .55fr) minmax(430px, 1.45fr); }.launch-connections .launch-canvas { grid-template-columns: minmax(270px, .7fr) minmax(430px, 1.3fr); }
}

/* CL-01 immersive short-video feed. Knowledge appears inside the simulated use, never as slide navigation. */
.immersive-feed-shell { grid-template-rows: 48px minmax(0, 1fr); min-height: 720px; background: #050608; }
.immersive-feed-shell .projection-header { border-color: #292d34; background: #080a0e; }
.immersive-feed { position: relative; overflow: hidden; border-color: #242832; border-radius: 16px; background: #090b10; touch-action: none; user-select: none; }
.immersive-feed:focus-visible { outline: 3px solid #80e7ff; outline-offset: 3px; }
.feed-track { position: absolute; inset: 0; transform: translateY(0); transition: transform .38s cubic-bezier(.22,.75,.18,1); will-change: transform; }
.immersive-feed.is-dragging .feed-track { transform: translateY(var(--drag-y, 0)); transition: none; }
.feed-current, .feed-neighbor { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 76% 28%, #1b2740, #080a10 52%); }
.feed-neighbor.previous { transform: translateY(-100%); }.feed-neighbor.next { transform: translateY(100%); }
.feed-preview-question { position: absolute; z-index: 5; right: clamp(28px, 5vw, 84px); bottom: 12%; display: grid; width: min(42%, 720px); gap: 10px; text-shadow: 0 3px 20px #000; }.feed-preview-question span { color: #65e8ff; font-size: .76rem; font-weight: 950; letter-spacing: .12em; }.feed-preview-question strong { max-width: 18ch; font-size: clamp(1.8rem, 3vw, 3.8rem); line-height: 1.06; letter-spacing: -.045em; }

.feed-video-stack { position: absolute; z-index: 1; inset: 0 52% 0 0; overflow: hidden; background: #050607; box-shadow: 32px 0 90px #0009; }
.feed-video { position: absolute; inset: 0; overflow: hidden; color: #fff; background: linear-gradient(145deg, #64bbd5, #214d6d 52%, #142432); transition: transform .6s cubic-bezier(.22,.75,.18,1), filter .4s ease; }
.feed-video::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, #0004, transparent 22%, transparent 52%, #030407e6 94%); content: ""; }
.scene-recommendation .feed-video { background: linear-gradient(145deg, #f16a52, #9d252c 52%, #32141d); }
.scene-behavior .feed-video { background: linear-gradient(145deg, #f2b84c, #bc5c31 48%, #3a1820); }
.scene-compression .feed-video { background: linear-gradient(145deg, #7652c7, #313f86 50%, #111833); }
.scene-preload .feed-video { background: linear-gradient(145deg, #53b8a0, #1f6a69 52%, #102c37); }
.scene-security .feed-video { background: linear-gradient(145deg, #3b6cc0, #1e376d 52%, #111932); }
.scene-impact .feed-video { background: linear-gradient(145deg, #d0679a, #672b73 52%, #261434); }
.scene-wrap .feed-video { background: radial-gradient(circle at 50% 38%, #3d527f, #12182d 48%, #05070d); }
.feed-video.is-blurry .video-art { filter: blur(7px) contrast(.8); transform: scale(1.08); image-rendering: pixelated; }
.video-art { position: absolute; inset: 0; display: grid; place-items: center; transition: filter .35s ease, transform .35s ease; }
.video-art span { position: relative; z-index: 2; font-size: clamp(7rem, 13vw, 14rem); filter: drop-shadow(0 28px 28px #0007); animation: video-float 4s ease-in-out infinite; }
.video-art i { position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #ffffff18; }
.video-art i:nth-child(1) { top: -9%; left: -7%; }.video-art i:nth-child(2) { right: -4%; bottom: 18%; width: 52%; }.video-art i:nth-child(3) { bottom: -8%; left: 18%; width: 32%; background: #0002; }
@keyframes video-float { 50% { transform: translateY(-12px) rotate(2deg); } }
.feed-tabs { position: absolute; z-index: 3; top: 18px; left: 50%; display: flex; gap: 20px; transform: translateX(-50%); color: #ffffffaa; font-size: .88rem; }.feed-tabs strong { padding-bottom: 7px; border-bottom: 3px solid #fff; color: #fff; }
.feed-quality { position: absolute; z-index: 3; top: 20px; left: 22px; padding: 5px 8px; border-radius: 6px; background: #0008; font-size: .7rem; font-weight: 900; }
.feed-caption { position: absolute; z-index: 3; right: 92px; bottom: 44px; left: 28px; display: grid; gap: 6px; text-shadow: 0 2px 10px #000; }.feed-caption strong { font-size: 1rem; }.feed-caption p { max-width: 28ch; font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 800; }.feed-caption small { color: #fffbd4; }
.feed-actions { position: absolute; z-index: 4; right: 20px; bottom: 52px; display: grid; gap: 17px; place-items: center; }.feed-actions button, .feed-actions > span { display: grid; gap: 2px; min-width: 52px; place-items: center; border: 0; color: #fff; background: transparent; text-shadow: 0 2px 10px #000; }.feed-actions b { font-size: 2rem; }.feed-actions span, .feed-actions small { font-size: .68rem; }.feed-actions button.active b { color: #ff4d6d; animation: heart-pop .28s ease; }
@keyframes heart-pop { 50% { transform: scale(1.35); } }
.feed-video-stack.is-preloading .feed-video:not(.preload-video) { transform: translateY(-45%); }.feed-video-stack .preload-video { top: 55%; transform: translateY(100%); background: linear-gradient(160deg, #8cc4db, #526ba1 45%, #30385c); animation: preload-rise .7s .1s cubic-bezier(.22,.75,.18,1) forwards; }.feed-video-stack .preload-video .video-art span { font-size: clamp(6rem, 10vw, 11rem); }
@keyframes preload-rise { to { transform: translateY(0); } }

.science-layer { position: absolute; z-index: 3; inset: 0 0 0 48%; display: grid; place-items: center; padding: clamp(24px, 4vw, 70px); pointer-events: none; }
.science-layer button { pointer-events: auto; }
.feed-question { position: absolute; z-index: 5; right: clamp(28px, 4vw, 72px); bottom: clamp(64px, 8vh, 96px); width: min(44%, 760px); pointer-events: none; text-shadow: 0 3px 20px #000; }
.feed-question > span { color: #65e8ff; font-size: .77rem; font-weight: 950; letter-spacing: .12em; }.feed-question h1 { max-width: 18ch; margin-top: 10px; font-size: clamp(2rem, 3.25vw, 4.15rem); line-height: 1.05; letter-spacing: -.05em; }
.keyword-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }.keyword-row b { padding: 7px 11px; border: 1px solid #ffffff40; border-radius: 99px; background: #070a0dbb; font-size: clamp(.76rem, .9vw, .92rem); backdrop-filter: blur(12px); }
.feed-progress { position: absolute; z-index: 10; top: 9px; right: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: #05070a88; backdrop-filter: blur(10px); }.feed-progress button { display: grid; width: 29px; height: 26px; place-items: center; border: 0; border-radius: 99px; background: transparent; }.feed-progress button i { width: 19px; height: 4px; border-radius: 99px; background: #ffffff32; transition: width .2s ease, background .2s ease; }.feed-progress button.visited i { background: #ffffff8f; }.feed-progress button.current i { width: 25px; background: #fff; box-shadow: 0 0 10px #fff8; }.feed-progress button:hover i, .feed-progress button:focus-visible i { background: #67e6ff; }
.swipe-cue { position: absolute; z-index: 7; bottom: 18px; left: 76%; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: #cbd3dc; font-size: .75rem; }.swipe-cue i { font-size: 1.25rem; font-style: normal; animation: feed-swipe-cue 1.5s ease-in-out infinite; }.swipe-cue.is-last { color: #8e9aa7; }.swipe-cue.is-last i { display: none; }
@keyframes feed-swipe-cue { 50% { transform: translateY(-8px); color: #fff; } }
.intro-gesture { display: grid; place-items: center; gap: 7px; color: #fff; text-align: center; }.intro-gesture span { display: grid; width: 88px; height: 88px; place-items: center; border: 2px solid #ffffff77; border-radius: 50%; background: #ffffff10; font-size: 3.2rem; animation: feed-swipe-cue 1.5s ease-in-out infinite; }.intro-gesture strong { font-size: 1.25rem; }.intro-gesture small { color: #aeb8c5; }

.recommendation-live { display: grid; width: min(540px, 90%); gap: 12px; transform: translateY(-76px); }.recommendation-live .candidate { display: grid; grid-template-columns: 42px minmax(120px, .65fr) 1fr 38px; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #ffffff22; opacity: 0; animation: candidate-sort .48s ease forwards; }.recommendation-live .candidate-1 { order: 1; animation-delay: .28s; }.recommendation-live .candidate-2 { order: 2; animation-delay: .4s; }.recommendation-live .candidate-3 { order: 3; animation-delay: .52s; }.recommendation-live .candidate > span { font-size: 1.7rem; }.recommendation-live .candidate i { height: 7px; overflow: hidden; border-radius: 99px; background: #ffffff18; }.recommendation-live .candidate i::after { display: block; width: var(--score); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fe3ff, #6ff0ab); content: ""; }.recommendation-live em { color: #80e8c1; font-style: normal; font-weight: 900; }.recommendation-live small { order: 4; color: #bac8d3; text-align: center; }
@keyframes candidate-sort { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.behavior-ripples { position: relative; width: min(560px, 90%); height: 310px; transform: translateY(-65px); }.behavior-ripples > span { position: absolute; display: grid; place-items: center; border: 1px solid #ffffff4d; border-radius: 50%; color: #dfe9f0; background: #131a28cc; opacity: .62; box-shadow: 0 0 0 0 #6fe5bd33; }.behavior-ripples > span.seen { border-color: #70e3b9; color: #fff; background: #164638; opacity: 1; animation: ripple 1.5s ease-out infinite; }.behavior-heart { top: 10px; left: 8%; width: 112px; height: 112px; }.behavior-comment { top: 28px; right: 9%; width: 98px; height: 98px; }.behavior-watch { bottom: 10px; left: 31%; width: 154px; height: 154px; }.behavior-watch i { position: absolute; bottom: 28px; width: 62%; height: 5px; overflow: hidden; border-radius: 99px; background: #ffffff1f; }.behavior-watch i::after { display: block; width: 72%; height: 100%; background: #65e9b4; content: ""; animation: watch-grow 3.5s linear infinite; }.behavior-swipe { right: 3%; bottom: 4px; width: 90px; height: 90px; }
@keyframes ripple { to { box-shadow: 0 0 0 22px transparent; } } @keyframes watch-grow { from { width: 0; } }
.quality-live { display: grid; width: min(540px, 90%); gap: 18px; transform: translateY(-70px); }.quality-live > strong { font-size: clamp(1.5rem, 2.2vw, 2.5rem); }.quality-live > div { display: flex; gap: 10px; }.quality-live button { padding: 10px 16px; border: 1px solid #ffffff36; border-radius: 99px; color: #cfd8e5; background: #101521; }.quality-live button.active { border-color: #71e6ff; color: #071116; background: #71e6ff; }.quality-live small { color: #b3c0ce; }

.network-reveal { position: relative; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; width: min(680px, 100%); height: 330px; border: 0; color: #edf7ff; background: transparent; transform: translateY(-70px); }.network-phone, .network-server { position: relative; z-index: 3; display: grid; min-height: 100px; place-content: center; gap: 5px; border: 2px solid #65dff8; border-radius: 20px; background: #102839; }.network-phone small, .network-server small { color: #83aabd; }.simple-link { position: relative; display: grid; place-items: center; }.simple-link i { width: 100%; height: 3px; background: #65ddb5; }.simple-link b { position: absolute; top: 18px; color: #9cb7c6; font-size: .75rem; }.network-mesh { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }.network-reveal.expanded .simple-link { opacity: 0; }.network-reveal.expanded .network-mesh { opacity: 1; }.network-mesh .node { position: absolute; display: grid; width: 68px; height: 48px; place-items: center; border: 1px solid #5f8fa8; border-radius: 10px; color: #bcd0dc; background: #132b3d; font-size: .66rem; font-style: normal; }.node-1 { top: 28px; left: 31%; }.node-2 { top: 145px; left: 27%; }.node-3 { top: 236px; left: 40%; }.node-4 { top: 66px; right: 31%; }.node-5 { top: 180px; right: 26%; }.node-6 { top: 118px; left: 47%; }.node-7 { bottom: 24px; right: 39%; }.network-mesh::before, .network-mesh::after { position: absolute; inset: 45px 115px; background: linear-gradient(25deg, transparent 48%, #4b7f9466 49% 50%, transparent 51%), linear-gradient(-22deg, transparent 48%, #4b7f9466 49% 50%, transparent 51%), linear-gradient(90deg, transparent 49%, #4b7f9466 50%, transparent 51%); content: ""; }.route-packet { position: absolute; top: 48%; left: 18%; width: 13px; height: 13px; border-radius: 50%; background: #72efb8; box-shadow: 0 0 18px #72efb8; animation: route-travel 2.3s ease-in-out infinite; }
@keyframes route-travel { 50% { top: 20%; left: 58%; } to { top: 48%; left: 81%; } }

.security-live { display: grid; grid-template-columns: 1fr 140px; width: min(620px, 100%); gap: 28px; align-items: center; transform: translateY(-68px); }.travelling-message { display: grid; gap: 10px; }.travelling-message span { color: #9cb4c6; }.travelling-message code { padding: 18px; border: 1px solid #d2767f; border-radius: 12px; color: #ffd2d4; background: #351a23; font-size: 1rem; }.security-live.is-encrypted .travelling-message code { border-color: #5bd3a2; color: #85edc0; background: #0f312a; }.snooper { display: grid; place-items: center; gap: 4px; text-align: center; }.snooper > span { font-size: 4.4rem; }.snooper small { color: #aebeca; }.feed-encryption-switch { grid-column: 1 / -1; display: flex; align-items: center; justify-self: center; gap: 11px; border: 0; color: #dce7ed; background: transparent; }.feed-encryption-switch i { position: relative; width: 64px; height: 34px; border-radius: 99px; background: #88424c; }.feed-encryption-switch i::after { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; content: ""; transition: transform .25s ease; }.feed-encryption-switch.on i { background: #43af86; }.feed-encryption-switch.on i::after { transform: translateX(30px); }
.impact-live { display: grid; grid-template-columns: 1fr max-content 1fr; width: min(670px, 100%); align-items: center; gap: 18px; transform: translateY(-70px); }.impact-live > div { display: grid; gap: 8px; text-align: center; }.impact-live > div span { font-size: 3.4rem; }.impact-live > div strong { font-size: 1.1rem; }.impact-live > div small { color: #b8c4d0; line-height: 1.5; }.impact-live > b { color: #69e4ff; font-size: .78rem; writing-mode: vertical-rl; }
.swipe-universe { position: relative; width: min(610px, 90%); aspect-ratio: 1.65; transform: translateY(-64px); }.swipe-universe > strong { position: absolute; top: 50%; left: 50%; display: grid; width: 135px; height: 135px; place-items: center; transform: translate(-50%, -50%); border: 2px solid #70e7ff; border-radius: 50%; background: #122b43; box-shadow: 0 0 60px #55d9ff55; }.swipe-universe span { --angle: calc(var(--i) * 60deg); position: absolute; top: calc(50% + sin(var(--angle)) * 42%); left: calc(50% + cos(var(--angle)) * 42%); transform: translate(-50%, -50%); padding: 9px 12px; border-radius: 99px; background: #ffffff10; white-space: nowrap; }

@media (max-width: 1300px) {
  .feed-video-stack { right: 55%; }.science-layer { left: 45%; padding: 22px 34px; }.feed-question { width: 46%; right: 28px; }.feed-question h1 { font-size: clamp(1.8rem, 3.1vw, 3.2rem); }.recommendation-live, .behavior-ripples, .quality-live, .network-reveal, .security-live, .impact-live, .swipe-universe { transform: translateY(-52px) scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .video-art span, .swipe-cue i, .intro-gesture span, .candidate, .behavior-ripples > span, .behavior-watch i::after, .route-packet, .feed-video-stack .preload-video { animation: none !important; }
  .feed-video-stack .preload-video { transform: translateY(0); }
}

/* Phone-scoped feed: the video moves inside the device; classroom thinking advances only after the snap. */
.immersive-classroom { display: grid; grid-template-columns: minmax(340px, 42%) minmax(0, 58%); overflow: hidden; background: radial-gradient(circle at 28% 45%, #203047, #080b11 48%); }
.phone-stage { position: relative; z-index: 2; display: grid; min-height: 0; place-items: center; padding: 18px 20px 46px; border-right: 1px solid #29313c; background: radial-gradient(circle at 50% 42%, #24384e, #0a0e15 66%); }
.phone-device { position: relative; height: min(78vh, 790px); max-height: calc(100% - 12px); aspect-ratio: 9 / 16; padding: 9px; border: 3px solid #66717c; border-radius: clamp(32px, 3vw, 48px); background: #050607; box-shadow: 0 34px 90px #000c, inset 0 0 0 2px #151a20; }
.phone-hardware { position: absolute; z-index: 20; top: 15px; left: 50%; width: 31%; height: 23px; transform: translateX(-50%); border-radius: 99px; background: #050607; box-shadow: 0 1px 0 #252b32; pointer-events: none; }.phone-hardware i { position: absolute; top: 8px; right: 15px; width: 7px; height: 7px; border-radius: 50%; background: #172a3d; box-shadow: inset 0 0 3px #4b7598; }
.phone-feed { position: absolute; inset: 9px; overflow: hidden; border-radius: calc(clamp(32px, 3vw, 48px) - 10px); background: #050607; touch-action: none; user-select: none; cursor: grab; }
.phone-feed:active { cursor: grabbing; }.phone-feed:focus-visible { outline: 3px solid #75e5ff; outline-offset: 4px; }
.phone-feed .feed-track { inset: 0; }.phone-feed.is-settling.settle-next .feed-track { transform: translateY(-100%); }.phone-feed.is-settling.settle-previous .feed-track { transform: translateY(100%); }
.phone-feed.is-dragging .feed-track { transform: translateY(var(--drag-y, 0)); transition: none; }
.phone-feed .feed-current, .phone-feed .feed-neighbor { background: #050607; }
.phone-feed .feed-video-stack { inset: 0; overflow: hidden; box-shadow: none; }
.phone-feed .feed-video { border-radius: 0; }.phone-feed .video-art span { font-size: clamp(6rem, 10vw, 11rem); }.phone-feed .feed-caption { right: 66px; bottom: 35px; left: 18px; }.phone-feed .feed-caption p { font-size: clamp(.82rem, 1vw, 1.05rem); }.phone-feed .feed-caption small { font-size: .68rem; }.phone-feed .feed-actions { right: 9px; bottom: 38px; gap: 13px; }.phone-feed .feed-actions button, .phone-feed .feed-actions > span { min-width: 44px; }.phone-feed .feed-actions b { font-size: 1.65rem; }.phone-feed .feed-quality { top: 54px; left: 14px; }.phone-feed .feed-tabs { top: 48px; }
.phone-swipe-guide { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #aebbc7; font-size: .76rem; }.phone-swipe-guide i { color: #7fe9ff; font-size: 1.2rem; font-style: normal; animation: feed-swipe-cue 1.5s ease-in-out infinite; }.phone-swipe-guide.is-last i { animation: none; }

.classroom-side { position: relative; display: grid; grid-template-rows: minmax(280px, 55%) minmax(0, 45%); min-width: 0; min-height: 0; overflow: hidden; padding: clamp(26px, 3.2vw, 58px); background: radial-gradient(circle at 55% 28%, #1b2940, #090c12 58%); transition: background .4s ease; }
.classroom-side.scene-recommendation { background: radial-gradient(circle at 55% 28%, #3d2935, #0c0b10 60%); }.classroom-side.scene-behavior { background: radial-gradient(circle at 55% 28%, #3b3021, #0d0c10 60%); }.classroom-side.scene-compression { background: radial-gradient(circle at 55% 28%, #29264a, #0a0b13 60%); }.classroom-side.scene-preload { background: radial-gradient(circle at 55% 28%, #193b3a, #080e12 60%); }.classroom-side.scene-security { background: radial-gradient(circle at 55% 28%, #1d3055, #090c15 60%); }.classroom-side.scene-impact { background: radial-gradient(circle at 55% 28%, #41243f, #0e0a13 60%); }
.classroom-visual { position: relative; display: grid; min-height: 0; place-items: center; padding-top: 22px; pointer-events: none; }.classroom-visual button { pointer-events: auto; }.classroom-visual > * { max-width: 100%; transform: none; }
.classroom-copy { position: relative; z-index: 3; display: grid; align-content: end; gap: 10px; max-width: 880px; padding: 10px 0 8px; text-shadow: 0 3px 20px #000; }.classroom-copy > span { color: #65e8ff; font-size: .76rem; font-weight: 950; letter-spacing: .12em; }.classroom-copy h1 { max-width: 18ch; font-size: clamp(2rem, 3.05vw, 4rem); line-height: 1.04; letter-spacing: -.05em; }.classroom-copy > p { max-width: 57ch; color: #b9c6d1; font-size: clamp(.88rem, 1.05vw, 1.06rem); line-height: 1.5; }.classroom-copy .keyword-row { margin-top: 5px; }
.classroom-side .feed-progress { top: 13px; right: 15px; }

@media (max-width: 1300px) {
  .immersive-classroom { grid-template-columns: minmax(310px, 40%) minmax(0, 60%); }
  .phone-device { height: min(76vh, 650px); }
  .classroom-side { grid-template-rows: minmax(245px, 52%) minmax(0, 48%); padding: 24px 30px; }
  .classroom-copy h1 { font-size: clamp(1.75rem, 2.8vw, 3rem); }
  .classroom-visual .recommendation-live, .classroom-visual .behavior-ripples, .classroom-visual .quality-live, .classroom-visual .network-reveal, .classroom-visual .security-live, .classroom-visual .impact-live, .classroom-visual .swipe-universe { transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-swipe-guide i { animation: none; }
  .phone-feed .feed-track { transition-duration: .01ms; }
}

/* CL-01 course opening: three full-classroom scenes before the phone experience begins. */
.opening-shell { background: #07090e; }
.cl01-opening-canvas { position: relative; min-height: 0; overflow: hidden; border-color: #29313c; border-radius: 16px; background: #0c1018; }
.cl01-opening-canvas .feed-progress { top: 14px; right: 16px; }
.opening-step-controls { display: grid; grid-template-columns: repeat(2, 154px); }
.opening-title { display: grid; text-align: center; }
.opening-title h1 { font-size: clamp(2.65rem, 4.5vw, 5.6rem); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.opening-title h1 em { color: #d9912f; font-style: normal; font-weight: 950; }
.opening-title.compact { text-align: left; }
.opening-title.compact h1 { font-size: clamp(2.05rem, 3.1vw, 3.8rem); }

.course-title-opening { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding-bottom: 5vh; text-align: center; background: radial-gradient(circle at 50% 43%, #263b68 0, #111829 38%, #080b12 70%); }
.course-title-opening::before, .course-title-opening::after { position: absolute; width: min(34vw, 560px); height: min(34vw, 560px); border: 1px solid #74dff52b; border-radius: 50%; content: ""; }
.course-title-opening::after { width: min(22vw, 360px); height: min(22vw, 360px); border-color: #f2cb6730; }
.course-title-mark { z-index: 1; display: grid; width: 72px; height: 72px; place-items: center; margin-bottom: 25px; border: 1px solid #f4c85c; border-radius: 22px; color: #211606; background: #e3ac38; font-size: 1.7rem; font-weight: 950; box-shadow: 0 18px 55px #d18b2844; }
.course-title-opening h1 { z-index: 1; display: grid; max-width: 15ch; gap: clamp(8px, 1.2vh, 18px); font-size: clamp(3.4rem, 7vw, 8.8rem); line-height: .92; letter-spacing: -.075em; }.course-title-opening h1 span, .course-title-opening h1 em { display: block; }.course-title-opening h1 em { color: #d9912f; font-style: normal; }
.course-title-opening p { z-index: 1; margin-top: 23px; color: #d2dde6; font-size: clamp(1.3rem, 2vw, 2.25rem); font-weight: 800; letter-spacing: .2em; }.course-title-opening p em { color: #d9912f; font-style: normal; font-weight: 950; }
.course-title-opening > i { z-index: 1; width: 160px; height: 4px; margin-top: 30px; border-radius: 99px; background: linear-gradient(90deg, #b87021, #f3ce67); }

.principles-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr); gap: clamp(12px, 1.6vh, 20px); padding: clamp(30px, 3.5vh, 46px) clamp(48px, 6vw, 112px) 82px; background: radial-gradient(circle at 50% 45%, #173443, #0a1118 62%); }
.principles-structure { align-self: center; justify-self: center; width: min(920px, 88%); }
.reasonable-freedom { position: relative; display: grid; min-height: 235px; place-items: center; width: min(700px, 84%); margin: 0 auto 12px; overflow: hidden; border: 1px solid #86c7d9; border-radius: 38px 38px 12px 12px; background: linear-gradient(180deg, #48a8df 0 49%, #bfe7f3 50% 58%, #2d91b9 59% 100%); box-shadow: 0 18px 55px #0005; }
.reasonable-freedom > div { z-index: 5; display: grid; justify-items: center; gap: 4px; padding: 12px 32px; border-radius: 99px; background: #0b2631d9; box-shadow: 0 10px 30px #07141e66; backdrop-filter: blur(8px); }.reasonable-freedom strong { font-size: clamp(1.55rem, 2.15vw, 2.45rem); }.reasonable-freedom small { color: #e3af43; font-size: 1rem; font-weight: 850; }.freedom-sun { position: absolute; z-index: 1; top: 15px; right: 12%; width: 42px; height: 42px; border-radius: 50%; background: #ffd263; box-shadow: 0 0 30px #ffd263aa; }.freedom-cloud { position: absolute; z-index: 2; width: 72px; height: 20px; border-radius: 99px; background: #fffddfdd; box-shadow: 20px -10px 0 -2px #fffddfdd, 42px 0 0 -6px #fffddfdd; }.cloud-one { top: 29px; left: 10%; }.cloud-two { top: 48px; right: 31%; transform: scale(.72); opacity: .8; }.freedom-grass { position: absolute; z-index: 3; bottom: 0; left: -4%; width: 52%; height: 59px; border-radius: 0 100% 0 0; background: linear-gradient(165deg, #78b84d, #347b40 68%); box-shadow: inset 0 7px #a9d65b; }.freedom-sea { position: absolute; z-index: 2; right: -3%; bottom: -15px; width: 72%; height: 76px; border-radius: 55% 0 0; background: repeating-radial-gradient(ellipse at 50% 0, #55b8d4 0 8px, #328cab 9px 15px); opacity: .95; }
.classroom-bottom-line { display: flex; align-items: center; justify-content: center; gap: 14px; height: 44px; border-top: 4px solid #ff5858; border-bottom: 1px solid #ff585877; color: #ff8989; background: #3a1518; font-size: .72rem; font-weight: 950; letter-spacing: .15em; box-shadow: 0 0 24px #ff343422; }.classroom-bottom-line b { color: #ffe1e1; font-size: .92rem; letter-spacing: .12em; }
.classroom-foundations { display: grid; width: min(700px, 84%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px auto 0; }
.classroom-foundations article:nth-child(1) { grid-column: 1; grid-row: 1; }
.classroom-foundations article:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.classroom-foundations article:nth-child(3) { grid-column: 2; grid-row: 1; }
.classroom-foundations article { display: grid; min-height: 44px; align-items: center; padding: 5px 18px; border: 1px solid #354552; border-radius: 12px; color: #a9bac5; background: #101820; box-shadow: inset 0 -3px #091016; }.classroom-foundations article div { display: grid; justify-items: center; gap: 1px; }.classroom-foundations strong { font-size: .88rem; }.classroom-foundations small { color: #758994; font-size: .72rem; }
.classroom-consensus { --consensus-scale: 1; position: absolute; z-index: 7; top: 126px; left: 12px; display: flex; width: clamp(240px, 20vw, 300px); align-items: flex-start; gap: calc(11px * var(--consensus-scale)); padding: calc(16px * var(--consensus-scale)) calc(15px * var(--consensus-scale)); touch-action: none; cursor: grab; user-select: none; transform: rotate(-1.8deg); border: 1px solid #dba53d; border-radius: calc(14px * var(--consensus-scale)); color: #2a1c06; background: linear-gradient(135deg, #e0a935, #f0ca64); box-shadow: 0 16px 45px #0006, 7px 7px 0 #8a5c1f; }.classroom-consensus:is(.is-moving, .is-resizing) { cursor: grabbing; box-shadow: 0 22px 60px #0008, 7px 7px 0 #8a5c1f; }.classroom-consensus:focus-visible { outline: 4px solid #75e4f5; outline-offset: 5px; }.classroom-consensus::before { position: absolute; top: -9px; left: 34px; width: calc(72px * var(--consensus-scale)); height: calc(19px * var(--consensus-scale)); transform: rotate(2deg); background: #f6e1a8aa; content: ""; }.classroom-consensus > span { display: grid; width: calc(32px * var(--consensus-scale)); height: calc(32px * var(--consensus-scale)); flex: 0 0 calc(32px * var(--consensus-scale)); place-items: center; border-radius: 9px; color: #f6d67b; background: #3a2708; font-size: calc(1.08rem * var(--consensus-scale)); }.classroom-consensus p { display: grid; gap: calc(8px * var(--consensus-scale)); text-align: left; }.classroom-consensus strong { font-size: calc(clamp(.82rem, .88vw, .96rem) * var(--consensus-scale)); line-height: 1.24; }.classroom-consensus small { display: block; padding-top: calc(7px * var(--consensus-scale)); border-top: 1px solid #7b551b55; color: #5e4313; font-size: calc(clamp(.76rem, .8vw, .86rem) * var(--consensus-scale)); font-weight: 850; line-height: 1.28; }
.consensus-resize-handle { position: absolute; right: 5px; bottom: 4px; display: grid; width: calc(25px * var(--consensus-scale)); height: calc(25px * var(--consensus-scale)); place-items: center; padding: 0; border: 0; border-radius: 8px; color: #f6d67b; background: #3a2708dd; font-size: calc(.8rem * var(--consensus-scale)); line-height: 1; cursor: nwse-resize; opacity: .88; }.consensus-resize-handle:hover, .consensus-resize-handle:focus-visible { opacity: 1; outline: 3px solid #75e4f5; outline-offset: 2px; }

.teacher-journey-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr); gap: 12px; padding: 34px clamp(40px, 5vw, 88px) 82px; background: radial-gradient(circle at 68% 36%, #172d47, #090e17 67%); }
.teacher-map-frame { position: relative; min-height: 0; overflow: hidden; border: 1px solid #324b60; border-radius: 24px; background: linear-gradient(160deg, #0d1b29, #09131e); box-shadow: inset 0 1px #ffffff09, 0 26px 80px #0006; }
.teacher-world-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-grid circle { fill: #6f8fa11c; }.world-land { opacity: .9; }.map-focus-halo { fill: #70dff414; stroke: #70dff466; stroke-width: 2; filter: drop-shadow(0 0 18px #70dff466); animation: map-focus-arrive .55s ease-out both; }
.journey-route { fill: none; stroke: #e2ad3e; stroke-width: 4.5; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 0 8px #d8923277); }.journey-route-group.is-complete .journey-route { stroke: #a9823b; opacity: .64; }.journey-route-group.is-active-route .journey-route { animation: journey-route-glow 1.35s ease-in-out infinite alternate; }.journey-route-traveler { fill: #fff0b2; stroke: #dfaa3b; stroke-width: 3; filter: drop-shadow(0 0 12px #ffd66b); }
@keyframes journey-route-glow { from { stroke-width: 4.5; opacity: .76; } to { stroke-width: 6.5; opacity: 1; } }
@keyframes map-focus-arrive { from { r: 20; opacity: 0; } }
.journey-city circle:first-of-type { fill: #8097a5; stroke: #dce8ef; stroke-width: 2; }.journey-city .city-pulse { fill: none; stroke: transparent; }.journey-city text { opacity: 0; fill: #aebfca; font-size: 16px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #09131e; stroke-width: 4px; }.city-label-leader { opacity: 0; stroke: #c5d8e2; stroke-width: 1.5; stroke-dasharray: 3 3; }.journey-city.is-visited circle:first-of-type { fill: #d9a73f; stroke: #f7dd91; }.journey-city.is-active circle:first-of-type { fill: #70dff4; stroke: #e8fcff; filter: drop-shadow(0 0 10px #70dff4); }.journey-city.is-active .city-pulse { stroke: #70dff4; animation: city-pulse 1.7s ease-out infinite; }.journey-city.is-active :is(text, .city-label-leader) { opacity: 1; }.journey-city.is-active text { fill: #fff; font-size: 19px; }
@keyframes city-pulse { to { r: 34; opacity: 0; } }
.journey-story-card { position: absolute; z-index: 4; display: grid; width: min(390px, 34%); gap: 8px; padding: 20px 22px; border: 1px solid #8b7040; border-radius: 18px; background: #0b1722f2; box-shadow: 0 22px 60px #0007; backdrop-filter: blur(14px); animation: journey-card-enter .45s ease-out both; }.teacher-journey-opening.stage-0 .journey-story-card { top: 31%; left: 38%; }.teacher-journey-opening.stage-1 .journey-story-card { top: 14%; left: 39%; }.teacher-journey-opening.stage-2 .journey-story-card { top: 27%; left: 55%; }.teacher-journey-opening.stage-3 .journey-story-card { top: 25%; left: 33%; }.journey-story-card > span { color: #e2ad3e; font-size: 1rem; font-weight: 950; letter-spacing: .12em; }.journey-story-card h2 { font-size: clamp(1.7rem, 2.2vw, 2.45rem); line-height: 1; }.journey-story-card p { color: #e2edf2; font-size: clamp(1rem, 1.08vw, 1.18rem); line-height: 1.4; white-space: pre-line; }
@keyframes journey-card-enter { from { transform: translateY(12px); opacity: 0; } }
.journey-timeline { position: absolute; z-index: 5; right: 24px; bottom: 18px; left: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; }.journey-timeline li { position: relative; display: grid; gap: 5px; padding-top: 22px; color: #718997; text-align: center; }.journey-timeline li::before { position: absolute; top: 5px; right: 0; left: 0; height: 3px; background: #324a59; content: ""; }.journey-timeline li::after { position: absolute; top: 0; left: 50%; width: 13px; height: 13px; transform: translateX(-50%); border: 2px solid #607b8c; border-radius: 50%; background: #0c1822; content: ""; }.journey-timeline li.is-visited::before, .journey-timeline li.is-active::before { background: #d6b95f; }.journey-timeline li.is-visited::after { border-color: #f0ca67; background: #f0ca67; }.journey-timeline li.is-active { color: #e8f8fd; }.journey-timeline li.is-active::after { border-color: #79e2f4; background: #79e2f4; box-shadow: 0 0 14px #79e2f4; }.journey-timeline b { font-size: clamp(1rem, 1.06vw, 1.16rem); }.journey-timeline span { font-size: clamp(.94rem, 1vw, 1.08rem); }

.classroom-side.scene-intro { background: radial-gradient(circle at 55% 28%, #263751, #0a0d13 62%); }.classroom-side.scene-intro.reveal-0 .classroom-question h1 { max-width: 16ch; font-size: clamp(2.7rem, 4.2vw, 5.4rem); }.classroom-side.scene-intro .behavior-question-aside { max-width: 28ch; color: #b8c6d0; font-size: clamp(1rem, 1.3vw, 1.35rem); font-weight: 700; letter-spacing: 0; line-height: 1.45; }

@media (max-width: 1300px) {
  .principles-opening { padding: 30px 40px 76px; gap: 10px; }.reasonable-freedom { min-height: 230px; margin-top: 0; margin-bottom: 10px; }.classroom-foundations article { min-height: 44px; }.classroom-consensus { top: 118px; width: 246px; padding: 15px 13px; }
  .teacher-journey-opening { padding: 28px 32px 74px; }.journey-story-card { width: 34%; gap: 6px; padding: 12px 18px; }.journey-timeline { right: 15px; bottom: 12px; left: 15px; }
  .opening-step-controls { bottom: 20px; right: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-route-group.is-active-route .journey-route, .journey-city.is-active .city-pulse, .journey-story-card { animation: none !important; }
  .journey-route-traveler { display: none; }
}

/* Teacher-paced progressive disclosure on the classroom side. */
.classroom-side { display: block; }
.classroom-focus { display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content max-content; width: 100%; height: 100%; gap: clamp(12px, 1.6vh, 20px); padding-top: 26px; }
.classroom-question { display: grid; gap: 8px; transition: transform .35s ease; }.classroom-question > span { color: #65e8ff; font-size: .74rem; font-weight: 950; letter-spacing: .12em; }.classroom-question h1 { max-width: 19ch; font-size: clamp(1.8rem, 2.65vw, 3.45rem); line-height: 1.05; letter-spacing: -.048em; }
.classroom-side.reveal-0 .classroom-focus { grid-template-rows: auto auto; align-content: center; justify-items: start; gap: 28px; }.classroom-side.reveal-0 .classroom-question h1 { max-width: 17ch; font-size: clamp(2.5rem, 4.25vw, 5.6rem); }.classroom-side.reveal-0 .classroom-question > span { font-size: .8rem; }
.classroom-visual { padding: 0; }.classroom-visual > * { transform: none !important; }
.classroom-note { max-width: 58ch; padding-left: 13px; border-left: 3px solid #6fe6bb; color: #b9c6d1; font-size: clamp(.84rem, 1vw, 1rem); line-height: 1.5; }
.classroom-reveal-button { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: min(330px, 100%); padding: 14px 16px 14px 19px; border: 1px solid #4c6c82; border-radius: 13px; color: #e9f7fd; background: #122334cc; font-weight: 850; text-align: left; box-shadow: 0 14px 40px #0004; }.classroom-reveal-button:hover { border-color: #6fe5ff; background: #173348; }.classroom-reveal-button i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #07151d; background: #6fe5ff; font-size: 1.25rem; font-style: normal; }.classroom-side.reveal-0 .classroom-reveal-button { justify-self: start; }
.swipe-path-simple { display: grid; grid-template-columns: 110px 1fr 110px; width: min(540px, 94%); align-items: center; gap: 16px; }.swipe-path-simple span { display: grid; min-height: 96px; place-items: center; border: 2px solid #67def7; border-radius: 20px; background: #102b3d; font-weight: 900; }.swipe-path-simple b { position: relative; color: #8fb1c1; text-align: center; }.swipe-path-simple b::after { display: block; height: 3px; margin-top: 12px; background: linear-gradient(90deg, #62e1b4, #6fdfff); content: ""; }
.candidate-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(620px, 96%); gap: 12px; }.candidate-fan span { display: grid; min-height: 120px; place-items: center; border: 1px solid #52687a; border-radius: 18px; background: #121c28; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 850; }.candidate-fan span:nth-child(2) { transform: translateY(18px); }.candidate-fan small { grid-column: 1 / -1; margin-top: 15px; color: #a9bac6; text-align: center; }
.client-server-simple { display: grid; grid-template-columns: 150px minmax(150px, 1fr) 150px; width: min(680px, 100%); align-items: center; gap: 18px; }.client-server-simple span { display: grid; min-height: 120px; place-content: center; gap: 5px; border: 2px solid #64dcf5; border-radius: 20px; background: #102a3d; text-align: center; font-weight: 900; }.client-server-simple small { color: #81aabb; font-weight: 700; }.client-server-simple i { position: relative; height: 3px; background: #69e4b8; }.client-server-simple i::after { position: absolute; top: 50%; right: -2px; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); border-top: 3px solid #69e4b8; border-right: 3px solid #69e4b8; content: ""; }
.classroom-side .network-reveal { height: 280px; transform: none; }

@media (max-width: 1300px) {
  .classroom-focus { padding-top: 22px; }.classroom-side.reveal-0 .classroom-question h1 { font-size: clamp(2.15rem, 3.8vw, 4rem); }.classroom-question h1 { font-size: clamp(1.55rem, 2.4vw, 2.65rem); }
  .candidate-fan span { min-height: 92px; }.client-server-simple span { min-height: 94px; }.classroom-side .network-reveal { height: 240px; }
}

/* Recommendation reveal: question first, named concept and black-box model only after discussion. */
.classroom-question.is-concept { gap: 4px; }
.classroom-question.is-concept h1 { max-width: none; color: #76e7ff; font-size: clamp(2rem, 3.15vw, 4rem); letter-spacing: -.035em; }
.concept-title-row { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }.concept-title-row h1 { flex: 0 0 auto; }.algorithm-joke { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; transform: rotate(-2deg); border: 2px solid #ffd36f; border-radius: 9px 16px 10px 15px; color: #241200; background: linear-gradient(135deg, #ffe07a, #ff9c3f); box-shadow: 5px 6px 0 #7b321f, 0 0 34px #ffad4f55; font-size: clamp(1.08rem, 1.48vw, 1.4rem); font-weight: 950; letter-spacing: .015em; white-space: nowrap; animation: algorithm-joke-pop .5s .2s cubic-bezier(.2, 1.45, .45, 1) both, algorithm-joke-shake .5s .78s ease-in-out 2; }.algorithm-joke b { display: inline-block; font-size: 1.22em; line-height: 1; }
.algorithm-joke.is-hidden { visibility: hidden; }
.recommendation-explainer { display: grid; max-width: 70ch; gap: 5px; margin-top: 6px; line-height: 1.42; }
.recommendation-explainer p { margin: 0; }
.recommendation-explainer p { color: var(--course-text-white, #f4f7fa); font-size: clamp(1rem, 1.08vw, 1.16rem); font-weight: 650; }
.concept-points { width: min(720px, 100%); margin-top: 14px; }
.concept-points ul { display: grid; gap: 11px; margin: 0; padding: 0 0 0 23px; }
.concept-points li { color: var(--course-text-white, #f4f7fa); font-size: clamp(1.18rem, 1.28vw, 1.42rem); font-weight: 680; line-height: 1.34; }
.launch-body-points { display: grid; gap: 7px; max-width: 62ch; margin: 14px 0 0; padding-left: 22px; color: #c4d2da; }
.launch-body-points li { font-size: clamp(.88rem, 1vw, 1.08rem); font-weight: 650; line-height: 1.35; }
.compression-concept-subtitle { display: flex; align-items: baseline; gap: 12px; margin-top: 1px; }
.compression-concept-subtitle strong { color: #d7c9ff; font-size: clamp(1.15rem, 1.2vw, 1.32rem); letter-spacing: .015em; }
.compression-concept-subtitle span { color: #a49dbd; font-size: clamp(1.05rem, 1.08vw, 1.16rem); font-weight: 750; letter-spacing: .05em; }
.classroom-reveal-button.icon-only { position: absolute; right: clamp(24px, 3vw, 52px); bottom: clamp(24px, 3vw, 48px); min-width: 0; width: 52px; height: 52px; justify-content: center; padding: 0; border-radius: 50%; background: #111b26aa; opacity: .72; }.classroom-reveal-button.icon-only:hover, .classroom-reveal-button.icon-only:focus-visible { opacity: 1; }.classroom-reveal-button.icon-only i { width: 32px; height: 32px; }
.recommendation-step-controls { display: grid; grid-template-columns: repeat(2, 154px); justify-self: end; gap: 10px; }.classroom-step-button { display: flex; width: 154px; height: 46px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 13px; border: 1px solid #558296; border-radius: 12px; color: #eaf7fc; background: #102637e8; font-size: .76rem; font-weight: 900; box-shadow: 0 12px 32px #0004; }.classroom-step-button:hover, .classroom-step-button:focus-visible { border-color: #73e5fb; background: #16384e; }.classroom-step-button i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 50%; color: #06151c; background: #75dff6; font-size: 1rem; font-style: normal; }.classroom-step-button.previous { padding: 8px 13px 8px 10px; border-color: #435d70; color: #bfcfd8; background: #101c27d9; }.classroom-step-button.previous i { color: #d8e7ee; background: #344a59; }
.classroom-step-controls { position: absolute; z-index: 8; right: clamp(30px, 3.2vw, 58px); bottom: clamp(24px, 3.2vw, 58px); }
.classroom-side.scene-recommendation.reveal-0 .classroom-focus { grid-template-rows: minmax(0, 1fr) max-content max-content; align-content: stretch; justify-items: stretch; gap: clamp(12px, 1.6vh, 20px); }.classroom-side.scene-recommendation.reveal-0 .classroom-question { align-self: center; justify-self: start; }.classroom-side.scene-recommendation.reveal-0 .recommendation-step-controls { grid-row: 2; }
.classroom-side:is(.scene-behavior, .scene-compression, .scene-preload, .scene-security, .scene-impact, .scene-wrap).reveal-0 .classroom-focus { grid-template-rows: minmax(0, 1fr) max-content max-content; align-content: stretch; justify-items: stretch; gap: clamp(12px, 1.6vh, 20px); }.classroom-side:is(.scene-behavior, .scene-compression, .scene-preload, .scene-security, .scene-impact, .scene-wrap).reveal-0 .classroom-question { align-self: center; justify-self: start; }.classroom-side:is(.scene-behavior, .scene-compression, .scene-preload, .scene-security, .scene-impact, .scene-wrap).reveal-0 .classroom-step-controls { grid-row: 2; }
.classroom-side:is(.scene-behavior, .scene-compression, .scene-preload, .scene-security, .scene-impact, .scene-wrap).reveal-0 .classroom-question h1 { max-width: 16ch; }
.classroom-side.reveal-0 .classroom-question > .behavior-question-aside { margin-top: 8px; color: #c8a86b; font-size: clamp(.9rem, 1.2vw, 1.2rem); font-weight: 800; letter-spacing: .02em; }
.profile-strip { display: grid; width: min(760px, 100%); align-items: center; padding: 11px 14px; border: 1px solid #3f5667; border-radius: 13px; background: #0d1722; transition: border-color .4s ease, background .4s ease, box-shadow .4s ease; }.profile-strip > strong { color: #e5f5fb; font-size: .9rem; }
.classroom-side.profile-theme-a { background: radial-gradient(circle at 62% 24%, #344a62 0, #17212d 42%, #090d13 76%); }.classroom-side.profile-theme-a .profile-strip { border-color: #587998; background: linear-gradient(100deg, #1a2c3e, #101923); box-shadow: inset 4px 0 #7d9bb3, 0 14px 34px #0005; }.classroom-side.profile-theme-a .candidate-cloud span { border-color: #526d87; background: linear-gradient(145deg, #172536, #101822); }.classroom-side.profile-theme-a .algorithm-black-box { border-color: #67839b; box-shadow: inset 0 0 34px #55bce018, 0 18px 45px #0008; }
.classroom-side.profile-theme-b { background: radial-gradient(circle at 62% 24%, #62485d 0, #2a1c29 43%, #0f0b11 76%); }.classroom-side.profile-theme-b .profile-strip { border-color: #a07191; background: linear-gradient(100deg, #382337, #201722); box-shadow: inset 4px 0 #e7a4c5, 0 14px 34px #0005; }.classroom-side.profile-theme-b .profile-strip > strong { color: #fff0f7; }.classroom-side.profile-theme-b .candidate-cloud span { border-color: #76596f; background: linear-gradient(145deg, #2d202c, #1b151d); }.classroom-side.profile-theme-b .algorithm-black-box { border-color: #946f89; box-shadow: inset 0 0 34px #ef9dca1a, 0 18px 45px #0008; }
.classroom-visual:has(.profile-strip) { align-content: center; gap: 11px; }
.recommendation-machine { display: grid; grid-template-columns: minmax(150px, .9fr) 28px minmax(170px, 1fr) 28px minmax(210px, 1.2fr); width: min(760px, 100%); align-items: center; gap: 8px; }
.recommendation-connector { display: grid; place-items: center; color: var(--course-connector); font-size: 1.45rem; font-style: normal; }
.candidate-cloud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.candidate-cloud span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid #495c6c; border-radius: 13px; background: #111a25; font-size: clamp(1.45rem, 2vw, 2.1rem); }.candidate-cloud small { grid-column: 1 / -1; color: #93a8b8; text-align: center; }
.algorithm-black-box { position: relative; display: grid; min-height: 165px; place-content: center; gap: 8px; padding: 18px; border: 1px solid #577287; border-radius: 18px; background: #05070a; box-shadow: inset 0 0 32px #4edcff12, 0 18px 45px #0007; text-align: center; }.algorithm-black-box > small { color: #78909e; font-size: .62rem; line-height: 1.2; }.algorithm-black-box > strong { color: #72e6ff; font-size: clamp(1rem, 1.35vw, 1.32rem); line-height: 1.16; }.algorithm-black-box > i { position: absolute; top: 50%; right: -25px; transform: translateY(-50%); color: #71e5b7; font-size: 2rem; font-style: normal; }
.algorithm-steps { display: grid; gap: 4px; color: #b9cad4; font-size: .64rem; font-weight: 800; text-align: left; }.algorithm-steps span { display: flex; align-items: center; gap: 6px; }.algorithm-steps b { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border: 1px solid #4b7488; border-radius: 50%; color: #6edff7; font-size: .55rem; }
.algorithm-black-box button { justify-self: center; margin-top: 5px; padding: 8px 12px; border: 1px solid #5ad7f4; border-radius: 9px; color: #07141b; background: #69def8; font-size: .75rem; font-weight: 900; }.algorithm-black-box button:hover { background: #9becff; }.recommendation-machine.is-ranked .algorithm-black-box { animation: algorithm-pulse 1.4s .25s ease both; }.recommendation-machine.is-ranked .algorithm-steps span:first-child { animation: algorithm-processing-step 1.1s .35s ease both; }.recommendation-machine.is-ranked .algorithm-steps span:last-child { animation: algorithm-processing-step 1.1s .85s ease both; }
.ranked-videos { display: grid; gap: 8px; margin: 0; padding: 0; }.ranked-videos li { display: grid; grid-template-columns: 28px 1fr max-content; align-items: center; gap: 8px; min-height: 52px; padding: 9px 11px; border: 1px solid #3d5263; border-radius: 11px; background: #101a25; list-style: none; }.ranked-videos li:first-child { border-color: #5ed2a3; background: #102b27; }.ranked-videos b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #071612; background: #6de2b0; }.ranked-videos span { font-weight: 800; }.ranked-videos em { color: #79dfb5; font-size: .68rem; font-style: normal; }
.ranked-videos.waiting li { border-style: dashed; color: #72808d; background: #0b1118; }.ranked-videos.waiting b { color: #7b8995; background: #202a34; }.ranked-videos.show-result li { opacity: 0; transform: translateX(-34px); animation: ranked-result-in .58s cubic-bezier(.2,.8,.2,1) forwards; }.ranked-videos.show-result li:nth-child(1) { animation-delay: 1.25s; }.ranked-videos.show-result li:nth-child(2) { animation-delay: 1.48s; }.ranked-videos.show-result li:nth-child(3) { animation-delay: 1.71s; }
.recommendation-machine .ranked-videos { grid-template-rows: repeat(6, 35px); height: 235px; gap: 5px; }.recommendation-machine .ranked-videos li { min-height: 0; height: 35px; overflow: hidden; padding: 4px 7px; font-size: .7rem; }.recommendation-machine .ranked-videos li > span { min-width: 0; line-height: 1.05; }.recommendation-machine .ranked-videos li > em { white-space: nowrap; }.recommendation-machine .ranked-videos b { width: 22px; height: 22px; }.recommendation-machine .ranked-videos.show-result li:nth-child(4) { animation-delay: 1.94s; }.recommendation-machine .ranked-videos.show-result li:nth-child(5) { animation-delay: 2.17s; }.recommendation-machine .ranked-videos.show-result li:nth-child(6) { animation-delay: 2.4s; }
.recommendation-machine.is-ranked .candidate-cloud span { animation: candidate-into-box 1.05s ease; }.recommendation-machine.is-ranked .candidate-cloud span:nth-child(2) { animation-delay: .08s; }.recommendation-machine.is-ranked .candidate-cloud span:nth-child(3) { animation-delay: .16s; }.recommendation-machine.is-ranked .candidate-cloud span:nth-child(4) { animation-delay: .24s; }.recommendation-machine.is-ranked .candidate-cloud span:nth-child(5) { animation-delay: .32s; }.recommendation-machine.is-ranked .candidate-cloud span:nth-child(6) { animation-delay: .4s; }
.algorithm-definition-model { --algorithm-row-height: clamp(84px, 10.4vh, 112px); display: grid; grid-template-columns: minmax(150px, 1fr) 42px minmax(190px, 1.25fr) 42px minmax(150px, 1fr); width: min(760px, 100%); align-items: center; gap: 9px; }
.algorithm-definition-node { display: grid; min-height: var(--algorithm-row-height); height: var(--algorithm-row-height); place-content: center; gap: 4px; overflow: hidden; padding: 6px 8px; border: 1px solid #304757; border-radius: 13px; background: linear-gradient(135deg, #0d1722, #121e29); text-align: center; box-shadow: 0 12px 28px #0003; }.algorithm-definition-node small { color: #65e4ff; font-size: clamp(.56rem, .65vw, .66rem); font-weight: 950; letter-spacing: .13em; }.algorithm-definition-node strong { color: #dceaf0; font-size: clamp(.68rem, .76vw, .82rem); line-height: 1.05; }.algorithm-definition-arrow { color: #6fe3b5; font-size: 1.35rem; text-align: center; }.steps-node { border-color: #49687a; background: linear-gradient(135deg, #10202b, #142733); }
.algorithm-payload { display: flex; justify-content: center; gap: 6px; }.algorithm-payload i { width: clamp(17px, 1.15vw, 22px); height: clamp(17px, 1.15vw, 22px); border: 2px solid #72dff6; border-radius: 4px; background: #72dff622; }
.algorithm-step-sequence { display: flex; align-items: center; justify-content: center; gap: 6px; }.algorithm-step-sequence i { display: grid; width: clamp(23px, 1.5vw, 29px); height: clamp(23px, 1.5vw, 29px); place-items: center; border-radius: 50%; color: #061711; background: #68dfb0; font-size: clamp(.58rem, .65vw, .72rem); font-style: normal; font-weight: 950; }.algorithm-output-mark { display: grid; width: clamp(31px, 2.05vw, 40px); height: clamp(31px, 2.05vw, 40px); margin: 0 auto; place-items: center; border-radius: 50%; color: #071812; background: #6fe3b5; font-size: clamp(1rem, 1.15vw, 1.3rem); font-weight: 950; }
.coffee-machine-analogy { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(150px, 1fr) 42px minmax(190px, 1.25fr) 42px minmax(150px, 1fr); width: 100%; align-items: center; column-gap: 9px; row-gap: clamp(9px, 1.2vh, 14px); margin-top: clamp(9px, 1.3vh, 15px); }.coffee-machine-analogy > p { grid-column: 1 / -1; margin: 0; padding: clamp(5px, .7vh, 9px) 0; color: #d8e8ef; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 850; line-height: 1.08; text-align: center; letter-spacing: -.018em; }.coffee-analogy-flow { display: contents; }.coffee-analogy-flow article { display: grid; min-height: var(--algorithm-row-height); height: var(--algorithm-row-height); place-items: center; align-content: center; gap: 4px; padding: 7px 10px; border: 1px solid #304757; border-radius: 13px; color: #dceaf0; background: linear-gradient(135deg, #0d1722, #121e29); text-align: center; }.coffee-analogy-flow article > strong { font-size: .64rem; }.coffee-analogy-flow > i { color: #6fe3b5; font-size: 1.35rem; font-style: normal; text-align: center; }
.coffee-machine-analogy.is-hidden { visibility: hidden; }
.coffee-input-icons { display: flex; align-items: center; gap: 5px; font-size: 1.35rem; }.coffee-input-icons b { color: #7893a2; font-size: .72rem; }.latte-output { position: relative; width: 34px; height: 24px; border: 2px solid #eef8fb; border-radius: 3px 3px 10px 10px; background: #f5fbfd18; }.latte-output::after { position: absolute; top: 3px; right: -10px; width: 9px; height: 10px; border: 2px solid #eef8fb; border-left: 0; border-radius: 0 8px 8px 0; content: ""; }.latte-output span { position: absolute; top: 3px; left: 4px; width: 22px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 58% 45%, #f6e3c4 0 18%, #d6a871 20% 43%, #8d5638 46% 100%); }
.coffee-machine-cartoon { position: relative; width: 48px; height: 54px; }.machine-top { position: absolute; inset: 0 4px 12px; border: 2px solid #70ddf4; border-radius: 7px 7px 4px 4px; background: #163041; }.machine-face { position: absolute; top: 7px; left: 11px; display: flex; gap: 7px; }.machine-face b { width: 6px; height: 6px; border-radius: 50%; background: #6fe3b5; }.machine-spout { position: absolute; top: 24px; left: 20px; width: 10px; height: 10px; border-left: 3px solid #8ca5b3; border-bottom: 3px solid #8ca5b3; }.coffee-drop { position: absolute; top: 34px; left: 23px; width: 4px; height: 8px; border-radius: 50% 50% 55% 55%; background: #d98b51; }.machine-cup { position: absolute; bottom: 0; left: 15px; width: 22px; height: 13px; border: 2px solid #eef8fb; border-radius: 2px 2px 7px 7px; background: #eef8fb22; }.machine-cup::after { position: absolute; top: 1px; right: -8px; width: 7px; height: 7px; border: 2px solid #eef8fb; border-left: 0; border-radius: 0 6px 6px 0; content: ""; }

/* Behavioral Data: actions become precise records, then feed the previous Algorithm model. */
.classroom-side.scene-behavior:not(.reveal-0) { background: radial-gradient(circle at 62% 26%, #493923 0, #241b12 43%, #0d0b0b 78%); }
.classroom-side.scene-behavior:not(.reveal-0) .classroom-focus { grid-template-rows: max-content minmax(0, 1fr) max-content; }
.classroom-side.scene-behavior .classroom-question.is-concept h1 { color: #f2c66d; }
.classroom-side.scene-behavior .classroom-visual { align-content: center; }
.behavior-data-model { display: grid; grid-template-rows: 82px 24px 66px 68px; width: min(780px, 100%); align-content: center; gap: 8px; }
.behavior-action-rail, .behavior-data-record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.behavior-action-card { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; min-width: 0; height: 82px; align-items: center; column-gap: 8px; padding: 10px 11px; border: 1px solid #67553b; border-radius: 13px; background: linear-gradient(145deg, #1c1711, #2a2116); box-shadow: 0 12px 28px #0003; }
.behavior-action-card > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #f2cd7b; background: #49391f; font-size: 1.1rem; font-weight: 950; }
.behavior-action-card small { overflow: hidden; color: #b6a17f; font-size: clamp(.52rem, .6vw, .62rem); font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.behavior-action-card strong { overflow: hidden; color: #edf8f1; font-size: clamp(.72rem, .88vw, .9rem); white-space: nowrap; }
.behavior-action-card.is-sentence { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 1fr; }
.behavior-action-card.is-sentence > span { grid-row: auto; }
.behavior-action-card.is-sentence strong { color: #edf8f1; font-size: clamp(.69rem, .82vw, .86rem); line-height: 1.25; white-space: normal; }
.behavior-action-card.is-active { border-color: #9b7d49; background: linear-gradient(145deg, #271d10, #3a2b15); }
.behavior-recording-bridge { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; gap: 11px; color: #edf3f4; font-size: .6rem; font-weight: 950; letter-spacing: .12em; transition: opacity .25s ease; }.behavior-recording-bridge strong { display: flex; align-items: center; gap: .45em; }.behavior-recording-bridge em { color: #edf3f4; font-style: normal; }
.behavior-recording-bridge i { height: 1px; background: linear-gradient(90deg, transparent, #d7a94e); }.behavior-recording-bridge i:last-child { background: linear-gradient(90deg, #d7a94e, transparent); }
.behavior-data-record { height: 66px; padding: 8px; border: 1px solid #6c5632; border-radius: 13px; background: #120e08c7; transition: opacity .25s ease; }
.behavior-data-record > span { display: grid; min-width: 0; align-content: center; gap: 4px; padding: 5px 8px; border-right: 1px solid #44351e; }
.behavior-data-record > span:last-child { border-right: 0; }.behavior-data-record small { overflow: hidden; color: #9f8965; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.5rem, .58vw, .62rem); white-space: nowrap; }.behavior-data-record strong { color: #efca78; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.68rem, .8vw, .84rem); }
.data-algorithm-flow { display: grid; grid-template-columns: minmax(190px, 1.2fr) 24px minmax(150px, .9fr) 24px minmax(160px, 1fr); height: 68px; align-items: stretch; gap: 7px; transition: opacity .25s ease; }
.data-algorithm-flow > i { display: grid; place-items: center; color: #e1b85f; font-size: 1.15rem; font-style: normal; }
.data-quality-input, .data-algorithm-box, .data-prediction-output { display: grid; min-width: 0; align-content: center; gap: 5px; padding: 8px 10px; border: 1px solid #695433; border-radius: 11px; background: #18120b; }
.data-quality-input small, .data-algorithm-box small, .data-prediction-output small { color: #b69a69; font-size: .55rem; font-weight: 950; letter-spacing: .11em; }
.data-quality-input > span { display: flex; min-width: 0; gap: 5px; }.data-quality-input b { padding: 4px 6px; border-radius: 6px; color: #2b1b05; background: #e9c36f; font-size: clamp(.5rem, .58vw, .62rem); }
.data-algorithm-box { border-color: #ad8240; background: linear-gradient(145deg, #24180b, #35240e); }.data-algorithm-box strong, .data-prediction-output strong { overflow: hidden; color: #f7ead0; font-size: clamp(.66rem, .76vw, .8rem); white-space: nowrap; }
.data-prediction-output { border-color: #79684a; background: linear-gradient(145deg, #1d1912, #292117); }
.behavior-data-model.stage-1 .behavior-recording-bridge, .behavior-data-model.stage-1 .behavior-data-record, .behavior-data-model.stage-1 .data-algorithm-flow, .behavior-data-model.stage-2 .data-algorithm-flow { visibility: hidden; opacity: 0; }
.behavior-data-model.stage-2 .behavior-data-record > span { animation: behavior-record-in .42s ease both; }.behavior-data-model.stage-2 .behavior-data-record > span:nth-child(2) { animation-delay: .08s; }.behavior-data-model.stage-2 .behavior-data-record > span:nth-child(3) { animation-delay: .16s; }.behavior-data-model.stage-2 .behavior-data-record > span:nth-child(4) { animation-delay: .24s; }
.behavior-data-model.stage-3 .data-algorithm-flow { animation: behavior-note-in .45s cubic-bezier(.2,.8,.2,1) both; }.behavior-data-model.stage-3 .data-quality-input b { animation: data-feed-pulse .55s ease both; }.behavior-data-model.stage-3 .data-quality-input b:nth-child(2) { animation-delay: .1s; }.behavior-data-model.stage-3 .data-quality-input b:nth-child(3) { animation-delay: .2s; }
@keyframes behavior-record-in { from { transform: translateY(-8px); opacity: 0; } }
@keyframes behavior-note-in { from { transform: translateX(18px); opacity: 0; } }
@keyframes data-feed-pulse { 50% { transform: translateX(5px); box-shadow: 0 0 16px #edc66d55; } }

/* Data follows Algorithm directly: same procedure, different input data, different ranking. */
.behavior-data-model { width: min(880px, 100%); height: min(390px, 40vh); align-content: stretch; }
.behavior-data-model.stage-1 { display: grid; grid-template-rows: 80px minmax(0, 1fr); gap: 14px; }
.shared-candidate-pool { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 24px; padding: 12px 18px; border: 1px solid #705b38; border-radius: 14px; background: #17120d; animation: comparison-pool-in .4s ease both; }.shared-candidate-pool > strong { color: #efc66f; font-size: clamp(.9rem, 1vw, 1.08rem); letter-spacing: .08em; }.shared-candidate-pool > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }.shared-candidate-pool span { display: grid; min-width: 0; height: 50px; place-items: center; border: 1px solid #5b4d37; border-radius: 9px; background: #ffffff08; font-size: 1.48rem; }
.two-run-comparison { display: grid; grid-template-areas: "input-a arrow-in-a algorithm arrow-out-a output-a" "input-b arrow-in-b algorithm arrow-out-b output-b"; grid-template-columns: minmax(150px, .86fr) 20px minmax(185px, 1.02fr) 20px minmax(215px, 1.2fr); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 12px 7px; }.comparison-input, .comparison-output, .shared-algorithm { display: grid; min-width: 0; align-content: center; gap: 9px; border: 1px solid #53697a; border-radius: 14px; background: #121a23; }.comparison-input { padding: 13px 14px; }.comparison-input small, .comparison-output small, .shared-algorithm small { font-size: clamp(.76rem, .86vw, .94rem); font-weight: 950; letter-spacing: .06em; }.comparison-input strong { color: #eef5f8; font-size: clamp(.9rem, .98vw, 1.05rem); }.comparison-input > div { display: flex; gap: 8px; }.comparison-input > div span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: #ffffff0a; font-size: 1.22rem; }.student-a { grid-area: input-a; border-color: #536f8b; background: linear-gradient(145deg, #172433, #101820); animation: comparison-lane-in .4s .18s ease both; }.student-a small { color: #8eacc7; }.student-b { grid-area: input-b; border-color: #8a6275; background: linear-gradient(145deg, #2b1922, #1d1218); animation: comparison-lane-in .4s 1.08s ease both; }.student-b small { color: #d09aaf; }
.shared-algorithm { grid-area: algorithm; position: relative; justify-items: center; align-content: center; padding: 22px 15px; overflow: hidden; border-color: #705b38; background: #17120d; text-align: center; box-shadow: none; }.shared-algorithm small { color: #efc66f; }.shared-algorithm > strong { color: #edf3f5; font-size: clamp(1.02rem, 1.14vw, 1.25rem); line-height: 1.25; }
.comparison-arrow { display: grid; place-items: center; color: #d4aa59; font-size: 1rem; font-style: normal; opacity: .38; }.input-a-arrow { grid-area: arrow-in-a; animation: comparison-arrow-live .55s .3s ease both; }.output-a-arrow { grid-area: arrow-out-a; animation: comparison-arrow-live .55s .68s ease both; }.input-b-arrow { grid-area: arrow-in-b; animation: comparison-arrow-live .55s 1.2s ease both; }.output-b-arrow { grid-area: arrow-out-b; animation: comparison-arrow-live .55s 1.58s ease both; }
.comparison-output { padding: 12px; }.comparison-output > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }.comparison-output > div span { display: grid; min-width: 0; height: 58px; place-items: center; align-content: center; gap: 2px; border-radius: 8px; color: #edf4f7; background: #ffffff08; font-size: 1.2rem; }.comparison-output b { color: #c8a55f; font-size: .76rem; line-height: 1; }.output-a { grid-area: output-a; border-color: #526b82; background: linear-gradient(145deg, #141f2a, #10171f); animation: comparison-output-in .48s .72s cubic-bezier(.2,.8,.2,1) both; }.output-a small { color: #8faec9; }.output-b { grid-area: output-b; border-color: #896074; background: linear-gradient(145deg, #281822, #1b1217); animation: comparison-output-in .48s 1.62s cubic-bezier(.2,.8,.2,1) both; }.output-b small { color: #d09aaf; }
@keyframes comparison-pool-in { from { transform: translateY(-8px); opacity: 0; } }
@keyframes comparison-lane-in { from { transform: translateX(-10px); opacity: 0; } }
@keyframes comparison-output-in { from { transform: translateX(12px); opacity: 0; } }
@keyframes comparison-arrow-live { from { opacity: .15; } to { opacity: 1; } }
.behavior-data-model.stage-2 { display: grid; grid-template-rows: 130px 42px 110px; align-content: center; gap: 16px; }.behavior-data-model.stage-2 .behavior-action-rail, .behavior-data-model.stage-2 .behavior-data-record { grid-template-columns: repeat(4, minmax(0, 1fr)); }.behavior-data-model.stage-2 .behavior-action-card { height: 130px; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; padding: 15px 16px; }.behavior-data-model.stage-2 .behavior-action-card > span { width: 46px; height: 46px; font-size: 1.45rem; }.behavior-data-model.stage-2 .behavior-action-card strong { font-size: clamp(1rem, 1.1vw, 1.2rem); }.behavior-data-model.stage-2 .behavior-recording-bridge { font-size: clamp(.82rem, .92vw, 1rem); }.behavior-data-model.stage-2 .behavior-data-record { height: 110px; padding: 13px; }.behavior-data-model.stage-2 .behavior-data-record > span { border-right: 1px solid #44351e; padding: 8px 11px; }.behavior-data-model.stage-2 .behavior-data-record small { font-size: clamp(.72rem, .82vw, .9rem); }.behavior-data-model.stage-2 .behavior-data-record strong { font-size: clamp(1rem, 1.1vw, 1.2rem); }
.behavior-data-model.stage-3 { display: grid; grid-template-rows: minmax(0, 1fr); }.recommendation-system-frame { --system-flow-columns: minmax(130px, 1.05fr) 18px minmax(150px, 1.12fr) 18px minmax(125px, .94fr) 18px minmax(125px, .94fr); display: grid; min-height: 0; grid-template-rows: 38px 34px minmax(0, 1fr); gap: 10px; padding: 12px 14px 16px; border: 1px solid #6b5736; border-radius: 17px; background: #100d09a8; }.recommendation-system-frame > header { display: grid; place-items: center; padding-bottom: 9px; border-bottom: 1px solid #544329; }.recommendation-system-frame > header strong { color: #f4f7fa; font-size: clamp(.76rem, .88vw, .94rem); letter-spacing: .1em; }.system-domain-row, .system-flow-row { display: grid; grid-template-columns: var(--system-flow-columns); min-width: 0; gap: 5px; }.system-domain-row { align-items: center; }.system-domain-row > i { visibility: hidden; }.system-domain-row .flow-domain { justify-self: center; padding: 4px 10px; border: 1px solid currentColor; border-radius: 99px; color: #e8bd62; font-size: clamp(.52rem, .61vw, .66rem); font-weight: 950; letter-spacing: .1em; }.system-domain-row .flow-domain.is-data { color: #e8bd62; }.system-domain-row .flow-domain.is-algorithm { color: #72e6ff; }.system-flow-row { align-items: stretch; }.system-flow-row > i { display: grid; place-items: center; color: #d6aa54; font-size: 1.15rem; font-style: normal; }.system-flow-row article { display: grid; min-width: 0; place-items: center; padding: 15px 10px; border: 1px solid #65563f; border-radius: 13px; background: #17130e; text-align: center; }.system-flow-row article strong { color: #f4f7fa; font-size: clamp(.74rem, .88vw, .94rem); line-height: 1.25; }.system-flow-row article.is-algorithm { border-color: #526f75; background: linear-gradient(145deg, #141f22, #1a2a2e); }.system-flow-row article.is-algorithm strong { color: #72e6ff; font-weight: 950; }

/* Each remaining concept gets a diagram native to the idea instead of a repeated box flow. */
.classroom-side:is(.scene-compression, .scene-preload, .scene-security, .scene-impact, .scene-wrap):not(.reveal-0) .classroom-focus { grid-template-rows: max-content minmax(0, 1fr) max-content; }
.classroom-side.scene-recommendation .classroom-question.is-concept h1 { color: var(--course-title-recommendation, #f27c78); }.classroom-side.scene-behavior .classroom-question.is-concept h1 { color: var(--course-title-data, #e8bd62); }.classroom-side.scene-compression .classroom-question.is-concept h1 { color: var(--course-title-compression, #bba2ff); }.classroom-side.scene-preload .classroom-question.is-concept h1 { color: var(--course-title-network, #7ce6df); }.classroom-side.scene-security .classroom-question.is-concept h1 { color: var(--course-title-security, #8eb8ff); }.classroom-side.scene-impact .classroom-question.is-concept h1 { color: var(--course-title-impact, #f3a6d0); }.classroom-side.scene-wrap .classroom-question.is-concept h1 { color: var(--course-title-recap, #9bdfff); }

.compression-lab { display: grid; grid-template-rows: 48px 54px; width: min(720px, 100%); align-content: center; gap: 14px; }
.quality-selector { display: flex; justify-content: center; gap: 10px; }.quality-selector button { min-width: 104px; height: 44px; border: 1px solid #655b86; border-radius: 99px; color: #d8d2ec; background: #171426; font-weight: 900; }.quality-selector button:hover, .quality-selector button:focus-visible { border-color: #a992ff; }.quality-selector button.active { border-color: #c0adff; color: #150d28; background: #bba2ff; box-shadow: 0 0 26px #9e7bff55; }
.compression-readings { display: grid; padding: 16px 22px; border-top: 1px solid #554b76; border-bottom: 1px solid #554b76; }
.compression-reading-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compression-reading-labels span { display: flex; align-items: center; justify-content: center; }
.compression-readings small { color: #928bad; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.compression-readings strong { color: #e8e2fb; font-size: .7rem; }
.combined-compression-meter { height: 10px; overflow: hidden; border-radius: 99px; background: #ffffff12; }
.compression-tradeoff { display: flex; align-items: center; color: #cbc3e1; transition: opacity .25s ease; }.compression-tradeoff strong { color: #bba2ff; font-size: .68rem; white-space: nowrap; }.compression-lab.stage-1 .compression-tradeoff { visibility: hidden; opacity: 0; }.compression-lab.stage-2 .compression-tradeoff { animation: concept-fade-in .4s ease both; }

.client-server-network { display: grid; grid-template-columns: 128px minmax(260px, 1fr) 128px; width: min(760px, 100%); height: 250px; align-items: center; gap: 14px; }
.network-endpoint { position: relative; z-index: 3; display: grid; height: 116px; place-content: center; gap: 5px; border: 1px solid #4b7775; border-radius: 22px; background: linear-gradient(145deg, #102523, #15312f); text-align: center; }.network-endpoint > span { color: #75dfd7; font-size: 2.2rem; line-height: 1; }.network-endpoint small { color: #789f9c; font-size: .55rem; font-weight: 950; letter-spacing: .12em; }.network-endpoint strong { color: #e4f7f5; font-size: .76rem; }
.connection-stage { position: relative; height: 220px; }.direct-connection { position: absolute; inset: 0; display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 9px; transition: opacity .3s ease; }.direct-connection > span { color: #7fa5a2; font-size: .54rem; font-weight: 950; letter-spacing: .08em; }.direct-connection > i { position: relative; height: 2px; background: #54beb7; }.direct-connection b { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #89efe6; box-shadow: 0 0 14px #73ddd4; animation: packet-line 2s linear infinite; }.direct-connection b:nth-child(2) { animation-delay: -.65s; }.direct-connection b:nth-child(3) { animation-delay: -1.3s; }
.preload-badge { position: absolute; top: 28px; left: -18px; display: grid; width: 132px; gap: 4px; padding: 9px 11px; transform: translateY(8px); border: 1px solid #5b8c88; border-radius: 12px; background: #102925ee; opacity: 0; transition: opacity .3s ease, transform .3s ease; }.preload-badge small { color: #75a39f; font-size: .52rem; font-weight: 950; }.preload-badge strong { color: #9df3e9; font-size: .66rem; }.preload-badge i { height: 4px; overflow: hidden; border-radius: 99px; background: #ffffff14; }.preload-badge i::after { display: block; width: 62%; height: 100%; background: #79e2d8; content: ""; animation: preload-progress 1.8s ease-in-out infinite; }.client-server-network.is-preloading .preload-badge { transform: translateY(0); opacity: 1; }
.routing-map { position: absolute; inset: 15px 0 15px; width: 100%; height: calc(100% - 30px); overflow: visible; opacity: 0; transition: opacity .35s ease; }.network-links path { fill: none; stroke: #416963; stroke-width: 2; }.router-nodes circle { fill: #153a36; stroke: #73bdb6; stroke-width: 2; }.selected-route { fill: none; stroke: #8ae9df; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 8; animation: route-dash 1.8s linear infinite; }.routing-label { position: absolute; right: 0; bottom: 4px; left: 0; color: #82b4af; font-size: .54rem; font-weight: 950; letter-spacing: .1em; text-align: center; opacity: 0; transition: opacity .3s ease; }.client-server-network.is-network .direct-connection, .client-server-network.is-network .preload-badge { opacity: 0; }.client-server-network.is-network .routing-map, .client-server-network.is-network .routing-label { opacity: 1; }

.security-network { display: grid; grid-template-columns: 118px minmax(300px, 1fr) 118px; grid-template-rows: 205px 46px; width: min(760px, 100%); align-items: center; gap: 10px 14px; }.security-endpoint { display: grid; height: 110px; place-content: center; gap: 5px; border: 1px solid #486a9a; border-radius: 20px; background: linear-gradient(145deg, #111d34, #172847); text-align: center; }.security-endpoint > span { color: #91bbff; font-size: 2rem; }.security-endpoint small { color: #7893bd; font-size: .54rem; font-weight: 950; letter-spacing: .1em; }.security-endpoint strong { color: #e5edfb; font-size: .72rem; }
.security-network-middle { position: relative; height: 190px; }.security-network-middle svg { position: absolute; inset: 10px 0; width: 100%; height: 170px; }.security-network-middle svg g path { fill: none; stroke: #384d70; stroke-width: 2; }.security-network-middle svg circle { fill: #182843; stroke: #6888b8; stroke-width: 2; }.security-network-middle .secure-route { fill: none; stroke: #f18d9b; stroke-width: 4; stroke-dasharray: 8 7; }.security-network-middle code { position: absolute; right: 7%; bottom: 22px; left: 7%; overflow: hidden; padding: 7px 10px; border: 1px solid #a55563; border-radius: 8px; color: #ffd1d7; background: #381923e8; font-size: .68rem; text-align: center; white-space: nowrap; }.network-listener { position: absolute; top: 12px; left: 50%; display: grid; width: 94px; place-items: center; transform: translateX(-50%); text-align: center; }.network-listener > span { font-size: 2.6rem; }.network-listener strong { color: #d2dced; font-size: .58rem; letter-spacing: .1em; }.network-listener small { color: #aab7ca; font-size: .58rem; }
.security-network .feed-encryption-switch { grid-column: 1 / -1; }.security-network.is-encrypted .secure-route { stroke: #70d6ad; }.security-network.is-encrypted code { border-color: #4ba87f; color: #8eebc4; background: #0d3027e8; }
.endpoint-device-icon { width: 48px; height: 48px; justify-self: center; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.endpoint-device-icon .endpoint-screen { fill: currentColor; opacity: .12; }
.endpoint-device-icon .endpoint-play { fill: currentColor; stroke: none; }
.server-rack-icon { width: 52px; height: 52px; }
.security-endpoint .endpoint-device-icon { color: #91bbff; }.network-endpoint .endpoint-device-icon, .preload-server .endpoint-device-icon { color: #75dfd7; }
.security-network-links line { stroke: #384d70; stroke-width: 1.4; }.security-router-nodes circle { fill: #182843; stroke: #6888b8; stroke-width: 2; }.security-router-nodes text { fill: #9bbcf0; font-size: 7px; font-weight: 950; text-anchor: middle; }.security-network-middle .secure-route { stroke-linecap: round; }

.impact-balance { position: relative; display: grid; grid-template-columns: 1fr 150px 1fr; grid-template-rows: 180px 44px; width: min(720px, 100%); align-items: end; gap: 12px; }.impact-side { display: grid; align-self: center; place-items: center; gap: 8px; opacity: .48; transition: opacity .35s ease, transform .35s ease; }.impact-side small { font-size: .58rem; font-weight: 950; letter-spacing: .12em; }.impact-side span { font-size: 3.2rem; }.impact-side strong { color: #d9ceda; font-size: .78rem; }.benefits small { color: #81d7bc; }.tradeoffs small { color: #efa1cb; }.impact-seesaw { position: relative; align-self: center; height: 100px; }.impact-seesaw i { position: absolute; top: 32px; right: -86px; left: -86px; height: 5px; transform: rotate(-5deg); border-radius: 99px; background: linear-gradient(90deg, #69cfad, #dc8fba); transition: transform .4s ease; }.impact-seesaw b { position: absolute; bottom: 5px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 28px solid transparent; border-bottom: 58px solid #554157; border-left: 28px solid transparent; }.impact-balance.show-benefits .benefits, .impact-balance.show-tradeoffs .tradeoffs { transform: translateY(-8px); opacity: 1; }.impact-balance.show-tradeoffs .impact-seesaw i { transform: rotate(5deg); }.impact-balance button { grid-column: 1 / -1; justify-self: center; min-width: 150px; height: 40px; border: 1px solid #b8749b; border-radius: 99px; color: #fff0f8; background: #382237; font-size: .7rem; font-weight: 900; }

.swipe-system { position: relative; width: min(620px, 92%); aspect-ratio: 1.8; }.swipe-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 118px; height: 118px; place-items: center; align-content: center; gap: 4px; transform: translate(-50%, -50%); border: 2px solid #87dcff; border-radius: 50%; background: #10283a; box-shadow: 0 0 46px #62cef644; }.swipe-core span { color: #8be5ff; font-size: 2.2rem; }.swipe-core strong { font-size: .65rem; }.system-orbit { position: absolute; inset: 12% 8%; border: 1px solid #53758a; border-radius: 50%; }.system-idea { --angle: calc(var(--i) * 60deg - 90deg); position: absolute; z-index: 2; top: calc(50% + sin(var(--angle)) * 40%); left: calc(50% + cos(var(--angle)) * 44%); display: grid; min-width: 92px; place-items: center; gap: 3px; transform: translate(-50%, -50%); }.system-idea b { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #54788e; border-radius: 50%; color: #90e4ff; background: #101d28; font-size: 1.1rem; }.system-idea small { color: #bdd0db; font-size: .52rem; font-weight: 900; letter-spacing: .08em; }

@keyframes packet-line { from { left: 0; } to { left: calc(100% - 10px); } }
@keyframes preload-progress { 50% { width: 88%; } }
@keyframes route-dash { to { stroke-dashoffset: -34; } }
@keyframes concept-fade-in { from { opacity: 0; } }

/* Resolution and lossless-compression refinements. */
.feed-video.quality-144p .video-art { filter: blur(12px) contrast(.68); transform: scale(1.14); image-rendering: pixelated; }
.feed-video.quality-480p .video-art { filter: blur(6px) contrast(.82); transform: scale(1.07); image-rendering: pixelated; }
.feed-video.quality-4k .video-art { filter: contrast(1.08) saturate(1.08); }
.combined-compression-meter > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #806bda, #c1aeff); transition: width .35s ease; }
.compression-readings.quality-144p .combined-compression-meter > b { width: 10%; }
.compression-readings.quality-480p .combined-compression-meter > b { width: 32%; }
.compression-readings.quality-1080p .combined-compression-meter > b { width: 70%; }
.compression-readings.quality-4k .combined-compression-meter > b { width: 100%; }
.compression-lab.stage-1 .compression-tradeoff { visibility: visible; opacity: 1; }
.zip-lossless-demo { position: relative; display: grid; grid-template-columns: 1fr 130px 1fr; grid-template-rows: 160px 54px; width: min(700px, 100%); align-items: center; gap: 12px 24px; }
.zip-original-files, .zip-restored-files { position: relative; display: flex; justify-content: center; }
.zip-original-files span, .zip-restored-files span { display: grid; width: 72px; height: 92px; place-items: end center; padding-bottom: 13px; border: 1px solid #675a91; border-radius: 8px 8px 16px 8px; color: #dcd4f6; background: linear-gradient(145deg, #1d1831, #2d2445); font-size: .62rem; font-weight: 950; box-shadow: 0 12px 25px #0004; }
.zip-original-files span:nth-child(2), .zip-restored-files span:nth-child(2) { margin-left: -28px; transform: translateY(12px) rotate(4deg); }.zip-original-files span:nth-child(3), .zip-restored-files span:nth-child(3) { margin-left: -28px; transform: translateY(-7px) rotate(8deg); }
.zip-archive { position: relative; display: grid; width: 96px; height: 120px; justify-self: center; place-items: center; overflow: hidden; border: 2px solid #bca7ff; border-radius: 12px 12px 20px 12px; color: #160e29; background: linear-gradient(145deg, #c8b7ff, #856ad8); box-shadow: 0 0 34px #9f82ff44; }.zip-archive i { position: absolute; top: 0; bottom: 0; left: 47%; width: 9px; background: repeating-linear-gradient(#31224f 0 7px, #d8ccff 7px 13px); }.zip-archive strong { position: relative; z-index: 2; padding: 6px 9px; border-radius: 6px; background: #eee8ff; font-size: .76rem; }
.zip-equation { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; color: #cfc4ed; text-align: center; }.zip-equation strong { font-size: .7rem; letter-spacing: .1em; }.zip-equation i { color: #c4b0ff; font-size: 1.2rem; font-style: normal; }.zip-equation small { grid-column: 1 / -1; margin-top: 4px; color: #9488b1; font-size: .62rem; }

/* Explicit orbit positions avoid browser-dependent trigonometric layout. */
.network-listener { top: -6px; }
.system-idea { top: 50%; left: 50%; }
.system-idea:nth-of-type(1) { top: 11%; left: 50%; }
.system-idea:nth-of-type(2) { top: 28%; left: 84%; }
.system-idea:nth-of-type(3) { top: 72%; left: 84%; }
.system-idea:nth-of-type(4) { top: 89%; left: 50%; }
.system-idea:nth-of-type(5) { top: 72%; left: 16%; }
.system-idea:nth-of-type(6) { top: 28%; left: 16%; }

/* Client requests travel to the server; video chunks travel back. */
.direct-exchange { position: absolute; inset: 46px 0; display: grid; align-content: center; gap: 30px; transition: opacity .3s ease, transform .3s ease; }
.request-lane, .video-lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }.request-lane small, .video-lane small { color: #8eb7b3; font-size: .56rem; font-weight: 950; letter-spacing: .08em; text-align: right; }.request-lane > i, .video-lane > i { position: relative; height: 2px; background: #54beb7; }
.request-lane b { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #89efe6; box-shadow: 0 0 14px #73ddd4; animation: packet-line 2s linear infinite; }.request-lane b:nth-child(2) { animation-delay: -.65s; }.request-lane b:nth-child(3) { animation-delay: -1.3s; }
.video-lane > i { background: #6c9ebc; }.video-lane b { position: absolute; top: -10px; display: grid; width: 26px; height: 20px; place-items: center; border: 1px solid #a9dcf4; border-radius: 4px; color: #0d2633; background: #91d5ef; font-size: .48rem; font-style: normal; animation: video-chunk-back 2.5s linear infinite; }.video-lane b:nth-child(2) { animation-delay: -.82s; }.video-lane b:nth-child(3) { animation-delay: -1.64s; }
.preload-badge { top: 2px; left: 50%; width: 280px; transform: translate(-50%, 8px); text-align: center; }.client-server-network.is-preloading .preload-badge { transform: translate(-50%, 0); }.client-server-network.is-preloading .direct-exchange { transform: translateY(34px); }
.client-server-network.is-network .direct-exchange { opacity: 0; }.router-nodes text { fill: #9cded8; font-size: 7px; font-weight: 950; text-anchor: middle; }.routing-map .network-links line { stroke: #365d59; stroke-width: 1.4; }.routing-label { white-space: nowrap; }
.network-listener { top: -80px; }
@keyframes video-chunk-back { from { right: 0; } to { right: calc(100% - 26px); } }

/* Course Launch review pass: stable classroom scale, Pacific-centered map, and page-specific visuals. */
.teacher-journey-opening:is(.stage-0, .stage-1, .stage-3) .journey-story-card { top: 34%; right: 22px; left: auto; }
.teacher-journey-opening.stage-2 .journey-story-card { top: 28%; right: auto; left: 22px; }
.profile-strip { grid-template-columns: max-content 1fr; gap: 12px; }
.profile-strip > span { color: #aebfca; font-size: .82rem; font-weight: 800; }
.algorithm-term { color: #72e6ff; font-weight: 950; }
.data-term { color: #f2c66d; font-weight: 950; }
.human-term { color: #6fe6bb; font-weight: 950; }
.network-endpoint small, .security-endpoint small { font-size: clamp(.64rem, .68vw, .76rem); }
.network-endpoint strong, .security-endpoint strong { font-size: clamp(.84rem, .9vw, 1rem); }
.request-lane small, .video-lane small { font-size: clamp(.64rem, .68vw, .76rem); }
.router-nodes text { font-size: 9px; }
.individual-tradeoff-seesaw strong { font-size: clamp(.78rem, .86vw, .94rem); }
.individual-tradeoff-seesaw p { font-size: clamp(.7rem, .78vw, .86rem); }
.society-impact-landscape :is(strong, span, small) { font-size: max(.68rem, 12px); }

.selected-route { opacity: 0; animation: none; transition: opacity .35s ease; }
.selected-route.is-selected { opacity: 1; animation: route-dash 1.8s linear infinite; }
.routing-label { font-size: clamp(.62rem, .68vw, .76rem); }
.security-network-middle code { right: 16%; bottom: 16px; left: 16%; display: grid; gap: 3px; font-size: clamp(.72rem, .82vw, .9rem); }
.security-network-middle code small { color: inherit; font-family: inherit; font-size: .7em; font-weight: 850; opacity: .78; }
.network-listener { top: -70px; }

.class-culture-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr); gap: 8px; padding: clamp(58px, 6.2vh, 72px) clamp(54px, 7vw, 128px) 84px; overflow: hidden; background: radial-gradient(circle at 50% 52%, #15364f, #090e17 68%); }
.class-culture-opening::before { position: absolute; inset: 0; background-image: radial-gradient(#7bdff51c 1.5px, transparent 1.5px); background-size: 34px 34px; content: ""; mask-image: linear-gradient(transparent, #000 22%, #000 82%, transparent); }
.culture-title { position: relative; z-index: 2; justify-self: center; }
.culture-title h1 { display: grid; gap: 2px; font-size: clamp(2rem, 3.25vw, 4rem); line-height: .94; }
.culture-title h1 span { display: block; }
.culture-title p { font-size: clamp(.9rem, 1.05vw, 1.15rem); }
.culture-playground { position: relative; width: min(1100px, 96%); height: min(510px, 65vh); align-self: center; justify-self: center; }
.culture-route { position: absolute; inset: 4% 1%; width: 98%; height: 92%; overflow: visible; }.culture-route path { fill: none; stroke: #68dff044; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 12; filter: drop-shadow(0 0 10px #62dff055); }
.culture-center { position: absolute; z-index: 4; top: 53%; left: 50%; display: grid; width: 236px; height: 142px; place-content: center; justify-items: center; gap: 6px; transform: translate(-50%, -50%); border: 2px solid #e0aa3d; border-radius: 45% 55% 52% 48%; color: #fff3cc; background: radial-gradient(circle at 50% 30%, #674a18, #2d200d 70%); text-align: center; box-shadow: 0 0 0 12px #d69b3020, 0 0 54px #d49a3255; }.culture-center > span { color: #f2c65b; font-size: 1.65rem; }.culture-center strong { font-size: 1.2rem; letter-spacing: .08em; }.culture-center small { color: #e3bd66; font-size: .94rem; font-weight: 850; }
.culture-playground article { position: absolute; z-index: 3; display: flex; width: 238px; min-height: 86px; align-items: center; gap: 13px; padding: 10px 16px 10px 10px; transform: translate(-50%, -50%); border: 1px solid #477b91; border-radius: 999px; background: linear-gradient(120deg, #10283aee, #0b1723ee); box-shadow: 0 15px 36px #0005, inset 0 1px #ffffff0d; }
.culture-playground article > span { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border: 1px solid #73dff3; border-radius: 50%; color: #06141d; background: linear-gradient(145deg, #9af1ff, #58c8e0); font-size: 1.7rem; font-weight: 950; box-shadow: 0 0 18px #67dbef44; }.culture-playground article > div { display: grid; gap: 3px; text-align: left; }.culture-playground article b { color: #e2ad3e; font-size: .58rem; letter-spacing: .13em; }.culture-playground article strong { color: #ecfaff; font-size: clamp(.86rem, 1vw, 1.08rem); line-height: 1.08; }.culture-playground article small { color: #93b9c8; font-size: clamp(.72rem, .8vw, .88rem); font-weight: 800; }
.culture-playground article:nth-of-type(1) { top: 49%; left: 12%; }.culture-playground article:nth-of-type(2) { top: 15%; left: 29%; }.culture-playground article:nth-of-type(3) { top: 14%; left: 58%; }.culture-playground article:nth-of-type(4) { top: 48%; left: 88%; }.culture-playground article:nth-of-type(5) { top: 84%; left: 70%; }.culture-playground article:nth-of-type(6) { top: 84%; left: 30%; }

.assignment-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr); gap: 24px; padding: 44px clamp(60px, 8vw, 150px) 82px; background: radial-gradient(circle at 50% 53%, #2f294e, #0b0e18 68%); }
.assignment-question { align-self: center; justify-self: center; display: grid; width: min(1050px, 88%); grid-template-columns: 110px 1fr; align-items: center; gap: clamp(26px, 4vw, 58px); padding: clamp(30px, 4vw, 64px); border: 1px solid #7b70a5; border-radius: 30px; background: #16172aee; box-shadow: 0 28px 80px #0007; }
.assignment-question > span { display: grid; width: 104px; height: 104px; place-items: center; border: 2px solid #c1adff; border-radius: 50%; color: #1a1130; background: #bba2ff; font-size: 4rem; font-weight: 950; }
.assignment-question p { display: grid; gap: 18px; margin: 0; }.assignment-question strong { color: #f4f0ff; font-size: clamp(2rem, 3.2vw, 4.2rem); line-height: 1.08; letter-spacing: -.035em; }.assignment-question small { color: #bcb3d4; font-size: clamp(1.15rem, 1.45vw, 1.7rem); font-weight: 800; line-height: 1.35; }

/* The final marking scheme uses two large groups rather than a spreadsheet-style table. */
.marking-scheme-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr) 64px; gap: 18px; padding: 46px clamp(56px, 6.5vw, 124px) 82px; overflow: hidden; background: radial-gradient(circle at 50% 46%, #223247, #090e17 70%); }
.marking-scheme-opening::before { position: absolute; inset: 0; background-image: radial-gradient(#7bdff514 1.5px, transparent 1.5px); background-size: 32px 32px; content: ""; mask-image: linear-gradient(transparent, #000 18%, #000 86%, transparent); }
.marking-scheme-opening > * { position: relative; z-index: 1; }
.marking-scheme-opening .opening-title { padding-right: 34%; }
.marking-scheme-opening .opening-title h1 { color: #f4f7fa; font-size: clamp(2.25rem, 3.45vw, 4.1rem); }
.marking-scheme-groups { display: grid; min-height: 0; grid-template-columns: 3fr 2fr; gap: 18px; }
.marking-group { display: grid; min-width: 0; grid-template-rows: max-content 1fr; overflow: hidden; border: 1px solid #4c6375; border-radius: 24px; background: linear-gradient(145deg, #142330ee, #0d1721f2); box-shadow: 0 18px 42px #0005, inset 0 1px #ffffff10; }
.marking-group > header { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #405767; background: #ffffff08; }
.marking-group > header > div, .marking-items article > div { display: grid; min-width: 0; gap: 3px; }
.marking-group > header strong { color: #f4f7fa; font-size: clamp(1.05rem, 1.5vw, 1.55rem); line-height: 1.08; }
.marking-group > header small { font-size: clamp(.72rem, .88vw, .94rem); font-weight: 850; }
.marking-group > header > b { color: #f0bd55; font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1; }
.marking-items { display: grid; min-height: 0; grid-auto-rows: 1fr; gap: 1px; background: #52657555; }
.marking-items article { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 18px; padding: 12px 20px; background: #0d1721; }
.marking-items article strong { color: #f4f7fa; font-size: clamp(.94rem, 1.3vw, 1.38rem); line-height: 1.14; }
.marking-items article small { font-size: clamp(.7rem, .82vw, .88rem); font-weight: 800; }
.marking-items article > b { color: #f4f7fa; font-size: clamp(1.45rem, 2.1vw, 2.25rem); }
.marking-group-1 { border-color: #91723e; }.marking-group-1 > header { border-bottom-color: #7f6337; background: #e2ad3e12; }
.marking-group-2 { border-color: #4c7185; }.marking-group-2 > header { border-bottom-color: #426477; background: #69d9ed0d; }.marking-group-2 > header > b { color: #83deef; }
.marking-total { display: grid; grid-template-columns: 3fr 2fr; overflow: hidden; border: 1px solid #566876; border-radius: 16px; background: #0b141c; box-shadow: 0 12px 30px #0004; }
.marking-total > div { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #19200e; background: linear-gradient(90deg, #d99c35, #efc866); }
.marking-total > div:last-child { color: #09212a; background: linear-gradient(90deg, #62c4d8, #8de7f4); }
.marking-total span { font-size: clamp(.78rem, .9vw, .98rem); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }.marking-total b { font-size: clamp(1.2rem, 1.65vw, 1.75rem); }

@media (max-width: 1300px) {
  .marking-scheme-opening { gap: 12px; padding: 40px 46px 74px; grid-template-rows: max-content minmax(0, 1fr) 52px; }
  .marking-group > header { padding: 12px 16px; }.marking-items article { padding: 9px 16px; }.marking-scheme-groups { gap: 12px; }
}

/* Page 15 keeps the semester readable as two compact ten-week tables. */
.semester-schedule-opening { position: absolute; inset: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content; gap: 16px; padding: 38px clamp(46px, 5.4vw, 104px) 78px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #1a3545, #090e17 72%); }
.semester-schedule-opening::before { position: absolute; inset: 0; background-image: radial-gradient(#7bdff514 1.5px, transparent 1.5px); background-size: 32px 32px; content: ""; mask-image: linear-gradient(transparent, #000 18%, #000 88%, transparent); }
.semester-schedule-opening > * { position: relative; z-index: 1; }
.semester-schedule-title { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.semester-schedule-title > div { display: grid; gap: 4px; }
.semester-schedule-title span { color: #73d9ec; font-size: clamp(.7rem, .85vw, .92rem); font-weight: 950; letter-spacing: .14em; }
.semester-schedule-title h1 { margin: 0; color: #f4f7fa; font-size: clamp(2.1rem, 3.2vw, 3.7rem); line-height: 1; letter-spacing: -.035em; }
.semester-schedule-title > strong { color: #f0bd55; font-size: clamp(1rem, 1.4vw, 1.5rem); white-space: nowrap; }
.semester-schedule-tables { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.semester-schedule-tables table { width: 100%; height: 100%; overflow: hidden; border: 1px solid #4c6375; border-spacing: 0; border-radius: 20px; background: #0d1721e8; table-layout: fixed; box-shadow: 0 18px 42px #0005; }
.semester-schedule-tables th { height: 38px; padding: 0 13px; border-bottom: 1px solid #526878; color: #8edff0; background: #172938; font-size: clamp(.66rem, .76vw, .82rem); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.semester-schedule-tables th:first-child { width: 12%; text-align: center; }.semester-schedule-tables th:nth-child(2) { width: 25%; }
.semester-schedule-tables td { padding: 5px 13px; border-bottom: 1px solid #30414d; color: #dbe4eb; font-size: clamp(.72rem, .9vw, 1rem); font-weight: 800; line-height: 1.1; }
.semester-schedule-tables tr:last-child td { border-bottom: 0; }
.semester-schedule-tables td:first-child { color: #83deef; font-weight: 950; text-align: center; }.semester-schedule-tables td:nth-child(2) { color: #9eb0bd; white-space: nowrap; }.semester-schedule-tables td:last-child { color: #f3f7fa; font-weight: 900; }
.semester-schedule-tables tr.is-holiday td { color: #eac46c; background: #dba53d12; }.semester-schedule-tables tr.is-assessment td { color: #f0b7d8; background: #dc80ba12; }.semester-schedule-tables tr.is-create td { background: #65d4a70d; }.semester-schedule-tables tr.is-create td:last-child { color: #8ee6c1; }
.semester-schedule-opening > p { margin: 0; color: #8fa1ae; font-size: clamp(.68rem, .8vw, .86rem); font-weight: 750; text-align: center; }

@media (max-width: 1300px) {
  .semester-schedule-opening { gap: 10px; padding: 28px 34px 68px; }
  .semester-schedule-title h1 { font-size: 2.35rem; }.semester-schedule-title > strong { font-size: .92rem; }
  .semester-schedule-tables { gap: 12px; }.semester-schedule-tables th { height: 30px; padding: 0 9px; }
  .semester-schedule-tables td { padding: 3px 9px; font-size: .74rem; }
}

/* Preloading tells a short story: fill the phone cache, lose the network, keep watching. */
.preloading-story { display: grid; grid-template-columns: 260px minmax(230px, 1fr) 126px; width: min(760px, 100%); height: 250px; align-items: center; gap: 18px; }
.preload-phone-cache { position: relative; display: grid; height: 250px; grid-template-rows: 88px 1fr 24px; gap: 8px; padding: 14px; overflow: hidden; border: 2px solid #60cfc7; border-radius: 28px; background: linear-gradient(155deg, #102724, #0c1717); box-shadow: inset 0 0 32px #54c9c31a, 0 18px 38px #0006; }
.current-video-playing { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr 7px; align-items: center; gap: 0 10px; padding: 10px 12px; border: 1px solid #54817d; border-radius: 16px; background: linear-gradient(135deg, #1d4742, #152e2c); }.current-video-playing > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #09201d; background: #80e6dc; }.current-video-playing strong { align-self: end; color: #e8fffc; font-size: .68rem; letter-spacing: .08em; }.current-video-playing small { align-self: start; color: #78a9a4; font-size: .54rem; font-weight: 900; }.current-video-playing > i { grid-column: 1 / -1; overflow: hidden; height: 5px; border-radius: 99px; background: #ffffff16; }.current-video-playing > i b { display: block; width: 72%; height: 100%; border-radius: inherit; background: #80e6dc; animation: current-video-progress 7s linear infinite; }
.cached-video-queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.cached-video { display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #4f7672; border-radius: 13px; background: #142b29; opacity: .22; }.cached-video span { font-size: 1.3rem; }.cached-video strong { color: #dff7f4; font-size: .56rem; }.cached-video small { color: #76d9cf; font-size: .7rem; font-weight: 950; }.cached-video.video-one { animation: cached-video-ready .55s .35s ease-out both; }.cached-video.video-two { animation: cached-video-ready .55s .85s ease-out both; }.cached-video.video-three { animation: cached-video-ready .55s 1.35s ease-out both; }
.stored-on-phone { align-self: center; color: #6fa9a4; font-size: .5rem; letter-spacing: .1em; text-align: center; }
.preload-transfer-stage { position: relative; height: 190px; }.preload-online-label, .preload-offline-label { position: absolute; top: 4px; right: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }.preload-online-label i { width: 8px; height: 8px; border-radius: 50%; background: #75e2d8; box-shadow: 0 0 12px #75e2d8; }.preload-online-label strong, .preload-offline-label strong { color: #8bc5c0; font-size: .55rem; letter-spacing: .1em; }.preload-request-path, .preload-video-path { position: absolute; right: 0; left: 0; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; }.preload-request-path { top: 66px; }.preload-video-path { top: 112px; }.preload-request-path small, .preload-video-path small { color: #7aa5a1; font-size: .49rem; font-weight: 950; letter-spacing: .06em; text-align: right; }.preload-request-path > i, .preload-video-path > i { position: relative; height: 2px; background: #5fc7c0; }.preload-request-path b { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #8beae2; animation: packet-line 2s linear infinite; }.preload-video-path > i { background: #6c9ebc; }.preload-video-path b { position: absolute; top: -10px; display: grid; width: 25px; height: 20px; place-items: center; border: 1px solid #a9dcf4; border-radius: 4px; color: #0d2633; background: #91d5ef; font-size: .45rem; animation: video-chunk-back 2.5s linear infinite; }.preload-video-path b:nth-child(2) { animation-delay: -.82s; }.preload-video-path b:nth-child(3) { animation-delay: -1.64s; }
.preload-online-label, .preload-offline-label { opacity: 0; }.preload-offline-label span { color: #ff9d9d; font-size: 1.45rem; }.preload-offline-label strong { color: #ffabab; }.preload-transfer-stage > p { position: absolute; right: 0; bottom: 3px; left: 0; margin: 0; color: #9aadaa; font-size: .55rem; font-weight: 900; line-height: 1.35; text-align: center; opacity: 0; }.preload-transfer-stage > p strong { color: #82eadf; font-size: .7rem; }
.preloading-story.show-online-preloading .preload-online-label { opacity: 1; }
.preload-server { display: grid; height: 116px; place-content: center; gap: 5px; border: 1px solid #4b7775; border-radius: 22px; background: linear-gradient(145deg, #102523, #15312f); text-align: center; }.preload-server > span { color: #75dfd7; font-size: 2.2rem; }.preload-server small { color: #789f9c; font-size: .55rem; font-weight: 950; letter-spacing: .12em; }.preload-server strong { color: #e4f7f5; font-size: .7rem; }
.preloading-story.show-offline-proof .preload-online-label { opacity: 0; animation: none; }.preloading-story.show-offline-proof .preload-request-path, .preloading-story.show-offline-proof .preload-video-path { opacity: .18; animation: none; }.preloading-story.show-offline-proof .preload-offline-label, .preloading-story.show-offline-proof .preload-transfer-stage > p { opacity: 1; animation: none; }.preloading-story.show-offline-proof .cached-video { opacity: 1; border-color: #70cfc6; box-shadow: 0 0 16px #60d6ca22; animation: none; }
@keyframes current-video-progress { from { width: 8%; } 70%, 100% { width: 100%; } }
@keyframes cached-video-ready { from { opacity: .22; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); border-color: #70cfc6; box-shadow: 0 0 16px #60d6ca22; } }
@media (min-width: 1301px) {
  .classroom-side.scene-preload .classroom-question.is-concept { min-height: 186px; }
}

/* Impact discussion changes scale: one person first, then stakeholder groups. */
.individual-impact-balance { position: relative; display: grid; grid-template-columns: 1fr 150px 1fr; grid-template-rows: 160px 42px; width: min(700px, 100%); align-items: center; gap: 10px 20px; }.individual-impact-balance > i { position: absolute; top: 80px; right: 18%; left: 18%; height: 2px; background: linear-gradient(90deg, #72d6b8, #c995b5); }.individual-center { position: relative; z-index: 2; display: grid; width: 120px; height: 120px; justify-self: center; place-content: center; gap: 5px; border: 2px solid #e6a8cd; border-radius: 50%; background: #2b1b2b; text-align: center; }.individual-center span { color: #f2b3d6; font-size: 1.35rem; font-weight: 950; }.individual-center strong { color: #d9cbd6; font-size: .62rem; }.individual-side { position: relative; z-index: 2; display: grid; gap: 9px; padding: 16px; border-radius: 18px; background: #171017e8; text-align: center; }.individual-side small { font-size: .58rem; font-weight: 950; letter-spacing: .12em; }.individual-side strong { color: #e8dfe6; font-size: .76rem; }.personal-benefits { border: 1px solid #4e907d; }.personal-benefits small { color: #78d8b9; }.personal-costs { border: 1px solid #965f82; }.personal-costs small { color: #eca2cc; }.individual-impact-balance p, .society-impact-map p { grid-column: 1 / -1; margin: 0; color: #bfaeb9; font-size: .7rem; font-weight: 800; text-align: center; }
.society-impact-map { position: relative; width: min(700px, 100%); height: 240px; }.society-impact-map::before { position: absolute; inset: 42px 100px; background: linear-gradient(24deg, transparent 49.5%, #75586e 49.7% 50.3%, transparent 50.5%), linear-gradient(-24deg, transparent 49.5%, #75586e 49.7% 50.3%, transparent 50.5%); content: ""; }.society-feature { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 142px; height: 86px; place-content: center; gap: 5px; transform: translate(-50%, -50%); border: 2px solid #de9ac3; border-radius: 50%; background: #321d30; text-align: center; }.society-feature small { color: #b785a3; font-size: .52rem; font-weight: 950; letter-spacing: .1em; }.society-feature strong { color: #ffe8f5; font-size: .72rem; }.stakeholder { position: absolute; z-index: 2; display: grid; min-width: 152px; gap: 4px; padding: 10px 12px; border: 1px solid #76576d; border-radius: 13px; background: #1c121bdd; text-align: center; }.stakeholder b { color: #f0acd1; font-size: .6rem; letter-spacing: .1em; }.stakeholder small { color: #c6b5bf; font-size: .64rem; }.stakeholder.viewer { top: 8px; left: 4%; }.stakeholder.creator { top: 8px; right: 4%; }.stakeholder.platform { bottom: 38px; left: 4%; }.stakeholder.society { right: 4%; bottom: 38px; }.society-impact-map p { position: absolute; right: 0; bottom: 0; left: 0; }

/* Personal impact is a genuine trade-off: both sides move around one fulcrum. */
.individual-tradeoff-seesaw { position: relative; width: min(820px, 100%); height: clamp(340px, 38vh, 400px); }
.seesaw-load { position: absolute; z-index: 2; top: 32px; display: grid; width: min(300px, 42%); height: 148px; place-items: center; align-content: center; gap: 9px; padding: 14px; border-radius: 26px; background: #171017ec; text-align: center; box-shadow: 0 18px 42px #0006; }.seesaw-load > span { font-size: 2.45rem; line-height: 1; }.seesaw-load small { font-size: clamp(.88rem, .96vw, 1.02rem); font-weight: 950; letter-spacing: .12em; }.seesaw-load strong { color: #ede4eb; font-size: clamp(1.12rem, 1.24vw, 1.36rem); line-height: 1.24; }.seesaw-benefits { left: 22px; border: 1px solid #4e907d; animation: seesaw-benefit-motion 6s ease-in-out infinite; }.seesaw-benefits small { color: #78d8b9; }.seesaw-costs { right: 22px; border: 1px solid #965f82; animation: seesaw-cost-motion 6s ease-in-out infinite; }.seesaw-costs small { color: #eca2cc; }
.seesaw-board { position: absolute; top: 230px; right: 5%; left: 5%; height: 108px; }.seesaw-board > i { position: absolute; z-index: 2; top: 0; right: 0; left: 0; height: 12px; transform: rotate(-3deg); border-radius: 99px; background: linear-gradient(90deg, #6dd3b1, #e19ac2); box-shadow: 0 6px 20px #0007; animation: seesaw-board-motion 6s ease-in-out infinite; }.seesaw-board > b { position: absolute; top: 10px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 46px solid transparent; border-bottom: 86px solid #573e55; border-left: 46px solid transparent; }
@keyframes seesaw-board-motion { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes seesaw-benefit-motion { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes seesaw-cost-motion { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(0); } }
@media (max-width: 1300px) {
  .individual-tradeoff-seesaw { height: 260px; }
  .seesaw-load { top: 12px; height: 125px; padding: 10px; gap: 6px; }
  .seesaw-load > span { font-size: 2rem; }
  .seesaw-board { top: 168px; height: 82px; }
  .seesaw-board > b { border-right-width: 38px; border-bottom-width: 72px; border-left-width: 38px; }
}

/* Social impact compares people and business incentives before asking for a net judgment. */
.society-impact-landscape { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 38px 92px 78px; width: min(760px, 100%); height: 250px; gap: 10px; }
.society-impact-landscape::before { position: absolute; z-index: 0; top: 18px; right: 9%; bottom: 36px; left: 9%; border-right: 1px solid #684f62; border-left: 1px solid #684f62; background: linear-gradient(#684f62, #684f62) 50% 0 / 1px 100% no-repeat, linear-gradient(#684f62, #684f62) 50% 36px / 82% 1px no-repeat, linear-gradient(#684f62, #684f62) 50% calc(100% - 34px) / 82% 1px no-repeat; content: ""; opacity: .65; }
.impact-product, .impact-person, .impact-interest { position: relative; z-index: 2; display: grid; place-content: center; gap: 4px; border-radius: 14px; background: #1b121add; text-align: center; }
.impact-product { grid-column: 3 / 5; grid-row: 1; justify-self: center; min-width: 190px; padding: 5px 18px; border: 1px solid #d28db5; border-radius: 99px; background: #351f32; }.impact-product small { color: #ad7f9a; font-size: .46rem; font-weight: 950; letter-spacing: .1em; }.impact-product strong { color: #ffe7f4; font-size: .68rem; }
.impact-person { grid-row: 2; padding: 10px 14px; }.impact-person b { font-size: .57rem; letter-spacing: .1em; }.impact-person strong { color: #e8dfe5; font-size: .68rem; }.impact-person small { color: #bbaab4; font-size: .58rem; }.manages-time { grid-column: 1 / 4; border: 1px solid #4f8d79; }.manages-time b { color: #7bd5b5; }.loses-time { grid-column: 4 / 7; border: 1px solid #96617f; }.loses-time b { color: #eca5cc; }
.impact-interest { grid-row: 3; padding: 8px 9px; border: 1px solid #715467; }.impact-interest b { color: #dca0c3; font-size: .52rem; letter-spacing: .1em; }.impact-interest span, .impact-interest strong, .impact-interest small { color: #d7cbd2; font-size: .58rem; }.impact-interest i { color: #c98db0; font-style: normal; line-height: .7; }.platform-interest { grid-column: 1 / 3; }.advertiser-interest { grid-column: 3 / 5; }.society-question { grid-column: 5 / 7; border-color: #917390; background: #251926; }.society-question strong { color: #ffe0f2; font-size: .63rem; }.society-question small { color: #bd9db0; }
.classroom-side.scene-wrap .classroom-visual { padding-bottom: 58px; }
.classroom-side.scene-wrap .swipe-system { height: clamp(250px, 33vh, 330px); aspect-ratio: auto; }
@keyframes candidate-into-box { 55% { transform: translateX(42px) scale(.78); opacity: .52; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes algorithm-pulse { 45% { border-color: #71e9ba; box-shadow: inset 0 0 46px #60e8b64a, 0 0 34px #60e8b64a; transform: scale(1.035); } }
@keyframes algorithm-processing-step { 45% { color: #e9fff7; text-shadow: 0 0 14px #6fe5b7; transform: translateX(4px); } }
@keyframes ranked-result-in { to { transform: translateX(0); opacity: 1; } }
@keyframes algorithm-node-in { from { transform: translateY(14px); opacity: 0; } }
@keyframes algorithm-arrow-in { from { transform: translateX(-10px); opacity: 0; } }
@keyframes algorithm-payload-pulse { 50% { border-color: #6fe3b5; transform: translateX(4px); } }
@keyframes algorithm-step-light { 50% { box-shadow: 0 0 20px #68dfb077; transform: scale(1.09); } }
@keyframes algorithm-output-pop { 50% { box-shadow: 0 0 26px #6fe3b577; transform: scale(1.12); } }
@keyframes coffee-input-in { 45% { transform: translateX(5px); } }
@keyframes coffee-pour { 0%, 35% { transform: translateY(-3px); opacity: 0; } 50%, 72% { transform: translateY(4px); opacity: 1; } 80%, 100% { transform: translateY(8px); opacity: 0; } }
@keyframes latte-ready { 0%, 35% { transform: scale(.72); opacity: .25; } 55%, 85% { transform: scale(1.12); opacity: 1; } }
@keyframes algorithm-joke-pop { from { transform: rotate(-8deg) scale(.65); opacity: 0; } 70% { transform: rotate(1deg) scale(1.06); } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
@keyframes algorithm-joke-shake { 0%, 100% { transform: rotate(-2deg) translateX(0); } 20% { transform: rotate(1deg) translateX(-7px); } 40% { transform: rotate(-4deg) translateX(7px); } 60% { transform: rotate(1deg) translateX(-5px); } 80% { transform: rotate(-3deg) translateX(4px); } }
@media (max-width: 1300px) {
  .recommendation-machine { grid-template-columns: minmax(130px, .8fr) 24px minmax(145px, .9fr) 24px minmax(170px, 1.1fr); gap: 6px; }.recommendation-connector { font-size: 1.25rem; }.algorithm-black-box { min-height: 140px; padding: 14px; }.ranked-videos li { min-height: 44px; padding: 7px 9px; font-size: .82rem; }.candidate-cloud { gap: 7px; }.algorithm-definition-model { grid-template-columns: minmax(125px, 1fr) 28px minmax(160px, 1.2fr) 28px minmax(125px, 1fr); gap: 6px; }.algorithm-definition-node { min-height: var(--algorithm-row-height); height: var(--algorithm-row-height); padding: 6px 8px; gap: 4px; }.algorithm-definition-arrow { font-size: 1.35rem; }.coffee-machine-analogy { grid-template-columns: minmax(125px, 1fr) 28px minmax(160px, 1.2fr) 28px minmax(125px, 1fr); column-gap: 6px; row-gap: 8px; margin-top: 8px; }.coffee-machine-analogy > p { padding: 5px 0; font-size: clamp(1.2rem, 1.9vw, 1.5rem); }.coffee-analogy-flow article { min-height: var(--algorithm-row-height); height: var(--algorithm-row-height); padding: 5px 8px; }
  .behavior-data-model { grid-template-rows: 72px 20px 58px 60px; gap: 6px; }.behavior-action-card { grid-template-columns: 27px 1fr; height: 72px; padding: 7px 8px; column-gap: 6px; }.behavior-action-card > span { width: 27px; height: 27px; font-size: .9rem; }.behavior-data-record { height: 58px; padding: 6px; }.data-algorithm-flow { grid-template-columns: minmax(175px, 1.2fr) 18px minmax(130px, .9fr) 18px minmax(145px, 1fr); height: 60px; gap: 5px; }.data-quality-input, .data-algorithm-box, .data-prediction-output { padding: 6px 8px; }
  .behavior-data-model.stage-1 { grid-template-rows: 64px minmax(0, 1fr); gap: 8px; }.behavior-data-model.stage-1 .shared-candidate-pool span { height: 38px; font-size: 1.12rem; }.behavior-data-model.stage-1 .two-run-comparison { grid-template-columns: minmax(130px, .86fr) 16px minmax(160px, 1.02fr) 16px minmax(185px, 1.2fr); gap: 8px 4px; }.behavior-data-model.stage-1 .comparison-input > div span { width: 32px; height: 32px; font-size: 1rem; }.behavior-data-model.stage-1 .comparison-output > div span { height: 44px; font-size: 1rem; }
  .behavior-data-model.stage-2 { grid-template-rows: 96px 28px 78px; gap: 9px; }.behavior-data-model.stage-2 .behavior-action-card { height: 96px; grid-template-columns: 34px minmax(0, 1fr); padding: 9px 10px; column-gap: 8px; }.behavior-data-model.stage-2 .behavior-action-card > span { width: 34px; height: 34px; font-size: 1.08rem; }.behavior-data-model.stage-2 .behavior-action-card strong { font-size: clamp(.82rem, 1.1vw, 1rem); }.behavior-data-model.stage-2 .behavior-recording-bridge { font-size: clamp(.65rem, .8vw, .78rem); }.behavior-data-model.stage-2 .behavior-data-record { height: 78px; padding: 8px; }.behavior-data-model.stage-2 .behavior-data-record > span { padding: 6px 8px; }.behavior-data-model.stage-2 .behavior-data-record small { font-size: clamp(.58rem, .72vw, .7rem); }.behavior-data-model.stage-2 .behavior-data-record strong { font-size: clamp(.82rem, 1vw, 1rem); }
  .compression-lab { grid-template-rows: 44px 50px; gap: 10px; }.compression-readings { padding: 12px 18px; }.client-server-network { grid-template-columns: 108px minmax(240px, 1fr) 108px; height: 210px; }.network-endpoint { height: 96px; }.connection-stage { height: 190px; }.preloading-story { grid-template-columns: 230px minmax(205px, 1fr) 108px; height: 210px; gap: 12px; }.preload-phone-cache { height: 210px; grid-template-rows: 72px 1fr 18px; gap: 6px; padding: 10px; }.current-video-playing { padding: 7px 9px; }.preload-transfer-stage { height: 180px; }.preload-server { height: 96px; }.security-network { grid-template-columns: 102px minmax(270px, 1fr) 102px; grid-template-rows: 180px 42px; }.security-network-middle { height: 170px; }.security-network-middle svg { height: 150px; }.security-endpoint { height: 94px; }.impact-balance { grid-template-rows: 150px 40px; }.impact-side span { font-size: 2.7rem; }.swipe-system { width: min(560px, 90%); }
}
@media (prefers-reduced-motion: reduce) {
  .algorithm-joke, .algorithm-definition-node, .algorithm-definition-arrow, .algorithm-payload i, .algorithm-step-sequence i, .algorithm-output-mark, .coffee-input-icons, .coffee-drop, .latte-output, .recommendation-machine.is-ranked .algorithm-black-box, .recommendation-machine.is-ranked .algorithm-steps span, .recommendation-machine.is-ranked .candidate-cloud span, .ranked-videos.show-result li, .behavior-data-record > span, .data-algorithm-flow, .data-quality-input b, .compression-tradeoff, .direct-connection b, .preload-badge i::after, .selected-route, .current-video-playing > i b, .cached-video, .preload-online-label, .preload-offline-label, .preload-request-path, .preload-video-path, .preload-transfer-stage > p, .seesaw-load, .seesaw-board > i { animation: none; }
  .preloading-story:not(.show-offline-proof) .cached-video { opacity: 1; }
}

/* Review pass: compact teacher controls stay below the teaching content. */
.opening-step-controls, .recommendation-step-controls { grid-template-columns: repeat(2, 132px); gap: 8px; }
.classroom-step-button { width: 132px; height: 38px; gap: 7px; padding: 5px 8px 5px 10px; border-radius: 10px; font-size: .68rem; box-shadow: 0 8px 20px #0004; }
.classroom-step-button.previous { padding: 5px 10px 5px 8px; }
.classroom-step-button i { width: 22px; height: 22px; flex-basis: 22px; font-size: .82rem; }
.classroom-step-controls { right: clamp(22px, 2.4vw, 42px); bottom: 10px; }
.compression-lab, .compression-lab.stage-1 { grid-template-rows: 48px; gap: 0; }
.classroom-side.scene-impact .seesaw-load small { font-size: clamp(.88rem, .96vw, 1.02rem); }
.classroom-side.scene-impact .seesaw-load strong { font-size: clamp(1.12rem, 1.24vw, 1.36rem); }
.classroom-side.scene-impact .impact-product small, .classroom-side.scene-impact .impact-person b, .classroom-side.scene-impact .impact-interest b { font-size: clamp(.62rem, .7vw, .76rem); }
.classroom-side.scene-impact .impact-product strong, .classroom-side.scene-impact .impact-person strong, .classroom-side.scene-impact .impact-interest strong { font-size: clamp(.76rem, .84vw, .92rem); }
.classroom-side.scene-impact .impact-person small, .classroom-side.scene-impact .impact-interest span, .classroom-side.scene-impact .impact-interest small { font-size: clamp(.68rem, .74vw, .82rem); }
.classroom-side.scene-wrap .classroom-question.is-concept h1 { max-width: 24ch; font-size: clamp(1.65rem, 2.35vw, 3rem); line-height: 1.02; }

/* Society impact: three readable goals with selectable relationship lines. */
.impact-relationship-map { position: relative; width: min(760px, 100%); height: 278px; }
.impact-relationship-map svg { position: absolute; inset: 0; width: 100%; height: 255px; overflow: visible; }
.impact-link { fill: none; stroke-width: 6; stroke-linecap: round; cursor: pointer; opacity: .72; transition: stroke-width .2s ease, opacity .2s ease, filter .2s ease; }
.impact-link.viewer-platform { stroke: #d9a742; }.impact-link.viewer-advertiser { stroke: #d78370; }.impact-link.platform-advertiser { stroke: #55c39d; }
.impact-link:hover, .impact-link:focus-visible, .impact-link.is-active { stroke-width: 10; opacity: 1; filter: drop-shadow(0 0 7px currentColor); outline: none; }
.impact-party { position: absolute; z-index: 2; display: grid; width: 188px; min-height: 78px; place-content: center; gap: 4px; padding: 10px 14px; border: 1px solid #73586d; border-radius: 17px; background: #1a121bdd; text-align: center; box-shadow: 0 14px 30px #0005; }
.impact-party b { color: #eda9d0; font-size: clamp(.68rem, .75vw, .82rem); letter-spacing: .1em; }.impact-party strong { color: #f2e7ee; font-size: clamp(.8rem, .9vw, 1rem); }.impact-party small { color: #bbaab4; font-size: clamp(.68rem, .76vw, .84rem); font-weight: 700; }
.impact-viewer { top: 0; left: 50%; transform: translateX(-50%); }.impact-platform { bottom: 48px; left: 0; }.impact-advertiser { right: 0; bottom: 48px; }
.impact-feed-center { position: absolute; z-index: 3; top: 44%; left: 50%; display: grid; width: 150px; height: 84px; place-content: center; gap: 3px; transform: translate(-50%, -50%); border: 2px solid #d79a3c; border-radius: 50%; color: #ffe7b1; background: #33220f; text-align: center; }.impact-feed-center small { color: #b98a45; font-size: .55rem; font-weight: 950; letter-spacing: .09em; }.impact-feed-center strong { font-size: .82rem; }
.impact-link-label { position: absolute; z-index: 4; padding: 3px 7px; border: 1px solid currentColor; border-radius: 99px; background: #100b11; font-size: .52rem; font-weight: 950; letter-spacing: .06em; pointer-events: none; }.label-viewer-platform { top: 34%; left: 17%; color: #d9a742; transform: rotate(-24deg); }.label-viewer-advertiser { top: 34%; right: 17%; color: #d78370; transform: rotate(24deg); }.label-platform-advertiser { right: 39%; bottom: 62px; color: #55c39d; }
.impact-relationship-detail { position: absolute; right: 3%; bottom: 0; left: 3%; margin: 0; padding-top: 8px; border-top: 1px solid #664b5f; color: #c9bbc3; font-size: clamp(.7rem, .8vw, .88rem); font-weight: 750; line-height: 1.35; text-align: center; }

/* Recap: a selected field flips, then reveals its concise bullet list below. */
.classroom-side.scene-wrap .swipe-system { display: grid; width: min(720px, 100%); height: 340px; grid-template-rows: 205px 125px; gap: 10px; }
.swipe-orbit-stage { position: relative; min-height: 0; }
.swipe-orbit-stage .system-orbit { inset: 8% 10%; }
.swipe-orbit-stage .swipe-core { width: 94px; height: 94px; }.swipe-orbit-stage .swipe-core span { font-size: 1.7rem; }
.swipe-orbit-stage .system-idea { position: absolute; z-index: 4; display: block; width: 116px; min-width: 0; height: 50px; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; perspective: 700px; cursor: pointer; }
.swipe-orbit-stage .system-idea > span { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.2,.75,.3,1); }
.swipe-orbit-stage .system-idea.is-flipped > span { transform: rotateY(180deg); }
.swipe-orbit-stage .system-idea b, .swipe-orbit-stage .system-idea i { position: absolute; inset: 0; display: grid; width: auto; height: auto; place-content: center; padding: 6px; backface-visibility: hidden; border: 1px solid #54788e; border-radius: 13px; color: #cceaf4; background: #101d28; font-size: .58rem; font-style: normal; font-weight: 950; letter-spacing: .05em; text-align: center; }
.swipe-orbit-stage .system-idea i { transform: rotateY(180deg); border-color: #75e0f4; color: #82eafd; background: #10303b; }
.swipe-orbit-stage .system-idea:focus-visible b, .swipe-orbit-stage .system-idea:hover b { border-color: #75e0f4; outline: none; }
.swipe-orbit-stage .system-idea:nth-of-type(1) { top: 7%; left: 50%; }.swipe-orbit-stage .system-idea:nth-of-type(2) { top: 28%; left: 86%; }.swipe-orbit-stage .system-idea:nth-of-type(3) { top: 75%; left: 86%; }.swipe-orbit-stage .system-idea:nth-of-type(4) { top: 93%; left: 50%; }.swipe-orbit-stage .system-idea:nth-of-type(5) { top: 75%; left: 14%; }.swipe-orbit-stage .system-idea:nth-of-type(6) { top: 28%; left: 14%; }
.recap-detail { display: grid; align-content: start; gap: 7px; padding: 11px 18px; border: 1px solid #3f6173; border-radius: 15px; background: #0e1b25; text-align: left; }.recap-detail > strong { color: #78e4f8; font-size: .72rem; letter-spacing: .08em; }.recap-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 24px; margin: 0; padding-left: 18px; }.recap-detail li { color: #c6d9e1; font-size: clamp(.64rem, .72vw, .78rem); font-weight: 720; line-height: 1.3; }
.recommendation-machine .ranked-videos li > em { font-size: .58rem; }

/* Clean relationship rails replace intersecting stakeholder lines. */
.impact-relationship-map { display: grid; width: min(760px, 100%); height: 278px; grid-template-rows: 40px 76px 76px 48px; gap: 7px; position: relative; }
.impact-product-beacon { display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #865e78; border-radius: 999px; background: linear-gradient(90deg, #2d1929, #1b1521, #2d1929); box-shadow: inset 0 1px #ffffff0c; }
.impact-product-beacon small { color: #e6a8cd; font-size: clamp(.58rem, .65vw, .72rem); font-weight: 950; letter-spacing: .1em; }.impact-product-beacon strong { color: #f4e9ef; font-size: clamp(.76rem, .86vw, .94rem); }
.impact-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.impact-relationship-map .impact-party { position: static; display: grid; width: auto; min-height: 0; place-content: center; gap: 2px; padding: 7px 12px; transform: none; border: 1px solid #574454; border-radius: 15px; background: linear-gradient(145deg, #201822, #151117); text-align: center; box-shadow: inset 0 1px #ffffff0b; }
.impact-relationship-map .impact-party b { color: #e8a5ca; font-size: clamp(.62rem, .68vw, .76rem); letter-spacing: .1em; }.impact-relationship-map .impact-party strong { color: #f2e9ee; font-size: clamp(.74rem, .84vw, .92rem); }.impact-relationship-map .impact-party small { color: #aa99a3; font-size: clamp(.62rem, .7vw, .78rem); font-weight: 750; }
.impact-relationship-rails { display: grid; grid-template-rows: repeat(3, 1fr); gap: 4px; }
.impact-relationship-rail { display: grid; min-width: 0; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 9px; color: #a995a1; background: transparent; cursor: pointer; }
.impact-relationship-rail > span { font-size: clamp(.52rem, .59vw, .66rem); font-weight: 950; letter-spacing: .08em; }.impact-relationship-rail > span:last-child { text-align: right; }
.impact-relationship-rail > i { position: relative; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #dbad48, #d587b4); transition: height .2s ease, filter .2s ease; }.impact-relationship-rail > i::before, .impact-relationship-rail > i::after { position: absolute; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); border: 2px solid #e1b65a; border-radius: 50%; background: #161017; content: ""; }.impact-relationship-rail > i::before { left: -2px; }.impact-relationship-rail > i::after { right: -2px; border-color: #d992bb; }
.impact-relationship-rail b { position: absolute; top: 50%; left: 50%; padding: 3px 9px; transform: translate(-50%, -50%); border: 1px solid #745364; border-radius: 999px; color: #dec7d4; background: #171018; font-size: clamp(.48rem, .54vw, .6rem); font-style: normal; letter-spacing: .05em; white-space: nowrap; }
.impact-relationship-rail:hover, .impact-relationship-rail:focus-visible, .impact-relationship-rail.is-active { color: #f1e6ed; background: #ffffff08; outline: none; }.impact-relationship-rail:is(:hover, :focus-visible, .is-active) > i { height: 6px; filter: drop-shadow(0 0 7px #de9ab8); }.impact-relationship-rail.is-active b { border-color: #e1ad4d; color: #ffe9ac; }
.impact-relationship-map .impact-relationship-detail { position: static; display: grid; align-content: center; margin: 0; padding: 7px 16px; border: 1px solid #664b5f; border-radius: 13px; color: #dacbd3; background: #171018; font-size: clamp(.7rem, .78vw, .86rem); font-weight: 750; line-height: 1.3; text-align: center; }

/* Recap fields are luminous flip-coins around one swipe, with details below. */
.classroom-side.scene-wrap .swipe-system { display: grid; width: min(740px, 100%); height: 340px; grid-template-rows: 218px 112px; gap: 10px; }
.swipe-orbit-stage { position: relative; min-height: 0; }
.recap-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.recap-orbit-lines ellipse { fill: none; stroke: #4ccfe733; stroke-width: 2; stroke-dasharray: 5 9; }.recap-orbit-lines path { fill: none; stroke: #5ccfe724; stroke-width: 1.5; }
.swipe-orbit-stage .swipe-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 108px; height: 108px; place-content: center; justify-items: center; gap: 2px; transform: translate(-50%, -50%); border: 2px solid #e3ad42; border-radius: 50%; color: #fff2c7; background: radial-gradient(circle at 50% 30%, #674718, #281c0b 72%); box-shadow: 0 0 0 10px #e0a43815, 0 0 35px #d69d3548; }.swipe-orbit-stage .swipe-core span { font-size: 1.65rem; line-height: .9; }.swipe-orbit-stage .swipe-core strong { font-size: .66rem; letter-spacing: .08em; }.swipe-orbit-stage .swipe-core small { color: #d4a94f; font-size: .38rem; font-weight: 950; letter-spacing: .08em; }
.swipe-orbit-stage .system-idea { position: absolute; z-index: 4; display: block; width: 82px; min-width: 0; height: 82px; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; perspective: 700px; cursor: pointer; }
.swipe-orbit-stage .system-idea > .recap-coin { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .48s cubic-bezier(.2,.75,.3,1); }.swipe-orbit-stage .system-idea.is-flipped > .recap-coin { transform: rotateY(180deg); }
.swipe-orbit-stage .recap-coin > b, .swipe-orbit-stage .recap-coin > strong { position: absolute; inset: 0; display: grid; width: auto; height: auto; place-content: center; justify-items: center; gap: 4px; padding: 7px; backface-visibility: hidden; border: 1px solid #4e879a; border-radius: 50%; color: #d9f8ff; background: radial-gradient(circle at 45% 30%, #1b4556, #0c1b25 70%); font-style: normal; box-shadow: inset 0 1px #ffffff18, 0 8px 22px #0006; }
.swipe-orbit-stage .recap-coin > strong { transform: rotateY(180deg); border-color: #71e6f8; color: #78e9fb; background: radial-gradient(circle at 45% 30%, #176375, #0a2732 72%); box-shadow: 0 0 22px #55dff455; }
.swipe-orbit-stage .recap-coin :is(b, strong) > i { position: static; display: grid; width: 25px; height: 25px; place-items: center; transform: none; border: 0; border-radius: 50%; color: #07202a; background: #78e7f9; font-size: .72rem; font-style: normal; font-weight: 950; }.swipe-orbit-stage .recap-coin em { color: inherit; font-size: clamp(.48rem, .54vw, .6rem); font-style: normal; font-weight: 950; letter-spacing: .035em; line-height: 1.05; text-align: center; }
.swipe-orbit-stage .system-idea:hover .recap-coin > b, .swipe-orbit-stage .system-idea:focus-visible .recap-coin > b { border-color: #79e8fa; box-shadow: 0 0 20px #55dff444; }.swipe-orbit-stage .system-idea:focus-visible { outline: 3px solid #f1bd54; outline-offset: 4px; border-radius: 50%; }
.swipe-orbit-stage .system-idea:nth-of-type(1) { top: 8%; left: 50%; }.swipe-orbit-stage .system-idea:nth-of-type(2) { top: 27%; left: 84%; }.swipe-orbit-stage .system-idea:nth-of-type(3) { top: 76%; left: 84%; }.swipe-orbit-stage .system-idea:nth-of-type(4) { top: 92%; left: 50%; }.swipe-orbit-stage .system-idea:nth-of-type(5) { top: 76%; left: 16%; }.swipe-orbit-stage .system-idea:nth-of-type(6) { top: 27%; left: 16%; }
.recap-detail { position: relative; display: grid; align-content: center; grid-template-columns: 145px 1fr; gap: 12px; padding: 12px 18px; overflow: hidden; border: 1px solid #3e6677; border-radius: 18px; background: linear-gradient(120deg, #102634, #0c1821); text-align: left; box-shadow: inset 4px 0 #62daef; }.recap-detail::after { position: absolute; right: -34px; bottom: -58px; width: 160px; height: 160px; border: 1px solid #62daef1f; border-radius: 50%; content: ""; }.recap-detail > strong { align-self: center; color: #78e4f8; font-size: clamp(.72rem, .82vw, .9rem); letter-spacing: .08em; }.recap-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; padding-left: 18px; }.recap-detail li { color: #d0e5ec; font-size: clamp(.64rem, .72vw, .8rem); font-weight: 740; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .swipe-orbit-stage .system-idea > .recap-coin { transition: none; }
}

/* Page 10: spotlight one social relationship at a time for classroom projection. */
.impact-spotlight { position: relative; width: min(860px, 100%); height: clamp(470px, 49vh, 520px); overflow: hidden; border: 1px solid #533d4d; border-radius: 24px; background: radial-gradient(circle at 50% 34%, #382032, #140f16 67%); box-shadow: inset 0 1px #ffffff0c, 0 18px 40px #0004; }
.impact-spotlight::before { position: absolute; inset: 0; background-image: radial-gradient(#e8a4ca16 1.3px, transparent 1.3px); background-size: 24px 24px; content: ""; mask-image: linear-gradient(#000, transparent 77%); }
.impact-spotlight-links { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 320px; overflow: visible; }
.impact-spotlight-links path { fill: none; stroke-width: 0; stroke-linecap: round; opacity: 0; transition: opacity .3s ease, stroke-width .3s ease; }.impact-spotlight-links .viewer-platform { stroke: #e2ad3e; }.impact-spotlight-links .viewer-advertiser { stroke: #dc8aae; }.impact-spotlight-links .platform-advertiser { stroke: #62d5b7; }
.impact-spotlight-links path.is-active { stroke-width: 8; stroke-dasharray: 12 8; opacity: 1; filter: drop-shadow(0 0 8px currentColor); animation: impact-link-flow 1.4s linear infinite; }.impact-spotlight-links path.is-overview { stroke-width: 3; opacity: .52; }
@keyframes impact-link-flow { to { stroke-dashoffset: -20; } }
.impact-spotlight-party { position: absolute; z-index: 2; display: grid; width: 220px; height: 130px; place-content: center; justify-items: center; gap: 6px; border: 1px solid #76556a; border-radius: 22px; background: linear-gradient(145deg, #281b26ed, #171118ed); text-align: center; box-shadow: 0 14px 30px #0005, inset 0 1px #ffffff12; transition: opacity .3s ease, filter .3s ease, transform .3s ease; }.impact-spotlight-party.viewer { top: 18px; left: 50%; transform: translateX(-50%); }.impact-spotlight-party.platform { top: 190px; left: 7%; }.impact-spotlight-party.advertiser { top: 190px; right: 7%; }
.impact-spotlight-party > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #f0b5d6; border-radius: 50%; color: #2c1324; background: #e8a4ca; font-size: 1.85rem; font-weight: 950; box-shadow: inset 0 1px #ffffff55, 0 5px 14px #0004; }.impact-spotlight-party.platform > span { color: #251a05; background: #e2ad3e; border-color: #f5d887; }.impact-spotlight-party.advertiser > span { color: #08251e; background: #70d9bc; border-color: #b3f4e2; }
.impact-spotlight-party b { color: #e9a8cd; font-size: clamp(.9rem, .96vw, 1.05rem); letter-spacing: .1em; }.impact-spotlight-party strong { color: #f5edf2; font-size: clamp(1.12rem, 1.22vw, 1.34rem); }.impact-spotlight-party.is-muted { opacity: .18; filter: grayscale(.8); }.impact-spotlight-party.is-muted.viewer { transform: translateX(-50%) scale(.94); }.impact-spotlight-party.is-muted:not(.viewer) { transform: scale(.94); }
.impact-spotlight-caption { position: absolute; z-index: 3; right: 20px; bottom: 18px; left: 20px; display: grid; min-height: 112px; place-content: center; gap: 8px; padding: 14px 30px; border: 1px solid #715064; border-radius: 17px; background: #171017ed; text-align: center; box-shadow: inset 4px 0 #e2ad3e; }.impact-spotlight-caption small { color: #e9afcf; font-size: clamp(.88rem, .94vw, 1rem); font-weight: 950; letter-spacing: .1em; }.impact-spotlight-caption p { max-width: 58ch; margin: 0 auto; color: #f0e7ec; font-size: clamp(1.12rem, 1.22vw, 1.34rem); font-weight: 780; line-height: 1.4; }

@media (max-width: 1300px) {
  .impact-spotlight { height: 400px; }.impact-spotlight-links { height: 265px; }.impact-spotlight-party { width: 180px; height: 110px; }.impact-spotlight-party.viewer { top: 8px; }.impact-spotlight-party.platform { top: 142px; left: 5%; }.impact-spotlight-party.advertiser { top: 142px; right: 5%; }.impact-spotlight-party > span { width: 46px; height: 46px; font-size: 1.6rem; }.impact-spotlight-caption { bottom: 10px; min-height: 100px; padding: 11px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-spotlight-links path.is-active { animation: none; }
}

/* Classroom culture: a quiet power grid makes curiosity the shared fuel source. */
.culture-power-grid { --culture-energy: #66d9ff; --culture-energy-bright: #b7efff; position: relative; width: min(1020px, 92%); height: min(440px, 56vh); align-self: center; justify-self: center; transform: translateY(clamp(3px, .8vh, 8px)); }
.culture-power-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }.culture-power-lines path { fill: none; stroke: var(--course-connector-soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.culture-power-lines .power-bus { stroke: var(--course-connector); stroke-width: 5; }.culture-power-lines circle { fill: #101b24; stroke: var(--course-connector-strong); stroke-width: 3; }.culture-power-lines .power-pulse { stroke: var(--culture-energy); stroke-width: 5; stroke-dasharray: .13 2; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 7px #66d9ffcc); }.culture-power-lines .power-pulse.is-charging { animation: culture-line-charge 2.4s linear both; }
.culture-fuel-cell { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 222px; min-height: 184px; place-content: center; justify-items: center; gap: 10px; padding: 18px; transform: translate(-50%, -50%); border: 1px solid #438da8; border-radius: 28px; color: #e7f9ff; background: linear-gradient(155deg, #123c51f2, #0c1b27f5); text-align: center; box-shadow: 0 0 0 10px #66d9ff0f, 0 20px 56px #0007, inset 0 1px #c9f4ff2b; }
.culture-fuel-cell > div { display: grid; justify-items: center; gap: 4px; }.culture-fuel-cell > div > b { color: var(--culture-energy); font-size: .6rem; letter-spacing: .14em; }.culture-fuel-cell > div > strong { color: #f2fcff; font-size: 1.08rem; letter-spacing: .055em; }.culture-fuel-cell > div > small { font-size: .78rem; font-weight: 850; }
.culture-battery { position: relative; display: grid; width: 52px; height: 66px; place-items: center; overflow: visible; border: 2px solid var(--culture-energy); border-radius: 12px; background: #0b1c26; box-shadow: inset 0 0 0 4px #081218, 0 0 22px #66d9ff3d; }.culture-battery::before { position: absolute; top: -8px; width: 20px; height: 7px; border-radius: 4px 4px 0 0; background: var(--culture-energy); content: ""; }.culture-battery i { position: absolute; right: 5px; bottom: 5px; left: 5px; height: 68%; border-radius: 6px; background: linear-gradient(180deg, var(--culture-energy-bright), #42a8d1); animation: culture-battery-charge 6s ease-in-out infinite; }.culture-battery b { position: relative; z-index: 2; color: #08202a; font-size: 1.7rem; line-height: 1; }
@keyframes culture-battery-charge { 0%, 100% { height: 45%; opacity: .76; } 50% { height: 78%; opacity: 1; } }
.culture-module { position: absolute; z-index: 3; display: flex; width: 250px; height: 82px; align-items: center; gap: 13px; padding: 11px 16px 11px 11px; transform: translate(-50%, -50%); border: 1px solid #456274; border-radius: 18px; color: inherit; background: linear-gradient(135deg, #122635f2, #0b1721f2); box-shadow: 0 14px 34px #0005, inset 0 1px #ffffff0d; font: inherit; text-align: left; cursor: pointer; }
.culture-module:hover { border-color: #718692; }.culture-module:focus-visible { border-color: var(--culture-energy); outline: 3px solid #66d9ff66; outline-offset: 3px; }
.culture-module > span:first-child { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border: 1px solid #647783; border-radius: 15px; color: #edf2f4; background: #172833; }.culture-module-icon { width: 29px; height: 29px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.culture-module-copy { display: grid; min-width: 0; gap: 4px; text-align: left; }.culture-module strong { color: #eef8fb; font-size: clamp(.82rem, .95vw, 1rem); line-height: 1.08; }.culture-module small { font-size: clamp(.7rem, .78vw, .84rem); font-weight: 800; }
.culture-module.left-top { top: 31%; left: 14%; }.culture-module.left-bottom { top: 69%; left: 14%; }.culture-module.right-top { top: 19%; left: 86%; }.culture-module.right-middle { top: 50%; left: 86%; }.culture-module.right-bottom { top: 81%; left: 86%; }
.culture-module.is-charging .culture-module-icon { animation: culture-module-charge 2.4s ease-out both; }.culture-module.is-charged .culture-module-icon { color: var(--culture-energy); stroke-width: 2.25; filter: drop-shadow(0 0 8px #66d9ffaa); }
@keyframes culture-line-charge { 0%, 5% { stroke-dashoffset: 0; opacity: 0; } 8% { stroke-dashoffset: 0; opacity: 1; } 76% { stroke-dashoffset: -.87; opacity: 1; } 80%, 100% { stroke-dashoffset: -.87; opacity: 0; } }
@keyframes culture-module-charge { 0%, 74% { color: #edf2f4; stroke-width: 1.8; transform: scale(1); filter: none; } 84%, 100% { color: var(--culture-energy); stroke-width: 2.35; transform: scale(1.16); filter: drop-shadow(0 0 10px #66d9ffdd); } }

@media (max-width: 1300px) {
  .class-culture-opening { padding-top: 58px; }.culture-title h1 { font-size: clamp(1.85rem, 3.1vw, 2.45rem); }.culture-power-grid { width: min(880px, 92%); height: min(385px, 54vh); }.culture-fuel-cell { width: 194px; min-height: 158px; padding: 14px; }.culture-battery { width: 44px; height: 56px; }.culture-fuel-cell > div > strong { font-size: .92rem; }.culture-fuel-cell > div > small { font-size: .68rem; }.culture-module { width: 208px; height: 70px; gap: 10px; padding: 8px 12px 8px 8px; }.culture-module > span:first-child { width: 44px; height: 44px; flex-basis: 44px; }.culture-module-icon { width: 25px; height: 25px; }.culture-module strong { font-size: clamp(.7rem, .86vw, .84rem); }.culture-module small { font-size: clamp(.62rem, .68vw, .72rem); }
}
@media (prefers-reduced-motion: reduce) {
  .culture-battery i, .culture-module-icon, .culture-power-lines .power-pulse { animation: none; }
  .culture-module.is-charging .culture-module-icon { color: var(--culture-energy); stroke-width: 2.25; filter: none; }
}

/* Page 11 recap: a stable backstage rail replaces the orbit. */
.classroom-side.scene-wrap .classroom-visual { padding-bottom: 0; }
.backstage-recap { display: grid; width: min(760px, 100%); height: clamp(310px, 35vh, 360px); grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
.backstage-stage-rail { display: grid; grid-template-rows: repeat(5, 1fr); gap: 7px; }
.backstage-stage-rail button { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 9px 14px; border: 1px solid #365568; border-radius: 12px; color: #8ba6b2; background: #0e1922c9; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.backstage-stage-rail button > b { overflow: hidden; font-size: clamp(.62rem, .72vw, .8rem); letter-spacing: .05em; line-height: 1.08; text-overflow: ellipsis; }.backstage-stage-rail button.is-active { color: #e2ad3e; }.backstage-stage-rail button:hover, .backstage-stage-rail button:focus-visible { border-color: #72def2; color: #e8fbff; outline: none; }
.backstage-focus, .backstage-overview { display: grid; min-width: 0; grid-template-rows: auto 96px minmax(0, 1fr); gap: 12px; padding: 20px 24px; overflow: hidden; border: 1px solid #3b6275; border-radius: 22px; background: radial-gradient(circle at 70% 20%, #183b50, #0d1923 66%); box-shadow: inset 0 1px #ffffff10, 0 18px 40px #0004; }
.backstage-focus header { display: grid; gap: 4px; }.backstage-focus header small, .backstage-overview > small { color: #e2ad3e; font-size: clamp(.62rem, .7vw, .78rem); font-weight: 950; letter-spacing: .13em; }.backstage-focus h2, .backstage-overview h2 { max-width: 24ch; margin: 0; color: #effaff; font-size: clamp(1.2rem, 1.7vw, 1.85rem); line-height: 1.04; letter-spacing: -.03em; }
.recap-keyword { color: #e2ad3e; background: transparent; font-weight: 900; }
.backstage-focus ul { display: grid; align-content: start; gap: 7px; margin: 0; padding-left: 21px; }.backstage-focus li { color: var(--course-text-white, #f4f7fa); font-size: clamp(.78rem, .9vw, 1rem); font-weight: 720; line-height: 1.32; }.backstage-focus li::marker { color: #70dff4; }
.backstage-mini-visual { display: grid; width: 100%; min-height: 92px; grid-template-columns: minmax(110px, 1fr) 50px minmax(110px, 1fr); align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid #3e6b7d; border-radius: 17px; background: #0b1720c9; }
.backstage-mini-visual > :is(span, b, strong) { display: grid; min-height: 54px; place-content: center; padding: 8px 10px; border: 1px solid #4b7282; border-radius: 13px; color: #dff8ff; background: #112b39; font-size: clamp(.65rem, .76vw, .84rem); font-weight: 950; letter-spacing: .05em; text-align: center; }.backstage-mini-visual > i { color: #e2ad3e; font-size: 1.45rem; font-style: normal; font-weight: 950; text-align: center; }
.backstage-mini-visual.decision { grid-template-columns: minmax(88px, 1fr) 24px minmax(120px, 1.25fr) 24px minmax(88px, 1fr); gap: 7px; padding: 10px; }.backstage-mini-visual.decision > :is(span, b, strong) { color: #e2ad3e; }
.backstage-mini-visual.compression > :is(span, strong) { align-content: center; gap: 5px; }.backstage-mini-visual.compression > :is(span, strong) b { color: #e2ad3e; font-size: clamp(1.05rem, 1.35vw, 1.5rem); }.backstage-mini-visual.compression > :is(span, strong) small { color: #c8dae2; font-size: clamp(.6rem, .68vw, .76rem); font-weight: 900; letter-spacing: .07em; }.backstage-mini-visual.compression > strong { border-color: #8570bd; background: #282044; }
.backstage-mini-visual.encryption > span { color: #e2ad3e; }.backstage-mini-visual.encryption > b { border-color: #658ed0; color: #d9e7ff; background: #182b4c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.backstage-mini-visual.encryption > i { display: grid; width: 44px; height: 44px; place-items: center; justify-self: center; border-radius: 50%; background: #203b66; font-size: 1.3rem; }
.backstage-mini-visual.delivery { grid-template-columns: 105px minmax(150px, 1fr) 105px; }.backstage-mini-visual.delivery > :is(span, strong) { color: #e2ad3e; }.backstage-mini-visual.delivery svg { width: 100%; height: 82px; overflow: visible; }.recap-network-links path { fill: none; stroke: #426a7c; stroke-width: 2; }.recap-network-route { fill: none; stroke: #69d9ed; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #69d9ed55); }.recap-network-nodes circle { fill: #112c3a; stroke: #71deef; stroke-width: 3; }
.backstage-mini-visual.impact { grid-template-columns: 1fr 36px 1fr 36px 1fr; }.backstage-mini-visual.impact > span { min-width: 0; font-size: 1.8rem; }.backstage-mini-visual.impact > i { font-size: 1.1rem; }
.backstage-overview { grid-template-rows: auto auto 1fr auto; place-items: center; text-align: center; }.backstage-overview h2 { max-width: 20ch; font-size: clamp(1.5rem, 2.2vw, 2.5rem); }.backstage-overview > div { display: grid; width: 112px; height: 112px; place-content: center; gap: 3px; border: 2px solid #e2ad3e; border-radius: 50%; color: #fff1bc; background: radial-gradient(circle at 50% 28%, #654715, #2b1e0b 72%); box-shadow: 0 0 34px #d79b3544; }.backstage-overview > div span { font-size: 2rem; line-height: .8; }.backstage-overview > div b { font-size: .72rem; letter-spacing: .08em; }.backstage-overview p { margin: 0; color: #a9c0ca; font-size: clamp(.72rem, .82vw, .9rem); font-weight: 750; }

@media (max-width: 1300px) {
  .backstage-recap { height: 320px; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }.backstage-stage-rail { gap: 5px; }.backstage-stage-rail button { padding: 7px 9px; }.backstage-focus, .backstage-overview { gap: 9px; padding: 15px 18px; }.backstage-mini-visual { min-height: 86px; padding: 10px 12px; }.backstage-mini-visual.delivery { grid-template-columns: 88px minmax(130px, 1fr) 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .backstage-stage-rail button { transition: none; }
}

/* Course-wide color hierarchy. */
:root { --course-connector: #788791; --course-connector-strong: #a8b4bc; --course-connector-soft: #53616a; --course-text-white: #f4f7fa; --course-highlight-gold: #e2ad3e; --course-title-recommendation: #f27c78; --course-title-data: #e8bd62; --course-title-compression: #bba2ff; --course-title-network: #7ce6df; --course-title-security: #8eb8ff; --course-title-impact: #f3a6d0; --course-title-recap: #9bdfff; }
.general-highlight { color: var(--course-highlight-gold); font-weight: 950; }
.impact-spotlight-caption p { color: var(--course-text-white); }
/* Structural connectors stay neutral; accent colors are reserved for meaning. */
.algorithm-black-box > i,
.algorithm-definition-arrow,
.coffee-analogy-flow > i,
.comparison-arrow,
.data-algorithm-flow > i,
.system-flow-row > i,
.backstage-mini-visual > i { color: var(--course-connector); }

.behavior-recording-bridge i { background: linear-gradient(90deg, transparent, var(--course-connector)); }
.behavior-recording-bridge i:last-child { background: linear-gradient(90deg, var(--course-connector), transparent); }

.simple-link i,
.direct-connection > i,
.request-lane > i,
.video-lane > i,
.preload-request-path > i,
.preload-video-path > i { background: var(--course-connector-soft); }

.network-links path,
.security-network-links line,
.recap-network-links path { stroke: var(--course-connector-soft); }
.selected-route,
.recap-network-route { stroke: var(--course-connector-strong); filter: drop-shadow(0 0 5px #a8b4bc44); }

.journey-route { stroke: var(--course-connector-strong); filter: drop-shadow(0 0 7px #a8b4bc3d); }
.journey-route-group.is-complete .journey-route { stroke: var(--course-connector-soft); }
.journey-route-traveler { fill: #e8edf0; stroke: var(--course-connector-strong); filter: drop-shadow(0 0 10px #dfe7eb66); }
.journey-timeline li:is(.is-visited, .is-active)::before { background: var(--course-connector-strong); }

.impact-link.viewer-platform,
.impact-link.viewer-advertiser,
.impact-link.platform-advertiser,
.impact-spotlight-links .viewer-platform,
.impact-spotlight-links .viewer-advertiser,
.impact-spotlight-links .platform-advertiser { stroke: var(--course-connector); }
.impact-spotlight-links path.is-active { stroke: var(--course-connector-strong); filter: drop-shadow(0 0 7px #a8b4bc55); }
.impact-relationship-rail > i { background: var(--course-connector); }
.impact-relationship-rail > i::before,
.impact-relationship-rail > i::after { border-color: var(--course-connector-strong); }

.recap-orbit-lines ellipse,
.recap-orbit-lines path,
.culture-route path,
.culture-energy-network path { stroke: var(--course-connector); filter: none; }
.culture-energy-network circle { fill: var(--course-connector-strong); stroke: #dce3e7; filter: drop-shadow(0 0 7px #a8b4bc55); }
.culture-drive-system article:nth-of-type(2)::after { background: var(--course-connector); }

/* Keep the Behavioral Data teaching sequence stable as its explanation expands. */
.classroom-side.scene-behavior:not(.reveal-0) .classroom-focus {
  grid-template-rows: minmax(clamp(272px, 29.1vh, 315px), max-content) minmax(0, 1fr) max-content;
}
.classroom-side.scene-behavior:not(.reveal-0) .classroom-step-controls {
  position: static;
  grid-row: 3;
  justify-self: end;
}
.classroom-side.scene-behavior:not(.reveal-0) .behavior-data-model {
  height: min(330px, 32vh);
}
.classroom-side.scene-preload:not(.reveal-0) .classroom-focus {
  grid-template-rows: minmax(225px, max-content) minmax(0, 1fr) max-content;
}