.piano-container{width:100%;height:100%;background:linear-gradient(to bottom,#f0f9ff,#e0e7ff,#fdf2f8);padding:0;display:flex;flex-direction:column}.piano-keys-container{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:0;width:100%;height:100%}.white-key{position:relative;width:100%;height:100%;cursor:pointer;border-radius:0 0 .5vw .5vw;border:2px solid rgba(255,255,255,.3);display:block}.white-key:not(.pressed){box-shadow:0 1vw 2vw #00000026,0 1.5vw 3vw #0000001a,inset 0 .125vw .25vw #fffc,inset 0 -.25vw .5vw #0000001a}.white-key.pressed{transform:translateY(2vw)}@media (min-width: 640px){.white-key.pressed{transform:translateY(.5rem)}}.white-key.red{background:linear-gradient(to bottom,#ff6b6b,#ff6b6bee)}.white-key.orange{background:linear-gradient(to bottom,#ff8e53,#ff8e53ee)}.white-key.yellow{background:linear-gradient(to bottom,#ffd93d,#ffd93dee)}.white-key.green{background:linear-gradient(to bottom,#6bcf7f,#6bcf7fee)}.white-key.teal{background:linear-gradient(to bottom,#4ecdc4,#4ecdc4ee)}.white-key.blue{background:linear-gradient(to bottom,#45b7d1,#45b7d1ee)}.white-key.mint{background:linear-gradient(to bottom,#96ceb4,#96ceb4ee)}.white-key.light-yellow{background:linear-gradient(to bottom,#ffeaa7,#ffeaa7ee)}.white-key.plum{background:linear-gradient(to bottom,plum,#dda0ddee)}.white-key.seafoam{background:linear-gradient(to bottom,#98d8c8,#98d8c8ee)}.white-key.pressed.red{background:linear-gradient(to bottom,#ff6b6bdd,#ff6b6bbb)}.white-key.pressed.orange{background:linear-gradient(to bottom,#ff8e53dd,#ff8e53bb)}.white-key.pressed.yellow{background:linear-gradient(to bottom,#ffd93ddd,#ffd93dbb)}.white-key.pressed.green{background:linear-gradient(to bottom,#6bcf7fdd,#6bcf7fbb)}.white-key.pressed.teal{background:linear-gradient(to bottom,#4ecdc4dd,#4ecdc4bb)}.white-key.pressed.blue{background:linear-gradient(to bottom,#45b7d1dd,#45b7d1bb)}.white-key.pressed.mint{background:linear-gradient(to bottom,#96ceb4dd,#96ceb4bb)}.white-key.pressed.light-yellow{background:linear-gradient(to bottom,#ffeaa7dd,#ffeaa7bb)}.white-key.pressed.plum{background:linear-gradient(to bottom,#dda0dddd,#dda0ddbb)}.white-key.pressed.seafoam{background:linear-gradient(to bottom,#98d8c8dd,#98d8c8bb)}.black-key-container{position:absolute;top:0;z-index:20}.black-key{width:100%;height:100%;cursor:pointer;border-radius:0 0 .5vw .5vw;border:2px solid rgba(88,28,135,.5);background:linear-gradient(to bottom,#6a1b9a,#4527a0)}.black-key:not(.pressed){box-shadow:0 1vw 2vw #00000080,0 1.5vw 3vw #0000004d,inset 0 .125vw .25vw #fff3,inset 0 -.25vw .5vw #0006}.black-key.pressed{transform:translateY(1vw);background:linear-gradient(to bottom,#4a148c,#311b92)}.ad-banner{height:100%;width:100%;background:linear-gradient(to right,#f1f5f9,#e2e8f0,#cbd5e1);display:flex;align-items:center;justify-content:center;border-top:2px solid #94a3b8;opacity:0}.ad-banner-area.animated .ad-banner{opacity:1}.ad-banner-content{text-align:center;color:#374151}.ad-banner-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.ad-banner-description{font-size:.875rem;opacity:.8}@media (min-width: 640px){.ad-banner-title{font-size:1.25rem}.ad-banner-description{font-size:1rem}}@media (min-width: 768px){.ad-banner-title{font-size:1.5rem}.ad-banner-description{font-size:1.125rem}}#audio-unlock-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffff4d;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100}#loading-text{font-size:4vw;margin-bottom:2rem;text-align:center;font-weight:600;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#play-button{font-size:5vw;padding:1rem 2rem;background-color:#fff0;cursor:pointer;margin-bottom:2rem;border:none;transition:all .3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.play-icon{animation:pulse 1.5s infinite ease-in-out}.animated-notes{position:relative;width:100%;height:100%;pointer-events:none}.icon{font-size:8vw;line-height:1;display:inline-block}.note{position:absolute;opacity:1;animation:floatUp 3s infinite ease-out}.note-1{top:25%;left:20%;animation:bubbleUpLeft 4s infinite ease-in-out}.note-2{top:45%;left:50%;animation:bubbleUpRight 4s infinite ease-in-out;animation-delay:1.5s}.note-3{top:30%;left:80%;animation:bubbleUpLeft 4s infinite ease-in-out;animation-delay:3s}*{box-sizing:border-box}body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#1a1a1a;color:#fff;overflow:hidden}.app{width:100vw;height:100dvh;height:100vh;background:linear-gradient(to bottom right,#dbeafe,#e0e7ff,#fdf2f8);display:flex;flex-direction:column;overflow:hidden}.fullscreen-btn{position:fixed;top:20px;left:20px;width:5vw;height:5vw;background:#000678b3;border:.2vw solid rgba(0,0,44,.3);border-radius:50%;color:#fff;font-size:3vw;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center}.fullscreen-btn:hover{background:#0e003d33;border-color:#01003b33;transform:scale(1.1)}.fullscreen-btn:active{transform:scale(.95)}.piano-area{width:100%;height:80dvh;height:80vh;min-height:0}.ad-banner-area{width:100%;height:20dvh;height:20vh;min-height:0;overflow:hidden}@media screen and (orientation: portrait){.app{transform:rotate(90deg);transform-origin:center center;width:100dvh;width:100vh;height:100dvw;height:100vw;position:fixed;top:0;left:0}.piano-area.animated{height:80dvw;height:80vw}.ad-banner-area.animated{height:20dvw;height:20vw}}:fullscreen .app{background:linear-gradient(to bottom right,#dbeafe,#e0e7ff,#fdf2f8)}:-webkit-full-screen .app{background:linear-gradient(to bottom right,#dbeafe,#e0e7ff,#fdf2f8)}:-moz-full-screen .app{background:linear-gradient(to bottom right,#dbeafe,#e0e7ff,#fdf2f8)}:fullscreen .fullscreen-btn{background:#0006784d;border-color:#0002194d}:-webkit-full-screen .fullscreen-btn{background:#0006784d;border-color:#0002194d}:-moz-full-screen .fullscreen-btn{background:#0006784d;border-color:#0002194d}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bubbleUpLeft{0%{opacity:1;transform:translate(0) scale(1)}25%{transform:translate(.2em,-1.5em) scale(1.1)}50%{transform:translate(-.3em,-3em) scale(.9)}75%{transform:translate(.1em,-4.5em) scale(1.05)}to{opacity:0;transform:translate(-.2em,-6em) scale(.7)}}@keyframes bubbleUpRight{0%{opacity:1;transform:translate(0) scale(1)}25%{transform:translate(-.2em,-1.5em) scale(1.1)}50%{transform:translate(.3em,-3em) scale(.9)}75%{transform:translate(-.1em,-4.5em) scale(1.05)}to{opacity:0;transform:translate(.2em,-6em) scale(.7)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.8;transform:translateY(-2em) scale(1.05)}to{opacity:0;transform:translateY(-4em) scale(.8)}}html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}@media screen and (orientation: portrait){.app{width:100dvh;height:100dvw;position:fixed;top:100%;left:0;transform-origin:top left;transform:rotate(-90deg) translate(-100%);position:absolute!important;top:0!important}}