@layer components{.ch-piano{flex:none;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:min(336px,100%);height:62px;display:grid;position:relative}.ch-piano[data-wide]{width:100%;height:58px}.ch-wk,.ch-bk{cursor:pointer;transition:transform var(--gp-d-rise) var(--gp-e-rise), box-shadow var(--gp-d-rise) var(--gp-e-rise), background-color var(--gp-d-state) linear;justify-content:center;align-items:flex-end;font-weight:700;display:flex}.ch-wk{background:var(--gp-face);box-shadow:var(--gp-ring-shn), 2px 2px 0 0 var(--gp-shn);color:var(--gp-ink);border-radius:0 0 9px 9px;padding-bottom:6px;font-size:13px}.ch-bk{top:0;left:calc(var(--at) * 100%);z-index:1;background:var(--gp-ink-fill);width:28px;height:36px;box-shadow:2px 2px 0 0 var(--gp-shn);color:var(--gp-on-ink);border-radius:0 0 7px 7px;margin-left:-15px;padding-bottom:4px;font-size:10.5px;position:absolute}.ch-piano[data-wide] .ch-bk{width:24px;height:33px;margin-left:-13px;font-size:9.5px}.ch-wk:hover,.ch-bk:hover{transform:translate(-1px,-1px)}.ch-wk[aria-pressed=true],.ch-bk[aria-pressed=true]{background:var(--gp-m-500);box-shadow:var(--gp-ring-m,0 0 #0000), 3px 3px 0 0 var(--gp-m-sh);color:var(--gp-m-on);transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.ch-wk,.ch-bk{transition:none}}}