:root {
  --site-primary: #091f44;
  --site-primary-hover: #04142f;
  --site-primary-muted: #304b70;
  --site-primary-soft: #eff1f4;
  --site-primary-soft-strong: #e1e5eb;
  --site-primary-border: #aeb8c6;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 3px solid rgba(9, 31, 68, 0.28);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 999;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--site-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(0);
}

main[tabindex="-1"]:focus {
  outline: none;
}

img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

pre,
.citation-box,
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.project-grid > *,
.card-grid > *,
.feature-grid > *,
.project-showcase > *,
.mechanism-module-grid > *,
.forecast-module-grid > *,
.agenticrl-module-row > *,
.app-domain-grid > *,
.self-learning-grid > *,
.team-grid > *,
.member-grid > * {
  min-width: 0;
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

@media (max-width: 900px) {
  .container {
    width: 100%;
    max-width: 100%;
  }

  .project-grid,
  .card-grid,
  .feature-grid,
  .project-showcase,
  .mechanism-module-grid,
  .forecast-module-grid,
  .agenticrl-module-row,
  .app-domain-grid,
  .self-learning-grid,
  .team-grid,
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body {
    text-align: left !important;
    text-justify: auto;
  }

  .container {
    width: 100%;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  header {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  header h1 {
    font-size: clamp(1.55rem, 8vw, 1.9rem) !important;
    overflow-wrap: anywhere;
  }

  .top-nav .container {
    align-items: stretch !important;
  }

  .nav-links,
  .nav-bar .container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links::-webkit-scrollbar,
  .nav-bar .container::-webkit-scrollbar {
    display: none;
  }

  .nav-links a,
  .nav-bar a,
  .btn,
  .paper-btn,
  .sc-btn,
  .card-btn,
  .paper-filter,
  .search-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .project-grid,
  .card-grid,
  .feature-grid,
  .project-showcase,
  .mechanism-module-grid,
  .forecast-module-grid,
  .agenticrl-module-row,
  .app-domain-grid,
  .self-learning-grid,
  .team-grid,
  .member-grid {
    grid-template-columns: 1fr !important;
  }

  .project-card-wide,
  .agenticrl-module-row {
    grid-column: auto !important;
  }

  .paper-card,
  .showcase-card {
    padding: 24px 20px !important;
  }

  .btn-row,
  .paper-links,
  .sc-links {
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .container {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .nav-links a,
  .nav-bar a {
    padding-right: 11px !important;
    padding-left: 11px !important;
    font-size: 0.79rem !important;
  }

  .paper-card,
  .showcase-card {
    padding: 20px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}