:root {
  color-scheme: light;
  --paper: #faf8f3; --surface: #ffffff; --ink: #222b35; --muted: #56616d;
  --line: #b8c3cc; --accent: #375d8c; --selected: #e8eef7;
  --danger: #9b312d; --green: #286549;
  font: 16px/1.5 system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181d25; --surface: #222a35; --ink: #edf0f5; --muted: #b5c1d0;
  --line: #718195; --accent: #a7c9ff; --selected: #30415b;
  --danger: #ffafa8; --green: #a3dfbd;
}
* {box-sizing: border-box}
body {margin: 0; background: var(--paper); color: var(--ink)}
header {max-width: 1280px; margin: auto; padding: 18px 24px 8px}
h1 {font-size: 19px; font-weight: 650; margin: 0}
main {max-width: 1280px; margin: auto; padding: 0 20px 28px}
.workspace {display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start}
figure {margin: 0; position: relative; min-width: 0; padding: 12px 0}
#viewport {overflow: auto; max-width: 100%; min-height: 250px}
svg {display: block; margin: auto; max-width: none; height: auto; user-select: text}
[data-node-id], [data-edge-source] {outline: none}
[data-node-id][aria-pressed="true"] > rect {stroke: var(--accent); stroke-width: 4}
[role="button"] {cursor: pointer}
[role="button"]:focus-visible {filter: drop-shadow(0 0 3px var(--accent))}
aside {position: sticky; top: 20px; margin-top: 12px}
graph-detail-overlay {
  display: block; --graph-detail-height: min(75vh, 520px);
  --graph-detail-surface: var(--surface); --graph-detail-ink: var(--ink);
  --graph-detail-muted: var(--muted); --graph-detail-line: var(--line);
  --graph-detail-alt: var(--selected);
}
#sources {display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 14px}
#sources:empty {display: none}
a {color: var(--accent); text-underline-offset: 3px}
.feedback {display: flex; gap: 12px; align-items: center; min-height: 0; color: var(--muted)}
.feedback:has(#status:empty) {display: none}
main[data-state="failed"] .feedback, main[data-state="timed_out"] .feedback {color: var(--danger); padding-block: 12px}
button {font: inherit; padding: 6px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer}
[hidden] {display: none !important}
#diagram {
  --graph-annotation-surface: var(--surface); --graph-annotation-ink: var(--ink);
  --graph-annotation-blue: var(--accent); --graph-annotation-red: var(--danger);
  --graph-annotation-green: var(--green);
}
@media (max-width: 760px) {
  header {padding: 14px 14px 6px}
  main {padding: 0 10px 18px}
  .workspace {grid-template-columns: minmax(0, 1fr); gap: 8px}
  aside {position: static; margin-top: 0}
  graph-detail-overlay {--graph-detail-height: 190px}
}