#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:visible;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:#101114;--drum-glow-left:#ffffff06;--drum-glow-right:#fff0;--pad-face-top:#eef0ed;--pad-face-bottom:#cfd3d0;--pad-center-light:#ffffff94;--pad-center-fade:#ffffff14;--pad-top-edge:#ffffffc2;--pad-bottom-edge:#3b413e45;--pad-label:#181c1bdb;--pad-key:#181c1b80}#drums.drum-machine--pads.drum-machine--theme-light{--drum-panel:#f2f1ee;--drum-glow-left:#ffffffb3;--drum-glow-right:#1d202306;--pad-face-top:#393c3e;--pad-face-bottom:#24272a;--pad-center-light:#ffffff18;--pad-center-fade:#ffffff03;--pad-top-edge:#ffffff21;--pad-bottom-edge:#00000080;--pad-label:#ffffffe0;--pad-key:#ffffff7a;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{align-items:center;display:flex}#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,108px);grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%;display:grid}#drums .drum-grid .drum-pad{isolation:isolate;width:auto;min-width:0;height:auto;min-height:0;color:var(--pad-label);background:radial-gradient(ellipse at 50% 43%, var(--pad-center-light) 0%, var(--pad-center-fade) 34%, transparent 66%), linear-gradient(155deg, var(--pad-face-top), var(--pad-face-bottom));box-shadow:inset 0 1px 0 var(--pad-top-edge), inset 0 -2px 3px var(--pad-bottom-edge);text-align:left;border:0;border-radius:11px;justify-content:flex-start;align-items:flex-end;padding:14px 15px;display:flex;position:relative;inset:auto;overflow:hidden}#drums .drum-grid .drum-pad:before{z-index:1;border-radius:inherit;box-shadow:none;opacity:1;background:linear-gradient(#0000 62%,#0000000e);inset:0}#drums .drum-grid .drum-pad:after{z-index:2;background:radial-gradient(ellipse at 50% 46%, #ffffffc2, rgba(var(--hit-color), .96) 43%, rgb(var(--hit-color)) 100%);border-radius:inherit;box-shadow:inset 0 0 18px #ffffff2e, 0 0 18px rgba(var(--hit-color), .3);border:0;transition:opacity 70ms;inset:-1px;transform:none}#drums .drum-grid .drum-pad.is-active:after{opacity:1;transform:none}#drums .drum-grid .drum-pad:active:after{opacity:1}@media (hover:hover){#drums .drum-grid .drum-pad:hover{box-shadow:inset 0 1px 0 var(--pad-top-edge), inset 0 -2px 3px var(--pad-bottom-edge)}#drums .drum-grid .drum-pad:hover:after{opacity:.38;transform:none}#drums .drum-grid .drum-pad.is-active:after{opacity:1}}#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-machine--rock .drum-pad:hover:before{opacity:.34}#drums.drum-machine--rock .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{min-width:0;color:var(--pad-key);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;max-width:calc(100% - 10px);color:var(--pad-label);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-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:flex-end;min-height:44px;padding:12px 2px 0}#drums .drum-settings-button{color:#ffffffc7;width:42px;height:42px;box-shadow:none;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:11px;place-items:center;padding:0;display:grid}#drums .drum-settings-button .material-symbols-rounded{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;font-size:22px;line-height:1}#drums .drum-settings-button:hover{color:#fff;background:#ffffff21}#drums .drum-settings-button:focus-visible{outline-offset:2px;outline:3px solid #7eb8ffd1}#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-settings-button{color:#2d2a27b8;background:#ffffffa3;border-color:#493b2e24}#drums.drum-machine--theme-light .drum-settings-button:hover{color:#252321;background:#ffffffe6}#drums .drum-settings{color:#292b2d;width:min(570px,100% - 24px);max-width:none;max-height:calc(100dvh - 24px);font-family:var(--font-family-body,Arial, sans-serif);background:#f3f1ed;border:0;border-radius:20px;margin:auto;padding:0;overflow:auto;box-shadow:0 26px 80px #070c1452}#drums .drum-settings::backdrop{backdrop-filter:blur(2px);background:#090c1261}#drums .drum-settings__panel{padding:22px}#drums .drum-settings__header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}#drums .drum-settings__header h2,#drums .drum-settings__repeat h3{color:#202326;font-family:var(--font-family-heading,Arial, sans-serif);margin:0}#drums .drum-settings__header h2{font-size:24px;line-height:1.15}#drums .drum-settings__close{color:#25282b9e;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:none;place-items:center;width:38px;height:38px;margin:-5px -5px 0 0;padding:0;display:grid}#drums .drum-settings__close:hover{color:#202326;background:#30363d12}#drums .drum-settings__close:focus-visible,#drums .drum-settings__done:focus-visible{outline-offset:2px;outline:3px solid #0078cf57}#drums .drum-settings__close svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:20px;height:20px}#drums .drum-settings__fields{flex-wrap:wrap;margin:12px -5px 0;display:flex}#drums .drum-settings label>span,#drums .drum-settings .label>span{color:#2023269e}#drums .drum-settings input.input,#drums .drum-settings select.input,#drums .drum-settings .select:before,#drums .drum-settings .numrange .notation{background-color:#fff}#drums .drum-settings .select:after{z-index:3;pointer-events:none}#drums .drum-settings input.input:focus-visible,#drums .drum-settings select.input:focus-visible{outline-offset:0;outline:3px solid #0078cf3d}#drums .drum-settings__repeat{border-top:1px solid #31373d1a;margin-top:20px;padding-top:18px}#drums .drum-settings__repeat h3{font-size:17px;line-height:1.25}#drums .drum-settings__done{color:#fff;width:100%;min-height:46px;font:inherit;cursor:pointer;background:#202b35;border:0;border-radius:10px;margin:22px 0 0;padding:10px 18px;font-size:15px;font-weight:600;display:block}#drums .drum-settings__done:hover{background:#151e27}@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{width:100%;margin:0;padding-top:10px;padding-bottom:10px;min-height:0!important}#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}#drums .drum-settings{border-radius:16px;width:calc(100% - 16px);max-height:calc(100dvh - 16px)}#drums .drum-settings__panel{padding:18px 14px 14px}#drums .drum-settings__header{padding:0 4px}#drums .drum-settings__main-fields .row-3,#drums .drum-settings__repeat-fields .row-4{width:50%}#drums .drum-settings__main-fields .row-3:last-child{width:100%}#drums .drum-settings__done{margin-top:18px}#drums .drum-settings input.input,#drums .drum-settings select.input,#drums .drum-settings__done{font-size:16px}}@media (prefers-reduced-motion:reduce){#drums .drum-scene__image,#drums .drum-pad:before,#drums .drum-pad:after,#drums .drum-pad__label{transition:none}}