/* Orbit Drums: the game's own night sky. Space black, starlight text, gold for what matters,
   each world's accent on its own pictures; Unbounded for titles and IBM Plex for everything else,
   as in the app. The motif is the orb: thin rings, a gold point where an arm crosses. */

:root {
  --page-bg: #05060d; --page-text: #eef1ff; --page-muted: #8c95b8; --page-line: #232a46;
  --page-accent: #ffe9a8; --strong: #ffffff; --surface: #0a0c18; --raise: #121630;
  --code-bg: #0e1124; --code-text: #ffe9a8;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Unbounded", "IBM Plex Sans", sans-serif;
  --label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --orange: #ffb357; --crimson: #ff4d6d;
  --k-ink: #eef1ff; --k-accent: #2ef2ff; --k-c: #ffe14d; --k-b: #ff2e97; --k-ok: #3df5c8; --k-muted: #6a7396; --k-file: #8c95b8;
  color-scheme: dark;
}

/* A sparse starfield and a faint nebula behind everything. */
html { background:
  radial-gradient(1px 1px at 12% 18%, #ffffffb0 50%, transparent 51%),
  radial-gradient(1px 1px at 68% 9%, #ffffff90 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 84% 31%, #ffe9a8c0 50%, transparent 51%),
  radial-gradient(1px 1px at 31% 44%, #ffffff70 50%, transparent 51%),
  radial-gradient(1px 1px at 52% 71%, #9fd3ff90 50%, transparent 51%),
  radial-gradient(1px 1px at 91% 64%, #ffffff80 50%, transparent 51%),
  radial-gradient(1100px 520px at 80% -10%, #3a1d5e55, transparent 70%),
  radial-gradient(900px 500px at 5% 0%, #0f3a5c40, transparent 70%),
  var(--page-bg);
  background-repeat: no-repeat; background-attachment: fixed; }

.hero { position: relative; }
.kicker { max-width: none; position: relative; font-family: var(--mono); color: color-mix(in srgb, var(--page-accent) 60%, var(--page-muted)); }
.hero h1 { position: relative; font: 800 clamp(54px, 8.6vw, 112px)/0.92 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--strong); }
.hero h1 span { display: block; color: var(--orange); }
.hero .lede { position: relative; }

/* Three orbs turning slowly behind the title, each with a point riding its rim. */
.orbits { position: absolute; right: 0; top: 10px; width: min(360px, 40vw); aspect-ratio: 1; pointer-events: none; }
.orbits i { position: absolute; border-radius: 50%; border: 1.5px solid; inset: 0; }
.orbits i:nth-child(1) { border-color: #2ef2ff80; inset: 22%; }
.orbits i:nth-child(2) { border-color: #ffe14d70; inset: 11%; }
.orbits i:nth-child(3) { border-color: #ff2e9760; inset: 0; }
.orbits i::after { content: ""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--page-accent); box-shadow: 0 0 14px 3px #ffe9a880; }
@media (prefers-reduced-motion: no-preference) {
  .orbits i { animation: orbit 9s linear infinite; }
  .orbits i:nth-child(2) { animation-duration: 6.75s; } .orbits i:nth-child(3) { animation-duration: 5.4s; }
}
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .orbits { opacity: 0.35; } }

p.facts { display: flex; flex-wrap: wrap; gap: 4px 20px; position: relative; font: 500 14px/1.6 var(--mono); color: var(--page-muted); }
p.facts span { white-space: nowrap; }
p.facts b { color: var(--page-accent); font-weight: 600; }

/* The film: the run itself, framed like the game's results seal, a gold point at the top. */
.film { margin: 8px 0 0; position: relative; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; border-radius: 18px; background: #000;
  border: 1px solid var(--page-line); box-shadow: 0 34px 80px -34px #000, 0 0 0 1px #ff2e9724, 0 0 60px -20px #ff2e9760; }
.film::before { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%;
  background: var(--page-accent); box-shadow: 0 0 16px 4px #ffe9a890; z-index: 1; }
.film figcaption { margin-top: 12px; font-size: 14.5px; color: var(--page-muted); max-width: 78ch; }

.part > h2 { font: 700 clamp(26px, 3.2vw, 40px)/1.08 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
/* An orb before every heading: a ring with its point at the top. */
.part > h2::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin: 0 0.5em 0.1em 0; border-radius: 50%;
  border: 2px solid var(--page-accent); vertical-align: middle;
  background: radial-gradient(circle at 50% 0%, var(--page-accent) 0 3px, transparent 4px); }

/* Galleries: pictures from the game, each glowing in its world's colour. */
.gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); margin: 22px 0 26px; }
.card { margin: 0; background: var(--surface); border: 1px solid var(--page-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px -26px #000, 0 0 0 1px color-mix(in srgb, var(--glow, #fff) 14%, transparent); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 18px 40px -22px #000, 0 0 0 1px color-mix(in srgb, var(--glow, #fff) 50%, transparent), 0 0 34px -10px var(--glow, #fff); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; object-fit: cover; }
.card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 14px 12px; border-top: 1px solid var(--page-line); }
.card figcaption b { font: 600 13px/1.3 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--glow, var(--strong)); }
.card figcaption span { font: 400 13px/1.4 var(--mono); color: var(--page-muted); }

.fig { padding: 16px 12px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 14px; }
.fig figcaption { color: var(--page-muted); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
table { font-size: 15px; }
table caption { font: 600 12.5px/1.3 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--page-muted); text-align: left; }
table th[scope="row"] { font-family: var(--label); letter-spacing: 0.06em; }
table td.num { font-family: var(--mono); text-align: left; }
ul.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 26px; padding-left: 18px; }
ul.modes li { margin: 0; }
ul.modes li::marker { color: var(--page-accent); }
kbd { font: 500 12px/1 var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--raise); border: 1px solid #2f3760; border-bottom-width: 2px; color: var(--strong); white-space: nowrap; }