*{box-sizing:border-box;margin:0;padding:0}html,body{color:#e8e8f0;background:#0f0f1a;width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#controls{background:#161626;border-bottom:1px solid #2a2a40;align-items:center;gap:12px;height:44px;padding:0 12px;display:flex}.bpm-group{color:#8888a0;align-items:center;gap:8px;font-size:13px;display:flex}.bpm-group label{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.bpm-group input[type=range]{cursor:pointer;width:100px}#bpm-display{font-variant-numeric:tabular-nums;color:#fff;min-width:28px;font-weight:600}.btn-group{gap:6px;display:flex}.ctrl-btn{color:#b8b8d0;cursor:pointer;white-space:nowrap;background:#1a1a28;border:1px solid #2a2a40;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .1s}.ctrl-btn:hover{color:#fff;background:#252538;border-color:#3f3f5a}.ctrl-btn.playing{color:#1dd1a1;border-color:#1dd1a1}#main-layout{height:calc(100vh - 44px);position:relative}canvas#canvas{touch-action:none;width:100%;height:100%;display:block}#bottom-panel{z-index:100;background:#161626;border-top:1px solid #2a2a40;border-radius:16px 16px 0 0;max-height:55vh;padding:0 16px 20px;transition:transform .25s;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}#bottom-panel.open{transform:translateY(0)}#panel-handle{cursor:pointer;background:#3f3f5a;border-radius:2px;width:40px;height:4px;margin:10px auto 12px}#panel-content{flex-direction:column;gap:10px;display:flex}.fp-header{align-items:center;gap:8px;margin-bottom:2px;display:flex}.sp-track-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.sp-field{align-items:center;gap:8px;display:flex}.sp-field label{color:#8888a0;text-transform:uppercase;letter-spacing:.3px;min-width:52px;font-size:11px;font-weight:600}.sp-field select,.sp-field input[type=range]{color:#e8e8f0;background:#0f0f1a;border:1px solid #2a2a40;border-radius:4px;flex:1;padding:4px 6px;font-size:12px}.sp-field select:focus{outline:1px solid #3f3f5a}.sp-field input[type=range]{border:none;height:20px;padding:0}.sp-field .sp-val{font-variant-numeric:tabular-nums;color:#8888a0;text-align:right;min-width:36px;font-size:11px}.sp-presets{flex-wrap:wrap;gap:6px;display:flex}.sp-presets button{color:#b8b8d0;cursor:pointer;background:#0f0f1a;border:1px solid #2a2a40;border-radius:4px;padding:3px 10px;font-size:11px}.sp-presets button:hover{color:#fff;background:#252538}.sp-actions{gap:8px;display:flex}.sp-actions button{color:#b8b8d0;cursor:pointer;background:#1a1a28;border:1px solid #2a2a40;border-radius:6px;flex:1;padding:8px;font-size:12px;font-weight:600}.sp-actions button:hover{color:#fff;background:#252538}.project-btn{text-overflow:ellipsis;white-space:nowrap;max-width:160px;overflow:hidden}.project-btn #project-name{pointer-events:none}.project-panel{flex-direction:column;gap:10px;display:flex}.project-panel-header{justify-content:space-between;align-items:center;display:flex}.project-panel-header h2{color:#e8e8f0;margin:0;font-size:15px;font-weight:700}.project-new-btn{color:#1dd1a1;cursor:pointer;background:0 0;border:1px solid #1dd1a1;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600}.project-new-btn:hover{background:#1dd1a11f}.project-list{flex-direction:column;gap:4px;max-height:40vh;display:flex;overflow-y:auto}.project-row{cursor:pointer;background:#0f0f1a;border:1px solid #2a2a40;border-radius:8px;align-items:center;gap:8px;padding:10px 12px;transition:background .1s;display:flex}.project-row:hover{background:#1a1a2e}.project-row.current{background:#1dd1a10f;border-color:#1dd1a1}.project-row-name{color:#e8e8f0;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;font-weight:600;overflow:hidden}.project-row-meta{color:#666680;flex-shrink:0;font-size:11px}.project-row-delete{color:#ff6b6b;cursor:pointer;background:0 0;border:1px solid #2a2a40;border-radius:4px;flex-shrink:0;padding:4px 8px;font-size:12px}.project-row-delete:hover{background:#ff6b6b1f;border-color:#ff6b6b}.project-empty{text-align:center;color:#666680;padding:20px 0;font-size:13px}.sp-section{flex-direction:column;gap:6px;display:flex}.sp-section h2{text-transform:uppercase;letter-spacing:.8px;color:#666680;margin:0;font-size:13px;font-weight:700}