.keyboard[data-v-75cd14bc]{position:relative;flex:1;min-height:180px;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}.key[data-v-75cd14bc]{position:absolute;top:0;padding:0;margin:0;border:0;font:inherit;cursor:pointer;touch-action:none;display:flex;align-items:flex-end;justify-content:center}.white[data-v-75cd14bc]{width:calc(100% / var(--white-keys));height:100%;background:linear-gradient(#fdfdfd,#ecedf0 78%,#d6d8de);border-radius:0 0 8px 8px;box-shadow:inset -1px 0 #0000002e,0 2px 4px #00000059;padding-bottom:10px}.white.sounding[data-v-75cd14bc]{background:linear-gradient(#f6d8b6,#f0bd86)}.black[data-v-75cd14bc]{transform:translate(-50%);width:calc(100% / var(--white-keys) * .62);height:62%;background:linear-gradient(#2b3240,#12161d 85%);border-radius:0 0 6px 6px;box-shadow:0 3px 5px #0000008c;z-index:2}.black.sounding[data-v-75cd14bc]{background:linear-gradient(#8a5a2b,#6b4420)}.label[data-v-75cd14bc]{font-size:11px;letter-spacing:.02em;color:#7b8494;pointer-events:none}@media(max-height:420px){.label[data-v-75cd14bc]{display:none}}.app[data-v-3ff5c7db]{height:100%;display:flex;flex-direction:column;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}.board[data-v-3ff5c7db]{flex:1;min-height:0;display:flex}@media(orientation:portrait){.board[data-v-3ff5c7db]{max-height:62vh;margin-top:auto}}.bar[data-v-3ff5c7db]{display:flex;align-items:center;justify-content:space-between;gap:12px}h1[data-v-3ff5c7db]{margin:0;font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.octave[data-v-3ff5c7db]{display:flex;align-items:center;gap:8px}.octave button[data-v-3ff5c7db]{width:44px;height:36px;border-radius:10px;border:1px solid var(--edge);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation}.octave button[data-v-3ff5c7db]:disabled{opacity:.35;cursor:default}.range[data-v-3ff5c7db]{min-width:76px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent)}.hint[data-v-3ff5c7db]{margin:0;text-align:center;font-size:12px;color:var(--muted)}@media(max-height:420px){.hint[data-v-3ff5c7db]{display:none}.app[data-v-3ff5c7db]{gap:6px;padding:6px 8px 8px}}:root{color-scheme:dark;--ink: #f4f6fb;--muted: #98a2b3;--surface: #10141c;--edge: #232a37;--accent: #f4a261}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;overscroll-behavior:none;background:radial-gradient(120% 100% at 50% 0%,#182031,#0a0d13 60%);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}