*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d;max-width:1200px;width:100%}h1{text-align:center;color:#333;margin-bottom:30px;font-size:2.5em}.controls{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:30px;flex-wrap:wrap}.control-btn{padding:12px 24px;font-size:16px;border:none;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s ease;font-weight:700}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.control-btn:disabled{opacity:.5;cursor:not-allowed}.song-select{padding:12px 20px;font-size:16px;border:2px solid #667eea;border-radius:8px;background:#fff;cursor:pointer;outline:none}.piano-container{display:flex;justify-content:center;overflow-x:auto;padding:20px 0;margin-bottom:20px}.piano{display:flex;position:relative;background:#f0f0f0;padding:10px;border-radius:10px;box-shadow:inset 0 0 20px #0000001a}.key{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .1s ease}.key.white{width:60px;height:250px;background:linear-gradient(to bottom,#fff,#f5f5f5);border:1px solid #ddd;border-radius:0 0 8px 8px;margin-right:-1px;z-index:1;box-shadow:0 2px 5px #0000001a}.key.white:hover{background:linear-gradient(to bottom,#f0f0f0,#e5e5e5)}.key.white.active{background:linear-gradient(to bottom,#e0e0e0,#d0d0d0);transform:translateY(2px);box-shadow:inset 0 2px 5px #0003}.key.black{width:40px;height:160px;background:linear-gradient(to bottom,#333,#000);border:1px solid #000;border-radius:0 0 5px 5px;margin-left:-20px;margin-right:-20px;z-index:2;box-shadow:0 3px 8px #0006}.key.black:hover{background:linear-gradient(to bottom,#444,#111)}.key.black.active{background:linear-gradient(to bottom,#222,#000);transform:translateY(1px);box-shadow:inset 0 2px 5px #00000080}.key-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:12px;color:#666;font-weight:700}.key.black .key-label{color:#fff}.info{text-align:center;color:#666;font-size:14px;margin-top:20px}@media (max-width: 768px){.key.white{width:45px;height:200px}.key.black{width:30px;height:130px}h1{font-size:2em}}