*{margin:0;padding:0;box-sizing:border-box}:root{--key-h: 46px;--key-gap: 4px;--tray-pad-x: 5px;--tray-pad-y: 5px;--tray-ops-gap: 4px;--tray-rows: 5;--tray-bg: rgba(17, 19, 24, .94);--mouse-gap: 8px;--mouse-radius: 15px;--tray-h: calc( var(--tray-rows) * var(--key-h) + (var(--tray-rows) - 1) * var(--key-gap) + var(--tray-ops-gap) + 2 * var(--tray-pad-y) + env(safe-area-inset-bottom, 0px) )}html,body{height:100%;background:#111318;color:#e6e8ee;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app{height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.screen h1{font-size:20px;font-weight:600}.screen p{color:#9aa0ae;font-size:14px;line-height:1.6}button.primary{appearance:none;border:none;border-radius:10px;background:#3b6cf5;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;cursor:pointer}button.primary:disabled{background:#2a3348;color:#6b7285}button.ghost{appearance:none;border:1px solid #2a3348;border-radius:10px;background:transparent;color:#9aa0ae;font-size:13px;padding:8px 16px;cursor:pointer}input.field{appearance:none;border:1px solid #2a3348;border-radius:10px;background:#1a1e27;color:#e6e8ee;font-size:18px;padding:12px 16px;width:min(320px,80vw);text-align:center;letter-spacing:2px}.status{font-size:13px;color:#9aa0ae;min-height:1.4em}.status.error{color:#f56c6c}.viewer{position:fixed;inset:0;background:#000;display:flex}.viewer video{width:100%;height:100%;object-fit:contain;touch-action:none}.viewer .hud{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;align-items:flex-start;padding:8px 12px;pointer-events:none}.viewer .hud .hud-btns{margin-left:auto;flex-shrink:0}.viewer .hud>*{pointer-events:auto}.viewer .hud .status{background:#111318b3;border-radius:8px;padding:4px 10px;max-width:55%;overflow-wrap:anywhere}.viewer .hud .status:empty{display:none}.viewer .hud button.ghost{font-size:12px;min-height:42px;padding:6px 12px}.viewer .hud button.ghost.icon{font-size:17px;padding:6px 10px}.viewer .mic{position:absolute;left:calc(16px + env(safe-area-inset-left,0));bottom:calc(16px + env(safe-area-inset-bottom,0));width:56px;height:56px;border-radius:50%;appearance:none;border:1px solid #2a3348;background:#111318b8;color:#e6e8ee;font-size:22px;line-height:1;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.viewer .mic.active{background:#3b6cf5;border-color:#3b6cf5}.viewer.keyboard-open .mic{display:none}.viewer .hud button.text-input-toggle.active,.viewer .hud button.ghost.active{background:#3b6cf5;border-color:#3b6cf5}.kbd,.text-entry{position:fixed;left:0;right:0;bottom:var(--viewport-occlusion-bottom, 0px);background:var(--tray-bg);box-shadow:inset 0 1px #ffffff0f;padding:var(--tray-pad-y) var(--tray-pad-x) calc(var(--tray-pad-y) + env(safe-area-inset-bottom,0px))}.text-entry{z-index:12;display:flex;gap:var(--key-gap)}.text-entry[hidden]{display:none}.text-entry input{min-width:0;flex:1;appearance:none;border:1px solid #35415c;border-radius:7px;background:#252c3a;color:#f2f4f8;font:inherit;font-size:16px;padding:8px 10px}.text-entry button{appearance:none;border:1px solid #35415c;border-radius:7px;background:#252c3a;color:#f2f4f8;min-width:44px;padding:0 10px;font:inherit;cursor:pointer;touch-action:manipulation}.text-entry .text-send{background:#3b6cf5;border-color:#3b6cf5}.text-entry .text-close{min-width:36px;padding:0;font-size:20px}.surface{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}.viewer .playgate{position:absolute;inset:0;appearance:none;border:none;background:#111318b8;color:#e6e8ee;font-size:16px;font-weight:600;cursor:pointer;touch-action:manipulation}.viewer .playgate[hidden]{display:none}.kbd{z-index:10;min-height:var(--tray-h);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--key-gap)}.kbd.hidden{display:none}.kbd-layer{display:flex;flex-direction:column;gap:var(--key-gap)}.kbd-layer[hidden]{display:none}.kbd-ops{display:flex;flex-direction:column;gap:var(--key-gap);margin-top:var(--tray-ops-gap)}.kbd-row{display:grid;gap:var(--key-gap)}.kbd-key{appearance:none;border:1px solid #35415c;border-radius:7px;background:#252c3a;color:#f2f4f8;height:var(--key-h);min-width:0;padding:0 2px;font-size:18px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}.kbd-key.len2{font-size:13px}.kbd-key.len3{font-size:11px}.kbd-ops .kbd-key{background:#1a1e27;border-color:#2a3348}.kbd-ops .kbd-key.kbd-layer-key{background:#2f3a52;border-color:#3d4a68}.kbd-ops .kbd-key.kbd-mic{font-size:20px;touch-action:none;-webkit-touch-callout:none}.mousepad-body{flex:1;min-height:0;display:grid;gap:var(--mouse-gap);grid-template-columns:repeat(9,1fr);grid-template-rows:1.75fr .75fr 1fr;grid-template-areas:"pad pad pad pad pad pad pad pad pad" "hld hld hld hld hld hld hld hld hld" "lft lft lft lft rgt rgt rgt dbl dbl"}.mousepad-body.has-mic{grid-template-areas:"mic mic pad pad pad pad pad pad pad" "hld hld hld hld hld hld hld hld hld" "lft lft lft lft rgt rgt rgt dbl dbl"}.mouse-scroll{grid-area:pad}.mouse-mic{grid-area:mic}.mouse-hold{grid-area:hld}.mouse-primary{grid-area:lft}.mouse-right{grid-area:rgt}.mouse-double{grid-area:dbl}.mouse-mic{font-size:26px;touch-action:none;-webkit-touch-callout:none}.mouse-mic.active{background:#3b6cf5;box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #6086ff8c,0 4px 14px #3b6cf559}.mouse-scroll{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:0;border-radius:var(--mouse-radius);background-color:#00000057;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12px);box-shadow:inset 0 1px 3px #0000008c,inset 0 0 0 1px #ffffff0d;color:#7c869e;transition:background .11s ease,color .11s ease,box-shadow .11s ease;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.mouse-scroll:before,.mouse-scroll:after{content:"";position:absolute;left:50%;width:9px;height:9px;border-left:2px solid currentColor;border-top:2px solid currentColor;border-radius:1px;opacity:.32}.mouse-scroll:before{top:11px;transform:translate(-50%) rotate(45deg)}.mouse-scroll:after{bottom:11px;transform:translate(-50%) rotate(-135deg)}.mouse-scroll.rubbing{background-color:#3b6cf538;color:#c3d0f4;box-shadow:inset 0 1px 3px #00000059,inset 0 0 0 1px #6086ff73}.mouse-scroll.rubbing:before,.mouse-scroll.rubbing:after{opacity:.6}.mouse-scroll.pressed{background-color:#3b6cf552;color:#dde5ff}.mouse-scroll-mark{width:17px;height:25px;border-radius:9px;box-shadow:inset 0 0 0 2px currentColor;position:relative;opacity:.65}.mouse-scroll-mark:after{content:"";position:absolute;left:50%;top:5px;width:2px;height:7px;border-radius:1px;background:currentColor;transform:translate(-50%)}.mouse-scroll-label{font-size:11px;font-weight:600;letter-spacing:.06em}.mouse-scroll-hint{font-size:10px;letter-spacing:.02em;opacity:.6}.mouse-key{appearance:none;border:none;border-radius:var(--mouse-radius);background:linear-gradient(180deg,#2c3446,#232a39);color:#e9ecf3;font-size:17px;font-weight:600;letter-spacing:.02em;line-height:1;min-width:0;padding:0 4px;white-space:nowrap;overflow:hidden;cursor:pointer;box-shadow:inset 0 1px #ffffff12,0 1px 2px #0006;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:background 90ms ease,box-shadow 90ms ease,transform 90ms ease}.mouse-primary{background:linear-gradient(180deg,#3a445c,#2d354a);font-size:21px}.mouse-right,.mouse-double{font-size:18px}.mouse-key.pressed{background:linear-gradient(180deg,#455070,#39425c);box-shadow:inset 0 1px 3px #00000073,inset 0 0 0 1px #6086ff80;transform:translateY(1px)}.mouse-hold{display:flex;align-items:center;justify-content:center;gap:10px;background:#ffffff09;box-shadow:inset 0 0 0 1px #ffffff17;color:#aeb7c9;font-size:15px;letter-spacing:.08em}.mouse-hold:before{content:"";width:10px;height:10px;border-radius:50%;background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff2e;transition:background .14s ease,box-shadow .14s ease}.mouse-hold.active,.mouse-hold.active.pressed{background:linear-gradient(180deg,#4d7aff,#3b6cf5);color:#fff;box-shadow:inset 0 1px #ffffff38,0 0 0 1px #6086ff8c,0 4px 16px #3b6cf566;transform:none}.mouse-hold.active:before{background:#fff;box-shadow:0 0 9px #ffffffd9}.mouse-hold.pressed{background:#ffffff1a;box-shadow:inset 0 0 0 1px #6086ff80;transform:none}.kbd-key.active,.kbd-key:active,.kbd-ops .kbd-key.active,.kbd-ops .kbd-key:active{background:#3b6cf5;border-color:#3b6cf5}@media(max-width:400px){:root{--key-h: 44px}.kbd-key{font-size:17px}.kbd-key.len2{font-size:12px}.kbd-key.len3{font-size:10px}}@media(orientation:landscape)and (max-height:480px){:root{--key-h: 34px;--tray-pad-x: 6px;--tray-pad-y: 4px;--tray-ops-gap: 2px;--tray-rows: 4;--mouse-gap: 6px;--mouse-radius: 13px}.kbd-ops{flex-direction:row}.mousepad-body,.mousepad-body.has-mic{grid-template-rows:1.6fr 1fr;grid-template-areas:"mic pad pad pad pad pad pad pad pad" "lft lft lft rgt rgt dbl dbl hld hld"}.mousepad-body:not(.has-mic){grid-template-areas:"pad pad pad pad pad pad pad pad pad" "lft lft lft rgt rgt dbl dbl hld hld"}.mouse-hold{background:linear-gradient(180deg,#2c3446,#232a39);box-shadow:inset 0 1px #ffffff12,0 1px 2px #0006;color:#e9ecf3;font-size:18px;letter-spacing:.02em}.mouse-hold:before{display:none}.mouse-scroll{flex-direction:row;gap:10px}.mouse-scroll:before,.mouse-scroll:after{display:none}.kbd-ops .kbd-row{flex-basis:0;min-width:0}.kbd-key{font-size:16px}.kbd-key.len2{font-size:12px}.kbd-key.len3{font-size:10px}}