:root {
  --aoi-navy: #123c69;
  --aoi-blue: #1d75bb;
  --aoi-sky: #69b9df;
  --aoi-green: #79b441;
  --aoi-cream: #f6f2e9;
  --ink: #172331;
  --muted: #607083;
  --line: #d7e1ea;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(24px, 6vw, 80px) 24px;
  color: var(--ink);
  background: radial-gradient(circle at top left, rgba(105,185,223,.18), transparent 34rem), linear-gradient(180deg, #fbfdff 0%, var(--aoi-cream) 100%);
}
main { max-width: 760px; margin: auto; }
.brand { font-size: 22px; font-weight: 750; letter-spacing: -.5px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--aoi-navy); }
.brand > span { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 9px; margin-top: 48px; font-size: 12px; color: var(--aoi-navy); border: 1px solid var(--line); border-radius: 30px; padding: 9px 13px; background: #f8fbfd; }
.status > span { width: 7px; height: 7px; border-radius: 50%; background: #e6b422; }
h1, h2 { font-size: clamp(30px, 5.5vw, 44px); font-weight: 650; letter-spacing: -.035em; line-height: 1.15; margin: 26px 0 22px; color: var(--aoi-navy); }
p { font-size: 17px; line-height: 1.7; max-width: 660px; color: var(--muted); }
a { color: var(--aoi-blue); text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: var(--aoi-navy); }
a:focus-visible { outline: 3px solid var(--aoi-sky); outline-offset: 5px; }
.official { font-size: 15px; }
.english { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 10px; }
footer { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 44px; padding-bottom: 20px; }
@media (max-width: 480px) { .status { margin-top: 36px; font-size: 11px; } }