/* USTC guide: reading layout, shared by every documentation page. */
:root,
[data-md-color-scheme="default"] {
  --docs-shell: 1480px;
  --docs-toc: 224px;
  --docs-radius: 12px;
  --docs-shadow: 0 4px 18px rgba(20, 45, 80, .035);
}

:root { --docs-heading-offset: 98px; }

.md-header__inner {
  min-height: 56px;
  padding-inline: 24px;
}

.md-header__button.md-logo { margin-right: 10px; }
.md-header__button.md-logo :is(svg, img) { width: 28px; height: 28px; }
.md-header__title { height: 40px; font-size: 19px; line-height: 40px; letter-spacing: 0; }
.md-header__ellipsis { height: 100%; }
.md-header__topic { display: flex; align-items: center; height: 40px; line-height: 1.35; }
.md-header__topic .md-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-tabs { height: 42px; }
.md-tabs > .md-grid { padding-inline: 24px; }
.md-tabs__link { padding-inline: 16px; font-size: 15px; }
.md-tabs__item--active > .md-tabs__link { border-bottom-color: #fff; background: rgba(255, 255, 255, .08); opacity: 1; }

.md-main__inner { gap: 24px; padding: 24px 24px 48px; }
.md-content { flex: 1 1 0%; min-width: 0; }
.md-content__inner {
  container: guide-article / inline-size;
  min-width: 0;
  padding: 0 32px 40px;
}

/* Keep page titles horizontally and vertically centered within the title band. */
.md-content__inner > h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 104px;
  margin: 0 0 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--docs-border);
  font-size: 34px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.025em;
}

.md-typeset { font-size: 17px; line-height: 1.75; letter-spacing: 0; }
.md-typeset :is(p, li) { font-size: 1em; line-height: 1.75; }
.md-typeset p { margin: .7em 0 1em; }
.md-typeset > :is(p, ul, ol, blockquote) { max-width: 76ch; }
.md-typeset :is(ul, ol) { margin-block: 12px 18px; }
.md-typeset li { margin-block: 4px; }
.md-typeset h2 { margin: 36px 0 14px; padding-bottom: 10px; font-size: 25px; line-height: 1.4; }
.md-typeset h3 { margin: 26px 0 10px; font-size: 20px; line-height: 1.45; }
.md-typeset h4 { margin: 20px 0 8px; font-size: 17px; }
.md-typeset h1 + h2 { margin-top: 0; }
.md-typeset :is(h1, h2, h3, h4) { overflow-wrap: anywhere; }
.md-typeset hr { margin-block: 28px; }
html .md-typeset :target { scroll-margin-top: var(--docs-heading-offset) !important; }

.md-nav { font-size: 14px; }
.md-nav__title { padding: 8px 10px; font-size: 15px; line-height: 1.5; }
.md-nav__link { margin-block: 1px; padding: 7px 10px; border-radius: 6px; line-height: 1.5; }
.md-nav__link .md-ellipsis { white-space: normal; overflow-wrap: anywhere; }

@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    padding: 10px;
    border-radius: 10px;
    background: var(--docs-surface);
    box-shadow: none;
  }
}

/* Compact overview introduction. Narrow articles stack by their own width. */
.md-typeset .platform-hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
  gap: 24px;
  margin: 0 0 28px;
  padding: 28px;
  border-radius: 12px;
}
.platform-hero__eyebrow { min-height: 26px; margin-bottom: 12px; padding: 4px 8px; font-size: 12px; letter-spacing: .02em; }
.md-typeset .platform-hero h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 27px; line-height: 1.4; }
.md-typeset .platform-hero__lead { margin: 0; font-size: 16px; line-height: 1.75; }
.platform-hero__actions { gap: 10px; margin-top: 20px; }
.platform-hero__button { min-height: 40px; padding: 8px 14px; border-radius: 7px; font-size: 14px; }
.platform-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.platform-stat { min-height: 86px; padding: 14px; border-radius: 10px; box-shadow: none; }
.platform-stat:last-child { grid-column: 1 / -1; }
.platform-stat strong { font-size: 23px; line-height: 1.3; }
.platform-stat span { margin-top: 6px; font-size: 13px; line-height: 1.5; }

.md-typeset .key-points { margin: 20px 0; padding: 16px 20px; border-radius: 8px; }
.md-typeset :is(.admonition, details) { margin: 20px 0; padding: 14px 18px; border-left-width: 4px; border-radius: 8px; font-size: 15px; }
.md-typeset :is(.admonition-title, summary) { margin: -14px -18px 12px; padding: 10px 18px 10px 42px; font-size: 15px; }

/* Tables may scroll within the article; long prose wraps without clipping. */
.md-typeset__scrollwrap { width: 100%; margin: 18px 0 24px; overflow-x: auto; border: 1px solid var(--docs-border); border-radius: 8px; }
.md-typeset__table { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; }
.md-typeset table:not([class]) { min-width: 100%; font-size: 15px; line-height: 1.65; }
.md-typeset table:has(> thead > tr > th:nth-child(6)) { min-width: 840px; }
.md-typeset table:not([class]) :is(th, td) { padding: 11px 14px; vertical-align: top; }
.md-typeset table:not([class]) th { background: var(--docs-surface-soft); white-space: nowrap; }
.md-typeset table:not([class]) td { overflow-wrap: break-word; }
.md-typeset table:not([class]) td code { white-space: normal; overflow-wrap: anywhere; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--docs-surface-soft); }
.md-typeset table:not([class]) td:first-child { min-width: 108px; }

.md-typeset .highlight { margin: 18px 0 24px; border-radius: 8px; }
.md-typeset pre { margin: 0; }
.md-typeset pre > code { padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.65; }
.md-typeset :not(pre) > code { white-space: normal; overflow-wrap: anywhere; font-size: .88em; }
.md-typeset .md-code__button { color: var(--docs-text-muted); opacity: .7; }
.md-typeset .md-code__button:is(:hover, :focus-visible) { color: var(--docs-accent); opacity: 1; }

.card-grid,
.name-card-grid,
.md-typeset .grid.cards > ul { gap: 14px; margin: 18px 0 24px; }
.card,
.name-card,
.md-typeset .grid.cards > ul > li { min-width: 0; padding: 18px 20px; border-radius: 10px; box-shadow: none; }
.md-typeset .card h3,
.md-typeset .name-card h4 { margin: 0 0 10px; font-size: 18px; }
.md-typeset :is(.card, .name-card) p:last-child { margin-bottom: 0; }

.md-typeset .flow { margin: 18px 0 24px; padding: 18px 20px; border-radius: 10px; font-size: 15px; line-height: 1.75; }
.md-typeset .flow p { margin: 0; font: inherit; line-height: inherit; }
.flow-steps { gap: 8px; margin: 18px 0 24px; padding: 16px; border-radius: 10px; }
.flow-step { min-width: 0; padding: 12px 10px; border-radius: 7px; }
.flow-step span { font-size: 11px; }
.flow-step strong { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.flow-step small { font-size: 12px; line-height: 1.5; }
.flow-arrow { font-size: 18px; }

.md-footer__inner { padding-inline: 24px; }
.md-footer__link { margin-block: 12px; }
.md-footer__title { font-size: 16px; }
.md-footer__direction { font-size: 12px; }
.md-footer-meta__inner { padding-inline: 24px; }

/* Match Material's navigation breakpoints and leave the drawer usable. */
@media screen and (min-width: 60em) {
  .md-search { width: min(300px, 24vw); }
  .md-search__form, .md-search__input { height: 36px; }
  .md-search__input { font-size: 14px; }
  .md-search__icon { top: 6px; }
}

@media screen and (max-width: 76.234375em) {
  :root, [data-md-color-scheme="default"] { --docs-heading-offset: 56px; }
  .md-header__inner { min-height: 56px; padding-inline: 12px; }
  .md-header__title { font-size: 17px; }
  .md-main__inner { gap: 20px; padding: 20px 20px 36px; }
  .md-content__inner { padding: 0 28px 32px; }
  .md-sidebar--primary .md-nav__link { min-height: 40px; font-size: 15px; }
  .md-sidebar--primary .md-nav__title { font-size: 16px; }
  .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container guide-article (max-width: 820px) {
  .md-typeset .platform-hero { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .platform-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-stat:last-child { grid-column: auto; }
  .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-arrow { display: none; }
}

@container guide-article (max-width: 540px) {
  .md-typeset .platform-hero { padding: 20px; }
  .md-typeset .platform-hero h2 { font-size: 24px; }
  .platform-hero__stats { grid-template-columns: 1fr; }
  .platform-stat { min-height: 0; }
  .platform-stat:last-child { grid-column: auto; }
  .card-grid, .name-card-grid, .md-typeset .grid.cards > ul, .flow-steps { grid-template-columns: 1fr; }
}

@media screen and (max-width: 44.984375em) {
  :root, [data-md-color-scheme="default"] { --docs-heading-offset: 56px; }
  .md-header__title { font-size: 15px; }
  .md-main__inner { padding: 0; }
  .md-content__inner { padding: 0 20px 32px; }
  .md-content__inner > h1 { min-height: 88px; margin-bottom: 20px; padding-block: 20px; font-size: 28px; }
  .md-typeset { font-size: 16px; }
  .md-typeset h2 { margin-top: 30px; font-size: 23px; }
  .md-typeset h3 { margin-top: 24px; font-size: 20px; }
  .md-typeset .platform-hero { margin-inline: 0; border-radius: 10px; }
  .platform-hero__actions { flex-direction: column; }
  .platform-hero__button { width: 100%; min-height: 42px; }
  .md-typeset table:not([class]) { font-size: 14px; }
  .md-typeset table:not([class]) :is(th, td) { padding: 10px 12px; }
  .md-typeset pre > code { padding: 14px; font-size: 13px; }
  .md-footer__inner, .md-footer-meta__inner { padding-inline: 12px; }
}

:is(.md-typeset__scrollwrap, .md-typeset pre > code, .md-sidebar__scrollwrap) {
  scrollbar-width: thin;
  scrollbar-color: #aab5c4 transparent;
}

@supports selector(::-webkit-scrollbar) {
  :is(.md-typeset__scrollwrap, .md-typeset pre > code, .md-sidebar__scrollwrap) { scrollbar-width: auto; scrollbar-color: auto; }
  .md-typeset pre > code:hover, .md-sidebar__scrollwrap:hover, .md-sidebar__scrollwrap:focus-within { scrollbar-color: auto; }
  :is(.md-typeset__scrollwrap, .md-typeset pre > code, .md-sidebar__scrollwrap)::-webkit-scrollbar { width: 6px; height: 6px; }
  :is(.md-typeset__scrollwrap, .md-typeset pre > code, .md-sidebar__scrollwrap)::-webkit-scrollbar-thumb { background: #aab5c4; border-radius: 6px; }
  :is(.md-typeset__scrollwrap, .md-typeset pre > code, .md-sidebar__scrollwrap)::-webkit-scrollbar-track { background: transparent; }
}

@media print {
  .md-content__inner { padding: 0; container-type: normal; }
  .md-content__inner > h1 { min-height: 0; padding: 0 0 16px; }
  .md-typeset { font-size: 11pt; }
  .md-typeset :is(h2, h3, h4) { break-after: avoid; }
  .md-typeset pre > code { white-space: pre-wrap; font-size: 9pt; }
}
