:root {
  color-scheme: dark;
  --night: #06172f;
  --ink: #0b2340;
  --ice: #eafcff;
  --cyan: #53e5f2;
  --teal: #0b91a0;
  --coral: #ff795f;
  --coral-dark: #a93235;
  --gold: #ffc85a;
  --muted: #59738b;
  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: 1050px; min-height: 700px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #031229; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #ffe17b; 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 { height: 100%; padding: 12px; }
.world { position: relative; height: 100%; min-height: 676px; overflow: hidden; isolation: isolate; border: 1px solid #286a8a; border-radius: 26px; background: #082b55 url("art/deep-freeze-world-01.webp") center/cover no-repeat; box-shadow: 0 8px 0 #021327, 0 26px 70px rgba(0,0,0,.5); }
.world::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg,rgba(2,18,42,.2),rgba(2,18,42,.02) 45%,rgba(2,18,42,.38)); }
.aurora { position: absolute; z-index: -1; top: -18%; right: 1%; width: 62%; height: 45%; opacity: .42; transform: rotate(-7deg); filter: blur(20px); border-radius: 50%; background: radial-gradient(ellipse,#6bffd8 0,rgba(113,166,255,.35) 34%,transparent 70%); animation: aurora 7s ease-in-out infinite alternate; }

.hud { position: absolute; z-index: 10; left: 20px; right: 20px; top: 18px; height: 70px; display: grid; grid-template-columns: 225px 1fr auto; align-items: center; gap: 18px; }
.mission-chip,.challenge-meter,.scoreboard { border: 1px solid rgba(146,233,255,.28); background: rgba(5,27,57,.88); box-shadow: 0 6px 0 rgba(1,12,30,.42); backdrop-filter: blur(12px); color: white; }
.mission-chip { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 17px; border-radius: 15px; }
.mission-chip span,.challenge-meter span,.scoreboard span,.rig-label span { color: #9dd8e9; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mission-chip strong { margin-top: 3px; font-size: 16px; }
.challenge-meter { justify-self: center; width: min(360px,100%); display: grid; grid-template-columns: 1fr auto; gap: 5px 13px; padding: 9px 15px; border-radius: 15px; }
.challenge-meter span b { color: white; font-size: 15px; }.challenge-meter strong { font-size: 12px; }
.challenge-meter > i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: #173d5e; }
.challenge-meter > i b { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),#8f7dff,var(--coral)); transition: width 260ms ease-out; }
.scoreboard { height: 70px; display: flex; align-items: stretch; padding: 7px; border-radius: 15px; }
.scoreboard > div { min-width: 70px; display: grid; place-content: center; padding: 0 11px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(164,226,239,.2); }.scoreboard strong { display: block; margin-top: 3px; color: white; font-size: 22px; line-height: 1; }.scoreboard strong i { color: var(--gold); font-style: normal; font-size: 15px; }

.number-rig { position: absolute; left: 22px; top: 104px; bottom: 22px; width: 326px; overflow: hidden; border: 1px solid rgba(143,232,255,.34); border-radius: 22px; background: linear-gradient(rgba(4,27,59,.79),rgba(3,20,48,.9)); box-shadow: 0 10px 35px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.rig-label { position: absolute; z-index: 6; left: 16px; right: 16px; top: 13px; display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border: 1px solid rgba(118,220,237,.25); border-radius: 12px; background: rgba(4,23,48,.82); color: white; }
.rig-label strong { min-width: 46px; color: var(--gold); font-size: 27px; line-height: 1; text-align: right; }
.line-shell { position: absolute; inset: 70px 15px 42px; touch-action: none; user-select: none; }
#numberLine { display: block; width: 100%; height: 100%; overflow: visible; }
.number-line-rail { stroke: #bdeef5; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(83,229,242,.6)); }
.number-tick { stroke: #9bd8e7; stroke-width: 3; stroke-linecap: round; cursor: pointer; transition: stroke-width 120ms ease-out,stroke 120ms ease-out; }
.number-tick:hover,.number-tick.is-selected { stroke: #ffe076; stroke-width: 6; }
.zero-tick { stroke: #ffb69e; stroke-width: 7; }.number-label { fill: white; font-size: 15px; font-weight: 900; pointer-events: none; text-anchor: end; dominant-baseline: middle; }.zero-label { fill: #ffd1c2; font-size: 18px; }
.zone-label { fill: #7eb7cc; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; pointer-events: none; }
.pod { position: absolute; z-index: 5; left: 116px; top: 50%; width: 112px; height: 88px; padding: 0; transform: translate(-50%,-50%); border: 0; background: transparent; filter: drop-shadow(0 8px 5px rgba(0,0,0,.45)); transition: top 260ms cubic-bezier(.2,.85,.25,1.15),transform 150ms ease-out; }
.pod img { width: 100%; height: 100%; object-fit: contain; }.pod b { position: absolute; right: 0; bottom: 4px; min-width: 36px; padding: 4px 7px; border: 2px solid #512b12; border-radius: 9px; color: #3a230e; background: var(--gold); box-shadow: 0 3px 0 #7c4319; font-size: 17px; }
.pod.is-moving { transform: translate(-50%,-50%) rotate(-4deg) scale(1.08); }.pod.is-wrong { animation: shake 330ms ease-out; }.pod.is-correct { animation: pod-pop 420ms ease-out; }
.target-beacon { position: absolute; z-index: 3; left: 189px; top: 50%; display: flex; align-items: center; gap: 5px; transform: translateY(-50%); color: #fff1a8; font-size: 12px; font-weight: 1000; transition: top 260ms ease-out; }.target-beacon i { width: 20px; height: 20px; border: 3px solid #ffd65c; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,214,92,.18),0 0 22px #ffd65c; animation: beacon 1.3s ease-out infinite; }.target-beacon.is-hidden { opacity: 0; }
.rig-hint { position: absolute; left: 0; right: 0; bottom: 9px; margin: 0; color: #9bc8d7; font-size: 11px; font-weight: 800; text-align: center; }

.mission-card { position: absolute; z-index: 3; left: 368px; right: 270px; top: 104px; bottom: 22px; display: grid; grid-template-rows: auto minmax(150px,1fr) auto auto auto; padding: 26px 30px 21px; overflow: hidden; border: 1px solid rgba(213,245,252,.72); border-radius: 22px; background: rgba(238,252,255,.94); box-shadow: 0 10px 0 rgba(1,24,50,.42),0 28px 55px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.mission-copy { text-align: center; }.mission-copy > span { color: #b2433f; font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.mission-copy h1 { margin: 7px 0 5px; font-size: clamp(30px,3.3vw,48px); line-height: .96; letter-spacing: -.05em; }.mission-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.equation-zone { min-height: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px 5px; text-align: center; }
.operation-card { min-width: min(480px,100%); padding: 20px 28px; border: 2px solid #98cbd5; border-radius: 20px; background: linear-gradient(#faffff,#dff6f8); box-shadow: 0 6px 0 #bbdce1; }.operation-card span { display: block; color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }.operation-card strong { display: block; margin-top: 8px; color: #082b50; font-size: clamp(38px,5vw,68px); line-height: 1; letter-spacing: -.04em; }.operation-card p { margin: 9px 0 0; color: #45677b; font-size: 13px; font-weight: 800; }
.compare-pair { display: flex; align-items: center; gap: 15px; }.temperature { min-width: 130px; padding: 18px 20px; border: 2px solid #87c7d5; border-radius: 18px; background: white; box-shadow: 0 6px 0 #c3e1e5; font-size: 36px; font-weight: 1000; }.compare-pair b { color: #588096; font-size: 24px; }
.feedback { min-height: 31px; display: grid; place-items: center; color: #157381; font-size: 14px; font-weight: 900; text-align: center; }.feedback.is-error { color: #ae3739; }
.action-area { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 11px; }
.primary,.choice { min-height: 58px; border: 2px solid #2c6d7c; border-radius: 14px; font-weight: 1000; transition: transform 130ms ease-out,box-shadow 130ms ease-out; }.primary { min-width: 225px; padding: 0 23px; color: white; background: #087f8f; box-shadow: 0 6px 0 #07505d; font-size: 16px; }.primary.coral { border-color: #8f2e30; background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }.primary:hover,.choice:hover { transform: translateY(-2px); }.primary:active,.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.choice-grid { width: min(600px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.choice { padding: 8px 12px; border-color: #9bbfc8; background: white; box-shadow: 0 5px 0 #c9dde1; font-size: 18px; }.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.phase-track { display: flex; justify-content: center; gap: 7px; padding-top: 8px; }.phase-track i { width: 31px; height: 6px; border-radius: 999px; background: #c8dade; }.phase-track i.is-done { background: #0e9baa; }.phase-track i.is-current { background: var(--coral); box-shadow: 0 0 0 3px rgba(255,121,95,.15); }

.nori-panel { position: absolute; z-index: 4; right: 22px; bottom: 22px; width: 226px; height: calc(100% - 126px); pointer-events: none; }.nori { position: absolute; right: -4px; bottom: -30px; width: 235px; max-height: 68%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 8px rgba(0,0,0,.42)); transition: transform 180ms ease-out; }.speech { position: absolute; top: 0; left: 0; right: 0; padding: 14px 15px; border: 2px solid #bcebf0; border-radius: 17px 17px 4px 17px; color: #153c55; background: rgba(246,254,255,.96); box-shadow: 0 6px 0 rgba(3,29,56,.35); font-size: 13px; font-weight: 900; line-height: 1.35; }.world.is-celebrating .nori { transform: rotate(5deg) translateY(-8px) scale(1.06); }.world.is-miss .nori { transform: rotate(-3deg); }
.frost-burst { position: absolute; z-index: 20; left: 48%; top: 49%; width: 330px; opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-12deg); pointer-events: none; }.world.is-celebrating .frost-burst { animation: frost-pop 760ms ease-out both; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 35px; max-width: 72%; padding: 10px 18px; opacity: 0; transform: translate(-50%,12px); border: 1px solid #7ed4e0; border-radius: 999px; color: white; background: #062543; box-shadow: 0 5px 0 rgba(0,0,0,.32); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes aurora { to { transform: translateX(-6%) rotate(-3deg) scale(1.08); opacity: .58; } }
@keyframes beacon { 50% { transform: scale(.72); box-shadow: 0 0 0 10px rgba(255,214,92,.08),0 0 28px #ffd65c; } }
@keyframes shake { 25% { transform: translate(-57%,-50%) rotate(-6deg); } 55% { transform: translate(-43%,-50%) rotate(5deg); } 80% { transform: translate(-53%,-50%) rotate(-2deg); } }
@keyframes pod-pop { 45% { transform: translate(-50%,-50%) scale(1.16) rotate(4deg); } }
@keyframes frost-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-12deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15) rotate(8deg); } }
@media (max-height: 780px) { .hud { top: 12px; }.number-rig,.mission-card { top: 92px; bottom: 15px; }.nori-panel { bottom: 15px; height: calc(100% - 111px); }.mission-card { padding-top: 19px; padding-bottom: 15px; }.operation-card { padding-top: 15px; padding-bottom: 15px; }.action-area { min-height: 67px; }.primary,.choice { min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }