:root { font-family: system-ui, sans-serif; color: #fff; background: #000; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.screen { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; background: #000; overflow: hidden; }
.screen canvas, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
[hidden] { display: none !important; }
#playback-toggle { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(64px, 9vmin, 88px); aspect-ratio: 1; padding: 0; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; color: #fff; background: rgb(0 0 0 / 55%); box-shadow: 0 4px 24px rgb(0 0 0 / 25%); backdrop-filter: blur(6px); cursor: pointer; touch-action: manipulation; transition: opacity .18s ease, background .18s ease; }
#playback-toggle svg { width: 40%; height: 40%; fill: currentColor; }
#icon-play { margin-left: 4px; }
#playback-toggle:hover { background: rgb(0 0 0 / 75%); }
#playback-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.screen[data-state="playing"]:not(.controls-visible) { cursor: none; }
.screen[data-state="playing"]:not(.controls-visible) #playback-toggle:not(:focus-visible) { opacity: 0; pointer-events: none; }
#status { position: absolute; z-index: 1; top: calc(50% + 58px); left: 50%; transform: translateX(-50%); width: min(42rem, calc(100% - 32px)); margin: 0; padding: 8px 12px; border-radius: 6px; color: #fff; background: rgb(0 0 0 / 70%); font-size: 14px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; opacity: 0; pointer-events: none; }
.screen[data-state="loading"] #status, .screen[data-state="error"] #status { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #playback-toggle { transition: none; } }