:root { color-scheme: dark; --bg: #111214; --fg: #d6d8da; --dim: #8a8e93; --line: #2a2c30; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
#video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
  outline: none; image-rendering: auto; touch-action: none; user-select: none; }
#overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: rgba(17, 18, 20, .82); pointer-events: none; text-align: center; padding: 24px; }
#overlay[hidden] { display: none; }
#overlay-title { font-size: 15px; }
#overlay-detail { color: var(--dim); max-width: 520px; }
#stats { position: fixed; top: 8px; left: 8px; min-width: 190px; padding: 8px 10px; background: rgba(17, 18, 20, .85);
  border: 1px solid var(--line); border-radius: 4px; font: 12px/1.5 ui-monospace, Menlo, monospace; pointer-events: none; }
#stats[hidden] { display: none; }
#stats div { display: flex; justify-content: space-between; gap: 16px; }
#stats div span:first-child { color: var(--dim); }
#bar { position: fixed; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; opacity: .25; transition: opacity .15s; }
#bar:hover, #bar:focus-within { opacity: 1; }
#label { color: var(--dim); margin-right: 6px; }
button { font: inherit; color: var(--fg); background: #1b1d20; border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; cursor: pointer; }
button:hover { background: #24272b; }
button:focus-visible { outline: 1px solid var(--dim); }