:root { --site-header-height: 93px; }
:root[data-navigation='ready'] { scroll-padding-top: calc(var(--site-header-height) + 12px); }
:root[data-navigation='ready'] body:not(.home-page) { padding-top: var(--site-header-height); }

.header-edge { position: absolute; top: 18px; left: 0; width: 1px; height: 1px; pointer-events: none; }
:root[data-navigation='ready'] .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 8;
  backdrop-filter: none;
  transition: background-color .28s ease, box-shadow .28s ease;
}
:root[data-navigation='ready'] .site-header::before { position: absolute; inset: 0 0 auto; }
:root[data-navigation='ready'] .site-header[data-scrolled] {
  background-color: var(--dark);
  background-color: color-mix(in srgb, var(--dark) 90%, transparent);
  backdrop-filter: blur(15px) saturate(1.15);
  box-shadow: 0 12px 32px #151b1538;
}
:root[data-navigation='ready'] .header-inner { min-height: calc(var(--site-header-height) - 1px); }
:root[data-navigation='ready'] :is(.detail-section[id], .group-history[id]) { scroll-margin-top: 0; }

.menu-icon::before { transition: top .2s ease, transform .2s ease; }
.menu-icon::after { transition: bottom .2s ease, transform .2s ease; }

.footer-base .motion-setting { align-items: center; gap: 6px 10px; }
.motion-setting button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 11px;
  color: inherit;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 53%, transparent);
  border-radius: 100px;
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.motion-setting button::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.motion-setting button[aria-pressed='true']::before { background-color: currentColor; }
.motion-setting button:not(:disabled):hover { background-color: color-mix(in srgb, currentColor 10%, transparent); }
.motion-setting button:disabled { cursor: default; }

@media (min-width: 768px) {
  .main-nav > a:not(:last-child) { position: relative; text-decoration: none; }
  .main-nav > a:not(:last-child)::after {
    content: '';
    position: absolute;
    inset: auto 0 8px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
  }
  .main-nav > a:not(:last-child):is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
}

@media (max-width: 767px) {
  :root { --site-header-height: 75px; }
  .menu-toggle:not([hidden]) + .main-nav {
    max-height: calc(100dvh - var(--site-header-height));
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 26px #151b1538;
  }
  .menu-toggle[aria-expanded='true'] + .main-nav { animation: nav-panel-enter .26s cubic-bezier(.18,.72,.26,1) both; }
  .menu-toggle[aria-expanded='true'] + .main-nav > a { animation: nav-link-enter .31s cubic-bezier(.18,.72,.26,1) both; }
  .menu-toggle[aria-expanded='true'] + .main-nav > a:nth-child(2) { animation-delay: .055s; }
  .menu-toggle[aria-expanded='true'] + .main-nav > a:nth-child(3) { animation-delay: .11s; }
  .menu-toggle[aria-expanded='true'] + .main-nav > a:focus-visible { animation: none; }
  @keyframes nav-panel-enter {
    from { opacity: .82; transform: translateY(-7px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes nav-link-enter {
    from { opacity: .64; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (forced-colors: active) {
  .main-nav > a:is([aria-current], :hover, :focus-visible) { text-decoration: underline; }
  .motion-setting button[aria-pressed='true']::before { background: ButtonText; forced-color-adjust: none; }
}

:root[data-motion='reduced'],
:root[data-motion='reduced'] *,
:root[data-motion='reduced'] *::before,
:root[data-motion='reduced'] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}