:root {
  --navy: #173864;
  --navy-dark: #102c51;
  --ink: #203044;
  --paper: #fffdf4;
  --cream: #fff5d8;
  --sky: #8fd8f4;
  --aqua: #35bfc1;
  --green: #4ea659;
  --green-dark: #287047;
  --yellow: #ffd44d;
  --orange: #ef8a36;
  --red: #d9534f;
  --purple: #8153a3;
  --line: #c9d8da;
  --shadow: rgba(16, 44, 81, 0.17);
  --scene-accent: #4479b8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 11%, rgba(255, 255, 255, .5) 0 2px, transparent 3px),
    linear-gradient(180deg, #8ed8f2 0 510px, #edf4df 510px 100%);
  background-size: 38px 38px, auto;
  font-family: Arial, Helvetica, sans-serif;
}

button, a, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 4px solid #ffbc22;
  outline-offset: 3px;
}

.sky-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.star { position: absolute; color: rgba(255,255,255,.75); font-size: 28px; animation: twinkle 2.7s ease-in-out infinite; }
.star-a { left: 7%; top: 170px; }
.star-b { right: 8%; top: 240px; animation-delay: 1.1s; }
.cloud { position: absolute; width: 96px; height: 24px; border-radius: 30px; background: rgba(255,255,255,.72); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 44px; height: 44px; left: 15px; bottom: 0; }
.cloud::after { width: 56px; height: 56px; right: 10px; bottom: 0; }
.cloud-a { top: 115px; right: 18%; animation: cloud-drift 9s ease-in-out infinite alternate; }
.cloud-b { top: 330px; left: 8%; transform: scale(.68); opacity: .65; animation: cloud-drift 12s ease-in-out infinite alternate-reverse; }

.app-shell { position: relative; z-index: 1; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 26px; }

.topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font-size: 1.05rem; font-weight: 950; line-height: 1; }
.brand small { display: block; margin-bottom: 5px; font-size: .56rem; letter-spacing: .18em; }
.brand-mark { position: relative; display: block; width: 38px; height: 42px; border: 3px solid var(--navy); border-radius: 4px 4px 12px 12px; background: var(--paper); transform: rotate(-3deg); overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; height: 14px; border: 3px solid var(--navy); background: var(--paper); }
.brand-mark i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 17px; border-radius: 50% 50% 8px 8px; background: #58c85b; }
.brand-mark i::before, .brand-mark i::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.brand-mark i::before { left: 8px; top: 5px; } .brand-mark i::after { right: 7px; top: 9px; }

.status-card { display: flex; align-items: baseline; gap: 5px; padding: 10px 16px; border: 3px solid var(--navy); border-radius: 10px; background: rgba(255,253,244,.92); box-shadow: 5px 5px 0 var(--shadow); font-size: .8rem; font-weight: 800; }
.status-card strong { color: var(--navy); font-size: 1.35rem; }
.status-star { align-self: center; margin-right: 4px; color: var(--orange); font-size: 1.25rem; text-shadow: 1px 1px 0 var(--navy); }

.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); align-items: end; gap: 42px; padding: 34px 2px 26px; }
.eyebrow, .mission-kicker, .panel-kicker { margin: 0 0 8px; color: var(--navy); font-size: .7rem; font-weight: 950; letter-spacing: .16em; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { max-width: 790px; margin-bottom: 12px; color: var(--navy-dark); font-family: "Courier New", monospace; font-size: clamp(2.25rem, 5vw, 4.3rem); line-height: .98; letter-spacing: -.07em; text-shadow: 3px 3px 0 rgba(255,255,255,.45); }
.hero-copy { max-width: 720px; margin-bottom: 0; font-size: 1.05rem; font-weight: 650; line-height: 1.55; }
.mission-guide { display: grid; gap: 8px; padding: 17px; border: 3px solid rgba(23,56,100,.72); background: rgba(255,253,244,.82); box-shadow: 6px 6px 0 rgba(23,56,100,.13); }
.mission-guide span { display: flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 800; }
.mission-guide b { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 2px solid var(--navy); background: var(--yellow); box-shadow: 2px 2px 0 var(--navy); }

.mission-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; margin: 10px 0 18px; padding: 14px 18px; border: 3px solid var(--navy); border-radius: 5px; background: rgba(255,253,244,.92); box-shadow: 7px 7px 0 var(--shadow); }
.map-stop { display: grid; grid-template-columns: auto 22px 1fr; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 0; color: #778493; background: transparent; font-weight: 900; text-align: left; cursor: pointer; }
.map-stop:disabled { cursor: not-allowed; opacity: .52; }
.map-stop.is-active { color: var(--navy); }
.map-stop.is-complete { color: var(--green-dark); }
.stop-number { font-family: "Courier New", monospace; font-size: .65rem; }
.stop-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 3px solid currentColor; border-radius: 50%; color: var(--paper); background: currentColor; box-shadow: inset 0 0 0 4px var(--paper); }
.map-stop.is-active .stop-icon { animation: map-pulse 1.5s ease-in-out infinite; }
.map-stop.is-complete .stop-icon::after { content: "✓"; color: var(--paper); font-size: 12px; }
.map-line { width: 30px; border-top: 3px dashed #8e9dae; }

.mission-card { position: relative; border: 4px solid var(--navy); border-radius: 5px; background: var(--paper); box-shadow: 12px 12px 0 rgba(23,56,100,.22); overflow: hidden; }
.mission-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: linear-gradient(#8098a0 1px, transparent 1px), linear-gradient(90deg, #8098a0 1px, transparent 1px); background-size: 34px 34px; }
.mission-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 135px; padding: 27px 34px; color: var(--paper); background: var(--navy); }
.mission-heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px; background: repeating-linear-gradient(90deg, var(--yellow) 0 22px, var(--orange) 22px 44px); }
.mission-heading .mission-kicker { color: #c8def3; }
.mission-heading h2 { margin-bottom: 7px; font-family: "Courier New", monospace; font-size: clamp(1.65rem, 3vw, 2.65rem); line-height: 1; letter-spacing: -.05em; }
.mission-heading p:last-child { margin-bottom: 0; color: #e5f0f7; font-size: .92rem; font-weight: 650; }
.mission-badge { display: grid; place-items: center; flex: 0 0 auto; width: 104px; height: 104px; border: 4px solid var(--paper); border-radius: 50%; color: var(--navy); background: var(--yellow); box-shadow: 0 0 0 7px rgba(255,255,255,.14), inset -8px -8px 0 rgba(239,138,54,.22); font-family: "Courier New", monospace; font-size: .68rem; font-weight: 950; text-align: center; transform: rotate(4deg); }

.lab-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); }
.experiment-panel, .learn-panel { min-width: 0; padding: 28px 30px 32px; }
.experiment-panel { border-right: 3px dashed #9fb1b8; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-title-row h3, .learn-panel h3, .challenge-heading h3 { margin-bottom: 0; color: var(--navy); font-family: "Courier New", monospace; font-size: 1.35rem; letter-spacing: -.04em; }
.live-label { display: flex; align-items: center; gap: 6px; color: #687b86; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.live-label i { width: 8px; height: 8px; border-radius: 50%; background: #e15a49; box-shadow: 0 0 0 4px rgba(225,90,73,.17); animation: live-blink 1.2s ease-in-out infinite; }

.scene { position: relative; min-height: 430px; border: 3px solid var(--navy); background: #d9f0f5; box-shadow: 7px 7px 0 #d3e0d3; overflow: hidden; }
.scene-view { display: none; min-height: 424px; }
.scene-view.is-visible { display: block; animation: scene-in .45s ease both; }

/* Gravity */
.gravity-view { position: relative; background: linear-gradient(#8fd9f4 0 72%, #eaf6fa 72%); }
.gravity-sky { position: relative; height: 335px; overflow: hidden; }
.gravity-sky::before { content: ""; position: absolute; width: 72px; height: 72px; top: 26px; right: 40px; border: 3px solid var(--navy); border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 9px rgba(255,212,77,.2); }
.gravity-arrow { position: absolute; z-index: 3; left: 26px; top: 38px; display: grid; justify-items: center; color: var(--navy); }
.gravity-arrow span { font-family: "Courier New", monospace; font-size: 4rem; font-weight: 950; line-height: .8; animation: arrow-down 1.2s ease-in-out infinite; }
.gravity-arrow small { margin-top: 6px; font-size: .59rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }
.drop-track { position: absolute; z-index: 4; left: 49%; top: 38px; bottom: 46px; width: 5px; border-left: 3px dashed rgba(23,56,100,.3); }
.apple { position: absolute; left: -22px; top: 0; width: 42px; height: 40px; border: 3px solid #742c30; border-radius: 48% 48% 52% 52%; background: #dc4b45; box-shadow: inset -7px -6px 0 rgba(117,34,37,.18); transform-origin: 50% 100%; }
.apple::before { content: ""; position: absolute; width: 5px; height: 13px; left: 19px; top: -11px; border-radius: 4px; background: #634126; transform: rotate(9deg); }
.apple::after { content: ""; position: absolute; width: 15px; height: 8px; left: 20px; top: -8px; border-radius: 100% 0 100% 0; background: #47964a; transform: rotate(-15deg); }
.apple span { position: absolute; width: 7px; height: 10px; left: 8px; top: 8px; border-radius: 50%; background: rgba(255,255,255,.42); transform: rotate(25deg); }
.apple.is-dropping { animation: fall-earth .75s cubic-bezier(.52,.04,.8,.45) forwards, apple-squash .26s .75s ease; }
.gravity-view.is-moon .apple.is-dropping { animation: fall-earth 1.65s cubic-bezier(.4,.02,.82,.48) forwards, apple-squash .26s 1.65s ease; }
.planet-ground { position: absolute; left: -9%; right: -9%; bottom: -122px; height: 174px; border: 4px solid var(--navy); border-radius: 50% 50% 0 0; background: #50a861; box-shadow: inset 0 12px 0 #77c66f; transition: background .35s, box-shadow .35s; }
.planet-ground::before, .planet-ground::after { content: ""; position: absolute; background: #2b7b4d; border-radius: 50%; }
.planet-ground::before { width: 110px; height: 24px; left: 16%; top: 14px; transform: rotate(-4deg); }
.planet-ground::after { width: 82px; height: 18px; right: 22%; top: 6px; transform: rotate(8deg); }
.planet-ground.moon-ground { background: #b9c2c8; box-shadow: inset 0 12px 0 #d7dde0; }
.planet-ground.moon-ground::before, .planet-ground.moon-ground::after { background: #8c989f; }
.planet-label { position: absolute; top: 22px; left: 50%; padding: 4px 10px; border: 2px solid var(--navy); background: var(--paper); font: 950 .63rem "Courier New", monospace; transform: translateX(-50%); }
.astronaut { position: absolute; z-index: 5; right: 18%; bottom: 38px; width: 45px; height: 76px; transform-origin: center bottom; }
.helmet { position: absolute; left: 3px; top: 0; width: 39px; height: 39px; border: 3px solid var(--navy); border-radius: 50%; background: var(--paper); }
.helmet::before { content: ""; position: absolute; inset: 6px 4px 7px; border: 2px solid var(--navy); border-radius: 50%; background: #73cbe8; }
.body { position: absolute; left: 8px; top: 34px; width: 29px; height: 31px; border: 3px solid var(--navy); border-radius: 5px; background: var(--paper); }
.body::before, .body::after { content: ""; position: absolute; width: 20px; height: 6px; top: 7px; border: 3px solid var(--navy); background: var(--paper); }
.body::before { right: 20px; transform: rotate(28deg); } .body::after { left: 20px; transform: rotate(-28deg); }
.leg { position: absolute; top: 60px; width: 8px; height: 16px; border: 3px solid var(--navy); background: var(--paper); }
.leg.left { left: 10px; transform: rotate(5deg); } .leg.right { right: 9px; transform: rotate(-5deg); }
.astronaut.is-jumping { animation: jump-earth 1s cubic-bezier(.2,.65,.5,1) both; }
.gravity-view.is-moon .astronaut.is-jumping { animation: jump-moon 1.85s cubic-bezier(.2,.72,.5,1) both; }
.scene-controls { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 89px; padding: 16px; border-top: 3px solid var(--navy); background: var(--paper); }
.segmented { display: flex; border: 3px solid var(--navy); background: #fff; }
.segmented button { min-height: 42px; padding: 7px 12px; border: 0; border-right: 2px solid var(--navy); color: var(--navy); background: transparent; font-size: .76rem; font-weight: 900; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button.is-selected { color: var(--paper); background: var(--navy); }
.action-button, .secondary-button, .next-button { min-height: 46px; padding: 10px 16px; border: 3px solid var(--navy-dark); color: var(--navy-dark); background: var(--yellow); box-shadow: 4px 4px 0 var(--navy-dark); font-weight: 950; cursor: pointer; }
.action-button:active, .secondary-button:active, .next-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy-dark); }
.secondary-button { background: var(--paper); }

/* Forces */
.force-view { padding: 18px; background: #f5f0dc; }
.force-tabs, .boundary-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 auto 16px; border: 3px solid var(--navy); }
.force-tabs button, .boundary-tabs button { min-height: 42px; border: 0; border-right: 2px solid var(--navy); color: var(--navy); background: var(--paper); font-size: .75rem; font-weight: 950; cursor: pointer; }
.force-tabs button:last-child, .boundary-tabs button:last-child { border-right: 0; }
.force-tabs button.is-selected, .boundary-tabs button.is-selected { color: var(--paper); background: var(--navy); }
.force-demo { display: none; text-align: center; }
.force-demo.is-visible { display: block; animation: scene-in .35s ease both; }
.surface { position: relative; height: 164px; margin: 0 auto 12px; border: 3px solid var(--navy); background: #c6e6ee; overflow: hidden; }
.surface::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; border-top: 3px solid var(--navy); background: repeating-linear-gradient(90deg, #8b6042 0 22px, #b57c4d 22px 44px); transition: background .25s; }
.surface.smooth::after { background: #9ed6df; }
.surface.medium::after { background: repeating-linear-gradient(90deg, #a9a29a 0 38px, #c3bdb2 38px 76px); }
.surface-grain { position: absolute; z-index: 2; left: 0; right: 0; bottom: 25px; height: 12px; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(23,56,100,.55) 8px 11px, transparent 11px 19px); transition: opacity .25s; }
.surface.smooth .surface-grain { opacity: .08; } .surface.medium .surface-grain { opacity: .45; }
.crate { position: absolute; z-index: 3; left: 52px; bottom: 47px; width: 70px; height: 66px; border: 4px solid #5d3827; background: #a9663f; box-shadow: inset 0 0 0 7px #c28051; transition: left .85s cubic-bezier(.1,.7,.2,1); }
.crate::before, .crate::after { content: ""; position: absolute; left: 29px; top: -2px; width: 7px; height: 63px; background: #6c422e; transform: rotate(43deg); }
.crate::after { transform: rotate(-43deg); }
.crate i { position: absolute; z-index: 2; inset: 8px; border: 3px solid #6c422e; }
.surface.pushed .crate { left: calc(100% - 150px); }
.surface.pushed.medium .crate { left: 53%; }
.surface.pushed.rough .crate { left: 29%; }
.push-arrow { position: absolute; z-index: 4; left: 20px; bottom: 124px; color: var(--red); font: 950 .65rem "Courier New", monospace; }
.friction-readout { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 6px 10px; border: 2px solid var(--navy); background: var(--paper); font-size: .65rem; font-weight: 900; }
.friction-readout strong { color: var(--red); }
.range-control { display: grid; grid-template-columns: auto minmax(120px, 250px) auto; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; color: var(--navy); font-size: .62rem; font-weight: 900; }
.range-control input { width: 100%; accent-color: var(--navy); cursor: pointer; }
.magnet-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 95px; height: 205px; margin-bottom: 12px; border: 3px solid var(--navy); background: #dff2f5; overflow: hidden; }
.bar-magnet { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; width: 130px; height: 54px; border: 4px solid var(--navy); color: #fff; font: 950 1rem "Courier New", monospace; transition: transform .7s cubic-bezier(.2,.8,.3,1); }
.bar-magnet span { display: grid; place-items: center; background: #3975b8; }
.bar-magnet span + span { background: #d14d46; }
.magnet-right { transform: translateX(0); }
.magnet-stage.attract .magnet-left { transform: translateX(27px); }
.magnet-stage.attract .magnet-right { transform: translateX(-27px); }
.magnet-stage.repel .magnet-left { transform: translateX(-18px); }
.magnet-stage.repel .magnet-right { transform: translateX(18px); }
.magnet-stage.repel .magnet-right span:first-child { background: #d14d46; }
.magnet-stage.repel .magnet-right span:last-child { background: #3975b8; }
.field-lines { position: absolute; left: 50%; top: 50%; width: 150px; height: 100px; transform: translate(-50%,-50%); }
.field-lines i { position: absolute; inset: 10px 0; border: 2px dashed rgba(129,83,163,.5); border-radius: 50%; animation: field-pulse 1.4s ease-in-out infinite; }
.field-lines i:nth-child(2) { inset: 24px 15px; animation-delay: .25s; }
.field-lines i:nth-child(3) { inset: 38px 31px; animation-delay: .5s; }
.magnet-result { margin-bottom: 12px; color: var(--navy); font-weight: 900; }
.magnet-options { display: inline-flex; }

/* Earth layers */
.layers-view { padding: 20px; background: #e4f0e2; }
.earth-lab { display: grid; grid-template-columns: minmax(270px, 1fr) 24px minmax(230px, .9fr); align-items: center; gap: 10px; min-height: 310px; }
.earth-section { position: relative; width: 270px; height: 270px; margin: 0 auto; border: 4px solid var(--navy); border-radius: 50%; background: #55a961; box-shadow: inset 0 0 0 6px #8bc46f, 8px 8px 0 rgba(23,56,100,.14); overflow: hidden; }
.earth-section::before { content: ""; position: absolute; z-index: 8; left: -3px; top: -4px; width: 50%; height: 102%; border-right: 4px solid var(--navy); background: linear-gradient(135deg, #4ea7cb 0 48%, #64b666 48%); border-radius: 140px 0 0 140px; }
.earth-layer { position: absolute; z-index: 2; top: 50%; left: 50%; border: 3px solid var(--navy); border-radius: 50%; transform: translate(-50%,-50%); cursor: pointer; transition: filter .2s, transform .2s; }
.earth-layer:hover, .earth-layer.is-selected { filter: brightness(1.13) saturate(1.22); transform: translate(-50%,-50%) scale(1.03); }
.earth-layer.crust { z-index: 1; width: 100%; height: 100%; background: #4b9f55; }
.earth-layer.mantle { z-index: 3; width: 82%; height: 82%; background: #e05f36; }
.earth-layer.outer-core { z-index: 4; width: 49%; height: 49%; background: #f59d36; }
.earth-layer.inner-core { z-index: 5; width: 23%; height: 23%; background: #ffe274; }
.convection { position: absolute; z-index: 6; color: rgba(99,28,21,.72); font-size: 3.2rem; font-weight: 900; pointer-events: none; animation: convection-spin 3.5s linear infinite; }
.convection.c-one { left: 51%; top: 15%; }
.convection.c-two { right: 6%; bottom: 13%; animation-direction: reverse; }
.layer-pointer { border-top: 3px dashed var(--navy); }
.layer-readout { min-height: 220px; padding: 20px; border: 3px solid var(--navy); background: var(--paper); box-shadow: 6px 6px 0 rgba(23,56,100,.14); }
.layer-readout > p:first-child { margin-bottom: 7px; color: var(--purple); font-size: .62rem; font-weight: 950; letter-spacing: .1em; }
.layer-readout h4 { margin-bottom: 12px; color: var(--navy); font: 950 1.45rem "Courier New", monospace; letter-spacing: -.04em; }
.layer-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.layer-facts span { padding: 5px 8px; border: 2px solid var(--navy); background: #edf4de; font-size: .62rem; font-weight: 900; }
.layer-readout > p:last-child { margin-bottom: 0; font-size: .82rem; font-weight: 650; line-height: 1.48; }
.layer-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.layer-buttons button { min-height: 46px; padding: 8px; border: 2px solid var(--navy); color: var(--navy); background: var(--paper); font-size: .64rem; font-weight: 900; cursor: pointer; }
.layer-buttons button i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid var(--navy); border-radius: 50%; background: #4b9f55; }
.layer-buttons button:nth-child(2) i { background: #e05f36; }
.layer-buttons button:nth-child(3) i { background: #f59d36; }
.layer-buttons button:nth-child(4) i { background: #ffe274; }
.layer-buttons button.is-selected { color: var(--paper); background: var(--navy); }

/* Tectonic plates */
.plates-view { padding: 18px; background: #f1eadb; }
.boundary-tabs { grid-template-columns: repeat(3, 1fr); }
.tectonic-stage { position: relative; height: 230px; margin-bottom: 14px; border: 3px solid var(--navy); background: linear-gradient(#a7dce9 0 48%, #f7aa49 48% 100%); overflow: hidden; }
.tectonic-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: #d85335; opacity: .8; }
.plate { position: absolute; z-index: 4; top: 45%; width: 52%; height: 64px; border: 3px solid var(--navy); background: #8b6849; transition: transform .8s ease; }
.plate::before { content: ""; position: absolute; left: -4px; right: -4px; top: -17px; height: 23px; border: 3px solid var(--navy); background: #56a45b; }
.plate i { position: absolute; left: 20%; right: 20%; top: 22px; height: 8px; background: rgba(255,211,129,.45); }
.plate span { position: absolute; z-index: 8; top: -48px; color: var(--red); font: 950 2.1rem "Courier New", monospace; }
.plate-left { left: -2%; transform-origin: right center; }
.plate-left span { right: 32%; }
.plate-right { right: -2%; transform-origin: left center; }
.plate-right span { left: 32%; }
.tectonic-stage.divergent .plate-left { animation: plate-left-out 2s ease-in-out infinite alternate; }
.tectonic-stage.divergent .plate-right { animation: plate-right-out 2s ease-in-out infinite alternate; }
.tectonic-stage.convergent .plate-left { animation: plate-left-in 1.7s ease-in-out infinite alternate; }
.tectonic-stage.convergent .plate-right { animation: plate-right-in 1.7s ease-in-out infinite alternate; }
.tectonic-stage.convergent .plate-left::before, .tectonic-stage.convergent .plate-right::before { background: #7da153; }
.tectonic-stage.transform .plate-left { top: 41%; animation: plate-slide-a 1.8s ease-in-out infinite alternate; }
.tectonic-stage.transform .plate-right { top: 51%; animation: plate-slide-b 1.8s ease-in-out infinite alternate; }
.magma-plume { position: absolute; z-index: 3; left: calc(50% - 23px); bottom: 33px; width: 46px; height: 118px; border-radius: 50% 50% 0 0; background: #ffdc52; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: magma-rise 1.5s ease-in-out infinite; }
.mountain { position: absolute; z-index: 6; left: 50%; bottom: 73px; width: 95px; height: 80px; border: 3px solid var(--navy); background: #777061; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0; }
.mountain-b { width: 75px; height: 65px; margin-left: -58px; }
.tectonic-stage.convergent .mountain { opacity: 1; animation: mountain-grow 1.7s ease-in-out infinite alternate; }
.tectonic-stage.convergent .magma-plume { width: 32px; left: calc(58% - 16px); }
.tectonic-stage.transform .magma-plume, .tectonic-stage.transform .mountain { opacity: 0; }
.volcano-smoke { position: absolute; z-index: 7; left: 57%; top: 30px; display: none; }
.tectonic-stage.convergent .volcano-smoke { display: block; }
.volcano-smoke i { position: absolute; width: 20px; height: 20px; border: 2px solid var(--navy); border-radius: 50%; background: #a3a6a5; animation: smoke-up 1.5s ease-out infinite; }
.volcano-smoke i:nth-child(2) { left: 10px; animation-delay: .45s; }
.volcano-smoke i:nth-child(3) { left: -8px; animation-delay: .8s; }
.quake-lines { position: absolute; z-index: 8; inset: 0; display: none; pointer-events: none; }
.tectonic-stage.transform .quake-lines { display: block; }
.quake-lines i { position: absolute; width: 55px; border-top: 4px solid #d94f45; transform: rotate(55deg); animation: quake-flash .55s linear infinite; }
.quake-lines i:nth-child(1) { left: 42%; top: 33%; }.quake-lines i:nth-child(2) { left: 50%; top: 55%; transform: rotate(-48deg); animation-delay: .18s; }.quake-lines i:nth-child(3) { left: 37%; top: 70%; animation-delay: .34s; }
.boundary-readout { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 12px 14px; border: 3px solid var(--navy); background: var(--paper); text-align: left; }
.boundary-readout span { grid-row: span 2; align-self: stretch; display: grid; place-items: center; padding: 6px 10px; color: var(--paper); background: var(--navy); font-size: .61rem; font-weight: 950; text-align: center; }
.boundary-readout strong { color: var(--navy); font-size: .85rem; }
.boundary-readout p { margin: 5px 0 0; font-size: .72rem; font-weight: 650; }

/* Learning and challenge */
.learn-panel { background: rgba(255,251,231,.72); }
.learn-panel h3 { margin-bottom: 18px; }
.key-definition { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 13px; margin-bottom: 17px; padding: 14px; border: 3px solid var(--navy); background: var(--paper); box-shadow: 5px 5px 0 #dfe5cf; }
.definition-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--yellow); font: 950 2rem "Courier New", monospace; }
.key-definition p { margin: 0; font-size: .78rem; font-weight: 650; line-height: 1.48; }
.facts-list { display: grid; gap: 10px; }
.facts-list article { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 2px dashed #bbc8c5; }
.facts-list article:last-child { border-bottom: 0; }
.facts-list article > span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--navy); color: var(--navy); background: #dff0e0; font: 950 .62rem "Courier New", monospace; box-shadow: 2px 2px 0 var(--navy); }
.facts-list p { margin: 0; font-size: .73rem; font-weight: 650; line-height: 1.45; }
.did-you-know { margin-top: 15px; padding: 13px; border: 3px solid #d7962e; background: #fff5ca; transform: rotate(-.5deg); }
.did-you-know b { color: #ab581e; font-size: .65rem; letter-spacing: .08em; }
.did-you-know p { margin: 5px 0 0; font-size: .7rem; font-weight: 700; line-height: 1.4; }

.challenge-panel { position: relative; padding: 28px 30px 32px; border-top: 4px solid var(--navy); background: #eef4e5; }
.challenge-heading { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 15px; margin-bottom: 18px; }
.challenge-number { display: grid; place-items: center; width: 58px; height: 58px; border: 3px solid var(--navy); border-radius: 50%; color: var(--paper); background: var(--orange); box-shadow: 4px 4px 0 var(--navy); font: 950 1.2rem "Courier New", monospace; }
.challenge-heading h3 { margin-bottom: 5px; }
.challenge-heading p:last-child { margin-bottom: 0; font-size: .78rem; font-weight: 650; }
.answer-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.answer-button { position: relative; min-height: 96px; padding: 17px 15px 15px 48px; border: 3px solid var(--navy); color: var(--ink); background: var(--paper); box-shadow: 5px 5px 0 rgba(23,56,100,.14); font-size: .78rem; font-weight: 800; line-height: 1.35; text-align: left; cursor: pointer; transition: transform .15s, background .15s; }
.answer-button:hover { transform: translateY(-3px); background: #fff8d9; }
.answer-button .letter { position: absolute; left: 13px; top: 14px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid var(--navy); color: var(--navy); background: var(--yellow); font: 950 .72rem "Courier New", monospace; }
.answer-button.is-wrong { color: #762f31; border-color: #a83e40; background: #ffe4df; animation: wrong-shake .35s ease; }
.answer-button.is-correct { color: #164c31; border-color: #287047; background: #daf0d9; box-shadow: 5px 5px 0 rgba(40,112,71,.2); }
.answer-button:disabled { cursor: default; }
.feedback { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; min-height: 76px; margin-top: 16px; padding: 12px 14px; border: 3px solid var(--navy); background: var(--paper); }
.feedback-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--navy); border-radius: 50%; background: #e8f3e0; }
.feedback strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: .82rem; }
.feedback p { margin: 0; font-size: .7rem; font-weight: 650; line-height: 1.4; }
.feedback.is-success { border-color: var(--green-dark); background: #e8f5df; }
.feedback.is-try { border-color: #b34641; background: #fff0e8; }
.next-button { min-width: 170px; color: var(--paper); background: var(--green-dark); }

.finish-card { position: relative; margin: 20px 0; padding: 55px 34px; border: 4px solid var(--navy); color: var(--navy); background: var(--paper); box-shadow: 12px 12px 0 rgba(23,56,100,.22); text-align: center; overflow: hidden; }
.finish-card[hidden] { display: none; }
.finish-card h2 { max-width: 760px; margin: 0 auto 13px; font: 950 clamp(1.8rem,4vw,3.2rem)/1.05 "Courier New", monospace; letter-spacing: -.06em; }
.finish-card > p:not(.eyebrow) { max-width: 650px; margin: 0 auto 24px; font-weight: 700; }
.science-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-bottom: 28px; }
.science-stickers span { display: grid; place-items: center; width: 115px; height: 115px; border: 3px solid var(--navy); border-radius: 50%; background: #dff0e0; box-shadow: 5px 5px 0 var(--navy); font: 950 2rem "Courier New", monospace; transform: rotate(-3deg); }
.science-stickers span:nth-child(2n) { background: #fff0bd; transform: rotate(3deg); }
.science-stickers b { font: 950 .62rem Arial, sans-serif; }
.restart-button { color: var(--paper); background: var(--navy); }
.finish-burst span { position: absolute; color: var(--orange); font-size: 2rem; animation: finish-float 2.2s ease-in-out infinite; }
.finish-burst span:nth-child(1) { left: 8%; top: 14%; }.finish-burst span:nth-child(2) { right: 9%; top: 18%; animation-delay: .4s; }.finish-burst span:nth-child(3) { left: 15%; bottom: 20%; animation-delay: .8s; }.finish-burst span:nth-child(4) { right: 15%; bottom: 18%; animation-delay: 1.2s; }.finish-burst span:nth-child(5) { left: 50%; top: 8%; animation-delay: 1.6s; }

footer { display: flex; justify-content: space-between; gap: 18px; padding: 28px 5px 8px; color: var(--navy); font-size: .65rem; font-weight: 950; letter-spacing: .1em; }

@keyframes twinkle { 50% { transform: scale(.55) rotate(30deg); opacity: .35; } }
@keyframes cloud-drift { to { transform: translateX(35px); } }
@keyframes map-pulse { 50% { box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 7px rgba(255,212,77,.35); } }
@keyframes live-blink { 50% { opacity: .28; } }
@keyframes scene-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arrow-down { 50% { transform: translateY(9px); } }
@keyframes fall-earth { 0% { transform: translateY(0) rotate(0); } 92%,100% { transform: translateY(226px) rotate(250deg); } }
@keyframes apple-squash { 50% { scale: 1.16 .75; } }
@keyframes jump-earth { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-55px) rotate(-3deg); } }
@keyframes jump-moon { 0%,100% { transform: translateY(0) rotate(0); } 46% { transform: translateY(-158px) rotate(-8deg); } }
@keyframes field-pulse { 50% { transform: scale(1.1); opacity: .35; } }
@keyframes convection-spin { to { transform: rotate(360deg); } }
@keyframes plate-left-out { to { transform: translateX(-15px); } }
@keyframes plate-right-out { to { transform: translateX(15px); } }
@keyframes plate-left-in { to { transform: translateX(17px) rotate(-3deg); } }
@keyframes plate-right-in { to { transform: translateX(-17px) rotate(3deg); } }
@keyframes plate-slide-a { to { transform: translateX(-20px); } }
@keyframes plate-slide-b { to { transform: translateX(20px); } }
@keyframes magma-rise { 50% { transform: translateY(-16px) scaleX(.72); } }
@keyframes mountain-grow { from { transform: scaleY(.72) translateY(18px); } }
@keyframes smoke-up { from { transform: translateY(25px) scale(.4); opacity: .8; } to { transform: translateY(-30px) scale(1.2); opacity: 0; } }
@keyframes quake-flash { 50% { opacity: .12; transform: rotate(55deg) translateX(8px); } }
@keyframes wrong-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@keyframes finish-float { 50% { transform: translateY(-12px) rotate(30deg); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .mission-guide { grid-template-columns: repeat(3,1fr); }
  .mission-map { grid-template-columns: repeat(4,1fr); }
  .map-line { display: none; }
  .map-stop { grid-template-columns: 22px 1fr; }
  .stop-number { display: none; }
  .lab-grid { grid-template-columns: 1fr; }
  .experiment-panel { border-right: 0; border-bottom: 3px dashed #9fb1b8; }
  .learn-panel { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 24px; }
  .learn-panel > .panel-kicker, .learn-panel > h3 { grid-column: 1 / -1; }
  .did-you-know { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { background: linear-gradient(180deg, #8ed8f2 0 410px, #edf4df 410px 100%); }
  .app-shell { width: min(100% - 20px, 1240px); }
  .topbar { min-height: 74px; }
  .status-card span:last-child { display: none; }
  .hero { padding-top: 24px; }
  .mission-guide { grid-template-columns: 1fr; }
  .mission-map { padding: 9px 5px; }
  .map-stop { display: flex; flex-direction: column; gap: 4px; padding: 5px 2px; text-align: center; font-size: .58rem; }
  .mission-heading { align-items: flex-start; min-height: 156px; padding: 24px 20px; }
  .mission-badge { width: 72px; height: 72px; font-size: .55rem; }
  .experiment-panel, .learn-panel, .challenge-panel { padding: 22px 16px 25px; }
  .panel-title-row { align-items: flex-start; }
  .live-label { display: none; }
  .scene { min-height: 472px; }
  .scene-view { min-height: 466px; }
  .gravity-sky { height: 335px; }
  .scene-controls { min-height: 131px; flex-wrap: wrap; }
  .gravity-controls .segmented { width: 100%; }
  .gravity-controls .segmented button { flex: 1; }
  .surface.pushed .crate { left: calc(100% - 100px); }
  .magnet-stage { gap: 35px; }
  .bar-magnet { width: 95px; height: 48px; }
  .earth-lab { grid-template-columns: 1fr; gap: 15px; }
  .earth-section { width: 220px; height: 220px; }
  .layer-pointer { display: none; }
  .layer-readout { min-height: 188px; }
  .layer-buttons { grid-template-columns: repeat(2,1fr); }
  .boundary-tabs button { padding: 4px; font-size: .62rem; }
  .boundary-readout { grid-template-columns: 1fr; }
  .boundary-readout span { grid-row: auto; }
  .learn-panel { display: block; }
  .answer-options { grid-template-columns: 1fr; }
  .answer-button { min-height: 72px; }
  .feedback { grid-template-columns: 40px 1fr; }
  .next-button { grid-column: 1 / -1; width: 100%; }
  footer { flex-direction: column; align-items: center; }
}

@media (max-width: 430px) {
  h1 { font-size: 2.22rem; }
  .brand-mark { width: 33px; height: 37px; }
  .brand { font-size: .9rem; }
  .mission-heading h2 { font-size: 1.5rem; }
  .mission-badge { position: absolute; right: 14px; top: 14px; width: 57px; height: 57px; border-width: 3px; font-size: .46rem; }
  .mission-heading > div:first-child { padding-right: 43px; }
  .scene { border-width: 2px; }
  .gravity-arrow { left: 14px; }
  .astronaut { right: 8%; }
  .drop-track { left: 45%; }
  .force-view, .layers-view, .plates-view { padding: 11px; }
  .range-control { grid-template-columns: 1fr; gap: 4px; }
  .magnet-stage { gap: 18px; }
  .bar-magnet { width: 85px; }
  .challenge-heading { grid-template-columns: 48px 1fr; }
  .challenge-number { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}