:root {
  --stone: #12100e;
  --stone-2: #1c1914;
  --phosphor: #c8f26a;
  --phosphor-dim: #7a9a3a;
  --bronze: #b08d57;
  --bronze-hot: #e2c48a;
  --claim: #e8d5a3;
  --premise: #8fa9c4;
  --judgment: #f0a35e;
  --rejected: #8a7396;
  --uncertain: #5c8a7b;
  --analogy: #d4a0b0;
  --new-path: #4f8fd6;
  --ink: #ece6d8;
  --mute: #8a8376;
}

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

html, body {
  height: 100%;
  background: #03050c;
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  overflow: hidden;
}

#c {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#c[data-dragging="true"] { cursor: grabbing; }

#plate {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 42rem;
  pointer-events: none;
  text-shadow: 0 1px 0 #000;
}

#plate .kind {
  font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phosphor);
}

#plate h1 {
  font-size: clamp(1.1rem, 2.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0.35rem 0 0.35rem;
  max-width: 36rem;
}

#plate .here {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.82;
  max-width: 36rem;
  margin-bottom: 0.45rem;
}

#plate .meta {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--mute);
}

#topbar {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

#update-notice {
  position: absolute;
  z-index: 34;
  top: 3.2rem;
  left: 50%;
  width: min(35rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(200, 242, 106, 0.58);
  background: rgba(8, 9, 12, 0.97);
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5);
}

#update-notice[hidden] { display: none; }

#update-notice strong,
#update-notice small { display: block; }

#update-notice strong {
  color: var(--phosphor);
  font: 0.68rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#update-notice small {
  margin-top: 0.2rem;
  color: var(--mute);
  font-size: 0.72rem;
}

#update-notice button {
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(18, 16, 14, 0.72);
  color: var(--bronze-hot);
  padding: 0.48rem 0.62rem;
  font: 0.64rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}

#update-notice button:hover,
#update-notice button:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

.topbar-instruments {
  display: flex;
  gap: 0.9rem;
  pointer-events: auto;
}

#legend-trigger,
#reflect-trigger,
#thread-trigger,
#atlas-map-trigger {
  pointer-events: auto;
  border: 0;
  background: transparent;
  color: var(--bronze-hot);
  font: 0.68rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 0 #000;
}

#legend-trigger:hover,
#legend-trigger:focus-visible,
#reflect-trigger:hover,
#reflect-trigger:focus-visible,
#thread-trigger:hover,
#thread-trigger:focus-visible,
#atlas-map-trigger:hover,
#atlas-map-trigger:focus-visible,
#atlas-map-trigger[aria-pressed="true"] {
  color: var(--phosphor);
  outline: none;
}

#atlas-map-hud {
  position: absolute;
  top: 4rem;
  left: 1.25rem;
  right: 1.25rem;
  z-index: 8;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
  text-shadow: 0 1px 0 #000;
}

#atlas-map-hud[hidden] { display: none; }
#atlas-map-hud .kind {
  color: var(--phosphor);
  font: 0.65rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#atlas-map-hud h1 {
  margin: 0.25rem 0;
  font: 400 clamp(1.5rem, 3vw, 2.2rem) "Iowan Old Style", Palatino, serif;
}
#atlas-map-hud p,
#atlas-map-hud small {
  display: block;
  color: var(--mute);
  font: 0.66rem/1.5 ui-monospace, Menlo, monospace;
}
#atlas-map-close {
  pointer-events: auto;
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(3, 5, 12, 0.76);
  color: var(--bronze-hot);
  padding: 0.48rem 0.62rem;
  font: 0.64rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}
#atlas-map-close:hover,
#atlas-map-close:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}
#atlas-map-keyboard {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
#atlas-map-keyboard:focus-within {
  left: 0;
  top: 6.8rem;
  width: min(26rem, calc(100vw - 2.5rem));
  height: auto;
  max-height: calc(100vh - 9rem);
  margin: 0;
  padding: 0.7rem;
  overflow: auto;
  clip: auto;
  white-space: normal;
  pointer-events: auto;
  background: rgba(3, 5, 12, 0.94);
  border: 1px solid rgba(200, 242, 106, 0.55);
}
#atlas-map-keyboard > span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--phosphor);
  font: 0.62rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#atlas-map-entry-buttons { display: grid; gap: 0.3rem; }
#atlas-map-entry-buttons button {
  border: 1px solid rgba(176, 141, 87, 0.35);
  background: rgba(18, 16, 14, 0.72);
  color: var(--ink);
  padding: 0.45rem;
  text-align: left;
  font: 0.62rem/1.35 ui-monospace, Menlo, monospace;
  cursor: pointer;
}
#atlas-map-entry-buttons button:focus-visible {
  border-color: var(--phosphor);
  outline: none;
}
body[data-atlas-map="true"] #plate,
body[data-atlas-map="true"] #threshold,
body[data-atlas-map="true"] #field-note-eligible,
body[data-atlas-map="true"] #knowledge-capsule-eligible,
body[data-atlas-map="true"] #knowledge-capsule-stored,
body[data-atlas-map="true"] #knowledge-capsule-ready {
  display: none;
}

#sound-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font: 0.62rem ui-monospace, Menlo, monospace;
}

#sound-toggle {
  min-width: 8.5rem;
  border: 1px solid rgba(92, 138, 123, 0.48);
  background: rgba(3, 5, 12, 0.72);
  color: var(--uncertain);
  padding: 0.34rem 0.46rem;
  font: inherit;
  cursor: pointer;
}

#sound-toggle[data-state="on"] {
  border-color: rgba(200, 242, 106, 0.52);
  color: var(--phosphor);
}

#sound-toggle:focus-visible,
#sound-volume:focus-visible {
  outline: 1px solid var(--phosphor);
  outline-offset: 2px;
}

#sound-volume {
  width: 5rem;
  accent-color: var(--phosphor-dim);
  cursor: pointer;
}

#sound-volume-value {
  min-width: 2.5rem;
  color: var(--mute);
  text-align: right;
}

#empty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

#empty.visible { display: grid; }

#composer {
  margin-top: 0.8rem;
  padding: 0.8rem 0 0 0.8rem;
  border-left: 1px solid rgba(176, 141, 87, 0.45);
}

#composer[hidden] { display: none; }

#threshold {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(32rem, calc(50vw - 1.875rem));
  pointer-events: auto;
  padding: 0.85rem 0.9rem;
  background: rgba(3, 5, 12, 0.86);
  border-left: 1px solid rgba(92, 138, 123, 0.72);
}

#threshold[hidden] { display: none; }

#field-note-eligible,
#knowledge-capsule-eligible,
#knowledge-capsule-stored,
#knowledge-capsule-ready {
  position: absolute;
  top: 5.3rem;
  left: 50%;
  z-index: 7;
  display: grid;
  gap: 0.28rem;
  min-width: 14.5rem;
  padding: 0.78rem 1.05rem;
  transform: translateX(-50%);
  border: 1px solid rgba(226, 196, 138, 0.72);
  border-radius: 0.2rem;
  background: linear-gradient(135deg, rgba(30, 24, 16, 0.92), rgba(3, 8, 16, 0.82));
  box-shadow: 0 0 1.5rem rgba(226, 196, 138, 0.16), inset 0 0 1rem rgba(79, 143, 214, 0.08);
  color: var(--bronze-hot);
  cursor: pointer;
  text-align: center;
  animation: field-note-float 4.8s ease-in-out infinite;
  backdrop-filter: blur(8px);
}

#field-note-eligible[hidden],
#knowledge-capsule-eligible[hidden],
#knowledge-capsule-stored[hidden],
#knowledge-capsule-ready[hidden] { display: none; }

#field-note-eligible span,
#knowledge-capsule-eligible span,
#knowledge-capsule-stored span,
#knowledge-capsule-ready span {
  font: 0.72rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#field-note-eligible small,
#knowledge-capsule-eligible small,
#knowledge-capsule-stored small,
#knowledge-capsule-ready small {
  color: rgba(236, 230, 216, 0.76);
  font: 0.65rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#field-note-eligible:hover,
#field-note-eligible:focus-visible,
#knowledge-capsule-eligible:hover,
#knowledge-capsule-eligible:focus-visible,
#knowledge-capsule-stored:hover,
#knowledge-capsule-stored:focus-visible,
#knowledge-capsule-ready:hover,
#knowledge-capsule-ready:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
  box-shadow: 0 0 2rem rgba(200, 242, 106, 0.18), inset 0 0 1rem rgba(79, 143, 214, 0.12);
}

#knowledge-capsule-eligible {
  top: 9.7rem;
  border-color: rgba(247, 157, 57, 0.62);
  background: rgba(48, 25, 8, 0.82);
  box-shadow: 0 0 1.8rem rgba(247, 138, 38, 0.2);
}

#knowledge-capsule-eligible span { color: #ffc06a; }

#knowledge-capsule-stored {
  top: 9.7rem;
  border-color: rgba(200, 242, 106, 0.62);
  background: rgba(20, 42, 28, 0.86);
  box-shadow: 0 0 1.8rem rgba(200, 242, 106, 0.16);
}

#knowledge-capsule-stored span { color: var(--phosphor); }

#knowledge-capsule-ready {
  top: 5.3rem;
  min-width: 22rem;
  border-color: rgba(255, 180, 92, 0.88);
  background: linear-gradient(135deg, rgba(74, 31, 5, 0.94), rgba(10, 8, 10, 0.9));
  box-shadow: 0 0 2.8rem rgba(255, 145, 36, 0.34), inset 0 0 1.8rem rgba(255, 202, 116, 0.1);
  color: #ffd49a;
  animation-duration: 3.2s;
}

#knowledge-capsule-ready span { color: #ffd49a; }

#start-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 42%, rgba(14, 31, 45, 0.76), rgba(2, 4, 9, 0.96));
  backdrop-filter: blur(12px);
}

#start-menu[hidden] { display: none; }

.start-panel {
  width: min(46rem, 94vw);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid rgba(92, 138, 123, 0.54);
  background: linear-gradient(145deg, rgba(17, 21, 25, 0.96), rgba(6, 8, 13, 0.96));
  box-shadow: 0 0 4rem rgba(79, 143, 214, 0.14), inset 0 0 2.5rem rgba(226, 196, 138, 0.04);
}

.start-panel h1 {
  margin: 0.38rem 0 0.6rem;
  color: var(--ink);
  font: 400 clamp(1.7rem, 4vw, 2.7rem) "Iowan Old Style", Palatino, serif;
}

#start-status {
  margin: 0 0 1.5rem;
  color: var(--mute);
  line-height: 1.5;
}

.start-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.start-actions button {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-height: 8.6rem;
  padding: 1rem;
  border: 1px solid rgba(176, 141, 87, 0.5);
  background: rgba(24, 20, 15, 0.64);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.start-actions button:hover,
.start-actions button:focus-visible {
  border-color: var(--phosphor);
  outline: none;
  box-shadow: 0 0 1.8rem rgba(200, 242, 106, 0.12);
}

.start-actions button:disabled {
  cursor: default;
  opacity: 0.36;
}

.start-actions strong {
  color: var(--bronze-hot);
  font: 600 0.78rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.start-actions small {
  color: var(--mute);
  font: 0.78rem/1.5 ui-monospace, Menlo, monospace;
}

#onboarding-menu {
  position: fixed;
  inset: 0;
  z-index: 32;
  overflow: auto;
  padding: clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 76% 18%, rgba(79, 143, 214, 0.2), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(176, 120, 55, 0.15), transparent 30%),
    rgba(2, 4, 9, 0.97);
  backdrop-filter: blur(14px);
}

#onboarding-menu[hidden] { display: none; }

.onboarding-panel {
  width: min(68rem, 100%);
  margin: 0 auto;
  padding: clamp(1.3rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(92, 138, 123, 0.54);
  background: linear-gradient(145deg, rgba(17, 21, 25, 0.97), rgba(6, 8, 13, 0.98));
  box-shadow: 0 0 5rem rgba(79, 143, 214, 0.15), inset 0 0 3rem rgba(226, 196, 138, 0.035);
}

.onboarding-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.onboarding-panel h1 {
  margin: 0.38rem 0 0.5rem;
  color: var(--ink);
  font: 400 clamp(1.8rem, 4vw, 3rem) "Iowan Old Style", Palatino, serif;
}

#onboarding-close {
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(18, 16, 14, 0.72);
  color: var(--bronze-hot);
  padding: 0.48rem 0.62rem;
  font: 0.64rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}

#onboarding-status {
  margin: 0 0 1.5rem;
  color: var(--mute);
  font: 0.72rem/1.5 ui-monospace, Menlo, monospace;
}

.onboarding-step {
  padding: 1.15rem 0;
  border-top: 1px solid rgba(138, 131, 118, 0.23);
}

.onboarding-step-label {
  margin-bottom: 0.75rem;
  color: var(--phosphor);
  font: 0.62rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.onboarding-step > p {
  max-width: 52rem;
  margin: -0.2rem 0 0.8rem;
  color: var(--mute);
  font: 0.7rem/1.55 ui-monospace, Menlo, monospace;
}

.onboarding-local {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(200, 242, 106, 0.42);
  background: rgba(42, 54, 38, 0.32);
  color: var(--mute);
  font: 0.66rem/1.5 ui-monospace, Menlo, monospace;
}

.onboarding-local strong {
  color: var(--phosphor);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onboarding-collaborator,
#onboarding-start {
  border: 1px solid rgba(176, 141, 87, 0.42);
  background: rgba(18, 16, 14, 0.68);
  color: var(--ink);
  padding: 0.82rem;
  text-align: left;
}

#onboarding-harnesses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.onboarding-collaborator {
  display: grid;
  align-content: space-between;
  min-height: 8.5rem;
}

.onboarding-collaborator strong,
.onboarding-collaborator small { display: block; }
.onboarding-collaborator strong { color: var(--bronze-hot); font: 0.72rem ui-monospace, Menlo, monospace; }
.onboarding-collaborator small { margin-top: 0.35rem; color: var(--mute); font: 0.59rem/1.45 ui-monospace, Menlo, monospace; }
.onboarding-collaborator.connected { border-color: rgba(79, 143, 214, 0.56); }
.onboarding-collaborator.active {
  border-color: var(--phosphor);
  background: rgba(42, 54, 38, 0.42);
}
.onboarding-provider-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.75rem;
}
.onboarding-provider-actions button {
  border: 1px solid rgba(176, 141, 87, 0.4);
  background: rgba(3, 5, 12, 0.64);
  color: var(--mute);
  padding: 0.38rem 0.46rem;
  font: 0.58rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}
.onboarding-provider-actions button.primary { color: var(--bronze-hot); }
.onboarding-provider-actions button:disabled { cursor: default; opacity: 0.45; }
.onboarding-provider-actions small {
  color: var(--phosphor);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#onboarding-start:disabled { cursor: default; opacity: 0.42; }

#onboarding-inquiry-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; }
#onboarding-inquiry-form label { grid-column: 1 / -1; color: var(--bronze-hot); font: 0.65rem ui-monospace, Menlo, monospace; }
#onboarding-inquiry {
  min-width: 0;
  border: 1px solid var(--bronze);
  background: rgba(18, 16, 14, 0.72);
  color: var(--ink);
  padding: 0.68rem 0.72rem;
  font: 1rem "Iowan Old Style", Palatino, serif;
  outline: none;
}
#onboarding-inquiry:focus { border-color: var(--phosphor); }
#onboarding-start { width: auto; min-width: 12rem; color: var(--bronze-hot); font: 0.68rem ui-monospace, Menlo, monospace; text-align: center; cursor: pointer; }

.onboarding-provider-actions button:hover:not(:disabled),
.onboarding-provider-actions button:focus-visible,
#onboarding-close:hover,
#onboarding-close:focus-visible,
#onboarding-start:hover:not(:disabled),
#onboarding-start:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

@keyframes field-note-float {
  0%, 100% { transform: translate(-50%, 0) rotate(-0.15deg); }
  50% { transform: translate(-50%, -0.55rem) rotate(0.15deg); }
}

#threshold .kind {
  font: 0.68rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--phosphor);
}

#threshold p {
  margin-top: 0.38rem;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.threshold-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.threshold-actions button {
  border: 1px solid rgba(176, 141, 87, 0.48);
  background: rgba(18, 16, 14, 0.66);
  color: var(--bronze-hot);
  padding: 0.48rem 0.62rem;
  font: 0.64rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}

.threshold-actions button:hover,
.threshold-actions button:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

.threshold-actions button:disabled {
  cursor: default;
  opacity: 0.68;
}

#threshold[data-ready="working"] {
  border-left-color: var(--phosphor);
  box-shadow: -0.25rem 0 1.2rem rgba(200, 242, 106, 0.12);
  animation: continuation-pulse 0.9s ease-in-out infinite alternate;
}

#threshold[data-ready="working"] #threshold-continue {
  color: var(--phosphor);
}

#threshold[data-ready="working"] .kind {
  animation: working-text 1.1s ease-in-out infinite alternate;
}

#threshold[data-ready="pending"] {
  border-left-color: var(--bronze-hot);
  animation: continuation-pulse 0.9s ease-in-out infinite alternate;
}

#threshold[data-ready="canceled"] {
  border-left-color: var(--bronze-hot);
}

#threshold[data-ask="true"] #threshold-ask {
  border-color: var(--phosphor);
  color: var(--phosphor);
  background: rgba(42, 54, 38, 0.52);
}

#threshold-ask-box {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(176, 141, 87, 0.32);
}

#threshold-ask-box[hidden] { display: none; }

#threshold-ask-input {
  width: 100%;
  background: rgba(18, 16, 14, 0.72);
  border: 1px solid var(--bronze);
  color: var(--ink);
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 1.05rem;
  padding: 0.45rem 0.6rem;
  outline: none;
}

#threshold-ask-input:focus { border-color: var(--phosphor); }

#threshold-ask-box .hint {
  margin-top: 0.35rem;
  color: var(--mute);
  font: 0.65rem ui-monospace, Menlo, monospace;
}

@keyframes continuation-pulse {
  from { box-shadow: -0.15rem 0 0.5rem rgba(176, 141, 87, 0.12); }
  to { box-shadow: -0.35rem 0 1.35rem rgba(200, 242, 106, 0.28); }
}

@keyframes working-text {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

#legend-scrim,
#workspace-scrim,
#thread-compass {
  position: absolute;
  inset: 0;
}

#legend-scrim {
  z-index: 5;
  background: rgba(3, 5, 12, 0.36);
  backdrop-filter: blur(2px);
}

#workspace-scrim {
  z-index: 5;
  background: rgba(3, 5, 12, 0.42);
  backdrop-filter: blur(2px);
}

#legend-menu,
#workspace-menu {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  width: min(31rem, 92vw);
  overflow: auto;
  padding: 1.3rem 1.2rem 2rem;
}

#legend-menu {
  right: 0;
  background:
    linear-gradient(135deg, rgba(42, 54, 38, 0.18), transparent 24rem),
    rgba(8, 9, 12, 0.96);
  border-left: 1px solid rgba(176, 141, 87, 0.48);
  box-shadow: -1.2rem 0 4rem rgba(0, 0, 0, 0.48);
}

#workspace-menu {
  left: 0;
  width: min(34rem, 94vw);
  background:
    linear-gradient(225deg, rgba(34, 52, 70, 0.2), transparent 26rem),
    rgba(8, 9, 12, 0.97);
  border-right: 1px solid rgba(176, 141, 87, 0.48);
  box-shadow: 1.2rem 0 4rem rgba(0, 0, 0, 0.5);
}

#legend-scrim[hidden],
#legend-menu[hidden],
#workspace-scrim[hidden],
#workspace-menu[hidden],
#thread-compass[hidden] { display: none; }

.menu-head,
.thread-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.menu-head h2,
.thread-head h2 {
  margin-top: 0.25rem;
  color: var(--bronze-hot);
  font-size: 1.35rem;
  font-weight: 500;
}

.menu-kicker,
.menu-section-label {
  color: var(--phosphor);
  font: 0.65rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#legend-close,
#workspace-close,
#thread-close,
#thread-latest {
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(18, 16, 14, 0.72);
  color: var(--bronze-hot);
  padding: 0.48rem 0.62rem;
  font: 0.64rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}

#legend-close:hover,
#legend-close:focus-visible,
#workspace-close:hover,
#workspace-close:focus-visible,
#thread-close:hover,
#thread-close:focus-visible,
#thread-latest:hover,
#thread-latest:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

#workspace-harnesses,
#workspace-history {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

#workspace-parallel-form {
  margin-top: 0.75rem;
  padding: 0.8rem;
  border-left: 1px solid rgba(93, 245, 138, 0.62);
}

#workspace-parallel-form fieldset {
  display: grid;
  gap: 0.38rem;
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
}

.workspace-parallel-choice {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
  font: 0.68rem/1.4 ui-monospace, Menlo, monospace;
}

.workspace-parallel-choice small { color: var(--mute); }

#workspace-parallel-form > label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--phosphor);
  font: 0.64rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#workspace-parallel-prompt {
  width: 100%;
  border: 1px solid var(--bronze);
  background: rgba(18, 16, 14, 0.72);
  color: var(--ink);
  padding: 0.55rem 0.62rem;
  font: 1rem "Iowan Old Style", Palatino, serif;
  outline: none;
}

#workspace-parallel-prompt:focus { border-color: var(--phosphor); }

#workspace-parallel-form button {
  width: 100%;
  margin-top: 0.55rem;
  border: 1px solid rgba(176, 141, 87, 0.42);
  background: rgba(18, 16, 14, 0.68);
  color: var(--bronze-hot);
  padding: 0.65rem 0.72rem;
  text-align: left;
  font: 0.68rem/1.4 ui-monospace, Menlo, monospace;
  cursor: pointer;
}

#workspace-parallel-progress {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.65rem;
  color: var(--mute);
  font: 0.65rem/1.4 ui-monospace, Menlo, monospace;
}

.workspace-parallel-job[data-status="responding"] { color: var(--phosphor); }
.workspace-parallel-job[data-status="completed"] { color: var(--new-path); }
.workspace-parallel-job[data-status="failed"] { color: var(--uncertain); }

.workspace-harness-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.workspace-harness,
.workspace-model-refresh,
.workspace-history-entry,
.workspace-action,
#workspace-new-form button {
  width: 100%;
  border: 1px solid rgba(176, 141, 87, 0.42);
  background: rgba(18, 16, 14, 0.68);
  color: var(--bronze-hot);
  padding: 0.65rem 0.72rem;
  text-align: left;
  font: 0.68rem/1.4 ui-monospace, Menlo, monospace;
  cursor: pointer;
}

.workspace-harness:hover,
.workspace-harness:focus-visible,
.workspace-model-refresh:hover,
.workspace-model-refresh:focus-visible,
.workspace-history-entry:hover,
.workspace-history-entry:focus-visible,
.workspace-action:hover,
.workspace-action:focus-visible,
#workspace-new-form button:hover,
#workspace-new-form button:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

.workspace-harness.active,
.workspace-history-entry.current {
  border-color: rgba(200, 242, 106, 0.58);
  background: rgba(42, 54, 38, 0.42);
  color: var(--phosphor);
}

.workspace-harness:disabled,
.workspace-model-refresh:disabled,
.workspace-history-entry:disabled {
  cursor: default;
  opacity: 0.72;
}

.workspace-harness strong,
.workspace-harness small {
  display: block;
}

.workspace-harness strong {
  font: inherit;
}

.workspace-harness small {
  margin-top: 0.2rem;
  color: var(--mute);
  font-size: 0.58rem;
}

.workspace-model-refresh {
  width: auto;
  min-width: 5.8rem;
  padding-inline: 0.58rem;
  text-align: center;
  white-space: nowrap;
}

.workspace-history-entry strong,
.workspace-history-entry small {
  display: block;
}

.workspace-history-entry strong {
  font: 500 0.94rem/1.35 "Iowan Old Style", Palatino, serif;
}

.workspace-history-entry small {
  margin-top: 0.3rem;
  color: var(--mute);
  font-size: 0.62rem;
}

#workspace-new-toggle { margin-top: 0.75rem; }

#workspace-new-form {
  margin-top: 0.7rem;
  padding: 0.8rem;
  border-left: 1px solid rgba(92, 138, 123, 0.72);
}

#workspace-new-form[hidden] { display: none; }

#workspace-new-form label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--phosphor);
  font: 0.64rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#workspace-new-prompt {
  width: 100%;
  border: 1px solid var(--bronze);
  background: rgba(18, 16, 14, 0.72);
  color: var(--ink);
  padding: 0.55rem 0.62rem;
  font: 1rem "Iowan Old Style", Palatino, serif;
  outline: none;
}

#workspace-new-prompt:focus { border-color: var(--phosphor); }

#workspace-new-form button { margin-top: 0.55rem; }

#workspace-action-status {
  min-height: 1.1rem;
  margin-top: 0.55rem;
  color: var(--uncertain);
  font: 0.65rem/1.4 ui-monospace, Menlo, monospace;
}

#workspace-application-status {
  min-height: 1.1rem;
  margin-top: 0.55rem;
  color: var(--uncertain);
  font: 0.65rem/1.4 ui-monospace, Menlo, monospace;
}

.workspace-danger { margin-top: 0.7rem; }

.workspace-danger:hover,
.workspace-danger:focus-visible {
  border-color: var(--rejected);
  color: var(--rejected);
}

.menu-section {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(176, 141, 87, 0.24);
}

.menu-empty {
  margin-top: 0.55rem;
  color: var(--mute);
  font-size: 0.85rem;
  line-height: 1.45;
}

#context-menu-section:has(#composer:not([hidden])) .menu-empty {
  display: none;
}

.control-list { margin-top: 0.7rem; }

.control-list > div {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid rgba(138, 131, 118, 0.12);
}

.control-list dt {
  color: var(--bronze-hot);
  font: 0.68rem ui-monospace, Menlo, monospace;
  text-transform: uppercase;
}

.control-list dd {
  color: var(--ink);
  font-size: 0.84rem;
}

.legend-list {
  list-style: none;
  margin-top: 0.8rem;
}

.legend-list li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.44rem 0;
  color: var(--ink);
  font-size: 0.84rem;
}

.legend-list strong { color: var(--bronze-hot); font-weight: 500; }

.legend-mark {
  display: block;
  width: 1rem;
  height: 1rem;
  justify-self: center;
}

.legend-mark.blue-ring,
.legend-mark.red-ring,
.legend-mark.bronze-ring,
.legend-mark.violet-ring {
  border: 2px solid;
  border-radius: 50%;
  background: rgba(3, 5, 12, 0.75);
  box-shadow: 0 0 0.65rem currentColor;
}

.blue-ring { color: #4f8fd6; }
.red-ring { color: #c94f4f; }
.bronze-ring { color: #b08d57; }
.violet-ring { color: #8a7396; }

.legend-mark.green-beam,
.legend-mark.blue-beam {
  width: 1.2rem;
  height: 0.16rem;
  border-radius: 1rem;
  box-shadow: 0 0 0.6rem currentColor;
  background: currentColor;
}

.green-beam { color: #5df58a; }
.blue-beam { color: #4f8fd6; }

.legend-mark.ghost-relic {
  border: 1px solid #8a7396;
  background: rgba(138, 115, 150, 0.22);
  transform: rotate(45deg);
}

.legend-mark.field-note-mark {
  border-color: var(--bronze-hot);
  background: radial-gradient(circle, #ffd27a 0 22%, #70522f 24% 48%, transparent 51%);
  box-shadow: 0 0 0.8rem rgba(255, 210, 122, 0.42);
}

.legend-mark.capsule-mark {
  border: 1px solid #f79d39;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0b2 0 18%, #f79d39 20% 42%, #4d2608 45% 68%, transparent 71%);
  box-shadow: 0 0 0.9rem rgba(247, 157, 57, 0.58);
}

#thread-compass {
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(3, 5, 12, 0.58);
  backdrop-filter: blur(10px);
}

.thread-panel {
  width: min(58rem, 94vw);
  max-height: min(48rem, 88vh);
  overflow: auto;
  padding: clamp(1rem, 2.5vw, 1.7rem);
  background:
    radial-gradient(circle at 50% 0, rgba(92, 138, 123, 0.14), transparent 28rem),
    rgba(8, 9, 12, 0.94);
  border: 1px solid rgba(176, 141, 87, 0.5);
  box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, 0.62);
}

#thread-subtitle {
  max-width: 34rem;
  margin-top: 0.38rem;
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.4;
}

#thread-latest {
  width: 100%;
  margin-top: 1.2rem;
  border-color: rgba(79, 143, 214, 0.72);
  color: #8bbcf0;
  text-align: left;
}

#thread-status {
  margin-top: 1rem;
  color: var(--mute);
  font: 0.68rem ui-monospace, Menlo, monospace;
}

#thread-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.thread-entry {
  position: relative;
  display: grid;
  width: calc(100% - min(calc(var(--thread-depth, 0) * 1rem), 8rem));
  margin-left: min(calc(var(--thread-depth, 0) * 1rem), 8rem);
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(138, 131, 118, 0.28);
  border-left: 3px solid rgba(176, 141, 87, 0.58);
  background: rgba(18, 16, 14, 0.58);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.thread-entry::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 0.75rem;
  border-top: 1px solid rgba(176, 141, 87, 0.42);
}

.thread-entry[data-kind="continuation"] { border-left-color: #4f8fd6; }
.thread-entry[data-kind="veto"] { border-left-color: #c94f4f; }
.thread-entry[data-kind="cut"] { border-left-color: #8a7396; }

.thread-entry:hover,
.thread-entry:focus-visible {
  border-color: var(--phosphor);
  outline: none;
}

.thread-entry.current {
  background: rgba(42, 54, 38, 0.62);
  box-shadow: inset 0 0 0 1px rgba(200, 242, 106, 0.28);
}

.thread-entry.head::after {
  content: "current head";
  position: absolute;
  top: 0.42rem;
  right: 0.5rem;
  color: var(--phosphor);
  font: 0.56rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thread-entry-label {
  padding-right: 5.7rem;
  color: var(--bronze-hot);
  font: 0.67rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thread-entry-summary {
  margin-top: 0.32rem;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-entry-meta {
  margin-top: 0.28rem;
  color: var(--mute);
  font: 0.61rem ui-monospace, Menlo, monospace;
}

.thread-parallel-group {
  position: relative;
  width: calc(100% - min(calc(var(--thread-depth, 0) * 1rem), 8rem));
  margin-left: min(calc(var(--thread-depth, 0) * 1rem), 8rem);
  border: 1px solid rgba(79, 143, 214, 0.42);
  background: rgba(10, 18, 29, 0.46);
}

.thread-parallel-group.current {
  box-shadow: inset 0 0 0 1px rgba(200, 242, 106, 0.2);
}

.thread-parallel-group.head::after {
  content: "contains current head";
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  right: 0.6rem;
  color: var(--phosphor);
  font: 0.54rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.thread-parallel-compare {
  display: grid;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(79, 143, 214, 0.3);
  background: linear-gradient(90deg, rgba(79, 143, 214, 0.16), transparent 70%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.thread-parallel-compare:hover,
.thread-parallel-compare:focus-visible {
  background: linear-gradient(90deg, rgba(79, 143, 214, 0.26), transparent 80%);
  box-shadow: inset 0 0 0 1px var(--phosphor);
  outline: none;
}

.thread-parallel-question {
  padding-right: 7.5rem;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-parallel-meta,
.thread-parallel-action {
  margin-top: 0.32rem;
  color: #8bbcf0;
  font: 0.62rem ui-monospace, Menlo, monospace;
}

.thread-parallel-action { color: var(--phosphor); }

.thread-parallel-members {
  display: grid;
  gap: 0.42rem;
  padding: 0.6rem;
}

.thread-entry.parallel-member {
  width: 100%;
  margin-left: 0;
  background: rgba(18, 16, 14, 0.42);
}

.thread-entry.parallel-member::before { display: none; }

.thread-parallel-group > .field-note-list {
  margin: 0.8rem 0 0.15rem 1rem;
  border-left-color: rgba(226, 196, 138, 0.46);
}

.knowledge-capsule-list {
  display: grid;
  gap: 0.42rem;
  margin: 0.5rem 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(247, 157, 57, 0.58);
}

.knowledge-capsule-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid rgba(247, 157, 57, 0.42);
  background: rgba(48, 25, 8, 0.48);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.knowledge-capsule-card:hover,
.knowledge-capsule-card:focus-visible {
  border-color: #ffc06a;
  outline: none;
}

.knowledge-capsule-label {
  color: #ffc06a;
  font: 0.62rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-capsule-meta {
  color: var(--mute);
  font: 0.61rem ui-monospace, Menlo, monospace;
}

.parallel-context,
.parallel-path {
  border: 1px solid rgba(138, 131, 118, 0.3);
  background: rgba(18, 16, 14, 0.52);
}

.parallel-context {
  padding: 0.85rem 0.95rem;
  border-left: 3px solid rgba(176, 141, 87, 0.7);
}

.parallel-context-label,
.parallel-path-label {
  color: var(--mute);
  font: 0.6rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parallel-context p {
  margin: 0.25rem 0 0.8rem;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.parallel-context p:last-child { margin-bottom: 0; }

.parallel-path {
  padding: 0.95rem;
  border-left: 3px solid rgba(79, 143, 214, 0.7);
}

.parallel-path.current {
  background: rgba(42, 54, 38, 0.5);
  box-shadow: inset 0 0 0 1px rgba(200, 242, 106, 0.22);
}

.parallel-path h3 {
  margin: 0 0 0.72rem;
  color: #8bbcf0;
  font: 0.74rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parallel-path-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.48rem 0;
  border-top: 1px solid rgba(138, 131, 118, 0.18);
}

.parallel-path-value {
  color: var(--ink);
  font-size: 0.87rem;
  line-height: 1.42;
}

.parallel-path-value ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.1rem;
}

.parallel-path-meta {
  margin-top: 0.62rem;
  color: var(--mute);
  font: 0.59rem ui-monospace, Menlo, monospace;
}

.parallel-path-enter {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.52rem 0.65rem;
  border: 1px solid rgba(79, 143, 214, 0.65);
  background: rgba(15, 30, 48, 0.56);
  color: #9cc8f4;
  font: 0.65rem ui-monospace, Menlo, monospace;
  text-align: left;
  cursor: pointer;
}

.parallel-path-enter:hover,
.parallel-path-enter:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
  outline: none;
}

.field-note-list {
  display: grid;
  gap: 0.48rem;
  padding: 0.78rem;
  border: 1px solid rgba(200, 242, 106, 0.28);
  background: rgba(25, 31, 20, 0.42);
}

.field-note-list h3,
.field-note-path legend,
.field-note-kinds legend,
.field-note-review-label,
.field-note-text-label {
  color: var(--phosphor);
  font: 0.64rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-note-card,
.field-note-write,
.field-note-enter,
.field-note-actions button {
  border: 1px solid rgba(200, 242, 106, 0.45);
  background: rgba(30, 39, 24, 0.55);
  color: var(--ink);
  cursor: pointer;
}

.field-note-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.72rem 0.78rem;
  text-align: left;
}

.field-note-card:hover,
.field-note-card:focus-visible,
.field-note-write:hover,
.field-note-write:focus-visible,
.field-note-enter:hover,
.field-note-enter:focus-visible,
.field-note-actions button:hover,
.field-note-actions button:focus-visible {
  border-color: var(--phosphor);
  outline: none;
}

.field-note-card:disabled {
  border-color: rgba(200, 242, 106, 0.22);
  cursor: default;
  opacity: 0.72;
}

.field-note-label {
  color: var(--phosphor);
  font: 0.62rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-note-card-text {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.field-note-meta,
.field-note-integrity,
.field-note-selection-status {
  color: var(--mute);
  font: 0.61rem ui-monospace, Menlo, monospace;
}

.field-note-write {
  width: 100%;
  padding: 0.68rem 0.8rem;
  color: var(--phosphor);
  font: 0.68rem ui-monospace, Menlo, monospace;
  text-align: left;
}

.field-note-reading,
.field-note-reference {
  padding: 0.95rem;
  border: 1px solid rgba(200, 242, 106, 0.28);
  border-left: 3px solid rgba(200, 242, 106, 0.68);
  background: rgba(25, 31, 20, 0.46);
}

.field-note-reading p,
.field-note-reference p {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.field-note-reference .field-note-meta { margin-top: 0.4rem; }
.field-note-integrity { margin-top: 0.55rem; color: var(--phosphor-dim); }

.field-note-enter {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.52rem 0.65rem;
  color: var(--phosphor);
  font: 0.65rem ui-monospace, Menlo, monospace;
  text-align: left;
}

.field-note-enter:disabled,
.field-note-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.field-note-form { display: grid; gap: 0.72rem; }

.field-note-path,
.field-note-kinds {
  display: grid;
  gap: 0.42rem;
  padding: 0.78rem;
  border: 1px solid rgba(79, 143, 214, 0.34);
  background: rgba(10, 18, 29, 0.38);
}

.field-note-path legend,
.field-note-kinds legend { padding: 0 0.35rem; color: #8bbcf0; }

.field-note-thought {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.62rem;
  align-items: start;
  padding: 0.56rem;
  border: 1px solid rgba(138, 131, 118, 0.22);
  color: var(--ink);
  cursor: pointer;
}

.field-note-thought:has(input:checked) {
  border-color: var(--phosphor);
  background: rgba(42, 54, 38, 0.52);
}

.field-note-thought input { margin-top: 0.2rem; accent-color: var(--phosphor); }
.field-note-thought > span { display: grid; gap: 0.24rem; line-height: 1.4; }

.field-note-thought-kind {
  color: var(--mute);
  font: 0.58rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-note-kinds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-color: rgba(200, 242, 106, 0.28);
}

.field-note-kinds label {
  display: flex;
  gap: 0.42rem;
  align-items: center;
  color: var(--ink);
  font-size: 0.85rem;
}

.field-note-kinds input { accent-color: var(--phosphor); }

.field-note-text-label { display: grid; gap: 0.42rem; }

.field-note-text-label textarea {
  width: 100%;
  resize: vertical;
  padding: 0.72rem;
  border: 1px solid rgba(200, 242, 106, 0.38);
  background: rgba(7, 10, 8, 0.82);
  color: var(--ink);
  font: 0.93rem/1.48 "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

.field-note-text-label textarea:focus { border-color: var(--phosphor); outline: none; }

.field-note-review {
  display: grid;
  gap: 0.34rem;
  padding-left: 1.3rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.4;
}

.field-note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.field-note-actions button {
  padding: 0.62rem 0.7rem;
  color: var(--phosphor);
  font: 0.64rem ui-monospace, Menlo, monospace;
}

#relic-index,
#evidence-descent {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 0, rgba(42, 54, 38, 0.22), transparent 32rem),
    rgba(3, 5, 12, 0.96);
  backdrop-filter: blur(12px);
}

#relic-index[hidden],
#evidence-descent[hidden] { display: none; }

.relic-index-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto 1.25rem;
}

.evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  max-width: 56rem;
  margin: 0 auto 2rem;
}

.relic-index-head .kind,
.evidence-head .kind {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor);
}

.relic-index-head p,
.evidence-head p {
  margin-top: 0.4rem;
  color: var(--mute);
}

#relic-close,
#evidence-close {
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(18, 16, 14, 0.6);
  color: var(--bronze-hot);
  padding: 0.5rem 0.7rem;
  font: 0.68rem ui-monospace, Menlo, monospace;
  cursor: pointer;
}

#evidence-strata {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding-left: 1.6rem;
}

#story-path,
#evidence-record {
  max-width: 56rem;
  margin: 0 auto;
}

#story-path {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(176, 141, 87, 0.3);
}

#evidence-record {
  margin-top: 2rem;
  margin-bottom: 1.25rem;
}

.descent-section-label,
.story-heading,
.story-kind {
  font-family: ui-monospace, Menlo, monospace;
}

.descent-section-label {
  color: var(--phosphor);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#story-intro,
#evidence-intro {
  margin-top: 0.4rem;
  color: var(--mute);
  line-height: 1.45;
}

#story-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.story-group {
  min-width: 0;
  padding: 0.9rem;
  border-top: 1px solid rgba(176, 141, 87, 0.42);
  background: rgba(18, 16, 14, 0.42);
}

.story-heading {
  color: var(--bronze-hot);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-description {
  margin-top: 0.3rem;
  color: var(--mute);
  font-size: 0.78rem;
  line-height: 1.35;
}

.story-items {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.story-item {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(122, 154, 58, 0.55);
}

.story-kind {
  color: var(--phosphor-dim);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-item p {
  margin-top: 0.22rem;
  font-size: 0.92rem;
  line-height: 1.38;
}

#evidence-strata::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.28rem;
  width: 1px;
  background: linear-gradient(var(--phosphor-dim), rgba(176, 141, 87, 0.22));
}

.evidence-stratum {
  position: relative;
  margin-bottom: 1.6rem;
  padding: 0.95rem 1rem;
  border-left: 1px solid rgba(176, 141, 87, 0.42);
  background: rgba(18, 16, 14, 0.56);
}

.evidence-stratum::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: -1.58rem;
  width: 0.56rem;
  height: 0.56rem;
  border: 1px solid var(--phosphor-dim);
  border-radius: 50%;
  background: #090b0d;
}

.evidence-position,
.evidence-heading,
.evidence-origin,
.evidence-follows,
.evidence-artifacts {
  font-family: ui-monospace, Menlo, monospace;
}

.evidence-position {
  color: var(--phosphor);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.evidence-heading {
  margin-top: 0.3rem;
  color: var(--bronze-hot);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.evidence-summary {
  margin-top: 0.65rem;
  font-size: 1rem;
  line-height: 1.45;
}

.evidence-origin,
.evidence-follows,
.evidence-artifacts {
  margin-top: 0.55rem;
  color: var(--mute);
  font-size: 0.65rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.evidence-artifacts {
  list-style: none;
}

#relic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.8rem;
  max-width: 80rem;
  margin: 0 auto;
}

.relic-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(176, 141, 87, 0.22);
  background: rgba(18, 16, 14, 0.55);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

.relic-card:hover,
.relic-card:focus-visible,
.relic-card.mapped {
  border-color: var(--phosphor);
  background: rgba(31, 34, 24, 0.72);
  outline: none;
  transform: translateY(-2px);
}

.relic-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #08090c;
}

.relic-card-copy {
  display: block;
  padding: 0.65rem;
}

.relic-card strong {
  display: block;
  color: var(--bronze-hot);
  font-size: 0.9rem;
  font-weight: 500;
}

.relic-card small {
  display: block;
  margin-top: 0.25rem;
  color: var(--mute);
  font: 0.65rem/1.35 ui-monospace, Menlo, monospace;
}

.relic-card.mapped::after {
  content: "mapped here";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  padding: 0.25rem 0.35rem;
  background: rgba(3, 5, 12, 0.82);
  color: var(--phosphor);
  font: 0.58rem ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#composer .kind {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--phosphor);
  margin-bottom: 0.35rem;
  line-height: 1.4;
  max-width: 42rem;
}

#composer input {
  width: 100%;
  background: rgba(18, 16, 14, 0.72);
  border: 1px solid var(--bronze);
  color: var(--ink);
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 1.05rem;
  padding: 0.45rem 0.6rem;
  outline: none;
}

#composer input:focus { border-color: var(--phosphor); }

#composer .hint {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  color: var(--mute);
  margin-top: 0.35rem;
}

@media (max-width: 68.75rem) {
  #threshold {
    left: 1.25rem;
    right: 1.25rem;
    bottom: calc(2.25rem + var(--plate-height, 9rem));
    width: auto;
  }

  .thread-entry {
    width: calc(100% - min(calc(var(--thread-depth, 0) * 0.65rem), 4rem));
    margin-left: min(calc(var(--thread-depth, 0) * 0.65rem), 4rem);
  }

  .thread-parallel-group {
    width: calc(100% - min(calc(var(--thread-depth, 0) * 0.65rem), 4rem));
    margin-left: min(calc(var(--thread-depth, 0) * 0.65rem), 4rem);
  }
}

@media (max-width: 62.5rem) {
  #topbar { right: 0.75rem; }
  #onboarding-harnesses { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 38rem) {
  #topbar { align-items: start; }
  .topbar-instruments { display: grid; gap: 0.3rem; text-align: right; }
  #update-notice {
    top: 5.6rem;
    grid-template-columns: 1fr auto;
  }
  #update-notice > div { grid-column: 1 / -1; }
  #atlas-map-hud {
    top: 5.6rem;
    left: 0.75rem;
    right: 0.75rem;
    display: block;
  }
  #atlas-map-close { margin-top: 0.7rem; }
  #field-note-eligible {
    top: 4.7rem;
    width: min(18rem, calc(100vw - 2rem));
  }
  #knowledge-capsule-eligible,
  #knowledge-capsule-stored {
    top: 9.1rem;
    width: min(18rem, calc(100vw - 2rem));
  }
  #knowledge-capsule-ready {
    top: 4.7rem;
    width: min(22rem, calc(100vw - 2rem));
    min-width: 0;
  }
  .start-actions { grid-template-columns: 1fr; }
  .start-actions button { min-height: 0; }
  .onboarding-head { display: block; }
  #onboarding-close { margin-top: 0.6rem; }
  #onboarding-inquiry-form { grid-template-columns: 1fr; }
  #onboarding-harnesses { grid-template-columns: 1fr 1fr; }
  #onboarding-start { width: 100%; }
  #plate,
  #topbar,
  #threshold {
    left: 0.75rem;
    right: 0.75rem;
  }

  #threshold { bottom: calc(1.75rem + var(--plate-height, 9rem)); }

  #legend-menu { width: 100vw; }
  #workspace-menu { width: 100vw; }
  #thread-compass { padding: 0.55rem; }
  .thread-panel { max-height: 94vh; }
  .thread-head { display: block; }
  #thread-close { margin-top: 0.8rem; }
  .thread-parallel-question { padding-right: 0; }
  .thread-parallel-group.head::after {
    position: static;
    display: block;
    padding: 0.45rem 0.9rem 0;
  }
  .parallel-path-row {
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }
  .field-note-kinds,
  .field-note-actions { grid-template-columns: 1fr; }
  .control-list > div { grid-template-columns: 5.5rem minmax(0, 1fr); }

  .relic-index-head { display: block; }
  .evidence-head { display: block; }
  #relic-close,
  #evidence-close { margin-top: 0.8rem; }
  #relic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #story-groups { grid-template-columns: 1fr; }
}

/* Orientation stays readable while the chamber remains the primary surface. */
#wayfinder {
  position: absolute;
  top: 3.5rem;
  left: 1.25rem;
  right: 1.25rem;
  max-width: 65rem;
  z-index: 9;
  padding: 0.65rem 0.8rem;
  border-left: 2px solid var(--phosphor-dim);
  background: linear-gradient(90deg, rgba(3, 5, 12, 0.92), rgba(3, 5, 12, 0.25));
  font: 0.74rem/1.45 ui-sans-serif, system-ui, sans-serif;
}
#wayfinder[hidden], #path-preview[hidden] { display: none; }
#path-preview button, .map-levels button, #map-visit {
  border: 1px solid rgba(176, 141, 87, 0.5);
  border-radius: 3px;
  background: rgba(8, 12, 20, 0.88);
  color: var(--ink);
  padding: 0.45rem 0.65rem;
  font: 0.72rem/1.35 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
#path-preview button:disabled, #map-visit:disabled { opacity: 0.5; cursor: default; }
#path-preview button:focus-visible,
.map-levels button:focus-visible, #map-visit:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
#walk-status:empty { display: none; }
#walk-status { color: #f0bd97; margin-top: 0.4rem; }
.standing-label, .preview-label { color: var(--bronze-hot); font: 0.68rem ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
#plate { max-width: min(42rem, 51vw); padding: 0.9rem; background: linear-gradient(90deg, rgba(3,5,12,0.92), rgba(3,5,12,0.45)); pointer-events: auto; border-left: 2px solid var(--phosphor-dim); max-height: 39vh; overflow: auto; }
#plate h1 { font-size: clamp(1.1rem, 1.8vw, 1.55rem); }
#plate .here { font-size: 0.8rem; }
#path-preview {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  width: min(29rem, 41vw); z-index: 7;
  padding: 0.95rem;
  border: 1px solid rgba(176,141,87,0.5);
  background: rgba(3,5,12,0.92);
}
#path-preview p { font: 1rem/1.4 ui-sans-serif, system-ui, sans-serif; max-height: 7rem; overflow: auto; }
.preview-actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
#path-enter { flex: 1; }
#path-preview small { display: block; margin-top: 0.5rem; color: #a4aea6; font: 0.68rem/1.3 ui-sans-serif, system-ui, sans-serif; }
#threshold { bottom: calc(var(--preview-height, 12rem) + 1.9rem); max-height: 26vh; overflow: auto; width: min(29rem, 41vw); }
#atlas-map-hud { z-index: 11; }
#atlas-map-hud > div { max-width: min(35rem, 56vw); }
#atlas-map-hud p, #atlas-map-hud small { color: #b2beb6; }
.map-levels { display: flex; gap: 0.45rem; margin: 0.65rem 0; pointer-events: auto; }
.map-levels [aria-pressed="true"] { color: var(--phosphor); border-color: var(--phosphor); }
#map-selection { max-width: 34rem; padding: 0.5rem 0; }
#map-visit { pointer-events: auto; }
#atlas-map-keyboard, #atlas-map-keyboard:focus-within {
  position: absolute; top: 3.3rem; right: 0; left: auto;
  width: min(23rem, 32vw); height: auto;
  max-height: calc(100vh - 10rem); padding: 0.7rem;
  margin: 0; clip: auto; white-space: normal; overflow: auto; pointer-events: auto;
  background: rgba(3, 5, 12, 0.94); border: 1px solid rgba(176,141,87,0.4);
}
#atlas-map-entry-buttons button { font: 0.78rem/1.45 ui-sans-serif, system-ui, sans-serif; padding: 0.65rem; }
#atlas-map-entry-buttons button[aria-pressed="true"] { border-color: var(--bronze-hot); background: #22241a; }
#atlas-map-entry-buttons button[aria-current="location"] { border-left: 3px solid var(--phosphor); }
body[data-atlas-map="true"] #wayfinder, body[data-atlas-map="true"] #path-preview,
body:has(#start-menu:not([hidden])) #wayfinder, body:has(#start-menu:not([hidden])) #path-preview,
body:has(#onboarding-menu:not([hidden])) #wayfinder, body:has(#onboarding-menu:not([hidden])) #path-preview,
body:has(#thread-compass:not([hidden])) #wayfinder, body:has(#thread-compass:not([hidden])) #path-preview,
body:has(#legend-menu:not([hidden])) #wayfinder, body:has(#legend-menu:not([hidden])) #path-preview,
body:has(#workspace-menu:not([hidden])) #wayfinder, body:has(#workspace-menu:not([hidden])) #path-preview,
body:has(#evidence-descent:not([hidden])) #wayfinder, body:has(#evidence-descent:not([hidden])) #path-preview,
body:has(#relic-index:not([hidden])) #wayfinder, body:has(#relic-index:not([hidden])) #path-preview { display: none; }
@media (max-width: 48rem) {
  #wayfinder { top: 4.25rem; left: 0.75rem; right: 0.75rem; padding: 0.5rem; }
  #path-preview { left: 0.75rem; right: 0.75rem; bottom: 0.65rem; width: auto; padding: 0.65rem; }
  #path-preview p { max-height: 3.1rem; font-size: 0.88rem; }
  #path-preview small { display: none; }
  #plate { left: 0.75rem; right: 0.75rem; bottom: calc(var(--preview-height, 9rem) + 1rem); max-width: none; max-height: 22vh; padding: 0.65rem; }
  #plate .here { max-height: 2.6rem; overflow: auto; }
  #plate .meta { display: none; }
  #threshold { width: auto; bottom: calc(var(--preview-height, 9rem) + var(--plate-height, 9rem) + 1.5rem); max-height: 19vh; }
  #atlas-map-hud { top: 4.5rem; }
  #atlas-map-hud > div { max-width: none; }
  #atlas-map-hud h1 { font-size: 1.35rem; }
  #atlas-map-close { position: absolute; right: 0; top: -0.8rem; font-size: 0.6rem; }
  #atlas-map-hud .kind { padding-right: 10rem; }
  #atlas-map-keyboard, #atlas-map-keyboard:focus-within { position: fixed; top: auto; bottom: 0.65rem; left: 0.75rem; right: 0.75rem; width: auto; max-height: 27vh; }
}

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

/* Only surface navigation feedback when a move fails. */
#wayfinder:has(#walk-status:empty) { display: none; }

/* Agent Spark lives in the scene; only its tether and conversation are a HUD. */
#spark-hint {position:absolute;z-index:12;border:0;border-bottom:1px solid #83dcca88;background:#09141acc;color:#baf5e9;padding:7px 12px;font:11px ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;}
#agent-spark {position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 72% 35%,#0a202222,transparent 65%);}
#agent-spark[hidden],#spark-hint[hidden],#spark-clear-review[hidden]{display:none;}
#spark-dial{position:absolute;left:0;top:0;width:600px;height:600px;transform-origin:top left;will-change:transform;}
#spark-ring,#spark-bezel{position:absolute;inset:0;width:600px;height:600px;overflow:visible;}
#spark-bezel{pointer-events:none;filter:drop-shadow(0 0 6px #8df7df);}
#spark-bezel circle{fill:none;stroke:#97f2de;stroke-width:1;stroke-dasharray:2 17 5 29;animation:spark-ripple 8s linear infinite;transform-origin:center;}
#spark-bezel circle+circle{stroke:#90bcd5;animation-direction:reverse;stroke-dasharray:5 61 12 38;}
@keyframes spark-ripple{to{transform:rotate(360deg);stroke-dashoffset:100;}}
.spark-segment{cursor:pointer;outline:none;}
.spark-segment .spark-sector{fill:#09181fec;stroke:#619c9888;stroke-width:1;transition:fill .15s,stroke .15s;}
.spark-segment text{fill:#c7e3dd;font:11px ui-sans-serif,system-ui,sans-serif;pointer-events:none;letter-spacing:.02em;}
.spark-segment:hover .spark-sector,.spark-segment:focus .spark-sector{fill:#1a484ce8;stroke:#bdffeb;stroke-width:2;filter:drop-shadow(0 0 4px #72dcc8);}
.spark-outer .spark-sector{fill:#101e2af5;stroke:#9ab6ca88;}
.spark-outer text{font-size:10px;}
#spark-center{position:absolute;left:120px;top:120px;width:360px;height:360px;box-sizing:border-box;border-radius:50%;border:1px solid #94ddc84d;background:radial-gradient(circle at 50% 10%,#183337fa,#071218fc 75%);box-shadow:0 0 32px #7fffc416,inset 0 0 26px #82d4cf0a;color:#e0eae5;padding:25px 30px 32px;display:flex;flex-direction:column;overflow:hidden;}
#spark-center header{text-align:center;position:relative;flex-shrink:0;}
.spark-kicker{display:block;color:#8dd8c6;font:9px ui-monospace,monospace;letter-spacing:.24em;margin-bottom:5px;}
#spark-title{display:block;font:16px Georgia,serif;}
#spark-model{display:block;font:9px system-ui,sans-serif;color:#9db2b8;max-width:250px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:3px auto;}
#spark-context{font:10px/1.35 system-ui,sans-serif;color:#b7cbb9;border-bottom:1px solid #9bccb42e;padding:5px 0;margin:2px 0 6px;max-height:28px;overflow:hidden;flex-shrink:0;}
.spark-source-link{border:0;background:transparent;color:#9fcbd7;font:10px system-ui;text-decoration:underline;cursor:pointer;padding:3px 0;}
#spark-form{display:flex;gap:5px;margin-top:7px;flex-shrink:0;align-items:center;}
#spark-question{resize:none;min-width:0;flex:1;background:#040b11aa;border:1px solid #648f8a77;color:#e1efea;border-radius:6px;padding:7px;font:12px/1.35 system-ui;}
#spark-send{background:#183f40;border:1px solid #8bc9b8;color:#d2f8e9;border-radius:5px;padding:8px 9px;cursor:pointer;font:11px system-ui;}
#spark-send:disabled{opacity:.45;cursor:wait;}
#spark-status{font:9px/1.3 system-ui;color:#a5c8c1;margin:5px 16px 0;text-align:center;max-height:26px;overflow:auto;flex-shrink:0;}
#spark-tether{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
#spark-tether path{fill:none;stroke:#a9ffdc;stroke-width:1.8;filter:drop-shadow(0 0 5px #a9ffdc);stroke-dasharray:3 5 20 8;animation:spark-current .8s linear infinite;}
@keyframes spark-current{to{stroke-dashoffset:-72;}}
#spark-clear-review{position:absolute;left:135px;top:200px;width:330px;box-sizing:border-box;padding:20px;border:1px solid #a3d8c2;background:#0a1d24;box-shadow:0 0 50px #000;color:#d3e9df;font:12px/1.5 system-ui;border-radius:12px;}
#spark-clear-review h3{margin:0;}
#spark-clear-review button{background:#194144;color:#d9f6e9;border:1px solid #78a99b;margin:3px;padding:8px;cursor:pointer;}
.spark-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.agent-role-row{border:1px solid #67756b66;border-radius:5px;padding:12px;margin-top:9px;display:flex;flex-wrap:wrap;gap:10px;font:12px system-ui;align-items:center;}
.agent-role-row strong{width:100%;font-size:12px;color:var(--ink);}
.agent-role-row label{display:flex;align-items:center;gap:6px;}
.agent-role-row button{border:1px solid var(--bronze);background:#102025;color:var(--ink);padding:7px 10px;cursor:pointer;}
.agent-role-pending-note{flex-basis:100%;margin:2px 0 0;color:var(--bronze-hot);line-height:1.5;}
.agent-role-row.guide-change-pending{border-color:var(--bronze-hot);}
.guide-change-pending .agent-guide-check{accent-color:var(--bronze-hot);outline:2px solid var(--bronze-hot);outline-offset:3px;animation:guide-check-blink 1.4s ease-in-out infinite;}
.agent-role-row.guide-change-pending button{border-color:var(--bronze-hot);background:#46351c;animation:guide-apply-flash 1.4s ease-in-out infinite;}
@keyframes guide-check-blink{50%{opacity:.45;}}
@keyframes guide-apply-flash{50%{background:#765629;box-shadow:0 0 14px #d9b87988;}}
@media(prefers-reduced-motion:reduce){
  .guide-change-pending .agent-guide-check,.agent-role-row.guide-change-pending button{animation:none;}
}

.workspace-empty-slot{border:1px dashed #61736a55;padding:9px 12px;margin:6px 0;color:#82938c;font:11px system-ui;}
body[data-agent-spark="true"] #plate,body[data-agent-spark="true"] #path-preview,body[data-agent-spark="true"] #threshold,body[data-agent-spark="true"] #field-note-eligible{opacity:.15;pointer-events:none;}
@media(prefers-reduced-motion:reduce){#spark-bezel circle,#spark-tether path{animation:none;}}

/* Concentric button arcs and a conversation fitted to the circular aperture. */
#spark-center{padding:28px 27px 42px;}
.spark-kicker{width:180px;max-width:100%;margin:0 auto 5px;}
#spark-title{width:240px;max-width:100%;margin:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#spark-model{width:260px;max-width:100%;}
#spark-context{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:28px;}
#spark-form{width:270px;max-width:100%;margin:7px auto 0;}
#spark-status{width:228px;max-width:100%;margin:5px auto 0;}
#spark-clear-review{left:165px;top:210px;width:270px;padding:16px;font-size:11px;}
#spark-clear-review button{padding:6px;font-size:11px;}

/* A spacious composer, with the conversation floating outside its circle. */
#spark-center{padding:29px 27px 34px;}
#spark-center header{margin-bottom:12px;}
#spark-context{border:0;padding:0;margin:0;max-height:42px;-webkit-line-clamp:3;font-size:11px;line-height:1.3;}
#spark-form{flex-direction:column;gap:9px;align-items:center;width:272px;margin:16px auto 0;}
#spark-question{flex:none;box-sizing:border-box;width:100%;height:100px;padding:10px;line-height:1.45;}
#spark-send{min-width:78px;padding:7px 14px;}
#spark-status{margin:15px auto 0;line-height:1.4;max-height:26px;}
.spark-segment.spark-category-open .spark-sector{fill:#205653ef;stroke:#baffdf;stroke-width:2;filter:drop-shadow(0 0 5px #72dcc8);}
.spark-segment.spark-category-open text{fill:#e1fff1;}
#spark-conversation{position:absolute;display:flex;flex-direction:column;gap:22px;pointer-events:none;}
.spark-bubble{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;min-height:80px;padding:18px 20px;border:1px solid #8bcbbb99;border-radius:26px 32px 28px 12px;background:linear-gradient(135deg,#153638f5,#06141df5);color:#e3f0e9;box-shadow:0 0 22px #92ffe619,inset 0 0 20px #73dbc310;pointer-events:auto;will-change:transform;}
.spark-bubble[hidden]{display:none;}
.spark-bubble::before{content:'';position:absolute;inset:-4px;border:1px dashed #92efd77a;border-radius:inherit;pointer-events:none;filter:drop-shadow(0 0 3px #90ffe0);animation:spark-bubble-flicker 2.6s linear infinite;}
.spark-answer-bubble{border-color:#8bbacd99;border-radius:30px 24px 12px 30px;background:linear-gradient(150deg,#122b3cf5,#09151ef5);}
.spark-answer-bubble::before{border-color:#a5d9f37a;animation-delay:-1.3s;}
.spark-bubble header{color:#bbe8d8;font:10px/1.3 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;}
.spark-bubble-content{white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;min-height:0;font:13px/1.6 system-ui,sans-serif;scrollbar-width:thin;scrollbar-color:#62988f transparent;outline-offset:4px;}
.spark-bubble small{color:#8eafb4;font:9px/1.4 system-ui,sans-serif;}
.spark-bubble footer{display:flex;flex-direction:column;gap:4px;flex-shrink:0;}
.spark-bubble .spark-source-link{align-self:flex-start;text-align:left;}
#spark-question-send-trail{stroke:#c5f4cf;}
#spark-answer-orb-trail{stroke:#a2d8fa;animation-delay:-.3s;}
@keyframes spark-bubble-flicker{0%,100%{opacity:.5;box-shadow:0 0 5px #94ffdb20;}35%,39%,73%{opacity:.95;box-shadow:0 0 10px #94ffdb45;}37%,75%{opacity:.35;}}
@media(prefers-reduced-motion:reduce){.spark-bubble::before{animation:none;}}

/* Agent setup stays inside the existing scrollable onboarding panel. */
#agent-remote-setup {
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(92, 138, 123, .55);
  background: rgba(5, 12, 18, .6);
}
#agent-remote-setup, #agent-local-results, #agent-local-status {
  font: .72rem/1.6 ui-monospace, Menlo, monospace;
}
#agent-remote-setup summary { cursor: pointer; padding: .5rem 0; color: var(--bronze-hot); }
#agent-remote-setup > summary { font-size: .86rem; }
#agent-remote-setup p { margin: .65rem 0; }
#agent-remote-form, .discovered-agent form { display: grid; gap: .75rem; margin: .9rem 0; }
#agent-remote-form label, .discovered-agent label { display: grid; gap: .35rem; color: var(--bronze-hot); }
#agent-remote-setup input, #agent-remote-setup select, .discovered-agent input {
  width: 100%; min-width: 0; padding: .65rem;
  color: var(--ink); background: rgba(2, 6, 10, .8);
  border: 1px solid #46616b; border-radius: 3px; font: inherit;
}
#agent-remote-setup input:focus, #agent-remote-setup select:focus, .discovered-agent input:focus { outline: 1px solid var(--phosphor); }
#agent-remote-setup button, #agent-local-results button, #agent-scan-local {
  border: 1px solid rgba(176, 141, 87, .55); background: rgba(24, 20, 15, .8);
  color: var(--bronze-hot); padding: .65rem .8rem;
  font: .7rem/1.4 ui-monospace, Menlo, monospace; cursor: pointer;
}
#agent-remote-setup button:hover:not(:disabled), #agent-local-results button:hover:not(:disabled), #agent-scan-local:hover { border-color: var(--phosphor); }
#agent-remote-setup button:focus-visible, #agent-local-results button:focus-visible, #agent-scan-local:focus-visible { outline: 1px solid var(--phosphor); }
#agent-remote-setup button:disabled, #agent-local-results button:disabled { opacity: .6; cursor: default; }
#agent-scan-local { margin-bottom: .8rem; }
#agent-host-trust input { width: auto; }
#agent-host-trust > label { display: block; margin: .8rem 0; }
#agent-help-content pre, #agent-host-trust pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; margin: .5rem 0; }
#agent-help-content details { border-top: 1px solid #293a41; padding: .35rem 0; }
#agent-help-content a { display: block; margin-top: .6rem; color: #98e6ec; }
#agent-remote-results, #agent-local-results { display: grid; gap: .8rem; }
.discovered-agent { display: block; min-width: 0; padding: 1rem; }
.discovered-agent p { color: var(--mute); }
#agent-local-status, #agent-remote-status { line-height: 1.6; margin: .75rem 0; }
@media (min-width: 900px) {
  #agent-remote-form { grid-template-columns: 1fr 1fr; }
  #agent-remote-form label:last-of-type, #agent-remote-form > button { grid-column: 1 / -1; }
  #agent-remote-results, #agent-local-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reflect reuses the destination card and a single mode instrument. */
#reflect-trigger[aria-pressed="true"] { color: #ffe3a5; border-color: #e4bf77; background: #493a27; }
body[data-reflecting="true"] #path-preview { border-color: #cbae78; }
body[data-reflecting="true"] #threshold { display: none; }

/* Let the ground and destination carry the eye during a short terrain journey. */
body[data-traveling="true"] #plate,
body[data-traveling="true"] #path-preview { opacity: .2; pointer-events: none; }

.arrival-blend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arrival-blend[hidden] { display: none; }
#scene-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #080c16; color: #ded8be; font: 14px ui-monospace, monospace; }
#scene-loading[hidden] { display: none; }
#plate .standing-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plate, #path-preview { transition: opacity 300ms ease; }
body[data-reflecting="true"] #reflect-trigger {
  color: #ecddff; background: #472879; border: 1px solid #c9a2ff;
  box-shadow: 0 0 22px #a56bff80;
}
body[data-reflecting="true"] #path-preview {
  border-color: #ba87ff; background: linear-gradient(110deg, #221337ed, #0a1426e6);
  box-shadow: 0 0 32px #9460e826;
}
body[data-reflecting="true"] #path-preview-label,
body[data-reflecting="true"] #plate .kind { color: #d6b5ff; }

/* One small audio desk, also reachable above setup without leaving the form. */
#legend-scrim { z-index: 35; }
#legend-menu { z-index: 36; }
#music-controls { display: grid; gap: 0.6rem; margin-bottom: 1.4rem; font: 0.65rem/1.5 ui-monospace, Menlo, monospace; }
#music-controls p { margin: 0; }
#music-source { color: var(--bronze-hot); }
#music-controls small, #music-status, #music-import-status { color: var(--mute); }
#music-controls select { width: 100%; min-width: 0; }
#music-controls button, #music-controls select, [data-open-audio] {
  border: 1px solid rgba(92, 138, 123, 0.48); border-radius: 3px;
  padding: 0.45rem 0.55rem; background: #0b1015; color: var(--bronze-hot);
  font: inherit; cursor: pointer;
}
#music-controls button:hover, [data-open-audio]:hover { border-color: var(--phosphor); }
#music-controls :focus-visible, [data-open-audio]:focus-visible { outline: 1px solid var(--phosphor); outline-offset: 2px; }
.audio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
#music-toggle { min-width: 7rem; }
#music-volume { flex: 1; width: 4rem; min-width: 3rem; accent-color: var(--phosphor-dim); }
#music-volume-value { min-width: 2.5rem; color: var(--mute); }
[data-open-audio] { font: 0.65rem ui-monospace, Menlo, monospace; }

.start-audio-note { margin: 1rem 0 0; text-align: center; }
.start-audio-note [data-open-audio] { padding: 0; border: 0; background: none; color: var(--mute); }
.start-audio-note [data-open-audio]:hover { color: var(--phosphor); }

#startup-music-status:not([hidden]) { display: block; margin-top: 0.4rem; color: var(--mute); font: 0.6rem ui-monospace, Menlo, monospace; }