@property --kbd-side{syntax:"<length>";inherits:true;initial-value:0}@property --kbd-press{syntax:"<number>";inherits:true;initial-value:0}.kbd{--kbd-side:1.8em;--kbd-wide:1;--kbd-radius:.4;--kbd-skirt:.058;--kbd-travel:.048;--kbd-inset:.014;--kbd-base-top:#232328;--kbd-base-bottom:#0e0e11;--kbd-face-top:#3d3d43;--kbd-face-bottom:#27272c;--kbd-legend:#e3e3e6;--kbd-legend-lit:#fff;--kbd-shadow:24 26 20;--kbd-p:clamp(0, var(--kbd-press), 1);box-sizing:border-box;min-width:calc(var(--kbd-side) * var(--kbd-wide));height:var(--kbd-side);padding:0 calc(var(--kbd-side) * var(--kbd-inset)) calc(var(--kbd-side) * var(--kbd-skirt));letter-spacing:0;text-align:center;white-space:nowrap;vertical-align:-.3em;font:500 .82em/1 -apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,sans-serif;transition:--kbd-press .1s ease-out;display:inline-flex;position:relative}.kbd[data-press=frame]{transition:none}.kbd:before{content:"";inset:calc(var(--kbd-side) * var(--kbd-travel) * var(--kbd-press)) 0 0;border-radius:calc(var(--kbd-side) * var(--kbd-radius));corner-shape:superellipse(1.4);background:linear-gradient(180deg, var(--kbd-base-top), var(--kbd-base-bottom));box-shadow:0 0 0 max(.5px, calc(var(--kbd-side) * .004)) #ffffff12, 0 calc(var(--kbd-side) * .008) calc(var(--kbd-side) * .012) #00000047, 0 calc(var(--kbd-side) * (.05 - .028 * var(--kbd-p))) calc(var(--kbd-side) * (.1 - .045 * var(--kbd-p))) calc(var(--kbd-side) * -.02) rgb(var(--kbd-shadow) / .3), 0 calc(var(--kbd-side) * (.15 - .08 * var(--kbd-p))) calc(var(--kbd-side) * (.3 - .12 * var(--kbd-p))) calc(var(--kbd-side) * -.08) rgb(var(--kbd-shadow) / .22);position:absolute}.kbd-face{isolation:isolate;box-sizing:border-box;padding:0 calc(var(--kbd-side) * .16);border-radius:calc(var(--kbd-side) * (var(--kbd-radius) - var(--kbd-inset)));corner-shape:superellipse(1.4);background:radial-gradient(120% 90% at 50% -12%, #ffffff1a, transparent 62%), linear-gradient(180deg, var(--kbd-face-top), var(--kbd-face-bottom));box-shadow:inset 0 max(1px, calc(var(--kbd-side) * .009)) 0 #ffffff26, inset 0 0 0 max(.5px, calc(var(--kbd-side) * .005)) #ffffff09, inset 0 calc(var(--kbd-side) * -.03) calc(var(--kbd-side) * .06) #0003;color:color-mix(in srgb, var(--kbd-legend-lit) calc(var(--kbd-p) * 100%), var(--kbd-legend));font-size:calc(var(--kbd-side) * .52);transform:translateY(calc(var(--kbd-side) * var(--kbd-travel) * var(--kbd-press)));flex:1;justify-content:center;align-items:center;gap:.4em;display:flex;position:relative}.kbd-face:before{content:"";z-index:-1;border-radius:inherit;corner-shape:superellipse(1.4);opacity:calc(var(--kbd-p) * .07);background:#fff;position:absolute;inset:0}.kbd[data-size=cue]{--kbd-side:72px;vertical-align:baseline;font-weight:400}.kbd[data-size=film]{--kbd-side:190px;vertical-align:baseline}.kbd:is([data-size=cue],[data-size=film])[data-legend=glyph] .kbd-face{font-size:calc(var(--kbd-side) * .36)}.kbd:is([data-size=cue],[data-size=film])[data-legend=word] .kbd-face{font-size:calc(var(--kbd-side) * .19);letter-spacing:.01em}.kbd[data-size=film][data-legend=word] .kbd-face{font-size:calc(var(--kbd-side) * .3);letter-spacing:0}.kbd:is([data-size=cue],[data-size=film]):not([data-legend]) .kbd-face{font-size:calc(var(--kbd-side) * .22)}.kbd[data-glyph=\@] .kbd-face{padding-bottom:calc(var(--kbd-side) * .02)}.kbd[data-glyph=↩] .kbd-face,.kbd[data-glyph=↵] .kbd-face{padding-top:calc(var(--kbd-side) * .06)}.kbd[data-glyph=⇧] .kbd-face{padding-bottom:calc(var(--kbd-side) * .01)}@supports not (corner-shape:round){.kbd{--kbd-radius:.3}}@media (prefers-reduced-motion:reduce){.kbd{transition:none}.kbd:before{inset:0}.kbd-face{transform:none}}.demo-keystrokes{pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;display:flex}.demo-keystrokes[data-layout=fixed]{z-index:80;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));position:fixed}.demo-keystrokes-keys,.demo-keystrokes-key,.demo-keystrokes-cap{align-items:center;gap:12px;display:flex}.demo-keystrokes-plus{color:#85878e;font-size:20px}.demo-keystrokes-name{font-size:16px;font-weight:400;line-height:1}.demo-keystrokes-symbol{color:#d2d2d2;font-size:24px;line-height:1;position:absolute;top:9px;right:12px}.demo-keystrokes-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.kbd[data-size=cue].demo-keystrokes-named .kbd-face{text-align:left;justify-content:flex-start;align-items:flex-end;padding:0 12px 10px}