:root {
  color-scheme: light;
  --ink: #173347;
  --muted: #667b87;
  --paper: #fffdf7;
  --paper-strong: #fff;
  --navy: #183f58;
  --teal: #1c877f;
  --teal-dark: #11615d;
  --coral: #f26c50;
  --coral-dark: #aa3d2e;
  --gold: #f7bf42;
  --gold-dark: #a86a12;
  --sky: #dff3ff;
  --line: rgba(26, 67, 84, .17);
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 960px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--sky); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #0e6d91; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { width: 100%; height: 100%; padding: 14px; }
.observatory { position: relative; width: min(1340px,100%); height: 100%; min-height: 620px; margin: auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(40,95,113,.18); border-radius: 28px; background: #dff2fb; box-shadow: 0 9px 0 rgba(51,105,119,.12), 0 26px 60px rgba(36,83,98,.16); }
.world-art { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.82) brightness(1.07) blur(1.5px); transform: scale(1.012); }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(180deg,rgba(245,252,255,.32),rgba(246,251,247,.58) 57%,rgba(232,246,248,.88)); }
.world-wash::after { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 51% 39%,rgba(255,255,255,.06) 0 19%,rgba(255,255,255,.55) 56%,rgba(255,255,255,.78) 100%); }

.mission-strip { position: absolute; z-index: 30; left: 24px; top: 20px; min-height: 50px; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border: 1px solid rgba(34,76,90,.14); border-radius: 999px; background: rgba(255,253,247,.85); box-shadow: 0 5px 18px rgba(35,79,92,.09); backdrop-filter: blur(10px); }
.mode-label,.level-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.mission-dots { display: flex; align-items: center; gap: 7px; }
.mission-dots i { width: 12px; height: 12px; border: 2px solid #b7c6c7; border-radius: 50%; background: #edf1ed; transition: transform 180ms ease-out,background 180ms ease-out; }
.mission-dots i.done { border-color: var(--gold-dark); background: var(--gold); }
.mission-dots i.current { transform: scale(1.22); border-color: var(--teal-dark); background: var(--teal); box-shadow: 0 0 0 4px rgba(28,135,127,.12); }

.practice-hud { position: absolute; z-index: 30; left: 24px; top: 20px; min-height: 54px; display: grid; grid-template-columns: auto 180px auto auto; align-items: center; gap: 14px; padding: 8px 15px; border: 1px solid rgba(34,76,90,.14); border-radius: 18px; background: rgba(255,253,247,.9); box-shadow: 0 5px 18px rgba(35,79,92,.09); backdrop-filter: blur(10px); }
.practice-hud > div:not(.difficulty-track) { min-width: 48px; text-align: center; }
.practice-hud span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.practice-hud strong { display: block; margin-top: 1px; font-size: 18px; line-height: 1; }
.difficulty-track { height: 8px; overflow: hidden; border-radius: 999px; background: #dfe9e7; }
.difficulty-track i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 240ms ease-out; }

.mute { position: absolute; z-index: 50; right: 22px; top: 20px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(34,76,90,.16); border-radius: 50%; color: var(--navy); background: rgba(255,253,247,.88); box-shadow: 0 4px 14px rgba(35,79,92,.1); }
.mute svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mute .sound-off,.mute[aria-pressed="true"] .sound-on { display: none; }.mute[aria-pressed="true"] .sound-off { display: block; }

.sun-source { position: absolute; z-index: 2; left: -66px; top: 31%; width: 176px; height: 176px; border-radius: 50%; background: radial-gradient(circle at 63% 40%,#fff8be 0 12%,#ffd45b 35%,#f4a92f 75%); box-shadow: 0 0 44px rgba(255,192,73,.5),0 0 120px rgba(255,200,88,.25); }
.sun-source::after { position: absolute; inset: -20px; content: ""; border: 2px solid rgba(247,191,66,.28); border-radius: 50%; }
.sun-beams { position: absolute; z-index: 1; left: 84px; right: 22%; top: 22%; height: 265px; opacity: .58; clip-path: polygon(0 29%,100% 0,100% 100%,0 71%); background: linear-gradient(90deg,rgba(255,216,103,.26),rgba(255,216,103,.02)); }
.sun-beams i { position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg,rgba(255,204,67,.82),rgba(255,220,115,.08)); }
.sun-beams i:nth-child(1){top:12%}.sun-beams i:nth-child(2){top:37%}.sun-beams i:nth-child(3){top:62%}.sun-beams i:nth-child(4){top:87%}

.earth-wrap { position: absolute; z-index: 8; left: 53%; top: 34%; width: 390px; height: 390px; transform: translate(-50%,-50%); transition: transform 300ms ease-out; }
#globeCanvas { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }
.globe-halo { position: absolute; inset: 18%; border-radius: 50%; background: rgba(126,214,244,.22); filter: blur(20px); }
.fallback-earth { position: absolute; z-index: 1; left: 50%; top: 50%; width: 230px; height: 230px; display: none; transform: translate(-50%,-50%); overflow: hidden; border-radius: 50%; background: #218dcc; box-shadow: inset -32px -18px 44px rgba(12,49,75,.3); }
.fallback-earth i { position: absolute; left: 28px; top: 45px; width: 118px; height: 70px; border-radius: 55% 45% 60% 35%; background: #68c474; transform: rotate(-12deg); box-shadow: 74px 81px 0 -18px #68c474,127px 31px 0 -27px #68c474; }
.fallback-earth::after { position: absolute; left: 50%; top: -18px; width: 5px; height: 270px; content: ""; transform: rotate(23.5deg); background: white; box-shadow: 0 0 0 2px var(--navy); }
.axis-caption { position: absolute; z-index: 4; left: 50%; bottom: 15px; min-width: 188px; padding: 7px 13px; transform: translateX(-50%); border: 1px solid rgba(28,70,85,.16); border-radius: 999px; color: #f7fbff; background: rgba(24,63,88,.9); box-shadow: 0 4px 12px rgba(24,63,88,.16); font-size: 11px; font-weight: 900; text-align: center; }
.hemisphere-tag { position: absolute; z-index: 5; right: 3px; min-width: 62px; padding: 6px 9px; opacity: 0; transform: translateX(8px); border-radius: 8px; color: var(--navy); background: rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(30,67,83,.16); font-size: 10px; font-weight: 900; text-align: center; transition: opacity 160ms ease-out,transform 160ms ease-out; }
.hemisphere-tag::before { position: absolute; right: 100%; top: 50%; width: 25px; height: 2px; content: ""; background: rgba(24,63,88,.38); }
.hemisphere-tag.north { top: 28%; }.hemisphere-tag.south { bottom: 29%; }
.show-hemispheres .hemisphere-tag { opacity: 1; transform: translateX(0); }
.show-hemispheres .hemisphere-tag.active { color: #fff; background: var(--coral); }

.orbit-map { position: absolute; z-index: 7; right: 85px; top: 96px; width: 205px; height: 120px; opacity: .82; }
.orbit-line { position: absolute; inset: 10px 6px; border: 2px dashed rgba(24,63,88,.24); border-radius: 50%; }
.orbit-sun { position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(247,191,66,.65); }
.orbit-earth { position: absolute; width: 19px; height: 19px; border: 2px solid white; border-radius: 50%; background: #268ec5; box-shadow: 0 0 0 3px rgba(26,92,120,.13); }
.orbit-earth i { position: absolute; left: 50%; top: -7px; width: 2px; height: 29px; transform: translateX(-50%) rotate(23.5deg); background: var(--navy); }
.orbit-earth.pos-0{left:1px;top:50px}.orbit-earth.pos-1{left:94px;top:0}.orbit-earth.pos-2{right:1px;top:50px}.orbit-earth.pos-3{left:94px;bottom:0}
.orbit-earth.is-current { transform: scale(1.3); background: var(--coral); box-shadow: 0 0 0 5px rgba(242,108,80,.14); }
.orbit-map b { position: absolute; left: 50%; top: 50%; min-width: 100px; transform: translate(-50%,21px); color: var(--navy); font-size: 10px; text-align: center; }

.beam-lab { position: absolute; z-index: 10; left: 25%; right: 19%; top: 105px; height: 330px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.beam-card { position: relative; height: 290px; overflow: hidden; border: 1px solid rgba(32,78,91,.14); border-radius: 24px; background: rgba(255,253,247,.85); box-shadow: 0 8px 26px rgba(37,78,91,.1); backdrop-filter: blur(10px); }
.beam-card > span { position: absolute; left: 19px; top: 16px; font-size: 15px; font-weight: 950; }.beam-card > strong { position: absolute; right: 18px; top: 18px; color: var(--teal-dark); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.mini-rays { position: absolute; left: 14%; right: 14%; top: 67px; height: 120px; }
.mini-rays i { position: absolute; left: 0; right: 0; height: 7px; border-radius: 5px; background: linear-gradient(90deg,#ffd768,#f6aa34); box-shadow: 0 0 9px rgba(247,191,66,.3); }
.mini-rays i:nth-child(1){top:10%}.mini-rays i:nth-child(2){top:46%}.mini-rays i:nth-child(3){top:82%}
.surface { position: absolute; left: 14%; right: 14%; bottom: 53px; height: 22px; border: 3px solid var(--navy); border-radius: 50%; background: #d6e4e1; }
.slanted .surface { transform: rotate(25deg); }
.footprint { position: absolute; left: 50%; bottom: 55px; width: 115px; height: 24px; opacity: .18; transform: translateX(-50%); border-radius: 50%; background: var(--coral); transition: width 650ms ease-out,opacity 220ms ease-out; box-shadow: 0 0 19px rgba(242,108,80,.35); }
.slanted .footprint { width: 190px; transform: translateX(-50%) rotate(25deg); }.is-revealed .footprint { opacity: .9; }
.beam-arrow { color: var(--teal-dark); font-size: 30px; font-weight: 900; }

.mascot { position: absolute; z-index: 18; left: 16px; bottom: 188px; width: 192px; height: 236px; pointer-events: none; transform-origin: 50% 100%; transition: transform 190ms ease-out; }
.mascot img { position: absolute; left: 5px; bottom: 0; width: 170px; height: 170px; object-fit: cover; object-position: center; border-radius: 22% 22% 42% 42%; mix-blend-mode: multiply; filter: drop-shadow(0 9px 8px rgba(37,72,83,.17)); }
.mascot-speech { position: absolute; z-index: 2; left: 86px; top: 6px; min-width: 125px; max-width: 170px; padding: 10px 13px; border: 1px solid rgba(31,75,91,.15); border-radius: 16px 16px 16px 4px; color: var(--navy); background: rgba(255,253,247,.96); box-shadow: 0 5px 16px rgba(38,78,90,.11); font-size: 11px; font-weight: 900; line-height: 1.25; }
.mascot.is-happy { animation: mascot-pop 500ms ease-out; }.mascot.is-miss { animation: mascot-shake 360ms ease-out; }

.field-report { position: absolute; z-index: 20; right: 34px; top: 245px; width: 275px; padding: 16px 18px; border: 1px solid rgba(32,78,91,.14); border-left: 5px solid var(--gold); border-radius: 8px 18px 18px 8px; background: rgba(255,253,247,.91); box-shadow: 0 9px 24px rgba(37,78,91,.12); backdrop-filter: blur(10px); }
.field-report span { display: block; color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }.field-report strong { display: block; margin-top: 4px; font-size: 17px; line-height: 1.15; }.field-report p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }

.decision-dock { position: absolute; z-index: 25; left: 228px; right: 24px; bottom: 22px; min-height: 154px; display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.5fr); align-items: center; gap: 26px; padding: 20px 22px 20px 26px; border: 1px solid rgba(35,76,88,.16); border-radius: 24px; background: rgba(255,253,247,.96); box-shadow: 0 8px 0 rgba(42,89,99,.1),0 20px 42px rgba(38,78,91,.14); backdrop-filter: blur(14px); }
.question-copy span { display: block; margin-bottom: 5px; color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.question-copy h1 { margin: 0; font-size: clamp(21px,2vw,29px); line-height: 1.05; letter-spacing: -.035em; }.question-copy p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.choice { min-height: 86px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 11px; border: 2px solid #cad7d5; border-radius: 16px; background: var(--paper-strong); box-shadow: 0 5px 0 #d9e2df; text-align: left; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #c9ded9; }.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #c9ded9; }
.choice-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #6a4207; background: #ffe18a; font-size: 18px; font-weight: 950; }
.choice strong { display: block; font-size: 13px; line-height: 1.15; }.choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.choices.two { grid-template-columns: repeat(2,minmax(0,1fr)); }.choice.wide { min-height: 80px; }
.primary { grid-column: 1/-1; width: min(360px,100%); min-height: 62px; justify-self: center; border: 2px solid var(--teal-dark); border-radius: 15px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 15px; font-weight: 950; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }

.intro-card,.finale { position: absolute; z-index: 45; left: 50%; top: 46%; width: min(510px,calc(100% - 70px)); min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px 45px; transform: translate(-50%,-50%); border: 1px solid rgba(35,76,88,.15); border-radius: 28px; background: rgba(255,253,247,.96); box-shadow: 0 16px 0 rgba(62,103,108,.08),0 36px 70px rgba(43,84,95,.2); text-align: center; backdrop-filter: blur(14px); }
.intro-kicker,.finale > span { color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.intro-card h1,.finale h1 { margin: 10px 0 9px; font-size: 38px; line-height: 1.02; letter-spacing: -.045em; }.intro-card p,.finale p { max-width: 380px; margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.intro-card button,.finale button { min-width: 230px; min-height: 56px; padding: 0 22px; border: 2px solid var(--teal-dark); border-radius: 15px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 15px; font-weight: 950; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }.intro-card button:hover,.finale button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }.intro-card button:active,.finale button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }
.finale img { width: 290px; height: 86px; margin: -5px 0 13px; object-fit: cover; object-position: center; mix-blend-mode: multiply; }.finale h1 { font-size: 35px; }

.toast { position: absolute; z-index: 60; left: 50%; bottom: 196px; max-width: 570px; padding: 10px 17px; opacity: 0; transform: translate(-50%,10px); border-radius: 999px; color: white; background: var(--navy); pointer-events: none; font-size: 12px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { background: var(--coral-dark); }
.celebration { position: absolute; z-index: 55; left: 53%; top: 32%; pointer-events: none; }.celebration i { position: absolute; width: 13px; height: 13px; opacity: 0; border-radius: 4px; background: var(--gold); }.observatory.is-celebrating .celebration i { animation: sparkle 700ms ease-out both; }.celebration i:nth-child(1){--x:-170px;--y:-95px}.celebration i:nth-child(2){--x:-95px;--y:-155px;animation-delay:40ms}.celebration i:nth-child(3){--x:10px;--y:-175px;animation-delay:80ms}.celebration i:nth-child(4){--x:125px;--y:-135px;animation-delay:120ms}.celebration i:nth-child(5){--x:175px;--y:-45px;animation-delay:160ms}.celebration i:nth-child(6){--x:125px;--y:65px;animation-delay:200ms}.celebration i:nth-child(7){--x:-115px;--y:70px;animation-delay:240ms}.celebration i:nth-child(8){--x:-190px;--y:5px;animation-delay:280ms}
.observatory.is-miss .decision-dock { animation: dock-shake 320ms ease-out; }

@keyframes mascot-pop { 0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.08) rotate(-3deg)} }
@keyframes mascot-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)} }
@keyframes dock-shake { 0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}70%{transform:translateX(6px)} }
@keyframes sparkle { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(190deg) scale(1.15)} }

@media (max-height: 760px) {
  .lesson { padding: 10px; }.observatory { border-radius: 23px; }.earth-wrap { top: 31%; width: 330px; height: 330px; }.beam-lab { top: 82px; height: 300px; }.beam-card { height: 260px; }.mascot { bottom: 164px; transform: scale(.88); transform-origin: left bottom; }.decision-dock { left: 205px; min-height: 139px; bottom: 15px; padding-top: 15px; padding-bottom: 15px; }.choice { min-height: 76px; }.toast { bottom: 169px; }.intro-card,.finale { min-height: 310px; padding-top: 27px; padding-bottom: 27px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }