/* q0id theme: same tokens as the site's shared stylesheet. */
:root {
  --bg: #0b0808;
  --panel: #130c0c;
  --line: #3b1a1a;
  --red: #b3201f;
  --red-2: #e0372b;
  --red-press: #c42724;
  --text: #e8ddd8;
  --on-red: #fff4f1;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 13px/1.4 sans-serif; }
[hidden] { display: none !important; }
.web-player { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.stage { position: relative; min-height: 0; min-width: 0; flex: 1; display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.poster { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: .65; }
canvas { display: block; max-width: 100%; max-height: 100%; outline: none; touch-action: none; }
canvas:focus-visible { outline: 1px solid var(--red-2); outline-offset: -1px; }
.start { z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; color: var(--on-red); background: var(--red); cursor: pointer; box-shadow: 0 6px 30px #0008; transition: background .12s, transform .12s; }
.start svg { width: 40px; height: 40px; fill: currentColor; }
.start:hover { background: var(--red-press); }
.start:active { transform: scale(.94); }
.start:focus-visible { outline: 2px solid var(--on-red); outline-offset: 4px; }
.start:disabled { cursor: wait; opacity: .6; }
.status { position: absolute; z-index: 2; margin: 0; padding: 16px 20px; max-width: 90%; background: #0e0909f2; border: 1px solid var(--line); text-align: center; }
.transport { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; width: 100%; height: 73px; background: var(--panel); transform: translateY(100%); transition: transform .22s cubic-bezier(.22, 1, .36, 1); pointer-events: none; box-shadow: 0 -10px 30px #0004; }
.controls-visible .transport { transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .transport { transition: none; } }
.transport canvas { width: 100%; height: 100%; }
.web-player:fullscreen { background: var(--bg); }

.web-player.has-controls:not(.controls-visible) [data-canvas] { cursor: none; }