/* Wolf Tone: the luthier's bench, carried forward from the Godot build. */

:root {
  --void: #0c0906;
  --bg: #110c08;
  --panel: #241a10;
  --panel-2: #191107;
  --panel-hi: #302216;
  --line: #4a3a22;
  --line-bright: #7d6238;
  --ink: #d6cdb8;
  --ink-dim: #93876f;
  --accent: #c9a557;
  --accent-hot: #ffc46b;
  --parchment: #e2d5b4;
  --parchment-dim: #c8b88f;
  --paper-ink: #32271a;
  --paper-ink-dim: #6b5c42;
  --good: #d7b45a;
  --bad: #e66a55;
  --note-A: #e16d5c;
  --note-B: #72b8d5;
  --note-C: #e8c95f;
  --note-D: #99bc78;
  --route-a: #73bfd0;
  --route-b: #a993d7;
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

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

html { color-scheme: dark; }

body {
  display: grid;
  height: 100dvh;
  min-height: 100vh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 48% 10%, rgb(111 70 31 / 18%), transparent 44rem),
    repeating-linear-gradient(1deg, transparent 0 8px, rgb(160 112 52 / 2%) 9px, transparent 10px),
    linear-gradient(105deg, #0a0705, #171008 48%, #090705);
  font: 13px/1.45 var(--mono);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 20% 80%, rgb(0 0 0 / 24%)),
    radial-gradient(circle at 50% 0, transparent, rgb(0 0 0 / 28%) 80%);
}

button {
  min-height: 40px;
  padding: 4px 10px;
  color: var(--ink);
  background: linear-gradient(#2b1f13, #1b120b);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 0 1px rgb(255 232 182 / 4%), 0 1px 1px rgb(0 0 0 / 24%);
  font: 12px/1.25 var(--mono);
  cursor: pointer;
}

button:hover { color: #eee4ce; border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
button.active { color: var(--accent-hot); border-color: var(--accent); background: #2c2114; }
button:disabled { opacity: 0.38; cursor: default; }
button:disabled:hover { color: var(--ink); border-color: var(--line); }
button.danger:not(:disabled):hover { color: #ff917a; border-color: var(--bad); }

/* A button that reads as prose: it opens a dialog rather than navigating, so
   it cannot be an anchor, but it sits inline inside running text. */
.text-link {
  min-height: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Neutralise the global button hover border rather than zeroing the border:
   .help-footnote keeps a rule above it, and it must not jump on hover. */
.text-link:hover { color: var(--accent-hot); border-color: var(--line); }

/* ── maker's plate / campaign nav ───────────────────── */

.masthead {
  position: relative;
  z-index: 20;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(260px, 560px) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 12px;
  background:
    linear-gradient(90deg, rgb(255 213 128 / 2%), transparent 28% 72%, rgb(255 213 128 / 2%)),
    #191107;
  border-bottom: 1px solid #5f492a;
  box-shadow: 0 5px 18px rgb(0 0 0 / 38%), inset 0 -1px #0a0603;
}

.masthead::after {
  position: absolute;
  right: 18px;
  bottom: 4px;
  left: 18px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #6f5626 8% 92%, transparent);
}

.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand strong {
  display: block;
  color: #d8bc76;
  font: 700 15px/1.1 var(--serif);
  letter-spacing: 4px;
  text-shadow: 0 1px #000;
}
.brand small { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.5px; }

.level-switcher { display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; }
.masthead-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.audio-control {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 5px;
  padding-right: 7px;
  background: #140d07;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.audio-control button { min-width: 58px; border: 0; box-shadow: none; }
.audio-control input[type="range"] { width: 72px; accent-color: var(--accent-hot); }

#help-dialog,
#prototype-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: #191107;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  box-shadow: 0 14px 38px rgb(0 0 0 / 66%);
}
#help-dialog::backdrop,
#prototype-dialog::backdrop { background: rgb(0 0 0 / 72%); }
.help-sheet, .notice-sheet { padding: 17px; }
.notice-sheet p {
  margin-top: 13px;
  color: var(--ink-dim);
  font: 14px/1.5 var(--serif);
}
.notice-begin { min-width: 118px; margin-top: 17px; }
.help-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-heading h2 { color: var(--accent); font: 700 20px/1.1 var(--serif); letter-spacing: 1px; }
.help-heading button { min-width: 40px; }
.shortcut-list { display: grid; gap: 0; margin-top: 13px; }
.shortcut-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) 1.2fr;
  gap: 14px;
  padding: 8px 2px;
  border-top: 1px solid var(--line);
}
.shortcut-list dt { color: #efe0b8; font-weight: 700; }
.shortcut-list dd { color: var(--ink-dim); font-family: var(--serif); font-size: 14px; }
/* The masthead link is hidden under 1080px, so Help keeps the notice reachable
   at every width. */
.help-footnote {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font: 12px/1.25 var(--mono);
  text-align: left;
}
.level-menu { position: relative; min-width: 0; flex: 1; }
.level-menu-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  color: #d9c89f;
  border-color: #5d4828;
  font-weight: 700;
}
#current-level-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  min-height: 0;
  padding: 0;
  background: rgb(0 0 0 / 72%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.level-menu-backdrop[hidden] { display: none; }
.level-nav {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  display: flex;
  width: min(840px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  background: #191107;
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 58%), inset 0 0 0 1px #0e0905;
}
.level-nav[hidden] { display: none; }
.nav-title { padding-bottom: 10px; color: var(--accent); font: 700 11px/1 var(--serif); letter-spacing: 2.5px; }
.nav-group { display: block; padding: 9px 0; border-top: 1px solid var(--line); }
.nav-chapter { color: #a5977e; font: 700 11px/1 var(--mono); letter-spacing: 0.8px; text-transform: uppercase; }
.nav-levels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ref-mode { color: #8d3e2e; letter-spacing: 1px; }
.playtest-mode { color: #7b6840; letter-spacing: 1px; }
.level-choice {
  min-height: 40px;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 12px;
  text-align: left;
}
.level-choice.current { color: var(--accent-hot); border-color: var(--accent); box-shadow: 0 0 0 1px rgb(201 165 87 / 13%); }
.level-choice.solved { color: #e9ce83; background: #352a17; border-color: #8c7135; }
.level-choice.locked { color: #665b48; border-color: #332719; background: #171008; box-shadow: none; cursor: not-allowed; }
.level-choice.locked:hover { color: #665b48; border-color: #332719; }
.level-arrow { width: 44px; min-width: 44px; min-height: 44px; padding: 1px 9px 3px; font: 24px/1 var(--serif); }

/* ── verdict banner ──────────────────────────────────── */

.banner[hidden] { display: none; }
/* Overlays the play area (same grid row) so showing it never reflows the board. */
.banner {
  grid-area: 2 / 1;
  z-index: 15;
  display: flex;
  align-self: start;
  align-items: center;
  gap: 12px;
  margin: 10px 18px 0;
  padding: 10px 14px;
  color: var(--paper-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgb(91 69 37 / 3%) 8px),
    var(--parchment);
  border: 1px solid #9a8a64;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 35%);
}
.banner.resonant { border-color: #d8b653; }
.banner.sour, .banner.silent { border-color: #a64a3c; }
.banner-icon { font: 22px/1 var(--serif); }
.banner-text { flex: 1; min-width: 0; }
.banner-text strong { font-family: var(--serif); }
.banner-text p { color: var(--paper-ink-dim); font: 13px/1.35 var(--serif); }
.banner-score[hidden] { display: none; }
.banner-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 18px;
  margin-top: 7px;
}
.banner-score-hint { flex-basis: 100%; color: var(--paper-ink-dim); font-size: 11px; letter-spacing: 1.2px; }
.banner-score-measure { display: inline-flex; align-items: baseline; gap: 6px; }
.banner-score-measure small { color: var(--paper-ink-dim); font-size: 11px; letter-spacing: 1px; }
.banner-score-measure output { color: var(--paper-ink); font: 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.banner-score-measure em { color: #5e4618; font: normal 700 11px/1 var(--mono); letter-spacing: 0.4px; }
.banner button { color: var(--paper-ink); background: rgb(73 52 27 / 8%); border-color: #9a8a64; }
.banner button:last-child { margin-left: auto; }
#banner-next { border-color: #90742e; }

/* ── primary layout ──────────────────────────────────── */

.app-shell {
  grid-area: 2 / 1;
  display: grid;
  grid-template-columns: clamp(286px, 21vw, 330px) minmax(0, 1fr) clamp(220px, 17vw, 300px);
  gap: 10px;
  min-height: 0;
  align-items: stretch;
  padding: 10px 12px;
  overflow: hidden;
}
.briefing-panel,
.tools-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 10px; }
.briefing-panel { overflow-y: auto; padding: 0 2px 4px 0; }
.tools-panel { overflow: hidden; }
.workspace { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 9px; }

/* The commission slip is the one bright material in the workshop. */
.commission {
  position: relative;
  color: var(--paper-ink);
  background:
    radial-gradient(circle at 18% 12%, rgb(255 249 217 / 22%), transparent 24%),
    repeating-linear-gradient(2deg, transparent 0 8px, rgb(96 69 31 / 3%) 9px),
    linear-gradient(97deg, #d6c69f, var(--parchment) 12% 88%, #cabb92);
  border: 1px solid #9a8a64;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 42%), inset 0 0 22px rgb(83 56 22 / 8%);
}
.commission::before {
  position: absolute;
  top: 6px;
  right: 7px;
  bottom: 6px;
  left: 7px;
  content: "";
  pointer-events: none;
  border: 1px solid rgb(74 53 26 / 18%);
}
.commission-title {
  position: relative;
  margin-bottom: 4px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgb(74 53 26 / 30%);
}
.commission-title h2 { margin: 4px 0 7px; font: 700 21px/1.12 var(--serif); }
.reference-architecture-control {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 4px 0 10px;
  color: var(--paper-ink-dim);
  font: 700 9px/1 var(--mono);
  letter-spacing: 1.4px;
}
.reference-architecture-control[hidden] { display: none; }
.reference-architecture-control select {
  width: 100%;
  min-height: 40px;
  padding: 7px 28px 7px 9px;
  color: var(--paper-ink);
  background: rgb(255 248 222 / 48%);
  border: 1px solid #a3926b;
  border-radius: 3px;
  font: 700 12px/1.2 var(--serif);
}
.reference-architecture-control select:focus-visible {
  outline: 2px solid #66522d;
  outline-offset: 2px;
}
/* ── walkthrough deck ────────────────────────────────── */

.walkthrough {
  padding: 11px 14px 13px;
  background:
    linear-gradient(115deg, rgb(174 122 58 / 4%), transparent 35%),
    var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #100a05, 0 3px 8px rgb(0 0 0 / 24%);
}
.walkthrough.architecture-explanation { order: -1; }
.deck-heading,
.commission-heading,
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font: 700 11px/1 var(--serif);
  letter-spacing: 2.5px;
}
.deck-heading { color: var(--accent); }
.deck-heading::before,
.commission-heading::before,
.panel-heading::before { content: "■"; margin-right: 7px; font-size: 7px; }
.deck-heading > span:first-child,
.commission-heading > span:first-child,
.panel-heading > span:first-child { margin-right: auto; }
.deck-heading button { min-height: 40px; padding: 1px 10px; font-size: 10px; }
#deck-step strong { display: block; margin-bottom: 5px; color: #e7dcc5; font: 700 15px/1.2 var(--serif); }
#deck-step p { color: var(--ink-dim); font: 13px/1.4 var(--serif); }
.architecture-optimization {
  margin-top: 10px;
  padding: 8px 9px;
  color: #cbbd9f !important;
  background: rgb(201 165 87 / 7%);
  border-left: 2px solid var(--accent);
}
.architecture-optimization b {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font: 700 9px/1 var(--mono);
  letter-spacing: 1.2px;
}
.architecture-score {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.architecture-score-hint {
  grid-column: 1 / -1;
  color: var(--ink-dim);
  font-size: 8px;
  letter-spacing: 1px;
}
.architecture-score-measure { display: grid; gap: 2px; }
.architecture-score-measure small { color: var(--ink-dim); font-size: 8px; }
.architecture-score-measure strong { margin: 0 !important; color: var(--ink) !important; font: 700 14px/1 var(--mono) !important; }
.deck-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--ink-dim); font-size: 11px; }
.deck-nav[hidden] { display: none; }
.deck-nav button { min-height: 40px; padding: 2px 10px; font-size: 11px; }
.session-mode-label { color: var(--brass); font-weight: 700; letter-spacing: .06em; }

/* ── commission performances / score ─────────────────── */

.commission { padding: 15px 17px 14px; }
.commission-heading { position: relative; color: #675735; }
.commission-heading button,
.commission button { color: var(--paper-ink); background: rgb(74 53 26 / 6%); border-color: #a3926b; box-shadow: none; }
.commission button:hover { border-color: #66522d; }
.case-tabs { position: relative; display: flex; flex-direction: column; gap: 0; }
.case-tab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 7px 11px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(74 53 26 / 22%);
  border-radius: 0;
}
.case-tab:last-child { border-bottom: 0; }
.case-tab.current {
  background: linear-gradient(90deg, rgb(128 104 23 / 13%), transparent 76%);
  box-shadow: inset 3px 0 #8b7128;
}
.case-tab:hover { background-color: rgb(93 67 29 / 6%); }
.case-tab .status { width: 14px; flex: 0 0 auto; padding-top: 0; font-size: 13px; text-align: center; }
.case-tab .status.pass { color: #806817; }
.case-tab .status.fail { color: #9f382b; }
.case-spec { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.case-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; }
.case-heading em { color: #7d6428; font: normal 700 7px/1 var(--sans); letter-spacing: 1.2px; }
.case-name { margin-bottom: 1px; font: 700 14px/1.1 var(--serif); }
.case-spec-section {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 7px;
}
.case-spec-section > small {
  padding-top: 4px;
  color: #735e35;
  font: 700 7px/1.2 var(--sans);
  letter-spacing: 0.8px;
}
.case-entries { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.case-entry {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(58px, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.case-entry.unlabeled { grid-template-columns: minmax(0, 1fr); }
.case-entry b {
  min-width: 0;
  overflow: hidden;
  color: var(--paper-ink);
  font: 600 9px/1.15 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-entry-word { display: flex; min-width: 0; justify-content: flex-end; }
.commission-sound-bar {
  display: block;
  width: auto;
  max-width: 100%;
  height: 40px;
  overflow: visible;
}
.score-readout { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(74 53 26 / 30%); }
.score-hint { grid-column: 1 / -1; margin-bottom: 4px; color: var(--paper-ink-dim); font-size: 11px; letter-spacing: 1.2px; }
.score-measure { display: flex; align-items: baseline; gap: 6px; }
.score-measure small { color: var(--paper-ink-dim); font-size: 11px; letter-spacing: 1px; }
.score-measure output { color: var(--paper-ink); font: 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.personal-best {
  margin-top: 6px;
  padding-top: 6px;
  border-top-style: dashed;
}
.personal-best[hidden] { display: none; }
.personal-best output { color: var(--accent); }

/* ── construction tray / workspace ───────────────────── */

.construction-bar,
.transport,
.inspector-panel {
  background:
    linear-gradient(110deg, rgb(184 133 66 / 3%), transparent 32%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #100a05, 0 2px 6px rgb(0 0 0 / 22%);
}
.construction-bar {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
}
.bar-label { color: var(--accent); font: 700 10px/1 var(--serif); letter-spacing: 2.2px; }
.palette { display: flex; flex-direction: column; gap: 7px; }
.palette button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 4px 8px 4px 4px;
  column-gap: 5px;
  text-align: left;
}
.palette button.armed { color: var(--accent-hot); border-color: var(--accent); box-shadow: inset 0 0 9px rgb(201 165 87 / 12%), 0 0 0 1px #100a05; }
.palette button.exhausted { opacity: 0.42; }
.palette button.exhausted:hover { opacity: 0.72; }
.palette-icon { display: block; width: 42px; height: 38px; overflow: visible; }
.palette button.multi-cell { grid-template-columns: 76px minmax(0, 1fr) auto; min-height: 52px; }
.palette button.multi-cell .palette-icon { width: 70px; height: 40px; }
.palette button.multi-cell.vertical { grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 76px; }
.palette button.multi-cell.vertical .palette-icon { width: 40px; height: 70px; }
.palette button.multi-cell.square { grid-template-columns: 84px minmax(0, 1fr) auto; min-height: 88px; }
.palette button.multi-cell.square .palette-icon { width: 78px; height: 78px; }
.palette-name { font-family: var(--serif); font-weight: 700; white-space: nowrap; }
.palette .count { color: var(--ink-dim); font-size: 11px; }
.construction-help {
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  font-size: 11px;
  text-align: left;
}

/* ── the walnut soundboard ───────────────────────────── */

.board-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgb(149 96 39 / 3%) 11px),
    #160e08;
  border: 1px solid #5d4526;
  border-radius: 3px;
  box-shadow: inset 0 0 25px #080503, 0 4px 14px rgb(0 0 0 / 30%);
}
.board-shell::before {
  position: absolute;
  inset: 3px;
  content: "";
  pointer-events: none;
  border: 1px solid #2b1a0d;
}
.board-toolbar {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "history solution zoom";
  gap: 4px 8px;
  padding: 5px 5px 6px;
  background: #0d0805;
  border-bottom: 1px solid #392817;
  box-shadow: 0 3px 8px rgb(0 0 0 / 28%);
}
.board-scroll { display: grid; min-width: 0; min-height: 0; flex: 1; overflow: auto; place-items: safe center; }
.board-scroll.can-pan #board { cursor: grab; touch-action: none; }
.board-scroll.panning #board { cursor: grabbing; user-select: none; }
.board-zoom { display: flex; grid-area: zoom; align-items: center; gap: 3px; padding: 3px 5px; background: #140d07; border: 1px solid var(--line); border-radius: 3px; }
.board-zoom button { min-width: 40px; min-height: 40px; padding: 1px 7px; font-size: 13px; }
.board-zoom span { min-width: 4ch; color: var(--ink-dim); font-size: 11px; text-align: center; }
.board-history { display: flex; grid-area: history; gap: 4px; align-items: center; }
.board-history button { min-width: 40px; padding: 3px 9px; background: #140d07; }
.solution-switcher {
  display: flex;
  grid-area: solution;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  background: #140d07;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.solution-switcher[hidden] { display: none; }
.solution-switcher label { display: flex; align-items: center; gap: 6px; }
.solution-switcher label > span { color: var(--ink-dim); font-size: 11px; }
.solution-switcher select {
  min-height: 40px;
  padding: 3px 24px 3px 7px;
  color: var(--ink);
  background: #20160d;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: 11px/1.2 var(--mono);
}
.solution-switcher button { min-height: 40px; padding: 3px 8px; }
.interaction-status {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3;
  padding: 7px 11px;
  transform: translateX(-50%);
  color: #fff0c8;
  background: rgb(20 13 7 / 94%);
  border: 1px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 52%);
  font-size: 11px;
  white-space: nowrap;
}
.interaction-status[hidden] { display: none; }
.context-editor {
  position: absolute;
  z-index: 5;
  display: flex;
  width: max-content;
  max-width: min(440px, calc(100% - 16px));
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 7px 9px 8px;
  color: var(--ink);
  background: rgb(19 12 7 / 98%);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  box-shadow: 0 5px 15px rgb(0 0 0 / 58%), inset 0 0 0 1px #090503;
}
.context-editor[hidden] { display: none; }
.context-editor::after {
  position: absolute;
  left: var(--anchor-x);
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.context-editor[data-placement="above"]::after { top: 100%; border-top-color: var(--line-bright); }
.context-editor[data-placement="below"]::after { bottom: 100%; border-bottom-color: var(--line-bright); }
.context-title { color: var(--accent); font: 700 10px/1 var(--serif); letter-spacing: 1px; text-transform: uppercase; }
.context-hint { color: var(--ink-dim); font: italic 11px/1.35 var(--serif); }
#board { display: block; flex: 0 0 auto; }

/* ── transport / inspector ───────────────────────────── */

.transport { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; flex-wrap: nowrap; }
.transport-primary,
.transport-secondary { display: flex; align-items: center; gap: 6px; }
.transport-primary,
.transport-secondary { flex-wrap: nowrap; }
.transport-secondary { min-width: 0; justify-content: flex-end; }
.transport button { min-height: 40px; padding: 3px 10px; }
.transport-divider { width: 1px; height: 20px; background: var(--line); }
.run-button { color: #ead392; border-color: var(--accent); }
.tick-readout { display: flex; align-items: baseline; gap: 6px; padding: 2px 7px; color: var(--accent); background: #100a05; border: 1px solid #34240f; border-radius: 3px; white-space: nowrap; }
.tick-readout small { font-size: 11px; letter-spacing: 1px; }
.tick-readout output { min-width: 2ch; color: var(--accent-hot); font-size: 14px; text-align: center; }
.inspector-panel {
  height: clamp(220px, 30vh, 280px);
  min-height: 220px;
  flex: 0 0 clamp(220px, 30vh, 280px);
  padding: 11px 12px;
  overflow-y: auto;
}
.panel-heading { color: var(--accent); }
.panel-heading > span:last-child { color: var(--ink-dim); font: 11px/1 var(--mono); letter-spacing: 1px; }
#inspector { font-size: 12px; }
#inspector .prose { color: var(--ink-dim); font-family: var(--serif); font-size: 13px; }
.part-editor { display: grid; min-width: 0; gap: 6px; }
.part-editor .row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.part-editor .row > span:first-child { min-width: 60px; color: var(--ink-dim); }
.part-editor .route-a,
.coupling-summary.route-a { color: var(--route-a); }
.part-editor .route-b,
.coupling-summary.route-b { color: var(--route-b); }
.part-editor .note-chip { width: 40px; min-width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; font-weight: 700; }
.part-editor .note-chip.chosen {
  color: #fff8e8;
  background: color-mix(in srgb, var(--note-color) 64%, #1b120b);
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%), 0 0 8px var(--note-color);
  text-shadow: 0 1px 2px #000;
}
.part-editor button.active {
  color: #fff8e8;
  background: #60491f;
  border-color: var(--accent-hot);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), 0 0 6px rgb(255 196 107 / 28%);
}
.coupling-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; padding-left: 8px; border-left: 2px solid currentcolor; }
.coupling-choice > span { color: var(--ink); font: 11px/1.35 var(--serif); }
.coupling-notes { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.coupling-summary { display: flex; flex-direction: column; gap: 2px; margin: 7px 0; padding-left: 8px; border-left: 3px solid currentcolor; font-size: 10px; }
.coupling-summary strong { font-family: var(--serif); font-size: 12px; }
.coupling-live { margin-top: 8px; padding: 7px; color: #f0e1b6; background: #120c06; border: 1px solid var(--line); font-size: 10px; }
.tool-inspection { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 12px; }
.tool-inspection > svg { width: 76px; height: 64px; background: #140d07; border: 1px solid var(--line); border-radius: 3px; }
.tool-inspection.multi-cell { grid-template-columns: 116px minmax(0, 1fr); }
.tool-inspection.multi-cell > svg { width: 112px; height: 64px; }
.tool-inspection.multi-cell.vertical { grid-template-columns: 78px minmax(0, 1fr); }
.tool-inspection.multi-cell.vertical > svg { width: 76px; height: 112px; }
.tool-inspection.multi-cell.square { grid-template-columns: 92px minmax(0, 1fr); }
.tool-inspection.multi-cell.square > svg { width: 88px; height: 88px; }
.tool-inspection strong { display: block; color: #e6dbc5; font: 700 17px/1.2 var(--serif); }
.tool-inspection code { display: block; margin: 3px 0 6px; color: var(--accent-hot); font: 11px/1.3 var(--mono); }
.tool-inspection .prose { margin: 0; }
.tool-ports { margin: 10px 0 0; color: var(--ink-dim); font: 10px/1.45 var(--mono); }
.tool-ports span { margin: 0 4px 0 9px; color: var(--accent); letter-spacing: 1px; }
.tool-ports span:first-child { margin-left: 0; }
.tool-hint { margin: 8px 0 0; color: #8f8167; font: italic 11px/1.3 var(--serif); }
.event-log { max-height: 220px; overflow-y: auto; color: var(--ink-dim); font: 11px/1.45 var(--mono); list-style: none; }
.event-log li { padding: 2px 0; border-bottom: 1px dotted #47351f; }
.event-log li:first-child { color: var(--ink); }
.trace-panel { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.trace-panel summary { color: var(--ink-dim); font: 9px/1.2 var(--mono); letter-spacing: 1.4px; cursor: pointer; list-style-position: outside; }
.trace-panel summary span { float: right; color: #756a56; letter-spacing: 0; }
.trace-panel[open] summary { margin-bottom: 7px; color: var(--accent); }

[data-region].spotlight { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: 3px; box-shadow: 0 0 18px rgb(255 196 107 / 22%); }
[data-region="board"].spotlight { outline: 0; box-shadow: inset 0 0 25px #080503, 0 4px 14px rgb(0 0 0 / 30%); }

/* ── board drawing / shared material kit ─────────────── */

.board-wood { fill: url(#board-walnut); }
.board-lamplight { fill: url(#board-lamp); }
.board-grain { fill: none; stroke: #81592e; stroke-width: 0.65; opacity: 0.16; }
.grid-line { stroke: #100a06; stroke-width: 1; opacity: 0.55; }
.grid-pin-shadow { fill: #0a0603; opacity: 0.7; }
.grid-pin { fill: #a8843e; stroke: #d4af61; stroke-width: 0.45; }

.part-box { fill: transparent; stroke: transparent; }
.movable-part { cursor: move; }
.fixed-part { cursor: default; }
.part-box.fixed { stroke: rgb(220 185 104 / 31%); stroke-width: 1.2; }
.part-box.selected { stroke: var(--accent-hot); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgb(255 196 107 / 50%)); }
.part-box.moving { stroke: var(--accent-hot); stroke-width: 2.2; stroke-dasharray: 4 2; }
.part-box.coupling-active:not(.selected) { stroke: #8777ae; stroke-width: 1.4; }
.placement-ghost { pointer-events: none; opacity: 0.58; }
.placement-ghost .part-box { stroke: var(--accent-hot); stroke-width: 1.6; stroke-dasharray: 5 3; }
.placement-ghost.valid { filter: drop-shadow(0 0 5px rgb(255 196 107 / 38%)); }
.placement-ghost.blocked { opacity: 0.42; filter: grayscale(0.35); }
.placement-ghost.blocked .part-box { stroke: var(--bad); }
.placement-ghost.splice .part-box { stroke: #8fe5c4; stroke-width: 2.2; }
.movement-ghost { pointer-events: none; opacity: 0.42; filter: grayscale(0.35); }
.movement-ghost .part-box { stroke: var(--bad); stroke-width: 1.8; stroke-dasharray: 5 3; }
.selection-marquee {
  fill: rgb(255 196 107 / 10%);
  stroke: var(--accent-hot);
  stroke-width: 1.5;
  stroke-dasharray: 6 3;
  pointer-events: none;
}

.face-shadow { fill: #090503; opacity: 0.5; }
.face-ivory { fill: #cbbb95; stroke: #44331e; stroke-width: 1.15; }
.face-maple { fill: #a87a43; stroke: #3f2a15; stroke-width: 1.15; }
.face-rosewood { fill: #47291c; stroke: #1b0f09; stroke-width: 1.15; }
.face-grain { fill: none; stroke: #8b6c48; stroke-width: 0.8; opacity: 0.42; }
.face-string { fill: none; stroke: #e0d5b8; stroke-width: 1.25; stroke-linecap: round; }
.face-brass { fill: #9d7934; stroke: #2f1f0e; stroke-width: 1.2; }
.face-brass-line { fill: none; stroke: #c6a250; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.face-brass-bar { fill: none; stroke: #d0ad59; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 1px #241809); }
.face-arrow { fill: #d4ae54; stroke: #3d2b12; stroke-width: 0.7; }
.face-chamber-rim { fill: #8f6e33; stroke: #241809; stroke-width: 1; }
.face-chamber { fill: #100904; stroke: #d0bd92; stroke-width: 1.1; }
.face-screw-rim { fill: #241809; }
.face-screw { fill: #b18c42; stroke: #d8b968; stroke-width: 0.55; }
.face-pearl { fill: #d8d8c7; opacity: 0.9; }
.face-jewel { fill: #8d78e0; stroke: #332844; stroke-width: 1.2; }
.face-plate rect { fill: #17100a; stroke: #a8843e; stroke-width: 0.8; }
.face-plate text {
  fill: #ffe09b;
  stroke: #090503;
  stroke-width: 0.55;
  paint-order: stroke;
  font: 700 20px/1 var(--mono);
  text-anchor: middle;
}
.part-art-image {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 42%));
}
.part-state-outline {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
  pointer-events: none;
}
.part-face.active .part-art-image,
.part-face.holding .part-art-image {
  filter: brightness(1.08) drop-shadow(0 0 3px rgb(255 196 107 / 48%)) drop-shadow(0 2px 2px rgb(0 0 0 / 42%));
}
.part-face.firing .part-art-image { animation: part-art-act var(--tick-ms) ease-out; }
.part-face.waiting .part-state-outline {
  stroke: var(--bad);
  filter: drop-shadow(0 0 3px rgb(230 106 85 / 72%));
  animation: waiting-pulse 720ms ease-in-out infinite alternate;
}
.face-plate.route-a rect { stroke: var(--route-a); }
.face-plate.route-b rect { stroke: var(--route-b); }
.face-plate.route-a text { fill: var(--route-a); }
.face-plate.route-b text { fill: var(--route-b); }
.part-branch-indicator,
.unison-state-seat {
  fill: #100904;
  stroke: #b9aa8c;
  stroke-width: 1;
  opacity: 0.24;
  pointer-events: none;
}
.part-face-fork.branch-left .part-branch-indicator.match,
.part-face-fork.branch-right .part-branch-indicator.other,
.part-face-unison.queued-lead .unison-state-seat.lead,
.part-face-unison.queued-tail .unison-state-seat.tail {
  fill: var(--accent-hot);
  stroke: #fff0c4;
  opacity: 1;
  filter: drop-shadow(0 0 4px #ffc46b);
}
.part-action-trace {
  fill: none;
  stroke: var(--accent-hot);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #ffc46b);
}
.part-face.firing .part-action-trace { opacity: 0.9; }
.part-face-junction .junction-collision-mark { opacity: 0; }
.part-face-junction.firing .junction-track-live {
  opacity: 1;
  animation: track-shimmer var(--tick-ms) ease-in-out;
}
.resonator-state-ring {
  fill: none;
  stroke: #ffd684;
  stroke-width: 1.4;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.part-face-resonator.resolved .resonator-state-ring {
  animation: resonance-ring 900ms ease-out;
}
.track-tool-ties { fill: none; stroke: #8b542d; stroke-width: 1.7; stroke-linecap: round; }
.track-tool-bed,
.track-tool-groove,
.track-tool-rail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.track-tool-bed { stroke: #b87333; stroke-width: 11; }
.track-tool-groove { stroke: #2b1a10; stroke-width: 6; }
.track-tool-rail { stroke: transparent; stroke-width: 1; }
.face-inlet-collar,
.face-outlet-collar { fill: none; stroke-width: 1.3; stroke-linecap: round; }
.face-inlet-collar { stroke: #b9aa8c; }
.face-outlet-collar { stroke: #d2ad58; }
.flow-arrow,
.coupling-output-arrow { fill: #d4ae54; stroke: #3d2b12; stroke-width: 0.65; stroke-linejoin: round; }
.mould-note-bead {
  fill: var(--note-color, #d0ad59);
  stroke: #2b1b0d;
  stroke-width: 1;
  filter: drop-shadow(0 1px #100904);
}
.mould-note-letter {
  fill: #21150a;
  font: 700 8.5px/1 var(--mono);
  text-anchor: middle;
  pointer-events: none;
}
.damper-captured-note { fill: #eadfbe; stroke: #3c2a17; stroke-width: 0.85; }
.crossing-underpass { fill: none; stroke: #e0d5b8; stroke-width: 1.35; stroke-linecap: round; }
.crossing-recess { fill: #120b06; stroke: #8f6e33; stroke-width: 1; }
.crossing-bridge-bed { fill: none; stroke: #100904; stroke-width: 7; stroke-linecap: round; }
.crossing-bridge {
  fill: none;
  stroke: #d0ad59;
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px #160e07);
}
.junction-track-ties {
  fill: none;
  stroke: #8b542d;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.92;
}
.junction-track-shadow,
.junction-track-bed,
.junction-track-groove,
.junction-track-live {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.junction-track-shadow { stroke: #0d0805; stroke-width: 14; opacity: 0.62; }
.junction-track-bed { stroke: #b87333; stroke-width: 11; }
.junction-track-groove { stroke: #2a190f; stroke-width: 6; }
.junction-track-live {
  stroke: #ffe19a;
  stroke-width: 1.1;
  opacity: 0;
  filter: drop-shadow(0 0 3px #ffe19a);
}
.junction-track-joint {
  fill: #2a190f;
  stroke: #d4914d;
  stroke-width: 2;
  filter: drop-shadow(0 1px 1px #0d0805);
}
.junction-direction rect {
  fill: #1b1109;
  stroke: #826331;
  stroke-width: 0.6;
  opacity: 0.94;
}
.junction-direction path {
  fill: none;
  stroke: var(--accent-hot);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
  filter: drop-shadow(0 0 2px rgb(255 196 107 / 40%));
}
.junction-collision-mark {
  fill: none;
  stroke: var(--bad);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgb(230 106 85 / 72%));
}
.coupling-link-a,
.coupling-link-b {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.coupling-link-a { stroke: var(--route-a); }
.coupling-link-b { stroke: var(--route-b); }
.coupling-pivot { fill: #171008; stroke: #d0ad59; stroke-width: 1.5; filter: drop-shadow(0 1px #100904); }
.coupling-output-arrow.route-a { fill: var(--route-a); }
.coupling-output-arrow.route-b { fill: var(--route-b); }
.part-etch {
  fill: #4b3720;
  stroke: rgb(234 219 180 / 28%);
  stroke-width: 0.35;
  paint-order: stroke;
  font: 700 8px/1 var(--serif);
  letter-spacing: 0.9px;
  text-anchor: middle;
  pointer-events: none;
}
.part-face.active .face-string,
.part-face.firing .face-string,
.part-face.holding .face-string,
.part-face.active .face-chamber,
.part-face.firing .face-chamber { stroke: var(--accent-hot); filter: drop-shadow(0 0 3px #ffc46b); }
.part-face.active .face-jewel,
.part-face.firing .face-jewel { filter: drop-shadow(0 0 4px #a894ff); }
.part-face.waiting .face-chamber-rim { stroke: var(--bad); animation: waiting-pulse 720ms ease-in-out infinite alternate; }
.fork-tines { stroke-width: 3.2; }
.valve-wheel { stroke-width: 1.5; }
.quill-plucker,
.damper-arm,
.mould-rake,
.mould-note-token,
.unison-carriage,
.splitter-blade,
.fork-tines,
.coupling-cross,
.coupling-gates,
.coupling-link-a,
.coupling-link-b,
.coupling-output-arrow,
.damper-captured-note,
.junction-collision-mark,
.valve-wheel,
.resonance-tongue { transform-box: fill-box; transform-origin: center; }
.part-face-quill.firing .quill-plucker { animation: quill-pluck var(--tick-ms) ease-out; }
.part-face-damper.firing .damper-arm,
.part-face-damper.firing .damper-captured-note { animation: damper-close var(--tick-ms) ease-out; }
.part-face-mould.firing .mould-rake,
.part-face-mould.firing .mould-note-token { animation: mould-stamp var(--tick-ms) ease-out; }
.unison-seat { fill: #100904; stroke: #b9aa8c; stroke-width: 1; }
.part-face-unison.queued-lead .unison-seat.lead,
.part-face-unison.queued-tail .unison-seat.tail { fill: var(--accent-hot); filter: drop-shadow(0 0 3px #ffc46b); }
.part-face-unison.firing .unison-seat { animation: seat-join var(--tick-ms) ease-out; }
.unison-carriage { stroke-width: 1.6; }
.part-face-unison.firing .unison-carriage { animation: unison-join var(--tick-ms) ease-out; }
.splitter-blade { stroke-width: 4.2; filter: drop-shadow(0 1px #241809); }
.part-face-splitter.firing .splitter-blade { animation: splitter-cut var(--tick-ms) ease-out; }
.part-face-splitter.firing .face-ivory { filter: drop-shadow(0 0 6px #ffc46b); }
.part-face-fork.branch-left .fork-tines { transform: rotate(-8deg); }
.part-face-fork.branch-right .fork-tines { transform: rotate(8deg); }
.part-face-fork.firing .fork-tines { animation: fork-read var(--tick-ms) ease-out; }
.part-face-coupling.queued-ina .coupling-seat-a { stroke: var(--route-b); filter: drop-shadow(0 0 3px var(--route-b)); }
.part-face-coupling.queued-inb .coupling-seat-b { stroke: var(--route-a); filter: drop-shadow(0 0 3px var(--route-a)); }
.coupling-seat-letter { fill: #e1d4b3; font: 700 8px/1 var(--mono); text-anchor: middle; pointer-events: none; }
.part-face-coupling.firing .coupling-cross,
.part-face-coupling.firing .coupling-link-a,
.part-face-coupling.firing .coupling-link-b { animation: coupling-read var(--tick-ms) ease-out; }
.part-face-coupling.firing .coupling-gates { animation: coupling-gate var(--tick-ms) ease-out; }
.part-face-coupling.firing .coupling-output-arrow { animation: coupling-output var(--tick-ms) ease-out; }
.part-face-junction.waiting .junction-collision-mark {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgb(230 106 85 / 72%));
  animation: collision-pulse 640ms ease-in-out infinite alternate;
}
#board.running .part-face-valve.holding .valve-wheel { animation: valve-hold 1.6s linear infinite; }
.part-face-valve.firing .valve-wheel { animation: valve-release var(--tick-ms) ease-out; }
.part-face-resonator.resolved .resonance-tongue { animation: resonance-ring 900ms ease-out; transform-origin: center; }

@keyframes quill-pluck {
  0% { transform: skewY(0deg); }
  34% { transform: skewY(-13deg); }
  58% { transform: skewY(8deg); }
  100% { transform: skewY(0deg); }
}
@keyframes damper-close {
  0% { transform: translateY(-5px); }
  42% { transform: translateY(3px) scaleY(0.72); }
  100% { transform: translateY(0); }
}
@keyframes mould-stamp {
  0% { transform: translateY(-4px); }
  45% { transform: translateY(3px); filter: drop-shadow(0 0 4px #ffc46b); }
  100% { transform: translateY(0); }
}
@keyframes seat-join {
  0% { fill: #100904; }
  45% { fill: var(--accent-hot); filter: drop-shadow(0 0 4px #ffc46b); }
  100% { fill: #100904; }
}
@keyframes unison-join {
  0% { transform: translateX(-6px); }
  48% { transform: translateX(8px); filter: drop-shadow(0 0 4px #ffc46b); }
  100% { transform: translateX(0); }
}
@keyframes splitter-cut {
  0% { transform: translateX(-4px) rotate(-18deg); }
  48% { transform: translateX(2px) rotate(8deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes fork-read {
  0% { filter: none; }
  45% { filter: drop-shadow(0 0 4px #ffc46b); }
  100% { filter: none; }
}
@keyframes coupling-read {
  0% { transform: scale(0.7) rotate(-12deg); }
  50% { transform: scale(1.35) rotate(10deg); filter: drop-shadow(0 0 4px #a894ff); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes coupling-gate {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.35); filter: drop-shadow(0 0 4px #a894ff); }
}
@keyframes coupling-output {
  0% { opacity: 0.45; transform: scale(0.8); }
  48% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 3px currentcolor); }
  100% { opacity: 0.9; transform: scale(1); }
}
@keyframes collision-pulse { to { opacity: 0.55; transform: scale(1.18); } }
@keyframes valve-hold { to { transform: rotate(360deg); } }
@keyframes valve-release {
  0% { transform: rotate(0); }
  70% { transform: rotate(135deg); filter: drop-shadow(0 0 4px #ffc46b); }
  100% { transform: rotate(180deg); }
}
@keyframes resonance-ring {
  0% { transform: scale(0.75); opacity: 0.5; }
  35% { transform: scale(1.55); opacity: 1; filter: drop-shadow(0 0 5px #ffd684); }
  100% { transform: scale(1); opacity: 0.9; }
}
@keyframes waiting-pulse { to { stroke: #ff967d; filter: drop-shadow(0 0 3px #e66a55); } }
@keyframes part-art-act {
  0%, 100% { transform: scale(1); }
  44% { transform: scale(1.035); filter: brightness(1.18) drop-shadow(0 0 5px #ffc46b); }
}

@media (prefers-reduced-motion: reduce) {
  .part-face * { animation: none !important; }
  .track-rail.live-route { animation: none !important; }
}

#board.discrete .part-face *,
#board.discrete .track-rail { animation: none !important; }

.port-bezel {
  fill: #3a2516;
  stroke: #c7b89a;
  stroke-width: 1.8;
  pointer-events: none;
}
.port-bezel.out { stroke: #d5ad55; }
.port-bezel.both { stroke: #e0c06d; }
.port { fill: #0d0906; stroke: #74644d; stroke-width: 0.9; cursor: crosshair; }
.port-hit { cursor: crosshair; touch-action: none; }
.port.out { stroke: #c9a557; }
.port.both { stroke: #d8b65e; }
.port:hover { stroke: var(--accent-hot); stroke-width: 2.4; }
.port-status-ring {
  fill: none;
  stroke: transparent;
  stroke-width: 1.6;
  opacity: 0;
  pointer-events: none;
}
#board.wire-mode .port-status-ring.wire-ready {
  stroke: var(--accent-hot);
  stroke-width: 1.8;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgb(255 196 107 / 65%));
}
#board.wire-mode .port-status-ring.wire-taken {
  stroke: var(--bad);
  stroke-width: 1.8;
  opacity: 0.8;
  filter: drop-shadow(0 0 2px rgb(230 106 85 / 52%));
}
#board.wire-mode .port-status-ring.wire-incompatible {
  stroke: #756851;
  stroke-dasharray: 1.5 2;
  opacity: 0.28;
}
#board.wire-mode .port-hit.wire-taken { cursor: not-allowed; }
#board.wire-mode .port-hit.wire-incompatible { cursor: default; }
.port.route-source,
.port.route-selected { stroke-width: 3; }
.port.route-source.route-a,
.port.route-selected.route-a { stroke: var(--route-a); }
.port.route-source.route-b,
.port.route-selected.route-b { stroke: var(--route-b); }
.port.route-family.route-a { stroke: var(--route-a); }
.port.route-family.route-b { stroke: var(--route-b); }
.port.route-selected.route-a { fill: color-mix(in srgb, var(--route-a) 32%, #140d07); }
.port.route-selected.route-b { fill: color-mix(in srgb, var(--route-b) 32%, #140d07); }
.port-tag-bg {
  fill: #120b06;
  stroke: #6f562f;
  stroke-width: 0.55;
  opacity: 0.96;
  pointer-events: none;
}
.port-tag-text {
  fill: #e2d5b4;
  stroke: #100904;
  stroke-width: 0.65;
  paint-order: stroke;
  font: 700 20px/1 var(--mono);
  letter-spacing: -0.1px;
  text-anchor: middle;
  pointer-events: none;
}
.preview-port {
  fill: #140d07;
  stroke: #b9aa8c;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.preview-port.in { stroke: #b9aa8c; }
.preview-port.out { stroke: #c9a557; }
.preview-port.both { stroke: #d8b65e; }
.preview-port-bezel { fill: #3a2516; stroke: #c7b89a; stroke-width: 1.6; pointer-events: none; }
.preview-port-bezel.out { stroke: #d5ad55; }
.preview-port-bezel.both { stroke: #e0c06d; }
.preview-port.route-a { stroke: var(--route-a); }
.preview-port.route-b { stroke: var(--route-b); }
.preview-port-tag { pointer-events: none; }
.preview-port-tag-bg {
  fill: #120b06;
  stroke: #6f562f;
  stroke-width: 0.55;
  opacity: 0.96;
}
.preview-port-tag-text {
  fill: #ede0bf;
  stroke: #100904;
  stroke-width: 0.65;
  paint-order: stroke;
  font: 700 10.5px/1 var(--mono);
  text-anchor: middle;
}

.wire-cell {
  fill: none;
  stroke: rgb(203 178 119 / 7%);
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.wire-cell.selected { fill: rgb(255 196 107 / 10%); stroke: var(--accent-hot); }
.wire-cell.splice-target { fill: rgb(143 229 196 / 12%); stroke: #8fe5c4; }
.track-tie {
  stroke: #8b542d;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.92;
  pointer-events: none;
}
.track-shadow,
.track-bed,
.track-groove,
.track-rail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.track-shadow { stroke: #0d0805; stroke-width: 14; opacity: 0.62; }
.track-bed { stroke: #b87333; stroke-width: 11; }
.track-groove { stroke: #2a190f; stroke-width: 6; }
.track-rail { stroke: transparent; stroke-width: 1; cursor: pointer; pointer-events: stroke; }
.track-rail.selected { stroke: var(--accent-hot); stroke-width: 1.2; opacity: 1; }
.track-rail.splice-target { stroke: #8fe5c4; stroke-width: 1.5; opacity: 1; filter: drop-shadow(0 0 3px #8fe5c4); }
.track-rail.live-route { stroke: #ffe19a; stroke-width: 1.1; opacity: 1; }
#board.running .track-rail.live-route { animation: track-shimmer var(--tick-ms, 600ms) ease-in-out; }
.track-rail.route-a.live-route { stroke: var(--route-a); filter: drop-shadow(0 0 3px var(--route-a)); }
.track-rail.route-b.live-route { stroke: var(--route-b); filter: drop-shadow(0 0 3px var(--route-b)); }
.track-direction { pointer-events: none; }
.track-direction-bed { fill: #1b1109; stroke: #826331; stroke-width: 0.6; opacity: 0.94; }
.track-direction-chevron {
  fill: none;
  stroke: var(--accent-hot);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
  filter: drop-shadow(0 0 2px rgb(255 196 107 / 40%));
}
.track-tie.selected,
.track-bed.selected { stroke: #d4914d; }
.track-tie.splice-target,
.track-bed.splice-target { stroke: #6faf91; }
.track-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.wire-handle-hit { fill: transparent; stroke: none; cursor: grab; }
.wire-handle { fill: #160e07; stroke: #fff0c4; stroke-width: 2.6; cursor: grab; filter: drop-shadow(0 0 5px rgb(255 196 107 / 80%)); }
.wire-handle.to { fill: #160e07; stroke: var(--accent-hot); stroke-width: 3; stroke-dasharray: 2.5 1.5; }
.pending-wire-anchor {
  fill: rgb(255 196 107 / 18%);
  stroke: var(--accent-hot);
  stroke-width: 3;
  stroke-dasharray: 3 2;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgb(255 196 107 / 75%));
}
.temp-track-bed,
.temp-track-rail { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.temp-track-bed { stroke: rgb(184 115 51 / 72%); stroke-width: 11; stroke-dasharray: 8 4; }
.temp-track-rail { stroke: var(--accent-hot); stroke-width: 1.2; stroke-dasharray: 5 4; filter: drop-shadow(0 0 2px #ffc46b); }
.temp-wire-cell { fill: rgb(255 196 107 / 10%); stroke: var(--accent-hot); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.blocked-wire-cell { fill: rgb(225 74 65 / 25%); stroke: var(--bad); stroke-width: 2; pointer-events: none; }
@keyframes track-shimmer {
  0%, 100% { stroke-width: 1; }
  45% { stroke-width: 1.7; }
}

.word-pill-box { fill: #f4f0e4; stroke: #9b8c6d; stroke-width: 0.7; }
.transit-word { pointer-events: none; }
.word-marble { overflow: visible; pointer-events: none; }
.word-marble-shadow { fill: #090604; opacity: 0.68; }
.word-marble-colour.note-A { fill: var(--note-A); }
.word-marble-colour.note-B { fill: var(--note-B); }
.word-marble-colour.note-C { fill: var(--note-C); }
.word-marble-colour.note-D { fill: var(--note-D); }
.word-marble-empty { fill: #3b3022; }
.word-marble-vein { fill: none; stroke-linecap: round; pointer-events: none; }
.word-marble-vein.light { stroke: rgb(255 249 229 / 21%); stroke-width: 0.8; }
.word-marble-vein.dark { stroke: rgb(36 17 10 / 24%); stroke-width: 1; }
.word-marble-glow { fill: #fff8df; opacity: 0.13; }
.word-marble-glint { fill: #fffdf2; opacity: 0.83; }
.word-marble-glass-edge {
  fill: none;
  stroke: rgb(255 248 222 / 20%);
  stroke-width: 0.45;
}
.word-marble-sound-bar-stem { fill: none; stroke: #b78b42; stroke-width: 0.7; }
.word-marble-sound-bar .word-pill-box { stroke: #ad8240; }
.processing-word .word-marble { filter: drop-shadow(0 0 3px rgb(255 196 107 / 78%)); }
.word-staff { stroke: #625949; stroke-width: 0.42; opacity: 0.68; pointer-events: none; }
.note-stem { stroke: #332d25; stroke-width: 0.75; pointer-events: none; }
.note-head { stroke: #21150a; stroke-width: 0.55; filter: drop-shadow(0 0 2px rgb(255 225 160 / 24%)); pointer-events: none; }
.note-letter { fill: #2f2921; font: italic 700 7px/1 var(--serif); text-anchor: middle; pointer-events: none; }
.word-rest { fill: #332d25; font: 9px/1 var(--serif); text-anchor: middle; pointer-events: none; }
.word-more { fill: #51483a; font: 700 6px/1 var(--mono); text-anchor: middle; }
.coupling-head.route-a .word-marble-sound-bar .word-pill-box { stroke: var(--route-a); stroke-width: 1.2; }
.coupling-head.route-b .word-marble-sound-bar .word-pill-box { stroke: var(--route-b); stroke-width: 1.2; }
.terminal-word-card {
  fill: #150d07;
  stroke: #806439;
  stroke-width: 0.65;
  opacity: 0.96;
  cursor: pointer;
  pointer-events: auto;
}
.terminal-word-card .word-pill-box { stroke: #9b8c6d; stroke-width: 0.65; }
.terminal-word-card .word-course { stroke-width: 1; }
.terminal-name {
  fill: #d9ccaa;
  stroke: #100904;
  stroke-width: 0.65;
  paint-order: stroke;
  font: 700 20px/1 var(--mono);
  letter-spacing: 0.4px;
  text-anchor: middle;
  pointer-events: none;
}
.terminal-silent-card { pointer-events: none; }
.terminal-silent-card rect {
  fill: #150d07;
  stroke: #806439;
  stroke-width: 0.65;
  opacity: 0.96;
}
.terminal-silent-card text {
  fill: #bdb092;
  font: 700 20px/1 var(--mono);
  letter-spacing: 1.1px;
  text-anchor: middle;
}
@media (max-width: 1360px) {
  .app-shell { grid-template-columns: 286px minmax(0, 1fr) 220px; }
  .palette button { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .palette-icon { width: 40px; }
  .palette button.multi-cell { grid-template-columns: 68px minmax(0, 1fr) auto; }
  .palette button.multi-cell .palette-icon { width: 64px; }
  .palette button.multi-cell.vertical { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .palette button.multi-cell.vertical .palette-icon { width: 38px; height: 64px; }
  .palette button.multi-cell.square { grid-template-columns: 68px minmax(0, 1fr) auto; }
  .palette button.multi-cell.square .palette-icon { width: 64px; height: 64px; }
  .commission-title h2 { font-size: 18px; }
}

@media (max-width: 1080px) {
  .brand small { display: none; }
  .app-shell { grid-template-columns: 276px minmax(0, 1fr) 190px; gap: 8px; padding: 8px; }
  .construction-bar { padding: 9px; }
  .palette button { grid-template-columns: 34px minmax(0, 1fr) auto; padding-right: 5px; }
  .palette-icon { width: 34px; height: 34px; }
  .palette button.multi-cell { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .palette button.multi-cell .palette-icon { width: 56px; height: 34px; }
  .palette button.multi-cell.vertical { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .palette button.multi-cell.vertical .palette-icon { width: 34px; height: 56px; }
  .palette button.multi-cell.square { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .palette button.multi-cell.square .palette-icon { width: 56px; height: 56px; }
  .palette-name { overflow: hidden; text-overflow: ellipsis; }
  .inspector-panel { padding: 10px; }
  .tool-inspection { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
  .tool-inspection > svg { width: 56px; height: 52px; }
  .tool-inspection.multi-cell { grid-template-columns: 84px minmax(0, 1fr); }
  .tool-inspection.multi-cell > svg { width: 80px; height: 52px; }
  .tool-inspection.multi-cell.vertical { grid-template-columns: 58px minmax(0, 1fr); }
  .tool-inspection.multi-cell.vertical > svg { width: 56px; height: 80px; }
  .tool-inspection.multi-cell.square { grid-template-columns: 66px minmax(0, 1fr); }
  .tool-inspection.multi-cell.square > svg { width: 62px; height: 62px; }
  .transport { gap: 4px; }
  .transport-primary,
  .transport-secondary { gap: 4px; }
  .transport { flex-wrap: wrap; }
  .transport button { min-height: 40px; padding: 2px 8px; font-size: 11px; }
  .transport .bar-label { font-size: 11px; letter-spacing: 1.3px; }
  .tick-readout { gap: 4px; padding-right: 5px; padding-left: 5px; }
  .tick-readout small { font-size: 11px; letter-spacing: 0.6px; }
  .board-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "history zoom" "solution solution";
  }
  .solution-switcher { justify-self: start; }
  .audio-control input[type="range"] { width: 56px; }
}

@media (max-width: 860px) {
  body { display: block; height: auto; overflow: auto; }
  .masthead { grid-template-columns: 1fr auto; padding: 10px 12px 12px; }
  .level-switcher { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; }
  .masthead-actions { grid-column: 2; grid-row: 1; }
  .audio-control input[type="range"] { width: 52px; }
  .level-nav { justify-content: flex-start; }
  .app-shell { grid-template-columns: 1fr; padding: 9px 8px 18px; }
  .briefing-panel,
  .workspace,
  .tools-panel { grid-column: 1; }
  .briefing-panel,
  .tools-panel { display: flex; flex-direction: column; overflow: visible; padding: 0; }
  .inspector-panel { height: auto; min-height: 124px; flex: 0 0 auto; overflow-y: visible; }
  .construction-bar { min-height: 0; }
  .board-scroll { height: clamp(330px, 58vh, 640px); }
  .palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .construction-help { margin-top: 2px; }
  .transport { align-items: flex-start; flex-wrap: wrap; padding: 7px 8px; }
  .tick-readout { order: -1; }
  .transport-secondary { flex-wrap: wrap; justify-content: flex-start; }
}