:root{color-scheme:dark;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%}#app{position:relative;background:#111;color:#eee;overflow:hidden}.viewer{position:absolute;inset:0}.viewer canvas{display:block;width:100%;height:100%}.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111;z-index:2;transition:opacity .5s ease}.hidden{display:none!important}.progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:#ffffff1a}.progress .bar{height:100%;width:0%;background:#4aa3ff;transition:width .1s linear}.fps{position:absolute;top:8px;left:8px;z-index:4;font:12px/1.4 ui-monospace,monospace;padding:2px 6px;background:#00000080;border-radius:4px;pointer-events:none}.controls{position:absolute;top:8px;right:8px;z-index:4;display:flex;gap:6px}.controls button{font:12px/1.4 system-ui,sans-serif;padding:6px 10px;background:#0000008c;color:#eee;border:1px solid #888;border-radius:6px;cursor:pointer}.controls button:hover{background:#000000bf;border-color:#4aa3ff}.controls button.active{background:#4aa3ff;color:#00264d;border-color:#4aa3ff}.dropzone{position:absolute;left:50%;bottom:24px;transform:translate(-50%);padding:10px 18px;border:1px dashed #555;border-radius:10px;background:#0006;font-size:13px;cursor:pointer;z-index:3}.dropzone.drag{border-color:#4aa3ff;background:#4aa3ff26}.dropzone p{margin:0}.dropzone .status{margin-top:6px;color:#ff7676;font-size:12px;min-height:0}.dropzone .status:empty{display:none}