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

:root {
  --paper: #F3EEE2;
  --surface: #FFFDF7;
  --ink: #15264A;
  --muted: #535E73;
  --line: #DDD5C3;
  --accent: #D52A26;
  --accent-ink: #FFFFFF;
  --link: #1D6AAE;
  --frame: #0A0F1A;
  --caption: #FFFFFF;
  --stripe-1: #D52A26;
  --stripe-2: #EE7A1E;
  --stripe-3: #F2B933;
  --frame-aspect: 480 / 276;

  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --body: "Barlow", "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: #0C1426; --surface: #121D35; --ink: #F3EEE2; --muted: #A3ABBD; --line: #24304B;
    --accent: #FF5A4E; --accent-ink: #2A0605; --link: #7DB8EE; --frame: #05080F; --caption: #FFFFFF;
    --stripe-1: #E8433A; --stripe-2: #F28A2E; --stripe-3: #F5C651;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0C1426; --surface: #121D35; --ink: #F3EEE2; --muted: #A3ABBD; --line: #24304B;
  --accent: #FF5A4E; --accent-ink: #2A0605; --link: #7DB8EE; --frame: #05080F; --caption: #FFFFFF;
  --stripe-1: #E8433A; --stripe-2: #F28A2E; --stripe-3: #F5C651;
  color-scheme: dark;
}

body::before {
  content: ""; display: block; height: 14px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  background: linear-gradient(var(--stripe-1) 0 6px, transparent 6px 8px, var(--stripe-2) 8px 11px, transparent 11px 12px, var(--stripe-3) 12px 14px);
}

.wordmark {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 7.4vw, 76px); line-height: .95; letter-spacing: .01em;
  transform: skewX(-8deg); transform-origin: left bottom;
}
.wordmark mark { background: none; color: var(--accent); }

.field input, .results-head h2, .ptitle h3 { font-family: var(--body); }
.field input { font-weight: 600; }
.results-head h2, .ptitle h3 { font-weight: 800; letter-spacing: -.01em; }
.btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:not(.ghost):hover { background: var(--link); border-color: var(--link); }
.chip:not([aria-pressed="true"]):hover { border-color: var(--stripe-2); }

.player {
  background: linear-gradient(var(--stripe-1) 0 4px, transparent 4px 5px, var(--stripe-2) 5px 7px, transparent 7px 8px, var(--stripe-3) 8px 9px) top / 100% 9px no-repeat, var(--surface);
}

.empty::after {
  content: "“Surely you can’t be serious.” “I am serious. And don’t call me Shirley.”"; display: block; margin-top: 12px;
  font-family: var(--body); font-style: italic; font-weight: 600; font-size: 14px; color: var(--accent);
}