:root {
  color-scheme: light;
  --ink: #102f3b;
  --muted: #57717a;
  --paper: #fffdf7;
  --teal: #20a69a;
  --teal-dark: #0b6b67;
  --coral: #f16f5d;
  --coral-dark: #a53e35;
  --gold: #f7c94f;
  --navy: #123d58;
  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: 980px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #dff4f2; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #075e86; outline-offset: 4px; }

.lesson { width: 100%; height: 100%; padding: 14px; }
.space-station { position: relative; width: min(1410px,100%); height: 100%; min-height: 620px; margin: auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(25,78,91,.2); border-radius: 28px; background: #dceff2; box-shadow: 0 9px 0 rgba(43,92,101,.12),0 28px 60px rgba(32,70,87,.18); }
.world-art { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(.86) brightness(1.06); transform: scale(1.01); }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg,rgba(232,247,247,.78),rgba(239,249,247,.34) 45%,rgba(225,242,245,.76)); }
.world-wash::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 51% 48%,rgba(255,255,255,.15),rgba(238,248,246,.62) 62%,rgba(220,239,242,.74)); }

.mission-hud { position: absolute; z-index: 30; left: 22px; right: 22px; top: 18px; height: 68px; display: grid; grid-template-columns: 235px 1fr auto; align-items: center; gap: 20px; }
.brand,.mission-progress,.scoreboard { border: 1px solid rgba(20,66,78,.14); background: rgba(255,253,247,.92); box-shadow: 0 5px 0 rgba(35,85,91,.11); backdrop-filter: blur(10px); }
.brand { height: 68px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 18px; }
.brand-mark { position: relative; width: 46px; height: 46px; flex: none; border: 3px solid var(--navy); border-radius: 50%; background: var(--gold); }
.brand-mark::after { position: absolute; left: -8px; right: -8px; top: 18px; height: 7px; content: ""; transform: rotate(-16deg); border: 3px solid var(--navy); border-radius: 50%; }
.brand-mark i,.brand-mark b { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.brand-mark i { left: 10px; top: 16px; }.brand-mark b { right: 10px; top: 16px; }
.brand small,.mission-progress span,.scoreboard span,.cargo-readout span { display: block; color: var(--muted); font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.brand strong { display: block; margin-top: 2px; font-size: 18px; }
.mission-progress { justify-self: center; min-width: 330px; height: 62px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 3px 16px; padding: 10px 16px; border-radius: 17px; }
.mission-progress strong { font-size: 15px; }.mission-dots { grid-column: 1/-1; display: flex; gap: 6px; }
.mission-dots i { width: 24px; height: 5px; border-radius: 9px; background: #d7dfdc; }.mission-dots i.done { background: var(--gold); }.mission-dots i.current { background: var(--teal); }
.scoreboard { height: 68px; display: flex; padding: 7px; border-radius: 18px; }
.scoreboard div { min-width: 68px; display: grid; place-content: center; padding: 0 12px; text-align: center; }.scoreboard div + div { border-left: 1px solid #d8e0dd; }
.scoreboard strong { display: block; margin-top: 2px; font-size: 21px; line-height: 1; }

.guide-bay { position: absolute; z-index: 8; left: 20px; top: 105px; bottom: 22px; width: 225px; }
.speech { position: absolute; z-index: 4; left: 52px; top: 0; width: 168px; min-height: 64px; display: grid; align-content: center; padding: 11px 13px; border: 1px solid rgba(26,72,83,.15); border-radius: 17px 17px 17px 5px; background: rgba(255,253,247,.96); box-shadow: 0 6px 17px rgba(31,72,83,.12); font-size: 12px; font-weight: 900; line-height: 1.3; }
.sticker-art { overflow: hidden; border: 8px solid white; border-radius: 25px; background: white; box-shadow: 0 8px 0 rgba(34,75,85,.12),0 15px 28px rgba(31,73,84,.16); }
.sticker-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mascot-sticker { position: absolute; left: 4px; top: 78px; width: 192px; height: 246px; transform: rotate(-2deg); transition: transform 160ms ease-out; }
.buddies-sticker { position: absolute; left: 31px; bottom: 3px; width: 180px; height: 158px; transform: rotate(2deg); }
.space-station.is-happy .mascot-sticker { animation: mascot-pop 520ms ease-out; }.space-station.is-miss .mascot-sticker { animation: mascot-shake 320ms ease-out; }

.scanner-console { position: absolute; z-index: 10; left: 258px; right: 270px; top: 105px; bottom: 22px; display: grid; grid-template-rows: auto auto minmax(190px,1fr) auto auto; gap: 10px; padding: 19px 24px 20px; border: 1px solid rgba(25,69,82,.16); border-radius: 26px; background: rgba(255,253,247,.96); box-shadow: 0 9px 0 rgba(38,86,91,.12),0 24px 44px rgba(32,75,83,.16); backdrop-filter: blur(14px); }
.console-top { min-height: 36px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 13px; }
.status-light,.skill-chip { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 7px 10px; border-radius: 999px; color: #396169; background: #e8f2ef; font-size: 9px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.status-light i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(32,166,154,.13); }.skill-chip { color: #713e09; background: #fff0bd; }
.difficulty { width: 175px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; }.difficulty span,.difficulty small { font-size: 9px; font-weight: 900; }.difficulty small { color: var(--muted); }
.difficulty > i { grid-column: 1/-1; height: 6px; overflow: hidden; border-radius: 9px; background: #dae4e1; }.difficulty > i b { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 220ms ease-out; }
.mission-copy { text-align: center; }.mission-copy > span { color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }.mission-copy h1 { margin: 4px 0 3px; font-size: clamp(27px,2.7vw,39px); line-height: 1.02; letter-spacing: -.045em; }.mission-copy p { margin: 0; color: var(--muted); font-size: 13px; }

.scanner-stage { position: relative; min-height: 190px; display: grid; place-items: center; overflow: hidden; border: 2px solid #bbd6d4; border-radius: 24px; background: radial-gradient(circle at 50% 48%,#fafffb 0 24%,#e7f5f1 66%,#d9ebe9 100%); box-shadow: inset 0 0 0 8px rgba(255,255,255,.52); }
.scan-rings,.scan-rings i { position: absolute; inset: 50%; border: 1px solid rgba(19,108,105,.14); border-radius: 50%; transform: translate(-50%,-50%); }.scan-rings i:nth-child(1){width:170px;height:170px}.scan-rings i:nth-child(2){width:260px;height:260px}.scan-rings i:nth-child(3){width:355px;height:355px}
.shape-display { position: relative; z-index: 3; width: 230px; height: 190px; display: grid; place-items: center; transform-origin: 50% 55%; transition: transform 180ms ease-out,filter 180ms ease-out; }
.shape-display svg { width: 190px; height: 170px; overflow: visible; filter: drop-shadow(0 9px 5px rgba(25,71,80,.18)); }
.shape-display .solid { stroke: var(--navy); stroke-width: 6; stroke-linejoin: round; }.shape-display .front { fill: #58c7b8; }.shape-display .side { fill: #23988f; }.shape-display .top { fill: #9ce5d8; }.shape-display .round { fill: url(#sphereShade); }.shape-display .detail { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }.shape-display .hidden-edge { fill: none; stroke: #527889; stroke-width: 3; stroke-dasharray: 7 6; }
.shape-display .flat-2d { fill: var(--coral); stroke: var(--navy); stroke-width: 7; stroke-linejoin: round; }.shape-display .object-label { fill: var(--paper); font: 900 16px "Avenir Next",sans-serif; letter-spacing: .08em; }
.scanner-stage.is-hint .shape-display svg { filter: drop-shadow(0 0 10px rgba(241,111,93,.48)); }.scanner-stage.is-hint .shape-display .detail,.scanner-stage.is-hint .shape-display .flat-2d { animation: trace-pulse 650ms ease-out 2; }
.scanner-stage.is-locked .shape-display { transform: rotateY(360deg) scale(.92); filter: drop-shadow(0 0 14px rgba(32,166,154,.38)); }.lock-stamp { position: absolute; z-index: 5; right: 18px; bottom: 15px; padding: 7px 10px; opacity: 0; transform: rotate(-7deg) scale(.7); border: 3px solid var(--teal-dark); border-radius: 8px; color: var(--teal-dark); font-size: 11px; font-weight: 1000; letter-spacing: .08em; transition: opacity 150ms ease-out,transform 150ms ease-out; }.scanner-stage.is-locked .lock-stamp { opacity: 1; transform: rotate(-7deg) scale(1); }
.feature-labels { position: absolute; z-index: 6; inset: 0; pointer-events: none; }.feature-labels span { position: absolute; min-width: 25px; height: 25px; display: grid; place-items: center; opacity: 0; transform: scale(.6); border: 2px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--gold); box-shadow: 0 2px 0 rgba(23,58,69,.2); font-size: 10px; font-weight: 1000; transition: opacity 160ms ease-out,transform 160ms ease-out; }.scanner-stage.is-locked .feature-labels span,.scanner-stage.is-hint .feature-labels span { opacity: 1; transform: scale(1); }
.evidence { min-height: 39px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #e8f5ee; }.evidence span { color: var(--teal-dark); font-size: 9px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }.evidence strong { font-size: 13px; }
.choice-dock { min-height: 78px; display: grid; place-items: center; }
.choices { width: min(650px,100%); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.choices.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice,.primary { min-height: 62px; border: 2px solid #c3d2cf; border-radius: 16px; background: white; box-shadow: 0 5px 0 #d8e2de; font-weight: 950; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.choice { padding: 8px 11px; font-size: 16px; }.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #c7ded9; }.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #c7ded9; }
.choice.bin { min-height: 72px; display: grid; grid-template-columns: 40px 1fr; align-items: center; text-align: left; }.bin-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--navy); background: #ffeb9c; font-size: 20px; }
.primary { min-width: 230px; padding: 0 22px; border-color: var(--teal-dark); color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 15px; }.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); }

.cargo-bay { position: absolute; z-index: 7; right: 20px; top: 105px; bottom: 22px; width: 235px; }
.pod-sticker { position: absolute; left: 8px; top: 12px; width: 220px; height: 260px; transform: rotate(1.5deg); }
.cargo-readout { position: absolute; left: 5px; right: 5px; bottom: 16px; min-height: 115px; padding: 17px; border: 1px solid rgba(25,70,81,.15); border-radius: 20px; background: rgba(255,253,247,.94); box-shadow: 0 7px 20px rgba(30,70,81,.13); }.cargo-readout strong { display: block; margin: 5px 0 4px; font-size: 18px; }.cargo-readout small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.toast { position: absolute; z-index: 60; left: 50%; bottom: 32px; max-width: 620px; padding: 10px 17px; opacity: 0; transform: translate(-50%,10px); border-radius: 999px; color: white; background: var(--coral-dark); 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); }
.celebration { position: absolute; z-index: 55; left: 50%; top: 49%; pointer-events: none; }.celebration i { position: absolute; opacity: 0; color: var(--gold); font-style: normal; font-size: 18px; }.space-station.is-celebrating .celebration i { animation: sparkle 680ms ease-out both; }.celebration i:nth-child(1){--x:-240px;--y:-150px}.celebration i:nth-child(2){--x:-130px;--y:-205px;animation-delay:40ms}.celebration i:nth-child(3){--x:5px;--y:-220px;animation-delay:80ms}.celebration i:nth-child(4){--x:150px;--y:-185px;animation-delay:120ms}.celebration i:nth-child(5){--x:245px;--y:-95px;animation-delay:160ms}.celebration i:nth-child(6){--x:205px;--y:80px;animation-delay:200ms}.celebration i:nth-child(7){--x:-180px;--y:100px;animation-delay:240ms}.celebration i:nth-child(8){--x:-260px;--y:-15px;animation-delay:280ms}

@keyframes mascot-pop { 0%,100%{transform:rotate(-2deg) scale(1)}45%{transform:rotate(2deg) scale(1.07)} }
@keyframes mascot-shake { 0%,100%{transform:translateX(0) rotate(-2deg)}30%{transform:translateX(-7px) rotate(-5deg)}70%{transform:translateX(6px) rotate(1deg)} }
@keyframes trace-pulse { 50%{stroke:var(--gold);stroke-width:11} }
@keyframes sparkle { 0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2) rotate(190deg)} }

@media (max-height: 750px) {
  .lesson { padding: 10px; }.mission-hud { top: 12px; }.guide-bay,.scanner-console,.cargo-bay { top: 91px; bottom: 15px; }.scanner-console { padding-top: 14px; padding-bottom: 14px; gap: 7px; }.scanner-stage { min-height: 165px; }.shape-display { height: 160px; }.shape-display svg { height: 145px; }.mascot-sticker { top: 70px; height: 215px; }.buddies-sticker { height: 130px; }.pod-sticker { height: 225px; }.cargo-readout { min-height: 98px; }.choice-dock { min-height: 67px; }.choice,.primary { min-height: 55px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }