#frames-tool [hidden]{display:none!important}
#frames-tool canvas,#frames-video{display:block;width:100%;object-fit:contain;max-height: min(55vh,480px);background:#101827;border-radius:10px;margin:16px 0}
#frames-position{display:block;font-variant-numeric:tabular-nums;margin:12px 0}
#frames-info{overflow-wrap:anywhere}
#frames-error{color:#a61c30}
.frames-control-row{display:flex;align-items:center;gap:12px;overflow-x:auto;padding:4px;margin:12px -4px}
#frames-controls{flex-wrap:nowrap;margin:0;flex-shrink:0}
.frames-jump{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;margin:0;flex-shrink:0}
.frames-jump label{white-space:nowrap}
.frames-jump input{font:inherit;width:110px;padding:8px}
#frames-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.frames-card{min-width:0}
.frames-card img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#101827;border-radius:8px}
.frames-card p{font-variant-numeric:tabular-nums}
.frames-card .audio-actions{gap:8px}
.frames-card button{padding:8px 12px}
#frames-editor h2{font-size:20px;margin-top:28px}
@media(max-width:560px){.frames-control-row,.frames-jump,#frames-controls{gap:6px}.frames-jump label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.frames-jump input{width:64px;box-sizing:border-box}.frames-control-row button{padding:10px 8px}#frames-controls button{flex:none;min-width:38px;padding:10px 6px}#frames-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

#frames-stage{margin:16px 0;background:#101827;border-radius:10px;overflow:hidden;aspect-ratio:var(--frame-ratio,16/9);max-height:min(55vh,480px)}
#frames-stage canvas,#frames-stage video{width:100%;height:100%;max-height:none;margin:0;border-radius:0;object-fit:contain}