@media(max-width:768px){footer{display:none!important}}@media(orientation:landscape)and (max-height:500px){header{display:none!important}}.back-btn[data-astro-cid-aovpwawn]{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;flex-shrink:0;transition:all .15s}.back-btn[data-astro-cid-aovpwawn]:hover{background:#f1f5f9;color:#1e293b}.back-btn[data-astro-cid-aovpwawn] svg[data-astro-cid-aovpwawn]{width:20px;height:20px}@media(orientation:landscape)and (max-height:500px){.back-btn[data-astro-cid-aovpwawn]{display:flex}}.rotate-prompt[data-astro-cid-aovpwawn]{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#1e293b,#0f172a);z-index:100;align-items:center;justify-content:center}.rotate-content[data-astro-cid-aovpwawn]{text-align:center;color:#fff}.rotate-icon[data-astro-cid-aovpwawn]{width:80px;height:80px;margin:0 auto 1.5rem;animation:rotate-hint 2s ease-in-out infinite}.rotate-text[data-astro-cid-aovpwawn]{font-size:1.25rem;opacity:.9}@keyframes rotate-hint{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(90deg)}}@media(orientation:portrait)and (max-width:768px){.rotate-prompt[data-astro-cid-aovpwawn]{display:flex}.piano-main[data-astro-cid-aovpwawn]{display:none}}.piano-main[data-astro-cid-aovpwawn]{display:flex;flex-direction:column;height:calc(100vh - 100px);height:calc(100dvh - 100px);max-width:100vw;overflow:hidden;padding:0}@media(max-width:768px){.piano-main[data-astro-cid-aovpwawn]{height:calc(100vh - 80px);height:calc(100dvh - 80px)}}@media(orientation:landscape)and (max-height:500px){.piano-main[data-astro-cid-aovpwawn]{height:100vh;height:100dvh}.keyboard-hint[data-astro-cid-aovpwawn]{display:none}}.nav-bar[data-astro-cid-aovpwawn]{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;flex-shrink:0}.minimap-container[data-astro-cid-aovpwawn]{flex:1;min-width:0}.minimap[data-astro-cid-aovpwawn]{position:relative;height:24px;background:#e2e8f0;border-radius:4px;display:flex;overflow:hidden;cursor:pointer}.minimap-key[data-astro-cid-aovpwawn]{flex:1;height:100%;background:#fff;border-right:1px solid #cbd5e1}.minimap-key[data-astro-cid-aovpwawn]:last-child{border-right:none}.minimap-viewport[data-astro-cid-aovpwawn]{position:absolute;top:0;height:100%;background:#24d1f866;border:2px solid #24d1f8;border-radius:3px;pointer-events:none}.quick-jumps[data-astro-cid-aovpwawn]{display:flex;gap:.5rem;flex-shrink:0}.jump-btn[data-astro-cid-aovpwawn]{padding:.375rem .75rem;font-size:.75rem;font-weight:600;background:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .15s}.jump-btn[data-astro-cid-aovpwawn]:hover{background:#f1f5f9;border-color:#cbd5e1}.jump-btn[data-astro-cid-aovpwawn]:active{background:#e2e8f0}@media(max-width:640px){.quick-jumps[data-astro-cid-aovpwawn]{gap:.25rem}.jump-btn[data-astro-cid-aovpwawn]{padding:.25rem .5rem;font-size:.625rem}}.keyboard-container[data-astro-cid-aovpwawn]{flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;background:linear-gradient(to bottom,#1e293b,#334155)}.keyboard-container[data-astro-cid-aovpwawn]::-webkit-scrollbar{display:none}.keyboard[data-astro-cid-aovpwawn]{--white-key-width: 44px;--black-key-width: 26px;--black-key-offset: 13px;position:relative;height:100%;width:calc(52 * var(--white-key-width));min-height:160px}@media(max-width:768px){.keyboard[data-astro-cid-aovpwawn]{--white-key-width: 36px;--black-key-width: 22px;--black-key-offset: 11px}}.key[data-astro-cid-aovpwawn]{position:absolute;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .05s,transform .05s}.white-key[data-astro-cid-aovpwawn]{width:var(--white-key-width);left:calc(var(--key-index) * var(--white-key-width));height:100%;background:linear-gradient(to bottom,#fff,#f1f5f9);border-right:1px solid #cbd5e1;border-bottom:3px solid #94a3b8;border-radius:0 0 6px 6px;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.white-key[data-astro-cid-aovpwawn]:hover{background:linear-gradient(to bottom,#f8fafc,#e2e8f0)}.white-key[data-astro-cid-aovpwawn].active{background:linear-gradient(to bottom,#24d1f8,#0ea5e9)!important;transform:translateY(2px);border-bottom-width:1px;box-shadow:inset 0 0 10px #24d1f880}.black-key[data-astro-cid-aovpwawn]{width:var(--black-key-width);left:calc(var(--key-index) * var(--white-key-width) - var(--black-key-offset));height:60%;background:linear-gradient(to bottom,#1e293b,#0f172a);border-radius:0 0 4px 4px;z-index:2;box-shadow:0 4px 6px #0000004d,inset 0 -2px 4px #0003}.black-key[data-astro-cid-aovpwawn]:hover{background:linear-gradient(to bottom,#334155,#1e293b)}.black-key[data-astro-cid-aovpwawn].active{background:linear-gradient(to bottom,#0891b2,#0e7490);transform:translateY(2px);box-shadow:0 2px 4px #0003}.key-label[data-astro-cid-aovpwawn]{font-size:.625rem;font-weight:600;color:#64748b;pointer-events:none}.white-key[data-astro-cid-aovpwawn].active .key-label[data-astro-cid-aovpwawn]{color:#fff}@media(max-width:768px){.key-label[data-astro-cid-aovpwawn]{font-size:.5rem}}.keyboard-hint[data-astro-cid-aovpwawn]{padding:.5rem 1rem;background:#f8fafc;border-top:1px solid #e2e8f0;text-align:center;font-size:.75rem;color:#64748b;flex-shrink:0}@media(max-width:768px){.keyboard-hint[data-astro-cid-aovpwawn]{display:none}}