:root {
  --lime: #b8ff2b;
  --indigo: #3c40c6;
  --ink: #040404;
  --surface: #151515;
  --surface-raised: #1c1c1c;
  --line: #2a2a2a;
  --line-strong: #3d3d3d;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-faint: #71717a;
  --danger: #ff6b6b;
  --warning: #ffb547;
  --display: "Unbounded", sans-serif;
  --body: "Hanken Grotesk Variable", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 88px);
  --content: 1280px;
  --inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  --header: 137px;
  --lead: clamp(17px, 1.25vw, 20px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --state: var(--lime);
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.top, main, .footer-top, .footer-groups, .footer-wordmark, .footer-bottom { padding-inline: var(--inset); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header); }

.logo { display: block; line-height: 0; }

.logo img { display: block; width: auto; height: 26px; }

.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  font: 600 var(--lead)/1 var(--body);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--lime);
  transition: color 240ms var(--ease);
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 340ms var(--ease);
}

.button:hover::before, .button:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

.button .icon { transition: color 240ms var(--ease), transform 240ms var(--ease); }

.button:hover .icon:last-child, .button:focus-visible .icon:last-child { transform: translateX(4px); }

.button-ghost { color: var(--text); background: var(--surface); }

.button-ghost::before { background: var(--lime); }

.button-ghost .icon { color: var(--text-muted); }

.button-ghost:hover, .button-ghost:focus-visible, .button-ghost:hover .icon, .button-ghost:focus-visible .icon { color: var(--ink); }

.button-ghost:hover .icon:last-child { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .button, .button::before, .button .icon { transition: none; }
}

main { flex: 1; min-height: calc(100dvh - var(--header)); display: grid; gap: 40px; padding-block: clamp(8px, 2vw, 24px) 112px; align-content: start; }

.hero { padding-block: clamp(24px, 4vw, 56px) clamp(8px, 2vw, 24px); }




.hero h1 { display: grid; margin: 0; font: 900 clamp(40px, 5.4vw, 92px)/1 var(--display); letter-spacing: -0.01em; }

.hero h1 span:last-child { color: var(--state); }

.lead { margin: 24px 0 0; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.45; color: var(--text-muted); }

body[data-state="degraded"], body[data-state="maintenance"] { --state: var(--warning); }

body[data-state="partial"], body[data-state="major"] { --state: var(--danger); }

h2 { margin: 0; font: 900 24px/1.2 var(--display); }

h3 { margin: 0; font: 600 var(--lead)/1.3 var(--body); }

.notices { display: grid; gap: 16px; }

.notice { display: grid; gap: 16px; padding: clamp(24px, 3vw, 32px); background: var(--surface); }

.notice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; font: 600 14px/1.4 var(--body); color: var(--text); background: var(--surface-raised); }

.chip::before, .state::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; }

.chip[data-impact="major"] { color: var(--danger); }

.chip[data-impact="minor"], .chip[data-impact="maintenance"] { color: var(--warning); }

.notice-affects { margin: 0; color: var(--text-muted); }

.updates { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.updates li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }

.updates p { margin: 0; }

.updates time, .past time { font-size: 14px; color: var(--text-faint); }

.groups { display: grid; gap: 40px; }

.group { display: grid; gap: 16px; }

.group > ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.service { display: grid; gap: 16px; padding: clamp(20px, 2.5vw, 28px); background: var(--surface); }

.service-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }

.service-head p { margin: 2px 0 0; color: var(--text-muted); }

.state { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--lime); white-space: nowrap; }

.state[data-state="slow"] { color: var(--warning); }

.state[data-state="down"] { color: var(--danger); }

.state[data-state="unknown"] { color: var(--text-faint); }

.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 32px; }

.bars span { background: var(--line-strong); }

.bars span[data-level="ok"] { background: var(--lime); }

.bars span[data-level="some"] { background: var(--warning); }

.bars span[data-level="bad"] { background: var(--danger); }

.service-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: 14px; color: var(--text-faint); }

.past { display: grid; gap: 16px; }

.past ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.past li { display: grid; gap: 4px; padding: 16px 20px; background: var(--surface); }

.past li p { margin: 0; color: var(--text-muted); }

.footer { border-top: 1px solid var(--line); overflow: hidden; }

.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-block: 80px 64px; }

.footer-tagline { margin: 0; font: 900 clamp(32px, 3.2vw, 52px)/1.1 var(--display); text-wrap: balance; }

.footer-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 40px; padding-block: 32px 80px; }

.footer-groups h2 { margin: 0 0 24px; font-size: 20px; }

.footer-groups ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.footer-groups a { color: var(--text-muted); text-decoration: none; font-size: var(--lead); }

.footer-groups a:hover { color: var(--text); }

.footer-wordmark img { display: block; width: 100%; height: auto; }

.footer-bottom { display: grid; gap: 8px; padding-block: 32px 48px; font-size: 14px; color: var(--text-faint); }

.footer-bottom p { margin: 0; max-width: 100ch; }

@media (max-width: 960px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.button .narrow { display: none; }

@media (max-width: 720px) {
  :root { --header: 88px; }
  .top .button { height: 44px; padding: 0 16px; font-size: 15px; }
  .top .button .wide { display: none; }
  .top .button .narrow { display: inline; }
  .logo img { height: 18px; }
}

@media (max-width: 480px) {
  .top .button { width: 44px; padding: 0; justify-content: center; }
  .top .button .narrow { display: none; }
  .footer-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .footer-actions .button { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .bars { height: 24px; gap: 1px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes slide-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
  @keyframes slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes pulse { 50% { opacity: 0.35; } }

  .hero h1 span:first-child { animation: slide-in 0.8s var(--ease) 0.1s both; }
  .hero h1 span:last-child { animation: slide-in-right 0.8s var(--ease) 0.2s both; }
  .lead { animation: rise-in 0.6s var(--ease) 0.35s both; }
  [data-enter] { animation: rise-in 0.6s var(--ease) both; animation-delay: calc(var(--at, 0) * 70ms + 0.4s); }
  [data-enter] .bars span { transform-origin: 50% 100%; animation: grow 0.5s var(--ease) both; animation-delay: calc(var(--at, 0) * 70ms + 0.5s + var(--bar, 0) * 6ms); }
  .state[data-state="down"]::before { animation: pulse 1.2s ease-in-out infinite; }
}