@layer reset, vendor, tokens, base, layout;

@layer elements {
  .site-logo {
    --logo-height: 2.5rem;
    color: var(--text);
    align-items: center;
    text-decoration: none;
    display: inline-flex;
  }

  .site-logo.-size-s {
    --logo-height: 1.75rem;
  }

  .site-logo.-size-l {
    --logo-height: 3.5rem;
  }

  .site-logo__img :is(img, svg) {
    block-size: auto;
    max-block-size: var(--logo-height);
    inline-size: auto;
    display: block;
  }

  .site-logo__text {
    font-size: var(--step-1);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }

  .site-logo__img--dark, :root[data-scheme="dark"] .site-logo.-has-dark .site-logo__img--light {
    display: none;
  }

  :root[data-scheme="dark"] .site-logo.-has-dark .site-logo__img--dark {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-scheme="auto"] .site-logo.-has-dark .site-logo__img--light {
      display: none;
    }

    :root[data-scheme="auto"] .site-logo.-has-dark .site-logo__img--dark {
      display: block;
    }
  }

  :is(.-inverted, .-bg-inverted) .site-logo.-has-dark .site-logo__img--light {
    display: none;
  }

  :is(.-inverted, .-bg-inverted) .site-logo.-has-dark .site-logo__img--dark {
    display: block;
  }
}

@layer utilities;

.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
  }

  body {
    min-block-size: 100svb;
  }

  img, picture, video, canvas, svg, iframe {
    max-inline-size: 100%;
    display: block;
  }

  img, video {
    block-size: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  textarea:not([rows]) {
    min-block-size: 8em;
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
  }

  :target {
    scroll-margin-block-start: calc(var(--header-offset, 5rem) + var(--space-s, 1rem));
  }

  @media (prefers-reduced-motion: reduce) {
    *, :before, :after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer vendor;

@layer tokens {
  :root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --color-brand-100: #e6edfc;
    --color-brand-200: #c3d3f7;
    --color-brand-300: #8fadef;
    --color-brand-500: #2f5fd8;
    --color-brand-600: #2249ab;
    --color-brand-900: #16244f;
    --color-neutral-0: #fff;
    --color-neutral-50: #f6f7f9;
    --color-neutral-100: #eceef1;
    --color-neutral-200: #dfe3e8;
    --color-neutral-400: #9aa3ae;
    --color-neutral-500: #6b7480;
    --color-neutral-700: #3b434d;
    --color-neutral-800: #232a33;
    --color-neutral-900: #12161c;
    --color-neutral-950: #0c0f13;
    --surface: var(--lightningcss-light, var(--color-neutral-0)) var(--lightningcss-dark, var(--color-neutral-900));
    --surface-muted: var(--lightningcss-light, var(--color-neutral-50)) var(--lightningcss-dark, var(--color-neutral-800));
    --surface-sunken: var(--lightningcss-light, var(--color-neutral-100)) var(--lightningcss-dark, var(--color-neutral-950));
    --surface-inverted: var(--lightningcss-light, var(--color-neutral-900)) var(--lightningcss-dark, var(--color-neutral-0));
    --text: var(--lightningcss-light, var(--color-neutral-800)) var(--lightningcss-dark, var(--color-neutral-50));
    --text-muted: var(--lightningcss-light, var(--color-neutral-500)) var(--lightningcss-dark, var(--color-neutral-200));
    --text-subtle: var(--color-neutral-400);
    --text-on-inverted: var(--lightningcss-light, var(--color-neutral-0)) var(--lightningcss-dark, var(--color-neutral-900));
    --accent: var(--lightningcss-light, var(--color-brand-500)) var(--lightningcss-dark, var(--color-brand-300));
    --accent-hover: var(--lightningcss-light, var(--color-brand-600)) var(--lightningcss-dark, var(--color-brand-200));
    --accent-surface: var(--lightningcss-light, var(--color-brand-100)) var(--lightningcss-dark, var(--color-brand-900));
    --accent-contrast: var(--lightningcss-light, var(--color-neutral-0)) var(--lightningcss-dark, var(--color-neutral-900));
    --border: var(--lightningcss-light, var(--color-neutral-200)) var(--lightningcss-dark, var(--color-neutral-700));
    --border-strong: var(--lightningcss-light, var(--color-neutral-400)) var(--lightningcss-dark, var(--color-neutral-500));
    --focus-ring: var(--color-brand-500);
    --status-success: var(--lightningcss-light, #1c7d44) var(--lightningcss-dark, #4ac47c);
    --status-warning: var(--lightningcss-light, #b5720a) var(--lightningcss-dark, #e0a33c);
    --status-danger: var(--lightningcss-light, #c02525) var(--lightningcss-dark, #f0736f);
    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-head: var(--font-body);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;
    --step--2: clamp(.694rem, .67rem + .12vw, .75rem);
    --step--1: clamp(.833rem, .8rem + .17vw, .938rem);
    --step-0: clamp(1rem,     .95rem + .25vw, 1.125rem);
    --step-1: clamp(1.2rem,   1.11rem + .45vw, 1.5rem);
    --step-2: clamp(1.44rem,  1.28rem + .8vw, 2rem);
    --step-3: clamp(1.728rem, 1.46rem + 1.34vw, 2.667rem);
    --step-4: clamp(2.074rem, 1.65rem + 2.12vw, 3.556rem);
    --step-display: clamp(3rem, 1.5rem + 7vw, 9rem);
    --leading-tight: 1.2;
    --leading-body: 1.6;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --space-3xs: .25rem;
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem);
    --width-prose: 68ch;
    --width-content: 75rem;
    --width-wide: 90rem;
    --width-sidebar: 18rem;
    --gutter: clamp(1rem, 4vw, 3rem);
    --header-offset: 5rem;
    --radius: .375rem;
    --radius-lg: .75rem;
    --radius-pill: 100vmax;
    --shadow-sm: 0 1px 2px #0000000f;
    --shadow: 0 1px 2px #0000000f, 0 4px 12px #0000000f;
    --shadow-lg: 0 2px 4px #0000000f, 0 12px 32px #0000001a;
    --transition: .18s ease;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-skiplink: 400;
  }

  :root[data-scheme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  :root[data-scheme="auto"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-scheme="auto"] {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--text);
    background-color: var(--surface);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-4);
  }

  h2 {
    font-size: var(--step-3);
  }

  h3 {
    font-size: var(--step-2);
  }

  h4 {
    font-size: var(--step-1);
  }

  h5, h6 {
    font-size: var(--step-0);
  }

  p {
    text-wrap: pretty;
  }

  p, li, dd, dt, figcaption, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  .rte > * + * {
    margin-block-start: var(--space-s);
  }

  .rte > * + :is(h2, h3, h4) {
    margin-block-start: var(--space-l);
  }

  .rte :is(p, ul, ol, dl, blockquote) {
    max-inline-size: var(--width-prose);
  }

  a {
    color: var(--accent);
    text-underline-offset: .15em;
    transition: color var(--transition);
    text-decoration-thickness: 1px;
  }

  a:hover {
    color: var(--accent-hover);
  }

  strong, b {
    font-weight: var(--weight-semibold);
  }

  small {
    font-size: var(--step--1);
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  :is(ul, ol):not([class]) {
    padding-inline-start: var(--space-m);
  }

  .rte :is(ul, ol) li + li {
    margin-block-start: var(--space-3xs);
  }

  dl {
    margin: 0;
  }

  dt {
    font-weight: var(--weight-semibold);
  }

  dt:not(:first-child) {
    margin-block-start: var(--space-s);
  }

  dd {
    color: var(--text-muted);
    margin-inline-start: var(--space-m);
  }

  blockquote {
    border-inline-start: 3px solid var(--accent);
    font-size: var(--step-1);
    padding-inline-start: var(--space-m);
  }

  figcaption {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-block-start: var(--space-2xs);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--border);
    margin-block: var(--space-l);
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
  }

  caption {
    font-size: var(--step--1);
    color: var(--text-muted);
    text-align: start;
    margin-block-end: var(--space-2xs);
  }

  :is(th, td) {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: 1px solid var(--border);
    text-align: start;
  }

  th {
    font-weight: var(--weight-semibold);
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: .9em;
  }

  :not(pre) > code {
    background: var(--surface-sunken);
    border-radius: var(--radius);
    padding: .15em .35em;
  }

  pre {
    padding: var(--space-s);
    background: var(--surface-sunken);
    border-radius: var(--radius);
    overflow-x: auto;
  }
}

@layer layout {
  .skip-link {
    z-index: var(--z-skiplink);
    padding: var(--space-2xs) var(--space-s);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    text-decoration: none;
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  .page {
    flex-direction: column;
    min-block-size: 100svb;
    display: flex;
  }

  .page-header {
    container: page-header / inline-size;
  }

  .grid-container {
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr)
		[content-start] min(var(--width-content),
			calc(100% - (var(--gutter) * 2))) [content-end]
		minmax(var(--gutter), 1fr) [full-end];
    display: grid;
  }

  .grid-container > * {
    grid-column: content;
  }

  .grid-container > .-full {
    grid-column: full;
  }

  .page-body {
    padding-block: var(--space-2xl);
    flex: 1;
    container: page-body / inline-size;
  }

  .page-body:has(.with-sidebar--none > .main-content > .mod_article:first-child > .mts-section:first-child) {
    padding-block-start: 0;
  }

  .page-body:has(.with-sidebar--none > .main-content > .mod_article:last-child > .mts-section:last-child) {
    padding-block-end: 0;
  }

  .with-sidebar {
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  @container page-body (inline-size >= 68rem) {
    .with-sidebar--left {
      grid-template-columns: var(--width-sidebar) minmax(0, 1fr);
    }

    .with-sidebar--left .sidebar--left {
      order: -1;
    }

    .with-sidebar--right {
      grid-template-columns: minmax(0, 1fr) var(--width-sidebar);
    }
  }

  @container page-body (inline-size >= 88rem) {
    .with-sidebar--both {
      grid-template-columns: var(--width-sidebar)
			minmax(0, 1fr)
			var(--width-sidebar);
    }

    .with-sidebar--both .sidebar--left {
      order: -1;
    }
  }

  .auto-grid {
    --min: 18rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
    gap: var(--space-m);
    display: grid;
  }

  .table-scroll, .content-table {
    overscroll-behavior-x: contain;
    overflow-x: auto;
  }

  .table-scroll > table, .content-table > table {
    inline-size: auto;
    min-inline-size: 100%;
  }

  .cluster {
    gap: var(--space-2xs) var(--space-s);
    flex-wrap: wrap;
    align-items: center;
    display: flex;
  }

  .page-body:has(.with-sidebar--none) {
    grid-template-columns: [full-start content-start] minmax(0, 1fr)[content-end full-end];
  }

  .with-sidebar--none .mod_article, #stage .mod_article, #intro .mod_article {
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr)
		[content-start] min(var(--width-content),
			calc(100% - (var(--gutter) * 2))) [content-end]
		minmax(var(--gutter), 1fr) [full-end];
    display: grid;
  }

  .with-sidebar--none .mod_article > *, #stage .mod_article > *, #intro .mod_article > * {
    grid-column: content;
  }

  .with-sidebar--none .mod_article > :is(.-bleed-bg, .-bleed-wide, .-bleed-all) {
    grid-column: full;
  }

  #stage .mod_article > :is(.-bleed-bg, .-bleed-wide, .-bleed-all) {
    grid-column: full;
  }

  #intro .mod_article > :is(.-bleed-bg, .-bleed-wide, .-bleed-all) {
    grid-column: full;
  }

  .with-sidebar--none .-bleed-wide > .mts-section__inner, #stage .-bleed-wide > .mts-section__inner, #intro .-bleed-wide > .mts-section__inner {
    inline-size: min(var(--width-wide),
		calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
  }

  .with-sidebar--none .-bleed-bg > .mts-section__inner, #stage .-bleed-bg > .mts-section__inner, #intro .-bleed-bg > .mts-section__inner {
    inline-size: min(var(--width-content),
		calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
  }

  .with-sidebar--none .-bleed-all > .mts-section__inner, #stage .-bleed-all > .mts-section__inner, #intro .-bleed-all > .mts-section__inner {
    inline-size: 100%;
  }

  :is(.mod_article, .mod_article__inner) > * + * {
    margin-block-start: var(--flow-space, var(--space-l));
  }

  [class*="content-"] > * + * {
    margin-block-start: var(--space-s);
  }

  .mod_article > .mts-section + *, .mod_article > * + .mts-section {
    margin-block-start: 0;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .section + .section {
    padding-block-start: 0;
  }
}

@layer elements {
  .button, .mts-button {
    --button-bg: var(--accent);
    --button-bg-hover: var(--accent-hover);
    --button-fg: var(--accent-contrast);
    --button-border: transparent;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-m);
    background: var(--button-bg);
    min-block-size: 2.75rem;
    color: var(--button-fg);
    border: 1px solid var(--button-border);
    border-radius: var(--radius);
    font: inherit;
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
    display: inline-flex;
  }

  .button:hover, .mts-button:hover {
    --button-bg: var(--button-bg-hover);
    color: var(--button-fg);
  }

  .mts-button.-secondary {
    --button-bg: transparent;
    --button-bg-hover: var(--accent-surface);
    --button-fg: var(--accent);
    --button-border: currentColor;
  }

  .mts-button.-ghost {
    --button-bg: transparent;
    --button-bg-hover: var(--surface-muted);
    --button-fg: var(--accent);
    padding-inline: var(--space-2xs);
  }

  .mts-button.-size-s {
    padding: var(--space-3xs) var(--space-s);
    min-block-size: 2.25rem;
    font-size: var(--step--1);
  }

  .mts-button.-size-l {
    padding: var(--space-xs) var(--space-l);
    min-block-size: 3.25rem;
    font-size: var(--step-1);
  }

  .button:disabled, .mts-button[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
  }

  .-inverted .mts-button.-secondary, .-bg-inverted .mts-button.-secondary {
    --button-fg: var(--text);
    --button-bg-hover: color-mix(in oklab, var(--text) 15%, transparent);
  }

  .page-footer > .site-footer {
    grid-column: full;
  }

  .site-footer {
    --footer-bg: var(--surface-muted);
    background: var(--footer-bg);
    padding-block: var(--space-2xl);
    padding-inline: var(--gutter);
  }

  .site-footer__inner {
    max-inline-size: var(--width-content);
    gap: var(--space-xl);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-inline: auto;
    display: flex;
  }

  .site-footer.-bg-none {
    --footer-bg: transparent;
  }

  .site-footer.-bg-sunken {
    --footer-bg: var(--surface-sunken);
  }

  .site-footer.-bg-accent {
    --footer-bg: var(--accent-surface);
  }

  .site-footer.-bg-inverted {
    --footer-bg: var(--surface-inverted);
  }

  .site-footer .main-nav__list.level_1 {
    gap: var(--space-xl);
    flex-wrap: wrap;
    align-items: flex-start;
    display: flex;
  }

  .site-footer .main-nav__toggle {
    display: none;
  }

  .site-footer .main-nav__sub, .site-footer .main-nav__sub[hidden] {
    min-inline-size: 0;
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    margin-block-start: var(--space-2xs);
    padding: 0;
    display: block;
    position: static;
  }

  .site-footer .level_1 > .main-nav__item > .main-nav__link {
    font-weight: var(--weight-semibold);
    text-transform: var(--footer-nav-transform, uppercase);
    letter-spacing: var(--footer-nav-tracking, .04em);
  }

  .site-footer .main-nav__sub .main-nav__link {
    font-weight: var(--weight-normal);
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
  }

  .site-footer .main-nav__sub .main-nav__link:hover {
    color: var(--accent);
  }

  .site-footer .main-nav__item--has-sub {
    display: block;
  }

  .site-footer .main-nav__sub .main-nav__sub {
    border-inline-start: 1px solid var(--border);
    padding-inline-start: var(--space-s);
  }

  @media (prefers-reduced-motion: no-preference) {
    .js-anim [data-animate] {
      --anim-distance: 2.5rem;
      --anim-duration: .7s;
      transition: opacity var(--anim-duration) ease,
			translate var(--anim-duration) cubic-bezier(.2, .7, .3, 1);
    }

    .js-anim [data-animate]:not(.is-visible) {
      opacity: var(--anim-start-opacity, 1);
      translate: var(--anim-start-translate, none);
    }

    .js-anim [data-animate].is-visible {
      opacity: 1;
      translate: none;
    }

    .js-anim [data-animate].-anim-fade {
      --anim-start-opacity: 0;
    }

    .js-anim [data-animate].-anim-move {
      --anim-start-translate: 0 var(--anim-distance);
    }

    .js-anim [data-animate].-anim-move.-from-left {
      --anim-start-translate: calc(var(--anim-distance) * -1) 0;
    }

    .js-anim [data-animate].-anim-move.-from-right {
      --anim-start-translate: var(--anim-distance) 0;
    }

    .js-anim [data-animate].-anim-move.-from-top {
      --anim-start-translate: 0 calc(var(--anim-distance) * -1);
    }

    .js-anim [data-animate].-anim-move.-from-bottom {
      --anim-start-translate: 0 var(--anim-distance);
    }

    .-scroll-parallax {
      translate: 0 var(--parallax-y, 0px);
      opacity: var(--parallax-o, 1);
      will-change: translate, opacity;
    }
  }

  .mod_article:has( > .-scroll-parallax) {
    overflow: clip;
  }

  .mod_booknav {
    border-block-start: 1px solid var(--border);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-s);
  }

  .mod_booknav ul {
    gap: var(--space-s) var(--space-m);
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .mod_booknav li {
    margin: 0;
  }

  .mod_booknav .up {
    color: var(--text-muted);
  }

  .mod_booknav .next {
    margin-inline-start: auto;
  }
}

@layer utilities {
  .sr-only:not(:focus):not(:active), .invisible:not(:focus):not(:active) {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .-inverted, .-bg-inverted {
    --text: var(--text-on-inverted);
    --text-muted: var(--text-on-inverted);
    --border: color-mix(in oklab, var(--text-on-inverted) 25%, transparent);
    --accent: var(--text-on-inverted);
    --accent-hover: var(--text-on-inverted);
    color: var(--text);
  }

  .is-hidden {
    display: none;
  }

  :where(.mod_article > .mts-rule + *) {
    --flow-space: var(--space-m);
  }

  .-flow-none {
    --flow-space: 0;
  }

  .-flow-s {
    --flow-space: var(--space-s);
  }

  .-flow-m {
    --flow-space: var(--space-m);
  }

  .-flow-l {
    --flow-space: var(--space-l);
  }

  .-flow-xl {
    --flow-space: var(--space-xl);
  }

  .-flow-2xl {
    --flow-space: var(--space-2xl);
  }

  .-full {
    grid-column: full;
  }
}

@layer reset, vendor, tokens, base, layout;

@layer elements {
  .page-header > .site-header {
    grid-column: full;
  }

  .page-header {
    z-index: var(--z-sticky);
    background: var(--surface);
    position: sticky;
    inset-block-start: 0;
  }

  .site-header {
    padding-inline: var(--gutter);
    --nav-mode: mobile;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--border);
  }

  .site-header__bar {
    gap: var(--space-s);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .site-header__panel {
    padding-block-start: var(--space-s);
  }

  @container page-header (inline-size < 64rem) {
    .site-header__panel {
      z-index: var(--z-overlay);
      padding: calc(var(--header-offset) + var(--space-m)) var(--gutter) var(--space-2xl);
      background: color-mix(in oklab, var(--surface) 92%, transparent);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      overscroll-behavior: contain;
      opacity: 1;
      transition: opacity .24s ease,
				translate .24s ease,
				display .24s allow-discrete;
      position: fixed;
      inset: 0;
      overflow-y: auto;
      translate: 0;
    }

    .site-header__panel[hidden] {
      opacity: 0;
      display: none;
      translate: 0 -.75rem;
    }

    @starting-style {
      .site-header__panel:not([hidden]) {
        opacity: 0;
        translate: 0 -.75rem;
      }
    }

    .site-header__panel:not([hidden]) .level_1 > .main-nav__item {
      animation: .32s both mts-nav-item;
      animation-delay: calc(var(--i, 0) * 45ms);
    }

    .level_1 > .main-nav__item:first-child {
      --i: 1;
    }

    .level_1 > .main-nav__item:nth-child(2) {
      --i: 2;
    }

    .level_1 > .main-nav__item:nth-child(3) {
      --i: 3;
    }

    .level_1 > .main-nav__item:nth-child(4) {
      --i: 4;
    }

    .level_1 > .main-nav__item:nth-child(5) {
      --i: 5;
    }

    .level_1 > .main-nav__item:nth-child(6) {
      --i: 6;
    }

    .level_1 > .main-nav__item:nth-child(n+7) {
      --i: 7;
    }

    @keyframes mts-nav-item {
      from {
        opacity: 0;
        translate: 0 .75rem;
      }
    }

    .site-header__panel .level_1 > .main-nav__item > .main-nav__link {
      font-size: var(--step-1);
      padding-block: var(--space-xs);
    }

    .site-header__panel .main-nav__item {
      border-block-end: 1px solid var(--border);
    }

    .site-header__panel .main-nav__sub .main-nav__item:last-child {
      border-block-end: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header__panel:not([hidden]) .level_1 > .main-nav__item {
        animation: none;
      }

      .site-header__panel, .site-header__panel[hidden] {
        translate: none;
      }
    }

    .site-header.-nav-flat .main-nav__toggle {
      display: none;
    }

    .site-header.-nav-flat .main-nav__sub, .site-header.-nav-flat .main-nav__sub[hidden], .site-header.-nav-flat .main-nav__item--has-sub {
      display: block;
    }
  }

  :root[data-nav-open] {
    overflow: hidden;
  }

  .site-header__burger {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: inherit;
    cursor: pointer;
    z-index: calc(var(--z-overlay) + 1);
    background: none;
    border: 0;
    place-items: center;
    padding: 0;
    display: grid;
    position: relative;
  }

  .site-header__burger-icon {
    gap: 5px;
    inline-size: 1.5rem;
    display: grid;
  }

  .site-header__burger-icon > span {
    block-size: 2px;
    transition: transform var(--transition), opacity var(--transition);
    background: currentColor;
    border-radius: 1px;
  }

  [aria-expanded="true"] > .site-header__burger-icon > :first-child {
    transform: translateY(7px) rotate(45deg);
  }

  [aria-expanded="true"] > .site-header__burger-icon > :nth-child(2) {
    opacity: 0;
  }

  [aria-expanded="true"] > .site-header__burger-icon > :last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-nav__link {
    padding: var(--space-2xs) 0;
    color: var(--text);
    font-weight: var(--weight-medium);
    font-size: var(--nav-font-size, var(--step-0));
    text-transform: var(--nav-transform, uppercase);
    letter-spacing: var(--nav-tracking, .04em);
    text-decoration: none;
    display: block;
  }

  .main-nav__link:hover, .main-nav__link--active {
    color: var(--accent);
  }

  .main-nav__item--has-sub {
    grid-template-columns: 1fr auto;
    display: grid;
  }

  .main-nav__toggle {
    inline-size: 2.5rem;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    place-items: center;
    padding: 0;
    display: grid;
  }

  .main-nav__chevron {
    inline-size: .75rem;
    transition: transform var(--transition);
  }

  [aria-expanded="true"] > .main-nav__chevron {
    transform: rotate(180deg);
  }

  .main-nav__sub {
    border-inline-start: 1px solid var(--border);
    grid-column: 1 / -1;
    padding-inline-start: var(--space-m);
  }

  .main-nav__sub[hidden] {
    display: none;
  }

  @container page-header (inline-size < 64rem) {
    .main-nav__item.hide-mobile {
      display: none;
    }
  }

  @container page-header (inline-size >= 64rem) {
    .site-header {
      --nav-mode: desktop;
    }

    .site-header__bar {
      flex: none;
    }

    .site-header {
      gap: var(--space-m);
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      display: flex;
    }

    .site-header__burger {
      display: none;
    }

    .site-header__panel, .site-header__panel[hidden] {
      gap: var(--space-m);
      flex-wrap: wrap;
      align-items: center;
      padding-block-start: 0;
      display: flex;
    }

    .main-nav__list.level_1 {
      gap: var(--nav-gap, var(--space-xl));
      flex-wrap: wrap;
      align-items: center;
      display: flex;
    }

    .main-nav__list.level_1:has( > :nth-child(6)) {
      --nav-gap: var(--space-l);
    }

    .main-nav__list.level_1:has( > :nth-child(8)) {
      --nav-gap: var(--space-m);
    }

    .main-nav__list.level_1:has( > :nth-child(11)) {
      --nav-gap: var(--space-s);
    }

    .main-nav__sub .main-nav__link {
      text-transform: none;
      letter-spacing: normal;
      font-size: var(--step--1);
    }

    .main-nav__item {
      position: relative;
    }

    .main-nav__item--has-sub {
      align-items: center;
      gap: var(--space-3xs);
      display: flex;
    }

    .main-nav__sub {
      z-index: var(--z-dropdown);
      min-inline-size: 14rem;
      padding: var(--space-2xs);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
    }

    .main-nav__sub .main-nav__link {
      padding: var(--space-3xs) var(--space-2xs);
      border-radius: var(--radius);
    }

    .main-nav__sub .main-nav__link:hover {
      background: var(--surface-muted);
    }

    .main-nav__list.level_1 > .main-nav__item:last-child > .main-nav__sub {
      inset-inline: auto 0;
    }

    .main-nav__sub {
      max-inline-size: calc(100vw - (var(--gutter) * 2));
    }

    .main-nav__sub .main-nav__sub, .main-nav__sub .main-nav__sub[hidden] {
      min-inline-size: 0;
      max-inline-size: none;
      border: 0;
      border-inline-start: 1px solid var(--border);
      box-shadow: none;
      background: none;
      border-radius: 0;
      padding: 0;
      padding-inline-start: var(--space-s);
      display: block;
      position: static;
    }

    .main-nav__sub .main-nav__toggle {
      display: none;
    }

    .main-nav__sub .main-nav__item--has-sub {
      display: block;
    }

    .main-nav__item.hide-desktop {
      display: none;
    }

    @media (hover: hover) and (pointer: fine) {
      .site-header {
        --nav-hover: on;
      }

      .main-nav__toggle {
        display: none;
      }

      .main-nav__item--has-sub {
        gap: 0;
      }

      .main-nav__item--has-sub:is(:hover, :focus-within):not([data-nav-suppress]) > .main-nav__sub {
        display: block;
      }

      .main-nav__item--has-sub:is(:hover, :focus-within):not([data-nav-suppress]) > .main-nav__sub[hidden] {
        display: block;
      }

      .main-nav__item--has-sub > .main-nav__sub:before {
        content: "";
        block-size: .5rem;
        position: absolute;
        inset-block-start: -.5rem;
        inset-inline: 0;
      }
    }
  }
}

@layer utilities;