:root {
  color-scheme: dark;

  /* colour */
  --color-ink: #030708;
  --color-graphite: #10191c;
  --color-acquisition: #61f3ff;
  --color-copy: #f4fbfa;
  --color-copy-muted: #a5b4b6;
  --color-copy-soft: #cad4d5;
  --color-location: #c8fbff;
  --color-control-line: #b7c7c788;
  --color-control-surface: #06101299;
  --color-event-line: #8da0a377;
  --color-event-surface: #07101288;
  --color-event-copy: #c2cecf;

  /* typography: Courier New is the immutable product face */
  --font-product: "Courier New", monospace;
  --size-player-title: 27px;
  --size-surface-title: 26px;
  --size-threshold-title: 20px;
  --weight-title: 700;
  --line-title: 1.05;
  --font-copy: 11px/1.5 var(--font-product);
  --font-micro: 9px/1.2 var(--font-product);
  --tracking-threshold: -.04em;
  --tracking-player: -.06em;
  --tracking-micro: .1em;

  /* geometry, spacing and safe areas */
  --safe-inline: max(18px, env(safe-area-inset-left));
  --safe-top: max(20px, env(safe-area-inset-top));
  --safe-bottom: max(20px, env(safe-area-inset-bottom));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --touch-min: 44px;
  --size-sigil-control: 74px;
  --size-sigil-art: 64px;
  --size-medallion: 50px;
  --size-character-control: 58px;
  --size-event-control: 46px;
  --radius-round: 50%;

  /* layering */
  --z-scene: 0;
  --z-mode: 3;
  --z-product-control: 4;
  --z-qa: 20;

  /* focus, contrast protection and motion */
  --focus-outline: 3px solid var(--color-acquisition);
  --focus-offset: 3px;
  --copy-shadow: 0 1px 2px rgba(0, 0, 0, .72);
  --scan-protection: radial-gradient(ellipse 48% 18% at 50% 50%, rgba(0,4,5,.72) 0%, rgba(0,4,5,.44) 38%, rgba(0,4,5,0) 78%);
  --player-protection: linear-gradient(to bottom, rgba(0,4,5,0) 0%, rgba(0,4,5,.16) 34%, rgba(0,4,5,.68) 72%, rgba(0,4,5,.92) 100%);
  --player-metadata-protection: linear-gradient(to bottom, rgba(16,25,28,0) 0%, rgba(16,25,28,.68) 12%, rgba(16,25,28,.78) 100%);
  --motion-reveal-duration: 1.2s;
  --motion-reveal-delay: 1.2s;
  --motion-threshold-duration: 1.6s;
}

@media (max-width: 340px) {
  :root {
    --safe-inline: max(12px, env(safe-area-inset-left));
    --size-character-control: 51px;
    --size-medallion: 46px;
  }
}