:root {
  --info-ink: #fff;
  --info-panel: #4855ba;
  --info-rule: rgb(255 255 255 / .24);
  --info-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.information-footer {
  position: fixed;
  z-index: 3;
  inset-inline: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  font: 400 14px/1.5 var(--info-font);
  color: var(--info-ink);
  transition: opacity 350ms ease-out;
}
html.is-intro .information-footer { opacity: 0; visibility: hidden; pointer-events: none; }
.information { position: relative; }
.information > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.information > summary::-webkit-details-marker { display: none; }
.disclosure-chevron { transition: transform 180ms ease-out; }
.information[open] .disclosure-chevron { transform: rotate(180deg); }
.information-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 292px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 108px - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-radius: 16px;
  background: var(--info-panel);
  box-shadow: 0 12px 36px rgb(31 38 102 / .2);
  scrollbar-color: rgb(255 255 255 / .55) transparent;
  scrollbar-width: thin;
}
.information-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
}
.information-panel svg { flex: 0 0 auto; }
.information :focus-visible, .reading-page :focus-visible {
  outline: 2px solid var(--info-ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .information summary:hover { background: rgb(31 38 102 / .12); }
  .information-panel a:hover { background: rgb(255 255 255 / .09); }
  .reading-page a:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 600px) {
  .information-panel { width: calc(100vw - 32px); max-width: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  .information-footer, .disclosure-chevron { transition: none; }
  html.is-intro .information-footer { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Reading pages inherit the landing's color without its fixed viewport. */
html.reading { overflow: auto; height: auto; min-height: 100%; scrollbar-color: #dce0ff #5663d8; }
.reading-page {
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  margin: 0;
  background: var(--nau-blue, #5663d8);
  color: var(--info-ink);
  font: 400 16px/1.65 var(--info-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.reading-page a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.reading-page .skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 18px;
  background: white;
  color: #4855ba;
  z-index: 5;
}
.reading-page .skip-link:focus { top: max(12px, env(safe-area-inset-top)); }
.reading-header, .reading-content, .reading-footer {
  width: min(100% - 48px, 68ch);
  margin-inline: auto;
}
.reading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: max(28px, env(safe-area-inset-top));
}
.reading-brand { display: flex; align-items: center; min-height: 44px; }
.reading-brand img { display: block; width: 70px; height: auto; }
.reading-back { display: inline-flex; align-items: center; gap: 8px; padding-block: 10px; min-height: 44px; font-size: 14px; text-decoration: none; }
.reading-content { padding-top: 64px; padding-bottom: 40px; overflow-wrap: break-word; }
.reading-content h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
.reading-content .lead { font-size: 20px; line-height: 1.5; margin-bottom: 32px; text-wrap: pretty; }
.reading-content h2 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 44px 0 12px; scroll-margin-top: 24px; text-wrap: balance; }
.reading-content h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 28px 0 8px; }
.reading-content p { margin: 0 0 16px; }
.reading-content ul { padding-left: 22px; margin: 12px 0 24px; }
.reading-content li { padding-left: 4px; margin: 8px 0; }
.reading-content li::marker { color: #dce0ff; }
.reading-content strong { font-weight: 600; }
.reading-content .review-note { font-size: 14px; line-height: 1.6; padding-block: 18px; margin: 24px 0 32px; border-block: 1px solid var(--info-rule); }
.reading-content .review-note p { margin: 0; }
.reading-content .review-note p + p { margin-top: 8px; }
.contents { margin: 28px 0 36px; border-bottom: 1px solid var(--info-rule); padding-bottom: 16px; }
.contents summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-size: 15px; }
.contents nav { display: grid; padding: 8px 0; }
.contents a { font-size: 15px; padding: 10px 0; min-height: 44px; }
.reading-footer { padding: 24px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--info-rule); }
.reading-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.reading-footer a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; font-size: 14px; }
.reading-footer [aria-current="page"] { text-decoration: none; font-weight: 600; }
@media (max-width: 600px) {
  .reading-header, .reading-content, .reading-footer { width: calc(100% - 44px); }
  .reading-header { padding-top: max(20px, env(safe-area-inset-top)); }
  .reading-content { padding-top: 40px; }
  .reading-content h1 { font-size: 28px; }
  .reading-content .lead { font-size: 19px; }
  .reading-footer nav { display: grid; gap: 0; }
}