:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #15231d; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
main { width: min(100% - 40px, 920px); margin: 0 auto; text-align: center; padding: 54px 0 42px; }
h1 { margin: 0; font-size: clamp(23px, 3vw, 32px); font-weight: 600; line-height: 1.35; letter-spacing: -.65px; }
h1 span { display: block; margin-top: 6px; font-size: .67em; font-weight: 400; letter-spacing: 0; color: #59665f; }
.radar-wrap { margin: 34px auto 29px; width: min(78vw, 330px); }
.radar { display: block; width: 100%; height: auto; }
.status h2 { margin: 0 0 12px; color: #59665f; font-size: 17px; font-weight: 400; }
.status p { margin: 0; color: #16833c; font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; line-height: 1.4; }
body[data-state="alert"] .status p { color: #cf2828; }
.channels { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.channel { display: inline-flex; align-items: center; gap: 10px; padding: 13px 17px; border: 1px solid #dce2de; border-radius: 10px; text-decoration: none; color: #26392e; font-size: 15px; line-height: 24px; }
.channel[href]:hover { border-color: #97a79c; background: #fafcfb; }
.channel[aria-disabled="true"] { cursor: default; }
.channel-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.arrow { color: #7c8a81; margin-left: 10px; font-size: 19px; }
.preview { margin: auto auto 0; padding: 22px 16px; color: #738078; font-size: 13px; text-align: center; }
.preview-options { display: inline-flex; gap: 4px; margin-left: 12px; padding: 4px; border-radius: 8px; background: #f1f4f2; vertical-align: middle; }
.preview button { border: 0; border-radius: 5px; background: transparent; color: #56655c; padding: 7px 11px; font: inherit; cursor: pointer; }
.preview button[aria-pressed="true"] { background: white; color: #1a3525; box-shadow: 0 1px 3px #172a1914; }
a:focus-visible, button:focus-visible { outline: 2px solid #247248; outline-offset: 4px; }
@media (max-width: 480px) {
  main { padding-top: 34px; }
  .radar-wrap { margin: 28px auto 25px; width: min(78vw, 300px); }
  .channels { gap: 10px; margin-top: 26px; }
  .channel { padding: 11px 12px; font-size: 14px; gap: 7px; }
  .arrow { margin-left: 0; }
  .preview-options { display: flex; width: max-content; margin: 10px auto 0; }
}

body[data-state="unknown"] .status p { color: #59665f; }