@font-face{font-family:"Space Grotesk";font-weight:700;src:url("../fonts/space-grotesk-700.woff2") format("woff2");font-display:swap}
html,body{margin:0;background:transparent!important;color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}html{--s:1;--c:#a6ead6;--bg:rgba(8,18,28,0);color:var(--c)}#input-overlay{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:12px;box-sizing:border-box}html[data-pos=tc] #input-overlay{justify-content:center}html[data-pos=tr] #input-overlay{justify-content:flex-end}html[data-pos=cl] #input-overlay{align-items:center}html[data-pos=c] #input-overlay{align-items:center;justify-content:center}html[data-pos=cr] #input-overlay{align-items:center;justify-content:flex-end}html[data-pos=bl] #input-overlay{align-items:flex-end}html[data-pos=bc] #input-overlay{align-items:flex-end;justify-content:center}html[data-pos=br] #input-overlay{align-items:flex-end;justify-content:flex-end}.io-shell{font-size:calc(16px * var(--s));color:var(--c);background:var(--bg);border-radius:1.2em;padding:1em;box-sizing:border-box;filter:drop-shadow(0 .1em .25em #0007);max-width:100%;flex-shrink:1;min-width:0}.io-title{font-size:.65em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:1.3em}.io-content{display:flex;gap:1.5em;align-items:center;min-width:0}.io-connection{display:flex;align-items:center;gap:.55em;font-size:.62em;margin-top:1.3em;color:#c9dce5;line-height:1.5;opacity:.9;max-width:65em}.io-connection i{width:.5em;height:.5em;background:#dbb67d;border-radius:50%;flex-shrink:0}.io-connection.connected i{background:var(--c)}[hidden]{display:none!important}.io-keyboard{display:grid;gap:.4em;min-width:0}.io-key-row{display:flex;gap:.35em}.io-key{width:2.6em;height:2.55em;border-radius:.45em;display:grid;place-items:center;border:1px solid #bad8e247;box-shadow:inset 0 -.22em 0 #0004,inset 0 .08em 0 #fff1;background:linear-gradient(150deg,#243848dd,#14212ee8);color:#c8dde5;font-size:.77em;font-weight:650;transition:background .06s,box-shadow .06s,transform .06s;flex:1;box-sizing:border-box;white-space:nowrap}.io-key.wide{flex:1.5;font-size:.66em;min-width:3.5em}.io-key.space{flex:3;min-width:5em}.io-key.on{background:var(--c);color:#122e35;transform:translateY(.08em);box-shadow:inset 0 -.12em 0 #0003,0 0 .8em color-mix(in srgb,var(--c) 30%,transparent);border-color:#e4f9ee}.io-keyboard.full{width:46em}.io-keyboard.compact{width:17em}.io-keyboard.full .io-key{font-size:.63em;height:2.8em}.io-mouse-area{width:7.7em;flex-shrink:0}.io-mouse{display:block;width:100%;height:auto;overflow:visible}.io-body{fill:#142330e8;stroke:#bedee07a;stroke-width:2}.io-button{fill:#253e4c;stroke:#c4e5e64d;stroke-width:1.2;transition:fill .06s}.io-button.on{fill:var(--c);stroke:#e3fff2}.io-seam{fill:none;stroke:#b5dbdc44;stroke-width:2}.io-logo{fill:var(--c);opacity:.7}.io-scroll{fill:none;stroke:#8dabad66;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.io-scroll.on{stroke:var(--c);stroke-width:5}.io-mouse-label{text-align:center;display:grid;gap:.5em;margin-top:.5em}.io-mouse-label b{font-size:.55em;letter-spacing:.15em}.io-mouse-label span{font-size:.6em;color:#c7dfe3}.io-path{width:22.5em;min-width:0}.io-path svg{width:100%;height:auto;display:block;overflow:visible}.io-path-label{display:flex;justify-content:space-between;gap:1em;font-size:.52em;color:#bbd7dd;margin-top:.7em;line-height:1.5}.io-path-label>span{letter-spacing:.12em}.io-path-label b{font-weight:500}.io-combo{display:flex;gap:1.2em;align-items:center}.io-comandos .io-content{align-items:center;gap:2em}.io-comandos .io-mouse-area{width:6.4em}.io-comandos .io-path{width:20em}.io-click-count{min-width:12em;text-align:center}.io-click-count>span{font-size:.55em;letter-spacing:.13em;color:#bfd9df}.io-click-count>b{display:block;font-size:4.8em;line-height:1.1;font-weight:750;font-variant-numeric:tabular-nums;margin:.12em 0}.io-click-count>div{display:flex;gap:1.8em;justify-content:center;font-size:.65em;color:#bfd9df}.io-click-count strong{display:block;margin-top:.5em;color:var(--c);font-size:1.5em}html[data-font=mono] body{font-family:Consolas,ui-monospace,monospace}html[data-font=display] body{font-family:"Space Grotesk",system-ui,sans-serif}.io-teclado .io-shell{max-width:100%}
@media(max-width:700px){.io-comandos .io-content{flex-direction:column;align-items:flex-start}.io-comandos .io-path{width:100%;max-width:27em}.io-keyboard.full{width:min(46em,calc(100vw - 4em));font-size:.82em}.io-keyboard.full .io-key{min-width:0}.io-keyboard.full .io-key.wide{font-size:.5em}.io-mouse .io-path{width:18em}}@media(prefers-reduced-motion:reduce){.io-key,.io-button{transition:none}}

.io-comandos.io-wide .io-content{flex-direction:column;align-items:flex-start}.io-comandos.io-wide .io-combo{width:100%;flex-wrap:wrap}.io-comandos.io-wide .io-keyboard{max-width:100%}.io-comandos.io-wide .io-path{width:30em;max-width:100%}

#input-overlay:focus{outline:none}#input-overlay:focus-visible .io-shell{outline:2px solid var(--c);outline-offset:4px}
.io-interaction{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid #ffffff20;font:12px/1.6 system-ui,sans-serif;max-width:680px;color:#c1d5e4}.io-interaction button{font:600 12px/1.4 system-ui,sans-serif;cursor:pointer;color:#071821;background:var(--c);border:1px solid var(--c);border-radius:9px;padding:10px 14px;flex-shrink:0}.io-interaction span{flex:1;min-width:150px}.io-interaction.active button{background:#142633;color:#d5e8ef}.io-interaction button:focus-visible{outline:2px solid white;outline-offset:3px}