/* ============================================================
   SOMA.TONE · SM-01
   Materials: void, trace, plate, phosphor. Nothing else.
   ============================================================ */

:root {
  /* ground */
  --void:        #141218;
  --void-warm:   #18151d;
  --plate:       #1c1922;
  --rule:        #2b2733;
  --rule-soft:   #242028;
  /* ink */
  --ivory:       #e6e1d3;
  --ivory-dim:   #a39e91;
  --ash:         #6c675f;
  /* pigments */
  --copper:      #6fa08c;
  --dust-blue:   #7e94ad;
  --amber:       #c4a06a;
  --sage:        #98a683;
  --smoke:       #8d7d9d;
  --iron:        #a35f4d;

  --mono: "IBM Plex Mono", "Input Mono", "Berkeley Mono", monospace;
  --type-micro: 9px;
  --type-label: 10px;
  --type-control: 11px;
  --type-value: 14px;
  --type-title: 17px;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ivory);
  font-family: var(--mono);
  font-weight: 300;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------------- masthead ---------------- */

#masthead {
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--void-warm);
}

.wordmark {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--ivory);
  white-space: nowrap;
}
.wordmark .dot { color: var(--amber); }

.mast-readouts {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.readout { display: flex; flex-direction: column; gap: 2px; min-width: 72px; }
.ro-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ash);
}
.ro-value {
  font-size: 13px;
  font-weight: 300;
  color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
}

.doc-ref {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
  white-space: nowrap;
}

/* ---------------- rack ---------------- */

#rack {
  flex: 1;
  display: flex;
  min-height: 0;
  /* a flex item defaults to min-width:auto and refuses to shrink below its
     content — which pushed the rails off the bench on a narrow window. This
     one line is the parent of most of the desktop clipping. */
  min-width: 0;
}

/* ---- lens rail ---- */

#lens-rail {
  /* it may shrink under pressure, but never past readability */
  flex: 0 1 168px;
  min-width: 120px;
  border-right: 1px solid var(--rule);
  background: var(--void-warm);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

#lens-grip {
  flex: 0 0 6px;
  cursor: ew-resize;
  background: linear-gradient(to right, transparent 2px, var(--rule) 2px, var(--rule) 3px, transparent 3px);
  touch-action: none;
  outline: none;
}
#lens-grip:hover, #lens-grip:focus-visible, #lens-grip.dragging {
  background: linear-gradient(to right, transparent 2px, var(--amber) 2px, var(--amber) 3px, transparent 3px);
}

.rail-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--ash);
  padding: 0 16px 12px;
}

/* thirteen lenses now — the list scrolls before it ever clips the rail foot */
#lens-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.lens-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  font-family: var(--mono);
  padding: 9px 16px 9px 14px;
  cursor: pointer;
  color: var(--ivory-dim);
}
.lens-item:hover { color: var(--ivory); }
.lens-item .li-id {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
  display: block;
}
.lens-item .li-name {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  display: block;
  margin-top: 2px;
}
.lens-item.active {
  border-left-color: var(--amber);
  color: var(--ivory);
}
.lens-item.active .li-id { color: var(--amber); }

.rail-foot { margin-top: auto; padding: 16px; }
.annotation {
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.desktop-status {
  position: fixed;
  z-index: 120;
  top: 62px;
  right: 18px;
  max-width: min(440px, calc(100vw - 36px));
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--plate);
  color: var(--ivory-dim);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.desktop-status[data-kind='error'] { border-color: var(--iron); color: var(--ivory); }
.desktop-status[data-kind='ok'] { border-color: var(--amber); }
.ds-detail {
  display: block;
  margin-top: 4px;
  color: var(--ash);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.ds-action {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-left: 12px;
  padding: 3px 8px;
  background: none;
  border: 1px solid var(--amber);
  color: var(--amber);
  cursor: pointer;
}
.ds-action:hover { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.recent-sessions { display: grid; gap: 4px; margin: 12px 0 6px; }
.recent-session { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recent-session .plate-btn { flex: 1; text-align: left; }
.recent-session[data-missing='true'] { opacity: 0.55; }

/* ---- aperture ---- */

#aperture-frame {
  flex: 1;
  position: relative;
  min-width: 0;
  background: var(--void);
}

#aperture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.reg-mark {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.reg-mark::before, .reg-mark::after {
  content: "";
  position: absolute;
  background: var(--rule);
}
.reg-mark::before { width: 12px; height: 1px; }
.reg-mark::after  { width: 1px;  height: 12px; }
.rm-tl { top: 12px; left: 12px; }
.rm-tr { top: 12px; right: 12px; transform: scaleX(-1); }
.rm-bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.rm-br { bottom: 12px; right: 12px; transform: scale(-1); }

#lens-caption {
  position: absolute;
  left: 32px;
  right: calc(50% + 112px);
  bottom: 24px;
  /* The INSTRUMENT / OBSERVE pair sits centred on this same baseline, so an
     unbounded caption runs underneath it — on CHAIN the measure text was
     printing straight through the buttons. Stop short of the centre instead. */
  display: flex;
  gap: 8px 14px;
  align-items: baseline;
  flex-wrap: wrap;
  pointer-events: none;
}
#lens-caption-id {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--amber);
}
#lens-caption-name {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--ivory-dim);
}
#lens-caption-measure {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ash);
  white-space: normal;
  line-height: 1.35;
  /* the lens name is load-bearing; the gloss moves to a complete second line
     instead of being clipped into an accidental half-sentence */
  flex-basis: 100%;
  min-width: 0;
}
/* an observe-only lens says so, deadpan — a silently dead surface is a lie */
#lens-caption-observed {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ash);
  border: 1px solid var(--rule-soft);
  padding: 2px 6px;
  white-space: nowrap;
}
#lens-caption-observed[hidden] { display: none; }
/* ---- desktop pressure, not a mobile layout ----
   Windows scaling shrinks the CSS viewport: a 1080p screen is 1536 px at 125%
   and 1280 px at 150%. These steps let the bench yield in that range instead
   of colliding. Nothing is rearranged — things give up room in a set order:
   the masthead's breathing space, then the doc-ref, then label widths. */
@media (max-width: 1400px) {
  .mast-readouts { gap: 18px; }
}
@media (max-width: 1200px) {
  .doc-ref { display: none; }              /* the plate line yields first */
  .mast-readouts { gap: 14px; }
  .readout { min-width: 60px; }
  .spine-block { padding: 8px 10px; }      /* buys the MIX value its room */
  .sb-v { font-size: 12px; }
}
@media (max-width: 1040px) {
  .mast-readouts { gap: 10px; }
  .readout { min-width: 52px; }
  .ro-value { font-size: 12px; }
  .spine-drawer-k, .spine-step-k { min-width: 64px; }
  .bench-pages { padding-left: 8px; padding-right: 8px; }
  .bench-page { letter-spacing: 0.06em; }   /* the five pages keep their names */
  /* At the 960 CSS-pixel Windows case the left half is too narrow to carry a
     complete caption beside the stance. Give it the full row above instead. */
  #lens-caption { right: 32px; bottom: 48px; }
}
@media (max-width: 900px) {
  #lens-caption-measure { display: none; }
}

/* ---- control rail ---- */

/* the grip: drag to give the rail more bench, Ableton-style */
#rail-grip {
  flex: 0 0 6px;
  cursor: ew-resize;
  background: linear-gradient(to right, transparent 2px, var(--rule) 2px, var(--rule) 3px, transparent 3px);
  touch-action: none;
}
#rail-grip:hover, #rail-grip.dragging {
  background: linear-gradient(to right, transparent 2px, var(--amber) 2px, var(--amber) 3px, transparent 3px);
}

#control-rail {
  flex: 0 1 248px;
  min-width: 200px;
  border-left: none;
  background: var(--void-warm);
  overflow-y: auto;
  /* CSS computes overflow-x:visible to auto when the other axis is not
     visible — which is where the rail's horizontal scrollbar came from.
     Say it explicitly; rows compress instead of scrolling sideways. */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* foldable sections: the label is the fold, like a device header */
.ctl-section-label { cursor: pointer; user-select: none; }
.ctl-section-label .fold-mark {
  color: var(--ash);
  font-size: 8px;
  margin-right: 6px;
}
.ctl-section.collapsed > :not(.ctl-section-label) { display: none; }
.ctl-section.collapsed .ctl-section-label { opacity: 0.75; }

#controls { padding: 16px; display: flex; flex-direction: column; gap: 24px; }
#instrument-controls { display: none; }
#controls, #instrument-controls { min-width: 0; width: 100%; }

/* ---- the paged bench: five surfaces, not one scroll ---- */
/* the bar rides the top of the rail; each page shows only its own family */
.bench-pages {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 0;
  margin: -16px -16px 0;
  padding: 10px 12px 0;
  background: var(--void-warm);
  border-bottom: 1px solid var(--rule);
}
.bench-page {
  flex: 1;
  min-width: 0;
  /* min-width:0 lets the BOX shrink, but the label's min-content width still
     forced the strip past the rail — which is what made the tabs collide.
     Let the text truncate and the five pages always fit. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;   /* all five page names fit the rail without truncating */
  color: var(--ash);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 1px 8px;
  cursor: pointer;
}
.bench-page:hover { color: var(--ivory-dim); }
.bench-page.active {
  color: var(--ivory);
  border-bottom-color: var(--amber);
}
.bench-page-note { margin: -14px 0 -12px; min-height: 12px; }

/* a section sits on exactly one page */
#controls[data-page="play"]   > .ctl-section:not([data-page="play"]),
#controls[data-page="voices"] > .ctl-section:not([data-page="voices"]),
#controls[data-page="chain"]  > .ctl-section:not([data-page="chain"]),
#controls[data-page="field"]  > .ctl-section:not([data-page="field"]),
#controls[data-page="bank"]   > .ctl-section:not([data-page="bank"]) { display: none; }

/* middle depth: one lens, three to five nearby controls, full truth caveats */
body.instrument #controls { display: none; }
body.instrument #instrument-controls {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.instrument #control-rail { flex-basis: 272px !important; }
body.instrument #rail-grip { cursor: default; opacity: 0.45; pointer-events: none; }
.instrument-depth-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.instrument-depth-title {
  color: var(--ivory);
  font-size: 11px;
  letter-spacing: .22em;
}
/* the selection readout (rule 1): one control — name, value, unit — and
   the caveat it can never be separated from */
.id-selected {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 10px;
  background: var(--plate);
  border: 1px solid var(--rule-soft);
  margin-bottom: 4px;
}
.id-sel-name {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ash);
}
.id-sel-valuerow { display: flex; align-items: baseline; gap: 8px; }
.id-sel-value {
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 0;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.id-sel-unit {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ash);
}
.id-selected .tier-tag { align-self: flex-start; }

/* a control row: the drawn bar IS the handle (rule 5) — press-drag catches */
.id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 0;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.id-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ash);
  width: 64px;
  flex: 0 0 64px;
}
.id-row.selected .id-label { color: var(--ivory-dim); }
.id-track {
  position: relative;
  flex: 1;
  height: 14px;
  border-bottom: 1px solid var(--rule);
}
.id-fill {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ivory-dim);
  opacity: 0.55;
}
.id-row.selected .id-fill { background: var(--amber); opacity: 0.8; }
.id-mark {
  position: absolute;
  bottom: -7px;
  width: 3px;
  height: 13px;
  margin-left: -1px;
  background: var(--ivory-dim);
}
.id-row.selected .id-mark { background: var(--ivory); }
.id-row.caught .id-mark { background: var(--amber); }
.id-row:focus-visible .id-label { color: var(--ivory); }
.id-val {
  font-size: 9px;
  color: var(--ivory-dim);
  flex: 0 0 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.id-foot { padding-top: 8px; border-top: 1px solid var(--rule-soft); }

.ctl-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ctl-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--ash);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* provenance chip: the epistemic weight, engraved small */
.tier-tag {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ash);
  border: 1px solid var(--rule-soft);
  padding: 2px 5px;
  white-space: nowrap;
  cursor: help;
  flex: 0 0 auto;
}
.tier-tag:hover { color: var(--ivory-dim); border-color: var(--rule); }

/* experiences: the one-tap binaural door */
/* Three columns only while three columns fit. At 248 px of rail each cell is
   ~72 px, and SCHUMANN needs ~68 px before padding — so the longest names were
   being cut to SCHUMAN and CONCENT. auto-fit drops to two columns rather than
   clipping, and the rail is user-resizable, so a fixed count could never be
   right at every width. */
.beat-grid.experience-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.experience-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  font-family: var(--mono);
  background: var(--plate);
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  padding: 8px;
  cursor: pointer;
}
.experience-btn:hover { color: var(--ivory); border-color: var(--amber); }
.experience-btn .xp-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  /* a name that still cannot fit wraps rather than losing its last letters —
     a truncated CONCENT reads as a different word, not as a narrow column */
  overflow-wrap: anywhere;
  min-width: 0;
}
.experience-btn .xp-band {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.xp-catalogue-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
}

/* the preview bench under the experience grid */
.xp-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--void-warm);
  border: 1px solid var(--rule-soft);
  border-left: 1px solid var(--amber);
  min-height: 34px;
}
.xp-preview .xp-prev-head {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
}
.xp-preview .xp-prev-note {
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ash);
}

/* TRANSPOSE — the master pitch readouts */
.xpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 8px 0 6px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.xpose-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  background: var(--void-warm);
}
.xpose-kv .xpose-k {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ash);
}
.xpose-kv .xpose-v {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
}

/* the input meter */
.input-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 6px 0 4px;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .08em;
}
.input-flow span { white-space: nowrap; }
.input-device {
  width: 100%;
  margin: 7px 0 5px;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  background: var(--plate);
  color: var(--ivory-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
}
.input-device:disabled { color: var(--ash); }
.input-active-source {
  margin-bottom: 7px;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .1em;
}
.input-active-source[data-armed='true'] { color: var(--amber); }
.input-file-record {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0;
  padding-top: 7px;
  border-top: 1px solid var(--rule-soft);
}
.input-file-record-label {
  margin-right: auto;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .12em;
}
/* HELD INPUT CAPTURE — a clear present/absent badge for the live capture */
.held-badge {
  margin: 8px 0 2px;
  padding: 4px 8px;
  font-size: var(--type-label);
  letter-spacing: .12em;
  border: 1px dashed var(--rule);
  color: var(--ash);
}
.held-badge[data-held='true'] {
  border-style: solid;
  border-color: var(--amber);
  color: var(--amber);
}
/* USE AS SPACE lives under an advanced, experimental disclosure */
.input-advanced { margin: 8px 0; }
.input-advanced > summary {
  cursor: pointer;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .14em;
  padding: 3px 0;
}
.input-advanced > summary:hover { color: var(--ivory-dim); }
.input-advanced .annotation { margin-top: 4px; }
.input-place-guide { display: grid; gap: 5px; margin: 8px 0; }
.input-place-guide span { color: var(--ash); font-size: var(--type-label); line-height: 1.45; }
.input-place-guide b { color: var(--ivory-dim); font-weight: 500; letter-spacing: .12em; }
.in-meter {
  position: relative;
  height: 8px;
  margin: 8px 0 4px;
  background: var(--plate);
  border: 1px solid var(--rule);
}
.in-meter-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--amber);
  opacity: 0.75;
  transition: width 0.06s linear;
}
.in-meter-db {
  position: absolute;
  right: 4px;
  top: -1px;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}

/* voice block */
.voice { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--rule-soft); background: var(--plate); }
.voice-head { display: flex; align-items: center; justify-content: space-between; }
.voice-id { font-size: 9px; letter-spacing: 0.18em; color: var(--ivory-dim); }

.toggle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ash);
  padding: 3px 8px;
  cursor: pointer;
}
.toggle[data-on="true"] { color: var(--amber); border-color: var(--amber); }

.freq-row { display: flex; align-items: baseline; gap: 6px; }
.freq-value {
  font-size: 16px;
  font-weight: 300;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.freq-unit { font-size: 9px; letter-spacing: 0.14em; color: var(--ash); }
.stepper {
  font-family: var(--mono);
  font-size: 11px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  width: 22px; height: 22px;
  cursor: pointer;
  line-height: 1;
}
.stepper:hover { color: var(--ivory); border-color: var(--ash); }

.wave-row { display: flex; gap: 4px; }
.wave-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.suite-waves { flex: 1; }

.fam-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.suite-list {
  max-height: 176px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.suite-list .preset-btn { gap: 8px; }
.suite-list .preset-btn span:first-child { white-space: nowrap; }
.suite-list .preset-btn .pf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.tap-btn { flex: 0 0 auto; padding: 5px 10px; }
.tap-btn.beat { animation: beatflash 0.28s ease-out; }
.tap-btn.beat-accent { animation: beatflash-accent 0.34s ease-out; }
@keyframes beatflash {
  0% { color: #7e94ad; border-color: #7e94ad; }
  100% { color: #6c675f; border-color: #2b2733; }
}
@keyframes beatflash-accent {
  0% { color: #c4a06a; border-color: #c4a06a; }
  100% { color: #6c675f; border-color: #2b2733; }
}

.pitch-value { font-size: 13px; flex: 0 0 auto; min-width: 52px; text-align: center; }

.suite-readout {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  padding: 6px 2px 0;
  min-height: 14px;
}
.wave-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ash);
  padding: 4px 0;
  cursor: pointer;
}
.wave-btn.active { color: var(--ivory); border-color: var(--ash); background: var(--void); }

.slider-row { display: flex; align-items: center; gap: 8px; }
.slider-label { font-size: 9px; letter-spacing: 0.14em; color: var(--ash); width: 34px; }
/* transpose labels size to content (SEMITONES is wider than a fixed 34px) */
.xpose-label { font-size: 9px; letter-spacing: 0.14em; color: var(--ash); flex: 1; white-space: nowrap; }
.slider-val { font-size: 9px; color: var(--ivory-dim); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: ew-resize;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 13px;
  margin-top: -6px;
  background: var(--ivory-dim);
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--rule); }
input[type="range"]::-moz-range-thumb {
  width: 3px; height: 13px; border: none; border-radius: 0;
  background: var(--ivory-dim);
}

/* breath */
.ratio-row { display: flex; gap: 4px; }
.ratio-btn {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ash);
  padding: 5px 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ratio-btn.active { color: var(--dust-blue); border-color: var(--dust-blue); }
.seance-protocol-grid,
.pandora-bank-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ctl-section .plate-actions .plate-btn {
  flex: 1;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  letter-spacing: 0.12em;
}
.slider-row > .slider-label {
  flex: 0 0 68px;
  width: 68px;
}

.beat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.beat-grid .ratio-btn { font-variant-numeric: tabular-nums; }
.beat-grid .ratio-btn.active { color: var(--copper); border-color: var(--copper); }

.breath-meter {
  height: 3px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.breath-meter-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  background: var(--dust-blue);
  opacity: 0.7;
}

/* presets */
.preset-list { display: flex; flex-direction: column; }
.preset-btn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ivory-dim);
  padding: 6px 2px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.preset-btn:hover { color: var(--ivory); }
.preset-btn.active { color: var(--amber); }
.preset-btn .pf {
  font-size: 9px;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------------- transport ---------------- */

/* ---------------- the signal trace ---------------- */
#scope-strip {
  flex: 0 0 22px;
  padding: 0 16px 2px;
  background: var(--void-warm);
}
#scope {
  display: block;
  width: 100%;
  height: 20px;
  border: 1px solid var(--rule-soft);
  border-bottom: none;
  background: var(--void);
}

/* ---------------- THE SPINE ---------------- */
/* what is SET. Five always-visible blocks; a small drawer opens upward. */
#spine {
  flex: 0 0 58px;
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 0 16px 8px;
  background: var(--void-warm);
  border-top: 1px solid var(--rule);
}

.spine-cell {
  position: relative;         /* anchors the drawer that opens upward */
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.spine-cell-state { flex: 0 0 auto; gap: 6px; }

/* the readout block — label over value, the whole cell is the affordance */
.spine-block {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  background: var(--plate);
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.spine-block:hover { color: var(--ivory); border-color: var(--ash); }
.spine-block[aria-expanded="true"] {
  color: var(--ivory);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--plate));
}
.sb-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.sb-k {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
}
.sb-v {
  font-size: 13px;
  font-weight: 300;
  color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spine-block[aria-expanded="true"] .sb-v { color: var(--ivory); }
/* CAPTURE pulses red while a take or a freeze is being recorded — unmistakable */
.spine-block.recording {
  border-color: var(--iron);
  animation: tapelamp 1.6s ease-in-out infinite;
}
.spine-block.recording .sb-v { color: var(--iron); }

/* STATE keeps the engage lamp + its engaged glow */
.engage-lamp {
  width: 6px; height: 6px;
  background: var(--ash);
  flex: 0 0 auto;
  transition: background 0.4s, box-shadow 0.4s;
}
#engage[data-state="engaged"] { color: var(--ivory); border-color: var(--amber); }
#engage[data-state="engaged"] .engage-lamp {
  background: var(--amber);
  box-shadow: 0 0 8px 1px rgba(196, 160, 106, 0.55);
}

/* ▸ PLAY — arming the keys, kept beside STATE (playing IS a stance) */
.spine-armkey {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
}
.spine-armkey:hover { color: var(--ivory); border-color: var(--ash); }
.spine-armkey.confirm { color: var(--copper); border-color: var(--copper); }

/* the drawer that opens upward from a block */
.spine-drawer {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(560px, 60vw);
  background: var(--plate);
  border: 1px solid var(--amber);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 12;
}
.spine-drawer[hidden] { display: none; }
.spine-drawer.wide { max-width: min(720px, 82vw); right: 0; left: auto; }
.spine-drawer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.spine-drawer-k {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
  min-width: 84px;
}
.spine-drawer-hint {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* the collapsed cycle — a thin travelling bar on the CAPTURE block itself,
   so loop phase is legible without opening anything */
.sb-phase {
  flex: 0 0 34px;
  height: 2px;
  margin-left: auto;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.sb-phase[hidden] { display: none; }
.sb-phase > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--amber);
}
#freeze-rings { background: var(--void); border: 1px solid var(--rule-soft); }

/* CLEAR ALL is destructive mid-performance, so it must be HELD, not tapped.
   The fill is the confirmation — you can see the erase coming and let go. */
#loop-clear { position: relative; overflow: hidden; }
#loop-clear::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in srgb, var(--iron) 45%, transparent);
  pointer-events: none;
}
#loop-clear.holding { color: var(--iron); border-color: var(--iron); }
#loop-clear.holding::after { width: 100%; transition: width 900ms linear; }
#freeze-level, #freeze-tape-pitch {
  flex: 1;
  min-width: 120px;
  accent-color: var(--amber);
}
#freeze-tape-pitch:disabled { opacity: 0.35; }
.spine-nav-row {
  padding-top: 4px;
  border-top: 1px solid var(--rule-soft);
}
.spine-nav {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------- the stance switch (near the world) ---------------- */
#stance {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1px;
  z-index: 6;
  opacity: 0.55;
  transition: opacity 0.3s;
}
#aperture-frame:hover #stance, #stance:focus-within { opacity: 1; }
.stance-opt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  background: color-mix(in srgb, var(--void) 70%, transparent);
  border: 1px solid var(--rule);
  color: var(--ash);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.stance-opt:hover { color: var(--ivory-dim); border-color: var(--ash); }
.stance-opt.active { color: var(--ivory); border-color: var(--amber); }

/* ---------------- spine drawer contents ---------------- */
.spine-step, .spine-slider, .spine-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spine-step-k {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
  min-width: 84px;
}
.spine-step-btn {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  width: 22px; height: 22px;
  cursor: pointer;
}
.spine-step-btn:hover { color: var(--ivory); border-color: var(--ash); }
.spine-step-v {
  font-size: 12px;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.spine-slider input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--amber); }
.spine-opt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  padding: 4px 10px;
  cursor: pointer;
}
.spine-opt:hover { color: var(--ivory); border-color: var(--ash); }
.spine-opt.active { color: var(--copper); border-color: var(--copper); }
/* offered but not yet meaningful — clicking says why, rather than doing nothing */
.spine-opt.unavailable { opacity: 0.45; }

/* ---- PLAYED — the instrument under your hands ---- */
.spine-cell-played { flex: 0 0 auto; gap: 6px; }
.played-grid { display: flex; flex-wrap: wrap; gap: 6px; }
/* Registered and measured, but not yet sealable into a moment. Struck through
   rather than hidden: a missing row reads as a missing feature, a struck one
   reads as a schedule. The title says which engine version it waits for. */
.played-opt.pending {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.played-opt.pending:hover { color: var(--ivory-dim); border-color: var(--rule); }

/* a drawer's opening sentence — quieter than a control, still comfortably read */
.spine-drawer-lede { align-items: flex-start; }
.spine-drawer-say {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ivory-dim);
  max-width: 52ch;
}
/* the spelled-out FREEZE state, where there is room for words */
.spine-drawer-state {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.spine-drawer-state.live { color: var(--copper); }
.spine-readout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 4px 0;
  border-top: 1px solid var(--rule-soft);
}
.spine-kv { display: flex; flex-direction: column; gap: 2px; }
.spine-kv-k { font-size: 9px; letter-spacing: 0.16em; color: var(--ash); }
.spine-kv-v { font-size: 12px; color: var(--ivory); font-variant-numeric: tabular-nums; }
.spine-drawer .annotation { max-width: 340px; }

/* ---------------- observation plates ---------------- */

.plate-controls { display: flex; gap: 6px; }

.plate-btn {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory-dim);
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.plate-btn:hover { color: var(--ivory); border-color: var(--ash); }
.plate-btn.confirm { color: var(--copper); border-color: var(--copper); }
.plate-btn.active {
  color: var(--copper);
  border-color: var(--copper);
  background: color-mix(in srgb, var(--copper) 12%, transparent);
}
.plate-btn:disabled { opacity: 0.4; cursor: default; }
.plate-btn.taping {
  color: var(--iron);
  border-color: var(--iron);
  animation: tapelamp 2s ease-in-out infinite;
}
@keyframes tapelamp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

#plate-drawer {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 24, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#plate-drawer[hidden] { display: none; }

.plate-panel {
  width: 420px;
  max-width: 90vw;
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#plate-input {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--void);
  border: 1px solid var(--rule);
  color: var(--ivory);
  padding: 8px;
  outline: none;
}
#plate-input:focus { border-color: var(--ash); }

.plate-actions { display: flex; gap: 6px; }

#scan-drawer {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 24, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
}
#scan-drawer[hidden] { display: none; }
.scan-panel { width: 508px; }
#scan-canvas {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--void);
}

.seance-btn { width: 100%; }
.seance-btn[data-on="true"] {
  color: var(--iron);
  border-color: var(--iron);
}

/* ---- MODES · CATALOGUE FIELD ---- */
.mode-controls { display: flex; gap: 6px; align-items: center; }
.mode-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ivory-dim);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 5px 8px;
  background: var(--plate);
  cursor: pointer;
}
.mode-btn:hover { color: var(--ivory); border-color: var(--amber); }

#session-badge {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--amber);
  background: var(--void-warm);
  border: 1px solid var(--rule);
  border-top-color: var(--amber);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 32px);
  flex-wrap: wrap;
  justify-content: center;
}
#session-badge[hidden] { display: none; }

/* The ribbon names the loaded field, but it sits over the aperture. It can be
   put away without releasing the field: a small restore tab keeps it one click
   from returning, so nothing is lost by hiding it. */
.sb-hide {
  background: none;
  border: none;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  padding: 0 2px 0 6px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.sb-hide:hover { color: var(--amber); }
.sb-restore {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  background: var(--void-warm);
  border: 1px solid var(--rule);
  border-top-color: var(--amber);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.sb-restore:hover { opacity: 1; color: var(--amber); }
.sb-restore[hidden] { display: none; }
body.chamber .sb-restore { display: none; }
#session-badge .sb-dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  animation: sb-pulse 3.2s ease-in-out infinite;
}
.sb-path { color: var(--ivory); }
#session-badge-meta { color: var(--ash); letter-spacing: 0.12em; }
#session-badge-state {
  color: var(--ivory-dim);
  border-left: 1px solid var(--rule);
  padding-left: 8px;
}
#session-badge-state[data-phase='live'] { color: var(--phosphor); }
.sb-action {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--rule);
  background: none;
  color: var(--ash);
  font: inherit;
  letter-spacing: .16em;
  text-decoration: none;
  padding: 0 0 0 8px;
  cursor: pointer;
}
.sb-action:hover, .sb-action:focus-visible { color: var(--ivory); outline: none; }
@keyframes sb-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* the STATE ENGINE strip — indices, shown only while the loop is on */
#state-strip {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 14px;
  background: var(--void-warm);
  border: 1px solid var(--rule);
  border-top-color: var(--sage);
  font-variant-numeric: tabular-nums;
}
#state-strip[hidden] { display: none; }
#state-strip.draggable { cursor: grab; touch-action: none; user-select: none; }
#state-strip.dragging { cursor: grabbing; border-top-color: var(--amber); }
.ss-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--sage);
}
.ss-dot {
  width: 6px; height: 6px;
  background: var(--sage);
  border-radius: 50%;
  animation: sb-pulse 2.4s ease-in-out infinite;
}
.ss-metric { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.ss-metric .ss-k { font-size: 7px; letter-spacing: 0.18em; color: var(--ash); }
.ss-metric .ss-v { font-size: 13px; font-weight: 300; color: var(--ivory-dim); }
/* STEER is the live hand on the field — amber marks it as the acting readout */
.ss-steer .ss-v { color: var(--amber); }

/* the ADAPTIVE control: amber when steering, sage when only observing */
#adaptive.confirm { color: var(--amber); border-color: var(--amber); }
#adaptive.watching { color: var(--sage); border-color: var(--sage); }

#session-drawer {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 24, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#session-drawer[hidden] { display: none; }

/* The library drawer remains modal. Recovery is a deliberate, non-blocking
   offer below the masthead so Create can resume or continue fresh. */
#bank-drawer {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 24, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#bank-drawer[hidden] { display: none; }
.recovery-offer {
  position: fixed;
  z-index: 9;
  top: 58px;
  left: 50%;
  width: min(760px, calc(100vw - 40px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px;
  border: 1px solid var(--amber);
  background: var(--plate);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .34);
}
.beat-grid.seance-protocol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recovery-offer[hidden] { display: none; }
.recovery-offer .annotation { margin: 5px 0 0; }
.recovery-offer .plate-actions { flex: 0 0 auto; }

#session-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--void);
  border: 1px solid var(--rule);
  color: var(--ivory);
  padding: 8px;
  outline: none;
}
#session-name:focus { border-color: var(--ash); }

/* ---- the LIBRARY — an antechamber, not a menu ---- */
.library-body { overflow-y: auto; background: var(--void); }
#library-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 72px 32px 140px;
  animation: lib-arrive 1.4s ease both;
}
@keyframes lib-arrive { from { opacity: 0; } to { opacity: 1; } }
.lib-intro {
  text-align: center;
  margin-bottom: 60px;
}
.lib-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.55em;
  color: var(--ivory);
  padding-left: 0.55em; /* optical centering under the wide tracking */
}
.lib-intro-line {
  margin-top: 14px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ash);
}
.lib-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 24px auto 0;
  color: var(--ivory-dim);
  font-size: 8px;
  letter-spacing: .16em;
}
.lib-flow b { color: var(--amber); font-weight: 400; }
.lib-flow i { color: var(--ash); font-style: normal; }
.lib-positioning {
  max-width: 560px;
  margin: 12px auto 0;
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--ash);
}
.lib-ledger-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ivory-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.lib-ledger-link:hover { color: var(--amber); border-color: var(--amber); }
.lib-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lib-shelf { border-bottom: 1px solid var(--rule-soft); }
.lib-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  padding: 8px 0 28px;
}

/* category headers — the epistemology, engraved */
.proto-cat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 0 14px;
  cursor: pointer;
  list-style: none;
}
.proto-cat::-webkit-details-marker { display: none; }
.proto-cat::before { content: '›'; color: var(--amber); font-size: 12px; transition: transform .2s ease; }
.lib-shelf[open] > .proto-cat::before { transform: rotate(90deg); }
.proto-cat:hover .proto-cat-name, .proto-cat:focus-visible .proto-cat-name { color: var(--amber); }
.proto-cat:focus-visible { outline: 1px solid var(--rule); outline-offset: 4px; }
.proto-cat-n {
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--ash);
}
.proto-cat-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--ivory);
}
.proto-cat-sub { font-size: 9px; letter-spacing: 0.06em; color: var(--ash); }
.proto-cat-count { margin-left: auto; font-size: 8px; color: var(--ash); }

/* the protocol card — a small spec sheet */
.proto-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 16px;
  background: var(--void-warm);
  border: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.proto-card:hover, .proto-card:focus {
  outline: none;
  background: var(--plate);
  border-color: var(--rule);
  border-left-color: var(--amber);
}
.proto-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.proto-code { font-size: 9px; letter-spacing: 0.24em; color: var(--amber); font-variant-numeric: tabular-nums; }
.proto-rev { font-size: 8px; letter-spacing: 0.1em; color: var(--ash); font-variant-numeric: tabular-nums; }
.proto-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.proto-name { font-size: 15px; font-weight: 500; letter-spacing: 0.24em; color: var(--ivory); }
.proto-meta { font-size: 9px; letter-spacing: 0.06em; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proto-note {
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--ivory-dim);
}
.proto-spec {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.ps-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  background: var(--void);
}
.ps-k { font-size: 8px; letter-spacing: 0.16em; color: var(--ash); }
.ps-v { font-size: 9px; letter-spacing: 0.02em; color: var(--ivory-dim); font-variant-numeric: tabular-nums; text-align: right; }
.proto-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
}
.proto-tier { font-size: 8px; letter-spacing: 0.08em; color: var(--ash); flex: 1; min-width: 60%; }
.proto-src-btn, .lib-del {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ash);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.proto-src-btn:hover { color: var(--amber); }
.lib-del:hover { color: var(--iron); }
.proto-src {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--rule-soft);
}
.proto-src-line { font-size: 8px; line-height: 1.6; letter-spacing: 0.03em; color: var(--ivory-dim); }
.proto-enter { margin-left: auto; color: var(--ash); letter-spacing: .16em; }
.proto-card:hover .proto-enter, .proto-card:focus .proto-enter { color: var(--amber); }
.lib-hint { grid-column: 1 / -1; text-align: center; margin-top: 24px; }

/* the threshold: choosing a plate closes the room around its name */
#threshold, #arrival {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  pointer-events: none;
}
#threshold { opacity: 0; transition: opacity 1.1s ease; }
#threshold.on { opacity: 1; }
#arrival { opacity: 1; transition: opacity 2.6s ease 0.9s; }
#arrival.off { opacity: 0; }
.th-code {
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--amber);
}
.th-name {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.6em;
  padding-left: 0.6em;
  color: var(--ivory);
}
.th-line {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--ash);
}

/* ---- the FIELD LIBRARY rack ---- */
.field-wrap { display: flex; flex-direction: column; gap: 8px; }
.field-group-label {
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--ash);
  margin-top: 4px;
}
.field-btn { font-size: 8px; }
.field-faders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
}

/* narrow screens: rails shrink, motto goes */
@media (max-width: 1100px) {
  .motto, .doc-ref { display: none; }
  #lens-rail { flex-basis: 128px; }
  #control-rail { flex-basis: 224px; }
}

/* ============ CHAMBER — the doorway ============ */
/* the field alone: the rack, rails and transport recede; the aperture fills */
body.chamber #lens-rail,
body.chamber #lens-grip,
body.chamber #rail-grip,
body.chamber #control-rail,
body.chamber #spine,
body.chamber #scope-strip,
body.chamber #stance,
body.chamber .mast-readouts,
body.chamber .doc-ref { display: none; }
body.chamber #masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 55;
  border-bottom: none; background: transparent; pointer-events: none;
}
body.chamber #masthead .wordmark { opacity: 0.35; transition: opacity 1.2s ease; }
body.chamber #lens-caption { opacity: 0.25; transition: opacity 1.2s ease; }
/* the lock badge recedes in the room — present, never loud */
body.chamber #session-badge { opacity: 0.5; border-top-color: var(--rule); }
/* the room recedes further: registration marks and bench stubs go; the
   epistemic footer stays — provenance survives the room — but quietly */
body.chamber .reg-mark { display: none; }
body.chamber #polarity-stub { display: none; }
body.chamber .truth-footer { opacity: 0.55; transition: opacity 0.6s ease; }
body.chamber .truth-footer:hover { opacity: 1; }
body.chamber .truth-chip { background: transparent; }

/* the chamber bar: one quiet instrument strip — a plate, not glass */
#chamber-bar {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 10px 0; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: 94vw; padding: 11px 10px;
  background: color-mix(in srgb, var(--void) 93%, transparent);
  border: 1px solid var(--rule);
  animation: ch-arrive 1.6s ease both;
}
@keyframes ch-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #chamber-bar { animation: none; } }
#chamber-bar[hidden] { display: none; }
.ch-head { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); padding: 0 18px 0 10px; }
#chamber-name { font-size: 11px; letter-spacing: .22em; color: var(--ivory); text-transform: uppercase; white-space: nowrap; }
#chamber-clock { font-size: 9px; color: var(--ash); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.ch-mark-count { font-size: 9px; color: var(--amber); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
body[data-pathway='guide'] #chamber-clock {
  font-size: var(--type-value);
  color: var(--amber);
  letter-spacing: .16em;
}
body[data-pathway='guide'] .ch-engage { min-width: 132px; }
body[data-pathway='play'] #chamber-mark { color: var(--amber); border-color: var(--rule); }
.ch-group { display: flex; align-items: center; gap: 2px; padding: 0 10px;
  border-left: 1px solid var(--rule-soft); }
.ch-btn {
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-dim); background: none; border: 1px solid transparent;
  padding: 10px 13px; cursor: pointer; white-space: nowrap;
  transition: color .35s, border-color .35s;
}
.ch-btn:hover { color: var(--ivory); border-color: var(--rule); }
.ch-engage { border-color: var(--rule); background: var(--plate); letter-spacing: .25em; min-width: 84px; }
.ch-engage.on { color: var(--copper); border-color: var(--copper); }
.ch-ghost { color: var(--ash); }
.ch-veil { display: flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 9px; letter-spacing: .2em; color: var(--ash); padding: 0 6px 0 14px; cursor: ew-resize; }
#chamber-veil { -webkit-appearance: none; appearance: none; width: 132px; height: 14px;
  background: transparent; outline: none; cursor: ew-resize; }
#chamber-veil::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
#chamber-veil::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 13px;
  margin-top: -6px; background: var(--ivory-dim); cursor: ew-resize; border-radius: 0; }
#chamber-veil:hover::-webkit-slider-thumb { background: var(--ivory); }
#chamber-veil::-moz-range-track { height: 1px; background: var(--rule); }
#chamber-veil::-moz-range-thumb { width: 3px; height: 13px; background: var(--ivory-dim);
  border: none; border-radius: 0; }
@media (max-width: 680px) {
  #chamber-bar { gap: 8px 0; padding: 10px 8px; }
  .ch-head { width: 100%; flex-direction: row; align-items: baseline; gap: 12px;
    justify-content: center; padding: 2px 0 6px; }
  .ch-group { border-left: none; padding: 0 4px; }
}

#chamber-refusal {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--void) 94%, transparent);
  padding: 24px;
}
#chamber-refusal[hidden] { display: none; }
.ch-refusal-panel { max-width: 460px; border: 1px solid var(--rule);
  background: var(--void-warm); padding: 28px; text-align: center; }
.ch-refusal-title { font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  color: var(--iron); margin-bottom: 14px; }
.ch-refusal-panel .plate-actions { justify-content: center; margin-top: 16px; }

/* ---- THE BANK — marked fields as tracks ---- */
.bank-list { max-height: 46vh; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.bank-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--rule-soft); }
.bank-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bank-name { font-size: 11px; letter-spacing: .08em; color: var(--ivory);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-time { font-size: 9px; color: var(--ash); letter-spacing: .08em; }
.bank-row-acts { display: flex; gap: 5px; flex-shrink: 0; }
.bank-row-acts .plate-btn { padding: 6px 8px; font-size: 9px; }

/* ============================================================
   CONTRACT P0 — truth footer · entrance · POLARITY stub
   ============================================================ */

/* the truth-status footer (contract §1) — the epistemic signature on every
   lens, pinned to the aperture's lower edge */
.truth-footer {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  gap: 5px;
  z-index: 6;
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
}
.truth-chip {
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 1px;
  background: rgba(20, 18, 24, 0.72);
  color: var(--ivory-dim);
  cursor: help;
}
.truth-plus { color: var(--ash); font-size: 9px; }
.truth-measured  { color: var(--copper);    border-color: var(--copper); }
.truth-modeled   { color: var(--dust-blue); border-color: var(--dust-blue); }
.truth-tradition { color: var(--smoke);     border-color: var(--smoke); }
.truth-composed  { color: var(--amber);     border-color: var(--amber); }
.truth-felt      { color: var(--sage);      border-color: var(--sage); }

/* POLARITY stub — the ORBITAL fold of the retired L·06, top-right of aperture */
#polarity-stub {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(20, 18, 24, 0.82);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ivory-dim);
}
#polarity-stub .pol-label { color: var(--amber); letter-spacing: 0.2em; }
#polarity-stub .pol-sub { color: var(--ash); margin-left: 4px; }
#polarity-stub label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#polarity-stub input[type="range"] { flex: 1; accent-color: var(--amber); }

/* the entrance — intention groups as the front door (contract §2) */
.entrance {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: radial-gradient(120% 90% at 50% 30%, var(--void-warm), var(--void) 72%);
  font-family: var(--mono);
  padding: 40px;
}
.entrance[hidden] { display: none; }
.entrance-head { text-align: center; }
.entrance-mark { font-size: 22px; letter-spacing: 0.42em; color: var(--ivory); }
.entrance-sub { margin-top: 10px; font-size: 11px; letter-spacing: 0.18em; color: var(--ivory-dim); }
.entrance-grid {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
}
.entrance-group { display: flex; flex-direction: column; gap: 8px; min-width: 148px; }
.entrance-group-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.eg-key { font-size: 10px; font-weight: 500; letter-spacing: 0.28em; color: var(--amber); }
.eg-hint { font-size: 9px; letter-spacing: 0.1em; color: var(--ash); }
.entrance-door {
  padding: 10px 14px;
  background: var(--void-warm);
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  color: var(--ivory-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: left;
  cursor: pointer;
  transition: color 0.45s, border-color 0.45s, background 0.45s;
}
.entrance-door:hover, .entrance-door:focus-visible {
  color: var(--ivory);
  border-color: var(--ash);
  border-left-color: var(--amber);
  background: var(--plate);
  outline: none;
}
.entrance-bench {
  background: none;
  border: none;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.entrance-bench:hover { color: var(--ivory-dim); }
body.entrance-open #masthead .wordmark { cursor: default; }

/* an id/class rule with `display` overrides the UA `[hidden]{display:none}`;
   restore it so hidden actually hides (POLARITY off ORBITAL, empty footer) */
#polarity-stub[hidden] { display: none; }
.truth-footer[hidden] { display: none; }
/* lift the footer clear of the lens caption (which now also carries the
   OBSERVED · NOT SHAPED chip on observe-only lenses) */
.truth-footer { bottom: 52px; }

/* ============================================================
   RELEASE PATHWAYS · CATALOGUE DISCLOSURE · DESKTOP TYPE SCALE
   1440×900 · 1152×720 (125%) · 960×600 (150%) · 1100×660 floor
   ============================================================ */

.pathway-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.pathway-current {
  color: var(--amber);
  font-size: var(--type-label);
  letter-spacing: .18em;
}
#choose-pathway { background: transparent; }
.pathway-change { opacity: .56; }
.pathway-change:hover, .pathway-change:focus-visible { opacity: 1; }

.pathway-threshold {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 48px;
  background: var(--void);
  color: var(--ivory);
}
.pathway-threshold[hidden] { display: none; }
.pathway-threshold-head { max-width: 720px; text-align: center; }
.pathway-eyebrow {
  color: var(--amber);
  font-size: var(--type-label);
  letter-spacing: .34em;
  margin-bottom: 14px;
}
.pathway-threshold h1 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: .05em;
}
.pathway-threshold-head p {
  margin-top: 14px;
  color: var(--ivory-dim);
  font-size: var(--type-control);
  letter-spacing: .1em;
}
.pathway-choices {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pathway-choice {
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 28px;
  background: var(--void-warm);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule);
  color: var(--ivory);
  text-align: left;
  font-family: var(--mono);
  cursor: pointer;
}
.pathway-choice:hover, .pathway-choice:focus-visible {
  border-color: var(--amber);
  background: var(--plate);
  outline: none;
}
.pathway-choice-title {
  font-size: var(--type-title);
  letter-spacing: .22em;
}
.pathway-choice-description {
  color: var(--ivory-dim);
  font-size: var(--type-control);
  line-height: 1.7;
  letter-spacing: .04em;
}
.pathway-principle {
  color: var(--ash);
  font-size: var(--type-micro);
  letter-spacing: .2em;
  text-align: center;
}

.field-ready {
  position: fixed;
  inset: 48px 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
  text-align: center;
  background: var(--void);
}
.field-ready-path {
  color: var(--amber);
  font-size: var(--type-label);
  letter-spacing: .3em;
}
.field-ready-state {
  margin-top: 28px;
  color: var(--ivory-dim);
  font-size: var(--type-control);
  letter-spacing: .36em;
}
.field-ready-name {
  margin-top: 16px;
  color: var(--ivory);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: .28em;
  text-indent: .28em;
}
.field-ready p {
  max-width: 58ch;
  margin: 24px auto 34px;
  color: var(--ivory-dim);
  font-size: var(--type-control);
  line-height: 1.8;
}
.field-ready button {
  min-width: 220px;
  padding: 14px 24px;
  font: 500 var(--type-control) var(--mono);
  letter-spacing: .26em;
  color: var(--ivory);
  background: var(--plate);
  border: 1px solid var(--amber);
  cursor: pointer;
}
.field-ready button + button {
  margin-top: 10px;
  color: var(--ivory-dim);
  border-color: var(--rule);
  background: transparent;
}
.field-ready button:hover, .field-ready button:focus-visible {
  color: var(--amber);
  outline: none;
}

.web-demo-offer {
  position: fixed;
  z-index: 18;
  top: 56px;
  right: 16px;
  max-width: min(520px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-top-color: var(--amber);
  background: var(--void-warm);
  color: var(--ash);
  font-size: var(--type-micro);
  letter-spacing: .1em;
}
.web-demo-offer[hidden] { display: none; }
.web-demo-offer a { color: var(--amber); text-decoration: none; white-space: nowrap; }

.lib-kicker {
  margin-bottom: 14px;
  color: var(--amber);
  font-size: var(--type-label);
  letter-spacing: .32em;
}
.lib-browser {
  margin-bottom: 38px;
  padding: 18px;
  border: 1px solid var(--rule);
  background: var(--void-warm);
}
.lib-entry { margin: -22px 0 28px; }
.lib-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
  background: var(--void-warm);
}
.lib-section {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ivory-dim);
  font: 500 var(--type-control) var(--mono);
  letter-spacing: .16em;
  cursor: pointer;
}
.lib-section:last-child { border-right: 0; }
.lib-section:hover, .lib-section:focus-visible,
.lib-section.active { color: var(--amber); background: var(--plate); outline: none; }
.lib-section:disabled { color: var(--ash); opacity: .42; cursor: default; background: transparent; }
.lib-section-note {
  margin: 12px 2px 0;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .08em;
}
.continue-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--amber);
  background: var(--plate);
}
.continue-field[hidden] { display: none; }
.continue-field > div { display: grid; gap: 5px; }
.continue-kicker { color: var(--amber); font-size: var(--type-label); letter-spacing: .18em; }
#continue-field-name { color: var(--ivory); font-size: var(--type-title); letter-spacing: .2em; }
#continue-field-meta { color: var(--ash); font-size: var(--type-label); letter-spacing: .08em; }
.lib-filter-panel { margin-top: 12px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.lib-filter-panel > summary {
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .16em;
  cursor: pointer;
  list-style: none;
}
.lib-filter-panel > summary::before { content: '+ '; color: var(--amber); }
.lib-filter-panel[open] > summary::before { content: '- '; }
.lib-search-row {
  display: flex;
  align-items: end;
  gap: 16px;
}
.lib-search {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .18em;
}
.lib-search input {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--void);
  color: var(--ivory);
  font: var(--type-control) var(--mono);
  letter-spacing: .06em;
  outline: none;
}
.lib-search input:focus { border-color: var(--amber); }
.lib-view-controls { display: flex; gap: 5px; }
.lib-tool, .lib-clear {
  padding: 9px 11px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ivory-dim);
  font: var(--type-label) var(--mono);
  letter-spacing: .12em;
  cursor: pointer;
}
.lib-tool.active { color: var(--amber); border-color: var(--amber); }
.lib-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.lib-filter { display: flex; flex-direction: column; gap: 5px; }
.lib-filter > span {
  color: var(--ash);
  font-size: var(--type-micro);
  letter-spacing: .18em;
}
.lib-filter select {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--rule);
  background: var(--plate);
  color: var(--ivory-dim);
  font: var(--type-label) var(--mono);
}
.lib-results-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .14em;
}
.lib-clear { border: 0; padding: 3px; color: var(--ash); }
.lib-clear:hover { color: var(--ivory); }
.lib-simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.proto-spec-details {
  border-top: 1px solid var(--rule-soft);
  padding-top: 8px;
}
.proto-spec-details > summary {
  color: var(--ash);
  font-size: var(--type-label);
  letter-spacing: .16em;
  cursor: pointer;
  list-style: none;
}
.proto-spec-details > summary::before { content: '＋ '; color: var(--amber); }
.proto-spec-details[open] > summary::before { content: '− '; }
.proto-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.proto-tags span {
  padding: 3px 6px;
  border: 1px solid var(--rule-soft);
  color: var(--ash);
  font-size: var(--type-micro);
  letter-spacing: .08em;
}
.proto-choose {
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font: 500 var(--type-control) var(--mono);
  letter-spacing: .13em;
  cursor: pointer;
}
.proto-choose:hover, .proto-choose:focus-visible {
  color: var(--ivory);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  outline: none;
}
.lib-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 20px;
  border: 1px solid var(--rule);
  color: var(--ash);
  font-size: var(--type-control);
  letter-spacing: .14em;
  text-align: center;
}
body[data-view='list'] .lib-simple-grid,
body[data-view='list'] .lib-shelf-grid { grid-template-columns: 1fr; }
body[data-view='list'] .proto-card {
  display: grid;
  grid-template-columns: 120px minmax(180px, .8fr) minmax(260px, 1.6fr);
  gap: 8px 18px;
}
body[data-view='list'] .proto-head { grid-row: 1 / span 2; }
body[data-view='list'] .proto-title,
body[data-view='list'] .proto-note { align-self: start; }
body[data-view='list'] .proto-tags,
body[data-view='list'] .proto-spec-details,
body[data-view='list'] .proto-foot,
body[data-view='list'] .proto-src { grid-column: 2 / -1; }

/* Operational typography: no primary control below 10px. Secondary evidence,
   provenance and legal annotations keep the 9px micro tier. */
.wordmark { font-size: 15px; }
.ro-label, .lens-item .li-id, .id-label, .id-val, .voice-id,
.freq-unit, .slider-label, .xpose-label, .slider-val, .sb-k,
.spine-drawer-k, .spine-drawer-hint, .spine-step-k, .spine-kv-k,
.mode-btn, .bench-page, .ss-label, .proto-code, .proto-meta, .proto-note,
.ps-v, .bank-time { font-size: var(--type-label); }
.lens-item .li-name, .toggle, .stepper, .input-device, .wave-btn,
.ratio-btn, .preset-btn, .spine-armkey, .stance-opt, .spine-opt,
.plate-btn, .spine-drawer-say, .spine-drawer-state, .ch-btn {
  font-size: var(--type-control);
}
.ro-value, .sb-v, .ss-metric .ss-v, .spine-step-v, .spine-kv-v {
  font-size: var(--type-value);
}
.lib-title { font-size: var(--type-title); }

@media (max-width: 1200px) {
  .pathway-current { display: none; }
  .pathway-nav .mode-btn { padding-left: 6px; padding-right: 6px; }
  .pathway-choices { gap: 8px; }
  .pathway-choice { padding: 22px; }
}
@media (max-width: 900px) {
  .pathway-threshold { padding: 28px; }
  .pathway-choices { grid-template-columns: 1fr; max-width: 620px; }
  .pathway-choice { min-height: 112px; gap: 16px; }
  .lib-search-row { align-items: stretch; flex-direction: column; }
  .lib-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-section:nth-child(2) { border-right: 0; }
  .lib-section:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .lib-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-view='list'] .proto-card { display: flex; }
  .web-demo-offer { left: 16px; right: 16px; justify-content: center; }
  .recovery-offer { align-items: stretch; flex-direction: column; gap: 10px; }
}

/* ---------------- SOMA PLAYER ----------------
   The listening surface. Same ground, same ink, same mono, less of everything.
   The bench is not hidden here so much as never present: in player mode every
   direct child of <body> is removed from the box tree except the shell. */

body.player > * { display: none !important; }
body.player > #player-shell { display: flex !important; }

#player-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  flex-direction: column;
  align-items: center;
  background: var(--void);
  color: var(--ivory);
  font-family: var(--mono);
  font-weight: 300;
  overflow-y: auto;
  padding: 0 24px 48px;
}

.pl-head {
  width: min(620px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 30px 0 46px;
}
.pl-mark { font-size: var(--type-control); letter-spacing: .42em; text-indent: .42em; }
.pl-mode { font-size: var(--type-micro); letter-spacing: .28em; color: var(--amber); }

.pl-stage { width: min(620px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }

/* The visual stage: Studio's own aperture canvas, lifted onto --plate so it
   reads as an object rather than a hole, matching the entrance panels. */
.pl-visual {
  width: min(420px, 100%); aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  background: var(--plate);
  display: grid; place-items: center;
  overflow: hidden;
}
.pl-visual > canvas { width: 100%; height: 100%; display: block; }
.pl-art-fallback { font-size: 30px; color: var(--rule); }

.pl-lenses { display: flex; gap: 0; margin-top: 14px; border: 1px solid var(--rule-soft); }
.pl-lens {
  background: none; border: 0; border-right: 1px solid var(--rule-soft);
  color: var(--ash); padding: 9px 16px;
  font: var(--type-micro) var(--mono); letter-spacing: .2em;
  transition: color 240ms ease, background 240ms ease;
}
.pl-lens:last-child { border-right: 0; }
.pl-lens:hover { color: var(--ivory-dim); }
.pl-lens.on { color: var(--amber); background: var(--void-warm); }

.pl-art-chip {
  width: 54px; height: 54px; object-fit: cover;
  border: 1px solid var(--rule); margin-top: 30px;
}
.pl-art-chip[hidden] { display: none; }

/* The entrance sets an amber line above its title; the Player carries the
   practitioner's collection there, so the two front doors rhyme. */
.pl-eyebrow {
  font-size: var(--type-micro); letter-spacing: .34em; text-transform: uppercase;
  color: var(--amber); margin-top: 30px;
}
.pl-eyebrow[hidden] { display: none; }

.pl-title { font-size: 27px; font-weight: 300; letter-spacing: .05em; line-height: 1.4;
            text-wrap: balance; margin-top: 12px; max-width: 20ch; }
.pl-author { font-size: var(--type-label); letter-spacing: .18em; color: var(--ivory-dim); margin-top: 12px; }
.pl-collection { font-size: var(--type-micro); letter-spacing: .24em; color: var(--ash); margin-top: 8px; }
.pl-description {
  font-size: var(--type-control); line-height: 2; color: var(--ivory-dim);
  margin-top: 22px; max-width: 42ch;
}

.pl-transport { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.pl-play {
  background: var(--ivory); color: var(--void); border: 0;
  padding: 14px 34px; font: var(--type-control) var(--mono); letter-spacing: .24em;
  transition: opacity 240ms ease;
}
.pl-secondary {
  background: none; border: 1px solid var(--rule); color: var(--ivory-dim);
  padding: 13px 20px; font: var(--type-label) var(--mono); letter-spacing: .16em;
  transition: border-color 240ms ease, color 240ms ease;
}
.pl-secondary:hover:not(:disabled) { border-color: var(--ash); color: var(--ivory); }
.pl-play:disabled, .pl-secondary:disabled { opacity: .3; }
.pl-clock { font-size: var(--type-label); letter-spacing: .16em; color: var(--ash); min-width: 11ch; text-align: left; }

.pl-fader { display: flex; align-items: center; gap: 12px; margin-top: 20px; width: 260px; }
.pl-fader-label { font-size: var(--type-micro); letter-spacing: .22em; color: var(--ash); width: 6ch; text-align: right; }
.pl-fader input[type=range] { flex: 1; background: none; }
.pl-listening { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.pl-xy { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; align-items: flex-start; }
.pl-xy-title { text-align: left; width: auto; }
.pl-xy-canvas { display: block; touch-action: none; cursor: crosshair; }
.pl-xy-canvas:focus-visible { outline: 1px solid var(--dust-blue); outline-offset: 3px; }
.pl-level-canvas { cursor: ew-resize; }

/* I1 — the ENGAGE bloom: a dark veil over the field, lifted on engage (1.6s) and
   slowly returned on standby (2.2s). Silence is dark; the field arrives. */
.pl-bloom {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 46%,
    rgba(18,16,22,0.60) 0%, rgba(14,12,17,0.85) 62%, rgba(10,9,12,0.93) 100%);
  opacity: 1; transition: opacity 2.2s ease;
}
.pl-visual.lit .pl-bloom { opacity: 0; transition: opacity 1.6s cubic-bezier(.22,.61,.24,1); }

/* T2 — the field's whispered state word, easing its colour over ~1s. */
.pl-fieldstate {
  font-style: italic; font-size: 12px; letter-spacing: .16em;
  min-height: 1.2em; margin-top: 12px; color: var(--ash);
  opacity: .92; transition: color 1s ease, opacity 1s ease;
}
.pl-fieldstate:empty { opacity: 0; }
.pl-fieldstate[data-state="standby"] { color: var(--ash); }
.pl-fieldstate[data-state="arriving"] { color: var(--dust-blue); }
.pl-fieldstate[data-state="held"] { color: var(--ivory); }
.pl-fieldstate[data-state="settling"] { color: var(--ivory-dim); }
.pl-fieldstate[data-state="dissolving"] { color: var(--ash); }

@media (prefers-reduced-motion: reduce) {
  .pl-bloom, .pl-visual.lit .pl-bloom { transition: none; }
  .pl-fieldstate { transition: none; }
}
.pl-xy-readout { font-variant-numeric: tabular-nums; color: var(--ivory); letter-spacing: .04em; }

.pl-provenance { font-size: var(--type-micro); letter-spacing: .2em; color: var(--ash); margin-top: 34px; }
.pl-status { font-size: var(--type-control); line-height: 1.9; color: var(--ivory-dim); margin-top: 14px; max-width: 44ch; min-height: 2em; }
.pl-status[data-tone="warn"] { color: var(--amber); }
.pl-offline { font-size: var(--type-micro); letter-spacing: .16em; color: var(--ash); margin-top: 10px; }

.pl-library { width: min(620px, 100%); margin-top: 64px; border-top: 1px solid var(--rule-soft); padding-top: 22px; }
.pl-library-head { display: flex; justify-content: space-between; align-items: center; }
.pl-library-title { font-size: var(--type-micro); letter-spacing: .28em; color: var(--ash); }
.pl-library-list { margin-top: 16px; display: flex; flex-direction: column; }
.pl-group { font-size: var(--type-micro); letter-spacing: .24em; color: var(--ash); margin: 20px 0 8px; }
.pl-row-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule-soft); }
.pl-row {
  flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: none; border: 0; color: var(--ivory); text-align: left;
  padding: 14px 0; font: var(--type-control) var(--mono);
}
.pl-row:hover { color: var(--amber); }
.pl-row-author { font-size: var(--type-micro); letter-spacing: .16em; color: var(--ash); }
.pl-row-remove { display: grid; place-items: center; width: 34px; color: var(--rule); font-size: var(--type-label); }
.pl-row-remove:hover { color: var(--iron); }
.pl-empty { font-size: var(--type-control); line-height: 2; color: var(--ash); max-width: 46ch; padding: 8px 0 20px; }

.pl-foot { width: min(620px, 100%); margin-top: 46px; display: flex; justify-content: center; }
.pl-studio {
  background: none; border: 0; color: var(--ash);
  font: var(--type-label) var(--mono); letter-spacing: .16em;
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 4px;
}
.pl-studio:hover { color: var(--ivory-dim); border-bottom-color: var(--ash); }

.pl-studio-panel {
  position: fixed; inset: 0; z-index: 130; background: var(--void);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px; text-align: center;
}
.pl-studio-title { font-size: var(--type-title); font-weight: 300; letter-spacing: .16em; }
.pl-studio-copy { font-size: var(--type-control); line-height: 2; color: var(--ivory-dim); max-width: 46ch; margin-bottom: 10px; }
.pl-studio-key {
  width: min(360px, 100%); background: #0f0d12; color: var(--ivory);
  border: 1px solid #383241; padding: 13px; font: var(--type-value) var(--mono);
  text-transform: uppercase; text-align: center;
}

/* The aperture canvas is authored for the bench, where it fills an absolutely
   positioned frame. Moved into the Player it must become an ordinary block
   inside its own container, or it escapes and covers the surface. */
body.player #player-shell .pl-visual { position: relative; }
body.player #player-shell #aperture {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}

/* The scope strip, moved out of the bench spine into the Player stage. */
.pl-scope {
  width: 100%; height: 42px; margin-top: 10px;
  border: 1px solid var(--rule-soft); background: var(--void-warm);
  overflow: hidden;
}
body.player #player-shell #scope-strip {
  position: static !important; inset: auto !important;
  flex: none !important;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  display: block !important;
}
body.player #player-shell #scope {
  width: 100% !important; height: 100% !important;
  border: 0 !important; background: none !important; display: block;
}

/* ---------------- PLAYER: the frame ----------------
   The listening surface needed a chassis. Studio has one (masthead / rack /
   spine); the Player was a column floating in an unbounded void, which is what
   read as austere. The ground colour was never the problem — the absence of
   edges was. The frame also breathes: --amp is the engine's own smoothed RMS,
   so the enclosure warms fractionally with the field rather than sitting
   printed on the page. */

#player-shell { justify-content: flex-start; padding-top: 0; }

.pl-stage {
  border: 1px solid var(--rule-soft);
  background: var(--void-warm);
  padding: 40px 44px 46px;
  gap: 0;
  /* the breathing edge — restrained on purpose: at full amplitude this is
     still only a warm hairline, never a glow */
  border-color: color-mix(in srgb, var(--amber) calc(var(--amp, 0) * 34%), var(--rule-soft));
  transition: border-color 120ms linear;
}

.pl-col { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.pl-visual { width: 100%; }
.pl-lenses { align-self: center; }

/* Wide windows: stop leaving a void beside the column. Visual and its readouts
   on the left, the Edition's identity and transport on the right. Halves the
   page height, so a listening surface no longer scrolls. */
@media (min-width: 1040px) {
  .pl-stage {
    width: min(1020px, 100%);
    flex-direction: row;
    align-items: flex-start;
    gap: 46px;
    text-align: left;
  }
  .pl-col { display: flex; flex-direction: column; min-width: 0; }
  .pl-col--observe { flex: 0 0 400px; align-items: stretch; }
  .pl-col--identity { flex: 1 1 auto; align-items: flex-start; }
  .pl-lenses { align-self: flex-start; margin-top: 16px; }
  .pl-eyebrow { margin-top: 0; }
  .pl-title { max-width: 18ch; }
  .pl-listening { align-items: flex-start; }
  .pl-transport { margin-top: 34px; }
  .pl-head, .pl-library, .pl-foot { width: min(1020px, 100%); }
}

/* A centre-out control for BINAURAL. It is a left/right frequency offset, so a
   left-to-right "more" slider misstates it: the meaningful position is the
   middle, and the movement is symmetrical widening. The zero is drawn. */
.pl-fader--centred { position: relative; }
.pl-fader--centred::after {
  content: "";
  position: absolute;
  left: calc(6ch + 12px + 50%);
  top: 50%;
  width: 1px;
  height: 11px;
  background: var(--rule);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pl-stage { transition: none; border-color: var(--rule-soft); }
}

/* ---------------- PLAYER: DAYLIGHT ----------------
   Night is the instrument's ground and stays the default. But an unbroken dark
   field is heavy company for someone lying down for twenty minutes, so the
   listener can have a warm daylight ground instead.

   Warm, and deliberately NOT cream: the night ground (#141218) leans violet,
   so the day ground carries the same bias inverted — a pale warm stone with a
   faint violet undertone rather than the usual paper beige. Ink is the void
   itself, so the two grounds are the same family reversed. Amber darkens to
   #8a6428 because #c4a06a cannot carry text on a light ground. */

body.player.daylight {
  --void:      #e7e3dd;
  --void-warm: #efece7;
  --plate:     #f3f0ec;
  --rule:      #c5bfb6;
  --rule-soft: #d6d1c8;
  --ivory:     #201d26;
  --ivory-dim: #55504b;
  --ash:       #7b7469;
  --amber:     #8a6428;
  background: var(--void);
  color: var(--ivory);
}
body.player.daylight #player-shell { background: var(--void); color: var(--ivory); }
body.player.daylight .pl-play { background: var(--ivory); color: var(--void-warm); }
body.player.daylight .pl-lens.on { background: var(--plate); }
/* The lenses paint themselves in their own palette on a dark plate — that is
   the instrument's screen, and it stays a screen in daylight rather than being
   inverted into something the lens code never intended. */
body.player.daylight .pl-visual,
body.player.daylight .pl-scope { background: #16131b; border-color: var(--rule); }

.pl-head-right { display: flex; align-items: baseline; gap: 18px; }
.pl-daylight {
  background: none; border: 1px solid var(--rule-soft); color: var(--ash);
  padding: 5px 11px; font: var(--type-micro) var(--mono); letter-spacing: .2em;
  transition: color 240ms ease, border-color 240ms ease;
}
.pl-daylight:hover { color: var(--ivory-dim); border-color: var(--ash); }

/* The bench's own beat control, in the Player's column. */
.pl-beat { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; width: 100%; }
.pl-beat-label { text-align: left; width: auto; }
.pl-beat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 4px; }
.pl-beat-modes { display: flex; gap: 4px; }
.pl-beat-modes .ratio-btn { flex: 1; }
.pl-beat-note { font-size: var(--type-micro); color: var(--ash); line-height: 1.8; }

/* The webview's own scrollbar is OS chrome sitting inside an instrument — the
   one generic element left on the surface. Given SOMA's own palette. */
body.player #player-shell { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
body.player #player-shell::-webkit-scrollbar { width: 10px; }
body.player #player-shell::-webkit-scrollbar-track { background: transparent; }
body.player #player-shell::-webkit-scrollbar-thumb {
  background: var(--rule-soft); border: 3px solid var(--void); border-radius: 0;
}
body.player #player-shell::-webkit-scrollbar-thumb:hover { background: var(--rule); }
body.player #player-shell::-webkit-scrollbar-corner,
body.player #player-shell::-webkit-scrollbar-button { display: none; }
/* Seven bands sat 6 + 1, orphaning gamma. Four columns give 4 + 3. */
.pl-beat-grid { grid-template-columns: repeat(4, 1fr); }