/* Venus: warm paper, copper accents, and a quiet charcoal reading surface. */
:root {
  --vsh-accent: #a6532c;
  --vsh-accent-hover: #914624;
  --vsh-accent-active: #7e3b1c;
  --vsh-on-accent: #fff9f2;
  --vsh-paper: #faf9f6;
  --vsh-surface: #f2f0eb;
  --vsh-raised: #fffdfa;
  --vsh-ink: #292724;
  --vsh-muted: #716a61;
  --vsh-rule: #e5e0d8;
  --vsh-hover: #ebe6dd;
  --vsh-active: #eee3d6;
  --vsh-success: #397050;
  --vsh-radius: .4rem;
}

[data-md-color-scheme="default"] {
  color-scheme: light;
  --color-foreground: 41 39 36;
  --color-background: 250 249 246;
  --color-background-subtle: 242 240 235;
  --color-backdrop: 250 249 246;
  --md-primary-fg-color: var(--vsh-accent);
  --md-primary-fg-color--light: #be744b;
  --md-primary-fg-color--dark: #824222;
  --md-primary-bg-color: var(--vsh-on-accent);
  --md-accent-fg-color: var(--vsh-accent);
  --md-accent-fg-color--transparent: #a6532c18;
  --md-accent-bg-color: var(--vsh-on-accent);
  --md-default-bg-color: var(--vsh-paper);
  --md-default-bg-color--light: var(--vsh-raised);
  --md-default-fg-color: var(--vsh-ink);
  --md-default-fg-color--light: var(--vsh-muted);
  --md-default-fg-color--lighter: var(--vsh-rule);
  --md-default-fg-color--lightest: var(--vsh-surface);
  --md-typeset-a-color: var(--vsh-accent);
  --md-code-bg-color: var(--vsh-surface);
  --md-code-fg-color: #3d3933;
  --md-code-hl-comment-color: #716a61;
  --md-code-hl-string-color: #587043;
  --md-code-hl-keyword-color: #a6532c;
  --md-code-hl-function-color: #8b552d;
  --md-code-hl-constant-color: #77533a;
  --md-code-hl-number-color: #8b552d;
  --md-code-hl-special-color: #8b552d;
  --md-code-hl-name-color: #3d3933;
  --md-footer-bg-color: var(--vsh-paper);
  --md-footer-bg-color--dark: var(--vsh-paper);
  --md-footer-fg-color: var(--vsh-ink);
  --md-footer-fg-color--light: var(--vsh-muted);
  --md-footer-fg-color--lighter: var(--vsh-muted);
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --color-foreground: 238 233 224;
  --color-background: 27 26 24;
  --color-background-subtle: 36 35 32;
  --color-backdrop: 27 26 24;
  --md-hue: 35;
  --vsh-accent: #e3aa78;
  --vsh-accent-hover: #efc399;
  --vsh-accent-active: #d29661;
  --vsh-on-accent: #281b12;
  --vsh-paper: #1b1a18;
  --vsh-surface: #242320;
  --vsh-raised: #201f1c;
  --vsh-ink: #eee9e0;
  --vsh-muted: #b1a89b;
  --vsh-rule: #37342e;
  --vsh-hover: #302c26;
  --vsh-active: #382d22;
  --vsh-success: #99b995;
  --md-primary-fg-color: var(--vsh-accent);
  --md-primary-fg-color--light: #efc399;
  --md-primary-fg-color--dark: #bc8050;
  --md-primary-bg-color: var(--vsh-on-accent);
  --md-accent-fg-color: var(--vsh-accent);
  --md-accent-fg-color--transparent: #e3aa7818;
  --md-accent-bg-color: var(--vsh-on-accent);
  --md-default-bg-color: var(--vsh-paper);
  --md-default-bg-color--light: var(--vsh-raised);
  --md-default-fg-color: var(--vsh-ink);
  --md-default-fg-color--light: var(--vsh-muted);
  --md-default-fg-color--lighter: var(--vsh-rule);
  --md-default-fg-color--lightest: var(--vsh-surface);
  --md-typeset-a-color: var(--vsh-accent);
  --md-code-bg-color: var(--vsh-surface);
  --md-code-fg-color: #e1dbd1;
  --md-code-hl-comment-color: #a59b8d;
  --md-code-hl-string-color: #b0c39a;
  --md-code-hl-keyword-color: #e3aa78;
  --md-code-hl-function-color: #e4be91;
  --md-code-hl-constant-color: #d6bfa5;
  --md-code-hl-number-color: #e9b887;
  --md-code-hl-special-color: #e9b887;
  --md-code-hl-name-color: #e1dbd1;
  --md-footer-bg-color: var(--vsh-paper);
  --md-footer-bg-color--dark: var(--vsh-paper);
  --md-footer-fg-color: var(--vsh-ink);
  --md-footer-fg-color--light: var(--vsh-muted);
  --md-footer-fg-color--lighter: var(--vsh-muted);
}

html { scroll-padding-top: 5rem; }
[data-md-color-scheme] {
  --md-typeset-color: var(--vsh-ink);
  --md-admonition-fg-color: var(--vsh-ink);
  --md-admonition-bg-color: var(--vsh-raised);
}
body { font-kerning: normal; -webkit-font-smoothing: antialiased; }
::selection { background: var(--vsh-active); color: var(--vsh-ink); }
[hidden] { display: none !important; }

/* The site fills the viewport; only long-form reading measure is constrained. */
.md-grid { max-width: 88rem; }
.md-header {
  background: var(--vsh-paper);
  color: var(--vsh-ink);
  border-bottom: 1px solid var(--vsh-rule);
  box-shadow: none;
  backdrop-filter: none;
}
.md-header__inner { min-height: 3.4rem; gap: .35rem; padding: 0 .8rem; }
.vsh-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--vsh-ink); min-height: 2.4rem; }
.vsh-brand img { width: 1.55rem; height: 1.55rem; }
.vsh-brand > span { font-size: 1.4rem; letter-spacing: -.07em; font-weight: 700; line-height: 1; }
.vsh-brand-dot { color: var(--vsh-accent); }
.vsh-header-divider { width: 1px; height: .9rem; background: var(--vsh-rule); margin: 0 .65rem; }
.vsh-header-label { font-size: .7rem; color: var(--vsh-muted); }
.vsh-header-spacer { flex: 1; }
.md-header__button, .vsh-repository { color: var(--vsh-muted); border-radius: var(--vsh-radius); }
.vsh-repository { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; }
.vsh-repository svg { width: 1rem; height: 1rem; }
.vsh-repository:hover, .md-header__button:hover { color: var(--vsh-accent); background: var(--vsh-surface); opacity: 1; }
.md-search__button { border: 1px solid var(--vsh-rule); background: var(--vsh-surface); }
.md-header .md-search__button { height: 2rem; width: clamp(9rem, 20vw, 16rem); }
.md-header .md-search__button::before { top: .45rem; }
.md-header .md-search__button::after { top: .5rem; }
.md-main__inner { margin-top: 0; }
.md-content { min-width: 0; }
.md-main .md-content > .md-content__inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.2rem 1.1rem 4rem;
}
.md-content__inner::before { display: none; }
.md-main .md-content:has(.vsh-home) > .md-content__inner { max-width: none; }

/* A page toolbar, not a floating button over the title. */
.vsh-page-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.6rem; }
.vsh-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .65rem; color: var(--vsh-muted); min-height: 2.2rem; }
.vsh-breadcrumb a { color: var(--vsh-muted); }
.vsh-breadcrumb a:hover { color: var(--vsh-accent); }
.vsh-breadcrumb > span[aria-hidden] { color: var(--vsh-muted); opacity: .6; }
.vsh-copy-markdown {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.2rem; padding: .35rem .55rem;
  border: 1px solid transparent; border-radius: var(--vsh-radius);
  color: var(--vsh-muted); background: transparent; font: inherit; font-size: .62rem;
  cursor: pointer; white-space: nowrap;
}
.vsh-copy-markdown svg { width: .8rem; height: .8rem; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vsh-copy-markdown:hover { color: var(--vsh-ink); background: var(--vsh-surface); border-color: var(--vsh-rule); }
.vsh-copy-markdown:disabled { cursor: progress; opacity: .65; }
.vsh-copy-markdown[data-state="success"] { color: var(--vsh-success); }
.vsh-copy-markdown[data-state="error"] { color: var(--vsh-accent); }
.vsh-copy-status, .vsh-clipboard-buffer { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Shared article rhythm: compact headings, comfortable prose, scrollable code. */
.md-typeset { font-size: .8rem; line-height: 1.75; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--vsh-ink); font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
.md-typeset h1 { margin: 0 0 1.1rem; font-size: clamp(1.65rem, 2.5vw, 2rem); line-height: 1.2; }
.md-typeset h2 { margin: 2.5rem 0 .8rem; font-size: 1.25rem; line-height: 1.35; }
.md-typeset h3 { margin: 1.75rem 0 .6rem; font-size: 1rem; line-height: 1.45; }
.md-typeset h4 { font-size: .85rem; }
.md-typeset > p, .md-typeset > ul, .md-typeset > ol { max-width: 76ch; }
.md-typeset h1 + p { font-size: .85rem; color: var(--vsh-muted); line-height: 1.8; }
.md-typeset li { margin-bottom: .35rem; }
.md-typeset a:not([class]):hover { text-decoration: underline; text-underline-offset: .2em; }
.md-typeset code { font-size: .8em; border-radius: .2rem; font-variant-ligatures: none; overflow-wrap: anywhere; }
.md-typeset pre > code { padding: 1rem 1.15rem; font-size: .68rem; line-height: 1.75; border-radius: var(--vsh-radius); }
.md-typeset pre { margin: 0; }
.md-typeset .highlight { border: 1px solid var(--vsh-rule); border-radius: var(--vsh-radius); margin: 1.1rem 0; background: var(--vsh-surface); overflow: hidden; }
.md-content__inner > .highlight, .md-content__inner > pre { margin-inline: 0; }
.md-typeset .highlight > pre { margin: 0; }
.md-typeset .highlight .filename { background: var(--vsh-surface); border-bottom: 1px solid var(--vsh-rule); font-weight: 500; }
.md-typeset .md-clipboard { border-radius: .2rem; }
.md-typeset .md-code__button { color: var(--vsh-muted); }
.md-typeset .md-code__button:hover { color: var(--vsh-accent); }
.md-typeset .md-code__nav { background: var(--vsh-surface); }
.md-typeset .tabbed-set { margin: 1rem 0; }
.md-typeset .tabbed-labels { width: 100%; max-width: 100%; border-bottom: 1px solid var(--vsh-rule); box-shadow: none; }
.md-typeset .tabbed-labels > label { font-size: .7rem; padding: .7rem 1rem; }
.md-typeset .tabbed-content .highlight { margin: 0; border: 0; border-radius: 0; }
.md-typeset .tabbed-content { border: 1px solid var(--vsh-rule); border-top: 0; border-radius: 0 0 var(--vsh-radius) var(--vsh-radius); overflow: hidden; }
.md-typeset .tabbed-block > p, .md-typeset .tabbed-block > ul { margin: 1rem; }
.md-typeset table:not([class]) { border: 1px solid var(--vsh-rule); border-radius: var(--vsh-radius); box-shadow: none; font-size: .7rem; font-variant-numeric: tabular-nums; }
.md-typeset table:not([class]) th { background: var(--vsh-surface); color: var(--vsh-ink); font-weight: 700; min-width: 5rem; }
.md-typeset table:not([class]) td { border-top-color: var(--vsh-rule); }
.md-typeset table:not([class]) tr:hover { background: var(--vsh-surface); }
.md-typeset .md-typeset__table { display: block; }
.md-typeset .md-typeset__scrollwrap { overflow-x: auto; }
.md-typeset .admonition, .md-typeset details { border: 1px solid var(--vsh-rule); border-radius: var(--vsh-radius); box-shadow: none; background: var(--vsh-raised); font-size: .75rem; }
.md-typeset .admonition-title, .md-typeset summary { background: var(--vsh-surface); }
.md-typeset .headerlink { font-size: .7em; }
.md-footer { border-top: 1px solid var(--vsh-rule); }
.md-footer-meta { background: var(--vsh-paper); }
.md-footer-meta__inner { padding: .6rem 1.2rem; }
.md-copyright, .md-copyright__highlight { color: var(--vsh-muted); }

/* Vertical navigation, with quiet section labels and an unambiguous current page. */
.md-nav { font-size: .69rem; line-height: 1.55; }
.md-nav__link { border-radius: .25rem; }
.md-nav__link:hover { color: var(--vsh-accent); }
.md-nav__link--active { color: var(--vsh-accent); font-weight: 700; }
.md-nav--primary .md-nav__link { padding: .36rem .55rem; margin-top: .05rem; }
.md-nav--primary .md-nav__link--active { background: var(--vsh-active); }
.md-nav--primary .md-nav__container { padding: 0; }
.md-nav--primary .md-nav__container > .md-nav__link { font: inherit; letter-spacing: inherit; }
.md-nav__item--section > .md-nav__link { font-size: .6rem; color: var(--vsh-muted); font-weight: 700; letter-spacing: .045em; margin: 1.15rem 0 .25rem; }
.md-nav__item--section:first-of-type > .md-nav__link { margin-top: .6rem; }
.md-nav--secondary { font-size: .62rem; }
.md-nav--secondary .md-nav__title { background: transparent; box-shadow: none; font-size: .62rem; font-weight: 700; color: var(--vsh-ink); }
.md-nav--secondary .md-nav__link { color: var(--vsh-muted); padding: .2rem 0; }
.md-nav--secondary .md-nav__link--active { color: var(--vsh-accent); }

/* Homepage: editorial introduction, one live-shaped example, direct entry points. */
.vsh-home { max-width: 64rem; margin: 0 auto; }
.md-typeset .vsh-eyebrow { font-size: .58rem; font-weight: 700; color: var(--vsh-accent); text-transform: uppercase; letter-spacing: .11em; margin: 0 0 1rem; }
.vsh-intro { padding: .5rem 0 2.1rem; }
.md-typeset .vsh-intro h1 { max-width: 24ch; font-size: clamp(1.8rem, 3.2vw, 2.75rem); letter-spacing: -.055em; line-height: 1.13; margin-bottom: 1.1rem; }
.vsh-intro h1 span { color: var(--vsh-accent); }
.md-typeset .vsh-intro-lead { max-width: 55ch; font-size: .86rem; line-height: 1.75; color: var(--vsh-muted); margin-bottom: 0; }
.vsh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.3rem; margin-top: 1.3rem; }
.md-typeset .vsh-button { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 2.3rem; padding: .5rem .9rem; border-radius: .3rem; background: var(--vsh-accent); color: var(--vsh-on-accent); font-size: .68rem; font-weight: 700; }
/* Filled links must override Zensical's generic a:hover/a:focus foreground. */
.md-typeset .vsh-button:is(:hover, :focus) { color: var(--vsh-on-accent); background: var(--vsh-accent-hover); }
.md-typeset .vsh-button:active { color: var(--vsh-on-accent); background: var(--vsh-accent-active); }
.md-typeset .vsh-text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.2rem; font-size: .68rem; font-weight: 500; color: var(--vsh-ink); }
.md-typeset .vsh-text-link:hover { color: var(--vsh-accent); }
.md-typeset :is(.vsh-path, .vsh-button, .vsh-text-link) { text-decoration: none; }
.vsh-example { min-width: 0; background: var(--vsh-surface); border: 1px solid var(--vsh-rule); border-radius: .5rem; }
.vsh-example-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem; padding: .75rem 1rem; border-bottom: 1px solid var(--vsh-rule); font-size: .65rem; font-weight: 700; }
.vsh-caption { font-size: .58rem; color: var(--vsh-muted); font-weight: 400; }
.vsh-example .tabbed-set { margin: 0; }
.vsh-example .tabbed-content { border: 0; }
.vsh-example .tabbed-labels { padding-inline: .2rem; background: var(--vsh-raised); }
.vsh-example .tabbed-labels > label { padding: .55rem .8rem; font-size: .64rem; }
.vsh-example .highlight { background: transparent; }
.vsh-example pre > code { font-size: .64rem; padding: 1rem; min-height: 13.5rem; }
.vsh-example-footer { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; border-top: 1px solid var(--vsh-rule); background: var(--vsh-raised); border-radius: 0 0 .5rem .5rem; color: var(--vsh-muted); font-size: .58rem; }
.vsh-example-footer a { margin-left: auto; }
.vsh-status-dot { width: .3rem; height: .3rem; flex: 0 0 .3rem; border-radius: 50%; background: var(--vsh-success); }
.vsh-paths, .vsh-principles { margin-top: 2.5rem; }
.vsh-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: 1rem; }
.md-typeset .vsh-section-heading h2 { margin: 0; font-size: 1.1rem; }
.md-typeset .vsh-section-heading p { margin: 0; font-size: .65rem; color: var(--vsh-muted); }
.vsh-path-grid { display: grid; column-gap: 2rem; }
.md-typeset .vsh-path { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: .7rem; align-items: baseline; border-top: 1px solid var(--vsh-rule); padding: 1rem 0; color: var(--vsh-ink); }
.vsh-path-number { font-size: .6rem; color: var(--vsh-accent); font-variant-numeric: tabular-nums; }
.vsh-path strong { display: block; font-size: .82rem; font-weight: 700; }
.vsh-path > span > span { display: block; margin-top: .15rem; font-size: .65rem; color: var(--vsh-muted); }
.vsh-path > span:last-child { color: var(--vsh-muted); transition: transform 160ms ease-out; }
.vsh-path:hover strong, .vsh-path:hover > span:last-child { color: var(--vsh-accent); }
.vsh-path:hover > span:last-child { transform: translate(2px, -2px); }
.md-typeset ol.vsh-sequence { display: grid; gap: 1.3rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.md-typeset ol.vsh-sequence > li { margin: 0; border-top: 1px solid var(--vsh-rule); padding: .8rem 0; }
.vsh-step { color: var(--vsh-accent); font-size: .57rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.md-typeset .vsh-sequence h3 { font-size: .78rem; margin: .55rem 0 .4rem; letter-spacing: -.02em; }
.md-typeset .vsh-sequence p { color: var(--vsh-muted); font-size: .7rem; line-height: 1.7; margin: 0; }
.vsh-engineering-note { margin-top: 2.5rem; padding: 1.4rem 0; border-top: 1px solid var(--vsh-rule); border-bottom: 1px solid var(--vsh-rule); }
.md-typeset .vsh-engineering-note .vsh-eyebrow { margin-bottom: .5rem; }
.vsh-engineering-note p { margin: 0 0 .6rem; color: var(--vsh-muted); font-size: .75rem; }
.vsh-engineering-note > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .65rem; }
.vsh-home > p:last-child { color: var(--vsh-muted); font-size: .65rem; margin-top: 1rem; max-width: 95ch; }

:is(a, button, input, summary, label[for]):focus-visible { outline: 2px solid var(--vsh-accent); outline-offset: 3px; }

@media (min-width: 40em) {
  .vsh-path-grid { grid-template-columns: 1fr 1fr; }
  .vsh-sequence { grid-template-columns: repeat(3, 1fr); }
}

/* Match Zensical's native drawer breakpoint so its keyboard/scroll behavior survives. */
@media (min-width: 76.25em) {
  .md-header__inner { padding-inline: 1.4rem; }
  .md-sidebar--primary { width: 12.5rem; padding: 1.3rem .65rem 1.5rem; }
  .md-sidebar--primary .md-sidebar__inner { width: auto; }
  .md-sidebar--primary .md-nav__title { display: none; }
  .md-nav--primary .md-nav__item--section { margin-top: .7rem; }
  .md-nav__item--section > .md-nav__link { margin-top: .5rem; }
  .md-main .md-content > .md-content__inner { padding: 1.2rem clamp(1.8rem, 3.5vw, 3.5rem) 4rem; }
  .md-sidebar--secondary { width: 11rem; padding-top: 1.65rem; }
  .md-sidebar--secondary .md-sidebar__inner { width: auto; }
  .vsh-page-toolbar { margin-bottom: 1.7rem; }
}

@media (min-width: 90em) {
  .vsh-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 2.5rem; }
  .vsh-intro { align-self: center; padding: .75rem 0 1rem; }
  .md-typeset .vsh-intro h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
  .vsh-paths, .vsh-principles, .vsh-engineering-note, .vsh-home > p { grid-column: 1 / -1; }
  .vsh-example pre > code { min-height: 15rem; }
}

@media (max-width: 76.234375em) {
  .md-sidebar--primary { background: var(--vsh-paper); backdrop-filter: none; }
  .md-nav--primary .md-nav__title { color: var(--vsh-ink); background: var(--vsh-surface); }
  .md-nav--primary .md-nav__source { color: var(--vsh-ink); background: var(--vsh-surface); }
  .md-sidebar--primary .md-nav__link { min-height: 2.2rem; align-items: center; }
  .md-nav--primary .md-nav__item--section { margin-top: .2rem; }
  .md-nav__item--section > .md-nav__link { margin-block: .2rem; }
}

@media (max-width: 44.984375em) {
  .vsh-header-divider, .vsh-header-label { display: none; }
  .md-header__inner { gap: .1rem; padding-inline: .4rem; }
  .vsh-brand img { width: 1.25rem; height: 1.25rem; }
  .vsh-brand > span { font-size: 1.2rem; }
  .vsh-page-toolbar { margin-bottom: 1.1rem; gap: .3rem; }
  .vsh-copy-markdown { font-size: .58rem; padding-inline: .2rem; }
  .md-typeset .vsh-intro h1 { font-size: clamp(1.65rem, 6.5vw, 2.3rem); }
  .vsh-example-heading { padding-inline: .8rem; }
  .vsh-example-footer { align-items: baseline; }
  .vsh-example-footer a { margin: .2rem 0 0 .7rem; flex-basis: 100%; min-height: 1.6rem; }
  .md-typeset .tabbed-set .tabbed-labels { margin-inline: 0; padding-inline: 0; }
}

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

@media print {
  .vsh-page-toolbar, .vsh-actions, .vsh-example-footer { display: none; }
  .md-main .md-content > .md-content__inner { max-width: none; padding: 0; }
  .vsh-home { display: block; }
  .md-typeset .vsh-intro h1 { color: inherit; }
}
