*,*:before,*:after{box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:root{--green: #4CAF50;--blue: #1e7699;--yellow: #f7b811;--red: #bc2a2b;--theme-color: var(--yellow);--minimap-height: 50px;--main-wave-height: min(200px, 20vh);--wheel-size: 300px}html,body{overscroll-behavior:none;-webkit-overflow-scrolling:touch}body{font-family:system-ui,sans-serif;margin:0;padding-top:.5rem;background:#1a1a1a;color:#fff;display:grid;gap:clamp(.5rem,1vw,1rem);min-height:100dvh}input,button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-webkit-touch-callout:none}.container{display:grid;max-width:min(720px,100vw);margin:0 auto;width:100%;overflow:hidden;gap:3px;grid-template-rows:auto auto 1fr auto auto}.controls{display:grid;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:.75rem;align-items:center}.time-controls{position:relative;height:24px;margin-left:58px}.waveform-container{background:#2a2a2a;border-radius:clamp(2px,.5vw,4px);display:grid;grid-template-rows:var(--minimap-height) var(--main-wave-height);gap:2px;margin:0 .5rem}.waveform-view{position:relative;background:#333;border-radius:2px;width:100%}.minimap-container{display:grid;grid-template-columns:var(--minimap-height) auto;gap:1px}canvas{display:block;width:100%;background:#333;border-radius:2px}#main-waveform{height:var(--main-wave-height);box-shadow:0 5px #444;background:linear-gradient(to bottom,#222,#333 5% 80%,#222)}#minimap{height:50px}.playhead{position:absolute;top:0;bottom:-2px;width:2px;background:#f44;pointer-events:none;will-change:transform}.selection-window{position:absolute;top:0;height:100%;background:#fff3;border:1px solid #fff;cursor:grab;transform:translate(-1px);will-change:transform}.selection-window:before,.selection-window:after{content:"";position:absolute;top:0;bottom:0;width:0;opacity:0;transition:opacity .2s ease-in-out,width .2s ease-in-out;pointer-events:none}.selection-window:before{left:-1px;background:linear-gradient(90deg,var(--theme-color) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.15) 80%,transparent 100%);box-shadow:-1px 0 6px 1px #f7b81166,-2px 0 12px 2px #ffffff40}.selection-window:after{right:-1px;background:linear-gradient(270deg,var(--theme-color) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.15) 80%,transparent 100%);box-shadow:1px 0 6px 1px #f7b81166,2px 0 12px 2px #ffffff40}.selection-window.dragging-window{box-shadow:0 0 12px 2px #ffffff40,0 0 24px 4px #f7b81133;background:#ffffff3b;transition:box-shadow .2s ease-in-out,background .2s ease-in-out}.selection-window.dragging-left-edge:before{opacity:1;width:14px}.selection-window.dragging-right-edge:after{opacity:1;width:14px}#time-display{font-family:monospace;justify-self:end}.time-controls input{position:absolute;background:#333;color:#fff;border:1px solid #444;padding:.25rem;border-radius:2px;width:5.8ch;font-size:clamp(14px,2vw,16px)}.time-controls input:focus{outline:var(--theme-color) 1px solid}.big-button{margin-top:1rem;background:var(--theme-color);color:#1c2d1a;font-weight:700;border:none;padding:clamp(.5rem,1vw,.5rem) clamp(01rem,2vw,1.5rem);border-radius:4px;cursor:pointer;font-size:1.6rem}.big-button:focus-visible{outline:solid 2px white}button:hover{filter:brightness(1.1);box-shadow:0 0 4px 1px var(--background-color)}button:active{filter:brightness(.9);box-shadow:0 0 4px 1px var(--background-color) inset}.startup-overlay{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:1000;cursor:pointer;-webkit-tap-highlight-color:transparent}.startup-content{text-align:center;background:#2a2a2a;padding:2rem;border-radius:1px;max-width:90%}.hidden{display:none}.bottom-controls{--button-width: 80px;display:grid;grid-template-columns:var(--button-width) 1fr var(--button-width) auto;justify-content:flex-end;gap:.5rem;padding:.5rem .5rem .75rem;background:#222;border-top:1px solid #333}.bottom-button{--border-color: #000;background:#555;color:#eee;padding:.5rem;border-radius:4px 2px 4px 0;font-size:1rem;transition:background-color .2s;text-align:center;border:2px outset var(--border-color);max-width:var(--button-width)}.bottom-button:active{transform:scale(.98);border:2px inset var(--border-color)}.crossfader::-webkit-slider-thumb{transition:transform .1s}.crossfader.hard-cut::-webkit-slider-thumb{transform:translate(4px)}.load-button{padding:0}.auto-volume.active{background:#4caf50;box-shadow:0 0 3px -1px #cad1ca,0 0 6px -2px #4caf5085,0 0 6px -2px #8ccf80ee;--border-color: #6CBF60}.record-btn.active{background:#c44;--border-color: #dd5555}.help-btn:hover{background:#444}input[type=file]{display:none}.file-select-container{position:relative;width:var(--minimap-height)}.file-select{display:block;color:#eee;cursor:pointer;line-height:28px;width:100%;text-align:center;background-color:#555;border:2px outset #000;border-radius:4px 2px 4px 0}.file-select:active{transform:translateY(1px);border:2px inset #000}.file-select-dropdown{display:none;position:absolute;top:100%;left:0;background:#333;border:1px solid #444;border-radius:4px;width:140px;z-index:100;margin-top:4px;box-shadow:0 4px 12px #0003}.file-select-container.open .file-select-dropdown{display:block}.menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px}.menu-item:hover{background:#444}.deck-select-container{position:relative}.deck-select{width:auto;background-color:var(--theme-color);color:#111}.deck-grid{display:none;position:absolute;bottom:100%;right:0;margin-bottom:8px;background:#333;border:1px solid #444;border-radius:4px;padding:12px;grid-template-columns:repeat(4,1fr);gap:12px}.deck-select-container.open .deck-grid{display:grid}.deck-cell{gap:8px;padding:16px 12px;border-radius:4px;cursor:pointer;text-align:center;background:#444;align-items:center}.deck-cell[data-deck=green]{--deck-color: var(--green)}.deck-cell[data-deck=blue]{--deck-color: var(--blue)}.deck-cell[data-deck=yellow]{--deck-color: var(--yellow)}.deck-cell[data-deck=red]{--deck-color: var(--red)}.deck-cell:hover{background:#555}.deck-cell.active{box-shadow:0 10px 0 0 var(--deck-color);border:2px solid var(--deck-color)}.deck-cell.has-audio{border:2px solid var(--deck-color)}.deck-cell.has-audio span{opacity:1}.deck-cell:not(.has-audio) span{opacity:.3}.deck-play{width:40px;height:40px;border:2px solid var(--deck-color);border-radius:50%;background:transparent;margin:0 auto;cursor:pointer;position:relative;flex-shrink:0}.deck-play:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);width:0;height:0;border-left:10px solid var(--deck-color);border-top:7px solid transparent;border-bottom:7px solid transparent}.deck-play.playing{background:var(--deck-color)}.deck-play.playing:before{border-left-color:#111}.deck-cell span{color:var(--deck-color);font-weight:700}.wheel-container{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%}.wheel-waveform{position:absolute;top:0;left:0;background:transparent;width:100%;height:100%;transform:rotate(180deg);pointer-events:none}.close-error-btn{position:absolute;right:8px;top:8px;cursor:pointer;background:#444;border:1px solid #666;border-radius:4px;color:#fff;padding:4px 8px}.send-error-btn{position:absolute;right:68px;top:8px;background:#444;border:1px solid #666;border-radius:4px;color:#fff;padding:4px 8px;cursor:pointer}.error-box{display:none;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(90vw,500px);max-height:80vh;overflow-y:auto;background:#222;border:1px solid #444;border-radius:4px;padding:1rem;font-family:monospace;font-size:.9rem;white-space:pre-wrap;color:#f44;z-index:1002;box-shadow:0 4px 12px #0003}.error-btn{background:#c44!important;--border-color: #dd5555 !important;font-weight:700;display:none}:root{--slider-bg: #1a1a1a;--slider-bg-gradient: linear-gradient(145deg, #1b1b1a, var(--slider-bg));--track-bg: #111;--thumb-bg: #444;--thumb-border: #424242;--label-color: #666;--slider-height: 200px;--track-width: 4px;--thumb-width: 22px;--volume-thumb-height: 60px;--pitch-thumb-height: 50px;--track-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, .05);--marker-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 -1px 1px rgba(255, 255, 255, .1);--thumb-shadow: -1px 0 2px rgba(0, 0, 0, .3), 1px 0 2px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .5)}.slider-controls{position:relative;margin-left:2rem}.slider-labels{display:flex;justify-content:space-between;width:100%;padding:0 25%;position:relative}.slider-label{cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:.5;transition:opacity .2s;position:absolute;top:-20px;left:20%;transform:translate(-50%);font-size:.8em;color:var(--label-color);text-transform:uppercase}.slider-label.active{opacity:1;color:var(--theme-color)}.slider-label+.slider-label{left:80%}.volume-slider,.pitch-slider{position:relative;height:var(--slider-height);padding:0;background:var(--slider-bg-gradient);display:none;overflow:visible}.volume-sider:focus-visible,.pitch-slider:focus-visible{outline:none}.volume-slider.active,.pitch-slider.active{display:block}.volume-scale,.pitch-scale{position:absolute;right:50%;top:22px;height:100%;width:var(--track-width);background:var(--track-bg);transform:translate(50%);margin:0;border-radius:2px;box-shadow:var(--track-shadow)}.volume-scale:before,.pitch-scale:before{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--label-color);transform:translateY(-80%) translate(-50%);box-shadow:var(--marker-shadow)}.volume-scale:before{top:21%}.pitch-scale:before{top:50%;width:62px}.volume-value{font-size:80%}.pitch-value{font-size:80%;position:absolute;right:0}.pitch-reset{margin-top:32px;font-size:.8em;display:grid;gap:4px;align-items:center;grid-template-columns:1fr;text-align:center}.rev-label{color:var(--label-color);text-transform:uppercase;cursor:pointer;background:none;border:none}.rev-label.active{color:var(--theme-color);text-shadow:0 0 8px var(--theme-color)}.rst-label{color:var(--label-color);text-transform:uppercase;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:4px 2px;position:absolute;left:-30px;top:calc(22px + 50%);transform:translateY(-50%);font-size:.7em;writing-mode:vertical-rl;text-orientation:mixed}.volume-slider .volume-select,.pitch-slider .pitch-select{position:absolute;left:50%;top:22px;width:200px;height:var(--thumb-width);margin:0;transform:rotate(-90deg) translate(calc(-100% + 11px));transform-origin:left;appearance:none;background:transparent;cursor:grab}.volume-slider .volume-select::-webkit-slider-runnable-track,.pitch-slider .pitch-select::-webkit-slider-runnable-track{height:10px;background:linear-gradient(to bottom,#0003,#0000001a);border-radius:5px;box-shadow:inset 0 2px 4px #00000080,inset 0 -1px 1px #ffffff1a}.volume-select::-webkit-slider-thumb{appearance:none;width:var(--thumb-width);height:var(--volume-thumb-height);margin-top:-25px;background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(140deg,var(--thumb-bg),var(--thumb-border) 40%,#424343);border-radius:3px;box-shadow:var(--thumb-shadow);border:1px solid var(--thumb-bg)}.pitch-select::-webkit-slider-thumb{appearance:none;width:var(--thumb-width);height:var(--pitch-thumb-height);margin-top:-20px;border-radius:2px;background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(to right,var(--thumb-bg) calc(50% - 1px),#888 50%,#424343 calc(50% + 1px));box-shadow:-10px 0 6px #0000004d,10px 0 10px #0003,1px 0 15px #0000001a,1px 0 10px #222,-20px 0 0 var(--thumb-bg),20px 0 0 var(--thumb-bg),18px 1px 4px #060606,-22px 1px 4px #060606}.volume-slider .volume-select::-moz-range-track,.pitch-slider .pitch-select::-moz-range-track{height:10px;background:linear-gradient(to bottom,#0003,#0000001a);border-radius:5px;box-shadow:inset 0 2px 4px #00000080,inset 0 -1px 1px #ffffff1a}.volume-select::-moz-range-thumb{width:var(--thumb-width);height:var(--volume-thumb-height);background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(140deg,var(--thumb-bg),var(--thumb-border) 40%,#424343);border-radius:3px;box-shadow:var(--thumb-shadow);border:1px solid var(--thumb-bg);appearance:none}.pitch-select::-moz-range-thumb{width:var(--thumb-width);height:var(--pitch-thumb-height);border-radius:2px;background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(to right,var(--thumb-bg) calc(50% - 1px),#888 50%,#424343 calc(50% + 1px));box-shadow:-10px 0 6px #0000004d,10px 0 10px #0003,1px 0 15px #0000001a,1px 0 10px #222,-20px 0 0 var(--thumb-bg),20px 0 0 var(--thumb-bg),18px 1px 4px #060606,-22px 1px 4px #060606;border:none;appearance:none}.virtual-wheel{width:var(--wheel-size);height:var(--wheel-size);max-width:calc(95vmin - 90px);max-height:calc(95vmin - 90px);border-radius:50%;background:#333;background:radial-gradient(#111 10px,#333 10px,#111 98%);position:relative;margin:-2px auto 0;cursor:pointer;touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;border:4px solid #444}.wheel-marker{position:absolute;width:1.5px;height:50%;background:#fff;left:50%;transform-origin:bottom;bottom:50%;transform:rotate(180deg);will-change:transform}.wheel-marker:after{content:"";width:2px;height:4px;background:#f44;position:absolute;top:-4px}.wheel-center{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.ghost{opacity:.7;cursor:not-allowed}.scratch-btn{background:transparent;color:#eee;border:0;height:3rem}.scratch-btn.active{color:var(--theme-color)}.fader-row{display:flex;justify-content:center;align-items:center;gap:.5rem}.mute-btn{margin-left:-3.5rem;background:transparent;border:none;color:transparent;width:6rem;height:4rem;justify-self:flex-end}.mute-btn:active{background:#00000014}.fader-container{position:relative;width:240px;height:80px;padding:10px 10px 10px 0;margin:10px 0;background:linear-gradient(145deg,#1b1b1a,#1a1a1a)}.fader-scale{position:absolute;left:0;top:50%;width:200px;height:4px;background:#111;transform:translateY(-50%);margin:0;border-radius:2px;box-shadow:inset 0 1px 3px #000c,0 1px 1px #ffffff0d}.fader-scale:before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:20px;background:#666;transform:translate(-50%);box-shadow:0 1px 2px #0000004d,0 -1px 1px #ffffff1a}.crossfader{--fader-width: 200px;--fader-height: 60px;position:absolute;left:0;top:0;width:var(--fader-width);height:var(--fader-height);margin:10px 0;appearance:none;background:transparent;cursor:grab}.crossfader:active{cursor:grabbing}.crossfader::-webkit-slider-runnable-track{height:10px;background:linear-gradient(to bottom,#0003,#0000001a);border-radius:5px;box-shadow:inset 0 2px 4px #00000080,inset 0 -1px 1px #ffffff1a}.crossfader::-webkit-slider-thumb{appearance:none;width:22px;height:var(--fader-height);margin-top:-25px;background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(140deg,#444,#424242 40%,#424343);border-radius:3px;box-shadow:-1px 0 2px #0000004d,1px 0 2px #0000004d,0 2px 4px #00000080;border:1px solid #444;position:relative}.ghost.crossfader::-webkit-slider-thumb{box-shadow:-1px 0 2px #d3d3d34d,1px 0 2px #dedede4d,0 2px 4px #e9e9e980}.crossfader::-webkit-slider-thumb:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:30px;background:#999;border-radius:1px;box-shadow:inset 0 1px 2px #0000004d}.crossfader::-moz-range-thumb{width:24px;height:60px;background:repeating-linear-gradient(to right,transparent 0px,transparent 1px,rgba(0,0,0,.05) 1px,rgba(0,0,0,.05) 2px),linear-gradient(140deg,#444,#424242 40%,#424343);border-radius:3px;box-shadow:-1px 0 2px #0000004d,1px 0 2px #0000004d,0 2px 4px #00000080;border:1px solid #666;position:relative}.help-overlay{position:absolute;top:0;left:50%;transform:translate(-50%);min-height:100dvh;max-width:100vw;overflow:hidden;width:100%;background:#000000d9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}.help-close-btn{position:absolute;right:16px;top:16px;cursor:pointer;background:none;border:0;color:#fff;padding:4px 8px;z-index:1010;font-family:inherit;font-size:14px}.help-overlay.visible{opacity:1;pointer-events:auto}.help-pointer{position:absolute;color:#fff;pointer-events:none}.help-text{background:#282828f2;padding:.75rem 1rem;border-radius:6px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 12px #0003;font-size:.9rem;line-height:1.4;max-width:240px;position:fixed;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s;z-index:1001}.help-text.visible{opacity:1;transform:translateY(0);pointer-events:auto}.help-target-highlight{-webkit-tap-highlight-color:transparent;position:absolute;border:2px solid var(--theme-color);border-radius:4px;cursor:pointer;opacity:0;transition:opacity .3s,box-shadow .2s}.help-target-highlight:hover{box-shadow:0 0 0 4px #ffffff1a}.help-target-highlight:not(.highlighted) .help-pulse{--pulse-scale: 2;opacity:0;animation:none}.help-overlay.visible .help-target-highlight{opacity:1;background-color:#2228}.recording-overlay{position:fixed;inset:0;background:#000c;display:none;place-items:center;z-index:1001}.recording-overlay.active{display:grid}.recording-btn{font-size:2rem;text-align:center;background:#c44;color:#fff;padding:2rem;border:none;border-radius:4px;text-transform:uppercase;font-weight:700;cursor:pointer}.help-pulse{--pulse-scale: 1.7;position:absolute;width:24px;height:24px;border-radius:50%;background:var(--theme-color);opacity:.15;transform:scale(.5);animation:pulse 1.7s infinite ease-in-out;pointer-events:none;left:50%;top:50%;margin-left:-12px;margin-top:-12px}@keyframes pulse{0%{transform:scale(.5);opacity:.15}50%{transform:scale(var(--pulse-scale));opacity:.5}to{transform:scale(.5);opacity:.15}}