/* Chrome restyled to match the site's editorial system: flat dark surface,
   hairline borders, 2px radius, coral accent. No gradient mesh, glassmorphism,
   or heavy shadows. The visualization's own colors (agents, legend dots) come
   from the data and are left untouched. */
:root {
  --bg: #0f110f;
  --fg: #ebe7dc;
  --soft: #c9c2b5;
  --muted: #9f9a8f;
  --line: rgba(235, 231, 220, 0.12);
  --line-strong: rgba(235, 231, 220, 0.22);
  --surface: rgba(235, 231, 220, 0.035);
  --accent: #ff6b4a;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
}

.topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 17, 15, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
}

.title .h1 { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.title .sub { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

select, button {
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 7px 11px;
  border-radius: 2px;
  outline: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
select:hover, button:hover {
  border-color: var(--line-strong);
  background: rgba(235, 231, 220, 0.07);
}
button { cursor: pointer; font-weight: 500; }
select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.clock {
  font-variant-numeric: tabular-nums;
  padding: 7px 11px;
  border-radius: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  font-weight: 600;
  min-width: 62px;
  text-align: center;
  letter-spacing: 0.04em;
}

.stage {
  position: relative;
  height: calc(100vh - 120px);
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
canvas { width: 100%; height: 100%; display: block; }

.legend {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  background: rgba(15, 17, 15, 0.92);
  border: 1px solid var(--line);
  max-width: 260px;
  font-size: 12px;
}
.legend .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.legend .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.legend .left { display: flex; align-items: center; gap: 8px; }
.legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(235, 231, 220, 0.25);
}

.footer {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}