/* Shared accessibility and responsive fixes for the supplied prototype. */
:root { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #b5abfc; outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20000; padding: 12px 20px; background: #161826; color: #fff; }
.skip-link:focus { top: 12px; }
.all-menu { visibility: hidden; }
.all-menu.open { visibility: visible; }
.all-menu .close { cursor: pointer; }
.center-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 18px max(20px, calc((100vw - 1068px)/2)); background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.center-nav a { font-size: 14px; padding: 6px 0; color: var(--color-text); }
.center-nav a:hover { color: var(--color-accent-300); }
#center-content { scroll-margin-top: 24px; }
#center-content img { max-width: 100%; }
@media(max-width: 767px) {
  .all-menu { width: 100%; left: 100%; }
  .all-menu.open { left: 0; }
  #center-content a[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  #center-content a[style*="grid-template-columns"] > span { grid-column: 1 !important; grid-row: auto !important; }
  #center-content h1, #center-content p { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ani { opacity: 1 !important; transform: none !important; }
}