:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#111318;color:#e8eaf0}
*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:24px}
header{display:flex;align-items:center;gap:20px;margin-bottom:18px}h1{font-size:28px;margin:0;letter-spacing:-1px}
header span{color:#939bab;font-size:13px}
button{font:inherit;border:1px solid #41495b;border-radius:6px;padding:9px 15px;background:#30394c;color:white;cursor:pointer}
button:disabled{opacity:.45;cursor:default}button:hover:enabled{background:#42516f}
#status{font-size:13px;color:#9ca8bc;min-height:20px}.error{color:#ffac9e!important}
.screen{display:grid;place-items:center;background:black;border-radius:8px;overflow:hidden;min-height:440px}
canvas{display:block;width:min(100%,960px);height:auto;image-rendering:pixelated;outline:none;background:black}
canvas:fullscreen{width:100%;height:100%;object-fit:contain;background:black}
footer{display:flex;align-items:center;gap:22px;padding:16px 0;color:#a7b1c2;font-size:13px;flex-wrap:wrap}
footer button{font-size:13px}#sound{margin-left:auto}details{color:#8895aa;font-size:12px}pre{white-space:pre-wrap}
@media(max-width:650px){main{padding:12px}header{gap:12px}header span{font-size:11px}.screen{min-height:0}footer{gap:12px}}