/* ============================================================================
   AI MASTER GROWER — INTERACTIVE MODULES
   Digital twin, spectral lens, autonomy ladder, closed loop, signal chart,
   memory layer, causal chain, stack layers, expansion atlas.
   ========================================================================== */

/* Shared shell for every interactive instrument on the site. */
.inst {
  position: relative;
  background: linear-gradient(180deg, rgba(230,241,245,.03), transparent 40%), var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--elev-3);
}
.inst__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: rgba(4,7,10,.6);
  flex-wrap: wrap;
}
.inst__title {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
}
.inst__title .pulse-dot { color: var(--bio); }
.inst__bar .spacer { flex: 1 1 auto; }
.inst__body { position: relative; }
.inst__foot {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4);
  border-top: 1px solid var(--line);
  background: rgba(4,7,10,.45);
}
.inst__hint {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 0;
}

/* Scanline sheen shared by canvas instruments */
.scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(230,241,245,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ========================================================== DIGITAL TWIN */

.twin { display: grid; grid-template-columns: 1fr; }
@media (min-width: 66rem) { .twin { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* NOTE: never pair `aspect-ratio` with a `min-height` here. The minimum height
   would drive the width past the viewport on a phone (300px × 16/9 = 533px),
   which is what forces a horizontal scroll. Change the ratio per breakpoint
   instead — portrait on small screens, landscape once there is room. */
.twin__stage {
  position: relative;
  aspect-ratio: 5 / 6;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(34,211,240,.06), transparent 70%),
    #050a0e;
  cursor: grab;
  touch-action: pan-y;
}
.twin__stage:active { cursor: grabbing; }
.twin__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 34rem) { .twin__stage { aspect-ratio: 4 / 3; } }
@media (min-width: 48rem) { .twin__stage { aspect-ratio: 16 / 10; } }
@media (min-width: 66rem) { .twin__stage { aspect-ratio: auto; height: 34rem; } }

/* Floating plant readout */
.twin__tip {
  position: absolute; z-index: 5;
  min-width: 13rem;
  padding: var(--s-3);
  background: rgba(6,11,15,.94);
  border: 1px solid var(--line-cyan);
  border-radius: var(--r-sm);
  box-shadow: var(--elev-3), 0 0 24px -10px var(--cyan);
  pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.96);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.twin__tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.twin__tip h6 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.twin__tip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); margin: 0; }
.twin__tip dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.twin__tip dd { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; }
.twin__tip dd.warn { color: var(--warn); }
.twin__tip dd.risk { color: var(--risk); }
.twin__tip dd.ok   { color: var(--bio); }

/* Side rail */
.twin__rail {
  border-top: 1px solid var(--line);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-5);
  background: rgba(4,7,10,.5);
}
@media (min-width: 66rem) { .twin__rail { border-top: 0; border-left: 1px solid var(--line); overflow-y: auto; } }

.twin__layers { display: flex; flex-direction: column; gap: 2px; }
.layer-btn {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 44px; padding: .5rem .6rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.layer-btn:hover { background: rgba(230,241,245,.04); color: var(--text); }
.layer-btn[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-strong); }
.layer-btn .sw { width: 22px; height: 10px; border-radius: 2px; flex: none; }
.layer-btn .sub { display: block; font-size: 9px; letter-spacing: .08em; color: var(--text-dim); text-transform: none; margin-top: 1px; }

.twin__legend { display: flex; flex-direction: column; gap: var(--s-2); }
.twin__scale { height: 8px; border-radius: 2px; }
.twin__scale-lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }

.twin__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.twin__kpi { background: var(--surface-2); padding: var(--s-3); }
.twin__kpi .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); display: block; }
.twin__kpi .v { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.twin__kpi .v.warn { color: var(--warn); } .twin__kpi .v.risk { color: var(--risk); } .twin__kpi .v.ok { color: var(--bio); }

/* Timeline transport */
.transport { display: flex; align-items: center; gap: var(--s-3); width: 100%; }
.transport__btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--bio); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.transport__btn:hover { border-color: var(--line-bio); box-shadow: 0 0 18px -8px var(--bio); }
.transport__btn svg { width: 14px; height: 14px; }
.transport__track { flex: 1; min-width: 8rem; }
.transport__read {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; min-width: 8.5rem; text-align: right;
}
.transport__read b { color: var(--bio); font-weight: 500; }

/* ========================================================= SPECTRAL LENS */

.lens {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #050a0e;
  cursor: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lens img, .lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens__base { z-index: 1; }
.lens__fx { z-index: 2; }
.lens__ring {
  position: absolute; z-index: 3;
  width: var(--lens-size, 240px); height: var(--lens-size, 240px);
  border-radius: 50%;
  border: 1px solid rgba(62,240,138,.85);
  box-shadow: 0 0 0 1px rgba(4,7,10,.8), 0 0 34px -6px rgba(62,240,138,.7), inset 0 0 30px -12px rgba(62,240,138,.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.lens__ring::before, .lens__ring::after {
  content: ''; position: absolute; background: rgba(62,240,138,.5);
}
.lens__ring::before { left: 50%; top: 8%; bottom: 8%; width: 1px; transform: translateX(-50%); }
.lens__ring::after  { top: 50%; left: 8%; right: 8%; height: 1px; transform: translateY(-50%); }
.lens__tag {
  position: absolute; top: calc(50% + var(--lens-size, 240px) / 2 + 10px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--bio); white-space: nowrap;
  text-shadow: 0 0 12px rgba(4,7,10,1);
}
.lens.is-idle .lens__ring { opacity: .45; }
.lens__hud {
  position: absolute; z-index: 4; left: var(--s-4); top: var(--s-4);
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(230,241,245,.75);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  pointer-events: none;
}
.lens__hud b { color: var(--bio); font-weight: 500; }
.lens__corner {
  position: absolute; z-index: 4; width: 26px; height: 26px;
  border: 1px solid rgba(62,240,138,.4); pointer-events: none;
}
.lens__corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.lens__corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.lens__corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.lens__corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.lens__modes { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ======================================================== AUTONOMY LADDER */

.ladder { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 64rem) { .ladder { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }

.ladder__rail {
  border-bottom: 1px solid var(--line);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(4,7,10,.4);
}
@media (min-width: 64rem) { .ladder__rail { border-bottom: 0; border-right: 1px solid var(--line); } }

.rung {
  position: relative;
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 48px; padding: .5rem .6rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text-dim); cursor: pointer; text-align: left;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.rung:hover { background: rgba(230,241,245,.04); color: var(--text-muted); }
.rung__n {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; color: inherit;
  display: flex; align-items: center; gap: .45rem;
}
.rung__n i {
  width: 6px; height: 6px; border-radius: 1px; background: currentColor; flex: none;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.rung__t {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; color: inherit;
}
.rung.is-below { color: var(--text-muted); }
.rung.is-below .rung__n i { background: var(--bio-deep); }
.rung.is-active {
  color: var(--text-strong);
  background: linear-gradient(90deg, var(--bio-wash), transparent);
  border-color: var(--line-bio);
}
.rung.is-active .rung__n { color: var(--bio); }
.rung.is-active .rung__n i { box-shadow: 0 0 12px var(--bio); }
.rung.is-active .rung__t { color: var(--text-strong); }

.ladder__view { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-height: 26rem; }

.ladder__head { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.ladder__head h3 { margin: 0; font-size: var(--text-d3); }
.ladder__head p { color: var(--text-muted); margin: 0; }

.split-cap { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .split-cap { grid-template-columns: 1fr 1fr; } }
.cap {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.cap h6 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.cap--machine h6 { color: var(--cyan); }
.cap--human h6 { color: var(--bio-lime); }
.cap ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.cap li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5;
}
.cap li::before {
  content: ''; width: 5px; height: 5px; margin-top: .55em; flex: none;
  border-radius: 1px; background: currentColor; opacity: .55;
}
.cap--machine li::before { background: var(--cyan); opacity: .9; }
.cap--human li::before { background: var(--bio-lime); opacity: .9; }

/* Governance mode selector */
.gov { display: flex; flex-direction: column; gap: var(--s-3); }
.gov__opts { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .gov__opts { grid-template-columns: repeat(4, 1fr); } }
.gov__opt {
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 62px; padding: .6rem .7rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gov__opt:hover { border-color: var(--line-strong); color: var(--text); }
.gov__opt[aria-pressed="true"] { border-color: var(--line-bio); background: var(--bio-wash); color: var(--text-strong); box-shadow: 0 0 24px -14px var(--bio); }
.gov__opt .t { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; }
.gov__opt .d { font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.gov__opt[aria-pressed="true"] .t { color: var(--bio); }
.gov__opt[disabled] { opacity: .3; cursor: not-allowed; }

.ladder__console { height: 12.5rem; }

/* Authority meter */
.meter { display: flex; flex-direction: column; gap: .4rem; }
.meter__bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--surface-4); display: flex;
}
.meter__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--bio) 100%);
  box-shadow: 0 0 16px rgba(62,240,138,.6);
  transition: width var(--dur-slow) var(--ease-out);
}
.meter__lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

/* ============================================================ CLOSED LOOP */

.loop { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 62rem) { .loop { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); } }
.loop__stage { position: relative; aspect-ratio: 1 / 1; max-height: 34rem; margin-inline: auto; width: 100%; }
.loop__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop__node { cursor: pointer; }
.loop__node circle.hit { fill: transparent; }
.loop__node .ring { fill: rgba(8,13,18,.9); stroke: var(--line-strong); stroke-width: 1; transition: stroke .25s, fill .25s; }
/* text-anchor is set per node as an attribute — the labels at 3 and 9 o'clock
   must read outward from the ring, not straddle it. */
.loop__node .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--text-dim);
  transition: fill .25s;
}
.loop__node:hover .ring, .loop__node.is-on .ring { stroke: var(--bio); fill: rgba(62,240,138,.12); }
.loop__node:hover .lbl, .loop__node.is-on .lbl { fill: var(--bio); }
.loop__node.is-on .ring { filter: drop-shadow(0 0 8px rgba(62,240,138,.8)); }
.loop__node .ic { fill: none; stroke: var(--text-dim); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.loop__node:hover .ic, .loop__node.is-on .ic { stroke: var(--bio); }
.loop__orbit { fill: none; stroke: var(--line); stroke-width: 1; }
.loop__arc { fill: none; stroke: url(#loopGrad); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(62,240,138,.6)); }
.loop__core-t { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; fill: var(--text-dim); text-anchor: middle; }
.loop__core-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: var(--text-strong); text-anchor: middle; }

.loop__detail {
  border-top: 1px solid var(--line);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  background: rgba(4,7,10,.4);
}
@media (min-width: 62rem) { .loop__detail { border-top: 0; border-left: 1px solid var(--line); } }
.loop__detail h4 { margin: 0; font-size: var(--text-h4); color: var(--bio); }
.loop__detail p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.loop__io { display: flex; flex-direction: column; gap: var(--s-3); }
.loop__io div { display: flex; flex-direction: column; gap: .3rem; }
.loop__io .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.loop__io .v { font-family: var(--font-mono); font-size: 11px; color: var(--text); line-height: 1.6; }

/* ============================================ SIGNAL CHART (PRE-SYMPTOM) */

.signal { position: relative; }
.signal__stage { position: relative; aspect-ratio: 4 / 5; }
@media (min-width: 34rem) { .signal__stage { aspect-ratio: 4 / 3; } }
@media (min-width: 52rem) { .signal__stage { aspect-ratio: 16 / 8; } }
.signal__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.signal__marks { position: absolute; inset: 0; pointer-events: none; }
.signal__mark {
  position: absolute; top: 0; bottom: 26px;
  width: 1px;
  transform: translateX(-50%);
}
.signal__mark::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .45; }
.signal__mark .flag {
  position: absolute; top: 8px; left: 8px;
  padding: .25rem .5rem;
  background: rgba(6,11,15,.92);
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.signal__mark.is-right .flag { left: auto; right: 8px; }
.signal__mark--ai { color: var(--bio); }
.signal__mark--human { color: var(--warn); }
.signal__delta {
  position: absolute; bottom: 34px;
  height: 22px;
  border: 1px dashed rgba(230,241,245,.28);
  border-bottom: 0;
  display: flex; align-items: flex-start; justify-content: center;
}
.signal__delta span {
  transform: translateY(-58%);
  padding: .18rem .5rem;
  background: var(--void);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.signal__delta b { color: var(--bio); }

/* Compact monospaced readout used under the chart instruments */
.readout {
  display: flex; flex-direction: column; gap: .2rem;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .08em; text-transform: uppercase;
  min-width: min(100%, 22rem);
}
.readout .k { color: var(--bio); }
.readout .v { color: var(--text-muted); }
.readout .v b { font-weight: 500; }

/* ========================================================== MEMORY LAYER */

.memory { position: relative; }
.memory__stage { position: relative; aspect-ratio: 1 / 1; background: #040709; }
@media (min-width: 40rem) { .memory__stage { aspect-ratio: 16 / 9; } }
.memory__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.memory__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
@media (min-width: 46rem) { .memory__stats { grid-template-columns: repeat(4, 1fr); } }
.memory__stat { background: var(--surface-1); padding: var(--s-4); }
.memory__stat .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: .3rem; }
.memory__stat .v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.memory__stat .v small { font-size: .55em; color: var(--bio); margin-left: .15em; }

/* =========================================================== CAUSAL CHAIN */

.chain { display: flex; flex-direction: column; gap: 0; }
.chain__node {
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  border: 0; background: transparent; text-align: left; width: 100%;
  color: var(--text-muted);
}
.chain__node:not(:last-child)::after {
  content: ''; position: absolute; left: 1.5rem; top: calc(50% + 1.1rem); bottom: -.6rem;
  width: 1px; background: var(--line);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.chain__node.is-lit:not(:last-child)::after { background: var(--bio); box-shadow: 0 0 10px var(--bio); }
.chain__dot {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2);
  display: grid; place-items: center; color: var(--text-dim);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  position: relative; z-index: 1;
}
.chain__dot svg { width: 18px; height: 18px; }
.chain__node.is-lit .chain__dot {
  border-color: var(--bio); color: var(--bio); background: var(--bio-wash);
  box-shadow: 0 0 0 4px rgba(62,240,138,.08), 0 0 26px -8px var(--bio);
}
.chain__txt h5 { margin: 0 0 .2rem; font-size: 1rem; color: var(--text); font-family: var(--font-display); font-weight: 600; }
.chain__node.is-lit .chain__txt h5 { color: var(--text-strong); }
.chain__txt p { margin: 0; font-size: var(--text-sm); color: var(--text-dim); max-width: 44ch; }
.chain__node.is-lit .chain__txt p { color: var(--text-muted); }

/* ============================================================ STACK LAYERS */

.stack-layers { display: flex; flex-direction: column; gap: var(--s-3); }
.slayer {
  position: relative;
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--sl-wash, var(--bio-wash)), transparent 46%), var(--surface-1);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width: 56rem) { .slayer { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; } }
.slayer::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sl-accent, var(--bio));
  box-shadow: 0 0 18px var(--sl-accent, var(--bio));
}
.slayer:hover { border-color: var(--line-strong); transform: translateX(3px); }
.slayer__n {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--sl-accent, var(--bio)); margin-bottom: .4rem;
}
.slayer h3 { margin: 0 0 .4rem; font-size: var(--text-d3); }
.slayer > div > p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.slayer--perception   { --sl-accent: var(--cyan);      --sl-wash: var(--cyan-wash); }
.slayer--intelligence { --sl-accent: var(--violet);    --sl-wash: var(--violet-wash); }
.slayer--decision     { --sl-accent: var(--bio-lime);  --sl-wash: rgba(156,255,92,.10); }
.slayer--action       { --sl-accent: var(--bio);       --sl-wash: var(--bio-wash); }

/* Connector arrow between layers */
.slayer-link {
  display: flex; align-items: center; justify-content: center;
  height: 1.75rem; color: var(--text-dim);
}
.slayer-link svg { width: 16px; height: 16px; }

/* ========================================================= EXPANSION ATLAS */

.atlas { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 60rem) { .atlas { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.atlas__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 60rem) { .atlas__grid { border-bottom: 0; border-right: 1px solid var(--line); } }
.atlas__cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-1);
  border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--s-3);
  color: var(--text-dim);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.atlas__cell svg { width: 22px; height: 22px; }
.atlas__cell .n { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.atlas__cell:hover { background: var(--surface-3); color: var(--text); }
.atlas__cell[aria-pressed="true"] { background: var(--bio-wash); color: var(--bio); box-shadow: inset 0 0 0 1px var(--line-bio); }
.atlas__cell.is-beachhead { color: var(--bio-lime); }
.atlas__cell.is-beachhead::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bio-lime); box-shadow: 0 0 10px var(--bio-lime);
}
.atlas__panel { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); background: rgba(4,7,10,.4); }
.atlas__panel h4 { margin: 0; font-size: var(--text-h4); }
.atlas__panel p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* ============================================================== EVOLUTION */

.evo { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: evo; }
@media (min-width: 56rem) { .evo { grid-template-columns: repeat(5, 1fr); } }
.evo__step {
  position: relative;
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 56rem) {
  .evo__step { border-top: 0; border-left: 1px solid var(--line); padding-top: var(--s-7); }
  .evo__step:first-child { border-left: 0; }
}
/* The reveal accent grows along the step's leading edge: horizontally across
   the top while the rail is stacked, vertically down the left rule once it
   becomes five columns.

   The two orientations MUST live in mutually exclusive media queries. An
   unscoped `.is-in { width: 100% }` here leaks past the min-width block — and
   because that block also sets `height: 100%`, the 2px accent line becomes a
   filled neon rectangle painted over the whole card, hiding its text. */
.evo__step::before {
  content: ''; position: absolute;
  background: var(--bio); box-shadow: 0 0 12px var(--bio);
  pointer-events: none;
}
@media (max-width: 55.99rem) {
  .evo__step::before {
    top: -1px; left: 0; height: 2px; width: 0;
    transition: width 1.1s var(--ease-out) var(--evo-delay, 0ms);
  }
  .evo__step.is-in::before { width: 100%; }
}
@media (min-width: 56rem) {
  .evo__step::before {
    top: 0; left: -1px; width: 2px; height: 0;
    transition: height 1.1s var(--ease-out) var(--evo-delay, 0ms);
  }
  .evo__step.is-in::before { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .evo__step::before { transition: none; }
}

/* Each step reads as a stage you can dwell on. */
.evo__step {
  transition: background-color var(--dur-base) var(--ease-out);
}
.evo__step:hover { background: rgba(230, 241, 245, .022); }
.evo__step:hover h4 { color: var(--text-strong); }
.evo__k {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--bio); display: block; margin-bottom: var(--s-3);
}
.evo__step h4 { margin: 0 0 .4rem; font-size: 1.05rem; }
.evo__step p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); max-width: none; }
.evo__step:nth-child(1) .evo__k { color: var(--cyan); }
.evo__step:nth-child(2) .evo__k { color: var(--cyan-bright); }
.evo__step:nth-child(3) .evo__k { color: var(--violet); }
.evo__step:nth-child(4) .evo__k { color: var(--bio-lime); }
.evo__step:nth-child(5) .evo__k { color: var(--bio); }

/* ============================================================ COMPARISON */

.vs { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 50rem) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__col { background: var(--surface-1); padding: var(--s-6); }
.vs__col--now h4 { color: var(--text-muted); }
.vs__col--next { background: linear-gradient(160deg, var(--bio-wash), transparent 55%), var(--surface-2); }
.vs__col--next h4 { color: var(--bio); }
.vs__col h4 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500;
}
.vs__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.vs__col li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.vs__col li svg { width: 15px; height: 15px; flex: none; margin-top: .2em; }
.vs__col--now li svg { color: var(--text-dim); }
.vs__col--next li svg { color: var(--bio); }
.vs__col--next li { color: var(--text); }

/* ============================================================== FIGURE */

.figure { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.figure img { width: 100%; }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(0deg, rgba(4,7,10,.95), transparent);
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.figure figcaption b { color: var(--bio); font-weight: 500; }

/* ========================================================== VIDEO PLAYER */
/* An instrument-styled player. The markup ships with native `controls` so a
   no-JS visitor still gets a working video; the script removes that attribute
   and builds the custom transport in its place. */

.vp { position: relative; display: block; }
/* Per-player aspect so the stage reserves the clip's exact box and nothing
   shifts when metadata lands. */
.vp__stage {
  position: relative;
  aspect-ratio: var(--vp-aspect, 16 / 9);
  background: #030608;
  overflow: hidden;
  isolation: isolate;
}
.vp__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #030608;
  display: block;
}
.vp--cover .vp__video { object-fit: cover; }

/* Acquisition scanlines — present while idle, dissolved once playing. */
.vp__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(230,241,245,.035) 0 1px, transparent 1px 3px);
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.vp.is-playing .vp__scan { opacity: 0; }

.vp__corner {
  position: absolute; z-index: 3; width: 24px; height: 24px;
  border: 1px solid rgba(62,240,138,.4); pointer-events: none;
  opacity: 1; transition: opacity var(--dur-slow) var(--ease-out);
}
.vp.is-playing .vp__corner { opacity: .25; }
.vp__corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.vp__corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.vp__corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.vp__corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* Centre launcher — the "acquire" state */
.vp__big {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-4);
  background: radial-gradient(60% 60% at 50% 50%, rgba(4,7,10,.35), rgba(4,7,10,.78));
  border: 0; cursor: pointer; color: var(--text);
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.vp.is-started .vp__big { opacity: 0; visibility: hidden; }
.vp__big-ring {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-bio);
  background: rgba(6,11,15,.7);
  color: var(--bio);
  box-shadow: 0 0 0 0 rgba(62,240,138,.35), 0 0 34px -10px var(--bio);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.vp__big-ring svg { width: 26px; height: 26px; margin-left: 4px; }
.vp__big:hover .vp__big-ring { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(62,240,138,.10), 0 0 44px -8px var(--bio); }
.vp__big:focus-visible { outline: 2px solid var(--bio); outline-offset: -6px; }
.vp__big-txt {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); text-align: center; max-width: 30ch; line-height: 1.6;
}
.vp__big-txt b { color: var(--text-strong); font-weight: 500; display: block; }

/* Buffering */
.vp__spin {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid rgba(62,240,138,.2);
  border-top-color: var(--bio);
  border-radius: 50%;
  animation: vp-spin .9s linear infinite;
  pointer-events: none;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp__spin[hidden] { display: none; }

/* Live HUD strip */
.vp__hud {
  position: absolute; z-index: 4; left: 16px; top: 16px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(230,241,245,.7);
  text-shadow: 0 1px 8px rgba(0,0,0,.9); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.vp.is-playing .vp__hud { opacity: 1; }
.vp__hud b { color: var(--bio); font-weight: 500; }
.vp__rec { display: inline-flex; align-items: center; gap: .4rem; color: var(--risk); }
.vp__rec i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: vp-rec 1.6s var(--ease-inout) infinite;
}
@keyframes vp-rec { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .vp__spin, .vp__rec i { animation: none; }
}

/* Transport */
.vp__ctl {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(4,7,10,.72);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.vp__btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vp__btn:hover { color: var(--bio); background: rgba(62,240,138,.08); border-color: var(--line-bio); }
.vp__btn svg { width: 16px; height: 16px; }
.vp__btn--play { color: var(--bio); border-color: var(--line); background: var(--surface-3); }

.vp__track {
  position: relative; flex: 1 1 8rem; min-width: 6rem;
  height: 38px; cursor: pointer; touch-action: none;
  display: flex; align-items: center;
}
.vp__rail {
  position: relative; width: 100%; height: 4px;
  background: var(--surface-4); border-radius: 2px; overflow: hidden;
}
.vp__buf { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(230,241,245,.14); }
.vp__prog {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--bio-lime), var(--bio) 60%, var(--cyan));
  box-shadow: 0 0 12px rgba(62,240,138,.6);
}
.vp__knob {
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--bio);
  box-shadow: 0 0 0 3px var(--void), 0 0 14px rgba(62,240,138,.9);
  transform: scale(0); transition: transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.vp__track:hover .vp__knob,
.vp__track:focus-visible .vp__knob,
.vp.is-scrubbing .vp__knob { transform: scale(1); }
.vp__track:focus-visible { outline: 2px solid var(--bio); outline-offset: 2px; border-radius: var(--r-xs); }

.vp__time {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .08em; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; flex: none;
}
.vp__time b { color: var(--text); font-weight: 500; }

.vp__rate {
  min-width: 42px; height: 38px; padding: 0 .5rem;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .06em;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vp__rate:hover { color: var(--bio); border-color: var(--line-bio); }

.vp__vol {
  width: 74px; flex: none; height: 38px;
}
@media (max-width: 40rem) { .vp__vol, .vp__rate { display: none; } }

/* Fullscreen: let the video fill and keep the transport legible */
.vp:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; }
.vp:fullscreen .vp__stage { aspect-ratio: auto; flex: 1; }
.vp:fullscreen .vp__ctl { background: rgba(0,0,0,.86); }

/* ---------------------------------------------------------- VIDEO CUE */
/* A compact launcher that opens the footage in a dialog, for pages that
   shouldn't spend a whole section on it. */

.vp-cue {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; padding: var(--s-4);
  background: linear-gradient(100deg, var(--bio-wash), transparent 60%), var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer; text-align: left; color: var(--text);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.vp-cue:hover {
  border-color: var(--line-bio);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -22px var(--bio);
}
.vp-cue__ring {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-bio);
  background: rgba(6,11,15,.7);
  color: var(--bio);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.vp-cue:hover .vp-cue__ring { transform: scale(1.08); box-shadow: 0 0 26px -8px var(--bio); }
.vp-cue__ring svg { width: 16px; height: 16px; margin-left: 3px; }
.vp-cue__txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vp-cue__t {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text-strong); letter-spacing: -.01em;
}
.vp-cue__s {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.vp-cue__meta {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bio);
}
@media (max-width: 30rem) { .vp-cue__meta { display: none; } }

/* ------------------------------------------------------- MODAL PLAYER */

.vp-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(2,5,8,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vp-modal.is-open { display: flex; }
.vp-modal__box {
  width: 100%; max-width: 68rem;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--elev-3), var(--glow-soft);
  animation: cmdk-in var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .vp-modal__box { animation: none; } }
.vp-modal__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: rgba(4,7,10,.6);
}
.vp-modal__close {
  margin-left: auto; width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer;
}
.vp-modal__close:hover { color: var(--risk); border-color: rgba(255,84,112,.4); }
.vp-modal__close svg { width: 15px; height: 15px; }

/* ------------------------------------------------------- AMBIENT SPLASH */
/* The looping brand splash. Muted, decorative, and pausable — auto-playing
   motion longer than five seconds needs a stop control. */

.splash { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--elev-3); }
.splash__video { display: block; width: 100%; height: auto; background: #030608; }
.splash::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px -30px rgba(62,240,138,.28);
}
.splash__toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 34px; padding: 0 .7rem;
  background: rgba(4,7,10,.7); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text-muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.splash:hover .splash__toggle,
.splash__toggle:focus-visible { opacity: 1; }
.splash__toggle:hover { color: var(--bio); border-color: var(--line-bio); }
.splash__toggle svg { width: 11px; height: 11px; }
@media (hover: none) { .splash__toggle { opacity: 1; } }

/* =============================================================== MARQUEE */

.rail-scroll {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
  -webkit-overflow-scrolling: touch;
}
.rail-scroll::-webkit-scrollbar { height: 6px; }
.rail-scroll::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; }
.rail-scroll > * { scroll-snap-align: start; flex: 0 0 min(20rem, 78vw); }
@media (min-width: 74rem) { .rail-scroll { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; } .rail-scroll > * { flex: initial; } }