.piano-view{width:100vw;height:100vh;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0;position:relative}.octave-controls{display:flex;align-items:center;gap:20px;margin-bottom:40px}.octave-btn{width:60px;height:60px;background:#666;border:2px solid #999;border-radius:4px;color:#ddd;font-size:24px;font-weight:700;cursor:pointer;transition:all .1s}.octave-btn:hover{background:#777}.octave-btn:active{background:#555}.octave-display{font-size:18px;color:#ddd;font-weight:700;min-width:120px;text-align:center}.piano-keyboard{position:relative;width:95%;max-width:1400px;height:300px}.white-keys-container{position:relative;width:100%;height:100%;display:flex;gap:2px}.white-key{flex:1;min-width:clamp(40px,8vw,60px);height:100%;background:linear-gradient(to bottom,#fff,#f5f5f5);border:2px solid #333;border-radius:0 0 8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px;transition:all .05s;box-shadow:0 4px 6px #0000004d}@media(max-width:768px){.white-key{min-width:50px;padding-bottom:15px}.white-key .key-label{font-size:16px}.white-key .key-bind{font-size:12px}}.white-key:hover{background:linear-gradient(to bottom,#f0f0f0,#e0e0e0)}.white-key.active{background:linear-gradient(to bottom,#4fc3f7,#29b6f6);transform:translateY(4px);box-shadow:0 2px 3px #00000080}.white-key .key-label{font-size:14px;font-weight:700;color:#333;margin-bottom:5px}.white-key.active .key-label{color:#fff}.white-key .key-bind{font-size:11px;color:#666;opacity:.7}.white-key.active .key-bind{color:#fff;opacity:1}.black-keys-container{position:absolute;top:0;left:0;width:100%;height:60%;pointer-events:none}.black-key{position:absolute;width:clamp(35px,6vw,50px);height:100%;background:linear-gradient(to bottom,#222,#000);border:2px solid #000;border-radius:0 0 6px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:15px;pointer-events:auto;transform:translate(-50%);transition:all .05s;box-shadow:0 6px 10px #000000b3;z-index:10}.black-key:hover{background:linear-gradient(to bottom,#333,#111)}.black-key.active{background:linear-gradient(to bottom,#0288d1,#01579b);transform:translate(-50%) translateY(4px);box-shadow:0 3px 5px #000c}.black-key .key-label{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px}.black-key .key-bind{font-size:10px;color:#aaa;opacity:.8}.black-key.active .key-bind{color:#fff;opacity:1}