.keybtn-wrap{margin-top:10px}.keybtn,.keybtn-wrap{position:relative;display:block}.keybtn{width:100%;height:58px;padding:0;border:0;border-radius:var(--radius-6) var(--radius-6) 16px 16px;background:linear-gradient(180deg,var(--keybtn-face-top) 0,var(--keybtn-face) 36%);color:var(--keybtn-fg);font:inherit;cursor:pointer;box-shadow:inset 0 1px 0 var(--keybtn-sheen),0 8px 0 var(--keybtn-front),0 10px 0 var(--keybtn-bed),0 18px 26px -14px var(--keybtn-drop);transition:transform .13s var(--ease-out),box-shadow .13s var(--ease-out),filter .13s var(--ease)}.keybtn-face{display:flex;align-items:center;justify-content:center;gap:9px;height:100%;font-size:16.5px;font-weight:700;letter-spacing:-.02em}@media (hover:hover){.keybtn:hover:not(:disabled){filter:brightness(1.03);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--keybtn-sheen),0 9px 0 var(--keybtn-front),0 11px 0 var(--keybtn-bed),0 24px 32px -16px var(--keybtn-drop)}}.keybtn:active:not(:disabled){transform:translateY(8px);box-shadow:inset 0 3px 8px -2px var(--key-groove),0 0 0 var(--keybtn-front),0 2px 0 var(--keybtn-bed),0 4px 8px -6px var(--keybtn-drop);transition-duration:.05s}.keybtn:focus-visible{outline:none;box-shadow:inset 0 1px 0 var(--keybtn-sheen),0 8px 0 var(--keybtn-front),0 10px 0 var(--keybtn-bed),0 0 0 3px var(--keybtn-ring-gap),0 0 0 5px var(--primary)}.keybtn:disabled{cursor:default;filter:brightness(.9) saturate(.9);box-shadow:inset 0 1px 0 var(--keybtn-sheen),0 8px 0 var(--keybtn-front),0 10px 0 var(--keybtn-bed)}.keybtn-notes{position:absolute;left:0;right:0;bottom:46px;height:0;pointer-events:none;z-index:2}.keybtn-notes i{position:absolute;left:var(--at,50%);bottom:0;display:block;line-height:0;filter:drop-shadow(0 2px 5px var(--keybtn-drop));animation:keybtn-note var(--t,1.2s) cubic-bezier(.18,.72,.3,1) var(--d,0s) both}@keyframes keybtn-note{0%{opacity:0;transform:translate(-50%,6px) scale(.5) rotate(calc(var(--r, 0deg) * -.5))}14%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--sway, 0px)),var(--lift,-86px)) scale(var(--s,1)) rotate(var(--r,0deg))}}.keybtn-eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px}.keybtn-eq i{width:3px;height:5px;border-radius:2px;background:currentColor;animation:keybtn-eq .9s ease-in-out infinite}.keybtn-eq i:nth-child(2){animation-delay:.15s}.keybtn-eq i:nth-child(3){animation-delay:.3s}@keyframes keybtn-eq{0%,to{height:5px}50%{height:15px}}@media (prefers-reduced-motion:reduce){.keybtn{transition:none}.keybtn-eq i{animation:none;height:10px}.keybtn-notes{display:none}}