@font-face{font-family:Berkeley Mono;font-weight:400;src:url(/fonts/BerkeleyMono-Regular.woff2)format("woff2")}@font-face{font-family:Berkeley Mono;font-weight:500 700;src:url(/fonts/BerkeleyMono-Bold.woff2)format("woff2")}:root{--bg:#fff;--fg:#000;--border:#e5e5e5;--muted:#666;--faint:#c8c8c8;--mono:"Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--t-cap:9px;--t-small:11px;--t-body:13px;--t-title:16px;--t-track:.08em;--blue:#2563eb;--purple:#7c3aed;--orange:#ea580c;--red:#dc2626;color-scheme:light dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a0a0c;--fg:#d5e3ff;--border:#17181b;--muted:#808899;--faint:#2c3038;--blue:#5b8cff;--purple:#a77bff;--orange:#ff8a3d;--red:#ff5a52}}:root[data-theme=dark]{--bg:#0a0a0c;--fg:#d5e3ff;--border:#17181b;--muted:#808899;--faint:#2c3038;--blue:#5b8cff;--purple:#a77bff;--orange:#ff8a3d;--red:#ff5a52;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:var(--t-small);letter-spacing:-.01em;-webkit-user-select:none;user-select:none;touch-action:manipulation;line-height:1.3;overflow:hidden}#app{height:100dvh;display:grid}button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px;transition:color .12s}button:hover,button.on{color:var(--fg)}:focus-visible{outline:1px solid var(--fg);outline-offset:2px}.m{color:var(--muted)}:root{--tap:32px;--fx-h:56px;--bar-pad:max(8px, calc(env(safe-area-inset-bottom) - 12px));--bar-h:calc(var(--tap) + var(--bar-pad))}@media (pointer:coarse){:root{--tap:44px}}#app{grid-template-rows:var(--fx-h) minmax(0, 1fr) var(--bar-h)}html.native #app{height:100dvh;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}#fx{align-items:flex-start;gap:16px;min-width:0;min-height:0;padding:8px 16px 4px;display:flex;overflow:hidden}@media (width<=800px){#fx{padding-left:12px;padding-right:12px}}#fx.shut{padding:0}#fx-grip{left:0;right:0;top:var(--fx-h);z-index:4;cursor:ns-resize;touch-action:none;height:9px;margin-top:-4px;position:absolute}#fx-grip:after{content:"";background:var(--border);border-radius:1px;width:36px;height:2px;margin-left:-18px;transition:background .12s,opacity .12s;position:absolute;top:3px;left:50%}#fx-grip:hover:after{background:var(--muted)}#fx-grip.shut:after{opacity:0}#fx-grip.shut:hover:after{opacity:1}#fx .ctl{min-width:0;color:var(--muted);flex-direction:column;flex:1 1 0;gap:2px;display:flex}#fx .ctl:hover,#fx .ctl:focus-within{color:var(--fg)}#fx .cap{font-size:var(--t-cap);letter-spacing:var(--t-track);text-transform:uppercase;color:var(--muted);white-space:nowrap;justify-content:space-between;gap:6px;line-height:12px;display:flex;overflow:hidden}#fx .cap b{text-overflow:ellipsis;font-weight:400;overflow:hidden}#fx .cap i{color:var(--fg);font-variant-numeric:tabular-nums;font-style:normal}#fx input{-webkit-appearance:none;appearance:none;cursor:ew-resize;background:0 0;width:100%;min-width:0;height:28px;margin:0}#fx input::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;height:4px}#fx input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fg);border:1px solid var(--bg);border-radius:4px;width:14px;height:22px;margin-top:-9px}#fx input::-moz-range-track{background:var(--border);height:2px}#fx input::-moz-range-thumb{background:var(--fg);border:1px solid var(--bg);border-radius:2px;width:8px;height:12px}#rack{touch-action:none;width:100%;height:100%;display:block}.status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.status:empty{display:none}#bar{padding:0 8px var(--bar-pad);align-items:flex-start;gap:4px;min-width:0;display:flex}#bar .left,#bar .right{display:contents}#bar>*>:is(button,.vbox){min-width:var(--tap);height:var(--tap);box-sizing:border-box;flex:1 1 0;margin:0}#bar .vbox{flex-grow:1.6}#bar .vbox.nav{flex-grow:2.6}#bar #play{flex-grow:1.4}#bar #dice{flex-grow:2.4}#bar button{color:var(--muted)}#bar button:hover{color:var(--fg)}#bar button.icon{border:1px solid var(--border);border-radius:8px;place-items:center;padding:0;display:inline-grid}#bar button.icon svg{width:18px;height:18px}#bar button.icon:hover{border-color:var(--muted)}#bar button.icon.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}.vbox{border:1px solid var(--border);border-radius:8px;grid-template-rows:auto auto;grid-auto-flow:column;place-content:center start;column-gap:4px;padding:0 10px;display:inline-grid;position:relative}.vbox:before{content:attr(data-cap);font-size:var(--t-cap);letter-spacing:var(--t-track);text-transform:uppercase;color:var(--muted);grid-area:1/1/auto/-1;line-height:10px}.vbox>*{grid-row:2}.vbox b{font-weight:400;font-size:var(--t-body);font-variant-numeric:tabular-nums;line-height:18px}.vbox .m{font-size:var(--t-small);color:var(--muted);align-self:end;line-height:15px}.vbox select{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:var(--t-body);color:var(--fg);cursor:pointer;background:0 0;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:right 4px center,right 0 center;background-repeat:no-repeat;background-size:4px 4px,4px 4px;border:0;padding:0 12px 0 0;line-height:18px}.vbox select:focus{outline:none}.vbox:focus-within,.vbox:hover{border-color:var(--muted)}#clockbox.live{border-color:var(--fg)}.fd{cursor:ew-resize;touch-action:none}#bar .vbox.nav,#bar .vbox.steps{grid-template-columns:auto minmax(0,1fr) auto}#bar .vbox.steps>.step{height:18px;line-height:18px;font-size:var(--t-body);color:var(--muted);padding:0 4px}#bar .vbox.steps>.step:hover:not(:disabled){color:var(--fg)}#bar .vbox.steps>.step:disabled{opacity:.3;cursor:default}#bar .vbox.steps .ddb{justify-content:center}#bar .vbox.steps .ddb svg{display:none}#bar .vbox.nav>button{height:18px;line-height:18px;font-size:var(--t-body);padding:0 2px}#seed{text-overflow:ellipsis;white-space:nowrap;text-align:center;min-width:0;color:var(--fg);font-variant-numeric:tabular-nums;overflow:hidden}#bar #seed{color:var(--fg)}#bar #seed.edited{color:var(--muted)}#bar #play{background:var(--fg);border:1px solid var(--fg);border-radius:8px;place-items:center;display:inline-grid}#bar #play,#bar #play:hover{color:var(--bg)}#bar #play svg{width:18px;height:18px}#bar #dice{background:var(--fg);min-width:max-content;color:var(--bg);font-weight:700;font-size:var(--t-body);border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex}#bar #dice:hover{opacity:.85}#bar #dice svg{width:18px;height:18px}#app{position:relative}.vbox.dd{cursor:pointer}.dd .ddb{width:100%;height:18px;color:var(--fg);font:inherit;font-size:var(--t-body);text-align:left;cursor:pointer;background:0 0;border:0;grid-row:2;justify-content:space-between;align-items:center;gap:6px;padding:0;line-height:18px;display:flex}.dd .ddb span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.dd .ddb svg{width:12px;height:12px;color:var(--muted);flex:none}.menu{z-index:6;background:var(--bg);border:1px solid var(--border);cursor:default;border-radius:8px;flex-direction:column;gap:2px;width:max-content;min-width:calc(100% + 2px);max-height:60vh;padding:6px;display:flex;position:absolute;bottom:calc(100% + 6px);left:-1px;overflow-y:auto;box-shadow:0 4px 16px #00000047}.menu[hidden]{display:none}.vbox>.menu{grid-area:auto}#bar .menu button{height:var(--tap);color:var(--fg);font:inherit;font-size:var(--t-body);text-align:left;white-space:nowrap;background:0 0;border:0;border-radius:6px;align-items:center;padding:0 12px;display:flex}#bar .menu button:hover,#bar .menu button:focus-visible{background:color-mix(in srgb, var(--fg) 8%, transparent);outline:none}#bar .menu button.cur{background:color-mix(in srgb, var(--fg) 12%, transparent);font-weight:700}.menu .dgroup{gap:2px;display:grid}#bar .menu .dgroup button{justify-content:center;min-width:40px;padding:0 8px}#bar .menu .dgroup:not([style]) button{justify-content:flex-start;padding:0 12px}.menu .dhead{font-size:var(--t-cap);letter-spacing:var(--t-track);text-transform:uppercase;color:var(--muted);padding:6px 12px 2px}@media (width<=900px){#bar #dice span{display:none}#bar #dice{min-width:var(--tap);padding:0 10px}#bar .vbox{padding:0 7px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}#app #bar .corner-bl.corner-bl{border-bottom-left-radius:var(--corner-r)}#app #bar .corner-br.corner-br{border-bottom-right-radius:var(--corner-r)}#fx{grid-area:1/1}#rack,#mix{grid-area:2/1}#bar{grid-area:3/1}#mix{background:var(--bg);z-index:3;gap:8px;min-height:0;padding:8px;display:flex;overflow-x:auto}#mix[hidden]{display:none}#mix .mstrip{border:1px solid var(--border);background:var(--bg);min-width:72px;min-height:0;color:var(--fg);border-radius:3px;flex-direction:column;flex:1 1 0;display:flex}#mix .mstrip.soloed{border-color:var(--fg)}#mix .mhead{box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;height:52px;padding:10px 12px 0;display:flex}#mix .mtop{align-items:center;gap:8px;height:18px;display:flex}#mix .mtop svg{width:16px;height:16px}#mix .mnum{font-size:var(--t-body);font-weight:700}#mix .mkind{font-size:var(--t-cap);letter-spacing:var(--t-track);text-transform:uppercase;color:var(--muted);line-height:11px}#mix .mname{max-width:100%;font-size:var(--t-small);color:var(--fg);white-space:nowrap;text-overflow:ellipsis;line-height:14px;display:block;overflow:hidden}#mix .mfader{touch-action:none;cursor:ns-resize;flex:auto;min-height:120px;position:relative}#mix .mfader canvas{width:100%;height:100%;position:absolute;inset:0}#mix .mfoot{height:calc(var(--tap) + 8px);box-sizing:border-box;align-items:center;gap:4px;padding:0 8px 8px;display:flex}#mix .mfoot button{width:var(--tap);height:var(--tap);border:1px solid var(--border);color:var(--muted);font-size:var(--t-small);border-radius:6px;padding:0;font-weight:700}#mix .mfoot button.cur{background:var(--fg);border-color:var(--fg);color:var(--bg)}#mix .mdb{font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap;margin-left:auto}#mix .quiet .mhead,#mix .quiet .mfader{opacity:.35}@keyframes detent{0%{filter:brightness(1.8)}to{filter:none}}.tick{animation:.16s ease-out detent}:root{--panel-w:400px}#sheet{z-index:7;background:var(--bg);min-height:0;font-size:var(--t-body);grid-area:1/1/3;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto;display:grid}#sheet[hidden]{display:none}:root[data-panel] #app{grid-template-columns:minmax(0, 1fr) var(--panel-w)}:root[data-panel] #fx,:root[data-panel] #rack,:root[data-panel] #mix{grid-column:1}:root[data-panel] #bar{grid-column:1/-1}:root[data-panel] #sheet{border-left:1px solid var(--border);grid-column:2}:root[data-panel] #fx-grip{right:var(--panel-w)}#sheet .sections{border-bottom:1px solid var(--border);grid-area:1/1;gap:2px;padding:8px;display:flex;overflow-x:auto}#sheet .sections button{height:var(--tap);color:var(--muted);font-size:var(--t-body);border:0;border-radius:6px;flex:none;align-items:center;padding:0 10px;display:flex}#sheet .sections button:hover{color:var(--fg)}#sheet .sections button.cur{background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg);font-weight:700}#sheet .sections button[hidden]{display:none}#sheet>.close{border:0;border-bottom:1px solid var(--border);color:var(--muted);border-radius:0;grid-area:1/2;align-items:center;gap:8px;padding:0 14px;display:flex}#sheet>.close:hover{color:var(--fg)}#sheet>.close svg{width:16px;height:16px}#sheet>.close span{display:none}#sheet .pane{flex-direction:column;grid-area:2/1/auto/-1;gap:12px;min-height:0;padding:16px;display:flex;overflow-y:auto}#sheet .pane[hidden]{display:none}#sheet .group{flex-direction:column;gap:8px;margin-top:8px;display:flex}#sheet .group>.title{color:var(--fg);font-weight:700}#sheet .set{min-height:var(--tap);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;display:grid}#sheet .seg{border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;justify-content:flex-end;gap:2px;padding:2px;display:inline-flex}#sheet .seg button{height:28px;color:var(--muted);border:0;border-radius:6px;padding:0 10px}#sheet .seg button:hover{color:var(--fg)}#sheet .seg button.cur{background:color-mix(in srgb, var(--fg) 12%, transparent);color:var(--fg);font-weight:700}#sheet .note{color:var(--muted);margin:0;line-height:1.45}#sheet .saverow{gap:6px;display:flex}#sheet .saverow input{min-width:0;height:var(--tap);font:inherit;font-size:var(--t-body);color:var(--fg);border:1px solid var(--border);background:0 0;border-radius:6px;flex:1;padding:0 12px}#sheet .saverow input:focus{border-color:var(--muted);outline:none}#sheet button.solid{height:var(--tap);background:var(--fg);color:var(--bg);font-weight:700;font-size:var(--t-body);border:0;border-radius:6px;padding:0 16px}#sheet #patch-list{flex-direction:column;gap:2px;display:flex}#sheet #patch-list .empty{color:var(--muted)}#sheet .item{align-items:center;gap:2px;display:flex}#sheet .item .name{min-width:0;height:var(--tap);color:var(--fg);font-size:var(--t-body);text-align:left;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:6px;flex:1;padding:0 12px;overflow:hidden}#sheet .item .name:hover{background:color-mix(in srgb, var(--fg) 8%, transparent)}#sheet .item.on .name{background:color-mix(in srgb, var(--fg) 12%, transparent);font-weight:700}#sheet .item .when{color:var(--muted);font-size:var(--t-small);font-variant-numeric:tabular-nums;flex:none;padding:0 6px}#sheet .item .del{height:var(--tap);color:var(--muted);font-size:var(--t-small);border:0;flex:none;padding:0 10px}#sheet .item .del:hover{color:var(--fg)}#sheet .actions{border-top:1px solid var(--border);flex-wrap:wrap;gap:6px;padding-top:12px;display:flex}#sheet .actions button,#sheet .group>button.wide{height:var(--tap);border:1px solid var(--border);color:var(--fg);font-size:var(--t-body);text-align:left;border-radius:6px;padding:0 12px}#sheet .actions button:hover,#sheet .group>button.wide:hover{border-color:var(--fg)}#sheet #capture.on{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:700}#sheet .about{gap:10px}#sheet .about .t{font-size:var(--t-title);color:var(--fg);font-weight:700}#sheet .about .what{color:var(--fg);max-width:52ch;line-height:1.5}#sheet .about .row{gap:8px;display:flex}#sheet .about a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:2px}#bar #more.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
