:root {
  --bg: #0c0e11;
  --bg-2: #111419;
  --surface: #161a20;
  --surface-2: #1c2129;
  --line: #242a33;
  --line-2: #313844;
  --text: #e7e9ec;
  --muted: #8a93a1;
  --faint: #5d6573;
  --accent: #b8e26a;
  --accent-ink: #18200b;
  --accent-soft: rgba(184, 226, 106, .12);
  --danger: #ef8a7a;
  --warn: #e5c06b;
  --viz-win: #72a236;
  --viz-loss: #d9675a;
  --viz-absent: #8d97a8;
  --viz-track: rgba(255, 255, 255, .05);
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --z-bar: 10;
  --z-toast: 20;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  margin: 0;
  font: 400 15px/1.55 var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background: transparent;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { text-decoration: none; color: var(--accent); transition: color .2s; }
a:not([class]):hover { color: #cbec8e; }
b { font-weight: 600; }

iconify-icon {
  display: inline-block;
  flex: none;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -0.15em;
}

input[type=text], input[type=number], input[type=search], select {
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  font: 400 14px var(--font);
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
input[type=text]:hover, select:hover, input[type=number]:hover, input[type=search]:hover {
  border-color: #3d4552;
}
input[type=text]:focus, select:focus, input[type=number]:focus, input[type=search]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input.mono { font-family: var(--mono); font-size: 13px; }
input.secret { -webkit-text-security: disc; }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--faint); }
[hidden] { display: none !important; }

:focus-visible { border-radius: 4px; outline: 2px solid var(--accent); outline-offset: 2px; }
.skip {
  position: absolute;
  top: -40px;
  left: 12px;
  z-index: 30;
  padding: 8px 12px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-sm);
}
.skip:focus { top: 12px; }