.drum-player.svelte-nc9k7{margin:1.5rem 0;padding:1.25rem 1.5rem;background:#fff;border:1px solid #e5e7eb;border-radius:1rem;box-shadow:0 1px 3px #0000000f;font-family:system-ui,-apple-system,sans-serif}.drum-header.svelte-nc9k7{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.drum-title.svelte-nc9k7{font-weight:700;font-size:1rem;color:#1f2937}.drum-bpm.svelte-nc9k7{font-size:.8rem;font-weight:600;color:#9ca3af;font-variant-numeric:tabular-nums}.grid-wrapper.svelte-nc9k7{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}.labels-row.svelte-nc9k7,.beats-row.svelte-nc9k7{display:grid;grid-template-columns:repeat(8,1fr);gap:.3rem}.col-label.svelte-nc9k7{text-align:center;font-size:.7rem;font-weight:700;color:#b0b0b0;transition:color .1s;user-select:none}.col-label.active-col.svelte-nc9k7{color:#ea7b30}.cell.svelte-nc9k7{aspect-ratio:1;max-height:3rem;border:2px solid #e5e7eb;border-radius:.5rem;background:#f9fafb;cursor:pointer;transition:all .08s ease;padding:0;display:flex;align-items:center;justify-content:center}.cell.downbeat.svelte-nc9k7{border-color:#d1d5db}.cell.svelte-nc9k7:hover{border-color:#fdba74;background:#fff7ed}.cell-icon.svelte-nc9k7{font-size:.85rem;line-height:1;pointer-events:none}.cell.boom.svelte-nc9k7{background:#fde2c8;border-color:#d97706}.cell.boom.svelte-nc9k7 .cell-icon:where(.svelte-nc9k7){color:#92400e}.cell.playing-boom.svelte-nc9k7{background:#b45309;border-color:#92400e;box-shadow:0 0 12px #b45309b3;transform:scale(1.1)}.cell.playing-boom.svelte-nc9k7 .cell-icon:where(.svelte-nc9k7){color:#fff}.cell.paf.svelte-nc9k7{background:#fed7aa;border-color:#fb923c}.cell.paf.svelte-nc9k7 .cell-icon:where(.svelte-nc9k7){color:#c2410c}.cell.playing-paf.svelte-nc9k7{background:#ea7b30;border-color:#c2410c;box-shadow:0 0 10px #ea7b3099;transform:scale(1.1)}.cell.playing-paf.svelte-nc9k7 .cell-icon:where(.svelte-nc9k7){color:#fff}.cell.chick.svelte-nc9k7{background:#e0e7ff;border-color:#818cf8}.cell.chick.svelte-nc9k7 .cell-icon.chick-icon:where(.svelte-nc9k7){color:#4f46e5}.cell.playing-chick.svelte-nc9k7{background:#6366f1;border-color:#4338ca;box-shadow:0 0 10px #6366f199;transform:scale(1.1)}.cell.playing-chick.svelte-nc9k7 .cell-icon:where(.svelte-nc9k7){color:#fff}.cell.cursor.svelte-nc9k7{border-color:#fdba74;background:#fff7ed}.legend.svelte-nc9k7{display:flex;gap:1rem;margin-top:.35rem;justify-content:center}.legend-item.svelte-nc9k7{display:flex;align-items:center;gap:.25rem;font-size:.65rem;color:#9ca3af;font-weight:500}.legend-dot.svelte-nc9k7{font-size:.7rem;line-height:1}.boom-dot.svelte-nc9k7{color:#b45309}.paf-dot.svelte-nc9k7{color:#ea7b30}.chick-dot.svelte-nc9k7{color:#6366f1}.controls.svelte-nc9k7{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.tempo-control.svelte-nc9k7{flex:1;display:flex;align-items:center;gap:.5rem}.tempo-control.svelte-nc9k7 label:where(.svelte-nc9k7){font-size:.7rem;font-weight:600;text-transform:uppercase;color:#9ca3af;flex-shrink:0}.tempo-control.svelte-nc9k7 input[type=range]:where(.svelte-nc9k7){flex:1;height:4px;appearance:none;background:#e5e7eb;border-radius:2px;outline:none;cursor:pointer}.tempo-control.svelte-nc9k7 input[type=range]:where(.svelte-nc9k7)::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#ea7b30;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px #00000026}.btn.svelte-nc9k7{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.78rem;font-weight:600;border-radius:.5rem;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;cursor:pointer;transition:all .15s ease;line-height:1}.btn.svelte-nc9k7:hover{background:#f3f4f6;border-color:#d1d5db}.play-btn.svelte-nc9k7{background:#ea7b30;color:#fff;border-color:#d96a20;flex-shrink:0}.play-btn.svelte-nc9k7:hover{background:#d96a20}.presets.svelte-nc9k7{display:flex;flex-wrap:wrap;gap:.4rem}.preset-btn.svelte-nc9k7:hover{border-color:#fb923c;color:#ea7b30}.preset-btn.preset-active.svelte-nc9k7{background:#fff7ed;border-color:#fb923c;color:#ea7b30}.clear-btn.svelte-nc9k7{color:#9ca3af;border-color:#e5e7eb}.clear-btn.svelte-nc9k7:hover{color:#ef4444;border-color:#fca5a5}.drum-header-right.svelte-nc9k7{display:flex;align-items:center;gap:.5rem}.count-toggle.svelte-nc9k7{display:flex;align-items:center;justify-content:center;height:22px;padding:0 6px;border-radius:4px;font-size:.6rem;font-weight:600;color:#9ca3af;background:#f9fafb;border:1px solid #e5e7eb;cursor:pointer;transition:all .15s ease;user-select:none;white-space:nowrap;font-variant-numeric:tabular-nums}.count-toggle.svelte-nc9k7:hover{background:#fff7ed;border-color:#fb923c;color:#ea7b30}