.dm-app{width:100%;max-width:1480px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;padding-bottom:16px}.drums-page .site-head{max-width:1480px;padding-block:10px}.dm,.dm-side{min-width:0}.dm{--c1: 0px;--c2: var(--cut);padding:14px 18px 12px;display:flex;flex-direction:column;min-height:0;z-index:5}.dm-side{--c1: var(--cut);--c2: 0px}.dm-head{display:flex;align-items:center;justify-content:space-between;gap:6px 18px;margin-bottom:12px}.dm-head h1{font-family:var(--f-display);font-weight:700;font-size:24px;margin:0}.dm-head h1 span{color:var(--accent)}.dm-bar{display:flex;align-items:flex-end;gap:12px 22px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}.dm-play{width:54px;height:54px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;transition:transform .15s var(--ease),background .15s;flex:none;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}.dm-play:hover{transform:scale(1.06) rotate(-4deg);background:var(--accent-2)}.dm-play svg{width:24px;height:24px;grid-area:1 / 1}.dm-play .i-stop,.is-playing .dm-play .i-play{display:none}.is-playing .dm-play .i-stop{display:block}.is-playing .dm-play{animation:dmPulse .9s ease-in-out infinite}@keyframes dmPulse{50%{background:var(--accent-2)}}.dm-field{display:grid;gap:6px}.dm-lbl{font-family:var(--f-display);font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}.dm-lbl b{color:var(--fg);font-weight:700;margin-left:4px}.dm-num{display:flex;align-items:center;background:var(--panel-2);height:38px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.dm-num button{width:34px;height:100%;border:0;background:transparent;font-size:18px;color:var(--fg-2);touch-action:manipulation;transition:background .15s,color .15s}.dm-num button:hover{color:var(--accent-ink);background:var(--accent)}.dm-num input{width:48px;text-align:center;border:0;background:transparent;font-family:var(--f-display);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.dm-num input::-webkit-inner-spin-button,.dm-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.dm-num input:focus{outline:none;color:var(--accent)}.dm-range input{width:130px;height:38px}.dm-tempo{padding-right:14px}.dm-tempo input[type=range]{--p: 30%;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;height:38px;margin:0 10px 0 6px}.dm-tempo input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--p),var(--line-2) var(--p))}.dm-tempo input[type=range]::-webkit-slider-thumb{background:var(--accent)}.dm-tempo input[type=range]::-moz-range-thumb{background:var(--accent)}.dm-unit{font-family:var(--f-display);font-size:12px;color:var(--muted);white-space:nowrap}.dm-range input:disabled{opacity:.35}.dm-seg{display:flex;gap:3px;height:38px}.dm-seg button{border:0;background:var(--panel-2);padding:0 12px;font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:background .15s,color .15s}.dm-seg button:hover{color:var(--fg);background:var(--panel-3)}.dm-seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.dm-tools{display:flex;gap:6px;align-items:center;margin-left:auto}.dm-tools .chip{height:38px;padding-inline:16px}.dm-tablist .chip{height:34px;padding-inline:16px}.dm-tabs{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px;min-height:38px}.dm-tabs:not(:has(.dm-tablist>*)){display:none}.dm-tablist{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.dm-tab{display:grid;gap:5px;padding:6px 12px 7px;border:0;background:var(--panel-2);text-align:left;min-width:104px;transition:background .12s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.dm-tab span{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--fg-2)}.dm-tab:hover{background:var(--panel-3)}.dm-tab[aria-pressed=true]{background:var(--panel-3);box-shadow:inset 0 -3px 0 var(--accent)}.dm-tab[aria-pressed=true] span{color:var(--fg)}.dm-tab.playing span:after{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-left:8px;vertical-align:1px}.dm-mini{display:grid;grid-template-columns:repeat(16,1fr);gap:2px}.dm-mini b{height:5px;background:var(--panel)}.dm-mini b:nth-child(4n+1){background:var(--line-2)}.dm-mini b.on{background:var(--accent)}.dm-tablist .chip[aria-pressed=true]{background:var(--panel-3);color:var(--fg);font-weight:500}.dm-tablist .chip[aria-pressed=true]:before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-right:8px}.dm-scroll{overflow-x:auto;margin-inline:-4px;padding:0 4px 4px}.dm-grid{--pad: 38px;display:grid;gap:5px;min-width:calc(190px + var(--n) * 22px);user-select:none;-webkit-user-select:none}.dm-row{display:grid;grid-template-columns:22px 160px minmax(0,1fr);gap:8px;align-items:center}.dm-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}.dm-steps>.beat:not(:first-child){margin-left:6px}.dm-steps>.half{margin-left:2px}.dm-ruler{height:18px}.dm-ruler span{font-family:var(--f-display);font-size:11px;color:var(--muted);text-align:left;padding-left:3px;white-space:nowrap;transition:color .05s}.dm-ruler span:not(.beat){color:var(--line-2)}.dm-ruler span.now{color:var(--accent)}.dm-mute{width:20px;height:20px;border:0;background:var(--panel-3);padding:0;position:relative;transform:rotate(45deg) scale(.8)}.dm-mute:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:var(--accent)}.dm-row.muted .dm-mute:after{background:var(--line-2)}.dm-name{height:var(--pad);border:0;background:var(--panel-2);display:flex;align-items:center;gap:9px;padding:0 12px 0 8px;font-size:13.5px;font-weight:500;text-align:left;min-width:0;transition:background .12s;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}.dm-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-name:hover{background:var(--panel-3)}.dm-name:active{transform:translateY(1px)}.dm-led{flex:none;width:4px;height:22px;background:var(--line-2);transform:skewY(-20deg)}.dm-led.hit{animation:dm-hit .35s ease-out}@keyframes dm-hit{0%{background:var(--accent)}to{background:var(--line-2)}}.dm-row.muted .dm-name{color:var(--muted)}.dm-inst{position:relative;min-width:0;display:grid}.dm-inst .dm-name{padding-right:36px}.dm-vol{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;padding:0;display:grid;place-items:center;background:transparent;color:var(--muted);transition:color .15s,background .15s;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}.dm-vol svg{width:16px;height:16px}.dm-vol:hover,.dm-vol[aria-expanded=true]{color:var(--accent-ink);background:var(--accent)}.vol-set .dm-vol{color:var(--accent)}.vol-set .dm-vol:hover,.vol-set .dm-vol[aria-expanded=true]{color:var(--accent-ink)}.dm-vol-pop{position:fixed;z-index:70;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;width:240px;padding:12px 14px;background:var(--panel-2);filter:drop-shadow(0 14px 24px rgba(0,0,0,.55));animation:popIn .2s var(--ease);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}.dm-vol-pop .dm-lbl{grid-column:1 / -1}.dm-vol-pop input{width:100%;height:24px}.dm-vol-reset{border:0;background:var(--panel-3);color:var(--fg-2);font-family:var(--f-display);font-size:12px;font-weight:700;padding:5px 9px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}.dm-vol-reset:hover{background:var(--accent);color:var(--accent-ink)}.dm-step{--c: var(--panel-3);height:var(--pad);min-width:0;border:0;padding:0;background:var(--c);transition:background .08s,filter .08s,transform .08s;touch-action:manipulation;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}.dm-step.alt{--c: color-mix(in srgb, var(--violet) 14%, var(--panel-2))}.dm-step:hover{filter:brightness(1.3)}.dm-step[data-v="1"]{background:color-mix(in srgb,var(--accent) 55%,var(--panel-3))}.dm-step[data-v="2"]{background:var(--accent)}.dm-step.now{filter:brightness(1.6)}.dm-step[data-v="1"].now,.dm-step[data-v="2"].now{filter:none;background:var(--fg);transform:scaleY(1.06)}.dm-row.muted .dm-step[data-v="1"],.dm-row.muted .dm-step[data-v="2"]{background:color-mix(in srgb,var(--fg) 22%,var(--panel-3))}.dm-foot{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}.dm-hint{margin:0;font-size:12.5px;color:var(--muted)}.dm-hint:empty{display:none}.dm-credit{margin:0 0 0 auto;font-size:11.5px;color:var(--muted)}.dm-side{display:flex;flex-direction:column;min-height:0;overflow:hidden}.dm-side-sec{padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;min-height:0}.dm-side-sec+.dm-side-sec{border-top:1px solid var(--line)}.dm-side h2{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--accent);margin:0}.dm-presets{display:grid;gap:8px;overflow-y:auto;min-height:0}.dm-pgroup{display:grid;gap:2px}.dm-pgroup>span{font-size:11.5px;color:var(--muted);padding:0 8px 2px}.dm-preset{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border:0;background:transparent;padding:4px 8px;text-align:left;position:relative;transition:background .12s}.dm-preset b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-preset small{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.dm-preset:hover{background:var(--panel-2)}.dm-preset[aria-pressed=true]{background:var(--panel-3);box-shadow:inset 4px 0 0 var(--accent)}.dm-preset[aria-pressed=true] small{color:var(--accent)}.dm-side-presets{flex:0 1 auto}.dm-side-mine{flex:1 0 210px}.dm-save{display:flex;gap:6px}.dm-input{flex:1;min-width:0;background:var(--panel-2);border:0;border-bottom:2px solid var(--line-2);padding:7px 12px 6px;font-size:13.5px;clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}.dm-input:focus{outline:none;border-bottom-color:var(--accent)}.dm-save-btn{background:var(--accent);color:var(--accent-ink);font-weight:700}.dm-save-btn:hover{color:var(--accent-ink);background:var(--accent-2)}.dm-list{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:2px;overflow-y:auto;min-height:0;flex:1}.dm-list li{display:flex;align-items:center;gap:2px;transition:background .12s}.dm-list li:hover{background:var(--panel-2)}.dm-list li.empty{font-size:13px;padding:4px 8px}.dm-list li.empty:hover{background:none}.dm-load{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:5px 8px;display:grid}.dm-load b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-load small{color:var(--muted);font-size:11.5px}.dm-del{width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;flex:none}.dm-del:hover{color:var(--accent-ink);background:var(--accent)}.dm-note{margin:0;font-size:11.5px;color:var(--muted)}@media(min-width:1100px)and (min-height:600px){body.drums-page{height:100vh;height:100dvh;overflow:hidden}.drums-page .site-foot{display:none}.dm-app{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}.dm-scroll{flex:1;min-height:0;display:flex}.dm-grid{flex:1;--pad: 100%;grid-template-rows:16px repeat(10,minmax(20px,1fr))}.dm-row:not(.dm-ruler){height:100%}.dm-row:not(.dm-ruler) .dm-steps{height:100%}}@media(min-width:1100px)and (min-height:600px)and (max-height:760px){.dm-head{margin-bottom:8px}}@media(max-width:1099px){.dm-app{grid-template-columns:minmax(0,1fr)}.dm-presets{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media(max-width:560px){.dm{padding:14px 12px}.dm-bar{gap:12px 16px}.dm-range input{width:110px}.dm-tempo input[type=range]{width:110px;margin-inline:4px 8px}.dm-unit{display:none}.dm-grid{--pad: 36px;min-width:calc(150px + var(--n) * 30px)}.dm-row{grid-template-columns:20px 104px minmax(0,1fr);gap:6px}.dm-name{font-size:12.5px;padding-inline:6px 8px;gap:7px;clip-path:none}.dm-inst .dm-name{padding-right:26px}.dm-vol{width:22px;height:26px;right:2px}.dm-row>:nth-child(-n+2){position:sticky;z-index:1}.dm-row>:first-child{left:0}.dm-row>:first-child{z-index:2}.dm-row>:nth-child(2){left:26px;box-shadow:8px 0 0 var(--panel),-30px 0 0 var(--panel)}.dm-ruler>:nth-child(2){background:var(--panel);height:100%}.dm-steps>.beat:not(:first-child){margin-left:4px}.dm-tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.dm-tab{min-width:0;padding:6px 8px 7px}.dm-tab span{font-size:12px}.dm-tablist .chip{grid-column:span 2}}