/* ── Field·4 docs — minimal white-on-black ────────────────────── */

/* Fonts are vendored (stylesheets/fonts.css → assets/fonts/) so the docs load offline.
   Every Plex weight/style this sheet actually asks for is declared there, so nothing
   is left to browser synthesis. The ital axis gives emphasis Plex's real italic
   instead of a mechanical oblique — at 300 as well as 400, because headings are
   weight 300 and five pages put emphasis inside a heading (the homepage h1 among
   them). 700 roman and italic are here because bold markdown and the
   table headings resolve to 700, and a handful of pages nest the
   two; without them all of that was faux-bold. */
@import url("fonts.css");

/* A gallery document opens beside its entry, using the space beyond the reading column. */
html.field-transcript-open { overflow-x:auto !important; }
html.field-transcript-open body { overflow-x:visible !important; }
.md-content__inner:has([data-field-transcript-gallery="entries"]) p:has(> a[href*="offline.html?file=assets/agent_transcripts/"]) {
    text-align:right;
}
.field-transcript-viewer {
    position:absolute; z-index:8; display:flex; flex-direction:column;
    width:clamp(600px,55vw,960px); height:min(780px,calc(100vh - 96px)); min-height:360px;
    background:#080808; border:1px solid #333; border-radius:5px;
    scroll-margin-top:72px; scroll-margin-right:24px;
    font:12px "Iosevka Web",monospace; color:#ccc;
}
.field-transcript-viewer__header { display:flex; align-items:center; gap:12px; padding:6px 10px; }
.field-transcript-viewer__header span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-transcript-viewer__header a, .field-transcript-viewer__header button { color:#aaa; background:none; border:0; padding:0 4px; font:inherit; font-size:18px; cursor:pointer; text-decoration:none; }
.field-transcript-viewer__header a:hover, .field-transcript-viewer__header button:hover { color:#fff; }
.field-transcript-viewer iframe { display:block; width:100%; flex:1; min-height:0; border:0; }
.field-transcript-viewer--below { position:relative; width:100%; margin:12px 0 24px; }

/* ── palette ─────────────────────────────────────────────────── */
:root {
    --mono-bg: #0e0e0e;
    --mono-panel: #050505;
    --mono-text: rgba(255, 255, 255, 0.8);
    --mono-text-faint: rgba(255, 255, 255, 0.4);
    --mono-accent: rgba(255, 255, 255, 0.6);
    --mono-border: rgba(255, 255, 255, 0.12);
    --mono-border-soft: rgba(255, 255, 255, 0.08);
    --nav-font-size: 0.64rem;
    --nav-line-height: 1.22;
    --nav-item-gap: 0.075rem;
    --nav-sidebar-offset: 2.5rem;
    /* Outer page grid (`.md-grid`) — the box the content column is centred in.
       Referenced by the header so the branding can sit on the same left edge. */
    --field-grid-width: 52rem;

    --md-text-font: "IBM Plex Sans Condensed", sans-serif;
    --md-code-font: "Iosevka Web", "Iosevka", "SFMono-Regular", "Menlo", monospace;
    --md-code-font-weight: 300;
    --md-typeset-color: var(--mono-text);
    --md-default-bg-color: var(--mono-bg);
}

html {
    background: var(--mono-bg);
    background-attachment: fixed;
}

/* ── base typography ─────────────────────────────────────────── */
body, .md-nav, .md-typeset {
    font-family: var(--md-text-font);
}
body {
    background: transparent !important;
    color: var(--mono-text);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p { font-size: 0.75rem;
    /* Ragged right: justified lines stretched word gaps wherever an unbreakable inline code span wrapped. */
    text-align: left;
    hyphens: auto;
    text-wrap: pretty;
}

.md-header__ellipsis {
    margin-left: 0 !important;
}
.md-search__inner {
    margin-left: -20px;
    float:none !important;
}
/* ── headings — clean, no decoration ─────────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: var(--mono-accent);
    font-weight: 300;
    letter-spacing: -0.01em;
    border-bottom: 0.5px solid white;
    padding-bottom: 6px;
    color: white;
    text-align: left;
    padding-top: 10px;
}

h1 {
    font-size: 300%  !important;
}

h2 {
    font-size: 200%  !important;
}

h3 {
    font-size: 150% !important;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    margin-top: 68px;
}

.md-typeset h1 {
    margin-top: 1rem;
}

.md-typeset > h1:first-child {
    margin-top: 0.4rem;
}

/* A second `#` on a page starts a part of it ("Making bigger things" on the tour), and it groups with
   what follows, so it needs more air above than below. The two rules above gave it the reverse: 1rem
   on top against the theme's 1.25em underneath, which at 300% type is about 60px. `h1 ~ h1` matches
   only an h1 after the page title, so the title keeps its spacing, and the generated source pages'
   sticky h1s, each the first child of its own section, are untouched. */
.md-typeset > h1 ~ h1 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.md-typeset h1 + h2,
.md-typeset h1 + h3,
.md-typeset h2 + h2,
.md-typeset h2 + h3 {
    margin-top: 0;
}

/* ── images: no upscale ──────────────────────────────────────── */
.md-typeset img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.md-header {
    backdrop-filter: blur(20px) brightness(0.8);
}

/* Breadcrumb path (navigation.path) rendered under the fixed frosted header;
   redundant with the nav rail and visually hidden behind the header, so drop it.
   The theme sets `.md-path:not([hidden]){display:block}`, so match that
   specificity (and override with !important) to keep it hidden. */
.md-path,
.md-path:not([hidden]) {
    display: none !important;
}

.md-typeset img.field-docs-image-native-sized {
    width: min(100%, var(--field-docs-native-max-width));
}

/* A vector figure scales cleanly, so it takes the whole column instead of
   stopping at its intrinsic width (half the column at a large text size). */
.md-typeset img.field-docs-figure-full {
    width: 100%;
}

@media screen and (min-width: 76.234375em) {
    .md-typeset img.field-docs-figure-full {
        width: calc(100% + 50px);
    }
}

.md-typeset img.field-docs-image-zoomable {
    cursor: zoom-in;
}

.md-typeset img.field-docs-image-zoomable:focus-visible {
    outline: none;
    /* outline-offset: 6px; */
}
@media screen and (min-width: 76.234375em) {
    .md-typeset img {
        box-sizing: border-box;
        max-width: calc(100% + 50px);
        padding-left: 50px;
        margin-left: -50px;
        /* border-left: 0.5px solid white; */
    }
    .md-typeset video {
        box-sizing: border-box;
        max-width: calc(100% + 50px);
        padding-left: 50px;
        margin-left: -50px;
        /* border-left: 0.5px solid white; */
    }
}

/* ── mobile drawer — force monochrome ────────────────────────── */
@media screen and (max-width: 76.234375em) {
    /* Frosted like the header: tint and blur on the drawer itself, every layer
       inside it transparent so the blur shows through. */
    .md-sidebar--primary {
        background-color: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(20px) brightness(0.8);
        -webkit-backdrop-filter: blur(20px) brightness(0.8);
    }
    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-sidebar--primary .md-sidebar__inner,
    .md-sidebar--primary .md-nav,
    .md-sidebar--primary .md-nav__list,
    .md-sidebar--primary .md-nav__item,
    .md-sidebar--primary .md-nav__item--nested > .md-nav {
        background-color: transparent !important;
    }

    /* Clear the fixed header at the top of the drawer. The offset has to sit on
       the list, not inside the first link: the active link paints an inverse-video
       white pill (see .md-nav--primary .md-nav__item .md-nav__link--active), so
       padding inside it inflates that pill by the full offset. */
    .md-sidebar--primary > .md-sidebar__scrollwrap > .md-sidebar__inner > .md-nav > .md-nav__list {
        margin-top: 50px;
    }
}

/* ── header / footer / nav — flatten ─────────────────────────── */
.md-header          { background: var(--mono-bg) !important; }
.md-header--shadow  { box-shadow: none !important; 
    position: fixed;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3) !important;
}
.md-footer          { display: none; }
.md-logo            { display: none; }

/* ── narrower content column ─────────────────────────────────── */
.md-grid { max-width: var(--field-grid-width); }

/* Brand line: "OpenEndedGroup |" in the lightest weight we load, so the eye
   lands on "Field·4". The two halves are wrapped by assets/header-brand.js —
   the theme renders `site_name` as one text node. */
.md-header__topic .field-brand__org {
    font-weight: 300;
}

/* ── header: search right-aligns with content column ─────────── */
@media screen and (min-width: 76.234375em) {
    .md-header .md-search {
        margin-right: 0;
    }
}

/* ── code blocks ─────────────────────────────────────────────── */
code {
    font-family: var(--md-code-font);
    font-size: 12px;
    line-height: 1.3;
    font-weight: var(--md-code-font-weight);
}
.md-typeset code {
    background: rgba(0,0,0,1);
    border-radius: 3px;
    color: #adf;
    font-weight: var(--md-code-font-weight);
}
.md-typeset code *,
.md-typeset pre code *,
.highlight code *,
.highlighttable code *,
.CodeMirror,
.CodeMirror * {
    font-weight: var(--md-code-font-weight) !important;
}
.md-typeset :is(p, li, td, blockquote) > code:first-child {
    margin-left: -0.18em;
}
/* An inline code pill has a solid background but no side margin, so when it
   directly follows text — e.g. an open paren, "at (`decay = 0.85`" — the pill
   crowds the preceding glyph and looks like it eats it. Give code that follows
   other content a hair of left breathing room (leaving the first-child pull above
   untouched, and not affecting fenced `pre > code`). */
.md-typeset :is(p, li, td, blockquote) > code:not(:first-child) {
    margin-left: 0.15em;
}

/* A source citation — `path:line#anchor` in the markdown, `path:line` on the page, with the
   anchor folded into a title attribute by rewrite_source_citations in public/docs_hooks.py.
   Styled as an ordinary inline code pill (it is one) plus a dotted underline, which is the
   conventional "there is a tooltip here" signal and the only thing distinguishing it from the
   inline code around it. Deliberately not a link colour: it does not navigate anywhere yet. */
.md-typeset code.source-citation {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.32);
    cursor: help;
}

/* …and when the source page it names was generated, the chip is wrapped in a link to the
   declaration containing the cited line. The anchor carries no colour of its own: the chip is
   already a distinct object in the line, and tinting it would make a page of citations read as a
   page of links. The underline goes solid on hover, which is the only state change needed to say
   "this one goes somewhere". */
.md-typeset a.source-citation-link {
    text-decoration: none;
    color: inherit;
}

.md-typeset a.source-citation-link code.source-citation {
    cursor: pointer;
}

/* A repo source path linked to its file (`link_repo_source_paths_html` in public/docs_hooks.py:
   GitHub on the public site, the local checkout inside Field's docs pane). The same treatment as a
   linked citation, with a solid rule because this one always goes somewhere. */
.md-typeset a.repo-source-link {
    text-decoration: none;
    color: inherit;
}

.md-typeset a.repo-source-link code {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.md-typeset a.repo-source-link:hover code {
    border-bottom-color: var(--md-accent-fg-color, rgba(255, 255, 255, 0.7));
}

.md-typeset a.source-citation-link:hover code.source-citation {
    border-bottom-style: solid;
    border-bottom-color: var(--md-accent-fg-color, rgba(255, 255, 255, 0.7));
}

/* Declaration headings on the source pages carry a highlighted signature rather than plain code, so
   a reader scanning the page can find the name without reading the types. Only `font-weight` and
   `opacity` are touched, never `color`: the palette is already doing the colouring, and a `color` on
   these spans outranks `.highlight .k` and silently flattens it — the same trap the codebase-reference
   rules above are commented for.

   The size reduction is the other half. A signature is much longer than a title, and at full heading
   size `private fun alifePanelHtml(img: Img, title: String, legend: String?, caption: String): String`
   wrapped onto three lines. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) code.highlight {
    background: transparent;
    padding: 0;
    font-size: 0.66em;
    font-weight: 400;
    line-height: 1.35;
}

/* `!important` because `.md-typeset code *` above sets the code weight with `!important` too, to keep
   the skin from bolding terms inside code. This is the one place that blanket rule is wrong: the
   declaration's own name is exactly what a reader is scanning a heading for. Specificity decides
   between two `!important` declarations, and this selector is the more specific. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) code.highlight .nf {
    font-weight: 700 !important;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) code.highlight :is(.k, .p, .o) {
    opacity: 0.6;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) code.highlight :is(.nc, .n) {
    opacity: 0.82;
}

/* Sticky section headings on the generated source pages. `assets/sticky-headings.js` wraps the flat
   heading list into nested <section>s first — without that, a sticky heading never stops sticking and
   the reader ends up with a stale h3 pinned under the current h2 — and then measures each level's
   offset from the real heights of the headings above it, because fixed steps put a 38px gap under a
   67px heading and the two texts overlapped.

   z-index stays below the site header's 4. At 5 and 6 the shallower levels painted *over* it as they
   scrolled away, which reads as the page passing through the chrome. Shallower levels sit above
   deeper ones so a heading sliding up disappears underneath its parent. */
.md-typeset .field-sticky-section > :is(h1, h2, h3, h4):first-child {
    position: sticky;
    margin-top: 0;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
    /* A wrapped heading is one thing said over two lines, and the theme's heading leading — set for
       single-line titles with air around them — spaces those two lines like separate paragraphs.
       Tightened here only, where a heading is a signature or a section banner rather than a title.

       The line-height has to go on the heading, not on the `code.highlight` inside it: the block's
       own strut sets a floor under the line box, so shrinking the inline alone changed nothing.

       The negative text-indent against an equal padding-left is a hanging indent — first line flush,
       continuations stepped in — so `64): DoubleArray` reads as the tail of the signature above it
       instead of as a new declaration starting at the margin. */
    line-height: 1.18;
    text-indent: -1.6em;
    padding-left: 1.6em;
}

/* A signature heading is set at 0.66em, so the leading that suits a full-size prose banner is still
   loose around it. Tightened separately rather than by one shared number, because the two cases are
   different sizes of type doing different jobs. */
.md-typeset .field-sticky-section > :is(h1, h2, h3, h4):first-child:has(> code.highlight) {
    line-height: 1.02;
}

/* `top` is set per heading by sticky-headings.js from its own ancestors' heights — a level cannot
   carry a fixed offset, because a heading that wraps to two lines is taller than one that does not.
   The values here are only a floor for the moment before the script runs. */
.md-typeset .field-sticky-section[data-level="1"] > h1:first-child {
    top: 3rem;
    z-index: 3;
}

.md-typeset .field-sticky-section[data-level="2"] > h2:first-child {
    top: 6rem;
    z-index: 2;
}

.md-typeset .field-sticky-section[data-level="3"] > h3:first-child {
    top: 8rem;
    z-index: 1;
}

.md-typeset .field-sticky-section[data-level="4"] > h4:first-child {
    top: 10rem;
    z-index: 1;
}

/* Pinned, and only then: the same frosted treatment the header has, so the stack reads as one piece
   of chrome with the page moving behind it rather than as content with a flat panel behind it. The
   heading's own rule goes while pinned — four stacked underlines is four claims of separation where
   only the bottom of the stack needs one. */
.md-typeset .field-sticky-section > :is(h1, h2, h3, h4).is-pinned {
    /* The header's *computed* treatment, which is not what `.md-header` declares: `.md-header--shadow`
       comes later and replaces the blur(20px) brightness(0.8) with this. Copying the declaration
       rather than the effect made the pinned stack markedly heavier than the bar above it. */
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3);
    border-bottom-color: transparent;
}

.md-typeset .field-sticky-section > :is(h1, h2, h3, h4).is-pinned-last {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* StackSL reference page */
.md-typeset .stacksl-reference {
    --stacksl-table-border: rgba(255, 255, 255, 0.16);
}

.md-typeset .stacksl-reference table {
    font-size: 0.66rem;
}

.md-typeset .stacksl-reference th,
.md-typeset .stacksl-reference td {
    vertical-align: top;
}

.md-typeset .stacksl-reference td {
    overflow-wrap: break-word;
    word-break: normal;
}

@media screen and (min-width: 76.234375em) {
    .md-grid:has(.stacksl-reference) {
        max-width: 72rem;
    }
}

/* Generated declarations keep their syntax colours and wrap within their column. */
.md-typeset .codebase-reference table td:first-child {
    width: 58%;
}

/* The signature is emitted as pre-highlighted Pygments spans, so the theme's code
   palette already differentiates keyword / type / parameter / literal. Keep the
   surrounding code weight neutral so those tokens remain legible.

   Only the `code` element is reset, never the spans inside it: a `color` on the
   spans — even `inherit` — outranks `.highlight .k` and silently undoes every
   colour this was added to produce. */
.md-typeset .codebase-reference table:has(td code) td:first-child code.highlight {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
}

.md-typeset .codebase-reference table:has(td code) td:first-child code.highlight span {
    font-weight: 400;
}

.md-typeset .codebase-reference code.highlight {
    background: transparent;
    font-size: 0.74rem;
    line-height: 1.5;
}

/* `+5 overloads · also Number, Any` — the coalesced-family marker. Reads as an
   aside to the signature it trails, never as part of it. */
.md-typeset .codebase-reference .sig-overloads {
    display: inline-block;
    margin-left: 0.5em;
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* One `##` per source file: give the file boundaries room to read as sections. */
.md-typeset .codebase-reference h2 {
    margin-top: 2.6em;
}

@media screen and (min-width: 76.234375em) {
    .md-grid:has(.codebase-reference) {
        max-width: 64rem;
    }
}

/* The reference index's "Every file" table has six columns and a long path in
   the first; in the reading column it scrolls sideways and crops "What it is".
   Here it hangs out into both margins instead, centred on the column and clear of the reading rail, and
   scrolls only once the viewport itself is too narrow. */
.md-typeset .codebase-file-index table td:first-child {
    width: auto;
}

@media screen and (min-width: 76.234375em) {
    .md-typeset .codebase-file-index .md-typeset__scrollwrap {
        --field-file-index-width: min(calc(100vw - 8rem), 76rem);
        width: var(--field-file-index-width);
        margin-inline: calc((100% - var(--field-file-index-width)) / 2);
    }
}

.md-typeset pre > code {
    background: var(--mono-panel) !important;
    /* border-right: 0.5px solid white !important; */
}
.highlight {
    background: var(--mono-panel);
    border: 1px solid var(--mono-border);
}
.linenos {
    background: transparent !important;
    color: var(--mono-text-faint);
}

/* ── pygments line-numbered code blocks (.highlighttable) ────
   Render like the diff-player skin, NOT like a data table: the .highlight
   container owns the border/background; the table itself is chromeless with
   tight, EQUAL vertical padding on both cells so line numbers align with code. */
.md-typeset .highlighttable {
    margin: 0;
    border: 0;
    background: transparent;
    width: 100%;
    display: table;
}
.md-typeset .highlighttable tbody { display: table-row-group; }
.md-typeset .highlighttable tr { display: table-row; }
.md-typeset .highlighttable td {
    display: table-cell;
    border: 0;
    padding: 0.7em 0;
    vertical-align: top;
    background: transparent;
}
.md-typeset .highlighttable td.linenos {
    width: 1%;
    padding-left: 0.9em;
    padding-right: 0.9em;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.md-typeset .highlighttable td.code { padding-right: 0.9em; }
.md-typeset .highlighttable td.linenos > div,
.md-typeset .highlighttable td.code > div,
.md-typeset .highlighttable pre {
    margin: 0;
    padding: 0;
}

/* ── diff code-block offset (shared with code-diff-player) ──── */
@media screen and (min-width: 76.234375em) {
    .md-typeset pre {
        margin-left: -64px;
    }
}

/* ── survival-guide key legend (used in survivalGuide.md) ───── */
.leftKey {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-variant-caps: all-small-caps;
    font-style: italic;
    color: white;
}
.rightKey {
    opacity: 0.5;
    color: white;
}

.md-nav__list>li:first-child{
    margin-top:10px;
}

/* …but a nested section's children have to read as belonging to the heading
   above them, so the space *above* the group must be smaller than the space
   below it. The nudge above is meant for the top of the index as a whole;
   inherited by every nested list it did precisely the reverse — 10px off the
   parent and 0 before the parent's next peer, which binds a section's children
   to the wrong heading. Now 3px above, 11px below.

   The bottom space sits on the last child rather than on the nested `.md-nav`,
   because a collapsed section keeps that element (at zero height, clipped) and
   a margin on it would space out every collapsed heading too. */
.md-nav__item--nested > .md-nav > .md-nav__list > li:first-child {
    margin-top: 3px;
}

.md-nav__item--nested > .md-nav > .md-nav__list > li:last-child {
    margin-bottom: 11px;
}



.md-typeset a {
    color: var(--mono-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    /* border-bottom: 1px solid var(--mono-border-strong); */
    transition: text-decoration-thickness 120ms ease, color 120ms ease;
}

.md-typeset a:hover {
    text-decoration-thickness: 3px;
    text-decoration-color: white;
}



.md-typeset a:hover {
    color: var(--mono-accent);
    border-bottom-color: var(--mono-accent);
}

.md-typeset blockquote {
    border-left: 2px solid var(--mono-border-strong);
    color: var(--mono-text-muted);
    background: transparent;
}

/* Reference and comparison tables share a compact, honest column layout.
   Code in a cell never changes the meaning or layout of the surrounding table.
   Keep headers visible, and scroll only the table when a narrow screen needs it. */
.md-typeset .md-typeset__scrollwrap {
    margin: 1rem 0 1.4rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.md-typeset .md-typeset__table {
    display: block;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.md-typeset table:not(.highlighttable) {
    display: table;
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: var(--mono-panel);
    box-shadow: none;
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: left;
}

.md-typeset table:not(.highlighttable) th,
.md-typeset table:not(.highlighttable) td {
    padding: 0.65rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--mono-border);
    vertical-align: top;
    text-align: left;
    /* A floor, so a column of short values (`true`, `null`, `0f`) is never
       squeezed narrower than a word by its neighbour's prose. */
    min-width: 5rem;
}

.md-typeset table:not(.highlighttable) th {
    background: #171717;
    color: #eee;
    font-family: var(--md-code-font);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.md-typeset table:not(.highlighttable) td {
    color: var(--mono-text);
}

.md-typeset table:not(.highlighttable) td code,
.md-typeset table:not(.highlighttable) th code {
    padding: 0;
    margin: 0;
    background: transparent;
    font-size: 0.62rem;
    line-height: inherit;
    white-space: normal;
    /* `break-word`, not `anywhere`: both split an identifier too long for its
       cell, but `anywhere` also lets auto layout size a code column to a single
       character, which is what split `true` into `tru`/`e`. */
    overflow-wrap: break-word;
    word-break: normal;
    font-weight: 400;
}

/* Opt-in reference entries pair readable code with an explanation. A long
   signature can wrap, while the explanation retains enough room to be prose. */
.md-typeset .field-reference table {
    table-layout: fixed;
}
.md-typeset .field-reference th:first-child {
    width: 45%;
}
.md-typeset .field-reference td code {
    color: #d7dce2;
}
.md-typeset .field-reference td strong {
    color: #eee;
    font-weight: 500;
}

/* Three-column call comparisons need room for the function name as well as its
   explanation. Keep a readable width and scroll locally on narrow screens. */
.md-typeset .field-call-table {
    overflow-x: auto;
}
.md-typeset .field-call-table table {
    table-layout: fixed;
    min-width: 34rem;
}
.md-typeset .field-call-table th:first-child {
    width: 20%;
}
.md-typeset .field-call-table th:nth-child(2) {
    width: 42%;
}

@media screen and (max-width: 44.984375em) {
    .md-typeset table:not(.highlighttable) th,
    .md-typeset table:not(.highlighttable) td {
        padding: 0.55rem 0.6rem;
    }
    /* An example and its explanation should be read together on a phone.
       Only this explicitly authored two-column reference reflows; comparisons
       retain their columns and local horizontal scrolling. Headers remain in
       the accessibility tree even when their visual columns no longer exist. */
    .md-typeset .field-reference table,
    .md-typeset .field-reference tbody,
    .md-typeset .field-reference tr,
    .md-typeset .field-reference td {
        display: block;
        width: 100%;
    }
    .md-typeset .field-reference thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .md-typeset .field-reference tbody tr {
        padding: 0.8rem 0.65rem;
        border-bottom: 1px solid var(--mono-border);
    }
    .md-typeset .field-reference table:not(.highlighttable) td {
        padding: 0;
        border: 0;
    }
    .md-typeset .field-reference table:not(.highlighttable) td + td {
        margin-top: 0.45rem;
    }
}

.md-typeset hr {
    border-bottom: 1px solid var(--mono-border);
}

body.field-docs-image-lightbox-open {
    overflow: hidden;
}

/* ── dot-grid graph-paper background (behind all content) ──────── */
.field-dot-grid {
    /* JS sets position/inset/pointer-events/background/opacity.
       This rule just ensures it stays behind everything. */
    z-index: -1 !important;
}

/* ── homepage: full-bleed video behind normal page layout ──── */
.field-homepage-video {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #000;
    opacity: 0;
}

/* The film is the flat Field window (demo_document.md); the tilt is applied here, as the old
   hand-made banner had it baked in. */
.field-homepage-video video {
    width: 110%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Mostly an in-plane turn with a little depth; three tilted axes read as a shear. 1.25 keeps
       the turned corners outside a 16:9 window. */
    transform-origin: 50% 50%;
    transform: perspective(2400px) rotateY(-10deg) rotateZ(-8deg) scale(1.25);
}

.field-homepage-video__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1.0) 22%, transparent 100%),
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.7) 100%);
}

/* Let content show over the video */
html[data-field-homepage="true"] .md-header,
html[data-field-homepage="true"] .md-main,
html[data-field-homepage="true"] .md-content,
html[data-field-homepage="true"] .md-content__inner {
    background: transparent !important;
}

.field-docs-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
}

.field-docs-image-lightbox.is-open {
    display: block;
}

.field-docs-image-lightbox__overlay {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.field-docs-image-lightbox__frame {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
}

.field-docs-image-lightbox__frame:focus {
    outline: none;
}

.field-docs-image-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.55);
    color: white;
    padding: 0.45rem 0.75rem;
    font: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: auto;
    cursor: pointer;
}

.field-docs-image-lightbox__image {
    display: block;
    max-width: min(96vw, 1800px);
    max-height: calc(100vh - 7rem);
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.field-docs-image-lightbox__caption {
    max-width: min(96vw, 1200px);
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    pointer-events: auto;
}

@media screen and (max-width: 44rem) {
    .field-docs-image-lightbox__frame {
        padding: 1rem;
        padding-top: 3.5rem;
    }

    .field-docs-image-lightbox__image {
        max-width: 100%;
        max-height: calc(100vh - 5.5rem);
    }

    .field-docs-image-lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
    }
}

.md-nav__link {
    color: var(--mono-text-muted) !important;
    font-weight: 400;
    opacity: 0.6;
    letter-spacing: 0;
    font-size: var(--nav-font-size);
    line-height: var(--nav-line-height);
    padding-top: var(--nav-item-gap);
    padding-bottom: var(--nav-item-gap);
    min-height: calc((var(--nav-font-size) * var(--nav-line-height)) + (2 * var(--nav-item-gap)));
    align-items: center;
}

.md-nav__link .md-ellipsis {
    line-height: inherit;
}

.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__list > .md-nav__item > .md-nav__link {
    font-variant-caps: all-small-caps;
    font-size: calc(var(--nav-font-size) * 1.05);
}

.md-nav__item {
    margin: 0;
}

.md-nav__icon {
    visibility: hidden;
}

.md-nav__list,
.md-nav__item--nested > .md-nav__list {
    gap: 0;
}

.md-icon:last-child {
    opacity: 0.5;
    transform: scale(0.85);
    margin-left: 10px !important;
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
    color: #fff !important;
    opacity: 1;
}

/* Active nav item: inverse video (black on white) instead of the theme's
   translucent red accent pill (--md-accent-fg-color--transparent). Matches the
   theme selector's specificity; !important overrides the white color set above. */
.md-nav--primary .md-nav__item .md-nav__link--active {
    background: #fff !important;
    color: #000 !important;
}

.md-nav__title {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--mono-text-faint) !important;
    font-weight: 400;
    font-size: calc(0.7rem - 2pt);
}

.md-sidebar__inner {
    border-right: 0;
}

.field-doc-export {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 18px 0;
    padding: 8px 10px;
    border: 1px solid var(--mono-border);
    background: rgba(255, 255, 255, 0.02);
}

.field-doc-export-button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: black;
    color: white;
    font-family: var(--md-code-font);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 9px;
    cursor: pointer;
}

.field-doc-export-button:hover {
    background: #151515;
    border-color: white;
}

.field-doc-export-status {
    font-size: 11px;
    color: var(--mono-text-faint);
}

.field-doc-export-status[data-kind="ok"] {
    color: #9ff1b6;
}

.field-doc-export-status[data-kind="error"] {
    color: #ff9a9a;
}

/* ── sidebars: 1px black border at rest, content reveals on hover (desktop only) ── */
@media screen and (min-width: 76.234375em) {
    .md-sidebar--primary {
        transform: translateX(calc(var(--nav-sidebar-offset) * -1));
    }

    .md-sidebar--secondary {
        transform: translateX(var(--nav-sidebar-offset));
    }

    /* border on __inner = nav-content height, sticky, always visible (not inside the clip) */
    .md-sidebar--primary  .md-sidebar__inner { border-left: 10px solid black;  }
    .md-sidebar--secondary .md-sidebar__inner { border-right:  10px solid black;  }

    /* fade nav content while leaving the sticky border visible */
    .md-sidebar--primary .md-sidebar__inner > .md-nav,
    .md-sidebar--secondary .md-sidebar__inner > .md-nav {
        opacity: 0;
        pointer-events: none;
        transition: opacity 260ms ease !important;
    }
    .md-sidebar--primary:hover .md-sidebar__inner > .md-nav,
    .md-sidebar--primary .md-sidebar__inner:hover > .md-nav,
    .md-sidebar--secondary:hover .md-sidebar__inner > .md-nav,
    .md-sidebar--secondary .md-sidebar__inner:hover > .md-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

.md-nav__title {
    display: none;
}

.md-header__button.md-logo {
    display: none;
}

.md-header__ellipsis {
    margin-left: 0.0em;
}

.md-search__inner {
    margin-right: 160px;
}

.md-search__icon  {
    opacity: 0.25 !important;
    transform: scale(0.85);
}

.md-search__input {
    background: transparent;
    /* border: 1px solid var(--mono-border); */
    color: transparent;
    caret-color: transparent;
    width: 1.6rem;
    min-width: 1.6rem;
    padding-left: 1.4rem;
    padding-right: 0.2rem;
    opacity: 0.5;
    transition: width 160ms ease, opacity 160ms ease, background-color 160ms ease;
}

button.md-search__icon[title="Clear"],
button.md-search__icon[aria-label="Clear"] {
    display: none !important;
}

.md-search__input::placeholder {
    color: var(--mono-text-faint);
}

.md-search__icon {
    opacity: 0.5;
    transform: scale(0.85);
}

.md-search__form {
    background: transparent;
    max-width: 40px;
}

.md-search {
    max-width: 1.8rem;
}

.md-search__form:focus-within {
    max-width: 12rem;
}

.md-search__input:focus {
    width: 12rem;
    min-width: 12rem;
    color: var(--mono-text);
    caret-color: var(--mono-text);
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.02);
}

.md-clipboard,
.md-clipboard svg {
    opacity: 0.6;
}

.md-clipboard svg {
    stroke-width: 1;
    transform: scale(0.78);
    transform-origin: center;
}

.md-clipboard {
    width: 1.2rem;
    height: 1.2rem;
}

/* ── LessWrong-style reading rail + burger-only site nav (desktop) ───────── */
:root {
    --field-rail-left: 1.45rem;
    --field-rail-top-gap: 0.9rem;
    --field-rail-bottom-gap: 1.05rem;
    --field-rail-width: 12.9rem;
    --field-rail-line-x: 0.35rem;
    --field-reading-width: 34rem;
    --field-rail-track-width: 1px;
    --field-rail-track-color: rgba(255, 255, 255, 0.34);
    --field-rail-progress-color: rgba(255, 255, 255, 0.9);
    --field-rail-window-color: rgba(255, 255, 255, 0.16);
}

.field-reading-rail {
    position: fixed;
    left: var(--field-rail-left);
    top: calc(var(--md-header-height, 2.4rem) + var(--field-rail-top-gap));
    height: calc(100vh - var(--md-header-height, 2.4rem) - var(--field-rail-top-gap) - var(--field-rail-bottom-gap));
    width: var(--field-rail-width);
    z-index: 28;
    display: block;
    /* The rail is `--field-rail-width` wide (258px measured) because it needs somewhere to put the
       heading labels it reveals on hover — but almost all of that width is empty, and it is fixed at
       z-index 28 over the page. With `pointer-events: auto` that empty space silently ate every click
       landing in it. On a 1250px window the source index's table starts at x=138 and the rail reaches
       x=287, so the first 150px of every row in a 240-row table looked dead: hit-testing a link there
       returned `.field-reading-rail__row`, not the link.

       `pointer-events` is inherited, so `none` here lifts the whole rail out of hit-testing, and the
       two rules below put it back exactly where it is wanted: a narrow strip over the line and dots,
       and the labels once they are visible. `:hover` still resolves on the rail itself because a
       hovered descendant matches its ancestors. */
    pointer-events: none;
}

/* The hit strip: the visible line and dots, plus a little room to aim at. Everything to the right of
   this passes clicks through to the page. */
.field-reading-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1.6rem;
    pointer-events: auto;
}

.field-reading-rail.is-hidden {
    display: none;
}

.field-reading-rail.is-obscured {
    visibility: hidden;
}

.field-reading-rail__progress {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.field-reading-rail__rows {
    z-index: 1;
}

.field-reading-rail__progress-track {
    position: relative;
    left: var(--field-rail-line-x);
    width: var(--field-rail-track-width);
    height: 100%;
    background: var(--field-rail-track-color);
}

.field-reading-rail__progress-viewport {
    position: absolute;
    left: -2.65px; 
    width: 600%;
    opacity: 1;
    background-color: white;
}

.field-reading-rail__progress-fill {
    position: absolute;
    left: 0;
    width: 10%;
    /* left:-1.65px; */
    /* width: 400%; */
}

.field-reading-rail__progress-fill {
    top: 0;
    height: 0;
    background: var(--field-rail-progress-color);
    transition: height 90ms linear;
}

.field-reading-rail__progress-viewport {
    border-radius: 10px;
    top: 0;
    height: 10%;
    background: white;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    transition: top 100ms linear, height 120ms ease;
}

.field-reading-rail__rows {
    position: relative;
    height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 0.9rem;
    user-select: none;
    overflow: hidden;
}

.field-reading-rail__row {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.42rem;
    padding-left: 0.3rem;
    /* The row carries the label's size so the dot can centre on its first line (0.7em = half of
       line-height 1.4); a dot pinned to top: 0 sat above the text it labels. */
    font-size: 0.54rem;
    line-height: 1.4;
    color: rgba(245, 245, 245, 0.7);
}

.field-reading-rail__dot {
    position: absolute;
    left: calc(var(--field-rail-line-x) - 0.9rem);
    top: 0.7em;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background: var(--mono-bg);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0.2rem #0e0e0e;
}

.field-reading-rail__dot--title {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 2px;
    border-color: rgba(255, 255, 255, 0.85);
    background-color: white;
    box-shadow: 0 0 0 0.2rem #0e0e0e;
}

.field-reading-rail__link {
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 170ms ease, transform 220ms ease;
    font-size: 0.54rem;
    letter-spacing: 0.018em;
    pointer-events: none;
}

.field-reading-rail:hover .field-reading-rail__link,
.field-reading-rail__row.is-active .field-reading-rail__link {
    opacity: 1;
    transform: translateX(0);
    /* Clickable only once visible — an invisible label is exactly the thing this whole fix is
       removing. Hovering a label keeps the rail's own `:hover` true, so moving from the strip onto a
       label does not make it vanish under the cursor. */
    pointer-events: auto;
}

/* Once the rail is hovered, the rows themselves join hit-testing, so the cursor can cross the empty
   space between the strip and a label without losing `:hover` (which faded the labels and dropped
   their pointer events before the cursor arrived). At rest the rows stay click-through. */
.field-reading-rail:hover .field-reading-rail__row {
    pointer-events: auto;
}

/* Linger before fading out, so a slightly wandering path to a label does not lose it. */
.field-reading-rail__link {
    transition: opacity 170ms ease 350ms, transform 220ms ease 350ms;
}
.field-reading-rail:hover .field-reading-rail__link {
    transition: opacity 170ms ease, transform 220ms ease;
}

.field-reading-rail__row.is-active .field-reading-rail__dot {
    border-color: rgba(255, 255, 255, 0.98);
    /* background: rgba(255, 255, 255, 0.08); */
}

.field-reading-rail__row.is-active .field-reading-rail__link {
    color: rgba(255, 255, 255, 0.94);
}

.field-reading-rail__link:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.14em;
}

@media screen and (min-width: 76.234375em) {
    .md-main__inner {
        max-width: 52rem;
        margin: 0 auto;
    }

    .md-content {
        max-width: 52rem;
        margin: 0 auto;
    }

    .md-content__inner {
        max-width: var(--field-reading-width);
        margin: 0 auto !important;
        padding-left: 0;
        padding-right: 0;
    }

    .md-typeset {
        max-width: var(--field-reading-width);
        margin: 0 auto !important;
    }

    .md-sidebar--secondary {
        display: none !important;
    }

    .md-header__button[for="__drawer"] {
        display: inline-flex !important;
        opacity: 0.95;
    }

    .md-header__button[for="__drawer"]:hover {
        opacity: 1;
    }

    /* Header layout: burger far-left, title at content-column left edge, search far-right */
    .md-header .md-header__inner {
        max-width: none;
        padding-left: 0.6rem;
        padding-right: 1rem;
        display: flex;
        align-items: center;
        position: relative;
    }

    /* Put the brand line on the content column's left edge, so it aligns with
       the h1's rule, the body copy and the code blocks.

       Nudging the title along the flex row means guessing the burger's width,
       which is what left it a few px shy before. Instead lift the title out of
       the row and lay it on the same grid the content is centred in: the header
       is full-bleed here, so percentages resolve against the client width that
       `.md-grid` centres in — and using % rather than `vw` means a classic
       (space-taking) scrollbar can't skew it. Within that grid the content
       column is `--field-reading-width` centred inside `--field-grid-width`,
       hence the second term. */
    .md-header .md-header__title {
        position: absolute;
        inset: 0;
        margin: 0 !important;
        padding-left: calc(
            max(0px, (100% - var(--field-grid-width)) / 2)
            + (var(--field-grid-width) - var(--field-reading-width)) / 2
        );
        padding-right: 1rem;
        /* Out of flow it lies over the burger and the search field, so it must
           not swallow their clicks. */
        pointer-events: none;
    }

    /* The title no longer consumes flex space, so search needs its own push. */
    .md-header .md-search {
        margin-left: auto;
    }

    .md-sidebar--primary {
        position: fixed;
        left: 0;
        top: var(--md-header-height, 2.4rem);
        width: 16rem;
        height: calc(100vh - var(--md-header-height, 2.4rem));
        margin: 0;
        padding: 0 !important;
        transform: translateX(-102%);
        transition: transform 220ms ease;
        z-index: 36;
        box-shadow: 0.8rem 0 2.2rem rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }

    [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
        transform: translateX(0);
    }

    [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary .md-sidebar__inner > .md-nav {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .md-sidebar--primary {
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(20px) brightness(0.8);
        -webkit-backdrop-filter: blur(20px) brightness(0.8);
    }

    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-sidebar--primary .md-sidebar__inner,
    .md-sidebar--primary .md-nav {
        background: transparent !important;
    }

    .md-sidebar--primary .md-nav__link,
    .md-sidebar--primary .md-nav__title {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .md-sidebar--primary .md-nav__link:hover {
        color: #fff !important;
    }

    .md-sidebar--primary .md-nav__link--active {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .md-sidebar--primary .md-sidebar__inner {
        border-right: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0 !important;
        padding-right: 0 !important;
    }

    .md-sidebar--primary .md-sidebar__scrollwrap {
        margin: 0 !important;
        padding: 0.8rem 1rem !important;
    }
}

@media screen and (max-width: 76.234375em) {
    .field-reading-rail {
        display: none !important;
    }
}

.md-sidebar--secondary {
    display: none !important;
}
/* 
@media screen and (max-width: 28em) {
    .md-sidebar--primary,
    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-sidebar--primary .md-sidebar__inner,
    .md-sidebar--primary .md-nav,
    .md-sidebar--primary .md-nav__list,
    .md-sidebar--primary .md-nav__title,
    .md-sidebar--primary .md-nav__title[for="__drawer"],
    .md-sidebar--primary .md-nav__source {
        background-color: #000 !important;
    }

    .md-sidebar--primary .md-nav__item--nested > .md-nav,
    .md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list {
        background-color: #000 !important;
    }
} */

/* ── `??? aside` — production commentary, out of the reader's way ──────────────

   A lot of what our admonitions carry is not advice to a reader: it is an
   account of how a page came to be — what an earlier cut of a clip got wrong,
   what the docs build cannot capture, which claim a test now pins. That is
   worth keeping (it is how the next agent avoids re-making the mistake) and
   worth not putting in a reader's path. `??? aside "Title"` is the marker for
   it: collapsed everywhere, and at wide viewports lifted clean out of the text
   column into the right margin.

   The margin placement is the classic Tufte float trick rather than absolute
   positioning or JS: `float: right` with a `margin-right` of −(width + gap)
   leaves the box with a negative outer width, so it paints in the gutter and
   displaces no body text at all. `clear: right` is what keeps two neighbouring
   asides off each other — the browser stacks them, which means opening one
   (and changing its height) reflows the rest for free, with nothing to
   recompute on toggle or resize.

   Everything below is an override of Material's admonition chrome, which
   `<details>` inherits in full: a coloured border, a tinted summary bar, the
   note mask-icon in `summary::before` and the rotating chevron in
   `::after`. An aside wants none of it. */

:root {
    --field-aside-gap: 1.4rem;
    --field-aside-width: auto;
}

.md-typeset details.aside {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--mono-border);
    border-radius: 0;
    box-shadow: none;
    margin: 1.4em 0;
    padding: 0 0 0 0.75rem;
    font-size: 0.6rem;
    line-height: 1.5;
    color: var(--mono-text-faint);
}

.md-typeset details.aside:focus-within {
    box-shadow: none;
}

.md-typeset details.aside > summary {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0 0 0 0.75rem;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.md-typeset details.aside > summary:hover {
    color: rgba(255, 255, 255, 0.85);
}

.md-typeset details.aside > summary code {
    box-shadow: none;
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Material's right-hand chevron goes; its type icon is re-cut as the one small
   leading triangle, so the title reads as a marginal note rather than a callout. */
.md-typeset details.aside > summary::after {
    display: none;
}

.md-typeset details.aside > summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0;
    height: 0;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    border-left: 0.28rem solid currentColor;
    border-top: 0.19rem solid transparent;
    border-bottom: 0.19rem solid transparent;
    transform-origin: 0.09rem 50%;
    transition: transform 120ms ease;
}

.md-typeset details.aside[open] > summary::before {
    transform: rotate(90deg);
}

.md-typeset details.aside > summary + * {
    margin-top: 0.7em;
}

html .md-typeset details.aside > :last-child {
    margin-bottom: 0;
}

/* `p` is styled by a bare element selector near the top of this file, which
   sets both a size and justification; neither is inherited away, so an aside
   has to name the element to get its own smaller measure back. */
.md-typeset details.aside p,
.md-typeset details.aside li {
    font-size: inherit;
    margin: 0.6em 0;
}

.md-typeset details.aside table {
    font-size: 0.92em;
}

.md-typeset details.aside > summary,
.md-typeset details.aside a {
    text-underline-offset: 0.14em;
}

/* ── the margin proper ──────────────────────────────────────────────────────
   82em (1312px) is where the gutter either side of the 34rem measure is finally
   wide enough to hold a readable column: (1312 − 680)/2 = 316px, of which the
   gap takes 28 and a little slack is left against the viewport edge. Below it
   the aside stays in the flow, collapsed — the disclosure is doing the work on
   its own. */
@media screen and (min-width: 82em) {
    .md-typeset details.aside {
        --field-aside-width: clamp(
            10.5rem,
            calc((100vw - var(--field-reading-width)) / 2 - var(--field-aside-gap) - 1.2rem),
            15rem
        );

        float: right;
        clear: right;
        width: var(--field-aside-width);
        margin: 0 calc(-1 * (var(--field-aside-width) + var(--field-aside-gap))) 1.4em 0;
        border-left: 0;
        padding-left: 0;
        font-size: 0.58rem;
    }

    /* Justification needs more measure than a margin column has; in one it just
       opens rivers. */
    .md-typeset details.aside,
    .md-typeset details.aside p,
    .md-typeset details.aside li {
        text-align: left;
    }

    /* The wide-table bleed above spends `(52rem − reading)/2` per side on any
       table with four or more columns. In the margin there is no such slack to
       spend, and a table that took it would be thrown clear off the page — so
       the override has to repeat the `:has()` to outrank it, not merely name
       the class. */
    .md-typeset details.aside .md-typeset__scrollwrap:has(table:not(.highlighttable) td:nth-child(4)),
    .md-typeset details.aside .md-typeset__table:has(table:not(.highlighttable) td:nth-child(4)) {
        width: auto;
        min-width: 0;
        margin-inline: 0;
        display: block;
        overflow-x: auto;
    }
}

/* Printed, an aside comes back into the flow — a margin float against a paper
   width nobody chose is worse than a block. Whether its body prints is the
   browser's call, as for any `<details>`; the title always does. */
@media print {
    .md-typeset details.aside {
        float: none;
        width: auto;
        margin: 1.4em 0;
        border-left: 1px solid var(--mono-border);
        padding-left: 0.75rem;
    }
}

/* ── mini-notation cards (pattern_language.md) ────────────────── */
/* One card per form of the `pat("…")` notation: the notation itself, the piano
   roll of it, the clip of it, then the gloss. Generated by
   `PatMiniNotation.markdownSection`, so the markup below is fixed and can be
   styled tightly rather than defensively.

   The card is a panel and not a bare stack because twenty-seven of these run
   back to back: without an edge, a card's gloss reads as the caption of the
   *next* card's roll. */
.md-typeset .pat-mini {
    background: var(--mono-code-table-bg);
    border: 1px solid var(--mono-border-soft);
    border-radius: 3px;
    padding: 0.7rem 0.85rem 0.5rem;
    margin: 0.9rem 0;
}

/* The notation is the card's heading. Deliberately not an `<h4>`: twenty-seven
   headings would bury the page's real structure in the table of contents, and
   these are looked up by eye, in order, not linked to. */
.md-typeset .pat-mini .pat-mini-source {
    margin: 0 0 0.55rem;
    line-height: 1;
}

.md-typeset .pat-mini .pat-mini-source code {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    background: transparent;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
}

/* The roll sits inside the card, so it must not take the left bleed that
   `.md-typeset img` is given at wide viewports — that would hang it out over
   the card's own border. Repeating the media query is what outranks it. */
.md-typeset .pat-mini img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 2px;
}

@media screen and (min-width: 76.234375em) {
    .md-typeset .pat-mini img {
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
    }
}

/* `color-scheme` is what actually darkens a native player; the theme's own
   colours cannot reach inside the control's shadow DOM. */
.md-typeset .pat-mini audio {
    color-scheme: dark;
    display: block;
    width: 100%;
    height: 30px;
    margin: 0.45rem 0 0.15rem;
}

.md-typeset .pat-mini p {
    margin: 0.4rem 0 0;
}

.md-typeset .pat-mini p:first-of-type {
    color: var(--mono-text);
}

/* Second paragraph of a card is the `note` — the aside that says what to look
   for in the roll. Quieter than the gloss it follows. */
.md-typeset .pat-mini p + p {
    color: var(--mono-text-faint);
}

/* Package hierarchy on the generated reference index: native links and list semantics. */
.md-typeset .reference-map {
    margin: 1.8rem 0 2.4rem;
    color: var(--md-default-fg-color);
}
.md-typeset .reference-map-root {
    padding: 0 0 .65rem;
    border-bottom: 1px solid var(--mono-border);
    font-family: var(--md-code-font);
    font-size: 1.05rem;
}
.md-typeset .reference-map-branches {
    columns: 3 13rem;
    column-gap: 1.6rem;
}
.md-typeset .reference-map-group {
    break-inside: avoid;
    padding: .8rem 0 .4rem;
}
.md-typeset .reference-map h3 {
    margin: 0 0 .5rem;
    font-family: var(--md-code-font);
    font-size: .8rem;
    font-weight: 600;
}
.md-typeset .reference-map ul {
    margin: 0 0 0 .3rem;
    padding: 0;
    list-style: none;
}
.md-typeset .reference-map li {
    position: relative;
    margin: 0;
    padding: .2rem 0 .2rem .85rem;
    border-left: 1px solid var(--mono-border);
    font-size: .67rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.md-typeset .reference-map li::before {
    position: absolute;
    top: .72rem;
    left: 0;
    width: .5rem;
    border-top: 1px solid var(--mono-border);
    content: "";
}
.md-typeset .reference-map li:last-child {
    border-left-color: transparent;
}
.md-typeset .reference-map li:last-child::after {
    position: absolute;
    top: 0;
    left: -1px;
    height: .72rem;
    border-left: 1px solid var(--mono-border);
    content: "";
}
.md-typeset .reference-map a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--mono-border);
    text-underline-offset: .18em;
}
.md-typeset .reference-map a:hover,
.md-typeset .reference-map a:focus-visible {
    text-decoration-color: currentColor;
}

/* Keep each file's location above its linked name without widening the table. */
.md-typeset .codebase-reference .reference-file-path {
    display: block;
    max-width: 18rem;
    margin-bottom: .25rem;
    color: var(--mono-accent);
    font-family: var(--md-code-font);
    font-size: .58rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
}

.md-typeset .codebase-reference tr:has(.reference-internal),
.md-typeset .reference-map .reference-internal {
    opacity: .5;
}

.md-typeset .codebase-reference tr:has(.reference-internal):hover,
.md-typeset .codebase-reference tr:has(.reference-internal):focus-within,
.md-typeset .reference-map .reference-internal:hover,
.md-typeset .reference-map .reference-internal:focus-within {
    opacity: 1;
}