#drums.inlinecalculator{--drum-panel:#111318;--drum-glow-left:#69779f24;--drum-glow-right:#b15d401f;color:#f8f9fb;background:radial-gradient(circle at 8% 0%, var(--drum-glow-left), transparent 34%), radial-gradient(circle at 94% 100%, var(--drum-glow-right), transparent 38%), var(--drum-panel);border:1px solid #ffffff14;border-radius:24px;width:min(100%,920px);min-height:0;margin:10px auto 18px;padding:16px;display:block;overflow:hidden;box-shadow:0 24px 70px #1e212a38}#drums.drum-machine--rock.drum-machine--theme-light{--drum-panel:#f1ede6;--drum-glow-left:#fffffff0;--drum-glow-right:#ac78501f;color:#252321;border-color:#493b2e1f;box-shadow:0 24px 70px #4b3d2f29}#drums.drum-machine--rock.drum-machine--theme-dark{--drum-panel:#101219;--drum-glow-left:#9463b933;--drum-glow-right:#dc6f4229}#drums.drum-machine--rock{border:0;padding:0}#drums.drum-machine--pads.drum-machine--theme-dark{--drum-panel:#0d151d;--drum-glow-left:#24afc72e;--drum-glow-right:#7057d62e}#drums.drum-machine--pads.drum-machine--theme-light{--drum-panel:#eeece7;--drum-glow-left:#fffffff5;--drum-glow-right:#50949d1f;color:#292b2c;border-color:#333d3f1f;box-shadow:0 24px 70px #35404226}body:has(#frameiframe) #drums.inlinecalculator{box-sizing:border-box;min-height:100vh;padding-top:max(16px,50vh - 305px);padding-bottom:max(16px,50vh - 305px)}#drums .drum-footer,#drums .drum-controls{align-items:center;display:flex}#drums .drum-controls{justify-content:space-between;gap:18px;width:100%}#drums .drum-kit-control{flex:0 174px;min-width:146px}#drums .drum-kit-control .row-1{width:100%;margin:0;padding:0;display:block}#drums .drum-kit-control .row-1>span,#drums .drum-volume>span{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}#drums .drum-kit-control .select{width:100%;margin:0}#drums .drum-kit-control .select:before{background:#ffffff13;border:1px solid #ffffff1f;border-radius:11px;box-shadow:inset 0 1px #ffffff09}#drums .drum-kit-control .select:after{border-top-color:#ffffff94;right:12px}#drums .drum-kit-control select.input{color:#ffffffeb;border:0;min-height:38px;padding:8px 30px 8px 11px;font-size:14px;line-height:1.25}#drums .drum-kit-control select.input:focus-visible{outline-offset:2px;outline:3px solid #7eb8ffd1}#drums .drum-volume{color:#ffffffa8;flex:0 205px;grid-template-columns:minmax(96px,150px) 38px;align-items:center;gap:10px;min-width:145px;font-size:12px;line-height:1;display:grid}#drums .drum-volume input{accent-color:#d79b71;cursor:pointer;width:100%}#drums .drum-volume output{color:#ffffffc7;font-variant-numeric:tabular-nums;text-align:right}#drums .drum-theme-toggle{color:#ffffffad;min-height:38px;font:inherit;cursor:pointer;background:0 0;border:0;flex:none;align-items:center;gap:8px;padding:0;font-size:12px;display:flex}#drums .drum-theme-toggle__track{background:#ffffff1f;border:1px solid #ffffff29;border-radius:999px;width:44px;height:24px;transition:background-color .18s,border-color .18s;display:block;position:relative;box-shadow:inset 0 1px 4px #0000002e}#drums .drum-theme-toggle__thumb{background:#f6d69a;border-radius:50%;width:16px;height:16px;transition:left .18s,background-color .18s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #00000047}#drums .drum-theme-toggle.is-dark .drum-theme-toggle__track{background:#7a68af57;border-color:#b8a6ef57}#drums .drum-theme-toggle.is-dark .drum-theme-toggle__thumb{background:#ddd5ff;left:23px}#drums .drum-theme-toggle:focus-visible{outline-offset:3px;border-radius:999px;outline:3px solid #7eb8ffd1}#drums .drum-scene{isolation:isolate;aspect-ratio:16/9;touch-action:none;user-select:none;background:radial-gradient(circle at 50% 20%,#fffffffa,#0000 39%),linear-gradient(155deg,#f8f6f1 0%,#eee8df 55%,#e1d8cd 100%);border:1px solid #ffffff17;border-radius:19px;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 14px 36px #0003}#drums.drum-machine--rock.drum-machine--theme-dark .drum-scene{background:radial-gradient(circle at 22% 0,#805ba759,#0000 42%),radial-gradient(circle at 88% 82%,#b1533438,#0000 43%),linear-gradient(145deg,#252332 0%,#13151d 52%,#090b10 100%);border-color:#ffffff1a}#drums .drum-scene__image{z-index:0;object-fit:cover;object-position:center 58%;filter:saturate(.9)contrast(1.03)brightness(.96);pointer-events:none;user-select:none;width:100%;height:100%;transition:filter .24s;display:block;position:absolute;inset:0}#drums .drum-grid{touch-action:none;grid-template-rows:repeat(3,114px);grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;display:grid}#drums .drum-grid .drum-pad{isolation:isolate;color:#ffffffe6;text-align:left;background-color:#202830;background-image:radial-gradient(circle at 50% 48%,#ffffff1c,#ffffff09 28%,#0000 62%);border:1px solid #ffffff1a;border-radius:9px;justify-content:flex-start;align-items:flex-end;width:auto;min-width:0;height:auto;min-height:0;padding:15px;display:flex;position:relative;inset:auto;overflow:hidden;box-shadow:inset 0 -1px #00000047,0 1px 2px #00000038}#drums .drum-grid .drum-pad:before{z-index:2;border-radius:inherit;box-shadow:none;opacity:1;background:linear-gradient(#ffffff06,#00000006);inset:0}#drums .drum-grid .drum-pad:after{z-index:2;background:radial-gradient(circle at 50% 48%, #ffffff75, rgba(var(--hit-color), .7) 45%, rgba(var(--hit-color), .48));border-radius:inherit;box-shadow:inset 0 0 16px #ffffff1a, 0 0 14px rgba(var(--hit-color), .2);border:0;transition:opacity 80ms;inset:0;transform:none}#drums .drum-grid .drum-pad:hover{border-color:#ffffff2e}#drums .drum-grid .drum-pad:hover:after{opacity:.08;transform:none}#drums .drum-grid .drum-pad.is-active:after{opacity:1;transform:none}#drums .drum-grid .drum-pad:active:after{opacity:1}#drums.drum-machine--pads.drum-machine--theme-light .drum-grid .drum-pad{color:#313638;background-color:#d1d5d6;background-image:radial-gradient(circle at 50% 48%,#ffffffb3,#ffffff38 30%,#0000 64%);border-color:#2f3b3e29;box-shadow:inset 0 -1px #3d464829,0 1px 2px #323b3d24}#drums.drum-machine--pads.drum-machine--theme-light .drum-grid .drum-pad:before{box-shadow:none;background:linear-gradient(#ffffff14,#46515306)}#drums.drum-machine--pads.drum-machine--theme-light .drum-grid .drum-pad:hover{border-color:#2f3b3e40}#drums.drum-machine--rock .drum-scene__image{filter:sepia(.1)saturate(1.18)contrast(1.08)brightness(.98)drop-shadow(0 18px 18px #2d201838)}#drums.drum-machine--rock.drum-machine--theme-dark .drum-scene__image{filter:sepia(.08)saturate(1.12)contrast(1.06)brightness(.92)drop-shadow(0 20px 22px #0000005c)}#drums .drum-pad{--hit-color:126, 184, 255;z-index:2;appearance:none;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;padding:0;display:block;position:absolute}#drums .drum-pad:before,#drums .drum-pad:after{content:"";pointer-events:none;border-radius:inherit;opacity:0;position:absolute}#drums .drum-pad:before{background:radial-gradient(ellipse at center, rgba(var(--hit-color), .34), rgba(var(--hit-color), .09) 54%, transparent 72%);box-shadow:inset 0 0 26px rgba(var(--hit-color), .34);transition:opacity .12s;inset:6%}#drums .drum-pad:after{border:2px solid rgba(var(--hit-color), .72);box-shadow:0 0 18px rgba(var(--hit-color), .3);transition:opacity .12s,transform .14s;inset:9%;transform:scale(.84)}#drums .drum-pad:hover:before{opacity:.34}#drums .drum-pad:hover:after{opacity:.38;transform:scale(.94)}#drums .drum-pad:focus-visible{outline-offset:2px;outline:3px solid #7eb8ffe6}#drums .drum-pad.is-active:before,#drums .drum-pad.is-active:after{opacity:1}#drums .drum-pad.is-active:after{transform:scale(1)}#drums .drum-pad--metal{--hit-color:240, 190, 89}#drums .drum-pad--tone{--hit-color:119, 166, 255}#drums .drum-pad--core{--hit-color:245, 112, 145}#drums .drum-pad--crash{width:31%;height:23%;top:1%;left:-1%}#drums .drum-pad--ride{width:30%;height:35%;top:1%;right:-1%}#drums .drum-pad--open-hat{width:13%;height:17%;top:67%;left:-1%}#drums .drum-pad--closed-hat{width:26%;height:25%;top:34%;left:-1%}#drums .drum-pad--high-tom{width:19%;height:24%;top:18%;left:29%}#drums .drum-pad--low-tom{width:19%;height:24%;top:18%;left:52%}#drums .drum-pad--kick{width:28%;height:40%;top:58%;left:37%}#drums .drum-pad--snare{width:27%;height:33%;top:60%;left:14%}#drums .drum-pad--floor-tom{width:33%;height:37%;top:55%;right:-1%}#drums .drum-pad__key,#drums .drum-pad__label{z-index:3;color:#ffffffdb;pointer-events:none;background:#07080b9e;border:1px solid #ffffff21;position:absolute;left:50%;box-shadow:0 3px 10px #00000038}#drums .drum-pad__key{min-width:24px;font-family:var(--font-family-system-sans);text-align:center;border-radius:7px;padding:5px 6px;font-size:10px;font-weight:700;line-height:1;top:50%;transform:translate(-50%,-50%)}#drums .drum-grid .drum-pad__key{color:#ffffff94;min-width:0;box-shadow:none;background:0 0;border:0;border-radius:0;padding:0;top:13px;left:auto;right:13px;transform:none}#drums .drum-pad__label{text-overflow:ellipsis;white-space:nowrap;opacity:0;border-radius:999px;max-width:92%;padding:4px 7px;font-size:10px;font-weight:600;line-height:1.1;transition:opacity .12s;bottom:8%;overflow:hidden;transform:translate(-50%)}#drums .drum-grid .drum-pad__label{z-index:3;color:#ffffffdb;max-width:calc(100% - 10px);box-shadow:none;text-overflow:clip;white-space:normal;opacity:1;background:0 0;border:0;border-radius:0;padding:0;font-size:13px;font-weight:600;line-height:1.2;position:relative;bottom:auto;left:auto;overflow:visible;transform:none}#drums.drum-machine--pads.drum-machine--theme-light .drum-grid .drum-pad__key{color:#232a2c8a;background:0 0;border:0}#drums.drum-machine--pads.drum-machine--theme-light .drum-grid .drum-pad__label{color:#232a2cd6}#drums .drum-pad:hover .drum-pad__label,#drums .drum-pad:focus-visible .drum-pad__label,#drums .drum-pad.is-active .drum-pad__label{opacity:1}#drums .drum-footer{justify-content:space-between;min-height:42px;padding:12px 2px 0}#drums.drum-machine--rock .drum-scene{box-shadow:none;border:0;border-radius:24px 24px 0 0}#drums.drum-machine--rock .drum-footer{padding:12px 18px 16px}#drums.drum-machine--theme-light .drum-kit-control .select:before{background:#ffffffb3;border-color:#493b2e29;box-shadow:inset 0 1px #ffffffc2}#drums.drum-machine--theme-light .drum-kit-control .select:after{border-top-color:#362f2a94}#drums.drum-machine--theme-light .drum-kit-control select.input,#drums.drum-machine--theme-light .drum-volume,#drums.drum-machine--theme-light .drum-volume output,#drums.drum-machine--theme-light .drum-theme-toggle{color:#272320c2}#drums.drum-machine--theme-light .drum-volume input{accent-color:#9b6241}#drums.drum-machine--theme-light .drum-theme-toggle__track{background:#5b47351f;border-color:#493b2e33;box-shadow:inset 0 1px 4px #493b2e1f}@media screen and (width<=600px){#drums.inlinecalculator{width:auto;box-shadow:none;border-radius:0;margin:10px -15px 18px;padding:10px}#drums.drum-machine--rock{padding:0}body:has(#frameiframe) #drums.inlinecalculator{padding-top:10px;padding-bottom:10px;min-height:0!important}#drums .drum-controls{gap:8px}#drums .drum-kit-control{flex-basis:142px;min-width:122px}#drums .drum-kit-control select.input{min-height:40px;font-size:16px}#drums .drum-volume{flex:138px;grid-template-columns:minmax(72px,1fr) 35px;gap:8px;min-width:112px}#drums .drum-scene{border-radius:14px}#drums.drum-machine--rock .drum-scene{border-radius:0}#drums .drum-grid{grid-template-rows:repeat(3,76px);gap:5px}#drums .drum-grid .drum-pad{border-radius:7px;min-height:0;padding:10px}#drums .drum-pad__key{display:none}#drums .drum-grid .drum-pad__key{min-width:0;padding:0;font-size:10px;display:block;top:9px;right:9px}#drums .drum-pad__label{padding:3px 5px;font-size:8px;bottom:4%}#drums .drum-grid .drum-pad__label{padding:0;font-size:11px;bottom:auto}#drums .drum-footer{padding-top:10px}#drums.drum-machine--rock .drum-footer{padding:10px 12px 12px}}@media screen and (width<=360px){#drums .drum-controls{gap:7px}#drums .drum-kit-control{flex-basis:118px;min-width:108px}#drums .drum-theme-toggle__label{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#drums .drum-volume{grid-template-columns:minmax(58px,1fr) 32px;min-width:96px}}@media (prefers-reduced-motion:reduce){#drums .drum-scene__image,#drums .drum-theme-toggle__track,#drums .drum-theme-toggle__thumb,#drums .drum-pad:before,#drums .drum-pad:after,#drums .drum-pad__label{transition:none}}