/* Color tokens and type (STYLE 3 and 4). No other colors, no gradients, zero border-radius. */
:root {
  --bg: #0A1214;
  --panel: #0E1C1F;
  --rule: #3CA89C;
  --text: #4FE3D1;
  --label: #79C7C5;
  --muted: #9BB0AD;
  --verified: #4FE3D1;
  --contradicted: #FF7A6B;
  --missing: #F2C14E;
  --unverifiable: #9BB0AD;
  --head: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Lucida Console", monospace;
}

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

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

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, .label, .btn, .prompt, .meta, .lineno, .strip-title, .chip, .hint, .none, .status-fill, .state-text, .unsure {
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

h1 { font-size: 19px; margin: 0; text-shadow: 0 0 4px rgba(79, 227, 209, 0.35); }
h2 { font-size: 16px; margin: 0; }

.label { font-size: 12px; color: var(--label); }
.value { font-family: var(--mono); font-size: 15px; color: var(--text); overflow-wrap: anywhere; }

a { color: var(--text); }

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

.noscript { color: var(--missing); font-family: var(--head); letter-spacing: 0.08em; text-align: center; }

/* Optional scanlines: one static overlay, very faint, never above text weight. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(79, 227, 209, 0.06) 0, rgba(79, 227, 209, 0.06) 1px, transparent 1px, transparent 3px);
  opacity: 0.6;
}

@media (max-width: 600px) {
  body::before { opacity: 0.25; } /* lighter scanlines on small screens, where text is already small */
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}