html,body,#app{width:100%;height:100%;margin:0;padding:0}body{background:#000;overflow:hidden}*{box-sizing:border-box}.player-page{background:#000;place-items:center;display:grid;position:fixed;inset:0}.player-stage{isolation:isolate;background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}#canvas{object-fit:contain;z-index:0;background:#000;width:100%;height:100%;display:block;position:absolute;inset:0;transform:translateZ(0)}.player-overlay{z-index:20;will-change:transform, opacity;backface-visibility:hidden;background:linear-gradient(#0000,#000000b8);align-items:center;gap:12px;padding:14px 16px;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateZ(0)}.player-btn{appearance:none;color:#fff;cursor:pointer;background:0 0;border:0;flex:none;place-items:center;width:28px;height:28px;margin:0;padding:0;display:inline-grid}.player-icon{fill:currentColor;width:20px;height:20px;display:block}.timeline-wrap{flex:auto;min-width:0}.time-slider{width:100%;margin:0}.time-readout{color:#fff;white-space:nowrap;flex:none;font:500 14px/1 system-ui,sans-serif}.time-sep{opacity:.65;margin:0 4px}.resolution-wrap{flex:none;position:relative}.resolution-btn{width:auto;min-width:40px;font:600 14px/1 system-ui,sans-serif}.resolution-menu{background:#141418f5;border-radius:8px;min-width:72px;position:absolute;bottom:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 8px 24px #00000059}