.doc { display: grid; gap: 18px; min-width: 0; }
.doc > * { margin: 0; }
.doc .doc-line { font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--muted); }
.doc-h { margin-top: 10px; font-weight: 850; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.doc .doc-sub { margin-top: 4px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc p { font-weight: 500; font-size: 15px; line-height: 1.55; }
/* an address with #member opens below the sticky top bar, after the card's 26 px rise */
.doc [id] { scroll-margin-top: 102px; }
.doc .doc-lead { font-weight: 600; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; max-width: 40em; }
.doc .doc-note { font-weight: 600; font-size: 13px; color: var(--muted); }
.doc .doc-lockup { display: block; width: min(300px, 72%); height: auto; margin-bottom: 4px; }
.doc .doc-film-caption { margin-bottom: -10px; font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 46em; }
.doc .doc-film-hint { margin-top: -8px; font-weight: 600; font-size: 13px; line-height: 1.45; color: var(--muted); }

.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 750; font-size: 13px; text-decoration: none; white-space: nowrap;
	transition: background-color .6s var(--ease), color .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease); }
a.doc-chip { cursor: pointer; }
@media (hover: hover) { a.doc-chip:hover { background: var(--ink); color: var(--paper); translate: 0 -1px; transition-duration: .35s; } }
a.doc-chip:active { scale: .95; transition-duration: .35s, .35s, .35s, .4s; }
.doc-tag { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.doc-switch a.doc-chip[aria-current] { background: var(--ink); color: var(--paper); }
.doc-chip.doc-new-tag { background: rgb(22 163 74 / .12); color: #15803d; }

.doc-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.doc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.35; }
.doc-table th:empty { padding: 0; }
.doc-three th:nth-child(1) { width: 38%; }
.doc-three th:nth-child(2) { width: 30%; }
.doc-two th:nth-child(1) { width: 45%; }
.doc-table td { overflow-wrap: anywhere; }
.doc-table th { padding: 0 10px 8px 0; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.doc-table td { padding: 9px 10px 9px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); vertical-align: top; }
.doc-table td:first-child { font-weight: 750; }
.doc pre { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--paper); font-size: 13px; line-height: 1.5; overflow-x: auto; }
.doc pre code { font-size: inherit; }
.doc-table code, .doc code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
.doc-dim { color: var(--muted); }
/* member tables with descriptions (ref.py member_table, from stroke/members.json): the description is each row's last cell,
	laid out as a muted line under the name and type while the default (or returns) keeps its place on the right; the
	columns match a plain .doc-three / .doc-two table's, so both kinds line up on one page */
.doc-about, .doc-about thead, .doc-about tbody { display: block; }
.doc-about tr { display: grid; grid-template-columns: 38% 30% 32%; grid-template-areas: "n t v" "d d v"; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.doc-about.doc-two tr { grid-template-columns: 45% 55%; grid-template-areas: "n t" "d d"; }
.doc-about thead tr { border-top: 0; }
.doc-about td { border-top: 0; }
.doc-about :is(th, td):nth-child(1) { grid-area: n; }
.doc-about :is(th, td):nth-child(2) { grid-area: t; }
.doc-about.doc-three :is(th, td):nth-child(3) { grid-area: v; }
.doc-about td:last-child { grid-area: d; padding-top: 0; font-weight: 600; font-size: 13.5px; line-height: 1.45; color: var(--muted); overflow-wrap: break-word; }
.doc-about td:last-child:empty { display: none; }
.doc-about tr.doc-has-desc td:nth-child(-n+2) { padding-bottom: 3px; }
.doc-about th.doc-vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-about th:empty:last-child { display: none; }
/* code examples on class pages (members.example_html): the label and the language over the code */
.doc-code { display: grid; gap: 8px; min-width: 0; }
.doc-code figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 13px; line-height: 1.35; color: var(--muted); }
.doc-code-lang { flex: none; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.doc-code pre { tab-size: 4; }
.doc-table a, .doc p a, .doc li a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; transition: text-decoration-color .6s var(--ease); }
@media (hover: hover) { .doc-table a:hover, .doc p a:hover, .doc li a:hover { text-decoration-color: var(--ink); transition-duration: .35s; } }

.doc-fold { border-radius: 16px; background: var(--paper); }
.doc-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-weight: 800; font-size: 14px; cursor: pointer; list-style: none; border-radius: 16px; transition: background-color .6s var(--ease); }
.doc-fold > summary::-webkit-details-marker { display: none; }
.doc-fold > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .45s var(--ease), translate .45s var(--ease); }
.doc-fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
@media (hover: hover) { .doc-fold > summary:hover { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); transition-duration: .35s; } }
.doc-fold > .doc-wrap, .doc-fold > .doc-table, .doc-fold > div { padding: 0 14px 12px; }
.doc-count { color: var(--muted); font-weight: 700; }

.doc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-shot { display: grid; gap: 8px; margin: 0; min-width: 0; }
.doc-shot img, .doc-shot video { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--soft); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 4px 14px rgb(var(--shadow-rgb) / .1); }
.doc-shot.doc-wide { grid-column: 1 / -1; }
.doc-shot figcaption { font-weight: 700; font-size: 13px; color: var(--muted); }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px; background: var(--card); color: var(--ink); font: 800 12px/1 var(--font); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); white-space: nowrap; }
.doc-keys { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; font-size: 14px; font-weight: 600; }
.doc-keys > span:nth-child(odd) { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--muted); font-weight: 700; }

.doc-list { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.doc-diagram { display: block; width: 100%; height: auto; max-width: 640px; }
.doc-diagram text { font: 700 12px var(--font); fill: var(--ink); }

.doc-entries { display: grid; gap: 14px; }
.doc-entry { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--paper); }
.doc-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.doc-entry-title { font-weight: 850; font-size: 17px; line-height: 1.25; }
.doc-date { font-weight: 700; font-size: 13px; color: var(--muted); }
.doc-entry .doc-shot img { max-height: 340px; object-fit: cover; }
.doc-entry .doc-chip, .doc-fold .doc-chip { background: var(--card); }

.doc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.doc-gallery a { color: inherit; text-decoration: none; transition: translate .6s var(--ease), scale .6s var(--ease); }
.doc-gallery a img { transition: box-shadow .6s var(--ease); }
.doc-gallery a figcaption { transition: color .6s var(--ease); }
.doc-gallery a:active { scale: .97; transition-duration: .35s, .4s; }
.doc-gallery.doc-gallery-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the Features banner: a first card across the gallery, so no card sits alone on the last row (features.py) */
.doc-gallery > a.doc-wide { grid-column: 1 / -1; }
.doc-gallery > a.doc-wide img { aspect-ratio: 12 / 5; object-fit: cover; }
@media (hover: hover) {
	.doc-gallery a:hover { translate: 0 -3px; transition-duration: .35s; }
	.doc-gallery a:hover img { box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .1), 0 10px 26px rgb(var(--shadow-rgb) / .16); transition-duration: .35s; }
	.doc-gallery a:hover figcaption { color: var(--ink); transition-duration: .35s; }
}
.doc-gallery a:active { scale: .97; transition-duration: .35s, .4s; }

/* ---------- the feature video (About, film.js): the card's full width, a dark screen until the poster is in; it fades in
	over its poster once it plays, a press pauses or plays it, and under reduced motion it waits with a play button ---------- */
.doc .doc-film { position: relative; margin: 10px calc(-1 * var(--st-pad-x, 0px)) 4px; background: #1a1c20; overflow: clip; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.doc-film img, .doc-film video { display: block; width: 100%; height: auto; }
.doc-film video { position: absolute; inset: 0; height: 100%; object-fit: cover; }
@media (scripting: enabled) {
	.doc-film video { opacity: 0; transition: opacity .9s var(--ease); }
	.doc-film:not(.bound) video { animation: failsafe .01s linear 4s forwards; }
	.doc-film.live video { opacity: 1; }
}
.doc-film-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .95); color: var(--ink); cursor: pointer; box-shadow: 0 1px 4px rgb(16 16 24 / .18), 0 8px 24px rgb(16 16 24 / .22); -webkit-tap-highlight-color: transparent;
	opacity: 0; scale: .88; pointer-events: none; transition: opacity .6s var(--ease), scale .6s var(--ease), box-shadow .6s var(--ease); }
.doc-film-play svg { grid-area: 1 / 1; width: 26px; height: 26px; fill: currentColor; transition: opacity .35s var(--ease); }
.doc-film-play .i-play { translate: 2px 0; }
.doc-film:not(.paused) .i-play, .doc-film.paused .i-pause { opacity: 0; }
.doc-film.paused .doc-film-play, .doc-film-play:focus-visible { opacity: 1; scale: 1; pointer-events: auto; transition-duration: .35s; }
.doc-film-play:focus-visible { outline-offset: 3px; }
.doc-film-play[hidden] { display: none; }
@media (hover: hover) {
	.doc-film:hover .doc-film-play { opacity: 1; scale: 1; pointer-events: auto; transition-duration: .35s; }
	.doc-film .doc-film-play:hover { box-shadow: 0 2px 6px rgb(16 16 24 / .2), 0 12px 30px rgb(16 16 24 / .28); scale: 1.06; }
}
.doc-film:active .doc-film-play { scale: .92; transition-duration: .35s, .4s, .35s; }

/* ---------- the before/after slider (film.js Compare): the canvas draws plain left of the line and final right of it; the
	video under the poster is only its source; the line follows a drag, the knob is the keyboard slider ---------- */
.doc .doc-compare { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.doc-compare img { position: relative; }
.doc-compare canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .35s var(--ease); }
.doc-compare.ready canvas { opacity: 1; }
@media (scripting: enabled) {
	.doc-film.doc-compare video { opacity: 1; animation: none; transition: none; }
}
.doc-compare-label { position: absolute; bottom: 12px; padding: 5px 9px 4px; border-radius: 999px; background: rgb(16 16 24 / .55); color: #fff; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.doc-compare-label[data-side="plain"] { left: 12px; }
.doc-compare-label[data-side="final"] { right: 12px; }
.doc-compare-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 .5px rgb(16 16 24 / .2), 0 0 10px rgb(16 16 24 / .35); pointer-events: none; }
.doc-compare-knob { position: absolute; top: 50%; left: 1px; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgb(255 255 255 / .96); color: var(--ink); cursor: ew-resize; pointer-events: auto; box-shadow: 0 1px 4px rgb(16 16 24 / .18), 0 8px 24px rgb(16 16 24 / .24);
	transition: scale .6s var(--ease), box-shadow .6s var(--ease); }
.doc-compare-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.doc-compare-knob:focus-visible { outline-offset: 3px; border-radius: 50%; }
.doc-compare-knob[hidden] { display: none; }
@media (hover: hover) {
	.doc-compare:hover .doc-compare-knob { scale: 1.08; box-shadow: 0 2px 6px rgb(16 16 24 / .2), 0 12px 30px rgb(16 16 24 / .3); transition-duration: .35s; }
}
.doc-compare.dragging .doc-compare-knob { scale: .94; transition-duration: .4s; }
.doc-compare .doc-film-play { left: auto; top: 12px; right: 12px; width: 40px; height: 40px; margin: 0; }
.doc-compare .doc-film-play svg { width: 18px; height: 18px; }

/* ---------- references and code (enrich.py, at build time): every class, datatype, enum and library name is a blue link;
	code is coloured by token. The colours read at 4:1 or better on white and the paper grey, and 3:1 on a dark grey ---------- */
.doc { --ref: #1d6fd1; --tk-kw: #a034c8; --tk-str: #2e8540; --tk-num: #b5600f; --tk-com: #76777f; --tk-type: #0d7d8f; --tk-fn: #c4471a; }
.doc a.ref, .doc a.tk-ref { color: var(--ref); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ref) 28%, transparent); text-underline-offset: 3px; transition: text-decoration-color .6s var(--ease); }
@media (hover: hover) { .doc a.ref:hover, .doc a.tk-ref:hover { text-decoration-color: var(--ref); transition-duration: .35s; } }
.doc a.tk-ref { text-decoration-color: transparent; }
.doc span.tk-ref { color: var(--ref); }
.doc code .tk-kw { color: var(--tk-kw); }
.doc code .tk-str { color: var(--tk-str); }
.doc code .tk-num { color: var(--tk-num); }
.doc code .tk-com { color: var(--tk-com); font-style: italic; }
.doc code .tk-type { color: var(--tk-type); }
.doc code .tk-fn { color: var(--tk-fn); }
.doc a.doc-chip:not(.doc-tag) { color: var(--ref); }
@media (hover: hover) { .doc a.doc-chip:not(.doc-tag):hover { background: var(--ref); color: #fff; } }

/* ---------- a family's or index's members (ref.py members): cards, each a link with its one-line lead ---------- */
.doc-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-member { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none;
	transition: translate .6s var(--ease), box-shadow .6s var(--ease), scale .6s var(--ease), background-color .6s var(--ease); }
.doc-member-name { font-weight: 850; font-size: 15.5px; line-height: 1.25; color: var(--ref); overflow-wrap: anywhere; }
.doc-member-line { font-weight: 600; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
@media (hover: hover) { .doc-member:hover { translate: 0 -2px; background: var(--card); box-shadow: var(--shadow-md); transition-duration: .35s; } }
.doc-member:active { scale: .97; transition-duration: .35s, .35s, .4s, .35s; }
.doc-member:focus-visible { outline-offset: 3px; }
.doc-member-ico { display: flex; align-items: center; gap: 9px; }
.doc-member-ico > :last-child { min-width: 0; }

/* ---------- class icons (stroke/icons.py): the sprite's 16 px icon on a member card, the class's own 64 px file in its page
	title; an icon too faint on white sits on a dark chip (si-dk) ---------- */
.doc-ico { --si: 16px; flex: none; width: 16px; height: 16px; border-radius: 5px; }
.doc-ico.si-dk { background-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.st-title-ico { display: flex; align-items: baseline; gap: .26em; }
.st-title-ico .st-ico { flex: none; width: .8em; height: .8em; translate: 0 .07em; border-radius: .14em; }
.st-title-ico .st-ico.si-dk { background-color: var(--ink); box-shadow: 0 0 0 .1em var(--ink); }
.doc-members.doc-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .doc-members, .doc-members.doc-parts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- previous and next under a doc (the public ShotScript docs, oneshot_pages.pager) ---------- */
.doc-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.doc-pager a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; min-width: 0; padding: 12px 16px; border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none;
	transition: translate .6s var(--ease), box-shadow .6s var(--ease), scale .6s var(--ease), background-color .6s var(--ease); }
.doc-pager a.doc-pager-next { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.doc-pager svg { grid-row: span 2; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.doc-pager-dir { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.doc-pager-name { font-weight: 850; font-size: 15px; color: var(--ref, var(--ink)); overflow-wrap: anywhere; }
.doc-pager-next .doc-pager-dir { grid-column: 1; }
.doc-pager-next .doc-pager-name { grid-column: 1; }
.doc-pager-next svg { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) { .doc-pager a:hover { translate: 0 -2px; background: var(--card); box-shadow: var(--shadow-md); transition-duration: .35s; } }
.doc-pager a:active { scale: .97; transition-duration: .35s, .35s, .4s, .35s; }
.doc-pager a:focus-visible { outline-offset: 3px; }
@media (max-width: 560px) { .doc-pager { grid-template-columns: minmax(0, 1fr); } .doc-pager > span { display: none; } }

@media (max-width: 760px) {
	.doc [id] { scroll-margin-top: 154px; }
	.doc-shots, .doc-gallery { grid-template-columns: minmax(0, 1fr); }
	.doc-gallery > a.doc-wide img { aspect-ratio: 16 / 10; }
	.doc-table { font-size: 13px; }
	/* three columns don't fit long member names: the name gets its own line, the other two sit under it */
	.doc-three, .doc-three tbody { display: block; }
	.doc-three thead { display: none; }
	.doc-three tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
	.doc-three td { padding: 0; border-top: 0; }
	.doc-three td:first-child { grid-column: 1 / -1; margin-bottom: 3px; }
	.doc-code pre { padding: 10px 12px; font-size: 12px; }
	/* with descriptions: the name, its description, then type and default side by side */
	.doc-about.doc-three tr { grid-template-areas: "n n" "d d" "t v"; }
	.doc-about.doc-three tr.doc-has-desc td { padding-bottom: 0; }
	.doc-about.doc-three tr.doc-has-desc td:first-child { margin-bottom: 2px; }
	.doc-about.doc-three td:last-child { margin-bottom: 5px; padding: 0; }
	.doc-keys { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
	.doc-keys > span:nth-child(even) { margin-bottom: 8px; }
}

/* ---------- the breadcrumb above a Stroke page's title (stroke/nav.py) ---------- */
.doc-crumbs { margin-bottom: -6px; }
.doc-crumbs ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--muted); }
.doc-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.doc-crumbs li + li::before { content: "/"; margin: 0 8px; color: color-mix(in srgb, var(--ink) 28%, transparent); }
.doc .doc-crumbs a { display: inline-block; padding-block: 4px; color: inherit; text-decoration: none; overflow-wrap: anywhere; transition: color .6s var(--ease), scale .6s var(--ease); }
.doc-crumbs [aria-current] { padding-block: 4px; color: var(--ink); overflow-wrap: anywhere; }
@media (hover: hover) { .doc .doc-crumbs a:hover { color: var(--ink); transition-duration: .35s; } }
.doc .doc-crumbs a:active { scale: .96; transition-duration: .35s, .35s; }
.doc .doc-crumbs a:focus-visible { outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .doc-crumbs ol { font-size: 12.5px; } .doc .doc-crumbs a, .doc-crumbs [aria-current] { padding-block: 6px; } }