.kb{--kb-ink:var(--color-neutral-ink);--kb-legend:var(--lightningcss-light,#8d94a3)var(--lightningcss-dark,#f1f3f66b);--kb-legend-feature:var(--lightningcss-light,#667085)var(--lightningcss-dark,#f1f3f680);--kb-face-hi:var(--lightningcss-light,#fcfcfd)var(--lightningcss-dark,#16171c);--kb-face-lo:var(--lightningcss-light,#f0f1f4)var(--lightningcss-dark,#0f1014);--kb-down-hi:var(--lightningcss-light,#f4f5f7)var(--lightningcss-dark,#131419);--kb-down-lo:var(--lightningcss-light,#eaecf0)var(--lightningcss-dark,#0d0e12);--kb-face:radial-gradient(75% 75% at 50% 92%, var(--kb-face-hi) 0%, var(--kb-face-lo) 100%);--kb-face-down:radial-gradient(75% 75% at 50% 92%, var(--kb-down-hi) 0%, var(--kb-down-lo) 100%);--kb-edge:var(--lightningcss-light,#15171c33)var(--lightningcss-dark,#07080a);--kb-foot:var(--lightningcss-light,#15171c24)var(--lightningcss-dark,#06070a80);--kb-rim-low:var(--lightningcss-light,#15171c1a)var(--lightningcss-dark,#06070a4d);--kb-rim-top:var(--lightningcss-light,#fcfcfd)var(--lightningcss-dark,#f1f3f633);--kb-rim-top-down:var(--lightningcss-light,#fcfcfd99)var(--lightningcss-dark,#f1f3f61a);--kb-cap:0 1.5px .5px 2.5px var(--kb-foot), 0 0 .5px 1px var(--kb-edge), 0 -2px 1px 1px var(--kb-rim-low) inset, 0 1px 1px 1px var(--kb-rim-top) inset;--kb-cap-down:0 .5px .5px 1px var(--kb-foot), 0 0 .5px 1px var(--kb-edge), 0 -1px 1px .5px var(--kb-rim-low) inset, 0 1px 1px .5px var(--kb-rim-top-down) inset;--kb-ease:cubic-bezier(.23, 1, .32, 1);width:100%;color:var(--kb-ink);font-family:var(--font-sans);flex-direction:column;align-items:center;gap:clamp(20px,3vw,36px);display:flex}.kb-prompt{letter-spacing:-.02em;text-align:center;text-wrap:balance;max-width:100%;min-height:1.2em;padding:0 16px;font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.2}.kb-caret-mark{font-family:var(--font-mono);color:var(--color-neutral-muted);margin-right:.35em;font-weight:400}.kb-caret{vertical-align:-.12em;background:var(--kb-ink);border-radius:999px;width:2px;height:1.05em;margin-left:.08em;display:inline-block}.kb-stage{-webkit-mask-composite:source-in;justify-content:flex-start;width:100%;max-width:880px;padding:6px 0 4px;display:flex;overflow:clip;-webkit-mask-image:linear-gradient(90deg,#0000 0,#0b0c0f 9% 91%,#0000 100%),linear-gradient(#0b0c0f 70%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#0b0c0f 9% 91%,#0000 100%),linear-gradient(#0b0c0f 70%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect;container-type:inline-size}.kb-board{--bw:max(108cqw, 960px);--gap:calc(var(--bw) * .0062);--u:calc((var(--bw) - 13.5 * var(--gap)) / 14.5);width:var(--bw);margin-left:calc((100cqw - var(--bw)) * .12);gap:var(--gap);flex-direction:column;flex:none;display:flex}.kb-row{gap:var(--gap);display:flex}.kb-key,.kb-stack{width:calc(var(--w) * var(--u) + (var(--w) - 1) * var(--gap));height:var(--u);flex:none}.kb-key{border-radius:var(--radius-lg);background:var(--kb-face);box-shadow:var(--kb-cap);color:var(--kb-legend);font-size:calc(var(--u) * .27);-webkit-user-select:none;user-select:none;transition:box-shadow .2s var(--kb-ease), transform .2s var(--kb-ease), color .2s var(--kb-ease);justify-content:center;align-items:center;font-weight:500;line-height:1;display:flex;position:relative}.kb-key.is-down{background:var(--kb-face-down);box-shadow:var(--kb-cap-down);color:var(--kb-ink);transition-duration:60ms;transform:translateY(1.5px)}.kb-key:after{content:"";left:50%;bottom:calc(var(--u) * .12);background:var(--color-figure-accent-line);opacity:0;width:22%;min-width:8px;height:1.5px;transition:opacity .2s var(--kb-ease), transform .2s var(--kb-ease);border-radius:999px;position:absolute;transform:translate(-50%)scaleX(.4)}.kb-key.is-down:after{opacity:1;transition-duration:60ms;transform:translate(-50%)scaleX(1)}.kb-key.has-sub{gap:calc(var(--u) * .1);font-size:calc(var(--u) * .2);flex-direction:column}.kb-key.is-word{padding:0 calc(var(--u) * .16) calc(var(--u) * .16);font-size:calc(var(--u) * .17);justify-content:flex-start;align-items:flex-end}.kb-stack{gap:calc(var(--gap) * .5);flex-direction:column;display:flex}.kb-half{width:100%;height:auto;font-size:calc(var(--u) * .18);border-radius:var(--radius-sm);flex:1}.kb-half:after{display:none}.kb-feature{padding:calc(var(--u) * .15) calc(var(--u) * .16);color:var(--kb-ink);--kb-rim-top:var(--lightningcss-light,#fcfcfd)var(--lightningcss-dark,#f1f3f647);--kb-edge:var(--lightningcss-light,#15171c42)var(--lightningcss-dark,#07080a);--kb-cap:0 1.5px .5px 2.5px var(--kb-foot), 0 0 .5px 1px var(--kb-edge), 0 -2px 1px 1px var(--kb-rim-low) inset, 0 1px 1px 1px var(--kb-rim-top) inset;flex-direction:column;justify-content:space-between;align-items:flex-start}.kb-ficon{width:calc(var(--u) * .3);height:calc(var(--u) * .3);color:var(--kb-ink)}.kb-ftext{font-size:calc(var(--u) * .19);color:var(--kb-legend-feature);text-align:left;margin:0;font-weight:400;line-height:1.22}.kb-ftext b{color:var(--kb-ink);font-weight:600}.kb-feature:after{left:auto;right:calc(var(--u) * .16);width:10%;transform:scaleX(.4)}.kb-feature.is-down:after{transform:scaleX(1)}@media (prefers-reduced-motion:reduce){.kb-key,.kb-key:after{transition:none}}
