:root {
	color-scheme: light;
	--ink: #202b27;
	--muted: #75827a;
	--line: #e5eae1;
	--paper: #f6f8f1;
	--green: #33795c;
	--bright: #c9f36b;
	--coral: #f17d61;
	--mono: "DM Mono", Consolas, monospace;
	--sans: "Manrope", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; }
button, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.topbar { height: 68px; display: flex; align-items: center; padding: 0 4.2%; background: #fff; border-bottom: 1px solid var(--line); gap: 58px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: 0; }
.brand > span:last-child > span { color: var(--green); }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: var(--bright); font: 500 13px var(--mono); }
.top-nav { display: flex; height: 100%; align-items: center; gap: 30px; }
.nav-link { height: 100%; display: flex; align-items: center; color: var(--muted); font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; }
.nav-link.active { color: var(--ink); border-color: var(--green); }
.player-bar { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.streak { font-size: 12px; font-weight: 700; color: #59675d; }
.streak span:first-child { color: #e99342; margin-right: 4px; }
.theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 19px; line-height: 1; transition: background .18s, transform .18s; }
.theme-toggle:hover { background: var(--paper); transform: rotate(-12deg); }
.theme-toggle:focus-visible { outline: 2px solid #ee946a; outline-offset: 3px; }
.player-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #f6d9cb; border: 2px solid #fff; box-shadow: 0 0 0 1px #e8c7b7; color: #704937; font-size: 12px; font-weight: 800; }
.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; min-height: calc(100vh - 116px); }
.sidebar { padding: 34px 22px 26px 30px; border-right: 1px solid var(--line); background: #f3f6ec; }
.world-label, .eyebrow, .trail-heading { color: var(--muted); font: 500 10px var(--mono); letter-spacing: 0; }
.world-label { display: flex; align-items: center; gap: 8px; color: var(--green); }
.world-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #78a96b; }
.sidebar h2 { margin: 12px 0 5px; font-size: 22px; line-height: 1.22; letter-spacing: 0; }
.world-copy { margin: 0; color: var(--muted); font-size: 12px; }
.trail-heading { margin: 37px 0 11px; display: flex; justify-content: space-between; }
.trail-progress { height: 4px; background: #e0e6da; border-radius: 9px; overflow: hidden; }
.trail-progress span { display: block; width: 0; height: 100%; background: var(--green); transition: width .45s ease; }
.mission-list { padding: 0; margin: 16px 0 0; list-style: none; }
.mission-item { position: relative; display: flex; align-items: flex-start; gap: 11px; min-height: 64px; padding: 9px 6px; border-radius: 7px; }
.mission-item.current { background: #e7eee0; }
.mission-number { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dce3d8; border-radius: 50%; color: #89958b; font: 10px var(--mono); }
.mission-item.current .mission-number, .mission-item.completed .mission-number { background: var(--green); color: white; border-color: var(--green); }
.mission-info { display: grid; gap: 4px; padding-top: 2px; }
.mission-info strong { font-size: 11px; font-weight: 800; }
.mission-info small { color: var(--muted); font-size: 10px; }
.mission-status { margin-left: auto; color: var(--green); font-size: 13px; }
.lock-icon { margin-left: auto; color: #9da79c; font: 13px var(--mono); }
.sidebar-note { display: flex; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #e1e7db; color: #ad7641; }
.sidebar-note > span { font-size: 18px; }
.sidebar-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.sidebar-note strong { color: var(--ink); }
.game-area { max-width: 1080px; width: 100%; padding: 28px clamp(24px, 5vw, 68px) 36px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.eyebrow { margin: 0 0 6px; }
.eyebrow span { color: #b5beb2; margin: 0 4px; }
.page-heading h1 { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: 0; }
.xp-pill { padding: 7px 11px; border: 1px solid #e7eadf; border-radius: 20px; background: white; color: #6e795e; font: 11px var(--mono); }
.xp-pill span { color: #e99442; }
.xp-pill strong { color: var(--ink); }
.scene { position: relative; height: 218px; overflow: hidden; isolation: isolate; border: 1px solid #e2e9dc; border-radius: 8px; background-color: #dcefd8; background-image: radial-gradient(#7ea77b35 1px, transparent 1px); background-size: 18px 18px; }
.scene-label { position: absolute; top: 14px; left: 16px; z-index: 4; display: flex; align-items: center; gap: 7px; color: #55715d; font: 10px var(--mono); }
.live-dot { width: 6px; height: 6px; }
.scene-sun { position: absolute; width: 70px; height: 70px; top: 27px; right: 12%; border-radius: 50%; background: #f4d977; opacity: .95; }
.scene-hill { position: absolute; width: 125%; left: -12%; border-radius: 50% 50% 0 0 / 32% 32% 0 0; }
.hill-back { height: 116px; bottom: 40px; background: #afd1a1; transform: rotate(-4deg); }
.hill-front { height: 100px; bottom: -8px; background: #85b67e; transform: rotate(3deg); }
.scene-tree { position: absolute; z-index: 2; width: 30px; height: 63px; bottom: 72px; }
.scene-tree::before { content: ""; position: absolute; left: 4px; top: 0; width: 25px; height: 32px; border-radius: 50% 50% 42% 42%; background: #528765; box-shadow: -8px 12px 0 -2px #649772; }
.scene-tree i { position: absolute; left: 13px; bottom: 0; width: 6px; height: 36px; background: #856547; }
.scene-tree b { position: absolute; top: 7px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #c9f36b; }
.tree-one { left: 12%; bottom: 79px; transform: scale(.8); }
.tree-two { right: 21%; bottom: 73px; transform: scale(1.15); }
.tree-three { right: 7%; bottom: 74px; transform: scale(.75); }
.portal { position: absolute; z-index: 3; right: 33%; bottom: 44px; width: 58px; height: 87px; border: 8px solid #397859; border-bottom: 0; border-radius: 32px 32px 0 0; background: #c9f36b; box-shadow: 0 0 23px #d6ff7b, inset 0 0 12px #71ac66; }
.portal span { position: absolute; right: -15px; top: 38px; width: 8px; height: 8px; border-radius: 50%; background: #f9f4d4; }
.portal i { position: absolute; left: 5px; top: 18px; width: 6px; height: 6px; background: white; border-radius: 50%; opacity: .9; }
.scene-path { position: absolute; z-index: 1; left: 0; right: 0; bottom: -40px; height: 87px; border-radius: 50% 50% 0 0; background: #d6ca9c; transform: rotate(-1deg); }
.robot { position: absolute; z-index: 5; left: 23%; bottom: 47px; width: 42px; height: 62px; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.robot-antenna { position: absolute; z-index: 1; top: 0; left: 20px; width: 2px; height: 10px; background: #52625a; }
.robot-antenna::after { content: ""; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.robot-face { position: absolute; top: 8px; left: 4px; width: 34px; height: 27px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 2px solid #53665b; border-radius: 8px; background: #fffdf1; }
.robot-face i { width: 4px; height: 6px; border-radius: 3px; background: #34473e; }
.robot-body { position: absolute; left: 8px; top: 38px; width: 26px; height: 18px; border-radius: 6px 6px 4px 4px; background: #f17d61; border: 2px solid #b95d49; }
.robot-leg { position: absolute; top: 54px; width: 5px; height: 8px; border-radius: 0 0 3px 3px; background: #52665c; }
.robot-leg.left { left: 13px; }
.robot-leg.right { right: 13px; }
.robot-cheer { transform: translateX(255px) translateY(-3px) rotate(8deg); }
.scene-caption { position: absolute; z-index: 4; right: 13px; bottom: 10px; color: #55715d; font-size: 9px; }
.challenge-heading { display: flex; align-items: center; gap: 11px; margin: 24px 0 16px; }
.challenge-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #e6eddf; color: var(--green); font: 11px var(--mono); }
.challenge-heading .eyebrow { margin-bottom: 2px; font-size: 9px; }
.challenge-heading h2 { margin: 0; font-size: 16px; }
.difficulty { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #8a967d; font: 9px var(--mono); }
.difficulty i { width: 6px; height: 6px; border-radius: 50%; background: #8fb775; }
.challenge-grid { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(310px, 1.28fr); gap: 24px; align-items: start; }
.lesson-copy > p { max-width: 300px; margin: 3px 0 18px; color: #5c6960; font-size: 12px; line-height: 1.8; }
.lesson-copy code, .success-banner code { color: #276348; font: 12px var(--mono); }
.hint-box { display: flex; gap: 9px; padding: 11px 12px; border-left: 2px solid #e5a84c; background: #fff8e9; color: #bd8138; }
.hint-box > span { font-size: 14px; }
.hint-box p { margin: 0; color: #786b55; font-size: 10px; line-height: 1.7; }
.hint-box strong { display: block; margin-bottom: 2px; color: #74582e; font-size: 10px; }
.code-panel { overflow: hidden; border: 1px solid #33453d; border-radius: 7px; background: #202b27; color: #e4eee5; box-shadow: 0 6px 20px #27382d13; }
.editor-bar { height: 37px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #34433b; color: #9dac9d; font: 10px var(--mono); }
.editor-bar > span:first-child { display: flex; gap: 4px; margin-right: 3px; }
.editor-bar i { width: 6px; height: 6px; border-radius: 50%; background: #e98268; }
.editor-bar i:nth-child(2) { background: #edc461; }
.editor-bar i:nth-child(3) { background: #81bd7b; }
.python-tag { margin-left: auto; color: #aabbab; font-size: 9px; }
.editor-body { display: flex; min-height: 60px; padding: 12px 14px 5px; gap: 14px; }
.line-number { padding-top: 1px; color: #708076; font: 12px var(--mono); }
.editor-body textarea { width: 100%; min-height: 42px; resize: vertical; border: 0; outline: 0; background: transparent; color: #d9ec91; caret-color: #d9ec91; font: 12px/1.6 var(--mono); }
.editor-help { padding: 0 14px 9px 42px; color: #84958a; font-size: 9px; }
.editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid #34433b; }
.editor-language { display: flex; align-items: center; gap: 6px; color: #9cab9e; font: 9px var(--mono); }
.editor-language span { width: 6px; height: 6px; border-radius: 50%; background: #79b777; }
.run-button { min-height: 31px; padding: 0 12px; border: 0; border-radius: 5px; background: var(--bright); color: #27342b; cursor: pointer; font-size: 10px; font-weight: 800; transition: background .15s, transform .15s; }
.run-button:hover { background: #d7ff8a; transform: translateY(-1px); }
.run-button:focus-visible, .nav-link:focus-visible { outline: 2px solid #ee946a; outline-offset: 3px; }
.run-button span { margin-right: 5px; font-size: 9px; }
.output-panel { display: flex; gap: 10px; min-height: 35px; align-items: flex-start; padding: 9px 13px; background: #18211d; color: #aab8ab; font: 10px/1.6 var(--mono); }
.output-prompt { color: #87a48c; }
.output-success { color: #d9ec91; }
.output-error { color: #f18c76; }
.success-banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 15px; border: 1px solid #d6e8c5; border-radius: 6px; background: #f0f8e8; color: #5a8a48; animation: rise-in .35s ease both; }
.success-banner[hidden] { display: none; }
.success-banner > span:first-child { font-size: 19px; }
.success-banner strong { color: #315c3f; font-size: 12px; }
.success-banner p { margin: 3px 0 0; color: #617467; font-size: 10px; }
.success-banner .reward { margin-left: auto; color: #568140; font: 11px var(--mono); }
.page-footer { max-width: 1440px; min-height: 48px; display: flex; justify-content: space-between; align-items: center; margin: auto; padding: 0 4.2%; border-top: 1px solid var(--line); color: #929c90; font: 9px var(--mono); }
.footer-separator { color: #c6cdc2; padding: 0 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1300px) { .scene { height: 245px; } }
@media (max-width: 850px) {
	.app-shell { grid-template-columns: 190px minmax(0, 1fr); }
	.sidebar { padding: 28px 15px; }
	.game-area { padding: 27px 26px 32px; }
	.challenge-grid { grid-template-columns: 1fr; gap: 12px; }
	.lesson-copy > p { max-width: 100%; margin-bottom: 10px; }
	.hint-box { max-width: 100%; }
	.scene { height: 190px; }
}
@media (max-width: 600px) {
	.topbar { height: 58px; padding: 0 18px; gap: 23px; }
	.brand { font-size: 16px; }
	.brand-mark { width: 27px; height: 27px; }
	.top-nav { gap: 17px; }
	.nav-link { font-size: 11px; }
	.player-bar { gap: 10px; }
	.streak { font-size: 10px; }
	.player-avatar { width: 30px; height: 30px; }
	.app-shell { display: flex; flex-direction: column; min-height: calc(100vh - 108px); }
	.sidebar { order: 2; padding: 17px 18px 20px; border-right: 0; border-top: 1px solid var(--line); }
	.sidebar h2 { margin: 6px 0 3px; font-size: 18px; }
	.world-label { font-size: 9px; }
	.world-copy, .sidebar-note { display: none; }
	.trail-heading { margin: 17px 0 8px; }
	.mission-list { display: flex; overflow-x: auto; gap: 6px; margin-top: 10px; padding-bottom: 4px; }
	.mission-item { flex: 0 0 145px; min-height: 57px; gap: 7px; padding: 7px 5px; }
	.mission-number { flex-basis: 25px; height: 25px; font-size: 9px; }
	.mission-info strong { font-size: 10px; }
	.mission-info small { font-size: 9px; }
	.game-area { padding: 23px 18px 25px; }
	.page-heading h1 { font-size: 21px; }
	.scene { height: 177px; }
	.scene-sun { width: 55px; height: 55px; right: 10%; }
	.portal { right: 24%; transform: scale(.85); transform-origin: bottom center; }
	.tree-two { right: 13%; }
	.tree-three { right: 3%; }
	.robot { left: 15%; }
	.robot-cheer { transform: translateX(155px) translateY(-3px) rotate(8deg); }
	.scene-caption { max-width: 155px; text-align: right; font-size: 8px; }
	.challenge-heading { margin: 20px 0 12px; }
	.challenge-heading h2 { font-size: 14px; }
	.difficulty { font-size: 8px; }
	.challenge-grid { gap: 12px; }
	.lesson-copy > p { font-size: 11px; line-height: 1.7; }
	.page-footer { min-height: 50px; padding: 0 18px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.marketing-site { overflow: hidden; }
.topbar { position: sticky; top: 0; z-index: 20; }
.player-bar { gap: 0; }
.theme-toggle { width: 38px; height: 38px; border-color: var(--green); background: var(--surface-soft); color: var(--ink); font-size: 21px; }
.theme-toggle:hover { background: var(--bright); transform: scale(1.05); }
.hero-section { position: relative; display: grid; grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr); align-items: center; gap: 48px; max-width: 1440px; min-height: 600px; margin: 0 auto; padding: 65px 8% 82px; background: radial-gradient(ellipse at 78% 47%, #e7efdc 0, transparent 47%); }
.hero-copy { position: relative; z-index: 1; max-width: 530px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--green); }
.hero-copy h1 { margin: 0; font-size: 57px; line-height: 1.08; letter-spacing: 0; font-weight: 800; }
.hero-copy h1 span { color: var(--green); }
.hero-description { max-width: 440px; margin: 20px 0 24px; color: #66746a; font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 11px; padding: 0 18px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 800; text-decoration: none; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .theme-toggle:focus-visible, .dialog-close:focus-visible, .teaser-control:focus-visible { outline: 2px solid #ee946a; outline-offset: 3px; }
.button-primary { background: #2f704f; color: #fff; }
.button-primary:hover { background: #235d40; }
.button-primary > span { font-size: 16px; }
.button-secondary { border-color: #d8dfd3; background: transparent; color: var(--ink); }
.button-secondary:hover { border-color: var(--green); background: #fff; }
.play-icon { display: grid; place-items: center; width: 21px; height: 21px; padding-left: 2px; border: 1px solid currentColor; border-radius: 50%; font-size: 8px; }
.hero-footnote { display: flex; align-items: center; gap: 7px; margin: 22px 0 0; color: #7b877d; font-size: 10px; }
.hero-footnote span { color: #d58952; font-size: 14px; }
.hero-visual { position: relative; width: 100%; min-height: 390px; overflow: hidden; border: 1px solid #d5e1ce; border-radius: 6px; background: linear-gradient(150deg, #deedd6 0%, #c7e1bd 56%, #bbd5ae 100%); box-shadow: 0 24px 65px #263c2917; }
.visual-topline { position: absolute; z-index: 6; top: 17px; right: 19px; left: 19px; display: flex; justify-content: space-between; color: #526f5a; font: 9px var(--mono); }
.hero-scene { position: absolute; inset: 39px 0 55px; height: auto; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.hero-scene .scene-sun { top: 30px; right: 16%; }
.hero-scene .hill-back { bottom: 43px; }
.hero-scene .hill-front { bottom: -10px; }
.hero-scene .scene-tree { bottom: 73px; }
.hero-scene .tree-one { left: 12%; bottom: 77px; }
.hero-scene .tree-two { right: 19%; }
.hero-scene .tree-three { right: 5%; }
.hero-scene .portal { right: 32%; bottom: 39px; transform: scale(1.08); }
.hero-scene .robot { left: 24%; bottom: 43px; transform: scale(1.1); transform-origin: bottom left; }
.visual-code { position: absolute; z-index: 6; bottom: 23px; left: 20px; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border: 1px solid #43554a; border-radius: 4px; background: #202b27; color: #a2afa4; font: 10px var(--mono); box-shadow: 0 7px 20px #25382d20; }
.visual-code code { color: #dce4d5; }
.visual-code code b { color: #d4eb92; font-weight: 400; }
.visual-code .code-check { color: #b8e192; }
.visual-caption { position: absolute; z-index: 6; right: 18px; bottom: 30px; display: flex; align-items: center; gap: 8px; color: #db9b46; }
.visual-caption > span { font-size: 16px; }
.visual-caption div { display: grid; gap: 3px; }
.visual-caption strong { color: #30483a; font-size: 10px; }
.visual-caption small { color: #58705d; font-size: 9px; }
.scroll-cue { position: absolute; right: 8%; bottom: 25px; left: 8%; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #dfe5d9; color: #78857a; font: 9px var(--mono); }
.scroll-cue > span:last-child { color: var(--green); font-size: 16px; }
.content-section { padding-right: max(8%, calc((100% - 1200px) / 2)); padding-left: max(8%, calc((100% - 1200px) / 2)); }
.intro-section { padding-top: 78px; padding-bottom: 86px; border-top: 1px solid var(--line); }
.section-index { color: var(--green); font: 10px var(--mono); }
.section-index span { margin-left: 8px; color: var(--muted); }
.intro-layout { display: grid; grid-template-columns: 1fr .74fr; gap: 70px; align-items: end; margin-top: 24px; }
.intro-layout h2, .section-heading h2, .trailer-copy h2, .download-copy h2 { margin: 0; font-size: 37px; line-height: 1.2; letter-spacing: 0; }
.intro-copy p { margin: 0 0 18px; color: #66746a; font-size: 13px; line-height: 1.9; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 11px; font-weight: 800; }
.text-link span { font-size: 16px; }
.learning-section { padding-top: 72px; padding-bottom: 88px; background: #eef2e8; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.section-heading h2 { font-size: 32px; }
.learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.learning-item { position: relative; padding-top: 16px; border-top: 1px solid #ced8c9; }
.learning-number { color: var(--green); font: 10px var(--mono); }
.learning-art { position: relative; height: 105px; display: flex; align-items: center; justify-content: center; margin: 12px 0 15px; overflow: hidden; border-radius: 3px; background: #dce9d5; color: #47634d; }
.art-terminal { gap: 8px; font: 13px var(--mono); }
.art-terminal > span { color: #76906d; }
.art-terminal i { color: #327457; font-style: normal; }
.art-branches { gap: 12px; }
.art-branches span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #6f9872; border-radius: 50%; background: #eef2e8; color: #347557; font: 13px var(--mono); }
.art-branches i, .art-branches b, .art-branches em { width: 25px; height: 1px; background: #8ba589; }
.art-branches b { transform: rotate(30deg); }
.art-branches em { transform: rotate(-30deg); }
.art-flag { align-items: flex-end; }
.art-flag i { width: 2px; height: 61px; background: #536a54; }
.art-flag span { position: absolute; top: 29px; left: calc(50% + 1px); color: #e18b55; font-size: 21px; }
.learning-item h3 { margin: 0 0 7px; font-size: 14px; }
.learning-item p { max-width: 320px; margin: 0; color: #6b796e; font-size: 11px; line-height: 1.8; }
.trailer-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; min-height: 380px; padding-top: 60px; padding-bottom: 60px; background: #26553e; color: #f3f5e9; }
.trailer-copy .section-index, .trailer-copy .section-index span { color: #bad49c; }
.trailer-copy h2 { margin-top: 24px; font-size: 35px; }
.trailer-copy > p { max-width: 360px; margin: 15px 0 22px; color: #d0ddcf; font-size: 12px; line-height: 1.8; }
.button-light { border-color: #c6d9bb; background: transparent; color: #fff; }
.button-light:hover { background: #fff; color: #26553e; }
.trailer-note { display: block; margin-top: 12px; color: #bfd0bd; font-size: 9px; }
.trailer-art { position: relative; min-height: 255px; display: grid; place-items: center; overflow: hidden; border: 1px solid #61816a; border-radius: 4px; background: radial-gradient(ellipse at 50% 63%, #6f9b69 0, #426e54 48%, #315c46 76%); }
.trailer-orbit { position: absolute; width: 210px; height: 210px; border: 1px solid #b7d59753; border-radius: 50%; }
.orbit-two { width: 290px; height: 290px; border-color: #b7d5972c; }
.trailer-glow { position: absolute; top: 37px; width: 76px; height: 76px; border-radius: 50%; background: #e9dc8e; box-shadow: 0 0 45px #f8edb668; }
.trailer-robot { position: relative; z-index: 1; width: 70px; height: 86px; margin-top: 50px; border: 3px solid #34483d; border-radius: 14px 14px 8px 8px; background: #fff8e9; box-shadow: 0 12px 0 -4px #f07d60; animation: robot-float 3s ease-in-out infinite; }
.trailer-robot span { position: absolute; top: 23px; left: 17px; width: 7px; height: 10px; border-radius: 4px; background: #34483d; box-shadow: 25px 0 #34483d; }
.trailer-robot i { position: absolute; top: -17px; left: 32px; width: 3px; height: 17px; background: #34483d; }
.trailer-robot i::after { position: absolute; top: -5px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #f07d60; content: ""; }
.trailer-robot b { position: absolute; right: 10px; bottom: 11px; left: 10px; height: 15px; border-radius: 4px; background: #d8e58b; }
.trailer-chip { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; justify-content: space-between; padding: 9px 10px; border: 1px solid #ffffff33; color: #e4ecda; font: 9px var(--mono); }
.trailer-chip span { color: #d6eb9b; }
.download-section { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 58px; padding-top: 78px; padding-bottom: 82px; }
.download-copy h2 { margin-top: 20px; font-size: 35px; }
.download-copy > p { max-width: 430px; margin: 13px 0 0; color: #6c796f; font-size: 12px; line-height: 1.8; }
.download-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.download-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: #eaf0e4; color: var(--green); font-size: 21px; }
.download-card > div:nth-child(2) { display: grid; gap: 4px; }
.download-card strong { font-size: 12px; }
.download-card > div:nth-child(2) span { color: #78847b; font-size: 9px; }
.download-card > div:nth-child(2) i { padding: 0 3px; font-style: normal; }
.download-button { min-height: 34px; padding: 0 12px; border: 1px solid #dce3d8; border-radius: 4px; background: #f1f3ee; color: #7d897e; cursor: not-allowed; font-size: 10px; font-weight: 800; }
.download-card > p { grid-column: 2 / -1; margin: -4px 0 0; color: #8a958b; font-size: 9px; }
.page-footer { padding-right: max(8%, calc((100% - 1200px) / 2)); padding-left: max(8%, calc((100% - 1200px) / 2)); }
.page-footer a:last-child { color: var(--green); font: 10px var(--sans); font-weight: 700; }
.footer-brand { color: #929c90; font: 9px var(--mono); }
.trailer-dialog { width: min(760px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; overflow: auto; border: 1px solid #647966; border-radius: 6px; background: #202b27; color: #eef3e9; box-shadow: 0 24px 90px #10181385; }
.trailer-dialog::backdrop { background: #111c16bd; backdrop-filter: blur(5px); }
.dialog-topbar { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #3b4c40; color: #c2d3c0; font: 9px var(--mono); }
.dialog-topbar > span > span { color: #748b78; }
.dialog-close { width: 29px; height: 29px; display: grid; place-items: center; border: 0; background: transparent; color: #dce7dc; cursor: pointer; font-size: 22px; }
.teaser-scene { position: relative; aspect-ratio: 16 / 8.4; min-height: 250px; overflow: hidden; background: radial-gradient(ellipse at 55% 72%, #81ad77 0, #557b5e 38%, #344f40 79%); }
.teaser-sun { position: absolute; top: 14%; right: 19%; width: 65px; aspect-ratio: 1; border-radius: 50%; background: #eedc99; box-shadow: 0 0 42px #eedc9966; }
.teaser-hill { position: absolute; right: -10%; bottom: -43%; left: -10%; height: 85%; border-radius: 50% 50% 0 0; background: #73966a; transform: rotate(-5deg); }
.teaser-portal { position: absolute; right: 24%; bottom: 24%; width: 57px; height: 92px; border: 7px solid #315e44; border-bottom: 0; border-radius: 30px 30px 0 0; background: #d2ee89; box-shadow: 0 0 27px #d2ee8970; }
.teaser-character { position: absolute; z-index: 2; bottom: 24%; left: 25%; width: 39px; height: 49px; border: 2px solid #394a3d; border-radius: 9px 9px 4px 4px; background: #fff9e7; box-shadow: 0 8px 0 -3px #ef8161; }
.teaser-character i { position: absolute; top: 13px; left: 8px; width: 4px; height: 7px; border-radius: 3px; background: #34483d; box-shadow: 14px 0 #34483d; }
.teaser-character b { position: absolute; top: -12px; left: 17px; width: 2px; height: 12px; background: #394a3d; }
.teaser-character b::after { position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #ef8161; content: ""; }
.teaser-title-card, .teaser-end-card { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; opacity: 0; }
.teaser-title-card p { color: #f0e49d; font: 10px var(--mono); }
.teaser-title-card h2 { margin: 8px 0; color: #fffdf3; font-size: 29px; line-height: 1.2; }
.teaser-end-card { gap: 5px; background: #244832b8; }
.teaser-end-card > span { color: #d1ee8b; font: 26px var(--mono); }
.teaser-end-card strong { font-size: 26px; }
.teaser-end-card small { margin-top: 3px; color: #d5e3ce; font: 9px var(--mono); }
.teaser-timeline { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 3px; background: #ffffff31; }
.teaser-timeline span { display: block; width: 0; height: 100%; background: #d3ed8c; }
.teaser-scene.is-playing .teaser-character { animation: teaser-walk 8s cubic-bezier(.4,0,.2,1) both; }
.teaser-scene.is-playing .teaser-title-card { animation: teaser-title 8s ease both; }
.teaser-scene.is-playing .teaser-end-card { animation: teaser-end 8s ease both; }
.teaser-scene.is-playing .teaser-timeline span { animation: teaser-progress 8s linear both; }
.teaser-scene.is-paused * { animation-play-state: paused !important; }
.dialog-controls { min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; }
.dialog-controls p { flex: 1; margin: 0; color: #aab9aa; font-size: 9px; line-height: 1.5; }
.teaser-control { min-height: 30px; padding: 0 10px; border: 1px solid #536558; border-radius: 3px; background: transparent; color: #e2ece0; cursor: pointer; font-size: 9px; font-weight: 700; }
.teaser-control:hover { background: #34483a; }
@keyframes robot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes teaser-walk { 0% { left: 25%; } 45%, 68% { left: 56%; } 100% { left: 56%; opacity: 0; } }
@keyframes teaser-title { 0%, 8% { opacity: 0; transform: translateY(8px); } 16%, 51% { opacity: 1; transform: translateY(0); } 61%, 100% { opacity: 0; } }
@keyframes teaser-end { 0%, 65% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes teaser-progress { to { width: 100%; } }

html[data-theme="dark"] .hero-section { background: radial-gradient(ellipse at 78% 47%, #27382b 0, transparent 48%); }
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .intro-copy p,
html[data-theme="dark"] .download-copy > p { color: #b5c2b6; }
html[data-theme="dark"] .hero-footnote,
html[data-theme="dark"] .scroll-cue { color: #a7b4a7; }
html[data-theme="dark"] .scroll-cue { border-color: var(--line); }
html[data-theme="dark"] .hero-visual { border-color: #4a5c4c; background: linear-gradient(150deg, #314538 0%, #293e32 56%, #263b30 100%); }
html[data-theme="dark"] .visual-topline { color: #c1d3bb; }
html[data-theme="dark"] .visual-caption strong { color: #edf4e7; }
html[data-theme="dark"] .visual-caption small { color: #cadbc5; }
html[data-theme="dark"] .button-secondary { border-color: #4b5a4e; }
html[data-theme="dark"] .button-secondary:hover { background: #26332b; }
html[data-theme="dark"] .learning-section { background: #202b27; }
html[data-theme="dark"] .learning-item { border-color: #465449; }
html[data-theme="dark"] .learning-item p { color: #b6c3b7; }
html[data-theme="dark"] .learning-art { background: #2d4033; color: #c1d4bb; }
html[data-theme="dark"] .art-branches span { border-color: #7b9c7b; background: #29382e; color: #b6e0ad; }
html[data-theme="dark"] .art-branches i,
html[data-theme="dark"] .art-branches b,
html[data-theme="dark"] .art-branches em { background: #789177; }
html[data-theme="dark"] .download-card { background: #202b27; }
html[data-theme="dark"] .download-icon { background: #2d4033; }
html[data-theme="dark"] .download-card > div:nth-child(2) span,
html[data-theme="dark"] .download-card > p { color: #acb9ad; }
html[data-theme="dark"] .download-button { border-color: #455247; background: #303c32; color: #b6c2b6; }

@media (max-width: 900px) {
	.hero-section { grid-template-columns: minmax(0, .9fr) minmax(310px, 1.1fr); gap: 28px; min-height: 540px; padding-right: 5%; padding-left: 5%; }
	.hero-copy h1 { font-size: 46px; }
	.content-section { padding-right: 6%; padding-left: 6%; }
	.intro-layout { gap: 36px; }
	.trailer-section { gap: 34px; }
}
@media (max-width: 650px) {
	.topbar { height: 60px; padding-right: 16px; padding-left: 16px; gap: 15px; }
	.brand { flex: 0 0 auto; font-size: 15px; }
	.brand-mark { width: 27px; height: 27px; }
	.top-nav { flex: 1; justify-content: flex-end; gap: 11px; }
	.nav-link { font-size: 10px; }
	.player-bar { flex: 0 0 auto; }
	.theme-toggle { width: 31px; height: 31px; font-size: 17px; }
	.hero-section { display: flex; min-height: auto; flex-direction: column; align-items: stretch; gap: 30px; padding: 47px 20px 68px; background: radial-gradient(ellipse at 70% 42%, #e7efdc 0, transparent 45%); }
	.hero-copy { max-width: 100%; }
	.hero-copy .eyebrow { margin-bottom: 15px; font-size: 9px; }
	.hero-copy h1 { font-size: 42px; }
	.hero-description { max-width: 480px; margin: 15px 0 19px; font-size: 12px; }
	.button { min-height: 43px; padding-right: 13px; padding-left: 13px; font-size: 10px; }
	.hero-footnote { margin-top: 16px; font-size: 9px; }
	.hero-visual { min-height: 285px; }
	.visual-topline { top: 13px; right: 13px; left: 13px; font-size: 8px; }
	.hero-scene { inset: 33px 0 47px; }
	.hero-scene .portal { right: 25%; transform: scale(.83); transform-origin: bottom center; }
	.hero-scene .robot { left: 17%; transform: scale(.9); transform-origin: bottom left; }
	.visual-code { bottom: 13px; left: 12px; min-height: 34px; gap: 7px; padding: 0 8px; font-size: 8px; }
	.visual-caption { right: 10px; bottom: 19px; gap: 5px; }
	.visual-caption > span { font-size: 12px; }
	.visual-caption strong { font-size: 8px; }
	.visual-caption small { font-size: 7px; }
	.scroll-cue { right: 20px; bottom: 16px; left: 20px; }
	.content-section { padding-right: 20px; padding-left: 20px; }
	.intro-section { padding-top: 52px; padding-bottom: 58px; }
	.intro-layout { grid-template-columns: 1fr; gap: 18px; margin-top: 19px; }
	.intro-layout h2, .section-heading h2, .trailer-copy h2, .download-copy h2 { font-size: 29px; }
	.intro-copy p { font-size: 12px; }
	.learning-section { padding-top: 52px; padding-bottom: 58px; }
	.section-heading { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 27px; }
	.learning-grid { grid-template-columns: 1fr; gap: 22px; }
	.learning-item { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding-top: 13px; }
	.learning-number { grid-row: 1 / span 3; padding-top: 3px; }
	.learning-art { grid-column: 2; height: 76px; margin: 0 0 11px; }
	.learning-item h3, .learning-item p { grid-column: 2; }
	.learning-item h3 { font-size: 13px; }
	.learning-item p { font-size: 10px; }
	.trailer-section { grid-template-columns: 1fr; gap: 25px; padding-top: 51px; padding-bottom: 51px; }
	.trailer-copy h2 { margin-top: 19px; }
	.trailer-art { min-height: 215px; }
	.download-section { grid-template-columns: 1fr; gap: 25px; padding-top: 54px; padding-bottom: 57px; }
	.download-card { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 13px 11px; }
	.download-icon { width: 34px; height: 34px; }
	.download-card strong { font-size: 11px; }
	.download-card > div:nth-child(2) span { font-size: 8px; }
	.download-card > p { font-size: 8px; }
	.page-footer { min-height: 48px; padding-right: 20px; padding-left: 20px; }
	.trailer-dialog { width: calc(100% - 20px); }
	.teaser-scene { min-height: 210px; }
	.teaser-title-card h2 { font-size: 22px; }
	.dialog-controls { flex-wrap: wrap; gap: 7px; }
	.dialog-controls p { flex-basis: 100%; }
}
@media (max-width: 360px) {
	.topbar { gap: 9px; padding-right: 11px; padding-left: 11px; }
	.top-nav { gap: 8px; }
	.nav-link { font-size: 9px; }
	.brand { gap: 6px; font-size: 14px; }
	.theme-toggle { width: 28px; height: 28px; }
	.visual-caption { display: none; }
}

html[data-theme="dark"] {
	color-scheme: dark;
	--ink: #e5ede4;
	--muted: #9aa99c;
	--line: #35433a;
	--paper: #18211d;
	--green: #8fce9e;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .xp-pill { background: #202b27; }
html[data-theme="dark"] .sidebar { background: #202b27; }
html[data-theme="dark"] .streak { color: #c1cec2; }
html[data-theme="dark"] .player-avatar { border-color: #202b27; box-shadow: 0 0 0 1px #65574f; }
html[data-theme="dark"] .mission-item.current { background: #303d33; }
html[data-theme="dark"] .mission-number { border-color: #46554a; color: #a4b1a5; }
html[data-theme="dark"] .mission-item.current .mission-number,
html[data-theme="dark"] .mission-item.completed .mission-number { color: #18211d; }
html[data-theme="dark"] .trail-progress { background: #39483c; }
html[data-theme="dark"] .sidebar-note { border-color: #35433a; }
html[data-theme="dark"] .scene { border-color: #46564a; background-color: #293c34; background-image: radial-gradient(#a0c79728 1px, transparent 1px); }
html[data-theme="dark"] .scene-label,
html[data-theme="dark"] .scene-caption { color: #d1dfc9; }
html[data-theme="dark"] .scene-sun { background: #e4e9ba; box-shadow: 0 0 24px #e4e9ba65; }
html[data-theme="dark"] .hill-back { background: #536e59; }
html[data-theme="dark"] .hill-front { background: #3d5947; }
html[data-theme="dark"] .scene-tree::before { background: #345c47; box-shadow: -8px 12px 0 -2px #42694f; }
html[data-theme="dark"] .scene-path { background: #756c50; }
html[data-theme="dark"] .challenge-icon { background: #2c3b31; }
html[data-theme="dark"] .lesson-copy > p { color: #bcc9bd; }
html[data-theme="dark"] .lesson-copy code,
html[data-theme="dark"] .success-banner code { color: #a9d8a7; }
html[data-theme="dark"] .hint-box { border-color: #d6a650; background: #342f23; color: #e1b665; }
html[data-theme="dark"] .hint-box p { color: #d4c5a7; }
html[data-theme="dark"] .hint-box strong { color: #f0d194; }
html[data-theme="dark"] .success-banner { border-color: #496749; background: #26372b; color: #a9d59a; }
html[data-theme="dark"] .success-banner strong { color: #c1e7b2; }
html[data-theme="dark"] .success-banner p { color: #b5c8b6; }
html[data-theme="dark"] .success-banner .reward { color: #c2e99f; }
html[data-theme="dark"] .page-footer { border-color: var(--line); }

:root {
	--ink: #2c3a31;
	--muted: #748173;
	--line: #dce7dc;
	--paper: #f2f7ef;
	--green: #52775e;
	--bright: #efd98a;
	--coral: #7d9caf;
	--blue: #6f96ab;
	--sky: #e3eff2;
	--surface: #fbfdf7;
	--surface-soft: #e5eee5;
}

.topbar,
.xp-pill { background: var(--surface); }
.theme-toggle:hover { background: var(--surface-soft); }
.hero-section { background: radial-gradient(ellipse at 78% 47%, #e7ecdf 0, transparent 48%), linear-gradient(115deg, #f8f6ee 45%, #f2f1e8); }
.hero-description,
.intro-copy p,
.download-copy > p { color: #6f786e; }
.button-primary { background: #55735d; }
.button-primary:hover { background: #455f4d; }
.button-secondary { border-color: #d8dcd0; }
.button-secondary:hover { background: var(--surface); }
.hero-footnote { color: #777e72; }
.hero-footnote span { color: var(--coral); }
.hero-visual { border-color: #d7ded1; background: linear-gradient(150deg, #e5ebdf 0%, #d4e0d0 56%, #c7d5c5 100%); box-shadow: 0 24px 65px #35443714; }
.visual-topline { color: #5d725e; }
.scene-sun { background: var(--bright); }
.scene-tree::before { background: #58765f; box-shadow: -8px 12px 0 -2px #748d72; }
.scene-tree b { background: #e2cd97; }
.hill-back { background: #a8b99e; }
.hill-front { background: #829781; }
.portal { border-color: #4d6953; background: #bdcea2; box-shadow: 0 0 20px #d5daa46b, inset 0 0 12px #8ea184; }
.portal span { background: #faf4df; }
.portal i { background: #faf4df; }
.scene-path { background: #c6bea5; }
.robot-face { border-color: #526451; background: #f8f5e8; }
.robot-body { border-color: #ab6d61; background: var(--coral); }
.robot-leg,
.robot-antenna { background: #596b59; }
.scene-caption { color: #526953; }
.scroll-cue { border-color: #dedfd4; color: #788074; }
.learning-section { background: #edf0e6; }
.learning-item { border-color: #d1d8cb; }
.learning-art { background: #dfe6d9; color: #506752; }
.art-terminal > span { color: #7d9174; }
.art-terminal i,
.art-branches span { color: #55755e; }
.art-branches span { border-color: #8aa187; background: #f1f2e9; }
.art-branches i,
.art-branches b,
.art-branches em { background: #9aa995; }
.art-flag i { background: #637860; }
.art-flag span { color: var(--coral); }
.trailer-section { background: #3a5a48; }
.trailer-art { border-color: #728874; background: radial-gradient(ellipse at 50% 63%, #809578 0, #526e5a 48%, #405d4b 76%); }
.trailer-orbit { border-color: #e2d6a453; }
.orbit-two { border-color: #e2d6a42e; }
.trailer-glow { background: #e4cf98; box-shadow: 0 0 42px #e4cf9860; }
.trailer-robot { border-color: #596754; background: #f4f0df; box-shadow: 0 12px 0 -4px #ca8976; }
.trailer-robot span { background: #425547; box-shadow: 25px 0 #425547; }
.trailer-robot i { background: #425547; }
.trailer-robot i::after { background: var(--coral); }
.trailer-robot b { background: #bac89e; }
.trailer-chip span { color: var(--bright); }
.download-card { background: var(--surface); }
.download-icon,
.art-branches span { background: var(--surface-soft); }
.download-button { border-color: #dddcd0; background: #eeeee6; color: #73796f; }
.trailer-dialog { border-color: #657361; background: #27362d; }
.teaser-sun { background: var(--bright); box-shadow: 0 0 38px #e4cf9860; }
.teaser-hill { background: #718873; }
.teaser-portal { border-color: #526e55; background: #bacd9d; box-shadow: 0 0 24px #c8d5a360; }
.teaser-character { border-color: #586651; background: #f4f0df; box-shadow: 0 8px 0 -3px #ca8976; }
.teaser-character i { background: #425547; box-shadow: 14px 0 #425547; }
.teaser-character b { background: #586651; }
.teaser-character b::after { background: var(--coral); }
.teaser-title-card p { color: var(--bright); }
.teaser-end-card { background: #2d4938c9; }
.teaser-end-card > span,
.teaser-timeline span { color: var(--bright); }
.teaser-timeline span { background: var(--bright); }

html[data-theme="dark"] {
	--ink: #e8f0e8;
	--muted: #adbcaf;
	--line: #364b4a;
	--paper: #192a2c;
	--green: #87a98c;
	--bright: #a9924e;
	--coral: #496a7d;
	--blue: #416b7d;
	--sky: #243d49;
	--surface: #223739;
	--surface-soft: #2f4844;
	color-scheme: dark;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .xp-pill,
html[data-theme="dark"] .download-card { background: var(--surface); }
html[data-theme="dark"] .theme-toggle:hover { background: var(--surface-soft); }
html[data-theme="dark"] .hero-section { background: radial-gradient(ellipse at 78% 47%, #2d3a30 0, transparent 48%), linear-gradient(115deg, #1c2721 45%, #202c24); }
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .intro-copy p,
html[data-theme="dark"] .download-copy > p { color: #c0c4b6; }
html[data-theme="dark"] .hero-footnote,
html[data-theme="dark"] .scroll-cue { color: #afb7a8; }
html[data-theme="dark"] .scroll-cue { border-color: var(--line); }
html[data-theme="dark"] .button-primary { background: #779178; color: #19261f; }
html[data-theme="dark"] .button-primary:hover { background: #8da58a; }
html[data-theme="dark"] .button-secondary { border-color: #4b584b; color: var(--ink); }
html[data-theme="dark"] .button-secondary:hover { background: #2b392f; }
html[data-theme="dark"] .hero-visual { border-color: #4d5b4b; background: linear-gradient(150deg, #354438 0%, #2d3d32 56%, #29392f 100%); }
html[data-theme="dark"] .visual-topline { color: #d0d4bf; }
html[data-theme="dark"] .visual-caption strong { color: #f0eee0; }
html[data-theme="dark"] .visual-caption small { color: #d0d2bd; }
html[data-theme="dark"] .scene-tree::before { background: #46654f; box-shadow: -8px 12px 0 -2px #5b765e; }
html[data-theme="dark"] .hill-back { background: #536b57; }
html[data-theme="dark"] .hill-front { background: #405a49; }
html[data-theme="dark"] .portal { border-color: #789071; background: #a2b48b; box-shadow: 0 0 18px #d5daa435, inset 0 0 12px #71836d; }
html[data-theme="dark"] .scene-path { background: #625d4b; }
html[data-theme="dark"] .robot-face { border-color: #788474; background: #e8e6d6; }
html[data-theme="dark"] .robot-body { border-color: #9d7063; background: var(--coral); }
html[data-theme="dark"] .scene-caption { color: #e0e2cf; }
html[data-theme="dark"] .learning-section { background: #222e26; }
html[data-theme="dark"] .learning-item { border-color: #485447; }
html[data-theme="dark"] .learning-item p { color: #c0c4b6; }
html[data-theme="dark"] .learning-art { background: #2b3a30; color: #d3d8c5; }
html[data-theme="dark"] .art-branches span { border-color: #72866f; background: #344438; color: #c1d0ad; }
html[data-theme="dark"] .art-branches i,
html[data-theme="dark"] .art-branches b,
html[data-theme="dark"] .art-branches em { background: #768671; }
html[data-theme="dark"] .trailer-section { background: #2e493a; }
html[data-theme="dark"] .trailer-art { border-color: #586c58; background: radial-gradient(ellipse at 50% 63%, #637960 0, #405b48 48%, #304b3a 76%); }
html[data-theme="dark"] .trailer-robot { border-color: #596856; background: #e8e6d6; }
html[data-theme="dark"] .trailer-robot span { background: #35483b; box-shadow: 25px 0 #35483b; }
html[data-theme="dark"] .trailer-robot i { background: #35483b; }
html[data-theme="dark"] .trailer-robot b { background: #aebd91; }
html[data-theme="dark"] .download-icon { background: #334238; }
html[data-theme="dark"] .download-card > div:nth-child(2) span,
html[data-theme="dark"] .download-card > p { color: #b7bdad; }
html[data-theme="dark"] .download-button { border-color: #4a5649; background: #344137; color: #c0c4b6; }
html[data-theme="dark"] .trailer-dialog { border-color: #566752; background: #25332b; }
html[data-theme="dark"] .teaser-hill { background: #526d57; }
html[data-theme="dark"] .teaser-portal { border-color: #829477; background: #a4b78d; }
html[data-theme="dark"] .teaser-character { border-color: #66725f; background: #e8e6d6; }
html[data-theme="dark"] .teaser-character i { background: #35483b; box-shadow: 14px 0 #35483b; }
html[data-theme="dark"] .teaser-character b { background: #66725f; }
html[data-theme="dark"] .teaser-end-card { background: #243c2fc9; }

.hero-section { background: radial-gradient(ellipse at 78% 47%, var(--sky) 0, transparent 48%), linear-gradient(115deg, #f3f8ef 45%, #edf4ef); }
.button:focus-visible, .theme-toggle:focus-visible, .dialog-close:focus-visible, .teaser-control:focus-visible { outline-color: var(--blue); }
.hero-visual { border-color: #cbdedc; background: linear-gradient(150deg, #dfedf0 0%, #d9eadf 56%, #eee9c8 100%); }
.visual-topline { color: #54715d; }
.visual-caption { color: #b29c4f; }
.visual-caption strong { color: #354b3b; }
.visual-caption small { color: #60796a; }
.scene-sun { background: var(--bright); }
.scene-tree::before { background: #52745b; box-shadow: -8px 12px 0 -2px #71917a; }
.scene-tree b { background: var(--bright); }
.hill-back { background: #a8c6b0; }
.hill-front { background: #7da48e; }
.portal { border-color: #496d58; background: #f0df91; box-shadow: 0 0 20px #eee39b70, inset 0 0 12px #c8b86f; }
.scene-path { background: #e6dfb1; }
.robot-face { border-color: #526b5a; }
.robot-body { border-color: #66859a; background: var(--coral); }
.robot-leg, .robot-antenna { background: #50685a; }
.scene-caption { color: #4d6b57; }
.scroll-cue { border-color: #d7e3db; }
.learning-section { background: #e5eff0; }
.learning-item { border-color: #d0e0dd; }
.learning-art { background: #edf0d8; color: #536b56; }
.art-terminal > span { color: #668aa0; }
.art-terminal i, .art-branches span { color: #50745b; }
.art-branches span { border-color: #91aa91; background: #f3f5e2; }
.art-branches i, .art-branches b, .art-branches em { background: #9aafa2; }
.art-flag i { background: #617b65; }
.art-flag span { color: #d2b951; }
.trailer-section { background: #e1edf1; color: var(--ink); }
.trailer-copy .section-index, .trailer-copy .section-index span { color: var(--green); }
.trailer-copy > p { color: #5f746d; }
.button-light { border-color: #78968a; color: #3f644e; }
.button-light:hover { background: #52775e; color: #fff; }
.trailer-note { color: #687c74; }
.trailer-art { border-color: #c0d5d5; background: radial-gradient(ellipse at 50% 63%, #b6d4bb 0, #93bac0 48%, #7499a4 100%); }
.trailer-orbit { border-color: #f0e39b83; }
.orbit-two { border-color: #f0e39b4a; }
.trailer-glow { background: #f0dc87; box-shadow: 0 0 42px #efd98a75; }
.trailer-robot { border-color: #536c5b; background: #fbf7e3; box-shadow: 0 12px 0 -4px #819eae; }
.trailer-robot span { background: #415b4a; box-shadow: 25px 0 #415b4a; }
.trailer-robot i { background: #415b4a; }
.trailer-robot i::after { background: #7598a8; }
.trailer-robot b { background: #d8e3a0; }
.trailer-chip { border-color: #fff9; color: #344d40; }
.trailer-chip span { color: #698da2; }
.download-card { border-color: #d7e3d8; }
.download-icon { background: #e4eee1; }
.download-button { border-color: #d6dfd7; background: #e8eee5; color: #647464; }
.trailer-dialog { border-color: #bdcfbf; background: #f3f7ed; color: #2c3a31; }
.dialog-topbar { border-color: #d8e1d5; color: #526a57; }
.dialog-topbar > span > span { color: #7a9aad; }
.dialog-close { color: #405646; }
.teaser-scene { background: radial-gradient(ellipse at 55% 72%, #b4d5bf 0, #91bdc1 46%, #779eac 100%); }
.teaser-sun { background: #f0dc87; box-shadow: 0 0 38px #efd98a75; }
.teaser-hill { background: #82a98e; }
.teaser-portal { border-color: #557358; background: #eedc91; box-shadow: 0 0 24px #f0dc8770; }
.teaser-character { border-color: #546b58; background: #fbf7e5; box-shadow: 0 8px 0 -3px #829eae; }
.teaser-character i { background: #415b4a; box-shadow: 14px 0 #415b4a; }
.teaser-character b { background: #546b58; }
.teaser-character b::after { background: #7598a8; }
.teaser-title-card p { color: #f4df8c; }
.teaser-end-card { background: #305442c9; }
.teaser-end-card > span { color: #f0dc87; }
.teaser-timeline { background: #ffffff70; }
.teaser-timeline span { background: #efd982; }
.dialog-controls p { color: #69776b; }
.teaser-control { border-color: #b9c9bb; color: #3d5848; }
.teaser-control:hover { background: #e2ecdf; }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .xp-pill,
html[data-theme="dark"] .download-card { background: var(--surface); }
html[data-theme="dark"] .hero-section { background: radial-gradient(ellipse at 78% 47%, #263f47 0, transparent 48%), linear-gradient(115deg, #192a2c 45%, #1c302d); }
html[data-theme="dark"] .hero-visual { border-color: #405d5d; background: linear-gradient(150deg, #29404a 0%, #2c4439 56%, #394331 100%); }
html[data-theme="dark"] .visual-topline { color: #c1d5c0; }
html[data-theme="dark"] .visual-caption { color: #c0a957; }
html[data-theme="dark"] .visual-caption strong { color: #e3ebdc; }
html[data-theme="dark"] .visual-caption small { color: #bbcbba; }
html[data-theme="dark"] .scene-sun { background: var(--bright); }
html[data-theme="dark"] .scene-tree::before { background: #395a4a; box-shadow: -8px 12px 0 -2px #4a6c5d; }
html[data-theme="dark"] .scene-tree b { background: #a9924e; }
html[data-theme="dark"] .hill-back { background: #3e6554; }
html[data-theme="dark"] .hill-front { background: #315443; }
html[data-theme="dark"] .portal { border-color: #6c9077; background: #a38e49; box-shadow: 0 0 17px #c5a94b42, inset 0 0 12px #73663a; }
html[data-theme="dark"] .scene-path { background: #55543a; }
html[data-theme="dark"] .robot-face { border-color: #789184; background: #d7e0cc; }
html[data-theme="dark"] .robot-body { border-color: #577687; background: #496a7d; }
html[data-theme="dark"] .robot-leg, html[data-theme="dark"] .robot-antenna { background: #729080; }
html[data-theme="dark"] .scene-caption { color: #c8dacb; }
html[data-theme="dark"] .learning-section { background: #203b42; }
html[data-theme="dark"] .learning-item { border-color: #38565a; }
html[data-theme="dark"] .learning-item p { color: #c0cfca; }
html[data-theme="dark"] .learning-art { background: #2d4645; color: #c7d4c0; }
html[data-theme="dark"] .art-terminal > span { color: #84a9bd; }
html[data-theme="dark"] .art-terminal i, html[data-theme="dark"] .art-branches span { color: #a3bf9e; }
html[data-theme="dark"] .art-branches span { border-color: #6e8d79; background: #2d4642; }
html[data-theme="dark"] .art-branches i,
html[data-theme="dark"] .art-branches b,
html[data-theme="dark"] .art-branches em { background: #69877d; }
html[data-theme="dark"] .art-flag i { background: #6a8b75; }
html[data-theme="dark"] .art-flag span { color: #a9924e; }
html[data-theme="dark"] .trailer-section { background: #203943; color: #e8f0e8; }
html[data-theme="dark"] .trailer-copy .section-index, html[data-theme="dark"] .trailer-copy .section-index span { color: #a8bd9d; }
html[data-theme="dark"] .trailer-copy > p { color: #bfcec8; }
html[data-theme="dark"] .button-light { border-color: #799793; color: #dbe9de; }
html[data-theme="dark"] .button-light:hover { background: #55775f; color: #fff; }
html[data-theme="dark"] .trailer-note { color: #b1c4ba; }
html[data-theme="dark"] .trailer-art { border-color: #486268; background: radial-gradient(ellipse at 50% 63%, #456b60 0, #355660 48%, #294652 100%); }
html[data-theme="dark"] .trailer-orbit { border-color: #b7a05278; }
html[data-theme="dark"] .orbit-two { border-color: #b7a05240; }
html[data-theme="dark"] .trailer-glow { background: #a9924e; box-shadow: 0 0 38px #a9924e70; }
html[data-theme="dark"] .trailer-robot { border-color: #6e8877; background: #d8e0ca; box-shadow: 0 12px 0 -4px #496a7d; }
html[data-theme="dark"] .trailer-robot span, html[data-theme="dark"] .trailer-robot i { background: #355143; }
html[data-theme="dark"] .trailer-robot span { box-shadow: 25px 0 #355143; }
html[data-theme="dark"] .trailer-robot i::after { background: #496a7d; }
html[data-theme="dark"] .trailer-robot b { background: #879b67; }
html[data-theme="dark"] .trailer-chip { border-color: #ffffff40; color: #dbe8dc; }
html[data-theme="dark"] .trailer-chip span { color: #91afbc; }
html[data-theme="dark"] .download-icon { background: #30483e; }
html[data-theme="dark"] .download-button { border-color: #485c53; background: #2b4039; color: #bfcec1; }
html[data-theme="dark"] .trailer-dialog { border-color: #425b5b; background: #223739; color: #e8f0e8; }
html[data-theme="dark"] .dialog-topbar { border-color: #3b5452; color: #bfd0c5; }
html[data-theme="dark"] .dialog-topbar > span > span { color: #7397a8; }
html[data-theme="dark"] .dialog-close { color: #e0e8dd; }
html[data-theme="dark"] .teaser-scene { background: radial-gradient(ellipse at 55% 72%, #3d6558 0, #315461 46%, #233e4d 100%); }
html[data-theme="dark"] .teaser-sun { background: #a9924e; box-shadow: 0 0 36px #a9924e70; }
html[data-theme="dark"] .teaser-hill { background: #345948; }
html[data-theme="dark"] .teaser-portal { border-color: #64836c; background: #a38e49; box-shadow: 0 0 22px #aa945270; }
html[data-theme="dark"] .teaser-character { border-color: #6a8271; background: #d8e0ca; box-shadow: 0 8px 0 -3px #496a7d; }
html[data-theme="dark"] .teaser-character i { background: #355143; box-shadow: 14px 0 #355143; }
html[data-theme="dark"] .teaser-character b { background: #6a8271; }
html[data-theme="dark"] .teaser-character b::after { background: #496a7d; }
html[data-theme="dark"] .teaser-title-card p { color: #c3ad65; }
html[data-theme="dark"] .teaser-end-card { background: #1c3239d9; }
html[data-theme="dark"] .teaser-end-card > span, html[data-theme="dark"] .teaser-timeline span { color: #a9924e; }
html[data-theme="dark"] .teaser-timeline { background: #ffffff36; }
html[data-theme="dark"] .teaser-timeline span { background: #a9924e; }
html[data-theme="dark"] .dialog-controls p { color: #bfcec1; }
html[data-theme="dark"] .teaser-control { border-color: #50675e; color: #dbe8dc; }
html[data-theme="dark"] .teaser-control:hover { background: #30483e; }