/* library.css · the component library's own pages: the bar, the page a
   component stands in, the gallery and the footer, in Tau's design.

   Tau's tokens (--mx-*, from the Mechanics token file and the studio site),
   Tau's type (Inter for text and display, as Tau's site sets it, tracked -0.03 em for a title, weights
   400, 450, 500 and 550, each 30 lower in dark), the shape law (press 9999,
   contain 12, value 8, mark 6, key 4), three elevations and one motion law:
   everything that moves follows a first-order curve. A control has a time
   constant of 50 ms; written as a CSS easing that is --mx-ease over 300 ms.
   A component inside the page keeps its own look. */

@font-face { font-family: "Inter"; src: url("../../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("tau/fonts/InterTight.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* type */
  --mx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* display in Inter, as Tau's site sets it (its tau.css: the default family takes --mx-font for display) */
  --mx-font-display: var(--mx-font);
  --mx-features: "ss01", "ss04", "ss07", "ss08", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06";
  --mx-w-body: 400; --mx-w-ui: 450; --mx-w-label: 500; --mx-w-head: 550; --mx-w-display: 500;
  /* Tau's tracking per step of its register: -0.03 em for a page title, -0.026 for a chapter, -0.02 for a name */
  --mx-track-display: -0.03em; --mx-track-chapter: -0.026em;
  /* surfaces, light to deep */
  --mx-raised: #ffffff; --mx-page: #fcfcfb; --mx-ground: #f4f3f0; --mx-well: #f1f0ed; --mx-pill: #eeede9; --mx-rule: #e9e8e4;
  --mx-hover: #f4f3ef; --mx-selected: #eceae4;
  /* inks */
  --mx-ink: #0b0b0b; --mx-ink2: #52514e; --mx-ink3: #6c6b69; --mx-faded: #97958d; --mx-on-ink: #fcfcfb;
  --mx-line: rgb(11 11 11 / 10%); --mx-line-strong: rgb(11 11 11 / 20%);
  /* accent: violet, only where Tau uses it (the mark's target line, focus, selection) */
  --mx-accent: #6250d6; --mx-accent-text: #4a3aa7; --mx-focus: #6f62d9;
  /* glass: a surface that floats with the page blurred behind it */
  --mx-glass-strong: rgb(255 255 255 / 90%);
  /* the magnets as Tau drew them in its menu round two: its glass and its elevation, not the library's */
  --tau-glass: rgb(255 255 255 / 78%); --tau-e2: 0 0 0 .5px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .05), 0 3px 9px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  /* shape law: the corner shows what kind of thing it is */
  --mx-r-press: 9999px; --mx-r-contain: 12px; --mx-r-value: 8px; --mx-r-mark: 6px; --mx-r-key: 4px; --mx-hair: .5px;
  /* elevation, three levels */
  --mx-e1: 0 3px 6px -2px rgb(0 0 0 / .02), 0 1px 1px rgb(0 0 0 / .04);
  --mx-e2: 0 0 0 .5px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .03), 0 3px 9px rgb(0 0 0 / .05), 0 1px 1px rgb(0 0 0 / .04);
  --mx-e3: 0 0 0 .5px rgb(0 0 0 / .06), 0 9px 48px rgb(0 0 0 / .08), 0 6px 24px rgb(0 0 0 / .10), 0 1px 1px rgb(0 0 0 / .04);
  /* motion: one time constant. The easing is the first-order step response; over 300 ms it has tau 50 ms */
  --mx-color: 150ms; --mx-op-in: 40ms; --mx-op-out: 120ms;
  --mx-ease-tau: linear(0, 0.0234 0.39%, 0.0740 1.28%, 0.1420 2.54%, 0.2210 4.15%, 0.3058 6.06%, 0.3921 8.27%, 0.4764 10.75%, 0.5561 13.48%, 0.6294 16.47%, 0.6951 19.70%, 0.7528 23.17%, 0.8025 26.86%, 0.8443 30.78%, 0.8791 34.91%, 0.9074 39.26%, 0.9301 43.81%, 0.9481 48.56%, 0.9621 53.52%, 0.9728 58.67%, 0.9810 64.02%, 0.9870 69.55%, 0.9915 75.28%, 0.9948 81.19%, 0.9972 87.28%, 0.9988 93.55%, 1);
  --mx-d-tau: 300ms;
  /* the library's room: Tau's page margin, gutter, width and section step */
  --lib-m: clamp(16px, 2.8vw, 40px); --lib-g: clamp(12px, 1.6vw, 24px); --lib-max: 1760px; --lib-bar: 76px;
  --lib-sec: clamp(80px, 9vw, 144px);
  /* Tau's display steps, set lighter than the display weight (450 in light, 420 in dark) */
  --lib-w-display: calc(var(--mx-w-display) - 50);
  --lib-title: clamp(40px, 5vw, 72px); --lib-chapter: clamp(28px, 3.1vw, 48px); --lib-sub: clamp(22px, 2.1vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mx-w-body: 370; --mx-w-ui: 420; --mx-w-label: 470; --mx-w-head: 520; --mx-w-display: 470;
    --mx-raised: #1a1a19; --mx-page: #0d0d0d; --mx-ground: #131313; --mx-well: #151515; --mx-pill: #1d1d1c; --mx-rule: rgb(255 255 255 / 10%);
    --mx-hover: #151514; --mx-selected: #1c1b19;
    --mx-ink: #f0efec; --mx-ink2: #c3c2b7; --mx-ink3: #8f8e89; --mx-faded: #6d6b67; --mx-on-ink: #0d0d0d;
    --mx-line: rgb(255 255 255 / 10%); --mx-line-strong: rgb(255 255 255 / 20%);
    --mx-accent-text: #a096eb; --mx-focus: #8173e3;
    --mx-glass-strong: rgb(51 51 51 / 82%);
    --tau-glass: rgb(40 40 40 / 75%); --tau-e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
    --mx-e1: 0 3px 6px -2px rgb(0 0 0 / .3), 0 1px 1px rgb(0 0 0 / .4);
    --mx-e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .3), 0 3px 9px rgb(0 0 0 / .3), 0 1px 1px rgb(0 0 0 / .3);
    --mx-e3: 0 0 0 .5px rgb(255 255 255 / 9%), 0 9px 48px rgb(0 0 0 / .5), 0 6px 24px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --mx-w-body: 370; --mx-w-ui: 420; --mx-w-label: 470; --mx-w-head: 520; --mx-w-display: 470;
  --mx-raised: #1a1a19; --mx-page: #0d0d0d; --mx-ground: #131313; --mx-well: #151515; --mx-pill: #1d1d1c; --mx-rule: rgb(255 255 255 / 10%);
  --mx-hover: #151514; --mx-selected: #1c1b19;
  --mx-ink: #f0efec; --mx-ink2: #c3c2b7; --mx-ink3: #8f8e89; --mx-faded: #6d6b67; --mx-on-ink: #0d0d0d;
  --mx-line: rgb(255 255 255 / 10%); --mx-line-strong: rgb(255 255 255 / 20%);
  --mx-accent-text: #a096eb; --mx-focus: #8173e3;
  --mx-glass-strong: rgb(51 51 51 / 82%);
  --tau-glass: rgb(40 40 40 / 75%); --tau-e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
  --mx-e1: 0 3px 6px -2px rgb(0 0 0 / .3), 0 1px 1px rgb(0 0 0 / .4);
  --mx-e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .3), 0 3px 9px rgb(0 0 0 / .3), 0 1px 1px rgb(0 0 0 / .3);
  --mx-e3: 0 0 0 .5px rgb(255 255 255 / 9%), 0 9px 48px rgb(0 0 0 / .5), 0 6px 24px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
}
:root[data-theme="light"] { color-scheme: light; }

/* the page. Tracking and features are set on the library's own text: a component inside keeps its own */
html:has(> .lib-body) { background: var(--mx-page); scroll-padding-top: 140px; }
.lib-body { height: auto; min-height: 100%; margin: 0; background: var(--mx-page); color: var(--mx-ink); font: var(--mx-w-body) 15px/24px var(--mx-font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.lib-body ::selection { background: color-mix(in srgb, var(--mx-accent) 24%, transparent); }
:where(.lib-top, .lib-head, .lib-cats, .lib-shelf-head, .lib-group-head, .lib-pager, .lib-foot, .lib-empty) { font-feature-settings: var(--mx-features); letter-spacing: -0.011em; }
:where(.lib-top, .lib-head, .lib-pager, .lib-foot, .lib-gallery .lib-main) a { color: inherit; text-decoration: none; }
:where(.lib-head, .lib-cats, .lib-pager, .lib-foot) :is(a, button) { cursor: default; }
:where(.lib-head, .lib-cats, .lib-pager, .lib-foot, .lib-card) :focus-visible { outline: 1.5px solid var(--mx-focus); outline-offset: 2px; }
.lib-wrap { width: 100%; max-width: var(--lib-max); margin-inline: auto; padding-inline: var(--lib-m); box-sizing: border-box; }
.lib-main { padding-top: var(--lib-bar); }

/* the name with Tau's mark: the step response of a first-order system under its target line */
.lib-brand { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: var(--mx-r-press); color: var(--mx-ink); font-size: 14px; line-height: 1; font-weight: var(--mx-w-head); letter-spacing: -0.02em; white-space: nowrap; }
.lib-mark { width: 20px; height: 20px; flex: none; overflow: visible; }
.lib-mark .lib-mark-target { stroke: var(--mx-accent); }

/* ── a page's head: where you are, the title, what it is ── */
.lib-head { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(32px, 3.4vw, 56px); }
.lib-crumb { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); }
.lib-crumb a { color: var(--mx-ink3); transition: color var(--mx-color) linear; }
.lib-crumb a:hover { color: var(--mx-ink); transition-duration: 0s; }
.lib-crumb i { font-style: normal; color: var(--mx-faded); }
.lib-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.lib-head h1 { margin: 0; max-width: 15em; font: var(--lib-w-display) var(--lib-title)/1 var(--mx-font-display); letter-spacing: var(--mx-track-display); text-wrap: balance; }
.lib-step { display: flex; align-items: center; gap: 6px; flex: none; padding-bottom: 4px; }
.lib-step-count { padding-right: 6px; font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); font-variant-numeric: tabular-nums; }
.lib-round { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mx-r-press); color: var(--mx-ink); box-shadow: inset 0 0 0 var(--mx-hair) var(--mx-line-strong); transition: background-color var(--mx-color) linear; }
.lib-round:hover { background: var(--mx-pill); transition-duration: 0s; }
.lib-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lib-g); row-gap: 28px; margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.lib-intro-text { grid-column: 1 / 8; }
.lib-lede { margin: 0; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -0.012em; color: var(--mx-ink); text-wrap: pretty; }
.lib-src { margin: 14px 0 0; max-width: 60ch; font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); text-wrap: pretty; }
/* a component's page keeps its head short, so the stage starts high on the first screen: the title on the left,
   the lede on the right ending on the title's last line, as Tau's hero sets them */
.lib-head-page { padding-top: clamp(28px, 3.2vw, 48px); padding-bottom: clamp(24px, 2.4vw, 36px); }
.lib-crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2vw, 28px); }
.lib-crumb-row .lib-crumb { margin: 0; min-width: 0; }
.lib-crumb-row .lib-step { padding: 0; }
.lib-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lib-g); row-gap: 20px; align-items: end; }
.lib-head-grid > h1 { grid-column: 1 / 8; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; }
.lib-head-side { grid-column: 8 / 13; padding-bottom: .2em; }
.lib-head-side .lib-lede { font-size: clamp(16px, 1.25vw, 18px); }
@media (max-width: 1100px) { .lib-head-grid > h1, .lib-head-side { grid-column: 1 / -1; } .lib-head-side { max-width: 40em; } }
@media (max-width: 760px) { .lib-crumb-row .lib-step-count { display: none; } }
/* what the component is, under it: four facts in a row of hairline cells */
.lib-about { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--lib-g); margin: clamp(40px, 4vw, 64px) 0 0; font-feature-settings: var(--mx-features); }
.lib-about > div { padding-top: 12px; border-top: var(--mx-hair) solid var(--mx-line-strong); min-width: 0; }
.lib-about dt { font-size: 13px; line-height: 20px; color: var(--mx-ink3); }
.lib-about dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; letter-spacing: -0.011em; color: var(--mx-ink); text-wrap: pretty; }
/* a link in running text is never the browser's blue (Malte, 2026-10-04): the text's own color and a thin, quiet
   underline that darkens on hover. :where keeps it at the weight of a bare `a`, so a component's own style.css,
   which loads after this file, still sets its links */
:where(.lib-main) :where(p:not(.lib-crumb), li, dd, td, figcaption) a:where(:not([class])) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--mx-line-strong); transition: text-decoration-color var(--mx-color) linear; }
:where(.lib-main) :where(p:not(.lib-crumb), li, dd, td, figcaption) a:where(:not([class])):hover { text-decoration-color: currentColor; transition-duration: 0s; }
.lib-about a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--mx-line-strong); }
.lib-about a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) { .lib-about { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-embed] .lib-about { display: none; }
/* facts: a definition list set as hairline rows */
.lib-facts { grid-column: 9 / 13; margin: 0; display: flex; flex-direction: column; }
.lib-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 7px 0; border-bottom: var(--mx-hair) solid var(--mx-line-strong); font-size: 13px; line-height: 20px; letter-spacing: 0; }
.lib-facts > div:first-child { border-top: var(--mx-hair) solid var(--mx-line-strong); }
.lib-facts dt { flex: none; color: var(--mx-ink3); }
.lib-facts dd { margin: 0; text-align: right; color: var(--mx-ink); font-variant-numeric: tabular-nums; text-wrap: balance; }
@media (max-width: 1100px) { .lib-intro-text { grid-column: 1 / 9; } .lib-facts { grid-column: 1 / 9; } }
@media (max-width: 760px) {
  .lib-title-row { flex-direction: column; align-items: flex-start; }
  .lib-intro-text, .lib-facts { grid-column: 1 / -1; }
}
.lib-tag { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--mx-r-mark); background: var(--mx-pill); color: var(--mx-ink2); font-size: 12px; line-height: 1; font-weight: var(--mx-w-ui); letter-spacing: 0; vertical-align: 1px; white-space: nowrap; }

/* ── a component's page: one bar, the component under it, and its name and lede under the component, all on the
   first screen. The bar is 56 px; the component's box takes the rest of the screen less a margin above it, the gap
   to the name, the name and the lede (--lib-head, the height library.js measures) and the room under them, so the
   whole component and what it is are seen together without scrolling (Malte, 2026-10-08). Before, the box took the
   whole screen under the bar and the name was under the fold (2026-10-06). A box is never lower than 320 px, or the
   screen when that is lower ── */
.lib-comp { --lib-top: 56px; --lib-fit-m: clamp(8px, 1vw, 16px); --lib-info-gap: clamp(20px, 2vw, 28px); --lib-head-end: clamp(20px, 2.2vw, 32px);
  --lib-fit: max(min(320px, 100svh - var(--lib-top) - 2 * var(--lib-fit-m)), calc(100svh - var(--lib-top) - var(--lib-fit-m) - var(--lib-info-gap) - var(--lib-head, 136px) - var(--lib-head-end))); }
html:has(> .lib-comp) { scroll-padding-top: 72px; }
.lib-top { position: sticky; top: 0; z-index: 50; height: var(--lib-top); padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
  background: color-mix(in srgb, var(--mx-page) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 var(--mx-hair) 0 var(--mx-line-strong); font-feature-settings: var(--mx-features); letter-spacing: -0.011em; }
.lib-top-in { display: flex; align-items: center; gap: 12px; height: 100%; max-width: var(--lib-max); margin-inline: auto; padding-inline: var(--lib-m); box-sizing: border-box; }
.lib-top a { color: inherit; text-decoration: none; }
.lib-top-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-left: -6px; border-radius: var(--mx-r-press); color: var(--mx-ink); transition: background-color var(--mx-color) linear; }
.lib-top-home .lib-mark { width: 20px; height: 20px; }
.lib-top-crumb { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13px; line-height: 20px; color: var(--mx-ink3); white-space: nowrap; }
.lib-top-crumb a { flex: none; color: var(--mx-ink3); transition: color var(--mx-color) linear; }
.lib-top-crumb i { flex: none; font-style: normal; color: var(--mx-faded); }
.lib-top-crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mx-ink); font-weight: var(--mx-w-label); }
.lib-top-side { display: flex; align-items: center; gap: 4px; flex: none; }
.lib-top-side .lib-step-count { padding-right: 8px; }
.lib-top .lib-round { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--mx-ink); cursor: default; }
.lib-top-theme { margin-left: 6px; }
@media (hover: hover) {
  .lib-top-home:hover, .lib-top .lib-round:hover { background: var(--mx-pill); transition-duration: 0s; }
  .lib-top-crumb a:hover { color: var(--mx-ink); transition-duration: 0s; }
}
.lib-top :focus-visible { outline: 1.5px solid var(--mx-focus); outline-offset: 1px; }
.lib-comp .lib-main { padding-top: var(--lib-fit-m); }
/* the component: a frame takes the room the first screen leaves it, or less when its page is shorter (library.js);
   a stage keeps its own height up to that room. A taller stage is cut to it: its mock page scrolls inside it, and a
   canvas fills what it has */
.lib-comp .lib-demo .lib-frame { height: min(var(--frame-h, var(--lib-fit)), var(--lib-fit)); min-height: min(120px, var(--lib-fit)); }
.lib-comp .lib-demo > .stage { max-width: 100%; }
@media (min-width: 761px) { html:not([data-embed]) .lib-comp .lib-demo .stage:not(.stage .stage) { max-height: var(--lib-fit); } }
/* what it is: the name and the lede, the facts in a row, and the rest of its group */
.lib-info { padding-top: var(--lib-info-gap, clamp(32px, 3.6vw, 56px)); font-feature-settings: var(--mx-features); letter-spacing: -0.011em; }
.lib-info-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lib-g); row-gap: 16px; align-items: start; }
.lib-info h1 { grid-column: 1 / 7; margin: 0; font: var(--lib-w-display) clamp(30px, 3vw, 44px)/1.05 var(--mx-font-display); letter-spacing: var(--mx-track-display); text-wrap: balance; }
.lib-info .lib-head-side { grid-column: 7 / 13; padding-top: 4px; }
.lib-info .lib-lede { font-size: clamp(16px, 1.2vw, 18px); color: var(--mx-ink2); }
.lib-info .lib-about { margin-top: clamp(28px, 3vw, 44px); }
.lib-demo-notes .notes { margin-top: clamp(28px, 3vw, 44px); }
.lib-near { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lib-g); margin-top: clamp(28px, 3vw, 44px); padding-top: 12px; border-top: var(--mx-hair) solid var(--mx-line-strong); }
.lib-near-label { grid-column: 1 / 4; font-size: 13px; line-height: 20px; color: var(--mx-ink3); }
.lib-near-list { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: 6px; }
.lib-near-list a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--mx-r-press); background: var(--mx-pill); color: var(--mx-ink2); font: var(--mx-w-label) 13px/1 var(--mx-font); text-decoration: none; white-space: nowrap; transition: background-color var(--mx-color) linear, color var(--mx-color) linear; }
.lib-near-list a span { font: 10px/1 var(--mx-font-mono, ui-monospace, monospace); color: var(--mx-ink3); font-variant-numeric: tabular-nums; }
.lib-near-list a[aria-current="page"] { background: var(--mx-ink); color: var(--mx-on-ink); }
.lib-near-list a[aria-current="page"] span { color: color-mix(in srgb, var(--mx-on-ink) 62%, transparent); }
.lib-near-list a.lib-near-all { background: transparent; box-shadow: inset 0 0 0 var(--mx-hair) var(--mx-line-strong); }
@media (hover: hover) { .lib-near-list a:not([aria-current]):hover { background: var(--mx-selected); color: var(--mx-ink); transition-duration: 0s; } }
.lib-near-list a:focus-visible { outline: 1.5px solid var(--mx-focus); outline-offset: 2px; }
.lib-comp .lib-pager { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 900px) {
  .lib-info h1, .lib-info .lib-head-side, .lib-near-label, .lib-near-list { grid-column: 1 / -1; }
  .lib-near { row-gap: 10px; }
}
/* on a phone the bar keeps the name and the arrows; the shelf and the group are one tap away in the info */
@media (max-width: 760px) {
  /* on a phone the component keeps the screen under the bar, and its name follows under it */
  .lib-comp { --lib-top: 52px; --lib-fit-m: 8px; --lib-info-gap: 32px; --lib-fit: calc(100svh - var(--lib-top) - 2 * var(--lib-fit-m)); }
  .lib-top-crumb > :not(b):not(a:first-child):not(i:nth-child(2)), .lib-top-side .lib-step-count { display: none; }
}
@media (max-width: 420px) { .lib-top-crumb > a:first-child, .lib-top-crumb > i:nth-child(2) { display: none; } }
html[data-embed] .lib-top, html[data-embed] .lib-info { display: none; }
.lib-top-links { display: flex; gap: 4px; margin-right: 4px; }
.lib-top-links a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--mx-r-press); font-size: 13px; font-weight: var(--mx-w-label); color: var(--mx-ink2); transition: background-color var(--mx-color) linear, color var(--mx-color) linear; }
@media (hover: hover) { .lib-top-links a:hover { background: var(--mx-pill); color: var(--mx-ink); transition-duration: 0s; } }
@media (max-width: 520px) { .lib-top-links { display: none; } }
/* the gallery: the shelves and the search stay under the bar while the cards scroll */
.lib-gallery .lib-cats { position: sticky; top: var(--lib-top); z-index: 40; padding-block: 12px; margin-inline: calc(-1 * var(--lib-m)); padding-inline: var(--lib-m); background: color-mix(in srgb, var(--mx-page) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ── the stage: the component itself, on Tau's ground ── */
/* the names the collections use for the page around a stage */
.lib-demo { --bg: var(--mx-page); --line: var(--mx-line-strong); --f: var(--mx-font); }
/* type inside a stage starts from the collection's own base, 16 px with a relative line height and the design system's face */
.lib-demo .stage { font-family: var(--font, var(--mx-font)); font-feature-settings: var(--font-features, normal); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0; }
.lib-demo .stage { position: relative; overflow: hidden; border-radius: var(--mx-r-contain); box-shadow: 0 0 0 var(--mx-hair) var(--mx-line-strong); container-type: inline-size; isolation: isolate; -webkit-user-select: none; user-select: none; }
.lib-demo .ptr { position: absolute; left: 0; top: 0; z-index: 60; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: opacity var(--mx-op-out) linear; }
.lib-demo .finger { position: absolute; left: 0; top: 0; z-index: 60; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: var(--mx-r-press); background: rgb(11 11 11 / 16%); border: 2px solid rgb(255 255 255 / 90%); pointer-events: none; opacity: 0; transition: opacity var(--mx-op-out) linear; }
.lib-demo .finger.tap { background: rgb(11 11 11 / 32%); }
.lib-demo :where(svg) { display: inline; }
.lib-demo :where(em, i, cite) { font-style: inherit; }
.lib-demo :focus-visible { outline: 1.5px solid var(--mx-focus); outline-offset: 2px; }

/* a component that is a whole page stands in a frame of its own */
.lib-demo .lib-frame { height: var(--frame-h, clamp(560px, 78vh, 860px)); background: var(--mx-ground); }
.lib-demo .lib-frame > iframe { display: block; width: 100%; height: 100%; border: 0; }

/* the component's own switches: pills, by the shape law */
.lib-demo .controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lib-demo .controls button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--mx-r-press); background: var(--mx-pill); color: var(--mx-ink2); font: var(--mx-w-label) 13px/1 var(--mx-font); letter-spacing: -0.006em; transition: background-color var(--mx-color) linear, color var(--mx-color) linear; }
.lib-demo .controls button[aria-pressed="true"] { background: var(--mx-ink); color: var(--mx-on-ink); }
@media (hover: hover) { .lib-demo .controls button:not([aria-pressed="true"]):hover { background: var(--mx-selected); color: var(--mx-ink); transition-duration: 0s; } }

/* what to notice: three columns under hairlines */
.lib-demo .notes { list-style: none; margin: clamp(40px, 4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--lib-g); font-feature-settings: var(--mx-features); }
.lib-demo .notes li { padding-top: 16px; border-top: var(--mx-hair) solid var(--mx-line-strong); color: var(--mx-ink2); font: var(--mx-w-body) 15px/24px var(--mx-font); letter-spacing: -0.011em; text-wrap: pretty; }
.lib-demo .notes b { display: block; margin-bottom: 6px; color: var(--mx-ink); font-weight: var(--mx-w-head); }
@media (max-width: 900px) { .lib-demo .notes { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* the way to the next one */
.lib-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lib-g); margin-top: var(--lib-sec); padding-top: 24px; border-top: var(--mx-hair) solid var(--mx-ink); }
.lib-pager > a { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lib-pager > a:last-child { text-align: right; align-items: flex-end; }
.lib-pager span { font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); }
.lib-pager b { font: var(--lib-w-display) var(--lib-sub)/1.15 var(--mx-font-display); letter-spacing: -0.02em; text-wrap: balance; transition: color var(--mx-color) linear; }
.lib-pager > a:hover b { color: var(--mx-ink2); transition-duration: 0s; }

/* ── the footer: Tau's four columns ── */
.lib-foot { margin-top: calc(var(--lib-sec) * .6); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.lib-foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lib-g); row-gap: 32px; padding-top: 28px; border-top: var(--mx-hair) solid var(--mx-line-strong); }
.lib-foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; font-size: 14px; line-height: 22px; }
.lib-foot-col:nth-child(1) { grid-column: 1 / 4; }
.lib-foot-col:nth-child(2) { grid-column: 4 / 6; }
.lib-foot-col:nth-child(3) { grid-column: 6 / 10; }
.lib-foot-col:nth-child(4) { grid-column: 10 / 13; }
.lib-foot-col p { margin: 0; max-width: 30em; color: var(--mx-ink2); }
.lib-foot .lib-brand { height: auto; padding: 0; font-size: 15px; }
.lib-foot-label { font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); }
.lib-foot-nav { display: flex; flex-direction: column; gap: 2px; }
.lib-foot-nav a { color: var(--mx-ink); transition: color var(--mx-color) linear; }
.lib-foot-nav a:hover { color: var(--mx-ink3); transition-duration: 0s; }
.lib-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; font-weight: var(--mx-w-label); color: var(--mx-ink); }
.lib-more::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width var(--mx-color) linear; }
.lib-more:hover::after { width: 28px; transition-duration: 0s; }
.lib-foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); }
@media (max-width: 760px) {
  .lib-foot-col:nth-child(n) { grid-column: 1 / -1; }
  .lib-foot-col:nth-child(2) { grid-column: 1 / 7; }
  .lib-foot-col:nth-child(4) { grid-column: 7 / 13; }
}
/* the theme switch: a knob in a pill */
.lib-switch { width: 52px; height: 32px; padding: 3px; border: 0; border-radius: var(--mx-r-press); background: color-mix(in srgb, var(--mx-ink) 8%, transparent); display: flex; }
.lib-switch:hover { background: color-mix(in srgb, var(--mx-ink) 12%, transparent); }
.lib-switch-knob { width: 26px; height: 26px; border-radius: var(--mx-r-press); background: var(--mx-raised); box-shadow: var(--mx-e1), 0 0 0 var(--mx-hair) var(--mx-line); transition: transform var(--mx-d-tau) var(--mx-ease-tau), background-color var(--mx-color) linear; }
.lib-switch[aria-checked="true"] .lib-switch-knob { transform: translateX(20px); background: color-mix(in srgb, var(--mx-ink) 24%, transparent); box-shadow: none; }

/* a page shown inside the gallery: the stage alone */
html[data-embed] .lib-head, html[data-embed] .lib-pager, html[data-embed] .lib-foot, html[data-embed] .notes, html[data-embed] .controls { display: none; }
html[data-embed] .lib-main { padding: 0; }
html[data-embed] .lib-wrap { max-width: none; padding: 0; }
html[data-embed] .lib-demo .stage.stage { height: 100vh; border-radius: 0; box-shadow: none; }
html[data-embed] .lib-body { overflow: hidden; }

/* ── the gallery ── */
.lib-hero-title { display: flex; align-items: flex-start; gap: .12em; }
.lib-hero-count { padding-top: .3em; font-size: 14px; line-height: 1; font-weight: var(--mx-w-ui); letter-spacing: 0; color: var(--mx-ink3); font-variant-numeric: tabular-nums; }

/* the shelves: Tau's count filter (reference/tau/components/mechanics, count-filter), each a word with its count raised
   after it and the chosen one in ink, as Tau's Lab page sets its groups; the search is a quiet field on the same line */
.lib-cats { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px 48px; margin-top: clamp(32px, 4vw, 56px); }
.lib-cats-list { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 6px; font-size: 14px; line-height: 20px; }
.lib-cat { display: flex; align-items: flex-start; padding: 0; border: 0; background: none; font: inherit; letter-spacing: -0.165px; color: var(--mx-ink3); transition: color var(--mx-color) linear; }
.lib-cat:is(:hover, [data-hover]), .lib-cat[aria-pressed="true"] { color: var(--mx-ink); transition-duration: 0s; }
.lib-cat sup, .lib-find sup { margin-left: 2px; font-size: 10px; line-height: 13px; font-variant-numeric: tabular-nums; vertical-align: baseline; position: relative; top: 0; }
.lib-cat[data-none] { color: var(--mx-faded); }
.lib-find { display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--mx-ink3); }
.lib-find input { width: 14ch; padding: 0 0 2px; border: 0; border-bottom: var(--mx-hair) solid var(--mx-line-strong); border-radius: 0; outline: 0; background: none; color: var(--mx-ink); font: inherit; letter-spacing: -0.165px; transition: border-color var(--mx-color) linear; }
.lib-find input:focus { border-bottom-color: var(--mx-ink); }
.lib-find input::placeholder { color: var(--mx-ink3); opacity: 1; }
.lib-find input::-webkit-search-cancel-button { display: none; }

/* a shelf: its number, its name and its count over a rule of ink, as Tau sets a part */
.lib-shelf { padding-top: var(--lib-sec); scroll-margin-top: 140px; }
.lib-shelf:first-of-type { padding-top: clamp(48px, 5vw, 80px); }
.lib-shelf-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--mx-ink); }
.lib-shelf-no, .lib-shelf-count { font-size: 13px; line-height: 24px; letter-spacing: -0.165px; color: var(--mx-ink3); font-variant-numeric: tabular-nums; }
.lib-shelf-head h2 { margin: 0; font: var(--lib-w-display) var(--lib-chapter)/1.06 var(--mx-font-display); letter-spacing: var(--mx-track-chapter); }
.lib-shelf-lede { margin: 20px 0 0 72px; max-width: 60ch; font-size: 17px; line-height: 26px; letter-spacing: -0.011em; color: var(--mx-ink2); text-wrap: pretty; }
.lib-group { padding-top: clamp(40px, 4vw, 64px); scroll-margin-top: 140px; }
.lib-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
/* a shelf that holds one group of its own name does not name it twice */
.lib-group-head.is-shelf { display: none; }
.lib-group-head h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: var(--mx-w-head); letter-spacing: -0.011em; }
.lib-group-head span { font-size: 13px; line-height: 20px; letter-spacing: 0; color: var(--mx-ink3); font-variant-numeric: tabular-nums; }
.lib-shelf[hidden], .lib-group[hidden], .lib-card[hidden] { display: none; }
@media (max-width: 760px) {
  .lib-shelf-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .lib-shelf-lede { margin-left: 0; font-size: 16px; line-height: 25px; }
}

/* a card: the live picture on Tau's ground, the name and the number under it */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px) var(--lib-g); }
@media (max-width: 1100px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.lib-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-radius: var(--mx-r-contain); }
.lib-shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--mx-r-contain); background: var(--mx-ground); }
.lib-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--mx-hair) var(--mx-line); pointer-events: none; }
.lib-shot > iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--shot-scale, .33)); pointer-events: none; opacity: 0; transition: opacity var(--mx-op-out) linear; }
.lib-shot > iframe[data-ready] { opacity: 1; }
/* a heavy shelf's card plays its recorded loop (gallery.js), filling the card as the page would */
.lib-shot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity var(--mx-op-out) linear; }
.lib-shot > video[data-ready] { opacity: 1; }
.lib-card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; font-feature-settings: var(--mx-features); }
.lib-card-name { color: var(--mx-ink); font-size: 15px; line-height: 22px; font-weight: var(--mx-w-label); letter-spacing: -0.011em; transition: color var(--mx-color) linear; }
.lib-card:hover .lib-card-name { color: var(--mx-ink2); transition-duration: 0s; }
.lib-card-no { font-size: 13px; line-height: 20px; color: var(--mx-ink3); font-variant-numeric: tabular-nums; }
.lib-card-from { grid-column: 1 / -1; font-size: 13px; line-height: 20px; letter-spacing: -0.165px; color: var(--mx-ink3); text-wrap: pretty; }
.lib-empty { margin: 0; padding: var(--lib-sec) 0 0; font-size: 17px; line-height: 26px; color: var(--mx-ink2); }

@media (prefers-reduced-motion: reduce) {
  .lib-switch-knob { transition-duration: 1ms; }
}

/* written by build.mjs: a stage that follows the theme reads the ramps mirrored when the page is dark */
:root[data-theme="dark"] .lib-demo [data-follows-theme] { color-scheme: dark; --gray-0: #0b0b0b; --gray-10: #0d0d0d; --gray-20: #0f0f0f; --gray-30: #111111; --gray-40: #131313; --gray-50: #151515; --gray-60: #181817; --gray-70: #1a1a19; --gray-80: #1c1c1b; --gray-90: #1e1e1d; --gray-100: #20201f; --gray-150: #2c2c2a; --gray-200: #383835; --gray-250: #444442; --gray-300: #52514e; --gray-350: #5f5e5a; --gray-400: #6d6b67; --gray-450: #7b7974; --gray-500: #898781; --gray-550: #97958d; --gray-600: #a5a49a; --gray-650: #b4b3a8; --gray-700: #c3c2b7; --gray-750: #d2d1c7; --gray-800: #e1e0d9; --gray-810: #e4e3dd; --gray-820: #e7e6e1; --gray-830: #eae9e4; --gray-840: #edece8; --gray-850: #f0efec; --gray-860: #f3f3f0; --gray-870: #f6f6f4; --gray-880: #f9f9f7; --gray-890: #fcfcfb; --gray-900: #ffffff; --red-0: #0b0b0b; --red-10: #110c0b; --red-20: #170c0b; --red-30: #1d0b0a; --red-40: #230b0a; --red-50: #280a0a; --red-60: #2d0a0a; --red-70: #310b0b; --red-80: #340c0c; --red-90: #380d0d; --red-100: #3c0e0e; --red-150: #511212; --red-200: #641919; --red-250: #791e1e; --red-300: #8e2626; --red-350: #a32c2c; --red-400: #b93535; --red-450: #d03b3b; --red-500: #e34948; --red-550: #e66767; --red-600: #ec7e7e; --red-650: #f09595; --red-700: #f4abab; --red-750: #f7c1c1; --red-800: #fad6d6; --red-810: #fadada; --red-820: #fadfdf; --red-830: #fae3e3; --red-840: #fae7e7; --red-850: #fbebeb; --red-860: #fdefef; --red-870: #fef3f3; --red-880: #fef7f7; --red-890: #fffbfb; --red-900: #ffffff; --orange-0: #0b0b0b; --orange-10: #100c0b; --orange-20: #150d0a; --orange-30: #1a0e09; --orange-40: #1f0e08; --orange-50: #240e07; --orange-60: #290f06; --orange-70: #2d1006; --orange-80: #301106; --orange-90: #341307; --orange-100: #371407; --orange-150: #4b1b08; --orange-200: #5d230b; --orange-250: #712b0f; --orange-300: #863311; --orange-350: #993d19; --orange-400: #ae461c; --orange-450: #c25124; --orange-500: #d95926; --orange-550: #eb6834; --orange-600: #ec835a; --orange-650: #f09978; --orange-700: #f4ae94; --orange-750: #f3c5b2; --orange-800: #f7d8cb; --orange-810: #f7dcd1; --orange-820: #f7e1d7; --orange-830: #f7e5dd; --orange-840: #f8e9e2; --orange-850: #f9ece7; --orange-860: #faf0ec; --orange-870: #fcf4f0; --orange-880: #fdf7f5; --orange-890: #fefbfa; --orange-900: #ffffff; --yellow-0: #0b0b0b; --yellow-10: #0f0d0a; --yellow-20: #130e09; --yellow-30: #171007; --yellow-40: #1b1106; --yellow-50: #1f1204; --yellow-60: #231402; --yellow-70: #271500; --yellow-80: #2b1700; --yellow-90: #2e1800; --yellow-100: #311a00; --yellow-150: #412400; --yellow-200: #512e00; --yellow-250: #623900; --yellow-300: #724500; --yellow-350: #835100; --yellow-400: #945d01; --yellow-450: #a66a00; --yellow-500: #b77701; --yellow-550: #c98500; --yellow-600: #da9303; --yellow-650: #eda104; --yellow-700: #fab219; --yellow-750: #f9c868; --yellow-800: #f9dca4; --yellow-810: #f9e0b0; --yellow-820: #fae3b8; --yellow-830: #fae7c2; --yellow-840: #faebce; --yellow-850: #f9eeda; --yellow-860: #f9f2e4; --yellow-870: #fbf5ea; --yellow-880: #fcf8f1; --yellow-890: #fefcf8; --yellow-900: #ffffff; --green-0: #0b0b0b; --green-10: #0c0e0c; --green-20: #0d100d; --green-30: #0e130d; --green-40: #0e160e; --green-50: #0f180e; --green-60: #101b0f; --green-70: #101e0f; --green-80: #10210f; --green-90: #10230f; --green-100: #11260f; --green-150: #0f350d; --green-200: #074505; --green-250: #005400; --green-300: #006300; --green-350: #017301; --green-400: #028301; --green-450: #009300; --green-500: #0da30e; --green-550: #34b231; --green-600: #55bf50; --green-650: #73cb6d; --green-700: #91d68b; --green-750: #aee0a9; --green-800: #caeac7; --green-810: #d0eccd; --green-820: #d5eed3; --green-830: #dbf0d8; --green-840: #e0f2de; --green-850: #e5f4e4; --green-860: #ebf7e9; --green-870: #f0f9ef; --green-880: #f5fbf4; --green-890: #fafdfa; --green-900: #ffffff; --aqua-0: #0b0b0b; --aqua-10: #0b0e0d; --aqua-20: #0a110f; --aqua-30: #081411; --aqua-40: #071713; --aqua-50: #051a16; --aqua-60: #031c18; --aqua-70: #021f1a; --aqua-80: #02221c; --aqua-90: #02241e; --aqua-100: #022720; --aqua-150: #02342b; --aqua-200: #034235; --aqua-250: #095040; --aqua-300: #065f49; --aqua-350: #0f6e53; --aqua-400: #0f7e5c; --aqua-450: #148e65; --aqua-500: #1a9e70; --aqua-550: #1baf7a; --aqua-600: #3cbd8c; --aqua-650: #5acba0; --aqua-700: #7ad7b4; --aqua-750: #a0e1c9; --aqua-800: #bfebdb; --aqua-810: #c7eddf; --aqua-820: #ceefe2; --aqua-830: #d5f0e6; --aqua-840: #dcf2ea; --aqua-850: #e2f4ed; --aqua-860: #e8f7f1; --aqua-870: #edf9f4; --aqua-880: #f3fbf8; --aqua-890: #f9fdfb; --aqua-900: #ffffff; --blue-0: #0b0b0b; --blue-10: #0a0d11; --blue-20: #091018; --blue-30: #07121f; --blue-40: #051426; --blue-50: #03162c; --blue-60: #021831; --blue-70: #021a36; --blue-80: #021c39; --blue-90: #031e3d; --blue-100: #032042; --blue-150: #062b57; --blue-200: #0d366b; --blue-250: #114281; --blue-300: #184f95; --blue-350: #1c5cab; --blue-400: #256abf; --blue-450: #2a78d6; --blue-500: #3987e5; --blue-550: #5598e7; --blue-600: #6da7ec; --blue-650: #86b6ef; --blue-700: #9ec5f4; --blue-750: #b7d3f6; --blue-800: #cde2fb; --blue-810: #d2e5fa; --blue-820: #d7e8fa; --blue-830: #ddebfa; --blue-840: #e2eefa; --blue-850: #e7f1fb; --blue-860: #ebf4fc; --blue-870: #f0f7fe; --blue-880: #f5f9fe; --blue-890: #fafcff; --blue-900: #ffffff; --violet-0: #0b0b0b; --violet-10: #0c0c13; --violet-20: #0e0d1b; --violet-30: #0f0e23; --violet-40: #110e2b; --violet-50: #130f32; --violet-60: #151036; --violet-70: #17123b; --violet-80: #19133f; --violet-90: #1b1544; --violet-100: #1d1649; --violet-150: #271e60; --violet-200: #322777; --violet-250: #3e318e; --violet-300: #4a3aa7; --violet-350: #5645be; --violet-400: #6250d6; --violet-450: #7161e0; --violet-500: #8173e3; --violet-550: #9085e9; --violet-600: #a096eb; --violet-650: #b0a7f2; --violet-700: #bfb9f5; --violet-750: #cfcafb; --violet-800: #dfdbfd; --violet-810: #e2dffd; --violet-820: #e5e2fd; --violet-830: #e8e6fe; --violet-840: #ebeafe; --violet-850: #efedff; --violet-860: #f2f1ff; --violet-870: #f5f4ff; --violet-880: #f8f8ff; --violet-890: #fcfbff; --violet-900: #ffffff; --magenta-0: #0b0b0b; --magenta-10: #110b0d; --magenta-20: #170b0f; --magenta-30: #1c0b11; --magenta-40: #220a12; --magenta-50: #270a14; --magenta-60: #2b0a16; --magenta-70: #2f0b18; --magenta-80: #320c1a; --magenta-90: #360d1c; --magenta-100: #390f1f; --magenta-150: #4c1429; --magenta-200: #5e1c34; --magenta-250: #722340; --magenta-300: #862a4c; --magenta-350: #993458; --magenta-400: #ad3d66; --magenta-450: #c04873; --magenta-500: #d55181; --magenta-550: #e46191; --magenta-600: #e87ba4; --magenta-650: #ed93b4; --magenta-700: #f3a8c3; --magenta-750: #f3c0d3; --magenta-800: #f9d4e2; --magenta-810: #f9d9e5; --magenta-820: #f9dee8; --magenta-830: #f9e2eb; --magenta-840: #f9e6ed; --magenta-850: #faebf0; --magenta-860: #fbeff3; --magenta-870: #fdf2f6; --magenta-880: #fef6f9; --magenta-890: #fefbfc; --magenta-900: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lib-demo [data-follows-theme] { color-scheme: dark; --gray-0: #0b0b0b; --gray-10: #0d0d0d; --gray-20: #0f0f0f; --gray-30: #111111; --gray-40: #131313; --gray-50: #151515; --gray-60: #181817; --gray-70: #1a1a19; --gray-80: #1c1c1b; --gray-90: #1e1e1d; --gray-100: #20201f; --gray-150: #2c2c2a; --gray-200: #383835; --gray-250: #444442; --gray-300: #52514e; --gray-350: #5f5e5a; --gray-400: #6d6b67; --gray-450: #7b7974; --gray-500: #898781; --gray-550: #97958d; --gray-600: #a5a49a; --gray-650: #b4b3a8; --gray-700: #c3c2b7; --gray-750: #d2d1c7; --gray-800: #e1e0d9; --gray-810: #e4e3dd; --gray-820: #e7e6e1; --gray-830: #eae9e4; --gray-840: #edece8; --gray-850: #f0efec; --gray-860: #f3f3f0; --gray-870: #f6f6f4; --gray-880: #f9f9f7; --gray-890: #fcfcfb; --gray-900: #ffffff; --red-0: #0b0b0b; --red-10: #110c0b; --red-20: #170c0b; --red-30: #1d0b0a; --red-40: #230b0a; --red-50: #280a0a; --red-60: #2d0a0a; --red-70: #310b0b; --red-80: #340c0c; --red-90: #380d0d; --red-100: #3c0e0e; --red-150: #511212; --red-200: #641919; --red-250: #791e1e; --red-300: #8e2626; --red-350: #a32c2c; --red-400: #b93535; --red-450: #d03b3b; --red-500: #e34948; --red-550: #e66767; --red-600: #ec7e7e; --red-650: #f09595; --red-700: #f4abab; --red-750: #f7c1c1; --red-800: #fad6d6; --red-810: #fadada; --red-820: #fadfdf; --red-830: #fae3e3; --red-840: #fae7e7; --red-850: #fbebeb; --red-860: #fdefef; --red-870: #fef3f3; --red-880: #fef7f7; --red-890: #fffbfb; --red-900: #ffffff; --orange-0: #0b0b0b; --orange-10: #100c0b; --orange-20: #150d0a; --orange-30: #1a0e09; --orange-40: #1f0e08; --orange-50: #240e07; --orange-60: #290f06; --orange-70: #2d1006; --orange-80: #301106; --orange-90: #341307; --orange-100: #371407; --orange-150: #4b1b08; --orange-200: #5d230b; --orange-250: #712b0f; --orange-300: #863311; --orange-350: #993d19; --orange-400: #ae461c; --orange-450: #c25124; --orange-500: #d95926; --orange-550: #eb6834; --orange-600: #ec835a; --orange-650: #f09978; --orange-700: #f4ae94; --orange-750: #f3c5b2; --orange-800: #f7d8cb; --orange-810: #f7dcd1; --orange-820: #f7e1d7; --orange-830: #f7e5dd; --orange-840: #f8e9e2; --orange-850: #f9ece7; --orange-860: #faf0ec; --orange-870: #fcf4f0; --orange-880: #fdf7f5; --orange-890: #fefbfa; --orange-900: #ffffff; --yellow-0: #0b0b0b; --yellow-10: #0f0d0a; --yellow-20: #130e09; --yellow-30: #171007; --yellow-40: #1b1106; --yellow-50: #1f1204; --yellow-60: #231402; --yellow-70: #271500; --yellow-80: #2b1700; --yellow-90: #2e1800; --yellow-100: #311a00; --yellow-150: #412400; --yellow-200: #512e00; --yellow-250: #623900; --yellow-300: #724500; --yellow-350: #835100; --yellow-400: #945d01; --yellow-450: #a66a00; --yellow-500: #b77701; --yellow-550: #c98500; --yellow-600: #da9303; --yellow-650: #eda104; --yellow-700: #fab219; --yellow-750: #f9c868; --yellow-800: #f9dca4; --yellow-810: #f9e0b0; --yellow-820: #fae3b8; --yellow-830: #fae7c2; --yellow-840: #faebce; --yellow-850: #f9eeda; --yellow-860: #f9f2e4; --yellow-870: #fbf5ea; --yellow-880: #fcf8f1; --yellow-890: #fefcf8; --yellow-900: #ffffff; --green-0: #0b0b0b; --green-10: #0c0e0c; --green-20: #0d100d; --green-30: #0e130d; --green-40: #0e160e; --green-50: #0f180e; --green-60: #101b0f; --green-70: #101e0f; --green-80: #10210f; --green-90: #10230f; --green-100: #11260f; --green-150: #0f350d; --green-200: #074505; --green-250: #005400; --green-300: #006300; --green-350: #017301; --green-400: #028301; --green-450: #009300; --green-500: #0da30e; --green-550: #34b231; --green-600: #55bf50; --green-650: #73cb6d; --green-700: #91d68b; --green-750: #aee0a9; --green-800: #caeac7; --green-810: #d0eccd; --green-820: #d5eed3; --green-830: #dbf0d8; --green-840: #e0f2de; --green-850: #e5f4e4; --green-860: #ebf7e9; --green-870: #f0f9ef; --green-880: #f5fbf4; --green-890: #fafdfa; --green-900: #ffffff; --aqua-0: #0b0b0b; --aqua-10: #0b0e0d; --aqua-20: #0a110f; --aqua-30: #081411; --aqua-40: #071713; --aqua-50: #051a16; --aqua-60: #031c18; --aqua-70: #021f1a; --aqua-80: #02221c; --aqua-90: #02241e; --aqua-100: #022720; --aqua-150: #02342b; --aqua-200: #034235; --aqua-250: #095040; --aqua-300: #065f49; --aqua-350: #0f6e53; --aqua-400: #0f7e5c; --aqua-450: #148e65; --aqua-500: #1a9e70; --aqua-550: #1baf7a; --aqua-600: #3cbd8c; --aqua-650: #5acba0; --aqua-700: #7ad7b4; --aqua-750: #a0e1c9; --aqua-800: #bfebdb; --aqua-810: #c7eddf; --aqua-820: #ceefe2; --aqua-830: #d5f0e6; --aqua-840: #dcf2ea; --aqua-850: #e2f4ed; --aqua-860: #e8f7f1; --aqua-870: #edf9f4; --aqua-880: #f3fbf8; --aqua-890: #f9fdfb; --aqua-900: #ffffff; --blue-0: #0b0b0b; --blue-10: #0a0d11; --blue-20: #091018; --blue-30: #07121f; --blue-40: #051426; --blue-50: #03162c; --blue-60: #021831; --blue-70: #021a36; --blue-80: #021c39; --blue-90: #031e3d; --blue-100: #032042; --blue-150: #062b57; --blue-200: #0d366b; --blue-250: #114281; --blue-300: #184f95; --blue-350: #1c5cab; --blue-400: #256abf; --blue-450: #2a78d6; --blue-500: #3987e5; --blue-550: #5598e7; --blue-600: #6da7ec; --blue-650: #86b6ef; --blue-700: #9ec5f4; --blue-750: #b7d3f6; --blue-800: #cde2fb; --blue-810: #d2e5fa; --blue-820: #d7e8fa; --blue-830: #ddebfa; --blue-840: #e2eefa; --blue-850: #e7f1fb; --blue-860: #ebf4fc; --blue-870: #f0f7fe; --blue-880: #f5f9fe; --blue-890: #fafcff; --blue-900: #ffffff; --violet-0: #0b0b0b; --violet-10: #0c0c13; --violet-20: #0e0d1b; --violet-30: #0f0e23; --violet-40: #110e2b; --violet-50: #130f32; --violet-60: #151036; --violet-70: #17123b; --violet-80: #19133f; --violet-90: #1b1544; --violet-100: #1d1649; --violet-150: #271e60; --violet-200: #322777; --violet-250: #3e318e; --violet-300: #4a3aa7; --violet-350: #5645be; --violet-400: #6250d6; --violet-450: #7161e0; --violet-500: #8173e3; --violet-550: #9085e9; --violet-600: #a096eb; --violet-650: #b0a7f2; --violet-700: #bfb9f5; --violet-750: #cfcafb; --violet-800: #dfdbfd; --violet-810: #e2dffd; --violet-820: #e5e2fd; --violet-830: #e8e6fe; --violet-840: #ebeafe; --violet-850: #efedff; --violet-860: #f2f1ff; --violet-870: #f5f4ff; --violet-880: #f8f8ff; --violet-890: #fcfbff; --violet-900: #ffffff; --magenta-0: #0b0b0b; --magenta-10: #110b0d; --magenta-20: #170b0f; --magenta-30: #1c0b11; --magenta-40: #220a12; --magenta-50: #270a14; --magenta-60: #2b0a16; --magenta-70: #2f0b18; --magenta-80: #320c1a; --magenta-90: #360d1c; --magenta-100: #390f1f; --magenta-150: #4c1429; --magenta-200: #5e1c34; --magenta-250: #722340; --magenta-300: #862a4c; --magenta-350: #993458; --magenta-400: #ad3d66; --magenta-450: #c04873; --magenta-500: #d55181; --magenta-550: #e46191; --magenta-600: #e87ba4; --magenta-650: #ed93b4; --magenta-700: #f3a8c3; --magenta-750: #f3c0d3; --magenta-800: #f9d4e2; --magenta-810: #f9d9e5; --magenta-820: #f9dee8; --magenta-830: #f9e2eb; --magenta-840: #f9e6ed; --magenta-850: #faebf0; --magenta-860: #fbeff3; --magenta-870: #fdf2f6; --magenta-880: #fef6f9; --magenta-890: #fefbfc; --magenta-900: #ffffff; } }
.lib-demo [data-follows-theme] [data-keeps-look] { --gray-0: #ffffff; --gray-10: #fcfcfb; --gray-20: #f9f9f7; --gray-30: #f6f6f4; --gray-40: #f3f3f0; --gray-50: #f0efec; --gray-60: #edece8; --gray-70: #eae9e4; --gray-80: #e7e6e1; --gray-90: #e4e3dd; --gray-100: #e1e0d9; --gray-150: #d2d1c7; --gray-200: #c3c2b7; --gray-250: #b4b3a8; --gray-300: #a5a49a; --gray-350: #97958d; --gray-400: #898781; --gray-450: #7b7974; --gray-500: #6d6b67; --gray-550: #5f5e5a; --gray-600: #52514e; --gray-650: #444442; --gray-700: #383835; --gray-750: #2c2c2a; --gray-800: #20201f; --gray-810: #1e1e1d; --gray-820: #1c1c1b; --gray-830: #1a1a19; --gray-840: #181817; --gray-850: #151515; --gray-860: #131313; --gray-870: #111111; --gray-880: #0f0f0f; --gray-890: #0d0d0d; --gray-900: #0b0b0b; --red-0: #ffffff; --red-10: #fffbfb; --red-20: #fef7f7; --red-30: #fef3f3; --red-40: #fdefef; --red-50: #fbebeb; --red-60: #fae7e7; --red-70: #fae3e3; --red-80: #fadfdf; --red-90: #fadada; --red-100: #fad6d6; --red-150: #f7c1c1; --red-200: #f4abab; --red-250: #f09595; --red-300: #ec7e7e; --red-350: #e66767; --red-400: #e34948; --red-450: #d03b3b; --red-500: #b93535; --red-550: #a32c2c; --red-600: #8e2626; --red-650: #791e1e; --red-700: #641919; --red-750: #511212; --red-800: #3c0e0e; --red-810: #380d0d; --red-820: #340c0c; --red-830: #310b0b; --red-840: #2d0a0a; --red-850: #280a0a; --red-860: #230b0a; --red-870: #1d0b0a; --red-880: #170c0b; --red-890: #110c0b; --red-900: #0b0b0b; --orange-0: #ffffff; --orange-10: #fefbfa; --orange-20: #fdf7f5; --orange-30: #fcf4f0; --orange-40: #faf0ec; --orange-50: #f9ece7; --orange-60: #f8e9e2; --orange-70: #f7e5dd; --orange-80: #f7e1d7; --orange-90: #f7dcd1; --orange-100: #f7d8cb; --orange-150: #f3c5b2; --orange-200: #f4ae94; --orange-250: #f09978; --orange-300: #ec835a; --orange-350: #eb6834; --orange-400: #d95926; --orange-450: #c25124; --orange-500: #ae461c; --orange-550: #993d19; --orange-600: #863311; --orange-650: #712b0f; --orange-700: #5d230b; --orange-750: #4b1b08; --orange-800: #371407; --orange-810: #341307; --orange-820: #301106; --orange-830: #2d1006; --orange-840: #290f06; --orange-850: #240e07; --orange-860: #1f0e08; --orange-870: #1a0e09; --orange-880: #150d0a; --orange-890: #100c0b; --orange-900: #0b0b0b; --yellow-0: #ffffff; --yellow-10: #fefcf8; --yellow-20: #fcf8f1; --yellow-30: #fbf5ea; --yellow-40: #f9f2e4; --yellow-50: #f9eeda; --yellow-60: #faebce; --yellow-70: #fae7c2; --yellow-80: #fae3b8; --yellow-90: #f9e0b0; --yellow-100: #f9dca4; --yellow-150: #f9c868; --yellow-200: #fab219; --yellow-250: #eda104; --yellow-300: #da9303; --yellow-350: #c98500; --yellow-400: #b77701; --yellow-450: #a66a00; --yellow-500: #945d01; --yellow-550: #835100; --yellow-600: #724500; --yellow-650: #623900; --yellow-700: #512e00; --yellow-750: #412400; --yellow-800: #311a00; --yellow-810: #2e1800; --yellow-820: #2b1700; --yellow-830: #271500; --yellow-840: #231402; --yellow-850: #1f1204; --yellow-860: #1b1106; --yellow-870: #171007; --yellow-880: #130e09; --yellow-890: #0f0d0a; --yellow-900: #0b0b0b; --green-0: #ffffff; --green-10: #fafdfa; --green-20: #f5fbf4; --green-30: #f0f9ef; --green-40: #ebf7e9; --green-50: #e5f4e4; --green-60: #e0f2de; --green-70: #dbf0d8; --green-80: #d5eed3; --green-90: #d0eccd; --green-100: #caeac7; --green-150: #aee0a9; --green-200: #91d68b; --green-250: #73cb6d; --green-300: #55bf50; --green-350: #34b231; --green-400: #0da30e; --green-450: #009300; --green-500: #028301; --green-550: #017301; --green-600: #006300; --green-650: #005400; --green-700: #074505; --green-750: #0f350d; --green-800: #11260f; --green-810: #10230f; --green-820: #10210f; --green-830: #101e0f; --green-840: #101b0f; --green-850: #0f180e; --green-860: #0e160e; --green-870: #0e130d; --green-880: #0d100d; --green-890: #0c0e0c; --green-900: #0b0b0b; --aqua-0: #ffffff; --aqua-10: #f9fdfb; --aqua-20: #f3fbf8; --aqua-30: #edf9f4; --aqua-40: #e8f7f1; --aqua-50: #e2f4ed; --aqua-60: #dcf2ea; --aqua-70: #d5f0e6; --aqua-80: #ceefe2; --aqua-90: #c7eddf; --aqua-100: #bfebdb; --aqua-150: #a0e1c9; --aqua-200: #7ad7b4; --aqua-250: #5acba0; --aqua-300: #3cbd8c; --aqua-350: #1baf7a; --aqua-400: #1a9e70; --aqua-450: #148e65; --aqua-500: #0f7e5c; --aqua-550: #0f6e53; --aqua-600: #065f49; --aqua-650: #095040; --aqua-700: #034235; --aqua-750: #02342b; --aqua-800: #022720; --aqua-810: #02241e; --aqua-820: #02221c; --aqua-830: #021f1a; --aqua-840: #031c18; --aqua-850: #051a16; --aqua-860: #071713; --aqua-870: #081411; --aqua-880: #0a110f; --aqua-890: #0b0e0d; --aqua-900: #0b0b0b; --blue-0: #ffffff; --blue-10: #fafcff; --blue-20: #f5f9fe; --blue-30: #f0f7fe; --blue-40: #ebf4fc; --blue-50: #e7f1fb; --blue-60: #e2eefa; --blue-70: #ddebfa; --blue-80: #d7e8fa; --blue-90: #d2e5fa; --blue-100: #cde2fb; --blue-150: #b7d3f6; --blue-200: #9ec5f4; --blue-250: #86b6ef; --blue-300: #6da7ec; --blue-350: #5598e7; --blue-400: #3987e5; --blue-450: #2a78d6; --blue-500: #256abf; --blue-550: #1c5cab; --blue-600: #184f95; --blue-650: #114281; --blue-700: #0d366b; --blue-750: #062b57; --blue-800: #032042; --blue-810: #031e3d; --blue-820: #021c39; --blue-830: #021a36; --blue-840: #021831; --blue-850: #03162c; --blue-860: #051426; --blue-870: #07121f; --blue-880: #091018; --blue-890: #0a0d11; --blue-900: #0b0b0b; --violet-0: #ffffff; --violet-10: #fcfbff; --violet-20: #f8f8ff; --violet-30: #f5f4ff; --violet-40: #f2f1ff; --violet-50: #efedff; --violet-60: #ebeafe; --violet-70: #e8e6fe; --violet-80: #e5e2fd; --violet-90: #e2dffd; --violet-100: #dfdbfd; --violet-150: #cfcafb; --violet-200: #bfb9f5; --violet-250: #b0a7f2; --violet-300: #a096eb; --violet-350: #9085e9; --violet-400: #8173e3; --violet-450: #7161e0; --violet-500: #6250d6; --violet-550: #5645be; --violet-600: #4a3aa7; --violet-650: #3e318e; --violet-700: #322777; --violet-750: #271e60; --violet-800: #1d1649; --violet-810: #1b1544; --violet-820: #19133f; --violet-830: #17123b; --violet-840: #151036; --violet-850: #130f32; --violet-860: #110e2b; --violet-870: #0f0e23; --violet-880: #0e0d1b; --violet-890: #0c0c13; --violet-900: #0b0b0b; --magenta-0: #ffffff; --magenta-10: #fefbfc; --magenta-20: #fef6f9; --magenta-30: #fdf2f6; --magenta-40: #fbeff3; --magenta-50: #faebf0; --magenta-60: #f9e6ed; --magenta-70: #f9e2eb; --magenta-80: #f9dee8; --magenta-90: #f9d9e5; --magenta-100: #f9d4e2; --magenta-150: #f3c0d3; --magenta-200: #f3a8c3; --magenta-250: #ed93b4; --magenta-300: #e87ba4; --magenta-350: #e46191; --magenta-400: #d55181; --magenta-450: #c04873; --magenta-500: #ad3d66; --magenta-550: #993458; --magenta-600: #862a4c; --magenta-650: #722340; --magenta-700: #5e1c34; --magenta-750: #4c1429; --magenta-800: #390f1f; --magenta-810: #360d1c; --magenta-820: #320c1a; --magenta-830: #2f0b18; --magenta-840: #2b0a16; --magenta-850: #270a14; --magenta-860: #220a12; --magenta-870: #1c0b11; --magenta-880: #170b0f; --magenta-890: #110b0d; --magenta-900: #0b0b0b; }
/* written by build.mjs: a stage designed dark reads the ramps mirrored when the page is light */
:root[data-theme="light"] .lib-demo [data-lightens] { color-scheme: light; --gray-0: #0b0b0b; --gray-10: #0d0d0d; --gray-20: #0f0f0f; --gray-30: #111111; --gray-40: #131313; --gray-50: #151515; --gray-60: #181817; --gray-70: #1a1a19; --gray-80: #1c1c1b; --gray-90: #1e1e1d; --gray-100: #20201f; --gray-150: #2c2c2a; --gray-200: #383835; --gray-250: #444442; --gray-300: #52514e; --gray-350: #5f5e5a; --gray-400: #6d6b67; --gray-450: #7b7974; --gray-500: #898781; --gray-550: #97958d; --gray-600: #a5a49a; --gray-650: #b4b3a8; --gray-700: #c3c2b7; --gray-750: #d2d1c7; --gray-800: #e1e0d9; --gray-810: #e4e3dd; --gray-820: #e7e6e1; --gray-830: #eae9e4; --gray-840: #edece8; --gray-850: #f0efec; --gray-860: #f3f3f0; --gray-870: #f6f6f4; --gray-880: #f9f9f7; --gray-890: #fcfcfb; --gray-900: #ffffff; --red-0: #0b0b0b; --red-10: #110c0b; --red-20: #170c0b; --red-30: #1d0b0a; --red-40: #230b0a; --red-50: #280a0a; --red-60: #2d0a0a; --red-70: #310b0b; --red-80: #340c0c; --red-90: #380d0d; --red-100: #3c0e0e; --red-150: #511212; --red-200: #641919; --red-250: #791e1e; --red-300: #8e2626; --red-350: #a32c2c; --red-400: #b93535; --red-450: #d03b3b; --red-500: #e34948; --red-550: #e66767; --red-600: #ec7e7e; --red-650: #f09595; --red-700: #f4abab; --red-750: #f7c1c1; --red-800: #fad6d6; --red-810: #fadada; --red-820: #fadfdf; --red-830: #fae3e3; --red-840: #fae7e7; --red-850: #fbebeb; --red-860: #fdefef; --red-870: #fef3f3; --red-880: #fef7f7; --red-890: #fffbfb; --red-900: #ffffff; --orange-0: #0b0b0b; --orange-10: #100c0b; --orange-20: #150d0a; --orange-30: #1a0e09; --orange-40: #1f0e08; --orange-50: #240e07; --orange-60: #290f06; --orange-70: #2d1006; --orange-80: #301106; --orange-90: #341307; --orange-100: #371407; --orange-150: #4b1b08; --orange-200: #5d230b; --orange-250: #712b0f; --orange-300: #863311; --orange-350: #993d19; --orange-400: #ae461c; --orange-450: #c25124; --orange-500: #d95926; --orange-550: #eb6834; --orange-600: #ec835a; --orange-650: #f09978; --orange-700: #f4ae94; --orange-750: #f3c5b2; --orange-800: #f7d8cb; --orange-810: #f7dcd1; --orange-820: #f7e1d7; --orange-830: #f7e5dd; --orange-840: #f8e9e2; --orange-850: #f9ece7; --orange-860: #faf0ec; --orange-870: #fcf4f0; --orange-880: #fdf7f5; --orange-890: #fefbfa; --orange-900: #ffffff; --yellow-0: #0b0b0b; --yellow-10: #0f0d0a; --yellow-20: #130e09; --yellow-30: #171007; --yellow-40: #1b1106; --yellow-50: #1f1204; --yellow-60: #231402; --yellow-70: #271500; --yellow-80: #2b1700; --yellow-90: #2e1800; --yellow-100: #311a00; --yellow-150: #412400; --yellow-200: #512e00; --yellow-250: #623900; --yellow-300: #724500; --yellow-350: #835100; --yellow-400: #945d01; --yellow-450: #a66a00; --yellow-500: #b77701; --yellow-550: #c98500; --yellow-600: #da9303; --yellow-650: #eda104; --yellow-700: #fab219; --yellow-750: #f9c868; --yellow-800: #f9dca4; --yellow-810: #f9e0b0; --yellow-820: #fae3b8; --yellow-830: #fae7c2; --yellow-840: #faebce; --yellow-850: #f9eeda; --yellow-860: #f9f2e4; --yellow-870: #fbf5ea; --yellow-880: #fcf8f1; --yellow-890: #fefcf8; --yellow-900: #ffffff; --green-0: #0b0b0b; --green-10: #0c0e0c; --green-20: #0d100d; --green-30: #0e130d; --green-40: #0e160e; --green-50: #0f180e; --green-60: #101b0f; --green-70: #101e0f; --green-80: #10210f; --green-90: #10230f; --green-100: #11260f; --green-150: #0f350d; --green-200: #074505; --green-250: #005400; --green-300: #006300; --green-350: #017301; --green-400: #028301; --green-450: #009300; --green-500: #0da30e; --green-550: #34b231; --green-600: #55bf50; --green-650: #73cb6d; --green-700: #91d68b; --green-750: #aee0a9; --green-800: #caeac7; --green-810: #d0eccd; --green-820: #d5eed3; --green-830: #dbf0d8; --green-840: #e0f2de; --green-850: #e5f4e4; --green-860: #ebf7e9; --green-870: #f0f9ef; --green-880: #f5fbf4; --green-890: #fafdfa; --green-900: #ffffff; --aqua-0: #0b0b0b; --aqua-10: #0b0e0d; --aqua-20: #0a110f; --aqua-30: #081411; --aqua-40: #071713; --aqua-50: #051a16; --aqua-60: #031c18; --aqua-70: #021f1a; --aqua-80: #02221c; --aqua-90: #02241e; --aqua-100: #022720; --aqua-150: #02342b; --aqua-200: #034235; --aqua-250: #095040; --aqua-300: #065f49; --aqua-350: #0f6e53; --aqua-400: #0f7e5c; --aqua-450: #148e65; --aqua-500: #1a9e70; --aqua-550: #1baf7a; --aqua-600: #3cbd8c; --aqua-650: #5acba0; --aqua-700: #7ad7b4; --aqua-750: #a0e1c9; --aqua-800: #bfebdb; --aqua-810: #c7eddf; --aqua-820: #ceefe2; --aqua-830: #d5f0e6; --aqua-840: #dcf2ea; --aqua-850: #e2f4ed; --aqua-860: #e8f7f1; --aqua-870: #edf9f4; --aqua-880: #f3fbf8; --aqua-890: #f9fdfb; --aqua-900: #ffffff; --blue-0: #0b0b0b; --blue-10: #0a0d11; --blue-20: #091018; --blue-30: #07121f; --blue-40: #051426; --blue-50: #03162c; --blue-60: #021831; --blue-70: #021a36; --blue-80: #021c39; --blue-90: #031e3d; --blue-100: #032042; --blue-150: #062b57; --blue-200: #0d366b; --blue-250: #114281; --blue-300: #184f95; --blue-350: #1c5cab; --blue-400: #256abf; --blue-450: #2a78d6; --blue-500: #3987e5; --blue-550: #5598e7; --blue-600: #6da7ec; --blue-650: #86b6ef; --blue-700: #9ec5f4; --blue-750: #b7d3f6; --blue-800: #cde2fb; --blue-810: #d2e5fa; --blue-820: #d7e8fa; --blue-830: #ddebfa; --blue-840: #e2eefa; --blue-850: #e7f1fb; --blue-860: #ebf4fc; --blue-870: #f0f7fe; --blue-880: #f5f9fe; --blue-890: #fafcff; --blue-900: #ffffff; --violet-0: #0b0b0b; --violet-10: #0c0c13; --violet-20: #0e0d1b; --violet-30: #0f0e23; --violet-40: #110e2b; --violet-50: #130f32; --violet-60: #151036; --violet-70: #17123b; --violet-80: #19133f; --violet-90: #1b1544; --violet-100: #1d1649; --violet-150: #271e60; --violet-200: #322777; --violet-250: #3e318e; --violet-300: #4a3aa7; --violet-350: #5645be; --violet-400: #6250d6; --violet-450: #7161e0; --violet-500: #8173e3; --violet-550: #9085e9; --violet-600: #a096eb; --violet-650: #b0a7f2; --violet-700: #bfb9f5; --violet-750: #cfcafb; --violet-800: #dfdbfd; --violet-810: #e2dffd; --violet-820: #e5e2fd; --violet-830: #e8e6fe; --violet-840: #ebeafe; --violet-850: #efedff; --violet-860: #f2f1ff; --violet-870: #f5f4ff; --violet-880: #f8f8ff; --violet-890: #fcfbff; --violet-900: #ffffff; --magenta-0: #0b0b0b; --magenta-10: #110b0d; --magenta-20: #170b0f; --magenta-30: #1c0b11; --magenta-40: #220a12; --magenta-50: #270a14; --magenta-60: #2b0a16; --magenta-70: #2f0b18; --magenta-80: #320c1a; --magenta-90: #360d1c; --magenta-100: #390f1f; --magenta-150: #4c1429; --magenta-200: #5e1c34; --magenta-250: #722340; --magenta-300: #862a4c; --magenta-350: #993458; --magenta-400: #ad3d66; --magenta-450: #c04873; --magenta-500: #d55181; --magenta-550: #e46191; --magenta-600: #e87ba4; --magenta-650: #ed93b4; --magenta-700: #f3a8c3; --magenta-750: #f3c0d3; --magenta-800: #f9d4e2; --magenta-810: #f9d9e5; --magenta-820: #f9dee8; --magenta-830: #f9e2eb; --magenta-840: #f9e6ed; --magenta-850: #faebf0; --magenta-860: #fbeff3; --magenta-870: #fdf2f6; --magenta-880: #fef6f9; --magenta-890: #fefbfc; --magenta-900: #ffffff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lib-demo [data-lightens] { color-scheme: light; --gray-0: #0b0b0b; --gray-10: #0d0d0d; --gray-20: #0f0f0f; --gray-30: #111111; --gray-40: #131313; --gray-50: #151515; --gray-60: #181817; --gray-70: #1a1a19; --gray-80: #1c1c1b; --gray-90: #1e1e1d; --gray-100: #20201f; --gray-150: #2c2c2a; --gray-200: #383835; --gray-250: #444442; --gray-300: #52514e; --gray-350: #5f5e5a; --gray-400: #6d6b67; --gray-450: #7b7974; --gray-500: #898781; --gray-550: #97958d; --gray-600: #a5a49a; --gray-650: #b4b3a8; --gray-700: #c3c2b7; --gray-750: #d2d1c7; --gray-800: #e1e0d9; --gray-810: #e4e3dd; --gray-820: #e7e6e1; --gray-830: #eae9e4; --gray-840: #edece8; --gray-850: #f0efec; --gray-860: #f3f3f0; --gray-870: #f6f6f4; --gray-880: #f9f9f7; --gray-890: #fcfcfb; --gray-900: #ffffff; --red-0: #0b0b0b; --red-10: #110c0b; --red-20: #170c0b; --red-30: #1d0b0a; --red-40: #230b0a; --red-50: #280a0a; --red-60: #2d0a0a; --red-70: #310b0b; --red-80: #340c0c; --red-90: #380d0d; --red-100: #3c0e0e; --red-150: #511212; --red-200: #641919; --red-250: #791e1e; --red-300: #8e2626; --red-350: #a32c2c; --red-400: #b93535; --red-450: #d03b3b; --red-500: #e34948; --red-550: #e66767; --red-600: #ec7e7e; --red-650: #f09595; --red-700: #f4abab; --red-750: #f7c1c1; --red-800: #fad6d6; --red-810: #fadada; --red-820: #fadfdf; --red-830: #fae3e3; --red-840: #fae7e7; --red-850: #fbebeb; --red-860: #fdefef; --red-870: #fef3f3; --red-880: #fef7f7; --red-890: #fffbfb; --red-900: #ffffff; --orange-0: #0b0b0b; --orange-10: #100c0b; --orange-20: #150d0a; --orange-30: #1a0e09; --orange-40: #1f0e08; --orange-50: #240e07; --orange-60: #290f06; --orange-70: #2d1006; --orange-80: #301106; --orange-90: #341307; --orange-100: #371407; --orange-150: #4b1b08; --orange-200: #5d230b; --orange-250: #712b0f; --orange-300: #863311; --orange-350: #993d19; --orange-400: #ae461c; --orange-450: #c25124; --orange-500: #d95926; --orange-550: #eb6834; --orange-600: #ec835a; --orange-650: #f09978; --orange-700: #f4ae94; --orange-750: #f3c5b2; --orange-800: #f7d8cb; --orange-810: #f7dcd1; --orange-820: #f7e1d7; --orange-830: #f7e5dd; --orange-840: #f8e9e2; --orange-850: #f9ece7; --orange-860: #faf0ec; --orange-870: #fcf4f0; --orange-880: #fdf7f5; --orange-890: #fefbfa; --orange-900: #ffffff; --yellow-0: #0b0b0b; --yellow-10: #0f0d0a; --yellow-20: #130e09; --yellow-30: #171007; --yellow-40: #1b1106; --yellow-50: #1f1204; --yellow-60: #231402; --yellow-70: #271500; --yellow-80: #2b1700; --yellow-90: #2e1800; --yellow-100: #311a00; --yellow-150: #412400; --yellow-200: #512e00; --yellow-250: #623900; --yellow-300: #724500; --yellow-350: #835100; --yellow-400: #945d01; --yellow-450: #a66a00; --yellow-500: #b77701; --yellow-550: #c98500; --yellow-600: #da9303; --yellow-650: #eda104; --yellow-700: #fab219; --yellow-750: #f9c868; --yellow-800: #f9dca4; --yellow-810: #f9e0b0; --yellow-820: #fae3b8; --yellow-830: #fae7c2; --yellow-840: #faebce; --yellow-850: #f9eeda; --yellow-860: #f9f2e4; --yellow-870: #fbf5ea; --yellow-880: #fcf8f1; --yellow-890: #fefcf8; --yellow-900: #ffffff; --green-0: #0b0b0b; --green-10: #0c0e0c; --green-20: #0d100d; --green-30: #0e130d; --green-40: #0e160e; --green-50: #0f180e; --green-60: #101b0f; --green-70: #101e0f; --green-80: #10210f; --green-90: #10230f; --green-100: #11260f; --green-150: #0f350d; --green-200: #074505; --green-250: #005400; --green-300: #006300; --green-350: #017301; --green-400: #028301; --green-450: #009300; --green-500: #0da30e; --green-550: #34b231; --green-600: #55bf50; --green-650: #73cb6d; --green-700: #91d68b; --green-750: #aee0a9; --green-800: #caeac7; --green-810: #d0eccd; --green-820: #d5eed3; --green-830: #dbf0d8; --green-840: #e0f2de; --green-850: #e5f4e4; --green-860: #ebf7e9; --green-870: #f0f9ef; --green-880: #f5fbf4; --green-890: #fafdfa; --green-900: #ffffff; --aqua-0: #0b0b0b; --aqua-10: #0b0e0d; --aqua-20: #0a110f; --aqua-30: #081411; --aqua-40: #071713; --aqua-50: #051a16; --aqua-60: #031c18; --aqua-70: #021f1a; --aqua-80: #02221c; --aqua-90: #02241e; --aqua-100: #022720; --aqua-150: #02342b; --aqua-200: #034235; --aqua-250: #095040; --aqua-300: #065f49; --aqua-350: #0f6e53; --aqua-400: #0f7e5c; --aqua-450: #148e65; --aqua-500: #1a9e70; --aqua-550: #1baf7a; --aqua-600: #3cbd8c; --aqua-650: #5acba0; --aqua-700: #7ad7b4; --aqua-750: #a0e1c9; --aqua-800: #bfebdb; --aqua-810: #c7eddf; --aqua-820: #ceefe2; --aqua-830: #d5f0e6; --aqua-840: #dcf2ea; --aqua-850: #e2f4ed; --aqua-860: #e8f7f1; --aqua-870: #edf9f4; --aqua-880: #f3fbf8; --aqua-890: #f9fdfb; --aqua-900: #ffffff; --blue-0: #0b0b0b; --blue-10: #0a0d11; --blue-20: #091018; --blue-30: #07121f; --blue-40: #051426; --blue-50: #03162c; --blue-60: #021831; --blue-70: #021a36; --blue-80: #021c39; --blue-90: #031e3d; --blue-100: #032042; --blue-150: #062b57; --blue-200: #0d366b; --blue-250: #114281; --blue-300: #184f95; --blue-350: #1c5cab; --blue-400: #256abf; --blue-450: #2a78d6; --blue-500: #3987e5; --blue-550: #5598e7; --blue-600: #6da7ec; --blue-650: #86b6ef; --blue-700: #9ec5f4; --blue-750: #b7d3f6; --blue-800: #cde2fb; --blue-810: #d2e5fa; --blue-820: #d7e8fa; --blue-830: #ddebfa; --blue-840: #e2eefa; --blue-850: #e7f1fb; --blue-860: #ebf4fc; --blue-870: #f0f7fe; --blue-880: #f5f9fe; --blue-890: #fafcff; --blue-900: #ffffff; --violet-0: #0b0b0b; --violet-10: #0c0c13; --violet-20: #0e0d1b; --violet-30: #0f0e23; --violet-40: #110e2b; --violet-50: #130f32; --violet-60: #151036; --violet-70: #17123b; --violet-80: #19133f; --violet-90: #1b1544; --violet-100: #1d1649; --violet-150: #271e60; --violet-200: #322777; --violet-250: #3e318e; --violet-300: #4a3aa7; --violet-350: #5645be; --violet-400: #6250d6; --violet-450: #7161e0; --violet-500: #8173e3; --violet-550: #9085e9; --violet-600: #a096eb; --violet-650: #b0a7f2; --violet-700: #bfb9f5; --violet-750: #cfcafb; --violet-800: #dfdbfd; --violet-810: #e2dffd; --violet-820: #e5e2fd; --violet-830: #e8e6fe; --violet-840: #ebeafe; --violet-850: #efedff; --violet-860: #f2f1ff; --violet-870: #f5f4ff; --violet-880: #f8f8ff; --violet-890: #fcfbff; --violet-900: #ffffff; --magenta-0: #0b0b0b; --magenta-10: #110b0d; --magenta-20: #170b0f; --magenta-30: #1c0b11; --magenta-40: #220a12; --magenta-50: #270a14; --magenta-60: #2b0a16; --magenta-70: #2f0b18; --magenta-80: #320c1a; --magenta-90: #360d1c; --magenta-100: #390f1f; --magenta-150: #4c1429; --magenta-200: #5e1c34; --magenta-250: #722340; --magenta-300: #862a4c; --magenta-350: #993458; --magenta-400: #ad3d66; --magenta-450: #c04873; --magenta-500: #d55181; --magenta-550: #e46191; --magenta-600: #e87ba4; --magenta-650: #ed93b4; --magenta-700: #f3a8c3; --magenta-750: #f3c0d3; --magenta-800: #f9d4e2; --magenta-810: #f9d9e5; --magenta-820: #f9dee8; --magenta-830: #f9e2eb; --magenta-840: #f9e6ed; --magenta-850: #faebf0; --magenta-860: #fbeff3; --magenta-870: #fdf2f6; --magenta-880: #fef6f9; --magenta-890: #fefbfc; --magenta-900: #ffffff; } }
.lib-demo [data-lightens] [data-keeps-look] { --gray-0: #ffffff; --gray-10: #fcfcfb; --gray-20: #f9f9f7; --gray-30: #f6f6f4; --gray-40: #f3f3f0; --gray-50: #f0efec; --gray-60: #edece8; --gray-70: #eae9e4; --gray-80: #e7e6e1; --gray-90: #e4e3dd; --gray-100: #e1e0d9; --gray-150: #d2d1c7; --gray-200: #c3c2b7; --gray-250: #b4b3a8; --gray-300: #a5a49a; --gray-350: #97958d; --gray-400: #898781; --gray-450: #7b7974; --gray-500: #6d6b67; --gray-550: #5f5e5a; --gray-600: #52514e; --gray-650: #444442; --gray-700: #383835; --gray-750: #2c2c2a; --gray-800: #20201f; --gray-810: #1e1e1d; --gray-820: #1c1c1b; --gray-830: #1a1a19; --gray-840: #181817; --gray-850: #151515; --gray-860: #131313; --gray-870: #111111; --gray-880: #0f0f0f; --gray-890: #0d0d0d; --gray-900: #0b0b0b; --red-0: #ffffff; --red-10: #fffbfb; --red-20: #fef7f7; --red-30: #fef3f3; --red-40: #fdefef; --red-50: #fbebeb; --red-60: #fae7e7; --red-70: #fae3e3; --red-80: #fadfdf; --red-90: #fadada; --red-100: #fad6d6; --red-150: #f7c1c1; --red-200: #f4abab; --red-250: #f09595; --red-300: #ec7e7e; --red-350: #e66767; --red-400: #e34948; --red-450: #d03b3b; --red-500: #b93535; --red-550: #a32c2c; --red-600: #8e2626; --red-650: #791e1e; --red-700: #641919; --red-750: #511212; --red-800: #3c0e0e; --red-810: #380d0d; --red-820: #340c0c; --red-830: #310b0b; --red-840: #2d0a0a; --red-850: #280a0a; --red-860: #230b0a; --red-870: #1d0b0a; --red-880: #170c0b; --red-890: #110c0b; --red-900: #0b0b0b; --orange-0: #ffffff; --orange-10: #fefbfa; --orange-20: #fdf7f5; --orange-30: #fcf4f0; --orange-40: #faf0ec; --orange-50: #f9ece7; --orange-60: #f8e9e2; --orange-70: #f7e5dd; --orange-80: #f7e1d7; --orange-90: #f7dcd1; --orange-100: #f7d8cb; --orange-150: #f3c5b2; --orange-200: #f4ae94; --orange-250: #f09978; --orange-300: #ec835a; --orange-350: #eb6834; --orange-400: #d95926; --orange-450: #c25124; --orange-500: #ae461c; --orange-550: #993d19; --orange-600: #863311; --orange-650: #712b0f; --orange-700: #5d230b; --orange-750: #4b1b08; --orange-800: #371407; --orange-810: #341307; --orange-820: #301106; --orange-830: #2d1006; --orange-840: #290f06; --orange-850: #240e07; --orange-860: #1f0e08; --orange-870: #1a0e09; --orange-880: #150d0a; --orange-890: #100c0b; --orange-900: #0b0b0b; --yellow-0: #ffffff; --yellow-10: #fefcf8; --yellow-20: #fcf8f1; --yellow-30: #fbf5ea; --yellow-40: #f9f2e4; --yellow-50: #f9eeda; --yellow-60: #faebce; --yellow-70: #fae7c2; --yellow-80: #fae3b8; --yellow-90: #f9e0b0; --yellow-100: #f9dca4; --yellow-150: #f9c868; --yellow-200: #fab219; --yellow-250: #eda104; --yellow-300: #da9303; --yellow-350: #c98500; --yellow-400: #b77701; --yellow-450: #a66a00; --yellow-500: #945d01; --yellow-550: #835100; --yellow-600: #724500; --yellow-650: #623900; --yellow-700: #512e00; --yellow-750: #412400; --yellow-800: #311a00; --yellow-810: #2e1800; --yellow-820: #2b1700; --yellow-830: #271500; --yellow-840: #231402; --yellow-850: #1f1204; --yellow-860: #1b1106; --yellow-870: #171007; --yellow-880: #130e09; --yellow-890: #0f0d0a; --yellow-900: #0b0b0b; --green-0: #ffffff; --green-10: #fafdfa; --green-20: #f5fbf4; --green-30: #f0f9ef; --green-40: #ebf7e9; --green-50: #e5f4e4; --green-60: #e0f2de; --green-70: #dbf0d8; --green-80: #d5eed3; --green-90: #d0eccd; --green-100: #caeac7; --green-150: #aee0a9; --green-200: #91d68b; --green-250: #73cb6d; --green-300: #55bf50; --green-350: #34b231; --green-400: #0da30e; --green-450: #009300; --green-500: #028301; --green-550: #017301; --green-600: #006300; --green-650: #005400; --green-700: #074505; --green-750: #0f350d; --green-800: #11260f; --green-810: #10230f; --green-820: #10210f; --green-830: #101e0f; --green-840: #101b0f; --green-850: #0f180e; --green-860: #0e160e; --green-870: #0e130d; --green-880: #0d100d; --green-890: #0c0e0c; --green-900: #0b0b0b; --aqua-0: #ffffff; --aqua-10: #f9fdfb; --aqua-20: #f3fbf8; --aqua-30: #edf9f4; --aqua-40: #e8f7f1; --aqua-50: #e2f4ed; --aqua-60: #dcf2ea; --aqua-70: #d5f0e6; --aqua-80: #ceefe2; --aqua-90: #c7eddf; --aqua-100: #bfebdb; --aqua-150: #a0e1c9; --aqua-200: #7ad7b4; --aqua-250: #5acba0; --aqua-300: #3cbd8c; --aqua-350: #1baf7a; --aqua-400: #1a9e70; --aqua-450: #148e65; --aqua-500: #0f7e5c; --aqua-550: #0f6e53; --aqua-600: #065f49; --aqua-650: #095040; --aqua-700: #034235; --aqua-750: #02342b; --aqua-800: #022720; --aqua-810: #02241e; --aqua-820: #02221c; --aqua-830: #021f1a; --aqua-840: #031c18; --aqua-850: #051a16; --aqua-860: #071713; --aqua-870: #081411; --aqua-880: #0a110f; --aqua-890: #0b0e0d; --aqua-900: #0b0b0b; --blue-0: #ffffff; --blue-10: #fafcff; --blue-20: #f5f9fe; --blue-30: #f0f7fe; --blue-40: #ebf4fc; --blue-50: #e7f1fb; --blue-60: #e2eefa; --blue-70: #ddebfa; --blue-80: #d7e8fa; --blue-90: #d2e5fa; --blue-100: #cde2fb; --blue-150: #b7d3f6; --blue-200: #9ec5f4; --blue-250: #86b6ef; --blue-300: #6da7ec; --blue-350: #5598e7; --blue-400: #3987e5; --blue-450: #2a78d6; --blue-500: #256abf; --blue-550: #1c5cab; --blue-600: #184f95; --blue-650: #114281; --blue-700: #0d366b; --blue-750: #062b57; --blue-800: #032042; --blue-810: #031e3d; --blue-820: #021c39; --blue-830: #021a36; --blue-840: #021831; --blue-850: #03162c; --blue-860: #051426; --blue-870: #07121f; --blue-880: #091018; --blue-890: #0a0d11; --blue-900: #0b0b0b; --violet-0: #ffffff; --violet-10: #fcfbff; --violet-20: #f8f8ff; --violet-30: #f5f4ff; --violet-40: #f2f1ff; --violet-50: #efedff; --violet-60: #ebeafe; --violet-70: #e8e6fe; --violet-80: #e5e2fd; --violet-90: #e2dffd; --violet-100: #dfdbfd; --violet-150: #cfcafb; --violet-200: #bfb9f5; --violet-250: #b0a7f2; --violet-300: #a096eb; --violet-350: #9085e9; --violet-400: #8173e3; --violet-450: #7161e0; --violet-500: #6250d6; --violet-550: #5645be; --violet-600: #4a3aa7; --violet-650: #3e318e; --violet-700: #322777; --violet-750: #271e60; --violet-800: #1d1649; --violet-810: #1b1544; --violet-820: #19133f; --violet-830: #17123b; --violet-840: #151036; --violet-850: #130f32; --violet-860: #110e2b; --violet-870: #0f0e23; --violet-880: #0e0d1b; --violet-890: #0c0c13; --violet-900: #0b0b0b; --magenta-0: #ffffff; --magenta-10: #fefbfc; --magenta-20: #fef6f9; --magenta-30: #fdf2f6; --magenta-40: #fbeff3; --magenta-50: #faebf0; --magenta-60: #f9e6ed; --magenta-70: #f9e2eb; --magenta-80: #f9dee8; --magenta-90: #f9d9e5; --magenta-100: #f9d4e2; --magenta-150: #f3c0d3; --magenta-200: #f3a8c3; --magenta-250: #ed93b4; --magenta-300: #e87ba4; --magenta-350: #e46191; --magenta-400: #d55181; --magenta-450: #c04873; --magenta-500: #ad3d66; --magenta-550: #993458; --magenta-600: #862a4c; --magenta-650: #722340; --magenta-700: #5e1c34; --magenta-750: #4c1429; --magenta-800: #390f1f; --magenta-810: #360d1c; --magenta-820: #320c1a; --magenta-830: #2f0b18; --magenta-840: #2b0a16; --magenta-850: #270a14; --magenta-860: #220a12; --magenta-870: #1c0b11; --magenta-880: #170b0f; --magenta-890: #110b0d; --magenta-900: #0b0b0b; }