/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram + Long Document
 * theme: studied-DNA (source: user-owned image) · design-system: design.md · designed-as-app
 * nav: N9 · footer: Ft2 · pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap");

html,
body {
  overflow-x: clip;
}

body {
  --md-default-fg-color: var(--color-ink);
  --md-default-fg-color--light: var(--color-ink-2);
  --md-default-fg-color--lighter: var(--color-muted);
  --md-default-fg-color--lightest: var(--color-rule);
  --md-default-bg-color: var(--color-paper);
  --md-default-bg-color--light: var(--color-paper-2);
  --md-default-bg-color--lighter: var(--color-paper-3);
  --md-primary-fg-color: var(--color-paper-2);
  --md-primary-fg-color--light: var(--color-paper-3);
  --md-primary-fg-color--dark: var(--color-paper);
  --md-primary-bg-color: var(--color-ink);
  --md-accent-fg-color: var(--color-accent);
  --md-accent-fg-color--transparent: var(--color-paper-3);
  --md-code-fg-color: var(--color-ink);
  --md-code-bg-color: var(--color-paper-2);
  --md-typeset-a-color: var(--color-accent);
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

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

:where(a, button, input, label):focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.md-header {
  color: var(--color-ink);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  box-shadow: none;
}

.md-header__inner {
  min-height: 3.5rem;
  padding-inline: var(--page-gutter);
}

.md-header__button,
.md-header__title,
.md-search__input {
  color: var(--color-ink);
}

.md-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.md-header__button.md-logo svg {
  fill: var(--color-accent);
}

.md-search__form {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
}

.md-search__form:hover,
.md-search__form:focus-within {
  background: var(--color-paper-3);
}

.md-main__inner {
  margin-top: 0;
}

.md-sidebar {
  color: var(--color-ink-2);
  background: var(--color-paper);
}

.md-nav__title,
.md-nav__item--active > .md-nav__link {
  color: var(--color-ink);
}

.md-nav__link {
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out);
}

.md-nav__link:hover,
.md-nav__link:focus-visible,
.md-nav__link--active {
  color: var(--color-accent);
}

.md-content {
  min-width: 0;
}

.md-content__inner {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.md-typeset {
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.md-typeset h1 {
  max-width: 18ch;
  margin-bottom: var(--space-xl);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: 1.08;
}

.md-typeset h2 {
  margin-top: var(--space-2xl);
  font-size: var(--text-xl);
  line-height: 1.15;
}

.md-typeset h3 {
  margin-top: var(--space-xl);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: var(--content-measure);
}

.md-typeset a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: var(--space-2xs);
}

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

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.md-typeset pre {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.md-typeset table:not([class]) {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  color: var(--color-ink);
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.md-typeset table:not([class]) td {
  border-top-color: var(--color-rule-2);
}

.md-typeset .admonition,
.md-typeset details {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--color-paper-3);
}

.md-footer {
  color: var(--color-muted);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.md-footer-meta {
  background: transparent;
}

.md-footer__inner,
.md-footer-meta__inner {
  padding-inline: var(--page-gutter);
}

.md-footer a {
  white-space: nowrap;
}

.bse-home {
  margin-top: calc(var(--space-xl) * -1);
  background-image:
    linear-gradient(to right, var(--color-grid) var(--rule-hair), var(--color-transparent) var(--rule-hair)),
    linear-gradient(to bottom, var(--color-grid) var(--rule-hair), var(--color-transparent) var(--rule-hair));
  background-position: center top;
  background-size: var(--space-xl) var(--space-xl);
}

.bse-home h1,
.bse-home h2,
.bse-home p {
  max-width: none;
}

.bse-hero {
  position: relative;
  padding: var(--space-2xl) 0 var(--space-3xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.bse-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(28%, 14rem);
  height: var(--rule-fine);
  background: var(--color-accent);
  content: "";
}

.bse-status,
.bse-system header > p {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xl);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bse-status span {
  width: var(--space-xs);
  height: var(--space-xs);
  background: var(--color-accent);
}

.md-typeset .bse-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: var(--text-display);
  line-height: 0.98;
}

.bse-lede {
  max-width: 48ch !important;
  margin: var(--space-xl) 0 0 auto;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.5;
}

.bse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.md-typeset .bse-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 12rem;
  min-height: 3rem;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.md-typeset .bse-action--primary {
  color: var(--color-ink);
  background: var(--color-paper-2);
  border-color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .md-typeset .bse-action:hover,
  .md-typeset .map-node:hover,
  .md-typeset .route-list a:hover {
    color: var(--color-accent);
    background: var(--color-paper-3);
    transform: translateY(-1px);
  }

}

.md-typeset .bse-action:active,
.md-typeset .map-node:active,
.md-typeset .route-list a:active {
  transform: translateY(1px);
}

.bse-system,
.bse-routes,
.bse-done {
  padding: var(--space-3xl) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.bse-system header,
.bse-routes header {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.bse-system header > p {
  margin: 0;
}

.md-typeset .bse-system h2,
.md-typeset .bse-routes h2,
.md-typeset .bse-done h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
}

.bse-routes header > p {
  max-width: 44ch;
  margin: 0;
  color: var(--color-muted);
}

.learning-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-hair) solid var(--color-rule);
  border-left: var(--rule-hair) solid var(--color-rule);
}

.md-typeset .map-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 4rem;
  padding: var(--space-md);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border-right: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.map-node span,
.route-index {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.bse-legend {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.bse-legend span {
  display: inline-block;
  width: var(--space-lg);
  height: var(--rule-hair);
  background: var(--color-accent);
}

.route-list {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.md-typeset .route-list a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0;
  color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.route-list strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  white-space: nowrap;
}

.route-list a > span:nth-child(3) {
  display: none;
  color: var(--color-muted);
  white-space: nowrap;
}

.route-list b {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 400;
}

.bse-done {
  display: grid;
  gap: var(--space-xl);
  border-bottom: 0;
}

.bse-done > p {
  max-width: 56ch;
  margin: 0;
  font-size: var(--text-md);
}

.bse-done .bse-note {
  max-width: var(--content-measure);
  padding-top: var(--space-md);
  color: var(--color-muted);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

@media (min-width: 40rem) {
  .bse-routes header {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: end;
  }

  .bse-system header > p {
    grid-column: 1 / -1;
  }

  .learning-map {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .map-node--wide {
    grid-column: span 2;
  }

  .map-node--high {
    grid-row: span 2;
  }

  .bse-done {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .bse-done .bse-note {
    grid-column: 2;
  }
}

@media (min-width: 60rem) {
  .md-typeset .bse-hero h1 {
    margin-inline-start: calc(var(--space-xl) * -1);
  }

  .learning-map {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .map-node--start {
    grid-column: span 2;
  }

  .map-node--end {
    grid-column: span 2;
  }

  .route-list a {
    grid-template-columns: 2rem minmax(10rem, 0.7fr) minmax(0, 1fr) auto;
  }

  .route-list a > span:nth-child(3) {
    display: block;
  }
}

@media (pointer: coarse) {
  .md-typeset .bse-action,
  .md-typeset .map-node,
  .md-typeset .route-list a {
    min-height: 3rem;
  }
}

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