html,body{margin:0;padding:0;height:100%;width:100%}.app-wrapper{display:flex;flex-direction:column;min-height:100vh}.site-footer{position:fixed;bottom:0;left:0;width:100%;padding:12px 20px;background:#fff3;color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:999;box-shadow:0 -2px 10px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-weight:500}.footer-links a{color:#333;text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:#000}.footer-links img{height:20px;vertical-align:middle}.footer-copy{font-size:12px;color:#555}.home-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;width:100vw;margin:0;background:linear-gradient(135deg,#a8edea,#fed6e3);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;box-sizing:border-box;padding:40px 20px}.info-section{max-width:850px;width:100%}.home-container h1{font-size:2rem;margin-bottom:12px;color:#222;max-width:850px;width:100%;text-align:center}.home-container p{max-width:850px;width:100%;text-align:left;font-size:1.1rem;color:#333;line-height:1.6}.home-container h1,.home-container h2,.home-container h3{color:#111;text-align:left}.home-container p,.home-container li{color:#555}.home-container strong{color:#222}.button-group{display:flex;justify-content:center;gap:20px;margin-top:20px}.app-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;width:100vw;margin:0;background:linear-gradient(135deg,#a8edea,#fed6e3);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding-top:20px;box-sizing:border-box}.player-box{background-color:#fff;padding:40px 60px;border-radius:15px;box-shadow:0 4px 20px #00000026;text-align:center}.player-box h1{margin-bottom:30px;color:#333}.btn{padding:10px 20px;font-size:16px;border-radius:8px;border:none;cursor:pointer;color:#fff;transition:background-color .3s ease}.btn-purple{background-color:#6c63ff}.btn-purple:hover{background-color:#5a52e0}.btn-pink{background-color:#ff6584}.btn-pink:hover{background-color:#e05370}.back-btn{align-self:flex-start;margin:20px}.playlist{margin-bottom:20px}.playlist-btn{display:block;width:100%;margin:5px 0;padding:10px;border:none;border-radius:6px;cursor:pointer;background-color:#6c63ff;color:#fff;transition:.3s ease}.playlist-btn:hover{background-color:#5a52e0}.playlist-btn.active{background-color:#ff6584}.now-playing{margin:10px 0;font-weight:700;color:#444}.placeholder-msg{color:#666;margin:20px 0;font-style:italic;font-size:.95rem}.visualizer-container{height:140px;display:flex;justify-content:center;align-items:flex-end;position:relative;margin:25px 0;transition:opacity .3s ease}.visualizer-container.active{opacity:1}.visualizer-container.paused{opacity:.6}.visualizer{display:flex;gap:6px;align-items:flex-end;height:100%;animation:fadeIn .35s ease-out}.bar{width:10px;background:linear-gradient(180deg,#ff85a2,#6c63ff);border-radius:4px;transition:height 90ms ease-out,background .2s linear;opacity:.92}.ghost-bar{background:linear-gradient(180deg,#96969666,#50505066);opacity:.4}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.play-btn-wrapper{display:flex;justify-content:center;align-items:center;margin:25px 0;height:70px}.play-btn-circle{width:70px;height:70px;border-radius:50%;border:none;background:linear-gradient(135deg,#6c63ff,#a283ff);color:#fff;font-size:32px;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;margin:auto;box-shadow:0 8px 25px #00000040;transition:transform .15s ease,background .3s ease}.play-btn-circle:hover{transform:scale(1.1);background:linear-gradient(135deg,#5a52e0,#8f71ff)}.play-btn-circle:active{transform:scale(.93)}.progress-container-wrapper{height:10px;margin:15px 0;display:flex;justify-content:center;align-items:center}.progress-container{width:100%;height:10px;background:#eee;border-radius:5px}.progress-bar{height:100%;background-color:#ff6584;border-radius:5px;transition:width .2s linear}.volume-control{width:100%;margin-top:20px}.volume-label{display:block;font-weight:500;margin-bottom:6px;color:#333}.volume-wrapper{position:relative;width:100%;padding-top:30px}.volume-slider{width:100%;appearance:none;height:8px;background:#ddd;border-radius:4px;outline:none}.volume-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#6c63ff;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 3px 10px #00000040}.volume-bubble{position:absolute;top:0;transform:translate(-50%);background:#6c63ff;color:#fff;padding:4px 8px;border-radius:8px;font-size:12px;white-space:nowrap;pointer-events:none;transition:left .1s linear}@media(max-width:600px){.player-box{width:90%;padding:25px}.btn,.playlist-btn{font-size:14px;padding:8px 14px}.visualizer-container{height:90px}.visualizer{height:60px}.bar{width:6px}.app-container{padding:10px;height:auto;min-height:100vh}.home-container h1,.home-container p{max-width:95%}}.piano-page{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;min-height:100vh;width:100%;box-sizing:border-box;background:linear-gradient(135deg,#a8edea,#fed6e3)}.back-btn{position:absolute;top:20px;left:20px}.piano-wrapper{text-align:center}.piano{display:flex;position:relative;margin-top:30px;-webkit-user-select:none;user-select:none}.white-key,.black-key{border:1px solid #333;cursor:pointer;display:inline-flex;justify-content:center;align-items:flex-end;font-size:12px;padding-bottom:8px;box-sizing:border-box;transition:transform .1s ease}.white-key{width:40px;height:160px;background:#fff;z-index:1}.black-key{width:28px;height:100px;background:#000;color:#fff;margin-left:-14px;margin-right:-14px;z-index:2}.key.active{transform:scale(.95);filter:brightness(1.2)}