/* GND: quiet typography, warm paper, teal/orange mechanisms. */
:root { --md-text-font: ui-sans-serif, system-ui, -apple-system, sans-serif; --md-code-font: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-md-color-scheme="default"] { --md-default-bg-color: #fafaf6; --md-primary-fg-color: #164f4b; --md-accent-fg-color: #b34e26; }
[data-md-color-scheme="slate"] { --md-default-bg-color: #162220; --md-primary-fg-color: #123d39; --md-accent-fg-color: #ffb38b; --md-typeset-a-color: #7bd4c6; }
.md-typeset { font-size: .82rem; line-height: 1.72; }
.md-typeset h1 { color: var(--md-default-fg-color); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; }
.md-typeset h2 { font-weight: 650; letter-spacing: -.025em; margin-top: 2.1em; }
.md-typeset pre { border-radius: 10px; }
.md-typeset .hero { padding: 1.2rem 0 1.1rem; }
.md-typeset .hero h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); max-width: 17ch; margin: .5rem 0 1.1rem; }
.md-typeset .hero .eyebrow { color: var(--md-typeset-a-color); font-size: .67rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.md-typeset .hero .lead { font-size: 1.08rem; max-width: 48ch; line-height: 1.6; }
.md-typeset .md-button { border-radius: 6px; margin: .25rem .4rem .25rem 0; }
.md-typeset .gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.2rem 0; }
.md-typeset .gallery article { padding: 1.2rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 12px; }
.md-typeset .gallery article h3 { margin-top: 0; }
.md-typeset .gallery .number { font-family: var(--md-code-font); color: var(--md-typeset-a-color); font-size: .65rem; letter-spacing: .09em; }
.md-typeset .mechanism { width: 100%; background: #f1f4ef; border-radius: 12px; padding: .5rem; }
.md-typeset .caption { color: var(--md-default-fg-color--light); font-size: .72rem; }
@media (max-width: 640px) { .md-typeset .gallery { grid-template-columns: 1fr; } .md-typeset .hero { padding-top: .2rem; } }

/* Landing page: lineage line, hero media, steps, ORM teaser, pills, runtimes. */
.md-typeset .hero h1 { max-width: 20ch; }
.md-typeset .hero .lineage { font-size: .86rem; max-width: 60ch; color: var(--md-default-fg-color--light); margin: -.4rem 0 .9rem; }
.md-typeset .hero-media, .md-typeset .wide-figure { display: block; width: 100%; max-width: 100%; margin: 1.4rem 0 .6rem; }
.md-typeset .hero-media svg, .md-typeset .wide-figure svg, .md-typeset .orm-pair svg, .md-typeset .orm-teaser svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.md-typeset .hero-media figcaption { margin: .5rem 0 0; max-width: none; }
.md-typeset .steps, .md-typeset .runtimes { display: grid; gap: 1rem; margin: 1.2rem 0; }
.md-typeset .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-typeset .runtimes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-typeset .steps > div, .md-typeset .runtimes > div { padding: 1rem 1.1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 12px; }
.md-typeset .steps .number { font-family: var(--md-code-font); color: var(--md-typeset-a-color); font-size: .65rem; letter-spacing: .09em; margin: 0 0 .4rem; }
.md-typeset .steps p, .md-typeset .runtimes p { margin: .3rem 0; }
.md-typeset .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-typeset .orm-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: 1rem 0; }
.md-typeset .orm-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 1.4rem 0 2.2rem; }
.md-typeset .orm-pair__figure { max-width: 760px; }
.md-typeset .orm-pair pre { margin: 0; }
.md-typeset .orm-pair .caption { margin-top: .5rem; }
.md-typeset .pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-typeset .pills span { font-family: var(--md-code-font); font-size: .68rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--md-default-fg-color--lightest); }
[data-md-color-scheme="slate"] .md-typeset .mechanism { background: #1b2b28; }

/* Generated figures (tools/figures): colour tokens follow the site's scheme toggle. */
[data-md-color-scheme="default"] .gnd-figure { --gf-bg: #f1f4ef; --gf-card: #ffffff; --gf-line: #b7cec5; --gf-ink: #183936; --gf-muted: #5b6f6b; --gf-primary: #164f4b; --gf-accent: #b34e26; --gf-ok: #1f7a4d; --gf-ok-bg: #dcece3; --gf-fail: #b3261e; --gf-fail-bg: #f7dcd6; --gf-warn: #8a5e00; --gf-warn-bg: #fbecc2; --gf-bubble: #164f4b; --gf-bubble-ink: #ffffff; --gf-code: #f6f8f5; }
[data-md-color-scheme="slate"] .gnd-figure { --gf-bg: #1b2b28; --gf-card: #0f1917; --gf-line: #2d4440; --gf-ink: #e6efec; --gf-muted: #9fb3ae; --gf-primary: #7bd4c6; --gf-accent: #ffb38b; --gf-ok: #6fd39a; --gf-ok-bg: #163b2b; --gf-fail: #ff8f85; --gf-fail-bg: #4a1f1b; --gf-warn: #f2c14e; --gf-warn-bg: #4a3a10; --gf-bubble: #123d39; --gf-bubble-ink: #e6efec; --gf-code: #142320; }
@media (prefers-reduced-motion: reduce) { .md-typeset .gnd-figure * { animation: none !important; } }
@media (max-width: 960px) { .md-typeset .runtimes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-typeset .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .md-typeset .steps, .md-typeset .orm-teaser, .md-typeset .orm-pair, .md-typeset .runtimes, .md-typeset .gallery--3 { grid-template-columns: 1fr; } }

/* Source-bound tutorial diagrams keep readable labels in either site theme. */
.md-typeset .app-figure { overflow-x: auto; margin: 1.4rem 0 .6rem; }
.md-typeset .app-figure img { display: block; width: 100%; min-width: 560px; max-width: none; background: #fff; border-radius: 12px; }

/* Replays of recorded sessions: full width on wide screens; on phones the card keeps its size and scrolls. */
.md-typeset .gnd-replay { display: block; margin: 1rem 0; max-width: 100%; }
.md-typeset .gnd-replay p { margin: 0; }
.md-typeset .gnd-replay svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .md-typeset .gnd-replay { overflow-x: auto; }
  .md-typeset .gnd-replay svg { width: 760px; max-width: none; }
}