:root {
  color-scheme: light;
  --purple: #5426A8;
  --purple-deep: #32136F;
  --purple-mid: #7548C5;
  --purple-soft: #F2EDFF;
  --purple-line: #D9C9F1;
  --canvas: #F7F6FA;
  --surface: #FFFFFF;
  --ink: #211B31;
  --ink-2: #4A4560;
  --muted: #6F6C80;
  --line: #EEEAF4;
  --line-2: #D9D4E3;
  --sidebar: #211632;
  --sidebar-text: #D5CDDF;
  --sidebar-muted: #A99DB8;
  --sidebar-active: #38264F;
  --sidebar-accent: #A98BE5;
  --good: #137A4B;
  --good-bg: #E8F7EF;
  --warn: #8F5A10;
  --warn-bg: #FFF4E5;
  --bad: #BE3545;
  --bad-bg: #FDECEE;
  --info: #3F5FB5;
  --info-bg: #EEF3FF;
  --idle: #5F5C70;
  --idle-bg: #F1F0F5;
  --series-1: #7046B5;
  --series-2: #1F9EA8;
  --shadow: 0 3px 16px rgba(30, 21, 51, .06);
  --shadow-lg: 0 12px 34px rgba(30, 21, 51, .12);
  --radius: 12px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.45 Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--purple); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.ico { width: 1.15em; height: 1.15em; flex: none; display: block; }
:focus-visible { outline: 3px solid rgba(84, 38, 168, .35); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: .93em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pill svg.ico { width: 12px; height: 12px; }
.pill.good { color: var(--good); background: var(--good-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.bad { color: var(--bad); background: var(--bad-bg); }
.pill.info { color: var(--info); background: var(--info-bg); }
.pill.idle { color: var(--idle); background: var(--idle-bg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--purple); color: #fff; }
.btn.primary:hover { background: #47208F; }
.btn.ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn.ghost:hover { border-color: var(--purple-mid); color: var(--purple); }
.btn.danger { background: var(--surface); border-color: #EBC1C6; color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

body:not(.presenter-on) .presenter { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}