:root {
  --ink: #132a46;
  --ink-soft: #38506c;
  --paper: #f7fbff;
  --white: #fff;
  --mint: #6fe1c4;
  --mint-dark: #0f806d;
  --yellow: #ffd166;
  --coral: #ff7c73;
  --blue: #5d8cff;
  --line: #dbe7f1;
  --shadow: 0 24px 70px rgba(19, 42, 70, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.page-glow {
  position: absolute; inset: 0 0 auto; height: 760px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 76% 15%, rgba(111,225,196,.28), transparent 28%), radial-gradient(circle at 5% 30%, rgba(255,209,102,.2), transparent 24%), linear-gradient(180deg, #fff 0%, #f7fbff 88%);
}

.site-header, main, footer { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; font: 800 1.35rem/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--mint-dark); }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--ink); position: relative; display: inline-block; box-shadow: 0 8px 22px rgba(19,42,70,.18); }
.brand-mark .core { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); left: 15px; top: 15px; }
.brand-mark .orbit { position: absolute; width: 26px; height: 12px; border: 2px solid var(--mint); border-radius: 50%; left: 6px; top: 13px; }
.brand-mark .orbit-two { transform: rotate(65deg); border-color: var(--coral); }
nav { display: flex; gap: 2.2rem; font-weight: 600; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.3rem; height: 2px; background: var(--mint-dark); transition: right .2s ease; }
nav a:hover::after, nav a:focus-visible::after { right: 0; }
.launch-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border-radius: 999px; background: #eafaf5; color: #176a5d; font-weight: 700; font-size: .82rem; }
.launch-chip i { width: 8px; height: 8px; border-radius: 50%; background: #20a98f; box-shadow: 0 0 0 5px rgba(32,169,143,.12); }

.hero { min-height: 670px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: 3rem 0 6rem; }
.eyebrow { margin: 0 0 1rem; color: var(--mint-dark); font-weight: 800; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { color: var(--coral); margin-right: .35rem; }
.eyebrow.dark { color: var(--ink-soft); }
h1, h2, h3 { font-family: "Manrope", sans-serif; margin-top: 0; line-height: 1.08; letter-spacing: -.045em; }
h1 { max-width: 650px; font-size: clamp(3rem, 6.2vw, 5.7rem); margin-bottom: 1.6rem; }
h1 em { color: var(--mint-dark); font-style: normal; position: relative; white-space: nowrap; }
h1 em::after { content: ""; position: absolute; height: 7px; left: 2%; right: 0; bottom: 0; background: var(--yellow); border-radius: 50%; z-index: -1; transform: rotate(-1.5deg); }
.hero-text { max-width: 600px; color: var(--ink-soft); font-size: clamp(1.08rem, 1.7vw, 1.26rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; border: 0; border-radius: 14px; padding: .8rem 1.25rem; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: white; box-shadow: 0 13px 25px rgba(19,42,70,.2); }
.button-primary span { color: var(--yellow); }
.button-quiet { border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.mini-facts { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--ink-soft); font-size: .87rem; }
.mini-facts span { padding-right: 1.2rem; border-right: 1px solid var(--line); }
.mini-facts span:last-child { border: 0; }
.mini-facts b { color: var(--ink); margin-right: .25rem; font-size: 1rem; }

.hero-visual { min-height: 535px; position: relative; display: grid; place-items: center; }
.science-window { position: relative; z-index: 3; width: min(430px, 82%); border: 1px solid rgba(255,255,255,.75); border-radius: 26px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); backdrop-filter: blur(16px); overflow: hidden; transform: rotate(-1.5deg); }
.window-bar { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 1rem; background: #f1f6fa; border-bottom: 1px solid var(--line); }
.window-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.window-bar span:nth-child(2) { background: var(--yellow); }.window-bar span:nth-child(3) { background: var(--mint); }
.window-bar b { margin-left: auto; color: #718095; font: 600 .65rem "DM Sans", sans-serif; }
.window-body { padding: 1.7rem; }
.window-label { color: var(--mint-dark); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.window-body h2 { font-size: 1.65rem; max-width: 330px; }
.drop-scene { height: 185px; position: relative; border-radius: 18px; background: linear-gradient(180deg, #e4f5ff 0%, #f5fbff 75%); overflow: hidden; }
.measure-lines { position: absolute; inset: 18px; opacity: .4; background: repeating-linear-gradient(180deg, transparent 0 32px, #9cb7cc 33px 34px); }
.falling-ball { position: absolute; left: calc(50% - 17px); top: 22px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c6 0 10%, var(--yellow) 12% 60%, #ec9e35 100%); box-shadow: 0 10px 12px rgba(19,42,70,.15); }
.falling-ball.drop { animation: hero-drop .9s cubic-bezier(.6,.03,.75,.4) forwards; }
.ground { position: absolute; height: 18px; left: 18px; right: 18px; bottom: 12px; background: var(--ink); border-radius: 50% 50% 7px 7px; }
@keyframes hero-drop { 0% { top: 22px; } 82% { top: 132px; transform: scaleY(1); } 90% { top: 140px; transform: scaleY(.75) scaleX(1.15); } 100% { top: 137px; transform: none; } }
.micro-button { margin-top: 1rem; width: 100%; border: 0; border-radius: 12px; background: var(--mint); color: #103b38; font-weight: 800; padding: .8rem 1rem; cursor: pointer; display: flex; justify-content: space-between; }
.planet-card, .floating-note { position: absolute; z-index: 4; background: rgba(255,255,255,.92); border: 1px solid white; box-shadow: 0 15px 36px rgba(19,42,70,.14); backdrop-filter: blur(10px); }
.planet-card { display: flex; align-items: center; gap: .7rem; border-radius: 16px; padding: .75rem 1rem; font-size: .82rem; font-weight: 800; }
.planet-card small, .floating-note small { display: block; color: #718095; font-size: .58rem; letter-spacing: .1em; }
.card-icon { font-size: 1.45rem; }
.card-earth { right: 0; top: 70px; transform: rotate(4deg); }.card-bio { left: 0; bottom: 70px; transform: rotate(-5deg); }
.floating-note { right: 3%; bottom: 40px; border-radius: 15px; padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; }
.pulse { width: 10px; height: 10px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,124,115,.14); }
.floating-note strong { display: block; font-size: .82rem; }
.visual-orbit { position: absolute; border: 1px dashed #9cc4c5; border-radius: 50%; }
.orbit-a { width: 520px; height: 380px; transform: rotate(-15deg); }.orbit-b { width: 330px; height: 500px; transform: rotate(38deg); }

.lab-section, .subjects-section { padding: 6.5rem 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2.4rem; }
.section-heading h2, .about-strip h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 0; }
.section-heading > p { max-width: 430px; color: var(--ink-soft); margin: 0; }
.lab-app { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 500px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: white; box-shadow: var(--shadow); }
.lab-controls { padding: clamp(1.5rem, 4vw, 3rem); }
.step-label { margin: 0 0 .8rem; font-size: .71rem; letter-spacing: .12em; font-weight: 800; color: #6a7b90; }
.world-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 2rem; }
.world-option { min-height: 108px; padding: .7rem .4rem; border: 1px solid var(--line); border-radius: 15px; background: #fbfdff; cursor: pointer; display: flex; align-items: center; flex-direction: column; justify-content: center; transition: .2s ease; }
.world-option span { font-size: 1.7rem; }.world-option b { margin-top: .25rem; }.world-option small { color: #748397; }
.world-option.active { border-color: var(--mint-dark); background: #effbf7; box-shadow: 0 0 0 3px rgba(111,225,196,.2); transform: translateY(-2px); }
.prediction-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.4rem; }
.prediction { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; background: white; cursor: pointer; font-weight: 700; }
.prediction.active { background: var(--ink); color: white; border-color: var(--ink); }
.button-run { width: 100%; background: var(--yellow); color: #3d3218; box-shadow: 0 10px 25px rgba(236,158,53,.2); }
.lab-feedback { min-height: 3rem; color: var(--ink-soft); margin-bottom: 0; font-size: .92rem; }
.lab-stage { position: relative; overflow: hidden; min-height: 500px; background: radial-gradient(circle at 65% 20%, rgba(93,140,255,.25), transparent 24%), linear-gradient(160deg, #102741, #183d62); color: white; }
.lab-stage::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 38px 38px; }
.stage-top { position: absolute; z-index: 3; left: 1.5rem; right: 1.5rem; top: 1.3rem; display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .12em; color: #b9ccdc; }
.stage-top b { color: var(--yellow); }
.height-scale { position: absolute; z-index: 2; left: 1.5rem; top: 85px; bottom: 80px; display: flex; flex-direction: column; justify-content: space-between; color: #91a9bd; font-size: .65rem; }
.height-scale span::after { content: ""; position: absolute; left: 45px; right: -420px; margin-top: .6rem; border-top: 1px dashed rgba(255,255,255,.12); }
.experiment-ball { z-index: 3; position: absolute; top: 80px; left: calc(50% - 35px); width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #fff9dc 0 8%, var(--yellow) 11% 58%, #e59932 100%); box-shadow: 0 15px 35px rgba(0,0,0,.25); }
.experiment-ball span { position: absolute; width: 12px; height: 12px; border-radius: 50%; left: 17px; top: 34px; background: rgba(167,103,27,.25); box-shadow: 24px -14px 0 3px rgba(167,103,27,.2); }
.stage-platform { position: absolute; z-index: 2; left: 22%; right: 22%; bottom: 43px; height: 30px; border-radius: 50%; background: #08192c; border-top: 3px solid #6c8aa4; }
.experiment-ball.falling { animation-name: lab-fall; animation-timing-function: cubic-bezier(.62,.03,.8,.42); animation-fill-mode: forwards; }
@keyframes lab-fall { 0% { top: 80px; } 86% { top: 380px; transform: scaleY(1); } 93% { top: 390px; transform: scaleY(.72) scaleX(1.14); } 100% { top: 386px; transform: none; } }
.stage-result { position: absolute; z-index: 3; right: 1.5rem; bottom: 1.25rem; text-align: right; background: rgba(9,27,46,.68); border: 1px solid rgba(255,255,255,.16); padding: .65rem .85rem; border-radius: 12px; backdrop-filter: blur(6px); }
.stage-result small { display: block; color: #a8bdcf; font-size: .58rem; letter-spacing: .12em; }.stage-result strong { font-size: 1.35rem; color: var(--mint); }

.subjects-section { border-top: 1px solid var(--line); }
.subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.subject-card { min-height: 360px; padding: 1.8rem; border-radius: 24px; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; position: relative; }
.subject-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -70px; top: -70px; background: rgba(255,255,255,.35); }
.subject-card:hover { transform: translateY(-7px); box-shadow: 0 20px 45px rgba(19,42,70,.12); }
.physics-card { background: #fff6d9; }.biology-card { background: #e8faf4; }.earth-card { background: #eaf1ff; }
.subject-top { display: flex; align-items: start; justify-content: space-between; position: relative; z-index: 1; }
.subject-number { font: 800 .75rem "Manrope"; opacity: .55; }.subject-icon { font-size: 2.8rem; }
.subject-card h3 { font-size: 2rem; margin: 2.2rem 0 .6rem; }.subject-card p { color: var(--ink-soft); margin-top: 0; }
.topic-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.topic-tags span { padding: .35rem .62rem; border-radius: 999px; background: rgba(255,255,255,.7); font-size: .75rem; font-weight: 700; }
.card-action { display: flex; justify-content: space-between; margin-top: 1.2rem; padding: .8rem 0 0; border: 0; border-top: 1px solid rgba(19,42,70,.13); background: transparent; cursor: pointer; font-weight: 800; }
.about-strip { margin-top: 1rem; margin-bottom: 6rem; padding: 3rem; border-radius: 26px; background: var(--ink); color: white; display: grid; grid-template-columns: auto 1.1fr 1fr; align-items: center; gap: 2rem; }
.about-symbol { width: 85px; height: 85px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); border-radius: 28px 28px 28px 8px; font: 800 3rem "Manrope"; transform: rotate(-4deg); }
.about-strip .eyebrow { color: var(--mint); }.about-strip h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }.about-strip > p { color: #c2d1df; }
footer { border-top: 1px solid var(--line); min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-size: .88rem; }
.footer-brand { color: var(--ink); }.footer-brand .brand-mark { transform: scale(.84); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%); background: var(--ink); color: white; border-radius: 999px; padding: .75rem 1.1rem; box-shadow: var(--shadow); font-weight: 700; transition: transform .25s ease; }
.toast.show { transform: translate(-50%, 0); }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) {
  nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 4rem; }.hero-copy { text-align: center; }.hero-text { margin-inline: auto; }.hero-actions, .mini-facts { justify-content: center; }.hero-visual { min-height: 520px; }
  .lab-app { grid-template-columns: 1fr; }.lab-stage { min-height: 500px; }.subject-grid { grid-template-columns: 1fr; }.subject-card { min-height: 300px; }
  .about-strip { grid-template-columns: auto 1fr; }.about-strip > p { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .site-header, main, footer { width: min(100% - 1.4rem, 1180px); }.site-header { height: 72px; }.launch-chip { font-size: 0; padding: .7rem; }.launch-chip i { margin: 0; }
  h1 { font-size: clamp(2.65rem, 14vw, 4rem); }.hero { padding-top: 3rem; gap: 1rem; }.mini-facts { gap: .5rem; }.mini-facts span { padding-right: .55rem; }
  .hero-visual { min-height: 450px; }.science-window { width: 92%; }.card-earth { top: 12px; right: 0; }.card-bio { left: 0; bottom: 20px; }.floating-note { display: none; }.visual-orbit { transform: scale(.72); }
  .section-heading { display: block; }.section-heading > p { margin-top: 1rem; }.lab-section, .subjects-section { padding: 4.5rem 0; }.lab-controls { padding: 1.3rem; }.world-picker { gap: .35rem; }.world-option { min-height: 100px; }.world-option span { font-size: 1.35rem; }.world-option small { font-size: .67rem; }
  .lab-stage { min-height: 440px; }.experiment-ball { top: 70px; }.experiment-ball.falling { animation-name: mobile-fall; } @keyframes mobile-fall { 0% { top: 70px; } 86% { top: 322px; } 93% { top: 330px; transform: scaleY(.72) scaleX(1.14); } 100% { top: 327px; transform: none; } }
  .about-strip { padding: 1.5rem; grid-template-columns: 1fr; }.about-symbol { width: 65px; height: 65px; }.about-strip > p { grid-column: auto; }
  footer { padding: 2rem 0; flex-direction: column; text-align: center; }.footer-brand { order: -1; }
}
.plant-section { border-top: 1px solid var(--line); }
.plant-app { grid-template-columns: 1fr 1fr; }
.plant-challenge { margin: 0 0 1.5rem; font-weight: 800; color: var(--mint-dark); }
:is(#plantForm, #riverForm) fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.plant-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.plant-choices label { position: relative; cursor: pointer; }
.plant-choices input { position: absolute; top: .6rem; left: .6rem; accent-color: var(--mint-dark); }
.plant-choices span { display: flex; flex-direction: column; align-items: center; padding: 1.4rem .3rem .7rem; border: 1px solid var(--line); border-radius: 14px; font-size: 1.7rem; background: #fbfdff; }
.plant-choices b { font-size: .85rem; }
.plant-choices input:checked + span { border-color: var(--mint-dark); background: #effbf7; box-shadow: 0 0 0 2px #6fe1c433; }
.plant-choices input:focus-visible + span { outline: 3px solid var(--coral); }
.plant-conditions label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; font-weight: 700; }
.plant-conditions select { width: 48%; padding: .55rem; border: 1px solid var(--line); border-radius: 9px; background: #f7fbff; font: inherit; color: var(--ink); }
.plant-predictions label { display: block; margin-bottom: .5rem; font-size: .9rem; cursor: pointer; }
:is(#plantForm, #riverForm) input { accent-color: var(--mint-dark); }
:is(#plantForm, #riverForm) :disabled { cursor: wait; opacity: .65; }
.plant-stage { position: relative; min-height: 610px; display: flex; flex-direction: column; justify-content: end; padding: 1.5rem; overflow: hidden; background: linear-gradient(#e5f6e9, #f5f8df 70%, #d5e8c4); }
.plant-stage-heading { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; letter-spacing: .1em; z-index: 1; }
.plant-stage-heading b { color: var(--mint-dark); }
.plant-sun { position: absolute; top: 85px; right: 45px; width: 65px; height: 65px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 15px #ffd16622, 0 0 0 30px #ffd16615; transition: opacity .3s; }
.plant-scene { flex: 1; min-height: 280px; display: flex; align-items: end; justify-content: center; }
.plant-drawing { width: min(100%, 340px); overflow: visible; }
.plant-sprout { transform-origin: 150px 247px; transform: scale(.38); color: #369559; transition: transform .3s, color .3s; }
.plant-stem { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.plant-leaf { fill: currentColor; }
.cactus-arms { display: none; fill: none; stroke: currentColor; stroke-width: 23; stroke-linecap: round; stroke-linejoin: round; }
.plant-stage[data-plant="cactus"] .cactus-arms { display: block; }
.plant-stage[data-plant="cactus"] .plant-stem { stroke-width: 34; }
.plant-state { text-align: center; font-weight: 800; margin: .7rem 0 1rem; }
.plant-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 1rem .5rem; border: 1px solid #ffffff; border-radius: 16px; background: #ffffffb3; text-align: center; gap: .4rem; }
.plant-stats dt { font-size: .66rem; color: var(--ink-soft); }
.plant-stats dd { margin: .25rem 0 0; font: 800 1.2rem 'Manrope', sans-serif; color: #176a5d; }
.plant-model-note { font-size: .72rem; color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 900px) { .plant-app { grid-template-columns: 1fr; } .plant-stage { min-height: 570px; } }
@media (max-width: 620px) { .plant-stage { padding: 1rem; } .plant-stats dd { font-size: 1rem; } }

.river-section { border-top: 1px solid var(--line); }
.river-stage { padding: 1.5rem; background: linear-gradient(#dfedf6, #ecf5e8); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.river-scene { width: 100%; margin: auto 0 0; border-radius: 16px; }
.river-stage .plant-stage-heading { margin-bottom: 2rem; }
.river-stage .plant-state { font-size: .95rem; }
.river-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.river-comparison { font-size: .82rem; color: var(--ink-soft); min-height: 3rem; margin: 1rem 0 0; }
.river-rain, .river-flow, .river-absorption, .river-sediment { visibility: hidden; }
.river-running .river-rain, .river-running .river-flow, .river-running .river-absorption, .river-running .river-sediment { visibility: visible; animation: river-water-motion .8s linear infinite; }
.river-running .river-rain { animation-duration: .5s; }
.river-finished .river-sediment { visibility: visible; }
#riverWater, #riverOverflow { transition: opacity .3s; }
@keyframes river-water-motion { to { stroke-dashoffset: -60; } }
@media (max-width: 620px) { .river-stage { padding: 1rem; } .river-stage .plant-stage-heading { margin-bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .river-running .river-rain, .river-running .river-flow, .river-running .river-absorption, .river-running .river-sediment { animation: none; } }