.hv25-piano-wrap{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid rgba(20,34,42,.18);
  background:linear-gradient(180deg,#1a2329 0%,#10181d 65%,#0b1216 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(17,31,39,.07);
  padding:11px
}
.hv25-piano{
  position:relative;min-width:980px;aspect-ratio:1591/495;overflow:hidden;
  border-radius:11px;background:#10181d;touch-action:none;user-select:none
}
.hv25-piano-art{
  position:absolute;z-index:0;left:-24.20%;top:-26.27%;width:131.87%;
  height:auto;max-width:none!important;pointer-events:none;user-select:none;-webkit-user-drag:none
}
.hv25-whites{
  position:absolute;z-index:2;left:0;right:0;top:9.7%;bottom:11.7%;display:flex
}
.hv25-key{
  position:relative;display:block;margin:0;padding:0;border:0;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent
}
.hv25-key::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:transform 42ms cubic-bezier(.2,.8,.2,1),opacity 42ms linear,
             box-shadow 42ms linear,background 42ms linear;
  transform:translateY(0)
}
.hv25-key.white{flex:1 0 0;height:100%}
.hv25-key.white::before{
  border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(232,238,241,.18) 68%,rgba(193,210,219,.30) 100%);
  box-shadow:inset 0 -4px 7px rgba(29,54,67,.16),inset 0 0 0 1px rgba(61,102,122,.10)
}
.hv25-key.black{
  position:absolute;z-index:4;top:9.7%;
  left:calc((var(--wi)*100%/21) - (100%/21*.31));
  width:calc(100%/21*.62);height:49.7%
}
.hv25-key.black::before{
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,rgba(17,29,35,.08) 0%,rgba(5,14,18,.28) 72%,rgba(88,139,161,.22) 100%);
  box-shadow:inset 0 -4px 6px rgba(0,0,0,.42),inset 0 0 0 1px rgba(171,213,230,.11)
}
.hv25-key.white.active::before{
  opacity:1;transform:translateY(6px) scaleY(.985);
  box-shadow:inset 0 7px 10px rgba(24,49,62,.16),inset 0 -2px 3px rgba(255,255,255,.30),0 3px 4px rgba(28,47,56,.14)
}
.hv25-key.black.active::before{
  opacity:1;transform:translateY(4px) scaleY(.975);
  box-shadow:inset 0 6px 8px rgba(0,0,0,.48),inset 0 -2px 3px rgba(151,197,215,.15),0 2px 3px rgba(0,0,0,.22)
}
.hv25-key.white.active::after,.hv25-key.black.active::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-5px;height:4px;
  border-radius:0 0 4px 4px;background:rgba(55,91,108,.18);pointer-events:none
}
.hv25-key.black.active::after{bottom:-3px;height:3px;background:rgba(0,0,0,.28)}
.hv25-key:focus-visible{outline:2px solid rgba(72,139,173,.72);outline-offset:-3px}
.hv25-label{
  position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:none;
  padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.84);color:#385061;
  font-size:11px;line-height:1;pointer-events:none
}
.hv25-piano.show-labels .hv25-label{display:block}
.hv25-key.black .hv25-label{bottom:6px;background:rgba(12,22,28,.82);color:#f4f6f7;font-size:9px}

.hvp2-piano-shell.hv25-upgraded{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.hvp2-piano-shell.hv25-upgraded .hv25-piano-wrap{width:100%}
.hvp2-piano-shell.hv25-upgraded .hvp2-piano-scroll{overflow-x:auto;padding:0!important;border-radius:18px}
.hvp2-piano-shell.hv25-upgraded #hvp2-piano{
  min-width:980px!important;height:auto!important;aspect-ratio:1591/495!important;
  overflow:hidden!important;background:#10181d!important
}
.hvp2-piano-shell.hv25-upgraded #hvp2-whites{
  position:absolute!important;left:0!important;right:0!important;top:9.7%!important;bottom:11.7%!important;display:flex!important
}

.hv25-home-piano-section{padding:18px 0 26px!important;margin:0!important;background:#fff}
.hv25-home-piano-section .hv25-home-inner{width:min(1168px,calc(100% - 48px));margin-inline:auto}
.hv25-home-piano-section .hv25-home-piano-scroll{overflow-x:auto;border-radius:18px}
.hv25-home-piano-section .hv25-piano{min-width:940px}
.hv25-home-meta{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:10px;color:#627884;font-size:13px;line-height:1.45
}
.hv25-home-note strong{color:#18384f;font-weight:650}
.hv25-home-links{display:flex;gap:18px;flex-wrap:wrap}
.hv25-home-links a{color:#18384f;text-decoration:none;font-weight:600}
.hv25-home-links a:hover{text-decoration:underline}
.hv25-home-piano-section + section{margin-top:0!important}

@media (prefers-reduced-motion:reduce){.hv25-key::before{transition:none}}
@media (min-width:980px) and (max-height:920px){
  .hv25-home-piano-section{padding-top:12px!important;padding-bottom:18px!important}
  .hv25-home-piano-section .hv25-piano{min-width:900px}
}
@media(max-width:720px){
  .hv25-piano-wrap{padding:8px;border-radius:14px}
  .hv25-piano{min-width:900px;border-radius:9px}
  .hv25-home-piano-section{padding:22px 0 28px!important}
  .hv25-home-piano-section .hv25-home-inner{width:min(100% - 32px,1168px)}
  .hv25-home-meta{align-items:flex-start;flex-direction:column}
}