[data-theme=dark]{--bg-color-1: oklch(.2 .0001 220);--bg-color-2: oklch(.25 .01 200);--bg-color-3: oklch(.2 .005 210);--sidebar-bg: oklch(27.685% .00003 271.152);--envelope-bg: oklch(.1 .0001 220);--color-text: oklch(.85 .01 240)}[data-theme=light]{--bg-color-1: oklch(.75 .12 85 / .63);--bg-color-2: oklch(.3 .08 155);--bg-color-3: oklch(.25 .07 155 / .75);--sidebar-bg: oklch(35.233% .00004 271.152);--envelope-bg: oklch(.05 .0001 0);--color-text: oklch(.8 .001 0)}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0;box-sizing:border-box;background-color:var(--bg-color-1);color:var(--color-text);text-shadow:-1px -1px 0 rgba(0,0,0,.5),1px -1px 0 rgba(0,0,0,.5),-1px 1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(0,0,0,.5);interpolate-size:allow-keywords;height:clamp(100dvh,100dvh,100dvh);width:clamp(100dvw,100dvw,100dvw)}:root{interpolate-size:allow-keywords}.modal{width:fit-content;padding:1rem;text-align:center;place-items:center;color:#000;z-index:1000}select,::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;background-color:#333;color:var(--color-text)}select{font-size:smaller}selectedcontent,option{display:flex;align-items:center;gap:.5rem}option{padding-block:.1rem}option::checkmark{display:none}option:checked{background-color:#26436e;color:#d6d6d6}gain-lfo-sync-toggle,pitch-lfo-sync-toggle,feedback-mode-toggle,pan-drift-toggle{color:var(--color-text);height:fit-content;padding:0;margin:0}.page-wrapper{overflow-x:auto;overflow-y:auto}.control-grid{display:grid;position:relative;margin:1rem;padding:1rem 2.5rem 1rem 1rem;min-width:max-content;row-gap:1rem;column-gap:1rem;justify-self:center;grid-auto-rows:min-content;border:1px solid #a8a6a692;border-radius:.5rem;background-color:var(--bg-color-2);-webkit-user-select:none;user-select:none;will-change:grid-template-areas,width;transition:grid-template-areas .2s ease,width .2s ease}.control-grid.layout-desktop{grid-template-areas:"env env sample space" "env env filter feedback" "loop trim misc lfo" "toggle keyboard keyboard keyboard";width:1200px;max-width:1200px;max-height:800px}.control-grid.layout-mobile{grid-template-columns:1fr;margin:.5rem;padding:.5rem;width:calc(100vw - 1rem);max-width:100%;box-sizing:border-box;overflow-x:hidden;grid-template-areas:"sample" "env" "keyboard" "loop" "trim" "space" "filter" "misc" "feedback" "lfo" "toggle"}.control-grid.layout-tablet{grid-template-columns:1fr 1fr;grid-template-areas:"env sample" "env filter" "loop trim" "space misc" "feedback feedback" "lfo lfo" "keyboard keyboard" "toggle ."}.control-grid.layout-tablet .row-collapse-icon{display:none;pointer-events:none}.control-grid.layout-tablet .control-group{box-sizing:border-box;overflow:hidden;max-width:95dvw;min-width:0;justify-content:center}.control-grid.layout-tablet .env-group{min-height:150px}.control-grid.layout-tablet .keyboard-group{overflow-x:auto;overflow-y:hidden}.control-grid.layout-tablet piano-keyboard{max-width:100%;overflow-x:auto}.control-grid.layout-tablet envelope-switcher{max-width:100%;overflow:hidden}.control-grid.layout-tablet piano-keyboard webaudio-keyboard{width:100%;max-width:calc(100vw - 2rem)}.control-grid.layout-mobile .row-collapse-icon{display:none;pointer-events:none}.control-grid.layout-mobile .control-group{box-sizing:border-box;overflow:hidden;width:90dvw;max-width:95dvw;min-width:0;justify-content:center}.control-grid.layout-mobile .env-group{min-height:150px}.control-grid.layout-mobile .keyboard-group{overflow-x:auto;overflow-y:hidden}.control-grid.layout-mobile piano-keyboard{max-width:100%;overflow-x:auto}.control-grid.layout-mobile envelope-switcher{max-width:100%;overflow:hidden}.control-grid.layout-mobile piano-keyboard webaudio-keyboard{width:100%;max-width:calc(100vw - 2rem)}.flex-col{display:flex;flex-direction:column;justify-content:center;align-items:center}.flex-row{display:flex;flex-direction:row;justify-content:center;align-items:flex-start}.envelope-buttons{display:flex;gap:0 .5rem;width:fit-content}.envelope-buttons>.button{padding:0 .2rem;border:solid 1px rgba(0,0,0,0);border-radius:5%;color:#000;background-color:#cccccce2;text-shadow:none}.envelope-buttons .button.selected{background-color:#ddd}.envelope-buttons>.button:hover{background-color:#eee;border:1px solid rgb(0,0,0)}.control-group{display:flex;align-self:start;justify-self:center;border:none;border:1px solid #a8a6a692;border-radius:.5rem;padding:.5rem;gap:.5rem;background-color:var(--bg-color-3);will-change:max-height,opacity,width,background-color,padding,border;transition:all .2s ease}.control-group>legend{text-align:center;font-weight:400;color:var(--color-text)}.control-group.collapsed .expandable-content{max-height:0;opacity:0;width:fit-content;pointer-events:none;overflow:hidden}.control-group.collapsed{border:none;border-top:1px solid #a8a6a692;border-radius:0;padding:.5rem 0rem;background-color:transparent}.expandable-content{display:flex;flex-direction:row;gap:.5rem;align-items:flex-start;max-height:60vh;overflow:hidden;opacity:1;transition:max-height .2s ease,opacity .2s ease}.expandable-legend{cursor:pointer;-webkit-user-select:none;user-select:none}.expandable-legend:hover{color:#fff}.feedback-group{grid-area:feedback}.env-group{grid-area:env;height:auto;min-height:300px}.env-group.collapsed{grid-area:env;height:auto;min-height:0}.sample-group{grid-area:sample}.main-controls-group{grid-area:main-ctrl}.space-group{grid-area:space}.loop-group{grid-area:loop}.lfo-container{grid-area:lfo;display:flex;gap:1rem;justify-content:center}.mod-group{grid-area:mod;padding:0 1rem 1rem}.trim-group{grid-area:trim}.filter-group{grid-area:filter}.misc-group{grid-area:misc}.distortion-group{grid-area:distortion}.toggle-group{grid-area:toggle;width:50%;place-self:center}.toggle-group>div{display:grid;justify-content:center;grid-template-columns:repeat(3,1fr);grid-auto-flow:row;gap:.2rem}.toggle-group sampler-status{display:flex;align-items:center;color:#b7b5b5d6}.keyboard-group{grid-area:keyboard;position:relative;min-height:fit-content;height:fit-content;align-items:center;justify-content:center}.keyboard-controls{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;padding-right:1rem}piano-keyboard.hidden{opacity:0;pointer-events:none}piano-keyboard.visible{opacity:1}.keyboard-visual-toggle{background:#444;color:var(--color-text);border:1px solid #666;border-radius:4px;padding:.5rem 1rem;cursor:pointer;font-size:.9rem;width:fit-content;transition:all .2s ease}.keyboard-visual-toggle:hover{background:#555;color:#fff}.keyboard-visual-toggle:active{background:#333}.keyboard-visual{position:absolute;top:-20%;left:5%;width:800px;height:auto;background:transparent;border:none;transition:all .2s ease;overflow:visible;clip-path:inset(0 20% 0 0)}.keyboard-visual.hidden{opacity:0;pointer-events:none}.keyboard-visual.visible{opacity:1;pointer-events:all}.drag-handle{position:absolute;top:.5rem;right:.5rem;width:1rem;height:1rem;background:#999;border-radius:50%;cursor:grab;opacity:.8;transition:opacity .2s ease;z-index:10;outline-offset:2px}.drag-handle:focus-visible{outline:2px solid var(--ac-color-accent, #09f)}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.drag-handle:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;background-image:linear-gradient(90deg,transparent 2px,var(--ac-color-bg-primary) 2px,var(--ac-color-bg-primary) 4px,transparent 4px),linear-gradient(90deg,transparent 6px,var(--ac-color-bg-primary) 6px,var(--ac-color-bg-primary) 8px,transparent 8px),linear-gradient(90deg,transparent 10px,var(--ac-color-bg-primary) 10px,var(--ac-color-bg-primary) 12px,transparent 12px);background-size:16px 2px;background-position:0 2px,0 5px,0 8px;background-repeat:no-repeat}.row-collapse-icon{justify-self:end;align-self:start;width:1.2rem;height:fit-content;margin-top:.5rem;margin-right:-1.85rem;border:none;border-radius:3px;cursor:pointer;opacity:.9;transition:all .2s ease;font-size:.8rem;color:#dedede;-webkit-user-select:none;user-select:none;z-index:10}.row-collapse-icon:hover{opacity:1;background:#fff3;border:1px solid rgba(255,255,255,.35)}.row-collapse-icon:before{content:"﹀";font-weight:700}@media (prefers-reduced-motion: reduce){.expandable-content{transition:none}}.reset-button{display:flex;place-self:center;background:transparent;stroke:#ddd;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:20px;border:none;border-radius:.25rem;width:auto;height:2.5rem;padding:.5rem;cursor:pointer;margin-bottom:1.3rem}.reset-button:hover{border:1px solid #aaa}.pre-sidebar-buttons{position:fixed;top:20px;left:20px;z-index:1001;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin-right:10px}.pre-sidebar-buttons>*{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px}.pre-sidebar-buttons .save-button{padding:0!important}.pre-sidebar-buttons .save-button button{border-radius:4px;border:none!important}.theme-select select{background-color:inherit;border:none;color:inherit;font-size:10px;padding:0;cursor:pointer;outline:none}.theme-toggle{border:none;cursor:pointer;padding:8px;border-radius:50%;font-size:18px;transition:all .2s ease;opacity:.8;width:40px}.left-side-button{background:var(--bg-color-2, #333);color:#fff;padding:10px;border-radius:4px;border:none}.left-side-button,.theme-toggle{z-index:1000;cursor:pointer;background:#333;opacity:1;will-change:opacity,transform;transition:opacity .3s ease,transform .3s ease}.left-side-button.open,.theme-toggle.open{opacity:0;pointer-events:none;transform:translate(-50px)}.left-side-button.hover,.theme-toggle.hover{transform:scale(1.1);background:#444;opacity:1}.left-side-button.active,.theme-toggle.active{transform:scale(.9);opacity:1}tempo-knob{display:flex;justify-content:center;align-items:center;margin-top:10px;padding:0;background-color:inherit;width:40px;height:40px}tempo-knob>div knob-element{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:40px;height:40px}.sidebar{position:fixed;top:0;left:0;height:100dvh;width:20dvw;background:var(--sidebar-bg, #222);color:#fff;z-index:999;transform:translate(-100%);transition:transform .3s ease}.sidebar-open{transform:translate(0)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #444}.close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer}.sidebar-content{padding:20px}.sample-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid #444;margin-bottom:10px;cursor:pointer;border-radius:4px}.sample-item:hover{background:#333}.sample-info{flex:1}.sample-name{font-weight:700}.sample-date{font-size:12px;opacity:.7}.delete-button{background:none;border:none;color:#ddd;cursor:pointer;padding:4px;border-radius:3px;display:flex;align-items:center;justify-content:center;margin-left:10px}.delete-button:hover{background:#ff6b6b33;color:#ff5252}.delete-button svg{pointer-events:none}.no-samples{text-align:center;opacity:.7;margin-top:50px}.sortable-ghost{opacity:.4;background-color:#ffffff1a!important}.sortable-chosen{background-color:#fff3!important}.sortable-drag{opacity:1;transform:rotate(5deg)}