:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101827;color:#e4eaf3}*{box-sizing:border-box}body{margin:0;padding:20px}header,main{max-width:1100px;margin:0 auto}header{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:18px}header a{color:#e4c28f;font-size:14px}h1{font-size:20px;margin:0}header span,.note{color:#a8b7cb;font-size:12px}#player-area{background:#070c15;max-width:960px;margin:0 auto}canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;outline:none}#player-area:fullscreen{width:100%;height:100%;max-width:none;display:flex;align-items:center;justify-content:center}#player-area:fullscreen canvas{width:100%;height:100%;object-fit:contain}.controls{display:flex;gap:12px;padding-top:18px}button{background:#e4c28f;color:#142033;border:0;border-radius:4px;padding:11px 18px;font:600 14px system-ui;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #e4c28f;outline-offset:4px}progress{width:100%;max-width:500px;accent-color:#e4c28f}#status{font-size:14px}#error{color:#ffb4a8;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){body{padding:12px}header{gap:14px}header span{width:100%}}