.piano-container{background:linear-gradient(145deg,#1f2937,#374151);border-radius:var(--radius-lg);padding:2rem;margin:2rem 0;box-shadow:var(--shadow-large)}.piano-keyboard{display:flex;justify-content:center;align-items:flex-end;position:relative;margin:0 auto;height:200px}.keyboard-wrapper{position:relative;display:flex;align-items:flex-end}.piano-key{position:relative;border:2px solid var(--border-color);border-radius:0 0 8px 8px;cursor:pointer;user-select:none;transition:.1s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-size:.8rem;font-weight:700}.piano-key.white{background:linear-gradient(180deg,#fff 0,#f8f9fa 50%,#e9ecef 100%);width:60px;height:180px;z-index:1;color:#374151;border-color:#d1d5db;margin-right:2px}.piano-key.black{background:linear-gradient(180deg,#1f2937 0,#111827 50%,#000 100%);width:40px;height:120px;position:absolute;z-index:2;color:#fff;border-color:#000}.piano-key:hover{transform:translateY(2px);box-shadow:0 2px 8px rgba(0,0,0,.2)}.piano-key.white:hover{background:linear-gradient(180deg,#f8f9fa 0,#e9ecef 50%,#dee2e6 100%)}.piano-key.black:hover{background:linear-gradient(180deg,#374151 0,#1f2937 50%,#111827 100%)}.piano-key.active{transform:translateY(4px);box-shadow:inset 0 3px 10px rgba(0,0,0,.3)}.piano-key.white.active{background:linear-gradient(180deg,#e9ecef 0,#dee2e6 50%,#ced4da 100%)}.piano-key.black.active{background:linear-gradient(180deg,#4b5563 0,#374151 50%,#1f2937 100%)}.piano-controls{display:flex;align-items:center;gap:1rem}.range-input,input[type=range]{width:100px;margin:0 .5rem}.control-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.control-group label{font-weight:600;min-width:80px}.instruction-list{list-style:none;padding:0}.instruction-list li{padding:.25rem 0;color:var(--text-secondary)}.instruction-list li strong{color:var(--text-primary)}.mx-md{margin:0 var(--spacing-md)}.ml-sm{margin-left:var(--spacing-sm)}@media (max-width:768px){.piano-container{padding:1rem}.piano-keyboard{height:150px;gap:1px}.piano-key.white{width:40px;height:130px;font-size:.7rem}.piano-key.black{width:28px;height:90px;margin-left:-14px}.piano-controls{flex-direction:column;gap:.5rem}.control-group{justify-content:space-between;width:100%}}@media (max-width:480px){.piano-key.white{width:32px;height:120px;font-size:.6rem;padding-bottom:5px}.piano-key.black{width:22px;height:80px;margin-left:-11px}.piano-keyboard{height:130px}}