body{margin:0;overflow:hidden;background-color:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}canvas{display:block;width:100vw;height:100vh}#ui{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:340px;background:#0f0f14d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:2.5rem;border-radius:16px;border:1px solid rgba(255,255,255,.1);z-index:10;text-align:center;box-shadow:0 25px 50px -12px #00000080;transition:opacity .4s ease,transform .4s ease}#ui.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-45%)}h1{margin:0 0 .5rem;font-size:2.2rem;font-weight:800;letter-spacing:-.02em}.subtitle{font-size:.9rem;color:#94a3b8;margin-bottom:2rem;font-family:monospace}button{background:#fff;color:#000;border:none;padding:12px 20px;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;margin-bottom:1rem;width:100%;transition:background .2s,transform .1s}button:hover{background:#e2e8f0}button:active{transform:scale(.98)}.btn-system{background:#ef4444;color:#fff}.btn-system:hover{background:#dc2626}.upload-box{margin-top:1rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem}input[type=file]{width:100%;font-size:.85rem;color:#94a3b8}input[type=file]::file-selector-button{background:#334155;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;margin-right:10px;transition:background .2s}input[type=file]::file-selector-button:hover{background:#475569}#status-overlay{position:absolute;bottom:25px;left:25px;color:#ffffffe6;pointer-events:none;z-index:5;text-shadow:0px 2px 4px rgba(0,0,0,.8);font-family:monospace;transition:opacity .3s ease}#status-overlay.hidden{opacity:0}#preset-browser{position:absolute;top:20%;left:50%;transform:translate(-50%);width:600px;max-width:90vw;background:#0f0f14f2;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:12px;border:1px solid rgba(255,255,255,.15);z-index:20;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #000000b3;transition:opacity .2s ease,transform .2s ease}#preset-browser.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-10px)}#preset-search{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-size:1.2rem;padding:16px 20px;width:100%;box-sizing:border-box;outline:none;font-family:inherit}#preset-search::placeholder{color:#64748b}#preset-list{max-height:400px;overflow-y:auto;padding:8px 0}.preset-item{padding:10px 20px;cursor:pointer;color:#cbd5e1;font-size:.95rem;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-item:hover,.preset-item.selected{background:#ffffff1a;color:#fff;border-left:3px solid #4ade80}#preset-list::-webkit-scrollbar{width:8px}#preset-list::-webkit-scrollbar-track{background:transparent}#preset-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}#preset-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}#bottom-bar{position:absolute;bottom:0;left:0;width:100%;background:#0f0f1499;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);z-index:15;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease;padding-bottom:env(safe-area-inset-bottom)}#bottom-bar.idle-hidden{transform:translateY(100%);opacity:0;pointer-events:none}.bar-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:16px 24px;gap:20px}#bar-logo{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;color:#ffffff4d;flex:1;text-align:right;display:none}#bar-info{flex:1;cursor:pointer;min-width:0}#bar-title{font-size:1.1rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.icon-btn{background:transparent;border:none;color:#94a3b8;padding:8px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s,transform .1s;width:auto;margin:0}.icon-btn svg{width:24px;height:24px}.icon-btn:hover{color:#fff;background:#ffffff1a}.icon-btn:active{transform:scale(.9)}#btn-playpause svg{width:28px;height:28px}#btn-search{display:none}svg.hidden{display:none}@media (max-width: 768px){.bar-content{flex-direction:column;padding:12px 16px 20px;gap:12px}#bar-info{text-align:center;width:100%}#bar-title{font-size:1rem}.bar-controls{width:100%;justify-content:space-between;gap:0;padding:0 10px}.icon-btn svg{width:28px;height:28px}#btn-playpause svg{width:32px;height:32px}#btn-search{display:flex}#preset-browser{top:10%;width:95vw}}