:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#090b0e;--panel:#111419;--panel-2:#151920;--line:#282d35;--line-soft:#1d2229;--text:#f4f5f7;--muted:#8e97a5;--accent:#ef4f55;--accent-2:#ff656b;--green:#45d596;--radius:16px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{background:radial-gradient(circle at 78% 22%, #ef4f5512, transparent 24rem), var(--bg);color:var(--text);margin:0}button,input,textarea{font:inherit}button{color:inherit}.app-shell{grid-template-rows:40px 1fr 42px;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:10;background:#090b0ed1;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;display:grid;position:relative}.brand{color:inherit;align-items:center;gap:8px;width:max-content;text-decoration:none;display:inline-flex}.brand>span:last-child{align-items:baseline;gap:6px;display:flex}.brand strong{letter-spacing:-.02em;font-size:14px}.brand small{color:var(--muted);letter-spacing:.16em;font-size:8px;font-weight:700}.brand-mark{place-items:center;width:20px;height:20px;display:grid;position:relative;transform:rotate(45deg)}.brand-mark:before,.brand-mark:after,.brand-mark i{content:"";background:var(--accent);border-radius:2px;position:absolute}.brand-mark:before{width:6px;height:16px;left:1px}.brand-mark:after{width:6px;height:16px;right:1px}.brand-mark i:first-child{width:16px;height:5px;top:2px}.brand-mark i:last-child{width:16px;height:5px;bottom:2px}.connection-state{color:var(--muted);justify-self:center;align-items:center;gap:6px;font-size:11px;display:inline-flex}.state-dot{background:#555d69;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #555d691a}.connection-state[data-state=connecting] .state-dot{background:#f5b84b;animation:1.2s infinite pulse}.connection-state[data-state=connected] .state-dot{background:var(--green);box-shadow:0 0 0 3px #45d5961f}.connection-state[data-state=error] .state-dot{background:var(--accent)}.icon-button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:7px;justify-self:end;place-items:center;width:28px;height:28px;padding:0;font-size:14px;line-height:1;display:grid}.icon-button:hover{background:var(--panel-2);border-color:#3a414c}.topbar-start{align-items:center;gap:10px;display:flex}.topbar-actions{justify-self:end;align-items:center;gap:8px;display:flex}.cancel-connect{border:1px solid var(--line);background:var(--panel);height:28px;color:var(--muted);cursor:pointer;border-radius:7px;padding:0 9px;font-size:11px}.cancel-connect:hover{color:var(--text);border-color:var(--accent)}.connection-error{color:#ff9498;overflow-wrap:anywhere;margin:14px 0 0;font-size:12px;line-height:1.6}.session-security{color:var(--green);padding:0 6px;font-size:10px}.session-security[data-security=unverified]{color:#f5b84b}.session-permissions{color:var(--muted);padding:0 6px;font-size:10px}.session-permissions[data-readonly=true]{color:#f5b84b}.session-toolbar button:disabled,.session-toolbar select:disabled{opacity:.45;cursor:not-allowed}.remote-stage.is-readonly #remoteCanvas{cursor:default}#securityNote[data-security=idle]>span,#securityNote[data-security=pending]>span{color:var(--muted)}#securityNote[data-security=unverified]>span{color:#f5b84b}#securityNote[data-security=failed]>span{color:var(--accent)}.panel-toggle{flex-shrink:0}.panel-toggle svg{width:16px;height:16px}.panel-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.panel-toggle[aria-expanded=false] .panel-toggle-arrow{transform:translate(29px)scaleX(-1)}.workspace{grid-template-columns:380px minmax(0,1fr);min-height:0;display:grid}.workspace.is-panel-collapsed{grid-template-columns:minmax(0,1fr)}.connect-panel[hidden]{display:none}.connect-panel{border-right:1px solid var(--line-soft);background:linear-gradient(#101318 0%,#0d1014 100%);padding:clamp(36px,6vh,68px) 42px 32px;overflow:auto}.eyebrow{letter-spacing:.22em;color:var(--accent-2);font-size:9px;font-weight:800;line-height:1.2}.connect-panel h1{letter-spacing:-.045em;margin:12px 0;font-size:30px;line-height:1.1}.intro{color:var(--muted);margin:0 0 32px;font-size:13px;line-height:1.65}.connect-form{gap:9px;display:grid}.connect-form>label:not(.remember-row),.dialog-card>label{color:#c9cdd3;margin-top:9px;font-size:11px;font-weight:650}input,textarea{width:100%;color:var(--text);border:1px solid var(--line);background:#0b0e12;border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s}input{height:46px;padding:0 14px}textarea{resize:vertical;min-height:80px;padding:12px 14px;line-height:1.5}input:focus,textarea:focus{border-color:#ef4f55c7;box-shadow:0 0 0 3px #ef4f551a}input::placeholder,textarea::placeholder{color:#59616e}.id-input-wrap,.password-wrap{position:relative}.id-input-wrap input{letter-spacing:.08em;font-variant-numeric:tabular-nums;padding-right:42px;font-size:17px}.input-status{color:#646c78;position:absolute;top:13px;right:15px}.password-wrap input{padding-right:64px}.password-wrap button{height:34px;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 9px;font-size:11px;position:absolute;top:6px;right:7px}.remember-row{color:var(--muted);align-items:center;gap:9px;margin:8px 0 6px;font-size:11px;display:flex}.remember-row input{width:14px;height:14px;accent-color:var(--accent)}.connect-button{background:var(--accent);cursor:pointer;border:0;border-radius:10px;justify-content:space-between;align-items:center;height:48px;margin-top:6px;padding:0 18px;font-weight:750;transition:transform .15s,background .15s;display:flex;box-shadow:0 12px 30px #ef4f5529}.connect-button:hover{background:var(--accent-2);transform:translateY(-1px)}.connect-button:disabled{opacity:.55;cursor:wait;transform:none}.server-summary{border:1px solid var(--line-soft);background:#ffffff05;border-radius:11px;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;margin-top:28px;padding:13px;display:grid}.summary-icon{width:29px;height:29px;color:var(--accent-2);background:#1b2027;border-radius:8px;place-items:center;display:grid}.server-summary div{gap:3px;min-width:0;display:grid}.server-summary small{color:#656e7b;text-transform:uppercase;letter-spacing:.08em;font-size:9px}.server-summary strong{white-space:nowrap;text-overflow:ellipsis;color:#d7dae0;font-size:11px;font-weight:600;overflow:hidden}.server-summary button,.footer button{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:10px}.security-note{color:#68717e;align-items:flex-start;gap:10px;margin-top:22px;display:flex}.security-note>span{color:var(--green);margin-top:2px;font-size:8px}.security-note p{margin:0;font-size:10px;line-height:1.55}.security-note strong{color:#87909c}.remote-stage{background:#080a0d;place-items:center;min-width:0;min-height:460px;display:grid;position:relative;overflow:hidden}.stage-grid{opacity:.22;background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px);background-size:38px 38px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 0,#0000 70%);mask-image:radial-gradient(circle,#000 0,#0000 70%)}.stage-placeholder{z-index:1;text-align:center;color:var(--muted);position:relative}.stage-placeholder h2{color:#cfd3d9;letter-spacing:-.02em;margin:24px 0 7px;font-size:16px}.stage-placeholder p{margin:0;font-size:11px}.screen-illustration{background:#11151a;border:1px solid #303741;border-radius:10px;width:140px;height:94px;margin:auto;position:relative;box-shadow:0 24px 70px #00000073}.screen-illustration:after{content:"";background:#303741;width:1px;height:13px;position:absolute;bottom:-14px;left:50%}.screen-illustration>i{background:#303741;height:1px;position:absolute;bottom:-16px;left:43px;right:43px}.screen-inner{background:linear-gradient(135deg,#151b22,#0c0f13);border-radius:5px;grid-template-rows:24px 1fr;grid-template-columns:32% 1fr;gap:5px;padding:6px;display:grid;position:absolute;inset:7px;overflow:hidden}.screen-inner span{background:#252b34;border-radius:3px;display:block}.screen-inner span:first-child{background:#1b2027;grid-row:1/3}.screen-inner span:nth-child(2){background:linear-gradient(90deg,#ef4f55ad,#ef4f552e)}.screen-inner span:last-child{background:repeating-linear-gradient(#232a33 0 4px,#0000 4px 10px)}.capability-list{flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px;display:flex}.capability-list span{color:#69727e;background:#14181db8;border:1px solid #252b33;border-radius:999px;padding:5px 9px;font-size:9px}.remote-viewport{overscroll-behavior:contain;display:none;position:absolute;inset:0;overflow:auto}.canvas-surface{width:100%;min-width:100%;height:100%;min-height:100%;position:relative}.remote-stage.is-live .remote-viewport{display:block}#remoteCanvas{object-fit:contain;cursor:default;image-rendering:auto;outline:none;width:100%;height:100%;margin:auto;display:none;position:absolute;inset:0}.remote-stage.is-live #remoteCanvas{display:block}.remote-stage.is-live .stage-placeholder,.remote-stage.is-live .stage-grid{display:none}.remote-input{z-index:4;opacity:.01;resize:none;pointer-events:none;border:0;width:1px;height:30px;min-height:0;padding:0;position:absolute;top:44px;left:12px;overflow:hidden}.remote-input.is-composing{opacity:1;width:min(320px,100% - 24px);color:var(--text);background:#181c22;padding:5px 10px}.keyboard-help{z-index:4;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 24px);color:var(--muted);pointer-events:none;background:#0c0e11db;border-radius:6px;margin:0;padding:6px 9px;font-size:11px;display:none;position:absolute;top:10px;left:12px;right:12px}.remote-stage.is-live .keyboard-help{display:block}.remote-stage.hide-session-hints .keyboard-help,.remote-stage.hide-session-hints .stream-status{display:none}.stream-status{z-index:4;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 24px);color:var(--muted);pointer-events:none;background:#0c0e11db;border-radius:6px;margin:0;padding:5px 9px;font-size:10px;position:absolute;top:45px;left:12px;right:12px}.remote-stage:fullscreen{width:100%;height:100%}.ended-message{max-width:420px;line-height:1.7;margin:18px 20px 10px!important}.reconnect-button:not([hidden]){cursor:pointer;border-radius:8px;margin-top:14px;padding:9px 16px}.session-toolbar{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e11db;border:1px solid #ffffff1a;border-radius:11px;align-items:center;gap:6px;padding:6px;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 16px 40px #00000059}.session-toolbar:not([hidden]){display:flex}.session-toolbar{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 24px)}.session-toolbar select{border:1px solid var(--line);color:#b9bec6;max-width:140px;height:30px;font:inherit;background:#20252c;border-radius:7px;padding:0 8px;font-size:11px}.session-toolbar button{color:#b9bec6;cursor:pointer;background:#20252c;border:0;border-radius:7px;height:30px;padding:0 11px;font-size:10px}.session-toolbar #latencyLabel{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.toolbar-spacer{background:#343a43;width:1px;height:18px;margin:0 4px}.session-toolbar .danger-button{color:#ff7d82;background:#ef4f5524}.overlay-toggle{color:#b9bec6;white-space:nowrap;cursor:pointer;align-items:center;gap:5px;padding:0 6px;font-size:11px;display:inline-flex}.overlay-toggle input{width:14px;height:14px;accent-color:var(--accent);margin:0}.footer{border-top:1px solid var(--line-soft);color:#535b67;letter-spacing:.02em;justify-content:space-between;align-items:center;padding:0 28px;font-size:9px;display:flex}.footer button:hover{color:#a7adb6}dialog{width:min(520px,100% - 32px);color:var(--text);background:#12161b;border:1px solid #343a43;border-radius:16px;padding:0;box-shadow:0 28px 100px #000000a6}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#020406b8}.dialog-card{gap:10px;padding:24px;display:grid}.dialog-heading{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.dialog-heading h2{letter-spacing:-.035em;margin:6px 0 0;font-size:22px}.dialog-close{border:1px solid var(--line);background:var(--panel-2);width:32px;height:32px;color:var(--muted);cursor:pointer;border-radius:8px;font-size:19px}.dialog-card>p{color:var(--muted);margin:5px 0 7px;font-size:11px;line-height:1.6}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.dialog-actions button{cursor:pointer;border-radius:8px;height:38px;padding:0 16px}.secondary-button{border:1px solid var(--line);color:var(--muted);background:0 0}.primary-button{background:var(--accent);border:0;font-weight:700}.diagnostics-card{min-height:350px}#diagnosticsSummary{white-space:pre-line;font-variant-numeric:tabular-nums}#clipboardText{max-height:35vh}.dialog-actions button:disabled{opacity:.45;cursor:not-allowed}.diagnostics-log{border:1px solid var(--line-soft);background:#090c0f;border-radius:10px;max-height:360px;margin:8px 0 0;padding:0;list-style:none;overflow:auto}.diagnostics-log li{border-bottom:1px solid var(--line-soft);color:#aab0b9;grid-template-columns:72px 1fr;gap:10px;padding:10px 12px;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid}.diagnostics-log li:last-child{border-bottom:0}.diagnostics-log time{color:#56606d}.diagnostics-log .log-error{color:#ff7f84}.diagnostics-log .log-ok{color:#58dba2}.toast{z-index:20;color:#d6dae0;opacity:0;pointer-events:none;background:#181c22;border:1px solid #353b44;border-radius:9px;padding:10px 14px;font-size:11px;transition:opacity .18s,transform .18s;position:fixed;bottom:58px;left:50%;transform:translate(-50%,12px);box-shadow:0 12px 42px #00000073}.toast.show{opacity:1;transform:translate(-50%)}@keyframes pulse{50%{opacity:.45;transform:scale(.8)}}@media (max-width:820px){.app-shell{grid-template-rows:40px auto 38px}.topbar{grid-template-columns:1fr auto;padding:0 10px}.connection-state{display:none}.workspace{grid-template-columns:1fr}.connect-panel{border-right:0;border-bottom:1px solid var(--line-soft);padding:34px 24px}.remote-stage{min-height:62vh}.footer{padding:0 18px}.footer>span{white-space:nowrap;text-overflow:ellipsis;max-width:70%;overflow:hidden}}@media (max-width:480px){.brand small{display:none}.connect-panel h1{font-size:27px}.capability-list{display:none}.session-toolbar{justify-content:center;width:calc(100% - 24px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
