:root{--primary:#0cf;--primary-glow:#0cf6;--secondary:#f0f;--accent:#7c4dff;--bg-app:#0a0a0c;--bg-sidebar:#121216;--bg-panel:#18191e;--bg-header:#1c1c22;--border:#ffffff14;--text-main:#e2e8f0;--text-muted:#94a3b8;--panel-width:320px;--toolbar-width:64px;--header-height:56px;--status-height:28px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-main);width:100vw;height:100vh;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex}header{height:var(--header-height);background:var(--bg-header);border-bottom:1px solid var(--border);z-index:100;align-items:center;gap:20px;padding:0 12px;display:flex}.brand{letter-spacing:.5px;color:#fff;align-items:center;gap:8px;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800;display:flex}.brand span{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.top-menu{color:var(--text-muted);gap:16px;font-size:.85rem;display:flex}.top-menu div{cursor:pointer;transition:color .2s}.top-menu div:hover{color:var(--text-main)}.transport-controls{flex:1;justify-content:center;gap:8px;display:flex}.main-layout{flex:1;display:flex;overflow:hidden}.left-toolbar{width:var(--toolbar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;align-items:center;gap:12px;padding:10px 0;display:flex}.tool-btn{width:44px;height:44px;color:var(--text-muted);cursor:pointer;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.6rem;transition:all .2s;display:flex}.tool-btn span{opacity:.8;font-weight:500}.tool-btn:hover{color:var(--text-main);background:#ffffff0d}.tool-btn.active{background:var(--primary);color:#000;box-shadow:0 0 10px var(--primary-glow)}.editor-workspace{background:#111;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.ruler{background:var(--bg-panel);border-bottom:1px solid var(--border);height:24px;margin-left:60px;display:flex;position:relative;overflow:hidden}.ruler-tick{height:8px;color:var(--text-muted);border-left:1px solid #ffffff1a;padding-left:4px;font-size:9px;position:absolute;bottom:0}.ruler-tick.major{border-left-color:#ffffff4d;align-items:center;height:100%;display:flex}.canvas-container{flex:1;display:flex;position:relative;overflow:hidden}.piano-keys{background:var(--bg-sidebar);border-right:1px solid var(--border);z-index:10;width:60px}.key{border-bottom:1px solid #0003;justify-content:flex-end;align-items:center;height:20px;padding-right:4px;font-size:9px;font-weight:600;display:flex}.key.white{color:#000;background:#fff}.key.black{background:#1a1a1a}.viewport{cursor:crosshair;flex:1;position:relative;overflow:hidden}.h-scrollbar{background:var(--bg-sidebar);border-top:1px solid var(--border);width:100%;height:12px;position:relative}.h-scrollbar-thumb{cursor:grab;background:#fff3;border-radius:4px;height:8px;transition:background .2s;position:absolute;top:2px}.h-scrollbar-thumb:hover{background:#fff6}.h-scrollbar-thumb:active{cursor:grabbing;background:var(--primary)}canvas{display:block}.playhead{pointer-events:none;z-index:50;background:#ef4444;width:2px;display:none;position:absolute;top:0;bottom:0;box-shadow:0 0 10px #ef444480}.right-sidebar{width:var(--panel-width);background:var(--bg-panel);border-left:1px solid var(--border);flex-direction:column;display:flex}.panel{border-bottom:1px solid var(--border);flex-direction:column;flex:1;display:flex}.panel-header{text-transform:uppercase;height:32px;color:var(--text-muted);letter-spacing:.5px;background:#ffffff08;align-items:center;padding:0 12px;font-size:.75rem;font-weight:600;display:flex}.panel-content{flex:1;padding:12px;overflow-y:auto}.field{margin-bottom:12px}.field label{color:var(--text-muted);margin-bottom:4px;font-size:.75rem;display:block}input,select,textarea{border:1px solid var(--border);color:#fff;background:#09090b;border-radius:4px;outline:none;width:100%;padding:6px 8px;font-size:.85rem;transition:border-color .2s}input:focus,textarea:focus{border-color:var(--primary)}textarea{resize:vertical;min-height:100px;font-family:JetBrains Mono,monospace}.btn{border:1px solid var(--border);color:#fff;cursor:pointer;background:#27272a;border-radius:6px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;transition:all .2s;display:inline-flex}.btn:hover{background:#3f3f46}.btn-primary{background:var(--primary);color:#000;font-weight:600}.btn-primary:hover{background:#33d6ff}footer{height:var(--status-height);background:var(--bg-header);border-top:1px solid var(--border);color:var(--text-muted);justify-content:space-between;align-items:center;padding:0 12px;font-size:.7rem;display:flex}.splash{background:var(--bg-app);z-index:9999;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s ease-out,visibility .5s;display:flex;position:fixed;inset:0}.splash-logo{width:120px;height:120px;margin-bottom:24px;animation:2s ease-in-out infinite pulse}.loading-bar{background:#ffffff1a;border-radius:1px;width:200px;height:2px;position:relative;overflow:hidden}.loading-progress{background:linear-gradient(90deg,var(--primary),var(--secondary));width:50%;height:100%;animation:1.5s ease-in-out infinite loading;position:absolute;top:0;left:0}@keyframes pulse{0%,to{filter:drop-shadow(0 0 10px #0000);transform:scale(1)}50%{filter:drop-shadow(0 0 20px var(--primary-glow));transform:scale(1.05)}}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(200%)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;visibility:hidden;opacity:0;background:#000c;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{visibility:visible;opacity:1}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;width:400px;padding:24px;transition:transform .3s;transform:translateY(20px);box-shadow:0 20px 40px #00000080}.modal-overlay.active .modal{transform:translateY(0)}.modal-title{color:#fff;margin-bottom:16px;font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:700}.progress-container{background:#ffffff0d;border-radius:4px;width:100%;height:8px;margin:16px 0;overflow:hidden}.progress-fill{background:linear-gradient(90deg,var(--primary),var(--secondary));width:0%;height:100%;transition:width .1s}.import-options{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}