@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/roboto-flex-latin-full-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --health-bg: #120f16;
  --health-ink: #f4f2f5;
  --health-muted: #b4aebb;
  --health-dim: #928b9d;
  --health-line: rgba(244, 242, 245, .12);
  --health-surface: rgba(26, 23, 32, .75);
  --health-ok: #b9dbb0;
  --health-warn: #eabf94;
  --health-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --health-ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body.health-page { --health-state: var(--health-ok); margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--health-bg); color: var(--health-ink); font-family: "Roboto Flex", "Segoe UI Variable Text", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.health-page.is-degraded { --health-state: var(--health-warn); }
.health-page::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 0%, rgba(124, 111, 154, .07), transparent 55%); }
.health-page :where(h1, h2, h3, p, dl, dd, ul) { margin: 0; }
.health-page a { color: inherit; text-decoration: none; }
.health-page ::selection { background: var(--health-ok); color: var(--health-bg); }
.health-page :where(a, button):focus-visible { outline: 2px solid var(--health-ok); outline-offset: 5px; }
.health-skip { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 18px; background: var(--health-ink); color: var(--health-bg) !important; border-radius: 8px; transform: translateY(-160%); }
.health-skip:focus { transform: none; }

.health-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1200px, calc(100% - 80px)); min-height: 106px; margin-inline: auto; border-bottom: 1px solid var(--health-line); }
.health-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.health-brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(244, 242, 245, .24); border-radius: 10px; font-size: 0.84rem; letter-spacing: -.04em; }
.health-brand > span:last-child { display: flex; flex-direction: column; }
.health-brand strong { font-size: 1rem; font-weight: 600; letter-spacing: -.045em; }
.health-brand small { margin-top: 1px; color: var(--health-dim); font-family: var(--health-mono); font-size: 0.75rem; letter-spacing: .12em; }
.health-nav nav { display: flex; align-items: center; flex-shrink: 0; gap: 26px; font-size: 0.86rem; white-space: nowrap; }
.health-home-link { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 8px; color: var(--health-muted) !important; transition: color .2s ease; }
.health-home-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.health-home-link:hover { color: var(--health-ink) !important; }
.health-home-link:hover svg { transform: translateX(-3px); }
.health-nav-current { padding-left: 26px; border-left: 1px solid var(--health-line); color: var(--health-ink); }

.health-main { width: min(1000px, calc(100% - 80px)); margin: 64px auto 72px; }
.health-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.health-eyebrow { color: var(--health-dim); font-family: var(--health-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: .12em; }
.health-heading h1 { margin-top: 15px; font-size: clamp(2.4rem, 4.5vw, 3.35rem); line-height: 1.2; font-weight: 480; letter-spacing: -.065em; }
.health-heading h1 > span { margin-left: 3px; color: var(--health-state); }
.health-heading-lead { margin-top: 14px !important; color: var(--health-muted); font-size: 0.99rem; }
.health-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex-shrink: 0; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(244, 242, 245, .2); border-radius: 999px; color: var(--health-muted) !important; font-size: 0.86rem; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.health-refresh svg { width: 16px; height: 16px; }
.health-refresh:hover { color: var(--health-ink) !important; background: rgba(244, 242, 245, .05); border-color: rgba(244, 242, 245, .35); }
.health-refresh.is-refreshing svg { animation: health-refresh-spin 1.3s linear infinite; }

.health-overview { overflow: hidden; border: 1px solid rgba(185, 219, 176, .2); border-radius: 20px; background: var(--health-surface); }
.is-degraded .health-overview { border-color: rgba(234, 191, 148, .28); }
.health-overview-main { position: relative; display: flex; align-items: center; gap: 28px; min-height: 174px; padding: 34px 36px; }
.health-signal { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 88px; height: 88px; color: var(--health-state); }
.health-signal-ring { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: .12; }
.health-signal-ring::before { content: ""; position: absolute; inset: 10px; border: 1px solid currentColor; border-radius: inherit; }
.health-signal-core { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; background: rgba(185, 219, 176, .04); }
.is-degraded .health-signal-core { background: rgba(234, 191, 148, .04); }
.health-signal-core svg { width: 23px; height: 23px; }
.health-overview-label { margin-bottom: 8px !important; color: var(--health-state); font-family: var(--health-mono); font-size: 0.75rem; letter-spacing: .12em; }
.health-overview-copy h2 { font-size: clamp(1.3rem, 2.7vw, 1.7rem); font-weight: 480; line-height: 1.4; letter-spacing: -.04em; }
.health-overview-copy > p:last-child { margin-top: 9px; color: var(--health-muted); font-size: 0.88rem; }
.health-snapshot-badge { display: inline-flex; align-items: center; gap: 7px; align-self: start; margin: 3px 0 0 auto; white-space: nowrap; font-size: 0.75rem; color: var(--health-dim); }
.health-snapshot-badge i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.health-overview-meta { display: grid; grid-template-columns: .8fr 1fr 1.4fr; padding: 20px 36px; border-top: 1px solid var(--health-line); background: rgba(18, 15, 22, .25); }
.health-overview-meta > div { min-width: 0; padding-inline: 24px; border-left: 1px solid var(--health-line); }
.health-overview-meta > div:first-child { padding-left: 0; border-left: 0; }
.health-overview-meta > div:last-child { padding-right: 0; }
.health-overview-meta dt { margin-bottom: 6px; color: var(--health-dim); font-size: 0.75rem; }
.health-overview-meta dd { color: var(--health-ink); font-family: var(--health-mono); font-size: 0.89rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.health-overview-meta .health-status-code { color: var(--health-state); font-size: 0.82rem; letter-spacing: .08em; }
.health-unit { color: var(--health-dim); font-size: 0.76rem; }

.health-details { display: grid; grid-template-columns: 1.12fr 1fr; gap: 20px; margin-top: 20px; }
.health-panel { min-width: 0; padding: 28px; border: 1px solid var(--health-line); border-radius: 18px; background: rgba(26, 23, 32, .55); }
.health-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.health-panel-head h2 { margin-top: 8px; font-size: 1.05rem; font-weight: 480; letter-spacing: -.025em; }
.health-panel-symbol { color: var(--health-dim); font-size: 1.1rem; }
.health-check-list { padding: 0; list-style: none; margin-top: 26px !important; }
.health-check { --check-state: var(--health-ok); display: flex; align-items: center; gap: 13px; min-height: 89px; padding-block: 18px; border-top: 1px solid var(--health-line); }
.health-check.is-failed { --check-state: var(--health-warn); }
.health-check.is-idle { --check-state: var(--health-dim); }
.health-check-icon { display: grid; place-items: center; flex: 0 0 auto; width: 37px; height: 37px; border: 1px solid rgba(244, 242, 245, .09); border-radius: 10px; color: var(--health-muted); }
.health-check-icon svg { width: 19px; height: 19px; }
.health-check-name { min-width: 0; }
.health-check-name h3 { font-size: 0.94rem; font-weight: 500; }
.health-check-name p { margin-top: 3px; color: var(--health-dim); font-size: 0.78rem; }
.health-check-result { display: flex; flex-direction: column; align-items: end; gap: 4px; margin-left: auto; flex-shrink: 0; }
.health-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--check-state); font-size: 0.83rem; }
.health-indicator i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.health-check-latency { color: var(--health-dim); font-family: var(--health-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.health-panel-note { display: flex; align-items: baseline; gap: 8px; padding-top: 15px; border-top: 1px solid var(--health-line); color: var(--health-dim); font-size: 0.77rem; }
.health-panel-note > span { color: var(--health-muted); }
.health-clock-icon { width: 20px; height: 20px; color: var(--health-dim); }
.health-uptime-wrap { padding-block: 36px 30px; }
.health-uptime-label { color: var(--health-dim); font-size: 0.78rem; }
.health-uptime { margin-top: 12px; font-family: var(--health-mono); font-size: clamp(1.3rem, 2.7vw, 2rem); letter-spacing: -.055em; font-weight: 350; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.health-uptime-caption { display: flex; align-items: center; gap: 12px; margin-top: 8px !important; color: var(--health-dim); font-size: 0.75rem; }
.health-uptime-caption > span:not(.health-timer-dot) { opacity: .4; }
.health-timer-dot { width: 3px; height: 3px; margin-left: 1px; border-radius: 50%; background: var(--health-muted); }
.health-started-at { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--health-line); }
.health-started-at dt { color: var(--health-dim); font-size: 0.75rem; }
.health-started-at dd { font-family: var(--health-mono); color: var(--health-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.health-footnote { display: flex; align-items: baseline; gap: 10px; padding: 24px 3px 0; color: var(--health-dim); font-size: 0.79rem; line-height: 1.8; }
.health-footnote-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; font-family: serif; font-size: 0.75rem; line-height: 1; }
.health-footnote > a { flex-shrink: 0; margin-left: auto; color: var(--health-muted); }
.health-footnote > a > span { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.health-footnote > a:hover { color: var(--health-ink); }
.health-footnote > a:hover > span { transform: translate(2px, -2px); }
.health-noscript { margin-top: 18px !important; color: var(--health-muted); font-size: 0.84rem; }
.health-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1200px, calc(100% - 80px)); padding-block: 25px; margin: auto auto 0; border-top: 1px solid var(--health-line); color: var(--health-dim); font-size: 0.76rem; }
.health-footer > span:nth-child(2) { letter-spacing: .06em; }
.health-footer a { color: var(--health-muted); }
.health-footer a:hover { color: var(--health-ink); }

@keyframes health-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .health-main { margin-block: 48px 60px; }
  .health-overview-main { gap: 20px; padding: 30px 28px; }
  .health-snapshot-badge { position: absolute; top: 18px; right: 24px; font-size: 0.75rem; }
  .health-overview-meta { padding-inline: 28px; }
  .health-panel { padding: 24px; }
  .health-check { gap: 10px; }
  .health-check-name p { font-size: 0.75rem; }
  .health-check-icon { width: 32px; height: 32px; }
  .health-check-icon svg { width: 17px; height: 17px; }
}
@media (max-width: 700px) {
  .health-nav { width: calc(100% - 40px); min-height: 86px; gap: 18px; }
  .health-brand { gap: 9px; }
  .health-brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .health-brand strong { font-size: 1.04rem; }
  .health-brand small { font-size: 0.75rem; letter-spacing: .07em; }
  .health-nav nav { gap: 0; font-size: 0.79rem; }
  .health-nav-current { display: none; }
  .health-home-link { gap: 5px; }
  .health-main { width: calc(100% - 40px); margin-block: 40px 48px; }
  .health-heading { align-items: center; gap: 12px; margin-bottom: 24px; }
  .health-heading h1 { margin-top: 12px; font-size: 2.45rem; }
  .health-eyebrow { font-size: 0.75rem; }
  .health-heading-lead { max-width: 180px; margin-top: 12px !important; font-size: 0.9rem; line-height: 1.8; }
  .health-refresh { gap: 6px; padding: 10px 12px; min-height: 40px; font-size: 0.8rem; }
  .health-refresh svg { width: 14px; height: 14px; }
  .health-overview { border-radius: 16px; }
  .health-overview-main { align-items: start; gap: 16px; min-height: 0; padding: 42px 20px 26px; }
  .health-signal { width: 52px; height: 52px; margin-top: 7px; }
  .health-signal-ring::before { inset: 5px; }
  .health-signal-core { width: 31px; height: 31px; }
  .health-signal-core svg { width: 18px; height: 18px; }
  .health-overview-copy { min-width: 0; }
  .health-overview-copy h2 { font-size: 1.16rem; }
  .health-overview-label { font-size: 0.75rem; margin-bottom: 7px !important; }
  .health-overview-copy > p:last-child { margin-top: 8px; font-size: 0.82rem; line-height: 1.9; }
  .health-snapshot-badge { top: 13px; right: 18px; font-size: 0.75rem; }
  .health-overview-meta { grid-template-columns: 1fr 1.2fr; gap: 20px 0; padding: 20px; }
  .health-overview-meta > div { padding-inline: 18px; }
  .health-overview-meta > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--health-line); padding: 16px 0 0; }
  .health-overview-meta > div:last-child dd { font-size: 0.86rem; }
  .health-overview-meta dt { font-size: 0.75rem; }
  .health-details { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .health-panel { padding: 24px; border-radius: 16px; }
  .health-panel-head h2 { font-size: 1rem; }
  .health-check { min-height: 84px; gap: 13px; }
  .health-check-name p { font-size: 0.77rem; }
  .health-check-icon { width: 36px; height: 36px; }
  .health-check-icon svg { width: 19px; height: 19px; }
  .health-uptime { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .health-uptime-wrap { padding-block: 28px; }
  .health-footnote { flex-wrap: wrap; gap: 8px; font-size: 0.75rem; padding-top: 20px; }
  .health-footnote p { flex: 1; min-width: 0; }
  .health-footnote > a { width: 100%; margin-left: 21px; margin-top: 3px; }
  .health-footer { width: calc(100% - 40px); flex-wrap: wrap; gap: 12px; padding-block: 22px; font-size: 0.75rem; }
  .health-footer > span:nth-child(2) { display: none; }
}
@media (max-width: 360px) {
  .health-nav, .health-main, .health-footer { width: calc(100% - 32px); }
  .health-brand small { display: none; }
  .health-overview-main { gap: 12px; padding-inline: 16px; }
  .health-overview-copy h2 { font-size: 1.05rem; }
  .health-panel { padding: 20px; }
  .health-check { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}