:root{font-family:Arial,sans-serif;color:#e8edf2;background:#111b24;forced-color-adjust:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto}header{padding:22px 24px 16px}header span{color:#c6b67f;font-size:11px;letter-spacing:2px}h1{font-size:clamp(19px,3vw,27px);font-weight:500;margin:10px 0 0}.stage{position:relative;background:#fff;display:flex;justify-content:center;overflow:hidden}canvas{display:block;width:100%;max-height:72vh;object-fit:contain}#controls{padding:16px 24px 20px}.timeline{display:flex;gap:16px;align-items:center;margin-bottom:16px}#seek{flex:1;min-width:60px;accent-color:#d7bf78}output{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px}button,select{font:inherit;color:inherit;background:#253642;border:1px solid #425461;border-radius:8px;padding:10px 14px;cursor:pointer}button:hover{background:#354c5a}button:disabled{opacity:.5;cursor:wait}#start{background:#e1c884;color:#17202a;border-color:#e1c884;min-width:110px}label{display:flex;align-items:center;gap:6px;font-size:13px}input{accent-color:#d7bf78}#status,footer{font-size:12px;color:#a8b8c5}footer{margin-top:18px}#restore{position:absolute;bottom:12px;right:12px;opacity:.8}.compact header,.compact #controls{display:none}.compact canvas{max-height:100vh}main:fullscreen{max-width:none;width:100%;height:100%;overflow:auto}main:fullscreen .stage{height:calc(100vh - 240px)}main:fullscreen canvas{height:100%;width:100%;max-height:none}main.compact:fullscreen .stage{height:100vh}[hidden]{display:none!important}@media(max-width:540px){header,#controls{padding:14px}button{padding:9px;font-size:13px}}