:root {
  color: #31373d;
  background: #a9d6ce;
  font-family: Nunito, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 18% 12%, #d9eee4 0 12rem, transparent 35rem), linear-gradient(160deg, #a9d6ce, #8fb78c); }
a { color: #356e69; text-underline-offset: .18em; }
a:hover { color: #994f3b; }
.site-header, .site-footer, main { width: min(100% - 2rem, 54rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.brand { color: #31373d; font-size: 1.18rem; font-weight: 900; text-decoration: none; }
.back-link { padding: .62rem .85rem; border: 1px solid rgba(49,55,61,.18); border-radius: 999px; background: rgba(255,241,207,.62); font-weight: 900; text-decoration: none; }
main { margin-top: 1rem; margin-bottom: 3rem; padding: clamp(1.35rem, 4vw, 3rem); border: 1px solid rgba(49,55,61,.12); border-radius: 2rem; background: rgba(255,241,207,.94); box-shadow: 0 1.4rem 4rem rgba(48,72,68,.2); }
.kicker { margin: 0 0 .55rem; color: #5f9b91; font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 7vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }
.lede { max-width: 52ch; margin: 1.1rem 0 2rem; color: rgba(49,55,61,.76); font-size: 1.06rem; line-height: 1.65; }
h2 { margin: 2.2rem 0 .7rem; font-size: 1.28rem; }
h3 { margin: 1.25rem 0 .4rem; font-size: 1rem; }
p, li { line-height: 1.65; }
ul { padding-left: 1.2rem; }
.notice, .status-card { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1px solid rgba(49,55,61,.12); border-radius: 1rem; background: rgba(169,214,206,.3); }
.notice strong, .status-card strong { display: block; margin-bottom: .25rem; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.status-card { margin: 0; }
.status-dot { display: inline-block; width: .62rem; height: .62rem; margin-right: .35rem; border-radius: 50%; background: #d0a058; }
.status-card[data-state="ok"] .status-dot { background: #70b883; }
.status-card[data-state="down"] .status-dot { background: #c96c63; }
.updated { color: rgba(49,55,61,.58); font-size: .84rem; }
.site-footer { display: flex; flex-wrap: wrap; gap: .85rem 1.1rem; padding: 0 0 2.5rem; font-size: .84rem; }
.site-footer a { color: rgba(49,55,61,.78); }
code { padding: .12rem .32rem; border-radius: .35rem; background: rgba(49,55,61,.08); }
@media (max-width: 540px) {
  .site-header { align-items: flex-start; }
  main { margin-top: .25rem; border-radius: 1.4rem; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.25rem); }
}