/* Home, lesson cover, stepper and the zoom-journey stage. Mobile first: stage on top, panel below.
   From 960px the stage sits left (sticky, full height) and the panel scrolls on the right. */

/* ---------- Home ---------- */
.on-stage { color: var(--on-stage); }
.hero, .cover {
  display: grid; gap: 24px; align-items: center;
  padding: clamp(28px, 6vw, 72px) var(--gutter);
  background: radial-gradient(120% 90% at 85% 30%, var(--stage-glow) 0%, var(--stage) 45%, var(--stage-deep) 100%);
}
.hero-kicker { color: var(--o2); font-weight: 700; margin-bottom: .6em; }
.hero h1, .cover h1 { font-size: var(--step-3); max-width: 14ch; }
.hero-lead { font-size: var(--step-1); line-height: 1.4; color: var(--on-stage-soft); max-width: 34ch; }
.btn-big { min-height: 56px; padding-inline: 28px; font-size: var(--step-1); margin-top: 8px; }
.hero-art { width: min(100%, 360px); justify-self: center; }
.ha-rings { animation: ha-spin 60s linear infinite; transform-origin: 200px 200px; }
.ha-rbc { animation: ha-pulse 3s ease-in-out infinite; transform-origin: 200px 196px; }
@keyframes ha-spin { to { transform: rotate(360deg); } }
@keyframes ha-pulse { 50% { transform: scale(1.06); } }
@media (min-width: 760px) {
  .hero, .cover { grid-template-columns: 1.2fr 1fr; min-height: min(78vh, 640px); }
  .hero-art { width: min(100%, 440px); }
}

.curriculum, .promise, .cover-details { padding: clamp(32px, 6vw, 64px) var(--gutter); max-width: 1180px; margin: 0 auto; }
.section-head p { color: var(--ink-soft); }
.grade-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.grade-tab {
  flex: none; min-height: var(--tap); padding: 8px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--paper-raised); font-weight: 700;
}
.grade-tab[aria-selected="true"] { background: var(--stage); border-color: var(--stage); color: var(--on-stage); }
.grade-panel { display: grid; gap: 24px; }
.term h3 { font-size: var(--step-0); color: var(--ink-soft); margin-top: 8px; }
.term-note { font-size: var(--step--1); color: var(--ink-soft); background: var(--paper); border-left: 4px solid var(--co2); padding: 6px 12px; border-radius: 6px; max-width: 60ch; }
.chapter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chapter { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 4px; }
.chapter.live { padding: 0; }
.chapter.live a {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px 12px; text-decoration: none; border-radius: var(--radius-s); background: #fff; border-left: 5px solid var(--o2);
}
.chapter.live a:hover { background: #f0f9fc; }
.chapter-title { font-weight: 700; }
.chapter .area-tag { grid-row: 2; grid-column: 1; justify-self: start; }
.chapter-status { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--step--1); }
.chapter-status svg { width: 18px; height: 18px; }
.chapter-status.muted { color: var(--ink-soft); font-weight: 400; }
.area-tag { font-size: .8rem; padding: 1px 10px; border-radius: 999px; background: #dfe8ea; color: #2c3e4e; }
.area-body { background: #f8dcd8; color: #6d2330; }
.area-life { background: #d8efdf; color: #1f5a37; }
.area-earth { background: #e4e0f4; color: #3d3373; }
.area-physical { background: #d9ecf5; color: #164c66; }
.area-matter { background: #f6e8cf; color: #6a4513; }
.area-space { background: #dde3f7; color: #24306b; }
.area-energy { background: #fbe3cc; color: #7a3a0c; }

.promise { border-top: 1px solid var(--line); }
.promise-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: p; }
.promise-steps li { counter-increment: p; display: grid; gap: 4px; padding-left: 52px; position: relative; }
.promise-steps li::before {
  content: counter(p); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--stage); color: var(--on-stage); font-weight: 700;
}
.site-footer { padding: 24px var(--gutter) 40px; color: var(--ink-soft); font-size: var(--step--1); border-top: 1px solid var(--line); max-width: 1180px; margin: 0 auto; }
.message { padding: 48px var(--gutter); }

/* ---------- Cover ---------- */
.cover-meta { color: var(--on-stage-soft); }
.cover-details { display: grid; gap: 32px; }
@media (min-width: 760px) { .cover-details { grid-template-columns: 1fr 1fr; } }
.goal-list, .cover-steps { padding-left: 1.2em; }
.goal-list li, .cover-steps li { margin-bottom: .5em; }
.cover-steps a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.cover-steps li { margin-bottom: 0; }
.note { color: var(--ink-soft); font-size: var(--step--1); border-left: 4px solid var(--co2); padding-left: 12px; }
.nav-home span { white-space: nowrap; }
@media (max-width: 420px) { .nav-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Stepper ---------- */
.stepper { background: var(--stage-deep); color: var(--on-stage); border-top: 1px solid #ffffff1a; }
.stepper ol { list-style: none; margin: 0; padding: 6px var(--gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.stepper ol::-webkit-scrollbar { display: none; }
.stepper a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px;
  border-radius: 999px; text-decoration: none; color: var(--on-stage-soft); white-space: nowrap; font-size: var(--step--1);
}
.stepper a.current { background: #ffffff1c; color: var(--on-stage); font-weight: 700; }
.step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-size: .8rem; font-weight: 700; }
.step-num svg { width: 16px; height: 16px; }
.stepper a.visited .step-num { background: var(--o2); border-color: var(--o2); color: var(--stage-deep); }
.stepper a.current .step-num { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage-deep); }

/* ---------- Journey ---------- */
.journey { display: grid; }
.stage {
  display: grid; grid-template-rows: auto 1fr auto;
  height: clamp(420px, 68svh, 640px);
  background: radial-gradient(110% 80% at 50% 35%, var(--stage-glow) 0%, var(--stage) 50%, var(--stage-deep) 100%);
  overflow: hidden;
}
@media (min-width: 960px) {
  .journey { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
  .stage { position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h) - 57px); min-height: 520px; }
}
.viewport-wrap { position: relative; min-height: 0; }
.viewport { position: absolute; inset: 0; overflow: hidden; }
.scene-wrap { position: absolute; inset: 0; padding: 6px 10px; will-change: transform, opacity; }
.scene-svg { width: 100%; height: 100%; overflow: visible; }

.gauge ol { list-style: none; margin: 0; padding: 10px 10px 0; display: flex; justify-content: space-between; position: relative; }
.gauge ol::before { content: ""; position: absolute; left: 28px; right: 28px; top: 23px; height: 2px; background: #ffffff2e; }
.gauge li { flex: 1; display: flex; justify-content: center; }
.gauge-stop {
  position: relative; display: grid; justify-items: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 4px 2px;
  background: none; border: 0; color: var(--on-stage-soft); cursor: pointer; font-size: .78rem; line-height: 1.15;
}
.gauge-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; background: var(--stage); }
.gauge-stop.passed .gauge-dot { background: var(--o2); border-color: var(--o2); }
.gauge-stop.current { color: var(--on-stage); font-weight: 700; }
.gauge-stop.current .gauge-dot { background: var(--focus); border-color: var(--focus); box-shadow: 0 0 0 5px #ffc94d33; }
@media (max-width: 480px) { .gauge-stop:not(.current) .gauge-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.stage-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px 12px; }
.stage-controls .btn, .lab-model .btn { min-height: 44px; padding: 8px 16px; font-size: var(--step--1); color: var(--on-stage); }
.stage-controls .btn-primary, .stage-controls .chip-toggle[aria-pressed="true"], .lab-model .btn-primary { color: var(--stage-deep); }
.chip-toggle[aria-pressed="false"] { opacity: .8; }
.breath-status, .control-hint { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--on-stage-soft); min-height: 1.5em; }
.breathe-btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.breathe-btn:active { background: var(--o2) !important; }
.segmented { display: inline-flex; border: 2px solid var(--on-stage-soft); border-radius: 999px; overflow: hidden; }
.seg { min-height: 40px; padding: 6px 14px; border: 0; background: transparent; color: var(--on-stage); cursor: pointer; font-weight: 700; font-size: var(--step--1); }
.seg[aria-pressed="true"] { background: var(--on-stage); color: var(--stage-deep); }
.sim-readout { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.o2 { background: var(--o2); } .dot.co2 { background: var(--co2); }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--step--1); font-weight: 700; }
.range input { width: min(240px, 60vw); accent-color: var(--o2); min-height: 32px; }
.range-readout { font-variant-numeric: tabular-nums; font-weight: 400; }

.info-card {
  position: absolute; left: 12px; right: 12px; bottom: 12px; max-width: 440px; z-index: 3;
  background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-s); padding: 14px 52px 6px 16px;
  box-shadow: 0 12px 32px #0006; animation: card-in .25s var(--ease);
}
.info-card h3 { font-size: var(--step-0); margin-bottom: .3em; }
.info-card p { font-size: var(--step--1); }
.info-close { position: absolute; top: 4px; right: 4px; border: 0; }
@keyframes card-in { from { transform: translateY(10px); opacity: 0; } }

.panel { padding: 20px var(--gutter) 32px; background: var(--paper-raised); }
@media (min-width: 960px) { .panel { padding: 32px 36px; } }
.level-kicker { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: .4em; }
.level-title { font-size: var(--step-2); outline: none; }
.learn p { max-width: 52ch; }
.deeper { margin: 8px 0 20px; border-radius: var(--radius-s); background: #e3edf2; }
.deeper summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 6px 14px; cursor: pointer; font-weight: 700; color: #164c66; list-style: none; }
.deeper summary::-webkit-details-marker { display: none; }
.deeper summary svg { width: 20px; height: 20px; transition: transform .2s; }
.deeper[open] summary svg { transform: rotate(180deg); }
.deeper-list { margin: 0; padding: 0 18px 14px 36px; }
.deeper-list li { margin-bottom: .6em; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.panel-actions .btn-primary { margin-left: auto; }
.panel-actions [hidden] { display: none; }

/* ---------- Scene drawing ---------- */
.labels .leader { stroke: #ffffffb3; stroke-width: 1; }
.labels .leader-dot { fill: #fff; }
.label-text { fill: #fff; font-weight: 700; paint-order: stroke; stroke: #0d2236; stroke-width: 3px; stroke-linejoin: round; }
.hotspot { fill: transparent; cursor: pointer; outline: none; }
.hotspot:hover, .hotspot:focus-visible { fill: #ffc94d1f; stroke: var(--focus); stroke-width: 2; stroke-dasharray: 5 4; }

.ribs path { stroke: #c9d9e6; stroke-width: 4; fill: none; opacity: .32; stroke-linecap: round; }
.ribs .sternum { stroke-width: 7; opacity: .25; }
.fissure { fill: none; stroke: #b0646a; stroke-width: 1; opacity: .7; }
.lung-edge { fill: none; stroke: #fde3df; stroke-width: 1.4; opacity: .75; }
.airway { fill: none; stroke: #f7ece4; stroke-linecap: round; stroke-linejoin: round; }
.airway-fine { opacity: .85; }
.cartilage { fill: none; stroke: #c3aea4; stroke-width: 1.1; }
.diaphragm { fill: none; stroke: #e48a6f; stroke-width: 6; stroke-linecap: round; }
.air-dot { fill: var(--o2); }
.air-dot.co2-rich { fill: var(--co2); }

.tree path { fill: none; stroke-linecap: round; }
.tree .bronchus { stroke: #f7ece4; }
.tree .bronchiole { stroke: #f4a9a4; }
.route { fill: none; stroke: var(--o2); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; stroke-linecap: round; }
.route.on { opacity: 1; }
.parcel { fill: var(--o2); filter: drop-shadow(0 0 4px #4cc9e9); }
.split-count { fill: #fff; font-weight: 700; }

.vessel { fill: none; stroke-width: 12; stroke-linecap: round; }
.vessel.poor { stroke: var(--blood-poor); } .vessel.rich { stroke: var(--blood-rich); }
.duct-tube { fill: none; stroke: url(#tube); stroke-width: 22; stroke-linecap: round; }
.duct { stroke: #e9a7a1; stroke-width: 14; stroke-linecap: round; }
.sac-shadow { fill: #0d223680; }
.sac { stroke: #b65f66; stroke-width: 1; }
.sac-shine { fill: #fff; opacity: .28; }
.cap { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.flow .cap { stroke-dasharray: 7 4; animation: flow 1.6s linear infinite; }
.paused .flow .cap { animation-play-state: paused; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.scale-bar line { stroke: #fff; stroke-width: 1.5; }
.scale-bar text { fill: #fff; font-weight: 700; }

.sim { position: absolute; inset: 0; }
.sim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.rbc-side { stroke: #ffffff40; stroke-width: 1; }
.hb-chain { fill: #b9566a; stroke: #0d2236; stroke-width: 1.5; }
.heme { fill: #4a1626; stroke: #f2b03d; stroke-width: 1.5; }
.o2-mol circle { fill: var(--o2); }
.o2-mol { opacity: 0; transition: opacity .3s; }
.o2-mol.on { opacity: 1; }
.cap-wall { fill: none; stroke: #e0938f; stroke-width: 3; }
.rbc-small { stroke: #ffffff40; }

.bottle-body { fill: #d9f0f733; stroke: #cfe8f2; stroke-width: 2.5; }
.bottle-shine { fill: #ffffff2a; }
.lid { fill: #4cc9e9; }
.clay { fill: #f2b03d; }
.straw { stroke: #f6f0e6; stroke-width: 9; stroke-linecap: round; fill: none; }
.balloon { fill: #e8645f; stroke: #ffffff55; stroke-width: 1.5; }
.balloon-neck { fill: #c94c4a; }
.sheet { fill: none; stroke: #e8645f; stroke-width: 6; stroke-linecap: round; }
.bottle-scene { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.bottle-scene:active { cursor: grabbing; }
.knot { pointer-events: none; }
.knot circle { r: 13px; }
.pull-hint path { fill: none; stroke: var(--focus); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s; }
.pull-hint { animation: pull-nudge 1.6s ease-in-out infinite; }
@keyframes pull-nudge { 0%, 100% { transform: translateY(-4px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pull-hint { animation: none; } }
.knot circle { fill: #e8645f; stroke: #fff; stroke-width: 2; }
.knot path { fill: #e8645f; }
.flow-arrows path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.arrow-in { stroke: var(--o2); } .arrow-out { stroke: var(--co2); }