:root{color-scheme:dark;--ink: #1d2318;--paper: #f2e8d5}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#14180f;display:grid;place-items:center;font-family:ui-monospace,Cascadia Code,Menlo,monospace;color:var(--paper);overflow:auto}#wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:12px}canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated;border-radius:10px;box-shadow:0 18px 50px #0000008c,0 0 0 1px #f2e8d51f;background:#2f4a2f}#hint{font-size:12px;letter-spacing:.04em;opacity:.55;-webkit-user-select:none;user-select:none;text-align:center}#mouse-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:960px;max-height:130px;overflow-y:auto}#mouse-controls button,#mouse-controls select{font:inherit;font-size:12px;color:var(--paper);background:#2e3829;border:1px solid #667452;border-radius:6px;padding:8px 12px;min-height:34px;cursor:pointer}#mouse-controls button:hover,#mouse-controls button:focus-visible{background:#465438;border-color:#ffe9a3}canvas{cursor:crosshair}#key-settings{color:var(--paper);background:#20281c;border:1px solid #667452;border-radius:12px;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:20px;overflow-y:auto;box-shadow:0 18px 50px #0000008c}#key-settings::backdrop{background:#060805cc}#key-settings h2{margin:0 0 12px;font-size:20px}#key-settings p{font-size:13px;line-height:1.7}.binding-list{display:grid;gap:1px}.binding-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgb(242 232 213 / 10%);font-size:12px}.binding-slots{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex-shrink:0;max-width:48%}#key-settings button{font:inherit;color:var(--paper);background:#2e3829;border:1px solid #667452;border-radius:6px;padding:8px 12px;min-height:36px;cursor:pointer}#key-settings button:hover,#key-settings button:focus-visible,#key-settings button[aria-pressed=true]{border-color:#ffe9a3;background:#465438}#key-settings button:disabled{opacity:.5;cursor:default}#key-settings-message{min-height:44px;color:#ffe9a3}.binding-footer{display:flex;justify-content:space-between;gap:12px}