:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.ground-highlight{animation:2s ease-in-out infinite ground-pulse;background:#38bdf866!important;border:1px solid #38bdf8cc!important;box-shadow:0 0 12px #38bdf899!important}@keyframes ground-pulse{0%{transform:scale(1);box-shadow:0 0 5px #38bdf866}50%{transform:scale(1.1);box-shadow:0 0 15px #38bdf8cc}to{transform:scale(1);box-shadow:0 0 5px #38bdf866}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex;overflow:hidden}#root{width:100vw;height:100vh;margin:0;padding:0}.glass-panel{-webkit-backdrop-filter:blur(12px);background:#1e293bb3;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003;border-radius:4px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}input[type=range]{appearance:none;cursor:pointer;background:0 0;border:none;outline:none;width:100%;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(#334155 0%,#1e293b 45%,#0f172a 100%) padding-box padding-box;border-radius:7px;outline:none;width:32px;height:14px;margin-top:-5.5px;transition:all .2s;box-shadow:0 2px 4px #00000080,inset 0 1px #ffffff1a,inset 0 -1px 1px #0009;border:none!important}input[type=range]::-moz-range-thumb{cursor:pointer;background:linear-gradient(#f8fafc 0%,#cbd5e1 20%,#94a3b8 50%,#64748b 85%,#1e293b 100%);border-radius:7px;outline:none;width:32px;height:14px;box-shadow:0 3px 6px #0006,inset 0 1px #fff9,inset 0 -1.5px 1px #000c;border:none!important}input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(#fff 0%,#e2e8f0 20%,#cbd5e1 50%,#94a3b8 80%,#64748b 100%);box-shadow:0 4px 10px #0009,inset 0 1px #fffc,inset 0 -1px 1px #000000b3}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#0006;border:none;border-radius:2px;outline:none;width:100%;height:3px}.slider-wrapper{flex-grow:1;align-items:center;height:18px;display:flex;position:relative}.slider-value{pointer-events:none;color:#fff;text-shadow:0 1px 2px #00000080;text-align:center;min-width:16px;font-size:.55rem;font-weight:500;position:absolute;top:50%;transform:translate(-50%,-50%)}input[type=range]:focus{outline:none}button{color:#fff;cursor:pointer;background-color:#ffffff1a;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:all .2s;display:flex}button:hover{background-color:#fff3;border-color:#ffffff4d}button:active{transform:scale(.98)}button.primary{color:#fff;background-color:#0ea5e9;border:none}button.primary:hover{background-color:#0284c7}button:disabled{opacity:.3;cursor:not-allowed}.timeline-btn{color:#fde68a;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#2a201a33;border:1px solid #4a3a2e80;border-radius:6px;gap:4px;min-width:28px;height:28px;padding:4px 8px;font-size:.75rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.timeline-btn:hover:not(:disabled){color:#fff;background:#352d26;border-color:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px #0006}.timeline-btn.active{color:#fff;background:#b45309;border-color:#fcd34d}.timeline-btn.blue{color:#7dd3fc;background:#38bdf81a;border:1px solid #38bdf880}.timeline-btn.purple{color:#c4b5fd;background:#8b5cf626;border:1px solid #8b5cf680}.timeline-btn.red{color:#fca5a5;background:#ef44441a;border:1px solid #ef444480}.timeline-btn.yellow{color:#fbbf24;background:#fbbf241a;border:1px solid #fbbf2480}.timeline-btn.unsaved{z-index:10;animation:2s ease-in-out infinite glowing-save;color:#fde047!important;background:#fde04733!important;border:1px solid #fde047!important}@keyframes glowing-save{0%{border-color:#fde04766;box-shadow:0 0 5px #fde04766}50%{border-color:#fde047;transform:scale(1.1);box-shadow:0 0 15px #fde047,0 0 25px #fde04780}to{border-color:#fde04766;box-shadow:0 0 5px #fde04766}}.app-container{width:100vw;height:100vh;display:flex;position:relative}.canvas-container{z-index:1;flex-grow:1;height:100%;position:relative}.sidebar{z-index:10;box-sizing:border-box;flex-direction:column;width:136px;max-height:calc(100vh - 8px);margin:4px;padding:4px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;overflow-y:auto}.sidebar.minimized{background:#0f172af2;max-height:40px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.sidebar-left{left:0}.sidebar-studio{width:170px;right:144px}.sidebar-core{left:144px}.sidebar-right{right:0}.timeline-container{z-index:60;pointer-events:none;justify-content:center;padding:12px;display:flex;position:absolute;bottom:0;left:0;right:0}.timeline-panel{pointer-events:auto;-webkit-backdrop-filter:blur(16px);background:linear-gradient(135deg,#352d2699 0%,#241f1aa6 50%,#1a1612b3 100%);border:1px solid #4a3a2e99;border-radius:16px;flex-direction:column;gap:8px;width:100%;max-width:none;padding:12px 20px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 25px 50px -12px #000000b3,inset 0 1px #ffffff08}.controls-section{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.controls-section h3{color:#38bdf8;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #ffffff0d;margin:0 0 4px;padding-bottom:2px;font-size:.75rem;font-weight:500}.control-group{background-color:#ffffff05;border:1px solid #0000;border-radius:4px;flex-direction:column;gap:1px;padding:3px 5px;transition:all .2s;display:flex}.control-group.glowing{background:#ea580c1a;border:1px solid #ea580c4d;transform:translate(4px);box-shadow:0 0 12px #ea580c26}.control-group.glowing .control-label span{color:#fb923c}.axis-glow{background:#ea580c33;border-radius:4px;box-shadow:0 0 8px #ea580c33}.axis-glow input[type=range]::-webkit-slider-thumb{outline:none;box-shadow:0 0 15px #ea580ccc,inset 0 1px #fff9,inset 0 -1.5px 1px #000000b3;background:linear-gradient(#fed7aa 0%,#fb923c 20%,#f97316 50%,#ea580c 80%,#451a03 100%)!important;border:none!important}.studio-panel{background:#0f172a99;border:1px solid #38bdf84d;border-radius:10px;margin-bottom:12px;padding:8px}.flex-col{flex-direction:column;align-items:center;gap:4px;display:flex}.vertical-sliders-container{justify-content:center;padding:4px 0;display:flex}.studio-l-grid{grid-template-rows:auto auto auto auto;grid-template-columns:24px 1fr;gap:4px;display:grid}.slider-wrapper.vertical-rotated{transform-origin:50%;width:78px;height:18px;transform:rotate(-90deg)}.slider-wrapper.vertical-rotated input{width:78px!important}.slider-wrapper.vertical-rotated input[type=range]::-webkit-slider-thumb{transform:rotate(90deg)}.slider-wrapper.vertical-rotated input[type=range]::-moz-range-thumb{transform:rotate(90deg)}.control-label{color:#94a3b8;justify-content:space-between;font-size:.7rem;font-weight:400;display:flex}.flex-row{align-items:center;gap:8px;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.toggle-switch{background:#0006;border-radius:20px;padding:4px;display:flex}.toggle-option{cursor:pointer;border-radius:16px;padding:6px 16px;font-size:.9rem;transition:all .3s}.toggle-option.active{color:#0f172a;background:#38bdf8;font-weight:600}.checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0d;border-radius:4px;align-items:center;padding:4px 8px;transition:background .2s;display:flex}.checkbox-container:hover{background:#ffffff1a}.checkbox-container input[type=checkbox]{cursor:pointer;accent-color:#38bdf8;width:16px;height:16px}.menu-item{color:#e2e8f0;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:0;justify-content:flex-start;align-items:center;gap:8px;width:100%;padding:10px 16px;font-size:.95rem;transition:background .2s;display:flex}.menu-item:hover{color:#38bdf8;background:#ffffff1a}.timeline-track{cursor:crosshair;border:1px solid #352d26;border-radius:8px;height:100px;margin-top:12px;position:relative;box-shadow:inset 0 10px 30px #000c,0 1px #ffffff05;background:#1a1612!important}.timeline-track:before,.timeline-track:after{content:"";z-index:5;opacity:.6;background:#1a1612 radial-gradient(circle,#352d26 4px,#0000 4px) 0 0/20px 10px;height:8px;position:absolute;left:0;right:0}.timeline-track:before{top:2px}.timeline-track:after{bottom:2px}.timeline-marker{cursor:grab;transform-origin:bottom;background:#2a201a;border:1px solid #4a3a2e;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:72px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:10px;bottom:10px;transform:translate(-50%);box-shadow:0 12px 24px #00000080}.marker-dots{pointer-events:none;justify-content:center;gap:12px;padding:0;display:flex;position:absolute;left:0;right:0}.marker-dots.top{top:-10px}.marker-dots.bottom{bottom:-10px}.marker-dots .dot{background-color:#1a1612;border:1px solid #352d26;border-radius:50%;width:6px;height:6px}.marker-dots .dot.measure-dot{background-color:#a78bfa;border-color:#a78bfa66;box-shadow:0 0 10px #a78bfa80}.marker-dots .dot.clickable{pointer-events:auto;cursor:pointer;transition:all .2s}.marker-dots .dot.clickable:hover{z-index:50;background-color:#fff6;transform:scale(1.3);box-shadow:0 0 8px #fff6}.marker-dots .dot.selected.dot-0{background-color:#fde047;border-color:#fde04766;box-shadow:0 0 10px #fde047b3}.marker-dots .dot.selected.dot-1{background-color:#38bdf8;border-color:#38bdf866;box-shadow:0 0 10px #38bdf8b3}.marker-dots .dot.selected.dot-2{background-color:#4ade80;border-color:#4ade8066;box-shadow:0 0 10px #4ade80b3}.marker-dots .dot.selected.dot-3{background-color:#f472b6;border-color:#f472b666;box-shadow:0 0 10px #f472b6b3}.timeline-marker:hover,.timeline-marker.active{z-index:10;background:#352d26;border-color:#fbbf24;box-shadow:0 15px 30px #0009}.timeline-marker.active{z-index:25;border-width:2px;border-color:#fbbf24;transform:translate(-50%)scale(1.1);box-shadow:0 0 35px #fbbf244d,inset 0 0 12px #fbbf241a}.timeline-marker.drag-move{opacity:.8;z-index:20;border-color:#38bdf8!important;box-shadow:0 0 25px #38bdf8cc,inset 0 0 10px #38bdf84d!important}.timeline-marker.drag-copy{opacity:.9;z-index:20;border-color:#22c55e!important;box-shadow:0 0 25px #22c55ecc,inset 0 0 10px #22c55e4d!important}.timeline-marker .frame-label{color:#ffffff80;text-align:center;pointer-events:none;background:#0006;font-family:monospace;font-size:.55rem;position:absolute;bottom:2px;left:0;right:0}@keyframes glowPulse{0%{box-shadow:0 0 5px #38bdf866}50%{box-shadow:0 0 20px #38bdf8cc,0 0 30px #38bdf866}to{box-shadow:0 0 5px #38bdf866}}.loader{border:5px solid #ffffff1a;border-top-color:#38bdf8;border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.music-panel{align-items:center;gap:6px;display:flex}.music-panel.loaded{background:#8b5cf614;border:1px solid #8b5cf640;border-radius:8px;gap:8px;padding:4px 10px}.music-panel.analyzing{background:#38bdf814;border:1px solid #38bdf840;border-radius:8px;gap:6px;padding:4px 12px;animation:2s ease-in-out infinite glowPulse}.music-info{align-items:center;gap:8px;font-size:.7rem;display:flex}.music-filename{color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-weight:500;overflow:hidden}.music-bpm{color:#a78bfa;font-family:monospace;font-size:.75rem;font-weight:700}.music-beats{color:#94a3b8;font-size:.65rem}.music-volume{align-items:center;gap:4px;display:flex}.music-volume input[type=range]{height:2px}.music-volume input[type=range]::-webkit-slider-thumb{background:#a78bfa;width:10px;height:10px;margin-top:-4px;box-shadow:0 0 4px #8b5cf64d}.spin-icon{animation:1.5s linear infinite spin}.waveform-canvas{opacity:.8;border-radius:6px}.timeline-track.has-music{border-color:#8b5cf64d;box-shadow:inset 0 2px 10px #00000080,inset 0 0 30px #8b5cf60d}.timeline-marker.measure-start:after{content:none}.explorer-card{background:#0f172a99;border:1px solid #14b8a64d;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px 12px #0003}.explorer-card:hover{background:#14b8a61a;border-color:#2dd4bf;transform:translateY(-2px);box-shadow:0 8px 20px #14b8a633}.explorer-card.selected{background:#14b8a626;border-color:#2dd4bf;box-shadow:0 0 15px #14b8a64d,inset 0 0 10px #14b8a61a}.explorer-preview{background:#081418fa;border:2px solid #2dd4bf;border-radius:16px;animation:.25s cubic-bezier(.175,.885,.32,1.275) popIn;box-shadow:0 25px 50px -12px #0009,0 0 30px #14b8a640}@keyframes popIn{0%{opacity:0;transform:translate(-50%)scale(.9)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}