.wrap { max-width: 1020px }
.prose > :not(.toc, .page-head, .docs-bar) { max-width: 680px }
.topbar { margin-bottom: 2.5rem }
.page-nav { display: flex; align-items: baseline; gap: .4rem 1.25rem; min-width: 0;
            font-size: var(--text-sm); color: var(--graphite) }
.page-nav a { padding: .2rem 0; white-space: nowrap }
h1 { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; margin: 0 0 1rem;
     letter-spacing: -.01em; line-height: 1.2 }
h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink);
     margin: 2.5rem 0 .75rem; letter-spacing: -.005em }
.prose h3 { font-family: var(--serif); font-size: var(--text-lg); font-weight: 500; color: var(--ink);
            margin: 1.75rem 0 .5rem; letter-spacing: -.005em }
.prose h2 + h3 { margin-top: 1rem }
.prose p, .prose li { font-size: var(--text-body); line-height: 1.7; color: var(--ink-soft) }
.prose p { margin: 0 0 1rem }
.prose .lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink); margin-bottom: 1.75rem }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.2rem }
.prose ol { padding-left: 1.5rem }
.prose li { margin-bottom: .5rem }
.prose a { color: var(--ink); --line-colour: var(--pencil) }
.prose a:hover { --line-colour: currentColor }
.prose a:has(> code) { background-image: none }
.prose a code { --lined: inherit; text-shadow: none; text-decoration-line: underline; text-decoration-thickness: 1px;
                 text-underline-offset: 1px;
                 text-decoration-color: color-mix(in srgb, var(--line-colour) calc(var(--lined) * 100%), transparent) }
.prose b, .prose strong { font-weight: 500; color: var(--ink) }
code { font-size: .875em; background: var(--rule-faint); border: 1px solid var(--rule);
       border-radius: 4px; padding: .05em .2em; overflow-wrap: anywhere }
.snippet { margin: 0 0 1.25rem }
.snippet code { background: none; border: 0; border-radius: 0; padding: 0 }
@media (max-width: 480px) { h1 { font-size: 1.6rem } .prose .lede { font-size: 1.05rem } }

.prose [hidden] { display: none }

.prose :is(h2, h3)[id] { scroll-margin-top: 1rem }
:is(h2, h3) code { font-size: .8em }

.prose .table { overflow-x: auto; margin: 0 0 1.25rem }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); line-height: 1.45 }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .55rem .9rem .55rem 0;
                       border-bottom: 1px solid var(--rule); color: var(--ink-soft) }
.prose thead th { font-weight: 500; color: var(--graphite) }
.prose tbody th { font-weight: 500; color: var(--ink); white-space: nowrap }

.prose details { margin: 0 0 1rem }
.prose summary { cursor: pointer; font-size: var(--text-body); color: var(--ink); width: fit-content }
.prose summary:focus-visible { border-radius: 2px }
.prose details p { margin: .75rem 0 0; font-size: var(--text-sm); line-height: 2 }

.prose h2:has(+ .docs-list) { padding-top: 1.5rem; border-top: 1px solid var(--rule) }
.prose .docs-find + h2 { margin-top: 1.75rem; padding-top: 0; border-top: 0 }
.prose .docs-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.25rem;
                    padding: 0; margin: 1.1rem 0 1rem }
.prose .docs-list > li { margin: 0 }
.prose .docs-list > li:has(.docs-children li:nth-child(4)) { grid-column: 1 / -1 }
.docs-list a { font-weight: 500 }
.docs-list span { display: block; margin-top: .2rem; font-size: var(--text-body); line-height: 1.55; color: var(--graphite) }
@media (max-width: 559.98px) { .prose .docs-list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem } }
.prose .docs-children { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem }
.prose .docs-children li { margin: 0; font-size: var(--text-body) }
.docs-children a { font-weight: 400 }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; list-style: none; margin: 0 0 .5rem; padding: 0;
             font-size: var(--text-sm); color: var(--graphite) }
.crumbs li + li::before { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 .6em .12em .4em;
                          border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) }

.find { margin: 0 0 1.25rem }
.find input[type="search"] { flex: 1; height: 2.5rem; padding: 0 .7rem 0 2.1rem; font-size: var(--text-body) }
.find-icon { left: .72rem }

.prose .docs-count { margin: 0 0 1rem; font-size: var(--text-sm); color: var(--graphite) }
.prose .docs-results { list-style: none; padding: 0; margin: 0 }
.docs-results li { margin: 0 0 1.25rem }
.docs-results .page { display: block; font-size: var(--text-sm); color: var(--graphite) }
.docs-results a { font-weight: 500 }
.prose .docs-results p { margin: .2rem 0 0; font-size: var(--text-body); line-height: 1.55 }
.prose mark { background: var(--highlighter); color: var(--ink); border-radius: 2px; padding: 0 .1em }
@media (max-width: 480px) { .find input[type="search"] { font-size: 16px } }
.docs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0 0 .5rem }
.docs-bar .crumbs ol { margin: 0 }
.docs-jump { flex: 0 1 15rem; margin: 0 0 0 auto }
.docs-jump input[type="search"] { height: 2rem; font-size: var(--text-sm) }
@media (max-width: 480px) {
  .docs-bar { margin-bottom: 1rem }
  .docs-jump { flex-basis: 100% }
  .docs-jump input[type="search"] { font-size: 16px }
}

.prose .extensions { list-style: none; padding: 0; columns: 7rem auto; column-gap: 1.25rem }
.prose .extensions li { margin: 0 0 .3rem; break-inside: avoid }

.checker { margin: 0 0 2rem }
.checker label { display: block; margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 500; color: var(--graphite) }
.checker .field { display: flex; flex-wrap: wrap; gap: .5rem }
.checker input { flex: 1 1 14rem; height: 2.6rem; padding: 0 .75rem; font-size: var(--text-lg) }
.checker button { height: 2.6rem; padding: 0 1.1rem; font-size: var(--text-md) }
.prose .checker .form-error { margin: .5rem 0 0; font-size: var(--text-md); color: var(--poor) }
.prose .verdict { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--wash); border: 1px solid var(--highlighter);
                  border-radius: 6px; line-height: 1.55; color: var(--ink); --ground: var(--wash) }
@media (max-width: 480px) { .checker input { font-size: 16px } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem;
             margin: 0 0 1rem; container-type: inline-size }
.page-head h1 { flex: 1 1 18rem; max-width: 680px; margin: 0 }
.as-markdown { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .15rem; font-size: var(--text-sm) }
.as-markdown [hidden] { display: none }
.md-menu { position: relative }
.md-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding: 0 .6rem 0 .7rem;
                     font-size: var(--text-sm);
                     color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 6px;
                     cursor: pointer; white-space: nowrap; transition: border-color .12s }
.md-menu > summary::-webkit-details-marker { display: none }
.md-menu > summary:hover { border-color: var(--pencil) }
.md-menu[open] > summary { border-color: var(--ink) }
.md-menu > summary::before { content: ""; width: 14px; height: 14px; background: var(--graphite);
  -webkit-mask: var(--mark) 0 0 / 100% 100% no-repeat; mask: var(--mark) 0 0 / 100% 100% no-repeat }
.md-menu > summary.copied::before { background: var(--ink); -webkit-mask-image: url("/img/ui/copied.svg"); mask-image: url("/img/ui/copied.svg") }
.md-caret { flex: none; width: 10px; height: 10px; color: var(--graphite); transition: color .12s, transform .12s }
.md-menu > summary:hover .md-caret, .md-menu[open] .md-caret { color: var(--ink) }
.md-menu[open] .md-caret { transform: rotate(180deg) }
.md-menu-pop { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; box-sizing: border-box; width: 15rem;
               max-width: calc(100vw - 3rem); padding: .35rem; background: var(--paper); border: 1px solid var(--rule);
               border-radius: 8px;
               box-shadow: 0 12px 32px var(--shadow), 0 2px 6px color-mix(in srgb, var(--shadow) 50%, transparent) }
.md-menu-pop > :is(button, a) { display: flex; align-items: center; gap: .65rem; width: 100%; box-sizing: border-box;
                                padding: .3rem .5rem; text-align: left; font: inherit; line-height: 1.35; color: var(--ink);
                                --lined: 0; background: none; border: 0; border-radius: 6px; cursor: pointer }
.prose .md-menu-pop > a:hover, .md-menu-pop > button:hover { background: var(--rule) }
.md-menu-pop > :is(button, a):focus-visible { outline-offset: -2px }
.md-tile { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; box-sizing: border-box;
           background: var(--paper); border: 1px solid var(--rule); border-radius: 8px }
.md-tile::before { content: ""; width: .95rem; height: .95rem; background: var(--ink-soft);
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat }
.md-mark-copy { --mark: url("/img/ui/copy.svg") }
.md-mark-page { --mark: url("/img/ui/page.svg") }
.md-mark-link { --mark: url("/img/ui/link.svg") }
.md-mark-chat { --mark: url("/img/ui/chat.svg") }
.md-mark-chatgpt { --mark: url("/img/icons/sources/chatgpt.svg") }
.md-mark-claude { --mark: url("/img/icons/sources/claude.svg") }
.md-mark-perplexity { --mark: url("/img/icons/sources/perplexity.svg") }
.md-mark-grok { --mark: url("/img/icons/sources/grok.svg") }
.md-mark-google { --mark: url("/img/icons/sources/google.svg") }
.md-mark-plug { --mark: url("/img/ui/plug.svg") }
.md-mark-cursor { --mark: url("/img/icons/apps/cursor.svg") }
.md-mark-vscode { --mark: url("/img/icons/apps/vscode.svg") }
.md-name { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: var(--text-sm) }
.md-away { flex: none; width: 12px; height: 12px; color: var(--graphite) }
@container (max-width: 720px) {
  .as-markdown { position: relative; flex-basis: 100% }
  .md-menu { position: static }
  .md-menu-pop { right: auto; left: 0 }
}
@media (prefers-reduced-motion: reduce) { .md-menu > summary, .md-caret { transition: none } }