/* Served as a separate file (not an inline <style>) so the Content-Security-Policy
   can be style-src 'self' with no 'unsafe-inline'. */
:root {
  --bg: #000;
  --fg: #e4e4e4;
  --muted: #8a8a8a;
  --accent: #4f7cff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--bg);
  color: var(--fg);
  /* system-ui is the standard CSS keyword for the platform UI font, and it is
     what -apple-system and BlinkMacSystemFont existed to approximate before it
     shipped. Those two are vendor extensions, which the W3C CSS validator
     reports as a warning; system-ui replaces both with no visible difference on
     any browser released since ~2018. "Segoe UI" and Roboto stay as ordinary
     named fallbacks for anything that does not implement the keyword. */
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  padding: 2rem 1rem;
}
.video {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
}
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  align-items: center;
}
.links a {
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.links a:hover,
.links a:focus-visible {
  color: var(--accent);
  transform: translateY(-2px);
}
.links svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.badges {
  gap: 1.25rem;
}
.badges svg {
  width: 22px;
  height: 22px;
}
.badge-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .links a { transition: none; }
}