:root {
  color-scheme: dark;
  --ink: #08082e;
  --blue: #385ce8;
  --cyan: #7de8ff;
  --paper: #efefff;
  --gold: #ffd760;
  font: 500 14px/1.6 'JetBrains Mono', monospace;
  color: var(--paper);
  background: #000;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: wait; }
a { color: var(--cyan); text-underline-offset: .25em; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
#player { position: relative; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; background: #000; overflow: hidden; }
#out { display: block; width: min(100vw, 177.7778vh); width: min(100vw, 177.7778dvh); height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.portrait #out { width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); aspect-ratio: 9 / 16; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The loader is painted into the canvas by the demo's own engine (src/live-loader.js). The start button is an
   invisible full-screen click target; its text stays for screen readers. */
#start { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; font-size: 0; cursor: pointer; }
#start:disabled { cursor: progress; }
#start:focus-visible { outline: 2px solid var(--cyan); outline-offset: -6px; }
#loader { position: absolute; inset: auto 0 0 0; z-index: 2; pointer-events: none; }
.dosbar { display: flex; justify-content: center; text-transform: uppercase; flex-wrap: wrap; gap: 4px 22px; width: fit-content; max-width: calc(100% - 16px); margin: 0 auto max(10px, env(safe-area-inset-bottom)); padding: 4px 12px; background: #000c; border-top: 1px solid #3546b8; pointer-events: auto; font: 500 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .06em; }
.dosbar a { color: #7de8ff; text-decoration: none; }
.dosbar a:hover, .dosbar a:focus-visible { color: #fff; text-decoration: underline; }
#controls { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; max-width: calc(100% - 16px); background: #08082ef2; border: 1px solid var(--cyan); transition: opacity .15s; }
#controls button { background: transparent; color: #fff; border: 0; min-height: 42px; padding: 6px 12px; }
#controls button:hover { background: var(--blue); }
#time { white-space: nowrap; padding: 0 8px; color: var(--cyan); font-size: 12px; }
#player[data-phase="playing"].idle #controls { opacity: 0; pointer-events: none; }
#player[data-phase="playing"].idle #controls:focus-within { opacity: 1; pointer-events: auto; }
#player[data-phase="playing"].idle { cursor: none; }
noscript { position: absolute; inset: auto 16px 16px; padding: 12px; background: #000; text-align: center; }
@media (max-width: 520px) {
  .dosbar { gap: 2px 14px; font-size: 10px; }
  #controls { gap: 0; }
  #controls button { padding: 6px 9px; font-size: 11px; }
  #time { padding: 0 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { #controls { transition: none; } }