:root{color:#111;background:#f3f3f0;font-family:Inter,SF Pro Display,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;letter-spacing:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper: #f3f3f0;--paper-soft: #fafaf8;--ink: #111111;--muted: #777772;--line: rgba(17, 17, 17, .13);--line-soft: rgba(17, 17, 17, .08)}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{min-width:320px;margin:0;color:var(--ink);background:radial-gradient(circle at 30% 16%,rgba(255,255,255,.86),transparent 28rem),linear-gradient(180deg,#fbfbf8 0%,var(--paper) 54%,#e9e9e5 100%)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.siteShell{min-height:100vh;overflow-x:hidden}.heroSection,.entrySection,.instrumentPanel{position:relative;display:grid;min-height:100svh;overflow:hidden;isolation:isolate}.heroSection:before,.entrySection:before,.instrumentPanel:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;content:""}.heroSection{place-items:center;padding:clamp(22px,4vw,56px)}.heroSection:before{background:repeating-linear-gradient(-8deg,rgba(17,17,17,.023) 0 1px,transparent 1px 18px),radial-gradient(circle at 76% 72%,rgba(255,255,255,.84),transparent 22rem)}.heroBrand{display:grid;justify-items:center;max-width:min(1080px,92vw);color:#050505;font-family:Arial Rounded MT Bold,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-size:clamp(5.4rem,14vw,14.8rem);font-weight:950;line-height:.78;text-align:center;text-transform:lowercase}.heroBrand span{display:block}.entrySection{place-items:center;padding:clamp(22px,4vw,56px);background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.92),transparent 28rem),linear-gradient(180deg,#f3f3f0,#eeeeeb)}.entrySection:before{background-image:linear-gradient(rgba(17,17,17,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.018) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at center,#000 0 28%,transparent 70%);mask-image:radial-gradient(circle at center,#000 0 28%,transparent 70%)}.entryGrid{position:relative;display:grid;width:min(940px,86vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}.entryCard{position:relative;display:grid;min-height:clamp(230px,28vw,330px);padding:clamp(24px,3.2vw,38px);place-items:center;overflow:hidden;color:var(--ink);background:#ffffff57;border:1px solid rgba(17,17,17,.12);border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;isolation:isolate;text-align:center;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}.entryCard:before{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.52),transparent 38%),repeating-linear-gradient(-8deg,rgba(17,17,17,.018) 0 1px,transparent 1px 19px);content:"";opacity:.62;pointer-events:none;transition:opacity .18s ease}.entryCard:is(:hover,:focus,:focus-visible){color:#f8f8f4;background:#101010;border-color:#101010;outline:2px solid rgba(17,17,17,.08);outline-offset:5px}.entryCard:is(:hover,:focus,:focus-visible):before{opacity:.16}.entryTitle,.entryDescription{position:relative;z-index:1;grid-area:1 / 1}.entryTitle{font-size:clamp(2.45rem,5.9vw,5.7rem);font-weight:900;line-height:1;transition:opacity .18s ease,transform .18s ease,filter .18s ease}.entryDescription{max-width:11.5em;color:#1111118f;font-size:clamp(.92rem,1.25vw,1.08rem);font-weight:650;line-height:1.45;opacity:0;transform:translateY(12px);transition:color .18s ease,opacity .18s ease,transform .18s ease}.entryCard:is(:hover,:focus,:focus-visible) .entryTitle{opacity:0;filter:blur(2px);transform:translateY(-12px) scale(.97)}.entryCard:is(:hover,:focus,:focus-visible) .entryDescription{color:#f8f8f4b8;opacity:1;transform:translateY(0)}.instrumentPanel{place-items:center;padding:clamp(22px,4vw,56px);background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.86),transparent 31rem),linear-gradient(180deg,#efefec,#f8f8f5 48%,#ededeb)}.instrumentPanel:before{background-image:linear-gradient(rgba(17,17,17,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.028) 1px,transparent 1px),repeating-linear-gradient(169deg,rgba(17,17,17,.035) 0 1px,transparent 1px 24px);background-size:74px 74px,74px 74px,100% 100%;opacity:.72}.instrumentShell{position:relative;z-index:1;display:grid;width:min(980px,90vw);gap:clamp(22px,3.4vw,36px)}.instrumentHeading{justify-self:center;color:#11111180;font-size:.82rem;font-weight:760}.instrumentStage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:clamp(12px,2vw,24px)}.instrumentFocus{display:grid;min-height:clamp(500px,62vh,640px);padding:clamp(26px,4vw,48px);align-content:center;place-items:center;gap:clamp(12px,2vw,20px);text-align:center;background:#ffffff5c;border:1px solid rgba(17,17,17,.08);border-radius:8px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.instrumentCopy{display:grid;justify-items:center;gap:8px}.instrumentFocus h2{margin:0;color:#101010;font-size:clamp(2.6rem,6.8vw,5.9rem);font-weight:950;line-height:.92}.instrumentFocus p{max-width:18em;margin:0;color:#11111185;font-size:clamp(.92rem,1.2vw,1.04rem);font-weight:650;line-height:1.5}.instrumentArrow,.listenButton,.instrumentChoice,.pianoKey,.guitarStringButton,.drumPadButton{border:0;cursor:pointer;font:inherit;touch-action:manipulation}.instrumentArrow{display:grid;width:48px;aspect-ratio:1;place-items:center;color:#101010;background:#ffffff57;border:1px solid rgba(17,17,17,.12);border-radius:999px;transition:color .18s ease,background .18s ease,border-color .18s ease}.instrumentArrow:hover,.instrumentArrow:focus-visible,.instrumentChoice[data-active=true]{color:#f8f8f4;background:#101010;border-color:#101010}.listenButton{min-width:96px;height:44px;padding:0 22px;margin-top:clamp(2px,.8vw,8px);color:#f8f8f4;font-weight:760;background:#101010;border-radius:999px;transition:background .18s ease,transform .18s ease}.listenButton:hover,.listenButton:focus-visible{background:#2a2a2a;transform:translateY(-1px)}.instrumentArrow:focus-visible,.listenButton:focus-visible,.instrumentChoice:focus-visible,.pianoKey:focus-visible,.guitarStringButton:focus-visible,.drumPadButton:focus-visible{outline:2px solid rgba(17,17,17,.22);outline-offset:4px}.instrumentChoices{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.instrumentChoice{min-width:74px;padding:10px 16px;color:#1111119e;font-weight:760;background:#ffffff4d;border:1px solid rgba(17,17,17,.1);border-radius:999px;transition:color .18s ease,background .18s ease,border-color .18s ease}.instrumentChoice:hover,.instrumentChoice:focus-visible{color:#101010;background:#ffffffb8}.instrumentVisual{position:relative;width:min(660px,100%);height:clamp(230px,31vw,310px)}.pianoReal{perspective:900px}.pianoTop{position:absolute;inset:8px 18px auto;z-index:0;height:38%;overflow:hidden;background:linear-gradient(105deg,transparent 0 34%,rgba(255,255,255,.18) 43%,transparent 53%),radial-gradient(circle at 18% 18%,rgba(255,255,255,.16),transparent 17rem),linear-gradient(180deg,#191919,#050505);border:1px solid rgba(0,0,0,.46);border-radius:18px 18px 8px 8px;box-shadow:0 22px 42px #11111129,inset 0 1px #ffffff2e}.pianoTop span{position:absolute;right:8%;left:8%;height:1px;background:#ffffff1a}.pianoTop span:first-child{top:34%}.pianoTop span:last-child{top:62%}.pianoBody{position:absolute;top:19%;right:8px;bottom:21px;left:8px;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 34%),linear-gradient(180deg,#151515,#080808 54%,#111);border:1px solid rgba(0,0,0,.32);border-radius:10px 10px 15px 15px;box-shadow:0 24px 42px #11111124,inset 0 1px #ffffff29,inset 0 -18px 24px #0000006b}.pianoLeg{position:absolute;bottom:0;z-index:0;width:clamp(18px,2.8vw,26px);height:20%;background:linear-gradient(90deg,rgba(255,255,255,.11),transparent 30%),linear-gradient(180deg,#151515,#060606);border-radius:0 0 8px 8px;box-shadow:0 12px 18px #1111111f,inset 0 1px #ffffff1a}.pianoLegLeft{left:9%}.pianoLegRight{right:9%}.pianoPedals{position:absolute;right:42%;bottom:0;left:42%;z-index:0;height:15%;border-bottom:2px solid rgba(17,17,17,.32)}.pianoPedals:before,.pianoPedals:after{position:absolute;bottom:0;width:9px;height:35px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%),#111;border-radius:999px 999px 6px 6px;content:"";transform-origin:bottom}.pianoPedals:before{left:28%;transform:rotate(7deg)}.pianoPedals:after{right:28%;transform:rotate(-7deg)}.pianoFelt{position:absolute;right:26px;bottom:calc(66% - 8px);left:26px;z-index:3;height:6px;background:linear-gradient(90deg,#ffffff1a,#2b2b2b 22%,#111 78%,#ffffff1a);border-radius:999px;box-shadow:0 4px 12px #11111129}.pianoWhiteKeys{position:absolute;right:26px;bottom:18px;left:26px;z-index:2;display:grid;height:66%;overflow:hidden;background:#f8f8f5;border:1px solid rgba(17,17,17,.24);border-radius:3px 3px 13px 13px;grid-template-columns:repeat(14,minmax(0,1fr));box-shadow:0 15px 24px #1111111f,inset 0 10px 12px #1111110f}.pianoBlackKeys{position:absolute;right:26px;bottom:18px;left:26px;z-index:4;height:66%;pointer-events:none}.pianoKey{-webkit-appearance:none;-moz-appearance:none;appearance:none}.pianoKeyWhite{position:relative;display:grid;align-items:end;min-width:0;padding:0 0 14px;color:#1116;background:linear-gradient(90deg,rgba(17,17,17,.05),transparent 14%,transparent 86%,rgba(17,17,17,.05)),linear-gradient(180deg,#fff,#fbfbf8 43%,#ededeb);border-right:1px solid rgba(17,17,17,.16);box-shadow:inset 0 -12px 20px #1111110e,inset 0 1px #ffffffd1;font-size:.72rem;font-weight:760;transition:background .12s ease,transform .12s ease,color .12s ease}.pianoKeyWhite:last-child{border-right:0}.pianoKeyWhite:hover{color:#11111194;background:linear-gradient(90deg,rgba(17,17,17,.06),transparent 14%,transparent 86%,rgba(17,17,17,.06)),linear-gradient(180deg,#fff,#f5f5f1 52%,#e7e7e2)}.pianoKeyWhite[data-active=true],.pianoKeyWhite:active{color:#111111b8;background:linear-gradient(90deg,rgba(17,17,17,.06),transparent 18%,transparent 82%,rgba(17,17,17,.06)),linear-gradient(180deg,#e7e7e2,#f4f4f0 48%,#dcdcd7);box-shadow:inset 0 12px 16px #1111111a,inset 0 -8px 14px #1111110a;transform:translateY(5px)}.pianoKeyBlack{position:absolute;top:0;width:4.8%;height:56%;pointer-events:auto;background:linear-gradient(100deg,rgba(255,255,255,.16),transparent 24%),linear-gradient(180deg,#020202,#171717 62%,#050505);border:1px solid rgba(0,0,0,.7);border-radius:0 0 7px 7px;box-shadow:0 13px 18px #1111113d,inset 0 -9px 12px #ffffff0d,inset 0 1px #ffffff29;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}.pianoKeyBlack:hover{background:linear-gradient(100deg,rgba(255,255,255,.2),transparent 24%),linear-gradient(180deg,#0d0d0d,#1d1d1d 62%,#050505)}.pianoKeyBlack[data-active=true],.pianoKeyBlack:active{background:linear-gradient(180deg,#191919,#050505);box-shadow:0 6px 10px #1111112e,inset 0 9px 11px #0006,inset 0 -6px 10px #ffffff09;transform:translateY(5px)}.guitarReal{width:min(700px,100%);height:clamp(230px,32vw,300px)}.guitarReal:before{position:absolute;right:4%;bottom:2%;left:3%;height:18%;background:radial-gradient(ellipse at center,rgba(17,17,17,.14),transparent 68%);content:"";pointer-events:none}.guitarBody{position:absolute;top:7%;bottom:6%;left:1%;z-index:1;width:46%;isolation:isolate;overflow:visible;background:radial-gradient(ellipse at 62% 50%,rgba(255,255,255,.98) 0 20%,transparent 25%),linear-gradient(145deg,#fdfdfb,#eeeeeb 58%,#d8d8d3),repeating-linear-gradient(158deg,rgba(17,17,17,.04) 0 1px,transparent 1px 15px);border:2px solid rgba(17,17,17,.3);border-radius:54% 38% 40% 54%/38% 47% 47% 38%;box-shadow:0 24px 38px #11111126,inset 0 1px #ffffffe6,inset -18px 0 28px #11111112,inset 0 -10px 18px #1111110b;transform:rotate(-1.4deg)}.guitarBody:before,.guitarBody:after{position:absolute;left:-3%;width:61%;height:48%;background:radial-gradient(ellipse at 58% 48%,rgba(255,255,255,.94),transparent 25%),linear-gradient(145deg,#fdfdfb,#eeeeeb 62%,#d7d7d2),repeating-linear-gradient(158deg,rgba(17,17,17,.04) 0 1px,transparent 1px 15px);border:2px solid rgba(17,17,17,.28);border-right-color:transparent;box-shadow:0 18px 30px #1111111f,inset 0 1px #ffffffe0,inset -10px 0 18px #1111110b;content:"";pointer-events:none;z-index:0}.guitarBody:before{top:-1%;border-radius:64% 34% 24% 58%/48% 43% 28% 52%}.guitarBody:after{bottom:-1%;height:55%;border-radius:66% 26% 42% 62%/54% 30% 43% 50%}.guitarBodyEdge{position:absolute;top:5%;right:4%;bottom:6%;left:4%;z-index:3;border:1px solid rgba(17,17,17,.24);border-radius:inherit;pointer-events:none}.guitarSoundHole{position:absolute;top:50%;left:57%;z-index:4;width:clamp(48px,8vw,70px);aspect-ratio:1;background:radial-gradient(circle at 46% 42%,#050505 0 47%,rgba(255,255,255,.2) 48% 54%,#111111 55% 64%,transparent 65%);border-radius:50%;box-shadow:inset 0 0 12px #ffffff14,0 2px #ffffff6b,0 0 0 1px #11111147;transform:translate(-50%,-50%)}.guitarRosette{position:absolute;top:50%;left:57%;z-index:3;width:clamp(68px,10vw,92px);aspect-ratio:1;border:2px solid rgba(17,17,17,.24);border-radius:50%;box-shadow:inset 0 0 0 5px #ffffff85,0 0 0 1px #11111114;transform:translate(-50%,-50%)}.guitarPickguard{position:absolute;top:55%;left:58%;z-index:2;width:clamp(42px,6vw,58px);height:clamp(46px,6.8vw,66px);background:#11111124;border:1px solid rgba(17,17,17,.12);border-radius:48% 20% 58% 38%;clip-path:ellipse(46% 50% at 42% 44%);transform:rotate(-21deg)}.guitarBridge{position:absolute;top:50%;left:20%;z-index:3;width:clamp(54px,7.6vw,76px);height:18px;background:#101010;border-radius:4px 4px 12px 12px;box-shadow:0 6px 12px #1111112e;transform:translateY(-50%) rotate(-2deg)}.guitarBridge:before,.guitarBridge:after{position:absolute;top:50%;width:4px;aspect-ratio:1;background:#ffffffb8;border-radius:50%;content:"";transform:translateY(-50%)}.guitarBridge:before{left:17%;box-shadow:12px 0 #ffffffb8,24px 0 #ffffffb8}.guitarBridge:after{right:17%;box-shadow:-12px 0 #ffffffb8,-24px 0 #ffffffb8}.guitarSaddle{position:absolute;top:50%;left:calc(20% + 6px);z-index:4;width:clamp(42px,6vw,58px);height:3px;background:#ffffffc7;border-radius:999px;transform:translateY(-50%) rotate(-2deg)}.guitarEndPin{position:absolute;top:50%;left:-1%;z-index:3;width:11px;aspect-ratio:1;background:#101010;border:2px solid rgba(255,255,255,.62);border-radius:50%;box-shadow:0 5px 10px #1111111f;transform:translate(-50%,-50%)}.guitarNeck{position:absolute;top:35%;right:13%;left:40%;z-index:2;height:30%;overflow:hidden;background:linear-gradient(180deg,#fbfbf9,#e7e7e3 58%,#d6d6d1),repeating-linear-gradient(90deg,rgba(17,17,17,.04) 0 1px,transparent 1px 22px);border:1px solid rgba(17,17,17,.26);border-left:0;border-radius:2px 9px 9px 2px;box-shadow:0 17px 30px #1111111f,inset 0 1px #ffffffdb,inset 0 -6px 12px #1111110e}.guitarHead{position:absolute;top:28%;right:3%;z-index:2;width:14%;height:44%;background:linear-gradient(160deg,#fbfbf9,#e5e5e1),repeating-linear-gradient(170deg,rgba(17,17,17,.055) 0 1px,transparent 1px 18px);border:1px solid rgba(17,17,17,.28);border-radius:8px 34px 34px 8px;box-shadow:0 17px 30px #11111121,inset 0 1px #ffffffd6,inset 0 -6px 12px #1111110e}.guitarHead:before{position:absolute;top:50%;left:-12%;width:19%;height:34%;background:inherit;border:1px solid rgba(17,17,17,.26);border-right:0;border-radius:8px 0 0 8px;content:"";transform:translateY(-50%)}.guitarHead span{position:absolute;width:10px;aspect-ratio:1;background:#101010;border-radius:50%;box-shadow:0 0 0 5px #1111110f}.guitarHead span:before{position:absolute;top:50%;width:16px;height:3px;background:#1111119e;border-radius:999px;content:"";transform:translateY(-50%)}.guitarHead span:nth-child(-n+3):before{right:70%}.guitarHead span:nth-child(n+4):before{left:70%}.guitarHead span:nth-child(1){top:16%;left:23%}.guitarHead span:nth-child(2){top:39%;left:13%}.guitarHead span:nth-child(3){top:62%;left:21%}.guitarHead span:nth-child(4){top:16%;right:21%}.guitarHead span:nth-child(5){top:39%;right:12%}.guitarHead span:nth-child(6){top:62%;right:20%}.guitarNut{position:absolute;top:0;bottom:0;right:0;width:8px;background:#101010;border-right:1px solid rgba(17,17,17,.18)}.guitarFret{position:absolute;top:0;bottom:0;width:1px;background:#11111138}.guitarMarker{position:absolute;top:50%;width:9px;aspect-ratio:1;background:#11111129;border-radius:50%;transform:translateY(-50%)}.guitarMarkerOne{left:36%}.guitarMarkerTwo{left:62%}.guitarStringButton{position:absolute;right:5%;left:9%;z-index:5;height:24px;padding:0;color:#1111116b;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transform:translateY(-50%);transition:color .12s ease}.guitarStringButton:before{position:absolute;top:50%;right:0;left:0;height:var(--string-thickness);background:linear-gradient(90deg,transparent 0 1.5%,#101010 1.5% 3%,rgba(17,17,17,.78) 12%,rgba(17,17,17,.48) 54%,rgba(17,17,17,.78) 88%,#101010 97% 98.5%,transparent 98.5%),linear-gradient(90deg,rgba(255,255,255,.72),transparent 24%);border-radius:999px;box-shadow:0 1px #ffffff9e,0 1px 3px #11111129;content:"";transform:translateY(-50%);transition:box-shadow .12s ease,transform .12s ease,background .12s ease}.guitarStringButton:after{position:absolute;top:50%;left:22%;width:12px;aspect-ratio:1;border:1px solid rgba(17,17,17,.22);border-radius:50%;box-shadow:0 0 0 5px #11111109;content:"";opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .12s ease,transform .12s ease}.guitarStringButton span{position:absolute;top:50%;left:-32px;font-size:.72rem;font-weight:760;transform:translateY(-50%)}.guitarStringButton:hover:before{box-shadow:0 0 0 4px #1111110d,0 2px 6px #1111111c;transform:translateY(-50%) scaleY(1.45)}.guitarStringButton[data-active=true]:before,.guitarStringButton:active:before{background:#101010;box-shadow:0 0 0 5px #11111114,0 3px 8px #11111129;animation:guitarStringVibrate .22s ease-out;transform:translateY(-50%) scaleY(2.3)}.guitarStringButton[data-active=true]:after,.guitarStringButton:active:after{opacity:1;transform:translate(-50%,-50%) scale(1.55)}.guitarStringButton[data-active=true] span,.guitarStringButton:hover span,.guitarStringButton:active span{color:#111111b8}.guitarReal:has(.guitarStringButton[data-active=true]) .guitarBody{box-shadow:0 24px 38px #11111129,inset 0 1px #ffffffe6,inset -18px 0 28px #11111114,inset 0 -10px 18px #1111110e,0 0 0 4px #11111109}.guitarReal:has(.guitarStringButton[data-active=true]) .guitarSoundHole{box-shadow:inset 0 0 12px #ffffff14,0 2px #ffffff6b,0 0 0 1px #11111147,0 0 0 7px #1111110e}@keyframes guitarStringVibrate{0%{transform:translateY(-50%) scaleY(2.5)}28%{transform:translateY(calc(-50% - 4px)) scaleY(1.9)}56%{transform:translateY(calc(-50% + 3px)) scaleY(1.6)}to{transform:translateY(-50%) scaleY(2.3)}}.drumKitReal{width:min(640px,100%);height:clamp(240px,32vw,310px)}.drumFloorShadow{position:absolute;right:11%;bottom:0;left:12%;height:20%;background:radial-gradient(ellipse at center,rgba(17,17,17,.16),transparent 68%);pointer-events:none}.drumRack{position:absolute;top:43%;right:17%;left:17%;z-index:0;height:3px;background:#11111152;border-radius:999px;box-shadow:0 1px #ffffffa6}.drumRack:before,.drumRack:after{position:absolute;top:0;width:2px;height:82px;background:#11111147;content:"";transform-origin:top}.drumRack:before{left:18%;transform:rotate(12deg)}.drumRack:after{right:18%;transform:rotate(-12deg)}.drumThrone{position:absolute;right:3%;bottom:10%;z-index:0;width:70px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent),#11111138;border:1px solid rgba(17,17,17,.18);border-radius:50%;transform:rotate(-6deg)}.drumThrone:after{position:absolute;top:76%;left:50%;width:2px;height:54px;background:#1111113d;content:"";transform:translate(-50%)}.drumPadButton{--pad-transform: translateZ(0);position:absolute;z-index:2;display:grid;place-items:center;isolation:isolate;padding:0;color:#1111119e;background:radial-gradient(circle at 50% 42%,#fffffffc 0,#fffffffc 42%,#e9e9e5e6 70%,#11111117);border:2px solid rgba(17,17,17,.27);border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 18px 30px #11111121,inset 0 1px #ffffffe6,inset 0 -12px 20px #1111110f;cursor:pointer;font-size:.76rem;font-weight:800;transform:var(--pad-transform);transition:background .12s ease,box-shadow .12s ease,color .12s ease,transform .12s ease}.drumPadButton:before{position:absolute;top:8%;right:8%;bottom:8%;left:8%;z-index:1;border:1px solid rgba(17,17,17,.17);border-radius:inherit;box-shadow:inset 0 0 0 8px #ffffff47,inset 0 -8px 16px #11111109;content:"";pointer-events:none}.drumPadButton span{position:relative;z-index:3;pointer-events:none}.drumPadButton:hover{color:#111c;box-shadow:0 20px 32px #11111129,inset 0 1px #ffffffe6,inset 0 -12px 20px #11111113,0 0 0 4px #11111109}.drumPadButton[data-active=true],.drumPadButton:active{color:#111111c7;background:radial-gradient(circle at 50% 50%,#dadad6fa,#f6f6f2db 72%);box-shadow:0 10px 16px #1111111a,inset 0 6px 12px #1111111a,0 0 0 6px #1111110b;transform:var(--pad-transform) translateY(3px) scale(.98)}.drumPadCrash,.drumPadHihat{background:repeating-radial-gradient(ellipse at 50% 44%,rgba(17,17,17,.1) 0 1px,transparent 1px 8px),radial-gradient(ellipse at 50% 44%,#fffffffa 0,#fffffffa 30%,#deded9f0 55%,#11111138);border-radius:50%;box-shadow:0 16px 26px #11111126,inset 0 1px #ffffffe0,inset 0 -4px 8px #11111114}.drumPadTom,.drumPadSnare,.drumPadKick{overflow:visible}.drumPadTom:after,.drumPadSnare:after,.drumPadKick:after{position:absolute;right:10%;bottom:-9%;left:10%;z-index:0;height:24%;background:linear-gradient(180deg,#11111129,#ffffff7a),repeating-linear-gradient(90deg,rgba(17,17,17,.045) 0 1px,transparent 1px 12px),#dededa;border:1px solid rgba(17,17,17,.2);border-top:0;border-radius:0 0 999px 999px;content:""}.drumPadCrash:after,.drumPadHihat:after{position:absolute;top:34%;right:42%;bottom:34%;left:42%;z-index:1;background:#11111152;border:3px solid rgba(255,255,255,.42);border-radius:50%;content:""}.drumPadCrash:before,.drumPadHihat:before{top:17%;right:9%;bottom:17%;left:9%;border-color:#1111112e}.drumPadCrash{--pad-transform: rotate(-8deg);top:12%;right:7%;width:clamp(108px,17vw,140px);height:clamp(42px,6vw,54px)}.drumPadHihat{--pad-transform: rotate(7deg);top:25%;left:7%;width:clamp(94px,14vw,118px);height:clamp(38px,5.4vw,50px)}.drumPadTom{top:32%;right:27%;width:clamp(98px,15vw,124px);height:clamp(80px,11vw,98px)}.drumPadSnare{top:51%;left:22%;width:clamp(112px,16vw,138px);height:clamp(82px,11vw,102px)}.drumPadKick{--pad-transform: translateX(-50%);bottom:7%;left:50%;width:clamp(140px,20vw,174px);height:clamp(118px,17vw,144px);transform:translate(-50%)}.drumPadKick:before{top:14%;right:14%;bottom:14%;left:14%;border-color:#11111124;box-shadow:inset 0 0 0 18px #11111105}.drumPadKick span{transform:translateY(-10px)}.drumPadKick[data-active=true],.drumPadKick:active{transform:translate(-50%) translateY(3px) scale(.98)}.drumPadTom:before,.drumPadSnare:before{box-shadow:inset 0 0 0 7px #11111105,0 -6px 0 -5px #1111115c,9px 1px 0 -8px #11111161,-9px 1px 0 -8px #11111161}.drumPadCrash[data-active=true],.drumPadCrash:active{animation:drumCrashHit .3s ease-out}.drumPadHihat[data-active=true],.drumPadHihat:active{animation:drumHihatHit .22s ease-out}.drumStand{position:absolute;z-index:1;display:block;width:2px;background:#11111152;transform-origin:top}.drumStandLeft{top:39%;left:16%;height:48%;transform:rotate(14deg)}.drumStandRight{top:31%;right:13%;height:56%;transform:rotate(-15deg)}.drumStandCenter{top:43%;left:58%;height:43%;transform:rotate(-4deg)}.drumStandKick{bottom:0;left:50%;height:36%;transform:translate(-50%)}.drumBeater{position:absolute;bottom:18%;left:50%;z-index:4;width:2px;height:58px;background:#1111117a;border-radius:999px;transform:translate(-50%) rotate(-9deg);transform-origin:bottom}.drumBeater:before{position:absolute;top:-13px;left:50%;width:18px;aspect-ratio:1;background:radial-gradient(circle at 42% 35%,rgba(255,255,255,.78),transparent 38%),#111;border-radius:50%;content:"";transform:translate(-50%)}.drumPedal{position:absolute;bottom:3%;left:50%;z-index:3;width:40px;height:18px;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent),#101010;border-radius:999px 999px 7px 7px;transform:translate(-50%);box-shadow:0 6px 12px #11111129}.drumStick{position:absolute;top:19%;z-index:5;width:5px;height:clamp(82px,13vw,112px);background:linear-gradient(90deg,rgba(255,255,255,.42),transparent 42%),#101010;border-radius:999px;box-shadow:0 7px 13px #1111111f;pointer-events:none;transform-origin:50% 88%}.drumStick:after{position:absolute;top:-7px;left:50%;width:11px;aspect-ratio:1;background:#101010;border-radius:50%;content:"";transform:translate(-50%)}.drumStickLeft{left:34%;transform:rotate(57deg)}.drumStickRight{right:29%;transform:rotate(-55deg)}.drumKitReal:has(.drumPadButton[data-active=true]) .drumStickLeft{animation:drumStickLeftHit .26s ease-out}.drumKitReal:has(.drumPadButton[data-active=true]) .drumStickRight{animation:drumStickRightHit .26s ease-out}.drumKitReal:has(.drumPadKick[data-active=true]) .drumBeater{animation:kickBeaterHit .26s ease-out}@keyframes drumCrashHit{0%{transform:rotate(-8deg) translateY(0) scale(1)}38%{transform:rotate(-13deg) translateY(5px) scale(1.04)}to{transform:rotate(-8deg) translateY(0) scale(1)}}@keyframes drumHihatHit{0%{transform:rotate(7deg) translateY(0) scale(1)}45%{transform:rotate(5deg) translateY(4px) scale(.96)}to{transform:rotate(7deg) translateY(0) scale(1)}}@keyframes drumStickLeftHit{0%{transform:rotate(57deg)}48%{transform:rotate(42deg) translateY(18px)}to{transform:rotate(57deg)}}@keyframes drumStickRightHit{0%{transform:rotate(-55deg)}48%{transform:rotate(-39deg) translateY(18px)}to{transform:rotate(-55deg)}}@keyframes kickBeaterHit{0%{transform:translate(-50%) rotate(-9deg)}45%{transform:translate(-50%) rotate(3deg)}to{transform:translate(-50%) rotate(-9deg)}}@media (max-width: 860px){.entryGrid{width:min(520px,88vw);grid-template-columns:1fr}.entryCard{min-height:clamp(164px,23vh,220px)}.instrumentStage{grid-template-columns:1fr 1fr;grid-template-areas:"focus focus" "previous next"}.instrumentFocus{grid-area:focus;min-height:500px}.instrumentStage .instrumentArrow:first-child{justify-self:end;grid-area:previous}.instrumentStage .instrumentArrow:last-child{justify-self:start;grid-area:next}.instrumentShell{width:min(560px,88vw)}}@media (max-width: 560px){.heroSection{padding-inline:14px}.heroBrand{font-size:clamp(4.35rem,22vw,7.5rem)}.instrumentFocus{min-height:470px;padding-inline:18px}.instrumentVisual{height:198px}.pianoWhiteKeys,.pianoBlackKeys,.pianoFelt{right:12px;left:12px}.pianoKeyWhite{padding-bottom:10px;font-size:.62rem}.guitarStringButton span{left:-28px}.drumStick{height:72px}}
