@layer theme, base, elements, components, utilities;
@layer base {
  *, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-height: 100dvh; line-height: 1.5; }
  img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; }
  a { color: inherit; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; overflow-wrap: break-word; }
  p { overflow-wrap: break-word; }
  ol, ul { list-style: none; }
  table { border-collapse: collapse; }
  :focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 3px; }
  .cms-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: .5rem; background: var(--color-background, #fff); color: var(--color-foreground, #111); box-shadow: 0 4px 16px rgb(0 0 0 / .15); }
  .cms-skip:focus { top: 1rem; }
}
@layer elements {
  .cms-prose > * + * { margin-top: 1.1em; }
  .cms-prose :is(h2, h3, h4) { margin-top: 1.8em; }
  .cms-prose :is(h2, h3, h4) + * { margin-top: .6em; }
  .cms-prose ul { list-style: disc; padding-left: 1.25em; }
  .cms-prose ol { list-style: decimal; padding-left: 1.25em; }
  .cms-prose li + li { margin-top: .35em; }
  .cms-prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
  .cms-prose a:hover { text-decoration-color: currentColor; }
  .cms-prose :not(pre) > code { padding: .1em .35em; border-radius: .3em; background: var(--color-surface, rgb(0 0 0 / .05)); font-size: .9em; }
  .cms-prose blockquote { padding-left: 1em; border-left: 2px solid var(--color-border, rgb(0 0 0 / .12)); }
}

@font-face{font-family:"Inter";src:url("/_cms/fonts/inter.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/_cms/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:optional}
:root{--color-background:#faf9f5;--color-surface:#f3efe6;--color-raised:#ffffff;--color-foreground:#2b2926;--color-ink:#2b2926;--color-muted:#6b6760;--color-faint:#8d8981;--color-line:#ece7dc;--color-line-strong:#ddd7ca;--color-border:rgb(43 41 38 / 0.1);--color-primary:#ffe100;--color-primary-foreground:#2b2926;--color-yellow:#ffe100;--color-yellow-deep:#f2d500;--color-black:#2b2926;--color-white:#ffffff;--color-on-yellow:#2b2926;--color-focus:#2b2926;--color-panel:#f2f0ea;--color-panel-hover:#e9e5db;--color-code:#f2f0ea;--color-note:#6b6760;--color-warning:#b45309;--color-danger:#c2410c;--font-sans:Inter, ui-sans-serif, system-ui, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem);--text-xl:clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);--text-2xl:1.375rem;--text-3xl:1.375rem;--text-4xl:1.375rem;--text-5xl:clamp(1.75rem, 1.6033rem + 0.6522vw, 2.125rem);--text-6xl:clamp(3.5rem, 1.7391rem + 7.8261vw, 8rem);--text-display:clamp(2.75rem, 2.0652rem + 3.0435vw, 4.5rem);--leading-tight:1.3;--leading-snug:1.25;--leading-normal:1.55;--leading-display:1.2;--tracking-display:-0.022em;--tracking-tight:-0.014em;--tracking-normal:-0.006em;--tracking-caps:0.08em;--tracking-mono:-0.01em;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-heading:450;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--space-gutter:clamp(1.25rem, 0.7609rem + 2.1739vw, 2.5rem);--space-section:clamp(4.5rem, 2.9348rem + 6.9565vw, 8.5rem);--space-5:1.25rem;--space-10:2.5rem;--space-20:5rem;--space-32:8rem;--radius-none:0;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-full:9999px;--radius-xl:0.875rem;--shadow-sm:0 1px 2px rgb(43 41 38 / 0.05);--shadow-md:0 4px 12px rgb(43 41 38 / 0.06);--shadow-lg:0 8px 24px rgb(43 41 38 / 0.07);--shadow-xl:0 12px 32px rgb(43 41 38 / 0.08);--container-prose:40rem;--container-content:76rem;--container-wide:90rem;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--duration-fast:150ms;--duration-base:300ms;--duration-slow:700ms;--ease-out:cubic-bezier(0.2, 0.8, 0.2, 1);--ease-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-background:#1a1917;--color-surface:#232220;--color-raised:#262523;--color-foreground:#e6e3dc;--color-ink:#f5f3ee;--color-muted:#aaa69d;--color-faint:#8d8981;--color-line:#2c2a27;--color-line-strong:#3d3a35;--color-border:rgb(245 243 238 / 0.1);--color-focus:#f5f3ee;--color-panel:#242320;--color-panel-hover:#2e2c29;--color-code:#242320;--color-note:#aaa69d;--color-warning:#e0a458;--color-danger:#ef8a80;color-scheme:dark}}
[data-theme=dark]{--color-background:#1a1917;--color-surface:#232220;--color-raised:#262523;--color-foreground:#e6e3dc;--color-ink:#f5f3ee;--color-muted:#aaa69d;--color-faint:#8d8981;--color-line:#2c2a27;--color-line-strong:#3d3a35;--color-border:rgb(245 243 238 / 0.1);--color-focus:#f5f3ee;--color-panel:#242320;--color-panel-hover:#2e2c29;--color-code:#242320;--color-note:#aaa69d;--color-warning:#e0a458;--color-danger:#ef8a80;color-scheme:dark}
@layer elements{body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);letter-spacing:var(--tracking-normal);color:var(--color-foreground);background-color:var(--color-background)}h1{font-size:var(--text-5xl);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:var(--font-weight-heading);color:var(--color-ink);text-wrap:balance}h2{font-size:var(--text-2xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--font-weight-heading);color:var(--color-ink);text-wrap:balance}h3{font-size:var(--text-base);line-height:var(--leading-normal);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-heading);color:var(--color-ink)}a{color:inherit;text-underline-offset:0.2em;text-decoration-color:var(--color-line-strong)}code{font-family:var(--font-mono);font-size:0.875em;letter-spacing:0}kbd{font-family:var(--font-mono);font-size:0.8em}::selection{background-color:var(--color-yellow);color:var(--color-black)}p{text-wrap:pretty}h1 em{font-style:normal}h2 em{font-style:normal}:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.cms-prose p{line-height:1.6}.cms-prose li{line-height:1.6}.cms-prose h2{margin-top:2.75rem;margin-bottom:0}.cms-prose h3{font-size:var(--text-lg);line-height:1.4;margin-top:2rem}.cms-prose h4{margin-top:1.5rem;font-size:var(--text-base);font-weight:var(--font-weight-medium);color:var(--color-ink)}.cms-prose a{color:var(--color-ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-yellow);text-underline-offset:0.18em}.cms-prose a:hover{text-decoration-color:var(--color-ink)}.cms-prose strong{font-weight:var(--font-weight-medium);color:var(--color-ink)}.cms-prose ul{padding-left:1.25rem}.cms-prose ol{padding-left:1.25rem}.cms-prose blockquote{padding-left:1rem;border-left:2px solid var(--color-line-strong);color:var(--color-muted)}.cms-prose hr{border-top:1px solid var(--color-line);margin-block:2.5rem}.cms-prose img{box-shadow:0 0 0 1px var(--color-border);border-radius:var(--radius-md)}.cms-prose figcaption{font-size:var(--text-xs);color:var(--color-muted)}}
@layer components{.cms-button.cms-button[data-variant="primary"]{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;letter-spacing:-0.006em;height:2.25rem;padding-inline:0.875rem;transition:background-color 160ms ease;background-color:var(--color-yellow);color:var(--color-on-yellow)}@media (hover:hover){.cms-button.cms-button[data-variant="primary"]:hover{background-color:#f5d800}}.cms-button.cms-button[data-variant="secondary"]{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;letter-spacing:-0.006em;height:2.25rem;padding-inline:0.875rem;transition:background-color 160ms ease;background-color:var(--color-panel);color:var(--color-ink);border-color:transparent}@media (hover:hover){.cms-button.cms-button[data-variant="secondary"]:hover{background-color:var(--color-panel-hover)}}.cms-button.cms-button[data-variant="ghost"]{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;letter-spacing:-0.006em;height:2.25rem;padding-inline:0.875rem;transition:background-color 160ms ease;background-color:transparent;color:var(--color-muted);border-color:transparent}@media (hover:hover){.cms-button.cms-button[data-variant="ghost"]:hover{color:var(--color-ink);background-color:var(--color-panel)}}.cms-button.cms-button[data-variant="yellow"]{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;letter-spacing:-0.006em;height:2.25rem;padding-inline:0.875rem;transition:background-color 160ms ease;background-color:var(--color-yellow);color:var(--color-on-yellow)}@media (hover:hover){.cms-button.cms-button[data-variant="yellow"]:hover{background-color:#f5d800}}}
/* custom.css */
/* Lettern Docs: what the builder's style panels can't express. Everything else lives in
   tokens.json (element and prose styles) and on the blocks of the templates and components. */

:root { --cms-scroll-offset: 5.25rem; }
html { scroll-padding-top: var(--cms-scroll-offset); }

/* Reading: lists sit close, headings pull what follows towards them. */
.cms-prose > * + * { margin-top: 1rem; }
.cms-prose > h2 { margin-top: 2.75rem; }
.cms-prose > h3 { margin-top: 2rem; }
.cms-prose > h4 { margin-top: 1.5rem; }
.cms-prose :is(h2, h3, h4) + * { margin-top: .625rem; }
.cms-prose > :first-child, .cms-prose > :first-child > :first-child { margin-top: 0; }
.cms-prose li + li { margin-top: .375rem; }
.cms-prose li::marker { color: var(--color-faint); }
.cms-prose .cms-heading__link { color: var(--color-faint); }
.cms-prose a { transition: text-decoration-color 150ms ease; }

/* Inline code only, not code inside code blocks. */
.cms-prose :not(pre) > code { padding: .125em .3125em; border-radius: .25rem; background: var(--color-panel); color: var(--color-ink); font-size: .84em; overflow-wrap: anywhere; }
.cms-prose a code { text-decoration: inherit; }

/* Code blocks: one quiet warm surface; ink for structure, one accent for values. */
.cms-code { --code-comment: var(--color-muted); --code-keyword: var(--color-ink); --code-string: #6b5d00; --code-number: #6b5d00; --code-title: var(--color-ink); --code-attr: #55524c; --code-type: var(--color-ink); --code-deletion: var(--color-danger); }
.cms-code .hljs-keyword, .cms-code .hljs-title { font-weight: 500; }
.cms-code .hljs-comment, .cms-code .hljs-quote { font-style: normal; }
[data-theme="dark"] .cms-code { --code-string: #eed85e; --code-number: #eed85e; --code-attr: #c9c5bc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cms-code { --code-string: #eed85e; --code-number: #eed85e; --code-attr: #c9c5bc; } }
.cms-prose .cms-code { border: 0; border-radius: var(--radius-lg); background: var(--color-code); font-size: .8125rem; line-height: 1.65; }
.cms-prose .cms-code pre { padding: .875rem 1rem; tab-size: 4; scrollbar-width: thin; }
.cms-prose .cms-code__head { padding: .3125rem .375rem .3125rem 1rem; border-color: var(--color-line); font-size: var(--text-xs); }
.cms-prose .cms-code__copy { padding: .1875rem .5rem; border-radius: var(--radius-sm); color: var(--color-muted); font-weight: 500; transition: color 150ms ease, background-color 150ms ease; }
.cms-prose .cms-code__copy:hover { background: var(--color-panel-hover); color: var(--color-ink); }
.cms-prose .cms-code__copy:active { background: var(--color-yellow); color: var(--color-black); }

/* Callouts: a marker and a label, no tinted fields. */
.cms-prose .cms-callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem .625rem; padding: .875rem 1rem; border: 0; border-radius: var(--radius-lg); background: var(--color-panel); font-size: var(--text-sm); line-height: 1.55; }
.cms-prose .cms-callout::before { content: ""; width: .5rem; height: .5rem; margin-top: .4375rem; border-radius: 99px; background: var(--tone, var(--color-note)); }
.cms-prose .cms-callout[data-tone="tip"] { --tone: var(--color-yellow); }
.cms-prose .cms-callout[data-tone="warning"] { --tone: var(--color-warning); }
.cms-prose .cms-callout[data-tone="danger"] { --tone: var(--color-danger); }
.cms-prose .cms-callout[data-tone="warning"] p::before { content: "Warning: "; font-weight: 500; color: var(--color-ink); }
.cms-prose .cms-callout[data-tone="danger"] p::before { content: "Important: "; font-weight: 500; color: var(--color-ink); }

/* Tables: soft rules, no frame; wide ones scroll on their own. */
.cms-prose .cms-table { scrollbar-width: thin; }
.cms-prose .cms-table table { font-size: var(--text-sm); line-height: 1.5; }
.cms-prose .cms-table th { padding: 0 1.25rem .5rem 0; border-bottom: 1px solid var(--color-line-strong); color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.cms-prose .cms-table td { padding: .625rem 1.25rem .625rem 0; border-color: var(--color-line); }
.cms-prose .cms-table :is(th, td):last-child { padding-right: 0; }
.cms-prose .cms-table tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.cms-prose .cms-table td code { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 767.98px) { .cms-prose .cms-table td:nth-child(n + 3):last-child { min-width: 15rem; } }

/* Search: a field in the header, an icon on phones. */
.cms-search.docs-search { padding-block: 0; background: var(--color-panel); border-color: transparent; border-radius: var(--radius-md); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.cms-search.docs-search:hover { border-color: transparent; background: var(--color-panel-hover); color: var(--color-ink); }
.docs-search .cms-search__kbd kbd { border-color: var(--color-line-strong); background: var(--color-background); font-size: .6875rem; }
.cms-search.docs-search--big { padding-inline: .875rem .625rem; border-color: var(--color-line-strong); background: var(--color-raised); font-size: var(--text-base); gap: .625rem; transition: border-color 150ms ease, color 150ms ease; }
.cms-search.docs-search--big:hover { border-color: var(--color-muted); background: var(--color-raised); color: var(--color-muted); }
@media (max-width: 767.98px) { .docs-search--big .cms-search__kbd { display: none; } }
@media (max-width: 767.98px) { .cms-search.docs-search:not(.docs-search--big)[data-compact] { justify-content: center; padding-inline: 0; background: none; color: var(--color-ink); font-size: 1.125rem; } }
.cms-search-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-raised); box-shadow: var(--shadow-xl); }
.cms-search-dialog::backdrop { background: rgb(43 41 38 / .25); backdrop-filter: none; }
.cms-search-dialog input { height: 3.25rem; padding-block: 0; background: transparent; font-size: var(--text-base); }
.cms-search-dialog li a { padding: .625rem .75rem; border-radius: var(--radius-md); }
.cms-search-dialog li strong { color: var(--color-ink); font-weight: 500; }
.cms-search-dialog li a[aria-selected="true"] { background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.cms-search-dialog mark { background: var(--color-yellow); color: var(--color-black); }
@media (max-width: 767.98px) { .cms-search-dialog { width: calc(100vw - 1.5rem); margin-top: .75rem; max-height: calc(100dvh - 1.5rem); } }

/* Collapsible rows: the caret turns, and an empty On this page isn't shown. */
.docs-sec__s { list-style: none; }
.docs-sec__s::-webkit-details-marker { display: none; }
details[open] > .docs-sec__s .docs-sec__c { rotate: 180deg; }
.docs-otp:not(:has(a)) { display: none; }

/* The home page's opening line. */
.docs-lead p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-muted); text-wrap: pretty; }

/* Topic rows: the title darkens with the row. */
.docs-topic:hover span:first-child { text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: .2em; }

/* Tabs: a panel reads like the page around it. */
.cms-prose .cms-tab-panel { padding-top: .75rem; }
.cms-prose .cms-tab-panel > :not(.cms-tabs__label) + * { margin-top: 1rem; }
.cms-prose .cms-tab-panel li + li { margin-top: .375rem; }

/* Screenshots: a window on a soft panel, the caption under it. */
.cms-prose > figure:has(img) { margin-block: 1.75rem; }
.cms-prose > figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-md); background: #fff; }
.cms-prose > figure figcaption { margin-top: .625rem; font-size: var(--text-sm); line-height: 1.25rem; color: var(--color-muted); text-wrap: pretty; }

/* Diagrams: drawn in the page's own colors, so they follow light and dark. */
.docs-fig { margin: 0; padding: 1.75rem 1.25rem; border-radius: var(--radius-xl); background: var(--color-panel); }
.cms-prose > div:has(> .docs-fig) { margin-block: 1.75rem; }
.docs-fig :is(b, small, span, em) { font-style: normal; }
.docs-fig__flow { display: flex; align-items: flex-start; justify-content: center; gap: .75rem; }
.docs-fig__step { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; max-width: 11rem; min-width: 0; text-align: center; }
.docs-fig__step > b { margin-top: .75rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); line-height: 1.25rem; }
.docs-fig__step > small { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.docs-fig__op { align-self: center; margin-top: -2.25rem; font-size: 1.25rem; color: var(--color-faint); }
.docs-mock { display: flex; flex-direction: column; gap: .375rem; width: 100%; aspect-ratio: 4 / 3; padding: .5rem; border-radius: var(--radius-md); background: var(--color-raised); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); }
.docs-mock i { display: block; border-radius: 3px; background: var(--color-line-strong); }
.docs-mock__bar { height: .5rem; flex: none; }
.docs-mock__slot { display: grid !important; place-items: center; flex: 1; border: 1.5px dashed var(--color-line-strong); background: none !important; font-size: .6875rem; font-style: normal; color: var(--color-muted); }
.docs-mock__h { height: .5rem; width: 60%; background: var(--color-ink) !important; opacity: .7; }
.docs-mock__l { height: .25rem; width: 90%; }
.docs-mock__l--short { width: 70%; }
.docs-mock__img { flex: 1; min-height: 1rem; background: color-mix(in srgb, var(--color-ink) 10%, var(--color-raised)) !important; }
.docs-mock--live { box-shadow: 0 0 0 1.5px var(--color-ink), var(--shadow-md); }
.docs-card { display: flex; flex-direction: column; gap: .3125rem; width: 100%; padding: .625rem .75rem; border-radius: var(--radius-md); background: var(--color-raised); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); text-align: left; font-size: var(--text-xs); line-height: 1rem; color: var(--color-ink); }
.docs-card > b { margin-bottom: .125rem; font-size: var(--text-sm); font-weight: 500; }
.docs-card__field { padding: .25rem .5rem; border-radius: 4px; background: var(--color-panel); color: var(--color-muted); }
.docs-card--row { flex-direction: row; justify-content: space-between; gap: .5rem; padding-block: .5rem; }
.docs-card--row em { color: var(--color-muted); }
.docs-stack { display: grid; gap: .375rem; width: 100%; }
.docs-fig__fan { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.docs-fig__fan .docs-fig__op { margin-top: 0; }
.docs-fig__from { display: grid; gap: .375rem; }
.docs-fig__from span { padding: .375rem .75rem; border-radius: 99px; background: var(--color-raised); box-shadow: 0 0 0 1px var(--color-border); font-size: var(--text-xs); line-height: 1rem; color: var(--color-ink); text-align: center; }
.docs-fig__hub { display: flex; flex-direction: column; gap: .125rem; max-width: 10rem; padding: .875rem 1rem; border-radius: var(--radius-lg); background: var(--color-yellow); color: var(--color-on-yellow); text-align: center; }
.docs-fig__hub b { font-size: var(--text-sm); font-weight: 500; }
.docs-fig__hub small { font-size: var(--text-xs); line-height: 1rem; }
.docs-fig__to b { display: block; padding: .875rem 1rem; border-radius: var(--radius-lg); background: var(--color-raised); box-shadow: 0 0 0 1.5px var(--color-ink); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
@media (max-width: 639.98px) {
  .docs-fig__flow, .docs-fig__fan { flex-direction: column; align-items: center; }
  .docs-fig__step { width: 100%; max-width: 13rem; }
  .docs-fig__op { margin-top: 0; }
  .docs-fig__op--to { rotate: 90deg; }
  .docs-fig__flow .docs-fig__op { line-height: 1; }
}
.docs-layers { display: grid; gap: .5rem; max-width: 34rem; margin-inline: auto; }
.docs-layer { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: .125rem 1rem; padding: .75rem 1rem; border-radius: var(--radius-lg); background: var(--color-raised); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); }
.docs-layer:first-child { box-shadow: 0 0 0 1.5px var(--color-ink), var(--shadow-sm); }
.docs-layer > b { grid-row: span 2; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.docs-layer > span { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.docs-layer em { padding: .125rem .5rem; border-radius: 4px; background: var(--color-panel); font-size: var(--text-xs); line-height: 1rem; color: var(--color-ink); }
.docs-layer small { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.docs-swatch { display: block; width: 1rem; height: 1rem; border-radius: 99px; background: var(--color-yellow); box-shadow: 0 0 0 1px var(--color-border); }
.docs-swatch--2 { background: var(--color-ink); }
.docs-swatch--3 { background: var(--color-line-strong); }
@media (max-width: 639.98px) { .docs-layer { grid-template-columns: minmax(0, 1fr); } .docs-layer > b { grid-row: auto; } }