:root{--bg:#050b14;--panel:#07121a;--accent-a:#9ecece;--accent-b:#19a0b2;--accent-c:#1c7780;--wk-w:58px;--wk-h:210px;--bk-w:38px;--bk-h:132px}.sv-piano{background:linear-gradient(180deg,rgba(25,160,178,.05),rgba(0,0,0,0));padding:16px;border-radius:14px;width:max-content;margin:0 auto}.sv-piano-keys{position:relative;display:flex;gap:0;width:calc(var(--wk-w) * 8);height:var(--wk-h);padding:0;border-radius:8px;box-shadow:inset 0 1px 0 rgba(25,160,178,.25),0 26px 60px -20px rgba(0,0,0,.8)}.sv-key{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:transform .09s cubic-bezier(.22,1,.36,1),box-shadow .12s,filter .12s}.sv-key,.sv-key:focus,.sv-key:focus-visible,.sv-piano,.sv-piano *,.sv-piano:focus,.sv-piano:focus-visible{outline:none!important}.sv-key-label{bottom:34px;font-size:12px;font-weight:600;letter-spacing:.5px}.sv-key-label,.sv-key-short{position:absolute;left:0;right:0;text-align:center;pointer-events:none}.sv-key-short{bottom:12px;font-size:10px}.sv-key.white{width:var(--wk-w);height:var(--wk-h);background:linear-gradient(180deg,#ffffff,#eef6f7 72%,#d8e8ea);border:1px solid #b9ccce;border-top:none;border-radius:0 0 7px 7px;box-shadow:inset 0 -10px 16px -8px rgba(28,119,128,.35),inset -2px 0 4px -2px rgba(0,0,0,.18);z-index:1}.sv-key.white .sv-key-label{color:#2a4a4e}.sv-key.white .sv-key-short{color:#6f9398}.sv-key.white.hover{background:linear-gradient(180deg,#ffffff,#e6f5f6 70%,#cfeaec)}.sv-key.white.active{transform:translateY(3px) scaleY(.992);background:linear-gradient(180deg,#e9f7f8,#bfe6ea);box-shadow:0 0 0 1px rgba(25,160,178,.5),0 18px 40px -10px rgba(25,160,178,.55),inset 0 -12px 18px -8px rgba(28,119,128,.5)}.sv-key.black{position:absolute;top:0;width:var(--bk-w);height:var(--bk-h);background:linear-gradient(180deg,#14222b,#0a141b 70%,#060d12);border-radius:0 0 5px 5px;box-shadow:0 8px 14px rgba(0,0,0,.6),inset 0 -4px 6px rgba(255,255,255,.04),inset 0 2px 2px rgba(255,255,255,.06);z-index:3}.sv-key.black .sv-key-label{color:rgba(158,206,206,.85);bottom:26px}.sv-key.black .sv-key-short{color:rgba(158,206,206,.45);bottom:9px}.sv-key.black.hover{background:linear-gradient(180deg,#1b2f39,#0d1922)}.sv-key.black.active{transform:translateY(4px);background:linear-gradient(180deg,#1c7780,#0d2a2e);box-shadow:0 0 0 1px rgba(25,160,178,.6),0 20px 42px -10px rgba(25,160,178,.6)}.sv-popup{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);width:230px;max-width:70vw;z-index:50;padding:14px 16px;border-radius:12px;background:rgba(7,18,26,.96);border:1px solid rgba(25,160,178,.4);box-shadow:0 18px 50px -12px rgba(0,0,0,.7),0 0 28px -10px rgba(25,160,178,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:svPop .18s cubic-bezier(.22,1,.36,1) both;pointer-events:none;text-align:left}.sv-key.black .sv-popup{width:220px}.sv-popup:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(25,160,178,.4)}.sv-popup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.sv-popup-note{font-family:Cormorant Garamond,serif;font-size:26px;font-weight:700;color:#9ecece;line-height:1}.sv-popup-chip{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#19a0b2;border:1px solid rgba(25,160,178,.4);border-radius:99px;padding:3px 9px;white-space:nowrap}.sv-popup-story{color:rgba(200,225,228,.78);font-size:12.5px;line-height:1.6;margin:0 0 8px}.sv-popup-key{color:rgba(140,180,190,.55);font-size:11px;letter-spacing:.5px}.sv-popup-key b{color:#9ecece}@keyframes svPop{0%{opacity:0;transform:translate(-50%,6px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}.sv-burst{position:absolute;top:18%;left:50%;width:0;height:0;pointer-events:none;z-index:40}.sv-burst i{position:absolute;left:0;top:0;font-style:normal;font-size:14px;color:#9ecece;text-shadow:0 0 10px rgba(25,160,178,.8);animation:svBurst .72s ease-out forwards;animation-delay:calc(var(--i) * .04s)}.sv-burst i:first-child{--dx:-22px}.sv-burst i:nth-child(2){--dx:14px}.sv-burst i:nth-child(3){--dx:-6px}.sv-burst i:nth-child(4){--dx:24px}@keyframes svBurst{0%{opacity:0;transform:translate(-50%) scale(.6)}25%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-54px) scale(1.1) rotate(12deg)}}.sv-piano-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 6px 4px;color:rgba(160,200,210,.6);font-size:12.5px}.sv-piano-hint{color:var(--accent-a);font-weight:600}@media (prefers-reduced-motion:reduce){.sv-burst,.sv-popup{animation:none}.sv-burst{display:none}}