.animated-preview{--demo-red:#ff969b;--demo-amber:#edca83}.demo-toolbar{align-items:center;gap:10px;display:flex}.demo-control{color:#d1e1e6;background:#17222b;border:1px solid #3b4b53;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.demo-control:hover{background:#263840}.animated-preview .demo-red,.demo-red{color:#ff969b!important}.demo-green{color:#a4e2ba}.animated-preview .demo-danger{color:var(--demo-red);background:#351c25;border-color:#78414e}.animated-preview .demo-warning{color:var(--demo-amber);background:#302919;border-color:#665633}.animated-preview .preview-heading{align-items:flex-start;gap:16px;min-height:70px}.animated-preview .preview-heading h3{max-width:370px;min-height:2.4em}.animated-preview .status-pill{flex-shrink:0}.animated-preview .metric strong{font-variant-numeric:tabular-nums}.animated-preview .metric em{min-height:2.6em;display:block}.demo-count{color:#ffb3b7;background:#5d2631;border-radius:4px;margin-left:auto;padding:1px 5px;font-size:12px}.demo-signal{color:#a4e2ba;align-items:center;gap:7px;display:flex}.demo-signal i{background:currentColor;border-radius:50%;width:6px;height:6px}.demo-chart{position:relative;overflow:hidden}.demo-chart:after{content:"";pointer-events:none;background:linear-gradient(#0000,#8ad4ad66,#0000);width:1px;animation:5s linear infinite demo-sweep;position:absolute;top:0;bottom:0;left:0}.demo-chart-labels{color:#91a3ad;justify-content:space-between;margin-bottom:20px;font-size:12px;display:flex}.demo-bars-active i:last-child,.demo-signal i{animation:1.2s ease-in-out infinite demo-pulse}.demo-event{color:#b0c8bd;background:#101d1c;border:1px solid #283a37;border-radius:6px;align-items:center;gap:9px;min-height:64px;margin-top:12px;padding:14px 12px;font-size:12px;line-height:1.6;display:flex}.demo-event-icon{flex-shrink:0}.demo-check-count{color:#90a7a5;margin-left:auto;font:12px ui-monospace,monospace}.animated-preview[data-phase=incident] .demo-event{background:#271a20;border-color:#60343d}.demo-timeline .timeline-icon{flex-shrink:0;width:25px;height:26px;position:relative}.demo-timeline .timeline-icon>svg{width:20px;height:20px;color:inherit}.demo-timeline .timeline-icon .network-failure-mark{background:#10171d;border-radius:50%;width:12px;height:12px;position:absolute;bottom:0;right:0}.demo-timeline .event-failure .timeline-icon,.demo-timeline .event-failure strong{color:#ff969b}.demo-timeline .event-notification .timeline-icon,.demo-timeline .event-notification strong{color:#95caff}.demo-timeline .event-acknowledged .timeline-icon,.demo-timeline .event-acknowledged strong{color:#edca83}.demo-timeline .event-recovered .timeline-icon,.demo-timeline .event-recovered strong{color:#a2eec2}.workflow-payload{min-width:0;position:relative}.workflow-payload .code-head{align-items:center;gap:8px;padding:10px 18px}.workflow-payload .payload-static{clip-path:inset(50%);white-space:pre;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.workflow-payload .payload-animated{white-space:pre-wrap;overflow-wrap:anywhere;position:relative}.payload-measure{visibility:hidden}.payload-typed{position:absolute;inset:24px}.token-command{color:#a2eec2}.token-string{color:#a3cfee}.token-number{color:#edca83}.typing-caret{vertical-align:-.15em;background:#a2eec2;width:7px;height:1.1em;margin-left:2px;animation:1s steps(2,end) infinite demo-caret;display:inline-block}.payload-caption{color:#91a3ad;border-top:1px solid #26363a;justify-content:space-between;gap:12px;padding:12px 18px;font:12px/1.5 ui-monospace,monospace;display:flex}[data-running=false] .demo-signal i,[data-running=false] .demo-chart:after,[data-running=false] .typing-caret{animation-play-state:paused}@keyframes demo-pulse{50%{opacity:.35}}@keyframes demo-sweep{to{left:100%}}@keyframes demo-caret{50%{opacity:0}}@media (max-width:700px){.animated-preview .preview-top{flex-wrap:wrap;gap:8px}.animated-preview .preview-heading{flex-direction:column;min-height:130px}.animated-preview .preview-heading h3{min-height:2.4em}.animated-preview .metrics{gap:16px}.animated-preview .uptime-row{grid-template-columns:1.25fr 1fr .7fr}.animated-preview .uptime-row .flex-line{gap:5px}.animated-preview .bars i:nth-child(-n+21){display:none}.demo-event{min-height:88px}.demo-timeline .timeline-line{flex-wrap:wrap;gap:10px}.demo-timeline .timeline-line>div{flex:1;min-width:140px}.demo-timeline .timeline-line time{margin-left:35px}.workflow-payload .code-head,.payload-caption{flex-wrap:wrap}.demo-control{width:36px;height:36px}}@media (prefers-reduced-motion:reduce){.demo-chart:after,.typing-caret{display:none}.workflow-payload .payload-static{clip-path:none;white-space:pre-wrap;overflow-wrap:anywhere;width:auto;height:auto;margin:0;padding:24px;position:static}.workflow-payload .payload-animated{display:none}}.status-demo{--status-color:#a2eec2;--status-tint:142,230,194;margin-top:30px}.status-demo-compact{background:#0d151c;border:1px solid #2b3840;border-radius:10px;margin-top:0;padding:28px}.status-demo[data-health=incident]{--status-color:#ff969b;--status-tint:255,150,155}.status-demo[data-health=degraded]{--status-color:#edc581;--status-tint:237,197,129}.status-demo-toolbar,.status-demo-meta,.status-service-head,.status-service-meta,.status-incident-top{justify-content:space-between;align-items:center;gap:16px;display:flex}.status-demo-toolbar{min-height:38px}.status-demo-toolbar .eyebrow{letter-spacing:1px;font-size:12px;line-height:1.6}.status-demo-pause{white-space:nowrap;gap:7px;width:auto;height:36px;padding:0 10px;font-size:12px}.status-demo-title{letter-spacing:-1px;margin:23px 0 30px;font-size:35px}.status-demo-banner{background:linear-gradient(110deg,rgba(var(--status-tint),.12),rgba(var(--status-tint),.025));min-height:128px;color:var(--status-color);border:1px solid rgba(var(--status-tint),.32);border-radius:10px;align-items:center;gap:18px;padding:23px;transition:background .4s,border-color .4s,color .4s;display:flex}.status-demo-banner strong{font-size:21px;font-weight:500;line-height:1.35;display:block}.status-demo-banner p{max-width:570px;margin-top:8px;font-size:14px}.status-banner-icon{background:rgba(var(--status-tint),.08);border-radius:12px;flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.status-beacon{background:var(--status-color);border-radius:50%;flex-shrink:0;width:9px;height:9px;margin-left:auto;animation:2.2s ease-out infinite status-beacon}.status-demo-meta{color:#91a3ad;flex-wrap:wrap;margin:22px 0;font-size:12px}.status-demo-services{gap:14px;display:grid}.status-service{--service-accent:#a2eec2;background:linear-gradient(125deg,#101d20,#10171e);border:1px solid #2b3840;border-radius:9px;padding:20px;transition:border-color .3s,background-color .3s}.status-service-blue{--service-accent:#8dc8ff}.status-service-violet{--service-accent:#bba8ff}.status-service-amber{--service-accent:#edc581}.status-service-name{align-items:center;gap:11px;display:flex}.status-service-name strong{font-size:14px;font-weight:500}.status-service-icon{width:34px;height:34px;color:var(--service-accent);background:#172733;border:1px solid #31404b;border-radius:9px;place-items:center;display:grid}.status-service:hover{border-color:var(--service-accent)}.status-service:hover .status-service-icon svg{animation:.65s ease-in-out status-icon-lift}.status-service-badge{color:#a2eec2;white-space:nowrap;background:#17372a;border:1px solid #284839;border-radius:5px;align-items:center;gap:6px;padding:5px 8px;font-size:12px;display:inline-flex}.status-service[data-health=incident]{background:linear-gradient(125deg,#281921,#10171e);border-color:#78414e}.status-service[data-health=incident] .status-service-badge,.status-incident-example[data-health=incident] .status-service-badge{color:#ff969b;background:#351c25;border-color:#78414e}.status-service[data-health=degraded] .status-service-badge,.status-incident-example[data-health=degraded] .status-service-badge{color:#edc581;background:#302919;border-color:#665633}.status-history{height:23px;margin-top:18px}.status-history i{transition:background-color .35s}.status-demo[data-running=true] .status-history i:last-child{animation:1.1s ease-in-out infinite demo-pulse}.status-service-meta{color:#91a3ad;margin-top:11px;font:12px/1.5 ui-monospace,monospace}.status-demo-legend{color:#91a3ad;flex-wrap:wrap;gap:18px;margin-top:20px;font-size:12px;display:flex}.status-demo-legend span{align-items:center;gap:7px;display:flex}.status-demo-legend i{border-radius:2px;width:6px;height:12px}.legend-up{background:#5ab78b}.legend-degraded{background:#e9b568}.legend-down{background:#d88181}.status-incident-section{margin-top:36px}.status-incident-section h2{margin-bottom:20px;font-size:23px}.status-incident-example{border:1px solid #2b3840;border-left:3px solid var(--status-color);background:#10171e;border-radius:9px;min-height:175px;padding:23px}.status-incident-top{color:#91a3ad;font-size:12px}.status-incident-example h3{margin:18px 0 10px;font-size:16px}.status-incident-example p{font-size:14px}.status-demo[data-running=false] .status-beacon{animation-play-state:paused}.status-demo-compact .status-demo-services{grid-template-columns:1fr 1fr}.status-demo-compact .status-demo-title{font-size:28px}@keyframes status-beacon{0%{box-shadow:0 0 0 0 rgba(var(--status-tint),.3)}80%,to{box-shadow:0 0 0 10px rgba(var(--status-tint),0)}}@keyframes status-icon-lift{50%{transform:translateY(-3px)rotate(-8deg)}}@media (max-width:700px){.status-demo-compact{padding:18px}.status-demo-compact .status-demo-services{grid-template-columns:1fr}.status-demo-toolbar{flex-wrap:wrap}.status-demo-title{font-size:30px}.status-demo-banner{align-items:flex-start;gap:12px;min-height:188px;padding:18px}.status-demo-banner strong{font-size:19px}.status-demo-banner p{font-size:14px}.status-beacon{display:none}.status-service{padding:16px}.status-service-head{flex-wrap:wrap;gap:10px;min-height:66px}.status-service-meta{flex-wrap:wrap;gap:8px}.status-history{gap:2px}.status-incident-example{min-height:230px;padding:18px}.status-incident-top{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.status-demo *,.status-demo :after{transition:none!important;animation:none!important}}.demo-tab-list{gap:22px;margin-bottom:20px}@media (max-width:700px){.demo-tab-list{align-items:stretch;gap:4px;width:100%;max-width:100%;height:auto}.demo-tab-list>[role=tab]{white-space:normal;min-width:0;height:auto;min-height:44px;padding:6px;line-height:1.35}}