@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&family=IBM+Plex+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --paper: #E8E3D6;
  --surface: #F6F3EB;
  --ink: #23262B;
  --muted: #5C5E63;
  --line: #D2CBBA;
  --accent: #C4202B;
  --accent-ink: #FFF6F2;
  --link: #2B6585;
  --frame: #0D0E10;
  --caption: #FFFFFF;
  --frame-aspect: 480 / 258;
  --weave: rgba(70, 58, 34, .045);

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141619; --surface: #1C1F23; --ink: #ECE7DA; --muted: #9C9B96; --line: #2B2F34;
    --accent: #EE4A41; --accent-ink: #1E0605; --link: #7DB5D2; --frame: #07080A; --caption: #FFFFFF;
    --weave: rgba(255, 255, 255, .022); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141619; --surface: #1C1F23; --ink: #ECE7DA; --muted: #9C9B96; --line: #2B2F34;
  --accent: #EE4A41; --accent-ink: #1E0605; --link: #7DB5D2; --frame: #07080A; --caption: #FFFFFF;
  --weave: rgba(255, 255, 255, .022); color-scheme: dark;
}

.wordmark {
  font-family: var(--display); font-weight: 800; font-stretch: 75%;
  font-size: clamp(38px, 6.6vw, 66px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase;
}
.wordmark mark { background: none; color: var(--accent); }
.results-head h2, .ptitle h3 { font-stretch: 85%; letter-spacing: -.005em; }

.frame .cap mark { color: #EE4A41; }

body {
  background-image:
    repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 3px);
}

.results-head { padding-top: 10px; border-top: 3px double var(--line); }
.results-head::before {
  content: "TPS REPORT \00B7  COVER SHEET"; flex-basis: 100%; margin-bottom: -4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--muted);
}

.empty::after {
  content: "\201CI believe you have my stapler.\201D"; display: block; margin-top: 12px;
  font-family: var(--display); font-weight: 700; font-stretch: 85%; font-style: italic; color: var(--accent);
}

.loading .ring {
  position: relative; width: 40px; height: 40px; border: 3px solid #C4202B;
  background:
    radial-gradient(circle at 37% 38%, #23262B 0 7%, transparent 8%),
    radial-gradient(circle at 63% 38%, #23262B 0 7%, transparent 8%),
    #F2C230;
  box-shadow: inset 0 0 0 2px #FFF6F2;
  animation-duration: 1.6s;
}
.loading .ring::before {
  content: ""; position: absolute; left: 24%; right: 24%; top: 30%; height: 42%;
  border: 2.5px solid #23262B; border-color: transparent transparent #23262B; border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .loading .ring { animation: none; }
}