:root{--void:#050507;--canvas:#0c0c0f;--panel:#121217;--line:#26262f;--ink:#ecebf2;--ink-2:#a5a4b0;--ink-3:#7c7b88;--glow:#5b8cff;--bad:#ef665b;--vocals:#d55181;--drums:#c98500;--bass:#3987e5;--other:#199e70;--side:156px;--tail:40px;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{display:grid;grid-template-rows:auto 1fr auto;color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;background:radial-gradient(120% 90% at 50% 0%,transparent 35%,var(--void)100%)fixed,radial-gradient(#ffffff13 10%,transparent 11%)0 0/11px 11px,var(--canvas);margin:0}:focus-visible{outline:2px solid var(--glow);outline-offset:2px}.bar{display:flex;justify-content:space-between;align-items: center;padding:18px 28px}.brand{display:flex;color:var(--ink);text-decoration:none;align-items:baseline;gap:10px}.brand b{font:800 21px/1 var(--sans);letter-spacing:-.02em}.brand span{font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}.chip{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:7px 11px}.chip:before{content:"";display:inline-block;background:var(--other);box-shadow:0 0 8px var(--other);border-radius:50%;width:6px;height:6px;margin-right:8px}main{width:min(1180px,100% - 48px);margin:0 auto;padding:16px 0 40px}footer{text-align:center;padding:16px 28px}footer a{color:var(--ink-3);font:500 11px/1 var(--mono);letter-spacing:.08em;text-decoration:none}footer a:hover{color:var(--ink-2);text-decoration:underline}.start{display:grid;text-align:center;justify-items:center;gap:14px;padding-top:clamp(16px,7vh,80px)}h1{font:700 clamp(46px,8.4vw,104px)/.95 var(--sans);letter-spacing:-.04em;margin:0}.shiny{--shiny-width:180px;color:#ecebf2bd;background:linear-gradient(to right,transparent,#fff 50%,transparent)no-repeat 0 0/var(--shiny-width)100%;animation:shiny 8s infinite;-webkit-background-clip:text;background-clip:text}@keyframes shiny{0%,90%,to{background-position:calc(-100% - var(--shiny-width))0}30%,60%{background-position:calc(100% + var(--shiny-width))0}}.lede{color:var(--ink-2);margin:0 0 18px;font-size:17px}.drop{position:relative;display:grid;overflow:hidden;cursor:pointer;background:#121217b8;border:2px dashed #34343f;border-radius:22px;align-content: center;place-items: center;gap:16px;width:min(780px,100%);min-height:320px;padding:40px;transition:border-color .2s,background-color .2s}.drop:hover,.drop:focus-within{border-color:var(--ink-2);background:var(--panel)}.drop:focus-within{outline:2px solid var(--glow);outline-offset:4px}body[data-drag] .drop{border-style:solid;border-color:var(--glow);background:#10131d}.drop input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%;inset:0}.drop .btn,.drop .hint{position:relative;pointer-events:none}.ghost{position:absolute;display:grid;opacity:.34;pointer-events:none;-webkit-mask-image:radial-gradient(34% 62%,#0000 45%,#000 100%);mask-image:radial-gradient(34% 62%,#0000 45%,#000 100%);gap:12px;transition:opacity .3s;inset:26px 30px}.drop:hover .ghost,body[data-drag] .ghost{opacity:.55}.ghost canvas{width:100%;height:100%;min-height:0}.hint{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--ink-2)}.btn{position:relative;color:#dadada;font:600 14px/1 var(--sans);cursor:pointer;background:linear-gradient(#383838 0%,#242424 66%,#292929 100%);border:0;border-radius:12px;padding:2px}.btn .inner{display:flex;white-space:nowrap;background-color:#1d1d1d;background-image:radial-gradient(at 95% 89%,#0f0f0f 0,#0000 50%),radial-gradient(at 0% 100%,#111 0,#0000 50%);border-radius:10px;align-items: center;gap:8px;padding:12px 18px;transition:background-color .2s}.btn:hover:not(:disabled) .inner{background-color:#2a2a2a}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-loud{isolation:isolate;color:#fff;background:radial-gradient(80px at 80% -10%,#fff,#181b1b);border-radius:14px}.btn-loud:after{content:"";position:absolute;z-index:-1;border-radius:120px;width:65%;height:60%;top:0;right:0;box-shadow:0 0 20px #ffffff38}.btn-loud .blob{position:absolute;background:radial-gradient(60px at 0% 100%,#3fe9ff,#0000ff80,#0000);border-radius:14px;width:70px;height:100%;bottom:0;left:0;box-shadow:-10px 10px 30px #0051ff2d}.btn-loud .inner{position:relative;z-index:1;background:radial-gradient(80px at 80% -50%,#777,#0f1111);border-radius:12px;padding:13px 22px}.btn-loud .inner:before{content:"";position:absolute;background:radial-gradient(60px at 0% 100%,#00e1ff1a,#00f1,#0000);border-radius:12px;inset:0}.btn-loud:hover:not(:disabled) .inner{background:radial-gradient(80px at 80% -50%,#8c8c8c,#151818)}.deck{display:grid;gap:14px}.head{display:flex;flex-wrap:wrap;align-items: center;gap:14px 24px}.title{display:grid;gap:2px;min-width:0;margin-right:auto}.title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 23px/1.2 var(--sans);letter-spacing:-.012em;max-width:44ch}.title span,.time{font:500 13px/1.3 var(--mono);letter-spacing:.05em;color:var(--ink-2)}.transport{display:flex;align-items: center;gap:12px}.time{min-width:5ch}.actions{display:flex;flex-wrap:wrap;gap:10px}.play{position:relative;display:block;border-radius:50%;width:48px;height:48px}.play input{position:absolute;appearance:none;background:conic-gradient(var(--ink),var(--ink));cursor:pointer;border-radius:50%;width:100%;height:100%;margin:0}.play input:before{content:"";position:absolute;background:#000;border-radius:50%;width:91%;height:91%;top:50%;left:50%;transform:translate(-50%,-50%)}.play input:checked{animation:ring .7s ease-in-out 1 forwards}.play input:disabled{opacity:.35;cursor:not-allowed}@keyframes ring{0%{transform:rotate(0);background:conic-gradient(var(--ink),transparent 20%)}80%{background:conic-gradient(var(--ink),transparent 90%)}to{transform:rotate(360deg);background:conic-gradient(var(--ink),var(--ink))}}.play-icon,.pause-icon{position:absolute;pointer-events:none;width:16px;height:16px;top:50%}.play-icon{background:var(--ink);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:clip-path .4s ease-in-out;left:60%;transform:translate(-60%,-50%)rotate(90deg)}.play input:checked+.play-icon{clip-path:polygon(0 100%,0% 100%,100% 100%)}.play input:disabled~i{opacity:.35}.pause-icon{left:50%;transform:translate(-50%,-50%)}.pause-icon:before,.pause-icon:after{content:"";position:absolute;background:var(--ink);width:0;height:100%}.pause-icon:before{left:0}.pause-icon:after{right:0}.play input:checked~.pause-icon:before{animation:bar .3s ease-in-out .35s 1 forwards}.play input:checked~.pause-icon:after{animation:bar .3s ease-in-out .6s 1 forwards}@keyframes bar{to{width:35%}}.meter{overflow:hidden;background:var(--line);border-radius:3px;height:3px}.meter i{display:block;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:0 50%;height:100%;transition:transform .3s}body:not([data-state=working]) .meter{visibility:hidden}.status{display:flex;color:var(--ink-2);font:500 13px/1.4 var(--mono);letter-spacing:.02em;align-items: center;gap:12px;min-height:22px;margin:0}.vu{display:none;align-items: center;height:18px}body[data-state=working] .vu,body[data-shots=pending] .vu{display:flex}.vu i{background:var(--vocals);animation:vu 2s cubic-bezier(.41,.44,.72,.69)infinite;border-radius:3px;width:3px;height:16px;margin:0 1.5px}.vu i:nth-child(2){background:var(--drums);animation-delay:.25s}.vu i:nth-child(3){background:var(--bass);animation-delay:.5s}.vu i:nth-child(4){background:var(--other);animation-delay:.75s}.vu i:nth-child(5){background:var(--ink-2);animation-delay:1s}@keyframes vu{0%{transform:scaleY(1)}to{transform:scaleY(-1)}}.lanes{position:relative;display:grid;gap:8px}.lane{display:grid;grid-template-columns:var(--side)minmax(0,1fr)var(--tail);border:1px solid var(--line);background:var(--panel);border-radius:12px;align-items: center;gap:12px;padding:10px 12px}.lane canvas{display:block;width:100%;height:72px}.side{display:flex;flex-wrap:wrap;align-items: center;gap:8px}.name,.group h2{display:flex;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;align-items: center;gap:8px;margin:0}.name{flex:1}.name:before,.group h2:before{content:"";background:var(--stem);box-shadow:0 0 10px var(--stem);border-radius:2px;width:8px;height:8px}.key{position:relative;display:grid;cursor:pointer;place-items: center;width:30px;height:30px}.key input{position:absolute;appearance:none;cursor:pointer;border-radius:6px;margin:0;inset:0}.key span{position:absolute;pointer-events:none;background:linear-gradient(#555353,#363535,#303030);border:1px solid #222;border-top-width:2px;border-radius:6px;inset:0;box-shadow:inset 0 2px 1px #0000003b,0 2px 3px #00000080,0 6px 10px #00000059}.key span:before{content:"";position:absolute;filter:blur(2px);border-top:1px solid #fff;inset:3px 2px}.key b{position:relative;font:700 12px/1 var(--sans);color:#d6d5de;pointer-events:none}.key input:checked~span{background:linear-gradient(color-mix(in oklab,var(--stem)60%,#2a2a2a),color-mix(in oklab,var(--stem)38%,#1c1c1c));box-shadow:inset 0 1px 1px #00000059,inset 0 3px 3px #00000080,inset 0 8px 12px #00000059}.key input:checked~b{color:#fff;text-shadow:0 0 5px var(--stem),0 0 8px var(--stem);transform:translateY(1px)}.key input:focus-visible~span{outline:2px solid var(--glow);outline-offset:2px}.round{display:grid;color:var(--ink-2);cursor:pointer;background:#1b1b1b;border:0;border-radius:50%;place-items: center;width:40px;height:40px;transition:background-color .3s,color .3s;box-shadow:2px 2px 10px #0000001c}.round:hover:not(:disabled){background:var(--stem);color:#fff}.round:hover:not(:disabled) svg{animation:drop-in .6s cubic-bezier(.25,.46,.45,.94)both}.round:disabled{opacity:.35;cursor:not-allowed}@keyframes drop-in{0%{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}.seek{position:absolute;top:0;bottom:0;left:calc(var(--side) + 25px);right:calc(var(--tail) + 25px);overflow:hidden;cursor:pointer;touch-action:none;border-radius:6px}.playhead{position:absolute;border-left:2px solid var(--ink);transform:translateX(calc(var(--at,0)*100%));pointer-events:none;opacity:0;inset:0}body[data-state=done] .playhead{opacity:.92}.shots{display:flex;flex-wrap:wrap;gap:24px 44px;padding-top:10px}.group{display:grid;align-content: start;gap:12px}.group h2{color:var(--ink)}#bass{--stem:var(--bass)}#drums{--stem:var(--drums)}.pads{display:flex;flex-wrap:wrap;gap:14px}.note{color:var(--ink-2);font:500 13px/1.4 var(--mono);flex-basis:100%;margin:0}.pad{position:relative;background:#171717;border-radius:6px;width:98px;height:98px}.hit{position:relative;display:grid;color:#fff;text-align:left;cursor:pointer;background:#545251;border:0;border-radius:10px;align-content:space-between;justify-items:start;width:100%;height:100%;padding:13px 12px 11px;transition:all .1s ease-in-out;box-shadow:10px 10px 8px #00000060,inset 1.5px 1.5px 1px #a8a6a4,inset -3.2px -3.2px 8px #545251}.hit b{font:700 15px/1 var(--sans);letter-spacing:.03em;transition:all .1s ease-in-out}.hit small{font:500 10px/1.3 var(--mono);letter-spacing:.03em;color:#e2e0de;white-space:pre-line}.hit:after{content:"";position:absolute;background:color-mix(in oklab,var(--stem)70%,#222);border-radius:50%;width:8px;height:8px;transition:all .1s;top:13px;right:12px;box-shadow:inset 0 0 0 1px #00000059}.hit:active,.hit.on{box-shadow:0 0 #00000060,inset .5px .5px 4px #000,inset -3.2px -3.2px 8px #545251}.hit:active b,.hit.on b{transform:translateY(.5px)}.hit.on:after{background:var(--stem);box-shadow:0 0 10px var(--stem),0 0 2px #fff}.save{position:absolute;display:grid;color:#f0eeec;cursor:pointer;background:#00000052;border:0;border-radius:50%;place-items: center;width:28px;height:28px;transition:background-color .2s;bottom:7px;right:7px}.save:hover{background:#000}.toast{position:fixed;z-index:10;display:flex;border:1px solid #5a2a26;border-left:4px solid var(--bad);background:#1d1414;border-radius:12px;align-items: center;gap:12px;width:max-content;max-width:min(680px,100% - 32px);padding:10px 10px 10px 16px;font-size:14px;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0009}.toast svg{color:var(--bad);flex:none}@media (max-width:760px){:root{--side:78px;--tail:36px}main{width:calc(100% - 24px)}.bar{padding:14px 16px}.lane{gap:8px;padding:8px}.lane canvas{height:60px}.seek{left:calc(var(--side) + 17px);right:calc(var(--tail) + 17px)}.name{letter-spacing:.12em;flex-basis:100%}.round{width:36px;height:36px}.drop{min-height:260px;padding:28px 16px}.title strong{max-width:100%;font-size:19px}.actions{width:100%}}@media (prefers-reduced-motion:reduce){.shiny,.vu i,.play input:checked,.pause-icon:before,.pause-icon:after,.round:hover svg{animation-duration:1ms;animation-iteration-count:1}.meter i,.play-icon{transition:none}}