@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root{--key-width:4vw;--min-key-width:40px;--max-key-width:40px;--key-height:300px;--sharp-width:26px;--sharp-height:140px}.piano-container{overflow-x:auto;padding:0 var(--side-margin);padding-top:3%;padding-bottom:3%}body{text-align:center;font-family:"Poppins",sans-serif;margin:0 auto;padding:60px;background:radial-gradient(circle at center,#0f2027,#203a43,#2c5364)}h1{font-size:5rem;color:#dbedf3;text-shadow:3px 0 #da0463;text-align:center}.pressed{transform:scale(0.95);filter:brightness(0.9);transition:all .1s ease}.keys{display:flex;justify-content:center;width:fit-content;min-width:100%;margin:0 auto;position:relative}.key{flex-shrink:0;position:relative;height:var(--key-height);box-sizing:border-box}.white{width:clamp(var(--min-key-width),var(--key-width),var(--max-key-width));background-color:#fff;border:1px solid #000;z-index:1}.sharp{width:var(--sharp-width);height:var(--sharp-height);background-color:#000;margin:0 calc(var(--sharp-width) * -0.5);z-index:2}.C2_yb,.C3_yb,.C4_yb,.C5_yb,.C6_yb,.C7_yb{position:absolute;width:80%;margin-left:10%;display:flex;justify-content:center;top:105%;transform:translateY(-50%)}.C2_yb{background-color:#FFD700}.C3_yb{background-color:#FDF6E3}.C4_yb{background-color:#F0FFF0}.C5_yb{background-color:#F4F1FF}.C6_yb{background-color:#FFEFEB}.C7_yb{background-color:#F3E9D9}.key span,.sharp span{position:absolute;width:100%;text-align:center;font-size:22px;bottom:10px;left:0}.sharp span{color:#fff;bottom:8px}.key:hover{cursor:pointer}@media (max-width: 600px){:root{--side-margin:.5rem}}.volume-icon{font-size:1.2rem;color:#4cc9f0}.control-item{display:inline-flex;align-items:center;gap:10px;min-width:180px;background:#ffffff1a;padding:8px 12px;border-radius:20px}#volume-control{width:100px;height:8px;-webkit-appearance:none;background:linear-gradient(to right,#4cc9f0,#4361ee);border-radius:4px;outline:none;margin:0 10px}#volume-control::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform .1s}#volume-control::-webkit-slider-thumb:hover{transform:scale(1.1)}#volume-display{color:#4cc9f0;min-width:40px}
.navbar{position:fixed;top:0;left:0;width:100%;height:60px;background-color:#fff;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:center;align-items:center;z-index:1000}.nav-container{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:0 30px}.logo{font-size:24px;font-weight:700;color:#333;text-decoration:none}.nav-links{display:flex;gap:30px}.nav-link{position:relative;color:#555;text-decoration:none;font-size:16px;font-weight:500;transition:color .3s ease}.nav-link:hover{color:#06f}.nav-link.active{color:#06f}.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background-color:#06f;transition:width .3s ease}.nav-link:hover::after,.nav-link.active::after{width:100%}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;top:100%;left:0;background-color:#fff;min-width:160px;box-shadow:0 8px 16px #0000001a;border-radius:0 0 8px 8px;z-index:1;opacity:0;transform:translateY(-10px);transition:all .3s ease}.dropdown:hover .dropdown-content{display:block;opacity:1;transform:translateY(0)}.dropdown-item{color:#555;padding:12px 16px;text-decoration:none;display:block;transition:all .2s}.dropdown-item:hover{background-color:#f5f5f5;color:#06f;padding-left:20px}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #6A5ACD;margin-left:20px}.avatar-img{width:100%;height:100%;object-fit:cover}.filter-panel{background:linear-gradient(150deg,#00ffff80 0%,#f0f9 100%);color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 12px #0000001a;margin-bottom:5px;text-align:center;font-size:41px}