:root{color:#17342d;background:#f3f5ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}nav{display:flex;justify-content:space-between;align-items:center;padding:24px clamp(20px,5vw,72px);border-bottom:1px solid #d8dfd5}nav a{color:#17342d;font-size:22px;font-weight:800;text-decoration:none}nav span,.muted,.notice{color:#68766f}.hero,.grid,.notice{width:min(1120px,calc(100% - 40px));margin-inline:auto}.hero{padding:72px 0 36px}.hero h1,.state h1{margin:8px 0 12px;font-size:clamp(36px,6vw,68px);letter-spacing:-.055em}.eyebrow{margin:0;color:#527c68;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.grid{display:grid;gap:22px;padding-bottom:32px}.card{padding:clamp(22px,4vw,38px);background:#fff;border:1px solid #d8dfd5;border-radius:24px;box-shadow:0 18px 60px #18342d12}.card header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.card h2{margin:6px 0 0;font-size:26px}.pill{padding:8px 12px;border-radius:999px;background:#e3eee7;color:#315d49;font-size:12px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:28px 0}.metric{min-height:88px;padding:16px;border-radius:15px;background:#f5f7f2}.metric span{display:block;color:#748079;font-size:12px}.metric strong{display:block;margin-top:8px;font-size:18px}.components{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:0;list-style:none}.components li{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e6ebe4}[data-status=succeeded]{color:#16734c}[data-status=failed],[data-status=unavailable]{color:#a34435}.card footer{margin-top:24px}.action,button{display:inline-flex;padding:12px 18px;border:0;border-radius:999px;background:#17342d;color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.notice{padding:8px 0 60px;font-size:13px}.state{display:grid;min-height:80vh;place-content:center;padding:24px;text-align:center}.spinner{width:32px;height:32px;margin:auto;border:3px solid #d8dfd5;border-top-color:#17342d;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){nav span{display:none}.hero{padding-top:48px}.card header{display:block}.pill{display:inline-block;margin-top:14px}}
