:root, [data-theme="day"] {
  --bg: #DBDCD8;  --surface: #FFFFFF;  --surface-sunk: #E7E7E3;
  --fg: #121212;  --fg-muted: #6B6B68;  --fg-faint: #A6A6A2;
  --border: #C4C5BF;  --border-strong: #A9AAA3;
  --chrome: #CFD0CB;  --chrome-edge: #B4B5AE;
  --accent: #E42313;  --accent-hover: #FF3A22;  --accent-press: #B81808;
  --on-accent: #FFFFFF;
}
[data-theme="night"] {
  --bg: #000000;  --surface: #161619;  --surface-sunk: #000000;
  --fg: #F4F3EF;  --fg-muted: #9A9A96;  --fg-faint: #5E5E5C;
  --border: #34343A;  --border-strong: #45454C;
  --chrome: #0E0E10;  --chrome-edge: #000000;
  --accent: #15D6C4;  --accent-hover: #3BE7D8;  --accent-press: #0FB2A3;
  --on-accent: #062B27;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000;  --surface: #161619;  --surface-sunk: #000000;
    --fg: #F4F3EF;  --fg-muted: #9A9A96;  --fg-faint: #5E5E5C;
    --border: #34343A;  --border-strong: #45454C;
    --chrome: #0E0E10;  --chrome-edge: #000000;
    --accent: #15D6C4;  --accent-hover: #3BE7D8;  --accent-press: #0FB2A3;
    --on-accent: #062B27;
  }
}

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-400.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/oswald-400.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/oswald-600.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/sora-400.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/sora-600.woff2) format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/bitter-italic-400.woff2) format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/bitter-italic-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibmplexmono-400.woff2) format('woff2'); }

* { box-sizing: border-box; border-radius: 0; }

html { background: var(--bg); }

body {
  margin: 0;
  font: 16px/1.5 'Sora', system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

code, pre, .mono { font-family: 'IBM Plex Mono', monospace; }
em, .emph { font-family: 'Bitter', serif; font-style: italic; color: var(--accent); }

h1, h2, h3 { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: 1.2; }

header.sd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-edge);
}
.wordmark {
  margin: 0;
  font: 400 1.5rem/1 'Anton', 'Oswald', sans-serif;
  transform: skewX(-7deg);
  letter-spacing: 0.01em;
  color: var(--fg);
}
/* The wordmark is ink, never accent — the brand rule — including when it
   is a link home, which it should be on every page. */
.wordmark a { color: inherit; }
a.wordmark:hover, .wordmark a:hover { color: var(--fg); }

main.sd {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.9rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.9rem;
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

button, .button {
  padding: 0.45rem 0.9rem;
  font: 600 0.9rem/1 'Oswald', sans-serif;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
button:hover, .button:hover { border-color: var(--accent); }
button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
button.primary:hover, .button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

input, select, textarea {
  font: 400 0.95rem/1.3 'IBM Plex Mono', monospace;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 0.45rem 0.6rem;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }

table { width: 100%; border-collapse: collapse; }
th {
  font: 600 0.85rem/1 'Oswald', sans-serif;
  text-align: left;
  color: var(--fg-muted);
  border-bottom: 2px solid var(--accent);
  padding: 0.5rem 0.4rem;
}
td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }

.theme {
  display: flex;
  justify-content: center;
  padding: 1.2rem 0 2rem;
}
.theme button {
  padding: 0.45rem 0.9rem;
  font: 400 0.8rem/1 'IBM Plex Mono', monospace;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-left-width: 0;
}
.theme button:first-child { border-left-width: 1px; }
.theme button svg { display: block; }
.theme button.active {
  color: var(--fg);
  background: var(--surface);
}