:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--paper:var(--lightningcss-light,#ece4d6)var(--lightningcss-dark,#1c1d1b);--ink:var(--lightningcss-light,#2c2e2b)var(--lightningcss-dark,#e8e0d2);--muted:var(--lightningcss-light,#66665e)var(--lightningcss-dark,#a39e94);--ink-40:color-mix(in srgb, var(--ink) 42%, transparent);--ink-15:color-mix(in srgb, var(--ink) 13%, transparent);--ink-08:color-mix(in srgb, var(--ink) 8%, transparent);--accent:var(--ink);--font:"Outfit", system-ui, sans-serif;--ease:cubic-bezier(.2, 0, 0, 1);--fast:.12s;--slow:.2s}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@property --paper{syntax:"<color>";inherits:true;initial-value:#ece4d6}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background-color:var(--paper);background-image:linear-gradient(var(--ink-08) 1px, transparent 1px), linear-gradient(90deg, var(--ink-08) 1px, transparent 1px);color:var(--ink);font-family:var(--font);letter-spacing:.01em;font-variant-numeric:tabular-nums;background-size:24px 24px;font-size:12px;overflow:hidden}button,select,input{font:inherit;letter-spacing:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{justify-content:center;align-items:center;height:100dvh;padding:16px;display:flex}.content{background:var(--paper);outline:1px solid var(--ink-15);flex-direction:column;gap:12px;width:100%;height:100%;padding:16px;display:flex}.header{border-bottom:1px solid var(--ink-15);align-items:flex-end;gap:12px 32px;padding-bottom:12px;display:flex;position:relative}.header>:not(.header__scope){position:relative}.header__scope{top:-16px;left:var(--scope-l,50%);width:calc(100% - var(--scope-l,50%) - var(--scope-r,50%));height:calc(100% + 16px);color:var(--ink);opacity:0;pointer-events:none;transition:opacity var(--slow) var(--ease);position:absolute;-webkit-mask-image:linear-gradient(90deg,#0000,#000 32px calc(100% - 32px),#0000);mask-image:linear-gradient(90deg,#0000,#000 32px calc(100% - 32px),#0000)}.header.is-playing .header__scope{opacity:.14}.header__end{justify-content:flex-end;align-items:baseline;gap:24px;display:flex}.wordmark{letter-spacing:.03em;margin:0;font-size:15px;font-weight:600}.settings-trigger,.settings__close,.layers__add{color:var(--muted);cursor:pointer;transition:color var(--fast) var(--ease);background:0 0;border:none;flex:none;padding:0 2px;font-size:18px;line-height:1}.settings-trigger:hover,.settings__close:hover,.layers__add:hover{color:var(--ink)}.settings{border:1px solid var(--ink-15);background:var(--paper);width:min(320px,100vw - 32px);color:var(--ink);padding:16px}.settings::backdrop{background:color-mix(in srgb, var(--paper) 70%, transparent)}.settings[open]{animation:fade-in var(--fast) var(--ease);flex-direction:column;gap:16px;display:flex}.settings__head{border-bottom:1px solid var(--ink-15);justify-content:space-between;align-items:baseline;padding-bottom:12px;display:flex}.settings__title{margin:0;font-size:13px;font-weight:600}.settings__options{gap:4px;display:flex}.settings__options button{border:1px solid var(--ink-15);color:var(--muted);cursor:pointer;background:0 0;padding:4px 8px}.settings__options button:hover{color:var(--ink)}.projects{letter-spacing:normal;font-size:12px;font-weight:400}.btn:disabled,.btn.is-disabled,.projects__open:disabled,.projects__name:disabled{opacity:.4;cursor:default;pointer-events:none}.btn.is-armed{border-color:var(--accent);color:var(--accent)}.wordmark__project{text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;cursor:pointer;background:0 0;border:none;max-width:24ch;padding:0;overflow:hidden}.wordmark__project:hover{text-decoration:underline}.projects__current,.projects__actions{flex-wrap:wrap;gap:8px;display:flex}.projects__name{border:none;border-bottom:1px solid var(--ink-15);background:0 0;flex:100%;padding:2px 0}.projects__link{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;flex:100%;overflow:hidden}.wordmark__sync,.projects__status{color:var(--muted);letter-spacing:normal;font-size:10px;font-weight:400}.wordmark__sync{margin-left:8px}.projects__turnstile{width:0;height:0;position:absolute;overflow:hidden}.projects__list{border-top:1px solid var(--ink-15);flex-direction:column;max-height:40vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.projects__list li{border-bottom:1px solid var(--ink-15);align-items:center;gap:8px;display:flex}.projects__open{text-align:left;cursor:pointer;background:0 0;border:none;flex:1;justify-content:space-between;gap:8px;min-width:0;padding:6px 0;display:flex}.projects__open span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.projects__open small{color:var(--muted);flex:none}.projects__open:hover span{text-decoration:underline}.main{flex:1;grid-template:"layers grid""sound grid"minmax(0,1fr)/264px minmax(0,1fr);gap:16px;min-height:0;display:grid}.grid-area{--pages-h:44px;border-left:1px solid var(--ink-15);grid-area:grid;place-items:center;min-height:0;padding-left:24px;display:grid;container-type:size}.grid-stack{flex-direction:column;gap:12px;display:flex}.pages{align-items:stretch;gap:4px;height:32px;font-size:13px;display:flex}.pages__page,.pages__btn{color:var(--muted);cursor:pointer;transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);background:0 0;border:1px solid #0000;padding:0 10px}.pages__page{border-color:var(--ink-15);text-align:left;font-variant-numeric:tabular-nums;min-width:56px;position:relative}.pages__page:after{content:"";background:var(--ink);width:0;height:4px;position:absolute;bottom:-1px;left:-1px}.pages__page.is-playing{background:var(--ink-08)}.pages__page.is-playing:after{width:calc(var(--progress) + 2px)}.pages__page:hover,.pages__btn:hover{color:var(--ink);border-color:var(--ink-40)}.pages__page[aria-pressed=true]{border-color:var(--ink);color:var(--ink);font-weight:600}.pages__btn:disabled{opacity:.4;cursor:default}.pages__btn.is-armed,.field__label.is-armed{color:var(--accent)}.pages__loop{margin-left:auto;font-size:11px}.grid{--cell:max(4px, min(calc((100cqw - 32px) / var(--span)), calc((100cqh - 32px - var(--pages-h)) / 18)));grid-template-rows:auto;grid-auto-rows:var(--cell);gap:calc(var(--cell) * .12);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:grid}.grid__row{display:contents}.is-beat{margin-left:calc(var(--cell) * .4)}.step{display:grid;position:relative}.step__hit{cursor:pointer;background:0 0;border:none;grid-template-rows:16px auto;justify-items:center;gap:4px;width:100%;padding:0;display:grid}.step__hit:disabled{cursor:default}.step__hit:not(:disabled):hover .step__num{color:var(--ink)}.step__bar{background:repeating-linear-gradient(to top, var(--ink-40) 0 2px, transparent 2px 3px);align-self:end;width:100%;min-height:1px}.step__num{letter-spacing:0;white-space:nowrap;color:#0000;font-size:9px;line-height:1}.step.is-downbeat .step__num{color:var(--muted)}.step.is-hover .step__num{color:var(--ink)}.step.is-playhead .step__num{color:var(--accent)}.step.is-playhead .step__bar{background:repeating-linear-gradient(to top, var(--accent) 0 2px, transparent 2px 3px)}.note{min-width:calc(3ch + 4px);font-size:min(9px, calc(var(--cell) * 1.05));letter-spacing:0;white-space:nowrap;color:var(--ink-15);justify-content:flex-end;align-items:center;padding-right:4px;line-height:1;display:flex}.note.is-used{color:var(--muted)}@media (hover:hover){.grid__row:has(.cell:hover) .note{color:var(--ink)}}.cell{--dot:var(--ink-15);transition:background-color 90ms var(--ease), border-color 90ms var(--ease);background:linear-gradient(var(--dot), var(--dot)) center / 18% 18% no-repeat;cursor:pointer;touch-action:manipulation;border:1px solid #0000;padding:0}.cell.is-cross{--dot:var(--ink-40)}@media (hover:hover){.grid__row:has(.cell:hover) .cell{--dot:var(--ink-40)}.cell:hover{--dot:var(--ink);border-color:var(--ink-40)}.cell:hover .cell__tip{opacity:1}}.cell:active{background:var(--ink-15)}.cell:focus-visible{outline-offset:1px}.cell.is-ghost{--dot:var(--ink-40);background-size:36% 36%}.cell.is-active{background:var(--accent);border-color:var(--accent);cursor:ns-resize;touch-action:none;transition:none;position:relative}.cell.is-off{opacity:.3}.note.is-off{color:var(--ink-15)}.cell.is-active.is-chance{background:linear-gradient(to top, var(--accent) var(--prob), transparent var(--prob))}.cell__tip{z-index:1;background:var(--ink);color:var(--paper);letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--fast) var(--ease);padding:2px 4px;font-size:9px;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.cell:focus-visible .cell__tip,.cell__tip.is-live{opacity:1}.toolbar{flex-wrap:wrap;flex:1;align-items:flex-end;gap:12px 24px;display:flex}.play{border:1px solid var(--ink);letter-spacing:.02em;text-align:left;cursor:pointer;background:0 0;min-width:76px;padding:6px 10px;font-weight:600}.play,.btn,.layer,.layer__select,.layer__mute,.layers__add,select.field__value,.dock-tabs button{transition:color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), opacity var(--fast) var(--ease)}.play:hover{background:var(--ink-08)}.play.is-on{background:var(--ink);color:var(--paper)}.field{flex-direction:column;gap:5px;display:flex}.field__label{letter-spacing:.02em;color:var(--muted);font-size:10px}.field__value{align-items:baseline;gap:8px;font-size:12px;display:flex}.field__num{min-width:5ch}.numfield{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none}.numfield:hover{box-shadow:inset 0 -1px var(--ink-40)}.numfield__input{width:5ch;box-shadow:inset 0 -1px var(--ink);background:0 0;border:none;outline:none;padding:0}.field__num small{color:var(--muted);margin-left:2px;font-size:9px}select.field__value{appearance:none;background:linear-gradient(45deg, transparent 50%, var(--ink-40) 50%) right 4px center / 4px 4px no-repeat, linear-gradient(135deg, var(--ink-40) 50%, transparent 50%) right 0 center / 4px 4px no-repeat;cursor:pointer;border:none;margin:0;padding:0 14px 0 0}select.field__value:hover{color:var(--accent)}.layer-strip{grid-area:layers}.sound{view-transition-name:sound-panel;flex-direction:column;grid-area:sound;gap:12px;min-height:0;margin:-4px;padding:4px;display:flex;overflow:hidden}.layers__head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.layers__add{font-size:12px}.layers__add:disabled{visibility:hidden}.layers{grid-template-columns:minmax(0,1fr);gap:2px 4px;display:grid}.layer{isolation:isolate;border:1px solid var(--ink-15);align-items:baseline;min-width:0;display:flex;position:relative}.layer.is-active{border-color:var(--accent)}.layer__select{text-align:left;cursor:pointer;background:0 0;border:none;flex:1;align-items:baseline;gap:8px;min-width:0;padding:4px 6px;display:flex}.layer__select:hover{background:var(--ink-08)}.layer__num{letter-spacing:.02em;min-width:7ch;color:var(--muted);flex:none;font-size:10px}.layer.is-active .layer__num{color:var(--accent)}.layer__src{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layer.is-muted .layer__src{color:var(--muted);text-decoration:line-through}.layer__mute{width:20px;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:10px}.layer__mute:before{content:"";z-index:-1;width:inherit;border-left:1px solid var(--ink-15);position:absolute;top:0;bottom:0;right:0}.layer__mute:hover{color:var(--ink)}.settings__options button[aria-checked=true],.pages__loop[aria-pressed=true],.layer__mute[aria-pressed=true]:before{border-color:var(--ink);background:var(--ink);color:var(--paper)}.layer__mute[aria-pressed=true]{color:var(--paper)}.layer__remove{transition:opacity var(--fast) var(--ease), color var(--fast) var(--ease);color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 8px;font-size:11px}.layer__clear{padding:0 4px;font-size:10px}.layer:hover .layer__remove,.layer:focus-within .layer__remove{opacity:1}.layer__remove:hover,.layer__remove.is-armed{opacity:1;color:var(--accent)}@media (hover:none){.layer:not(.is-active) .layer__remove{display:none}.layer.is-active .layer__remove{opacity:1}}.source{white-space:nowrap;flex-wrap:wrap;align-items:baseline;gap:8px 16px;display:flex;position:relative}.source .field{flex-direction:row;align-items:baseline;gap:8px}.preset{align-items:baseline;gap:8px;display:flex}.preset input.field__value{width:14ch}.sample__file{flex:100%;align-self:center;min-width:0}.content.is-drop{outline:2px dashed var(--accent)}.btn{border:1px solid var(--ink-40);letter-spacing:.02em;cursor:pointer;background:0 0;padding:1px 6px;font-size:10px;line-height:10px}.btn:hover{border-color:var(--ink);background:var(--ink-08)}.btn:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.wave{border:1px solid var(--ink-15);cursor:pointer;flex:0 80px;min-height:40px;position:relative}.wave__canvas{width:100%;height:100%;color:var(--ink-40);display:block}.wave__out{background:color-mix(in srgb, var(--paper) 72%, transparent);pointer-events:none;position:absolute;top:0;bottom:0}.wave__edge{z-index:1;background:linear-gradient(var(--ink), var(--ink)) center / 6px 100% no-repeat;cursor:ew-resize;touch-action:none;border:none;width:10px;height:12px;margin-left:-5px;padding:0;position:absolute;bottom:0}.wave__edge:focus-visible{outline-offset:1px}.wave__tick{background:var(--ink-40);pointer-events:none;width:1px;height:4px;position:absolute;bottom:0}.wave__tick.is-beat{height:8px}.wave__tick.is-bar{background:var(--ink-15);height:100%}.sample__region{color:var(--muted)}.wave__hit{background:var(--ink-15);pointer-events:none;animation:hit-fade .4s var(--ease) forwards;position:absolute;top:0;bottom:0}@keyframes hit-fade{to{opacity:0}}.marker{background:linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat;letter-spacing:0;width:13px;color:var(--accent);cursor:ew-resize;touch-action:none;border:none;justify-content:center;align-items:flex-start;margin-left:-6px;padding:2px 0 0;font-size:9px;line-height:1;display:flex;position:absolute;top:0;bottom:12px}.marker:hover,.marker:focus-visible{background-size:3px 100%}.marker span{background:var(--paper);padding:1px}.sample{flex-direction:column;gap:8px;min-height:0;display:flex}.sample__bar{white-space:nowrap;align-items:center;gap:8px;height:14px;display:flex}.sample__count{align-items:baseline;gap:8px;margin-right:auto;display:flex}.sample__msg{text-overflow:ellipsis;min-width:0;color:var(--muted);flex:0 auto;overflow:hidden}.sample__msg.is-name{color:var(--ink);font-size:12px}.sample__msg.is-error{color:var(--ink);font-weight:600}.wave.is-empty{cursor:default;border-style:dashed}@media (width>=601px){.header{grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:last baseline;column-gap:24px;display:grid}.header .toolbar{justify-self:start;align-items:last baseline;column-gap:16px}.header .play{align-self:stretch;align-items:center;gap:6px;display:flex}.header .wordmark{align-self:center}.header__end{place-self:center end}}@media (width>=601px) and (height<=780px){.layers{grid-template-columns:repeat(2,minmax(0,1fr))}.layer__num{min-width:4ch}}.dock-tabs{display:none}@media (width<=600px){.main{flex-direction:column;gap:12px;display:flex}.grid-area{border-left:none;flex:none;padding-left:0;container-type:inline-size}.grid{--cell:min(40px, calc((100cqw - 32px) / var(--span)))}.header{flex-wrap:wrap;justify-content:space-between;align-items:baseline}.header .toolbar{flex-basis:100%;order:1}.dock-tabs{white-space:nowrap;border-top:1px solid var(--ink-15);align-items:center;gap:4px;padding-top:12px;display:flex}.toolbar{gap:12px 16px}.toolbar .play{min-width:0}.toolbar .play__label{display:none}.dock-tabs__tabs,.dock-tabs__pages{display:flex}.dock-tabs__pages{margin-left:auto}.dock-tabs button{letter-spacing:.02em;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:6px;font-size:10px}.dock-tabs [aria-selected=true],.dock-tabs [aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -2px var(--accent)}.content:not([data-tab=song]) [data-dock=song],.content:not([data-tab=layers]) [data-dock=layers],.content:not([data-tab=sound]) [data-dock=sound]{display:none}[data-dock]{flex:1;min-height:0;margin:-4px;padding:4px;overflow:hidden}.layers{grid-template-columns:repeat(4,minmax(0,1fr))}.layer__select{gap:4px;padding:3px 4px}.layer__num{min-width:0}.layer__mute{width:16px}.sound{gap:8px}.source .field__label{display:none}.sample{flex:1}.wave{flex:1;min-height:24px}}.sound__head{z-index:1;background:var(--paper);letter-spacing:.02em;color:var(--muted);justify-content:space-between;align-items:center;font-size:10px;display:flex;position:absolute;inset:0}.sound__head.is-held{color:var(--accent)}.params{min-height:0;transition:background-color var(--fast) var(--ease);scrollbar-width:thin;scrollbar-color:var(--ink-15) transparent;flex-direction:column;flex:1;gap:10px;margin:0 -4px;padding:4px;display:flex;overflow-y:auto}.params.is-held{background:color-mix(in srgb, var(--ink) 6%, transparent)}.params__group{flex-direction:column;gap:2px;display:flex}.params__head{border-bottom:1px solid var(--ink-15);justify-content:space-between;align-items:flex-end;margin-bottom:2px;padding-bottom:2px;display:flex}.params__title{letter-spacing:.02em;color:var(--muted);margin:0;font-size:10px;font-weight:400}.params__knobs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px;display:grid}.knob{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:2px;min-width:0;display:flex}.knob__value,.knob__input{text-align:center;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;width:100%;padding:0;font-size:11px;overflow:hidden}.knob__value{cursor:text}.knob__value:hover{box-shadow:inset 0 -1px var(--ink-40)}.knob__input{box-shadow:inset 0 -1px var(--ink);outline:none}.knob__grip{touch-action:none;display:flex}.knob__dial{cursor:ns-resize;width:34px;height:34px;overflow:visible}.knob__track{fill:none;stroke:var(--ink-15);stroke-width:3px}.knob__arc{fill:none;stroke:var(--ink);stroke-width:3px}.knob__pointer{stroke:var(--ink);stroke-width:2px;stroke-linecap:square}.knob__label{letter-spacing:.02em;white-space:nowrap;max-width:100%;color:var(--muted);align-items:center;gap:3px;font-size:10px;display:flex;overflow:hidden}.knob.is-inherited .knob__arc,.knob.is-inherited .knob__pointer{stroke:var(--ink-40)}.knob.is-inherited .knob__value{color:var(--muted)}.knob.is-locked .knob__value{font-weight:600}.knob.is-locked .knob__label{color:var(--ink)}.knob__lock{color:var(--ink);cursor:pointer;background:0 0;border:none;padding:0;font-size:8px;line-height:1}.knob__lock:hover{font-size:0}.knob__lock:hover:after{content:"×";font-size:11px}.switch{border:1px solid var(--ink-40);cursor:pointer;background:0 0;gap:2px;width:34px;height:18px;margin:8px 0;padding:2px;display:flex}.switch__half{flex:1}.switch__half.is-on{background:var(--ink)}.knob.is-inherited .switch__half.is-on{background:var(--ink-40)}.env{width:100%;height:32px;margin-bottom:6px;display:block}.env__fill{fill:var(--ink-08)}.env__line{fill:none;stroke:var(--ink);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round}.scope{border:1px solid var(--ink-15);width:100%;height:44px;color:var(--ink);flex:none;display:block}.step__lock{background:var(--accent);width:4px;height:4px;position:absolute;bottom:0;right:0}.step.is-held .step__num{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.cell.is-held{border-color:var(--accent)}@keyframes fade-in{0%{opacity:0}}.wave__canvas,.sample__msg,.dock-tabs~[data-dock]{animation:fade-in var(--slow) var(--ease)}::view-transition-old(root){animation:none}::view-transition-new(root){animation:none}::view-transition-group(*){animation-duration:var(--slow);animation-timing-function:var(--ease)}::view-transition-old(*){animation-duration:var(--fast)}::view-transition-new(*){animation-duration:var(--fast)}:root[data-slide] .grid{view-transition-name:page-grid}::view-transition-group(page-grid){overflow:clip}:root[data-slide]::view-transition-old(page-grid){animation-duration:.32s;animation-timing-function:var(--ease);mix-blend-mode:normal;animation-fill-mode:both}:root[data-slide]::view-transition-new(page-grid){animation-duration:.32s;animation-timing-function:var(--ease);mix-blend-mode:normal;animation-fill-mode:both}:root[data-slide=next]::view-transition-old(page-grid){animation-name:slide-to-left}:root[data-slide=next]::view-transition-new(page-grid){animation-name:slide-from-right}:root[data-slide=prev]::view-transition-old(page-grid){animation-name:slide-to-right}:root[data-slide=prev]::view-transition-new(page-grid){animation-name:slide-from-left}@keyframes slide-to-left{to{transform:translate(-100%)}}@keyframes slide-from-right{0%{transform:translate(100%)}}@keyframes slide-to-right{to{transform:translate(100%)}}@keyframes slide-from-left{0%{transform:translate(-100%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}