.connectKeyboard{--connect-paper:#fcfafa;--connect-ink:#0e041c;--connect-key-front:#080212;--connect-key-edge:#1a0a2c;perspective:1180px;perspective-origin:50% 12%;box-sizing:border-box;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;width:min(100%,36rem);max-width:100%;color:var(--connect-ink);background:0 0;margin-inline:auto;padding:.85rem .55rem 1.35rem;overflow:visible}.connectKeyboard__base{box-sizing:border-box;width:100%;color:var(--connect-ink);transform-origin:50% 85%;transform-style:preserve-3d;background:linear-gradient(#fcfafa 0%,#f6f1f2 100%);border:0;border-radius:.55rem;padding:.42rem .48rem .5rem;position:relative;transform:rotateX(16deg);box-shadow:inset 0 1px #fcfafaf2,0 12px 22px #0e041c1f}.connectKeyboard__base:after{content:"";transform-origin:bottom;pointer-events:none;background:linear-gradient(#efe7e9 0%,#ddd3d6 100%);border-radius:0 0 .32rem .32rem;height:.55rem;position:absolute;bottom:0;left:.18rem;right:.18rem;transform:rotateX(-90deg);box-shadow:0 10px 16px #0e041c1a}.connectKeyboard__keys{transform-style:preserve-3d;grid-template-columns:repeat(7,minmax(0,1fr));align-items:start;gap:clamp(.22rem,1.35vw,.62rem);display:grid;overflow:visible}.connectKey{--key-size:min(100%, 3.45rem);appearance:none;box-sizing:border-box;width:100%;max-width:var(--key-size);color:var(--connect-paper);cursor:pointer;transform-style:preserve-3d;touch-action:manipulation;background:linear-gradient(#140820 0%,#0a0314 55%,#05010c 100%);border:0;border-radius:22%;margin:0 auto;padding:.15rem .16rem .11rem;transition:transform .18s cubic-bezier(.25,.82,.32,1);display:block;position:relative;transform:translateZ(1.08rem)}.connectKey__face{z-index:1;aspect-ratio:1;background:linear-gradient(#15101f 0%,#0e041c 38% 68%,#090214 100%);border-radius:16%;justify-content:center;align-items:center;width:100%;transition:box-shadow .18s;display:flex;position:relative;box-shadow:inset 0 1.5px #fcfafa1c,inset 0 -3px 4px #05010c8c,0 .9rem .55rem -.12rem #0e041c57}.connectKey:before{content:"";transform-origin:bottom;pointer-events:none;background:linear-gradient(#10081a 0%,#05010c 100%);border-radius:0 0 18% 18%;height:.95rem;transition:transform .18s cubic-bezier(.25,.82,.32,1);position:absolute;bottom:6%;left:4%;right:4%;transform:rotateX(-90deg)}.connectKey[data-heart=true] .connectKey__legend{letter-spacing:0;font-size:clamp(.92rem,3vw,1.7rem);font-weight:400}.connectKey__legend{color:#fcfafa;letter-spacing:.04em;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Helvetica,Arial,sans-serif;font-size:clamp(.78rem,2.55vw,1.45rem);font-weight:600;line-height:1;display:block}.connectKey:hover{transform:translateZ(.58rem)}.connectKey:hover .connectKey__face{box-shadow:inset 0 1px #fcfafa17,inset 0 -2px 3px #05010c6b,0 .5rem .38rem -.08rem #0e041c38}.connectKey:hover:before{transform:rotateX(-90deg)scaleY(.62)}.connectKey:active,.connectKey[data-pressed=true]{transform:translateZ(.14rem)}.connectKey:active .connectKey__face,.connectKey[data-pressed=true] .connectKey__face{box-shadow:inset 0 1px #fcfafa12,inset 0 -1px 2px #05010c59,0 .14rem .2rem -.04rem #0e041c24}.connectKey:active:before,.connectKey[data-pressed=true]:before{transform:rotateX(-90deg)scaleY(.22)}.connectKey:focus{outline:none}.connectKey:focus-visible{outline:2px solid var(--connect-ink);outline-offset:4px}@media (max-width:700px){.connectKeyboard{perspective:980px;padding-bottom:1.15rem}.connectKeyboard__base{padding:.34rem .34rem .42rem;transform:rotateX(13deg)}.connectKey{transform:translateZ(.86rem)}.connectKey:hover{transform:translateZ(.46rem)}.connectKey:active,.connectKey[data-pressed=true]{transform:translateZ(.12rem)}}@media (prefers-reduced-motion:reduce){.connectKey,.connectKey__face,.connectKey:before{transition-duration:1ms;transition-timing-function:linear}}