@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Libre+Franklin:ital,wght@0,400..800;1,400..800&family=Courier+Prime:wght@400;700&display=swap");

:root {
  --paper: #F6EDC4;
  --surface: #FCF7DF;
  --ink: #2B1D16;
  --muted: #65554A;
  --line: #DFD3A6;
  --accent: #C8232C;
  --accent-ink: #FFF5EE;
  --link: #2D7262;
  --frame: #0F0B09;
  --caption: #FFFFFF;
  --frame-aspect: 480 / 268;
  --rule: rgba(64, 112, 178, .16);
  --margin: rgba(200, 35, 44, .38);
  --sheen: transparent;
  --binding: #8E2F24;
  --band: linear-gradient(var(--binding), var(--binding));
  --band-size: 100% 100%;
  --tread: rgba(43, 29, 22, .5);

  --display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #2A0F17; --surface: #36161F; --ink: #F7E9E6; --muted: #C9A5AB; --line: #4D2530;
    --accent: #FF5C69; --accent-ink: #2A0509; --link: #8FE0C4; --frame: #0C0507; --caption: #FFFFFF;
    --rule: transparent; --margin: transparent; --sheen: rgba(255, 150, 170, .09);
    --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M0 0h20v4a5 5 0 0 1-10 0 5 5 0 0 1-10 0z' fill='%23F3E4E0' fill-opacity='.9'/%3E%3Cpath d='M0 3a5 5 0 0 0 10 0 5 5 0 0 0 10 0' fill='none' stroke='%23C9A5AB' stroke-width='.8'/%3E%3C/svg%3E");
    --band-size: 20px 12px; --tread: rgba(247, 233, 230, .32);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #2A0F17; --surface: #36161F; --ink: #F7E9E6; --muted: #C9A5AB; --line: #4D2530;
  --accent: #FF5C69; --accent-ink: #2A0509; --link: #8FE0C4; --frame: #0C0507; --caption: #FFFFFF;
  --rule: transparent; --margin: transparent; --sheen: rgba(255, 150, 170, .09);
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M0 0h20v4a5 5 0 0 1-10 0 5 5 0 0 1-10 0z' fill='%23F3E4E0' fill-opacity='.9'/%3E%3Cpath d='M0 3a5 5 0 0 0 10 0 5 5 0 0 0 10 0' fill='none' stroke='%23C9A5AB' stroke-width='.8'/%3E%3C/svg%3E");
  --band-size: 20px 12px; --tread: rgba(247, 233, 230, .32);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(90% 520px at 28% 0, var(--sheen), transparent) no-repeat,
    radial-gradient(60% 420px at 85% 340px, var(--sheen), transparent) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
    var(--paper);
}

@media (min-width: 1330px) {
  html { background: var(--paper); }
  body {
    background:
      linear-gradient(90deg, transparent 0 40px, var(--margin) 40px 41px, transparent 41px 44px, var(--margin) 44px 45px, transparent 45px) no-repeat,
      radial-gradient(90% 520px at 28% 0, var(--sheen), transparent) no-repeat,
      radial-gradient(60% 420px at 85% 340px, var(--sheen), transparent) no-repeat,
      repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
      var(--paper);
  }
}

body::before {
  content: ""; display: block; height: 12px; margin-bottom: 4px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  background: var(--band) 0 0 / var(--band-size) repeat-x;
  border-bottom: 2px dotted color-mix(in srgb, var(--muted) 45%, transparent);
}
::selection { background: color-mix(in srgb, var(--link) 30%, transparent); }

.wordmark {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 5.6vw, 56px); line-height: .95; letter-spacing: -.01em;
}
.wordmark mark { background: none; color: var(--accent); }

.field input { font-family: var(--body); font-weight: 500; }
.results-head h2, .ptitle h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }

.results-head h2 q, .doc-home, .doc-email { font-style: normal; font-weight: 400; }
.chip:not([aria-pressed="true"]):hover { border-color: var(--accent); }

.empty::after {
  content: "“Nobody could answer that question.”"; display: block; margin-top: 12px;
  font-family: var(--display); font-size: 15px; color: var(--accent);
}

@media (min-width: 900px) {
  .player::before {
    content: "Defense Exhibit A"; position: absolute; top: -11px; right: 18px; z-index: 4;
    padding: 3px 9px 2px; border-radius: 3px; transform: rotate(-2.5deg);
    font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
    background: #F4D23C; color: #2B1D16; border: 1px solid #C9A920;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  }
}

.loading .ring {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background:
    radial-gradient(circle, #D9D6D2 0 5px, #8D8984 5.5px 7px, #C7C3BE 7.5px 11px, #1A1817 11.5px 13px, transparent 13.5px),
    repeating-conic-gradient(#121111 0 6deg, #2E2B29 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 13.5px, transparent 14px 15px, #000 15.5px);
  mask: radial-gradient(circle, #000 0 13.5px, transparent 14px 15px, #000 15.5px);
  animation-duration: 1s;
}

.note {
  border-top: 0; padding-top: 34px;
  background:
    repeating-linear-gradient(90deg, var(--tread) 0 5px, transparent 5px 8px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, var(--tread) 0 5px, transparent 5px 8px) 0 14px / 100% 8px no-repeat;
}