@layer components{.kb{--kb-x:50%;--kb-y:50%;aspect-ratio:16/10;pointer-events:none;position:relative;overflow:clip;container-type:size}.kb-scene{perspective:210cqw;perspective-origin:50% 20%;position:absolute;inset:0}.kb-scene:before{content:"";background:radial-gradient(50% 50% at var(--kb-x) calc(var(--kb-y) + 2%), #7aa2ff26, transparent 72%);position:absolute;inset:0}.kb-drift{transform-style:preserve-3d;transform-origin:var(--kb-x) var(--kb-y);animation:kb-drift 18s var(--ease-in-out) infinite alternate;position:absolute;inset:0}.kb-board{--u:min(13cqw, 20.5cqh);--g:calc(var(--u) * .16);--p:calc(var(--u) * .28);--wx:calc(var(--u) * -.0217);--wy:calc(var(--u) * .0298);--cx:calc(var(--u) * -.024);--cy:calc(var(--u) * .033);--press-x:calc(var(--u) * -.09);--press-y:calc(var(--u) * .124);left:var(--kb-x);top:var(--kb-y);grid-template-columns:repeat(4, var(--u));grid-template-rows:repeat(3, var(--u));gap:var(--g);padding:var(--p);border-radius:calc(var(--u) * .34);box-shadow:inset 0 0 0 1px #96aadc33, var(--cx) var(--cy) 0 #0b0f1a, calc(var(--cx) * 2) calc(var(--cy) * 2) 0 #0b0f1a, calc(var(--cx) * 3) calc(var(--cy) * 3) 0 #0a0e18, calc(var(--cx) * 4) calc(var(--cy) * 4) 0 #0a0e18, calc(var(--cx) * 5) calc(var(--cy) * 5) 0 #090d16, calc(var(--cx) * 6) calc(var(--cy) * 6) 0 #090d16, calc(var(--cx) * 7) calc(var(--cy) * 7) 0 #080c14, calc(var(--cx) * 8) calc(var(--cy) * 8) 0 #080c14, calc(var(--cx) * 9) calc(var(--cy) * 9) 0 #070a12, calc(var(--cx) * 10) calc(var(--cy) * 10) 0 #96aadc24, calc(var(--cx) * 16) calc(var(--cy) * 16) calc(var(--u) * .7) #0009;background:linear-gradient(160deg,#ffffff0d,#0000 55%),#131b2c;display:grid;position:absolute;transform:translate(-50%,-50%)rotateX(54deg)rotate(-36deg)}.kb-key{z-index:calc(var(--row) * 10 - var(--col));grid-column:var(--col);grid-row:var(--row);border-radius:calc(var(--u) * .2);background:#04060b;position:relative}.kb-enter{grid-column:var(--col) / span 2}.kb-key:before{content:"";border-radius:inherit;box-shadow:var(--wx) var(--wy) 0 #0e1422, calc(var(--wx) * 2) calc(var(--wy) * 2) 0 #0e1422, calc(var(--wx) * 3) calc(var(--wy) * 3) 0 #0d1320, calc(var(--wx) * 4) calc(var(--wy) * 4) 0 #0d1320, calc(var(--wx) * 5) calc(var(--wy) * 5) 0 #0c111d, calc(var(--wx) * 6) calc(var(--wy) * 6) 0 #0c111d, calc(var(--wx) * 7) calc(var(--wy) * 7) 0 #96aadc1f;position:absolute;inset:0}.kb-cap{isolation:isolate;border-radius:inherit;color:#b6bdcd;animation:10s linear infinite both kb-press;animation-delay:calc(1.4s + var(--t,0s));background:linear-gradient(165deg,#ffffff14,#0000 55%),#1d2639;grid-template:100%/100%;place-items:center;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #96aadc24,inset 0 1px #ffffff12}.kb-cap:after{content:"";z-index:0;border-radius:inherit;background:radial-gradient(75% 75% at 50% 50%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 80%);opacity:0;animation:10s linear infinite both kb-lit;animation-delay:inherit;position:absolute;inset:0}.kb-icon{z-index:1;grid-area:1/1;position:relative;width:42%!important;height:42%!important}.kb-enter .kb-icon{width:auto!important;height:38%!important}.kb-lit{opacity:0;animation:10s linear infinite both kb-lit;animation-delay:inherit}.brand-icon.kb-lit{background-color:var(--brand)}svg.kb-lit{color:var(--brand)}.kb-enter .kb-cap{background:linear-gradient(165deg,#7aa2ff29,#0000 60%),#1d2639;animation-name:kb-press-enter}.kb-enter .kb-cap:after,.kb-enter .kb-lit{animation-name:kb-lit-enter}@media (min-width:48rem){.kb{aspect-ratio:21/9}}@media (min-width:64rem){.kb{--kb-x:55%;--kb-y:58%;aspect-ratio:5/4}.kb-board{--u:11.2cqw}}@media (prefers-reduced-motion:reduce){.kb-drift,.kb-cap,.kb-cap:after,.kb-lit{animation:none!important}}}@keyframes kb-drift{0%{transform:rotateX(0)rotateY(0)translateY(0)}50%{transform:rotateX(3deg)rotateY(-4deg)translateY(-1.2%)}to{transform:rotateX(-1.5deg)rotateY(3deg)translateY(.6%)}}@keyframes kb-press{0%{animation-timing-function:cubic-bezier(.5,0,1,1);translate:0}.7%{translate:var(--press-x) var(--press-y);animation-timing-function:linear}1.2%{translate:var(--press-x) var(--press-y);animation-timing-function:cubic-bezier(.22,1,.36,1)}3.4%,to{translate:0}}@keyframes kb-lit{0%{opacity:0}.7%{opacity:1}16%,to{opacity:0}}@keyframes kb-press-enter{0%,50.5%{animation-timing-function:cubic-bezier(.5,0,1,1);translate:0}.8%,51.3%{translate:var(--press-x) var(--press-y);animation-timing-function:linear}2.2%,52.7%{translate:var(--press-x) var(--press-y);animation-timing-function:cubic-bezier(.22,1,.36,1)}4.6%,55.1%,to{translate:0}}@keyframes kb-lit-enter{0%,50.5%{opacity:0}.8%,51.3%{opacity:1}22%,72.5%,to{opacity:0}}::view-transition-old(.pj-out){animation:.2s var(--ease-out) both pj-out}::view-transition-new(.pj-in){animation:.42s var(--ease-out) .14s both pj-in}::view-transition-group(.pj-move){animation-duration:.48s;animation-timing-function:var(--ease-out)}@keyframes pj-out{to{opacity:0;transform:scale(.96)}}@keyframes pj-in{0%{opacity:0;transform:translateY(16px)scale(.98)}}