.octave-indicator.svelte-s1lvda{align-items:center;gap:3px;display:flex}.octave-mark.svelte-s1lvda{background:var(--color-border);border-radius:1px;width:8px;height:3px;transition:background .15s}.octave-mark.active.svelte-s1lvda{background:var(--color-accent);width:12px}.octave-label.svelte-s1lvda{color:var(--color-text-muted);margin-left:.3rem;font-size:.6rem}.piano-wrapper.svelte-dt70ie{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;-webkit-overflow-scrolling:touch;width:100%;padding:1rem 0;overflow:auto hidden}.piano.svelte-dt70ie{--key-w:clamp(20px, 2.4vw, 32px);--key-h:clamp(150px, 19vw, 240px)}.piano.size-small.svelte-dt70ie{--key-w:clamp(14px, 1.5vw, 22px);--key-h:clamp(110px, 14vw, 170px)}.piano.size-large.svelte-dt70ie{--key-w:clamp(26px, 3vw, 40px);--key-h:clamp(180px, 24vw, 300px)}.piano.svelte-dt70ie{--black-w:calc(var(--key-w) * .65);--black-h:calc(var(--key-h) * .62);--black-margin:calc(var(--black-w) / -2);height:var(--key-h);touch-action:none;min-width:fit-content;margin:0 auto;display:flex;position:relative}.key.svelte-dt70ie{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;transition:background 50ms,box-shadow 80ms,height 50ms,margin-top 50ms;position:relative}.key.svelte-dt70ie:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.key.white.svelte-dt70ie{width:var(--key-w);height:var(--key-h);z-index:0;background:linear-gradient(#faf8f4 0%,#f5f2ec 3%,#f0ede6 50%,#e8e4dc 85%,#ddd8ce 100%);border-top:1px solid #fff9;border-bottom:3px solid #b0ab9f;border-right:1px solid #c8c4bc;border-radius:0 0 4px 4px}.key.white.pressed.svelte-dt70ie{height:calc(var(--key-h) - 2px);background:linear-gradient(#f0ede6 0%,#ebe7df 3%,#e5e0d8 50%,#ddd8d0 100%);border-top-color:#0000;border-bottom-width:1px;margin-top:2px;box-shadow:inset 0 -2px 10px #e8d5b733,0 0 16px #e8d5b71f}.key.black.svelte-dt70ie{width:var(--black-w);height:var(--black-h);margin-left:var(--black-margin);margin-right:var(--black-margin);z-index:1;background:linear-gradient(#3a3a3a 0%,#2a2a2a 8%,#1a1a1a 25%,#0d0d0d 70%,#080808 100%);border:1px solid #000;border-top-color:#50505066;border-radius:0 0 3px 3px;box-shadow:0 3px 6px #0009,inset 0 1px #ffffff0d}.key.black.pressed.svelte-dt70ie{height:calc(var(--black-h) - 2px);background:linear-gradient(#444 0%,#333 8%,#222 25%,#151515 100%);border-top-color:#0000;margin-top:2px;box-shadow:0 1px 2px #0000004d,inset 0 0 6px #e8d5b714}.label.svelte-dt70ie{font-family:var(--font-serif);pointer-events:none;opacity:.35;font-size:.65rem;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.key.white.svelte-dt70ie .label:where(.svelte-dt70ie){color:#666}.key.black.svelte-dt70ie .label:where(.svelte-dt70ie){color:#999;font-size:.5rem;bottom:6px}.info-row.svelte-dt70ie{justify-content:center;gap:1.5rem;min-height:1.6rem;margin-top:.5rem;display:flex}.chord-display.svelte-dt70ie{color:var(--color-accent);letter-spacing:.06em;opacity:.8;font-size:1.1rem}.transpose-display.svelte-dt70ie{color:var(--color-text-muted);align-self:center;font-size:.75rem}.piano-status.svelte-dt70ie{align-items:center;gap:1rem;min-height:1.2rem;margin-top:.5rem;display:flex}.sustain-indicator.svelte-dt70ie{color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:.65rem}.midi-status.svelte-dt70ie{color:var(--color-text-muted);opacity:.6;align-items:center;gap:.4rem;font-size:.7rem;display:flex}.midi-dot.svelte-dt70ie{background:var(--color-success);border-radius:50%;width:6px;height:6px}.piano.skin-ivory.svelte-dt70ie .key.white:where(.svelte-dt70ie){background:linear-gradient(#f5eed8,#e4dbc2);border-bottom-color:#b0a48c;border-right-color:#c4b89a}.piano.skin-ivory.svelte-dt70ie .key.white.pressed:where(.svelte-dt70ie){background:linear-gradient(#ece5cf,#ddd4ba)}.piano.skin-ivory.svelte-dt70ie .key.black:where(.svelte-dt70ie){background:linear-gradient(#32302a,#1a1812)}.piano.skin-ivory.svelte-dt70ie .key.black.pressed:where(.svelte-dt70ie){background:linear-gradient(#423f38,#28261e)}.piano.skin-ebony.svelte-dt70ie .key.white:where(.svelte-dt70ie){background:linear-gradient(#d8d4cc,#c0bcb4);border-bottom-color:#908c84;border-right-color:#a09c94}.piano.skin-ebony.svelte-dt70ie .key.white.pressed:where(.svelte-dt70ie){background:linear-gradient(#ccc8c0,#b4b0a8);box-shadow:inset 0 -2px 8px #b4aa9b33,0 0 12px #b4aa9b1a}.piano.skin-ebony.svelte-dt70ie .key.black:where(.svelte-dt70ie){background:linear-gradient(#1a1a1a,#050505);border-color:#000}.piano.skin-ebony.svelte-dt70ie .key.black.pressed:where(.svelte-dt70ie){background:linear-gradient(#2a2a2a,#0f0f0f)}.piano.skin-rosewood.svelte-dt70ie .key.white:where(.svelte-dt70ie){background:linear-gradient(#f6f0e8,#e8ddd0);border-bottom-color:#b8a894;border-right-color:#c8b8a4}.piano.skin-rosewood.svelte-dt70ie .key.white.pressed:where(.svelte-dt70ie){background:linear-gradient(#ede5dc,#ddd2c4);box-shadow:inset 0 -2px 8px #a064461f,0 0 12px #a064460f}.piano.skin-rosewood.svelte-dt70ie .key.black:where(.svelte-dt70ie){background:linear-gradient(#3a1e14,#1e0e08);border-color:#120804}.piano.skin-rosewood.svelte-dt70ie .key.black.pressed:where(.svelte-dt70ie){background:linear-gradient(#4a2e20,#2a1810)}.piano.skin-gold.svelte-dt70ie .key.white:where(.svelte-dt70ie){background:linear-gradient(#faf6ec,#ece4d0);border-bottom-color:#c0b490;border-right-color:#d0c4a0}.piano.skin-gold.svelte-dt70ie .key.white.pressed:where(.svelte-dt70ie){background:linear-gradient(#f0eade,#e4dac4);box-shadow:inset 0 -2px 8px #c8aa6426,0 0 14px #c8aa6414}.piano.skin-gold.svelte-dt70ie .key.black:where(.svelte-dt70ie){background:linear-gradient(#2a2410,#141004);border-color:#0a0800}.piano.skin-gold.svelte-dt70ie .key.black.pressed:where(.svelte-dt70ie){background:linear-gradient(#3a3418,#201a0a)}