:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #080808; color: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { width: min(100%, 1100px); padding: 24px; }
.brand { margin: 0 0 20px; color: #a4a4a4; font-size: 15px; font-weight: 500; letter-spacing: .12em; }
.player { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
video { display: block; width: 100%; max-height: 78svh; aspect-ratio: 16 / 9; object-fit: contain; }
.start { position: absolute; inset: 0 0 58px; display: grid; place-items: center; background: linear-gradient(transparent, #0006); pointer-events: none; }
.start[hidden] { display: none; }
button { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 16px 25px; border: 1px solid #ffffff30; border-radius: 999px; background: #f6f6f6; color: #111; font: 600 17px system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 30px #0005; }
button:hover { background: #fff; }
button:focus-visible { outline: 3px solid #9cc9ff; outline-offset: 5px; }
.message { min-height: 1.5em; margin: 14px 0 0; color: #aaa; font-size: 14px; line-height: 1.5; text-align: center; }
@media (max-width: 600px) { main { padding: 16px 0; } .brand { padding: 0 18px; } .player { border-radius: 0; } .message { padding: 0 18px; } button { padding: 13px 21px; font-size: 16px; } }