/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #0a0e16;
  --bg-2: #101724;
  --panel: #131b2a;
  --panel-2: #172132;
  --line: #24304a;
  --text: #e8eefb;
  --muted: #93a3bd;
  --dim: #64748b;
  --fig-1: #26324a;
  --fig-2: #1a2334;
  --fig-line: #39496b;
  --shadow: 0 10px 34px rgba(0, 0, 0, .45);

  --sys-circulatory: #ff4d6d;
  --sys-respiratory: #4cc9f0;
  --sys-digestive: #9bcf5f;
  --sys-nervous: #b388ff;
  --sys-skeletal: #d8e2f2;
  --sys-muscular: #ef8354;
  --sys-urinary: #3fd0a0;

  --sys: var(--sys-circulatory);
  --artery: #ff4d6d;
  --vein: #5b8cff;

  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(.22, .68, .36, 1);
}

:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-2: #eaeff8;
  --panel: #ffffff;
  --panel-2: #f3f6fc;
  --line: #d7e0ee;
  --text: #17203a;
  --muted: #56647f;
  --dim: #8492ab;
  --fig-1: #cbd8ea;
  --fig-2: #aebfda;
  --fig-line: #8fa4c4;
  --shadow: 0 10px 28px rgba(28, 45, 80, .12);
  --sys-skeletal: #7d8ca6;
  --vein: #3b6fe0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 50% -10%, color-mix(in srgb, var(--sys) 13%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 50;
  background: var(--panel); color: var(--text); padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.skip:focus { left: 8px; }

a { color: var(--sys); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: color-mix(in srgb, var(--sys) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sys) 40%, transparent);
  color: var(--sys);
}
.brand-mark svg { fill: currentColor; animation: beat 1.1s var(--ease) infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 26% { transform: scale(1); } 38% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .brand-mark svg { animation: none; } }

.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 16px; letter-spacing: -.01em; }
.brand-text small { color: var(--muted); font-size: 12.5px; }

.topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; }

.btn {
  font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { border-color: color-mix(in srgb, var(--sys) 55%, var(--line)); }
.btn:focus-visible, input:focus-visible, .sys-btn:focus-visible, .path-step:focus-visible {
  outline: 2px solid var(--sys); outline-offset: 2px;
}
.btn.icon { padding: 8px; width: 36px; height: 36px; display: grid; place-items: center; }
.btn.icon svg { fill: currentColor; stroke: currentColor; }
.btn.is-on { background: color-mix(in srgb, var(--sys) 22%, var(--panel)); border-color: var(--sys); }

.ico-sun { display: none; }
:root[data-theme="light"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: block; fill: none; stroke-width: 2; }
:root[data-theme="light"] .ico-sun circle { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- layout */
.layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) 352px;
  gap: 16px;
  padding: 16px clamp(14px, 3vw, 28px);
  align-items: start;
  max-width: 1500px; margin: 0 auto;
}

/* -------------------------------------------------------------- systems */
.systems {
  position: sticky; top: 76px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.nav-title, .card-title {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
.sys-list { display: flex; flex-direction: column; gap: 4px; }

.sys-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 14px; text-align: left; color: var(--muted);
  background: transparent; border: 1px solid transparent;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.sys-btn .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.sys-btn:hover { background: var(--panel-2); color: var(--text); }
.sys-btn[aria-selected="true"] {
  color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}

.nav-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.switch input { accent-color: var(--sys); width: 15px; height: 15px; }

/* ---------------------------------------------------------------- stage */
.stage {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.stage-head h2 { margin: 0 0 2px; font-size: 20px; letter-spacing: -.015em; }
.stage-head p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }

.figure-wrap { display: grid; gap: 10px; }
.figure {
  position: relative;
  width: 100%;
  height: clamp(420px, 76vh, 760px);
}
#body { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; min-height: 20px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.legend .flow-note { color: var(--sys); font-weight: 600; flex-basis: 100%; justify-content: center; min-height: 1.2em; }
.legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); display: inline-block; }
.legend i.round { border-radius: 50%; }

/* ---------------------------------------------------------------- svg */
.ghost path, .ghost ellipse, .ghost rect { fill: url(#gFig); }
.ghost .limbs path { fill: none; stroke: var(--fig-1); }
.ghost { transition: opacity .3s var(--ease); }
.ghost.is-hidden { opacity: .12; }
.gs1 { stop-color: var(--fig-1); }
.gs2 { stop-color: var(--fig-2); }
.ghost .torso { stroke: var(--fig-line); stroke-width: 1; }

.layer { opacity: 0; pointer-events: none; transition: opacity .38s var(--ease); }
.layer.is-active { opacity: 1; pointer-events: auto; }

.organ { cursor: pointer; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.organ:hover { filter: brightness(1.18) saturate(1.1); }
.organ.is-selected { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sys) 90%, transparent)) brightness(1.15); }
.layer.has-selection .organ:not(.is-selected) { opacity: .42; }

/* skeletal */
.bone { fill: var(--sys-skeletal); stroke: var(--sys-skeletal); }
.bone path[fill="none"] { fill: none; }
.bone-hit, .bone-hit rect { fill: transparent; stroke: none; }
.skull-detail { fill: color-mix(in srgb, var(--sys-skeletal) 38%, #000); stroke: none; opacity: .5; }
.rib { fill: none; stroke: var(--sys-skeletal); stroke-width: 6; stroke-linecap: round; }
.vert { fill: var(--sys-skeletal); }

/* muscular */
.muscle { fill: var(--sys-muscular); stroke: color-mix(in srgb, var(--sys-muscular) 60%, #000); stroke-width: 1; }
.muscle rect { fill: var(--sys-muscular); }

/* digestive */
.gut.solid { fill: var(--sys-digestive); stroke: color-mix(in srgb, var(--sys-digestive) 55%, #000); stroke-width: 1.2; }
.gut.hollow { stroke: var(--sys-digestive); }
.gut[data-organ="liver"] { fill: #b98b4e; stroke: #8a6434; }
.gut[data-organ="gallbladder"] { fill: #6fae4d; }
.gut[data-organ="pancreas"] { fill: #e2c178; stroke: #b39a58; }

/* urinary */
.uro.solid { fill: var(--sys-urinary); stroke: color-mix(in srgb, var(--sys-urinary) 55%, #000); stroke-width: 1.2; }
.uro.hollow { stroke: var(--sys-urinary); }
.uro[data-organ="bladder"] { fill: color-mix(in srgb, #ffd54a 55%, var(--sys-urinary)); }

/* respiratory */
.lung { fill: url(#gLung); stroke: #2b90b6; stroke-width: 1.2; }
.airway { stroke: #a8e6ff; }
.alveoli-group circle { fill: #ffd2dc; stroke: #ff8fa6; stroke-width: 1.2; }
.diaphragm { stroke: var(--sys-muscular); }
#breath-scale, #heart-scale { transform-box: fill-box; transform-origin: center; }

/* circulatory */
.vessel { fill: none; stroke-linecap: round; }
.artery { stroke: var(--artery); stroke-width: 5; }
.vein { stroke: var(--vein); stroke-width: 5.5; }
.pulm-a { stroke: var(--vein); stroke-width: 5; }
.pulm-v { stroke: var(--artery); stroke-width: 5; }
.heart { fill: url(#gHeart); stroke: #8f1228; stroke-width: 1.4; }
.heart-detail { stroke: rgba(255, 255, 255, .34); fill: none; }
.lung-hint path { fill: color-mix(in srgb, var(--sys-respiratory) 14%, transparent); stroke: color-mix(in srgb, var(--sys-respiratory) 34%, transparent); stroke-width: 1; }

/* nervous */
.brain { fill: url(#gBrain); stroke: #6d3fd0; stroke-width: 1.3; }
.brain-folds { stroke: rgba(255, 255, 255, .42); }
.cord { stroke: var(--sys-nervous); }
.nerve path { stroke: color-mix(in srgb, var(--sys-nervous) 78%, transparent); }

/* particles */
.pgroup { pointer-events: none; }
.pgroup circle { stroke: rgba(0, 0, 0, .22); stroke-width: .6; }

/* motion guides are geometry only */
.motion { fill: none; stroke: none; }

/* labels */
.labels { pointer-events: none; }
.labels text {
  font: 600 13px/1 ui-sans-serif, system-ui, sans-serif;
  fill: var(--text); paint-order: stroke;
  stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round;
}
.labels line { stroke: var(--fig-line); stroke-width: 1; }
.labels.is-hidden { opacity: 0; }

/* ---------------------------------------------------------------- panel */
.panel { display: grid; gap: 12px; position: sticky; top: 76px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.eyebrow {
  margin: 0 0 4px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sys); font-weight: 700;
}
#detail-name { margin: 0 0 6px; font-size: 18px; letter-spacing: -.015em; }
#detail-body { margin: 0; color: var(--muted); font-size: 13.8px; }

.facts { margin: 12px 0 0; display: grid; gap: 7px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-top: 1px dashed var(--line); padding-top: 7px; }
.facts dt { color: var(--dim); font-size: 12.5px; }
.facts dd { margin: 0; font-weight: 650; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.pathway { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 4px; }
.path-step {
  display: flex; gap: 9px; align-items: center; width: 100%;
  font: inherit; font-size: 13.4px; text-align: left; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 6px 8px; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease);
}
.path-step::before {
  counter-increment: step; content: counter(step);
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, var(--sys) 20%, transparent); color: var(--sys);
}
.path-step:hover { background: var(--panel-2); color: var(--text); }
.path-step[aria-current="true"] { color: var(--text); background: color-mix(in srgb, var(--sys) 13%, transparent); font-weight: 600; }

.vital-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vital {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 10px;
}
.vital b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vital b em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.vital span { font-size: 11.5px; color: var(--dim); }
.vital .bar { height: 3px; border-radius: 2px; background: var(--line); margin-top: 6px; overflow: hidden; }
.vital .bar i { display: block; height: 100%; background: var(--sys); border-radius: 2px; transition: width .4s var(--ease); }

/* -------------------------------------------------------------- console */
.console {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 16px clamp(14px, 3vw, 28px);
}
.console-inner {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: center;
}
.effort-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.effort-head label { font-size: 13.5px; color: var(--muted); }
#activity-name { font-weight: 700; color: var(--sys); font-size: 15px; }

input[type="range"] {
  width: 100%; margin: 10px 0 2px; accent-color: var(--sys);
  height: 22px; cursor: pointer;
}
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.effort-note { margin: 8px 0 0; font-size: 12.8px; color: var(--muted); min-height: 2.6em; }

.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.counter {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px; text-align: center;
}
.counter b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.counter span { font-size: 11px; color: var(--dim); line-height: 1.3; display: block; }

.site-foot {
  padding: 18px clamp(14px, 3vw, 28px) 28px; color: var(--dim); font-size: 12.5px; text-align: center;
}
.site-foot p { margin: 4px 0; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 180px minmax(0, 1fr) 300px; }
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .systems, .panel { position: static; }
  .sys-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .sys-btn { white-space: nowrap; }
  .nav-foot { grid-auto-flow: column; justify-content: start; gap: 18px; }
  .figure { height: min(68vh, calc(100vw * 1.34)); }
  .console-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-text small { display: none; }
  .brand-text strong { font-size: 14.5px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .btn { padding: 7px 11px; font-size: 13px; }
  .stage, .card { padding: 12px; }
  .ticks span:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}