/* Tokens, reset, typography. Dark is the default; light is a tuned counterpart, not an inversion. */
:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 23px;

  --r: 3px;
  --r-lg: 5px;
  --ctl: 30px;
  --ctl-sm: 26px;
  --side-w: 212px;
  --t: 120ms;
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171b;
  --panel: #1b1f24;
  --raised: #232930;
  --sunken: #101316;
  --line: #2b3139;
  --line-2: #3c444e;
  --ink: #e7eaed;
  --ink-2: #adb5be;
  --ink-3: #808a95;
  --live: #42c483;
  --on-live: #06130c;
  --ring: #e9b23c;
  --warn: #ec8f52;
  --err: #f0626f;
  --on-err: #1c0507;
  --info: #68abf2;
  --focus: #8dc0ff;
  --scrim: rgba(5, 7, 9, .62);
  --shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --c-out: #5596e6;
  --c-in: #1f9a84;
  --c-missed: #c9742a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0ee;
  --panel: #fbfbfa;
  --raised: #ffffff;
  --sunken: #e5e8e5;
  --line: #d5d9d6;
  --line-2: #b9bfbb;
  --ink: #15191c;
  --ink-2: #454e57;
  --ink-3: #5f6871;
  --live: #0f7a43;
  --on-live: #ffffff;
  --ring: #8f5d06;
  --warn: #ad4f18;
  --err: #c22f3d;
  --on-err: #ffffff;
  --info: #1d68b8;
  --focus: #1d68b8;
  --scrim: rgba(21, 25, 28, .38);
  --shadow: 0 18px 44px rgba(21, 25, 28, .18);
  --c-out: #2f6fc4;
  --c-in: #0f8a72;
  --c-missed: #c2661a;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app { height: 100%; }

h1, h2, h3, p, dl, dd, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: var(--fs); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--fs); font-weight: 600; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-xs); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }

.ic { flex: none; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: .94em; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }
.wrap { white-space: normal; }
.clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.warn-t { color: var(--warn); }
.err-t { color: var(--err); }
.pad { padding: 12px 14px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

kbd {
  font: 500 11px/1 var(--mono);
  padding: 2px 5px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r);
  color: var(--ink-2);
  background: var(--panel);
}

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

::selection { background: color-mix(in srgb, var(--info) 35%, transparent); }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .25; } }
.spin { animation: spin .9s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (pointer: coarse) {
  :root { --ctl: 44px; --ctl-sm: 36px; }
}