@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400 700;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/space-grotesk-latin-DPT1xrvW.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400 700;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/space-grotesk-latin-ext-wJGaI8U0.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/inter-latin-8kRkwJBP.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/inter-latin-ext-B_-bZUTo.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400 600;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/jetbrains-mono-latin-Db4Uuiha.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400 600;font-display:swap;src:url(/frontend-ia-demos/04-resilient-ui/assets/jetbrains-mono-latin-ext-Bnd2h4Br.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{--bg: #07090a;--surface: #0c0f10;--surface-raised: #121617;--surface-overlay: #181d1f;--border: #232a2c;--border-strong: #3a4447;--border-control: #5d6a66;--ink: #eef2ec;--ink-muted: #9aa59f;--ink-subtle: #76827c;--brand: #c6f135;--brand-hover: #d6ff5c;--brand-deep: #6f8f12;--on-brand: #0a0d05;--signal: #3fd4e6;--signal-deep: #0f5f6b;--on-signal: #05181b;--warning: #ffb547;--danger: #ff6b5a;--on-danger: #1a0503;--brand-a12: rgba(198, 241, 53, .12);--signal-a12: rgba(63, 212, 230, .12);--grid-line: rgba(198, 241, 53, .07);--glow-brand: 0 0 0 1px rgba(198, 241, 53, .35), 0 0 32px rgba(198, 241, 53, .22);--glow-signal: 0 0 0 1px rgba(63, 212, 230, .35), 0 0 40px rgba(63, 212, 230, .2);--depth-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px rgba(0, 0, 0, .45);--depth-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 32px 80px rgba(0, 0, 0, .65);--perspective-scene: 1600px;--tilt-x: 14deg;--tilt-y: -18deg;--layer-gap: 56px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--radius-pill: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--space-24: 96px;--space-32: 128px;--z-ambient: -1;--z-header: 40;--z-overlay: 50;--content-max: 1200px;--text-max: 68ch;--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--ease: cubic-bezier(.22, 1, .36, 1);--dur-fast: .18s;--dur: .22s;--dur-reveal: .6s;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-color:var(--border-strong) var(--bg)}body{display:flex;flex-direction:column;min-height:100vh;margin:0;position:relative;isolation:isolate;background:transparent;color:var(--ink);font:400 16px/26px var(--font-sans);font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;z-index:var(--z-ambient);pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:var(--space-16) var(--space-16);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 18%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 90% 70% at 50% 18%,#000 0%,transparent 72%)}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance}p,li{text-wrap:pretty}::selection{background:var(--brand-a12);color:var(--ink)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--signal);text-decoration-color:#3fd4e659;text-underline-offset:3px}code{font-family:var(--font-mono);font-size:.875em;font-variant-ligatures:none;color:var(--brand);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.1rem .35rem}.skip{position:fixed;top:.75rem;left:.75rem;z-index:60;padding:.75rem 1rem;border-radius:var(--radius-md);background:var(--brand);color:var(--on-brand);text-decoration:none;transform:translateY(-200%)}.skip:focus{transform:none}.label{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.meta{font-family:var(--font-mono);font-size:12px;line-height:18px;letter-spacing:.02em;color:var(--ink-muted);font-variant-numeric:tabular-nums}.container-content{width:min(100%,var(--content-max));margin-inline:auto;padding-inline:var(--space-4)}@media(min-width:768px){.container-content{padding-inline:var(--space-8)}}.site-header{position:fixed;inset:0 0 auto;z-index:var(--z-header);background:#07090ad1;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}.site-header__inner{display:flex;align-items:center;gap:var(--space-4);height:64px}.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink);text-decoration:none;font:600 18px/1 var(--font-display);letter-spacing:-.01em}.brand__mark{width:28px;height:28px;flex:none;background:url(/frontend-ia-demos/04-resilient-ui/assets/logo-icon-v3-FIRKjp3C.png) center / contain no-repeat}.site-header__code{margin-left:auto}.ed-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:44px;padding:0 var(--space-6);border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--ink);font:500 14px/1 var(--font-sans);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur-fast) var(--ease)}.ed-btn--primary{background:var(--brand);color:var(--on-brand)}.ed-btn--primary:hover{background:var(--brand-hover);box-shadow:var(--glow-brand)}.ed-btn--outline{border-color:var(--border-control);color:var(--ink)}.ed-btn--outline:hover{border-color:var(--brand);background:var(--surface-overlay)}.ed-btn--mono{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.ed-btn--sm{height:36px;padding:0 var(--space-4)}.ed-btn:disabled,.ed-btn[aria-disabled=true]{opacity:.5;pointer-events:none;box-shadow:none}main.page{flex:1;width:min(100%,var(--content-max));margin-inline:auto;padding:calc(64px + var(--space-12)) var(--space-4) var(--space-16)}@media(min-width:768px){main.page{padding-inline:var(--space-8)}}.kicker,.ed-eyebrow{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink-muted);font:500 12px/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.kicker b,.ed-eyebrow b{color:var(--brand);font-weight:500}.kicker i,.ed-eyebrow i{flex:0 0 96px;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent)}h1{margin:var(--space-6) 0 0;font-size:clamp(2.5rem,6vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}.lede,.ed-section-sub{margin:var(--space-4) 0 0;max-width:var(--text-max);color:var(--ink-muted);font:400 18px/30px var(--font-sans)}.ed-accent{color:var(--brand)}.ed-accent-signal{color:var(--signal)}.layout{display:grid;gap:var(--space-6);margin-top:var(--space-12)}.panel{padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--depth-1)}.panel h2{margin:0 0 var(--space-4);font-size:18px;font-weight:600;line-height:26px;letter-spacing:-.01em}.panel h2 span{display:block;margin-top:var(--space-1);color:var(--ink-muted);font:400 14px/22px var(--font-sans);letter-spacing:0}.controls,.metrics,.actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:end}.actions{margin-top:var(--space-4)}label{display:grid;gap:var(--space-2);color:var(--ink-muted);font:500 12px/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}input:not([type=checkbox]):not([type=radio]),textarea,select{width:100%;min-width:0;min-height:44px;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font:400 15px/1.4 var(--font-sans);letter-spacing:0;text-transform:none;padding:.65rem var(--space-4);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}input[type=checkbox],input[type=radio]{width:24px;height:24px;min-width:24px;margin:0;padding:0;accent-color:var(--brand)}textarea{min-height:112px;resize:vertical;line-height:22px}input::placeholder,textarea::placeholder{color:var(--ink-muted)}input:focus,textarea:focus,select:focus,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--space-6);border:1px solid transparent;border-radius:var(--radius-md);background:var(--brand);color:var(--on-brand);font:500 14px/1 var(--font-sans);letter-spacing:0;text-transform:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}button:hover:not(:disabled){background:var(--brand-hover);box-shadow:var(--glow-brand)}button.secondary{background:transparent;color:var(--ink);border-color:var(--border-control);box-shadow:none}button.secondary:hover:not(:disabled){border-color:var(--brand);background:var(--surface-overlay);box-shadow:none}button.danger{background:transparent;color:var(--danger);border-color:var(--danger);box-shadow:none}button.danger:hover:not(:disabled){background:#ff6b5a1f;box-shadow:none}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.metrics{margin:0}.metric{min-width:7.5rem;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.metric span,.metric dt{display:block;color:var(--ink-muted);font:500 11px/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.metric strong:not(.pill),.metric dd{display:block;margin:var(--space-1) 0 0;color:var(--ink);font:600 18px/1.2 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-transform:none}.pill{display:inline-flex;align-items:center;gap:var(--space-2);width:fit-content;margin-top:var(--space-2);padding:0 var(--space-3);height:28px;border-radius:var(--radius-pill);background:var(--surface-overlay);color:var(--ink-muted);font:500 12px/1 var(--font-mono);letter-spacing:.02em;text-transform:none}.pill[data-phase=streaming],.pill[data-phase=connecting],.pill[data-phase=receiving]{background:var(--signal-a12);color:var(--signal)}.pill[data-phase=stalled],.pill[data-phase=retrying]{background:#ffb5471f;color:var(--warning)}.pill[data-phase=failed],.pill[data-phase=error],.pill[data-phase=cancelled]{background:#ff6b5a1f;color:var(--danger)}.pill[data-phase=done]{background:var(--brand-a12);color:var(--brand)}.output{min-height:190px;margin:var(--space-4) 0 0;padding:var(--space-4) var(--space-6) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--depth-1),var(--glow-signal);color:var(--ink);font:400 13px/21px var(--font-mono);font-variant-ligatures:none;white-space:pre-wrap;overflow-wrap:anywhere}.output.is-streaming:after{content:"";display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:var(--brand);animation:ed-blink 1s steps(1) infinite}@keyframes ed-blink{50%{opacity:0}}.error{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);border:1px solid var(--danger);border-radius:var(--radius-md);background:#ff6b5a1f;color:var(--danger)}.error:empty,.note:empty{display:none}.note{margin:var(--space-3) 0 0;max-width:75ch;color:var(--ink-muted);font:400 14px/22px var(--font-sans)}.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.log{margin:var(--space-3) 0 0;padding:var(--space-4);min-height:4.5rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-muted);font:400 13px/21px var(--font-mono);font-variant-ligatures:none;white-space:pre-wrap}.results{display:grid;gap:var(--space-2);margin-top:var(--space-4)}.results p{margin:0;color:var(--ink-muted);font-size:14px;line-height:22px}.results strong{color:var(--ink);font-variant-numeric:tabular-nums}.ed-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--depth-1);color:inherit;text-decoration:none;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.ed-card:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface-overlay)}.ed-card--featured{border-color:#c6f13559}.ed-card--featured:hover{box-shadow:var(--glow-brand)}.ed-card__title{margin:0;color:var(--ink);font:600 18px/26px var(--font-display);letter-spacing:-.01em}.ed-card__body{margin:0;color:var(--ink-muted);font:400 14px/22px var(--font-sans)}.ed-card__meta{margin:0;color:var(--ink-subtle);font:400 12px/18px var(--font-mono);font-variant-numeric:tabular-nums}.demo-grid{display:grid;gap:var(--space-6);margin-top:var(--space-12)}@media(min-width:800px){.demo-grid{grid-template-columns:1fr 1fr}}.site-footer{margin-top:auto;border-top:1px solid var(--border);background:var(--surface)}.site-footer__top{display:grid;gap:var(--space-8);padding:var(--space-12) 0 var(--space-8)}@media(min-width:768px){.site-footer__top{grid-template-columns:minmax(0,28rem) minmax(12rem,18rem);justify-content:space-between}}.site-footer__intro p{margin:var(--space-4) 0 0;max-width:42ch;color:var(--ink-muted);font-size:14px;line-height:22px}.site-footer nav ul{display:grid;gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}.site-footer nav a{display:inline-flex;align-items:center;min-width:24px;min-height:24px;color:var(--ink-muted);font-size:14px;line-height:24px;text-decoration:none}.site-footer nav a:hover{color:var(--brand)}.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);padding:var(--space-6) 0;border-top:1px solid var(--border)}.site-footer__up{display:inline-flex;align-items:center;min-width:24px;min-height:24px;margin-left:auto;color:var(--ink-muted);text-decoration:none}.site-footer__up:hover{color:var(--brand)}@media(max-width:800px){.split{grid-template-columns:1fr}}@media(max-width:480px){.kicker i,.ed-eyebrow i{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}.ed-card:hover{transform:none}}main:focus{outline:none}main:focus-visible{outline:2px solid var(--brand);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label.check{display:flex;align-items:center;gap:var(--space-3);min-height:44px;color:var(--ink);font:400 15px/22px var(--font-sans);letter-spacing:0;text-transform:none}.guide p,.steps{margin:0;max-width:68ch;color:var(--ink-muted)}.steps{display:grid;gap:var(--space-2);padding-left:1.25rem}.steps li::marker{color:var(--brand);font-family:var(--font-mono)}.code-link{display:inline-flex;align-items:center;min-width:24px;min-height:24px;width:fit-content;margin-top:var(--space-2);color:var(--signal);font:500 15px/24px var(--font-sans)}.compare{display:grid;gap:var(--space-4);margin-top:var(--space-4)}@media(min-width:720px){.compare{grid-template-columns:1fr 1fr}}.compare article{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.compare h3{margin:0 0 var(--space-2);font-size:16px;line-height:24px}.compare p{margin:var(--space-2) 0 0}.compare strong{color:var(--ink);font:600 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.compare .unit{margin-left:var(--space-1);color:var(--ink-muted);font:400 14px/1 var(--font-sans)}.verdict{display:inline-flex;align-items:center;min-height:24px;margin:0;color:var(--ink);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.verdict--good{color:var(--brand)}.verdict--bad{color:var(--danger)}.live{margin-top:var(--space-4)}.status-line{margin:0;color:var(--ink);font:500 15px/24px var(--font-sans)}.status-flag{display:inline-block;margin-right:var(--space-2);min-height:24px;font:500 12px/24px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.status-line[data-state=idle] .status-flag{color:var(--ink-muted)}.status-line[data-state=running] .status-flag{color:var(--signal)}.status-line[data-state=done] .status-flag{color:var(--brand)}.status-line[data-state=error] .status-flag{color:var(--danger)}.takeaway{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);border-left:3px solid var(--brand);background:var(--surface);color:var(--ink);font:500 16px/24px var(--font-sans)}.takeaway:empty{display:none}.legend{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);margin:var(--space-3) 0 0;padding:0;list-style:none}.legend li{display:inline-flex;align-items:center;gap:var(--space-2);min-height:24px;color:var(--ink-muted);font-size:14px;line-height:22px}.swatch{width:12px;height:12px;flex:none;border-radius:2px}.swatch--ok{background:var(--signal)}.swatch--mid{background:var(--warning)}.swatch--bad{background:var(--danger)}.meter{margin-top:var(--space-3)}.meter__track{height:8px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-overlay)}.meter__bar{width:0%;height:100%;background:var(--brand)}@media(max-width:420px){.controls,.actions{display:grid;grid-template-columns:minmax(0,1fr)}.actions button,.panel>button{width:100%}.panel{padding:var(--space-4)}h1,.lede{overflow-wrap:break-word}.site-header__inner{height:auto;min-height:64px;padding-block:var(--space-2)}.metrics{display:grid;grid-template-columns:1fr 1fr}}