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