.web-piano[data-v-4d30ebb8]{--key-gap:2px;--press-white:5px;--press-black:3px;--key-max-w:48px;--key-h:clamp(130px,18vw,210px);background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(129,140,248,.35),transparent),linear-gradient(165deg,#0f172a,#1e1b4b 40%,#312e81);border-radius:12px;color:#e2e8f0;margin:0 auto;padding:24px 16px 32px;text-align:center;width:min(100%,1000px)}.web-piano__title[data-v-4d30ebb8]{font-size:clamp(1.25rem,3vw,1.6rem);font-weight:600;letter-spacing:.06em;margin:0 0 6px}.web-piano__hint[data-v-4d30ebb8]{color:#a5b4fc;font-size:.82rem;line-height:1.6;margin:0 0 24px}.piano[data-v-4d30ebb8],.piano-stage[data-v-4d30ebb8]{overflow:visible;width:100%}.piano[data-v-4d30ebb8]{background:linear-gradient(180deg,#374151,#1f2937 8%,#111827);border-radius:4px 4px 16px 16px;box-shadow:0 32px 64px #00000080,inset 0 1px #ffffff1a,inset 0 -6px 16px #00000059;padding:16px 16px 26px}.piano-top[data-v-4d30ebb8]{background:linear-gradient(180deg,#4b5563,#374151);border-radius:3px 3px 0 0;box-shadow:inset 0 1px #ffffff26;height:12px;margin:0 0 10px}.keyboard[data-v-4d30ebb8]{overflow:visible}.keyboard[data-v-4d30ebb8],.keys-row[data-v-4d30ebb8]{position:relative;width:100%}.keys-row[data-v-4d30ebb8]{height:var(--key-h);margin:0 auto;max-width:calc(var(--key-max-w)*21 + var(--key-gap)*20);--slot-w:calc(4.7619% - var(--key-gap)*20/21);--black-w:calc(var(--slot-w)*.62)}.white-keys[data-v-4d30ebb8]{display:flex;gap:var(--key-gap);height:100%;position:relative;width:100%;z-index:1}.black-keys[data-v-4d30ebb8]{inset:0;pointer-events:none;position:absolute;z-index:2}.white-slot[data-v-4d30ebb8]{flex:1 1 0;height:100%;min-width:0;position:relative}.key[data-v-4d30ebb8]{border:none;cursor:pointer;display:block;font:inherit;margin:0;padding:0;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key.white[data-v-4d30ebb8]{background:linear-gradient(180deg,#fefefe,#f8fafc 55%,#e2e8f0 92%,#cbd5e1);border-radius:0 0 7px 7px;box-shadow:inset 0 -5px 10px #0f172a0f,inset 0 1px #ffffffe6,0 3px 6px #00000047;height:100%;position:relative;transition:transform .1s cubic-bezier(.34,1.45,.64,1),box-shadow .1s ease,background .08s ease;width:100%}.key.white.octave-start[data-v-4d30ebb8]{box-shadow:inset 3px 0 #6366f166,inset 0 -5px 10px #0f172a0f,inset 0 1px #ffffffe6,0 3px 6px #00000047}.key.black[data-v-4d30ebb8]{--wi:0;background:linear-gradient(180deg,#4b5563,#1f2937 55%,#0f172a);border-radius:2px 2px 5px 5px;box-shadow:inset 0 -2px 4px #ffffff12,inset 0 1px #ffffff0f,0 8px 14px #0000008c;height:62%;left:calc((var(--wi) + 1)*(var(--slot-w) + var(--key-gap)) - var(--key-gap)/2 - var(--black-w)/2);pointer-events:auto;position:absolute;top:0;transition:transform .08s cubic-bezier(.34,1.45,.64,1),box-shadow .08s ease,background .06s ease;width:var(--black-w)}.key.white.active[data-v-4d30ebb8],.key.white[data-v-4d30ebb8]:active{background:linear-gradient(180deg,#e2e8f0,#cbd5e1 70%,#94a3b8);box-shadow:inset 0 3px 10px #0f172a33,0 1px 2px #0000002e;transform:translateY(var(--press-white))}.key.black.active[data-v-4d30ebb8],.key.black[data-v-4d30ebb8]:active{background:linear-gradient(180deg,#374151,#111827);box-shadow:inset 0 2px 6px #00000080,0 3px 6px #0000004d;transform:translateY(var(--press-black))}.key-label[data-v-4d30ebb8]{bottom:10px;color:#64748b;font-size:10px;font-weight:600;left:50%;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .12s ease,transform .1s ease}.key.active .key-label[data-v-4d30ebb8]{opacity:.45;transform:translate(-50%) translateY(2px)}.key.black .key-label[data-v-4d30ebb8]{bottom:9px;color:#cbd5e1;font-size:8px;font-weight:500;line-height:1}.octave-mark[data-v-4d30ebb8]{color:#6366f1;font-size:9px;font-weight:600;left:50%;letter-spacing:.04em;opacity:.85;pointer-events:none;position:absolute;top:10px;transform:translate(-50%)}.legend[data-v-4d30ebb8]{color:#94a3b8;display:flex;flex-wrap:wrap;font-size:.75rem;gap:8px 14px;justify-content:center;margin-top:20px}.legend span[data-v-4d30ebb8]{background:#ffffff0f;border:1px solid hsla(0,0%,100%,.08);border-radius:999px;padding:4px 10px}.pedals[data-v-4d30ebb8]{display:flex;gap:12px;justify-content:center;margin-top:18px}.songs-stop-row[data-v-4d30ebb8]{margin-top:10px}.pedal[data-v-4d30ebb8]{background:linear-gradient(180deg,#374151,#1f2937);border:none;border-radius:6px 6px 10px 10px;box-shadow:0 4px #111827,0 6px 16px #00000059;color:#cbd5e1;cursor:pointer;font:inherit;font-size:.78rem;font-weight:500;min-width:88px;padding:10px 18px;transition:transform .08s ease,box-shadow .08s ease,background .08s ease,color .08s ease}.pedal.active[data-v-4d30ebb8],.pedal[data-v-4d30ebb8]:active{background:linear-gradient(180deg,#6366f1,#4f46e5);box-shadow:0 1px #111827,0 2px 8px #00000040;color:#fff;transform:translateY(3px)}.pedal kbd[data-v-4d30ebb8]{background:#ffffff1f;border-radius:4px;display:inline-block;font-size:.72rem;margin-left:4px;padding:1px 5px}.songs[data-v-4d30ebb8]{margin-top:22px}.songs-label[data-v-4d30ebb8]{color:#a5b4fc;display:block;font-size:.78rem;margin-bottom:10px}.song-list[data-v-4d30ebb8]{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.song-btn[data-v-4d30ebb8]{background:#ffffff14;border:1px solid hsla(0,0%,100%,.12);border-radius:999px;color:#e2e8f0;cursor:pointer;font:inherit;font-size:.78rem;padding:8px 14px;transition:background .15s ease,border-color .15s ease,color .15s ease}.song-btn[data-v-4d30ebb8]:hover{background:#6366f140;border-color:#818cf873}.song-btn.playing[data-v-4d30ebb8]{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:transparent;color:#fff}.song-stop[data-v-4d30ebb8]{background:#f871711f;border:1px solid rgba(248,113,113,.35);border-radius:999px;color:#fca5a5;cursor:pointer;font:inherit;font-size:.78rem;padding:8px 16px;transition:background .15s ease}.song-stop[data-v-4d30ebb8]:hover{background:#f8717138}.song-stop[data-v-4d30ebb8]:disabled{cursor:not-allowed;opacity:.35}