:root{color:#222;font-synthesis:none;-webkit-font-smoothing:antialiased;background:#fafafa;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace}*{box-sizing:border-box}body{min-width:280px;margin:0}#root{min-height:100dvh;display:flex}button,textarea{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}:focus-visible{outline-offset:2px;outline:1px solid #222}::selection{background:#ddd}.keyboard-demo{width:min(100%,480px);height:min(100dvh,720px);padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;margin:auto;display:flex}.editor{border:1px solid #d4d4d4;flex:1;min-height:80px;position:relative}textarea,.word-colors{white-space:pre-wrap;overflow-wrap:break-word;border:0;width:100%;height:100%;padding:16px;font-size:20px;line-height:1.6}.word-colors{color:#0000;pointer-events:none;position:absolute;inset:0;overflow:hidden}textarea{resize:none;caret-color:#222;scrollbar-width:none;background:0 0;border-radius:0;display:block;position:relative}textarea::-webkit-scrollbar{display:none}textarea::placeholder{color:#888}.keyboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.keyboard button{background:0 0;border:1px solid #d4d4d4;flex-wrap:wrap;place-content:center;gap:5px 7px;min-height:84px;padding:12px 8px;font-size:18px;line-height:1.2;display:flex}.keyboard button span{text-align:center;flex:0 0 calc(33.3333% - 4.66667px)}.keyboard button:active:not(:disabled){background:#e8e8e8}@media (hover:hover){.keyboard button:hover:not(:disabled){background:#f2f2f2}}.color-toggle{color:#666;background:0 0;border:0;align-self:flex-end;align-items:center;gap:8px;min-height:28px;margin-bottom:-8px;padding:4px 0;font-size:12px;display:flex}.color-toggle span{background:#ccc;border-radius:8px;width:26px;height:14px;padding:2px}.color-toggle span:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;display:block}.color-toggle[aria-checked=true] span{background:#4b7eb5}.color-toggle[aria-checked=true] span:after{transform:translate(12px)}