.piano-container{width:100%;overflow-x:auto;padding:var(--sp-4) 0;-webkit-overflow-scrolling:touch;display:flex;justify-content:center}.piano-wrapper{display:inline-flex;transform-origin:top center}.piano{display:flex;min-width:fit-content}.piano-octave{position:relative;display:flex;flex-shrink:0}.piano-key{border:none;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.piano-key-white{width:40px;height:140px;background:linear-gradient(180deg,#f8f6f0,#e8e4da);border-radius:0 0 var(--radius-sm) var(--radius-sm);border:1px solid rgba(0,0,0,.15);border-top:none;position:relative;z-index:1;box-shadow:0 4px 0 var(--piano-white-shadow,#aaa),0 6px 12px var(--piano-white-shadow-outer,rgba(0,0,0,.4))}.piano-key-white:hover{background:linear-gradient(180deg,#fff,#f0ece2)}.piano-key-white:active{background:linear-gradient(180deg,#e8e4da,#d8d4ca);transform:scaleY(.96) translateY(2px)}.piano-key-white.piano-key-highlight{background:#ffe08a;box-shadow:0 4px 0 #c8a830,0 0 12px rgba(201,168,76,.5)}.piano-key-black{position:absolute;width:26px;height:90px;background:linear-gradient(180deg,#2a2520 0,#1a1714 40%,#0f0e0c);border-radius:0 0 4px 4px;z-index:2;top:0;box-shadow:2px 4px 0 #000,0 6px 10px rgba(0,0,0,.6)}.piano-key-black:hover{background:linear-gradient(180deg,#3a3a3a,#1a1a1a)}.piano-key-black:active{background:linear-gradient(180deg,#222,#0a0a0a)}.piano-key-black.piano-key-highlight{background:linear-gradient(180deg,#c9a84c,#7a6330);box-shadow:0 4px 0 #3a2f10,0 0 12px rgba(201,168,76,.4)}.piano-key-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--text-muted);pointer-events:none}@media (max-width:600px){.piano-wrapper{transform:scale(.78);margin-bottom:-20px}}@media (min-width:601px) and (max-width:900px){.piano-wrapper{transform:scale(.88);margin-bottom:-10px}}[data-theme=light] .piano-key-white{--piano-white-shadow:#ccc;--piano-white-shadow-outer:rgba(0,0,0,0.15)}