:root {
  --bio-green:#168c83;
  --bio-green-soft:#e8f7ef;
  --bio-coral:#ef694b;
  --bio-gold:#e8a600;
  --bio-blue:#086bd8;
  --el-blue:#168c83;
  --el-blue-2:#19a89f;
  --el-blue-soft:#e8f7ef;
  --el-green:#168c83;
  --el-green-soft:#edf9f5;
}

.living-masthead {
  position:relative;
  background:
    radial-gradient(circle at 84% 18%, rgba(25,185,203,.34), transparent 29%),
    linear-gradient(118deg,#06273e 0%,#14516e 62%,#117c7b 100%) !important;
}

.scale-navigator {
  order:4;
  margin:22px 10px 0;
  padding:18px 0 0;
  border-top:1px solid var(--el-line);
}

.scale-navigator > .small-label { color:var(--el-muted); }

.scale-navigation {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
}

.scale-chip {
  border:1px solid var(--el-line);
  border-radius:999px;
  padding:5px 8px;
  color:#758697;
  background:#fff;
  font-size:.66rem;
  font-weight:800;
}

.scale-chip.active {
  color:var(--bio-green);
  border-color:#b7d8cf;
  background:var(--bio-green-soft);
}

.research-block { background:#edf6f2; }
.research-block .small-label { color:var(--bio-green); }
.research-block p { margin:8px 0 0; }
.research-block a { color:#1d665c; font-weight:800; text-decoration:none; }
.research-block a:hover { text-decoration:underline; }

.concept-lab,
.bio-live-lab {
  display:grid;
  gap:clamp(24px,2.5vw,36px);
  padding-bottom:clamp(28px,4vw,56px);
}

.experiment-prompt {
  display:grid;
  gap:12px;
  max-width:900px;
  padding:clamp(26px,3.5vw,46px) 0 clamp(34px,4.5vw,62px);
  border-bottom:1px solid var(--line);
}

.experiment-prompt p {
  max-width:58ch;
  margin:0;
  color:var(--ink);
  font:700 clamp(1.18rem,1.7vw,1.58rem)/1.48 Georgia,serif;
}

.scale-trail {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8faf9;
}

.scale-trail span {
  padding:6px 9px;
  border-radius:999px;
  background:#e7f1ed;
  color:#2b655d;
  font-size:.72rem;
  font-weight:800;
}

.scale-trail b { color:#8ba09a; font-weight:700; }

.research-sources {
  display:grid;
  gap:8px;
  margin-top:14px;
}

.research-sources a {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 12px;
  padding:10px 12px;
  border:1px solid #c4d9d1;
  border-radius:10px;
  background:rgba(255,255,255,.72);
  transition:border-color 120ms ease,background-color 120ms ease;
}

.research-sources a:hover {
  border-color:#6eaa9d;
  background:#fff;
  transform:none;
}

.citation-journal {
  color:#1f6b60;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.065em;
  line-height:1.35;
  text-transform:uppercase;
}

.citation-topic {
  color:#334e49;
  font-size:.76rem;
  font-weight:700;
  line-height:1.35;
}

.citation-arrow {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  color:#2c7c70;
  font-size:.9rem;
}

.lab-note {
  margin:0;
  color:#6a7680;
  font-size:.75rem;
  line-height:1.5;
}

.control-panel {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:end;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f7f9fa;
}

.control-panel label {
  display:grid;
  gap:6px;
  min-width:180px;
  color:#5f6c77;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.control-panel input[type="range"] { width:100%; accent-color:var(--bio-green); }
.control-value { color:var(--navy); font-size:.8rem; font-weight:850; }

.bio-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.bio-metric {
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.bio-metric span { display:block; color:var(--muted); font-size:.72rem; }
.bio-metric strong { display:block; margin-top:4px; color:var(--navy); font-size:1.6rem; }

.scale-map {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.scale-map button {
  min-height:92px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  text-align:left;
}

.scale-map button.active {
  color:#fff;
  border-color:var(--bio-green);
  background:var(--bio-green);
}

.scale-map button strong { display:block; margin-bottom:6px; }
.scale-map button span { display:block; font-size:.75rem; line-height:1.35; opacity:.86; }
.scale-explanation { padding:18px; border-radius:12px; background:#edf6f2; }
.scale-explanation h4 { margin:0 0 7px; }
.scale-explanation p { margin:0; color:#4f655f; }

.trace-shell,
.spectrum-shell,
.recovery-shell,
.evolution-shell {
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f7faf9);
}

.trace-chart,
.recovery-chart {
  position:relative;
  height:230px;
  border-left:1px solid #bfcbd1;
  border-bottom:1px solid #bfcbd1;
  background:
    linear-gradient(to right,rgba(18,40,61,.05) 1px,transparent 1px) 0 0/20% 100%,
    linear-gradient(to top,rgba(18,40,61,.05) 1px,transparent 1px) 0 0/100% 25%;
}

.trace-chart svg,
.recovery-chart svg { width:100%; height:100%; overflow:visible; }
.chart-label { fill:#66717c; font-size:10px; }

.chart-with-axes {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:12px;
  row-gap:10px;
  align-items:stretch;
}

.chart-with-axes > .trace-chart,
.chart-with-axes > .recovery-chart,
.chart-with-axes > .spectrum-bars,
.chart-with-axes > .evolution-chart {
  grid-column:2;
  grid-row:1;
  min-width:0;
}

.axis-label {
  color:#566a65;
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.025em;
  line-height:1.25;
}

.axis-label-y {
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-align:center;
}

.axis-label-x {
  grid-column:2;
  grid-row:2;
  justify-self:center;
  text-align:center;
}

.feature-axis {
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 44px;
  gap:10px;
  margin-bottom:8px;
  color:#566a65;
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.025em;
}

.feature-axis span:last-child {
  grid-column:2 / 4;
  text-align:center;
}


.emergence-board {
  position:relative;
  height:330px;
  overflow:hidden;
  border:1px solid #cbd7d2;
  border-radius:16px;
  background:radial-gradient(circle at center,#f8fcfa,#eaf4f0);
}

.bio-particle {
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#2f7468;
  box-shadow:0 0 0 3px rgba(47,116,104,.07);
  transition:left 360ms ease,top 360ms ease,transform 360ms ease;
}

.emergence-readout {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 16px;
  border-radius:12px;
  background:#edf6f2;
}
.emergence-readout p { margin:0; color:#50655f; }
.emergence-readout strong { color:var(--bio-green); font-size:1.6rem; }

.morphology-cell {
  display:grid;
  place-items:center;
  min-height:300px;
  border:1px solid var(--line);
  border-radius:16px;
  background:radial-gradient(circle,#f9fbfc 0%,#edf4f6 70%);
}

.cell-outline {
  width:250px;
  height:190px;
  display:grid;
  place-items:center;
  border:2px solid #8eabb7;
  border-radius:52% 48% 46% 54% / 52% 43% 57% 48%;
  background:rgba(158,205,217,.18);
  transition:all 260ms ease;
}

.nucleus-shape {
  width:105px;
  height:90px;
  border:3px solid #2f7468;
  border-radius:50%;
  background:rgba(47,116,104,.12);
  transition:all 260ms ease;
}

.feature-bars { display:grid; gap:8px; }
.feature-row { display:grid; grid-template-columns:130px 1fr 44px; gap:10px; align-items:center; font-size:.75rem; }
.feature-track { height:8px; border-radius:999px; background:#e2e7ea; overflow:hidden; }
.feature-fill { height:100%; border-radius:999px; background:var(--bio-green); transition:width 220ms ease; }

.spectrum-bars {
  height:260px;
  display:flex;
  gap:5px;
  align-items:flex-end;
  padding:18px 4px 0;
  border-bottom:1px solid #bec9cf;
}

.spectrum-bar {
  flex:1;
  min-width:4px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#56a89a,#2f7468);
  transition:height 240ms ease;
}

.evolution-chart {
  display:flex;
  gap:5px;
  align-items:flex-end;
  height:250px;
  padding-top:14px;
  border-bottom:1px solid #bec9cf;
}

.generation-bar {
  flex:1;
  min-width:5px;
  background:linear-gradient(180deg,#d99a52,#d96f52);
  border-radius:4px 4px 0 0;
}

.function-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.function-tile {
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.function-tile strong { display:block; color:var(--navy); }
.function-tile span { display:block; margin-top:5px; color:var(--muted); font-size:.78rem; line-height:1.45; }

.living-bounded-workflow {
  overflow:hidden;
  border:1px solid #bfd6d0;
  border-radius:14px;
  background:#f7fbfa;
}

.living-bounded-workflow header {
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #d5e5e1;
  background:#eaf5f2;
}

.living-bounded-workflow header span {
  color:var(--bio-green);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.11em;
}

.living-bounded-workflow header strong {
  color:var(--navy);
  font-size:.78rem;
}

.living-bounded-workflow ol {
  margin:0;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  list-style:none;
}

.living-bounded-workflow li {
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.living-bounded-workflow li>span {
  display:block;
  margin-bottom:6px;
  color:#d27a4d;
  font:800 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;
}

.living-bounded-workflow li strong {
  display:block;
  color:var(--navy);
  font-size:.76rem;
}

.living-bounded-workflow li p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.4;
}

.python-companion-button {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:980;
  color:#174b45 !important;
  border-color:#bfd6d0 !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(16,42,67,.12) !important;
}

.python-companion-button:hover {
  color:#fff !important;
  border-color:var(--bio-green) !important;
  background:var(--bio-green) !important;
}

@media (max-width:900px) {
  .learning-cycle,.function-grid { grid-template-columns:1fr; }
  .scale-map { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .living-bounded-workflow ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .bio-metrics { grid-template-columns:1fr; }
  .scale-map { grid-template-columns:1fr; }
  .feature-row { grid-template-columns:100px 1fr 36px; }
  .feature-axis { grid-template-columns:100px minmax(0,1fr) 36px; }
  .python-companion-button { right:14px; bottom:14px; }
  .living-bounded-workflow header { align-items:flex-start; flex-direction:column; }
  .living-bounded-workflow ol { grid-template-columns:1fr; }

  .scale-navigation {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
    scrollbar-width:thin;
  }

  .scale-chip { flex:0 0 auto; }
}