:root{--bg: #f4f6f9;--surface: #ffffff;--surface-2: #f8f9fb;--border: #e3e7ef;--border-2: #edf0f5;--accent: #2563eb;--accent-dim: rgba(37, 99, 235, .08);--accent-glow: rgba(37, 99, 235, .15);--text: #111827;--text-2: #6b7280;--text-3: #c0c7d4;--green: #16a34a;--amber: #d97706;--red: #dc2626;--radius: 8px;--sidebar-w: 380px;--topbar-h: 50px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{height:100%;margin:0}button,input,textarea{font:inherit}textarea{resize:vertical}button{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;display:inline-flex;font-weight:600;gap:6px;justify-content:center;min-height:34px;padding:0 12px;transition:background .1s,border-color .1s,color .1s}button:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}button:active:not(:disabled){background:var(--accent-glow)}button:disabled{cursor:not-allowed;opacity:.4}.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{align-items:center;background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-shrink:0;gap:12px;height:var(--topbar-h);justify-content:space-between;padding:0 20px}.topbar-brand{align-items:baseline;display:flex;gap:10px;min-width:0}.topbar-brand h1{font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0;white-space:nowrap}.session-id{color:var(--text-3);font-size:11px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-meta{align-items:center;display:flex;flex-shrink:0;gap:12px}.meta-item{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}.status-pill{align-items:center;border-radius:999px;display:inline-flex;font-size:11px;font-weight:700;letter-spacing:.02em;min-height:22px;padding:0 9px}.status-live{background:#dcfce7;color:#15803d}.status-paused,.status-waiting{background:#fef9c3;color:#a16207}.status-ended,.status-error{background:#fee2e2;color:#b91c1c}.connection{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:5px}.connection.online{color:var(--green)}.connection.offline{color:var(--text-3)}.workspace{display:flex;flex:1;min-height:0;overflow:hidden}.frame-area{background:var(--bg);display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden}.polling-paused-banner{align-items:center;background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;display:flex;flex-shrink:0;gap:12px;justify-content:space-between;min-height:48px;padding:8px 16px}.polling-paused-copy{display:grid;gap:2px;min-width:0}.polling-paused-copy strong,.polling-paused-copy span,.polling-paused-at{font-size:12px}.polling-paused-copy span{color:#c2410c;overflow-wrap:anywhere}.polling-paused-at{color:#9a3412;flex-shrink:0;font-variant-numeric:tabular-nums}.polling-paused-banner button{background:#fff;border-color:#fdba74;color:#9a3412;flex-shrink:0}.frame-panel{display:flex;flex:1;flex-direction:column;min-height:0}.frame-stage{align-items:center;display:flex;flex:1;justify-content:center;min-height:0;overflow:hidden;padding:24px;position:relative}.frame-image-wrap{display:inline-block;line-height:0;max-height:100%;max-width:100%;position:relative}.frame-image-wrap img{display:block;max-height:calc(100vh - var(--topbar-h) - 48px);max-width:100%;object-fit:contain;width:auto;border-radius:3px;box-shadow:0 4px 6px #0000000f,0 10px 40px #0000001f,0 0 0 1px #0000000f}.portrait-frame img{max-width:min(100%,420px)}.landscape-frame img{max-height:calc(100vh - var(--topbar-h) - 48px)}.empty-frame{align-items:center;color:var(--text-3);display:flex;flex-direction:column;font-size:13px;font-weight:600;gap:12px}.gesture-overlay{cursor:crosshair;top:0;right:0;bottom:0;left:0;position:absolute;border-radius:3px}.gesture-overlay:after{border:1.5px solid rgba(37,99,235,.25);border-radius:3px;content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;transition:border-color .15s,box-shadow .15s}.gesture-overlay:active:after{border-color:#2563eb99;box-shadow:0 0 0 3px #2563eb14}.gesture-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.gesture-svg line{stroke:#3b82f6;stroke-linecap:round;stroke-width:6}.gesture-svg circle:not(.tap-ring){fill:#8b5cf626;stroke:#7c3aed;stroke-width:3}.gesture-svg .tap-ring{fill:#eab30826;stroke:#ca8a04;stroke-width:3}.resize-handle{cursor:col-resize;flex-shrink:0;position:relative;width:5px;z-index:10}.resize-handle:before{background:var(--border);content:"";top:0;right:0;bottom:0;left:2px;position:absolute;transition:background .15s;width:1px}.resize-handle:after{content:"";top:0;right:-6px;bottom:0;left:-6px;position:absolute}.resize-handle:hover:before,.resize-handle:active:before{background:var(--accent);width:2px;left:1px}.sidebar{background:var(--surface);border-left:none;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;width:var(--sidebar-w, 380px)}.sidebar-tabs{border-bottom:1px solid var(--border);display:flex;flex-shrink:0}.sidebar-tabs button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--text-2);flex:1;font-size:12px;font-weight:600;letter-spacing:.02em;min-height:42px;padding:0 4px;transition:color .12s,border-color .12s}.sidebar-tabs button:hover:not(:disabled){background:transparent;border-bottom-color:transparent;color:var(--text)}.sidebar-tabs button.active{border-bottom-color:var(--accent);color:var(--accent)}.sidebar-body{display:flex;flex:1;flex-direction:column;gap:10px;overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.panel h2{color:var(--text-2);font-size:10px;font-weight:700;letter-spacing:.08em;margin:0 0 12px;text-transform:uppercase}.command-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.command-row button{flex:1;font-size:12px;min-height:32px}button.danger{background:#fff5f5;border-color:#fecaca;color:var(--red)}button.danger:hover:not(:disabled){background:#fee2e2;border-color:var(--red);color:#991b1b}button.wide{font-size:13px;margin-top:8px;width:100%}.field{align-items:center;display:grid;gap:8px;grid-template-columns:76px 1fr 44px;margin:7px 0}.field span{color:var(--text-2);font-size:11px;font-weight:600}.field strong{color:var(--text-2);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}.field input[type=range]{accent-color:var(--accent);cursor:pointer;width:100%}.inline-command{display:grid;gap:6px;grid-template-columns:1fr auto;margin-top:10px}.inline-command input,.stacked-field input,.stacked-field textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);min-height:34px;min-width:0;padding:6px 10px;width:100%;transition:border-color .12s,box-shadow .12s}.inline-command input:focus,.stacked-field input:focus,.stacked-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}.inline-command input::placeholder,.stacked-field input::placeholder,.stacked-field textarea::placeholder{color:var(--text-3)}.segmented{display:grid;gap:4px;grid-template-columns:repeat(4,1fr);margin-bottom:12px}.segmented-2{grid-template-columns:repeat(2,1fr)}.segmented button{font-size:12px;min-height:32px;overflow:hidden;padding:0 6px}.segmented button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segmented .selected{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.kv-list{display:grid;gap:8px;margin:0}.kv-list div{display:grid;gap:8px;grid-template-columns:minmax(80px,.45fr) 1fr}.kv-list dt{color:var(--text-3);font-size:10px;font-weight:700;letter-spacing:.05em;overflow-wrap:anywhere;padding-top:1px;text-transform:uppercase}.kv-list dd{color:var(--text);font-size:12px;margin:0;overflow-wrap:anywhere}.json-tree{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12px;line-height:1.5}.tree-leaf{align-items:baseline;display:flex;gap:6px;min-height:22px;padding:1px 6px}.tree-node{display:flex;flex-direction:column}.tree-toggle{align-items:baseline;background:transparent;border:none;border-radius:4px;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:12px;font-weight:inherit;gap:4px;justify-content:flex-start;min-height:22px;padding:1px 6px;text-align:left;transition:background .1s;width:100%}.tree-toggle:hover{background:var(--accent-dim)}.tree-caret{color:var(--text-3);display:inline-block;font-size:15px;line-height:1;transition:transform .12s;width:10px}.tree-caret.open{transform:rotate(90deg)}.tree-key{color:var(--text-2);flex-shrink:0;font-weight:600}.tree-summary{color:var(--text-3);font-size:11px}.tv-str{color:#16a34a;word-break:break-all}.tv-num{color:#2563eb}.tv-bool{color:#b45309}.tv-null{color:var(--text-3);font-style:italic}.tv-other{color:var(--text)}.muted{color:var(--text-3);font-size:12px;margin:0}.event-list{display:grid;gap:8px;list-style:none;margin:0;padding:0}.event-list li{border-bottom:1px solid var(--border-2);display:grid;gap:3px;padding-bottom:8px}.event-list li:last-child{border-bottom:none;padding-bottom:0}.event-list span{color:var(--text-3);font-size:11px;font-variant-numeric:tabular-nums}.event-list strong{color:var(--text);font-size:12px;font-weight:500;overflow-wrap:anywhere}.gesture-settings{border-top:1px solid var(--border-2);margin-top:12px;padding-top:10px}.state-json pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-2);font-size:11px;margin:0;max-height:280px;overflow:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.missing-session{align-items:center;background:var(--bg);display:flex;height:100vh;justify-content:center;padding:24px}.debug-join{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);max-width:520px;padding:32px;width:100%}.debug-join-header{align-items:flex-start;display:flex;gap:14px;margin-bottom:24px}.debug-join-header svg{color:var(--accent);flex-shrink:0;margin-top:3px}.debug-join h1{font-size:18px;line-height:1.3;margin:0}.debug-join p{color:var(--text-2);font-size:13px;margin:6px 0 0}.debug-join-form{display:grid;gap:14px}.stacked-field{display:grid;gap:6px}.stacked-field span{color:var(--text-2);font-size:12px;font-weight:600}.form-error{background:#fff5f5;border:1px solid #fecaca;border-radius:var(--radius);color:#b91c1c;font-size:13px;margin:0;padding:10px 12px}@media (max-width: 820px){.workspace{flex-direction:column}.frame-area{flex:none;height:52vh;min-height:0}.polling-paused-banner{align-items:flex-start;flex-wrap:wrap}.resize-handle{display:none}.sidebar{border-top:1px solid var(--border);flex:1;width:100%!important}.topbar-brand h1{font-size:13px}.session-id{display:none}}