@font-face
{
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/unbounded-latin.woff2") format("woff2");
}

@font-face
{
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/onest-latin.woff2") format("woff2");
}

@font-face
{
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/martian-mono-latin.woff2") format("woff2");
}

/*
 * zerolith brand tokens, "Slab on Basalt". Dark is the default; light applies
 * when the reader prefers it or the root carries data-theme="light". Every
 * surface follows the theme, code included: code sits on the surface plane,
 * basalt-900 on the dark page and white on the light one, with a value of
 * each code role for each theme. The code hues (coral, iris, amber, moss,
 * sky, and ice) color code only; coral is also the dark theme's danger
 * color.
 * Chartreuse is a fill on light grounds, never a text or line color; its text
 * role there is --zl-accent-text.
 */
:root
{
    --zl-basalt-50: #F5F6F8;
    --zl-basalt-100: #E8EAED;
    --zl-basalt-200: #D5DAE0;
    --zl-basalt-300: #C9CED4;
    --zl-basalt-400: #9AA3AD;
    --zl-basalt-500: #737C88;
    --zl-basalt-600: #4F5864;
    --zl-basalt-800: #2A2F37;
    --zl-basalt-900: #171A1F;
    --zl-basalt-950: #0F1114;
    --zl-lichen-200: #C8E679;
    --zl-lichen-300: #AACF16;
    --zl-lichen-700: #4B5E00;

    --zl-font-display: "Unbounded", system-ui, sans-serif;
    --zl-font-text: "Onest", system-ui, sans-serif;
    --zl-font-mono: "Martian Mono", ui-monospace, monospace;
    --zl-weight-display: 600;
    --zl-tracking-display: -0.03em;
    --zl-text-xs: 0.75rem;
    --zl-text-sm: 0.875rem;
    --zl-text-md: 1rem;
    --zl-text-lg: 1.25rem;
    --zl-text-xl: 1.75rem;
    --zl-text-2xl: 2.5rem;
    --zl-text-3xl: 3.5rem;
    --zl-leading-text: 1.6;
    --zl-leading-display: 1.05;

    --zl-space-1: 0.25rem;
    --zl-space-2: 0.5rem;
    --zl-space-3: 0.75rem;
    --zl-space-4: 1rem;
    --zl-space-6: 1.5rem;
    --zl-space-8: 2rem;
    --zl-space-12: 3rem;
    --zl-space-16: 4rem;
    --zl-rule: 2px;
    --zl-radius: 0;

    --zl-code-bg: var(--zl-surface);
    --zl-code-text: var(--zl-basalt-100);
    --zl-code-keyword: #FF7B72;
    --zl-code-function: #D2A8FF;
    --zl-code-type: #FFA657;
    --zl-code-signal: var(--zl-lichen-300);
    --zl-code-binding: var(--zl-lichen-200);
    --zl-code-tag: #7EE787;
    --zl-code-attribute: #79C0FF;
    --zl-code-literal: #79C0FF;
    --zl-code-string: #A5D6FF;
    --zl-code-comment: var(--zl-basalt-400);
    --zl-code-selection: var(--zl-basalt-800);

    color-scheme: dark;
    --zl-bg: var(--zl-basalt-950);
    --zl-surface: var(--zl-basalt-900);
    --zl-line: var(--zl-basalt-800);
    --zl-control-line: var(--zl-basalt-500);
    --zl-text: var(--zl-basalt-100);
    --zl-text-muted: var(--zl-basalt-400);
    --zl-accent: var(--zl-lichen-300);
    --zl-on-accent: var(--zl-basalt-950);
    --zl-accent-text: var(--zl-lichen-300);
    --zl-focus: var(--zl-lichen-300);
    --zl-danger: #FF7B72;
    --zl-warning: #E8C547;
    --zl-hint: #7CB3FF;
    --zl-success: var(--zl-text);
}

@media (prefers-color-scheme: light)
{
    :root:not([data-theme="dark"])
    {
        color-scheme: light;
        --zl-bg: var(--zl-basalt-50);
        --zl-surface: #FFFFFF;
        --zl-line: var(--zl-basalt-200);
        --zl-text: var(--zl-basalt-950);
        --zl-text-muted: var(--zl-basalt-600);
        --zl-accent-text: var(--zl-lichen-700);
        --zl-focus: var(--zl-lichen-700);
        --zl-danger: #C42B2B;
        --zl-warning: #7A5B00;
        --zl-hint: #1F5BB8;
        --zl-code-text: var(--zl-basalt-950);
        --zl-code-keyword: #CF222E;
        --zl-code-function: #8250DF;
        --zl-code-type: #953800;
        --zl-code-signal: var(--zl-lichen-700);
        --zl-code-binding: #3A4A00;
        --zl-code-tag: #116329;
        --zl-code-attribute: #0550AE;
        --zl-code-literal: #0550AE;
        --zl-code-string: #0A3069;
        --zl-code-comment: var(--zl-basalt-600);
        --zl-code-selection: var(--zl-basalt-200);
    }
}

:root[data-theme="light"]
{
    color-scheme: light;
    --zl-bg: var(--zl-basalt-50);
    --zl-surface: #FFFFFF;
    --zl-line: var(--zl-basalt-200);
    --zl-text: var(--zl-basalt-950);
    --zl-text-muted: var(--zl-basalt-600);
    --zl-accent-text: var(--zl-lichen-700);
    --zl-focus: var(--zl-lichen-700);
    --zl-danger: #C42B2B;
    --zl-warning: #7A5B00;
    --zl-hint: #1F5BB8;
    --zl-code-text: var(--zl-basalt-950);
    --zl-code-keyword: #CF222E;
    --zl-code-function: #8250DF;
    --zl-code-type: #953800;
    --zl-code-signal: var(--zl-lichen-700);
    --zl-code-binding: #3A4A00;
    --zl-code-tag: #116329;
    --zl-code-attribute: #0550AE;
    --zl-code-literal: #0550AE;
    --zl-code-string: #0A3069;
    --zl-code-comment: var(--zl-basalt-600);
    --zl-code-selection: var(--zl-basalt-200);
}

/*
 * The docs site's stylesheet, built on the brand's tokens, which the docs
 * build writes ahead of it with the font faces. The brand in brand/ is the
 * standard: basalt planes, 2 px rules, square corners, and chartreuse only
 * on the mark, the primary action, the active navigation item, signals in
 * code, and focus.
 */
:root
{
    --docs-mark: var(--zl-lichen-300);
    --docs-header: 72px;
}

@media (prefers-color-scheme: light)
{
    :root:not([data-theme="dark"])
    {
        --docs-mark: var(--zl-basalt-950);
    }
}

:root[data-theme="light"]
{
    --docs-mark: var(--zl-basalt-950);
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--docs-header) + var(--zl-space-6));
    scrollbar-gutter: stable;
}

html:has(dialog[open])
{
    overflow: hidden;
    background: color-mix(in srgb, var(--zl-bg) 45%, #0F1114);
}

::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
    background: transparent;
}

::-webkit-scrollbar-thumb
{
    border: var(--zl-rule) solid transparent;
    background: var(--zl-control-line) padding-box;
}

::-webkit-scrollbar-thumb:hover
{
    background-color: var(--zl-text-muted);
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner
{
    display: none;
    background: transparent;
}

@supports not selector(::-webkit-scrollbar)
{
    *
    {
        scrollbar-width: thin;
        scrollbar-color: var(--zl-control-line) transparent;
    }
}

body
{
    margin: 0;
    background: var(--zl-bg);
    color: var(--zl-text);
    font-family: var(--zl-font-text);
    font-size: var(--zl-text-md);
    line-height: var(--zl-leading-text);
}

::selection
{
    background: var(--zl-line);
}

a
{
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: var(--zl-rule);
    text-decoration-color: var(--zl-control-line);
    text-underline-offset: 0.25em;
}

a:hover
{
    text-decoration-color: var(--zl-text);
}

:focus-visible
{
    outline: var(--zl-rule) solid var(--zl-focus);
    outline-offset: 2px;
}

svg
{
    display: block;
}

:root:not(.js) .theme-toggle,
:root:not(.js) .copy
{
    display: none;
}

.skip
{
    position: absolute;
    top: -100px;
    left: var(--zl-space-4);
    z-index: 30;
    padding: var(--zl-space-3) var(--zl-space-4);
    background: var(--zl-accent);
    color: var(--zl-on-accent);
    font-weight: 600;
    text-decoration: none;
}

.skip:focus
{
    top: var(--zl-space-4);
}

.top
{
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--zl-space-6);
    height: var(--docs-header);
    padding: 0 var(--zl-space-6);
    background: var(--zl-bg);
    border-bottom: var(--zl-rule) solid var(--zl-line);
}

.home
{
    display: flex;
    align-items: center;
    color: var(--zl-text);
    text-decoration: none;
}

.home svg
{
    width: auto;
    height: 28px;
}

.stele
{
    fill: var(--docs-mark);
}

.tag
{
    padding: var(--zl-space-2) var(--zl-space-3);
    border: var(--zl-rule) solid var(--zl-line);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.sections
{
    display: flex;
    align-self: stretch;
    gap: var(--zl-space-6);
    margin-left: auto;
}

.sections a
{
    display: flex;
    align-items: center;
    margin-bottom: calc(-1 * var(--zl-rule));
    border-bottom: var(--zl-rule) solid transparent;
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.sections a:hover
{
    color: var(--zl-text);
}

.sections a[aria-current]
{
    color: var(--zl-accent-text);
    border-bottom-color: var(--zl-accent-text);
}

.icon
{
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--zl-rule) solid var(--zl-control-line);
    border-radius: 0;
    background: transparent;
    color: var(--zl-text);
    cursor: pointer;
}

.icon:hover
{
    border-color: var(--zl-text);
}

.icon svg
{
    width: 24px;
    height: 24px;
}

.menu-toggle
{
    display: none;
}

.theme-toggle .moon
{
    display: none;
}

@media (prefers-color-scheme: light)
{
    :root:not([data-theme="dark"]) .theme-toggle .sun
    {
        display: none;
    }

    :root:not([data-theme="dark"]) .theme-toggle .moon
    {
        display: block;
    }
}

:root[data-theme="light"] .theme-toggle .sun
{
    display: none;
}

:root[data-theme="light"] .theme-toggle .moon
{
    display: block;
}

.frame
{
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr) 240px;
    max-width: 1520px;
    margin: 0 auto;
}

.side
{
    position: sticky;
    top: calc(var(--docs-header) + var(--zl-rule));
    height: calc(100vh - var(--docs-header) - var(--zl-rule));
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: var(--zl-space-6);
    border-right: var(--zl-rule) solid var(--zl-line);
}

.side h2,
.toc h2
{
    margin: var(--zl-space-8) 0 var(--zl-space-2);
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: var(--zl-leading-text);
    text-transform: uppercase;
}

.side ul,
.toc ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.side li a
{
    display: block;
    padding: var(--zl-space-1) var(--zl-space-3);
    border-left: var(--zl-rule) solid transparent;
    color: var(--zl-text-muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.side .reference a
{
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
}

.side li a:hover
{
    color: var(--zl-text);
}

.side li a[aria-current="page"]
{
    border-left-color: var(--zl-accent-text);
    color: var(--zl-accent-text);
}

.side .numbered
{
    counter-reset: step;
}

.side .numbered a
{
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
}

.side .numbered a::before
{
    content: counter(step);
    counter-increment: step;
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    font-variant-numeric: tabular-nums;
    line-height: 2;
}

main
{
    min-width: 0;
    padding: var(--zl-space-12) var(--zl-space-12) var(--zl-space-16);
}

article
{
    max-width: 52rem;
}

article > :first-child
{
    margin-top: 0;
}

article h1,
article h2,
article h3
{
    font-family: var(--zl-font-display);
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
    line-height: var(--zl-leading-display);
    text-wrap: balance;
}

article h1
{
    margin: 0 0 var(--zl-space-6);
    font-size: clamp(1.75rem, 3.2vw, var(--zl-text-2xl));
    overflow-wrap: anywhere;
}

article h2
{
    margin: var(--zl-space-12) 0 var(--zl-space-4);
    padding-top: var(--zl-space-8);
    border-top: var(--zl-rule) solid var(--zl-line);
    font-size: 1.5rem;
}

article h3
{
    margin: var(--zl-space-8) 0 var(--zl-space-3);
    font-size: 1.125rem;
}

article p,
article ul,
article ol
{
    margin: 0 0 var(--zl-space-4);
}

article p,
article li
{
    max-width: 66ch;
}

article ul,
article ol
{
    padding-left: 1.25em;
}

article li + li
{
    margin-top: var(--zl-space-1);
}

article strong
{
    font-weight: 600;
}

article :not(pre) > code
{
    padding: 0.125em 0.375em;
    background: var(--zl-surface);
    font-family: var(--zl-font-mono);
    font-size: 0.875em;
    overflow-wrap: break-word;
}

article blockquote
{
    margin: var(--zl-space-6) 0;
    padding: var(--zl-space-4);
    border: var(--zl-rule) solid var(--zl-line);
}

article blockquote > :last-child
{
    margin-bottom: 0;
}

.code
{
    position: relative;
    margin: var(--zl-space-6) 0;
}

.code pre
{
    margin: 0;
    padding: var(--zl-space-6);
    overflow-x: auto;
    border: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-code-bg);
    color: var(--zl-code-text);
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    tab-size: 4;
}

.code code
{
    font: inherit;
}

.code ::selection
{
    background: var(--zl-code-selection);
}

.code .k
{
    color: var(--zl-code-keyword);
}

.code .s
{
    color: var(--zl-code-string);
}

.code .c
{
    color: var(--zl-code-comment);
}

.code .b,
.editor .b
{
    color: var(--zl-code-binding);
}

.code .t,
.editor .t
{
    color: var(--zl-code-tag);
}

.code .a,
.editor .a
{
    color: var(--zl-code-attribute);
}

.code .n,
.editor .n
{
    color: var(--zl-code-literal);
}

.code .f,
.editor .f
{
    color: var(--zl-code-function);
}

.code .y,
.editor .y
{
    color: var(--zl-code-type);
}

.code .g,
.editor .g
{
    color: var(--zl-code-signal);
}

.code .copy
{
    position: absolute;
    top: var(--zl-space-2);
    right: var(--zl-space-2);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--zl-rule) solid var(--zl-line);
    border-radius: 0;
    background: var(--zl-code-bg);
    color: var(--zl-code-comment);
    cursor: pointer;
    opacity: 0;
}

.code:hover .copy,
.code .copy:focus-visible,
.code .copy[data-copied]
{
    opacity: 1;
}

.code .copy:hover
{
    border-color: var(--zl-code-text);
    color: var(--zl-code-text);
}

.code .copy:focus-visible
{
    outline-color: var(--zl-focus);
}

.code .copy svg
{
    width: 20px;
    height: 20px;
}

.code .copy .done,
.code .copy[data-copied] .idle
{
    display: none;
}

.code .copy[data-copied] .done
{
    display: block;
}

@media (hover: none)
{
    .code .copy
    {
        opacity: 1;
    }
}

.file
{
    margin: var(--zl-space-6) 0;
    border: var(--zl-rule) solid var(--zl-line);
}

.file-bar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--zl-space-2) var(--zl-space-4);
    min-height: 52px;
    padding: var(--zl-space-1) var(--zl-space-2) var(--zl-space-1) var(--zl-space-4);
    border-bottom: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-surface);
}

.file-name
{
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: var(--zl-space-2);
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
}

.file-name svg
{
    flex: none;
    color: var(--zl-text-muted);
}

.file-views
{
    display: flex;
}

.file-views button
{
    height: 40px;
    padding: 0 var(--zl-space-3);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.file-views button:hover
{
    color: var(--zl-text);
}

.file-views button[aria-selected="true"]
{
    color: var(--zl-accent-text);
    box-shadow: inset 0 calc(-1 * var(--zl-rule)) 0 var(--zl-accent-text);
}

.file-views button:focus-visible,
.file .copy:focus-visible
{
    outline: var(--zl-rule) solid var(--zl-focus);
    outline-offset: calc(-1 * var(--zl-rule));
}

.file .copy
{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: var(--zl-rule) solid transparent;
    border-radius: 0;
    background: none;
    color: var(--zl-text-muted);
    cursor: pointer;
}

.file .copy:hover
{
    border-color: var(--zl-line);
    color: var(--zl-text);
}

.file .copy svg
{
    width: 18px;
    height: 18px;
}

.file .copy .done,
.file .copy[data-copied] .idle
{
    display: none;
}

.file .copy[data-copied] .done
{
    display: block;
}

.file-preview
{
    padding: var(--zl-space-6);
}

.file-preview > :first-child
{
    margin-top: 0;
}

.file-preview > :last-child
{
    margin-bottom: 0;
}

.file-preview h3,
.file-preview h4,
.file-preview h5,
.file-preview h6
{
    font-family: var(--zl-font-text);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3;
}

.file-preview h3
{
    margin: 0 0 var(--zl-space-3);
    font-size: 1.25rem;
}

.file-preview h4,
.file-preview h5,
.file-preview h6
{
    margin: var(--zl-space-6) 0 var(--zl-space-2);
    font-size: 1rem;
}

@media (max-width: 480px)
{
    .file-bar
    {
        gap: var(--zl-space-2);
        padding-left: var(--zl-space-3);
    }

    .file-views button
    {
        padding: 0 var(--zl-space-2);
    }
}

.callout
{
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--zl-space-3);
    margin: var(--zl-space-6) 0;
    padding: var(--zl-space-4);
    border: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-surface);
}

.callout > svg
{
    width: 24px;
    height: 24px;
    color: var(--zl-hint);
}

.callout-warning > svg
{
    color: var(--zl-warning);
}

.callout-error > svg
{
    color: var(--zl-danger);
}

.callout-body > :first-child
{
    margin-top: 0;
}

.callout-body > :last-child
{
    margin-bottom: 0;
}

article .callout :not(pre) > code
{
    background: var(--zl-bg);
}

.code-link
{
    text-decoration: none;
}

.code-link code
{
    border-bottom: var(--zl-rule) solid var(--zl-control-line);
}

.code-link:hover code
{
    border-bottom-color: var(--zl-text);
}

.tree
{
    margin: var(--zl-space-6) 0;
    padding: var(--zl-space-4) var(--zl-space-6);
    border: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-code-bg);
    list-style: none;
}

article .tree li
{
    display: grid;
    grid-template-columns: var(--tree-names) minmax(0, 1fr);
    column-gap: var(--zl-space-4);
    align-items: baseline;
    max-width: none;
    margin: 0;
    padding: 3px 0;
    background-image: repeating-linear-gradient(to right, var(--zl-line) 0 var(--zl-rule), transparent var(--zl-rule) 3ch);
    background-position: 0.5ch 0;
    background-size: calc(var(--depth) * 3ch) 100%;
    background-repeat: no-repeat;
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
}

.tree-name
{
    display: flex;
    align-items: center;
    gap: 1ch;
    padding-left: calc(var(--depth) * 3ch);
    color: var(--zl-code-text);
    white-space: nowrap;
}

.tree-name svg
{
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--zl-code-comment);
}

.tree-name.folder
{
    font-weight: 600;
}

.tree-note
{
    color: var(--zl-text-muted);
    font-family: var(--zl-font-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 640px)
{
    .tree
    {
        padding: var(--zl-space-3) var(--zl-space-4);
    }

    article .tree li
    {
        grid-template-columns: calc(var(--depth) * 3ch + 14px + 1ch) minmax(0, 1fr);
        column-gap: 0;
        padding: var(--zl-space-1) 0;
    }

    .tree-name
    {
        grid-column: 1 / -1;
    }

    .tree-note
    {
        grid-column: 2;
    }
}

.file-source pre
{
    margin: 0;
    padding: var(--zl-space-6);
    background: var(--zl-code-bg);
    color: var(--zl-code-text);
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.table
{
    margin: var(--zl-space-6) 0;
    overflow-x: auto;
    border: var(--zl-rule) solid var(--zl-line);
}

.table table
{
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.table th,
.table td
{
    padding: var(--zl-space-3) var(--zl-space-4);
    text-align: left;
    vertical-align: top;
}

.table th
{
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td
{
    border-top: var(--zl-rule) solid var(--zl-line);
    font-size: 0.9375rem;
}

.pager
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--zl-space-4);
    max-width: 52rem;
    margin-top: var(--zl-space-16);
}

.pager a
{
    display: grid;
    gap: var(--zl-space-1);
    padding: var(--zl-space-4) var(--zl-space-6);
    border: var(--zl-rule) solid var(--zl-line);
    color: var(--zl-text);
    text-decoration: none;
}

.pager a:hover
{
    border-color: var(--zl-text);
}

.pager .next
{
    grid-column: 2;
    text-align: right;
}

.pager .label
{
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pager .title
{
    font-family: var(--zl-font-display);
    font-size: 1.125rem;
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
    line-height: 1.2;
}

.pager + .page-foot
{
    margin-top: var(--zl-space-8);
}

.page-foot
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--zl-space-3) var(--zl-space-6);
    max-width: 52rem;
    margin-top: var(--zl-space-16);
    padding-top: var(--zl-space-6);
    border-top: var(--zl-rule) solid var(--zl-line);
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toc
{
    position: sticky;
    top: calc(var(--docs-header) + var(--zl-rule));
    align-self: start;
    max-height: calc(100vh - var(--docs-header) - var(--zl-rule));
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: var(--zl-space-12) var(--zl-space-6) var(--zl-space-6) 0;
}

.toc h2
{
    margin-top: 0;
}

.toc a
{
    display: block;
    padding: var(--zl-space-1) 0;
    color: var(--zl-text-muted);
    font-size: var(--zl-text-sm);
    text-decoration: none;
}

.toc a:hover
{
    color: var(--zl-text);
}

@media (max-width: 1439px)
{
    .frame
    {
        grid-template-columns: 288px minmax(0, 1fr);
    }

    .toc
    {
        display: none;
    }
}

@media (max-width: 960px)
{
    .frame
    {
        display: block;
    }

    .sections
    {
        display: none;
    }

    .menu-toggle
    {
        display: inline-grid;
        margin-left: auto;
    }

    [data-menu-open] .top
    {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--docs-header);
        padding-block: var(--zl-space-3);
    }

    [data-menu-open] .sections
    {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        order: 1;
        gap: 0;
        margin: 0;
    }

    [data-menu-open] .sections a
    {
        margin: 0;
        padding: var(--zl-space-3) 0;
        border-top: var(--zl-rule) solid var(--zl-line);
        border-bottom: 0;
    }

    .side
    {
        position: static;
        height: auto;
        padding: var(--zl-space-4) var(--zl-space-6);
        border-right: 0;
        border-bottom: var(--zl-rule) solid var(--zl-line);
    }

    #sidebar
    {
        display: none;
    }

    [data-menu-open] #sidebar
    {
        display: block;
    }

    main
    {
        padding: var(--zl-space-8) var(--zl-space-6) var(--zl-space-12);
    }
}

@media (max-width: 640px)
{
    .top
    {
        gap: var(--zl-space-3);
        padding: 0 var(--zl-space-4);
    }

    .tag
    {
        display: none;
    }

    .side
    {
        padding: var(--zl-space-4);
    }

    main
    {
        padding: var(--zl-space-6) var(--zl-space-4) var(--zl-space-12);
    }

    .code pre
    {
        padding: var(--zl-space-4);
    }
}

.button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zl-space-2);
    height: 48px;
    padding: 0 var(--zl-space-6);
    border: var(--zl-rule) solid var(--zl-text);
    border-radius: 0;
    background: transparent;
    color: var(--zl-text);
    font-family: var(--zl-font-text);
    font-size: var(--zl-text-md);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.button:hover
{
    background: var(--zl-text);
    color: var(--zl-bg);
}

.button.primary
{
    border-color: var(--zl-accent);
    background: var(--zl-accent);
    color: var(--zl-on-accent);
}

.button.primary:hover
{
    border-color: var(--zl-lichen-200);
    background: var(--zl-lichen-200);
}

.button[data-stale]::after
{
    content: "";
    width: 8px;
    height: 8px;
    background: currentColor;
}

main[tabindex="-1"]:focus
{
    outline: none;
}

.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.button svg
{
    width: 20px;
    height: 20px;
}

.button .idle,
.button .done
{
    display: inline-flex;
    align-items: center;
    gap: var(--zl-space-2);
}

.button .done,
.button[data-copied] .idle
{
    display: none;
}

.button[data-copied] .done
{
    display: inline-flex;
}

::highlight(live-output)
{
    background-color: var(--zl-text);
    color: var(--zl-bg);
}

::highlight(live-code)
{
    background-color: var(--zl-code-text);
    color: var(--zl-code-bg);
}

.wide
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--zl-space-6);
}

.wide :not(pre) > code
{
    padding: 0.125em 0.375em;
    background: var(--zl-surface);
    font-family: var(--zl-font-mono);
    font-size: 0.875em;
    white-space: nowrap;
}

.masthead
{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--zl-space-12);
    padding: var(--zl-space-6) 0 var(--zl-space-4);
}

.masthead h1
{
    margin: 0;
    font-family: var(--zl-font-display);
    font-size: clamp(2.25rem, 4.2vw, var(--zl-text-3xl));
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
    line-height: var(--zl-leading-display);
}

.masthead h1 span
{
    display: block;
}

.lead
{
    max-width: 44ch;
    margin: var(--zl-space-4) 0 0;
    color: var(--zl-text-muted);
    font-size: var(--zl-text-lg);
}

.command
{
    display: flex;
    max-width: 560px;
    margin-top: var(--zl-space-6);
    border: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-code-bg);
}

.wide .command code
{
    flex: 1;
    min-width: 0;
    padding: var(--zl-space-3) var(--zl-space-4);
    overflow-x: auto;
    background: none;
    color: var(--zl-code-text);
    font-size: var(--zl-text-sm);
    line-height: 20px;
    white-space: nowrap;
}

.command code span
{
    white-space: nowrap;
}

.command .button
{
    height: 44px;
    border: 0;
}

.figure .line
{
    display: block;
    min-height: 1lh;
    padding-left: calc(var(--indent) + 2ch);
    text-indent: -2ch;
}

.command .button:focus-visible
{
    outline-color: var(--zl-on-accent);
    outline-offset: -4px;
}

.ways-in
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--zl-space-3) var(--zl-space-6);
    margin: var(--zl-space-4) 0 0;
    font-weight: 600;
}

.features h2
{
    margin: 0 0 var(--zl-space-2);
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.features ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.features li
{
    padding: var(--zl-space-1) 0;
    border-top: var(--zl-rule) solid var(--zl-line);
    color: var(--zl-text-muted);
    font-size: var(--zl-text-sm);
}

.features li a
{
    color: var(--zl-text);
    font-weight: 600;
}

.figure
{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    margin: 0 0 var(--zl-space-16);
}

.figure .code
{
    margin: 0;
}

.figure .code pre
{
    height: 100%;
}

.run
{
    display: flex;
    flex-direction: column;
    border: var(--zl-rule) solid var(--zl-line);
    border-left: 0;
    background: var(--zl-surface);
}

.run .output
{
    padding: var(--zl-space-8);
}

.run .output p
{
    margin: 0 0 var(--zl-space-6);
    font-size: var(--zl-text-lg);
}

.run .output button
{
    height: 48px;
    padding: 0 var(--zl-space-6);
    border: var(--zl-rule) solid var(--zl-text);
    border-radius: 0;
    background: transparent;
    color: var(--zl-text);
    font-family: var(--zl-font-text);
    font-size: var(--zl-text-md);
    font-weight: 600;
    cursor: pointer;
}

.run .output button:hover
{
    background: var(--zl-text);
    color: var(--zl-surface);
}

.readout
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    flex: 1;
    border-top: var(--zl-rule) solid var(--zl-line);
}

.readout div
{
    padding: var(--zl-space-4);
}

.readout div + div
{
    border-left: var(--zl-rule) solid var(--zl-line);
}

.readout dt
{
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.readout dd
{
    margin: var(--zl-space-2) 0 0;
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xl);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.figure figcaption,
.diagram figcaption
{
    grid-column: 1 / -1;
    max-width: 90ch;
    margin-top: var(--zl-space-3);
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    line-height: 1.7;
}

.band
{
    padding: var(--zl-space-16) 0;
    border-top: var(--zl-rule) solid var(--zl-line);
}

.band h2
{
    margin: 0;
    font-family: var(--zl-font-display);
    font-size: clamp(1.75rem, 3.2vw, var(--zl-text-2xl));
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
    line-height: var(--zl-leading-display);
    text-wrap: balance;
}

.band p
{
    max-width: 66ch;
    margin: var(--zl-space-4) 0 0;
}

.band > p
{
    color: var(--zl-text-muted);
}

.band .table
{
    margin: var(--zl-space-8) 0 0;
}

.table tbody th
{
    border-top: var(--zl-rule) solid var(--zl-line);
    color: var(--zl-text);
    font-family: var(--zl-font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
}

.diagram
{
    margin: var(--zl-space-8) 0 0;
}

.cells
{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--zl-rule);
    border: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-line);
}

.part
{
    display: grid;
    grid-column: span 2;
    align-content: start;
    gap: var(--zl-space-2);
    padding: var(--zl-space-4);
    background: var(--zl-bg);
    color: var(--zl-text);
    text-decoration: none;
}

.part:hover
{
    background: var(--zl-surface);
}

.part .mark svg
{
    width: 24px;
    height: 24px;
}

.part .name
{
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
}

.part .text
{
    color: var(--zl-text-muted);
    font-size: var(--zl-text-sm);
}

.part.core
{
    grid-column: 1 / -1;
    padding: var(--zl-space-6);
    background: var(--zl-surface);
}

.part.core:hover
{
    background: var(--zl-bg);
}

.part.core .name
{
    font-family: var(--zl-font-display);
    font-size: var(--zl-text-lg);
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
}

.part.core .text
{
    font-size: var(--zl-text-md);
}

.part.tool
{
    grid-column: span 3;
}

.start .columns
{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--zl-space-8);
    align-items: start;
    margin-top: var(--zl-space-8);
}

.start .columns p:first-child
{
    margin-top: 0;
}

.start .code
{
    margin: 0;
}

.index
{
    margin: var(--zl-space-8) 0 0;
    padding: 0;
    border-top: var(--zl-rule) solid var(--zl-line);
    list-style: none;
}

.index li
{
    border-bottom: var(--zl-rule) solid var(--zl-line);
}

.index a
{
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) 24px;
    gap: var(--zl-space-6);
    align-items: center;
    padding: var(--zl-space-6) 0;
    color: var(--zl-text);
    text-decoration: none;
}

.index .name
{
    font-family: var(--zl-font-display);
    font-size: var(--zl-text-lg);
    font-weight: var(--zl-weight-display);
    letter-spacing: var(--zl-tracking-display);
    line-height: var(--zl-leading-display);
}

.index .text
{
    color: var(--zl-text-muted);
}

.index a:hover .text
{
    color: var(--zl-text);
}

.index svg
{
    width: 24px;
    height: 24px;
}

.site-foot
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--zl-space-6);
    padding: var(--zl-space-12) 0 var(--zl-space-16);
    border-top: var(--zl-rule) solid var(--zl-line);
    color: var(--zl-text-muted);
    font-size: var(--zl-text-sm);
}

.site-foot nav
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--zl-space-3) var(--zl-space-6);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-foot nav a
{
    color: var(--zl-text-muted);
    text-decoration: none;
}

.site-foot nav a:hover
{
    color: var(--zl-text);
}

.site-foot p
{
    margin: 0;
}

.missing
{
    grid-template-columns: minmax(0, 1fr);
    min-height: 60vh;
}

.wide:has(.playground)
{
    max-width: none;
    padding: 0;
}

.playground
{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - var(--docs-header) - var(--zl-rule));
    height: calc(100dvh - var(--docs-header) - var(--zl-rule));
}

.playground .bar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--zl-space-3) var(--zl-space-4);
    padding: var(--zl-space-3) var(--zl-space-6);
    border-bottom: var(--zl-rule) solid var(--zl-line);
}

.field
{
    display: flex;
    align-items: center;
    gap: var(--zl-space-3);
}

.field span
{
    color: var(--zl-text-muted);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field select
{
    height: 48px;
    padding: 0 var(--zl-space-4);
    border: var(--zl-rule) solid var(--zl-control-line);
    border-radius: 0;
    background: var(--zl-bg);
    color: var(--zl-text);
    font-family: var(--zl-font-mono);
    font-size: var(--zl-text-sm);
}

.field select:focus-visible
{
    outline: none;
    border-color: var(--zl-focus);
    box-shadow: inset 0 0 0 1px var(--zl-focus);
}

.playground .hint
{
    margin: 0 0 0 auto;
    color: var(--zl-text-muted);
    font-size: 0.8125rem;
}

.panes
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
}

.editor
{
    position: relative;
    min-height: 0;
    border-right: var(--zl-rule) solid var(--zl-line);
    background: var(--zl-code-bg);
}

.editor pre,
.editor textarea
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--zl-space-6);
    border: 0;
    overflow: auto;
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
    letter-spacing: normal;
    line-height: 1.7;
    tab-size: 4;
    white-space: pre;
}

.editor pre
{
    color: var(--zl-code-text);
    pointer-events: none;
}

.editor code
{
    font: inherit;
}

.editor .k
{
    color: var(--zl-code-keyword);
}

.editor .s
{
    color: var(--zl-code-string);
}

.editor .c
{
    color: var(--zl-code-comment);
}

.editor textarea
{
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--zl-code-text);
}

.editor textarea::selection
{
    background: color-mix(in srgb, var(--zl-code-text) 22%, transparent);
    color: transparent;
}

.editor textarea:focus-visible
{
    outline: var(--zl-rule) solid var(--zl-focus);
    outline-offset: calc(-1 * var(--zl-rule));
}

.preview
{
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(96px, 30%);
    min-height: 0;
}

.preview iframe
{
    width: 100%;
    height: 100%;
    border: 0;
}

.console
{
    overflow: auto;
    padding: var(--zl-space-3) var(--zl-space-6);
    border-top: var(--zl-rule) solid var(--zl-line);
    font-family: var(--zl-font-mono);
    font-size: 0.8125rem;
}

.console:empty::before
{
    content: "Console output shows here.";
    color: var(--zl-text-muted);
}

.console p
{
    margin: 0;
    padding: var(--zl-space-1) 0;
    overflow-wrap: anywhere;
}

.console .warn
{
    color: var(--zl-warning);
}

.console .error
{
    color: var(--zl-danger);
}

.noscript
{
    padding: var(--zl-space-6);
}

:root.js .noscript
{
    display: none;
}

@media (max-width: 960px)
{
    .masthead,
    .figure,
    .start .columns
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .run
    {
        border-top: 0;
        border-left: var(--zl-rule) solid var(--zl-line);
    }

    .cells
    {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .playground
    {
        height: auto;
    }

    .panes
    {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 55vh 55vh;
    }

    .editor
    {
        border-right: 0;
        border-bottom: var(--zl-rule) solid var(--zl-line);
    }

    .playground .hint
    {
        flex-basis: 100%;
        margin: 0;
    }
}

@media (max-width: 640px)
{
    .wide
    {
        padding: 0 var(--zl-space-4);
    }

    .masthead
    {
        padding: var(--zl-space-8) 0;
    }

    .command
    {
        flex-direction: column;
    }

    .wide .command code
    {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .figure .code pre
    {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .band
    {
        padding: var(--zl-space-12) 0;
    }

    .cells
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .part
    {
        grid-column: span 1;
    }

    .part.tool
    {
        grid-column: span 2;
    }

    .part .name
    {
        font-size: var(--zl-text-xs);
        white-space: nowrap;
    }

    .readout div
    {
        padding: var(--zl-space-3);
    }

    .readout dd
    {
        font-size: var(--zl-text-lg);
    }

    .run .output
    {
        padding: var(--zl-space-6);
    }

    .index a
    {
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: var(--zl-space-2) var(--zl-space-4);
    }

    .index .text
    {
        grid-row: 2;
    }

    .playground .bar
    {
        padding: var(--zl-space-3) var(--zl-space-4);
    }

    .band .table
    {
        overflow: visible;
        border: 0;
    }

    .band .table table,
    .band .table tbody,
    .band .table tr,
    .band .table th,
    .band .table td
    {
        display: block;
    }

    .band .table thead
    {
        display: none;
    }

    .band .table tr
    {
        padding: var(--zl-space-3) 0;
        border-top: var(--zl-rule) solid var(--zl-line);
    }

    .band .table tbody th,
    .band .table tbody td
    {
        padding: var(--zl-space-1) 0;
        border: 0;
    }

    .band .table td::before
    {
        content: attr(data-label);
        display: block;
        color: var(--zl-text-muted);
        font-family: var(--zl-font-mono);
        font-size: var(--zl-text-xs);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}