:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "SF Mono", monospace;--bg-dark:#0a0b10;--bg-panel:#0d101bbf;--bg-panel-solid:#0d101b;--bg-badge:#ffffff0d;--bg-badge-hover:#ffffff17;--border-glow:#00f2fe26;--border-muted:#ffffff14;--accent-cyan:#00f2fe;--accent-violet:#d500f9;--accent-blue:#4facfe;--accent-green:#00e676;--accent-red:#ff1744;--accent-orange:#ff9100;--text-primary:#f5f7fa;--text-secondary:#9fa6b2;--text-muted:#6b7280;--glass-bg:#0f1423a6;--glass-border:#ffffff12;--glass-shadow:0 8px 32px 0 #0000005e;--glass-blur:blur(20px)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html,body,#viewer{background-color:var(--bg-dark);width:100%;height:100%;font-family:var(--font-sans);color:var(--text-primary);overflow:hidden}html,body{overscroll-behavior:none;-webkit-overflow-scrolling:auto}#viewer{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;cursor:default;position:fixed;inset:0}#remoteVideo{object-fit:contain;background-color:#000;width:100%;height:100%}#video-wrapper{transform-origin:0 0;will-change:transform;contain:paint;backface-visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0}#cursor-canvas,.cursor-layer{pointer-events:none;z-index:40;image-rendering:auto;display:none;position:fixed}#cursor-canvas.active,.cursor-layer.active{display:block}#diagnostic-color-chart{z-index:45;pointer-events:none;width:192px;height:24px;image-rendering:pixelated;border:1px solid #ffffff59;position:fixed;top:8px;left:8px}#hidden-kb-input{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;width:100%;max-width:420px;padding:32px;transition:box-shadow .3s,border-color .3s}.glass-card:hover{border-color:#00f2fe4d;box-shadow:0 8px 32px #00f2fe1a}.setup-container{z-index:80;background:radial-gradient(circle at center, #0d101bcc 0%, var(--bg-dark) 100%);justify-content:center;align-items:center;padding:24px;transition:opacity .4s,visibility .4s;display:flex;position:fixed;inset:0}.setup-container.hidden{opacity:0;visibility:hidden;pointer-events:none}.brand{text-align:center;margin-bottom:28px}.brand-logo{border:1px solid var(--glass-border);background:#ffffff08;border-radius:12px;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:16px;display:inline-flex}.brand h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:6px;font-size:22px;font-weight:700}.brand p{color:var(--text-secondary);font-size:13px}.form-group{margin-bottom:20px}.form-row{gap:16px;display:flex}.form-row .form-group{flex:1}label{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px;font-size:11px;font-weight:600;display:block}.optional{color:var(--text-muted);text-transform:none;font-weight:400}input[type=text],input[type=password],select{border:1px solid var(--border-muted);width:100%;height:44px;color:var(--text-primary);font-family:var(--font-sans);background:#00000040;border-radius:8px;outline:none;padding:0 16px;font-size:14px;transition:all .25s cubic-bezier(.16,1,.3,1)}input[type=text]:focus,input[type=password]:focus,select:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 1px var(--accent-cyan), 0 0 14px var(--border-glow);background:#0006}.btn-primary{background:linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);color:#050508;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;height:46px;font-size:14px;font-weight:600;transition:transform .2s,filter .2s,box-shadow .2s;display:flex;box-shadow:0 4px 20px #00f2fe33}.btn-primary:hover{filter:brightness(1.08);box-shadow:0 6px 24px #00f2fe59}.btn-primary:active{transform:scale(.98)}#connecting-overlay{-webkit-backdrop-filter:var(--glass-blur);z-index:90;background:#0a0b10d9;flex-direction:column;justify-content:center;align-items:center;transition:opacity .4s,visibility .4s;display:flex;position:fixed;inset:0}#connecting-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.spinner-container{width:80px;height:80px;margin-bottom:24px;position:relative}.orbit-outer{border:3px solid #0000;border-top-color:var(--accent-cyan);border-bottom-color:var(--accent-cyan);border-radius:50%;animation:1.8s linear infinite spin-orbit;position:absolute;inset:0}.orbit-inner{border:3px solid #0000;border-left-color:var(--accent-violet);border-right-color:var(--accent-violet);border-radius:50%;animation:1.2s linear infinite spin-orbit-reverse;position:absolute;inset:6px}.loader-logo{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#connecting-status{letter-spacing:-.2px;margin-bottom:8px;font-size:18px;font-weight:600}#connecting-step{color:var(--text-secondary);font-size:13px;animation:1.5s ease-in-out infinite pulse-text}.btn-toggle-floating{border:1px solid var(--glass-border);width:48px;height:24px;color:var(--text-primary);cursor:pointer;z-index:60;box-shadow:var(--glass-shadow);background:#0d101be0;border-radius:12px;justify-content:center;align-items:center;transition:transform .4s cubic-bezier(.16,1,.3,1),bottom .4s cubic-bezier(.16,1,.3,1),border-color .2s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.btn-toggle-floating:hover{border-color:var(--accent-cyan)}.btn-toggle-floating #toggle-chevron{transition:transform .4s cubic-bezier(.16,1,.3,1)}.btn-toggle-floating.active{bottom:84px}.btn-toggle-floating.active #toggle-chevron{transform:rotate(180deg)}#toolbar,#toolbar *,#capsule-toolbar,#capsule-toolbar *{cursor:auto}#capsule-toolbar{border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:50;opacity:1;contain:layout paint;background:#0d101beb;border-radius:28px;padding:8px 16px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1);position:fixed;bottom:24px;left:50%;transform:translate(-50%)}#capsule-toolbar.collapsed{opacity:0;pointer-events:none;transform:translate(-50%,100px)}.toolbar-contents{align-items:center;gap:16px;display:flex}.toolbar-group{align-items:center;gap:8px;display:flex}.toolbar-divider{background:var(--border-muted);width:1px;height:20px}.btn-action{background:var(--bg-badge);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;border:1px solid #0000;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-action:hover{background:var(--bg-badge-hover);color:var(--text-primary);border-color:#ffffff1a}.btn-action.active{color:var(--accent-cyan);background:#00f2fe26;border-color:#00f2fe66;box-shadow:0 0 10px #00f2fe33}.btn-action.btn-danger{color:var(--accent-red);background:#ff174414}.btn-action.btn-danger:hover{color:#ff5252;background:#ff174426}.status-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:4px 8px;font-size:11px;font-weight:600}.status-idle{color:var(--text-secondary);background:#ffffff0d}.status-connecting{color:var(--accent-orange);background:#ff91001f;animation:1.5s ease-in-out infinite pulse-opacity}.status-connected{color:var(--accent-green);background:#00e6761f}#stats-drawer{border-left:1px solid var(--glass-border);z-index:70;contain:layout paint;background:#0a0b10f2;flex-direction:column;width:360px;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(0);box-shadow:-8px 0 32px #0006}#stats-drawer.hidden{transform:translate(100%)}.drawer-header{border-bottom:1px solid var(--border-muted);justify-content:space-between;align-items:center;padding:24px;display:flex}.drawer-header h2{font-size:18px;font-weight:600}.btn-icon{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-icon:hover{background:var(--bg-badge);color:var(--text-primary)}.drawer-content{flex-direction:column;flex:1;gap:24px;padding:24px;display:flex;overflow-y:auto}.stat-section h3{text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:12px;font-size:11px;font-weight:600}.stat-grid{flex-direction:column;gap:8px;display:flex}.stat-item{background:var(--bg-badge);border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.stat-item:hover{background:var(--bg-badge-hover);border-color:#ffffff08}.stat-label{color:var(--text-secondary);font-size:12px}.stat-value{font-family:var(--font-mono);color:var(--accent-cyan);font-size:12px;font-weight:500}.stat-ok{color:var(--accent-green)!important}.stat-warn{color:var(--accent-orange)!important}.stat-error{color:var(--accent-red)!important}#toast-container{z-index:100;pointer-events:none;contain:layout paint;flex-direction:column;gap:12px;display:flex;position:fixed;top:24px;right:24px}.toast{pointer-events:auto;border:1px solid #ff174440;border-left:4px solid var(--accent-red);background:#120c10f2;border-radius:8px;align-items:flex-start;gap:12px;min-width:300px;max-width:380px;padding:16px;transition:opacity .3s,transform .3s;animation:.4s cubic-bezier(.16,1,.3,1) toast-slide-in;display:flex;box-shadow:0 8px 32px #ff174426}.toast.removing{opacity:0;transform:translateY(-20px)}.toast-icon{color:var(--accent-red);flex-shrink:0;margin-top:2px}.toast-body{flex-grow:1}.toast-title{color:var(--text-primary);margin-bottom:4px;font-size:14px;font-weight:600}.toast-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}.toast-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:2px;transition:all .2s}.toast-close:hover{background:var(--bg-badge);color:var(--text-primary)}@keyframes spin-orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-orbit-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes pulse-text{0%,to{opacity:.6}50%{opacity:1}}@keyframes pulse-opacity{0%,to{opacity:.5}50%{opacity:1}}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}@media (width<=480px){.setup-container{padding:16px}.glass-card{padding:24px 16px}#stats-drawer{width:100%}#capsule-toolbar{border-radius:20px;width:90%;padding:6px 12px}.toolbar-contents{justify-content:space-between;gap:8px;width:100%}.btn-action{width:36px;height:36px}}@supports (padding-bottom:env(safe-area-inset-bottom)){#capsule-toolbar,.btn-toggle-floating{bottom:calc(24px + env(safe-area-inset-bottom,0px))}.btn-toggle-floating.active{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}