@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Rubik:ital,wght@0,400..800;1,400..800&family=DM+Mono:wght@400;500&display=swap");

:root {
  --paper: #DDEAF3;
  --surface: #F6FAFD;
  --ink: #17253A;
  --muted: #4F6077;
  --line: #BCD0DF;
  --accent: #EE7A1C;
  --accent-ink: #2B1200;
  --link: #2B659A;
  --frame-aspect: 480 / 264;
  --frame: #0A0F15;
  --caption: #FFFFFF;

  --display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --cartoon: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --body: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E151D; --surface: #152029; --ink: #EAF1F7; --muted: #98A8B8; --line: #24323F;
    --accent: #FF9234; --accent-ink: #2B1200; --link: #8CC2EB; --frame: #05080B; --caption: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E151D; --surface: #152029; --ink: #EAF1F7; --muted: #98A8B8; --line: #24323F;
  --accent: #FF9234; --accent-ink: #2B1200; --link: #8CC2EB; --frame: #05080B; --caption: #FFFFFF;
  color-scheme: dark;
}

.wordmark, .ptitle h3, .doc-home {
  font-family: var(--cartoon); font-weight: 400; font-style: normal; letter-spacing: .01em;
}
.wordmark { font-size: clamp(36px, 6.2vw, 62px); line-height: .95; }
.wordmark mark { background: none; color: var(--accent); }
.results-head h2 { font-weight: 600; letter-spacing: -.01em; }