.vdrums{--vd-fg:#f4f4f4;--vd-muted:#9a99a0;--vd-line:#ffffff24;--vd-panel:#1b1b20;--vd-panel-hover:#26262d;--vd-blue:#012fa7;--vd-blue-light:#2d63f0;--vd-rec:#e5484d;color:var(--vd-fg);font-family:var(--font-family-sans)}.vdrums-kit{position:relative}.vdrums-svg{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;width:100%;height:auto;max-height:min(70vh,660px);margin:0 auto;display:block}.vdrums-svg *{pointer-events:none}.vdrums--skin-blue{--vd-shell-1:#011b63;--vd-shell-2:#0a3fd1;--vd-shell-3:#2d63f0;--vd-shell-4:#011d6b;--vd-rug:#012fa73d}.vdrums--skin-black{--vd-shell-1:#050506;--vd-shell-2:#1f2025;--vd-shell-3:#44464f;--vd-shell-4:#08080a;--vd-rug:#ffffff0f}.vdrums--skin-maple{--vd-shell-1:#5c3010;--vd-shell-2:#b06d34;--vd-shell-3:#dca263;--vd-shell-4:#62340f;--vd-rug:#b06d3433}.vdrums-svg--photo .vdrums-photo-flash{opacity:0}.vdrums-photo-flash--disc{fill:#012fa7}.vdrums-photo-pedal rect:first-child{fill:#2a2b31;stroke:#6b7080;stroke-width:2px}.vdrums-photo-pedal text{fill:#ffffffd9;text-anchor:middle;dominant-baseline:middle;font-size:18px;font-weight:500}.vdrums-svg .vdrums-zone{pointer-events:all;fill:#0000;cursor:pointer;outline:none}.vdrums-zone:focus-visible{stroke:#93b4ff;stroke-width:4px}.vdrums-anim{transform-box:fill-box;transform-origin:50%}.vdrums-rug{fill:var(--vd-rug)}.vdrums-stand{stroke:#575b69;stroke-width:5px;stroke-linecap:round}.vdrums-shell{fill:url(#vd-shell);stroke:#00000059;stroke-width:1.5px}.vdrums-lugs rect{fill:#c9ced8;opacity:.85}.vdrums-hoop{fill:#b9bec9;stroke:#e2e5eb;stroke-width:3px}.vdrums-head{fill:url(#vd-head)}.vdrums-flash{fill:#86a8ff;opacity:0}.vdrums-flash--metal{fill:#fff7dc}.vdrums-cymbal{fill:url(#vd-bronze);stroke:#7a5416;stroke-width:1.5px}.vdrums-cymbal-edge{fill:#6b4912}.vdrums-lathe{fill:none;stroke:#603e0a52;stroke-width:1.2px}.vdrums-bell{fill:#f2d47c;stroke:#78501480;stroke-width:1.2px}.vdrums-hat-split{stroke:#462d058c;stroke-width:2px;stroke-dasharray:5 5}.vdrums-kick-hoop{fill:var(--vd-shell-2);stroke:#e2e5eb;stroke-width:5px}.vdrums-kick-head{fill:url(#vd-kickhead)}.vdrums-kick-ring{fill:none;stroke:var(--vd-blue-light);stroke-width:3px;opacity:.8}.vdrums-wordmark{fill:#ffffff80;letter-spacing:.02em;text-anchor:middle;font-size:19px;font-weight:500}.vdrums-pedal{fill:#383b45;stroke:#6b7080;stroke-width:2px}.vdrums-name{fill:#ffffffeb;text-anchor:middle;dominant-baseline:middle;font-size:21px;font-weight:500}.vdrums-name--dark{fill:#1f1f26}.vdrums-key rect{fill:#0a0a0ed1;stroke:#ffffff47;stroke-width:1px}.vdrums-key text{fill:#fff;text-anchor:middle;dominant-baseline:middle;font-size:17px;font-weight:600}@media (hover:none) and (pointer:coarse){.vdrums-key{display:none}}.vdrums-locked{color:#fff;white-space:nowrap;pointer-events:none;background:#012fa7f0;border-radius:999px;margin:0;padding:8px 14px;font-size:14px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.vdrums-bar{flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px;display:flex}.vdrums-group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.vdrums-btn,.vdrums-icon-btn,.vdrums-seg-item{font-family:var(--font-family-sans);appearance:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}.vdrums-btn{border:1px solid var(--vd-line);background:var(--vd-panel);min-height:44px;color:var(--vd-fg);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:15px;font-weight:500;line-height:1.2;display:inline-flex}.vdrums-btn:hover:not(:disabled),.vdrums-icon-btn:hover:not(:disabled){background:var(--vd-panel-hover)}.vdrums-btn:disabled,.vdrums-icon-btn:disabled,.vdrums-seg-item:disabled{opacity:.45;cursor:default}.vdrums-btn--on,.vdrums-btn--on:hover:not(:disabled){background:var(--vd-blue);border-color:var(--vd-blue-light)}.vdrums-btn--rec svg{color:var(--vd-rec)}.vdrums-btn--live,.vdrums-btn--live:hover:not(:disabled){border-color:var(--vd-rec);background:#8f1d23}.vdrums-btn--live svg{color:#fff}.vdrums--recording .vdrums-btn--live,.vdrums--overdub .vdrums-btn--live{animation:1.2s ease-in-out infinite vdrums-pulse}@keyframes vdrums-pulse{50%{box-shadow:0 0 0 5px #e5484d40}}.vdrums-btn--ghost{background:0 0}.vdrums-btn--sm{min-height:36px;padding:6px 14px;font-size:14px}.vdrums-icon-btn{border:1px solid var(--vd-line);background:var(--vd-panel);width:44px;height:44px;color:var(--vd-fg);border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.vdrums-btn:focus-visible,.vdrums-icon-btn:focus-visible,.vdrums-seg-item:focus-visible,.vdrums-range:focus-visible{outline-offset:2px;outline:2px solid #93b4ff}.vdrums-full-btn{margin-left:auto}.vdrums-bpm{text-align:center;white-space:nowrap;min-width:78px}.vdrums-bpm-value{font-variant-numeric:tabular-nums;font-size:24px;font-weight:300}.vdrums-bpm-unit{color:var(--vd-muted);font-size:12px;font-weight:500}.vdrums-range{appearance:none;cursor:pointer;background:0 0;width:150px;height:28px;margin:0 0 0 6px}.vdrums-range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--vd-blue-light) var(--fill,50%), #ffffff24 var(--fill,50%));border-radius:999px;height:6px}.vdrums-range::-moz-range-track{background:#ffffff24;border-radius:999px;height:6px}.vdrums-range::-moz-range-progress{background:var(--vd-blue-light);border-radius:999px;height:6px}.vdrums-range::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--vd-blue-light);background:#fff;border-radius:50%;width:20px;height:20px;margin-top:-7px}.vdrums-range::-moz-range-thumb{border:3px solid var(--vd-blue-light);background:#fff;border-radius:50%;width:14px;height:14px}.vdrums-seg{border:1px solid var(--vd-line);background:#16161a;border-radius:14px;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;display:inline-flex}.vdrums-seg-label{color:var(--vd-muted);padding:0 8px 0 6px;font-size:13px}.vdrums-seg-item{min-height:34px;color:var(--vd-muted);white-space:nowrap;background:0 0;border:0;border-radius:10px;padding:6px 12px;font-size:14px;font-weight:500}.vdrums-seg-item:hover:not(:disabled){color:var(--vd-fg)}.vdrums-seg-item--on,.vdrums-seg-item--on:hover:not(:disabled){background:var(--vd-blue);color:#fff}.vdrums-status{align-items:center;gap:12px;min-height:22px;margin-top:16px;display:flex}.vdrums-beats{flex:none;gap:6px;display:inline-flex}.vdrums-beat{background:#ffffff29;border-radius:50%;width:10px;height:10px}.vdrums-beat--on{background:var(--vd-blue-light);box-shadow:0 0 8px #2d63f0cc}.vdrums-beat--one.vdrums-beat--on{background:#8fb0ff}.vdrums-status-text{color:#dcdce0;flex:0 auto;min-width:0;font-size:14px}.vdrums-progress{background:#ffffff1a;border-radius:999px;flex:1;min-width:40px;height:4px;position:relative;overflow:hidden}.vdrums-progress-fill{background:var(--vd-blue-light);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.vdrums-midi{color:var(--vd-muted);flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;font-size:14px;line-height:1.45;display:flex}.vdrums-midi svg{flex:none}.vdrums-midi--ready{color:#9fdcb2}.vdrums-midi-text{flex:220px}.vdrums-hint{color:var(--vd-muted);margin:10px 0 0;font-size:13px;line-height:1.5}.vdrums-hint--touch,.vdrums-hint--rotate{display:none}@media (hover:none) and (pointer:coarse){.vdrums-hint--keys{display:none}.vdrums-hint--touch{display:block}}@media (max-width:640px){.vdrums:not(.vdrums--full) .vdrums-name,.vdrums:not(.vdrums--full) .vdrums-wordmark,.vdrums:not(.vdrums--full) .vdrums-key{display:none}.vdrums-range{flex:100%;width:auto;margin:4px 0 0}.vdrums-full-btn{margin-left:0}.vdrums-status{flex-wrap:wrap}.vdrums-progress{flex-basis:100%}}@media (max-width:640px) and (orientation:portrait){.vdrums:not(.vdrums--full) .vdrums-hint--rotate{text-align:center;margin-top:8px;display:block}}.vdrums--full{z-index:2147483000;background:#0f0f11;padding:12px clamp(12px,3vw,32px) 20px;position:fixed;inset:0;overflow-y:auto}.vdrums--full .vdrums-svg{max-height:calc(100dvh - 200px)}@media (max-height:520px){.vdrums--full .vdrums-bar--options,.vdrums--full .vdrums-midi,.vdrums--full .vdrums-hint,.vdrums--full .vdrums-range{display:none}.vdrums--full .vdrums-svg{max-height:calc(100dvh - 110px)}.vdrums--full .vdrums-bar,.vdrums--full .vdrums-status{margin-top:6px}}@media (prefers-reduced-motion:reduce){.vdrums--recording .vdrums-btn--live,.vdrums--overdub .vdrums-btn--live{animation:none}}