*{box-sizing:border-box} :root{font:16px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#edf5f7;background:#080d11;--accent:#52e1b0;--keyboard-alpha:.78;--usable-height:100dvh}body{margin:0;overflow:hidden;overscroll-behavior:none}button,input,textarea,select{font:inherit}button,select{-webkit-tap-highlight-color:transparent}button{color:inherit;background:#1b2c37;border:1px solid #42606d66;min-height:44px;border-radius:12px;cursor:pointer;touch-action:manipulation}button:active{background:#375648}button.active,button[aria-pressed=true]{color:#061e16;background:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}#app,#remote,#stage{position:fixed;inset:0;height:var(--usable-height)}#stage{overflow:hidden;background:#080d11}#screen{position:absolute;inset:0;width:100%;height:100%;display:block}#touchSurface{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#cursor{position:absolute;z-index:1;pointer-events:none;width:13px;height:13px;border:2px solid white;border-radius:50%;background:#3be1ac88;box-shadow:0 0 0 1px #071b21,0 1px 5px #000;transform:translate(-50%,-50%)}.topbar{position:absolute;z-index:3;top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:12px;pointer-events:none}.topbar>span{background:#081016a8;padding:7px 11px;border-radius:99px;font-size:12px;text-shadow:0 1px 2px black}.topbar button{pointer-events:auto;margin-left:auto;width:44px;background:#10202aba;backdrop-filter:blur(12px);font-size:21px}#status i{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:6px}#metrics{color:#bdcdd7}.dock{position:absolute;z-index:3;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px;border:1px solid #69869270;border-radius:18px;background:#10212bc2;backdrop-filter:blur(12px);max-width:calc(100% - 24px);box-shadow:0 5px 25px #0005}.dock button{font-size:13px;min-width:44px;padding:0 10px;background:transparent;border:0;border-radius:12px}.dock #keyboardButton{font-size:25px;min-width:52px}.dock #previousSpace,.dock #nextSpace{font-size:32px;padding:0}.dock button.active{background:var(--accent);color:#063124}.gesture-tip{position:absolute;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 68px);left:50%;transform:translateX(-50%);padding:9px 13px;background:#0b1c27d9;border-radius:10px;white-space:nowrap;font-size:12px;color:#d1dfe6;pointer-events:none}.overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#08131eda;color:#cadce6;padding:30px;text-align:center;line-height:1.7}.welcome{max-width:440px;margin:14dvh auto 0;padding:24px;text-align:center}.welcome img{border-radius:18px}.welcome h1{font-size:32px;font-weight:600;margin:24px 0 14px}.welcome p{color:#aac0cd;line-height:1.8;margin:18px 0;font-size:15px;white-space:pre-line}.welcome .small{color:#698594;font-size:13px;margin-top:28px}.primary{width:100%;background:var(--accent);color:#09291f;font-weight:650;padding:12px}.keyboard-panel{position:absolute;z-index:5;left:12px;right:12px;bottom:8px;border:1px solid #b8d7e366;border-radius:17px;background:rgb(19 35 46 / var(--keyboard-alpha));box-shadow:0 7px 32px #0005;overflow:hidden;color:#f8fafb}.keyboard-panel header{display:flex;align-items:center;gap:12px;padding:8px 10px}.keyboard-panel header strong{font-size:13px;white-space:nowrap}.keyboard-panel header label{display:flex;align-items:center;gap:6px;font-size:12px;margin-left:auto;white-space:nowrap}.keyboard-panel input[type=range]{width:88px;accent-color:var(--accent)}.keyboard-panel header button{min-width:34px;min-height:32px;padding:0;font-size:23px;background:transparent;border:0}#nativeInputBox{display:flex;gap:6px;padding:0 10px 10px}#nativeInput{width:100%;min-height:42px;resize:none;border:1px solid #7794a181;background:#05111b66;color:white;border-radius:10px;padding:10px;font-size:16px;line-height:1.3}#nativeEnter{min-width:45px}#virtualKeys{display:none}.keyboard-panel footer{display:none}.settings-panel{position:absolute;z-index:6;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:min(360px,calc(100vw - 24px));max-height:calc(var(--usable-height) - 24px);overflow:auto;background:#13232df2;border:1px solid #3e5967;border-radius:18px;padding:18px;box-shadow:0 8px 50px #0007}.settings-panel header{display:flex;align-items:center;justify-content:space-between}.settings-panel h2{font-size:18px;margin:0}.settings-panel header button{min-width:36px;min-height:36px;font-size:25px;border:0;background:transparent}.settings-panel label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin:18px 0}.settings-panel select{margin-left:auto;max-width:160px;background:#243c49;border:1px solid #47616f;border-radius:9px;color:inherit;padding:8px;font-size:13px}.settings-panel input[type=range]{width:100%;accent-color:var(--accent)}.settings-panel output{margin-left:auto;color:var(--accent)}.settings-panel>button{width:100%;margin-top:8px}.settings-panel p{font-size:12px;color:#91aeba;line-height:1.8}.danger{color:#fdaea0;background:#4a3032}.toast{position:fixed;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 82px);left:50%;transform:translateX(-50%);z-index:10;background:#e5f5f0;color:#17392f;max-width:90vw;width:max-content;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;pointer-events:none}.demo-label{position:absolute;top:60px;left:12px;background:#463b16aa;color:#f1d98b;padding:4px 8px;border-radius:5px;font-size:12px;pointer-events:none}
@media(orientation:landscape){.dock{bottom:max(7px,env(safe-area-inset-bottom));padding:3px}.dock button{min-height:38px}.topbar{top:8px}.keyboard-panel{left:25vw;right:auto;top:calc((var(--usable-height) - 66.666dvh)/2);bottom:auto;width:50vw;height:66.666dvh;display:flex;flex-direction:column;border-radius:14px}.keyboard-panel header{padding:4px 7px;gap:4px;flex-shrink:0}.keyboard-panel header strong{font-size:12px}.keyboard-panel header label{font-size:11px}.keyboard-panel header button{min-height:26px}.keyboard-panel input[type=range]{width:64px}#nativeInputBox{display:none;padding:0 7px 5px}#nativeInputBox.native-open{display:flex}#virtualKeys{display:flex;flex:1;min-height:0;flex-direction:column;gap:4px;padding:0 6px 3px}.key-row{display:flex;justify-content:center;gap:3px;flex:1;min-height:0}.key-row button{flex:1;min-width:0;min-height:0;border-radius:5px;font-size:clamp(10px,1.75vw,16px);padding:1px;background:rgb(74 97 111 / calc(var(--keyboard-alpha)*.82));border-color:#c0d6e14a;text-shadow:0 1px 2px #000}.key-row button.wide-key{flex:1.55}.key-row button.space-key{flex:5}.key-row button.active{background:rgb(58 173 133 / var(--keyboard-alpha));color:white}.keyboard-panel footer{display:flex;justify-content:space-between;align-items:center;padding:1px 7px 4px;flex-shrink:0;font-size:10px;color:#d1e1e7}.keyboard-panel footer button{min-height:24px;background:transparent;border:0;padding:1px 0;font-size:11px}.gesture-tip{bottom:60px}.keyboard-open .dock{opacity:.3}.keyboard-open .dock:hover{opacity:1}}

@media(orientation:portrait){.keyboard-open .dock{display:none}}
#status{white-space:nowrap}#metrics{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar button{flex-shrink:0}
.dock button{white-space:nowrap;padding-left:8px;padding-right:8px}
.activation-panel{margin:18px 0 0;padding:18px;border:1px solid #36505d;border-radius:16px;background:#12232c;text-align:left}.activation-panel strong{display:block;font-size:16px}.activation-panel p{margin:8px 0 12px;font-size:12px;line-height:1.6}.activation-panel>div{display:flex;gap:8px}.activation-panel input{min-width:0;flex:1;background:#07131a;border:1px solid #496774;border-radius:11px;color:#fff;font-size:20px;letter-spacing:4px;padding:10px 12px;text-align:center}.activation-panel button{width:auto;min-width:82px}.welcome:has(.activation-panel:not([hidden])){margin-top:7dvh}
.view-controls{position:absolute;z-index:3;top:calc(max(8px,env(safe-area-inset-top)) + 52px);left:max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #69869255;border-radius:13px;background:#10212bc2;backdrop-filter:blur(12px)}.view-controls button{background:transparent;border:0;min-width:40px;min-height:36px;padding:0 8px;font-size:18px}.view-controls #zoomReset{font-size:12px;min-width:55px}.view-controls #twoFingerMode{font-size:12px;border-left:1px solid #69869255;border-radius:0;padding:0 10px}.view-controls #hideViewControls{min-width:32px;padding:0 5px;border-left:1px solid #69869255;border-radius:0 8px 8px 0;color:#9db1bb}.view-controls button[aria-pressed=true]{color:var(--accent)}.gesture-tip{max-width:calc(100vw - 24px);font-size:11px}.demo-label{top:110px}
.keyboard-panel header #keyboardHandle{font-size:12px;white-space:nowrap;min-width:70px;padding:0 6px;text-align:left;user-select:none;-webkit-user-select:none}.input-preview{padding:0 10px 7px;flex-shrink:0}.preview-toolbar{display:flex;align-items:center;gap:7px;font-size:10px;color:#c1d5df}.preview-toolbar span{margin-right:auto}.preview-toolbar button{font-size:10px;padding:0 5px;min-height:22px;background:transparent;border:0}.preview-content{font-size:var(--preview-font-size,22px);line-height:1.35;min-height:35px;max-height:70px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;padding:4px 8px;border-radius:7px;background:rgb(4 14 23 / calc(var(--keyboard-alpha)*.8));color:#fff;user-select:text;-webkit-user-select:text}.preview-placeholder{font-size:13px;color:#aac1cc}.preview-caret{display:inline-block;width:2px;height:1em;vertical-align:-.15em;background:var(--accent);margin:0 1px}.keyboard-panel{max-height:calc(var(--usable-height) - 16px)}.keyboard-panel footer #centerKeyboard{font-size:10px}.keyboard-panel.native-mode #virtualKeys{display:none}.settings-panel input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
@media(orientation:landscape){.keyboard-panel{height:min(66.666dvh,calc(var(--usable-height) - 16px));max-width:calc(100vw - 16px)}.keyboard-panel header #keyboardHandle{cursor:grab;touch-action:none}.keyboard-panel header #keyboardHandle:active{cursor:grabbing}.input-preview{padding:0 7px 4px}.preview-content{min-height:32px;max-height:54px}.preview-toolbar{height:22px}.key-row button{font-size:clamp(10px,1.6vw,15px)}.keyboard-panel footer{gap:7px}.keyboard-panel footer span{white-space:nowrap;font-size:9px}}
@media(orientation:portrait){#keyboardHandle{pointer-events:none}.keyboard-panel{overflow:auto}.preview-content{max-height:82px}}