@font-face{font-family:DS-DIGIT;src:url(DS-DIGIT.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Audiowide;src:url(Audiowide-Regular.ttf) format("truetype");font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica Neue,Arial,sans-serif;background:linear-gradient(180deg,#2d2d2d,#1a1a1a);color:#fff;min-height:100vh;padding:20px;user-select:none;-webkit-user-select:none}:root{--ui-hue: 0deg}.container{max-width:1400px;margin:0 auto;background:linear-gradient(180deg,#4a4a4a,#3a3a3a,#2a2a2a);border-radius:12px;padding:20px;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff1a,inset 0 -1px #0000004d;border:2px solid #555;filter:hue-rotate(var(--ui-hue))}header{text-align:center;margin-bottom:20px;padding:10px 0;border-bottom:2px solid #555}h1,h3{font-family:Audiowide,sans-serif}h1{font-size:2.5em;font-weight:700;margin-bottom:5px;color:#ff5722;text-shadow:2px 2px 4px rgba(0,0,0,.5);letter-spacing:4px}.subtitle{font-size:.9em;font-weight:300;letter-spacing:3px;text-transform:uppercase;color:#888}#startScreen{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#2d2d2d,#1a1a1a);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}#startScreen h2{color:#ff5722;letter-spacing:4px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#startButton{font-size:1.2em;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:18px 45px;background:linear-gradient(180deg,#ff5722,#e64a19);color:#fff;border:2px solid #ff7043;border-radius:6px;cursor:pointer;box-shadow:0 4px 15px #ff572266,inset 0 1px #fff3;transition:all .2s}#startButton:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff572299,inset 0 1px #ffffff4d;background:linear-gradient(180deg,#ff6e40,#ff5722)}#status{margin-top:20px;opacity:.6;font-size:.9em;letter-spacing:1px}#synthContainer{display:none}.panel{background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border-radius:8px;padding:20px;margin:15px 0;box-shadow:inset 0 2px 4px #0000004d,inset 0 -1px #ffffff0d;border:1px solid #444}.panel-title{font-size:.85em;margin-bottom:15px;color:#ff5722;text-transform:uppercase;letter-spacing:3px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #444}details.panel{padding:15px 20px}details.panel>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary:before{content:"▶";font-size:.7em;transition:transform .2s}details.panel[open]>summary:before{transform:rotate(90deg)}details.panel:not([open])>summary{margin-bottom:0;padding-bottom:0;border-bottom:none}.transport{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}#playStop{width:70px;height:70px;font-size:1.8em;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);color:#666;border:3px solid #333;border-radius:50%;cursor:pointer;transition:all .15s;box-shadow:0 4px 8px #0006,inset 0 2px 4px #ffffff0d}#playStop:hover{background:linear-gradient(180deg,#333,#222);color:#888}#playStop.playing{background:linear-gradient(180deg,#ff5722,#e64a19);border-color:#ff7043;color:#fff;box-shadow:0 0 20px #ff572299,inset 0 2px 4px #fff3}.share-btn{padding:12px 24px;font-size:.9em;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);color:#888;border:2px solid #444;border-radius:6px;cursor:pointer;transition:all .15s;box-shadow:0 2px 6px #0006,inset 0 1px #ffffff0d}.share-btn:hover{background:linear-gradient(180deg,#333,#222);color:#aaa;border-color:#555}.share-btn:active{transform:translateY(1px)}.share-btn.copied{background:linear-gradient(180deg,#4caf50,#388e3c);border-color:#66bb6a;color:#fff}.control-group{display:flex;flex-direction:column;align-items:center;gap:6px}.control-group label{font-size:.75em;text-transform:uppercase;letter-spacing:2px;color:#777;font-weight:500}.control-group input[type=range]{width:100px;height:6px;background:linear-gradient(180deg,#222,#333);border-radius:3px;outline:none;-webkit-appearance:none;border:1px solid #444}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(180deg,#666,#444);border-radius:50%;cursor:pointer;border:2px solid #555;box-shadow:0 2px 4px #0006}.control-group input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(180deg,#777,#555)}.control-group webaudio-knob{display:block;margin:0 auto}.channel-strip .control-group webaudio-knob{margin:4px auto}.channel-strip .control-group webaudio-slider{display:block;margin:4px auto}.control-value{font-family:DS-DIGIT,monospace;font-size:1em;color:#ff5722;text-shadow:0 0 8px rgba(255,87,34,.4)}.voice-controls-wrapper{display:flex;gap:6px}.voice-controls{display:flex;gap:6px;justify-content:flex-start;overflow-x:auto;padding-bottom:10px;flex:1}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#333,#252525);border-radius:6px;padding:10px 6px;min-width:130px;border:1px solid #444;box-shadow:inset 0 1px #ffffff0d}.channel-strip h3{color:#ff5722;font-size:.8em;font-weight:600;letter-spacing:1px;margin:0;text-align:center;padding:4px 8px;background:#0000004d;border-radius:3px;width:100%}.channel-strip .control-group{width:100%}.channel-strip .control-group label{font-size:.65em;color:#888}.channel-strip .control-group input[type=range]{width:55px}.channel-strip .control-value{font-size:.8em}.channel-strip .control-group.shared-control{opacity:.5}.channel-strip .shared-label{font-size:.65em!important;color:#666!important;text-shadow:none!important;font-family:Helvetica Neue,Arial,sans-serif!important}.channel-strip .mixer-divider{width:100%;height:2px;background:linear-gradient(90deg,transparent,#ff5722,transparent);margin:4px 0;opacity:.5}.channel-strip .knob-grid{display:grid;grid-template-columns:55px;gap:4px 10px;width:100%;justify-content:center}.channel-strip .knob-grid.knob-grid-wide{grid-template-columns:55px 55px}.channel-strip .knob-grid .control-group{width:auto}.channel-strip .knob-grid .control-group.full-width{grid-column:1 / -1}.channel-strip .voice-mute-btn{color:#ff5722;font-size:.8em;font-weight:600;letter-spacing:1px;margin:0;text-align:center;padding:6px 8px;background:#0000004d;border-radius:3px;width:100%;border:1px solid transparent;cursor:pointer;transition:all .1s}.channel-strip .voice-mute-btn:hover{background:#ff572233;border-color:#ff5722}.channel-strip .voice-mute-btn.muted{color:#555;background:#00000080;text-decoration:line-through}.channel-strip .voice-mute-btn.triggered{background:#ff572299;box-shadow:0 0 10px #ff5722cc}.channel-strip .sample-name{color:#888;font-family:DS-DIGIT,monospace;font-size:.55em;text-align:center;padding:2px 4px;background:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.channel-strip .sample-toggles{display:flex;gap:4px;margin:4px 0}.channel-strip .sample-toggle-btn{flex:1;padding:4px 8px;font-size:.7em;font-weight:600;color:#666;background:#0000004d;border:1px solid #444;border-radius:3px;cursor:pointer;transition:all .1s}.channel-strip .sample-toggle-btn:hover{background:#ff572233;border-color:#ff5722}.channel-strip .sample-toggle-btn.active{color:#ff5722;background:#ff57224d;border-color:#ff5722}.channel-strip .control-group.pan-control input[type=range]{width:50px}.channel-strip .fx-sends{display:flex;flex-direction:row;gap:2px;margin:2px 0;padding:3px;background:#0003;border-radius:3px}.channel-strip .fx-sends .send-control{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1}.channel-strip .fx-sends .send-control label{font-size:.6em;color:#4fc3f7;margin:0}.channel-strip .fx-sends .send-control input[type=range]{width:24px;height:50px;writing-mode:vertical-lr;direction:rtl;-moz-appearance:slider-vertical;appearance:slider-vertical;-webkit-appearance:slider-vertical}.effects-controls{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;justify-content:space-around}.fx-section{background:#0000004d;padding:15px;border-radius:8px;border:1px solid rgba(255,87,34,.3);min-width:280px}.fx-section h3{color:#ff5722;font-size:1em;margin:0 0 10px;text-transform:uppercase;letter-spacing:2px}.fx-row{display:flex;flex-direction:row;gap:15px;flex-wrap:wrap}.fx-row .control-group{display:flex;flex-direction:column;align-items:center;gap:4px}.fx-row .control-group label{font-size:.75em;color:#888}.fx-row .control-group input[type=range]{width:60px}.pattern-selector{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:15px;padding:10px;background:#0003;border-radius:6px}.pattern-row{display:flex;gap:4px}.pattern-btn{width:36px;height:32px;font-size:.9em;font-weight:600;background:linear-gradient(180deg,#3a3a3a,#2a2a2a);color:#888;border:2px solid #444;border-radius:4px;cursor:pointer;transition:all .15s}.pattern-btn:hover{background:linear-gradient(180deg,#444,#333);color:#aaa}.pattern-btn.selected{background:linear-gradient(180deg,#ff5722,#e64a19);border-color:#ff7043;color:#fff;box-shadow:0 0 8px #ff572266}.pattern-btn.in-chain{background:linear-gradient(180deg,#ff8a50,#ff5722);border-color:#ff7043;color:#fff}.pattern-btn.playing{box-shadow:0 0 12px #ff5722cc;animation:pattern-pulse .5s ease-in-out infinite alternate}@keyframes pattern-pulse{0%{box-shadow:0 0 8px #ff572299}to{box-shadow:0 0 16px #ff5722}}.pattern-mode-btn{padding:6px 12px;font-size:.75em;font-weight:500;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);color:#666;border:1px solid #444;border-radius:4px;cursor:pointer;transition:all .15s}.pattern-mode-btn:hover{background:linear-gradient(180deg,#333,#222);color:#888}.pattern-mode-btn.edit-mode{background:linear-gradient(180deg,#2196f3,#1976d2);border-color:#42a5f5;color:#fff}#sequencerGrid{display:flex;flex-direction:column;gap:3px;background:#0003;padding:15px;border-radius:6px}.seq-row{display:flex;align-items:center;gap:3px}.voice-label{width:35px;font-size:.75em;font-weight:600;color:#ff5722;text-align:right;padding-right:8px;letter-spacing:1px}.voice-label.mute-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:3px;padding:2px 8px 2px 4px;margin:-2px 0;transition:all .15s ease}.voice-label.mute-toggle:hover{background:#ff572233}.voice-label.muted{color:#666!important;text-decoration:line-through;opacity:.5}.voice-label.muted:hover{background:#6663}.step-btn{width:45px;height:35px;border:none;border-radius:3px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);cursor:pointer;transition:all .08s;position:relative;border:1px solid #333;box-shadow:inset 0 1px #ffffff0d,0 2px 3px #0000004d}.step-btn.group-start{margin-left:6px}.step-btn.group-start:first-of-type{margin-left:0}.step-btn:hover{background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border-color:#444}.step-btn.active{background:linear-gradient(180deg,#ff5722,#e64a19);border-color:#ff7043;box-shadow:inset 0 1px #fff3,0 0 8px #ff572280}.step-btn.current{border-color:#4caf50;box-shadow:0 0 0 2px #4caf50,0 0 12px #4caf5099}.step-btn.active.current{background:linear-gradient(180deg,#ff3d00,#dd2c00);border-color:#4caf50;box-shadow:0 0 0 2px #4caf50,0 0 15px #ff3d00cc}.step-btn.accent{border-color:gold!important;box-shadow:inset 0 1px #fff3,0 0 10px #ffd700b3,inset 0 0 6px #ffd70066!important}.step-btn.active.accent{background:linear-gradient(180deg,#ff8f00,#ff6f00)}.step-btn.flam{border-color:#00bcd4!important;position:relative}.step-btn.flam:after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;background:#00bcd4;border-radius:50%;box-shadow:0 0 4px #00bcd4}.step-btn.accent.flam{border-color:#9c27b0!important;box-shadow:inset 0 1px #fff3,0 0 10px #9c27b0b3!important}.step-btn.accent.flam:after{background:#9c27b0;box-shadow:0 0 4px #9c27b0}.seq-row.sample-section{margin-top:10px;padding-top:10px;border-top:1px solid #444}.voice-label.sample-label{color:#ff5722}.sample-browser-menu{position:fixed;background:#333;border:1px solid #555;border-radius:4px;box-shadow:0 4px 12px #00000080;z-index:10000;min-width:180px;max-height:400px;overflow-y:auto;padding:4px 0}.sample-browser-menu .menu-item{padding:6px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#eee}.sample-browser-menu .menu-item:hover{background:#444}.sample-browser-menu .menu-item.folder:after{content:"▶";font-size:8px;margin-left:8px}.sample-browser-menu .menu-item.sample-item:hover{background:#ff5722;color:#fff}.sample-browser-menu .submenu{display:none;position:absolute;left:100%;top:0;background:#333;border:1px solid #555;border-radius:4px;box-shadow:0 4px 12px #00000080;min-width:180px;max-height:400px;overflow-y:auto;padding:4px 0}.sample-browser-menu .menu-item.folder:hover>.submenu{display:block}.sample-browser-menu .menu-item.folder{position:relative}.pattern-context-menu{position:fixed;background:#333;border:1px solid #555;border-radius:4px;box-shadow:0 4px 12px #00000080;z-index:10000;min-width:140px;padding:4px 0}.pattern-context-menu .menu-item{padding:8px 12px;cursor:pointer;font-size:13px;color:#eee;position:relative}.pattern-context-menu .menu-item:hover{background:#444}.pattern-context-menu .menu-item.danger{color:#ff6b6b}.pattern-context-menu .menu-item.danger:hover{background:#5c2020}.pattern-context-menu .menu-item.has-submenu:after{content:"▶";font-size:8px;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.pattern-context-menu .submenu{display:none;position:absolute;left:100%;top:0;background:#333;border:1px solid #555;border-radius:4px;box-shadow:0 4px 12px #00000080;min-width:120px;padding:4px 0}.pattern-context-menu .menu-item.has-submenu:hover>.submenu{display:block}.pattern-context-menu .submenu .menu-item:hover{background:#ff5722;color:#fff}.confirm-tooltip{position:fixed;background:#2a2a2a;border:1px solid #555;border-radius:6px;box-shadow:0 4px 16px #0009;z-index:10001;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:13px;color:#eee}.confirm-tooltip span{white-space:nowrap}.confirm-tooltip button{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500}.confirm-tooltip .confirm-yes{background:#ff5722;color:#fff}.confirm-tooltip .confirm-yes:hover{background:#e64a19}.confirm-tooltip .confirm-no{background:#555;color:#ccc}.confirm-tooltip .confirm-no:hover{background:#666;color:#fff}.step-btn.active.has-probability{opacity:var(--prob-opacity, 1)}.step-btn.prob-dragging{outline:2px solid #ff9800;outline-offset:2px}.step-btn.has-substep{position:relative}.step-btn.has-substep:before{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:8px;height:4px;background:#00bcd4;border-radius:2px;box-shadow:0 0 4px #00bcd4}.step-btn.active.has-substep:before{background:#00e5ff;box-shadow:0 0 6px #00e5ff}.step-options-menu{position:fixed;background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:8px;z-index:1000;box-shadow:0 4px 20px #00000080;min-width:140px}.menu-section{margin-bottom:10px}.menu-section:last-child{margin-bottom:0}.menu-section-header{font-size:.7em;color:#888;text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #444}.menu-option{display:block;width:100%;padding:6px 10px;margin:2px 0;background:#333;border:1px solid #444;border-radius:4px;color:#ddd;font-size:.85em;cursor:pointer;text-align:left;transition:all .15s ease}.menu-option:hover{background:#444;border-color:#00bcd4}.menu-option.active{background:#00bcd4;border-color:#00e5ff;color:#000;font-weight:700}.step-options-menu .prob-slider{width:100%;margin:4px 0}.step-options-menu .prob-value{text-align:center;color:#888;font-size:.8em}.prob-popup{position:fixed;background:#333;border:1px solid #555;border-radius:8px;padding:10px;z-index:1000;box-shadow:0 4px 20px #00000080;min-width:120px}.prob-popup-header{font-size:.75em;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.prob-popup .prob-slider{width:100%;margin:5px 0}.prob-popup-value{text-align:center;font-size:.9em;color:#ff9800;font-weight:700}.step-numbers{display:flex;gap:3px;margin-left:43px;margin-bottom:6px}.step-number{width:45px;text-align:center;font-size:.7em;color:#555;font-weight:500}.step-number.group-start{margin-left:6px}.step-number:nth-child(4n+1){color:#777}.info{text-align:center;margin-top:20px;opacity:.5;font-size:.8em;letter-spacing:1px}.info a{color:#ff5722;text-decoration:none}.info a:hover{text-decoration:underline}footer{text-align:center;margin-top:30px;padding:15px;color:#555;font-size:.8em;letter-spacing:1px}footer a{color:#777}@media (max-width: 1200px){.voice-controls{justify-content:flex-start}}@media (max-width: 900px){.step-btn{width:32px;height:28px}.voice-label{width:28px;font-size:.7em}.step-numbers{margin-left:36px}.step-number{width:32px;font-size:.65em}#sequencerGrid{overflow-x:auto;padding:10px}.seq-row{min-width:max-content}.channel-strip{min-width:65px;padding:8px 4px}.container{padding:10px}}.preset-menu{position:fixed;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:4px 0;z-index:1001;box-shadow:0 4px 16px #0009;min-width:140px;display:none}.preset-menu.visible{display:block}.preset-menu-header{font-size:.7em;color:#666;padding:4px 12px 6px;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #333;margin-bottom:4px}.preset-menu-item{padding:6px 12px;cursor:pointer;font-size:.85em;color:#ccc;transition:background .1s,color .1s}.preset-menu-item:hover{background:#ff9800;color:#000}.preset-menu-divider{height:1px;background:#333;margin:4px 0}.voice-mute-btn.long-pressing{transform:scale(.95);opacity:.8}