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

:root {
  --paper: #E3E8EB;
  --surface: #F6F8F9;
  --ink: #13202B;
  --muted: #4F5E69;
  --line: #C6D0D6;
  --accent: #C1201B;
  --accent-ink: #FFFFFF;
  --link: #1D6E6A;
  --sonar: #1D6E6A;
  --frame: #070C10;
  --caption: #FFFFFF;
  --frame-aspect: 480 / 208;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, 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: #08111A; --surface: #0F1B26; --ink: #E3E9ED; --muted: #8E9DA8; --line: #1E2D3A;
    --accent: #E8473C; --accent-ink: #1A0503; --link: #5FD3B4; --sonar: #5FD3B4; --frame: #03070A; --caption: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #08111A; --surface: #0F1B26; --ink: #E3E9ED; --muted: #8E9DA8; --line: #1E2D3A;
  --accent: #E8473C; --accent-ink: #1A0503; --link: #5FD3B4; --sonar: #5FD3B4; --frame: #03070A; --caption: #FFFFFF;
  color-scheme: dark;
}

body {
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 58px, color-mix(in srgb, var(--sonar) 9%, transparent) 58px 59px) 0 0 / 100% 620px no-repeat,
    var(--paper);
}
::selection { background: color-mix(in srgb, var(--link) 30%, transparent); }

.wordmark {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 6.6vw, 68px); line-height: .9; letter-spacing: .02em;
}
.wordmark .the { display: block; font-size: .42em; font-weight: 700; letter-spacing: .32em; color: var(--muted); margin-bottom: .12em; }
.wordmark mark { background: none; color: var(--accent); }

.results-head h2, .ptitle h3 { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.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: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.field input { font-family: var(--body); }
.field input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 22%, transparent); }

.empty::after {
  content: "“One ping only.”"; display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--sonar);
}

.loading .ring {
  border: 2px solid var(--sonar);
  background: radial-gradient(circle, var(--sonar) 0 3px, transparent 4px);
  filter: drop-shadow(0 0 6px var(--sonar));
  animation: sonar-ping 1.6s ease-out infinite;
}
:root .loading .ring { --sonar: #5FD3B4; }
@keyframes sonar-ping { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .loading .ring { animation: loading-pulse 1.6s ease-in-out infinite; }
}