[data-piano-skin=obsidian] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.32) 3%,transparent 13%,transparent 80%,rgba(120,128,140,.1) 94%,rgba(92,100,112,.22) 100%),linear-gradient(180deg,#8c94a061,#fcfcfd 3%,#fff 9%,#f8f9fb 17%,#eef0f3 56%,#dfe3e9 86%,#ced4dc,#b9c0ca);border-bottom:5px solid rgba(20,22,26,.45)!important;box-shadow:inset 1px 0 #fff,inset 0 -13px 20px #343a4433,0 10px 13px -6px #0000009e}[data-piano-skin=obsidian] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.2) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,#52525a,#3a3a40 3%,#2c2c31 9%,#1c1c20 26%,#101013 52%,#060608 82%,#020203);border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.38)!important;box-shadow:0 10px 12px -3px #000000e0,inset 0 1px #ffffff42,inset -7px 0 13px #000000d1}[data-piano-skin=rosegold] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,252,250,.92) 0%,rgba(255,248,244,.3) 3%,transparent 13%,transparent 80%,rgba(160,104,88,.1) 94%,rgba(132,82,68,.22) 100%),linear-gradient(180deg,#96645857,#fffbf8 3%,#fff8f4 9%,#fdf1ec 17%,#f6e6de 56%,#ead2c8 86%,#dcbcae,#c9a496);border-bottom:5px solid rgba(140,84,70,.4)!important;box-shadow:inset 1px 0 #fffcfaf2,inset 0 -13px 20px #985c4a33,0 10px 13px -6px #3c1c1685}[data-piano-skin=rosegold] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,198,178,.2) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.46) 100%),linear-gradient(180deg,#7d5147,#5e3a32 3%,#4c2e28 10%,#3a221d 28%,#2a1714 52%,#180c09 82%,#0e0605);border-left:1px solid rgba(255,190,170,.24)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(255,200,180,.42)!important;box-shadow:0 10px 12px -3px #1e0c08cc,inset 0 1px #ffc8b44d,inset -6px 0 13px #000000ad}[data-piano-skin=carbon] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.26) 3%,transparent 13%,transparent 80%,rgba(70,78,88,.12) 94%,rgba(54,60,70,.24) 100%),linear-gradient(180deg,#464e5866,#f4f6f8 3%,#edeff2 9%,#e4e7eb 17%,#d5d8dd 56%,#c2c6cd 86%,#adb2ba,#979da6);border-bottom:4px solid rgba(190,34,34,.55)!important;box-shadow:inset 1px 0 #ffffffe0,inset 0 -11px 18px #343a4438,0 9px 13px -6px #0000009e}[data-piano-skin=carbon] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,96,86,.16) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#43464c,#303338 3%,#26282c 10%,#1a1c20 28%,#101114 52%,#08090b 82%,#030304);border-left:1px solid rgba(255,255,255,.14)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(225,45,45,.45)!important;box-shadow:0 10px 12px -3px #000000d6,inset 0 1px #ffffff29,inset -6px 0 13px #000000c7}[data-piano-skin=arctic] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(248,252,255,.32) 3%,transparent 13%,transparent 80%,rgba(108,142,178,.1) 94%,rgba(84,118,155,.2) 100%),linear-gradient(180deg,#6c8eb252,#fff 3%,#fdfeff 9%,#f6fafd 17%,#eef4fa 56%,#dfe9f3 86%,#cddcea,#b8ccdf);border-bottom:4px solid rgba(90,125,165,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -11px 18px #6084ac2e,0 8px 11px -6px #3c5a7d6b}[data-piano-skin=arctic] .piano-key-idle-black{background:linear-gradient(90deg,rgba(206,234,255,.24) 0%,transparent 15%,transparent 64%,rgba(6,12,18,.46) 100%),linear-gradient(180deg,#63788c,#4a5c70 3%,#3a4a5c 10%,#2c3a4a 28%,#22303f 52%,#16202b 82%,#0c1219);border-left:1px solid rgba(200,230,255,.28)!important;border-right:1px solid rgba(8,14,20,.9)!important;border-top:1px solid rgba(210,235,255,.5)!important;box-shadow:0 9px 11px -3px #1e2d3c8f,inset 0 1px #d2ebff52,inset -6px 0 13px #080e149e}[data-piano-skin=sakura] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,250,251,.32) 3%,transparent 13%,transparent 80%,rgba(176,108,132,.1) 94%,rgba(150,84,106,.2) 100%),linear-gradient(180deg,#a868804d,#fffdfd 3%,#fffafb 9%,#fef2f5 17%,#fbe9ee 56%,#f4d8e0 86%,#e9c2ce,#d9a9b9);border-bottom:5px solid rgba(150,78,100,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -13px 20px #ac647c30,0 9px 13px -6px #783c506b}[data-piano-skin=sakura] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,198,216,.2) 0%,transparent 15%,transparent 64%,rgba(8,3,6,.48) 100%),linear-gradient(180deg,#7b4a5e,#5d3547 3%,#4c2a3a 10%,#3b1f2d 28%,#2c1622 52%,#1b0d15 82%,#0f060b);border-left:1px solid rgba(255,190,210,.24)!important;border-right:1px solid rgba(10,4,7,.92)!important;border-top:1px solid rgba(255,200,218,.45)!important;box-shadow:0 10px 12px -3px #280f1ab3,inset 0 1px #ffc8da4d,inset -6px 0 13px #0a0407a3}[data-piano-skin=abyss] .piano-key-idle-white{background:linear-gradient(90deg,rgba(246,255,253,.92) 0%,rgba(240,253,250,.3) 3%,transparent 13%,transparent 80%,rgba(20,118,108,.11) 94%,rgba(12,92,84,.22) 100%),linear-gradient(180deg,#10686057,#f8fefc 3%,#f2fbf9 9%,#e8f5f2 17%,#d9ece8 56%,#c5ded9 86%,#b0cec8,#98b9b3);border-bottom:4px solid rgba(15,118,110,.55)!important;box-shadow:inset 1px 0 #ffffffeb,inset 0 -12px 19px #0e665e38,0 10px 14px -6px #0014129e}[data-piano-skin=abyss] .piano-key-idle-black{background:linear-gradient(90deg,rgba(94,234,212,.18) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#256a68,#1a4e4d 3%,#133a3a 10%,#0e2c2c 28%,#0a2122 52%,#061415 82%,#020a0b);border-left:1px solid rgba(94,234,212,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(94,234,212,.5)!important;box-shadow:0 10px 12px -3px #000808d6,inset 0 1px #5eead452,inset -7px 0 13px #000000c7}[data-piano-skin=emerald] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,250,.92) 0%,rgba(253,252,245,.3) 3%,transparent 13%,transparent 80%,rgba(96,106,62,.11) 94%,rgba(72,82,46,.22) 100%),linear-gradient(180deg,#54603657,#fffef8 3%,#fdfcf5 9%,#f7f4e9 17%,#efeadb 56%,#e0d9c2 86%,#cfc5a7,#b9ae8c);border-bottom:5px solid rgba(20,65,45,.5)!important;box-shadow:inset 1px 0 #fffffcf2,inset 0 -13px 20px #505e3433,0 10px 13px -6px #04140c9e}[data-piano-skin=emerald] .piano-key-idle-black{background:linear-gradient(90deg,rgba(212,190,110,.18) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#2c6b50,#1f5039 3%,#173c2c 10%,#113023 28%,#0c2318 52%,#071710 82%,#020b07);border-left:1px solid rgba(212,190,110,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(212,190,110,.42)!important;box-shadow:0 10px 12px -3px #000a05d6,inset 0 1px #d4be6e47,inset -6px 0 13px #000000bd}[data-piano-skin=royal] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,253,246,.95) 0%,rgba(255,253,244,.3) 3%,transparent 13%,transparent 80%,rgba(120,94,50,.11) 94%,rgba(94,72,38,.22) 100%),linear-gradient(180deg,#68502c52,#fffef9 3%,#fffdf4 9%,#faf5e6 17%,#f3ead2 56%,#e6d9b8 86%,#d5c59c,#bfae83);border-bottom:5px solid rgba(90,55,130,.45)!important;box-shadow:inset 1px 0 #fffffafa,inset 0 -13px 20px #664e283d,0 10px 13px -6px #0c05169e}[data-piano-skin=royal] .piano-key-idle-black{background:linear-gradient(90deg,rgba(196,160,255,.2) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#574080,#402c60 3%,#33204e 10%,#27183d 28%,#1d1030 52%,#120a1e 82%,#07030f);border-left:1px solid rgba(196,160,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(212,175,55,.5)!important;box-shadow:0 10px 12px -3px #04000ad6,inset 0 1px #c4a0ff47,inset -6px 0 13px #000000bd}[data-piano-skin=copper] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,250,242,.92) 0%,rgba(251,243,230,.3) 3%,transparent 13%,transparent 80%,rgba(146,96,48,.11) 94%,rgba(118,74,36,.22) 100%),linear-gradient(180deg,#82542a52,#fff9f0 3%,#fbf3e6 9%,#f5ead6 17%,#eeddc4 56%,#e0cbab 86%,#cfb691,#b89d76);border-bottom:5px solid rgba(110,58,30,.5)!important;box-shadow:inset 1px 0 #fffaf2eb,inset 0 -13px 20px #8652263d,0 10px 13px -6px #2410059e}[data-piano-skin=copper] .piano-key-idle-black{background:linear-gradient(90deg,rgba(140,225,195,.16) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,#547066,#3f574d 3%,#33463e 10%,#273630 28%,#1c2a24 52%,#121c18 82%,#080f0c);border-left:1px solid rgba(140,225,195,.18)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(140,225,195,.35)!important;box-shadow:0 10px 12px -3px #140a03cc,inset 0 1px #8ce1c33d,inset -6px 0 13px #000000b3}[data-piano-skin=midnight] .piano-key-idle-white{background:linear-gradient(90deg,rgba(250,252,255,.95) 0%,rgba(248,250,255,.3) 3%,transparent 13%,transparent 80%,rgba(66,82,138,.11) 94%,rgba(48,62,112,.22) 100%),linear-gradient(180deg,#3a487e52,#fdfeff 3%,#f8faff 9%,#eff3fc 17%,#e2e8f6 56%,#d0d9ec 86%,#bcc7e0,#a4b2d0);border-bottom:4px solid rgba(50,62,110,.5)!important;box-shadow:inset 1px 0 #fff,inset 0 -12px 19px #40508833,0 10px 14px -6px #02040ca8}[data-piano-skin=midnight] .piano-key-idle-black{background:linear-gradient(90deg,rgba(165,185,255,.2) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#3a4680,#283163 3%,#1e2650 10%,#181e42 28%,#121732 52%,#0b0e20 82%,#04050d);border-left:1px solid rgba(165,185,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(165,185,255,.45)!important;box-shadow:0 10px 12px -3px #00020ae0,inset 0 1px #a5b9ff47,inset -7px 0 13px #000000c7}[data-piano-skin=vapor] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.32) 3%,transparent 13%,transparent 80%,rgba(128,104,188,.1) 94%,rgba(104,82,162,.2) 100%),linear-gradient(180deg,#7a62b647,#fff 3%,#fff 9%,#f8f5fd 17%,#f0edfa 56%,#e4dff5 86%,#d3cbee,#bfb4e2);border-bottom:4px solid rgba(120,95,180,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -11px 18px #7c64b82b,0 8px 11px -6px #5a468c61}[data-piano-skin=vapor] .piano-key-idle-black{background:linear-gradient(90deg,rgba(200,180,255,.24) 0%,transparent 15%,transparent 64%,rgba(14,8,26,.46) 100%),linear-gradient(180deg,#6e5f96,#574a78 3%,#4a3e6a 10%,#3b3057 28%,#2e2547 52%,#1f1834 82%,#140e24);border-left:1px solid rgba(200,180,255,.28)!important;border-right:1px solid rgba(16,10,30,.9)!important;border-top:1px solid rgba(167,243,208,.55)!important;box-shadow:0 9px 11px -3px #281c4685,inset 0 1px #c8b4ff52,inset -6px 0 13px #100a1e94}[data-piano-skin=desert] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,250,240,.88) 0%,rgba(248,236,216,.28) 3%,transparent 13%,transparent 80%,rgba(148,100,48,.11) 94%,rgba(122,78,36,.22) 100%),linear-gradient(180deg,#84582a52,#fdf4e6 3%,#f8ecd8 9%,#f3e4c9 17%,#eddabb 56%,#dfc7a1 86%,#cdb086,#b6976a);border-bottom:5px solid rgba(122,74,34,.5)!important;box-shadow:inset 1px 0 #fffaf0e0,inset 0 -13px 20px #8054263d,0 9px 13px -6px #4a2c1285}[data-piano-skin=desert] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,205,155,.18) 0%,transparent 15%,transparent 64%,rgba(8,4,2,.48) 100%),linear-gradient(180deg,#7a4d2a,#5e3a1f 3%,#4e2f1a 10%,#3e2513 28%,#2e1a0c 52%,#1e1008 82%,#120903);border-left:1px solid rgba(255,205,155,.22)!important;border-right:1px solid rgba(10,5,2,.92)!important;border-top:1px solid rgba(255,205,155,.4)!important;box-shadow:0 10px 12px -3px #2d1908c2,inset 0 1px #ffd2a545,inset -6px 0 13px #0a0502a3}[data-piano-skin=aurora] .piano-key-idle-white{background:linear-gradient(90deg,rgba(248,254,252,.92) 0%,rgba(244,251,249,.3) 3%,transparent 13%,transparent 80%,rgba(34,96,84,.11) 94%,rgba(20,76,66,.22) 100%),linear-gradient(180deg,#1c5a4e52,#fafefd 3%,#f4fbf9 9%,#eaf5f2 17%,#dcebe8 56%,#c8dcd8 86%,#b2cbc7,#9bb6b2);border-bottom:4px solid rgba(20,90,75,.5)!important;box-shadow:inset 1px 0 #ffffffeb,inset 0 -12px 19px #205a4e33,0 10px 14px -6px #0008069e}[data-piano-skin=aurora] .piano-key-idle-black{background:linear-gradient(90deg,rgba(110,231,183,.2) 0%,rgba(167,139,250,.1) 9%,transparent 18%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#24505e,#193a46 3%,#12232c 11%,#0e1b24 28%,#0a141c 52%,#050d13 82%,#020609);border-left:1px solid rgba(110,231,183,.2)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(110,231,183,.45)!important;box-shadow:0 10px 12px -3px #000406d6,inset 0 1px #6ee7b747,inset -7px 0 13px #000000c7}[data-piano-skin=mono] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,transparent 10%,transparent 86%,rgba(0,0,0,.09) 100%),linear-gradient(180deg,#0000001a,#fbfbfb 3%,#fafafa 12%,#f2f2f3 52%,#e4e4e6 84%,#d6d6d8 93%,#c4c4c7);border-bottom:3px solid rgba(0,0,0,.55)!important;box-shadow:inset 1px 0 #fff,inset -1px 0 #0000001a,0 7px 10px -5px #0000007a}[data-piano-skin=mono] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.1) 0%,transparent 14%,transparent 70%,rgba(0,0,0,.4) 100%),linear-gradient(180deg,#3d3d40,#2e2e30 4%,#232325 20%,#151517,#0a0a0b 84%,#050506);border-left:1px solid rgba(255,255,255,.12)!important;border-right:1px solid rgba(0,0,0,.9)!important;border-top:1px solid rgba(255,255,255,.22)!important;box-shadow:0 9px 11px -3px #0009,inset 0 1px #ffffff29}[data-piano-skin=mono] .piano-key-base-white:before,[data-piano-skin=mono] .piano-key-base-white:after,[data-piano-skin=mono] .piano-key-base-black:before{opacity:.08}[data-piano-skin=candy] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.38) 4%,transparent 15%,transparent 79%,rgba(214,96,148,.1) 94%,rgba(190,70,124,.22) 100%),linear-gradient(180deg,#c8588a42,#fff 3%,#fff 13%,#fef6fa 22%,#fdf0f6 58%,#f9e0ec 86%,#f3cfe1,#e8b4cd);border-bottom:5px solid rgba(210,70,135,.55)!important;box-shadow:inset 1px 0 #fff,inset 0 -11px 18px #d658922e,0 9px 13px -6px #96285a6b}[data-piano-skin=candy] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,220,150,.26) 0%,transparent 15%,transparent 64%,rgba(10,3,10,.48) 100%),linear-gradient(180deg,#6b4364,#4e2f4a 3%,#3c2438 10%,#301c2e 28%,#241224 52%,#170b17 82%,#0c050c);border-left:1px solid rgba(255,220,150,.3)!important;border-right:1px solid rgba(12,4,12,.92)!important;border-top:1px solid rgba(255,209,102,.7)!important;box-shadow:0 10px 12px -3px #3c1432a8,inset 0 1px #ffdc9661,inset -6px 0 13px #0c040ca3}[data-piano-skin=harp] .piano-key-idle-white{background:repeating-linear-gradient(90deg,rgba(168,122,42,.1) 0 1px,transparent 1px 9px),linear-gradient(180deg,#966e2452,#fffdf2 3%,#fdf7e6 9%,#f9f0d6 17%,#f3e6c4 56%,#e7d4a8 86%,#d8c08c,#c2a870);border-bottom:5px solid rgba(150,108,32,.5)!important;box-shadow:inset 1px 0 #fffbebeb,inset 0 -13px 20px #9e722438,0 10px 13px -6px #3c280a85}[data-piano-skin=harp] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,215,130,.22) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,#7d3339,#602730 3%,#4e1f24 10%,#3d171c 28%,#2c0f13 52%,#1c080c 82%,#100406);border-left:1px solid rgba(255,215,130,.24)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(255,215,130,.45)!important;box-shadow:0 10px 12px -3px #19080acc,inset 0 1px #ffd78252,inset -6px 0 13px #000000b8}[data-piano-skin=guitar] .piano-key-idle-white{background:repeating-linear-gradient(90deg,rgba(140,96,40,.26) 0 1px,rgba(140,96,40,.07) 1px 2px,transparent 2px 11px),linear-gradient(180deg,#603e1657,#fbeec9 3%,#f6e3b8 10%,#f2dba8 18%,#ecd096 56%,#ddb87a 86%,#ce9f5c,#b78544);border-bottom:5px solid rgba(96,58,20,.55)!important;box-shadow:inset 1px 0 #fff5dce0,inset 0 -13px 20px #68421642,0 9px 13px -6px #37200a94}[data-piano-skin=guitar] .piano-key-idle-black{background:repeating-linear-gradient(90deg,rgba(216,180,120,.16) 0 1px,transparent 1px 5px),linear-gradient(180deg,#6a4530,#4c2f20 3%,#3a2318 10%,#2e1b12 28%,#24130c 52%,#170b06 82%,#0c0503);border-left:1px solid rgba(216,180,120,.2)!important;border-right:1px solid rgba(0,0,0,.94)!important;border-top:1px solid rgba(232,234,240,.55)!important;box-shadow:0 10px 12px -3px #120904d1,inset 0 1px #e8eaf057,inset -6px 0 13px #000000bd}[data-piano-skin=oud] .piano-key-idle-white{background:linear-gradient(115deg,rgba(255,205,222,.22) 0%,transparent 24%,rgba(185,235,218,.2) 46%,transparent 64%,rgba(198,214,250,.22) 86%,transparent 100%),linear-gradient(180deg,#5c402052,#fffdf8 3%,#fdfbf4 9%,#f8f4e8 17%,#f1ebdc 56%,#e4dbc6 86%,#d3c8ab,#bcaf8c);border-bottom:5px solid rgba(90,60,30,.5)!important;box-shadow:inset 1px 0 #fff,inset 0 -13px 20px #70542a33,0 10px 13px -6px #281a0a94}[data-piano-skin=oud] .piano-key-idle-black{background:repeating-linear-gradient(45deg,rgba(216,185,130,.11) 0 1px,transparent 1px 5px),linear-gradient(180deg,#6d4c28,#4f371c 3%,#3e2a16 10%,#322110 28%,#26180b 52%,#180f06 82%,#0d0702);border-left:1px solid rgba(242,226,198,.22)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(242,226,198,.42)!important;box-shadow:0 10px 12px -3px #140b04cc,inset 0 1px #f2e2c64d,inset -6px 0 13px #000000b3}[data-piano-skin=strings] .piano-key-idle-white{background:linear-gradient(90deg,transparent 0%,transparent 44%,rgba(255,214,130,.18) 45.5%,rgba(255,226,156,.62) 47.5%,rgba(255,238,190,.92) 49%,#fff4cc 50%,rgba(255,238,190,.92) 51%,rgba(255,226,156,.62) 52.5%,rgba(255,214,130,.18) 54.5%,transparent 56%,transparent 100%),linear-gradient(180deg,#5a4028,#4a3320 4%,#3a2718 12%,#2e1d10 34%,#241608 58%,#1a1006 84%,#120a04);border-bottom:4px solid rgba(212,175,55,.35)!important;box-shadow:inset 1px 0 #ffe2aa17,inset 0 -15px 22px #00000085,0 10px 13px -6px #0000009e;text-shadow:none}[data-piano-skin=strings] .piano-key-idle-black{background:linear-gradient(90deg,transparent 0%,transparent 41%,rgba(255,110,110,.24) 43%,rgba(255,140,140,.7) 46%,rgba(255,178,178,.94) 48.5%,#ffe2e2 50%,rgba(255,178,178,.94) 51.5%,rgba(255,140,140,.7) 54%,rgba(255,110,110,.24) 57%,transparent 59%,transparent 100%),linear-gradient(180deg,#40200f,#2e1710 4%,#221208 12%,#1a0d06 34%,#130a04 58%,#0b0502 84%,#060301);border-left:1px solid rgba(255,213,128,.14)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,213,128,.45)!important;box-shadow:0 10px 12px -3px #000000d6,inset 0 1px #ffd5803d,inset -6px 0 13px #000000bd}[data-piano-skin=archana] .piano-key-idle-white{background:linear-gradient(90deg,transparent 0%,transparent 32%,rgba(212,175,55,.22) 34%,rgba(255,235,170,.85) 36%,rgba(212,175,55,.22) 38%,transparent 40%,transparent 46%,rgba(212,175,55,.35) 48%,#fff4cc 50%,rgba(212,175,55,.35) 52%,transparent 54%,transparent 60%,rgba(212,175,55,.22) 62%,rgba(255,235,170,.85) 64%,rgba(212,175,55,.22) 66%,transparent 68%,transparent 100%),linear-gradient(180deg,#4a3018,#ecd096 4%,#fffdf8 12%,#f5e4be 48%,#dfc596 82%,#be9c64);border-bottom:5px solid rgba(130,92,34,.55)!important;box-shadow:inset 1px 0 #fff8e1f2,inset 0 -13px 20px #70542a40,0 10px 13px -6px #281a0a94}[data-piano-skin=archana] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,215,0,.25) 0%,transparent 14%,transparent 84%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,#d4af37,#a68424 3%,#5e4616 10%,#3a2a0c 28%,#241906 58%,#100a02);border-left:1px solid rgba(242,226,198,.28)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(255,225,120,.65)!important;box-shadow:0 10px 12px -3px #140b04d9,inset 0 1px #ffeba061,inset -6px 0 13px #000000bd}[data-piano-skin=kalimba] .piano-key-idle-white{background:linear-gradient(90deg,rgba(180,80,50,.15) 0%,transparent 20%,rgba(255,255,255,.4) 44%,#ffffff 50%,rgba(255,255,255,.4) 56%,transparent 80%,rgba(120,40,20,.25) 100%),linear-gradient(180deg,#5c2012,#c46042 4%,#f0f0f4 12%,#dfe1e8 54%,#b4b8c6 86%,#8a8e9c);border-bottom:5px solid rgba(80,30,18,.6)!important;box-shadow:inset 1px 0 #fffffff2,inset 0 -13px 20px #3c140a38,0 10px 13px -6px #230c069e}[data-piano-skin=kalimba] .piano-key-idle-black{background:linear-gradient(90deg,rgba(220,120,80,.25) 0%,transparent 15%,transparent 82%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,#c06c4a,#8c4428 4%,#3a3838 12%,#222224 48%,#141416 82%,#08080a);border-left:1px solid rgba(220,120,80,.3)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(220,130,90,.6)!important;box-shadow:0 10px 12px -3px #190a06d9,inset 0 1px #f0966e52,inset -6px 0 13px #000000c7}[data-piano-skin=gamelan] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,235,170,.8) 0%,rgba(212,175,55,.45) 8%,transparent 22%,transparent 78%,rgba(140,100,25,.35) 94%,rgba(95,65,15,.55) 100%),linear-gradient(180deg,#6e4e16,#d4af37 4%,#f9e8a2 12%,#dfbe5a 50%,#b89230 84%,#806018);border-bottom:5px solid rgba(95,65,15,.7)!important;box-shadow:inset 1px 0 #fff5c8e6,inset 0 -13px 20px #6e4b144d,0 10px 13px -6px #2d1e08a6}[data-piano-skin=gamelan] .piano-key-idle-black{background:linear-gradient(90deg,rgba(80,180,160,.22) 0%,transparent 16%,transparent 80%,rgba(0,0,0,.65) 100%),linear-gradient(180deg,#3d685c,#2a4c42 4%,#4a2e18 12%,#2c1a0e 48%,#1a0f08 82%,#0a0503);border-left:1px solid rgba(80,180,160,.3)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(90,190,170,.55)!important;box-shadow:0 10px 12px -3px #0f1412e0,inset 0 1px #64c8b447,inset -6px 0 13px #000000c7}[data-piano-skin=saz] .piano-key-idle-white{background:repeating-linear-gradient(180deg,rgba(70,45,20,.25) 0 1px,transparent 1px 20px),linear-gradient(180deg,#5a3818,#e2c086 4%,#fff5dc 12%,#f0dcb0 52%,#dabf8c 84%,#ba9860);border-bottom:5px solid rgba(110,75,30,.55)!important;box-shadow:inset 1px 0 #fff8dceb,inset 0 -13px 20px #64441938,0 10px 13px -6px #2d1c0a94}[data-piano-skin=saz] .piano-key-idle-black{background:linear-gradient(135deg,transparent 40%,rgba(230,240,255,.22) 50%,transparent 60%),linear-gradient(180deg,#443c3a,#2e2624 4%,#201a18 12%,#14100e 48%,#0d0a09 82%,#050403);border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(255,255,255,.45)!important;box-shadow:0 10px 12px -3px #0c0a08e0,inset 0 1px #ffffff40,inset -6px 0 13px #000c}[data-piano-skin=ney] .piano-key-idle-white{background:radial-gradient(ellipse at 50% 65%,rgba(60,40,15,.25) 0%,rgba(60,40,15,.1) 32%,transparent 55%),linear-gradient(180deg,#5c3c16,#e0b468 4%,#fff2cf 12%,#ebd08d 50%,#d2b065 84%,#a68438);border-bottom:5px solid rgba(120,85,28,.55)!important;box-shadow:inset 1px 0 #fff6d7e6,inset 0 -13px 20px #694b163d,0 10px 13px -6px #2d1e0894}[data-piano-skin=ney] .piano-key-idle-black{background:repeating-linear-gradient(180deg,rgba(212,40,40,.4) 0 2px,rgba(212,175,55,.45) 2px 4px,transparent 4px 16px),linear-gradient(180deg,#542218,#3a1610 4%,#28140c 12%,#1b0c06 48%,#100603 82%,#060201);border-left:1px solid rgba(220,120,100,.25)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(240,140,120,.5)!important;box-shadow:0 10px 12px -3px #160804e0,inset 0 1px #f08c7840,inset -6px 0 13px #000c}[data-piano-skin=cymatics] .piano-key-idle-white{background:linear-gradient(90deg,transparent 0%,transparent 45%,rgba(212,175,55,.4) 48%,#ffe88a 50%,rgba(212,175,55,.4) 52%,transparent 55%,transparent 100%),linear-gradient(180deg,#303034,#1e1e22 4%,#141416 12%,#0e0e10 52%,#08080a 84%,#040405);border-bottom:5px solid rgba(212,175,55,.45)!important;box-shadow:inset 1px 0 #d4af3740,inset 0 -13px 20px #000000b3,0 10px 13px -6px #000000d9}[data-piano-skin=cymatics] .piano-key-idle-black{background:radial-gradient(circle at 50% 30%,rgba(212,175,55,.25) 0%,transparent 60%),linear-gradient(180deg,#443c2c,#2c2518 4%,#18150e 12%,#100e0a 48%,#080705 82%,#020201);border-left:1px solid rgba(212,175,55,.25)!important;border-right:1px solid rgba(0,0,0,.98)!important;border-top:2px solid rgba(212,175,55,.55)!important;box-shadow:0 10px 12px -3px #000000e6,inset 0 1px #d4af374d,inset -6px 0 13px #000000d9}[data-piano-skin=koto] .piano-key-idle-white{background:linear-gradient(90deg,transparent 0%,transparent 48%,rgba(255,255,255,.9) 50%,transparent 52%,transparent 100%),linear-gradient(180deg,#6a4c2e,#f0d5b0 4%,#fffaf2 12%,#f5e8d4 50%,#e2d0b6 84%,#c2ac8e);border-bottom:5px solid rgba(130,95,55,.55)!important;box-shadow:inset 1px 0 #fffcf5f2,inset 0 -13px 20px #6e502d33,0 10px 13px -6px #2d1e0f8c}[data-piano-skin=koto] .piano-key-idle-black{background:linear-gradient(135deg,rgba(212,175,55,.3) 0%,transparent 45%,rgba(212,175,55,.15) 100%),linear-gradient(180deg,#2e2622,#1e1814 4%,#14100c 12%,#0c0907 48%,#060403 82%,#020101);border-left:1px solid rgba(212,175,55,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(212,175,55,.5)!important;box-shadow:0 10px 12px -3px #0f0a06e0,inset 0 1px #d4af3740,inset -6px 0 13px #000c}[data-piano-skin=aftertouch] .piano-key-idle-white,[data-piano-skin=aftertouch] .premium-key-idle-ivory{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 194'%3E%3Cline x1='6' y1='71' x2='50' y2='71' stroke='%2338bdf8' stroke-opacity='0.35' stroke-dasharray='3,2'/%3E%3Cpolygon points='28,34 33,40 23,40' fill='%2338bdf8' fill-opacity='0.85'/%3E%3Cpath d='M16,49 Q22,43 28,49 T40,49' fill='none' stroke='%2338bdf8' stroke-width='1.5' stroke-linecap='round' stroke-opacity='0.8'/%3E%3Ctext x='28' y='63' font-family='system-ui,-apple-system,sans-serif' font-size='6.5' font-weight='800' fill='%2338bdf8' fill-opacity='0.8' text-anchor='middle' letter-spacing='0.5'%3EVIBRATO%3C/text%3E%3Cline x1='6' y1='141' x2='50' y2='141' stroke='%23fb923c' stroke-opacity='0.35' stroke-dasharray='3,2'/%3E%3Cpath d='M10,106 L16,102 L16,110 Z M46,106 L40,102 L40,110 Z M16,106 L40,106' fill='%23d4af37' stroke='%23d4af37' stroke-width='1.2' fill-opacity='0.85' stroke-opacity='0.85'/%3E%3Ccircle cx='28' cy='106' r='2.5' fill='none' stroke='%23d4af37' stroke-width='1.2' stroke-opacity='0.85'/%3E%3Ctext x='28' y='96' font-family='system-ui,-apple-system,sans-serif' font-size='6' font-weight='800' fill='%23d4af37' fill-opacity='0.85' text-anchor='middle' letter-spacing='0.5'%3EPITCH BEND%3C/text%3E%3Cpath d='M16,155 H28 Q36,155 40,165' fill='none' stroke='%23fb923c' stroke-width='1.5' stroke-linecap='round' stroke-opacity='0.8'/%3E%3Cpolygon points='28,175 33,169 23,169' fill='%23fb923c' fill-opacity='0.85'/%3E%3Ctext x='28' y='185' font-family='system-ui,-apple-system,sans-serif' font-size='6.5' font-weight='800' fill='%23fb923c' fill-opacity='0.8' text-anchor='middle' letter-spacing='0.5'%3EFILTER%3C/text%3E%3C/svg%3E"),linear-gradient(180deg,#ffffff38,#ffffff1f 4%,#ffffff0f 18%,#c8e6ff14 56%,#a0c8f024 86%,#78a0c838);border-left:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(56,189,248,.25);border-bottom:4px solid rgba(56,189,248,.6)!important;box-shadow:inset 1px 0 #ffffffb3,inset 0 -12px 18px #0f172a4d,0 8px 12px -4px #0000008c}[data-piano-skin=aftertouch] .piano-key-idle-black,[data-piano-skin=aftertouch] .premium-key-idle-gold{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 126'%3E%3Cline x1='4' y1='48' x2='32' y2='48' stroke='%2338bdf8' stroke-opacity='0.35' stroke-dasharray='2,2'/%3E%3Cpolygon points='18,22 22,27 14,27' fill='%2338bdf8' fill-opacity='0.85'/%3E%3Ctext x='18' y='38' font-family='system-ui,-apple-system,sans-serif' font-size='5.5' font-weight='800' fill='%2338bdf8' fill-opacity='0.85' text-anchor='middle' letter-spacing='0.5'%3EVIB%3C/text%3E%3Cline x1='4' y1='92' x2='32' y2='92' stroke='%23fb923c' stroke-opacity='0.35' stroke-dasharray='2,2'/%3E%3Cpath d='M6,70 L10,67 L10,73 Z M30,70 L26,67 L26,73 Z M10,70 L26,70' fill='%23d4af37' stroke='%23d4af37' stroke-width='1' fill-opacity='0.85' stroke-opacity='0.85'/%3E%3Ctext x='18' y='63' font-family='system-ui,-apple-system,sans-serif' font-size='5' font-weight='800' fill='%23d4af37' fill-opacity='0.85' text-anchor='middle' letter-spacing='0.5'%3EPITCH%3C/text%3E%3Cpolygon points='18,105 22,100 14,100' fill='%23fb923c' fill-opacity='0.85'/%3E%3Ctext x='18' y='116' font-family='system-ui,-apple-system,sans-serif' font-size='5.5' font-weight='800' fill='%23fb923c' fill-opacity='0.85' text-anchor='middle' letter-spacing='0.5'%3EFLT%3C/text%3E%3C/svg%3E"),linear-gradient(180deg,#1e293bbf,#141e2da6 15%,#0f172a99 52%,#020617d9);border-left:1px solid rgba(56,189,248,.35)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.4)!important;border-bottom:2px solid rgba(56,189,248,.5)!important;box-shadow:0 10px 12px -3px #000000e0,inset 0 1px #ffffff4d,inset -6px 0 13px #000000bf}[data-piano-skin=aftertouch] .piano-keybed-shell{background:linear-gradient(180deg,rgba(56,189,248,.08) 0px,rgba(56,189,248,.08) 70px,rgba(56,189,248,.4) 71px,transparent 72px,transparent 140px,rgba(251,146,60,.4) 141px,rgba(244,63,94,.08) 142px,rgba(244,63,94,.08) 194px),linear-gradient(180deg,#090e17,#03060a);box-shadow:inset 0 1px #38bdf840}[data-piano-skin=aftertouch].piano-keyboard-stage{background:radial-gradient(ellipse at 50% -20%,rgba(56,189,248,.18),transparent 55%),linear-gradient(180deg,#070c16,#020408)}[data-piano-skin]:not([data-piano-skin=classic]) .piano-key-freq-layer{opacity:0!important}[data-piano-skin=classic] .piano-key-idle-white,[data-piano-skin=midnight] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.2) 4%,transparent 17%,transparent 78%,rgba(99,83,50,.08) 94%,rgba(78,62,35,.18) 100%),linear-gradient(180deg,#fffffd,#fbfaf5 4%,#f7f4ec 13%,#f1ede1 48%,#e8e0cf 78%,#d8cdb7 93%,#bcae93);border-left:1px solid rgba(255,255,255,.78);border-right:1px solid rgba(94,78,48,.18);border-bottom:4px solid rgba(93,76,44,.42);box-shadow:inset 1px 0 #fffffff0,inset 0 -14px 21px #69583429,0 11px 15px -7px #0a080575}[data-piano-skin=classic] .piano-key-idle-black,[data-piano-skin=midnight] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 10%,transparent 28%,transparent 70%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,#4b4c50,#292a2d 5%,#151619 18%,#090a0c 55%,#030405 84%,#000);border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.98)!important;border-top:1px solid rgba(255,255,255,.34)!important;border-bottom:1px solid rgba(0,0,0,1)!important;box-shadow:0 12px 15px -3px #000000db,inset 0 1px #ffffff38,inset -8px 0 15px #000000bd}[data-piano-skin=classic] .piano-key-pressed-white,[data-piano-skin=midnight] .piano-key-pressed-white{border-bottom:4px solid rgba(93,76,44,.42);box-shadow:inset 1px 0 #ffffffdb,inset 0 10px 18px rgba(76,61,36,var(--key-press-shade,.3)),0 3px 5px -3px #0a080585}[data-piano-skin=classic] .piano-key-pressed-black,[data-piano-skin=midnight] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.98)!important;border-top:1px solid rgba(255,255,255,.34)!important;border-bottom:1px solid rgba(0,0,0,1)!important;box-shadow:0 5px 8px #000000eb,inset 0 1px #ffffff1f,inset 0 12px 18px rgba(0,0,0,var(--key-press-shade,.66))}[data-piano-skin=classic].piano-keyboard-stage,[data-piano-skin=midnight].piano-keyboard-stage{background:radial-gradient(ellipse at 50% -18%,rgba(255,239,189,.16),transparent 44%),linear-gradient(120deg,#17120d,#050505 42%,#15100a 76%,#020202)}[data-piano-skin=classic] .piano-keybed-shell,[data-piano-skin=midnight] .piano-keybed-shell{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 18%),linear-gradient(180deg,#15120f,#090807);box-shadow:inset 0 1px #ffffff1a}[data-piano-skin=moog] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.22) 3%,transparent 13%,transparent 80%,rgba(74,66,44,.1) 94%,rgba(52,46,30,.22) 100%),linear-gradient(180deg,#3e362257,#faf8f2 3%,#f4f1ea 10%,#efece2 18%,#e9e5d8 56%,#dcd7c7 86%,#cfc9b8,#b9b2a0);border-bottom:4px solid rgba(20,16,8,.45)!important;box-shadow:inset 1px 0 #ffffffe0,inset -1px 0 #00000024,0 8px 11px -6px #00000094}[data-piano-skin=moog] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.16) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,#55555c,#46464c 3%,#3c3c42 10%,#2a2a2f 28%,#17171a 52%,#0f0f11 82%,#08080a);border-left:1px solid rgba(255,255,255,.16)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.24)!important;box-shadow:0 10px 12px -3px #000000c7,inset 0 1px #ffffff24,inset -6px 0 12px #000000b3}[data-piano-skin=rhodes] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,252,240,.28) 3%,transparent 13%,transparent 80%,rgba(116,94,46,.11) 94%,rgba(92,74,36,.22) 100%),linear-gradient(180deg,#64522852,#fdfaef 3%,#f9f4e2 9%,#f5efd8 17%,#efe6cc 56%,#e3d7b6 86%,#d8cba6,#c1b189);border-bottom:5px solid rgba(90,74,40,.4)!important;box-shadow:inset 1px 0 #ffffffeb,inset 0 -13px 20px #78603033,0 10px 13px -6px #00000070}[data-piano-skin=rhodes] .piano-key-idle-black{background:linear-gradient(90deg,rgba(160,220,210,.18) 0%,transparent 15%,transparent 64%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#3e504e,#2f3c3b 3%,#26302f 10%,#1a2222 28%,#101514 52%,#090d0d 82%,#040606);border-left:1px solid rgba(160,220,210,.16)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(160,220,210,.3)!important;box-shadow:0 10px 12px -3px #000000d4,inset 0 1px #aae1d733,inset -8px 0 14px #000c}[data-piano-skin=harpsi] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.22) 0%,transparent 14%,transparent 76%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,#4c4c54,#3e3e45 3%,#34343a 11%,#26262b 30%,#1b1b1f 54%,#101012 84%,#080809);border-bottom:5px solid rgba(0,0,0,.85)!important;box-shadow:inset 1px 0 #ffffff2e,inset 0 -15px 23px #0000009e,0 10px 15px -6px #0000009e;text-shadow:none}[data-piano-skin=harpsi] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,252,242,.3) 4%,transparent 15%,transparent 78%,rgba(120,96,48,.14) 94%,rgba(96,76,36,.26) 100%),linear-gradient(180deg,#fffdf6,#fefaf0 4%,#fbf6e8 12%,#f4ebd6 30%,#ecdfc2 56%,#dbcaa4 86%,#c6b48c);border-left:1px solid rgba(255,255,255,.85)!important;border-right:1px solid rgba(110,88,44,.55)!important;border-top:1px solid rgba(255,255,255,.95)!important;box-shadow:0 10px 12px -3px #00000094,inset 0 1px #fffffff2,inset 0 -8px 14px #785f2d66}[data-piano-skin=harpsi] .piano-key-pressed-white{box-shadow:inset 1px 0 #ffffff29,inset 0 -10px 16px #0000008c,0 3px 5px -3px #00000080;border-bottom:5px solid rgba(0,0,0,.6)!important}[data-piano-skin=ivory] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,transparent 11%,transparent 85%,rgba(0,0,0,.055) 100%),linear-gradient(180deg,#0000000e,#fff 3%,#fff 14%,#fafafb 52%,#f0f0f3 82%,#e2e3e7 93%,#d2d4d9);border-bottom:3px solid rgba(0,0,0,.14)!important;box-shadow:inset 1px 0 #fff,inset -1px 0 #0000000f,0 6px 9px -5px #00000045}[data-piano-skin=ivory] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.12) 0%,transparent 15%,transparent 70%,rgba(0,0,0,.36) 100%),linear-gradient(180deg,#3d4653,#333c47 4%,#2c333d 14%,#202730 34%,#171c24 58%,#0f1319 84%,#0b0e13);border-left:1px solid rgba(255,255,255,.1)!important;border-right:1px solid rgba(0,0,0,.85)!important;border-top:1px solid rgba(255,255,255,.18)!important;box-shadow:0 9px 11px -3px #00000054,inset 0 1px #ffffff1f}[data-piano-skin=neon] .piano-key-idle-white{background:linear-gradient(90deg,rgba(150,220,255,.2) 0%,transparent 14%,transparent 74%,rgba(6,10,26,.4) 100%),linear-gradient(180deg,#6a7cae,#59699c 4%,#4a5a8e 14%,#3d4c80 34%,#354272 58%,#2d3763 84%,#262f56);border-bottom:4px solid rgba(34,211,238,.75)!important;box-shadow:inset 1px 0 #78aaff24,inset 0 -11px 19px #22d3ee30,0 10px 15px -6px #000000b8;text-shadow:none}[data-piano-skin=neon] .piano-key-idle-black{background:linear-gradient(90deg,rgba(232,121,249,.26) 0%,transparent 15%,transparent 66%,rgba(4,2,14,.46) 100%),linear-gradient(180deg,#5c4784,#4b3970 4%,#40305f 14%,#342650 34%,#2a1e4a 58%,#20163c 84%,#181030);border-left:1px solid rgba(232,121,249,.25)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(232,121,249,.6)!important;box-shadow:0 10px 12px -3px #000000d4,inset 0 1px #e879f94d,inset 0 -8px 14px #4c1d9559}[data-piano-skin=neon] .piano-key-pressed-white{box-shadow:inset 1px 0 #78aaff26,inset 0 -7px 14px #22d3ee40,0 3px 6px -4px #000c;border-bottom:4px solid rgba(34,211,238,.9)!important}[data-piano-skin=neon] .piano-key-pressed-black{border-left:1px solid rgba(232,121,249,.25)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(232,121,249,.6)!important;box-shadow:0 5px 8px #000000eb,inset 0 1px #e879f966,inset 0 -6px 12px #4c1d9580}[data-piano-skin=neon] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 35%,rgba(34,211,238,.6),rgba(34,211,238,.12) 55%,transparent 85%)}[data-piano-skin=neon] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 35%,rgba(232,121,249,.7),rgba(232,121,249,.15) 55%,transparent 85%)}[data-piano-skin=wood] .piano-key-idle-white{background:repeating-linear-gradient(90deg,rgba(140,96,36,.09) 0 1px,transparent 1px 13px),linear-gradient(180deg,#6c481a52,#fbf1d8 3%,#f2e2bd 10%,#ecd9b0 18%,#e6d0a2 56%,#d8bc88 86%,#c8a873,#b08e58);border-bottom:5px solid rgba(105,70,25,.5)!important;box-shadow:inset 1px 0 #fffaebd6,inset 0 -13px 20px #78521e42,0 9px 13px -6px #462d0f85}[data-piano-skin=wood] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,220,160,.16) 0%,transparent 15%,transparent 64%,rgba(6,3,1,.48) 100%),linear-gradient(180deg,#7a4e1d,#5e3a14 3%,#4d3011 10%,#3b2410 28%,#2b1a08 52%,#1c1006 82%,#120a03);border-left:1px solid rgba(255,220,160,.2)!important;border-right:1px solid rgba(0,0,0,.9)!important;border-top:1px solid rgba(255,220,160,.35)!important;box-shadow:0 10px 12px -3px #281806ba,inset 0 1px #ffe2aa40,inset -6px 0 12px #0009}[data-piano-skin=organ] .piano-key-base-white{border-radius:0 0 4px 4px}[data-piano-skin=organ] .piano-key-base-black{border-radius:0 0 3px 3px}[data-piano-skin=organ] .piano-key-idle-white{background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,253,245,.26) 3%,transparent 12%,transparent 82%,rgba(96,72,28,.1) 95%,rgba(72,54,22,.2) 100%),linear-gradient(180deg,#543e1847,#fcf8ea 2.5%,#f6f1de 8%,#f2ecd4 16%,#ece2c4 62%,#ddd0ac 88%,#d3c49c 95%,#c0b085);border-bottom:2px solid rgba(60,44,18,.5)!important;box-shadow:inset 1px 0 #ffffffeb,inset 0 -5px 9px #644c1e2b,0 7px 10px -5px #00000085}[data-piano-skin=organ] .piano-key-idle-black{background:linear-gradient(90deg,rgba(255,255,255,.22) 0%,transparent 14%,transparent 66%,rgba(0,0,0,.46) 100%),linear-gradient(180deg,#48484e,#38383d 3%,#2e2e32 10%,#202024 28%,#121215 52%,#0a0a0c 82%,#030304);border-left:1px solid rgba(255,255,255,.18)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.35)!important;box-shadow:0 9px 11px -3px #000000c7,inset 0 1px #fff3,inset -6px 0 10px #000000b3}[data-piano-skin=moog] .piano-key-pressed-white{border-bottom:4px solid rgba(20,16,8,.45)!important;box-shadow:inset 1px 0 #ffffffd9,inset 0 -4px 8px #5a461e3d,0 2px 4px -2px #0000008c}[data-piano-skin=moog] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.16)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.24)!important;box-shadow:0 4px 7px #000000e6,inset 0 1px #ffffff14,inset -6px 0 12px #000000c7}[data-piano-skin=rhodes] .piano-key-pressed-white{border-bottom:5px solid rgba(90,74,40,.4)!important;box-shadow:inset 1px 0 #ffffffe6,inset 0 -12px 18px #78603042,0 3px 5px -3px #00000073}[data-piano-skin=rhodes] .piano-key-pressed-black{border-left:1px solid rgba(160,220,210,.16)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(160,220,210,.3)!important;box-shadow:0 5px 8px #000000eb,inset 0 1px #aae1d71f,inset -8px 0 14px #000000d9}[data-piano-skin=harpsi] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.85)!important;border-right:1px solid rgba(110,88,44,.55)!important;border-top:1px solid rgba(255,255,255,.95)!important;box-shadow:0 4px 7px #000000b3,inset 0 1px #ffffffbf,inset 0 -6px 12px #785f2d80}[data-piano-skin=ivory] .piano-key-pressed-white{border-bottom:3px solid rgba(0,0,0,.14)!important;box-shadow:inset 1px 0 #fff,inset -1px 0 #0000000f,0 2px 3px -2px #0000004d}[data-piano-skin=ivory] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.1)!important;border-right:1px solid rgba(0,0,0,.85)!important;border-top:1px solid rgba(255,255,255,.18)!important;box-shadow:0 3px 5px #00000073,inset 0 1px #ffffff12}[data-piano-skin=wood] .piano-key-pressed-white{border-bottom:5px solid rgba(105,70,25,.5)!important;box-shadow:inset 1px 0 #fffaebcc,inset 0 -12px 18px #78521e4d,0 3px 5px -3px #462d0f8c}[data-piano-skin=wood] .piano-key-pressed-black{border-left:1px solid rgba(255,220,160,.2)!important;border-right:1px solid rgba(0,0,0,.9)!important;border-top:1px solid rgba(255,220,160,.35)!important;box-shadow:0 4px 7px #281806d9,inset 0 1px #ffe2aa26,inset -6px 0 12px #000000b3}[data-piano-skin=organ] .piano-key-pressed-white{border-bottom:2px solid rgba(60,44,18,.5)!important;box-shadow:inset 1px 0 #ffffffe6,inset 0 -4px 8px #644c1e3d,0 2px 4px -2px #0000008c}[data-piano-skin=organ] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.18)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.35)!important;box-shadow:0 3px 6px #000000e6,inset 0 1px #ffffff1f,inset -6px 0 10px #000000c7}[data-piano-skin=obsidian] .piano-key-pressed-white{border-bottom:5px solid rgba(20,22,26,.45)!important;box-shadow:inset 1px 0 #fff,inset 0 -12px 18px #3c424a38,0 3px 5px -3px #000000a6}[data-piano-skin=obsidian] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.38)!important;box-shadow:0 5px 8px #000000f2,inset 0 1px #ffffff24,inset -7px 0 12px #000000d9}[data-piano-skin=rosegold] .piano-key-pressed-white{border-bottom:5px solid rgba(140,84,70,.4)!important;box-shadow:inset 1px 0 #fffcfaf2,inset 0 -12px 18px #a0604c47,0 3px 5px -3px #3c1c168c}[data-piano-skin=rosegold] .piano-key-pressed-black{border-left:1px solid rgba(255,190,170,.24)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(255,200,180,.42)!important;box-shadow:0 4px 7px #1e0c08e6,inset 0 1px #ffc8b429,inset -6px 0 12px #000000b8}[data-piano-skin=carbon] .piano-key-pressed-white{border-bottom:4px solid rgba(190,34,34,.55)!important;box-shadow:inset 1px 0 #ffffffd9,inset 0 -10px 16px #3c424c42,0 3px 5px -3px #000000a6}[data-piano-skin=carbon] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.14)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(225,45,45,.45)!important;box-shadow:0 4px 7px #000000eb,inset 0 1px #ffffff14,inset -6px 0 12px #000000d1}[data-piano-skin=arctic] .piano-key-pressed-white{border-bottom:4px solid rgba(90,125,165,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -10px 16px #6e91b93d,0 3px 4px -3px #3c5a7d73}[data-piano-skin=arctic] .piano-key-pressed-black{border-left:1px solid rgba(200,230,255,.28)!important;border-right:1px solid rgba(8,14,20,.9)!important;border-top:1px solid rgba(210,235,255,.5)!important;box-shadow:0 4px 7px #1e2d3ca6,inset 0 1px #d2ebff2e,inset -6px 0 12px #080e14ad}[data-piano-skin=sakura] .piano-key-pressed-white{border-bottom:5px solid rgba(150,78,100,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -12px 18px #b4698240,0 3px 5px -3px #783c5073}[data-piano-skin=sakura] .piano-key-pressed-black{border-left:1px solid rgba(255,190,210,.24)!important;border-right:1px solid rgba(10,4,7,.92)!important;border-top:1px solid rgba(255,200,218,.45)!important;box-shadow:0 4px 7px #280f1acc,inset 0 1px #ffc8da29,inset -6px 0 12px #0a0407b3}[data-piano-skin=abyss] .piano-key-pressed-white{border-bottom:4px solid rgba(15,118,110,.55)!important;box-shadow:inset 1px 0 #ffffffe6,inset 0 -11px 17px #106e6447,0 3px 5px -3px #001412a6}[data-piano-skin=abyss] .piano-key-pressed-black{border-left:1px solid rgba(94,234,212,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(94,234,212,.5)!important;box-shadow:0 5px 8px #000808eb,inset 0 1px #5eead42e,inset -7px 0 12px #000000d1}[data-piano-skin=emerald] .piano-key-pressed-white{border-bottom:5px solid rgba(20,65,45,.5)!important;box-shadow:inset 1px 0 #fffffcf2,inset 0 -12px 18px #55643742,0 3px 5px -3px #04140ca6}[data-piano-skin=emerald] .piano-key-pressed-black{border-left:1px solid rgba(212,190,110,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(212,190,110,.42)!important;box-shadow:0 4px 7px #000a05eb,inset 0 1px #d4be6e26,inset -6px 0 12px #000000c7}[data-piano-skin=royal] .piano-key-pressed-white{border-bottom:5px solid rgba(90,55,130,.45)!important;box-shadow:inset 1px 0 #fffffafa,inset 0 -12px 18px #6a522b4d,0 3px 5px -3px #0c0516a6}[data-piano-skin=royal] .piano-key-pressed-black{border-left:1px solid rgba(196,160,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(212,175,55,.5)!important;box-shadow:0 4px 7px #04000aeb,inset 0 1px #c4a0ff26,inset -6px 0 12px #000000c7}[data-piano-skin=copper] .piano-key-pressed-white{border-bottom:5px solid rgba(110,58,30,.5)!important;box-shadow:inset 1px 0 #fffaf2eb,inset 0 -12px 18px #8c55284d,0 3px 5px -3px #241005a6}[data-piano-skin=copper] .piano-key-pressed-black{border-left:1px solid rgba(140,225,195,.18)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(140,225,195,.35)!important;box-shadow:0 4px 7px #140a03e6,inset 0 1px #8ce1c31f,inset -6px 0 12px #000000bd}[data-piano-skin=midnight] .piano-key-pressed-white{border-bottom:4px solid rgba(50,62,110,.5)!important;box-shadow:inset 1px 0 #fff,inset 0 -11px 17px #46558c42,0 3px 5px -3px #02040cb3}[data-piano-skin=midnight] .piano-key-pressed-black{border-left:1px solid rgba(165,185,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(165,185,255,.45)!important;box-shadow:0 5px 8px #00020aeb,inset 0 1px #a5b9ff26,inset -7px 0 12px #000000d1}[data-piano-skin=vapor] .piano-key-pressed-white{border-bottom:4px solid rgba(120,95,180,.35)!important;box-shadow:inset 1px 0 #fff,inset 0 -10px 16px #8269be38,0 3px 4px -3px #5a468c66}[data-piano-skin=vapor] .piano-key-pressed-black{border-left:1px solid rgba(200,180,255,.28)!important;border-right:1px solid rgba(16,10,30,.9)!important;border-top:1px solid rgba(167,243,208,.55)!important;box-shadow:0 4px 7px #281c4699,inset 0 1px #c8b4ff2e,inset -6px 0 12px #100a1ea3}[data-piano-skin=desert] .piano-key-pressed-white{border-bottom:5px solid rgba(122,74,34,.5)!important;box-shadow:inset 1px 0 #fffaf0d9,inset 0 -12px 18px #875a2a4d,0 3px 5px -3px #4a2c128c}[data-piano-skin=desert] .piano-key-pressed-black{border-left:1px solid rgba(255,205,155,.22)!important;border-right:1px solid rgba(10,5,2,.92)!important;border-top:1px solid rgba(255,205,155,.4)!important;box-shadow:0 4px 7px #2d1908d9,inset 0 1px #ffd2a524,inset -6px 0 12px #0a0502b3}[data-piano-skin=aurora] .piano-key-pressed-white{border-bottom:4px solid rgba(20,90,75,.5)!important;box-shadow:inset 1px 0 #ffffffeb,inset 0 -11px 17px #235f5242,0 3px 5px -3px #000806a6}[data-piano-skin=aurora] .piano-key-pressed-black{border-left:1px solid rgba(110,231,183,.2)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(110,231,183,.45)!important;box-shadow:0 5px 8px #000406eb,inset 0 1px #6ee7b726,inset -7px 0 12px #000000d1}[data-piano-skin=mono] .piano-key-pressed-white{border-bottom:3px solid rgba(0,0,0,.55)!important;box-shadow:inset 1px 0 #fff,inset -1px 0 #0000001a,0 2px 4px -2px #00000080}[data-piano-skin=mono] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.12)!important;border-right:1px solid rgba(0,0,0,.9)!important;border-top:1px solid rgba(255,255,255,.22)!important;box-shadow:0 4px 6px #000000b3,inset 0 1px #ffffff14}[data-piano-skin=candy] .piano-key-pressed-white{border-bottom:5px solid rgba(210,70,135,.55)!important;box-shadow:inset 1px 0 #fff,inset 0 -10px 16px #dc5a963d,0 3px 5px -3px #96285a80}[data-piano-skin=candy] .piano-key-pressed-black{border-left:1px solid rgba(255,220,150,.3)!important;border-right:1px solid rgba(12,4,12,.92)!important;border-top:1px solid rgba(255,209,102,.7)!important;box-shadow:0 4px 7px #3c1432bf,inset 0 1px #ffdc964d,inset -6px 0 12px #0c040cad}[data-piano-skin=harp] .piano-key-pressed-white{border-bottom:5px solid rgba(150,108,32,.5)!important;box-shadow:inset 1px 0 #fffbebe6,inset 0 -12px 18px #a5782847,0 3px 5px -3px #3c280a8c}[data-piano-skin=harp] .piano-key-pressed-black{border-left:1px solid rgba(255,215,130,.24)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(255,215,130,.45)!important;box-shadow:0 4px 7px #19080ae6,inset 0 1px #ffd7822e,inset -6px 0 12px #000000c2}[data-piano-skin=guitar] .piano-key-pressed-white{border-bottom:5px solid rgba(96,58,20,.55)!important;box-shadow:inset 1px 0 #fff5dcd9,inset 0 -12px 18px #6e461952,0 3px 5px -3px #37200a99}[data-piano-skin=guitar] .piano-key-pressed-black{border-left:1px solid rgba(216,180,120,.2)!important;border-right:1px solid rgba(0,0,0,.94)!important;border-top:1px solid rgba(232,234,240,.55)!important;box-shadow:0 4px 7px #120904e6,inset 0 1px #e8eaf02e,inset -6px 0 12px #000000c7}[data-piano-skin=oud] .piano-key-pressed-white{border-bottom:5px solid rgba(90,60,30,.5)!important;box-shadow:inset 1px 0 #fff,inset 0 -12px 18px #785a2d42,0 3px 5px -3px #281a0a99}[data-piano-skin=oud] .piano-key-pressed-black{border-left:1px solid rgba(242,226,198,.22)!important;border-right:1px solid rgba(0,0,0,.92)!important;border-top:1px solid rgba(242,226,198,.42)!important;box-shadow:0 4px 7px #140b04e6,inset 0 1px #f2e2c629,inset -6px 0 12px #000000bd}[data-piano-skin=strings] .piano-key-pressed-white{border-bottom:4px solid rgba(255,226,150,.7)!important;box-shadow:inset 1px 0 #ffe2aa12,inset 0 -14px 20px #00000094,0 3px 5px -3px #000000a6}[data-piano-skin=strings] .piano-key-pressed-black{border-left:1px solid rgba(255,213,128,.14)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,213,128,.45)!important;box-shadow:0 4px 7px #000000eb,inset 0 1px #ffd58024,inset -6px 0 12px #000000c7}[data-piano-skin=strings] .piano-key-pressed-overlay-white{background:linear-gradient(90deg,transparent 28%,rgba(255,236,170,.22) 40%,rgba(255,247,214,.95) 50%,rgba(255,236,170,.22) 60%,transparent 72%)}[data-piano-skin=strings] .piano-key-pressed-overlay-black{background:linear-gradient(90deg,transparent 24%,rgba(255,150,150,.28) 38%,rgba(255,214,214,.95) 50%,rgba(255,150,150,.28) 62%,transparent 76%)}@keyframes string-pluck{0%{opacity:1}8%{opacity:.3}16%{opacity:.95}26%{opacity:.42}36%{opacity:.9}48%{opacity:.52}62%{opacity:.85}78%{opacity:.65}to{opacity:var(--key-press-glow, .8)}}[data-piano-skin=strings] .piano-key-pressed-white .piano-key-pressed-overlay-white,[data-piano-skin=strings] .piano-key-pressed-black .piano-key-pressed-overlay-black{animation:string-pluck .64s linear forwards}@media (prefers-reduced-motion: reduce){[data-piano-skin=strings] .piano-key-pressed-white .piano-key-pressed-overlay-white,[data-piano-skin=strings] .piano-key-pressed-black .piano-key-pressed-overlay-black{animation:none!important}}[data-piano-skin=archana] .piano-key-pressed-white{border-bottom:5px solid rgba(130,92,34,.55)!important;box-shadow:inset 1px 0 #fff8e1f2,inset 0 -12px 18px #70542a52,0 3px 5px -3px #281a0a9e}[data-piano-skin=archana] .piano-key-pressed-black{border-left:1px solid rgba(242,226,198,.28)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(255,225,120,.65)!important;box-shadow:0 4px 7px #140b04eb,inset 0 1px #ffeba038,inset -6px 0 12px #000000c7}[data-piano-skin=archana] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 40%,rgba(255,220,130,.9) 0%,rgba(212,175,55,.4) 45%,transparent 75%);animation:archana-pluck .24s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=archana] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 35%,rgba(255,230,150,.95) 0%,rgba(212,175,55,.5) 45%,transparent 80%);animation:archana-pluck .24s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=kalimba] .piano-key-pressed-white{border-bottom:5px solid rgba(80,30,18,.6)!important;box-shadow:inset 1px 0 #fffffff2,inset 0 -12px 18px #3c140a47,0 3px 5px -3px #230c06a6}[data-piano-skin=kalimba] .piano-key-pressed-black{border-left:1px solid rgba(220,120,80,.3)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(220,130,90,.6)!important;box-shadow:0 4px 7px #190a06eb,inset 0 1px #f0966e33,inset -6px 0 12px #000000d1}[data-piano-skin=kalimba] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.95) 0%,rgba(220,180,160,.5) 40%,transparent 75%);animation:kalimba-flex .26s cubic-bezier(.3,1.4,.4,1) forwards}[data-piano-skin=kalimba] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 25%,rgba(255,180,140,.95) 0%,rgba(180,80,40,.5) 40%,transparent 75%);animation:kalimba-flex .26s cubic-bezier(.3,1.4,.4,1) forwards}[data-piano-skin=gamelan] .piano-key-pressed-white{border-bottom:5px solid rgba(95,65,15,.7)!important;box-shadow:inset 1px 0 #fff5c8e6,inset 0 -12px 18px #6e4b1461,0 3px 5px -3px #2d1e08b3}[data-piano-skin=gamelan] .piano-key-pressed-black{border-left:1px solid rgba(80,180,160,.3)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(90,190,170,.55)!important;box-shadow:0 4px 7px #0f1412eb,inset 0 1px #64c8b42e,inset -6px 0 12px #000000d1}[data-piano-skin=gamelan] .piano-key-pressed-overlay-white{background:radial-gradient(circle at 50% 50%,rgba(255,240,180,.95) 0%,rgba(212,175,55,.6) 45%,transparent 80%);animation:gamelan-shockwave .3s cubic-bezier(.19,1,.22,1) forwards}[data-piano-skin=gamelan] .piano-key-pressed-overlay-black{background:radial-gradient(circle at 50% 45%,rgba(140,230,210,.9) 0%,rgba(42,157,143,.5) 45%,transparent 80%);animation:gamelan-shockwave .3s cubic-bezier(.19,1,.22,1) forwards}[data-piano-skin=saz] .piano-key-pressed-white{border-bottom:5px solid rgba(110,75,30,.55)!important;box-shadow:inset 1px 0 #fff8dceb,inset 0 -12px 18px #64441947,0 3px 5px -3px #2d1c0a9e}[data-piano-skin=saz] .piano-key-pressed-black{border-left:1px solid rgba(255,255,255,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(255,255,255,.45)!important;box-shadow:0 4px 7px #0c0a08eb,inset 0 1px #ffffff29,inset -6px 0 12px #000000d6}[data-piano-skin=saz] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 35%,rgba(255,230,170,.9) 0%,rgba(200,150,80,.4) 50%,transparent 80%);animation:saz-snap .22s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=saz] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.95) 0%,rgba(180,200,230,.4) 45%,transparent 75%);animation:saz-snap .22s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=ney] .piano-key-pressed-white{border-bottom:5px solid rgba(120,85,28,.55)!important;box-shadow:inset 1px 0 #fff6d7e6,inset 0 -12px 18px #694b164d,0 3px 5px -3px #2d1e089e}[data-piano-skin=ney] .piano-key-pressed-black{border-left:1px solid rgba(220,120,100,.25)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(240,140,120,.5)!important;box-shadow:0 4px 7px #160804eb,inset 0 1px #f08c7829,inset -6px 0 12px #000000d6}[data-piano-skin=ney] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 50%,rgba(255,240,190,.95) 0%,rgba(220,160,60,.45) 50%,transparent 80%);animation:ney-vortex .32s cubic-bezier(.4,0,.2,1) forwards}[data-piano-skin=ney] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 40%,rgba(255,140,120,.95) 0%,rgba(212,40,40,.45) 50%,transparent 80%);animation:ney-vortex .32s cubic-bezier(.4,0,.2,1) forwards}[data-piano-skin=cymatics] .piano-key-pressed-white{border-bottom:5px solid rgba(212,175,55,.45)!important;box-shadow:inset 1px 0 #d4af3740,inset 0 -12px 18px #000000bf,0 3px 5px -3px #000000e6}[data-piano-skin=cymatics] .piano-key-pressed-black{border-left:1px solid rgba(212,175,55,.25)!important;border-right:1px solid rgba(0,0,0,.98)!important;border-top:2px solid rgba(212,175,55,.55)!important;box-shadow:0 4px 7px #000000f2,inset 0 1px #d4af372e,inset -6px 0 12px #000000e0}[data-piano-skin=cymatics] .piano-key-pressed-overlay-white{background:radial-gradient(circle at 50% 50%,rgba(255,235,140,.95) 0%,rgba(212,175,55,.6) 40%,transparent 80%);animation:cymatics-flash .28s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=cymatics] .piano-key-pressed-overlay-black{background:radial-gradient(circle at 50% 40%,rgba(255,240,160,.95) 0%,rgba(212,175,55,.55) 45%,transparent 80%);animation:cymatics-flash .28s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=koto] .piano-key-pressed-white{border-bottom:5px solid rgba(130,95,55,.55)!important;box-shadow:inset 1px 0 #fffcf5f2,inset 0 -12px 18px #6e502d42,0 3px 5px -3px #2d1e0f99}[data-piano-skin=koto] .piano-key-pressed-black{border-left:1px solid rgba(212,175,55,.22)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:2px solid rgba(212,175,55,.5)!important;box-shadow:0 4px 7px #0f0a06eb,inset 0 1px #d4af3729,inset -6px 0 12px #000000d6}[data-piano-skin=koto] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.95) 0%,rgba(240,220,190,.45) 45%,transparent 75%);animation:koto-strike .24s cubic-bezier(.3,1.2,.4,1) forwards}[data-piano-skin=koto] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 30%,rgba(255,225,140,.95) 0%,rgba(212,175,55,.45) 45%,transparent 75%);animation:koto-strike .24s cubic-bezier(.3,1.2,.4,1) forwards}[data-piano-skin=aftertouch] .piano-key-pressed-white{border-left:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(56,189,248,.25);border-bottom:4px solid rgba(56,189,248,.6)!important;box-shadow:inset 1px 0 #fffc,inset 0 10px 16px rgba(15,23,42,var(--key-press-shade, .35)),0 3px 5px -3px #0009}[data-piano-skin=aftertouch] .piano-key-pressed-black{border-left:1px solid rgba(56,189,248,.35)!important;border-right:1px solid rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.4)!important;border-bottom:2px solid rgba(56,189,248,.5)!important;box-shadow:0 4px 7px #000000eb,inset 0 1px #ffffff2e,inset -6px 0 12px #000000d1}[data-piano-skin=aftertouch] .piano-key-pressed-overlay-white{background:radial-gradient(ellipse at 50% 30%,rgba(56,189,248,.9) 0%,rgba(212,175,55,.45) 45%,transparent 75%);animation:aftertouch-hud-pulse .24s cubic-bezier(.2,.9,.3,1) forwards}[data-piano-skin=aftertouch] .piano-key-pressed-overlay-black{background:radial-gradient(ellipse at 50% 25%,rgba(56,189,248,.95) 0%,rgba(212,175,55,.5) 45%,transparent 75%);animation:aftertouch-hud-pulse .24s cubic-bezier(.2,.9,.3,1) forwards}.theme-light [data-piano-skin=aftertouch].piano-keyboard-stage,.theme-heal [data-piano-skin=aftertouch].piano-keyboard-stage,.theme-edu [data-piano-skin=aftertouch].piano-keyboard-stage{background:radial-gradient(ellipse at 50% -20%,rgba(56,189,248,.18),transparent 55%),linear-gradient(180deg,#070c16,#020408)!important}.theme-light [data-piano-skin=aftertouch] .piano-keybed-shell,.theme-heal [data-piano-skin=aftertouch] .piano-keybed-shell,.theme-edu [data-piano-skin=aftertouch] .piano-keybed-shell{background:linear-gradient(180deg,rgba(56,189,248,.08) 0px,rgba(56,189,248,.08) 70px,rgba(56,189,248,.4) 71px,transparent 72px,transparent 140px,rgba(251,146,60,.4) 141px,rgba(244,63,94,.08) 142px,rgba(244,63,94,.08) 194px),linear-gradient(180deg,#090e17,#03060a)!important}[data-piano-skin=aftertouch] .piano-key-base-white>div[style*="mix-blend-mode: multiply"],[data-piano-skin=aftertouch] .piano-key-base-white>div[style*="mixBlendMode: multiply"]{opacity:.2!important}@keyframes archana-pluck{0%{opacity:1;transform:scaleX(1.15)}15%{opacity:.4;transform:scaleX(.92)}35%{opacity:.95;transform:scaleX(1.08)}60%{opacity:.65;transform:scaleX(.97)}to{opacity:.85;transform:scaleX(1)}}@keyframes kalimba-flex{0%{opacity:1;transform:translateY(-4px) scaleY(1.08);filter:brightness(1.6)}20%{opacity:.5;transform:translateY(2px) scaleY(.95);filter:brightness(1.1)}45%{opacity:.9;transform:translateY(-1px) scaleY(1.03);filter:brightness(1.3)}70%{opacity:.7;transform:translateY(.5px) scaleY(.98);filter:brightness(1.05)}to{opacity:.85;transform:translateY(0) scaleY(1);filter:brightness(1)}}@keyframes gamelan-shockwave{0%{opacity:1;transform:scale(.65);filter:drop-shadow(0 0 10px #ffd700)}35%{opacity:.85;transform:scale(1.25);filter:drop-shadow(0 0 5px #d4af37)}70%{opacity:.55;transform:scale(1.5);filter:none}to{opacity:.75;transform:scale(1);filter:none}}@keyframes saz-snap{0%{opacity:1;transform:skew(-4deg) scale(1.06)}20%{opacity:.45;transform:skew(3deg) scale(.96)}45%{opacity:.9;transform:skew(-1.5deg) scale(1.02)}70%{opacity:.65;transform:skew(.8deg) scale(.99)}to{opacity:.8;transform:skew(0) scale(1)}}@keyframes ney-vortex{0%{opacity:.95;transform:translateY(6px) scaleY(1.2) scaleX(.85)}30%{opacity:.65;transform:translateY(-3px) scaleY(1.05) scaleX(1.1)}65%{opacity:.85;transform:translateY(1px) scaleY(.98) scaleX(1.02)}to{opacity:.8;transform:translateY(0) scale(1)}}@keyframes cymatics-flash{0%{opacity:1;transform:scale(1.12);filter:contrast(1.8) brightness(1.4)}25%{opacity:.6;transform:scale(.96);filter:contrast(1.3) brightness(1.1)}50%{opacity:.95;transform:scale(1.04);filter:contrast(1.5) brightness(1.25)}to{opacity:.85;transform:scale(1);filter:contrast(1) brightness(1)}}@keyframes koto-strike{0%{opacity:1;transform:translateY(-3px) scale(1.08);filter:brightness(1.5)}20%{opacity:.45;transform:translateY(1px) scale(.96);filter:brightness(1.1)}45%{opacity:.9;transform:translateY(-.5px) scale(1.02);filter:brightness(1.25)}to{opacity:.8;transform:translateY(0) scale(1);filter:brightness(1)}}@keyframes aftertouch-hud-pulse{0%{opacity:1;transform:scale(.96);filter:brightness(1.5)}40%{opacity:.7;transform:scale(1.02);filter:brightness(1.2)}to{opacity:.85;transform:scale(1);filter:brightness(1)}}.transport-bar-themed{box-shadow:0 -8px 8px -4px #0009}.theme-light .transport-bar-themed,.theme-heal .transport-bar-themed,.theme-edu .transport-bar-themed,.theme-kids .transport-bar-themed{box-shadow:0 -8px 8px -4px #ffffff80}:root{--key-perspective: 820px}body,p,span,h1,h2,h3,h4,h5,h6,label,button,a,input,textarea,select,td,th,li{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{touch-action:manipulation}[data-fps-critical=true] :is(.studio-glass,.studio-glass-heavy,.ios-glass){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.recording-card-cv{content-visibility:auto;contain-intrinsic-size:auto 120px}[data-sonner-toaster],[data-radix-toast-viewport],.toast-viewport-pass-through{pointer-events:none!important}[data-sonner-toast],[role=status][data-state],[role=alert][data-state]{pointer-events:auto}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.piano-scrollbar{overflow-x:scroll!important;scrollbar-width:auto;scrollbar-color:hsl(var(--brand-gold)) rgba(0,0,0,.3)}.piano-scrollbar::-webkit-scrollbar{-webkit-appearance:none;height:24px}@media (max-width: 639px) and (orientation: portrait){.piano-scrollbar{scrollbar-width:none}.piano-scrollbar::-webkit-scrollbar{height:0;display:none}}.piano-scrollbar::-webkit-scrollbar-track{background:#050505;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.piano-scrollbar::-webkit-scrollbar-thumb{background:hsl(var(--brand-gold));border-radius:12px;border:4px solid #050505;min-width:100px}.piano-scrollbar::-webkit-scrollbar-thumb:hover{background:hsl(var(--brand-gold) / .9)}.piano-scrollbar::-webkit-scrollbar-thumb:active{background:hsl(var(--brand-gold) / .8)}.piano-scrollbar::-webkit-scrollbar-button{display:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:root{--key-press-tilt: 0deg !important;--key-press-depth: 0px !important}}@keyframes gradient-x{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.animate-gradient-x{background-size:200% 200%;animation:gradient-x 3s ease 3}@keyframes magic-icon-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.03)}to{transform:rotate(360deg) scale(1)}}.animate-magic-spin{animation:magic-icon-spin 2s var(--ease-smooth) forwards}@keyframes magic-first-note-glow-pulse{0%,to{transform:scale(.96);opacity:.3}50%{transform:scale(1.18);opacity:.9}}.animate-magic-first-note-glow{animation:magic-first-note-glow-pulse 2.2s cubic-bezier(.4,0,.2,1) infinite}@keyframes magic-idle-icon-breath{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(14deg)}}.animate-magic-idle-icon{animation:magic-idle-icon-breath 2.2s cubic-bezier(.4,0,.2,1) infinite}@keyframes magic-icon-glow-pulse{0%,to{opacity:.6}50%{opacity:1}}.animate-magic-icon-glow{filter:drop-shadow(0 0 8px rgba(167,139,250,.8)) drop-shadow(0 0 14px rgba(212,175,55,.4));animation:magic-icon-glow-pulse 2.2s cubic-bezier(.4,0,.2,1) 12}.magic-star-burst-container{position:fixed;z-index:500;pointer-events:none;width:0;height:0;contain:strict;isolation:isolate}.magic-star-glow{position:absolute;left:0;top:0;width:50px;height:50px;margin-left:-25px;margin-top:-25px;border-radius:50%;background:radial-gradient(circle,hsl(var(--brand-pro) / .35),hsl(var(--brand-gold) / .1) 50%,transparent 75%);animation:magic-star-glow-pulse .7s var(--ease-snappy) forwards}@keyframes magic-star-glow-pulse{0%{transform:scale(.4);opacity:.8}40%{opacity:.5}to{transform:scale(3.5);opacity:0}}.magic-star{position:absolute;left:0;top:0;width:var(--star-size, 4px);height:var(--star-size, 4px);margin-left:calc(var(--star-size, 4px) / -2);margin-top:calc(var(--star-size, 4px) / -2);clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);will-change:transform,opacity;transform:translateZ(0);animation:magic-star-rise .95s cubic-bezier(.1,.8,.3,1) forwards;animation-delay:var(--star-delay, 0ms)}.magic-star-pro{background:hsl(var(--brand-pro));box-shadow:0 0 4px hsl(var(--brand-pro) / .9),0 0 8px hsl(var(--brand-pro) / .4)}.magic-star-gold{background:hsl(var(--brand-gold));box-shadow:0 0 4px hsl(var(--brand-gold) / .9),0 0 8px hsl(var(--brand-gold) / .4)}@keyframes magic-star-rise{0%{transform:translate(0) scale(0) rotate(0);opacity:0}12%{transform:translate(calc(var(--sx) * .12),calc(var(--sy) * .12)) scale(1) rotate(45deg);opacity:1}65%{opacity:.85}to{transform:translate(var(--sx),var(--sy)) scale(.2) rotate(200deg);opacity:0}}button,[role=button],a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.no-navigation-gestures{overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important;touch-action:none!important}.piano-keyboard-stage,html.gesture-pad-active,body.gesture-pad-active{overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important}.ios-glass{transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}.pull-effect{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.pull-effect:hover{transform:translate(-8px) scale(1.05)}.pull-effect:active{transform:translate(-12px) scale(.98);transition:transform .15s cubic-bezier(.4,0,1,1)}.press-effect{transition:transform .2s cubic-bezier(.4,0,.2,1)}.press-effect:active{transform:scale(.95)}.content-visibility-auto{content-visibility:auto;contain-intrinsic-size:auto 176px}@keyframes fx-glow{0%,to{opacity:.4}50%{opacity:.7}}.animate-fx-glow{animation:fx-glow 2s ease-in-out 5 forwards}@keyframes fx-unassign-pop{0%{transform:translate(-50%) scale(1);opacity:1}50%{transform:translate(-50%,-12px) scale(1.35);opacity:.9}to{transform:translate(-50%,-24px) scale(.1);opacity:0}}.animate-fx-unassign{animation:fx-unassign-pop .3s cubic-bezier(.19,1,.22,1) forwards}@keyframes drop-ready{0%,to{transform:scale(1.02)}50%{transform:scale(1.04)}}.animate-drop-ready{animation:drop-ready .8s ease-in-out 3 forwards}.piano-key-base-black{transform:translateZ(8px);transform-origin:50% 0%;border-radius:0 0 11px 11px;transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease-out}.piano-key-idle-black{background:linear-gradient(180deg,#ffffff52,#ffffff1a,#35363c 8%,#191a1f 26%,#0a0b0e 62%,#000000eb 76%,#000);border-left:2px solid rgba(255,255,255,.2)!important;border-right:2px solid rgba(0,0,0,1)!important;border-bottom:1px solid rgba(0,0,0,1)!important;border-top:2px solid rgba(255,255,255,.3)!important;box-shadow:0 12px 14px -3px #000000eb,inset 0 2px #fff3,inset -14px 0 22px #000000eb;text-shadow:0 -1px 0 rgba(0,0,0,.8)}.piano-key-pressed-black{transform-style:preserve-3d;transform:perspective(var(--key-perspective, 820px)) translate3d(var(--key-at-shift-x, 0px),calc(var(--key-press-depth, 4px) + var(--key-at-shift-y, 0px) + var(--key-mpe-depth, 0px)),0) rotateX(calc((var(--key-press-tilt, 7deg) + var(--key-mpe-depth, 0deg)) * -1)) translateZ(8px) rotateX(var(--key-at-rotate-x, 0deg)) rotate(var(--key-at-rotate-z, 0deg)) skewY(var(--key-at-skew-y, 0deg)) rotateY(calc(var(--key-at-rotate-y, 0deg) + var(--key-mpe-yaw, 0deg)));transition:transform .13s cubic-bezier(.33,1,.68,1),opacity .2s ease-out;border-left:2px solid rgba(255,255,255,.2)!important;border-right:2px solid rgba(0,0,0,1)!important;border-bottom:1px solid rgba(0,0,0,1)!important;border-top:2px solid rgba(255,255,255,.3)!important;box-shadow:0 6px 9px #000000eb,inset 0 2px #ffffff1f,inset 0 14px 20px rgba(0,0,0,var(--key-press-shade, .65))}.piano-key-pressed-overlay-black{background:radial-gradient(ellipse 58% 34% at 50% 6%,rgba(255,255,255,calc(.55 * var(--key-press-tint, 0) * var(--key-press-tint, 0))),transparent 70%),radial-gradient(ellipse 62% 38% at 50% 8%,rgba(255,186,84,calc(.68 * var(--key-press-tint, 0))),rgba(255,150,60,calc(.24 * var(--key-press-tint, 0))) 58%,transparent 78%),radial-gradient(ellipse 70% 42% at 50% 10%,rgba(255,248,224,.26),rgba(255,238,190,.07) 55%,transparent 84%),linear-gradient(180deg,rgba(255,255,255,.1),transparent 42%);opacity:0;transition:opacity .22s cubic-bezier(.16,1,.3,1);pointer-events:none}.piano-key-base-white{transform:translateZ(0);transform-origin:50% 0%;border-radius:0 0 13px 13px;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease-out}.piano-key-idle-white{background:linear-gradient(180deg,#fefdf9,#f8f3e8 34%,#ece3d0 74%,#d9cdb2);box-shadow:inset 0 2px #ffffffeb,inset 0 -16px 26px #6e5c3c29,0 10px 14px -7px #00000052;z-index:1}@keyframes octave-tint-loading{0%,to{opacity:0}50%{opacity:.55}}.animate-octave-tint-loading{animation:octave-tint-loading 1.1s ease-in-out infinite}.piano-key-pressed-white{transform-style:preserve-3d;transform:perspective(var(--key-perspective, 820px)) translate3d(var(--key-at-shift-x, 0px),calc(var(--key-press-depth, 5px) + var(--key-at-shift-y, 0px) + var(--key-mpe-depth, 0px)),0) rotateX(calc((var(--key-press-tilt, 5.5deg) + var(--key-mpe-depth, 0deg)) * -1)) rotateX(var(--key-at-rotate-x, 0deg)) rotate(var(--key-at-rotate-z, 0deg)) skewY(var(--key-at-skew-y, 0deg)) rotateY(calc(var(--key-at-rotate-y, 0deg) + var(--key-mpe-yaw, 0deg)));transition:transform .13s cubic-bezier(.33,1,.68,1),opacity .2s ease-out;box-shadow:inset 0 2px #ffffffeb,inset 0 12px 18px rgba(80,64,38,var(--key-press-shade, .28)),0 2px 3px -2px #00000080;z-index:2}.piano-key-pressed-overlay-white{background:radial-gradient(ellipse 60% 32% at 50% 5%,rgba(255,255,255,calc(.6 * var(--key-press-tint, 0) * var(--key-press-tint, 0))),transparent 68%),radial-gradient(ellipse 64% 36% at 50% 6%,rgba(255,172,66,calc(.72 * var(--key-press-tint, 0))),rgba(240,138,48,calc(.26 * var(--key-press-tint, 0))) 58%,transparent 78%),radial-gradient(ellipse 72% 40% at 50% 8%,rgba(255,250,232,.3),rgba(255,240,200,.09) 55%,transparent 84%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 38%);opacity:0;transition:opacity .22s cubic-bezier(.16,1,.3,1);pointer-events:none}@keyframes key-strike-white{0%{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0);animation-timing-function:cubic-bezier(.42,0,.58,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * .62),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -.62));animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * 1.22),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1.22));animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 5px),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1))}}@keyframes key-strike-black{0%{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0) translateZ(8px);animation-timing-function:cubic-bezier(.42,0,.58,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * .6),0) rotateX(calc(var(--key-press-tilt, 7deg) * -.6)) translateZ(8px);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * 1.24),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1.24)) translateZ(8px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 4px),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1)) translateZ(8px)}}@keyframes key-release-white{0%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 5px),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1));animation-timing-function:cubic-bezier(.16,1,.3,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * .28),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -.28));animation-timing-function:cubic-bezier(.34,0,.58,1)}55%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,-1.3px,0) rotateX(.9deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0)}}@keyframes key-release-black{0%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 4px),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1)) translateZ(8px);animation-timing-function:cubic-bezier(.16,1,.3,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * .28),0) rotateX(calc(var(--key-press-tilt, 7deg) * -.28)) translateZ(8px);animation-timing-function:cubic-bezier(.34,0,.58,1)}55%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,-1.1px,0) rotateX(.7deg) translateZ(8px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0) translateZ(8px)}}.piano-key-base-white.key-anim-strike{animation:key-strike-white .19s cubic-bezier(.42,0,.58,1) forwards}.piano-key-base-black.key-anim-strike{animation:key-strike-black .18s cubic-bezier(.42,0,.58,1) forwards}.piano-key-base-white.key-anim-release{animation:key-release-white .34s cubic-bezier(.16,1,.3,1) forwards}.piano-key-base-black.key-anim-release{animation:key-release-black .32s cubic-bezier(.16,1,.3,1) forwards}.premium-key-base-ivory.key-anim-strike{animation:key-strike-white .19s cubic-bezier(.42,0,.58,1) forwards}.premium-key-base-gold.key-anim-strike{animation:key-strike-black .18s cubic-bezier(.42,0,.58,1) forwards}.premium-key-base-ivory.key-anim-release{animation:key-release-white .34s cubic-bezier(.16,1,.3,1) forwards}.premium-key-base-gold.key-anim-release{animation:key-release-black .32s cubic-bezier(.16,1,.3,1) forwards}@keyframes key-strike-white-alt{0%{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0);animation-timing-function:cubic-bezier(.42,0,.58,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * .62),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -.62));animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * 1.22),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1.22));animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 5px),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1))}}@keyframes key-strike-black-alt{0%{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0) translateZ(8px);animation-timing-function:cubic-bezier(.42,0,.58,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * .6),0) rotateX(calc(var(--key-press-tilt, 7deg) * -.6)) translateZ(8px);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * 1.24),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1.24)) translateZ(8px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 4px),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1)) translateZ(8px)}}@keyframes key-release-white-alt{0%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 5px),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -1));animation-timing-function:cubic-bezier(.16,1,.3,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 5px) * .28),0) rotateX(calc(var(--key-press-tilt, 5.5deg) * -.28));animation-timing-function:cubic-bezier(.34,0,.58,1)}55%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,-1.3px,0) rotateX(.9deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0)}}@keyframes key-release-black-alt{0%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,var(--key-press-depth, 4px),0) rotateX(calc(var(--key-press-tilt, 7deg) * -1)) translateZ(8px);animation-timing-function:cubic-bezier(.16,1,.3,1)}35%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,calc(var(--key-press-depth, 4px) * .28),0) rotateX(calc(var(--key-press-tilt, 7deg) * -.28)) translateZ(8px);animation-timing-function:cubic-bezier(.34,0,.58,1)}55%{transform:perspective(var(--key-perspective, 820px)) translate3d(0,-1.1px,0) rotateX(.7deg) translateZ(8px);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:perspective(var(--key-perspective, 820px)) translateZ(0) rotateX(0) translateZ(8px)}}.piano-key-base-white.key-anim-strike.anim-alt,.premium-key-base-ivory.key-anim-strike.anim-alt{animation-name:key-strike-white-alt}.piano-key-base-black.key-anim-strike.anim-alt,.premium-key-base-gold.key-anim-strike.anim-alt{animation-name:key-strike-black-alt}.piano-key-base-white.key-anim-release.anim-alt,.premium-key-base-ivory.key-anim-release.anim-alt{animation-name:key-release-white-alt}.piano-key-base-black.key-anim-release.anim-alt,.premium-key-base-gold.key-anim-release.anim-alt{animation-name:key-release-black-alt}@media (prefers-reduced-motion: reduce){.key-anim-strike,.key-anim-release{animation:none!important}}button[data-key-id][data-velocity-high=true]{outline:none}@keyframes key-glow{0%{opacity:.18}to{opacity:0}}.animate-key-glow{animation:key-glow .3s cubic-bezier(.3,1.5,.5,1) forwards}.animate-gliss-trail{outline-width:4px!important;outline-style:solid!important;outline-offset:-4px!important;animation:gliss-trail .38s cubic-bezier(.19,1,.22,1) forwards}@keyframes gliss-trail{0%{outline-color:hsla(var(--gliss-hue, 47),95%,65%,.9)}to{outline-color:hsla(calc(var(--gliss-hue, 47) + 120),90%,65%,0)}}@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}to{transform:scale(1.8);opacity:0}}.animate-pulse-ring{animation:pulse-ring .5s ease-out}.aftertouch-active{animation:none!important;transition:none!important}.aftertouch-ripple{position:absolute;width:76px;height:76px;border-radius:50%;pointer-events:none;z-index:25;left:var(--ripple-x, 50%);top:var(--ripple-y, 50%);transform:translate3d(-50%,-50%,0) scale(.45);opacity:0;background:radial-gradient(circle,rgba(255,255,255,.95) 0 7%,rgba(255,211,71,.75) 20%,rgba(212,175,55,.3) 50%,transparent 72%);border:2px solid rgba(212,175,55,.85);box-shadow:none;will-change:transform,opacity;contain:strict}.aftertouch-ripple:after{content:attr(data-effect-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fffffffa;font-size:7px;font-weight:900;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap}.aftertouch-ripple[data-effect=vibrato]{background:radial-gradient(circle,rgba(255,255,255,1) 0 7%,rgba(196,181,253,.85) 20%,rgba(139,92,246,.35) 50%,transparent 72%);border-color:#c4b5fdf2;box-shadow:none}.aftertouch-ripple[data-effect=filter]{background:radial-gradient(circle,rgba(255,255,255,1) 0 7%,rgba(103,232,249,.85) 20%,rgba(6,182,212,.35) 50%,transparent 72%);border-color:#67e8f9f2;box-shadow:none}.aftertouch-ripple[data-effect=pitch],.aftertouch-ripple[data-effect=combined]{background:radial-gradient(circle,rgba(255,255,255,1) 0 7%,rgba(253,224,71,.85) 20%,rgba(245,158,11,.35) 50%,transparent 72%);border-color:#fef08af2;box-shadow:none}.aftertouch-ripple.active{animation:aftertouch-ripple-pulse .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes aftertouch-ripple-pulse{0%{transform:translate3d(-50%,-50%,0) scale(.45);opacity:.95}50%{opacity:.6}to{transform:translate3d(-50%,-50%,0) scale(1.6);opacity:0}}@media (prefers-reduced-motion: reduce){.animate-key-glow,.animate-gliss-trail,.animate-pulse-ring,.aftertouch-ripple{animation:none!important}.aftertouch-ripple.active{transform:translate(-50%,-50%) scale(1);opacity:.9}.aftertouch-active{transition:none!important}.animate-magic-spin,.animate-magic-first-note-glow,.animate-magic-idle-icon,.magic-star-glow,.magic-star,.animate-pulse,.animate-wiggle,.animate-bounce,.animate-octave-tint-loading{animation:none!important}}button[data-key-id][data-edu-status]{transition:outline-color .15s ease-out,outline-width .15s ease-out;contain:layout paint}button[data-key-id][data-edu-status=target]{outline:4px solid rgba(59,130,246,.5);outline-offset:-4px;animation:pulse 2s cubic-bezier(.4,0,.6,1) 5;contain:layout paint}button[data-key-id][data-edu-status=correct]{outline:4px solid rgb(34,197,94);outline-offset:-4px;box-shadow:0 0 15px #22c55e99}button[data-key-id][data-edu-status=error]{outline:4px solid rgb(239,68,68);outline-offset:-4px}.piano-key-slap-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:36;opacity:0;transition:opacity .12s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-top:34px;padding-bottom:8px;overflow:visible;border-radius:inherit}.piano-key-slap-active{z-index:35!important;position:relative!important}.piano-key-slap-active .piano-key-slap-overlay{opacity:1}.piano-key-slap-shockwave{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle at 50% 75%,rgba(255,255,255,.9) 0%,var(--slap-accent-color, rgba(212, 175, 55, .65)) 45%,transparent 75%);opacity:0;pointer-events:none}.piano-key-slap-active .piano-key-slap-shockwave{animation:slap-key-shockwave .75s cubic-bezier(.16,1,.3,1) forwards}@keyframes slap-key-shockwave{0%{transform:scale(.8);opacity:1}45%{opacity:.9}to{transform:scale(1);opacity:0}}.piano-key-slap-h-meter{position:relative;z-index:26;width:90%;max-width:42px;height:8px;border-radius:9999px;background:#000000eb;border:1.5px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 3px #000000f2,0 0 8px #000000b3;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.piano-key-slap-h-track{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:inherit;overflow:hidden}.piano-key-slap-h-center-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 4px #fff;transform:translate(-50%);z-index:4}.piano-key-slap-h-fill-left{position:absolute;right:50%;top:0;bottom:0;width:50%;background:linear-gradient(to left,var(--slap-x-color, #E2E2E2) 0%,#D4AF37 60%,#FFFFFF 100%);transform-origin:right center;transform:scaleX(var(--slap-tilt-x-left, 0));will-change:transform;z-index:2}.piano-key-slap-h-fill-right{position:absolute;left:50%;top:0;bottom:0;width:50%;background:linear-gradient(to right,var(--slap-x-color, #E2E2E2) 0%,#D4AF37 60%,#FFFFFF 100%);transform-origin:left center;transform:scaleX(var(--slap-tilt-x-right, 0));will-change:transform;z-index:2}.piano-key-slap-meter-cluster{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;pointer-events:none;z-index:25}.piano-key-slap-v-meter{position:relative;width:6.5px;height:52px;border-radius:9999px;background:#000000e6;border:1.5px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 3px #000000e6,0 0 8px #0009;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}.piano-key-base-black .piano-key-slap-v-meter,.piano-key-idle-black .piano-key-slap-v-meter{height:28px;width:6px}.piano-key-base-black .piano-key-slap-overlay,.piano-key-idle-black .piano-key-slap-overlay{padding-top:26px;padding-bottom:6px}.piano-key-v-track,.piano-key-slap-v-track{width:100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:inherit;overflow:hidden}.piano-key-slap-v-fill{width:100%;height:100%;background:linear-gradient(to top,var(--slap-accent-color, #D4AF37) 0%,#FFFFFF 100%);border-radius:9999px;transform-origin:bottom center;transform:scaleY(var(--slap-tilt-y, 0));will-change:transform}@media (prefers-reduced-motion: reduce){.piano-key-base-white,.piano-key-base-black,.premium-key-base-ivory,.premium-key-base-gold{transition:opacity .1s ease,background-color .1s ease!important}.piano-key-pressed-white,.piano-key-pressed-black,.premium-key-pressed-ivory,.premium-key-pressed-gold{transform:none!important;transition:box-shadow .1s ease,opacity .1s ease!important}.aftertouch-ripple,.piano-key-slap-shockwave,.key-anim-strike,.aftertouch-active,.animate-key-glow,.animate-gliss-trail,.key-anim-release,.animate-fx-glow,.animate-fx-unassign,.animate-octave-tint-loading{animation:none!important}}.piano-keyboard-stage{position:relative;background:radial-gradient(ellipse at 50% -12%,rgba(212,175,55,.26),transparent 42%),linear-gradient(120deg,#211407,#060606 38%,#1c1308 74%,#030303);border:none;border-radius:0;padding:0 10px;scrollbar-width:none;-ms-overflow-style:none}.piano-keyboard-stage::-webkit-scrollbar{display:none;box-shadow:inset 0 1px #ffffff24,inset 10px 0 24px #ffd7840b,inset -12px 0 24px #0000005c}.piano-stage-frame{box-shadow:0 34px 74px #0000006b,0 8px #0000003d}.theme-light .piano-stage-frame,.theme-heal .piano-stage-frame,.theme-edu .piano-stage-frame,.theme-kids .piano-stage-frame{box-shadow:0 1px #0f172a1a,0 10px 20px -12px #0f172a47}[data-fps-critical=true] .theme-light .piano-stage-frame,[data-fps-critical=true] .theme-heal .piano-stage-frame,[data-fps-critical=true] .theme-edu .piano-stage-frame,[data-fps-critical=true] .theme-kids .piano-stage-frame{box-shadow:none!important}.piano-keybed-shell{position:relative;border-radius:0;padding:0 4px;contain:paint;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 24%),radial-gradient(120% 44px at 50% 0%,rgba(255,214,128,.1),transparent 72%);box-shadow:inset 0 1px #ffffff14}.piano-fallboard-rail{display:none}.piano-octave-label-ui{background:none!important;border:none!important;box-shadow:none!important;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);transition:opacity .16s var(--ease-smooth)}.piano-octave-label-ui:active{opacity:.7}.piano-octave-overlay-bar{background:none!important;box-shadow:none!important;height:26px!important;margin:0!important;padding:0 10px!important;pointer-events:auto}.piano-octave-pill{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);touch-action:pan-x}.theme-light .piano-keyboard-stage,.theme-heal .piano-keyboard-stage,.theme-edu .piano-keyboard-stage{background:transparent;border:none;box-shadow:none}.theme-light .piano-keybed-shell,.theme-heal .piano-keybed-shell,.theme-edu .piano-keybed-shell{background:none;box-shadow:none}.piano-keybed-shell:after{display:none}button[data-key-id]{position:relative}.piano-key-base-black{outline:1px solid rgba(255,255,255,.075);outline-offset:-1px}.piano-key-idle-white{text-shadow:0 1px 0 rgba(255,255,255,.46)}.piano-key-base-black{border-radius:0 0 8px 8px}.piano-octave-label-ui{letter-spacing:.02em}.piano-octave-label-ui:hover{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.85),0 0 12px rgba(212,175,55,.75)}.piano-keyboard-stage .relative.flex{border-radius:0}.theme-light .piano-keyboard-stage .relative.flex,.theme-heal .piano-keyboard-stage .relative.flex,.theme-edu .piano-keyboard-stage .relative.flex{background:none;box-shadow:none}[data-fps-critical=true] .piano-key-base-black,[data-fps-critical=true] .premium-key-base-gold{transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease-out!important}[data-fps-critical=true] .piano-key-base-white,[data-fps-critical=true] .premium-key-base-ivory{transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease-out!important}[data-fps-critical=true] .piano-key-pressed-black,[data-fps-critical=true] .piano-key-pressed-white,[data-fps-critical=true] .premium-key-pressed-gold,[data-fps-critical=true] .premium-key-pressed-ivory{transition:transform .13s cubic-bezier(.33,1,.68,1),opacity .2s ease-out!important}[data-fps-critical=true] .piano-key-idle-white{background:linear-gradient(180deg,#fdfaf2,#e2d7bf)!important;box-shadow:0 8px 10px -6px #0000004d!important}[data-fps-critical=true] .piano-key-idle-black{background:linear-gradient(180deg,#303137,#050507)!important;box-shadow:0 10px 12px #000000bf!important}[data-fps-critical=true] .piano-key-pressed-white{box-shadow:inset 0 10px 14px rgba(80,64,38,var(--key-press-shade, .28)),0 2px 3px -2px #00000080!important}[data-fps-critical=true] .piano-key-pressed-black{box-shadow:0 4px 6px #000000e6,inset 0 10px 14px rgba(0,0,0,var(--key-press-shade, .65))!important}.piano-keyboard-stage .piano-key-base-white:before,.piano-keyboard-stage .piano-key-base-white:after,.piano-keyboard-stage .piano-key-base-black:before,.piano-keyboard-stage .piano-key-base-black:after,.piano-keyboard-stage .premium-key-base-ivory:before,.piano-keyboard-stage .premium-key-base-ivory:after,.piano-keyboard-stage .premium-key-base-gold:before,.piano-keyboard-stage .premium-key-base-gold:after{content:none!important}[data-fps-critical=true] .scroll-mask-x{mask-image:none!important;-webkit-mask-image:none!important}[data-fps-critical=true] .piano-keyboard-stage{box-shadow:none!important}[data-fps-critical=true] .piano-stage-frame{box-shadow:0 12px 24px #00000059!important}[data-fps-critical=true] .piano-keybed-shell{box-shadow:none!important}[data-fps-critical=true] .piano-keyboard-stage{perspective:none!important}[data-fps-critical=true] .piano-keybed-shell{transform:none!important}[data-fps-critical=true] .piano-key-base-white,[data-fps-critical=true] .piano-key-base-black,[data-fps-critical=true] .premium-key-base-ivory,[data-fps-critical=true] .premium-key-base-gold{transform:none!important;transform-style:flat!important}[data-fps-critical=true] .piano-key-pressed-white,[data-fps-critical=true] .premium-key-pressed-ivory{transform:translate(var(--key-at-shift-x, 0px),calc(var(--key-press-depth, 3px) + var(--key-at-shift-y, 0px))) rotate(var(--key-at-rotate-z, 0deg)) skewY(var(--key-at-skew-y, 0deg))!important}[data-fps-critical=true] .piano-key-pressed-black,[data-fps-critical=true] .premium-key-pressed-gold{transform:translate(var(--key-at-shift-x, 0px),calc(var(--key-press-depth, 4px) + var(--key-at-shift-y, 0px))) rotate(var(--key-at-rotate-z, 0deg)) skewY(var(--key-at-skew-y, 0deg))!important}[data-fps-critical=true] .key-anim-strike,[data-fps-critical=true] .key-anim-release{animation:none!important}[data-fps-critical=true] .piano-octave-overlay-bar,[data-fps-critical=true] .piano-octave-label-ui{transform:none!important}[data-fps-critical=true] .piano-keyboard-stage:before,[data-fps-critical=true] .piano-keyboard-stage:after,[data-fps-critical=true] .piano-keybed-shell:after{content:none!important}[data-fps-critical=true] .piano-keyboard-stage .relative.flex{background:#00000040!important;box-shadow:none!important}.studio-root{min-height:100dvh;overflow-x:hidden;overflow-x:clip;padding-top:0;contain:style;--studio-gap-xs: 4px;--studio-gap-sm: 8px;--z-footer: 50;--z-loading: 200;--z-drawer-toggle: 250;--z-replay: 300;--z-header: 500;--z-drawer-backdrop: 600;--z-drawer: 700;--z-mic-recorder: 2000;--z-popover: 9999;--z-nav-drawer: 10050;--z-dialog: 100000;--studio-gap-md: 12px;--studio-gap-lg: 16px}.studio-panel{padding:var(--studio-gap-xs) var(--studio-gap-sm);margin-bottom:var(--studio-gap-xs);border-radius:8px;contain:layout style}.studio-sticky-dock{top:calc(44px + env(safe-area-inset-top,0px));background-color:hsl(var(--background));contain:layout style;overflow-anchor:none;margin-bottom:0;transition:border-color .2s ease,box-shadow .2s ease}@media (min-width: 640px){.studio-sticky-dock{top:calc(48px + env(safe-area-inset-top,0px))}}.studio-sticky-dock[data-fullscreen=true],.studio-sticky-dock[data-kids=true]{top:0!important}@media (orientation: landscape) and (max-height: 500px){.studio-sticky-dock{position:relative!important;top:auto!important;box-shadow:none!important}}.studio-sticky-dock[data-sticky-mode=true]{border-bottom-color:hsl(var(--border) / .4);box-shadow:0 4px 16px -4px #00000073;margin-bottom:0!important}.studio-sticky-dock[data-keyboard-hidden=true][data-sticky-mode=true]{margin-bottom:0!important}.studio-sticky-dock[data-sticky-mode=true] .studio-panel{padding:2px var(--studio-gap-sm) 0px!important;margin-bottom:0!important}.piano-studio-config-label{max-height:2rem;opacity:1;margin:.375rem 0;transition:opacity .18s ease}.studio-sticky-dock[data-sticky-mode=true] .piano-studio-config-label,[data-sticky-mode=true] .piano-studio-config-label{max-height:0!important;opacity:0!important;margin:0!important;overflow:hidden!important;pointer-events:none!important}.piano-quick-action-label-row{height:1.25rem;max-height:1.25rem;opacity:1;overflow:hidden;transition:opacity .18s ease}.studio-sticky-dock[data-sticky-mode=true] .piano-quick-action-label-row,[data-sticky-mode=true] .piano-quick-action-label-row{max-height:0!important;min-height:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}.piano-quick-action-label{max-height:1.5rem;opacity:1;transition:opacity .18s ease}.studio-sticky-dock[data-sticky-mode=true] .piano-quick-action-label,[data-sticky-mode=true] .piano-quick-action-label{max-height:0!important;min-height:0!important;opacity:0!important;padding:0!important;margin:0!important;overflow:hidden!important;pointer-events:none!important}.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar{padding-top:0;padding-bottom:0}.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar .studio-quick-actions-deck{padding:2px 4px!important;gap:4px!important}.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar .piano-quick-action-slot,.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar .w-14,.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar .sm\:w-16{width:2.5rem!important;gap:0!important}.studio-sticky-dock[data-sticky-mode=true] .studio-quick-actions-bar button{height:36px!important;width:36px!important;min-height:36px!important}.studio-dock-scalebar{display:grid;grid-template-rows:1fr;opacity:1;contain:style;transition:grid-template-rows .24s cubic-bezier(.2,0,.2,1),opacity .18s ease}.studio-dock-scalebar>div{overflow:hidden;min-height:0}.studio-scalebar{padding:0 var(--studio-gap-sm) 2px}.studio-sticky-dock[data-sticky-mode=true] .studio-dock-scalebar{grid-template-rows:0fr!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;min-height:0!important;overflow:hidden!important}.studio-sticky-dock .studio-keyboard-area{height:calc(176px * var(--keyboard-zoom, 1) + 38px);overflow:hidden;contain:layout style paint;transition:height .24s cubic-bezier(.2,0,.2,1)}.studio-sticky-dock[data-sticky-mode=true] .studio-keyboard-area{height:144px}@media (max-width: 639px) and (orientation: portrait){.studio-sticky-dock[data-sticky-mode=true] .studio-keyboard-area{height:140px}}.studio-sticky-dock .studio-keyboard-area .piano-keyboard-stage,.studio-sticky-dock[data-sticky-mode=true] .studio-keyboard-area .piano-keyboard-stage{transform:none;contain:layout style}@media (orientation: landscape) and (max-height: 500px){.piano-studio-config-label{max-width:130px;height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.studio-sticky-dock:has([data-chat-open=true]) .studio-dock-scalebar,[data-chat-open=true]~.studio-dock-scalebar{grid-template-rows:0fr!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;min-height:0!important;overflow:hidden!important}.studio-section-label{position:relative;height:0;overflow:visible;z-index:5;pointer-events:none}.studio-section-label span{position:absolute;top:-2px;left:12px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:hsl(var(--muted-foreground) / .7);font-family:Montserrat,sans-serif}.studio-keyboard-separator{height:1px;background:linear-gradient(to right,transparent,hsl(var(--border) / .3) 20%,hsl(var(--border) / .3) 80%,transparent);margin:0 var(--studio-gap-md)}.studio-below-keyboard{position:relative;overflow-x:clip;contain:layout style}.studio-replay-indicator{position:fixed;bottom:calc(var(--transport-bar-height, 78px) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:var(--z-replay);border-radius:20px;padding:8px 20px;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:hsl(var(--destructive) / .96);border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 14px hsl(var(--destructive) / .28);contain:layout style paint}@keyframes studio-replay-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}.studio-replay-pulse-circle{animation:studio-replay-pulse 1.2s ease-in-out 4}@media (prefers-reduced-motion: reduce){.studio-replay-pulse-circle{animation:none}}.studio-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#000000b8}.studio-dialog-card{background:hsl(var(--brand-onyx) / .95);border:1px solid hsl(var(--brand-gold) / .2);border-radius:8px;padding:28px 24px;max-width:380px;width:90vw;box-shadow:0 16px 48px #00000080;contain:content}@media (prefers-reduced-motion: no-preference){@keyframes studio-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.studio-panel-enter{animation:studio-panel-enter .2s cubic-bezier(.4,0,.2,1) both}.studio-panel-enter-b2{animation-delay:.1s}.studio-panel-enter-b3{animation-delay:.25s}}@media (max-width: 639px){.studio-panel-enter,.studio-panel-enter-b2,.studio-panel-enter-b3{animation:none}}.studio-keyboard-area{position:relative;box-shadow:inset 0 4px 12px #0000001f;contain:style}.studio-footer{position:fixed;bottom:0;left:0;right:0;z-index:50;background:hsl(var(--background) / .96);border-top:1px solid hsl(var(--border) / .15);padding:0;box-shadow:0 -2px 14px hsl(var(--background) / .45),0 -1px hsl(var(--border) / .08);contain:layout style paint;isolation:isolate;transition:transform .26s cubic-bezier(.2,0,.2,1);will-change:transform}.studio-footer[data-scroll-hidden=true],.studio-footer.is-scroll-hidden{transform:translateY(calc(100% + env(safe-area-inset-bottom,0px)));pointer-events:none!important}.studio-root.is-recording{box-shadow:inset 0 0 80px hsl(var(--brand-warning) / .15)}.studio-root.is-recording .studio-footer{border-top-color:hsl(var(--brand-warning) / .4);box-shadow:0 -4px 24px hsl(var(--brand-warning) / .12),0 -1px hsl(var(--brand-warning) / .15)}@media (max-width: 639px){.studio-footer{padding:0}}@media (max-width: 639px) and (orientation: portrait){.studio-root{--studio-gap-md: 6px;--studio-gap-lg: 10px}.studio-root .studio-panel{padding:2px var(--studio-gap-sm);margin-bottom:2px}.studio-root .piano-keyboard-stage{padding:0 4px 4px}.studio-root .piano-fallboard-rail{display:none}}@media (min-width: 640px) and (max-width: 1024px) and (orientation: portrait){.studio-root{--studio-gap-md: 14px;--studio-gap-lg: 20px}.studio-root .studio-panel{max-width:760px;width:100%;margin-inline:auto;padding:var(--studio-gap-sm) var(--studio-gap-md)}.studio-root .piano-keyboard-stage{padding:0 20px 6px}}@media (orientation: landscape) and (max-height: 500px){.piano-studio-config-label{display:none!important;max-height:0!important;opacity:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}.studio-quick-actions-bar{padding-top:0!important;padding-bottom:0!important}.studio-quick-actions-bar .studio-quick-actions-deck{padding:2px 4px!important;gap:4px!important}.studio-quick-actions-bar .w-14,.studio-quick-actions-bar .sm\:w-16{width:2.5rem!important;gap:0!important}.studio-quick-actions-bar button{height:36px!important;width:36px!important;min-height:36px!important}.piano-quick-action-label-row{display:none!important;max-height:0!important;min-height:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}.piano-quick-action-label{display:none!important;max-height:0!important;opacity:0!important;padding:0!important;margin:0!important;overflow:hidden!important;pointer-events:none!important}.studio-second-keyboard-container,.studio-keyboard-separator{display:none!important}.studio-scalebar{display:none}}.studio-effect-card{background:#ffffff0a;border-color:#ffffff0f;box-shadow:0 8px 32px #0000005e;contain:content}.kids-grid-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;pointer-events:auto}.kids-grid-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c}.kids-grid-panel{position:absolute;left:0;right:0;bottom:0;max-height:75vh;display:flex;flex-direction:column;background:hsl(from var(--background) h s l / .25);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top-left-radius:8px;border-top-right-radius:8px;border-top:1px solid hsl(from var(--border) h s l / .2);box-shadow:none;overflow:hidden;will-change:transform,opacity}.kids-grid-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid hsl(from var(--border) h s l / .2);position:sticky;top:0;z-index:10;background:hsl(from var(--background) h s l / .5);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.kids-grid-header:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:hsl(from var(--muted-foreground) h s l / .3)}.kids-grid-title{font-family:var(--font-brand, "Montserrat", sans-serif);font-size:18px;font-weight:900;letter-spacing:-.03em;color:var(--foreground)}.kids-grid-close-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:8px;border:none;background:hsl(from var(--muted-foreground) h s l / .1);color:var(--muted-foreground);cursor:pointer;transition:background-color .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}.kids-grid-close-btn:hover{background:hsl(from var(--muted-foreground) h s l / .2);color:var(--foreground)}.kids-grid-close-btn:active{transform:scale(.92)}.kids-grid-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 32px}.kids-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 12px #00000026,inset 0 2px 4px #fff3;color:#fff;cursor:pointer;transition:transform .12s cubic-bezier(.19,1,.22,1),filter .2s ease;min-height:88px;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.kids-grid-card:hover{filter:brightness(1.15)}.kids-grid-card:active{transform:scale(.93);will-change:transform}.kids-grid-card-label{width:100%;text-align:center;font-family:var(--font-interface, "Inter", sans-serif);font-size:12px;font-weight:700;letter-spacing:0em;color:inherit;text-shadow:0 1px 2px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kids-grid-section-title{font-family:var(--font-brand, "Montserrat", sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--muted-foreground);padding:0 4px}.kids-gesture-section{position:relative;width:100%;height:280px;max-height:35vh;flex-shrink:0;padding:0 44px}.kids-drawer-toggles{display:flex;gap:8px;justify-content:center}.kids-drawer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 16px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted-foreground);font-size:10px;font-weight:700;letter-spacing:-.03em;cursor:pointer;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;min-width:56px;min-height:44px}.kids-drawer-btn:hover{background:hsl(from var(--accent) h s l / .6)}.kids-drawer-btn:active{transform:scale(.95)}.kids-drawer-btn-active{color:var(--brand-gold, #D4AF37);background:hsl(from var(--brand-gold, #D4AF37) h s l / .12);border-color:hsl(from var(--brand-gold, #D4AF37) h s l / .25)}.kids-drawer-label{font-family:var(--font-brand, "Montserrat", sans-serif)}