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

:root {
  --paper: #EFEFEC;
  --surface: #FBFBF9;
  --ink: #141518;
  --muted: #55585F;
  --line: #D3D4D0;
  --accent: #1D4ED8;
  --accent-ink: #FFFFFF;
  --link: #1E40AF;
  --frame: #070708;
  --caption: #FFFFFF;
  --frame-aspect: 480 / 258;

  --keys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='14'%3E%3Crect width='84' height='14' fill='%23FAFAF7'/%3E%3Cg fill='%23141518'%3E%3Crect x='11.5' width='1' height='14'/%3E%3Crect x='23.5' width='1' height='14'/%3E%3Crect x='35.5' width='1' height='14'/%3E%3Crect x='47.5' width='1' height='14'/%3E%3Crect x='59.5' width='1' height='14'/%3E%3Crect x='71.5' width='1' height='14'/%3E%3Crect x='83' width='1' height='14'/%3E%3Crect x='8' width='7' height='9' rx='1'/%3E%3Crect x='20' width='7' height='9' rx='1'/%3E%3Crect x='44' width='7' height='9' rx='1'/%3E%3Crect x='56' width='7' height='9' rx='1'/%3E%3Crect x='68' width='7' height='9' rx='1'/%3E%3C/g%3E%3C/svg%3E");

  --shades: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 1.5Q30 -.5 60 1.5V5L57.6 5.6 56.4 14Q55.8 18.5 50.5 18.5H40.5Q35.4 18.5 34.4 14L33 7Q30 5.6 27 7L25.6 14Q24.6 18.5 19.5 18.5H9.5Q4.2 18.5 3.6 14L2.4 5.6 0 5Z'/%3E%3C/svg%3E");

  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Archivo", "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: #0D0E11; --surface: #16181C; --ink: #F2F2EE; --muted: #A0A4AC; --line: #272A31;
    --accent: #5B8CFF; --accent-ink: #050A1F; --link: #93B4FF; --frame: #050506; --caption: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D0E11; --surface: #16181C; --ink: #F2F2EE; --muted: #A0A4AC; --line: #272A31;
  --accent: #5B8CFF; --accent-ink: #050A1F; --link: #93B4FF; --frame: #050506; --caption: #FFFFFF;
  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: var(--keys) 0 0 / 84px 14px repeat-x;
  border-bottom: 3px solid #141518;
}

.wordmark {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 7vw, 72px); line-height: .92; letter-spacing: .005em;
}
.wordmark .the { font-size: .5em; letter-spacing: .04em; vertical-align: .62em; margin-right: .08em; }
.wordmark mark { background: none; color: var(--accent); }
.wordmark::after {
  content: ""; display: inline-block; width: 1.05em; height: .35em; margin-left: .18em; vertical-align: .5em;
  background: currentColor; -webkit-mask: var(--shades) center / contain no-repeat; mask: var(--shades) center / contain no-repeat;
}

.frame .cap mark { color: #7FA6FF; }
.field input { font-family: var(--body); font-weight: 500; }

.results-head h2, .ptitle h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }

.results-head h2 q { font-style: normal; }
.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(--accent); }

.empty::after {
  content: "“We're on a mission from God.”"; display: block; margin-top: 12px;
  font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}

.loading .ring {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 10%, rgba(255,255,255,.28) 14%, transparent 19% 60%, rgba(255,255,255,.28) 64%, transparent 69%),
    radial-gradient(circle, #F2F2EE 0 1.6px, #3B6BEA 2.2px 7.5px, #101114 8px 9px, transparent 9.5px),
    repeating-radial-gradient(circle, #141518 0 1.2px, #23252B 1.4px 2.2px);
  animation-duration: 1.4s;
}