*,:after,:before{box-sizing:border-box}:root{--background-color:#1c1c1c;--main-font-color:#aeadad;--color-sine:#3cabff;--color-sawtooth:#ff5e5e;--color-triangle:#00cd00;--color-square:#b358ff;--color-sine-dim:#2871a7;--color-sawtooth-dim:#a73e3e;--color-triangle-dim:#008600;--color-square-dim:#753aa7;--color-pulse:#ffaf32;--color-pulse-dim:#a77321;--chrome-1:#444;--chrome-2:#666;--chrome-3:#999;--chrome-4:#bbb;--chrome-5:#d1d1d1;--color-play:#6abf6a;--color-play-border:#4a9e5a;--color-play-hover:#88d488;--color-stop:#c45050;--color-stop-hover:#d46a6a;--color-danger:#f83e3e;--color-danger-active:#ff7979;--color-caution:#f8ff3be1;--surface-tint-1:#ffffff08;--surface-tint-2:#ffffff0d;--surface-dark:#232323;--surface-darker:#141414;--chrome-border:#a6a6a6a3;--chrome-tab:#7f7f7f;--surface-border:#2a2a2a;--slider-thumb:#c8c8c8;--slider-track:#9e9e9e60;--toggle-border:#ffffff96;--toggle-border-hover:#ffffff6f;--toggle-border-active:#e9e9e9;--toggle-track:#a1a1a114;--toggle-thumb-border:#ffffffa5;--overlay:rgba(0,0,0,.7);--overlay-heavy:rgba(0,0,0,.85);--color-danger-deep:#b71c1c;--surface-terms:#172131;--tab-accent-1:#c67;--tab-accent-2:#c95;--tab-accent-3:#6a7;--tab-accent-4:#69b;--tab-accent-5:#97b;--tab-accent-6:#b79;--chrome-selected:#fff;--color-modified:var(--color-caution);--text-xs:11px;--text-sm:13px;--text-md:14px;--text-lg:20px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;--radius:4px;--radius-full:50%;--transition-fast:150ms ease-out;--transition-slow:300ms ease-out;--z-grid:0;--z-playhead:2;--z-rail:10;--z-panel:20;--z-dropdown:100;--z-overlay:1000}body{background-color:var(--background-color);color:var(--chrome-5);display:flex;flex-direction:column;font-family:Helvetica,Arial,sans-serif;letter-spacing:.8px;min-height:100vh}#pageContainer{display:flex;flex:1;margin:0;max-width:100vw;position:relative;visibility:hidden;width:100%}.tooltip{animation:tooltipFadeIn .15s ease forwards;background:var(--surface-dark);border:1px solid var(--surface-border);border-radius:var(--radius);bottom:calc(100% + 6px);color:var(--chrome-5);font-size:var(--text-xs);left:50%;opacity:0;padding:var(--space-2) var(--space-4);pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:var(--z-dropdown)}.tooltip-below{bottom:auto;top:calc(100% + 6px)}@keyframes tooltipFadeIn{to{opacity:1}}@media only screen and (max-width:768px) and (orientation:portrait){.tooltip{display:none!important}}#audioWarning{background-color:var(--color-danger);color:#fff;font-size:var(--text-lg);padding:var(--space-5);position:fixed;text-align:center;top:0;visibility:hidden;width:100%;z-index:calc(var(--z-overlay) + 1)}#matrix{contain:content;display:grid;gap:.5px;grid-template-columns:repeat(auto-fit,minmax(2px,1fr));max-height:65vw;max-width:170vh;position:relative;touch-action:none;width:100%;z-index:1}.gridButton{background-color:var(--surface-tint-1);border:1px solid transparent;margin:0;outline:none;padding:0;position:relative}.gridButton[data-chance]:after{background:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(0,0,0,var(--chance-opacity,0)) 2px,rgba(0,0,0,var(--chance-opacity,0)) 4px);content:"";inset:0;pointer-events:none;position:absolute}.gridButton.root-note{background-color:var(--surface-tint-2)}.gridButton.outside-audio,.gridButton.root-note.outside-audio{background-color:var(--surface-tint-1)}.gridButton:hover{border-color:color-mix(in srgb,var(--chrome-3) 45%,transparent)}@media (hover:none){.gridButton:hover{border-color:transparent}}#playhead{background-color:hsla(0,0%,100%,.06);display:none;height:100%;pointer-events:none;position:absolute;top:0;will-change:left;z-index:var(--z-playhead)}.gridButton.active[data-waveform=sine]{border-color:var(--color-sine)}.gridButton.active[data-waveform=sawtooth]{border-color:var(--color-sawtooth)}.gridButton.active[data-waveform=triangle]{border-color:var(--color-triangle)}.gridButton.active[data-waveform=square]{border-color:var(--color-square)}.gridButton.active[data-waveform=pulse]{border-color:var(--color-pulse)}.gridButton.active.playing,.gridButton.playing,.gridButton.root-note.playing{animation:noteGlow var(--glow-duration,.3s) ease-out forwards;border-color:var(--glow-color,#ff0);border-style:solid;border-width:1.15px}.gridButton.root-note.playheadRandom,.playheadRandom{background-color:hsla(0,0%,100%,.06)}.gridButton.active.note-head,.gridButton.active.note-head.playing,.gridButton.active.note-head:hover{border-right-color:transparent!important}.gridButton.active.note-body,.gridButton.active.note-body.playing,.gridButton.active.note-body:hover{border-left-color:transparent!important;border-right-color:transparent!important;opacity:.8}.gridButton.active.note-tail,.gridButton.active.note-tail.playing,.gridButton.active.note-tail:hover{border-left-color:transparent!important}.gridButton.selection-preview{background-color:hsla(0,0%,100%,.08)}.gridButton.selected{box-shadow:inset 0 0 0 1.5px hsla(0,0%,100%,.5)}.gridButton.active.selected{box-shadow:inset 0 0 0 1.5px hsla(0,0%,100%,.75)}.gridButton.move-ghost{opacity:.3!important}.gridButton.move-preview{background-color:hsla(0,0%,100%,.06);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.4)}.controlButtonContainer{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr);margin:0}.presetContainer{align-items:center;display:flex;gap:var(--space-3);margin:0 0 var(--space-2) 0}#presetSelectBox{flex:1;font-size:var(--text-md);height:32px;min-width:0;padding:var(--space-4) var(--space-8) var(--space-4) var(--space-5)}.presetNavButton{background-color:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;flex-shrink:0;font-family:Helvetica,Arial,sans-serif;font-size:var(--text-lg);height:32px;line-height:1;padding:0;transition:color var(--transition-fast),border-color var(--transition-fast);width:32px}.presetNavButton:hover{border-color:var(--chrome-4);color:var(--chrome-5)}@media (hover:none){.presetNavButton:hover{border-color:var(--chrome-border);color:var(--main-font-color)}}.colItem{display:flex;flex-direction:column;gap:var(--space-4);width:100%}#playStopButton{background-color:transparent;border:.5px solid var(--color-play-border);border-radius:var(--radius);color:var(--color-play);cursor:pointer;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:var(--text-lg);letter-spacing:3px;margin:var(--space-3) 0 0 0;padding:var(--space-3) var(--space-7);text-align:center;transition:color var(--transition-fast),border-color var(--transition-fast)}#playStopButton:hover{border-color:var(--color-play-border);color:var(--color-play-hover)}#playStopButton.stopState{border-color:var(--color-stop);color:var(--color-stop)}#playStopButton.stopState:hover{color:var(--color-stop-hover)}.tabContainer{width:100%}.tabs{border-bottom:1px solid var(--chrome-tab);display:flex;margin-bottom:var(--space-2);margin-top:var(--space-2);white-space:nowrap}.tabButton{background-color:transparent;border-bottom:1px solid var(--chrome-tab);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);color:var(--chrome-tab);cursor:pointer;display:inline-block;font-size:var(--text-sm);letter-spacing:.5px;margin-bottom:-1px;padding:var(--space-3) var(--space-4)}.tabButton:hover{background-color:var(--surface-tint-1)}.lfoGroup,.section-title{background:var(--surface-tint-1);color:var(--chrome-2);font-size:var(--text-xs);font-weight:600;letter-spacing:1.2px;margin:var(--space-1) 0 var(--space-1) 0;padding:var(--space-3) var(--space-2);text-transform:uppercase}.section-title:first-child{margin-top:0}#panelSequencer .section-title{margin-bottom:0}.section-title--grid{grid-column:1/-1}@media (hover:none){.tabButton:hover{background-color:transparent}}.tabContent>div{display:none;gap:var(--space-4);grid-template-columns:repeat(2,1fr);min-width:0}.tabContent{min-width:0}.tabContent,.tabs{grid-column:1/-1}.tabContainer:has(#fxTab1:checked) .tabContent #fxTab1Content,.tabContainer:has(#fxTab2:checked) .tabContent #fxTab2Content,.tabContainer:has(#optionsTab1:checked) .tabContent #optionsTab1Content,.tabContainer:has(#optionsTab2:checked) .tabContent #optionsTab2Content,.tabContainer:has(#optionsTab3:checked) .tabContent #optionsTab3Content,.tabContainer:has(#oscTab1:checked) .tabContent #oscTab1Content,.tabContainer:has(#oscTab2:checked) .tabContent #oscTab2Content,.tabContainer:has(#oscTab3:checked) .tabContent #oscTab3Content,.tabContainer:has(#oscTab4:checked) .tabContent #oscTab4Content{display:grid}#oscTab1Content,#oscTab3Content,#oscTab4Content{gap:var(--space-6)}.tabContainer:has(#fxTab1:checked) label[for=fxTab1],.tabContainer:has(#fxTab2:checked) label[for=fxTab2],.tabContainer:has(#optionsTab1:checked) label[for=optionsTab1],.tabContainer:has(#optionsTab2:checked) label[for=optionsTab2],.tabContainer:has(#optionsTab3:checked) label[for=optionsTab3],.tabContainer:has(#oscTab1:checked) label[for=oscTab1],.tabContainer:has(#oscTab2:checked) label[for=oscTab2],.tabContainer:has(#oscTab3:checked) label[for=oscTab3],.tabContainer:has(#oscTab4:checked) label[for=oscTab4]{border:1px solid var(--chrome-tab);border-bottom-color:var(--background-color);color:var(--chrome-4)}.tabButton--colors span:first-child{color:var(--tab-accent-1)}.tabButton--colors span:nth-child(2){color:var(--tab-accent-2)}.tabButton--colors span:nth-child(3){color:var(--tab-accent-3)}.tabButton--colors span:nth-child(4){color:var(--tab-accent-4)}.tabButton--colors span:nth-child(5){color:var(--tab-accent-5)}.tabButton--colors span:nth-child(6){color:var(--tab-accent-6)}.tabContent .envDimmedContainer{display:grid;gap:var(--space-6);grid-column:1/-1;grid-template-columns:repeat(2,1fr)}.tabContent .envToggleButton{grid-column:1/-1}.gen-density{align-items:center;display:grid;gap:var(--space-6);grid-template-columns:auto 1fr}.gen-density .sliderItem{visibility:visible}.tabContent .colItem{grid-column:1/-1}.labelContainer{align-items:center;display:flex;justify-content:space-between;min-width:0;overflow:hidden}.labelContainer label{overflow:hidden;text-overflow:ellipsis}.labelContainer .sliderValueDisplay{flex-shrink:0}label{font-weight:500;white-space:nowrap}.controlButton,label{color:var(--main-font-color);font-size:var(--text-sm)}.controlButton{background-color:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);cursor:pointer;display:inline-block;font-family:Helvetica,Arial,sans-serif;letter-spacing:.5px;padding:var(--space-3) var(--space-4);text-align:center;transition:color var(--transition-fast),border-color var(--transition-fast)}.controlButton:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.visualizer-row{align-items:center;display:flex;gap:var(--space-4);grid-column:1/-1;margin-bottom:var(--space-5)}.visualizer-row .spectrumRow{flex:1;min-width:0}.visualizer-row .themeBrowser{flex:2;margin-bottom:0;margin-top:var(--space-3);min-width:0;padding:0 var(--space-5) 0 0}.visualizer-row .themeBrowser #vizThemePrevButton{margin-left:var(--space-8)}.visualizer-row .themeBrowser #vizThemeNextButton{margin-right:var(--space-8)}.themeBrowser{align-items:center;display:flex;gap:var(--space-4);grid-column:1/-1;justify-content:center;margin-bottom:var(--space-3)}.themeName{color:var(--main-font-color);font-size:var(--text-sm);min-width:88px;text-align:center;white-space:nowrap}.utilButtons{display:grid;gap:var(--space-5);grid-template-columns:1fr 1fr}.utilButtons,.utilButtons .download-control-button{grid-column:1/-1}.utilButtons .controlButton{align-items:center;display:inline-flex;gap:var(--space-3);justify-content:center;padding-bottom:var(--space-4);padding-top:var(--space-4);width:100%}.utilButtons .controlButton svg{flex-shrink:0;vertical-align:middle}@media (hover:none){.controlButton:hover{border-color:var(--chrome-border);color:var(--main-font-color)}}.lfoToggleButton{margin-bottom:var(--space-2);margin-top:var(--space-2);padding:var(--space-3) var(--space-4)}#clearButton:hover{border:.5px solid var(--color-danger);color:var(--chrome-5)}@media (hover:none){#clearButton:hover{border:.5px solid var(--chrome-border);color:var(--chrome-3)}}#clearButton:active{border:.5px solid var(--color-danger-active)}#clearButton.confirm-pending,#resetAllButton.confirm-pending{border-color:var(--color-danger);color:var(--color-danger)}#resetSlidersButton:hover{border:.5px solid var(--color-caution);color:var(--chrome-5)}@media (hover:none){#resetSlidersButton:hover{border:.5px solid var(--chrome-1);color:var(--chrome-3)}}#resetSlidersButton:active{border:.5px solid var(--color-caution)}#resetSlidersButton.confirm-pending{border-color:var(--color-caution);color:var(--color-caution)}.exportImportButton{padding:var(--space-3) var(--space-4)}.exportImportButton:active{border-color:var(--chrome-5)}.selectBox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNhMGEwYTAiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTEgMSA1IDUgNS01Ii8+PC9zdmc+);background-position:right 6px center;background-repeat:no-repeat;background-size:12px 8px;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;font-size:var(--text-sm);letter-spacing:.5px;padding-left:var(--space-7);padding-right:var(--space-8);text-align:left;transition:color var(--transition-fast),border-color var(--transition-fast);width:100%}.selectBox:hover{border:.5px solid var(--chrome-4);color:var(--chrome-5)}.selectBox:focus{background-color:transparent;border-color:var(--chrome-1);box-shadow:none;outline:.2px solid var(--chrome-selected)}@media (hover:none){.selectBox:hover{background-color:transparent;color:var(--chrome-3)}}.controlButton.lfoEnabled{border-color:var(--chrome-selected)}#fileInput{display:none}#scaleSelectBox{margin-top:0;padding:var(--space-4) var(--space-3)}.scaleTempoRow .scaleContainer{align-items:center;display:flex}#gridSizeSelectBox{font-size:var(--text-md);padding:0 var(--space-8) 0 var(--space-6)}.scaleContainer{display:flex;flex-direction:column;width:100%}.gen-options{display:grid;gap:var(--space-5);grid-template-columns:1fr 1fr;margin-bottom:var(--space-3);margin-top:var(--space-5)}.gen-option[aria-pressed=true]{border-color:var(--chrome-selected)}.randomize-notes-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr 1fr}.hidden,input[type=radio]{display:none}.hidden{visibility:hidden}.lfoDisabled{opacity:.5;pointer-events:none}.editGroup{align-items:center;align-self:start;display:flex;flex-direction:column;width:100%}.editGroup>.section-title{margin-bottom:var(--space-6)}.moveNotesContainer{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.horizontalButtons{display:flex;gap:var(--space-1);justify-content:space-between;width:76px}.transposeContainer{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-3)}.transposeLabel{color:var(--chrome-2);font-size:var(--text-sm);font-weight:500}.sliderItem.wide{grid-column:span 2}.editArrowButton{background-color:transparent;border:.5px solid transparent;border-radius:var(--radius);cursor:pointer;height:var(--space-8);position:relative;transition:border-color var(--transition-fast);width:var(--space-8)}.editArrowButton:hover{border-color:var(--chrome-4)}.editArrowButton:active{border-color:var(--chrome-5)}.editArrowButton.leftArrow:before{left:60%;transform:translate(-50%,-50%) rotate(-45deg)}.editArrowButton.leftArrow:before,.editArrowButton.rightArrow:before{border-left:1.5px solid var(--chrome-3);border-top:1.5px solid var(--chrome-3);content:"";height:10px;position:absolute;top:50%;width:10px}.editArrowButton.rightArrow:before{left:40%;transform:translate(-50%,-50%) rotate(135deg)}.editArrowButton.downArrow:before{top:40%;transform:translate(-50%,-50%) rotate(-135deg)}.editArrowButton.downArrow:before,.editArrowButton.upArrow:before{border-left:1.5px solid var(--chrome-3);border-top:1.5px solid var(--chrome-3);content:"";height:10px;left:50%;position:absolute;width:10px}.editArrowButton.upArrow:before{top:60%;transform:translate(-50%,-50%) rotate(45deg)}.noiseTypeContainer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-3)}.noiseTypeButton{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.noiseTypeButton.selected{border-color:var(--chrome-selected)}.filterEnvDirectionContainer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}.filterEnvDirectionButton.selected{border-color:var(--chrome-selected)}.tabContent #oscTab3Content,.tabContent #oscTab4Content{grid-template-columns:1fr}.subOscOctaveContainer,.subOscWaveContainer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-3)}.subOscOctaveButton,.subOscWaveButton{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.subOscOctaveButton.selected,.subOscWaveButton.selected{border-color:var(--chrome-selected)}.filterSection{display:flex;flex-direction:column;gap:var(--space-4)}.filterGrid{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr)}.filterGrid .filterEnvAmountItem,.filterGrid .filterEnvDirectionContainer{grid-column:1/-1}.envDimmedContainer{transition:opacity var(--transition-fast)}.envDimmedContainer.lfoDisabled{opacity:.5;pointer-events:none}.lfoSyncRow{align-items:center;display:flex;gap:var(--space-3)}.lfoSyncButton,.lfoSyncDivision{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.lfoSyncDivision{max-width:64px}.lfoSyncActive{opacity:.4;pointer-events:none}.delaySyncContainer{grid-column:1/-1}.effect-separator{background-color:var(--surface-tint-2);grid-column:1/-1;height:1px;margin:var(--space-2) 0}.colorPicker{background-color:transparent;border:0;border-radius:var(--radius);cursor:pointer;height:28px;width:100%}.colorPickerInline{flex-shrink:0;height:32px;width:32px}.colorPickerInline:disabled{opacity:.5;pointer-events:none}.color-picker-grid{display:grid;gap:var(--space-3) var(--space-5);grid-template-columns:1fr 1fr}.sliderItem.colorPickerRow{margin:0}.sliderItem.colorPickerRow,.spectrumRow{align-items:center;flex-direction:row;justify-content:space-between}.spectrumSliderRow{align-items:center;flex-direction:row;gap:var(--space-4);grid-column:1/-1}.spectrumSliderRow label{flex-shrink:0}.spectrumSliderRow input[type=range]{flex:1;min-width:0}.spectrumSliderRow .sliderValueDisplay{flex-shrink:0;min-width:2rem;text-align:right}#spectrumControls{transition:opacity var(--transition-fast)}#spectrumControls.disabled{opacity:.5;pointer-events:none}.sliderContainer{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr);height:auto;opacity:1;overflow:hidden;padding:var(--space-1) 0;width:100%}.sliderContainer.collapsed{height:0}.sliderItem{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;visibility:hidden}.sliderValueDisplay{color:var(--chrome-3);font-size:var(--text-sm);white-space:nowrap}.tempoCol{gap:0}.tempoHeader{align-items:center;display:flex;justify-content:space-between}.tapTempoButton{background:transparent;border:.5px solid var(--chrome-3);border-radius:var(--radius);color:var(--chrome-4);cursor:pointer;font-size:var(--text-xs);font-weight:600;letter-spacing:1px;margin-top:var(--space-1);padding:var(--space-1) var(--space-5);text-transform:uppercase;transition:border-color var(--transition-fast),color var(--transition-fast)}.tapTempoButton:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.tapTempoButton:active{border-color:var(--color-caution);color:var(--color-caution)}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border-radius:var(--radius);cursor:pointer;height:20px;transition:opacity var(--transition-fast);width:95%}input[type=range]:hover{opacity:1}input[type=range]:focus{background:transparent;outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--slider-track);border-radius:var(--space-1);height:.5px;width:95%}input[type=range]::-moz-range-track{background:var(--slider-track);border-radius:var(--space-1);height:.5px;width:95%}input[type=range]::-ms-track{background:var(--slider-track);border-radius:var(--space-1);height:.5px;width:95%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--background-color);border:.5px solid var(--slider-thumb);border-radius:var(--radius);cursor:pointer;height:20px;padding:0;transform:translateY(-50%);transition:background-color var(--transition-fast);width:20px}input[type=range]::-moz-range-thumb{appearance:none;background:var(--background-color);border:.5px solid var(--slider-thumb);border-radius:var(--radius);cursor:pointer;height:20px;padding:0;transition:background-color var(--transition-fast);width:20px}input[type=range]::-moz-range-thumb:hover{border:1px solid var(--chrome-selected)}input[type=range]::-webkit-slider-thumb:hover{border:1px solid var(--chrome-selected)}.randomizeDice{align-self:center;background-color:transparent;border:.5px solid var(--chrome-3);border-radius:var(--radius);cursor:pointer;height:2rem;justify-self:center;position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast);width:2rem}.randomizeDice:before{background:var(--chrome-4);border-radius:50%;box-shadow:-7px -7px 0 var(--chrome-4),7px -7px 0 var(--chrome-4),-7px 7px 0 var(--chrome-4),7px 7px 0 var(--chrome-4);content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.randomizeDice:hover{background-color:var(--surface-tint-1);color:var(--chrome-5)}#randomGenDice:hover{background-color:var(--surface-tint-2);border:.5px solid var(--chrome-selected)}.waveformBox{border:2px solid transparent;border-radius:var(--radius);cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;transition:border-color var(--transition-fast);width:24px}.waveformBox.selected{border-color:var(--color-caution)}.waveformBox:hover{border:2px solid var(--chrome-3)}.waveformBox.selected:hover,.waveformBox:focus{border-color:var(--color-caution)}.sineBox{background-color:var(--color-sine-dim)}.sawtoothBox,.sineBox{border-radius:var(--radius)}.sawtoothBox{background-color:var(--color-sawtooth-dim)}.triangleBox{background-color:var(--color-triangle-dim)}.squareBox,.triangleBox{border-radius:var(--radius)}.squareBox{background-color:var(--color-square-dim)}.pulseBox{background-color:var(--color-pulse-dim);border-radius:var(--radius)}.waveformImage{display:inline-block;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:80%;mask-size:80%;vertical-align:middle;width:24px}.sine{background-color:var(--color-sine);-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 C 8,31 17,13 25,13 C 33,13 42,31 50,50 C 58,69 67,87 75,87 C 83,87 92,69 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 C 8,31 17,13 25,13 C 33,13 42,31 50,50 C 58,69 67,87 75,87 C 83,87 92,69 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.sawtooth{background-color:var(--color-sawtooth);-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 100,13 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 100,13 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.triangle{background-color:var(--color-triangle);-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 L 25,13 L 75,87 L 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 L 25,13 L 75,87 L 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.square{background-color:var(--color-square);-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,13 L 50,13 L 50,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,13 L 50,13 L 50,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.lfoPulse,.pulse{background-color:var(--color-pulse);-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 0,13 L 25,13 L 25,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 0,13 L 25,13 L 25,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.noteLengthSelectContainer{align-items:center;display:flex;gap:var(--space-3);margin-bottom:0;margin-top:0}.noteLengthBox{border:1px solid var(--chrome-1);border-radius:var(--radius);cursor:pointer;height:12px;position:relative;transition:border-color var(--transition-fast);user-select:none}.noteLengthBox:hover{border-color:var(--chrome-3)}.noteLengthBox[data-notelength="1"]{width:15px}.noteLengthBox[data-notelength="2"]{width:20px}.noteLengthBox[data-notelength="3"]{width:26px}.noteLengthBox[data-notelength="4"]{width:35px}.noteLengthBox[data-notelength="6"]{width:55px}.noteLengthBox[data-notelength="8"]{width:77px}.noteLengthBox.selected{border-color:var(--chrome-5)}.noteLengthBox.selected:hover{border-color:var(--chrome-selected)}.waveformSelectContainer{grid-template-columns:repeat(6,auto);margin:0}.arrowsContainer,.waveformSelectContainer{display:grid;justify-content:space-between}.arrowsContainer{grid-template-columns:repeat(5,auto);margin-bottom:0}.arrowButton{border:.5px solid transparent;border-radius:var(--radius);color:var(--chrome-3);cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;transition:color var(--transition-fast),border-color var(--transition-fast);width:24px}.arrowButton,.arrowButton:hover{background-color:hsla(0,0%,100%,0)}.arrowButton:hover{border:.5px solid var(--chrome-selected);color:var(--chrome-selected)}@media (hover:none){.arrowButton:hover{background-color:hsla(0,0%,100%,0);border:.5px solid transparent;color:var(--chrome-3)}}.arrowButton.selected{background-color:hsla(0,0%,100%,0);border:.5px solid var(--chrome-selected);color:var(--chrome-selected)}.arrowButton.forwardArrow:before{left:50%;transform:translate(-80%,-50%) rotate(135deg)}.arrowButton.backwardArrow:before,.arrowButton.forwardArrow:before{border-left:1.5px solid var(--chrome-3);border-top:1.5px solid var(--chrome-3);content:"";height:12px;position:absolute;top:50%;width:12px}.arrowButton.backwardArrow:before{left:60%;transform:translate(-50%,-50%) rotate(-45deg)}.arrowButton.bounceArrow:before{left:45%;transform:translate(-50%,-50%);transform:translate(-120%,-50%) rotate(135deg)}.arrowButton.bounceArrow:after,.arrowButton.bounceArrow:before{border-left:1.5px solid var(--chrome-3);border-top:1.5px solid var(--chrome-3);content:"";height:10px;position:absolute;top:50%;width:10px}.arrowButton.bounceArrow:after{left:55%;transform:translate(-50%,-50%);transform:translate(20%,-50%) rotate(-45deg)}.arrowButton.randomArrow:before{left:50%;top:50%;transform:translate(-50%,-60%) scale(.8)}.arrowButton.columnsArrow div:before,.arrowButton.columnsArrow:after,.arrowButton.columnsArrow:before{background-color:var(--chrome-3);content:"";height:60%;position:absolute;width:2px}.arrowButton.columnsArrow:before{left:4px;top:50%;transform:translateY(-50%)}.arrowButton.columnsArrow div:before{left:11px;top:50%;transform:translateY(-50%)}.arrowButton.columnsArrow:after{left:18px;top:50%;transform:translateY(-50%)}.lfoWaveformContainer{display:grid;grid-template-columns:repeat(4,auto);height:100%;justify-content:space-around}.lfoWaveformButton{align-items:center;background-color:transparent;border:.5px solid var(--chrome-3);border-radius:var(--radius);cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:border-color var(--transition-fast);width:32px}.lfoWaveformButton:hover{border-color:var(--chrome-4)}.lfoWaveformButton.selected{border-color:var(--chrome-selected)}.lfoWaveformButton:before{background-color:var(--chrome-3);content:"";display:block;height:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:background-color var(--transition-fast);width:16px}.lfoWaveformButton.selected:before,.lfoWaveformButton:hover:before{background-color:var(--chrome-selected)}.lfoSine:before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 C 8,31 17,13 25,13 C 33,13 42,31 50,50 C 58,69 67,87 75,87 C 83,87 92,69 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 C 8,31 17,13 25,13 C 33,13 42,31 50,50 C 58,69 67,87 75,87 C 83,87 92,69 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.lfoSawtooth:before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 100,13 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,87 L 100,13 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.lfoTriangle:before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 L 25,13 L 75,87 L 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,50 L 25,13 L 75,87 L 100,50%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.lfoSquare:before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,13 L 50,13 L 50,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M 0,13 L 50,13 L 50,87 L 100,87%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E")}.lfoColumn{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-1)}.slide-panel .lfoColumn .sliderItem{visibility:visible}.toggle-container{--toggle-width:44px;--toggle-height:10px;--button-size:22px;--border-thickness:0.5px;display:inline-block;position:relative}.toggle-checkbox{display:none}.toggle-label{background-color:var(--toggle-track);border:var(--border-thickness) solid var(--toggle-border);border-radius:var(--radius);cursor:pointer;display:inline-block;height:var(--toggle-height);position:relative;transition:border-color var(--transition-fast) ease;width:var(--toggle-width)}.toggle-button{background-color:var(--background-color);border:var(--border-thickness) solid var(--toggle-thumb-border);border-radius:var(--radius);content:"";height:var(--button-size);left:var(--border-thickness);position:absolute;top:50%;transform:translateY(-50%);transition:left var(--transition-fast) ease;width:var(--button-size)}.toggle-checkbox:checked+.toggle-label .toggle-button{border-color:var(--toggle-border-active);left:calc(100% - var(--button-size) - var(--border-thickness))}.toggle-label:hover{border-color:var(--toggle-border-hover)}.toggle-button:hover{border-color:var(--toggle-border-active)}.mobile-audio-popup{align-items:center;background-color:var(--overlay);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--z-overlay)}.mobile-audio-popup-content{background-color:var(--background-color);border:.5px solid var(--chrome-1);border-radius:var(--radius);color:var(--chrome-4);padding:var(--space-8);text-align:center}.mobile-audio-popup-button{background-color:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:var(--text-sm);letter-spacing:.5px;padding:var(--space-3) var(--space-4);text-align:center;transition:color var(--transition-fast),border-color var(--transition-fast)}.mobile-audio-popup-button:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.popup-logo-container{align-items:center;display:flex;justify-content:center}.popup-logo-container img{height:80px;width:80px}.about-popup{align-items:center;background-color:var(--overlay);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--z-overlay)}.about_logo{height:300px;width:300px}.about-popup a,.about-popup a:active,.about-popup a:hover,.about-popup a:visited{color:var(--chrome-4)}.about-popup-content{background-color:var(--background-color);border:.5px solid var(--chrome-1);border-radius:var(--radius);color:var(--chrome-4);height:auto;min-width:300px;padding:var(--space-8);text-align:center;width:60%}.about-popup-button{background-color:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:var(--text-sm);letter-spacing:.5px;padding:var(--space-3) var(--space-4);text-align:center;transition:color var(--transition-fast),border-color var(--transition-fast)}.about-popup-button:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.about-popup-logo-container{align-items:center;display:flex;justify-content:center}.about-popup-logo-container img{height:80px;width:80px}.about-popup-description{margin-top:var(--space-7);text-align:left}.about-popup-footer{color:var(--chrome-1);display:none;font-size:var(--text-xs);margin-top:var(--space-7)}.about-popup .about-popup-footer a{color:var(--chrome-1);text-decoration:none}#header{visibility:hidden}.header{background-color:transparent;justify-content:space-between;margin:0 auto var(--space-5);width:95vw}.header,.header-items{align-items:center;display:flex}.header-items{gap:var(--space-5)}.logo{align-self:center;cursor:pointer;margin:0 0 0 var(--space-8);width:220px}@media only screen and (max-width:768px) and (orientation:portrait){.header{padding:0 var(--space-4);width:100%}.logo{align-self:center;cursor:pointer;margin:0;width:150px}.share-button{font-size:var(--text-xs);padding:var(--space-3) var(--space-4);width:auto}.download-button{margin-left:var(--space-3);width:auto}.header-undo-redo,.undo-feedback{display:none}}.link-icon{height:var(--text-md);width:var(--text-md)}.site-title{color:var(--chrome-4);font-size:var(--text-md);font-weight:700;letter-spacing:.3rem;margin:0;text-transform:uppercase}.header-right{gap:var(--space-5)}.header-right,.share-button{align-items:center;display:flex}.share-button{background-color:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:var(--text-sm);gap:var(--space-4);letter-spacing:.5px;padding:var(--space-3) var(--space-4);position:relative;text-align:center;transition:color var(--transition-fast),border-color var(--transition-fast);width:80px}.share-button.loading .share-button-text{visibility:hidden}.share-button.loading .spinner{display:inline-block;margin-left:0;opacity:1;visibility:visible}.share-button:focus,.share-button:hover{border:.5px solid var(--chrome-4);color:var(--chrome-4);outline:none}.share-button i,.share-button svg{margin-right:var(--space-5)}.share-button.copied .checkmark{display:inline-block;opacity:1;visibility:visible}.share-button.copied .link-icon,.share-button.loading .link-icon{display:none}.share-button.copied,.share-button.loading{justify-content:center}.share-button-text{white-space:nowrap}.spinner{animation:spin .8s linear infinite;border:1px solid var(--chrome-5);border-radius:var(--radius-full);border-top:1px solid transparent;display:none;height:var(--text-md);width:var(--text-md)}@keyframes spin{to{transform:rotate(1turn)}}.checkmark{display:none;height:var(--text-md);opacity:0;padding:0;visibility:hidden;width:var(--text-md)}.download-button{gap:0;margin-left:var(--space-4);width:104px}.download-button.loading{justify-content:center}.download-button.loading .download-button-text,.download-button.loading .download-icon{display:none}.download-button.loading .spinner{display:inline-block;margin-left:0;opacity:1;visibility:visible}.download-button.done .download-button-text{color:var(--color-play)}.download-button.done .download-icon{stroke:var(--color-play)}.download-button-text{white-space:nowrap}#miniControls{align-items:center;display:none;gap:var(--space-4)}#miniControls.visible{display:flex}.mini-control-btn{align-items:center;background:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;display:flex;height:36px;justify-content:center;padding:0;position:relative;transition:color var(--transition-fast),border-color var(--transition-fast);width:36px}.mini-control-btn:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.mini-play-btn{color:var(--color-play)}.mini-play-btn,.mini-play-btn:hover{border-color:var(--color-play-border)}.mini-play-btn:hover{color:var(--color-play-hover)}.mini-play-btn.stopState{border-color:var(--color-stop);color:var(--color-stop)}.header-undo-redo[disabled]{border-color:color-mix(in srgb,var(--chrome-border) 50%,transparent);color:color-mix(in srgb,var(--main-font-color) 50%,transparent)}.undo-feedback{color:var(--chrome-3);font-size:var(--text-xs);opacity:0;pointer-events:none;transition:opacity var(--transition-slow);white-space:nowrap}.undo-feedback.visible{opacity:1}@media only screen and (max-width:430px){.header:has(#miniControls.visible) .download-button-text,.header:has(#miniControls.visible) .share-button-text{display:none}.header:has(#miniControls.visible) .download-button,.header:has(#miniControls.visible) .share-button{gap:0;min-width:0;padding:var(--space-3);width:auto}.header:has(#miniControls.visible) .download-button{margin-left:0}.header:has(#miniControls.visible) .header-undo-redo,.header:has(#miniControls.visible) .undo-feedback{display:none}.header:has(#miniControls.visible) .share-button i,.header:has(#miniControls.visible) .share-button svg{margin-right:0}}.footer{box-sizing:border-box;font-size:var(--text-xs);margin:0 0 var(--space-6) var(--space-5);width:95vw}.footer,.footer a{color:var(--chrome-1)}.footer a{text-decoration:none}#about{cursor:pointer}.terms-body{background-color:var(--surface-terms);color:#fff;font-family:Arial,sans-serif;line-height:1.6;margin:var(--space-7);max-width:800px}.terms-body h1,.terms-body h2,.terms-body h3{color:#fff}.terms-body h1{text-align:center}.terms-body hr{margin:var(--space-8) 0}.terms-body a{color:#fff}@media only screen and (max-width:768px) and (orientation:portrait){body,html{height:100vh;height:100svh;overflow:hidden}body{min-height:0;padding-bottom:36px}#pageContainer{flex-direction:column;min-height:0;touch-action:pan-y;width:100%}#sidebarArea{order:0}.arrowButton.columnsArrow:before{left:8px}.arrowButton.columnsArrow div:before{left:20px}.arrowButton.columnsArrow:after{left:32px}#gridArea{order:1;overflow:hidden;padding:0 var(--space-1);width:100%}#matrix{flex:1;height:auto;max-width:100%;min-height:0;width:100%}.footer{display:none}.about-popup-footer{display:block}#playStopButton{border-width:1.5px;font-size:var(--text-lg);padding:var(--space-5) var(--space-5)}.controlButton,.exportImportButton,.selectBox{padding:var(--space-5)}.controlButtonContainer{margin:var(--space-5) 0 var(--space-4) 0}.boxesLabel,.sliderValueDisplay,label{font-size:var(--text-md)}.labelContainer{padding-right:var(--space-6)}.arrowsContainer,.waveformSelectContainer{gap:var(--space-7);justify-content:space-between;padding-right:var(--space-6)}.arrowButton,.waveformBox,.waveformImage{height:40px;width:40px}.waveformImage{height:24px;width:24px}#scaleSelectBox{font-size:var(--text-xs);overflow:hidden;padding-left:var(--space-5);padding-right:var(--space-8);text-overflow:ellipsis}#clearButton br,#resetSlidersButton br{display:none}.arrowButton.randomArrow:before{left:47%;top:47%;transform:translate(-50%,-50%) scale(1.5)}.arrowButton.forwardArrow:before{transform:translate(-80%,-50%) rotate(135deg) scale(1.5)}.arrowButton.backwardArrow:before{transform:translate(-50%,-50%) rotate(-45deg) scale(1.5)}.arrowButton.bounceArrow:before{transform:translate(-170%,-50%) rotate(135deg) scale(1.5)}.arrowButton.bounceArrow:after{transform:translate(80%,-50%) rotate(-45deg) scale(1.5)}.mobile-play-row{display:flex;gap:var(--space-3);position:relative;width:100%}.mobile-play-row #playStopButton{flex:7;margin:0}.mobile-play-row .mobile-undo-redo{display:flex;flex:1;flex-direction:column;gap:var(--space-3);min-width:0}.mobile-play-row .mobile-undo-redo .mini-control-btn{flex:1;width:100%}.mobile-play-row .header-undo-redo{display:flex}#gridArea{position:relative}#gridArea>#undoRedoFeedback{display:block;font-size:var(--text-xs);left:var(--space-4);position:absolute;top:var(--space-2);z-index:1}#panelSound .tabContent{display:grid}#panelSound .tabContent>div{align-content:start;display:grid;grid-area:1/1;opacity:0;pointer-events:none;z-index:0}#panelSound .tabContainer:has(#oscTab1:checked) .tabContent #oscTab1Content,#panelSound .tabContainer:has(#oscTab2:checked) .tabContent #oscTab2Content,#panelSound .tabContainer:has(#oscTab3:checked) .tabContent #oscTab3Content,#panelSound .tabContainer:has(#oscTab4:checked) .tabContent #oscTab4Content{opacity:1;pointer-events:auto;z-index:1}.lfoSyncButton{min-width:52px}.filterEnvDirectionButton{padding-left:var(--space-7);padding-right:var(--space-7)}#transportControls{padding-left:var(--space-1);padding-right:var(--space-1)}.header{padding-right:0}.header-right{margin-left:auto}.header-right .header-items{gap:var(--space-1)}.header-right .download-button{margin-left:0}}@media only screen and (max-width:500px) and (orientation:portrait){.arrowButton.randomArrow:before{left:47%;top:47%;transform:translate(-50%,-50%) scale(1)}.arrowButton.forwardArrow:before{transform:translate(-80%,-50%) rotate(135deg) scale(1)}.arrowButton.backwardArrow:before{transform:translate(-50%,-50%) rotate(-45deg) scale(1)}.arrowButton.bounceArrow:before{transform:translate(-120%,-50%) rotate(135deg) scale(1)}.arrowButton.bounceArrow:after{transform:translate(20%,-50%) rotate(-45deg) scale(1)}.arrowButton.columnsArrow:before{left:4px}.arrowButton.columnsArrow div:before{left:12px}.arrowButton.columnsArrow:after{left:20px}.arrowsContainer,.waveformSelectContainer{gap:var(--space-3)}.labelContainer{padding-right:var(--space-5)}.arrowButton{height:30px;width:30px}.waveformBox{height:25px;width:25px}}@media (max-width:300px) and (orientation:portrait){.arrowsContainer,.waveformSelectContainer{gap:var(--space-3)}.arrowButton,.waveformBox{height:15px;width:15px}#scaleSelectBox{padding:var(--space-1)}.controlButton{font-size:var(--text-xs)}}#iconRail{align-self:start;background-color:var(--surface-tint-1);border-right:1px solid var(--surface-border);flex-direction:column;gap:var(--space-1);min-width:44px;padding:var(--space-2) 0;z-index:var(--z-rail)}#iconRail,.rail-icon{display:flex;width:44px}.rail-icon{align-items:center;background:transparent;border:none;border-left:2px solid transparent;color:var(--chrome-2);cursor:pointer;height:36px;justify-content:center;padding:0;position:relative;transition:color var(--transition-fast),border-color var(--transition-fast)}@media (hover:hover){.rail-icon:hover{color:var(--chrome-4)}}.rail-icon.active{border-left-color:var(--chrome-5);color:var(--chrome-5)}.rail-icon.hidden{display:none}.rail-icon svg{height:18px;pointer-events:none;width:18px}#panelContainer{align-self:stretch;border-right:none;flex-shrink:0;min-width:280px;width:280px}.slide-panel{background-color:var(--background-color);display:none;flex-direction:column;height:100%;overflow-x:hidden;overflow-y:auto;width:100%}.slide-panel.open{display:flex}.panel-header{display:none}.panel-title{color:var(--chrome-3);font-size:var(--text-xs);font-weight:700;letter-spacing:3px;margin:0;text-transform:uppercase}.panel-close{align-items:center;background:transparent;border:none;color:var(--chrome-2);cursor:pointer;display:flex;font-size:var(--text-lg);height:var(--space-8);justify-content:center;line-height:1;padding:0;width:var(--space-8)}.panel-close:hover{color:var(--chrome-4)}.panel-body{display:flex;flex:1;flex-direction:column;gap:var(--space-1);overflow-y:auto;padding:var(--space-2) var(--space-5)}#panelSequencer .panel-body{gap:var(--space-5)}#panelEdit .panel-body,#panelOptions .panel-body{gap:var(--space-6)}.panel-body>.sliderContainer:first-child{padding-top:0}.panel-body>.filterSection:first-child>.lfoGroup:first-child,.panel-body>.lfo-tabs:first-child,.panel-body>.sliderContainer:first-child>.tabs:first-of-type{margin-top:0}.boxesLabel{color:var(--chrome-2);display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:1.2px;margin:var(--space-4) 0 var(--space-2);text-transform:uppercase}.boxesLabel:first-child{margin-top:0}.arrowsContainer+.scaleTempoRow{padding-top:var(--space-3)}.scaleTempoRow+.controlButtonContainer{border-top:1px solid var(--surface-tint-2);padding-top:var(--space-3)}.slide-panel .sliderItem{visibility:visible}#sidebarArea{align-self:stretch;display:flex;flex-direction:column}#sidebarInner{display:flex;flex:1;flex-direction:row;min-height:0}#transportControls{align-items:center;background-color:transparent;border-bottom:none;border-right:none;display:flex;flex-direction:column;gap:var(--space-5);padding:0 var(--space-4) var(--space-6)}#transportControls>*{width:100%}#transportControls #playStopButton{margin:0}.transport-row{display:flex;gap:var(--space-5)}.transport-row .controlButton{flex:1;font-size:var(--text-sm);min-width:0;padding-bottom:var(--space-2);padding-top:var(--space-2)}.transport-row #gridSizeSelectBox{flex-shrink:0;font-size:var(--text-md);min-width:70px;padding-bottom:var(--space-3);padding-top:var(--space-3);width:auto}#transportControls .presetContainer{margin:0}#transportControls .sliderItem{visibility:visible}.panel-more-toggle{background:transparent;border:none;border-top:1px solid var(--surface-tint-2);color:var(--chrome-2);cursor:pointer;display:block;font-size:var(--text-xs);letter-spacing:1px;margin-top:var(--space-4);padding:var(--space-3) 0;text-align:center;text-transform:uppercase;width:100%}.panel-more-toggle:hover{color:var(--chrome-4)}.panel-more-content{display:none}.panel-more-content.expanded{display:block}.slide-panel .sliderContainer{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr);height:auto;opacity:1;overflow:visible;padding:var(--space-1) 0;width:100%}.slide-panel .sliderContainer.filterSection{display:flex;flex-direction:column}.slide-panel .sliderContainer.collapsed{height:auto}.lfo-tabs{border-bottom:1px solid var(--chrome-tab);display:flex;margin-bottom:var(--space-4);margin-top:var(--space-3)}.lfo-tab-button{background-color:transparent;border:none;border-bottom:1px solid var(--chrome-tab);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);color:var(--chrome-tab);cursor:pointer;display:inline-block;font-size:var(--text-sm);letter-spacing:.5px;margin-bottom:-1px;padding:var(--space-3) var(--space-4)}.lfo-tab-button:hover{background-color:var(--surface-tint-1)}.lfo-tab-button.active{border-bottom-color:var(--background-color);border-left:1px solid var(--chrome-tab);border-right:1px solid var(--chrome-tab);border-top:1px solid var(--chrome-tab);color:var(--chrome-4)}.lfo-tab-content{display:none}.lfo-tab-content.active{display:block}.lfo-pwm-hint{color:var(--chrome-tab);font-size:var(--text-xs);margin-left:var(--space-2)}.slide-panel::-webkit-scrollbar{width:var(--space-2)}.slide-panel::-webkit-scrollbar-track{background:transparent}.slide-panel::-webkit-scrollbar-thumb{background:var(--chrome-1);border-radius:var(--space-1)}body.sidebar-collapsed #sidebarArea{display:none}@media only screen and (max-width:768px) and (orientation:portrait){#iconRail{background-color:var(--background-color);border-right:none;border-top:1px solid var(--surface-border);bottom:0;flex-direction:row;height:36px;justify-content:space-around;left:0;padding:0;position:fixed;right:0;width:100%;z-index:var(--z-dropdown)}.rail-icon{border-left:none;border-top:2px solid transparent;flex:1;height:36px;width:auto}.rail-icon.active{border-left-color:transparent;border-top-color:var(--chrome-5)}#panelContainer{bottom:36px;left:0;position:fixed;right:0;top:auto;z-index:var(--z-panel)}.slide-panel{background-color:color-mix(in srgb,color-mix(in srgb,var(--background-color) 85%,#000) 95%,transparent);border-right:none;border-top:1px solid var(--surface-border);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);bottom:0;height:auto;max-height:80vh;top:auto;transform:translateY(100%);width:100%}.slide-panel.open{transform:translateY(0)}#sidebarArea{align-self:auto;flex-direction:column;flex-shrink:0;width:100%}#transportControls{border-bottom:none;border-right:none;width:100%}#sidebarInner{display:contents}}.tools{display:none}.show_tools{display:inline-block}#errorMessage{color:var(--color-stop);text-align:center}.footer-export-import{display:flex;gap:var(--space-3);justify-content:center;padding:var(--space-3) 0}.footer-export-import .exportImportButton{display:inline-block}.footer-export-import #fileInput{display:none}.exportImportButton:disabled{border-color:var(--chrome-tab);color:var(--chrome-tab);cursor:not-allowed}#gridArea{align-items:center;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;position:relative}#gridArea #matrix{aspect-ratio:1/1;max-height:calc(100vh - 180px)}#pageStrip{max-width:170vh;padding:var(--space-3) 0;width:100%}#pageStrip,#pageThumbnails{align-items:center;display:flex;gap:var(--space-3)}#pageThumbnails{overflow-x:auto;padding:var(--space-2) 0;scrollbar-color:var(--surface-tint-2) transparent;scrollbar-width:thin}#pageThumbnails::-webkit-scrollbar{height:4px}#pageThumbnails::-webkit-scrollbar-thumb{background:var(--surface-tint-2);border-radius:var(--space-1)}.page-thumb{border:.5px solid var(--surface-tint-2);border-radius:var(--radius);cursor:pointer;flex-shrink:0;height:56px;overflow:hidden;position:relative;transition:border-color var(--transition-fast);user-select:none;-webkit-user-select:none;width:56px}.page-thumb:hover{border-color:var(--chrome-1)}.page-thumb.active{border-color:var(--chrome-3)}.page-thumb.active.playing,.page-thumb.playing{border-color:var(--color-caution)}.page-thumb.dragging{opacity:.4}.page-thumb.drag-insert-before{border-left:4px solid var(--color-play-border)}.page-thumb.drag-insert-after{border-right:4px solid var(--color-play-border)}.page-thumb-canvas{display:block;height:100%;image-rendering:pixelated;opacity:.7;width:100%}.page-thumb-repeat{background:var(--overlay);border-radius:var(--space-1);bottom:0;color:var(--chrome-3);cursor:pointer;display:none;font-size:var(--text-xs);line-height:1;padding:var(--space-1) var(--space-2);pointer-events:auto;position:absolute;right:0;transition:color var(--transition-fast),background var(--transition-fast)}.page-thumb:hover .page-thumb-repeat{display:block}.page-thumb-repeat:hover{background:var(--overlay-heavy);color:var(--chrome-5)}.page-repeat-dropdown{background:var(--surface-dark);border:1px solid var(--chrome-1);border-radius:var(--radius);color:var(--chrome-4);font-family:inherit;font-size:var(--text-xs);min-width:120px;padding:var(--space-4) var(--space-5);position:fixed;user-select:none;z-index:var(--z-overlay)}.page-repeat-dropdown-label{align-items:center;color:var(--chrome-3);display:flex;font-size:var(--text-xs);justify-content:space-between;margin-bottom:var(--space-2)}.page-repeat-dropdown-value{font-variant-numeric:tabular-nums;min-width:20px;text-align:right}.page-repeat-dropdown input[type=range]{-webkit-appearance:none;appearance:none;background:var(--chrome-1);border-radius:var(--radius);cursor:pointer;height:6px;margin:0;outline:none;width:100%}.page-repeat-dropdown input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--chrome-4);border-radius:var(--radius-full);cursor:pointer;height:16px;width:16px}.page-repeat-dropdown input[type=range]::-moz-range-thumb{background:var(--chrome-4);border:none;border-radius:var(--radius-full);cursor:pointer;height:16px;width:16px}.page-thumb-actions{display:none;flex-direction:row;gap:0;position:absolute;right:0;top:0}.page-thumb:hover .page-thumb-actions{display:flex}.page-thumb-delete,.page-thumb-duplicate{background:var(--overlay);border:none;border-radius:var(--space-1);color:var(--chrome-4);cursor:pointer;font-size:var(--text-md);line-height:1;padding:var(--space-2) var(--space-3)}.page-thumb-delete:hover{background:var(--overlay-heavy);color:var(--color-danger-active)}.page-thumb-delete.confirm-pending{background:var(--color-danger);color:#fff;padding:var(--space-2) var(--space-3)}.page-thumb-delete.confirm-pending:hover{background:var(--color-danger-deep);color:#fff}.page-thumb-duplicate:hover{background:var(--overlay-heavy);color:var(--color-play-border)}.page-add-btn{align-items:center;background:transparent;border:2px dashed var(--chrome-1);border-radius:var(--radius);color:var(--chrome-3);cursor:pointer;display:flex;flex-shrink:0;font-size:var(--text-lg);height:56px;justify-content:center;transition:border-color var(--transition-fast),color var(--transition-fast);width:56px}.page-add-btn:hover{border-color:var(--chrome-3);color:var(--chrome-4)}.page-add-btn:active:not(:disabled){border-color:var(--chrome-4);color:var(--chrome-5)}.page-add-btn:disabled{cursor:default;opacity:.3}.page-thumb-clone{border:1px solid var(--chrome-1);opacity:.8}@media only screen and (max-width:768px) and (orientation:portrait){#gridArea #matrix{aspect-ratio:auto;max-height:min(97vw,calc(100svh - 320px))}#pageStrip{flex-shrink:0;max-width:100%;padding:var(--space-2) var(--space-1) var(--space-5)}.page-add-btn,.page-thumb{height:68px;width:68px}.page-add-btn{font-size:var(--text-lg)}.page-thumb-repeat{font-size:var(--text-xs)}@media (hover:none){.page-thumb-actions{display:flex}.page-thumb-repeat{display:block}.page-thumb-delete,.page-thumb-duplicate{font-size:var(--text-md);padding:var(--space-3) var(--space-3)}}}@media only screen and (max-width:380px) and (orientation:portrait){.page-add-btn,.page-thumb{height:52px;width:52px}}#spectrumCanvas{left:50%;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);z-index:0}@keyframes noteGlow{0%,80%{box-shadow:0 0 6px 2px var(--glow-color,#ff0)}to{box-shadow:0 0 0 0 var(--glow-color,#ff0)}}@keyframes noteGlowHead{0%,80%{box-shadow:-6px 0 6px -2px var(--glow-color,#ff0),0 -6px 6px -2px var(--glow-color,#ff0),0 6px 6px -2px var(--glow-color,#ff0)}to{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 0 0 0 transparent}}@keyframes noteGlowBody{0%,80%{box-shadow:0 -6px 6px -2px var(--glow-color,#ff0),0 6px 6px -2px var(--glow-color,#ff0)}to{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}}@keyframes noteGlowTail{0%,80%{box-shadow:6px 0 6px -2px var(--glow-color,#ff0),0 -6px 6px -2px var(--glow-color,#ff0),0 6px 6px -2px var(--glow-color,#ff0)}to{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 0 0 0 transparent}}.gridButton.active.note-head.playing{animation:noteGlowHead var(--glow-duration,.3s) ease-out forwards}.gridButton.active.note-body.playing{animation:noteGlowBody var(--glow-duration,.3s) ease-out forwards}.gridButton.active.note-tail.playing{animation:noteGlowTail var(--glow-duration,.3s) ease-out forwards}.note-menu{background:var(--surface-dark);border:1px solid var(--chrome-1);border-radius:var(--radius);color:var(--chrome-4);font-family:inherit;font-size:var(--text-xs);min-width:140px;padding:var(--space-4) var(--space-5);position:fixed;touch-action:none;user-select:none;z-index:var(--z-dropdown)}.note-menu-label{align-items:center;color:var(--chrome-3);display:flex;font-size:var(--text-xs);justify-content:space-between;margin-bottom:var(--space-2)}.note-menu-value{font-variant-numeric:tabular-nums;min-width:30px;text-align:right}.note-menu input[type=range]{-webkit-appearance:none;appearance:none;background:var(--chrome-1);border-radius:var(--radius);cursor:pointer;height:6px;margin:0;outline:none;width:100%}.note-menu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--chrome-4);border-radius:var(--radius-full);cursor:pointer;height:16px;width:16px}.note-menu input[type=range]::-moz-range-thumb{background:var(--chrome-4);border:none;border-radius:var(--radius-full);cursor:pointer;height:16px;width:16px}.note-menu-separator{border-top:1px solid var(--chrome-1);margin:var(--space-4) 0 var(--space-2)}.keyboard-hint{bottom:var(--space-4);color:var(--chrome-2);font-size:var(--text-xs);position:fixed;right:var(--space-5);z-index:var(--z-rail)}.keyboard-hint kbd{border:1px solid var(--chrome-1);border-radius:var(--radius);font-family:inherit;padding:var(--space-1) var(--space-3)}@media (max-width:768px){.keyboard-hint{display:none}}.keyboard-help-overlay{align-items:center;background:var(--overlay);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--z-overlay)}.keyboard-help-modal{background:var(--surface-darker);border:.5px solid var(--chrome-1);border-radius:var(--radius);color:var(--chrome-3);max-height:80vh;max-width:460px;overflow-y:auto;padding:var(--space-8);width:90%}.keyboard-help-modal h2{color:var(--chrome-3);font-size:var(--text-lg);margin:0 0 var(--space-7);text-align:center}.keyboard-help-modal table{border-collapse:collapse;width:100%}.keyboard-help-modal tr{border-bottom:1px solid var(--chrome-1)}.keyboard-help-modal td{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.keyboard-help-key{padding-right:var(--space-7);white-space:nowrap;width:1%}.keyboard-help-key kbd{border:1px solid var(--chrome-1);border-radius:var(--radius);font-family:inherit;padding:var(--space-1) var(--space-3)}.keyboard-help-close{background:transparent;border:.5px solid var(--chrome-border);border-radius:var(--radius);color:var(--main-font-color);cursor:pointer;display:block;font-size:var(--text-sm);margin:var(--space-7) auto 0;padding:var(--space-3) var(--space-8)}.keyboard-help-close:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.featured-overlay{align-items:center;background:var(--overlay);display:flex;inset:0;justify-content:center;position:fixed;z-index:var(--z-overlay)}.featured-content{background:var(--background-color);border:.5px solid var(--chrome-1);border-radius:var(--radius);max-height:80vh;max-width:700px;overflow-y:auto;padding:var(--space-8);position:relative;width:85%}.featured-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-7)}.featured-title{font-weight:500;letter-spacing:.5px}.featured-close,.featured-title{color:var(--main-font-color);font-size:var(--text-md)}.featured-close{background:none;border:.5px solid var(--chrome-border);border-radius:var(--radius);cursor:pointer;font-family:Helvetica,Arial,sans-serif;padding:var(--space-3) var(--space-4);transition:color var(--transition-fast),border-color var(--transition-fast)}.featured-close:hover{border-color:var(--chrome-4);color:var(--chrome-5)}.featured-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.featured-card{aspect-ratio:1;background:var(--surface-darker);border:1px solid transparent;border-radius:var(--radius);cursor:pointer;overflow:hidden;transition:border-color var(--transition-fast)}.featured-card:hover{border-color:var(--color-sine)}.featured-card:active{border-color:var(--color-sine-dim);opacity:.85}.featured-card canvas{display:block;height:100%;width:100%}.featured-spinner{align-items:center;display:flex;justify-content:center}.featured-empty,.featured-spinner{color:var(--chrome-3);font-size:var(--text-md);padding:var(--space-8)}.featured-empty{text-align:center}.explore-button{gap:0;margin-right:var(--space-2);width:auto}.explore-button-text{white-space:nowrap}@media only screen and (max-width:768px){.featured-content{width:95%}}@media only screen and (max-width:430px){.featured-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.header:has(#miniControls.visible) .explore-button-text{display:none}.header:has(#miniControls.visible) .explore-button{min-width:0;width:auto}}.download-control-button{align-items:center;display:inline-flex;gap:var(--space-3);justify-content:center}.download-control-button.loading .download-button-text,.download-control-button.loading .download-icon{display:none}.download-control-button.loading .spinner{display:inline-block;height:16px;margin-left:0;width:16px}.download-control-button.done .download-button-text{color:var(--color-play)}.download-control-button.done .download-icon{stroke:var(--color-play)}