.kbd-demo{--k-plate-hi:#211d1a;--k-plate:#191512;--k-plate-lo:#100e0b;--k-deck-hi:#19191a;--k-deck-mid:#1c1a18;--k-deck-lo:#201d1a;--k-key-hi:#312f2c;--k-key-lo:#25221f;--k-key-mute:#44423f;--k-key-mute-lo:#3b3835;--k-well:#0a0806;--k-well-deep:#030201;--k-well-chamfer:#120f0c;--k-bore-core:#020101;--k-bore-edge:#060403;--k-tone-yes:#445546;--k-tone-no:#5d413d;--k-ink:255 244 228;--k-t1:rgb(var(--k-ink) / .96);--k-t2:rgb(var(--k-ink) / .6);--k-t3:rgb(var(--k-ink) / .55);--k-edge-top:rgb(var(--k-ink) / .11);--k-edge-bot:#0000008c;--k-lip:255 238 214;--k-elev-tile:inset 0 1px 0 var(--k-edge-top), inset 0 -1px 0 var(--k-edge-bot), 0 3px 0 #00000080, 0 5px 9px -3px #0000008c, 0 13px 22px -12px #000c;--k-elev-tile-down:inset 0 1px 0 rgb(var(--k-ink) / .07), inset 0 -1px 0 #0006, 0 1px 0 #00000073, 0 2px 4px -2px #00000080;--k-elev-key:inset 0 1px 0 var(--k-edge-top), inset 0 -1px 0 #00000073, 0 2px 0 #00000073, 0 3px 6px -2px #00000080;--k-elev-key-down:inset 0 1px 0 rgb(var(--k-ink) / .06), 0 1px 0 #0006, 0 1px 3px -1px #00000073;--k-deck-edge:inset 0 1px 0 rgb(var(--k-ink) / .075), 0 1px 0 #000000e0, 0 2px 0 rgb(var(--k-ink) / .1);--k-amber-skirt:0 3px 0 var(--k-amber-edge), 0 13px 22px -12px #000c;--k-well-chamfer-shadow:0 0 0 2px var(--k-well-chamfer), 0 -1px 0 rgb(var(--k-ink) / .1), 0 3px 0 -1px rgb(var(--k-ink) / .06);--k-shell:linear-gradient(160deg, #3a3733, #0f0d0b);--k-host-bg:#0b0a09;--k-host-ink:255 244 228;--k-amber:#ee9439;--k-amber-top:#faaa49;--k-amber-bot:#bd6103;--k-amber-edge:#683501;--k-amber-ink:#1b0b02;--k-green:#7bc38e;--k-red:#ea7a73;--k-ease:cubic-bezier(.2, .7, .2, 1);--k-mono:ui-monospace, "JetBrains Mono", monospace;--k-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;--k-hole-pitch:9.56px;--k-hole-r:2.15px;flex-direction:column;align-items:center;gap:16px;display:flex}.kbd-demo[data-cut=light]{--k-plate-hi:#d2cfc9;--k-plate:#c9c5be;--k-plate-lo:#bfbab2;--k-deck-hi:#dedfe3;--k-deck-mid:#dcdad5;--k-deck-lo:#d6d3cd;--k-key-hi:#fff;--k-key-lo:#f2efea;--k-key-mute:#dad6d0;--k-key-mute-lo:#cfcac4;--k-well:#2a2622;--k-well-deep:#1b1815;--k-well-chamfer:#3a352f;--k-bore-core:#8a837b;--k-bore-edge:#9c948c;--k-tone-yes:#deefe2;--k-tone-no:#fadfdd;--k-ink:36 30 22;--k-edge-top:#ffffffe6;--k-edge-bot:#00000012;--k-lip:255 255 255;--k-elev-tile:inset 0 1px 0 var(--k-edge-top), inset 0 -1px 0 var(--k-edge-bot), 0 3px 0 #0000000e, 0 5px 9px -3px #0000000f, 0 13px 22px -12px #00000016;--k-elev-tile-down:inset 0 1px 0 #0000000d, inset 0 -1px 0 #0000000b, 0 1px 0 #0000000d, 0 2px 4px -2px #0000000e;--k-elev-key:inset 0 1px 0 var(--k-edge-top), inset 0 -1px 0 #0000000d, 0 2px 0 #0000000d, 0 3px 6px -2px #0000000e;--k-elev-key-down:inset 0 1px 0 #0000000a, 0 1px 0 #0000000b, 0 1px 3px -1px #0000000d;--k-deck-edge:inset 0 1px 0 #ffffffbf, 0 1px 0 #00000019, 0 2px 0 #ffffff8c;--k-amber-skirt:0 3px 0 var(--k-amber-edge), 0 13px 22px -12px #0000001a;--k-well-chamfer-shadow:0 0 0 2px var(--k-well-chamfer), 0 -1px 0 #0000001a, 0 3px 0 -1px #ffffffd9;--k-shell:linear-gradient(160deg, #e8e6e2, #9b9691);--k-host-bg:#fff;--k-host-ink:26 25 23}.kbd-device{background:var(--k-shell);border-radius:60px;flex:none;width:412px;height:866px;padding:11px;position:relative;box-shadow:0 0 0 2px #0000008c,inset 0 2px 3px 2px #ffffff1a,0 50px 90px -40px #0000008c}@media (max-width:470px){.kbd-device{zoom:.72}}@media (max-width:380px){.kbd-device{zoom:.6}}.kbd-screenframe{background:var(--k-host-bg);border-radius:44px;flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.kbd-statusbar{height:52px;font-family:var(--k-sans);color:rgb(var(--k-host-ink) / .96);flex:none;justify-content:space-between;align-items:center;padding:0 30px;font-size:14px;font-weight:600;display:flex;position:relative}.kbd-din{background:#000;border-radius:20px;width:118px;height:34px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.kbd-sb-right{align-items:center;gap:6px;display:flex}.kbd-host{min-height:0;font-family:var(--k-sans);color:rgb(var(--k-host-ink) / .96);flex-direction:column;flex:1;padding:4px 20px 0;display:flex}.kbd-host-nav{justify-content:space-between;align-items:center;padding:6px 0 14px;display:flex}.kbd-host-title{letter-spacing:-.01em;font-size:19px;font-weight:600}.kbd-host-state{font-family:var(--k-mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--k-host-ink) / .55);font-size:10px}.kbd-field{scrollbar-width:none;text-align:left;min-height:0;color:inherit;white-space:pre-wrap;text-wrap:pretty;background:0 0;border:0;border-radius:10px;flex:1;padding:2px 0 16px;font-family:inherit;font-size:16.5px;line-height:1.5;overflow-y:auto}.kbd-field::-webkit-scrollbar{display:none}.kbd-caret{vertical-align:-.18em;background:var(--k-amber);width:2px;height:1.05em;margin-left:1px;animation:1.06s step-end infinite kbd-blink;display:inline-block}@keyframes kbd-blink{0%,49%{opacity:1}50%,to{opacity:0}}.kbd-plate{isolation:isolate;background:linear-gradient(180deg, var(--k-plate-hi) 0%, var(--k-plate) 42%, var(--k-plate-lo) 100%);flex:none;width:390px;height:258px;padding:0 8px;position:relative;overflow:hidden}.kbd-plate:before{content:"";z-index:0;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)'/%3E%3C/svg%3E");position:absolute;inset:0}.kbd-demo[data-cut=light] .kbd-plate:before{opacity:.05}.kbd-plate>*{z-index:1;position:relative}.kbd-home-inset{background:var(--k-plate-lo);flex:none;height:30px}.kbd-head{background:linear-gradient(180deg, var(--k-deck-hi), var(--k-deck-mid) 62%, var(--k-deck-lo));height:46px;box-shadow:var(--k-deck-edge);justify-content:space-between;align-items:center;margin:0 -8px;padding:0 8px;display:flex;position:relative;overflow:hidden}.kbd-wordmark{z-index:2;font-family:var(--k-mono);letter-spacing:-.6px;color:var(--k-t1);font-size:17px;font-weight:500}.kbd-lang{z-index:2;box-shadow:inset 0 1px 2px #0009, inset 0 -1px 0 rgb(var(--k-ink) / .05);background:#00000057;border-radius:9px;gap:2px;padding:2px;display:flex}.kbd-demo[data-cut=light] .kbd-lang{background:#00000012;box-shadow:inset 0 1px 2px #0000001a,inset 0 -1px #ffffffb3}.kbd-lang-seg{width:37px;height:26px;font-family:var(--k-sans);color:var(--k-t2);cursor:pointer;transition:color .18s var(--k-ease), background .18s var(--k-ease);border-radius:7px;justify-content:center;align-items:center;font-size:12.5px;font-weight:600;display:inline-flex}.kbd-lang-seg[data-on=true]{color:var(--k-amber-ink);background:linear-gradient(180deg, var(--k-amber-top), var(--k-amber) 62%, var(--k-amber-bot));box-shadow:inset 0 1px #ffffff47,0 1px 2px #00000080}.kbd-chipwrap{z-index:1;pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.kbd-chip{justify-content:center;align-items:center;gap:5px;width:117px;display:flex}.kbd-chip canvas{width:27px;height:27px;display:block}.kbd-chip-label{font-family:var(--k-sans);white-space:nowrap;color:var(--k-t2);font-size:12px;font-weight:500}.kbd-grille{--gr:var(--k-hole-r);--cham:calc(var(--gr) * .48);width:calc(3 * var(--k-hole-pitch));height:calc(4 * var(--k-hole-pitch));background-size:var(--k-hole-pitch) var(--k-hole-pitch);background-image:radial-gradient(circle at 50% calc(50% + var(--gr) * .5), rgb(var(--k-lip) / .21) 0 calc(var(--gr) * .14), rgb(var(--k-lip) / .09) calc(var(--gr) * .3), transparent calc(var(--gr) * .44)), radial-gradient(circle at 50% calc(50% - var(--gr) * .34), #000000d1 0 calc(var(--gr) * .38), #00000057 calc(var(--gr) * .62), transparent calc(var(--gr) * .86)), radial-gradient(circle at 50% 50%, var(--k-bore-core) 0 calc(var(--gr) - 1px), var(--k-bore-edge) calc(var(--gr) - .4px), transparent var(--gr)), radial-gradient(circle at 50% calc(50% - var(--cham) * .55), transparent 0 var(--gr), rgb(var(--k-lip) / .085) calc(var(--gr) + var(--cham) * .5), transparent calc(var(--gr) + var(--cham) * 1.3)), radial-gradient(circle at 50% 50%, #0003 0 calc(var(--gr) + var(--cham) * .5), transparent calc(var(--gr) + var(--cham) * 2.2));flex:none}.kbd-demo[data-cut=light] .kbd-grille{background-image:radial-gradient(circle at 50% calc(50% + var(--gr) * .5), #ffffff8c 0 calc(var(--gr) * .16), #ffffff38 calc(var(--gr) * .34), transparent calc(var(--gr) * .48)), radial-gradient(circle at 50% calc(50% - var(--gr) * .34), #0003 0 calc(var(--gr) * .38), #00000017 calc(var(--gr) * .62), transparent calc(var(--gr) * .86)), radial-gradient(circle at 50% 50%, var(--k-bore-core) 0 calc(var(--gr) - 1px), var(--k-bore-edge) calc(var(--gr) - .4px), transparent var(--gr)), radial-gradient(circle at 50% calc(50% - var(--cham) * .55), transparent 0 var(--gr), #fff9 calc(var(--gr) + var(--cham) * .5), transparent calc(var(--gr) + var(--cham) * 1.3)), radial-gradient(circle at 50% 50%, #0000000e 0 calc(var(--gr) + var(--cham) * .5), transparent calc(var(--gr) + var(--cham) * 2.2))}.kbd-stage{gap:6px;height:100px;margin:4px 0 8px;display:flex}.kbd-tile{background:linear-gradient(180deg, var(--k-key-hi), var(--k-key-lo));box-shadow:var(--k-elev-tile);font-family:var(--k-sans);color:var(--k-t2);transition:box-shadow 90ms var(--k-ease), transform 90ms var(--k-ease), opacity 90ms var(--k-ease);border:0;border-radius:21px;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex}.kbd-tile svg{width:22px;height:22px;display:block}.kbd-tile-cap{letter-spacing:.15em;text-transform:uppercase;color:var(--k-t3);font-size:9.5px;font-weight:600}.kbd-tile-side{flex:none;width:72px}.kbd-tile-side.is-right{width:80px}.kbd-tile:disabled{background:var(--k-key-lo);box-shadow:var(--k-elev-tile-down);color:var(--k-t3);cursor:default}.kbd-tile.is-amber{background:linear-gradient(180deg, var(--k-amber-top), var(--k-amber) 55%, var(--k-amber-bot));color:var(--k-amber-ink);box-shadow:inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #00000059, var(--k-amber-skirt)}.kbd-tile.is-amber .kbd-tile-cap{color:color-mix(in srgb, var(--k-amber-ink) 74%, transparent)}.kbd-tile.is-yes{background:linear-gradient(180deg, var(--k-tone-yes), var(--k-key-lo));color:var(--k-green)}.kbd-tile.is-no{background:linear-gradient(180deg, var(--k-tone-no), var(--k-key-lo));color:var(--k-red)}.kbd-demo[data-cut=light] .kbd-tile.is-yes{color:#2e7d4f}.kbd-demo[data-cut=light] .kbd-tile.is-no{color:#b4453a}.kbd-tile-start{flex-direction:row;flex:1;justify-content:space-between;align-items:flex-end;padding:0 16px 14px}.kbd-start-word{letter-spacing:.7px;font-size:17px;font-weight:500}.kbd-start-mark{font-family:var(--k-mono);letter-spacing:-.6px;font-size:17px;font-weight:500}.kbd-start-right{align-items:baseline;gap:5px;display:flex}.kbd-screen{isolation:isolate;background:radial-gradient(120% 150% at 50% 50%, var(--k-well) 38%, var(--k-well-deep) 100%);min-width:0;box-shadow:inset 0 3px 6px #000000eb, inset 0 1px 0 #000c, inset 0 -8px 10px -8px rgb(var(--k-lip) / .2), inset 0 -1px 0 rgb(var(--k-lip) / .13), inset 0 0 0 1px #00000080, var(--k-well-chamfer-shadow);border-radius:21px;flex:1;position:relative;overflow:hidden}.kbd-screen canvas{width:calc(100% - 20px);height:calc(100% - 16px);display:block;position:absolute;inset:8px 10px}.kbd-bloom{mix-blend-mode:screen;filter:blur(2.6px)saturate(1.1);opacity:.55;pointer-events:none}@supports (mix-blend-mode:plus-lighter){.kbd-bloom{mix-blend-mode:plus-lighter}}.kbd-sheen{pointer-events:none;background:linear-gradient(168deg,#fff4e40d 0%,#fff4e40a 12%,#fff4e407 24%,#fff4e403 36%,#fff4e401 46%,#0000 56%);position:absolute;inset:0}.kbd-vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 22px 6px #0000008c}.kbd-punct{gap:5px;height:44px;margin-bottom:8px;display:flex}.kbd-util{gap:6px;height:44px;margin-bottom:4px;display:flex}.kbd-key{background:linear-gradient(180deg, var(--k-key-hi), var(--k-key-lo));box-shadow:var(--k-elev-key);font-family:var(--k-sans);color:var(--k-t1);transition:box-shadow 90ms var(--k-ease), transform 90ms var(--k-ease);border:0;border-radius:11px;justify-content:center;align-items:center;font-size:20px;display:flex}.kbd-key svg{width:22px;height:22px;display:block}.kbd-punct .kbd-key{flex:1}.kbd-punct .kbd-key.is-del{flex:1.35}.kbd-key.is-abc{width:64px;color:var(--k-t2);flex:none;font-size:17px}.kbd-key.is-return{background:linear-gradient(180deg, var(--k-key-mute), var(--k-key-mute-lo));flex:none;width:68px}.kbd-key.is-space{color:var(--k-t2);flex:1;font-size:16px;font-weight:500;position:relative}.kbd-key-mark{font-family:var(--k-mono);letter-spacing:-.5px;color:var(--k-t3);font-size:12px;font-style:italic;font-weight:500;position:absolute;bottom:5px;right:10px}@media (prefers-reduced-motion:reduce){.kbd-demo *,.kbd-demo :before,.kbd-demo :after{transition-duration:.001ms!important;animation-duration:.001ms!important}.kbd-caret{opacity:1;animation:none}}