*{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#030304;--surface:#0d0d0f;--control:#121214;--control-hover:#f4f4eb;--border:#303030;--border-strong:#f4f4eb;--accent:#f4f4eb;--feedback:#00dcff;--text:#eeeee5;--muted:#88887e;--light:#fff}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#efeff0;--surface:#e3e3e5;--control:#f5f5f7;--control-hover:#18181a;--border:#a8a8ac;--border-strong:#242428;--accent:#18181c;--feedback:#06f;--text:#18181c;--muted:#6e6e74;--light:#18181c}html,body{touch-action:none;height:100%;overflow:hidden}body{background:linear-gradient(90deg, rgb(from var(--light) r g b / .035) 1px, transparent 1px), linear-gradient(0deg, rgb(from var(--light) r g b / .035) 1px, transparent 1px), var(--bg);color:var(--text);letter-spacing:0;background-size:36px 36px;flex-direction:column;font-family:Futura,Futura PT,Avenir Next,Century Gothic,sans-serif;display:flex}#ui-root{flex-direction:column;flex:1;min-height:0;display:flex}button,input,select{font:inherit}header{z-index:70;background:rgb(from var(--bg) r g b / .96);border-bottom:2px solid var(--light);flex-shrink:0;align-items:center;gap:12px;padding:12px 18px 15px;display:flex;position:relative}header h1.app-logo{align-items:center;margin:0;padding:0;display:flex}header h1.app-logo img{width:auto;height:26px;display:block}.file-label{background:var(--control);border:1px solid var(--border-strong);min-height:28px;color:var(--text);cursor:pointer;text-transform:uppercase;border-radius:2px;justify-content:center;align-items:center;padding:5px 12px;font-size:11px;font-weight:700;transition:background .16s,color .16s,border-color .16s;display:inline-flex}.file-label:hover{background:var(--control-hover);border-color:var(--control-hover);color:var(--bg)}.file-label:active{background:var(--feedback);border-color:var(--feedback);color:var(--bg)}.title-speed-readout{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap;align-items:center;gap:8px;min-width:7ch;font-size:11px;font-weight:700;display:flex}.speed-value{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;inline-size:7ch;display:inline-block}#playback-controls{z-index:60;background:rgb(from var(--bg) r g b / .92);border:1px solid rgb(from var(--border-strong) r g b / .7);-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:6px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}#playback-hint{z-index:60;background:rgb(from var(--bg) r g b / .92);border:1px solid rgb(from var(--border-strong) r g b / .7);-webkit-user-select:none;user-select:none;pointer-events:none;max-width:calc(100vw - 24px);color:var(--muted);letter-spacing:0;text-transform:uppercase;white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;padding:6px 12px;font-size:10px;font-weight:800;display:flex;position:fixed;bottom:76px;left:50%;transform:translate(-50%)}.hint-line{display:none}.hint-desktop{display:inline}@media (hover:none) and (pointer:coarse){.hint-desktop{display:none}.hint-touch{display:inline}}.playback-button{background:var(--control);border:1px solid var(--border-strong);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:3px;justify-content:center;align-items:center;padding:0;transition:background .16s,color .16s,border-color .16s;display:inline-flex}.playback-button:hover:not(:disabled){background:var(--control-hover);border-color:var(--control-hover);color:var(--bg)}.playback-button:active:not(:disabled){background:var(--feedback);border-color:var(--feedback);color:var(--bg)}.playback-button:disabled{cursor:default;color:rgb(from var(--muted) r g b / .55);border-color:var(--border);background:rgb(from var(--control) r g b / .58)}#scene-canvas{background:var(--bg);opacity:0;touch-action:none;display:block;position:absolute;inset:0}#canvas-wrap{touch-action:none;flex:1;min-height:0;position:relative}#canvas-wrap.canvas-ready #scene-canvas{opacity:1}#canvas-wrap.loaded{cursor:crosshair}#canvas-wrap.pan-ready.loaded{cursor:grab}#canvas-wrap.scratching,#canvas-wrap.panning{cursor:grabbing}#canvas-wrap.file-hover:after{content:"Drop audio to add a source";background:rgb(from var(--feedback) r g b / .14);border:2px dashed rgb(from var(--feedback) r g b / .8);color:var(--light);text-transform:uppercase;pointer-events:none;z-index:50;justify-content:center;align-items:center;font-size:17px;font-weight:800;display:flex;position:absolute;inset:0}#path-svg{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}#path-line{fill:none;stroke:rgb(from var(--light) r g b / .9);stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}#cursor-dot{background:var(--feedback);border:2px solid var(--bg);pointer-events:none;will-change:transform;z-index:3;border-radius:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;position:absolute;top:0;left:0;transform:translate(-9999px,-9999px)}#shape-layer{pointer-events:none;z-index:2;position:absolute;inset:0;overflow:hidden}.shape-host{will-change:transform;width:0;height:0;position:absolute;top:0;left:0}.shape-host>*{position:absolute}.shape-host.dragging .shape-center-handle,.shape-host.rotating .shape-rotate-handle{cursor:grabbing}.shape-outline{border:1px solid rgb(from var(--light) r g b / .42);box-sizing:border-box;pointer-events:none}.shape-outline.circle{border-radius:50%}.shape-outline.inner-ring{border-color:rgb(from var(--light) r g b / .22)}.shape-center-handle{pointer-events:auto;cursor:grab;border:2px solid var(--bg);background:currentColor;border-radius:50%;outline:1px solid}.shape-rotate-handle{pointer-events:auto;cursor:alias}.shape-rotate-handle .knob{border:2px solid var(--bg);background:currentColor;border-radius:50%;outline:1px solid;position:absolute}.shape-rotate-handle .stem{opacity:.85;background:currentColor;position:absolute}#overlay{background:rgb(from var(--bg) r g b / .9);cursor:pointer;z-index:65;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#overlay .start-prompt{flex-direction:column;align-items:center;gap:16px;display:flex}#overlay .play-icon{border:2px solid var(--light);border-radius:2px;justify-content:center;align-items:center;width:72px;height:72px;transition:background .2s,transform .2s;display:flex}#overlay .play-icon svg{fill:var(--light);width:32px;height:32px;margin-left:4px}#overlay:hover .play-icon{background:var(--feedback);border-color:var(--feedback);transform:scale(1.08)}#overlay p{color:var(--light);text-align:center;letter-spacing:0;text-transform:uppercase;font-size:16px;line-height:1.6}#overlay.hidden{display:none}.spacer{flex:1}.settings-wrapper{position:relative}.settings-button{white-space:nowrap}.settings-menu{background:rgb(from var(--bg) r g b / .96);border:1px solid var(--border-strong);z-index:20;border-radius:2px;width:188px;padding:10px;position:absolute;top:calc(100% + 10px);right:0}.settings-label{color:var(--muted);text-transform:uppercase;margin-bottom:8px;font-size:10px;font-weight:800}.theme-options{grid-template-columns:1fr 1fr;gap:6px;display:grid}.theme-option{background:var(--control);border:1px solid var(--border-strong);min-height:28px;color:var(--text);cursor:pointer;text-transform:uppercase;border-radius:2px;font-size:10px;font-weight:800}.theme-option:hover,.theme-option.active{background:var(--control-hover);border-color:var(--control-hover);color:var(--bg)}.theme-option:active{background:var(--feedback);border-color:var(--feedback);color:var(--bg)}.info-button{border:1px solid var(--border-strong);background:var(--control);min-height:28px;color:var(--text);text-transform:uppercase;cursor:pointer;border-radius:2px;justify-content:center;align-items:center;padding:5px 12px;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.info-button:hover{background:var(--control-hover);border-color:var(--control-hover);color:var(--bg)}.info-button:active{background:var(--feedback);border-color:var(--feedback);color:var(--bg)}#info-popover{background:rgb(from var(--bg) r g b / .96);border:1px solid var(--border-strong);width:min(420px,100vw - 32px);max-height:calc(100vh - 72px);color:rgb(from var(--text) r g b / .9);border-radius:2px;padding:12px 14px;font-size:12px;line-height:1.45;position:fixed;inset:48px 20px auto auto;overflow:auto}#info-popover::backdrop{background:0 0}#info-popover strong{color:var(--light);letter-spacing:0;text-transform:uppercase;margin-bottom:6px;font-size:11px;display:block}#info-popover p{margin:0}#info-popover a{color:var(--feedback);text-decoration:none}#info-popover a:hover{text-decoration:underline}.info-section+.info-section{border-top:1px solid rgb(from var(--border-strong) r g b / .55);margin-top:14px;padding-top:12px}.attribution-header{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.attribution-header strong{margin-bottom:0;display:inline}.attribution-section.collapsed .attribution-list{display:none}.attribution-list{gap:12px;margin-top:6px;display:grid}.attribution-item{gap:4px;display:grid}.attribution-title{color:var(--text);font-weight:800}.attribution-text{color:var(--muted);overflow-wrap:anywhere;white-space:pre-line}#side-panels{z-index:20;width:clamp(220px,28vw,420px);max-width:420px;color:var(--text);-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;font-size:12px;display:flex;position:absolute;top:12px;right:12px}#sampling-panel,#sources-panel{background:rgb(from var(--bg) r g b / .92);border:1px solid rgb(from var(--border-strong) r g b / .65);border-radius:2px;min-width:220px}#sampling-panel-header,#sources-panel-header{cursor:pointer;background:var(--surface);border-bottom:1px solid rgb(from var(--border-strong) r g b / .5);justify-content:space-between;align-items:center;padding:7px 10px;display:flex}#sampling-panel.collapsed #sampling-panel-header,#sources-panel.collapsed #sources-panel-header{border-bottom:none}#sampling-panel-title,#sources-panel-title{letter-spacing:0;text-transform:uppercase;color:var(--light);font-size:11px;font-weight:800}.panel-toggle{color:var(--light);cursor:pointer;background:0 0;border:none;place-items:center;width:18px;height:18px;padding:0;display:grid}.panel-toggle.open .panel-chevron{transform:rotate(45deg)}.panel-header-actions{align-items:center;gap:8px;display:flex}.panel-action-button{background:var(--control);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;text-transform:uppercase;border-radius:2px;padding:2px 8px;font-size:10px;font-weight:800;line-height:1.2}.panel-action-button:hover{background:var(--control-hover);border-color:var(--control-hover);color:var(--bg)}.panel-action-button:active{background:var(--feedback);border-color:var(--feedback);color:var(--bg)}.add-source-wrapper{display:inline-flex;position:relative}.add-source-file-input{display:none}.add-source-menu{background:rgb(from var(--bg) r g b / .96);border:1px solid var(--border-strong);z-index:20;border-radius:2px;flex-direction:column;gap:2px;min-width:160px;padding:4px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.add-source-menu-item{color:var(--text);cursor:pointer;text-align:left;text-transform:uppercase;white-space:nowrap;background:0 0;border:none;border-radius:2px;padding:6px 10px;font-size:11px;font-weight:700;line-height:1.2}.add-source-menu-item:hover{background:var(--control-hover);color:var(--bg)}.add-source-menu-item:active{background:var(--feedback);color:var(--bg)}.add-source-menu-separator{background:var(--border-strong);height:1px;margin:2px 4px}.panel-chevron{border-bottom:1.5px solid;border-right:1.5px solid;width:7px;height:7px;transition:transform .16s;transform:rotate(-45deg)}#sampling-panel-body{flex-direction:column;gap:8px;padding:8px;display:flex}#sampling-panel.collapsed #sampling-panel-body{display:none}.sampling-control-row{grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;display:grid}.sampling-control-label{letter-spacing:0;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:800}.sampling-speed-controls{align-items:center;gap:6px;display:flex}#speedSelect{background:var(--control);border:1px solid var(--border-strong);width:100%;min-width:0;color:var(--text);cursor:pointer;border-radius:2px;flex:1;padding:5px 8px;font-size:11px;font-weight:700}#sampling-panel #preservePitch,#sampling-panel #smoothPaths{appearance:none;background:var(--control);border:1px solid var(--border-strong);width:16px;height:16px;accent-color:var(--feedback);cursor:pointer;border-radius:2px}:is(#sampling-panel #preservePitch,#sampling-panel #smoothPaths):checked{background:var(--feedback);border-color:var(--feedback)}#speedCustom{background:var(--control);border:1px solid var(--border-strong);color:var(--text);border-radius:2px;flex:0 0 58px;padding:5px 8px;font-size:11px;font-weight:700}#speedCustom.hidden{display:none}#sources-panel-body{flex-direction:column;gap:4px;max-height:60vh;padding:6px;display:flex;overflow-y:auto}#sources-panel.collapsed #sources-panel-body{display:none}.sources-empty-state{color:var(--muted);text-transform:uppercase;padding:10px 8px;font-size:11px;font-weight:700;line-height:1.35}.source-row{background:rgb(from var(--surface) r g b / .78);border:1px solid rgb(from var(--light) r g b / .08);cursor:pointer;border-left-width:3px;border-left-color:currentColor;border-radius:2px;grid-template-columns:8px minmax(0,1fr) auto auto auto;grid-template-areas:"swatch name shape duplicate delete""sliders sliders sliders sliders sliders";align-items:center;gap:4px 6px;padding:5px 6px;display:grid}.source-row>.swatch{grid-area:swatch}.source-row>.name{grid-area:name}.source-row>select{grid-area:shape}.source-row>.source-delete{grid-area:delete}.source-row>.source-duplicate{grid-area:duplicate}.source-row>.sliders{grid-area:sliders}.source-row:hover{background:rgb(from var(--light) r g b / .08)}.source-row.active{background:rgb(from var(--light) r g b / .06);border-color:currentColor}.source-row.loading{background:rgb(from var(--surface) r g b / .92)}.source-row .swatch{border-radius:1px;width:8px;height:22px}.source-row .name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;min-width:0;display:flex;overflow:hidden}.source-row .source-name-text{text-overflow:ellipsis;overflow:hidden}.source-row .source-loading-indicator{letter-spacing:0;text-transform:uppercase;opacity:.7;flex:none;font-size:9px;font-weight:800}.source-row select,.source-row input[type=range]{pointer-events:auto}.source-row select{background:rgb(from var(--bg) r g b / .7);cursor:pointer;border:1px solid;border-radius:2px;padding:1px 4px;font-size:10px;font-weight:700}.source-row input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;min-width:60px;height:4px}.source-row input[type=range]::-webkit-slider-runnable-track{background:currentColor;height:2px}.source-row input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--bg);border:1px solid;border-radius:50%;width:10px;height:10px;margin-top:-4px}.source-row input[type=range]::-moz-range-track{background:currentColor;height:2px}.source-row input[type=range]::-moz-range-thumb{background:var(--bg);border:1px solid;border-radius:50%;width:10px;height:10px}.source-row .sliders{flex-direction:column;gap:3px;min-width:0;display:flex}.source-row .slider-row{cursor:pointer;grid-template-columns:28px 1fr 36px;align-items:center;gap:4px;display:grid}.source-row .slider-icon{text-transform:uppercase;letter-spacing:0;opacity:.65;font-size:9px;font-weight:800}.source-row .slider-value{font-variant-numeric:tabular-nums;text-align:right;opacity:.85;font-size:10px}.source-row .source-action{text-align:center;cursor:pointer;opacity:.6;background:0 0;border:1px solid;height:16px;padding:0;font-size:10px;font-weight:800;line-height:14px}.source-row .source-action:hover{opacity:1;background:rgb(from var(--light) r g b / .08)}.source-row .source-action:disabled{cursor:default;opacity:.25}.source-row .source-delete{border-radius:2px;width:16px;font-size:11px}.source-row .source-duplicate{text-transform:uppercase;border-radius:2px;width:32px;font-size:9px}