:root{--ink:#171622;--muted:#777388;--paper:#f7f4ee;--card:#ffffffd4;--line:#1e1b2c1c;--purple:#6952e8;--green:#50b878;--green-dark:#267c4b;--orange:#f46f4e;--shadow:0 24px 70px #231b421f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 80% 8%, #6952e82b, transparent 27rem), radial-gradient(circle at 8% 78%, #50b87821, transparent 24rem), var(--paper);color:var(--ink);margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.demo-shell{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:0 56px 28px;overflow:hidden}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:82px;display:flex}.brand{color:var(--ink);letter-spacing:-.03em;align-items:center;gap:12px;font-size:18px;font-weight:800;text-decoration:none;display:inline-flex}.brand-mark{background:var(--ink);color:#fff;letter-spacing:.02em;border-radius:12px;place-items:center;width:37px;height:37px;font-size:12px;display:grid;transform:rotate(-4deg)}.release-pill{border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;background:#ffffff8c;border-radius:999px;align-items:center;gap:9px;padding:9px 13px;font-size:12px;display:flex}.release-pill code{border-left:1px solid var(--line);color:var(--ink);text-transform:none;letter-spacing:0;padding-left:9px;font-family:SFMono-Regular,Consolas,monospace}.pulse-dot,.live-dot{background:var(--green);border-radius:50%;width:8px;height:8px;display:inline-block;box-shadow:0 0 0 5px #50b87821}.phase-faulty .pulse-dot,.phase-degraded .pulse-dot,.phase-faulty .live-dot,.phase-degraded .live-dot{background:var(--orange);box-shadow:0 0 0 5px #f46f4e21}.hero{grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);align-items:center;gap:30px;min-height:510px;display:grid}.hero-copy{max-width:760px;padding:54px 0 40px}.status-row{align-items:center;gap:16px;margin-bottom:34px;display:flex}.status-badge{color:var(--green-dark);text-transform:uppercase;letter-spacing:.08em;background:#50b87824;border-radius:10px;padding:8px 13px;font-size:12px;font-weight:800}.phase-faulty .status-badge,.phase-degraded .status-badge{color:#ba4228;background:#f46f4e24}.phase-recovering .status-badge{color:#5540c7;background:#6952e821}.live-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex}.live-dot{width:6px;height:6px;animation:1.8s infinite blink}.eyebrow{color:var(--purple);text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;font-size:13px;font-weight:800}h1{letter-spacing:-.065em;text-wrap:balance;max-width:820px;margin:0;font-size:clamp(48px,5.3vw,78px);line-height:.98}.lede{max-width:590px;color:var(--muted);margin:28px 0 0;font-size:18px;line-height:1.55}.gremlin-stage{isolation:isolate;place-items:center;min-height:430px;display:grid;position:relative}.gremlin-stage:before{content:"";z-index:-2;background:#dff0d8;border-radius:47% 53% 59% 41%/47% 43% 57% 53%;width:330px;height:330px;transition:background .5s,transform .5s;position:absolute;transform:rotate(7deg)}.phase-faulty.gremlin-stage:before,.phase-degraded.gremlin-stage:before{background:#f8d4c8;transform:rotate(-8deg)scale(1.04)}.phase-recovered.gremlin-stage:before{background:#d8ecd7;animation:3s ease-in-out infinite blob}.orbit{z-index:-1;border:1px dashed #6952e840;border-radius:50%;position:absolute}.orbit-one{width:390px;height:390px;animation:30s linear infinite spin}.orbit-two{width:270px;height:270px;animation:22s linear infinite reverse spin}.orbit:after{content:"";background:var(--purple);border-radius:50%;width:10px;height:10px;position:absolute;top:20px;left:74px}.gremlin{filter:drop-shadow(0 24px 25px #2017372e);width:min(390px,90%);animation:4s ease-in-out infinite hover}.gremlin-body{fill:#75c46e;stroke:#252031;stroke-width:9px;stroke-linejoin:round;transition:fill .4s}.phase-faulty .gremlin-body,.phase-degraded .gremlin-body{fill:#ab8de8}.face-patch{fill:#ffffff38}.ear{fill:#9ad691;stroke:#252031;stroke-width:8px;stroke-linejoin:round}.phase-faulty .ear,.phase-degraded .ear{fill:#c2acf0}.horn{fill:#f9d979;stroke:#252031;stroke-width:8px;stroke-linejoin:round}.eye{fill:#fff;stroke:#252031;stroke-width:7px}.pupil{fill:#252031;transition:transform .3s}.eye-shine{fill:#fff}.mouth{fill:#37283c;stroke:#252031;stroke-width:7px;stroke-linejoin:round}.tooth{fill:#fff;stroke:#252031;stroke-width:4px;stroke-linejoin:round}.confetti path{fill:none;stroke:var(--orange);stroke-linecap:round;stroke-width:9px;animation:.9s infinite alternate blink}.basket{color:#252031;width:68px;height:54px;box-shadow:var(--shadow);background:#f9d979;border:5px solid #252031;border-top-width:9px;border-radius:7px 7px 15px 15px;place-items:center;font-weight:900;display:grid;position:absolute;bottom:12%;right:5%;transform:rotate(8deg)}.basket:before{content:"";border:5px solid #252031;border-bottom:0;border-radius:25px 25px 0 0;width:42px;height:26px;position:absolute;top:-27px}.signal-grid{grid-template-columns:1fr 1fr 1fr 1.45fr;gap:14px;margin-bottom:22px;display:grid}.metric-card,.timeline-card{background:var(--card);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #1e1b2c17;border-radius:22px;min-height:190px;padding:22px;box-shadow:0 12px 35px #231b420f}.metric-heading{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;display:flex}.metric-icon{width:28px;height:28px;color:var(--purple);background:#efedf7;border-radius:9px;place-items:center;font-size:15px;display:grid}.metric-card>strong{letter-spacing:-.055em;margin-top:19px;font-size:46px;line-height:1;display:block}.metric-card>strong small{color:var(--muted);letter-spacing:0;margin-left:5px;font-size:15px}.metric-card>p{color:var(--muted);margin:12px 0 0;font-size:12px}.response-ok{color:var(--green-dark)}.response-error{color:var(--orange)}.latency-bars{align-items:end;gap:3px;height:48px;margin-top:14px;display:flex}.latency-bars i{background:var(--green);border-radius:4px;flex:1;min-width:3px;transition:height .25s}.latency-bars i.bar-error{background:var(--orange)}.timeline-card{padding-bottom:14px}.timeline-card ol{max-height:140px;margin:16px 0 0;padding:0;list-style:none;overflow:hidden}.timeline-card li{grid-template-columns:12px 1fr;align-items:start;gap:10px;padding:6px 0;display:grid}.timeline-card li>span{background:#a7a2b3;border-radius:50%;width:8px;height:8px;margin-top:4px;box-shadow:0 0 0 4px #a7a2b31f}.timeline-card .event-good>span{background:var(--green);box-shadow:0 0 0 4px #50b8781f}.timeline-card .event-bad>span{background:var(--orange);box-shadow:0 0 0 4px #f46f4e1f}.timeline-card li div{justify-content:space-between;gap:10px;display:flex}.timeline-card li strong{font-size:12px;font-weight:700}.timeline-card time{color:var(--muted);white-space:nowrap;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}footer{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;padding:2px 3px;font-size:11px;display:flex}@keyframes blink{50%{opacity:.38}}@keyframes hover{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-10px)rotate(1deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blob{0%,to{transform:rotate(7deg)scale(1)}50%{transform:rotate(10deg)scale(1.04)}}@media (max-width:1000px){.demo-shell{padding:0 28px 26px}.hero{grid-template-columns:1fr 360px;min-height:470px}.gremlin-stage{min-height:380px}.signal-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.demo-shell{padding:0 18px 24px}.topbar{min-height:70px}.release-pill>span:not(.pulse-dot){display:none}.hero{grid-template-columns:1fr}.hero-copy{padding-bottom:0}.gremlin-stage{min-height:350px}.gremlin-stage:before{width:280px;height:280px}.orbit-one{width:330px;height:330px}.orbit-two{width:230px;height:230px}.signal-grid{grid-template-columns:1fr}h1{font-size:48px}footer{flex-direction:column;gap:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}