:root {
  --md-primary-fg-color: #1f3fb3;
  --md-primary-fg-color--light: #4a67d6;
  --md-primary-fg-color--dark: #142c86;
  --md-accent-fg-color: #2f6bff;
  --md-typeset-a-color: #1f4fd8;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #16234f;
  --md-default-bg-color: #0d111a;
  --md-default-bg-color--light: #121826;
  --md-code-bg-color: #141b2b;
  --md-typeset-a-color: #8aa8ff;
  --md-accent-fg-color: #8aa8ff;
}
.md-typeset h1, .md-typeset h2 { font-weight: 700; letter-spacing: -0.015em; }
.md-typeset table:not([class]) { font-size: .74rem; }
.md-typeset table:not([class]) th { background: var(--md-default-bg-color--light, #f4f6fb); }

/* Home page */
.hero { padding: 2.2rem 0 1.4rem; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 700;
  color: var(--md-accent-fg-color); margin: 0 0 .6rem; }
.hero h1 { font-size: 2.35rem; line-height: 1.12; margin: 0 0 .9rem; color: var(--md-default-fg-color); }
.hero .lead { font-size: 1.02rem; line-height: 1.6; max-width: 46rem; color: var(--md-default-fg-color--light); }
.hero .md-button { margin: .9rem .5rem 0 0; }
.hero-media { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(16, 32, 92, .18);
  border: 1px solid rgba(31, 63, 179, .15); margin: 1.6rem 0 .4rem; }
.hero-media img { display: block; width: 100%; }
.caption { font-size: .68rem; color: var(--md-default-fg-color--lighter); text-align: center; margin-top: .3rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.8rem 0; }
.stats div { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 12px; padding: .9rem 1rem; }
.stats strong { display: block; font-size: 1.35rem; color: var(--md-accent-fg-color); }
.stats span { font-size: .68rem; color: var(--md-default-fg-color--light); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 1.8rem; } }

/* Home page header over the looping Hermes artwork. The poster shows at once; the video loads after the
   page (javascripts/extra.js) and never on small screens, with reduced motion or with data saver. */
.hero--art { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; margin-top: 1rem;
  padding: 3.2rem 2.6rem 2.6rem; min-height: 25rem; background: #0b1747; color: #fff;
  box-shadow: 0 22px 60px rgba(8, 18, 70, .28); }
.hero--art .hero-bg { position: absolute; z-index: -2; top: 0; left: 22%; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%; pointer-events: none; }
.hero--art::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #0b1747 0%, #0b1747 24%, rgba(11, 23, 71, .9) 40%, rgba(11, 23, 71, .45) 70%,
  rgba(11, 23, 71, .25) 100%); }
.hero--art .eyebrow { color: #ffcf3d; }
.md-content__inner:has(.hero--art) > .md-content__button { display: none; }
.md-typeset .hero--art h1 { color: #fff; max-width: 32rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero--art .lead { color: #dbe3fb; max-width: 34rem; }
[data-md-color-scheme] .md-typeset .hero--art .md-button:not(.md-button--primary) { color: #fff; border-color: rgba(255, 255, 255, .55); }
[data-md-color-scheme] .md-typeset .hero--art .md-button:not(.md-button--primary):hover { background: rgba(255, 255, 255, .14);
  border-color: #fff; color: #fff; }
[data-md-color-scheme] .md-typeset .hero--art .md-button--primary { background: #ffcf3d; border-color: #ffcf3d; color: #10184a; }
[data-md-color-scheme] .md-typeset .hero--art .md-button--primary:hover { background: #ffd95e; border-color: #ffd95e; color: #10184a; }
@media (max-width: 760px) {
  .hero--art { padding: 2.2rem 1.3rem 1.8rem; min-height: 0; }
  .hero--art .hero-bg { left: 0; opacity: .55; }
  .hero--art::before { background: rgba(11, 23, 71, .72); }
}
.md-typeset .grid.cards > ul > li { border-radius: 12px; }

.md-typeset .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .md-typeset .grid.two { grid-template-columns: 1fr; } }
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) { color: #c9d6ff; border-color: #4a63b8; }
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover { color: #fff; background: #2a3f8f; }
[data-md-color-scheme="slate"] .md-typeset .md-button--primary { background: #3a5bd9; border-color: #3a5bd9; }
.md-typeset .mermaid { margin: 1.2rem 0; }
.md-typeset .mermaid svg { max-width: 100%; height: auto; }
[data-md-color-scheme] .md-typeset .mermaid.flow { --md-mermaid-label-fg-color: #ffffff !important; --md-mermaid-edge-color: #7a8bb5 !important; }
.md-typeset h1 { color: var(--md-default-fg-color); }
.video-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(16, 32, 92, .18);
  border: 1px solid rgba(31, 63, 179, .15); background: #0d111a; margin: .6rem 0 .3rem; }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.md-header__home { color: inherit; }
.md-header__home:hover { color: inherit; opacity: .85; }
.to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 5; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: none; cursor: pointer; background: var(--md-primary-fg-color); color: #fff; box-shadow: 0 8px 24px rgba(16, 32, 92, .3);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(.6rem); pointer-events: none;
  transition: opacity .2s, transform .2s; }
.to-top.shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--md-accent-fg-color); }
.to-top svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.md-typeset figure.diagram { margin: 1.2rem 0; width: 100%; max-width: 100%; display: block; }
.md-typeset figure.diagram img { width: 100%; height: auto; }
.md-typeset figure.diagram.narrow img { max-width: 560px; margin: 0 auto; display: block; }
.md-typeset .ulx-logo { display: inline-block; max-width: 100%; margin: .4rem 0 .2rem; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 32, 92, .18); }
.md-typeset .ulx-logo img { display: block; width: 560px; max-width: 100%; height: auto; }
.md-typeset figure.c4 { margin: 1rem 0 1.4rem; width: 100%; max-width: 100%; display: block; }
.md-typeset figure.c4 img { width: 100%; height: auto; background: #ffffff; border-radius: 12px; padding: .4rem;
  border: 1px solid var(--md-default-fg-color--lightest); }