:root{color-scheme:dark;font-family:Avenir Next,Avenir,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #07111f;--panel: #0c192a;--panel-raised: #12243a;--primary: #2e6bff;--signal: #67e8f9;--text: #f6f8fc;--text-muted: #8da2be;--border: #203a56;--success: #42d6a4;--warning: #f7c96a;--danger: #ff6b77;--radius-sm: .625rem;--radius-md: .875rem;--radius-lg: 1.25rem;--safe-top: max(.75rem, env(safe-area-inset-top));--safe-bottom: max(.75rem, env(safe-area-inset-bottom));--safe-left: max(.75rem, env(safe-area-inset-left));--safe-right: max(.75rem, env(safe-area-inset-right));--app-height: 100dvh;--duo-upper-height: env(viewport-segment-height 0 0, 50dvh);--duo-lower-top: env(viewport-segment-top 0 1, 50dvh);background:var(--ink);color:var(--text);scrollbar-color:#35536f #091522;scrollbar-width:thin}*{box-sizing:border-box}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#091522}*::-webkit-scrollbar-thumb{background:#35536f;border:2px solid #091522;border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:#4a708f}html,body{min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--ink)}body{min-height:100svh}button,input,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{width:100%;height:100svh;height:var(--app-height, 100dvh);padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.75rem;background:radial-gradient(circle at 15% 0%,rgb(46 107 255 / 12%),transparent 28rem),var(--ink)}.topbar{min-height:3.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 .25rem}.brand{display:flex;align-items:center;min-width:0;gap:.75rem}.brand-mark{width:2.25rem;height:2.25rem;position:relative;display:grid;place-items:center;border:1px solid var(--border);border-radius:.75rem;background:var(--panel)}.brand-mark:before,.brand-mark:after,.brand-mark span{content:"";position:absolute;width:.28rem;border-radius:999px;background:var(--primary)}.brand-mark:before{height:.55rem;transform:translate(-.42rem)}.brand-mark span{height:1.05rem}.brand-mark:after{height:.78rem;transform:translate(.42rem);background:var(--signal)}.brand h1,.brand p{margin:0}.brand h1{max-width:11rem;overflow:hidden;color:var(--text);font-size:1.05rem;font-weight:650;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}.eyebrow{color:var(--text-muted);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.status-chip{flex:0 0 auto;min-height:2rem;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .68rem;border:1px solid var(--border);border-radius:999px;background:#0c192ac7;color:var(--text-muted);font-size:.72rem;font-weight:650}.status-dot{width:.48rem;height:.48rem;border-radius:50%;background:var(--text-muted);box-shadow:0 0 0 3px #8da2be1a}.status-chip[data-state=connecting] .status-dot{background:var(--warning);animation:status-pulse 1.2s ease-in-out infinite}.status-chip[data-state=connected]{color:var(--success);border-color:#42d6a44d}.status-chip[data-state=connected] .status-dot{background:var(--success);box-shadow:0 0 0 3px #42d6a41f}.status-chip[data-state=error]{color:var(--danger);border-color:#ff6b774d}.status-chip[data-state=error] .status-dot{background:var(--danger)}.remote-frame{min-height:0;position:relative;padding-left:1.05rem}.signal-rail{position:absolute;inset:1.25rem auto 1.25rem 0;width:.45rem;display:grid;grid-template-rows:auto 1fr auto 1fr auto;justify-items:center;z-index:2}.signal-node{width:.42rem;height:.42rem;border:1px solid var(--signal);border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px #67e8f912}.signal-line{width:1px;background:linear-gradient(var(--border),var(--primary),var(--border));opacity:.7}body[data-connection=connected] .signal-node{background:var(--signal);animation:signal-flow 1.8s ease-in-out infinite alternate}.screen{width:100%;height:100%;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(rgb(255 255 255 / 2%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px),#050a12;background-size:28px 28px;box-shadow:inset 0 0 0 1px #ffffff05,0 18px 70px #00000047}.screen>canvas{max-width:100%;max-height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.empty-state,.loading-state,.error-state{width:min(100%,30rem);max-height:100%;padding:1.5rem;overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch}.empty-state h2{margin:.6rem 0 .55rem;font-size:clamp(1.65rem,7vw,2.6rem);line-height:1.04;letter-spacing:-.045em}.empty-state>p:not(.empty-kicker,.endpoint){max-width:25rem;margin:0 auto;color:var(--text-muted);font-size:.9rem;line-height:1.55}.empty-kicker{margin:1.2rem 0 0;color:var(--signal);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.mac-glyph{width:5.25rem;height:4.3rem;position:relative;margin:0 auto}.mac-screen{position:absolute;inset:0 0 .8rem;border:1px solid rgb(103 232 249 / 45%);border-radius:.7rem;background:linear-gradient(145deg,#2e6bff45,#67e8f90d);box-shadow:0 0 2rem #2e6bff29}.mac-screen:after{content:"";position:absolute;width:.3rem;height:.3rem;left:calc(50% - .15rem);bottom:.3rem;border-radius:50%;background:var(--signal)}.mac-stand:before,.mac-stand:after{content:"";position:absolute;background:var(--border)}.mac-stand:before{width:1px;height:.8rem;left:50%;bottom:.25rem}.mac-stand:after{width:2.2rem;height:1px;left:calc(50% - 1.1rem);bottom:.25rem}.button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.72rem 1rem;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text);font-size:.86rem;font-weight:700;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}.button:active{transform:translateY(1px)}.button-primary{background:var(--primary);box-shadow:0 8px 28px #2e6bff3d}.button-primary:hover{background:#437cff}.button-secondary{border-color:var(--border);background:var(--panel-raised)}.button-secondary:hover{border-color:#355778;background:#162b44}.empty-state .button-primary{min-width:13rem;margin-top:1.25rem}.button-arrow{font-size:1.05rem}.endpoint{margin:.8rem 0 0;color:var(--text-muted);font-family:SFMono-Regular,SF Mono,ui-monospace,Menlo,monospace;font-size:.64rem}.loading-state,.error-state{color:var(--text-muted)}.spinner{width:2rem;height:2rem;display:inline-block;border:2px solid var(--border);border-top-color:var(--signal);border-radius:50%;animation:spin .8s linear infinite}.error-title{margin:0 0 .35rem;color:var(--danger);font-size:1.15rem;font-weight:750}.error-state .button{margin-top:.7rem}.control-dock{min-height:3.65rem;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.45rem;overflow-x:auto;border:1px solid rgb(32 58 86 / 86%);border-radius:1rem;background:#0c192ad6;box-shadow:0 14px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}.duo-deck{display:none}.duo-keyboard-launch{min-width:min(18rem,82%);min-height:3.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.75rem 1.15rem;border:1px solid rgb(46 107 255 / 55%);border-radius:var(--radius-md);background:#2e6bff2e;color:var(--text);font-weight:700}.duo-keyboard-launch>span:first-child{color:var(--signal);font-size:1.25rem}.modifier-group{display:flex;gap:.25rem}.control-button{width:2.75rem;min-width:2.75rem;height:2.75rem;border:1px solid transparent;border-radius:.72rem;background:transparent;color:var(--text-muted);font-size:1.05rem;font-weight:700;transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease}#duo-mode-button{font-size:.68rem;letter-spacing:.04em}.control-button:hover{border-color:var(--border);background:var(--panel-raised);color:var(--text)}.control-button:active{transform:scale(.96)}.control-button[aria-pressed=true]{border-color:#2e6bff8c;background:#2e6bff2e;color:#a9c2ff}.control-danger{color:var(--danger)}.control-danger:hover{border-color:#ff6b774d;background:#ff6b771a}.dock-divider{width:1px;height:1.7rem;flex:0 0 auto;margin:0 .1rem;background:var(--border)}.app-dialog{width:min(calc(100% - 1.5rem),28rem);max-height:min(88dvh,42rem);padding:0;overflow:hidden;border:1px solid var(--border);border-radius:1.25rem;background:var(--panel);color:var(--text);box-shadow:0 32px 90px #00000094}.app-dialog::backdrop{background:#02070db8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-dialog form{max-height:inherit;padding:1.15rem;overflow-y:auto}.dialog-handle{width:2.5rem;height:.24rem;margin:0 auto 1.1rem;border-radius:999px;background:var(--border)}.app-dialog h2{margin:.25rem 0 .45rem;font-size:1.45rem;letter-spacing:-.035em}.app-dialog h2+p{margin:0 0 1.15rem;color:var(--text-muted);font-size:.86rem;line-height:1.5}.app-dialog label{display:block;margin-bottom:.45rem;color:#cbd8e8;font-size:.78rem;font-weight:700}.secret-field{min-height:3rem;display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--ink)}.secret-field:focus-within{border-color:var(--signal);box-shadow:0 0 0 3px #67e8f91a}.secret-field input{min-width:0;flex:1;padding:.8rem .9rem;border:0;outline:0;background:transparent;color:var(--text)}.secret-field button{min-height:2.35rem;margin-right:.3rem;padding:0 .7rem;border:0;border-radius:.55rem;background:var(--panel-raised);color:var(--signal);font-size:.72rem;font-weight:700}textarea{width:100%;min-height:9.5rem;padding:.85rem;resize:none;border:1px solid var(--border);border-radius:var(--radius-md);outline:0;background:var(--ink);color:var(--text);line-height:1.5}textarea:focus{border-color:var(--signal);box-shadow:0 0 0 3px #67e8f91a}.mobile-keyboard-input,.mobile-keyboard-input:focus{width:1px;min-height:1px;height:1px;position:absolute;left:-40px;bottom:0;z-index:-1;padding:0;overflow:hidden;border:0;border-radius:0;outline:0;background:#fff;color:#fff;box-shadow:none}.field-error,.field-help{min-height:1.2rem;margin:.45rem 0 0;font-size:.75rem}.field-error{color:var(--danger)}.field-help{color:var(--text-muted)}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.dialog-actions-wrap{grid-template-columns:1fr 1fr}.dialog-actions-wrap .button-primary{grid-column:1 / -1;grid-row:1}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes status-pulse{50%{box-shadow:0 0 0 6px #f7c96a14}}@keyframes signal-flow{0%{box-shadow:0 0 0 3px #67e8f912}to{box-shadow:0 0 0 6px #67e8f929}}@media(max-width:600px){.app-shell{gap:.55rem}.topbar{min-height:2.8rem}.brand-mark{width:2rem;height:2rem}.status-chip{max-width:9.6rem;padding-inline:.55rem}#status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:1rem}.remote-frame{padding-left:0}.signal-rail{display:none}.empty-state h2{font-size:clamp(1.45rem,6.8vw,2rem)}.mac-glyph{width:4.5rem;height:3.7rem}.control-dock{justify-content:flex-start}}@media(min-width:900px){.app-shell{max-width:90rem;margin:0 auto;padding-inline:1.25rem}.control-dock{width:max-content;max-width:100%;justify-self:center}}@media(min-width:700px)and (pointer:coarse),(orientation:landscape)and (pointer:coarse){.app-shell{max-width:none;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:.5rem;margin:0}.topbar{grid-column:1;grid-row:1;min-height:2.35rem}.brand-mark{width:1.9rem;height:1.9rem;border-radius:.62rem}.brand .eyebrow{display:none}.remote-frame{grid-column:1;grid-row:2;padding-left:0}.signal-rail{display:none}.control-dock{width:6.35rem;min-height:0;max-height:100%;grid-column:2;grid-row:1 / 3;align-self:stretch;display:grid;grid-template-columns:repeat(2,2.75rem);grid-auto-rows:2.75rem;align-content:center;justify-content:center;gap:.35rem;padding:.45rem;overflow-x:hidden;overflow-y:auto;border-radius:1rem}.modifier-group{display:grid;grid-column:1 / -1;grid-template-columns:repeat(2,2.75rem);gap:.35rem}.dock-divider{width:100%;height:1px;grid-column:1 / -1;margin:0}.control-danger{grid-column:1 / -1;justify-self:center}.app-dialog{max-height:calc(var(--app-height, 100dvh) - var(--safe-top) - var(--safe-bottom))}}@media(hover:none){.button-primary:hover{background:var(--primary)}.button-secondary:hover{border-color:var(--border);background:var(--panel-raised)}.control-button:hover{border-color:transparent;background:transparent;color:var(--text-muted)}.control-button[aria-pressed=true]:hover{border-color:#2e6bff8c;background:#2e6bff2e;color:#a9c2ff}.control-danger:hover{color:var(--danger)}}body[data-connection=connected][data-duo-mode=true] .app-shell{max-width:none;position:relative;display:block;margin:0;padding:0}body[data-connection=connected][data-duo-mode=true] .topbar{min-height:2.35rem;position:absolute;top:var(--safe-top);right:var(--safe-right);left:var(--safe-left);z-index:5}body[data-connection=connected][data-duo-mode=true] .brand-mark{width:1.9rem;height:1.9rem;border-radius:.62rem}body[data-connection=connected][data-duo-mode=true] .brand .eyebrow,body[data-connection=connected][data-duo-mode=true] .signal-rail{display:none}body[data-connection=connected][data-duo-mode=true] .remote-frame{position:absolute;top:calc(var(--safe-top) + 2.85rem);right:var(--safe-right);left:var(--safe-left);height:max(8rem,calc(var(--duo-upper-height) - var(--safe-top) - 3.35rem));padding:0}body[data-connection=connected][data-duo-mode=true] .duo-deck{position:absolute;top:calc(var(--duo-lower-top) + .35rem);right:var(--safe-right);bottom:var(--safe-bottom);left:var(--safe-left);display:grid;place-items:center;align-content:center;gap:1rem;padding:4.7rem 1rem 1rem;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(rgb(255 255 255 / 2%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px),var(--panel);background-size:28px 28px;text-align:center}body[data-connection=connected][data-duo-mode=true] .duo-deck:before{content:"";width:3.25rem;height:.25rem;position:absolute;top:.65rem;left:calc(50% - 1.625rem);border-radius:999px;background:var(--border)}.duo-deck-copy h2,.duo-deck-copy p{margin:0}.duo-deck-copy h2{margin-top:.35rem;font-size:clamp(1.15rem,3vw,1.55rem);letter-spacing:-.03em}.duo-deck-copy>p:last-child{max-width:26rem;margin-top:.45rem;color:var(--text-muted);font-size:.82rem;line-height:1.45}body[data-connection=connected][data-duo-mode=true] .control-dock{width:max-content;min-height:3.65rem;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 1rem);max-height:4rem;position:absolute;top:calc(var(--duo-lower-top) + .8rem);left:50%;z-index:6;display:flex;grid-column:auto;grid-row:auto;align-self:auto;align-items:center;justify-content:flex-start;gap:.4rem;padding:.45rem;overflow-x:auto;overflow-y:hidden;border-radius:1rem;transform:translate(-50%)}body[data-connection=connected][data-duo-mode=true] .modifier-group{display:flex;grid-column:auto;grid-template-columns:none;gap:.25rem}body[data-connection=connected][data-duo-mode=true] .dock-divider{width:1px;height:1.7rem;grid-column:auto;margin:0 .1rem}body[data-connection=connected][data-duo-mode=true] .control-danger{grid-column:auto;justify-self:auto}body[data-connection=connected][data-duo-mode=true][data-keyboard-open=true] .remote-frame{height:auto;bottom:var(--safe-bottom)}body[data-connection=connected][data-duo-mode=true][data-keyboard-open=true] .duo-deck{display:none}body[data-connection=connected][data-duo-mode=true][data-keyboard-open=true] .control-dock{width:auto;min-height:3.2rem;top:auto;right:var(--safe-right);bottom:var(--safe-bottom);left:auto;overflow:visible;transform:none}body[data-connection=connected][data-duo-mode=true][data-keyboard-open=true] .control-dock>:not(#keyboard-button){display:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media(forced-colors:active){*{scrollbar-color:auto}.status-dot,.signal-node{border:1px solid CanvasText}}