:root{--color-bg-base: #08080A;--color-surface: rgba(20, 20, 24, .6);--color-surface-hover: rgba(30, 30, 36, .8);--color-border: rgba(255, 255, 255, .05);--color-text-hero: #FFFFFF;--color-text-primary: rgba(255, 255, 255, .9);--color-text-secondary: rgba(255, 255, 255, .5);--color-text-tertiary: rgba(255, 255, 255, .3);--color-accent-system: #6B7280;--color-accent-agent-1: #8B5CF6;--color-accent-agent-2: #3B82F6;--color-accent-owner: #F59E0B;--color-accent-goal: #10B981;--color-accent-error: #EF4444;--font-family-display: "Outfit", -apple-system, sans-serif;--font-family-body: "Inter", -apple-system, sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--step--1: clamp(.75rem, .7283rem + .1087vw, .8125rem);--step-0: clamp(.875rem, .8315rem + .2174vw, 1rem);--step-1: clamp(1.0208rem, .9472rem + .3683vw, 1.2333rem);--step-2: clamp(1.1909rem, 1.0773rem + .5681vw, 1.517rem);--step-3: clamp(1.3894rem, 1.2234rem + .8302vw, 1.8659rem);--step-4: clamp(1.621rem, 1.3871rem + 1.1691vw, 2.2933rem);--step-5: clamp(1.8911rem, 1.5705rem + 1.6033vw, 2.8185rem);--step-6: clamp(2.2063rem, 1.7753rem + 2.155vw, 3.4448rem);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);--ease-spring-1: cubic-bezier(.175, .885, .32, 1.275);--ease-spring-2: cubic-bezier(.34, 1.56, .64, 1);--ease-spring-smooth: cubic-bezier(.2, .8, .2, 1);--duration-fast: .3s;--duration-medium: .6s;--duration-slow: 1.2s;--duration-epic: 2.5s;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--spacing-xl: 4rem;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 9999px;--stage-max-width: 800px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg-base);color:var(--color-text-primary);font-family:var(--font-family-body);font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-family-display);font-weight:500;letter-spacing:-.02em}button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}pre,code{font-family:var(--font-family-mono);font-size:.8125rem}.ambient-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.15;pointer-events:none;z-index:-1;transition:background-color var(--duration-epic) var(--ease-spring-smooth),transform var(--duration-epic) var(--ease-spring-smooth)}.glow-primary{width:60vw;height:60vw;background-color:var(--color-accent-agent-1);top:-20vw;right:-10vw;animation:float-slow 20s infinite alternate ease-in-out}.glow-secondary{width:50vw;height:50vw;background-color:var(--color-accent-agent-2);bottom:-10vw;left:-10vw;animation:float-slow 25s infinite alternate-reverse ease-in-out}.stage{max-width:720px;margin:0 auto;min-height:100vh;padding:0 var(--spacing-md) 20vh;display:flex;flex-direction:column;position:relative}.ambient-header{position:sticky;top:0;z-index:10;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-xl);background:#0a0a0cd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);margin-left:calc(-1 * var(--spacing-md));margin-right:calc(-1 * var(--spacing-md));padding-left:var(--spacing-md);padding-right:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.03)}.header-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.room-topic{font-size:var(--step-3);font-weight:500;letter-spacing:-.03em;color:var(--color-text-hero);line-height:1.1}.room-meta{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--step-0);color:var(--color-text-secondary)}.status-indicator{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.05em;font-size:var(--step--1);font-weight:600}.status-indicator:before{content:"";display:block;width:8px;height:8px;border-radius:50%;background-color:currentColor}.status-indicator.thinking{color:var(--color-accent-agent-1);animation:pulse-glow 2s infinite}.status-indicator.owner-wait{color:var(--color-accent-owner)}.status-indicator.done{color:var(--color-accent-goal)}.status-indicator.error{color:var(--color-accent-error)}.agent-orbs-container{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.agent-orb{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--duration-fast) var(--ease-spring-1),border-color var(--duration-fast) var(--ease-spring-1)}.agent-orb .avatar{width:24px;height:24px;border-radius:50%;background:var(--orb-color, var(--color-accent-system));box-shadow:0 0 12px var(--orb-color, transparent),0 0 4px var(--orb-color, transparent);transition:transform .2s ease,box-shadow .2s ease}.agent-orb .name{font-size:var(--step--1);font-weight:500;color:var(--color-text-primary)}.agent-orb.is-typing{transform:translateY(-2px);border-color:var(--orb-color, var(--color-accent-system))}.agent-orb.is-typing .avatar{animation:pulse-ring 1.5s infinite var(--ease-out-expo)}.timeline-stream{display:flex;flex-direction:column;gap:var(--spacing-md);padding-left:0;border-left:none;position:relative}.timeline-event{position:relative;opacity:0;transform:translateY(12px) scale(.99);display:flex;flex-direction:column}.timeline-event.revealed{animation:slide-up-fade-gentle .4s var(--ease-out-expo) forwards}.event-meta{font-size:var(--step--1);color:var(--color-text-tertiary);margin-bottom:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-sm)}.event-actor{color:var(--event-color, var(--color-text-secondary));font-weight:500;letter-spacing:.01em}.event-content{font-size:1.0625rem;color:var(--color-text-primary);line-height:1.6;max-width:65ch;font-family:var(--font-family-body);background:var(--color-surface);border:1px solid var(--color-border);padding:14px 18px;border-radius:var(--radius-md);border-bottom-left-radius:4px;align-self:flex-start;box-shadow:0 2px 8px #00000040,0 0 1px #ffffff08}.event-system{--event-color: var(--color-accent-system)}.event-system .event-content{background:none;border:none;box-shadow:none;font-style:normal;color:var(--color-text-tertiary);font-size:var(--step--1);padding:var(--spacing-xs) 0}.event-owner-wait{--event-color: var(--color-accent-owner)}.event-owner-wait .event-content{background:#f59e0b0f;border-color:#f59e0b33;box-shadow:0 2px 12px #f59e0b14,0 0 1px #f59e0b26}.event-goal{--event-color: var(--color-accent-goal)}.event-goal .event-content{background:#10b9810d;border-color:#10b9814d}@keyframes float-slow{0%{transform:translate(0) scale(1)}to{transform:translate(50px,30px) scale(1.1)}}@keyframes pulse-glow{0%{opacity:.5}50%{opacity:1;box-shadow:0 0 15px currentColor}to{opacity:.5}}@keyframes pulse-ring{0%{box-shadow:0 0 #fff6;transform:scale(.95)}70%{box-shadow:0 0 0 10px #fff0;transform:scale(1)}to{box-shadow:0 0 #fff0;transform:scale(.95)}}@keyframes slide-up-fade-gentle{0%{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}.stagger-in{opacity:0;animation:slide-up-fade-gentle .4s var(--ease-out-expo) forwards;animation-delay:calc(var(--stagger-index) * .1s)}@media (max-width: 600px){.stage{padding-top:0}.ambient-header{padding-top:var(--spacing-lg);background:#0a0a0cf2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}}.status-indicator.reconnecting{color:var(--color-accent-owner);animation:pulse-glow 1.2s infinite}.empty-state{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-md)}.empty-state-inner{text-align:center;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.empty-state-icon{font-size:3rem;opacity:.2;line-height:1}.empty-state-heading{font-size:var(--step-3);font-family:var(--font-family-display);color:var(--color-text-primary);font-weight:500;letter-spacing:-.03em}.empty-state-body{color:var(--color-text-secondary);font-size:var(--step-0);line-height:1.6}.empty-state-body code{color:var(--color-text-primary);background:var(--color-surface);border:1px solid var(--color-border);padding:.1em .35em;border-radius:4px;font-family:var(--font-family-mono);font-size:.9em}.empty-state-example{display:block;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--step--1);color:var(--color-text-tertiary);letter-spacing:.01em}@media (prefers-reduced-motion: reduce){.ambient-glow,.agent-orb.is-typing .avatar,.status-indicator.thinking,.status-indicator.reconnecting{animation:none!important}.timeline-event.revealed{animation:none!important;opacity:1;transform:none}.stagger-in{animation:none!important;opacity:1}}