.studio-tabs{display:flex;gap:8px;margin:24px 0 16px}.studio-tabs button{font:600 14px Poppins,sans-serif;padding:12px 24px;border:1px solid #b8cdf5;color:#234e9b;background:#fff;border-radius:12px;cursor:pointer}.studio-tabs button[aria-selected=true]{background:#2563eb;color:#fff;border-color:#2563eb}.studio-tabs button:focus-visible,.drum-piece:focus-visible{outline:3px solid #2563eb;outline-offset:5px}#pianoPanel[hidden],#drumPanel[hidden]{display:none}.studio-drum-panel{background:#fff;border:1px solid #dbe4f0;border-radius:24px;padding:24px}.studio-drum-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.studio-drum-top h2{font-size:22px;color:#1e3a8a;margin:0 0 6px}.studio-drum-top p,.kit-guide,#kitStatus{font-size:12px;color:#64748b;line-height:1.8}.studio-drum-top label{font-size:12px;color:#334d7c;min-width:120px;display:grid;gap:8px}.studio-drum-top input{accent-color:#2563eb;width:100%}.drum-kit{position:relative;aspect-ratio:1.45;max-width:840px;margin:24px auto;background:radial-gradient(ellipse,#eef4ff 0%,#f8faff 64%,#fff 72%);isolation:isolate}.drum-piece{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-radius:50%;border:7px solid #71819d;box-shadow:0 7px 0 #3c4c68,0 14px 20px #1e3a8a20,inset 0 0 0 3px #ffffffa0;background:radial-gradient(ellipse at 38% 30%,#fff,#dbe5f4);color:#1e3a8a;font:600 clamp(10px,1.2vw,15px) Poppins,sans-serif;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.drum-piece small{font-size:11px;background:#ffffffb0;border-radius:5px;padding:2px 7px}.drum-piece.cymbal{border:3px solid #c29944;background:repeating-radial-gradient(ellipse at center,#d7ae58 0,#edcf89 3px,#dfbb6d 5px);box-shadow:0 5px 0 #a98035,0 12px 16px #805a2520;color:#594117}.drum-piece.cymbal:before{content:'';width:12%;height:12%;position:absolute;top:15%;border-radius:50%;background:#b48a39;border:2px solid #f3d99c}.drum-piece.kick{left:34%;top:48%;width:33%;height:43%;background:radial-gradient(circle at 38% 30%,#3e5f98,#1c315b);color:white;border-color:#9aabc4;z-index:1}.drum-piece.snare{left:12%;top:48%;width:25%;height:31%;z-index:3}.drum-piece.high{left:29%;top:21%;width:22%;height:28%;z-index:2}.drum-piece.middle{left:52%;top:22%;width:23%;height:29%;z-index:2}.drum-piece.floor{left:72%;top:51%;width:26%;height:33%;z-index:3}.drum-piece.crash{left:0;top:0;width:32%;height:23%;transform:rotate(-12deg)}.drum-piece.ride{right:0;top:1%;width:32%;height:25%;transform:rotate(12deg)}.drum-piece.closed{left:0;top:28%;width:26%;height:17%;z-index:4}.drum-piece.open{left:0;top:82%;width:26%;height:15%;z-index:4}.drum-piece.struck{filter:brightness(1.15);animation:kit-hit .14s ease-out}.kit-guide{border-top:1px solid #e4ebf7;padding-top:16px}#kitStatus{min-height:24px;text-align:center;color:#234e9b}@keyframes kit-hit{0%{scale:.94;translate:0 5px}100%{scale:1;translate:0 0}}@media(max-width:650px){.studio-drum-panel{padding:14px}.studio-drum-top{align-items:start;flex-direction:column}.studio-drum-top label{width:100%}.drum-kit{aspect-ratio:1.1;margin:16px -2px}.drum-piece{border-width:4px;font-size:10px;gap:1px}.drum-piece small{font-size:9px;padding:1px 4px}.drum-piece.cymbal:before{display:none}.studio-tabs button{flex:1;padding:12px}.kit-guide{font-size:11px}}@media(prefers-reduced-motion:reduce){.drum-piece.struck{animation:none;filter:brightness(.8)}}
/* A compact kit on a rehearsal mat, with chrome hoops and brushed cymbals. */
.drum-kit{aspect-ratio:1.42;max-width:860px;margin:24px auto 12px;border-radius:28px;background:radial-gradient(ellipse at 50% 38%,#f7f9fc,#e8edf5);border:1px solid #dce4ef;box-shadow:inset 0 0 50px #b2bfd31c;overflow:hidden}.kit-hardware{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6}.drum-piece{border:6px solid #b5c1d0;background:radial-gradient(ellipse at 38% 25%,#fff 0%,#f0f0ed 60%,#d4d9df 100%);box-shadow:0 3px 0 #f8fbff,0 8px 0 #516780,0 13px 18px #172e4f28,inset 0 0 0 3px #68798d,inset 0 0 0 6px #fafbfc;color:#293e5d;font-size:clamp(10px,1.05vw,14px);z-index:3}.drum-piece:not(.cymbal):after{content:'';position:absolute;inset:-7px;border:4px dashed #6d7f94;border-radius:50%;pointer-events:none;opacity:.8}.drum-piece>span{position:relative;z-index:1}.drum-piece small{position:relative;z-index:1;background:#1e3a8a;color:#fff;font-weight:600;padding:2px 9px;border:1px solid #ffffff70;box-shadow:0 2px 3px #1e3a8a18;font-size:10px}.drum-piece.cymbal{border:2px solid #b58e40;background:radial-gradient(ellipse at 45% 40%,#fff1c19c,transparent 60%),repeating-radial-gradient(ellipse at center,#d5b568 0,#ead399 2px,#dabe7c 3px);box-shadow:0 3px 0 #98752e,0 10px 13px #55421d30;color:#59451c}.drum-piece.cymbal:before{width:15%;height:19%;top:16%;background:radial-gradient(ellipse,#6f5832 0 10%,#e8cd88 15% 40%,#c2a05a 65%);border:1px solid #f7e8c0;box-shadow:1px 2px 4px #6e512630}.drum-piece.cymbal small{background:#fff8e3;color:#644c1e;border-color:#bda36e}.drum-piece.crash{left:3%;top:5%;width:31%;height:24%;rotate:-6deg;transform:none;z-index:5}.drum-piece.ride{right:3%;top:7%;width:31%;height:25%;rotate:8deg;transform:none;z-index:5}.drum-piece.high{left:30%;top:25%;width:21%;height:27%}.drum-piece.middle{left:51%;top:27%;width:22%;height:28%}.drum-piece.snare{left:14%;top:57%;width:24%;height:29%;z-index:6}.drum-piece.floor{left:72%;top:56%;width:24%;height:31%;z-index:5}.drum-piece.kick{left:36%;top:51%;width:33%;height:42%;background:radial-gradient(ellipse at 40% 25%,#3b5272,#162b49 72%);border-color:#b3c1d2;box-shadow:0 4px 0 #fafcff,0 9px 0 #49617d,0 16px 24px #172e4f38,inset 0 0 0 3px #0c203c,inset 0 0 0 6px #677b94;color:#fff;z-index:2}.drum-piece.kick:before{content:'';position:absolute;width:19%;height:19%;right:15%;bottom:17%;border-radius:50%;background:#0b182b;border:3px solid #8291a5;box-shadow:inset 2px 3px 5px #0008}.drum-piece.closed{left:4%;top:35%;width:24%;height:17%;z-index:6}.drum-piece.open{left:5%;top:55%;width:15%;height:11%;border-radius:12px;background:#fff9e9;border:1px solid #ccb16b;box-shadow:0 3px 0 #c5af78;z-index:7;gap:1px}.drum-piece.open:before{display:none}.drum-piece.open>span{font-size:10px}.drum-piece.open small{font-size:9px;padding:1px 5px}.drum-piece.struck{filter:brightness(1.08);box-shadow:0 0 0 4px #2563eb55,0 8px 15px #172e4f28}.drum-piece.kick small{background:#f2f6ff;color:#1e3a8a}.studio-drum-top{padding-bottom:4px}#kitStatus{padding:8px 12px;background:#f4f7fc;border-radius:10px;max-width:280px;margin:14px auto}.kit-guide{text-align:center}@media(max-width:650px){.drum-kit{aspect-ratio:1.1;border-radius:18px}.drum-piece{border-width:4px;font-size:10px}.drum-piece:not(.cymbal):after{inset:-4px;border-width:3px}.drum-piece small{font-size:9px;padding:1px 5px}.drum-piece.cymbal:before{display:block}.drum-piece.open{width:19%;height:10%;left:2%;top:54%}.drum-piece.open>span{font-size:8px}.drum-piece.open small{font-size:8px}.drum-piece.kick:before{border-width:2px}}
#kitStatus{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Real photograph with transparent hit targets and moving photographic surfaces. */
.drum-kit{aspect-ratio:2816/2120;background:#26221e;border:0;border-radius:18px;box-shadow:none;overflow:hidden}.kit-photograph{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;pointer-events:none}.drum-kit .drum-piece{background:none;border:0;box-shadow:none;color:#fff;rotate:none;transform:none;z-index:3;gap:3px;outline-offset:-3px}.drum-kit .drum-piece:before,.drum-kit .drum-piece:after{display:none}.drum-kit .drum-piece>span{font-size:12px;line-height:1.3;background:#172b49d9;border-radius:5px;padding:3px 7px;color:white}.drum-kit .drum-piece small{background:#fff;color:#1e3a8a;border:0;font-size:11px}.drum-kit .drum-piece:hover{box-shadow:inset 0 0 0 2px #ffffff85;background:#ffffff0c}.drum-kit .drum-piece.struck{background-image:url('/assets/drum-kit-photo.jpg');background-size:var(--photo-size);background-position:var(--photo-x) var(--photo-y);background-repeat:no-repeat;filter:brightness(1.15);box-shadow:inset 0 0 0 3px #a7c5ff;animation:photo-drum-hit .16s ease-out}.drum-kit .crash{left:0;top:0;width:32%;height:37%;border-radius:50%}.drum-kit .ride{left:77%;right:auto;top:21%;width:23%;height:47%;border-radius:50%}.drum-kit .high{left:31%;top:14%;width:23%;height:28%;border-radius:50%}.drum-kit .middle{left:56%;top:12%;width:25%;height:33%;border-radius:50%}.drum-kit .snare{left:19%;top:43%;width:29%;height:38%;border-radius:50%}.drum-kit .floor{left:60%;top:48%;width:29%;height:36%;border-radius:50%}.drum-kit .closed{left:0;top:43%;width:17%;height:36%;border-radius:50%}.drum-kit .open{left:0;top:81%;width:18%;height:12%;border-radius:10px;background:#172b4966}.drum-kit .kick{left:49%;top:48%;width:11%;height:21%;border-radius:12px}.drum-kit .kick>span{font-size:10px}.kit-photo-credit{font-size:10px;color:#64748b;line-height:1.8;margin-top:12px}.kit-photo-credit a{color:#234e9b}@keyframes photo-drum-hit{0%{translate:0 3px;scale:.985}100%{translate:0 0;scale:1}}@media(max-width:650px){.drum-kit{aspect-ratio:2816/2120}.drum-kit .drum-piece>span{font-size:8px;padding:2px 3px}.drum-kit .drum-piece small{font-size:8px;padding:1px 4px}.drum-kit .kick>span{font-size:8px}.drum-kit .open>span{font-size:7px}.kit-photo-credit{font-size:9px}}@media(prefers-reduced-motion:reduce){.drum-kit .drum-piece.struck{animation:none}}
/* Keep hit areas invisible over the photograph. */
.drum-kit .drum-piece,.drum-kit .drum-piece:hover,.drum-kit .drum-piece.struck{border:0;box-shadow:none;background-color:transparent;outline:none}.drum-kit .drum-piece.open{background:none;border:0;box-shadow:none}.drum-kit .drum-piece:focus-visible>span{outline:2px solid #fff;outline-offset:3px}.drum-kit .drum-piece.struck{box-shadow:none;filter:brightness(1.08)}
/* The photograph stays still; only the struck part's label responds. */
.drum-kit .drum-piece.struck{background-image:none;background-color:transparent;filter:none;animation:none;translate:none;scale:1;box-shadow:none}.drum-kit .drum-piece.struck>span{animation:kit-label-hit .16s ease-out;background:#2563eb;color:white}.drum-kit .drum-piece.struck>small{animation:kit-label-hit .16s ease-out}@keyframes kit-label-hit{0%{transform:translateY(2px) scale(.95)}100%{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.drum-kit .drum-piece.struck>span,.drum-kit .drum-piece.struck>small{animation:none}}

.kit-stick{position:absolute;width:clamp(80px,15vw,185px);height:8px;pointer-events:none;z-index:20;transform-origin:0 50%;opacity:0;background:linear-gradient(180deg,#f7e2b2,#d6ad70 45%,#bf8f51 65%,#e6c48d);border-radius:70% 8px 8px 70%;box-shadow:1px 3px 3px #0005}.kit-stick .stick-tip{position:absolute;left:-7px;top:-1px;width:14px;height:10px;border-radius:55%;background:linear-gradient(#fae6c0,#c79b5f)}.kit-stick.stick-0{rotate:122deg}.kit-stick.stick-1{rotate:58deg}.kit-stick.stick-hit{animation:drumstick-strike .26s ease-out}@keyframes drumstick-strike{0%{opacity:0;transform:translateY(-18px)}25%{opacity:1;transform:translateY(0)}60%{opacity:1;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-15px)}}@media(max-width:650px){.kit-stick{width:100px;height:6px}.kit-stick .stick-tip{width:11px;height:8px;left:-5px}}@media(prefers-reduced-motion:reduce){.kit-stick{display:none}}