.piano-container{-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-direction:column;align-items:center;width:100%;padding:1rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}.octave-controls{gap:.5rem;margin-bottom:1rem;display:flex}.octave-button{color:#374151;cursor:pointer;text-transform:uppercase;letter-spacing:.025em;background-color:#f3f4f6;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;box-shadow:0 1px 2px #0000000d}.octave-button:hover{background-color:#e5e7eb;box-shadow:0 2px 4px #0000001a}.octave-button.active{color:#fff;background-color:#028ae9;box-shadow:0 2px 4px #028ae94d}.dark .octave-button{color:#e5e7eb;background-color:#374151}.dark .octave-button:hover{background-color:#4b5563}.dark .octave-button.active{color:#fff;background-color:#60a5fa}.piano{width:100%;height:250px;margin:20px auto 0;display:block;position:relative}.white-key{float:left;box-sizing:border-box;z-index:2;background:#fffc;border:4px solid #000;border-radius:.5rem;width:14.285%;height:100%;transition:all 70ms;display:block;position:relative}.white-key.active{border-color:#028ae9;transform:scale(.95);box-shadow:0 0 1rem #028ae9}.dark .white-key{background:#ffffff1a;border-color:#fff3}.black-key{color:#eee;z-index:3;background:#000;border:4px solid #000;border-radius:.5rem;width:8%;height:60%;transition:all 70ms;position:absolute;top:0}.black-key.active{border-color:#028ae9;transform:scale(.95);box-shadow:0 0 1rem #028ae9}.black-key[data-note=C\#]{left:10%}.black-key[data-note=D\#]{left:24.285%}.black-key[data-note=F\#]{left:52.855%}.black-key[data-note=G\#]{left:67.14%}.black-key[data-note=A\#]{left:81.425%}.key-label{text-align:center;letter-spacing:.025em;text-transform:uppercase;width:100%;font-size:.875rem;font-weight:500;position:absolute;bottom:7px}.white-key .key-label{color:#374151}.black-key .key-label{color:#fff}.dark .black-key{background:#000c;border-color:#fff3}.dark .white-key .key-label{color:#e5e7eb}