@font-face{font-family:Digital Numbers;src:url(/assets/DigitalNumbers-Regular-D2SuiGNn.woff)format("woff");font-weight:400;font-style:normal;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#111;background:#141414;font-family:Inter,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-height:100dvh;margin:0}button,input{font:inherit}.stage{background:radial-gradient(circle at 50% 40%,#2a2a2a,#101010 70%);place-items:center;min-height:100dvh;padding:8px;display:grid}.device-slot{aspect-ratio:430/932;width:min(430px,100vw - 16px,46.1373dvh - 7.38197px);container-type:inline-size}.device{--u:calc(100cqi / 430);-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative}.body{border:calc(var(--u) * 1) solid #f4f4f4;border-radius:calc(var(--u) * 15);background:linear-gradient(160deg,#d9d9db 5%,#a9a9ab 93%)}.screen{box-shadow:inset 0 calc(var(--u) * 10) calc(var(--u) * 18) #00000073;background:linear-gradient(90deg,#ffffff0d,#0000 12% 88%,#ffffff14),linear-gradient(#3a3a3a,#111 28%,#070707 70%,#000)}.art{pointer-events:none;width:100%;height:100%;display:block}.bpm-stack{justify-content:center;align-items:center;gap:calc(var(--u) * 8);display:flex;position:absolute}.bpm-slot{width:1ch;height:1em;font-family:Digital Numbers,monospace;font-size:calc(var(--u) * 76);line-height:1;position:relative}.bpm-ghost,.bpm-digit{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.bpm-ghost{color:#b2bcc829}.bpm-digit{color:#b2bcc8;text-shadow:0 0 calc(var(--u) * 6) #b2bcc847}.volume-indicator{width:calc(var(--u) * 21);height:calc(var(--u) * 22);padding:calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3);color:#fff;font-family:Source Code Pro,ui-monospace,monospace;font-size:calc(var(--u) * 10);pointer-events:none;background:#2a2a2a;justify-content:center;align-items:center;font-weight:400;line-height:normal;display:flex;position:absolute;top:0;left:0}.metro{cursor:pointer;z-index:2;background:0 0;border:0;padding:0}.metro.is-on{filter:drop-shadow(0 0 calc(var(--u) * 4) #e22d6273)}.metro-svg{width:100%;height:100%;display:block;overflow:visible}.ticks-layer{z-index:1}.ticks rect{fill:#2a2a2a}.ticks[data-side=left] [data-side=left] rect,.ticks[data-side=right] [data-side=right] rect{fill:#e22d62}.bar-label{color:#fff;font-family:Source Code Pro,ui-monospace,monospace;font-size:calc(var(--u) * 16);z-index:1;line-height:1}.bar-corner{z-index:2}.sub-chip{width:calc(var(--u) * 34);height:calc(var(--u) * 24.8);color:#8d8d8d;border:calc(var(--u) * 1) solid #000;font-family:Source Code Pro,ui-monospace,monospace;font-size:calc(var(--u) * 14);background:#111;place-items:center;line-height:1;display:grid;position:absolute;left:0}.sub-chip.is-active{color:#3a3a3a;box-shadow:calc(var(--u) * 3) calc(var(--u) * 3) 0 #d02555;background:#ddd}.sub-chip.is-sounding{color:#d7d7d7}.control-label{color:#434343;font-size:calc(var(--u) * 12);letter-spacing:.06em;line-height:1}.label-center{text-align:center}.slider-knob{z-index:2}.bpm-slider{opacity:0;cursor:pointer;z-index:3;margin:0}.timing-btn{width:calc(var(--u) * 27);height:calc(var(--u) * 37);border:calc(var(--u) * 1) solid transparent;color:#fff;font-family:Inter,sans-serif;font-size:calc(var(--u) * 12);cursor:pointer;background:linear-gradient(#000,#000) padding-box padding-box,linear-gradient(#e6e6e6,#b2b2b2) border-box;padding:0;font-weight:400;line-height:normal;position:absolute;top:0}.timing-btn:focus,.timing-btn:focus-visible{outline:none}.timing-btn.is-selected{color:#9c9c9c;background:linear-gradient(#000,#000) padding-box padding-box,linear-gradient(#b2b2b2,#e6e6e6) border-box}.timing-cap{inset:calc(var(--u) * 1);border:calc(var(--u) * 1) solid #989493;border-radius:calc(var(--u) * 3);box-shadow:calc(var(--u) * 1) calc(var(--u) * 4) calc(var(--u) * 6.96) #00000080;pointer-events:none;background:linear-gradient(-54.91deg,#1d1d1d 26.035%,#1a1819 75.618%);position:absolute}.timing-btn.is-selected .timing-cap{box-shadow:none;border-color:#111}.timing-digits{pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:10.81% 33.33% 8.11% 37.04%}.knob-anchor,.knob{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.knob{cursor:grab;background:0 0;border:0;padding:0;position:relative;overflow:visible}.knob:active{cursor:grabbing}.knob img{left:calc(var(--u) * -3.48);width:calc(var(--u) * 100.92);height:calc(var(--u) * 100.92);transform-origin:46.5% 43.1%;pointer-events:none;transition:transform .16s;position:absolute;top:0}.knob-mark{width:calc(var(--u) * 87);height:calc(var(--u) * 87);transform-origin:50%;pointer-events:none;transition:transform .16s;position:absolute;top:50%;left:50%}.knob-mark:before{content:"";left:50%;top:calc(var(--u) * 4);width:calc(var(--u) * 3.48);height:calc(var(--u) * 10.44);background:#fff;position:absolute;transform:translate(-50%)}.knob-mark-volume:before{background:#7b7b7b}.power-btn{cursor:pointer;z-index:4;background:0 0;border:0;padding:0;overflow:visible}.power-btn img{width:calc(var(--u) * 38.92);height:calc(var(--u) * 48.92);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.power-btn:focus-visible,.metro:focus-visible,.bpm-slider:focus-visible{outline:calc(var(--u) * 2) solid #e22d62;outline-offset:calc(var(--u) * 3)}.knob:focus,.knob:focus-visible{outline:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.metro.is-on{filter:none}.knob img,.knob-mark{transition:none}}