*,*:before,*:after{box-sizing:border-box}:root{--control-bar-height: 44px}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#121212;color:#e8e8e8;min-height:100vh;overflow:hidden}#app{position:relative;width:100vw;height:100vh}.canvas-container{position:absolute;inset:0 0 var(--control-bar-height) 0;background:#1e1e1e}.canvas-container canvas{display:block;width:100%;height:100%}.control-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;height:var(--control-bar-height);background:#181818d1;border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.control-bar-inner{display:flex;align-items:center;gap:.5rem;height:100%;padding:0 .65rem;font-size:.78rem}.app-title{flex-shrink:0;font-size:.75rem;font-weight:600;color:#b0b0b0;margin-right:.25rem;white-space:nowrap}.upload-zone{display:flex;align-items:center;gap:.35rem;flex-shrink:0;padding:.2rem .45rem;border:1px dashed rgba(255,255,255,.22);border-radius:5px;cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap}.upload-zone:hover,.upload-zone.drag-over{border-color:#6b8afdb3;background:#6b8afd1a}.upload-label{color:#9a9a9a;font-size:.72rem}.toolbar-label{flex-shrink:0;font-size:.72rem;color:#888}.animation-select{min-width:110px;max-width:160px;padding:.22rem .4rem;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:#1e1e1ee6;color:#e8e8e8;font-size:.75rem}.animation-select:disabled{opacity:.45}.btn{padding:.28rem .65rem;border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap}.btn-sm{padding:.22rem .5rem;font-size:.72rem}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#4a7cffe6;color:#fff}.btn-primary:hover:not(:disabled){background:#3d6de6}.btn-danger{background:#c94a4ae6;color:#fff}.btn-danger:hover:not(:disabled){background:#b33e3e}.btn-secondary{background:#3c3c3ce6;color:#e0e0e0}.btn-secondary:hover{background:#505050f2}.status{margin-left:auto;min-width:0;font-size:.7rem;color:#7a7a7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-error{color:#e88}@media(max-width:720px){:root{--control-bar-height: 72px}.control-bar{height:var(--control-bar-height)}.control-bar-inner{flex-wrap:wrap;align-content:center;padding:.35rem .5rem;gap:.35rem}.app-title{width:100%;margin-right:0}.status{margin-left:0;width:100%;order:10}.animation-select{flex:1;min-width:80px}}