:root{color:#e9eef7;background:#0a0d12;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:32px 0 48px}.app-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #29313d;padding-bottom:20px}.app-header h1{margin:0;font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.05em}.header-actions{align-items:center;display:flex;gap:10px}.header-actions button,.login-card button{background:#ecf2ff;border:0;border-radius:7px;color:#111720;padding:8px 14px}.viewer-user{color:#92a1b8;font-size:.85rem}.eyebrow{color:#92a1b8;font-size:.75rem;letter-spacing:.13em;margin:0 0 8px;text-transform:uppercase}.connection{border:1px solid currentColor;border-radius:999px;padding:6px 11px;text-transform:capitalize}.connection-online{color:#61d397}.connection-offline,.connection-locked{color:#ff806f}.connection-reconnecting,.connection-stale{color:#f0be5d}.mode-switch{align-items:center;display:flex;gap:14px;padding:20px 0}.mode-switch button{background:#ecf2ff;border:0;border-radius:7px;color:#111720;padding:8px 14px}.mode-switch button.selected{box-shadow:0 0 0 2px #75b7ff}.mode-switch button:disabled{cursor:not-allowed;opacity:.45}.active-mode{color:#75b7ff}.protocol-error,.gap-notice{background:#4a161d;border:1px solid #b43a48;border-radius:8px;padding:12px}.workspace{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) 280px}.surface-panel,.side-panel,.timeline{background:#111720;border:1px solid #29313d;border-radius:12px;padding:16px}.fidelity-note{color:#92a1b8;font-size:.8rem;margin-bottom:12px}.device-surface{background:#e7e9ed;border-radius:8px;color:#111720;margin:0 auto;max-height:68vh;max-width:100%;overflow:hidden;position:relative}.empty-surface{align-items:center;aspect-ratio:9 / 16;background:#171e28;color:#92a1b8;display:flex;justify-content:center;margin:0 auto;max-height:68vh;padding:20px}.screen-element{border:1px solid rgba(15,23,42,.16);font-size:clamp(8px,1.2vw,14px);overflow:hidden;padding:2px;position:absolute;white-space:pre-wrap}.role-button{align-items:center;background:#d4e6ff;border-radius:4px;display:flex;justify-content:center}.role-text_field{background:#fff;border:1px solid #566276;border-radius:3px}.role-image_placeholder{background:repeating-linear-gradient(45deg,#d8dbe0,#d8dbe0 4px,#c7cbd1 4px 8px);color:transparent}.diagnostics{display:grid;gap:12px}.diagnostics div{border-top:1px solid #29313d;display:flex;justify-content:space-between;padding-top:10px}.diagnostics dt{color:#92a1b8}.diagnostics dd{margin:0;max-width:160px;overflow:hidden;text-overflow:ellipsis}.timeline{margin-top:22px}.timeline label{display:grid;gap:7px;max-width:320px}.timeline input{background:#0a0d12;border:1px solid #3b4657;border-radius:6px;color:inherit;padding:9px}.timeline-placeholder{align-items:center;border-top:2px solid #4d77a8;color:#92a1b8;display:flex;margin-top:30px;min-height:72px}.gap-notice{display:grid;gap:4px}.loading-shell,.login-shell{align-items:center;display:flex;justify-content:center;min-height:100vh}.login-card{background:#111720;border:1px solid #29313d;border-radius:14px;display:grid;gap:16px;padding:28px;width:min(420px,calc(100vw - 32px))}.login-card h1{margin:0 0 8px}.login-card label{display:grid;gap:7px}.login-card input{background:#0a0d12;border:1px solid #3b4657;border-radius:6px;color:inherit;padding:10px}.login-card button:disabled{cursor:wait;opacity:.65}.login-error{background:#4a161d;border:1px solid #b43a48;border-radius:7px;padding:10px}@media(max-width:760px){.workspace{grid-template-columns:1fr}.side-panel{order:2}}