:root {
  --bg: #061920;
  --paper: #0c2530;
  --text: #eaf6f6;
  --muted: #acc4ca;
  --blue: #55c8bb;
  --teal: #70ddd0;
  --line: #1b4650;
}

body {
  background: radial-gradient(circle at 85% 3%, #0d3a3d 0, #061920 34%, #04131b 100%) fixed;
  color: var(--text);
}

a:focus-visible, summary:focus-visible { outline-color: #8af5e3; }
.skip-link { color: #062129; background: #8be8d9; }

.top-callout { height: 64px; align-items: center; background: #04131b; border-bottom: 1px solid #153941; }
.top-callout a {
  min-height: 42px;
  background: linear-gradient(115deg, #83e8d9, #46bcae);
  box-shadow: 0 0 18px #43c3b666;
  color: #052029;
  border-radius: 9px;
}
.top-callout a:hover { box-shadow: 0 0 26px #5edbca88; }

.site-header { background: #061820; border-bottom: 1px solid #17404a; }
.header-inner { min-height: 102px; }
.brand { gap: 2px; min-width: 0; }
.brand-logo { display: block; width: clamp(155px, 17vw, 235px); height: auto; }
.brand-anniversary { display: block; width: clamp(35px, 4vw, 52px); height: auto; margin-left: -6px; }
.main-nav { background: transparent; gap: 4px; }
.main-nav a { color: #c9dddf; border-radius: 7px; font-weight: 700; }
.main-nav a:hover, .main-nav a.active { background: #134550; color: #86eedf; }

.page-shell { margin-top: 26px; }
.feature-visual { background: #03151d; border: 1px solid #20535c; border-radius: 16px; box-shadow: 0 22px 60px #0005; }
.feature-bar { background: #0b2b35; color: #b5e6df; border-bottom: 1px solid #24616a; }
.feature-brand { letter-spacing: .11em; font-size: 12px; }
.feature-kicker { color: #7cc9c2; }
.feature-stage { display: block; min-height: 0; background: #04131b; }
.feature-stage::before, .feature-stage::after { display: none; }
.hero-slide { display: block; line-height: 0; }
.hero-slide img { display: block; width: 100%; height: auto; }
.hero-slide:hover img { filter: brightness(1.06); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.feature-tabs { background: #061d26; gap: 8px; padding: 10px; }
.feature-tabs a { min-height: 52px; background: #103440; color: #e0f7f3; border: 1px solid #1c5660; font-size: 13px; }
.feature-tabs a:hover { background: #1a535d; }
.feature-tabs span { color: #67d9ca; }

.article-card, .sidebar-box { background: #0c2530; border: 1px solid #19424b; border-radius: 14px; box-shadow: 0 16px 38px #0002; }
.article-kicker { color: #7cdbcf; }
.article-card h1, .article-card h2, .article-card h3, .sidebar-box h2 { color: #f3fffd; }
.article-card p, .sidebar-box, .sidebar-box a { color: #bed4d8; }
.article-card a, .sidebar-box a:hover, .subpage .breadcrumbs a, .subpage .back-home a { color: #77e3d5; }
.article-divider, .faq, .faq details, .sidebar-box li, .subpage .back-home { border-color: #214b54; }
.article-divider { background: #214b54; }
.notice { background: #103740; border-left-color: #67d4c4; color: #defaf5; border-radius: 0 9px 9px 0; }
.notice span { background: #2a8f86; }
.faq details p, .guide-links span, .subpage .breadcrumbs { color: #abc6cb; }
.guide-links li { background: #103440; border-left-color: #60d4c3; border-radius: 0 9px 9px 0; }
.guide-links a { color: #83e6d9; }
.sidebar-box li { border-bottom-color: #214650; }
.tag-list a { background: #123844; color: #c6e5e3; border-radius: 5px; }

.subpage .feature-stage { min-height: 250px; background: linear-gradient(112deg, #071c25, #0d4147 65%, #114c4b); }
.subpage .feature-copy h1 { color: #f3fffd; }
.subpage .feature-copy p { color: #c3e6e1; }
.subpage .eyebrow { color: #71dccb; }

.site-footer { background: #04141c; border-top: 1px solid #1d4550; }
.footer-inner { color: #b3c9cd; }
.footer-inner a { color: #82e4d7; }
.footer-labels { color: #a6c5c9; }
.footer-inner small { color: #83a0a7; }

@media (max-width: 1060px) {
  .header-inner { min-height: 0; }
}
@media (max-width: 750px) {
  .top-callout { height: 58px; }
  .header-inner { gap: 10px; }
  .brand-logo { width: 190px; }
  .brand-anniversary { width: 43px; }
  .page-shell { margin-top: 15px; }
  .feature-stage { min-height: 0; }
  .feature-tabs a { font-size: 11px; }
}
@media (max-width: 500px) {
  .brand-logo { width: 168px; }
  .brand-anniversary { width: 38px; }
  .main-nav a { font-size: 11px; padding: 8px 7px; }
  .feature-visual { border-radius: 12px; }
  .feature-bar { height: 36px; }
  .feature-tabs { gap: 5px; }
  .feature-tabs a { padding: 7px; }
}