.fo-step .fo-step-n{color:#52525b;transition:color .3s}.fo-step .fo-step-title{color:#a1a1aa;transition:color .3s}.fo-step[data-active] .fo-step-n{color:#f59e0b}.fo-step[data-active] .fo-step-title{color:#fafafa}.fo-toggle-play,#failover-toggle[aria-pressed=true] .fo-toggle-pause{display:none}#failover-toggle[aria-pressed=true] .fo-toggle-play{display:inline}.fo-demo{background:#101013;border:1px solid #3f3f46;border-radius:2.25rem;width:300px;padding:10px;box-shadow:0 30px 60px -30px #000c}@media (width>=640px){.fo-demo{width:330px}}.fo-screen{color:#fafafa;background:radial-gradient(60% 40% at 50% 38%,#f59e0b14,#0000 70%),#09090b;border-radius:1.75rem;flex-direction:column;height:600px;font-family:Barlow,system-ui,sans-serif;display:flex;position:relative;overflow:hidden}.fo-topbar{justify-content:space-between;align-items:center;padding:18px 20px 0;display:flex}.fo-brand{align-items:baseline;gap:6px;display:inline-flex}.fo-brand img{align-self:center}.fo-brand-name{letter-spacing:.03em;font-family:Barlow Condensed,Arial Narrow,sans-serif;font-size:16px;font-weight:700}.fo-brand-sub{color:#a1a1aa;letter-spacing:.06em;font-family:Barlow Condensed,Arial Narrow,sans-serif;font-size:11px;font-weight:600}.fo-bell{color:#a1a1aa;border:1px solid #27272a;border-radius:9999px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.fo-center{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding-bottom:8px;display:flex}.fo-ring{border:5px solid #f59e0b;border-radius:9999px;justify-content:center;align-items:center;width:108px;height:108px;transition:border-color .4s,box-shadow .4s;display:flex;position:relative;box-shadow:0 0 0 10px #f59e0b0f}.fo-ring-logo{opacity:.95;transition:opacity .4s}.fo-ring-arc{opacity:0;border:5px solid #0000;border-top-color:#f59e0b;border-radius:9999px;transition:opacity .3s;position:absolute;inset:-5px}.fo-status{letter-spacing:.01em;font-size:15px;font-weight:500}.fo-status-reconnecting{color:#a1a1aa;display:none}.fo-pill{color:#d4d4d8;font-variant-numeric:tabular-nums;background:#18181b;border:1px solid #27272a;border-radius:9999px;align-items:center;gap:7px;padding:6px 12px;font-size:13px;display:inline-flex}.fo-dot{background:#22c55e;border-radius:9999px;width:7px;height:7px;transition:background-color .3s}.fo-latency-none,.fo-latency-backup{display:none}.fo-server{background:#18181b;border:1px solid #27272a;border-radius:14px;align-items:center;gap:12px;margin:0 16px;padding:12px 14px;transition:border-color .3s;display:flex}.fo-flag{color:#fafafa;letter-spacing:.04em;background:#27272a;border-radius:9999px;justify-content:center;align-items:center;width:30px;height:30px;font-family:Barlow Condensed,Arial Narrow,sans-serif;font-size:12px;font-weight:700;display:inline-flex}.fo-server-text{flex-direction:column;flex:1;line-height:1.2;display:flex}.fo-server-name{font-size:14px;font-weight:500}.fo-server-sub{color:#71717a;margin-top:2px;font-size:11px}.fo-server-backup,.fo-flag-backup{display:none}.fo-bars{align-items:flex-end;gap:2px;height:14px;display:inline-flex}.fo-bars i{background:#22c55e;border-radius:1px;width:3px;transition:background-color .3s}.fo-bars i:first-child{height:5px}.fo-bars i:nth-child(2){height:8px}.fo-bars i:nth-child(3){height:11px}.fo-bars i:nth-child(4){height:14px}.fo-toast{color:#d4d4d8;text-align:center;opacity:0;background:#101013;border:1px solid #3f3f46;border-radius:10px;justify-content:center;align-items:center;min-height:38px;margin:10px 16px 0;padding:0 12px;font-size:12px;transition:opacity .3s,transform .3s,border-color .3s;display:flex;transform:translateY(6px)}.fo-toast>span{display:none}.fo-tabs{border-top:1px solid #1f1f23;justify-content:space-around;margin-top:14px;padding:12px 24px 18px;display:flex}.fo-tab{color:#71717a;flex-direction:column;align-items:center;gap:4px;font-size:10px;display:inline-flex}.fo-tab-active{color:#f59e0b}.fo-demo[data-state=quiet] .fo-ring{border-color:#3f3f46;box-shadow:0 0 0 10px #3f3f461f}.fo-demo[data-state=quiet] .fo-ring-logo{opacity:.4}.fo-demo[data-state=quiet] .fo-status-connected,.fo-demo[data-state=switching] .fo-status-connected{display:none}.fo-demo[data-state=quiet] .fo-status-reconnecting,.fo-demo[data-state=switching] .fo-status-reconnecting{display:inline}.fo-demo[data-state=quiet] .fo-dot,.fo-demo[data-state=switching] .fo-dot{background:#f59e0b}.fo-demo[data-state=quiet] .fo-latency-primary,.fo-demo[data-state=switching] .fo-latency-primary{display:none}.fo-demo[data-state=quiet] .fo-latency-none,.fo-demo[data-state=switching] .fo-latency-none{display:inline}.fo-demo[data-state=quiet] .fo-bars i,.fo-demo[data-state=switching] .fo-bars i{background:#3f3f46}.fo-demo[data-state=quiet] .fo-bars i:first-child{background:#f59e0b}.fo-demo[data-state=quiet] .fo-server{border-color:#f59e0b59}.fo-demo[data-state=quiet] .fo-toast,.fo-demo[data-state=switching] .fo-toast,.fo-demo[data-state=backup] .fo-toast{opacity:1;transform:translateY(0)}.fo-demo[data-state=quiet] .fo-toast-quiet{display:inline}.fo-demo[data-state=switching] .fo-ring{box-shadow:none;border-color:#27272a}.fo-demo[data-state=switching] .fo-ring-logo{opacity:.4}.fo-demo[data-state=switching] .fo-ring-arc{opacity:1;animation:.9s linear infinite foSpin}.fo-demo[data-state=switching] .fo-toast-switching{display:inline}.fo-demo[data-state=backup] .fo-latency-primary{display:none}.fo-demo[data-state=backup] .fo-latency-backup{display:inline}.fo-demo[data-state=backup] .fo-server-primary,.fo-demo[data-state=backup] .fo-flag-primary{display:none}.fo-demo[data-state=backup] .fo-server-backup,.fo-demo[data-state=backup] .fo-flag-backup{display:inline}.fo-demo[data-state=backup] .fo-toast{border-color:#22c55e59}.fo-demo[data-state=backup] .fo-toast-backup{display:inline}@keyframes foSpin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.fo-ring,.fo-ring-logo,.fo-ring-arc,.fo-dot,.fo-bars i,.fo-server,.fo-toast,.fo-step .fo-step-n,.fo-step .fo-step-title{transition:none}.fo-demo[data-state=switching] .fo-ring-arc{animation:none}}