.piano{display:flex;justify-content:center;padding:2rem 1rem}.key{position:relative;box-sizing:border-box;border:.5px solid #c2c2c2;border-bottom-left-radius:4px;border-bottom-right-radius:4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1rem;font-weight:700;transition:transform .1s,background-color .1s}.key:active,.key.pressed{transform:translateY(2px);transform-origin:bottom center;z-index:20}.key.playable{transform:scale(1.08,1.15);transform-origin:center center;z-index:8}.key.playable-left{outline:.5px solid #4da3ff;background-color:#f4f9ff}.key.playable-right{outline:.5px solid #ff8c4d;background-color:#fff9f6}.key.playable-both{outline:.5px solid #9b9b9b}.key.playable.pressed{transform:translateY(2px) scale(1.08,1.15);transform-origin:center center}.white.playable,.white.playable.pressed{margin:0 .06rem}.white{background-color:#fafafa;color:#121212;width:2rem;height:9.5rem;z-index:1;margin:0 -.5px}.white:active,.white.pressed{background-color:#dcdcdc}.black{background-color:#121212;color:#f0f0f0;border:#000000;width:1.1rem;height:6.5rem;z-index:30;margin-left:-.55rem;margin-right:-.55rem}.black:active,.black.pressed{background-color:#333;z-index:40}.black.playable{z-index:32}.cube-flip{--cube-depth: .6em;display:inline-grid;position:relative;perspective:800px;perspective-origin:center;cursor:pointer}.cube-flip__ghost{grid-area:1 / 1;visibility:hidden;white-space:pre;line-height:1;padding:.02em .08em;font:inherit;pointer-events:none}.cube-flip__cube{grid-area:1 / 1;display:grid;align-items:center;justify-items:center;position:relative;transform-style:preserve-3d;line-height:1}.cube-flip__face{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;backface-visibility:hidden;transform-style:preserve-3d;padding:.02em .08em}.settings-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;z-index:99}.settings-menu{position:fixed;top:-300px;left:50%;transform:translate(-50%);width:400px;max-width:90vw;background:#1a1a1a;border:2px solid #fff;border-top:none;padding:2rem;z-index:100;box-shadow:0 10px 30px #000c;transition:top .3s cubic-bezier(.25,1,.5,1);display:flex;flex-direction:column;gap:1.5rem}.settings-menu.open{top:0}.setting-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;padding-bottom:.5rem}.setting-label{font-weight:700;color:#888;font-size:.9rem}