.drum-stage{align-items:stretch;gap:14px;padding:18px 22px 16px}.drum-stage .kbd-hints{margin-top:2px}.drum-stage,.drum-pop{--i-kick: #00CD9C;--i-snare: #56B4E9;--i-hatc: #F0E442;--i-hato: #E69F00;--i-clap: #F07B52;--i-toml: #6E9BE0;--i-tomh: #A9C8F2;--i-rim: #C7C5BD;--i-bell: #D98BBE;--cell-ink: rgba(0, 0, 0, .5)}:root[data-theme=light] .drum-stage,:root[data-theme=light] .drum-pop{--i-kick: #008C6A;--i-snare: #1F7FBF;--i-hatc: #B9A800;--i-hato: #C27800;--i-clap: #D2522A;--i-toml: #3E6FC0;--i-tomh: #6E9BD8;--i-rim: #7C7A72;--i-bell: #B4569A;--cell-ink: rgba(255, 255, 255, .7)}.drum-stage [data-inst=kick],.drum-pop[data-inst=kick]{--c: var(--i-kick)}.drum-stage [data-inst=snare],.drum-pop[data-inst=snare]{--c: var(--i-snare)}.drum-stage [data-inst=hatClosed],.drum-pop[data-inst=hatClosed]{--c: var(--i-hatc)}.drum-stage [data-inst=hatOpen],.drum-pop[data-inst=hatOpen]{--c: var(--i-hato)}.drum-stage [data-inst=clap],.drum-pop[data-inst=clap]{--c: var(--i-clap)}.drum-stage [data-inst=tomLow],.drum-pop[data-inst=tomLow]{--c: var(--i-toml)}.drum-stage [data-inst=tomHigh],.drum-pop[data-inst=tomHigh]{--c: var(--i-tomh)}.drum-stage [data-inst=rim],.drum-pop[data-inst=rim]{--c: var(--i-rim)}.drum-stage [data-inst=cowbell],.drum-pop[data-inst=cowbell]{--c: var(--i-bell)}.drum-stage [data-inst=snare],.drum-stage [data-inst=clap]{--tex: repeating-linear-gradient(135deg, var(--cell-ink) 0 2px, transparent 2px 6px)}.drum-stage [data-inst=hatClosed],.drum-stage [data-inst=hatOpen]{--tex: radial-gradient(circle, var(--cell-ink) 1.2px, transparent 1.6px) 0 0 / 6px 6px}.drum-stage [data-inst=tomLow],.drum-stage [data-inst=tomHigh]{--tex: repeating-linear-gradient(0deg, var(--cell-ink) 0 2px, transparent 2px 6px)}.drum-stage [data-inst=rim],.drum-stage [data-inst=cowbell]{--tex: radial-gradient(circle, transparent 38%, var(--cell-ink) 40%, var(--cell-ink) 52%, transparent 54%)}.drum-top{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}.drum-play{position:relative;display:grid;place-items:center;flex:0 0 auto}.drum-play .play{width:60px;height:60px}.drum-play .play svg{width:24px;height:24px}.drum-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-accent);opacity:0;pointer-events:none}.drum-pulse.is-beat{animation:drum-pulse .4s ease-out}@keyframes drum-pulse{0%{transform:scale(1);opacity:.8}to{transform:scale(1.45);opacity:0}}.drum-bpm{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}.drum-bpm .stepper{grid-template-columns:var(--tap-sm) 76px var(--tap-sm);gap:6px}.drum-bpm .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.drum-bpm__value{height:42px;font-family:var(--font-heading);font-size:1.75rem;line-height:1;background:transparent;border-color:transparent;box-shadow:none}.drum-bpm__value:focus{background:var(--color-surface-2)}.drum-bpm__unit{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray);white-space:nowrap}.drum-tap{min-width:62px;flex:0 0 auto}.drum-tap.is-hit{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent-ink)}.drum-top__right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap}.drum-top__right .icon-btn{width:40px;height:40px}.drum-top__right .icon-btn svg{width:18px;height:18px}.drum-top__right .icon-btn[disabled]{opacity:.3}.drum-redo{animation:drum-open .2s var(--ease)}#undo.is-hint{animation:drum-hint 1.2s ease 2;border-color:var(--color-accent);color:var(--color-accent-ink)}@keyframes drum-hint{50%{box-shadow:0 0 0 5px var(--color-accent-dim)}}.drum-ab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.drum-ab__seg button{min-width:48px;font-family:var(--font-heading);font-size:1.05rem}.drum-chain{flex:1 1 auto;gap:12px}.drum-styles{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-media);background:var(--color-surface-2);border:1px solid var(--color-hairline)}.drum-styles__label{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray)}.drum-styles__chips{flex:1 1 auto;min-width:0;min-height:var(--tap-sm);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);padding:2px 24px 2px 1px}.drum-styles__chips::-webkit-scrollbar{display:none}.drum-styles__chips .chip{flex:0 0 auto;padding:0 13px;background:var(--color-surface)}.drum-styles__chips .chip[aria-pressed=true]{background:var(--color-accent-dim)}.drum-dice{flex:0 0 auto}.drum-dice svg{width:18px;height:18px}.drum-dice.is-rolling svg{animation:drum-roll .5s var(--ease)}@keyframes drum-roll{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes drum-open{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.drum-bar{display:flex;align-items:center;gap:10px 14px;min-height:var(--tap-sm);flex-wrap:wrap}.drum-view{display:none}.drum-view button{min-width:42px;padding:0 10px}.drum-view button svg{width:17px;height:17px}.drum-legend{display:flex;align-items:center;gap:8px;margin:0;flex:1 1 auto;min-width:0;font-size:var(--fs-sm);color:var(--color-gray)}.drum-legend>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drum-pages__tabs{margin-left:auto}.drum-pages__tabs button{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}@media (min-width: 761px){.drum-stage>.drum-pages__tabs{display:none}}.drum-grid{--label: 196px;--cols: 16;--cell-h: 34px;--gap: 4px;display:grid;grid-template-columns:var(--label) repeat(var(--cols),minmax(0,1fr));gap:var(--gap);min-height:calc(14px + 9 * var(--cell-h) + 9 * var(--gap));align-content:start;touch-action:pan-y;user-select:none;-webkit-user-select:none}.drum-grid[hidden]{display:none}.drum-grid__head{font-size:var(--fs-xs);font-weight:700;color:var(--color-gray);text-align:center;height:14px;line-height:14px;font-variant-numeric:tabular-nums}.drum-grid__corner{text-align:left;color:var(--color-accent-ink);letter-spacing:.06em;text-transform:uppercase}.drum-grid__head.is-beat{color:var(--color-ink-soft)}.drum-grid__head.is-bar{color:var(--color-accent-ink)}.drum-grid__head.is-now{color:var(--color-ink)}.drum-grid__head.is-beat-start,.drum-cell.is-beat-start{margin-left:5px}.drum-row{display:flex;align-items:center;gap:4px;min-width:0;height:var(--cell-h)}.drum-row.is-muted .drum-inst{opacity:.45}.drum-row.is-muted .drum-cell[data-v="2"],.drum-row.is-muted .drum-cell[data-v="3"]{filter:saturate(.25) brightness(.7)}.drum-row.is-solo .drum-inst{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}.drum-inst{position:relative;flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;gap:9px;padding:0 8px 0 6px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--color-ink-soft);text-align:left;overflow:hidden;touch-action:manipulation}.drum-inst:hover{border-color:var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink)}.drum-inst__meter{flex:0 0 auto;width:4px;height:22px;border-radius:3px;background:linear-gradient(to top,var(--c) var(--lvl, 30%),color-mix(in srgb,var(--color-ink) 9%,transparent) var(--lvl, 30%))}.drum-row.is-hit .drum-inst__meter{animation:drum-meter .26s ease-out}@keyframes drum-meter{0%{--lvl: 100%;background:var(--c);box-shadow:0 0 10px var(--c)}to{box-shadow:0 0 0 transparent}}.drum-row.is-hit .drum-inst{color:var(--color-ink)}.drum-inst__text{display:flex;flex-direction:column;min-width:0;line-height:1.15}.drum-inst__long{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drum-inst__short{display:none;font-weight:700;font-size:var(--fs-xs)}.drum-inst__fn{font-size:var(--fs-xs);color:var(--color-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.drum-inst__state{margin-left:auto;flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-warn)}.drum-row.is-solo .drum-inst__state{color:var(--c)}.drum-inst__state:empty{display:none}.drum-cell{position:relative;height:var(--cell-h);min-width:0;padding:0;border-radius:6px;border:1px solid var(--color-hairline);background:var(--color-surface-2);transition:background-color .1s ease,border-color .1s ease,transform .08s ease,box-shadow .1s ease;touch-action:pan-y;-webkit-touch-callout:none}.drum-cell.is-alt{background:color-mix(in srgb,var(--color-surface-2),var(--color-surface-3) 45%)}.drum-cell:hover{border-color:var(--color-gray)}.drum-cell[data-beat][data-v="0"]:before{content:attr(data-beat);position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:color-mix(in srgb,var(--color-ink) 24%,transparent)}.drum-cell[data-v="1"]{background:color-mix(in srgb,var(--c) 18%,var(--color-surface));border:1px dashed color-mix(in srgb,var(--c) 75%,transparent)}.drum-cell[data-v="2"]{background:var(--tex, none),color-mix(in srgb,var(--c) 58%,var(--color-surface));border-color:color-mix(in srgb,var(--c) 80%,transparent);box-shadow:inset 0 1px #ffffff24,inset 0 -6px 12px #00000024}.drum-cell[data-v="3"]{background:var(--tex, none),var(--c);border-color:var(--c);box-shadow:inset 0 1px #ffffff59,inset 0 -6px 12px #0000001f,0 0 10px color-mix(in srgb,var(--c) 35%,transparent)}.drum-cell[data-v="3"]:after{content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--color-bg);box-shadow:0 0 0 1.5px var(--cell-ink)}.drum-cell.is-now{box-shadow:0 0 0 2px var(--color-ink)}.drum-cell.is-now[data-v="0"],.drum-cell.is-now[data-v="1"]{background:var(--color-surface-3)}.drum-cell.is-now[data-v="2"],.drum-cell.is-now[data-v="3"]{transform:scale(1.07);filter:brightness(1.12)}.drum-stage.is-silent .drum-grid,.drum-stage.is-silent .drum-pads{opacity:.55}.drum-pads{display:grid;gap:12px}.drum-padbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.drum-padmode button{font-size:var(--fs-sm)}.drum-rec{display:inline-flex;align-items:center;gap:8px}.drum-rec__dot{width:10px;height:10px;border-radius:50%;background:var(--color-danger);opacity:.55}.drum-rec[aria-pressed=true]{border-color:var(--color-danger);color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent)}.drum-rec[aria-pressed=true] .drum-rec__dot{opacity:1;animation:drum-blink 1s steps(2) infinite}@keyframes drum-blink{50%{opacity:.2}}.drum-ptabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.drum-ptabs::-webkit-scrollbar{display:none}.drum-ptab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:var(--tap-sm);padding:0 12px;border-radius:999px;border:1px solid var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink-soft);font-weight:700;font-size:var(--fs-sm);box-shadow:var(--shadow-sm)}.drum-ptab__dot{width:11px;height:11px;border-radius:50%;background:var(--tex, none),var(--c);transition:transform .08s ease}.drum-ptab.is-active{border-color:var(--c);color:var(--color-ink);background:color-mix(in srgb,var(--c) 16%,var(--color-surface-2))}.drum-ptab.is-muted{opacity:.45}.drum-ptab.is-hit .drum-ptab__dot{transform:scale(1.6);box-shadow:0 0 8px var(--c)}.drum-lane{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:18px}.drum-lane__s{border-radius:2px;background:var(--color-surface-3);opacity:.55}.drum-lane__s.is-page{opacity:1}.drum-lane__s.is-beat{box-shadow:inset 0 -2px color-mix(in srgb,var(--color-ink) 20%,transparent)}.drum-lane__s[data-v="1"]{background:color-mix(in srgb,var(--c) 40%,var(--color-surface))}.drum-lane__s[data-v="2"]{background:color-mix(in srgb,var(--c) 70%,var(--color-surface))}.drum-lane__s[data-v="3"]{background:var(--c)}.drum-lane__s.is-now{outline:1px solid var(--color-ink)}.drum-padgrid{display:grid;grid-template-columns:repeat(var(--pcols),minmax(0,1fr));gap:8px;max-width:560px;width:100%;margin:0 auto}.drum-pad{position:relative;-webkit-touch-callout:none;aspect-ratio:1.25;min-height:56px;border-radius:12px;border:1px solid var(--color-hairline);background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));box-shadow:var(--shadow-sm);transition:transform .06s ease,background .1s ease;touch-action:pan-y}.drum-pad:active{transform:scale(.96)}.drum-pad__n{position:absolute;top:6px;left:8px;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.drum-pad.is-beat .drum-pad__n{color:var(--color-ink)}.drum-pad.is-beat[data-v="0"]{border-color:color-mix(in srgb,var(--color-hairline),var(--color-ink) 18%)}.drum-pad[data-v="1"]{background:color-mix(in srgb,var(--c) 18%,var(--color-surface));border:1px dashed var(--c)}.drum-pad[data-v="2"]{background:var(--tex, none),linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,var(--color-surface)),color-mix(in srgb,var(--c) 52%,var(--color-surface)));border-color:var(--c)}.drum-pad[data-v="3"]{background:var(--tex, none),linear-gradient(180deg,color-mix(in srgb,var(--c),#fff 12%),var(--c));border-color:var(--c);box-shadow:var(--shadow-sm),0 0 14px color-mix(in srgb,var(--c) 40%,transparent)}.drum-pad[data-v="2"] .drum-pad__n,.drum-pad[data-v="3"] .drum-pad__n{color:#161614}.drum-pad.is-now{box-shadow:0 0 0 2px var(--color-ink)}.drum-livegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:520px;width:100%;margin:0 auto}.drum-live{position:relative;aspect-ratio:1.15;min-height:70px;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 50%,var(--color-hairline));background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,var(--color-surface-2)),var(--color-surface));color:var(--color-ink);box-shadow:var(--shadow-sm);touch-action:manipulation;transition:transform .05s ease}.drum-live__n{position:absolute;left:10px;right:10px;bottom:9px;font-weight:700;font-size:var(--fs-sm);line-height:1.15;text-align:left}.drum-live__k{position:absolute;top:8px;right:10px;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.drum-live.is-hit{transform:scale(.95);background:var(--c);color:#161614;box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}.drum-live.is-hit .drum-live__k{color:#0009}.drum-pop{--c: var(--color-accent)}.drum-pop strong{display:flex;align-items:center;gap:8px}.drum-pop__dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}.drum-pop__fn{font-size:var(--fs-sm);color:var(--color-gray)}.drum-pop__row{display:flex;align-items:center;gap:10px;margin-top:10px}.drum-pop__vol{font-weight:700;font-size:var(--fs-sm);color:var(--color-ink);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}.drum-pop__btns{display:flex;align-items:center;gap:8px;margin-top:10px}.drum-pop__btns .icon-btn{margin-left:auto}.drum-pop [data-ms=mute][aria-pressed=true]{background:color-mix(in srgb,var(--color-warn) 14%,transparent);border-color:var(--color-warn);color:var(--color-warn)}.drum-tabs{padding-top:10px}.drum-tabs.is-flash{animation:drum-flash .9s ease}@keyframes drum-flash{0%{box-shadow:0 0 0 4px var(--color-accent-glow)}to{box-shadow:0 0 0 0 transparent}}.drum-tablist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;margin-bottom:16px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-hairline);max-width:720px}.drum-tablist [role=tab]{position:relative;min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--color-gray);font-weight:700;font-size:var(--fs-sm);transition:background .15s ease,color .15s ease;touch-action:manipulation}.drum-tablist [role=tab]:hover{color:var(--color-ink)}.drum-tablist [role=tab][aria-selected=true]{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-sm)}.drum-tabdot{position:absolute;top:7px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 6px var(--color-accent-glow);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .2s var(--ease)}.drum-tabdot.is-on{opacity:1;transform:none}.drum-pane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-items:start;animation:drum-open .18s ease-out}.drum-pane[hidden]{display:none}.drum-pane .field+.field{margin-top:0}.drum-pane .field__label>span{display:inline-flex;align-items:center;gap:6px}.drum-pane__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;grid-column:1 / -1;align-items:start}#generador>.field:first-child{grid-column:1 / -1}.drum-gen__go{grid-column:1 / -1;justify-self:start}.drum-gen__go svg{width:18px;height:18px}#pane-pattern .field:last-child{grid-column:1 / -1}.drum-practice{display:grid;gap:10px}.drum-practice .switch>span{display:inline-flex;align-items:center;gap:6px}.drum-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;transition:opacity .2s ease}.drum-mini-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.drum-mini-grid .field+.field{margin-top:0}.drum-mini-grid .field__label{font-size:var(--fs-sm)}.drum-mini-grid .stepper{grid-template-columns:var(--tap-sm) minmax(0,1fr) var(--tap-sm);gap:6px}.drum-mini-grid .stepper .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.drum-mini-grid .stepper .icon-btn svg{width:15px;height:15px}.drum-mini-grid .stepper__value{height:var(--tap-sm);font-size:.95rem;padding:0 2px}.drum-mini-grid.is-off{opacity:.4}.drum-status{margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--color-accent-ink);text-align:center}.drum-status:empty{display:none}.drum-save .btn{flex:0 0 auto}.drum-saved{max-height:196px;overflow-y:auto}.drum-saved .list__item{min-height:46px;padding:6px 0}.drum-export{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.drum-export .btn{padding:.35em .85em}.drum-stage:fullscreen,.drum-stage.is-stage-mode{justify-content:center;gap:18px;padding-left:max(24px,3vw);padding-right:max(24px,3vw)}.drum-stage:fullscreen .drum-grid,.drum-stage.is-stage-mode .drum-grid{--cell-h: clamp(34px, 6.4vh, 70px);--label: clamp(150px, 16vw, 240px);--gap: 6px}.drum-stage:fullscreen .drum-row,.drum-stage.is-stage-mode .drum-row{gap:6px}.drum-stage:fullscreen .drum-play .play,.drum-stage.is-stage-mode .drum-play .play{width:84px;height:84px}.drum-stage:fullscreen .drum-play .play svg,.drum-stage.is-stage-mode .drum-play .play svg{width:32px;height:32px}.drum-stage:fullscreen .drum-bpm__value,.drum-stage.is-stage-mode .drum-bpm__value{font-size:2.6rem;height:56px}.drum-stage:fullscreen .drum-bpm .stepper,.drum-stage.is-stage-mode .drum-bpm .stepper{grid-template-columns:var(--tap) 110px var(--tap)}.drum-stage:fullscreen .drum-bpm .icon-btn,.drum-stage.is-stage-mode .drum-bpm .icon-btn{width:var(--tap);height:var(--tap)}.drum-stage:fullscreen .drum-inst__long,.drum-stage.is-stage-mode .drum-inst__long{font-size:var(--fs-md)}.drum-stage:fullscreen .kbd-hints,.drum-stage.is-stage-mode .kbd-hints{display:none}.drum-stage:fullscreen .drum-top,.drum-stage.is-stage-mode .drum-top{padding-right:56px}@media (max-width: 760px){.drum-stage{padding:12px 10px;gap:10px}.drum-top{flex-wrap:nowrap;gap:8px;justify-content:space-between}.drum-play .play{width:54px;height:54px}.drum-bpm .stepper{grid-template-columns:var(--tap-sm) 60px var(--tap-sm);gap:4px}.drum-bpm__value{font-size:1.5rem;height:36px}.drum-tap{min-width:64px}.drum-top__right{gap:8px}.drum-top__right .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.drum-top__right .icon-btn svg{width:16px;height:16px}.drum-bar .drum-top__right{margin-left:auto}.drum-styles{padding:4px 4px 4px 8px;gap:8px}.drum-styles__label{display:none}.drum-styles__chips .chip{padding:0 11px;font-size:var(--fs-sm)}.drum-dice span{display:none}.drum-dice{padding:0 11px;min-width:var(--tap-sm)}.drum-bar{flex-wrap:nowrap;gap:8px}.drum-view{display:flex;flex:0 0 auto}.drum-legend>span{display:none}.drum-stage>.drum-pages__tabs{margin:0 auto 0 0;display:flex;flex-wrap:nowrap;min-height:var(--tap-sm)}.drum-stage>.drum-pages__tabs[hidden]{display:none}.drum-pages__tabs button{min-width:0;padding:0 12px}.drum-grid{--label: 50px;--cell-h: 32px}.drum-inst{padding:0 3px;gap:4px}.drum-inst__meter{width:3px;height:18px}.drum-inst__long,.drum-inst__fn,.drum-inst__state{display:none}.drum-inst__short{display:inline}.drum-cell{border-radius:5px}.drum-grid__head.is-beat-start,.drum-cell.is-beat-start{margin-left:3px}.drum-grid__corner{font-size:0}.drum-padgrid{gap:8px}.drum-pad{aspect-ratio:1.15;min-height:0;border-radius:10px}.drum-livegrid{gap:8px}.drum-tablist{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}.drum-tablist::-webkit-scrollbar{display:none}.drum-tablist [role=tab]{padding:0 12px}.drum-pane,.drum-pane__cols{grid-template-columns:minmax(0,1fr);gap:16px}}@media (max-width: 380px){.drum-bpm .stepper{grid-template-columns:var(--tap-sm) 50px var(--tap-sm);gap:3px}.drum-play .play{width:50px;height:50px}.drum-tap{min-width:52px;padding:0 10px}}@media (max-width: 760px) and (max-height: 740px){.drum-grid{--cell-h: 26px;--gap: 3px}.drum-row{gap:3px}}@media (prefers-reduced-motion: reduce){.drum-row.is-hit .drum-inst__meter,.drum-pulse.is-beat{animation:none}}.ptl-ico{display:inline-block;width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;color:var(--g-ink, var(--color-accent-ink));flex:0 0 auto}[role=tab] .ptl-ico{margin-right:6px}[role=tab][aria-selected=true] .ptl-ico{color:inherit}@media (max-width: 600px){[role=tab] .ptl-ico{display:none}}.drum-cell{border-color:#5e5d59}:root[data-theme=light] .drum-cell{border-color:#8a8880}.drum-cell[data-v="2"]{background:var(--tex, none),color-mix(in srgb,var(--c) 82%,var(--color-surface));border-color:var(--c)}.drum-cell[data-v="3"]{border:2px solid var(--color-ink)}@media (hover: hover){.drum-cell:hover{border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}}.drum-cell.is-now{box-shadow:0 0 0 3px var(--orange)}.drum-cell:focus-visible{outline:3px solid var(--blue);outline-offset:1px}.drum-stage,.drum-pop{--i-snare: #1F91DC;--i-hato: #FF8000;--i-hatc: #F5C400;--i-bell: #C46A98}:root[data-theme=light] .drum-stage,:root[data-theme=light] .drum-pop{--i-kick: #00876A;--i-snare: #1F91DC;--i-hatc: #E5B000;--i-hato: #FF8000;--i-clap: #E0457B;--i-toml: #5B47D6;--i-tomh: #8C7BEA;--i-rim: #6E6C66;--i-bell: #351E28}