:root{--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 15px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--bg-primary: #000;--bg-secondary: #0a0a0a;--bg-tertiary: #111;--bg-elevated: #171717;--border: #262626;--border-subtle: #1a1a1a;--text-primary: #fff;--text-secondary: #a1a1a1;--text-muted: #666;--accent: #fff;--accent-muted: #737373;--timeline-active: #3b82f6;--timeline-completed: #fff;--timeline-completed-text: #c4c4c4;--timeline-future: #2d2d2d;--timeline-future-text: #525252}[data-theme=light]{--bg-primary: #fafafa;--bg-secondary: #f5f5f5;--bg-tertiary: #e5e5e5;--bg-elevated: #fff;--border: #e5e5e5;--border-subtle: #d4d4d4;--text-primary: #171717;--text-secondary: #525252;--text-muted: #737373;--accent: #171717;--accent-muted: #a3a3a3;--timeline-active: #3b82f6;--timeline-completed: #171717;--timeline-completed-text: #525252;--timeline-future: #d4d4d4;--timeline-future-text: #737373}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border) transparent}body{margin:0;font-family:JetBrains Mono,ui-monospace,Cascadia Code,SF Mono,Monaco,Consolas,monospace;font-size:var(--font-size-base);line-height:1.5;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased}#root{min-height:100vh}input::placeholder,textarea::placeholder{color:var(--text-muted)}.step-detail-content{animation:stepFadeIn .2s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:contentFadeIn .3s ease-out forwards}.animate-fade-in-up{animation:contentFadeInUp .35s ease-out forwards}.animate-scale-in{animation:contentScaleIn .25s ease-out forwards}@keyframes contentFadeIn{0%{opacity:0}to{opacity:1}}@keyframes contentFadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes contentScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.state-value-updated{animation:valuePulseGreen .4s ease-out}@keyframes valuePulseGreen{0%{background-color:#22c55e33}to{background-color:transparent}}.timeline-step-button{transition:background-color .3s ease-out,color .3s ease-out,font-weight .3s ease-out}.timeline-dot{transition:background-color .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out}.timeline-dot-active{width:10px!important;height:10px!important;animation:timelineDotPulse 2s ease-in-out infinite}@keyframes timelineDotPulse{0%,to{box-shadow:0 0 0 2px color-mix(in srgb,var(--timeline-active-dot, #3b82f6) 25%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--timeline-active-dot, #3b82f6) 40%,transparent)}}.url-bar-sending{position:relative}.url-bar-sending:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:7px;border:1px solid var(--url-bar-sending-color, #3b82f6);box-shadow:0 0 0 1px color-mix(in srgb,var(--url-bar-sending-color, #3b82f6) 25%,transparent);pointer-events:none;animation:urlBarPulseGlow .6s ease-in-out 2;will-change:opacity}@keyframes urlBarPulseGlow{0%,to{opacity:0}50%{opacity:1}}.sending-dots{animation:sendingDotsPulse .6s ease-in-out infinite;will-change:opacity}@keyframes sendingDotsPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes urlBarSendingFade{0%,to{opacity:.6}50%{opacity:1}}.json-code-block .token.property{color:#9cdcfe!important}.json-code-block .token.string{color:#ce9178!important}.json-code-block .token.number{color:#b5cea8!important}.json-code-block .token.boolean,.json-code-block .token.null{color:#569cd6!important}.json-code-block .token.punctuation,.json-code-block .token.operator{color:#d4d4d4!important}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}*::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
