body{background:linear-gradient(#f3eefe,#e5dcfb)}.piano{padding:76px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));display:grid;position:absolute;inset:0}.book{--board:#9775fa;--board-dark:#7048e8;--paper:#fffaf0;perspective:2000px;width:min(100%,960px);height:min(100%,720px);margin:auto;position:relative}.book.is-closed{cursor:pointer;animation:2.4s ease-in-out infinite book-float;transform:scale(.7)translate(-25%)}.book.is-vertical.is-closed{transform:scale(.7)translateY(-25%)}.book.is-opening{transition:transform 1.2s cubic-bezier(.45,0,.2,1);transform:scale(.7)}.book.is-open{transition:transform .6s cubic-bezier(.45,0,.2,1)}@keyframes book-float{50%{translate:0 -10px}}.half{background:var(--board);padding:14px;display:flex;position:absolute;box-shadow:0 18px 36px #3b335538}.book.is-opening .half{transition:opacity .4s .7s}.half-low{border-radius:24px 6px 6px 24px;padding-right:4px;inset:0 50% 0 0}.half-high{border-radius:6px 24px 24px 6px;padding-left:4px;inset:0 0 0 50%}.book.is-vertical .half-low{border-radius:6px 6px 24px 24px;padding:4px 14px 14px;inset:50% 0 0}.book.is-vertical .half-high{border-radius:24px 24px 6px 6px;padding:14px 14px 4px;inset:0 0 50%}.book.is-closed .half-low,.book.is-vertical.is-closed .half-high{opacity:0}.book.is-vertical.is-closed .half-low{opacity:1}.page{background:var(--paper);touch-action:none;border-radius:12px;flex:1;gap:8px;padding:12px;display:flex}.book.is-vertical .page{flex-direction:column-reverse}.half-low .page{box-shadow:inset -10px 0 12px -8px #3b335540}.half-high .page{box-shadow:inset 10px 0 12px -8px #3b335540}.book.is-vertical .half-low .page{box-shadow:inset 0 10px 12px -8px #3b335540}.book.is-vertical .half-high .page{box-shadow:inset 0 -10px 12px -8px #3b335540}.book:not(.is-open) .key{pointer-events:none}.cover{z-index:2;transform-origin:0;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.55,.05,.35,1);position:absolute;inset:0 0 0 50%}.book.is-vertical .cover{transform-origin:top;inset:50% 0 0}.book.is-opening .cover,.book.is-open .cover{transform:rotateY(-180deg)}.book.is-vertical.is-opening .cover,.book.is-vertical.is-open .cover{transform:rotateX(180deg)}.book.is-open .cover{pointer-events:none}.cover-back{transition:opacity .4s}.book.is-open .cover-back{opacity:0}.cover-front,.cover-back{backface-visibility:hidden;position:absolute;inset:0}.cover-front{background:linear-gradient(90deg, var(--board-dark) 0 9%, #845ef7 9% 11%, var(--board) 11%);border-radius:6px 24px 24px 6px;place-items:center;display:grid;box-shadow:5px 5px #fff,10px 10px #e5dbff,0 22px 40px #3b33554d}.book.is-vertical .cover-front{background:linear-gradient(180deg, var(--board-dark) 0 9%, #845ef7 9% 11%, var(--board) 11%);border-radius:6px 6px 24px 24px}.cover-front:before{content:"";border:4px dashed #ffffff8c;border-radius:18px;position:absolute;inset:18px 18px 18px calc(11% + 12px)}.book.is-vertical .cover-front:before{inset:calc(11% + 12px) 18px 18px}.cover-front svg{aspect-ratio:1;width:min(50%,220px);height:auto;max-height:50%}.cover-back{background:var(--board);border-radius:6px 24px 24px 6px;padding:14px 4px 14px 14px;display:flex;transform:rotateY(180deg)}.book.is-vertical .cover-back{border-radius:6px 6px 24px 24px;padding:4px 14px 14px;transform:rotateX(180deg)}.book-hint{pointer-events:none;width:0;height:0;transition:opacity .15s;position:absolute;top:62%;left:62%}.book:not(.is-closed) .book-hint{opacity:0}.book-hand{transform-origin:34px 5px;filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;animation:1.6s ease-in-out infinite book-tap;position:absolute;top:-5px;left:-34px;overflow:visible;scale:1.4}.book-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}@keyframes book-tap{0%,to{transform:translate(18px,28px)rotate(-12deg)}35%{transform:translate(0)rotate(-12deg)}45%{transform:translate(0)rotate(-12deg)scale(.88)}55%{transform:translate(0)rotate(-12deg)}}.key{background:var(--c);box-shadow:inset 0 0 0 3px #ffffff59, 0 6px 0 color-mix(in srgb, var(--c) 65%, #000);border-radius:14px;flex:1;transition:transform 80ms,box-shadow .15s,filter .15s;position:relative}.key.is-down{z-index:1;filter:brightness(1.2)saturate(1.15);box-shadow:inset 0 0 0 4px #ffffffd9, 0 1px 0 color-mix(in srgb, var(--c) 65%, #000), 0 0 0 4px #ffffffe6, 0 0 30px 8px var(--c);transform:translateY(6px)scale(.96)}.key:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}.key.is-hit:after{animation:.35s ease-out key-flash}@keyframes key-flash{0%{opacity:.75}to{opacity:0}}.ripple{z-index:3;width:160px;height:160px;box-shadow:0 0 0 3px var(--c), inset 0 0 0 3px var(--c);pointer-events:none;border:8px solid #fff;border-radius:50%;margin:-80px 0 0 -80px;animation:.6s ease-out forwards ripple;position:absolute}@keyframes ripple{0%{opacity:1;transform:scale(.15)}60%{opacity:.95}to{opacity:0;transform:scale(1)}}.float-note{z-index:4;color:#3b3355;pointer-events:none;filter:drop-shadow(0 0 2px #fff)drop-shadow(0 2px 3px #3b33554d);width:44px;height:55px;margin:-40px 0 0 -22px;animation:.9s ease-out forwards float-note;position:absolute}.float-note svg{width:100%;height:100%;display:block}@keyframes float-note{0%{opacity:0;transform:translate(0)scale(.5)}15%{opacity:1;transform:translateY(-10px)scale(1.05)}to{transform:translate(var(--drift), -90px) scale(.9);opacity:0}}.half,.page{transition:background-color .5s,box-shadow .5s,padding .5s}.book.is-flat .half,.book.is-flat .half .page{box-shadow:none;background-color:#0000;padding:0}.book.is-flat .half-low{padding-right:4px}.book.is-flat .half-high{padding-left:4px}.book.is-vertical.is-flat .half-low{padding:4px 0 0}.book.is-vertical.is-flat .half-high{padding:0 0 4px}