/* Local system fonts and responsive, code-native diagrams. No remote assets. */
:root {
  --manual-mint: #6ce5d0;
  --manual-border: #363636;
}
[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --md-default-bg-color: #171717;
  --md-default-fg-color: #d2dbe4;
  --md-default-fg-color--light: #acb9c7;
  --md-default-fg-color--lighter: #647789;
  --md-primary-fg-color: #161616;
  --md-primary-bg-color: #f1f1f1;
  --md-accent-fg-color: #6ce5d0;
  --md-typeset-a-color: #6ce5d0;
  --md-code-bg-color: #222222;
  --md-code-fg-color: #d9e3ec;
  --md-footer-bg-color: #131313;
  --md-footer-bg-color--dark: #0f0f0f;
}
body, input, button { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
code, pre { font-family: Consolas, "SFMono-Regular", monospace; }
.md-header { border-bottom: 1px solid var(--manual-border); box-shadow: none; }
.md-header__title { font-weight: 600; letter-spacing: .025em; }
.md-header__button.md-logo img { width: 1.65rem; height: 1.65rem; }
.md-grid { max-width: 78rem; }
.md-main__inner { margin-top: 1rem; }
.md-typeset { font-size: .8rem; line-height: 1.45; }
.md-typeset h1 { color: #f2f7fb; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 .75em; }
.md-typeset h2 { color: #edf3f8; font-weight: 600; letter-spacing: -.02em; margin: 1.5em 0 .55em; }
.md-typeset h3 { color: #e0e9f0; font-weight: 600; margin: 1.2em 0 .45em; }
/* Compact reading rhythm shared by every manual page. */
.md-typeset p, .md-typeset ul, .md-typeset ol { margin-top: .65em; margin-bottom: .65em; }
.md-typeset ul li, .md-typeset ol li { margin-bottom: .3em; }
.md-typeset li > p { margin-top: .35em; margin-bottom: .35em; }
.md-typeset table:not([class]) th, .md-typeset table:not([class]) td { padding: .65em 1em; }
.md-typeset .admonition, .md-typeset details { margin: .9em 0; }
.md-typeset hr { margin: 1.4em 0; }
.md-nav__link { margin-top: .45em; }
.md-typeset strong { color: #edf6fb; }
.md-typeset a:focus-visible { outline: 2px solid var(--manual-mint); outline-offset: 4px; }
.md-nav { font-size: .73rem; }
.md-nav--primary .md-nav__title { color: #f2f7fb; }
.md-nav__link--active { font-weight: 650; }
.md-sidebar--secondary { border-left: 1px solid var(--manual-border); }
.eyebrow { color: var(--manual-mint); font-size: .61rem; font-weight: 700; letter-spacing: .17em; margin: 0 0 .65rem; }
.manual-hero {
  padding: 1.25rem 1.5rem 0;
  border: 1px solid #414141;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 5%, #343434 0%, transparent 57%), #212121;
}
.md-typeset .manual-hero h1 { font-size: clamp(2rem, 4vw, 3.35rem); margin: 0 0 .75rem; }
.manual-hero > p:not(.eyebrow) { max-width: 37rem; color: #c2cfdb; }
.md-typeset .md-button { border-radius: 5px; padding: .56em 1em; font-size: .7rem; font-weight: 600; margin: .4rem .4rem .3rem 0; }
.md-typeset .md-button--primary { color: #102322; background: var(--manual-mint); border-color: var(--manual-mint); }
.md-typeset .md-button:hover { color: #0b1f1d; background: #e4e4e4; border-color: #a0f4e5; }
.md-typeset img { border-radius: 6px; }
@media (max-width: 600px) {
  .manual-hero { padding: 1.1rem; }
  .md-typeset .manual-hero h1 { font-size: 2.5rem; }
}
/* Native screenshots stay legible and open at their original resolution. */
.md-typeset .manual-capture { margin: 1.2rem 0 1.5rem; text-align: left; }
.manual-capture > a { display: block; border: 1px solid #3d4a51; border-radius: 8px; overflow: hidden; background: #10151c; }
.manual-capture > a:hover, .manual-capture > a:focus-visible { border-color: var(--manual-mint); }
.manual-capture img { display: block; width: 100%; height: auto; border-radius: 0; }
.md-typeset .manual-capture figcaption { margin: .55rem 0 0; max-width: 100%; text-align: left; font-size: .69rem; line-height: 1.5; font-style: normal; color: #afbeca; }
.capture-origin { color: #8b9caa; }
.capture-narrow { max-width: 25rem; }
.capture-panel { max-width: 35rem; }
.capture-compact { max-width: 22rem; }
.md-typeset a:not(.md-button) { color: var(--manual-mint); }
.md-nav__link--active, .md-nav__link:hover { color: var(--manual-mint); }
.manual-hero { padding-bottom: 1.15rem; }
.workflow-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0 1.6rem; }
.workflow-card { padding: 1rem; border: 1px solid var(--manual-border); border-radius: 8px; background: #202428; }
.workflow-card h3 { margin: 0 0 .4rem !important; font-size: .92rem !important; }
.workflow-card p { margin: 0 !important; font-size: .73rem; }
@media (max-width: 700px) { .workflow-cards { grid-template-columns: 1fr; } .manual-capture { max-width: 100%; } }

.md-typeset .manual-capture { width: min(100%, var(--capture-width, 100%)); }


.md-typeset .manual-animation { margin: 1rem 0 1.4rem; text-align: left; }
.manual-animation > img { display: block; width: 100%; height: auto; border: 1px solid #3d4a51; border-radius: 7px; background: #10151c; }
.animation-portrait { max-width: 340px; }
.animation-workspace { max-width: 632px; }
.md-typeset .manual-animation figcaption { text-align: left; max-width: none; font-style: normal; font-size: .69rem; line-height: 1.5; color: #afbeca; margin: .55rem 0; }
.animation-controls { display: flex; gap: 1rem; align-items: center; font-size: .7rem; }
.animation-controls button { padding: .35rem .8rem; border: 1px solid #53616c; border-radius: 5px; background: #222b35; color: #e4edf4; font: inherit; cursor: pointer; }
.animation-controls button:hover { border-color: var(--manual-mint); }
.animation-controls button:focus-visible { outline: 2px solid var(--manual-mint); outline-offset: 3px; }
.md-typeset .still-capture { margin: .8rem 0 1rem; }
@media (max-width: 600px) { .manual-animation { max-width: 100%; } }

.md-typeset .manual-animation.animation-portrait { width: min(100%, 340px); max-width: 340px; }
.md-typeset .manual-animation.animation-workspace { width: min(100%, 632px); max-width: 632px; }

.md-typeset .manual-animation.animation-matrix { width: min(100%, 600px); max-width: 600px; }

.md-typeset .manual-animation.animation-decay { width: min(100%, 600px); max-width: 600px; }