body {
  max-width: 1500px;
  padding: 24px 30px;
}
header {
  margin: 16px 0 24px;
}
h1 {
  font-size: clamp(28px, 4vw, 42px);
}
header p {
  margin: 8px 0;
  max-width: 850px;
}
#status {
  font-size: 12px;
  padding: 4px 0;
}
.sessions-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sessions-heading h2 {
  margin: 0;
}
.sessions-heading p {
  font-size: 12px;
  margin: 0;
}
#session-list {
  display: flex;
  gap: 10px;
  max-height: 140px;
  overflow: auto;
  padding: 6px 0 10px;
  margin-bottom: 4px;
}
.session-option {
  flex: 0 0 245px;
  font-size: 12px;
}
.session-option b {
  font-size: 12px;
}
.session-option span,
.session-option small {
  margin-top: 3px;
}
#older-sessions {
  font-size: 12px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.session-layout {
  display: block;
}
#session-detail > .card {
  padding: 12px 18px;
  margin: 8px 0 20px;
}
#session-live {
  font-size: 13px;
  margin: 0;
}
#session-summary {
  margin: 4px 0;
  font-size: 12px;
}
#decision-updated {
  font-size: 11px;
}
.monitor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: start;
}
.history-column > h3 {
  margin-top: 0;
}
.history-column > p {
  font-size: 12px;
}
.history-column table {
  font-size: 12px;
}
.history-column th,
.history-column td {
  padding: 10px 6px;
}
.history-column button {
  font-size: 12px;
}
.decision-scroll {
  max-height: 280px;
}
#decision-detail {
  padding: 16px;
  font-size: 13px;
}
#decision-detail li {
  font-size: 12px;
}
.cost-section {
  margin-top: 42px;
  border-top: 1px solid #35414d;
  padding-top: 20px;
}
#cards {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.card b {
  font-size: 23px;
}
.decision-diagram {
  position: sticky;
  top: 18px;
  border: 1px solid #37535f;
  background:
    radial-gradient(ellipse at 50% 30%, #1d3940 0, transparent 65%), #14232e;
  border-radius: 16px;
  padding: 22px;
  overflow: hidden;
}
.diagram-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.diagram-heading h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 4px 0;
}
.diagram-heading .eyebrow {
  font-size: 10px;
}
.diagram-mode {
  font-size: 10px;
  line-height: 1.3;
  color: #b4e9d5;
  border: 1px solid #477665;
  border-radius: 20px;
  padding: 7px 10px;
  max-width: 160px;
  text-align: center;
  text-transform: uppercase;
}
.sensors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.flow-node {
  background: #182b37;
  border: 1px solid #42606e;
  border-radius: 9px;
  padding: 12px;
  min-width: 0;
}
.flow-node > span,
.model-node > div > span {
  font-size: 9px;
  color: #8cafba;
  letter-spacing: 0.09em;
  display: block;
}
.flow-node b {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  margin: 5px 0;
  overflow-wrap: anywhere;
  text-transform: capitalize;
}
.flow-node small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #aac3cd;
}
.flow-wires {
  display: block;
  width: 100%;
  height: 35px;
  overflow: visible;
}
.flow-wires path {
  fill: none;
  stroke: #4f7882;
  stroke-width: 1.5;
}
.model-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-color: #86c8b1;
  background: #21423f;
  text-align: left;
}
.model-node b {
  font-size: 26px;
  color: #c2f5dd;
  margin: 3px 0;
}
.model-orbit {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 2px solid #71bfa6;
  border-radius: 50%;
  position: relative;
}
.model-orbit:after {
  content: "";
  position: absolute;
  inset: 10px;
  background: #b5f3d5;
  border-radius: 50%;
}
.tactic-branches {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tactic-branches span {
  font-size: 10px;
  border: 1px solid #385463;
  color: #8ea8b3;
  border-radius: 5px;
  padding: 3px 7px;
}
.tactic-branches .selected {
  background: #a6e6c9;
  color: #102b27;
  border-color: #a6e6c9;
}
.flow-link {
  height: 26px;
  width: 1px;
  background: #5f8890;
  position: relative;
  margin: auto;
}
.flow-link.short {
  height: 16px;
}
.flow-link i {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c1ffdf;
  opacity: 0;
}
.execution-nodes {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  gap: 6px;
}
.flow-arrow {
  color: #95cabc;
  text-align: center;
}
.execution-nodes b {
  font-size: 18px;
}
.guard-note {
  font-size: 10px;
  text-align: center;
  line-height: 1.5;
  margin: 8px 0;
  color: #9eb9c4;
  min-height: 30px;
}
.actuators {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 14px;
  align-items: center;
  margin: 6px 0 15px;
}
.actuators[data-known="false"] {
  opacity: 0.38;
}
.actuators b {
  display: block;
  font-size: 12px;
  color: #daf7ea;
  margin-top: 5px;
  text-align: center;
}
.actuators span {
  display: block;
  text-align: center;
  font-size: 8px;
  color: #8facb7;
  letter-spacing: 0.04em;
}
#steering-wheel {
  width: 86px;
  max-width: 100%;
  display: block;
  margin: auto;
  fill: none;
  stroke: #a6cbcf;
  stroke-width: 5;
  transition: transform 0.22s ease-out;
}
.pedals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pedal-track {
  position: relative;
  width: 32px;
  height: 82px;
  background: #0e1b25;
  border: 1px solid #46636d;
  border-radius: 6px;
  overflow: hidden;
  margin: auto;
}
.pedal-track i {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(#b2f4cf, #478b76);
  transition: height 0.22s ease-out;
}
.pedal-track.brake i {
  background: linear-gradient(#ffc591, #d16b52);
}
.car-scene {
  width: 60px;
  height: 100px;
  margin: auto;
  position: relative;
}
.car-scene svg {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 98px;
  fill: #08131c;
  transition: transform 0.22s;
}
.car-body {
  fill: #547c8c;
  stroke: #b5d9df;
  stroke-width: 1.5;
}
.car-glass {
  fill: #172f3c;
  stroke: #8aafbd;
  stroke-width: 1;
}
.car-stripe {
  fill: #b9d6d9;
}
.nitro-flame {
  position: absolute;
  left: 23px;
  top: 88px;
  width: 14px;
  height: 20px;
  background: linear-gradient(#d9fffe, #3dc4f2, transparent);
  border-radius: 50%;
  opacity: 0;
}
.tire-trail {
  position: absolute;
  inset: 65px 12px -5px;
  border-left: 3px dashed #84d6c0;
  border-right: 3px dashed #84d6c0;
  opacity: 0;
}
.input-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.input-switches > div {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #3b5360;
  padding: 10px;
  border-radius: 7px;
  font-size: 9px;
}
.input-switches b {
  margin-left: auto;
  font-size: 10px;
}
.input-switches i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #526673;
}
.input-switches [data-active="true"] {
  background: #27473f;
  border-color: #9de7c9;
  color: #c7ffe8;
}
.input-switches [data-active="true"] i {
  background: #b6ffdd;
  box-shadow: 0 0 9px #b6ffdd;
}
.diagram-footnote {
  font-size: 10px;
  line-height: 1.5;
  margin: 12px 0 0;
  color: #8baab8;
}
.decision-diagram[data-thinking="true"] .model-orbit {
  animation: think 1s linear infinite;
  border-top-color: transparent;
}
.decision-pulse[data-flowing="true"] .flow-wires path {
  animation: wire-pulse 0.8s ease-out;
}
.decision-pulse[data-flowing="true"] .flow-link i {
  animation: signal 0.7s ease-in-out;
}
.decision-diagram[data-overridden="true"] .guard-node {
  border-color: #d4a069;
  background: #3b332c;
}
.decision-diagram[data-boost="true"] .nitro-flame {
  opacity: 1;
  animation: flame 0.18s alternate infinite;
}
.decision-diagram[data-drift="true"] .car-scene svg {
  transform: rotate(var(--drift-angle, 15deg));
}
.decision-diagram[data-drift="true"] .tire-trail {
  opacity: 0.8;
  animation: trail 0.4s alternate infinite;
}
@keyframes think {
  to {
    transform: rotate(360deg);
  }
}
@keyframes signal {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(24px);
  }
}
@keyframes wire-pulse {
  30% {
    stroke: #c6ffdc;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px #99ffc7);
  }
}
@keyframes flame {
  to {
    transform: scaleY(1.3);
  }
}
@keyframes trail {
  to {
    transform: translateY(4px);
  }
}
@media (max-width: 1050px) {
  .monitor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .decision-diagram {
    position: relative;
    top: auto;
    grid-row: 1;
  }
  .history-column {
    grid-row: 2;
  }
  .diagram-heading h3 {
    font-size: 22px;
  }
  body {
    max-width: 820px;
  }
}
@media (max-width: 520px) {
  body {
    padding: 18px 14px;
  }
  .sessions-heading {
    display: block;
  }
  .sessions-heading p {
    margin-top: 5px;
  }
  .decision-diagram {
    padding: 14px;
  }
  .sensors {
    gap: 5px;
  }
  .flow-node {
    padding: 9px;
  }
  .sensors b {
    font-size: 14px;
  }
  .sensors small {
    font-size: 9px;
  }
  .model-node b {
    font-size: 23px;
  }
  .actuators {
    gap: 8px;
  }
  .diagram-mode {
    font-size: 9px;
    max-width: 125px;
  }
  .input-switches {
    gap: 7px;
  }
  .input-switches > div {
    font-size: 8px;
    padding: 8px;
  }
  .session-option {
    flex-basis: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .decision-diagram * {
    animation: none !important;
    transition: none !important;
  }
}

.map-observation {
  margin-top: 14px;
  border: 1px solid #365362;
  border-radius: 10px;
  overflow: hidden;
}
.map-observation canvas {
  display: block;
  width: 100%;
  height: auto;
}
.map-observation p {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px;
  color: #afc6d4;
}