/* library.css · the component library's own pages: the frame every component
   stands in, the gallery, and the marketing scale.

   The scale is the one ramtt.com's Engineering, Colophon and Current pages
   use: the design system's colors, radii, lines, elevation, weights and
   typeface, with larger type steps and more room between sections. A page of
   the library sets type size, width and spacing. Color, radius, shadow and
   typeface come from the design system. */

:root {
  /* type: the marketing steps */
  --mk-meta: var(--fw-450) 12px/16px var(--font);
  --mk-ui: var(--fw-500) 13px/20px var(--font);
  --mk-body: var(--fw-400) 15px/24px var(--font);
  --mk-lede: var(--fw-400) 20px/28px var(--font);
  --mk-head: var(--fw-550) 20px/28px var(--font);
  --mk-title: var(--fw-550) 32px/40px var(--font);
  --mk-section: var(--fw-500) 48px/1 var(--font);
  --mk-display: var(--fw-500) 64px/1 var(--font);
  /* tracking follows size */
  --mk-ls-13: -0.006em; --mk-ls-15: -0.011em; --mk-ls-20: -0.012em; --mk-ls-display: -0.022em;
  /* room */
  --mk-page: 1320px; --mk-margin: 40px; --mk-bar: 56px;
  --mk-gap: 24px; --mk-block: 64px; --mk-block-l: 96px;
  /* motion: the design system's curve, with the longer travel of a page */
  --mk-travel: 390ms;
}
@media (max-width: 1279px) { :root { --mk-section: var(--fw-500) 40px/1.1 var(--font); --mk-display: var(--fw-500) 56px/1.1 var(--font); } }
@media (max-width: 639px) { :root { --mk-section: var(--fw-500) 32px/1.1 var(--font); --mk-display: var(--fw-500) 38px/1.1 var(--font); --mk-lede: var(--fw-400) 17px/26px var(--font); --mk-margin: 20px; --mk-block: 48px; --mk-block-l: 64px; } }

/* tracking is set on the library's own text, never on the body: a design system control inside the page keeps its own */
.lib-body { height: auto; min-height: 100%; background: var(--paper); color: var(--ink); font: var(--mk-body); }
.lib-wrap { width: 100%; max-width: calc(var(--mk-page) + 2 * var(--mk-margin)); margin: 0 auto; padding: 0 var(--mk-margin); box-sizing: border-box; }

/* ── the bar ── */
.lib-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--paper); border-bottom: var(--px) solid var(--line-2); }
.lib-top > .lib-wrap { display: flex; align-items: center; gap: 12px; height: var(--mk-bar); }
.lib-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: var(--mk-ui); font-weight: var(--fw-550); letter-spacing: var(--mk-ls-13); }
.lib-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--h-24); height: var(--h-24); border-radius: var(--r-key); background: var(--ink); color: var(--paper); font-size: 11px; line-height: 1; }
.lib-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; color: var(--ink-3); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); }
.lib-crumbs > a { color: var(--ink-3); }
.lib-crumbs > b { color: var(--ink); font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-crumbs > i { color: var(--ink-4); }
@media (hover: hover) { .lib-crumbs > a:hover { color: var(--ink); } }
.lib-tools { display: flex; align-items: center; gap: 4px; }
.lib-count { color: var(--ink-3); font: var(--mk-meta); font-variant-numeric: tabular-nums; padding: 0 8px; }
@media (max-width: 639px) { .lib-crumbs > a, .lib-crumbs > i, .lib-count { display: none; } }

/* ── a component's page ── */
.lib-main { padding: var(--mk-block) 0 var(--mk-block-l); }
.lib-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; padding-bottom: 40px; }
.lib-kind { grid-column: 1 / -1; color: var(--ink-3); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); }
.lib-head > h1 { margin: 0; font: var(--mk-section); letter-spacing: var(--mk-ls-display); text-wrap: balance; }
.lib-lede { margin: 0; max-width: 560px; color: var(--ink-2); font: var(--mk-lede); letter-spacing: var(--mk-ls-20); text-wrap: pretty; }
.lib-src { grid-column: 1 / -1; color: var(--ink-3); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); }
@media (max-width: 899px) { .lib-head { grid-template-columns: minmax(0, 1fr); } }

/* the names the collections use for the page around a stage, on the design system's tokens */
.lib-demo { --bg: var(--paper); --line: var(--line-3); --f: var(--font); }

/* the stage: the component itself, in a frame of the design system */
/* type inside a stage starts from the collection's own base, 16 px with a relative line height, so a heading without a line height of its own follows its size */
.lib-demo .stage { font-size: 16px; line-height: 1.55; letter-spacing: 0; }
.lib-demo .stage { position: relative; overflow: hidden; border-radius: var(--r-contain); box-shadow: 0 0 0 var(--px) var(--line-3); 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(--state-out); }
.lib-demo .finger { position: absolute; left: 0; top: 0; z-index: 60; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: var(--r-round); background: color-mix(in srgb, var(--gray-900) 16%, transparent); border: 2px solid color-mix(in srgb, var(--gray-0) 90%, transparent); pointer-events: none; opacity: 0; transition: opacity var(--state-out); }
.lib-demo .finger.tap { background: color-mix(in srgb, var(--gray-900) 32%, transparent); }
.lib-demo :where(svg) { display: inline; }
.lib-demo :where(em, i, cite) { font-style: inherit; }
.lib-demo :focus-visible { outline: 1px solid var(--accent); 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(--paper); }
.lib-demo .lib-frame > iframe { display: block; width: 100%; height: 100%; border: 0; }

/* the component's own switches */
.lib-demo .controls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.lib-demo .controls button { height: var(--h-28); padding: 0 12px; border-radius: var(--r-value); background: transparent; color: var(--ink-2); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); box-shadow: inset 0 0 0 var(--px) var(--line-3); }
.lib-demo .controls button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); box-shadow: none; }
@media (hover: hover) { .lib-demo .controls button:not([aria-pressed="true"]):hover { background: var(--paper-hover); color: var(--ink); } }

/* what to notice */
.lib-demo .notes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.lib-demo .notes li { color: var(--ink-2); font: var(--mk-body); letter-spacing: var(--mk-ls-15); text-wrap: pretty; }
.lib-demo .notes b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: var(--fw-550); }
@media (max-width: 899px) { .lib-demo .notes { grid-template-columns: minmax(0, 1fr); } }

/* the way to the next one */
.lib-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-gap); margin-top: var(--mk-block-l); padding-top: 24px; border-top: var(--px) solid var(--line-2); }
.lib-pager > a { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.lib-pager > a:last-child { text-align: right; align-items: flex-end; }
.lib-pager span { color: var(--ink-3); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); }
.lib-pager b { font: var(--mk-head); letter-spacing: var(--mk-ls-20); }
@media (hover: hover) { .lib-pager > a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }

/* a page shown inside the gallery: the stage alone */
html[data-embed] .lib-top, html[data-embed] .lib-head, html[data-embed] .lib-pager, 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 { display: flex; flex-direction: column; gap: 24px; max-width: 880px; padding: var(--mk-block-l) 0 var(--mk-block); }
.lib-hero > h1 { margin: 0; font: var(--mk-display); letter-spacing: var(--mk-ls-display); text-wrap: balance; }
.lib-hero > p { margin: 0; max-width: 640px; color: var(--ink-2); font: var(--mk-lede); letter-spacing: var(--mk-ls-20); text-wrap: pretty; }
.lib-filter { position: sticky; top: var(--mk-bar); z-index: 2; display: flex; align-items: center; gap: 16px; padding: 12px 0; background: var(--paper); }
.lib-filter-scroll { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lib-filter-scroll::-webkit-scrollbar { display: none; }
.lib-filter-count { flex: none; color: var(--ink-3); font: var(--mk-meta); font-variant-numeric: tabular-nums; }
.lib-group { padding-top: var(--mk-block); }
.lib-group[hidden] { display: none; }
.lib-group-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: var(--px) solid var(--line-2); }
.lib-group-head > h2 { margin: 0; font: var(--mk-title); letter-spacing: var(--mk-ls-display); }
.lib-group-head > span { color: var(--ink-3); font: var(--mk-ui); font-variant-numeric: tabular-nums; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--mk-gap); }
@media (max-width: 1099px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.lib-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); }
.lib-shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-contain); background: var(--ground); box-shadow: 0 0 0 var(--px) var(--line-2); }
.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(--mk-travel) var(--ease-expo); }
.lib-shot > iframe[data-ready] { opacity: 1; }
.lib-card-text { display: flex; flex-direction: column; gap: 2px; }
.lib-card-head { display: flex; align-items: baseline; gap: 8px; }
.lib-card-head > b { color: var(--ink); font: var(--mk-body); font-weight: var(--fw-550); letter-spacing: var(--mk-ls-15); }
.lib-card-head > span:last-child { margin-left: auto; color: var(--ink-4); font: var(--mk-meta); font-variant-numeric: tabular-nums; }
.lib-card-head > [data-r="badge"] { align-self: center; }
.lib-kind > [data-r="badge"] { margin-left: 8px; }
.lib-card-kind { color: var(--ink-3); font: var(--mk-ui); font-weight: var(--fw-400); letter-spacing: var(--mk-ls-13); }
@media (hover: hover) { .lib-card:hover .lib-card-head > b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.lib-foot { margin-top: var(--mk-block-l); padding: 24px 0 40px; border-top: var(--px) solid var(--line-2); color: var(--ink-3); font: var(--mk-ui); letter-spacing: var(--mk-ls-13); }

/* 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; }