:root {
  color-scheme: dark;
  --bg: #05090d;
  --panel: #09131a;
  --panel-hi: #0e2029;
  --line: #193440;
  --ink: #dce9f1;
  --muted: #728996;
  --cyan: #50e5ff;
  --blue: #658dff;
  --violet: #b18aff;
  --orange: #ffbd70;
  --green: #72e4ae;
  --pink: #ff6d91;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { padding: 22px; background-image: radial-gradient(circle at 56% 22%, #0c2934 0, transparent 38%), linear-gradient(#05090d, #071017); }
button { font: inherit; }
h1, h2, p { margin: 0; }
h1 { margin-top: 7px; color: var(--ink); font: 500 clamp(23px, 2.5vw, 38px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
h1 span { color: var(--cyan); }
.eyebrow, .panel-index, .panel-note, .micro-label, .counter span, .subheading, .speed-label, .trace-label { color: var(--muted); font: 600 10px/1.25 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }

.topbar { display: grid; grid-template-columns: minmax(255px, .9fr) minmax(0, 1.1fr) auto; gap: 15px; align-items: end; max-width: 1650px; margin: 0 auto 18px; }
.run-meta { display: flex; min-width: 0; align-items: center; gap: 10px; padding-bottom: 2px; overflow: hidden; font: 11px ui-monospace, monospace; }
.mode-badge { padding: 7px 8px 6px; border: 1px solid var(--orange); color: var(--orange); font: 700 10px ui-monospace, monospace; letter-spacing: .12em; white-space: nowrap; }
.mode-badge.chain { border-color: var(--green); color: var(--green); background: rgba(114,228,174,.07); }
.run-label, .sim-clock, .source-state { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.sim-clock { color: var(--ink); }
.source-state { color: var(--green); text-transform: uppercase; }
.transport { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.control-button, .speed-button { border: 1px solid var(--line); padding: 8px 10px; color: var(--ink); background: #0b1820; cursor: pointer; font: 700 10px ui-monospace, monospace; letter-spacing: .08em; }
.control-button:hover, .control-button.active, .speed-button:hover, .speed-button.active { border-color: var(--cyan); color: var(--cyan); }
.speed-label { margin-left: 8px; font-size: 9px; }

.fly-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .62fr) minmax(295px, .72fr); grid-template-areas: "brain readout telemetry" "brain body body"; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; max-width: 1650px; min-height: 720px; margin: 0 auto; }
.panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(12, 29, 38, .94), rgba(6, 14, 20, .98)); box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.panel::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(90deg, transparent, rgba(80,229,255,.035), transparent); }
.panel-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.panel-heading > div { display: flex; align-items: center; gap: 9px; }
h2 { color: var(--ink); font: 700 12px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.panel-index { color: var(--cyan); }
.panel-note { font-size: 9px; letter-spacing: .08em; }
.brain-panel { grid-area: brain; display: flex; flex-direction: column; }
.readout-panel { grid-area: readout; }
.telemetry-panel { grid-area: telemetry; }
.body-panel { grid-area: body; min-height: 360px; }
.cloud-wrap { position: relative; flex: 1 1 auto; min-height: 560px; background: radial-gradient(ellipse at 50% 45%, rgba(20, 69, 80, .22), transparent 62%), #061016; }
canvas { display: block; width: 100%; height: 100%; }
#cloud { position: absolute; inset: 0; }
.cloud-overlay { position: absolute; top: 15px; left: 17px; display: flex; gap: 22px; pointer-events: none; }
.cloud-overlay div { display: grid; gap: 3px; }
.cloud-overlay strong { color: var(--ink); font: 600 18px ui-monospace, monospace; }
.heat-readout { min-width: 122px; }
.heat-meter { display: block; width: 116px; height: 5px; overflow: hidden; border: 1px solid rgba(80,229,255,.35); background: rgba(80,229,255,.08); }
.heat-meter i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width 80ms linear; }
.region-label { position: absolute; left: 17px; color: rgba(220,233,241,.28); font: 600 10px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.brain-label { top: 26%; }
.cord-label { top: 62%; color: rgba(114,228,174,.27); }
.cloud-legend { position: absolute; right: 15px; bottom: 14px; display: flex; gap: 12px; color: var(--muted); font: 9px ui-monospace, monospace; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--cyan); }
.dot.sugar { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.dot.mn9 { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.dot.firing { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.superclass-strip { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.4 ui-monospace, monospace; }
.superclass-strip .micro-label { flex: 0 0 auto; color: var(--cyan); font-size: 8px; }

.readout-hero { padding: 18px 15px 15px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,109,145,.07), transparent 55%); }
.readout-name { color: var(--pink); font: 700 27px ui-monospace, monospace; letter-spacing: -.08em; }
.readout-name span { margin-left: 7px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.readout-value { display: flex; align-items: baseline; gap: 8px; margin-top: 15px; }
.readout-value strong { color: var(--ink); font: 500 38px ui-monospace, monospace; letter-spacing: -.08em; }
.readout-value span { color: var(--muted); font: 10px ui-monospace, monospace; text-transform: uppercase; }
.readout-detail { margin-top: 7px; color: var(--muted); font: 9px/1.45 ui-monospace, monospace; }
.trace-wrap { position: relative; height: 178px; margin: 13px; border: 1px solid #173541; background: #071117; }
.trace-label { position: absolute; top: 9px; left: 10px; color: var(--muted); font-size: 8px; pointer-events: none; }
#trace { position: absolute; inset: 0; }
.raster-wrap { padding: 0 13px 12px; }
.subheading { display: flex; justify-content: space-between; font-size: 9px; }
.subheading span:last-child { color: var(--cyan); }
#raster { height: 56px; margin-top: 7px; border: 1px solid #173541; background: repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(80,229,255,.035) 24px), #071117; }
.readout-foot { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font: 9px ui-monospace, monospace; }
.readout-foot span:first-child { color: var(--pink); }

.counter-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.counter { min-height: 72px; padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.counter:nth-child(2n) { border-right: 0; }
.counter:nth-last-child(-n+2) { border-bottom: 0; }
.counter span { display: block; margin-bottom: 7px; font-size: 8px; letter-spacing: .07em; }
.counter strong { display: block; overflow: hidden; color: var(--ink); font: 600 19px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.timeline-wrap { padding: 14px 13px 13px; border-bottom: 1px solid var(--line); }
#timeline { height: 48px; margin-top: 8px; border: 1px solid #173541; background: #071117; }
.stimulus-card { padding: 14px 13px; border-bottom: 1px solid var(--line); }
.stimulus-line { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--orange); font: 9px ui-monospace, monospace; }
.stimulus-bar { display: block; width: 100%; height: 6px; overflow: hidden; border: 1px solid #6b4e2d; background: #221c13; }
.stimulus-bar i { display: block; width: 0%; height: 100%; background: var(--orange); box-shadow: 0 0 15px var(--orange); transition: width 60ms linear; }
.chain-summary { padding: 13px; border-bottom: 1px solid #205344; background: rgba(114,228,174,.045); }
.chain-summary[hidden] { display: none; }
.chain-title { color: var(--green); font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }
.chain-pulse { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.chain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.chain-grid div { min-width: 0; border: 1px solid #1a483b; padding: 7px; }
.chain-grid span { display: block; color: var(--muted); font: 8px ui-monospace, monospace; }
.chain-grid strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font: 600 13px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.chain-summary p { margin-top: 9px; color: var(--muted); font: 8px/1.4 ui-monospace, monospace; }
.telemetry-note { margin-top: auto; padding: 14px; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; }
.error-line { max-width: 1650px; min-height: 18px; margin: 8px auto 0; color: #ff9caf; font: 10px ui-monospace, monospace; }

.body-layout { display: grid; grid-template-columns: minmax(440px, 1.1fr) minmax(360px, .9fr); min-height: 313px; }
.body-visual { position: relative; padding: 7px 14px 10px; border-right: 1px solid var(--line); background: radial-gradient(ellipse at 44% 46%, rgba(20,69,80,.27), transparent 65%), repeating-linear-gradient(90deg, transparent 0, transparent 48px, rgba(80,229,255,.025) 49px), #061016; }
#fly-body { display: block; width: 100%; height: 264px; overflow: visible; shape-rendering: geometricPrecision; }
#fly-body path, #fly-body circle { vector-effect: non-scaling-stroke; }
#fly-body .body-static path { transition: fill 80ms linear, stroke 80ms linear; }
#fly-body .body-far { opacity: .24; }
#fly-body .thorax-plate { fill: rgba(25, 70, 80, .24); stroke-dasharray: 1.4 3.5; opacity: .72; }
#fly-body .scutellum { fill: rgba(14, 45, 54, .48); stroke: #b9e5e9; }
#fly-body .wing-membrane { fill-opacity: .44; }
#fly-body .wing-hatch, #fly-body .segment-dots { stroke-dasharray: .8 3.6; opacity: .55; }
#fly-body .abdomen-band { fill: #05090d; fill-opacity: .72; stroke: #315e68; stroke-width: .65; }
#fly-body .tergite { fill: none; stroke: #79cbd7; stroke-dasharray: 2 3; opacity: .66; }
#fly-body .tarsal-marks { stroke: #c3f0f2; stroke-width: .8; opacity: .74; }
#fly-body .far-leg { stroke: #65a8b5; }
#body-wings .heat-stroke, #body-legs path, #body-haltere .heat-stroke, #body-abdomen .heat-stroke, #body-proboscis .heat-stroke, #body-neck { transition: stroke 80ms linear, opacity 80ms linear, filter 80ms linear; }
#proboscis-extension { transition: d 65ms linear; }
#proboscis-labellum, #sugar-droplet { transition: transform 65ms linear; }
.body-caption { position: absolute; right: 17px; bottom: 8px; padding: 3px 5px; color: #a8dae1; background: rgba(5,9,13,.72); font: 600 8px ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.body-readout { padding: 15px 16px 13px; }
.body-boundary { padding: 9px 10px; border-left: 2px solid var(--orange); background: rgba(255,189,112,.06); color: var(--orange); font: 9px/1.45 ui-monospace, monospace; }
.body-legend { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: var(--muted); font: 9px ui-monospace, monospace; }
.body-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.body-rate-heading { display: flex; justify-content: space-between; margin-top: 17px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 9px ui-monospace, monospace; letter-spacing: .1em; }
.body-rate-heading span:last-child { color: var(--cyan); font-size: 8px; letter-spacing: .04em; text-transform: none; }
.motor-pool-bars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 17px; row-gap: 7px; padding-top: 10px; }
.motor-pool-row { display: grid; grid-template-columns: minmax(88px, auto) 1fr auto; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font: 8px ui-monospace, monospace; }
.motor-pool-row[data-key="proboscis_mn9"] { color: var(--pink); }
.motor-pool-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motor-pool-meter { display: block; height: 5px; overflow: hidden; border: 1px solid rgba(80,229,255,.23); background: rgba(80,229,255,.055); }
.motor-pool-meter i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width 70ms linear; }
.motor-pool-row[data-key="proboscis_mn9"] .motor-pool-meter i { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.motor-pool-value { color: var(--ink); font-size: 8px; white-space: nowrap; }
.motor-pool-row[data-key="no_pool"] { color: #78858c; }
.motor-pool-row[data-key="no_pool"] .motor-pool-meter i { background: #71808a; box-shadow: none; }

@media (max-width: 1350px) {
  .body-layout { display: block; }
  .body-visual { border-right: 0; border-bottom: 1px solid var(--line); }
}

.demo-mode .transport { display: none; }
.demo-mode .topbar { grid-template-columns: minmax(260px, 1fr) auto; }
.demo-mode .run-meta { justify-self: end; }

@media (max-width: 1250px) {
  body { padding: 14px; }
  .topbar { grid-template-columns: 1fr auto; }
  .run-meta { justify-self: end; }
  .transport { grid-column: 1 / -1; justify-self: end; }
  .fly-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); grid-template-areas: "brain readout" "telemetry telemetry" "body body"; grid-template-rows: auto auto auto; min-height: 0; }
  .telemetry-panel { min-height: 300px; }
}
@media (max-width: 720px) {
  body { padding: 8px; }
  .topbar { display: block; }
  .run-meta, .transport { justify-content: flex-start; flex-wrap: wrap; margin-top: 13px; }
  .fly-grid { display: flex; flex-direction: column; }
  .cloud-wrap { min-height: 450px; }
  .body-layout { display: block; }
  .body-visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .body-readout { padding-bottom: 16px; }
}

/* ---- live mode -------------------------------------------------------- */

.mode-badge.live { border-color: var(--pink); color: var(--pink); background: rgba(255,109,145,.08); }
.mode-badge.dry { border-color: var(--orange); color: var(--orange); background: rgba(255,189,112,.08); }

.live-banner { max-width: 1650px; margin: 0 auto 12px; padding: 9px 12px; border: 1px solid var(--orange); border-left-width: 3px; background: rgba(255,189,112,.08); color: var(--orange); font: 600 10px/1.45 ui-monospace, monospace; letter-spacing: .06em; }
.live-banner[hidden] { display: none; }
.live-banner.offline { border-color: #ff6d91; background: rgba(255,109,145,.08); color: #ff9caf; }

.live-panel { grid-area: live; display: flex; flex-direction: column; min-height: 0; }
.live-panel[hidden] { display: none; }
.live-hero { padding: 13px; border-bottom: 1px solid var(--line); }
.live-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-badge { padding: 7px 9px 6px; border: 1px solid var(--muted); color: var(--muted); font: 700 10px ui-monospace, monospace; letter-spacing: .1em; white-space: nowrap; }
.live-badge.submitted { border-color: var(--orange); color: var(--orange); background: rgba(255,189,112,.07); }
.live-badge.confirmed { border-color: var(--green); color: var(--green); background: rgba(114,228,174,.09); box-shadow: 0 0 18px rgba(114,228,174,.12); }
.live-badge.refused { border-color: var(--pink); color: var(--pink); background: rgba(255,109,145,.09); }
.live-age { overflow: hidden; color: var(--muted); font: 9px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.live-ids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.live-ids div { min-width: 0; padding: 7px; border: 1px solid var(--line); }
.live-ids span { display: block; color: var(--muted); font: 8px ui-monospace, monospace; letter-spacing: .08em; }
.live-ids strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font: 600 14px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.live-verify { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.live-verify button { flex: 0 0 auto; }
.verify-result { min-width: 0; color: var(--muted); font: 9px/1.35 ui-monospace, monospace; }
.verify-result.ok { color: var(--green); }
.verify-result.bad { color: var(--pink); }
.live-list-head { padding: 12px 13px 6px; }
.live-list { flex: 1 1 auto; min-height: 120px; max-height: 300px; margin: 0; padding: 0 13px 10px; overflow-y: auto; list-style: none; }
.live-list li { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(25,52,64,.6); color: var(--muted); font: 9px ui-monospace, monospace; }
.live-list li b { color: var(--ink); font-weight: 600; }
.live-list .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.live-list li.confirmed .live-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.live-list li.refused .live-dot { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.live-list a { overflow: hidden; color: var(--cyan); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.live-list a:hover { text-decoration: underline; }
.live-list .live-spikes { color: var(--cyan); }

body.live-mode .fly-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .6fr) minmax(300px, .8fr);
  grid-template-areas: "brain readout live" "brain telemetry live" "body body body";
  grid-template-rows: minmax(0, 1fr) auto auto;
}
body.live-mode .chain-summary { display: none; }

@media (max-width: 1250px) {
  body.live-mode .fly-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); grid-template-areas: "brain readout" "live live" "telemetry telemetry" "body body"; grid-template-rows: auto auto auto auto; }
}
@media (max-width: 720px) {
  .live-ids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-ids strong { font-size: 12px; }
  .live-verify { flex-wrap: wrap; }
  .live-list { max-height: 220px; }
}
body.live-mode .transport { display: none; }
body.live-mode .topbar { grid-template-columns: minmax(260px, 1fr) auto; }
.run-headline { color: var(--ink); }
body.live-mode .run-headline { color: var(--pink); }

@media (max-width: 720px) {
  /* On one column the live panel belongs directly under the brain. */
  body.live-mode .brain-panel { order: 0; }
  body.live-mode .live-panel { order: 1; }
  body.live-mode .readout-panel { order: 2; }
  body.live-mode .telemetry-panel { order: 3; }
  body.live-mode .body-panel { order: 4; }
}