:root {
  --md-primary-fg-color: #1e3a5f;
  --md-primary-fg-color--light: #2f5b94;
  --md-primary-fg-color--dark: #122740;
  --md-accent-fg-color: #2b66b0;
  --md-code-hl-comment-color: #626262;
  --md-typeset-a-color: #1f5aa6;
  --rup-cyan: #4f8fd6;
  --rup-violet: #35609a;
  --rup-ink: #122740;
  --rup-panel: #f5f8fc;
  --rup-border: #c9ddf2;
  --rup-shadow: 0 1.2rem 3rem rgb(18 39 64 / 12%);
}

[data-md-color-scheme="default"] {
  --md-code-hl-comment-color: #626262;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b1626;
  --md-default-bg-color--light: #101e33;
  --md-default-bg-color--lighter: #172a46;
  --md-default-bg-color--lightest: #1f3555;
  --md-default-fg-color: #eef6ff;
  --md-default-fg-color--light: #cedcf0;
  --md-default-fg-color--lighter: #a9bdd7;
  --md-default-fg-color--lightest: #849bb8;
  --md-primary-fg-color: #24497a;
  --md-primary-fg-color--light: #3a6aa3;
  --md-primary-fg-color--dark: #17304f;
  --md-accent-fg-color: #8ec5ff;
  --md-code-hl-comment-color: #c1d0e4;
  --md-typeset-a-color: #a9d3ff;
  --rup-cyan: #8ec5ff;
  --rup-violet: #c9ddf2;
  --rup-ink: #eef6ff;
  --rup-panel: #112239;
  --rup-border: #2c4a75;
  --rup-shadow: 0 1.2rem 3rem rgb(0 0 0 / 32%);
}

.md-header {
  background: linear-gradient(110deg, var(--md-primary-fg-color--dark), var(--md-primary-fg-color));
  border-bottom: 0.05rem solid rgb(142 197 255 / 35%);
  box-shadow: 0 0.3rem 1.2rem rgb(2 8 23 / 22%);
}

.md-tabs {
  background: var(--md-primary-fg-color--dark);
  border-bottom: 0.05rem solid rgb(142 197 255 / 18%);
}

.md-tabs__list {
  align-items: center;
  gap: 0;
}

.md-tabs__item {
  height: auto;
  padding-inline: 0;
}

.md-tabs__link {
  border: 0.05rem solid transparent;
  border-radius: 0;
  margin-top: 0;
  opacity: 1;
  padding: 0.42rem 0.78rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.md-tabs__item:first-child .md-tabs__link {
  border-radius: 0.42rem 0 0 0.42rem;
}

.md-tabs__item:last-child .md-tabs__link {
  border-radius: 0 0.42rem 0.42rem 0;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__link:focus-visible {
  color: #fff;
}

.md-tabs__item--active .md-tabs__link {
  background: rgb(142 197 255 / 12%);
  border-color: rgb(142 197 255 / 30%);
  box-shadow: 0 0.28rem 0.8rem rgb(2 8 23 / 18%);
  color: #d4e8ff;
}

.md-grid {
  max-width: 92rem;
}

.md-main__inner {
  margin-top: 1.25rem;
}

.md-main__inner:has(.rup-hero) {
  margin-top: 0.7rem;
}

.md-sidebar__scrollwrap {
  scrollbar-color: var(--rup-border) transparent;
}

.md-sidebar--primary .md-sidebar__inner,
.md-sidebar--secondary .md-sidebar__inner {
  background: color-mix(in srgb, var(--rup-panel) 72%, transparent);
  border: 0.05rem solid var(--rup-border);
  border-radius: 0.7rem;
  padding: 0.7rem;
}

.md-sidebar--primary .md-sidebar__inner {
  padding: 0 0 0 0.7rem;
}

/* Material pins the section heading while the rest of the navigation scrolls.
   It needs an opaque background of its own, otherwise the links pass visibly
   underneath it. The mix reproduces the translucent panel over the page, so
   the heading is opaque without reading as a different surface. */
.md-sidebar--primary .md-nav__title,
.md-sidebar--secondary .md-nav__title {
  background: color-mix(in srgb, var(--rup-panel) 72%, var(--md-default-bg-color));
  box-shadow: none !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-sidebar--primary .md-nav__title::after,
.md-sidebar--primary .md-nav__title::before {
  box-shadow: none !important;
  display: none;
}

.md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active >
  .md-nav__link.md-nav__container {
  background: color-mix(in srgb, var(--rup-panel) 72%, var(--md-default-bg-color));
  box-shadow: none !important;
}

.md-sidebar--primary .md-nav__link.md-nav__container > a.md-nav__link {
  padding-left: 0.38rem;
}

.md-sidebar--primary .md-nav__link.md-nav__container {
  padding-left: 0;
}

.md-sidebar .md-nav__link {
  align-items: center;
  border-radius: 0.38rem;
  font-weight: 500;
  margin-top: 0.18rem;
  min-height: 1.6rem;
  padding: 0.38rem 0.48rem;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.md-sidebar .md-nav__link:hover,
.md-sidebar .md-nav__link:focus-visible {
  background: rgb(79 143 214 / 10%);
}

.md-sidebar .md-nav__link--active {
  background: rgb(79 143 214 / 10%);
  box-shadow: inset 0.13rem 0 var(--rup-cyan) !important;
  color: var(--md-typeset-a-color);
  font-weight: 500;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--nested > .md-nav__link,
.md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  color: var(--rup-ink);
  font-weight: 750;
  margin-top: 0.75rem;
}

.md-sidebar--primary .md-nav[data-md-level="2"] > .md-nav__list {
  margin-left: 0.55rem;
}

.md-sidebar--primary .md-nav[data-md-level="3"] > .md-nav__list {
  margin-left: 0.85rem;
}

.md-sidebar--primary .md-nav[data-md-level="2"] .md-nav__link {
  padding-left: 0.65rem;
}

.md-sidebar--primary .md-nav[data-md-level="3"] .md-nav__link {
  padding-left: 0.9rem;
}

.md-sidebar--secondary .md-nav__list {
  border-left: 0.05rem solid var(--rup-border);
  margin-left: 0.25rem;
  padding-left: 0.45rem;
}

.md-sidebar--secondary .md-nav__link--active {
  box-shadow: inset 0.14rem 0 var(--rup-violet);
}

.md-sidebar--secondary.rup-sidebar--sparse {
  display: none;
}

.md-content__inner {
  padding-bottom: 4rem;
}

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset h1 {
  color: var(--rup-ink);
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.md-typeset h2 {
  border-top: 0.05rem solid var(--rup-border);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  margin-top: 3.4rem;
  padding-top: 1.25rem;
}

.md-typeset h3 {
  font-weight: 700;
}

.md-typeset a:not(.md-button) {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}

.md-typeset code {
  border-radius: 0.28rem;
}

.md-typeset .highlight {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  overflow: visible;
}

.md-typeset .highlight > .filename {
  background: transparent;
  border-bottom: 0.1rem solid var(--rup-cyan);
  box-shadow: none;
  color: var(--rup-ink);
  display: block;
  font-weight: 750;
  margin-bottom: 0.45rem;
  padding: 0 0.08rem 0.22rem;
  width: fit-content;
}

.md-typeset .highlight pre {
  background: color-mix(in srgb, var(--md-code-bg-color) 94%, var(--rup-panel));
  border: 0.05rem solid color-mix(in srgb, var(--rup-border) 72%, transparent);
  border-radius: 0.65rem;
  box-shadow: 0 0.7rem 1.8rem rgb(18 39 64 / 14%);
  margin: 0;
  overflow: auto;
}

[data-md-color-scheme="slate"] .md-typeset .highlight pre {
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 28%);
}

.md-typeset .md-clipboard {
  color: var(--rup-ink);
  opacity: 0.72;
}

.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus-visible {
  color: var(--md-typeset-a-color);
  opacity: 1;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.55rem;
  box-shadow: 0 0.4rem 1.1rem rgb(18 39 64 / 8%);
}

.md-typeset table:not([class]) {
  border: 0.05rem solid var(--rup-border);
  border-radius: 0.45rem;
}

.md-typeset__table {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
  scrollbar-color: var(--rup-border) transparent;
  vertical-align: top;
  width: auto;
}

.md-typeset__table table:not([class]) {
  max-width: none;
  width: auto;
}

.md-typeset table:not([class]) th {
  background: var(--rup-panel);
}

.md-typeset .go,
.md-typeset .nv {
  color: #686868;
}

[data-md-color-scheme="slate"] .md-typeset .go,
[data-md-color-scheme="slate"] .md-typeset .nv {
  color: #c1d0e4;
}

.md-copyright {
  color: #8b8b8b;
}

[data-md-color-scheme="slate"] .md-copyright {
  color: #b9c8dc;
}

.rup-hero {
  align-items: center;
  background:
    radial-gradient(circle at 88% 12%, rgb(142 197 255 / 20%), transparent 30%),
    radial-gradient(circle at 14% 90%, rgb(53 96 154 / 14%), transparent 34%),
    linear-gradient(135deg, var(--rup-panel), var(--md-default-bg-color));
  border: 0.05rem solid var(--rup-border);
  border-radius: 1.25rem;
  box-shadow: var(--rup-shadow);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  margin: 0.45rem auto 3rem;
  max-width: 78rem;
  overflow: hidden;
  padding: clamp(2rem, 4.5vw, 4rem);
  position: relative;
}

.rup-hero-copy,
.rup-hero-visual {
  position: relative;
  z-index: 1;
}

.rup-eyebrow {
  color: var(--md-typeset-a-color);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.rup-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  margin: 0 0 1.15rem;
  max-width: 14ch;
}

.rup-lead {
  color: var(--md-default-fg-color--light);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  line-height: 1.62;
  max-width: 42rem;
}

.rup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.rup-actions .md-button {
  border-radius: 999px;
  padding-inline: 1.25rem;
}

.rup-actions .md-button:not(.md-button--primary) {
  border-color: var(--rup-cyan);
  color: var(--md-typeset-a-color);
}

.rup-hero-visual {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 20rem;
}

.rup-hero-logo {
  filter: drop-shadow(0 1.8rem 1.4rem rgb(30 58 95 / 30%));
  margin: 0;
  max-height: 30rem;
  width: min(100%, 31rem);
}

.rup-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.rup-pill {
  background: rgb(79 143 214 / 10%);
  border: 0.05rem solid rgb(79 143 214 / 38%);
  border-radius: 999px;
  color: var(--rup-ink);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
}

.rup-section-intro {
  color: var(--md-default-fg-color--light);
  font-size: 1rem;
  max-width: 52rem;
}

.rup-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0 2.5rem;
}

.rup-grid--journey {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rup-grid > *,
.rup-split > * {
  min-width: 0;
}

.rup-card {
  background: var(--rup-panel);
  border: 0.05rem solid var(--rup-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.65rem 1.8rem rgb(18 39 64 / 8%);
  padding: 1.45rem;
}

.rup-card--linked {
  display: flex;
  flex-direction: column;
}

.rup-card h2,
.rup-card h3 {
  border-top: 0;
  margin: 0 0 0.85rem;
  padding-top: 0;
}

.rup-card h2::after,
.rup-card h3::after {
  background: var(--rup-border);
  content: "";
  display: block;
  height: 0.05rem;
  margin-top: 0.72rem;
  width: 100%;
}

.rup-card--linked > p:last-child {
  margin-top: auto;
  padding-top: 0.85rem;
}

.rup-card p:last-child {
  margin-bottom: 0;
}

.rup-step {
  border-top: 0.18rem solid var(--rup-cyan);
}

.rup-step-number {
  color: var(--md-typeset-a-color);
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}

.rup-split {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem 0 2.5rem;
}

.rup-callout {
  background: linear-gradient(135deg, rgb(79 143 214 / 12%), rgb(53 96 154 / 10%));
  border: 0.05rem solid var(--rup-border);
  border-left: 0.25rem solid var(--rup-cyan);
  border-radius: 0.65rem;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
}

.rup-example {
  margin-bottom: 1.5rem;
}

.rup-example > p:last-child {
  display: flex;
  justify-content: flex-end;
  margin: 0.55rem 0 0;
}

.rup-example-download {
  align-items: center;
  background: rgb(79 143 214 / 8%);
  border: 0.05rem solid rgb(79 143 214 / 32%);
  border-radius: 999px;
  color: var(--md-typeset-a-color) !important;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 0.35rem;
  min-height: 1.8rem;
  justify-content: center;
  padding: 0.25rem 0.68rem;
  text-decoration: none !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.rup-example-download:hover,
.rup-example-download:focus-visible {
  background: rgb(79 143 214 / 16%);
  border-color: var(--rup-cyan);
  color: var(--md-accent-fg-color) !important;
}

.rup-example-download svg {
  fill: currentcolor;
  height: 0.9rem;
  width: 0.9rem;
}

.rup-diagram {
  background:
    radial-gradient(circle at 50% 0, rgb(142 197 255 / 7%), transparent 38%),
    #0b1626;
  border: 0.05rem solid #3d5f8c;
  border-radius: 0.75rem;
  box-shadow: var(--rup-shadow);
  margin: 1.5rem 0 0.7rem;
  overflow: auto;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.rup-diagram img {
  display: block;
  margin: 0 auto;
  min-width: 42rem;
}

.rup-diagram + p {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

.rup-diagram + p > a {
  align-items: center;
  background: rgb(53 96 154 / 8%);
  border: 0.05rem solid rgb(53 96 154 / 28%);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  text-decoration: none;
}

.md-footer__inner {
  display: none;
}

@media screen and (max-width: 76.2344em) {
  .md-grid {
    max-width: 100%;
  }
}

@media screen and (min-width: 76.25em) {
  .md-main__inner:has(.rup-hero) .md-sidebar--primary {
    display: none;
  }

  .md-sidebar--primary:has(
      .md-nav--lifted > .md-nav__list > .md-nav__item--active:not(.md-nav__item--nested)
    ),
  .md-sidebar--primary.rup-sidebar--sparse {
    display: none;
  }
}

@media screen and (max-width: 60em) {
  .md-main__inner {
    margin-top: 0.9rem;
  }

  .md-content__inner {
    padding-bottom: 2.75rem;
  }

  .rup-hero {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .rup-hero-copy {
    text-align: center;
  }

  .rup-hero h1,
  .rup-lead {
    margin-inline: auto;
  }

  .rup-actions,
  .rup-pill-row {
    justify-content: center;
  }

  .rup-hero-visual {
    min-height: auto;
  }

  .rup-hero-logo {
    max-width: 23rem;
  }
}

@media screen and (max-width: 44.9844em) {
  .rup-grid,
  .rup-grid--journey,
  .rup-split {
    grid-template-columns: 1fr;
  }

  .rup-hero {
    border-radius: 0.75rem;
    padding: 1.6rem;
  }

  .rup-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .rup-actions .md-button {
    text-align: center;
    width: 100%;
  }

  .rup-diagram img {
    min-width: 32rem;
  }
}

@media screen and (max-width: 22em) {
  .md-typeset h1 {
    font-size: 2rem;
  }

  .rup-hero {
    padding: 1.15rem;
  }

  .rup-hero h1 {
    font-size: 2.05rem;
  }

  .rup-card {
    padding: 1.1rem;
  }

  .rup-diagram {
    padding: 0.75rem;
  }
}

.rup-diagram--light {
  background: #fff;
  border-color: var(--rup-border);
}

.rup-diagram--light img {
  max-width: 100%;
}

.rup-pro-tag {
  background: rgb(79 143 214 / 14%);
  border: 0.05rem solid rgb(79 143 214 / 38%);
  border-radius: 999px;
  color: var(--md-typeset-a-color);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.5rem;
  text-transform: uppercase;
}

.rup-gallery {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin: 1.5rem 0;
}

.rup-gallery figure {
  background: #fff;
  border: 0.05rem solid var(--rup-border);
  border-radius: 0.75rem;
  margin: 0;
  overflow: auto;
  padding: 0.9rem;
}

.rup-gallery img {
  display: block;
  margin: 0 auto;
  max-height: 22rem;
  max-width: 100%;
  width: auto;
}

.rup-gallery figcaption {
  color: #1f2a3a;
  font-size: 0.74rem;
  margin-top: 0.7rem;
  text-align: center;
}

/* Edition marks: Pro is amber on purpose, so it never reads as a link or as the brand blue. */
:root {
  --rup-pro-fg: #8a4b00;
  --rup-pro-bg: #fff3d6;
  --rup-pro-border: #e0a43a;
  --rup-free-fg: #1d5c3a;
  --rup-free-bg: #e2f5ea;
  --rup-free-border: #6dbb8f;
  --md-admonition-icon--pro: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

[data-md-color-scheme="slate"] {
  --rup-pro-fg: #ffd27a;
  --rup-pro-bg: #3b2a08;
  --rup-pro-border: #a8741c;
  --rup-free-fg: #9be3b8;
  --rup-free-bg: #0f3321;
  --rup-free-border: #3c8a60;
}

.rup-pro-tag,
.rup-free-tag {
  border: 0.05rem solid var(--rup-pro-border);
  border-radius: 999px;
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  padding: 0.05rem 0.5rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.rup-pro-tag {
  background: var(--rup-pro-bg);
  color: var(--rup-pro-fg);
}

.rup-free-tag {
  background: var(--rup-free-bg);
  border-color: var(--rup-free-border);
  color: var(--rup-free-fg);
}

.rup-pro-tag--nav {
  font-size: 0.5rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
}

.rup-edition-banner {
  align-items: center;
  background: var(--rup-pro-bg);
  border: 0.05rem solid var(--rup-pro-border);
  border-left-width: 0.3rem;
  border-radius: 0.5rem;
  color: var(--md-default-fg-color);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.9rem;
}

.rup-edition-banner .rup-pro-tag {
  background: var(--rup-pro-fg);
  border-color: var(--rup-pro-fg);
  color: var(--rup-pro-bg);
}

.md-typeset .admonition.pro,
.md-typeset details.pro {
  border-color: var(--rup-pro-border);
}

.md-typeset .pro > .admonition-title,
.md-typeset .pro > summary {
  background-color: var(--rup-pro-bg);
}

.md-typeset .pro > .admonition-title::before,
.md-typeset .pro > summary::before {
  background-color: var(--rup-pro-fg);
  -webkit-mask-image: var(--md-admonition-icon--pro);
  mask-image: var(--md-admonition-icon--pro);
}

.md-typeset table:not([class]) td .rup-pro-tag,
.md-typeset table:not([class]) td .rup-free-tag {
  white-space: nowrap;
}

/* Diagrams follow the page theme: one light and one dark SVG per diagram. */
.rup-diagram {
  background: var(--rup-panel);
  border: 0.05rem solid var(--rup-border);
}

.rup-gallery figure {
  background: var(--rup-panel);
}

.rup-gallery figcaption {
  color: var(--md-default-fg-color--light);
}

.rup-diagram--light {
  background: var(--rup-panel);
  border-color: var(--rup-border);
}

.rup-diagram img {
  height: auto;
  max-width: 100%;
  min-width: 0;
}

@media screen and (max-width: 44.9375em) {
  .rup-diagram img {
    max-width: none;
    min-width: 34rem;
  }
}

.rup-edition-banner {
  align-items: baseline;
  flex-wrap: nowrap;
}