@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:swap;src:url(./silkscreen-latin-400-normal-CtPo2yA5.woff2)format("woff2")}@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url(./vt323-latin-400-normal-wDgJuOC9.woff2)format("woff2")}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#14131a;--panel-hi:#2d2a35;--line:#3f3b48;--mute:#a39eab;--cream:#efe6d0;--red:#e5432f;--orange:#f28a1e;--amber:#f7c331;--teal:#2fc4b2;--label:"Silkscreen", ui-monospace, Consolas, monospace;--lcd:"VT323", ui-monospace, Consolas, monospace}*{box-sizing:border-box}html,body{background:var(--ink);color:var(--cream);font-family:var(--lcd);margin:0;padding:0;overflow-x:hidden}body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;min-height:100vh;display:flex}#app{background:linear-gradient(#2b2933,#24222b);border:2px solid #000;flex-direction:column;gap:10px;width:100%;min-width:0;max-width:1072px;margin:auto;padding:clamp(8px,1.6vw,16px);display:flex;box-shadow:inset 0 2px #45414f,inset 0 -3px #16151b}.faceplate{flex-wrap:wrap;align-items:center;gap:12px;min-width:0;display:flex}.logo{image-rendering:pixelated;width:auto;max-width:100%;height:30px;display:block}.lcds{flex-wrap:wrap;gap:6px;margin-left:auto;display:flex}.lcd{font:400 1.5rem/1 var(--lcd);color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap;background:#101a14;align-items:baseline;gap:6px;padding:2px 10px 3px;display:flex;box-shadow:inset 0 2px #000,inset 0 -1px #3a3743}.lcd small{font:400 .6rem/1 var(--label);color:var(--mute)}#page,#length,#follow{min-height:0;padding:2px 10px}#length{white-space:nowrap}.sys{align-items:center;gap:8px;display:flex}.sys button{min-height:32px}.sys #follow{align-self:stretch}.tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.tabs .hw{min-height:32px;padding-block:4px}#theme.tab{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#volume{min-width:0;accent-color:var(--amber)}#mix-backing{accent-color:var(--cream)}.dock{--dock-h:46px;height:var(--dock-h);min-width:0;display:grid}.dock>*{height:var(--dock-h);box-sizing:border-box;min-width:0;margin:0}.dock>[hidden]{display:none}.fx-panel{background:#1f1d25;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:center;gap:10px;padding:4px 10px;display:grid;box-shadow:inset 0 2px #000,inset 0 -1px #3a3743}.fx-panel[hidden]{display:none}.fx-knob{flex-direction:column;gap:2px;min-width:0;display:flex}.fx-knob small{font:400 .6rem/1 var(--label);color:var(--mute)}.fx-knob input{width:100%;accent-color:var(--amber)}.mix-panel{grid-template-columns:1fr;gap:10px}.mix-panel .mix-channel{flex-direction:row;align-items:center;gap:12px}.mix-panel .mix-channel[hidden]{display:none}.mix-panel .mix-channel small{flex:none;min-width:7.5em}.mix-panel small{color:var(--c)}.mix-panel input{width:auto;accent-color:var(--c);flex:1}.mix-all-panel{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.mix-all-panel small{color:var(--c)}.mix-all-panel input{accent-color:var(--c);width:100%}.mix-master small{color:var(--cream)}.mix-master input{accent-color:var(--cream)}.share-panel{grid-template-columns:auto auto auto minmax(0,1fr)}.share-panel .hw{padding-inline:14px}.share-panel .hw,#fx-reset,#beat-random,#beat-undo{height:34px;min-height:0;padding-block:0}.share-status{font:400 1.1rem/1.1 var(--lcd);color:#cfe8c8;text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.sampler-panel{grid-template-columns:minmax(0,1fr) auto;gap:6px}.sampler-volume{--c:var(--orange);align-items:center;gap:4px;width:110px;display:flex}.sampler-volume small{font:400 .6rem/1 var(--label);color:var(--mute)}.sampler-volume input{min-width:0;accent-color:var(--c);flex:1}.sample-pick{white-space:nowrap;text-overflow:ellipsis;height:34px;min-height:0;padding-block:0;overflow:hidden}.sound-item:before{content:"■ ";color:var(--c)}.sound-item.active:before{color:#1d1a10}.sounds-controls{grid-template-columns:1fr 1fr;gap:6px;display:grid}.sounds-controls .hw{min-height:40px}#sample-mic.rec{color:var(--red)}.steps{grid-template-columns:repeat(16,1fr);gap:0;display:grid}.steps.loopable{cursor:pointer;touch-action:none;padding-block:4px}.keys>[hidden]{display:none}.steps span{font:400 .6rem/1 var(--label);text-align:center;color:var(--mute);flex-direction:column;align-items:center;gap:3px;min-width:0;display:flex}.steps i{background:#3a3743;width:72%;height:6px;display:block;box-shadow:inset 0 -1px #0006}.steps span.g0 i{background:#5a2b28}.steps span.g1 i{background:#5e3d1f}.steps span.g2 i{background:#5e4d20}.steps span.g3 i{background:#5a5448}.steps span.fires i{outline:1px solid var(--cream);outline-offset:1px}.steps span.looped{background:#efe6d024}.steps span.on.g0 i{background:var(--red);box-shadow:0 0 8px var(--red)}.steps span.on.g1 i{background:var(--orange);box-shadow:0 0 8px var(--orange)}.steps span.on.g2 i{background:var(--amber);box-shadow:0 0 8px var(--amber)}.steps span.on.g3 i{background:var(--cream);box-shadow:0 0 8px var(--cream)}.steps em{height:.6rem;font-style:normal}#game{touch-action:none;aspect-ratio:2;background:#000;width:100%;max-width:100%;display:block}#stage{flex-direction:column;gap:6px;width:min(100%,1024px,200dvh - 628px);margin:0 auto;display:flex}.deck{grid-template-columns:1fr 1.25fr;align-items:stretch;gap:12px;min-width:0;display:grid}.bank{flex-direction:column;gap:5px;min-width:0;height:100%;display:flex}.cap{font:400 .6rem/1 var(--label);color:var(--mute);letter-spacing:.08em}.pads{flex:1;grid-template-columns:repeat(6,minmax(0,1fr));align-content:stretch;gap:6px;display:grid}.keys{flex:1;grid-template-columns:repeat(6,1fr);align-content:stretch;gap:6px;display:grid}.pads>.pad,.keys>.hw,.tempo>*{height:100%}.hw{font:400 .72rem/1.1 var(--label);color:var(--cream);cursor:pointer;background:#3a3743;border:0;min-width:0;min-height:44px;padding:6px 4px;box-shadow:inset 0 2px #565160,inset 0 -3px #1d1b22,0 2px #000}.hw:active{transform:translateY(1px);box-shadow:inset 0 1px #565160,inset 0 -1px #1d1b22}.hw:focus-visible,.pad:focus-visible{outline:2px solid var(--cream);outline-offset:1px}.hw.go{background:var(--amber);color:#1d1a10;box-shadow:inset 0 2px #ffe79a,inset 0 -3px #a8701a,0 2px #000}.hw.selected{color:var(--amber)}#backing{flex-direction:column;justify-content:center;align-items:center;gap:2px;line-height:1;display:flex}#backing.tab{min-height:32px;padding-block:2px}#backing small{font:400 .5rem/1 var(--label);color:var(--mute)}.hw.rec{color:var(--red)}.tempo{grid-column:span 2;grid-template-columns:minmax(28px,auto) minmax(0,1fr) minmax(28px,auto);gap:4px;min-width:0;display:grid}.tempo .lcd{justify-content:center;align-items:center;min-width:0;padding:2px 6px 3px}#bpm{width:3ch;min-width:0;color:inherit;font:inherit;text-align:center;appearance:textfield;background:0 0;border:0;flex:none;padding:0}#bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#bpm:focus-visible{outline:2px solid var(--cream);outline-offset:2px}.hw:disabled{opacity:.45;cursor:default}.pad{cursor:pointer;text-align:center;background:#3a3743;border:0;grid-template-columns:1fr;place-items:center;row-gap:2px;min-width:0;min-height:44px;padding:4px 6px 7px;display:grid;position:relative;box-shadow:inset 0 2px #565160,inset 0 -3px #1d1b22,0 2px #000}.pad .led{background:var(--c);opacity:.32;justify-self:stretch;height:4px;margin-bottom:4px}.pad canvas{width:32px;height:32px;image-rendering:pixelated}.pad b{font:400 .72rem/1.1 var(--label);white-space:nowrap;max-width:100%;overflow:hidden}.pad small{font:400 1.05rem/1 var(--lcd);color:var(--amber)}.pad kbd{font:400 .6rem/1 var(--label);color:var(--mute);position:absolute;top:10px;right:4px}.pad.selected{background:#4a4655}.pad.selected .led{opacity:1;box-shadow:0 0 8px var(--c)}#tool-kick{--c:var(--red)}#tool-hat{--c:var(--amber)}#tool-synth{--c:var(--teal)}#tool-snare{--c:#a6d94a}#tool-sample{--c:var(--orange)}#tool-bass{--c:#9b6cff}.info-backdrop{z-index:20;background:#14131acc;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.info-backdrop[hidden]{display:none}.info-panel{width:min(520px,100%);max-height:calc(100dvh - 32px);color:var(--cream);background:linear-gradient(#2b2933,#24222b);border:2px solid #000;flex-direction:column;gap:10px;padding:14px 16px;display:flex;overflow-y:auto;box-shadow:inset 0 2px #45414f,inset 0 -3px #16151b}.info-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.info-title{font:400 .9rem/1.2 var(--label);color:var(--amber);margin:0}.info-head .hw{min-height:32px;padding-inline:10px}.info-blurb,.info-line{font:400 1.15rem/1.25 var(--lcd);color:#cfe8c8;margin:0}.info-map{gap:3px;display:flex}.info-section{font:400 .55rem/1 var(--label);text-align:center;color:var(--mute);white-space:nowrap;background:#3a3743;min-width:0;padding:8px 2px;overflow:hidden}.info-chorus{background:#4c3c2f}.info-break{background:#2c2b30}.info-section.current{background:var(--amber);color:#1d1a10}.info-map.dim{opacity:.45}.info-facts{font:400 1.1rem/1.2 var(--lcd);grid-template-columns:auto 1fr;gap:4px 12px;margin:0;display:grid}.info-facts dt{color:var(--mute)}.info-facts dd{color:var(--cream);margin:0}.music-controls{grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;display:grid}.music-label{font:400 .55rem/1 var(--label);color:var(--mute)}.music-row{align-items:stretch;gap:6px;display:flex}.music-row .hw{min-height:40px;padding-inline:12px}.music-modes .hw{flex:1}.music-lcd{font:400 1.3rem/1 var(--lcd);color:#cfe8c8;background:#101a14;flex:1;justify-content:center;align-items:center;min-height:40px;padding-inline:8px;display:flex;box-shadow:inset 0 2px #000,inset 0 -1px #3a3743}.music-modes .hw.selected{color:var(--amber);background:#4a4655}.beats-panel{width:min(560px,100%)}.beats-lcd{background:#101a14;gap:8px;padding:8px;display:grid;box-shadow:inset 0 2px #000,inset 0 -1px #3a3743}.beats-list{flex-direction:column;min-height:72px;max-height:min(220px,100dvh - 230px);display:flex;overflow-y:auto}.beats-group{font:400 .55rem/1 var(--label);color:var(--mute);flex:none;padding:8px 6px 4px}.beats-item{all:unset;cursor:pointer;font:400 1.2rem/1.2 var(--lcd);color:#cfe8c8;white-space:nowrap;text-overflow:ellipsis;flex:none;padding:2px 6px;overflow:hidden}.beats-item.active{background:var(--amber);color:#1d1a10}.beats-item:focus-visible{outline:2px solid var(--cream);outline-offset:-2px}.beats-item.loaded:after{content:" ♪"}.beats-detail{border-top:1px solid #2c3a30;gap:2px;padding:6px 6px 0;display:grid}.beats-name,.beats-meta,.beats-blurb{font:400 1.1rem/1.2 var(--lcd);margin:0}.beats-name{color:var(--amber)}.beats-meta{color:var(--mute)}.beats-blurb{color:#cfe8c8}#beats-load{grid-column:auto}.beats-controls{grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:6px;display:grid}.beats-controls .hw{min-height:40px;padding-inline:12px}.screen-tabs{gap:6px;display:flex}.screen-tabs .hw{min-height:32px;padding-inline:12px;font-size:.7rem}.screen-tabs .hw.selected{color:var(--amber);background:#4a4655}.screen-page{flex-direction:column;gap:10px;display:flex}.screen-page[hidden]{display:none}#overlay{z-index:10;text-align:center;background:#14131adb;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;display:flex;position:fixed;inset:0}#overlay.hidden{display:none}#overlay.passive{pointer-events:none;background:#14131a8c}#overlay .logo{height:clamp(40px,10vw,84px)}#overlay-text{font:400 clamp(1.2rem, 3vw, 1.6rem)/1.1 var(--lcd)}#overlay.passive .logo{display:none}#overlay.passive #overlay-text{font:400 clamp(1.6rem, 6vw, 3rem)/1.1 var(--label)}#overlay-detail{font:400 clamp(1.1rem, 3vw, 1.5rem)/1.1 var(--lcd);color:var(--mute)}#overlay-detail:empty{display:none}#mode-buttons{gap:10px;display:flex}#overlay.passive #mode-buttons{display:none}#mode-buttons .mode{min-width:clamp(110px,24vw,200px);padding:8px 10px 11px}#mode-buttons .mode span{font:400 clamp(.95rem, 2.2vw, 1.2rem)/1.2 var(--label);display:block}#mode-buttons .mode small{font:400 clamp(.9rem, 2vw, 1.15rem)/1.1 var(--lcd);color:var(--mute);display:block}#rotate-hint{font:400 1.1rem/1.1 var(--lcd);color:var(--mute);margin:0;display:none}@media (width<=760px){.deck{grid-template-columns:1fr}.keys{grid-template-columns:repeat(6,1fr)}.hw.go,#stop,.tempo,#live{grid-column:span 2}#mute,#clear{grid-column:span 3}.bank{height:auto}.pads,.keys{flex:none;align-content:normal}.pads>.pad,.keys>.hw,.tempo>*{height:auto}.logo{height:24px}.lcds{width:100%;margin-left:0}.lcd{flex:1;justify-content:center;padding-inline:4px;font-size:1.25rem}.pad{text-align:center;grid-template-columns:1fr;justify-items:center}.pad canvas{grid-row:auto}.pad kbd,.steps span em{display:none}.sys{width:100%}.sys button{min-height:44px}.tabs{gap:4px}.tabs .hw{padding-inline:2px;font-size:.58rem}#stage{width:100%}.dock{--dock-h:44px}.fx-panel{gap:6px;padding:4px 6px}.mix-all-panel{gap:6px}.sampler-volume{width:110px}.share-panel .hw,#fx-reset,#beat-random,#beat-undo{padding-inline:4px;font-size:.6rem}.share-status{display:none}.pad{padding-inline:2px}.pad b{font-size:min(.72rem,2.6vw)}.tempo .lcd{font-size:min(1.25rem,4.6vw)}.tempo .lcd small{font-size:min(.6rem,2.2vw)}}@media (width<=760px) and (height<=600px){#app{gap:6px}.pad canvas{width:24px;height:24px}}@media (height<=520px){#app{gap:4px;padding:4px}.faceplate{flex-wrap:nowrap}.logo{height:20px}.lcds{flex-wrap:nowrap;width:auto;margin-left:auto}.lcd{flex:none;padding-inline:6px;font-size:1.1rem}.lcd small{display:none}.sys{flex:none;width:auto}.cap,.steps em{display:none}#dock:has(>#mix:not([hidden])){display:none}.deck{grid-template-columns:1.15fr 1fr;gap:6px}.pad{text-align:left;grid-template-columns:auto 1fr;justify-items:start;padding:2px 4px 5px}.pad b,.pad kbd{display:none}.pad canvas{grid-row:auto;width:24px;height:24px}.pad .led{height:2px;margin-bottom:2px}#stage{gap:2px;width:min(100%,200dvh - 312px)}}@media (width<=760px) and (orientation:portrait){#app{border-inline:0;gap:6px;padding-inline:0}#hud,#dock,#controls{margin-inline:8px}.cap{display:none}.bank{padding:4px}.pad canvas{width:24px;height:24px}#rotate-hint{display:block}.lcds{order:1}.lcds>.hw{flex:auto}.sys{width:auto;margin-left:auto}.sys button{min-height:36px}#overlay.passive #rotate-hint{display:none}}@media (height<=520px) and (orientation:landscape){#app{grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 190px;align-items:start;gap:4px 8px;display:grid}#stage{grid-area:1/1/4;width:min(100%,200dvh - 60px)}#hud{flex-wrap:wrap;grid-area:1/2;gap:4px}#tabs{grid-area:2/2;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}#tabs .hw{grid-column:span 2}#tabs .hw:nth-child(n+4){grid-column:span 3}#tabs .hw{min-height:28px;padding-inline:2px;font-size:.55rem}#hud .logo{display:none}#hud{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.lcds,.sys{display:contents}.lcd{flex:1;justify-content:center;padding-inline:2px}#controls{grid-area:3/2;grid-template-columns:1fr;gap:4px}.keys{grid-template-columns:repeat(2,1fr);gap:4px}.hw.go,#stop{grid-column:auto}.tempo{grid-column:span 2}.keys>.hw:not(.go):not(#stop){grid-column:auto}.hw{min-height:40px}.sys button{min-height:0;padding:2px 10px}.pad{text-align:center;grid-template-columns:1fr;justify-items:center}.pad canvas{width:20px;height:20px}#dock{z-index:5;position:fixed;bottom:8px;left:8px;right:206px}.beats-panel{gap:6px;padding-block:8px}.beats-list{min-height:0;max-height:calc(100dvh - 220px)}.beats-blurb{display:none}.beats-controls .hw{min-height:34px}}@media (width<=380px){.pad b{font-size:min(.62rem,2.6vw)}}