*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}:root{font-family:Comic Sans MS,Chalkboard SE,cursive}body{margin:0;padding:0;overflow:hidden;background:#1a1a2e;touch-action:manipulation}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#root{height:100%;width:100%;overflow:hidden;touch-action:none}.splash{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#54a0ff);background-size:300% 300%;animation:splashBg 6s ease infinite;cursor:pointer;overflow:hidden;position:relative}@keyframes splashBg{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.splash-content{text-align:center;z-index:1}.splash-floating{display:flex;justify-content:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.splash-float-emoji{font-size:2.8rem;display:inline-block}.splash-float-emoji:nth-child(1){animation:float1 2s ease-in-out infinite}.splash-float-emoji:nth-child(2){animation:float2 2.3s ease-in-out infinite .2s}.splash-float-emoji:nth-child(3){animation:float3 1.8s ease-in-out infinite .4s}.splash-float-emoji:nth-child(4){animation:float1 2.1s ease-in-out infinite .6s}.splash-float-emoji:nth-child(5){animation:float2 2.5s ease-in-out infinite .3s}.splash-float-emoji:nth-child(6){animation:float3 1.9s ease-in-out infinite .5s}.splash-float-emoji:nth-child(7){animation:float1 2.2s ease-in-out infinite .1s}@keyframes float1{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(5deg)}}@keyframes float2{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(-5deg)}}@keyframes float3{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}.splash-title{font-size:3.5rem;color:#fff;font-family:Comic Sans MS,Chalkboard SE,cursive;text-shadow:3px 3px 0 rgba(0,0,0,.15),0 0 20px rgba(255,255,255,.3);margin-bottom:8px}.splash-sub{font-size:1.4rem;color:#fffffff2;font-family:Comic Sans MS,Chalkboard SE,cursive;animation:pulse 2s ease-in-out infinite;text-shadow:1px 1px 0 rgba(0,0,0,.1)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.03)}}.splash-stars{display:flex;justify-content:center;gap:8px;margin-top:20px;font-size:1.5rem}.splash-star{animation:twinkle 1.5s ease-in-out infinite}.splash-star:nth-child(2){animation-delay:.5s}.splash-star:nth-child(3){animation-delay:1s}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.app{height:100vh;width:100vw;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a1a2e,#16213e);color:#fff;font-family:Comic Sans MS,Chalkboard SE,cursive}.header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#0000004d;flex-shrink:0}.header-controls{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}.logo{font-size:1.5rem;background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff6b6b);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow 4s ease infinite}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.instrument-nav{display:flex;gap:.4rem;padding:.5rem;justify-content:center;flex-shrink:0;flex-wrap:wrap}.nav-btn{width:clamp(3rem,8vw,4.5rem);height:clamp(3rem,8vw,4.5rem);border-radius:1rem;border:3px solid transparent;background:#fff3;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.nav-btn:active{transform:scale(.9)}.nav-active{border-color:#feca57;background:#feca5733;transform:scale(1.1)}.nav-emoji{font-size:clamp(1.4rem,4vw,2.2rem)}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;touch-action:none;overflow:hidden;min-height:0}.instrument-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}.instrument-title{font-size:1.5rem;text-align:center;flex-shrink:0}.piano-realistic{flex:1;width:100%;max-width:650px;display:flex;align-items:stretch;padding:.5rem}.piano-body{width:100%;background:linear-gradient(180deg,#1a1a1a,#111);border-radius:.5rem .5rem 1rem 1rem;padding:.8rem .5rem .5rem;box-shadow:0 8px 30px #0009}.piano-keys-container{position:relative;display:flex;height:100%;min-height:180px}.white-key{flex:1;background:linear-gradient(180deg,#f8f8f8,#e8e8e8 85%,#d0d0d0);border:1px solid #bbb;border-radius:0 0 .5rem .5rem;cursor:pointer;transition:all .08s ease;margin:0 1px;box-shadow:0 4px 6px #0000004d,inset 0 -2px 3px #0000001a}.white-key:active{background:linear-gradient(180deg,#e0e0e0,#d0d0d0 85%,silver);box-shadow:0 2px 3px #0000004d;transform:scaleY(.98);transform-origin:top}.black-key{position:absolute;width:7%;height:60%;background:linear-gradient(180deg,#333,#1a1a1a 70%,#111);border:none;border-radius:0 0 .3rem .3rem;cursor:pointer;z-index:2;box-shadow:0 4px 8px #00000080,inset 0 -2px 4px #3c3c3c4d;transition:all .08s ease}.black-key:active{background:linear-gradient(180deg,#444,#2a2a2a 70%,#222);height:58%;box-shadow:0 2px 4px #00000080}.drum-grid{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem;padding:.5rem}.drum-pad{border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s ease;box-shadow:0 6px 20px #00000080,inset 0 3px 15px #ffffff1f;border:4px solid rgba(90,90,90,.5);overflow:hidden;position:relative;aspect-ratio:1;max-width:100%;max-height:100%;margin:auto;width:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.drum-pad:active{transform:scale(.92)}.drum-flash{filter:brightness(1.4)}.drum-rim{position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(255,255,255,.15);pointer-events:none}.drum-pad-label{font-size:1.2rem;color:#fff9;font-family:inherit;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.6);z-index:2;pointer-events:none}.drum-ripple{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);animation:rippleOut .4s ease-out forwards;pointer-events:none}.drum-ripple.delay{animation-delay:.08s;border-color:#ffc83280}@keyframes rippleOut{0%{width:20px;height:20px;opacity:1}to{width:120%;height:120%;opacity:0}}.xylo-fullscreen{flex:1;width:100%;display:flex;flex-direction:column;gap:.2rem;padding:.2rem .5rem;overflow:hidden;min-height:0}.xylo-full-bar{flex:1;width:100%;border:none;border-radius:.6rem;cursor:pointer;transition:all .08s ease;box-shadow:0 3px 8px #0000004d,inset 0 2px 6px #ffffff40;position:relative;overflow:hidden;min-height:2rem}.xylo-full-bar:active{transform:scaleY(.92);filter:brightness(1.2)}.xylo-hit{filter:brightness(1.4);box-shadow:0 0 20px #fff6,0 3px 8px #0000004d,inset 0 2px 6px #ffffff40}.xylo-bar-shine{position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);pointer-events:none;border-radius:.6rem .6rem 0 0}.xylo-bar-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ddd,#888);top:50%;transform:translateY(-50%);pointer-events:none;box-shadow:0 1px 2px #0006}.xylo-bar-screw.left{left:10px}.xylo-bar-screw.right{right:10px}.guitar-realistic{flex:1;width:100%;position:relative;overflow:hidden;border-radius:.5rem}.guitar-wood-body{position:absolute;inset:0;background:linear-gradient(180deg,#3d2317,#2c1810 45%,#8b5e3c 46%,#c4813c 50%,#d2961e 55%,#a0701a 70%,#8b5a13);overflow:hidden}.guitar-wood-grain{position:absolute;inset:0;background:repeating-linear-gradient(92deg,transparent,transparent 18px,rgba(0,0,0,.04) 18px,rgba(0,0,0,.04) 20px);pointer-events:none}.guitar-wood-grain.g2{background:repeating-linear-gradient(88deg,transparent,transparent 30px,rgba(255,255,255,.02) 30px,rgba(255,255,255,.02) 32px)}.guitar-wood-grain.g3{background:repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(0,0,0,.03) 50px,rgba(0,0,0,.03) 52px)}.guitar-neck-piece{position:absolute;top:0;left:15%;right:15%;height:48%;background:linear-gradient(90deg,#1a0e08,#2c1810 5%,#3d2317,#2c1810 95%,#1a0e08);border-left:2px solid #0D0705;border-right:2px solid #0D0705;z-index:1;pointer-events:none}.guitar-nut{position:absolute;top:2%;left:0;right:0;height:4px;background:linear-gradient(180deg,beige,#e8dcc8,#d4c4a8);box-shadow:0 1px 2px #00000080}.guitar-fret{width:100%;height:2px;background:linear-gradient(180deg,#e0d0b0,#c0b090);box-shadow:0 1px 1px #0000004d;margin-top:12%}.guitar-fret-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 40% 40%,beige,#c8b898);left:50%;transform:translate(-50%);pointer-events:none}.guitar-fret-dot.dot3{top:28%}.guitar-fret-dot.dot5{top:48%}.guitar-fret-dot.dot7{top:70%}.guitar-soundhole-area{position:absolute;top:52%;left:50%;transform:translate(-50%);z-index:1;pointer-events:none}.guitar-rosette{width:80px;height:80px;border-radius:50%;background:conic-gradient(#8b6914,#c4922a,#daa520,#8b6914,#c4922a,#daa520,#8b6914);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #6b4e12}.guitar-rosette-inner{position:absolute;width:72px;height:72px;border-radius:50%;background:conic-gradient(#a07818,#d4aa30,#b8920e,#a07818,#d4aa30,#b8920e)}.guitar-hole{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#0a0604 60%,#1a0e08);box-shadow:inset 0 3px 12px #000000e6;z-index:1}.guitar-bridge{position:absolute;bottom:15%;left:30%;right:30%;height:12px;background:linear-gradient(180deg,#1a0e08,#2c1810);border-radius:2px;z-index:1;pointer-events:none;box-shadow:0 2px 4px #00000080}.guitar-bridge-saddle{position:absolute;bottom:calc(15% + 8px);left:32%;right:32%;height:3px;background:linear-gradient(180deg,beige,#d4c4a8);border-radius:1px;z-index:1;pointer-events:none}.guitar-pickguard{position:absolute;top:54%;right:18%;width:50px;height:70px;background:#00000040;border-radius:40% 30% 50% 40%;z-index:1;pointer-events:none}.guitar-touch-lanes{position:absolute;inset:0;display:flex;z-index:3}.guitar-touch-lane{flex:1;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4%;position:relative;transition:background .15s ease}.guitar-touch-lane:active,.guitar-lane-plucked{background:#daa5201f}.guitar-string{position:absolute;top:0;bottom:0;border-radius:1px;transition:box-shadow .1s}.guitar-string-vibrate{animation:guitarVibrate .06s linear infinite;box-shadow:-3px 0 6px #ffd70066,3px 0 6px #ffd70066}@keyframes guitarVibrate{0%{transform:translate(-2px)}25%{transform:translate(2px)}50%{transform:translate(-1.5px)}75%{transform:translate(1.5px)}to{transform:translate(-2px)}}.guitar-note-label{font-size:.85rem;color:#ffffffb3;font-weight:700;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.9)}.sitar-realistic{flex:1;width:100%;position:relative;overflow:hidden;border-radius:.5rem}.sitar-wood-body{position:absolute;inset:0;background:linear-gradient(180deg,#3a2718,#4a3425 40%,#5c4230 42%,#7a5a3e 50%);overflow:hidden}.sitar-neck-wood{position:absolute;top:0;left:10%;right:10%;height:55%;background:linear-gradient(90deg,#2a1a0e,#3d2a1a 8%,#4a3425 25%,#5c4230,#4a3425 75%,#3d2a1a 92%,#2a1a0e);z-index:1;pointer-events:none;border-left:2px solid #1A0E08;border-right:2px solid #1A0E08}.sitar-neck-edge{position:absolute;top:0;bottom:0;width:6px;pointer-events:none}.sitar-neck-edge.left{left:0;background:linear-gradient(90deg,rgba(255,215,0,.15),transparent)}.sitar-neck-edge.right{right:0;background:linear-gradient(270deg,rgba(255,215,0,.15),transparent)}.sitar-neck-inlay{position:absolute;top:2%;left:50%;transform:translate(-50%);width:40%;height:96%;background:repeating-linear-gradient(180deg,transparent,transparent 20px,rgba(255,215,0,.03) 20px,rgba(255,215,0,.03) 22px);pointer-events:none}.sitar-curved-fret{position:absolute;left:5%;right:5%;height:4px;background:linear-gradient(90deg,transparent 0%,#C0C0C0 10%,#E8E0D0 30%,#F0E8D8 50%,#E8E0D0 70%,#C0C0C0 90%,transparent 100%);border-radius:50%;box-shadow:0 1px 2px #0006;pointer-events:none}.sitar-tumba-gourd{position:absolute;bottom:-25%;left:50%;transform:translate(-50%);width:130%;height:55%;background:radial-gradient(ellipse at 50% 25%,#e8c060,#d4a830,#c4922a,#a07818,#8b6914 80%);border-radius:50%;box-shadow:inset 0 -20px 40px #00000059,inset 0 10px 20px #ffffff1a;border:2px solid #6B4E12;z-index:0}.sitar-tumba-shine{position:absolute;top:10%;left:25%;right:25%;height:20%;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);border-radius:50%;pointer-events:none}.sitar-tumba-pattern{position:absolute;top:5%;left:20%;right:20%;height:30%;background:repeating-conic-gradient(rgba(139,105,20,.1) 0deg 10deg,transparent 10deg 20deg);border-radius:50%;pointer-events:none}.sitar-jawari{position:absolute;top:52%;left:35%;right:35%;height:8px;background:linear-gradient(180deg,#d4c4a8,#f0e8d8,#d4c4a8);border-radius:2px;z-index:1;pointer-events:none;box-shadow:0 2px 4px #0006}.sitar-touch-lanes{position:absolute;inset:0;display:flex;z-index:3}.sitar-touch-lane{flex:1;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4%;position:relative;transition:background .15s ease}.sitar-touch-lane:active,.sitar-lane-plucked{background:#e8b96026}.sitar-string-wire{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,silver,#e8e8e8,#d0d0d0,#e8e8e8,silver);border-radius:1px;transition:box-shadow .1s}.sitar-string-vibrate{animation:sitarVibrate .05s linear infinite;box-shadow:-4px 0 8px #ffd70080,4px 0 8px #ffd70080}@keyframes sitarVibrate{0%{transform:translate(-3px)}25%{transform:translate(3px)}50%{transform:translate(-2px)}75%{transform:translate(2px)}to{transform:translate(-3px)}}.sitar-note-label{font-size:.85rem;color:#ffd700cc;font-weight:700;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.9)}.harmonica-body{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;padding:.5rem}.harmonica-top-plate,.harmonica-bottom-plate{width:100%;height:2.5rem;background:linear-gradient(180deg,#f4f4f4,#d8d8d8,silver);border-radius:.8rem .8rem 0 0;box-shadow:0 2px 6px #0000004d,inset 0 3px 6px #ffffffb3;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 1rem}.harmonica-top-plate:before,.harmonica-top-plate:after,.harmonica-bottom-plate:before,.harmonica-bottom-plate:after{content:"";width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#aaa);box-shadow:inset 0 1px 2px #0006,0 1px 1px #fff6}.harmonica-bottom-plate{border-radius:0 0 .8rem .8rem}.harmonica-holes{display:flex;width:100%;gap:3px;background:linear-gradient(180deg,#b8b8b8,#a0a0a0);padding:6px 4px}.harmonica-hole{flex:1;border:none;background:linear-gradient(180deg,#eaeaea,#d4d4d4,#bfbfbf);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:14px 0;transition:all .1s ease;position:relative;border-radius:2px}.harmonica-hole:active,.harmonica-blow{background:linear-gradient(180deg,#fff,#f0f0f0,#e0e0e0)}.harmonica-blow .hole-opening{box-shadow:inset 0 2px 4px #0009,0 0 14px #64c8ffb3;background:radial-gradient(circle,#2a2a2a,#0a0a0a)}.hole-opening{width:70%;aspect-ratio:1;max-width:38px;background:radial-gradient(circle at 40% 40%,#2a2a2a,#0a0a0a);border-radius:50%;box-shadow:inset 0 2px 4px #000c,0 1px 1px #ffffff4d}.hole-label{font-size:.65rem;font-weight:700;color:#444;text-shadow:0 1px 1px rgba(255,255,255,.4)}.rhyme-instrument-picker{display:flex;gap:.4rem;justify-content:center;flex-shrink:0}.rhyme-inst-btn{width:2.8rem;height:2.8rem;border-radius:.8rem;border:2px solid transparent;background:#ffffff1a;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.rhyme-inst-btn:active{transform:scale(.9)}.rhyme-inst-active{border-color:#feca57;background:#feca5733}.rhyme-list{flex:1;width:100%;max-width:500px;display:flex;flex-direction:column;gap:.4rem;padding:.3rem .5rem;overflow-y:auto;min-height:0}.rhyme-stop-btn{width:100%;padding:.7rem;border:none;border-radius:.8rem;background:#c0392b;color:#fff;font-size:1.1rem;font-weight:700;font-family:inherit;cursor:pointer;flex-shrink:0;transition:transform .08s ease}.rhyme-stop-btn:active{transform:scale(.97)}.rhyme-btn{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border:none;border-radius:1rem;background:#ffffff14;color:#fff;font-family:inherit;font-size:1rem;cursor:pointer;transition:all .15s ease;flex-shrink:0}.rhyme-btn:active{transform:scale(.97)}.rhyme-playing{background:#feca5733;border:2px solid #FECA57}.rhyme-name{flex:1;text-align:left}.rhyme-note-indicator{font-size:.85rem;color:#feca57;margin:0 .5rem;animation:notePulse .3s ease infinite}@keyframes notePulse{0%,to{opacity:1}50%{opacity:.5}}.rhyme-action{font-size:1.2rem;width:2rem;text-align:center}.bells-quad{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem;padding:.5rem}.bell-quad-btn{border:none;border-radius:1.5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:all .1s ease;box-shadow:0 6px 20px #0000004d,inset 0 2px 8px #ffffff4d}.bell-quad-btn:active{transform:scale(.92)}.bell-quad-ring{animation:bellRing .4s ease;filter:brightness(1.3);box-shadow:0 0 25px #ffd70080,0 6px 20px #0000004d}@keyframes bellRing{0%{transform:rotate(0)}20%{transform:rotate(10deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}to{transform:rotate(0)}}.bell-quad-icon{font-size:3.5rem}.bell-quad-label{font-size:1.2rem;color:#00000080;font-weight:700}.sequencer{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:500px;padding:.5rem}.seq-row{display:flex;align-items:center;gap:.3rem}.seq-label{font-size:1.5rem;width:2.5rem;text-align:center;flex-shrink:0}.seq-cell{flex:1;aspect-ratio:1;border:2px solid transparent;border-radius:.5rem;cursor:pointer;transition:all .1s ease;max-height:50px}.seq-cell:active{transform:scale(.85)}.seq-active{box-shadow:0 0 10px #ffffff4d}.seq-current{border-color:#fff!important}.play-btn{margin-top:.5rem;padding:.8rem 2rem;border:none;border-radius:2rem;color:#fff;font-size:1.2rem;font-family:inherit;cursor:pointer;font-weight:700;transition:all .15s ease;align-self:center}.play-btn:active{transform:scale(.9)}.volume-control{display:flex;align-items:center;gap:.3rem}.volume-icon{font-size:1.2rem;width:1.5rem;text-align:center}.volume-slider{-webkit-appearance:none;appearance:none;width:90px;height:6px;border-radius:3px;background:#fff3;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#feca57;cursor:pointer;box-shadow:0 2px 6px #0000004d}.recorder-bar{display:flex;gap:.5rem;align-items:center}.record-btn,.playback-btn{padding:.4rem .8rem;border:none;border-radius:1rem;color:#fff;font-size:.8rem;font-family:inherit;cursor:pointer;font-weight:700;transition:all .15s ease}.playback-btn{background:#54a0ff}.record-btn:active,.playback-btn:active{transform:scale(.9)}.flute-body{width:100%;margin:auto;display:flex;align-items:center;position:relative}.flute-mouthpiece{width:50px;height:60px;background:linear-gradient(180deg,#d4a76a,#b8862d,#a67c42);border-radius:10px 0 0 10px;box-shadow:inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003,0 2px 6px #0000004d;position:relative}.flute-mouthpiece:after{content:"";position:absolute;top:12px;right:2px;width:14px;height:18px;border-radius:3px;background:#2c1810;box-shadow:inset 0 1px 3px #000c}.flute-tube{flex:1;height:60px;background:linear-gradient(180deg,#d4a76a,#c19552 30%,#a67c42 70%,#8b6530);position:relative;box-shadow:inset 0 3px 6px #ffffff40,inset 0 -3px 6px #0003,0 3px 8px #0000004d}.flute-shine{position:absolute;top:3px;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);border-radius:3px;pointer-events:none}.flute-holes{display:flex;align-items:center;justify-content:space-evenly;height:100%;padding:0 4px}.flute-hole{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:100%;border:none;background:transparent;cursor:pointer;gap:3px;padding:0}.flute-hole-circle{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#c9a96e,#8b6530);box-shadow:0 2px 4px #0006,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0000004d;transition:transform .1s,box-shadow .1s;border:2px solid #7A5A28;position:relative}.flute-hole-circle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#2c1810,#1a1a1a);box-shadow:inset 0 1px 2px #000c}.flute-hole-active .flute-hole-circle{transform:scale(1.15) translateY(-2px);box-shadow:0 4px 8px #00000080,inset 0 1px 2px #ffffff4d,0 0 12px #ffd70080;background:linear-gradient(145deg,#e0c080,#a67c42)}.flute-hole-label{font-size:.7rem;font-weight:700;color:#3e2712;text-shadow:0 1px 1px rgba(255,255,255,.2)}.flute-end{width:24px;height:60px;background:linear-gradient(180deg,#c9a96e,#a67c42,#8b6530);border-radius:0 6px 6px 0;box-shadow:inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003,0 2px 6px #0000004d}.violin-realistic{width:100%;max-width:420px;aspect-ratio:3 / 5;margin:0 auto;position:relative}.violin-body{width:100%;height:100%;position:relative;background:linear-gradient(135deg,#8b4513,sienna,peru 60%,#8b4513);border-radius:40% 40% 45% 45%/25% 25% 50% 50%;box-shadow:inset 0 0 30px #0006,0 4px 15px #00000080;overflow:hidden}.violin-bout-upper{position:absolute;top:8%;left:50%;transform:translate(-50%);width:75%;height:20%;border-radius:50%;background:linear-gradient(180deg,sienna,#8b4513);box-shadow:inset 0 2px 8px #0000004d}.violin-waist{position:absolute;top:28%;left:50%;transform:translate(-50%);width:55%;height:18%;background:linear-gradient(180deg,#6b3410,#8b4513);border-radius:50%/80%;box-shadow:inset 0 0 10px #0000004d}.violin-bout-lower{position:absolute;bottom:8%;left:50%;transform:translate(-50%);width:85%;height:28%;border-radius:50%;background:linear-gradient(180deg,#8b4513,sienna);box-shadow:inset 0 -2px 8px #0000004d}.violin-f-hole{position:absolute;top:35%;font-size:2.5rem;font-style:italic;color:#2c1810;opacity:.7;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.violin-f-hole.left{left:18%}.violin-f-hole.right{right:18%;transform:scaleX(-1)}.violin-tailpiece{position:absolute;bottom:6%;left:50%;transform:translate(-50%);width:12%;height:10%;background:#1a1a1a;border-radius:3px 3px 6px 6px}.violin-chinrest{position:absolute;bottom:2%;left:25%;width:18%;height:8%;background:#1a1a1a;border-radius:50%;opacity:.8}.violin-neck{position:absolute;top:-5%;left:50%;transform:translate(-50%);width:18%;height:22%;background:linear-gradient(90deg,#5c3317,#6b3410,#5c3317);border-radius:4px 4px 0 0}.violin-fingerboard{position:absolute;top:0;left:15%;width:70%;height:100%;background:#1a1a1a;border-radius:3px}.violin-position-dot{position:absolute;left:50%;transform:translate(-50%);width:5px;height:5px;background:gold;border-radius:50%;opacity:.5}.violin-scroll{position:absolute;top:-10%;left:50%;transform:translate(-50%);width:22%;height:7%;background:#5c3317;border-radius:50% 50% 0 0;box-shadow:0 -2px 5px #0000004d}.violin-bridge{position:absolute;top:52%;left:50%;transform:translate(-50%);width:30%;height:3%;background:#deb887;border-radius:2px;box-shadow:0 1px 3px #0000004d}.violin-touch-lanes{position:absolute;top:0;left:25%;width:50%;height:100%;display:flex;z-index:10}.violin-touch-lane{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:15%;cursor:pointer;transition:background .1s}.violin-touch-lane:active,.violin-lane-plucked{background:#ffd70026}.violin-string{position:absolute;top:0;height:100%;border-radius:1px;transition:opacity .1s}.violin-string-vibrate{animation:stringVibrate .08s ease-in-out 6}.violin-note-label{font-size:.85rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);z-index:2}@media(max-width:480px){.splash-title{font-size:2.5rem}.splash-emoji{font-size:3rem}.instrument-title{font-size:1.2rem}.nav-btn{width:clamp(2.6rem,9vw,3.2rem);height:clamp(2.6rem,9vw,3.2rem)}.nav-emoji{font-size:clamp(1.2rem,5vw,1.6rem)}.animal-emoji{font-size:2.2rem}}