.study{margin:0;position:relative}.study-sheet{position:relative}.study-plate{width:100%}.study-stage{position:relative}html.js .study-stage{cursor:crosshair;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:is(.study--over-down,.study--over-round) .study-plate{background-color:var(--paper);background-image:linear-gradient(var(--graph-major) 1px, transparent 1px), linear-gradient(90deg, var(--graph-major) 1px, transparent 1px), linear-gradient(var(--graph) 1px, transparent 1px), linear-gradient(90deg, var(--graph) 1px, transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px}.study-over{pointer-events:none;color:var(--dk);position:absolute;inset:0}.study-over svg{width:100%;height:100%;display:block;overflow:visible}.study--over-down .study-over{clip-path:inset(0 0 -400%)}.study--over-round .study-over{clip-path:inset(-42% -36%)}.study--press{--proof:color-mix(in srgb, var(--paper) 55%, #fff)}:root[data-drum=night] .study--press{--proof:color-mix(in srgb, var(--paper) 88%, #fff)}.study--press .study-sheet{transform:rotate(var(--tilt,-1.5deg));padding:clamp(22px,3vw,40px)}.study--press .study-sheet:before{content:"";background:var(--proof);position:absolute;inset:0}.study-reg{color:var(--ink)}.study-reg--tl{top:8px;left:8px}.study-reg--br{bottom:8px;right:8px}.study-ruler{--tick:color-mix(in srgb, var(--ink) 72%, transparent);z-index:2;pointer-events:none;position:absolute}.study-ruler--x{background:repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px) 0 100% / 100% 5px no-repeat, repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 40px) 0 100% / 100% 11px no-repeat;height:12px;bottom:0;left:0;right:0}.study-ruler--y{background:repeating-linear-gradient(var(--tick) 0 1px, transparent 1px 8px) 100% 0 / 5px 100% no-repeat, repeating-linear-gradient(var(--tick) 0 1px, transparent 1px 40px) 100% 0 / 11px 100% no-repeat;width:12px;top:0;bottom:0;right:0}.study-needle{background:var(--ink);display:block;position:absolute}.study-ruler--x .study-needle{bottom:0;left:calc(var(--t,0) * 100%);width:2px;height:26px;margin-left:-1px}.study-ruler--y .study-needle{right:0;top:calc(var(--t,0) * 100%);width:26px;height:2px;margin-top:-1px}.study-needle:after{content:"";background:var(--ink);border-radius:50%;width:9px;height:9px;position:absolute}.study-ruler--x .study-needle:after{top:-4px;left:-3.5px}.study-ruler--y .study-needle:after{top:-3.5px;left:-4px}.study-stage.is-playing .study-needle:after,.study-ruler.is-focus .study-needle:after{background:var(--signal)}.study-ruler.is-focus{outline:2px solid var(--signal);outline-offset:3px}.study-stage.is-focus-sheet{outline:2px solid var(--signal);outline-offset:4px}.study-target{z-index:3;pointer-events:none;opacity:0;width:30px;height:30px;color:var(--ink);margin:-15px 0 0 -15px;position:absolute;top:0;left:0}.study-stage.is-playing .study-target{opacity:1}.study-target svg{width:100%;height:100%;display:block;overflow:visible}.study-target circle,.study-target path{fill:none;stroke:currentColor;stroke-width:1.4px}.study-keys{z-index:4;opacity:0;pointer-events:none;gap:10px;display:flex;position:absolute;top:12px;left:12px}.study-stage:hover .study-keys,.study-stage:focus-within .study-keys,.study-stage.is-touched .study-keys,.study-stage.is-focus-sheet .study-keys{opacity:1;pointer-events:auto}.study-key{cursor:pointer;width:44px;padding:0}.study-keys .study-key svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}html:not(.js) :is(.study-ruler,.study-target,.study-keys){display:none}@media (prefers-reduced-motion:no-preference){.study{transition:--sep .45s cubic-bezier(.2,.7,.2,1)}.study:hover,.study:focus-within,:is(.spread,section):has(.dials:focus-within) .study{--sep:3px}.study-needle{transition:left .14s cubic-bezier(.2,.7,.2,1),top .14s cubic-bezier(.2,.7,.2,1)}.study-keys{transition:opacity .18s}}html:not(.js) .dials{display:none}.dials{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}@media (width<=720px){.study--press .study-sheet{padding:20px 18px}.study--over-round .study-over{clip-path:inset(-30% 0)}.study-keys{top:8px;left:8px}}@media (hover:none){.study-target{display:none}}@media (forced-colors:active){.study-over{color:canvastext}.study-ruler{--tick:CanvasText}.study-needle,.study-needle:after{background:canvastext!important}.study-ruler.is-focus,.study-stage.is-focus-sheet{outline-color:highlight}}