.drum-page[data-v-5b435b22]{margin:0 auto;max-width:1400px;padding:16px 24px}.top-bar[data-v-5b435b22]{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:12px}.top-left[data-v-5b435b22]{align-items:baseline;display:flex;gap:12px}.top-left h1[data-v-5b435b22]{color:var(--text-main,#3a2c20);font-size:clamp(20px,2.5vw,28px);letter-spacing:.02em;line-height:1.2}.status-tip[data-v-5b435b22]{color:var(--text-subtle,#7f6d5b);font-size:13px}.top-right[data-v-5b435b22]{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.ui-btn[data-v-5b435b22]{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:3px;cursor:pointer;display:inline-flex;gap:6px;justify-content:center;outline:none;transition:border-color .18s ease,background .18s ease,color .18s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ui-btn[data-v-5b435b22]:focus-visible{box-shadow:0 0 0 2px #d8893129}.ui-btn[data-v-5b435b22]:disabled{cursor:not-allowed;opacity:.6}.ui-btn-primary[data-v-5b435b22]{background:transparent;border-color:#b879262e;color:var(--text-main,#3a2c20);font-weight:600;height:34px;padding:0 18px}.ui-btn-primary[data-v-5b435b22]:focus-visible,.ui-btn-primary[data-v-5b435b22]:hover{background:transparent;border-color:#d8893147}.ui-btn-secondary[data-v-5b435b22]{background:transparent;border-color:#8c6d4c24;color:var(--text-main,#3a2c20);font-weight:600;min-width:36px}.ui-btn-secondary[data-v-5b435b22]:focus-visible,.ui-btn-secondary[data-v-5b435b22]:hover{background:transparent;border-color:#d889313d}.ui-btn-accent[data-v-5b435b22]{background:transparent;border-color:#d889312e;color:#7f4a0d;font-weight:700;height:34px;padding:0 18px}.ui-btn-accent[data-v-5b435b22]:focus-visible,.ui-btn-accent[data-v-5b435b22]:hover{background:transparent;border-color:#d8893142}.ui-btn-small[data-v-5b435b22]{font-size:13px;height:28px;padding:0 12px}.blog-link[data-v-5b435b22]{align-items:center;background:transparent;border-radius:3px;color:var(--text-main,#3a2c20);display:inline-flex;height:36px;justify-content:center;transition:border-color .16s ease,background .16s ease,color .16s ease;width:36px}.blog-link[data-v-5b435b22]:hover{background:transparent;border-color:#d889313d;color:#7f4a0d}.blog-link svg[data-v-5b435b22]{height:18px;width:18px;fill:currentColor}.pill-row[data-v-5b435b22]{display:flex;flex-wrap:wrap;gap:8px}.pill[data-v-5b435b22]{align-items:center;background:#674e3414;border-radius:999px;color:var(--text-main,#3a2c20);display:inline-flex;font-size:13px;gap:6px;padding:6px 12px;white-space:nowrap}.pill strong[data-v-5b435b22]{color:var(--accent,#d88931);min-width:20px;text-align:center}.content-area[data-v-5b435b22]{align-items:flex-end;display:flex;gap:16px;justify-content:center;min-height:calc(100vh - 176px)}.svg-wrapper[data-v-5b435b22]{contain:layout paint;margin-top:clamp(12px,3vh,32px);position:relative;width:min(980px,100%)}.content-area.debug-active .svg-wrapper[data-v-5b435b22]{width:min(860px,100%)}.svg-loading[data-v-5b435b22]{align-items:center;aspect-ratio:1672/941;color:var(--text-subtle,#7f6d5b);display:flex;flex-direction:column;gap:14px;justify-content:center;text-align:center;width:100%}.loading-spinner[data-v-5b435b22]{animation:drumLoadingSpin .85s linear infinite;border:4px solid rgba(140,109,76,.16);border-radius:50%;border-top:4px solid var(--accent,#c98d2b);height:46px;width:46px}.svg-loading p[data-v-5b435b22]{font-size:15px;letter-spacing:.04em;margin:0}.loading-progress[data-v-5b435b22]{background:#8c6d4c1f;border-radius:999px;height:8px;overflow:hidden;width:min(320px,72%)}.loading-progress-bar[data-v-5b435b22]{background:linear-gradient(90deg,#d88931,#f0c36d);border-radius:inherit;height:100%;transition:width .22s ease}.loading-percent[data-v-5b435b22]{color:var(--text-main,#3a2c20);font-size:12px;font-weight:700;letter-spacing:.08em}.n-dark .loading-spinner[data-v-5b435b22]{border-color:#ffffff1f;border-top-color:var(--accent,#f2c97d)}.n-dark .loading-progress[data-v-5b435b22]{background:#ffffff1a}.n-dark .loading-percent[data-v-5b435b22]{color:#ffffffdb}.svg-source[data-v-5b435b22]{display:none}@media (max-width:768px){.drum-page[data-v-5b435b22]{padding:12px 12px 16px}.top-bar[data-v-5b435b22]{margin-bottom:6px}.content-area[data-v-5b435b22]{align-items:flex-start;min-height:auto}.svg-wrapper[data-v-5b435b22]{margin-top:15%;width:100%}}.preset-bar[data-v-5b435b22]{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:16px}.preset-copy[data-v-5b435b22]{display:flex;flex-direction:column;gap:4px}.preset-title[data-v-5b435b22]{color:var(--text-main,#3a2c20);font-size:13px;font-weight:700}.preset-meta[data-v-5b435b22]{color:var(--text-subtle,#7f6d5b);font-size:12px}.select-shell[data-v-5b435b22]{min-width:120px;position:relative;width:min(120px,100%)}.select-shell[data-v-5b435b22]:after{border-bottom:2px solid rgba(103,78,52,.68);border-right:2px solid rgba(103,78,52,.68);content:"";height:9px;pointer-events:none;position:absolute;right:14px;top:50%;transform:translateY(-65%) rotate(45deg);width:9px}.preset-select[data-v-5b435b22]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid rgba(140,109,76,.14);border-radius:3px;color:var(--text-main,#3a2c20);font-size:13px;font-weight:600;height:34px;outline:none;padding:0 40px 0 14px;transition:border-color .18s ease,background .18s ease}.preset-select[data-v-5b435b22]:focus,.preset-select[data-v-5b435b22]:hover{background:transparent;border-color:#d889313d;box-shadow:0 0 0 2px #d889311f}.grid-container[data-v-5b435b22]{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;overflow-x:auto}.grid-row[data-v-5b435b22]{align-items:center;display:flex;gap:6px;height:32px}.row-label[data-v-5b435b22]{flex:0 0 112px;font-size:12px;font-weight:600;text-align:right;white-space:nowrap}.row-cells[data-v-5b435b22]{display:flex;flex:1;gap:3px}.grid-cell[data-v-5b435b22]{background:#674e341a;border:1px solid rgba(103,78,52,.15);border-radius:6px;cursor:pointer;flex:0 0 28px;height:28px;transition:background .15s,border-color .15s,box-shadow .15s}.grid-cell[data-v-5b435b22]:hover{border-color:#d8893166}.grid-cell.active[data-v-5b435b22]{background:var(--accent,#d88931);border-color:var(--accent,#d88931)}.grid-cell.current[data-v-5b435b22]{box-shadow:0 0 0 2px #d8893180}.controls-bar[data-v-5b435b22]{border-top:1px solid rgba(140,109,76,.12);flex-wrap:wrap;gap:12px;justify-content:center;padding-top:12px}.controls-bar[data-v-5b435b22],.ctrl-group[data-v-5b435b22]{align-items:center;display:flex}.ctrl-group[data-v-5b435b22]{gap:6px}.ctrl-value[data-v-5b435b22]{color:var(--text-main,#3a2c20);font-size:13px;font-weight:600;min-width:48px;text-align:center}.debug-panel[data-v-5b435b22]{background:#fffcf7f2;border:1px solid rgba(140,109,76,.15);border-radius:16px;margin-top:12px;overflow:hidden}.debug-tabs[data-v-5b435b22]{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:10px 12px 0}.debug-tab[data-v-5b435b22]{background:#ffffff80;border:1px solid rgba(140,109,76,.2);border-radius:8px 8px 0 0;color:var(--text-main,#3a2c20);cursor:pointer;font-size:13px;padding:6px 14px;transition:background .15s ease,border-color .15s ease;white-space:nowrap}.debug-tab.active[data-v-5b435b22]{background:#d889311f;border-bottom-color:transparent;font-weight:600}.debug-body[data-v-5b435b22]{padding:12px}.debug-actions[data-v-5b435b22]{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.tuner-btn[data-v-5b435b22]{background:#d889311a;border:1px solid rgba(140,109,76,.25);border-radius:8px;color:var(--text-main,#3a2c20);cursor:pointer;font-size:13px;padding:6px 16px;transition:background .15s ease,border-color .15s ease}.tuner-btn[data-v-5b435b22]:hover{background:#d8893133}.tuner-btn.secondary[data-v-5b435b22]{background:#674e340f}.tuner-btn.secondary[data-v-5b435b22]:hover{background:#674e341f}.tuner-grid[data-v-5b435b22]{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:12px}.tuner-group[data-v-5b435b22]{background:#fff6;border:1px solid rgba(140,109,76,.12);border-radius:10px;padding:10px 12px}.tuner-group h3[data-v-5b435b22]{color:var(--text-subtle,#7f6d5b);font-size:12px;letter-spacing:.04em;margin:0 0 8px}.tuner-fields[data-v-5b435b22]{display:flex;flex-direction:column;gap:6px}.tuner-field[data-v-5b435b22]{align-items:center;display:flex;font-size:12px;gap:6px}.tuner-field span[data-v-5b435b22]{color:var(--text-subtle,#7f6d5b);flex:0 0 84px}.tuner-field input[data-v-5b435b22],.tuner-field textarea[data-v-5b435b22]{background:#fffc;border:1px solid rgba(140,109,76,.2);border-radius:8px;color:var(--text-main,#3a2c20);flex:1;font-size:12px;min-width:0;padding:6px 8px}.tuner-field input[data-v-5b435b22]:focus,.tuner-field textarea[data-v-5b435b22]:focus{border-color:var(--accent,#d88931);outline:none}.tuner-output[data-v-5b435b22]{display:flex;flex-direction:column;gap:6px}.tuner-output h3[data-v-5b435b22]{color:var(--text-subtle,#7f6d5b);font-size:12px;letter-spacing:.04em;margin:0}.tuner-output textarea[data-v-5b435b22]{background:#fff9;border:1px solid rgba(140,109,76,.2);border-radius:8px;color:var(--text-main,#3a2c20);font-family:SF Mono,Fira Code,Consolas,monospace;font-size:11px;line-height:1.5;padding:8px;resize:vertical;width:100%}.n-dark .blog-link[data-v-5b435b22]{background:transparent;border-color:#ffffff1f;color:#ffffffe0}.n-dark .blog-link[data-v-5b435b22]:hover{background:#f2c97d29;color:#f2c97d}.n-dark .ui-btn[data-v-5b435b22]:focus-visible{box-shadow:0 0 0 2px #f2c97d24}.n-dark .ui-btn-accent[data-v-5b435b22],.n-dark .ui-btn-primary[data-v-5b435b22]{background:transparent;border-color:#f2c97d38;color:#f8e1b0}.n-dark .ui-btn-secondary[data-v-5b435b22]{background:transparent;border-color:#ffffff1f;color:#ffffffe0}.n-dark .select-shell[data-v-5b435b22]:after{border-bottom-color:#ffffffa8;border-right-color:#ffffffa8}.n-dark .preset-select[data-v-5b435b22]{background:transparent;border-color:#ffffff1f;color:#ffffffe0}.n-dark .debug-panel[data-v-5b435b22]{background:#18181ce6;border-color:#ffffff1f}.n-dark .debug-tab[data-v-5b435b22]{background:#ffffff0a;border-color:#ffffff1f;color:#ffffffd1}.n-dark .debug-tab.active[data-v-5b435b22]{background:#f2c97d1a}.n-dark .tuner-btn[data-v-5b435b22]{border-color:#ffffff26;color:#ffffffd1}.n-dark .tuner-group[data-v-5b435b22]{background:#ffffff08;border-color:#ffffff1a}.n-dark .tuner-field input[data-v-5b435b22],.n-dark .tuner-field textarea[data-v-5b435b22]{background:#ffffff0f;border-color:#ffffff26;color:#ffffffd1}.n-dark .tuner-output textarea[data-v-5b435b22]{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffd1}[data-v-5b435b22] body{padding:0!important}.drum-page-shell,.zhang-links-bar{position:relative}.zhang-links-bar{bottom:0;display:flex;flex-wrap:wrap;font-size:12px;opacity:0;pointer-events:auto;z-index:10}.zhang-links-bar a{color:inherit;text-decoration:none}.zhang-links-bar a:hover{text-decoration:underline}.drum-page{--text-main:#3a2c20;--text-subtle:#7f6d5b;--accent:#d88931}.drum-stage{aspect-ratio:1672/941;contain:layout paint;overflow:visible;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.base-layer,.debug-overlay-layer,.hardware-layer,.hit-layer,.moving-layer{height:100%;top:0;right:0;bottom:0;left:0;position:absolute;width:100%}.base-layer img,.piece{display:block;height:100%;pointer-events:none;width:100%}.piece{top:0;right:0;bottom:0;left:0;position:absolute;will-change:transform,filter}.piece.active{filter:none}.piece.transient-piece{opacity:0}.piece.transient-piece.active{opacity:1}.hardware-piece{z-index:2}.piece.metal-hit{animation:metalHit .52s cubic-bezier(.2,.8,.2,1)}.piece.tom-hit{animation:tomHit .25s cubic-bezier(.18,.84,.22,1)}.piece.floor-hit{animation:floorHit .31s cubic-bezier(.16,.86,.2,1)}.piece.bass-hit{animation:bassHit .28s cubic-bezier(.14,.82,.2,1)}.piece.snare-hit{animation:snareHit .17s cubic-bezier(.18,.86,.24,1)}.hit-zone{background:transparent;border:0;cursor:pointer;outline:0;position:absolute}.hit-zone:hover{box-shadow:none}.debug-overlay-layer{pointer-events:none}.debug-overlay-layer svg{display:block;height:100%;width:100%}.path-fields{display:grid;grid-template-columns:1fr}.path-field{align-items:flex-start}.path-field textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.45;min-height:84px;resize:vertical}@keyframes metalHit{0%{transform:rotate(0) translateY(0) scale(1)}12%{transform:rotate(6deg) translateY(2px) scale(1.015)}24%{transform:rotate(-5deg) translateY(-1px) scale(.995)}40%{transform:rotate(4deg) translateY(1px) scale(1.01)}58%{transform:rotate(-3deg) scale(.998)}76%{transform:rotate(2deg) scale(1.003)}to{transform:rotate(0) translateY(0) scale(1)}}@keyframes tomHit{0%{filter:brightness(1) saturate(1);transform:scale(1)}22%{filter:brightness(1.09) saturate(1.08);transform:scaleX(1.014) scaleY(.978)}46%{filter:brightness(1.03) saturate(1.02);transform:scaleX(.994) scaleY(1.01)}68%{filter:brightness(1.01) saturate(1.01);transform:scaleX(1.003) scaleY(.997)}to{filter:brightness(1) saturate(1);transform:scale(1)}}@keyframes floorHit{0%{filter:brightness(1) saturate(1);transform:scale(1)}24%{filter:brightness(1.075) saturate(1.06);transform:scaleX(1.01) scaleY(.982)}48%{filter:brightness(1.025) saturate(1.02);transform:scaleX(.995) scaleY(1.008)}70%{filter:brightness(1.01) saturate(1.01);transform:scaleX(1.002) scaleY(.998)}to{filter:brightness(1) saturate(1);transform:scale(1)}}@keyframes bassHit{0%{transform:scale(1)}28%{transform:scale(.976)}58%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes snareHit{0%{filter:brightness(1) saturate(1);transform:scale(1)}18%{filter:brightness(1.1) saturate(1.09);transform:scaleX(1.012) scaleY(.974)}38%{filter:brightness(1.04) saturate(1.03);transform:scaleX(.994) scaleY(1.012)}60%{filter:brightness(1.012) saturate(1.01);transform:scaleX(1.003) scaleY(.997)}to{filter:brightness(1) saturate(1);transform:scale(1)}}@keyframes drumLoadingSpin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.n-dark .drum-page{--text-main:hsla(0,0%,100%,.9);--text-subtle:hsla(0,0%,100%,.52);--accent:#f2c97d}.n-dark .pill{background:#ffffff14;color:#ffffffd1}.n-dark .grid-cell{background:#ffffff14;border-color:#ffffff1f}.n-dark .controls-bar{border-top-color:#ffffff1a}.n-dark .ctrl-value{color:#ffffffd1}.devtool-modal{align-items:center;background:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}.devtool-modal-content{background:#fff;border-radius:10px;padding:30px 50px;text-align:center}.devtool-modal-content h3{color:#e53e3e;margin-top:0}.devtool-modal-content p{color:#333;font-size:16px}