:root {
  color-scheme: light dark;
  --ink: #1b1b1b;
  --muted: #5e5e5e;
  --paper: #fbfaf7;
  --line: #d9d6cf;
  --warn: #8a3b12;
  --seg-0: #2f5d8a;
  --seg-1: #c0623b;
  --seg-2: #9a9690;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ecebe8;
    --muted: #a5a39e;
    --paper: #161615;
    --line: #3a3936;
    --warn: #f0a37a;
    --seg-0: #7fb0dc;
    --seg-1: #e58a62;
    --seg-2: #77736d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 48px 16px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header, main { max-width: 960px; margin: 0 auto; }

header { border-bottom: 1px solid var(--line); margin-bottom: 24px; }

h1 { font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

h2 { font-size: 22px; font-weight: 600; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }

h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }

.env { color: var(--muted); margin: 4px 0 16px; }

#who { font-weight: 600; }

.actions { margin-top: 24px; }

button {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}

button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0; }

.controls button { padding: 4px 10px; font-size: 14px; border-color: var(--line); }

.controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

nav.controls {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.note { color: var(--muted); font-size: 14px; max-width: 70ch; }

.warning { color: var(--warn); font-weight: 600; }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px 32px; }

.chart { margin: 0; }

.chart figcaption { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

.chart svg { display: block; width: 100%; max-width: 620px; height: auto; overflow: visible; }

.chart .grid { stroke: var(--line); stroke-width: 1; }

.chart .tick { fill: var(--muted); font-size: 11px; }

.chart .target { fill: transparent; }

.seg-0 { fill: var(--seg-0); }
.seg-1 { fill: var(--seg-1); }
.seg-2 { fill: var(--seg-2); }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; padding: 0; font-size: 12px; color: var(--muted); }

.legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }

.legend .key-0::before { background: var(--seg-0); }
.legend .key-1::before { background: var(--seg-1); }
.legend .key-2::before { background: var(--seg-2); }

table { border-collapse: collapse; font-size: 14px; }

th, td { padding: 4px 12px 4px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }

thead th { color: var(--muted); font-weight: 600; }

tbody th { font-weight: 400; }

table.wide tbody th { min-width: 14ch; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

table.wide { width: 100%; }

.scroll { overflow-x: auto; }

details { margin: 16px 0; }

summary { cursor: pointer; font-size: 14px; }

.models { font-size: 13px; color: var(--muted); padding-left: 20px; }

/* The operator's own looks (#196). */

nav.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

nav.tabs a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; }

nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

nav.tabs a:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

a { color: inherit; }

h4 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }

h5 { font-size: 14px; font-weight: 600; margin: 14px 0 4px; color: var(--muted); }

.key { color: var(--muted); }

ul.fields, ul.written { list-style: none; margin: 0; padding: 0; }

ul.fields li, ul.written li { overflow-wrap: anywhere; }

ul.written li { font-size: 14px; padding: 2px 0; }

table.timeline td:last-child { max-width: 60ch; }

pre.record {
  margin: 0 0 8px;
  padding: 8px 10px;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.record-body { margin: 8px 0 16px; }

details.record { margin: 4px 0; }

details.record > summary { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }