.volume-control.svelte-zy4xj6.svelte-zy4xj6{display:flex;align-items:center;gap:10px}.volume-control.svelte-zy4xj6 input[type=range].svelte-zy4xj6{width:200px}@media (min-width: 912px) and (max-width: 1660px){.wrapper.svelte-zy4xj6.svelte-zy4xj6{width:-moz-max-content;width:max-content;padding:5em;border-radius:20px;background:linear-gradient(-65deg,#211f1f,#3e3e3e,#242121,#666,#1f1c1c 75%);box-shadow:inset 0 -1px 1px #ffffff70,inset -.4rem .4rem #282828,0 0 50px #00000080 inset,0 5px 15px #00000080}}@media (min-width: 740px) and (max-width: 912px){.wrapper.svelte-zy4xj6.svelte-zy4xj6{width:-moz-max-content;width:max-content;padding:5em;border-radius:20px;background:linear-gradient(-65deg,#211f1f,#3e3e3e,#242121,#666,#1f1c1c 75%);box-shadow:inset 0 -1px 1px #ffffff70,inset -.4rem .4rem #282828,0 0 50px #00000080 inset,0 5px 15px #00000080}}@media (max-width: 740px){.piano-keys.svelte-zy4xj6 .white.svelte-zy4xj6{height:280px!important;display:flex;flex-direction:row;justify-content:center;align-items:flex-end;width:var(--white-w);font-weight:600;border:1px solid #000;border-left:1px solid #fff2;border-bottom:1px solid #bababa;border-radius:0 0 5px 5px;box-shadow:-1px 0 #fffc inset,0 0 3px #0003,inset -15px 0 20px #0006,inset 3px 0 20px #fff,0 5px 5px #000!important;background:linear-gradient(to bottom,#ededed,#fff);color:#0000004d}.piano-keys.svelte-zy4xj6 .black.svelte-zy4xj6{z-index:2;width:44px;height:180px!important;margin:0 -22px;border:1px solid #000;border-radius:0 0 3px 3px;box-shadow:-1px -1px 2px #fff3 inset,0 -5px 2px 3px #0009 inset,0 2px 4px #00000080;background:#3e3f42;color:#ffffff80}.piano-keys.svelte-zy4xj6 .white.svelte-zy4xj6:active{height:250px;width:var(--white-w);border:1px solid #000;border-left:1px solid #fff2;border-bottom:1px solid #bababa;border-radius:0 0 5px 5px;box-shadow:-1px 0 #fffc inset,0 0 3px #0003,inset -15px 0 20px #0006,inset 3px 0 20px #fff,0 5px 5px #000;background:linear-gradient(to bottom,#ffffff4d,#fff);color:#0000004d}.wrapper.svelte-zy4xj6.svelte-zy4xj6{width:-moz-max-content;width:max-content;padding:1.5em;border-radius:20px;background:#3e3f42;box-shadow:inset 0 -1px 1px #ffffff70,inset -.4rem .4rem #282828,0 0 50px #00000080 inset,0 5px 15px #00000080}}.wrapper.svelte-zy4xj6.svelte-zy4xj6{--white-w:50px;--visible-white:14;width:-moz-max-content;width:max-content;padding:1em;border-radius:20px;background:linear-gradient(180deg,#37373d,#29292e 52%,#1b1b1f);box-shadow:inset 0 1px #ffffff2e,inset 0 -2px 6px #000000a6,inset 0 0 60px #0005,0 1px #00000080,0 20px 42px -14px #000c}@media (min-width: 1660px){.wrapper.svelte-zy4xj6.svelte-zy4xj6{--visible-white:22}}@media (max-width: 740px){.wrapper.svelte-zy4xj6.svelte-zy4xj6{--white-w:70px;--visible-white:7}}.piano-viewport.svelte-zy4xj6.svelte-zy4xj6{overflow:hidden;width:calc(var(--visible-white) * var(--white-w));max-width:100%;padding-bottom:6px}.piano-felt.svelte-zy4xj6.svelte-zy4xj6{width:calc(var(--visible-white) * var(--white-w));max-width:100%;height:3px;margin:0 auto;border-radius:2px 2px 0 0;background:linear-gradient(90deg,#5c1922,#7e2634 22%,#6b1f2b,#7e2634 78%,#5c1922);box-shadow:0 1px 3px #00000073,inset 0 1px #ffffff1a}.piano-topbar.svelte-zy4xj6.svelte-zy4xj6{display:flex;flex-direction:column;align-items:center;width:100%}.octave-controls.svelte-zy4xj6.svelte-zy4xj6{display:flex;align-items:center;gap:14px;margin-bottom:1.25em}.octave-btn.svelte-zy4xj6.svelte-zy4xj6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#d7d7de;background:radial-gradient(125% 125% at 50% 22%,#57575f,#34343a 46%,#1d1d21);border:1px solid #0c0c0f;box-shadow:0 2px 5px #000000a6,inset 0 1px 1px #ffffff45,inset 0 -3px 4px #00000080;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,color .15s ease,opacity .2s ease}.octave-btn.svelte-zy4xj6.svelte-zy4xj6:hover:not(:disabled){transform:translateY(-1px);color:#fff;box-shadow:0 5px 11px #000000b8,inset 0 1px 1px #ffffff5c,inset 0 -3px 4px #00000080}.octave-btn.svelte-zy4xj6.svelte-zy4xj6:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 2px #0009,inset 0 2px 4px #000000b3}.octave-btn.svelte-zy4xj6.svelte-zy4xj6:disabled{opacity:.28;cursor:not-allowed}.octave-label.svelte-zy4xj6.svelte-zy4xj6{min-width:108px;text-align:center;padding:.35em .9em;border-radius:7px;color:#cdd8d0;font-family:ui-monospace,SF Mono,Roboto Mono,Courier New,monospace;font-size:13px;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#101012,#17171b);border:1px solid #000000;box-shadow:inset 0 1px 3px #000c,inset 0 -1px #ffffff12,0 1px #ffffff0d}.piano-keys.svelte-zy4xj6.svelte-zy4xj6{padding:0;margin:0;display:flex;width:-moz-max-content;width:max-content;list-style:none;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}.piano-keys.svelte-zy4xj6 .pianoKey.svelte-zy4xj6{flex:0 0 auto}.piano-keys.svelte-zy4xj6 .white.svelte-zy4xj6{height:200px;display:flex;flex-direction:row;justify-content:center;align-items:flex-end;width:var(--white-w);font-weight:600;border:1px solid #0000001f;border-radius:0 0 6px 6px;box-shadow:inset 0 1px #fff,inset -5px 0 7px -4px #0000002e,inset 5px 0 6px -4px #fff,inset 0 -7px 6px -5px #00000024,0 3px 4px #00000038;background:linear-gradient(to bottom,#fff,#f4f4f1 90%,#e8e8e3);color:#00000059}.piano-keys.svelte-zy4xj6 .white.svelte-zy4xj6:active{height:205px;width:var(--white-w);border-radius:0 0 6px 6px;box-shadow:inset 0 1px #fff,inset -5px 0 7px -4px #00000040,inset 0 8px 12px -6px #0003,0 1px 2px #0000004d;background:linear-gradient(to bottom,#efefeb,#e0e0da);color:#00000059}.piano-keys.svelte-zy4xj6 .key span.svelte-zy4xj6{position:absolute;bottom:20px;width:100%;color:#a2a2a2;font-size:18px;text-align:center;color:#0000004d;font-family:Roboto;font-weight:500}.piano-header.svelte-zy4xj6.svelte-zy4xj6{margin:0;width:100%;text-align:center;padding-top:0;padding-bottom:.85em;font-family:Georgia,Times New Roman,serif;font-size:13px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#9a9aa4;text-shadow:0 1px 1px #000000a6}.piano-keys.svelte-zy4xj6 .black.svelte-zy4xj6{z-index:2;width:44px;height:120px;margin:0 -22px;border:1px solid #000000;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#46464b,#26262a 7%,#141417 55%,#060607);box-shadow:inset 0 2px 1px #ffffff30,inset 2px 0 3px -1px #ffffff1a,inset -2px 0 3px -1px #0009,inset 0 -7px 6px -3px #000000a6,0 4px 5px #000000a6;color:#ffffffb3}.piano-keys.svelte-zy4xj6 .black.svelte-zy4xj6:active{z-index:2;width:44px;height:124px;margin:0 -22px;border:1px solid #000000;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#3a3a3f,#1b1b1e 55%,#0a0a0b);box-shadow:inset 0 2px 1px #ffffff26,inset 0 -5px 5px -3px #000000a6,0 2px 3px #000000a6;color:#ffffffb3}