: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}
