/* Typography and colors from aodesky/um-website, style3.css. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

:root {
  --project-font: 'Noto Sans JP', sans-serif;
  --project-text: #000000;
  --project-link: #587abc;
  --project-muted: #4e5861;
  --project-bg: #ffffff;
  --project-rule: #ddd;
}

/* Dark palette, matching andrewodesky.com. An explicit choice via
   [data-theme] wins over the OS preference in both directions. */
:root[data-theme="dark"] {
  --project-text: #e8e6e3;
  --project-link: #8ab0f0;
  --project-muted: #a3adb8;
  --project-bg: #14171a;
  --project-rule: #2e343a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --project-text: #e8e6e3;
    --project-link: #8ab0f0;
    --project-muted: #a3adb8;
    --project-bg: #14171a;
    --project-rule: #2e343a;
  }
}
body { font-family: var(--project-font); font-size: 16px; font-weight: 400; color: var(--project-text); background: var(--project-bg); }
body h1, body h2, body h3, body h4, body h5, body h6, body .title {
  font-family: var(--project-font);
  color: var(--project-text);
}
body a { color: var(--project-link); text-decoration: none; }
body a:hover { text-decoration: underline; }
.toc ul a, .local_toc ul a, nav.prev_up_next a { color: var(--project-link); }
.project-links {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 8px 24px;
  width: 100%;
  margin: 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--project-rule);
  background: var(--project-bg);
  color: var(--project-text);
  font: 400 14px/1.5 var(--project-font);
}
.project-links a { display: inline-flex; align-items: center; gap: 6px; }
.project-links .nav-icon { display: block; flex: 0 0 14px; width: 14px; height: 14px; opacity: .7; }
/* The brand SVGs carry no fill, so they paint black. They are <img>, which
   cannot inherit currentColor, so invert them in dark mode to keep them
   legible against the dark bar. */
:root[data-theme="dark"] .project-links img.nav-icon { filter: invert(1); opacity: .75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-links img.nav-icon { filter: invert(1); opacity: .75; }
}
.project-links a { color: var(--project-link); text-decoration: none; white-space: nowrap; }
.project-links .project-name { display: inline; margin-right: auto; color: var(--project-text); }
.project-links a[aria-current="page"] { color: var(--project-text); font-weight: 600; }
.project-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.project-links a:focus-visible { outline: 2px solid var(--project-link); outline-offset: 4px; }
/* Narrow screens: keep the bar on one row by shortening labels step by step
   (same rules as the top bar on andrewodesky.com). */
@media (max-width: 600px) {
  .project-links { padding: 9px 12px; gap: 8px 14px; }
  .project-links .nav-label { display: none; }        /* GitHub, arXiv: icon only */
}
@media (max-width: 480px) {
  .project-links .nav-long { display: none; }         /* "Attention & bilinear forms" -> "Attention" */
}
@media (max-width: 380px) {
  .project-links { gap: 8px 12px; }
  .project-links .author-link { display: none; }
}


.project-links svg.nav-icon { fill: currentColor; }