:root{--bg: #252423;--bg-raised: #2a2928;--bg-panel: #2f2e2d;--bg-float: #3a3938;--border: #393735;--border-strong: #474543;--keycap: #353433;--keycap-hover: #3f3e3d;--keycap-inert: #1f1f1e;--text: #f6f4f2;--text-dim: #b4b1af;--text-faint: #93908e;--accent: #ffcc2a;--accent-soft: #4b4123;--danger: #ff4b4b;--warning: #ffa828;--ok: #78d34b;--term-keymode: var(--accent);--term-control: var(--ok);--term-action: var(--warning);--term-audio: #4d9cff;--term-file: #a369ff;--radius: 6px;--radius-sm: 4px;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--dur-press: .14s;--dur-pop: .18s;--dur-panel: .24s;font-family:IBM Plex Sans,Segoe UI,system-ui,-apple-system,sans-serif;color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-size:14px;user-select:none;-webkit-user-select:none}button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:500;color:inherit;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background .12s ease,border-color .12s ease}button:hover{background:var(--keycap-hover);border-color:var(--border-strong)}button:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){button{transition:background .12s ease,border-color .12s ease}button:active{transform:none}}input[type=text]{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 8px}input[type=text]:focus{outline:none;border-color:var(--accent)}.app{display:flex;flex-direction:column;height:100%}.app-body{flex:1;min-height:0;display:flex}.grid-area{flex:1;min-width:0;min-height:0;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.keyboard-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.bottom-panel{flex:0 0 324px;display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--bg-panel);overflow:hidden}.placeholder{color:var(--text-faint);font-size:14px;text-align:center;padding:24px}.key{--u: 42px;--gap: 6px;--w: 1;--key-travel: 4px;--key-top: var(--keycap);--key-side: color-mix(in srgb, var(--key-top) 60%, #000);--key-ink: var(--text-dim);--key-glow: transparent;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:calc(var(--u) * var(--w) + var(--gap) * (var(--w) - 1));height:var(--u);padding:6px 9px;border:0;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--key-top) 90%,white) 0%,var(--key-top) 34%);color:var(--key-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform:translateY(0);box-shadow:inset 0 1px #ffffff12,inset 0 -1px #00000040,0 var(--key-travel) 0 var(--key-side),0 calc(var(--key-travel) + 8px) 16px -8px #000000b3,0 0 22px 2px var(--key-glow);transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),background-color .12s ease;transition-timing-function:linear(0,.42 26%,1.07 56%,.985 78%,1),linear(0,.42 26%,1.07 56%,.985 78%,1),ease}.key:hover{--key-top: var(--keycap-hover)}.key:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.key-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;white-space:nowrap;color:var(--key-ink);transition:color .26s ease}.key:active{transform:translateY(var(--key-travel));--key-glow: color-mix(in srgb, var(--accent) 34%, transparent);box-shadow:inset 0 1px #ffffff0a,inset 0 -1px #0000004d,0 0 0 var(--key-side),0 2px 6px -4px #000000b3,0 0 22px 2px var(--key-glow);transition:transform 70ms cubic-bezier(.2,.8,.3,1),box-shadow 70ms cubic-bezier(.2,.8,.3,1),background-color 60ms ease}.key:active .key-label{color:var(--accent);transition-duration:0ms}.key[aria-current=page]{transform:translateY(calc(var(--key-travel) * .6));--key-glow: color-mix(in srgb, var(--accent) 14%, transparent);box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #0000004d,0 calc(var(--key-travel) * .4) 0 var(--key-side),0 calc(var(--key-travel) * .4 + 6px) 12px -6px #000000b3,0 0 22px 2px var(--key-glow)}.key[aria-current=page] .key-label{color:var(--accent)}.key-accent{--key-top: var(--accent);--key-side: #8a6a06;--key-ink: #1a1608;align-items:center;justify-content:center}.key-accent:hover{--key-top: #ffd54f}.key-accent:active .key-label,.key-accent[aria-current=page] .key-label{color:#1a1608}.key-ghost{--key-top: var(--bg-panel);--key-side: #1c1b1a;--key-ink: var(--accent);align-items:center;justify-content:center}.key-ghost:hover{--key-top: var(--bg-float)}.key-icon{align-items:center;justify-content:center;padding:0}.key-icon img,.key-icon svg{display:block;width:24px;height:24px}.key-fit{width:auto;padding-left:18px;padding-right:18px}.key-fit .key-label{font-size:13px;letter-spacing:.08em}.key-glyph{margin-left:12px;font-size:16px;line-height:1;opacity:.8}.key-fit.key-accent,.key-fit.key-ghost{flex-direction:row;gap:0}.plate{display:inline-flex;align-items:center;gap:var(--gap, 6px);padding:8px;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-panel) 96%,white),var(--bg-panel));border:1px solid var(--border-strong);box-shadow:inset 0 1px #ffffff0d,0 20px 50px -26px #000c}.plate-divider{width:1px;align-self:stretch;margin:5px 3px;background:var(--border-strong)}@media(prefers-reduced-motion:reduce){.key,.key-label{transition-duration:0ms!important}}@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}.nav{view-transition-name:site-nav}.hero-frame,.demo-shell-full{view-transition-name:demo-window}.guide-frame,.guide{view-transition-name:guide-window}::view-transition-group(demo-window),::view-transition-group(guide-window){animation-duration:.44s;animation-timing-function:cubic-bezier(.23,1,.32,1)}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}