@font-face{font-family:Inter;src:url('/inter.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{color-scheme:dark;--bg:#0b101b;--panel:#111a29;--line:#263347;--muted:#99aac2;--text:#f2f6fe;--blue:#329aff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#152b45 0,transparent 48%),var(--bg);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}a{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.shell{max-width:1120px;margin:auto;padding:24px 40px 0}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26334780;padding-bottom:19px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-weight:750;font-size:15px;letter-spacing:2px}.brand img{object-fit:contain}.brand-sub{display:block;letter-spacing:2px;font-size:9px;font-weight:500;color:var(--muted);margin-top:6px}.icon-button{width:42px;height:42px;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--muted);display:grid;place-items:center}.intro{padding:41px 0 35px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#91b6df;display:flex;align-items:center;gap:8px}.preview-dot{width:6px;height:6px;border-radius:50%;background:#6baaff}h1{font-size:43px;letter-spacing:-1.7px;line-height:1.13;margin:15px 0}h1 span{color:#83a8d5}.intro p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:start}.remote-panel{background:linear-gradient(155deg,#18273c,#111b2b 55%);border:1px solid var(--line);border-radius:24px;padding:23px 25px 19px;box-shadow:0 24px 65px #0004}.device-heading{display:flex;align-items:center;gap:12px}.device-icon{width:43px;height:43px;display:grid;place-items:center;background:#22334b;border-radius:13px;color:#80b7ef}.device-heading h2{font-size:14px;margin:0 0 6px}.connection{font-size:10px;color:var(--muted);margin:0;display:flex;align-items:center;gap:6px}.connection span{height:5px;width:5px;background:#a5aebb;border-radius:50%}.preview-badge{margin-left:auto;font-size:9px;padding:5px 8px;border:1px solid #49617e;border-radius:20px;color:#b9cde6}.remote{max-width:304px;margin:28px auto 0}.remote-top{display:flex;align-items:center;justify-content:space-between}.key{border:0;background:transparent;color:#a3b4cb;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px}.key:disabled{cursor:not-allowed}.key span{font-size:9px}.small svg{width:21px;height:21px}.power{color:#ce929b}.remote-mark{font-weight:850;font-size:16px;letter-spacing:1px;color:#7f9abc}.remote-mark span{color:#4f9ef4}.dpad{margin:20px auto 18px;width:236px;height:236px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);position:relative;background:linear-gradient(135deg,#253a55,#152338);border:1px solid #344d6c;border-radius:50%;box-shadow:inset 0 2px 3px #fff1,0 10px 25px #0003}.direction{min-width:0;min-height:0;border-radius:50%}.direction svg{width:24px;height:24px}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.right{grid-column:3;grid-row:2}.down{grid-column:2;grid-row:3}.ok{grid-column:2;grid-row:2;background:linear-gradient(150deg,#227ab9,#24568d);border:1px solid #5489b6;border-radius:50%;font-size:18px;font-weight:700;color:#c1d7ef;box-shadow:0 4px 14px #0004}.navigation{display:flex;justify-content:space-around;padding-bottom:12px}.rockers{display:flex;align-items:center;justify-content:space-around;margin-top:10px}.rocker{background:#101a2b;border:1px solid #2c3c53;border-radius:32px;overflow:hidden;width:61px;display:flex;flex-direction:column;align-items:center}.rocker .key{font-size:27px;line-height:1;height:46px}.rocker>span{font-size:8px;letter-spacing:1px;color:#7b91ac;padding:3px 0}.mute svg{width:21px;height:21px}.playback{display:flex;justify-content:space-between;border-top:1px solid #2e405a;margin-top:23px;padding-top:12px}.playback svg{height:19px;width:19px}.remote-caption{font-size:9px;letter-spacing:.2px;text-align:center;color:#8b9fb8;margin:16px 0 0}.setup{padding-top:4px}.notice-label{font-size:9px;letter-spacing:1.7px;color:#d5b775;font-weight:700}.notice h2{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:15px 0 20px}.notice p{font-size:13px;line-height:1.85;color:#9eb0c9;margin:0 0 14px;max-width:400px}.notice strong{font-weight:600;color:#c1d1e7}.primary{display:flex;align-items:center;gap:25px;justify-content:space-between;border:1px solid #3a8ecb;background:#2378b8;color:white;border-radius:12px;padding:15px 18px;font-size:12px;font-weight:650;margin-top:25px}.primary:hover{background:#2b88cc}.primary span{font-size:18px}.facts{border-top:1px solid var(--line);margin-top:33px;padding-top:11px}.facts>div{display:flex;gap:15px;padding-top:18px}.fact-icon{font-size:9px;color:#6698ca;background:#17273c;border:1px solid #2b405c;border-radius:9px;display:grid;place-items:center;align-self:flex-start;width:31px;height:31px;flex-shrink:0}.facts p{margin:0;font-size:11px;line-height:1.7;color:var(--muted)}.facts strong{display:block;color:#d1deed;font-weight:600;margin-bottom:2px}.facts p span{display:block;max-width:300px}.back-app{display:inline-flex;align-items:center;gap:55px;text-decoration:none;color:#9fc5ef;font-size:11px;margin-top:33px}.back-app:hover{color:white}footer{display:flex;justify-content:space-between;padding:25px 0;margin-top:45px;border-top:1px solid #26334780;font-size:9px;letter-spacing:1.7px;color:#71849f}footer span{letter-spacing:0}dialog{border:1px solid #38506e;border-radius:20px;background:#121f31;color:var(--text);padding:33px;max-width:520px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 25px 80px #0009}dialog::backdrop{background:#030915cd;backdrop-filter:blur(5px)}dialog h2{font-size:24px;letter-spacing:-.5px;margin:18px 25px 18px 0}dialog p,dialog li{font-size:12px;line-height:1.8;color:#b1c2d9}dialog ol{padding-left:21px}dialog li{padding-left:5px;margin-bottom:12px}dialog strong{color:#e3edf9}.dialog-note{border-top:1px solid var(--line);padding-top:15px}.source{font-size:10px;color:#85baf4;display:block;margin-top:20px}.close{position:absolute;top:12px;right:12px;width:40px;height:40px;background:transparent;border:0;color:#a3b7d0;font-size:27px}
@media(min-width:850px){.intro{position:relative}.intro p{position:absolute;right:15px;bottom:42px;max-width:270px}.setup{padding-top:24px}.notice{padding-top:6px}}
@media(max-width:760px){.shell{padding:18px 20px 0;max-width:520px}.brand{font-size:13px}.brand img{width:44px;height:44px}.topbar{padding-bottom:15px}.intro{padding:29px 0 26px}h1{font-size:34px;letter-spacing:-1.1px;margin:13px 0}.intro p{font-size:11px}.eyebrow{font-size:9px}.workspace{display:flex;flex-direction:column;gap:28px}.remote-panel,.setup{width:100%}.remote-panel{padding:20px 20px 17px}.setup{padding:0 3px}.notice h2{font-size:25px;margin:12px 0 17px}.notice p{font-size:12px}.primary{width:100%;margin-top:20px}.facts{margin-top:27px}.back-app{width:100%;justify-content:space-between}.remote{margin-top:22px}.dpad{width:226px;height:226px}footer{margin-top:35px;font-size:8px;letter-spacing:1px;gap:15px}.remote-caption{font-size:9px}}
@media(max-width:340px){.shell{padding:15px 13px 0}h1{font-size:29px}.remote-panel{padding:18px 14px}.dpad{width:210px;height:210px}.device-heading{gap:8px}.device-heading h2{font-size:12px}.preview-badge{font-size:8px}.brand-sub{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:760px){body.is-paired .intro{display:none}body.is-paired .workspace{padding-top:18px;gap:16px}body.is-paired .remote-panel{order:0}body.is-paired .setup{order:1}body.is-paired .setup .notice>p:first-of-type{display:none}}
[hidden]{display:none!important}#pair-form{margin-top:22px}#pair-form label{font-size:12px;color:#b1c8e3;display:block;margin-bottom:10px}#pair-code{width:100%;max-width:400px;background:#0b1422;color:#fff;border:1px solid #496482;border-radius:12px;font:650 25px/1.3 Inter,Arial,sans-serif;letter-spacing:5px;text-transform:uppercase;padding:16px;outline-offset:4px}#pair-code::placeholder{color:#68809e}#pair-form .primary{width:100%;max-width:400px;margin-top:12px}#pair-status{margin-top:16px;min-height:45px;font-size:12px}.disconnect{background:transparent;border:1px solid #496482;color:#bfd5ee;border-radius:12px;padding:14px 18px;margin-top:22px;min-height:48px}.key{touch-action:manipulation;user-select:none;-webkit-user-select:none;border-radius:14px}.key:disabled{opacity:.42}.key:not(:disabled){color:#e8f3ff}.key:not(:disabled):active{background:#3974b3;transform:scale(.95)}.ok:not(:disabled){background:linear-gradient(140deg,#2a9de8,#225ec4)}.direction{border-radius:50%}.preview-badge.online{background:#163c32;color:#91f2c8;border-color:#2e7d60}.playback .key{font-weight:650;font-size:19px}.remote-caption{min-height:26px;line-height:1.6}.remote-panel{scroll-margin-top:20px}@media(max-width:760px){.intro{padding:22px 0}.intro h1{font-size:29px}.intro p{font-size:12px}.workspace{gap:25px}.remote-panel{order:1}.setup{order:0}.facts,.back-app{display:none}.setup .notice h2{display:none}.notice-label{display:none}.notice p{font-size:12px;line-height:1.65}.notice #pair-status{min-height:0;margin:12px 0 0}#pair-form{margin-top:13px}#pair-code{font-size:22px;padding:13px}#pair-form .primary{margin-top:10px;padding:13px 17px}.remote{margin-top:15px}.dpad{margin-top:14px;margin-bottom:12px;width:218px;height:218px}.remote-panel{padding-top:17px}.playback{margin-top:9px}.disconnect{margin-top:10px}.shell{padding-bottom:env(safe-area-inset-bottom)}}
.input-modes{display:flex;gap:5px;background:#0d1828;border:1px solid #2d415c;padding:5px;border-radius:14px;margin:20px 0 15px}.input-modes button{flex:1;border:0;border-radius:10px;background:transparent;color:#a4bddb;font-size:12px;font-weight:650;min-height:40px}.input-modes button[aria-pressed=true]{background:#29486b;color:#fff}.input-modes button:disabled{opacity:.4;cursor:default}.input-note{font-size:11px;line-height:1.6;color:#99b4d5}.touchpad{height:218px;position:relative;overflow:hidden;border:1px solid #395b82;border-radius:20px;background:radial-gradient(circle at 50% 50%,#213b58,#122238);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.touchpad[aria-disabled=true]{opacity:.4}.touchpad.touching{border-color:#75bdf5;box-shadow:inset 0 0 30px #4089d422}.touchpad-hint{position:absolute;top:41%;left:0;right:0;text-align:center;color:#b0c9e6;font-size:14px;line-height:1.8;pointer-events:none}.touchpad-hint small{font-size:10px;color:#7f9cbd}#pad-dot{position:absolute;left:50%;top:50%;height:10px;width:10px;border-radius:50%;background:#66bdff;box-shadow:0 0 15px #2c9aff;transform:translate(-50%,-50%);pointer-events:none;opacity:.5}.touching #pad-dot{opacity:1}.mouse-actions,.mouse-scroll{display:flex;gap:8px;margin-top:11px}.mouse-actions button,.mouse-scroll button{flex:1;min-height:44px;padding:10px 6px;border:1px solid #3b5778;border-radius:11px;background:#1d344e;color:#d8ebff;font-size:12px}.mouse-scroll button{background:transparent}.mouse-actions button:disabled,.mouse-scroll button:disabled{opacity:.4}.keyboard-panel{padding-top:5px}.keyboard-panel>p{font-size:12px;color:#b3d1ed;line-height:1.65}#typing-form label{display:block;font-size:12px;margin:14px 0 8px;color:#b8d2ee}#typing-text{width:100%;min-height:50px;border:1px solid #527aa3;background:#0c1828;color:#fff;font:16px Inter,Arial,sans-serif;border-radius:11px;padding:12px}#typing-text:disabled{opacity:.4}#typing-form .primary{width:100%;min-height:46px;justify-content:center;margin-top:12px}#typing-status{min-height:35px}.mouse-panel,.keyboard-panel{margin:15px 0 19px}.remote{max-width:304px}button:disabled{cursor:default;opacity:.45}.input-modes+ .input-note{margin-top:-5px}@media(max-width:760px){.input-modes{margin-top:14px;margin-bottom:12px}.touchpad{height:210px}.remote-top{margin-top:10px}.mouse-panel,.keyboard-panel{margin-top:12px}.input-modes button{min-height:38px}.mouse-scroll{margin-top:7px}}
.input-modes{position:sticky;top:8px;z-index:4;background:#101e30;box-shadow:0 5px 15px #06101e88;isolation:isolate}.input-modes button{min-height:49px;font-size:13px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}.input-modes button[aria-pressed=true]{background:#207fc7;box-shadow:0 2px 9px #0004}.input-modes button:active{background:#396d9b}.input-modes button:focus-visible{outline:2px solid #83ccff;outline-offset:1px}#input-version-note{padding:12px;border:1px solid #5e7794;border-radius:11px;background:#1d3046;color:#d4e5fa;font-size:12px;line-height:1.7}@media(max-width:760px){.input-modes button{min-height:49px;font-size:13px}}