@charset "UTF-8";:root {
  --margin-block: 1rem;
  --header-padding-top: var(--size-8);
  --header-nav-padding-block: .5rem;
  --logo-width: var(--size-10);
  --font-size-default: 1rem;
  --darken-opacity: .2;
  --bg-darken: rgba(0 0 0 / var(--darken-opacity));
  --lighten-opacity: .2;
  --bg-lighten: rgba(254 254 254 / var(--darken-opacity));
  --max-inline-size: 100%;
  --heading-margin-block-start: .2em;
  --heading-margin-block-end: .5em;
  --headings-clr: var(--clr-primary);
  --clr-light: var(--gray-1);
  --accent-color: var(--clr-primary, #007bff);
  --clr-on-primary: #fff;
  --clr-on-secondary: #fff;
  --clr-on-success: #fff;
  --clr-on-info: #fff;
  --clr-on-danger: #fff;
  --clr-on-warning: #222;
  --clr-on-light: #222;
  --clr-on-dark: #fff;
  --text-1: var(--gray-4);
  --headings-color: var(--clr-secondary);
}[theme=dark],
[data-theme=dark] {
  --clr-bg: var(--gray-8);
  --clr-text-default: var(--clr-light);
}[data-slot] {
  display: none;
}html {
  scroll-behavior: var(--html-scroll-behavior, smooth);
  scroll-padding-top: var(--html-scroll-padding-top, 5rem);
}body {
  display: var(--body-display, flex);
  flex-direction: var(--body-direction, column);
  background-color: var(--clr-bg, #fff);
  color: var(--clr-text-default, #111);
  margin: var(--body-margin, 0);
  min-height: var(--body-min-height, 100vh);
  overflow-x: var(--body-overflow-x, hidden);
  font-family: var(--default-font);
  font-size: var(--font-size-default);
}:where(p) {
  max-inline-size: var(--p-max-inline-size, var(--max-inline-size));
}:where(h1, h2, h3, h4, h5, h6) {
  color: var(--headings-clr);
  max-inline-size: var(--header-max-inline-size, var(--max-inline-size));
  margin-block-start: var(--heading-margin-block-start, 1em);
  margin-block-end: var(--heading-margin-block-end, 0.25em);
  font-family: var(--headings-font);
  font-weight: var(--headings-weight);
  color: var(--headings-color);
  text-transform: var(--headings-text-transform, normal);
}:where(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}:where(h1, h2, h3, h4, h5, h6) > small {
  display: block;
}:where(p, ul, ol, dl, h6) {
  font-size: var(--font-size-default);
}:where(p, ul, ol, dl) {
  margin-block: var(--margin-block);
  padding-left: var(--block-padding-left);
}img {
  max-width: 100%;
}:where(.container, .container-full) {
  box-sizing: var(--container-box-sizing, border-box);
  width: var(--container-width, 100%);
  padding: var(--container-padding, 2rem);
}.container-full {
  background-color: hsl(var(--clr-primary-hsl)/10%);
}:where(.container) {
  max-width: var(--container-max-width, 1024px);
  margin-inline: var(--container-margin-inline, auto);
}:where(main .container, main :where(.container)) {
  background-color: var(--container-bg, transparent);
}:where(header, .header) .brand {
  font-size: var(--size-4);
  display: flex;
  gap: var(--header-gap, var(--size-4));
  align-items: center;
  line-height: 1;
}.brand .brand-logo {
  font-size: var(--logo-width, auto);
  width: var(--logo-width, auto);
}.brand .brand-logo img {
  width: var(--logo-width, auto);
}.brand .brand-name {
  font-size: var(--size-6);
}.brand .brand-claim {
  font-size: var(--size-4);
}.row {
  display: grid;
  grid-template-columns: repeat(var(--row-cols, 12), minmax(0, 1fr));
  gap: var(--row-gap, var(--grid-gap, var(--size-4, 1rem)));
  align-items: var(--row-align-items, stretch);
  justify-items: var(--row-justify-items, stretch);
}.col {
  --_col-span: var(--col-span, var(--row-cols, 12));
  --_col-start: var(--col-start, auto);
  grid-column: var(--_col-start)/span var(--_col-span);
  min-width: 0;
}@media (min-width: 640px) {
  .col {
    --_col-span: var(--col-span-sm, var(--col-span, var(--row-cols, 12)));
    --_col-start: var(--col-start-sm, var(--col-start, auto));
  }
}@media (min-width: 768px) {
  .col {
    --_col-span: var(--col-span-md, var(--col-span-sm, var(--col-span, var(--row-cols, 12))));
    --_col-start: var(--col-start-md, var(--col-start-sm, var(--col-start, auto)));
  }
}@media (min-width: 1024px) {
  .col {
    --_col-span: var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span, var(--row-cols, 12)))));
    --_col-start: var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))));
  }
}.col-1 {
  --col-span: 1;
}.col-2 {
  --col-span: 2;
}.col-3 {
  --col-span: 3;
}.col-4 {
  --col-span: 4;
}.col-5 {
  --col-span: 5;
}.col-6 {
  --col-span: 6;
}.col-7 {
  --col-span: 7;
}.col-8 {
  --col-span: 8;
}.col-9 {
  --col-span: 9;
}.col-10 {
  --col-span: 10;
}.col-11 {
  --col-span: 11;
}.col-12 {
  --col-span: 12;
}.col-sm-1 {
  --col-span-sm: 1;
}.col-sm-2 {
  --col-span-sm: 2;
}.col-sm-3 {
  --col-span-sm: 3;
}.col-sm-4 {
  --col-span-sm: 4;
}.col-sm-5 {
  --col-span-sm: 5;
}.col-sm-6 {
  --col-span-sm: 6;
}.col-sm-7 {
  --col-span-sm: 7;
}.col-sm-8 {
  --col-span-sm: 8;
}.col-sm-9 {
  --col-span-sm: 9;
}.col-sm-10 {
  --col-span-sm: 10;
}.col-sm-11 {
  --col-span-sm: 11;
}.col-sm-12 {
  --col-span-sm: 12;
}.col-md-1 {
  --col-span-md: 1;
}.col-md-2 {
  --col-span-md: 2;
}.col-md-3 {
  --col-span-md: 3;
}.col-md-4 {
  --col-span-md: 4;
}.col-md-5 {
  --col-span-md: 5;
}.col-md-6 {
  --col-span-md: 6;
}.col-md-7 {
  --col-span-md: 7;
}.col-md-8 {
  --col-span-md: 8;
}.col-md-9 {
  --col-span-md: 9;
}.col-md-10 {
  --col-span-md: 10;
}.col-md-11 {
  --col-span-md: 11;
}.col-md-12 {
  --col-span-md: 12;
}.col-lg-1 {
  --col-span-lg: 1;
}.col-lg-2 {
  --col-span-lg: 2;
}.col-lg-3 {
  --col-span-lg: 3;
}.col-lg-4 {
  --col-span-lg: 4;
}.col-lg-5 {
  --col-span-lg: 5;
}.col-lg-6 {
  --col-span-lg: 6;
}.col-lg-7 {
  --col-span-lg: 7;
}.col-lg-8 {
  --col-span-lg: 8;
}.col-lg-9 {
  --col-span-lg: 9;
}.col-lg-10 {
  --col-span-lg: 10;
}.col-lg-11 {
  --col-span-lg: 11;
}.col-lg-12 {
  --col-span-lg: 12;
}.offset-1 {
  --col-start: 2;
}.offset-2 {
  --col-start: 3;
}.offset-3 {
  --col-start: 4;
}.offset-4 {
  --col-start: 5;
}.offset-5 {
  --col-start: 6;
}.offset-6 {
  --col-start: 7;
}.offset-7 {
  --col-start: 8;
}.offset-8 {
  --col-start: 9;
}.offset-9 {
  --col-start: 10;
}.offset-10 {
  --col-start: 11;
}.offset-11 {
  --col-start: 12;
}::marker {
  color: var(--clr-primary);
}:where(a) {
  cursor: pointer;
}:where(a[href]) {
  color: var(--brand, var(--link));
  text-underline-offset: 3px;
  text-decoration-color: inherit;
}* :where(.disabled) {
  color: var(--clr-disabled) !important;
  cursor: not-allowed;
}.chapo {
  font-weight: bold;
  color: var(--clr-secondary);
}/*
  Grid Layout Component CSS Variables:
  --grid-display: grid
  --grid-cols-count: 1
  --grid-template-columns: repeat(var(--grid-cols-count, 1), minmax(0, 1fr))
  --grid-gap: var(--size-4, 1rem)
  --grid-row-gap: var(--grid-gap, var(--size-4, 1rem))
  --grid-column-gap: var(--grid-gap, var(--size-4, 1rem))
  --grid-align-items: stretch
  --grid-justify-items: stretch
  --grid-auto-flow: row
  --grid-min-col-width: 220px (for .grid-auto)
  --grid-col-span: 1 / -1 (for .col-full)
*/:where(.grid),
:where([class^=grid-], [class*=" grid-"]) {
  display: var(--grid-display, grid);
  grid-template-columns: var(--grid-template-columns, repeat(var(--grid-cols-count, 1), minmax(0, 1fr)));
  gap: var(--grid-gap, var(--size-4, 1rem));
  row-gap: var(--grid-row-gap, var(--grid-gap, var(--size-4, 1rem)));
  column-gap: var(--grid-column-gap, var(--grid-gap, var(--size-4, 1rem)));
  align-items: var(--grid-align-items, stretch);
  justify-items: var(--grid-justify-items, stretch);
  grid-auto-flow: var(--grid-auto-flow, row);
}/* Standard column modifiers */.grid-1 {
  --grid-cols-count: 1;
}.grid-2 {
  --grid-cols-count: 2;
}.grid-3 {
  --grid-cols-count: 3;
}.grid-4 {
  --grid-cols-count: 4;
}.grid-5 {
  --grid-cols-count: 5;
}.grid-6 {
  --grid-cols-count: 6;
}.grid-12 {
  --grid-cols-count: 12;
}/* Fluid / responsive auto-fit grid modifier */.grid-auto {
  --grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-col-width, 220px), 1fr));
}/* Grid item span modifiers */:where(.col-full) {
  grid-column: var(--grid-col-span, 1/-1);
}/*
  Alert Component CSS Variables (override globally as needed):
  --alert-bg (defaults to --clr-light)
  --alert-clr
  --alert-text-color
  --alert-border-radius
  --alert-border-size
  --alert-border-style
  --alert-border-color
  --alert-padding
  --alert-margin-bottom
  --alert-color-mix
  --alert-outline-color-mix
  --alert-subtle-color-mix

  By default, --alert-bg uses --clr-light. You can override these for advanced customization.
*/:where(.alert) {
  --alert-bg: var(--clr-light, #f8f9fa);
  --alert-border-radius: 0.5rem;
  --alert-border-size: 0;
  --alert-border-style: solid;
  --alert-border-color: transparent;
  --alert-padding: 0.75rem 1.25rem;
  --alert-margin-bottom: 1.5rem;
  --alert-color-mix: 100%;
  background-color: var(--alert-bg-color, color-mix(in srgb, var(--alert-clr, var(--alert-bg)) var(--alert-color-mix, 100%), transparent));
  border-radius: var(--alert-border-radius, 0.5rem);
  border: var(--alert-border-size, 0) var(--alert-border-style, solid) var(--alert-border-color, transparent);
  padding: var(--alert-padding, 0.75rem 1.25rem);
  margin-bottom: var(--alert-margin-bottom, 1.5rem);
  color: var(--alert-text-color, var(--clr-text-default, #111));
}:where(.alert.alert-outline) {
  --alert-outline-color-mix: 0%;
  --alert-border-size: 1px;
  background-color: var(--alert-outline-bg, color-mix(in srgb, var(--alert-clr, currentColor) var(--alert-outline-color-mix, 0%), transparent));
  color: var(--alert-outline-color, var(--alert-clr, var(--clr-text-default, #111)));
  border-color: var(--alert-outline-border-color, var(--alert-clr, var(--clr-text-default, #111)));
}:where(.alert.alert-subtle, .alert.alert-soft) {
  --alert-subtle-color-mix: 12%;
  --alert-border-size: 1px;
  background-color: var(--alert-subtle-bg, color-mix(in srgb, var(--alert-clr, var(--clr-primary)) var(--alert-subtle-color-mix, 12%), transparent));
  border-color: var(--alert-subtle-border-color, color-mix(in srgb, var(--alert-clr, var(--clr-primary)) 25%, transparent));
  color: var(--alert-subtle-color, var(--alert-clr, var(--clr-text-default, #111)));
}/* Colors */.alert-primary {
  --alert-clr: var(--clr-primary);
  --alert-text-color: var(--clr-on-primary, #fff);
}.alert-secondary {
  --alert-clr: var(--clr-secondary);
  --alert-text-color: var(--clr-on-secondary, #fff);
}.alert-success {
  --alert-clr: var(--clr-success);
  --alert-text-color: var(--clr-on-success, #fff);
}.alert-info {
  --alert-clr: var(--clr-info);
  --alert-text-color: var(--clr-on-info, #fff);
}.alert-danger {
  --alert-clr: var(--clr-danger, #dc3545);
  --alert-text-color: var(--clr-on-danger, #fff);
}.alert-warning {
  --alert-clr: var(--clr-warning, #ffc107);
  --alert-text-color: var(--clr-on-warning, #222);
}.alert-light {
  --alert-clr: var(--clr-light, #a8a8a8);
  --alert-text-color: var(--clr-on-light, #222);
}.alert-dark {
  --alert-clr: var(--clr-dark, #4980b8);
  --alert-text-color: var(--clr-on-dark, #fff);
}.alert-link {
  --alert-clr: var(--clr-link, #007bff);
  --alert-text-color: var(--clr-on-link, #fff);
}/*
  Badge Component CSS Variables:
  --badge-bg-color (defaults to color-mix with --badge-color, fallback --clr-light)
  --badge-color (theme accent color)
  --badge-color-mix (defaults to 100%)
  --badge-text-color (defaults to --clr-text-default, #111)
  --badge-font-size (defaults to 0.75em)
  --badge-font-weight (defaults to 600)
  --badge-radius (defaults to 0.5rem)
  --badge-shadow (defaults to none)
  --badge-border-size / --badge-border-style / --badge-border-color
  --badge-padding-inline / --badge-padding-block
  --badge-gap
  --badge-outline-bg-color / --badge-outline-color-mix / --badge-outline-border-size / --badge-outline-border-style / --badge-outline-border-color / --badge-outline-color
  --badge-subtle-bg-color / --badge-subtle-color-mix / --badge-subtle-border-size / --badge-subtle-border-style / --badge-subtle-border-color / --badge-subtle-color
  --badge-lg-font-size / --badge-lg-padding-inline / --badge-lg-padding-block
  --badge-sm-font-size / --badge-sm-padding-inline / --badge-sm-padding-block
*/:where(.badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
  --badge-color-mix: 100%;
  background-color: var(--badge-bg-color, color-mix(in srgb, var(--badge-color, var(--clr-light, #f8f9fa)) var(--badge-color-mix, 100%), transparent));
  border: var(--badge-border-size, 1px) var(--badge-border-style, solid) var(--badge-border-color, var(--badge-color, transparent));
  color: var(--badge-text-color, var(--clr-text-default, #111));
  font-size: var(--badge-font-size, 0.75em);
  font-weight: var(--badge-font-weight, 600);
  padding-inline: var(--badge-padding-inline, 0.75em);
  padding-block: var(--badge-padding-block, 0.35em);
  border-radius: var(--badge-radius, 0.5rem);
  box-shadow: var(--badge-shadow, none);
  gap: var(--badge-gap, 0.35ch);
}/* Outline */:where(.badge.btn-outline, .badge.badge-outline) {
  --badge-outline-color-mix: 0%;
  background-color: var(--badge-outline-bg-color, color-mix(in srgb, var(--badge-color, currentColor) var(--badge-outline-color-mix, 0%), transparent));
  border: var(--badge-outline-border-size, var(--badge-border-size, 1px)) var(--badge-outline-border-style, var(--badge-border-style, solid)) var(--badge-outline-border-color, var(--badge-border-color, var(--badge-color, currentColor)));
  color: var(--badge-outline-color, var(--badge-color, currentColor));
}/* Subtle / Soft */:where(.badge.badge-subtle, .badge.badge-soft) {
  --badge-subtle-color-mix: 15%;
  background-color: var(--badge-subtle-bg-color, color-mix(in srgb, var(--badge-color, var(--clr-primary)) var(--badge-subtle-color-mix, 15%), transparent));
  border: var(--badge-subtle-border-size, var(--badge-border-size, 1px)) var(--badge-subtle-border-style, var(--badge-border-style, solid)) var(--badge-subtle-border-color, color-mix(in srgb, var(--badge-color, var(--clr-primary)) 25%, transparent));
  color: var(--badge-subtle-color, var(--badge-color, var(--clr-primary)));
}/* Sizes (supports badge-* with backwards-compatible btn-* fallback) */:where(.badge.badge-lg, .badge.btn-lg) {
  font-size: var(--badge-lg-font-size, var(--font-size-3, 1rem));
  padding-inline: var(--badge-lg-padding-inline, 1.25em);
  padding-block: var(--badge-lg-padding-block, 0.5em);
}:where(.badge.badge-sm, .badge.btn-sm) {
  font-size: var(--badge-sm-font-size, var(--font-size-1, 0.65em));
  padding-inline: var(--badge-sm-padding-inline, 0.5em);
  padding-block: var(--badge-sm-padding-block, 0.2em);
}/* Colors & Contrast */.badge-primary {
  --badge-color: var(--clr-primary);
  --badge-text-color: var(--clr-on-primary, #fff);
}.badge-secondary {
  --badge-color: var(--clr-secondary);
  --badge-text-color: var(--clr-on-secondary, #fff);
}.badge-success {
  --badge-color: var(--clr-success);
  --badge-text-color: var(--clr-on-success, #fff);
}.badge-info {
  --badge-color: var(--clr-info);
  --badge-text-color: var(--clr-on-info, #fff);
}.badge-danger {
  --badge-color: var(--clr-danger);
  --badge-text-color: var(--clr-on-danger, #fff);
}.badge-warning {
  --badge-color: var(--clr-warning);
  --badge-text-color: var(--clr-on-warning, #222);
}.badge-light {
  --badge-color: var(--clr-light, #f8f9fa);
  --badge-text-color: var(--clr-on-light, #222);
}.badge-dark {
  --badge-color: var(--clr-dark, #212529);
  --badge-text-color: var(--clr-on-dark, #fff);
}.badge-link {
  --badge-color: var(--clr-link, #007bff);
  --badge-text-color: var(--clr-on-link, #fff);
}/*
  Blockquote Component CSS Variables (override globally as needed):
  --blockquote-border-color (defaults to --clr-primary)
  --blockquote-border-width
  --blockquote-border-style
  --blockquote-font-size
  --blockquote-font-style
  --blockquote-footer-font-size
  --blockquote-footer-font-weight
  --blockquote-footer-font-style
  --blockquote-padding
  --blockquote-margin
  --blockquote-p-margin

  By default, --blockquote-border-color uses --clr-primary. You can override for advanced customization.
*/blockquote {
  border-left-color: var(--blockquote-border-color, var(--clr-primary, #007bff));
  border-left-width: var(--blockquote-border-width, 0.5rem);
  border-left-style: var(--blockquote-border-style, solid);
  font-size: var(--blockquote-font-size, 1.5rem);
  font-style: var(--blockquote-font-style, italic);
  padding: var(--blockquote-padding, 1rem);
  margin: var(--blockquote-margin, 1rem 0);
}blockquote p {
  margin: var(--blockquote-p-margin, 0 0 1rem);
  font-size: var(--blockquote-p-font-size, inherit);
}blockquote cite {
  font-style: var(--blockquote-cite-font-style, italic);
}blockquote .blockquote-footer {
  font-size: var(--blockquote-footer-font-size, 1rem);
  font-weight: var(--blockquote-footer-font-weight, normal);
  font-style: var(--blockquote-footer-font-style, normal);
}/*
Breadcrumbs Component is a subcomponent of Nav Component and must have both nav and breadcrumbs classes

  Breadcrumbs Component CSS Variables (override globally as needed):
  --breadcrumbs-bg (defaults to --clr-light)
  --breadcrumbs-bg-dark (defaults to --clr-dark)
  --breadcrumbs-padding-right
  --breadcrumbs-padding-left
  --breadcrumbs-li-display
  --breadcrumbs-separator
  --breadcrumbs-separator-color
  --breadcrumbs-separator-display

  By default, --breadcrumbs-bg uses --clr-light and --breadcrumbs-bg-dark uses --clr-dark. You can override these for advanced customization.
*/.breadcrumbs.nav {
  background-color: var(--breadcrumbs-bg, transparent);
  gap: var(--breadcrumbs-gap, 0.3rem);
}.breadcrumbs.nav > *::marker {
  display: none;
}.breadcrumbs > *:not(:first-child)::before {
  content: var(--breadcrumbs-separator, "/");
  color: var(--breadcrumbs-separator-color, #222);
  display: var(--breadcrumbs-separator-display, inline-block);
  margin-inline-end: var(--breadcrumbs-padding-right, 0.3rem);
}.breadcrumbs li {
  display: var(--breadcrumbs-li-display, inline-flex);
  align-items: var(--breadcrumbs-li-align-items, center);
}.breadcrumbs a {
  padding-left: var(--breadcrumbs-padding-left, 0.3rem);
}/* buttons *//*
  Button Component CSS Variables (override globally as needed):
  --btn-bg (defaults to --clr-light)
  --btn-bg-dark (defaults to --clr-dark)
  --btn-text-color (defaults to --clr-text-default, #222)
  --btn-text-color-hover
  --btn-radius
  --btn-shadow
  --btn-font-size
  --btn-font-weight (defaults to inherit)
  --btn-padding-inline
  --btn-padding-block
  --btn-gap
  --btn-bg-primary / --btn-border-color-primary
  --btn-bg-secondary / --btn-border-color-secondary
  --btn-bg-success / --btn-border-color-success
  --btn-bg-info / --btn-border-color-info
  --btn-bg-danger / --btn-border-color-danger
  --btn-bg-warning / --btn-border-color-warning
  --btn-bg-default / --btn-border-color-default / --btn-text-color-default / --btn-bg-default-hover / --btn-text-color-default-hover
  --btn-default-color-mix / --btn-default-hover-color-mix
  --btn-bg-light / --btn-border-color-light
  --btn-bg-dark / --btn-border-color-dark
  --btn-bg-link / --btn-border-color-link
  Contrast tokens: --clr-on-primary, --clr-on-secondary, --clr-on-success, --clr-on-info, --clr-on-danger, --clr-on-warning, --clr-on-light, --clr-on-dark

  By default, --btn-bg uses an adaptive neutral color-mix with --clr-text-default. You can override these for advanced customization.
*/.btn,
:where(button:not([class])) {
  background: var(--btn-bg, color-mix(in srgb, var(--clr-text-default, #222) 10%, transparent));
  color: var(--btn-text-color, var(--clr-text-default, #222));
  font-size: var(--btn-font-size, 1rem);
  font-weight: var(--btn-font-weight, inherit);
  margin-bottom: var(--btn-margin-bottom, 1rem);
  padding-inline: var(--btn-padding-inline, 1.5rem);
  padding-block: var(--btn-padding-block, 0.5rem);
  border: var(--btn-border-width, 1px) var(--btn-border-style, solid) var(--btn-border-color, color-mix(in srgb, var(--clr-text-default, #222) 15%, transparent));
  border-radius: var(--btn-radius, 0.5rem);
  box-shadow: var(--btn-shadow, none);
  text-decoration: var(--btn-text-decoration, none);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--btn-gap, 0.5rem);
}.btn:hover,
:where(button:not([class])):hover {
  text-decoration: var(--btn-text-decoration-hover, none);
  background-color: var(--btn-bg-hover, var(--btn-bg));
  color: var(--btn-text-color-hover, var(--btn-text-color, var(--clr-text-default, #222)));
}.btn.active,
:where(button:not([class])).active {
  background-color: var(--btn-bg-active, var(--clr-primary, #007bff));
}/* Outline */:where(button, .btn).btn-outline {
  --btn-outline-color-mix: 0%;
  background: var(--btn-outline-bg, color-mix(in srgb, var(--btn-border-color, var(--clr-dark, #222)) var(--btn-outline-color-mix, 0%), transparent));
  border: var(--btn-border-width, 1px) var(--btn-border-style, solid) var(--btn-border-color, var(--clr-dark, #222));
  color: var(--btn-border-color, var(--clr-text-default, #222));
}:where(button, .btn).btn-outline:hover {
  --btn-outline-hover-color-mix: 15%;
  background-color: var(--btn-outline-bg-hover, color-mix(in srgb, var(--btn-border-color, var(--clr-primary)) var(--btn-outline-hover-color-mix, 15%), transparent));
}/* Subtle / Ghost */:where(button, .btn).btn-subtle,
:where(button, .btn).btn-ghost {
  --btn-subtle-color-mix: 12%;
  background: var(--btn-subtle-bg, color-mix(in srgb, var(--btn-bg, var(--clr-primary, #007bff)) var(--btn-subtle-color-mix, 12%), transparent));
  border: var(--btn-border-width, 0) var(--btn-border-style, solid) var(--btn-border-color, transparent);
  color: var(--btn-subtle-color, var(--btn-bg, var(--clr-primary, #007bff)));
}:where(button, .btn).btn-subtle:hover,
:where(button, .btn).btn-ghost:hover {
  --btn-subtle-hover-color-mix: 20%;
  background-color: var(--btn-subtle-bg-hover, color-mix(in srgb, var(--btn-bg, var(--clr-primary, #007bff)) var(--btn-subtle-hover-color-mix, 20%), transparent));
}/* Sizes */:where(button, .btn).btn-lg {
  --btn-font-size: 1.25rem;
  padding-inline: 2rem;
  padding-block: 1rem;
}:where(button, .btn).btn-sm {
  --btn-font-size: .75rem;
  padding-inline: 0.75rem;
  padding-block: 0.25rem;
}:where(button, .btn).btn-xs {
  --btn-font-size: .625rem;
  padding-inline: 0.5rem;
  padding-block: 0.125rem;
}/* Colors & default neutral state (adaptive color-mix for light & dark themes) */:where(.btn:not([class*=btn-]), .btn-default, button:not([class*=btn-])) {
  --btn-default-color-mix: 10%;
  --btn-default-hover-color-mix: 18%;
  --btn-bg: var(--btn-bg-default, color-mix(in srgb, var(--clr-text-default, #222) var(--btn-default-color-mix, 10%), transparent));
  --btn-border-color: var(--btn-border-color-default, color-mix(in srgb, var(--clr-text-default, #222) 15%, transparent));
  --btn-text-color: var(--btn-text-color-default, var(--clr-text-default, #222));
  --btn-bg-hover: var(--btn-bg-default-hover, color-mix(in srgb, var(--clr-text-default, #222) var(--btn-default-hover-color-mix, 18%), transparent));
  --btn-text-color-hover: var(--btn-text-color-default-hover, var(--btn-text-color, var(--clr-text-default, #222)));
}.btn-primary {
  --btn-bg: var(--btn-bg-primary, var(--clr-primary, #007bff));
  --btn-border-color: var(--btn-border-color-primary, var(--clr-primary, #007bff));
  --btn-text-color: var(--clr-on-primary, var(--btn-text-color-light, #fff));
}.btn-secondary {
  --btn-bg: var(--btn-bg-secondary, var(--clr-secondary, #8a959f));
  --btn-border-color: var(--btn-border-color-secondary, var(--clr-secondary, #8a959f));
  --btn-text-color: var(--clr-on-secondary, #fff);
}.btn-success {
  --btn-bg: var(--btn-bg-success, var(--clr-success, #28a745));
  --btn-border-color: var(--btn-border-color-success, var(--clr-success, #28a745));
  --btn-text-color: var(--clr-on-success, #fff);
}.btn-info {
  --btn-bg: var(--btn-bg-info, var(--clr-info, #17a2b8));
  --btn-border-color: var(--btn-border-color-info, var(--clr-info, #17a2b8));
  --btn-text-color: var(--clr-on-info, var(--btn-text-color-light, #fff));
}.btn-danger {
  --btn-bg: var(--btn-bg-danger, var(--clr-danger, #dc3545));
  --btn-border-color: var(--btn-border-color-danger, var(--clr-danger, #dc3545));
  --btn-text-color: var(--clr-on-danger, #fff);
}.btn-warning {
  --btn-bg: var(--btn-bg-warning, var(--clr-warning, #ffc107));
  --btn-border-color: var(--btn-border-color-warning, var(--clr-warning, #ffc107));
  --btn-text-color: var(--clr-on-warning, #222);
}/* Legacy color modifiers (deprecated in favor of default .btn) */.btn-light {
  --btn-bg: var(--btn-bg-light, var(--clr-light, #eee));
  --btn-border-color: var(--btn-border-color-light, var(--clr-light, #eee));
  --btn-text-color: var(--clr-on-light, var(--btn-text-color-dark, #222));
}.btn-dark {
  --btn-bg: var(--btn-bg-dark, var(--clr-dark, #222));
  --btn-border-color: var(--btn-border-color-dark, var(--clr-dark, #222));
  --btn-text-color: var(--clr-on-dark, var(--btn-text-color-light, #fff));
}.btn-link {
  --btn-bg: var(--btn-bg-link, transparent);
  --btn-border-color: var(--btn-border-color-link, transparent);
  --btn-text-color: var(--clr-link, var(--clr-primary, #007bff));
}/* Types */button[type=submit]:not(:disabled) {
  --btn-bg: var(--btn-bg-primary, var(--clr-primary, #007bff));
  --btn-border-color: var(--btn-border-color-primary, var(--clr-primary, #007bff));
  --btn-text-color: var(--clr-on-primary, var(--btn-text-color-light, #fff));
  background: var(--btn-bg);
}button[type=reset] {
  --btn-bg: var(--btn-bg-secondary, var(--clr-secondary, #8a959f));
  --btn-border-color: var(--btn-border-color-secondary, var(--clr-secondary, #8a959f));
  --btn-text-color: var(--clr-on-secondary, #fff);
  background: var(--btn-bg);
}button .icon {
  margin-right: var(--btn-icon-margin-right, 1ch);
  margin-left: var(--btn-icon-margin-left, -1rem);
}/*
  Card Component CSS Variables (override globally as needed):
  --card-display
  --card-flex-direction
  --card-justify-content
  --card-align-items
  --card-flex-wrap
  --card-content-gap
  --card-bg (defaults to transparent)
  --card-border-clr
  --card-border-color (defaults to --clr-light)
  --card-border-width
  --card-radius
  --card-shadow
  --card-padding
  --card-margin-bottom
  --card-overflow
  --card-header-display
  --card-header-flex-direction
  --card-header-justify-content
  --card-header-align-items
  --card-header-flex-wrap
  --card-header-gap
  --card-header-padding
  --card-header-border
  --card-header-bg
  --card-body-display
  --card-body-flex-direction
  --card-body-justify-content
  --card-body-align-items
  --card-body-flex-wrap
  --card-body-gap
  --card-body-padding
  --card-body-bg
  --card-footer-display
  --card-footer-flex-direction
  --card-footer-justify-content
  --card-footer-align-items
  --card-footer-flex-wrap
  --card-footer-gap
  --card-footer-padding
  --card-footer-border
  --card-footer-bg
  --card-font-size
  --card-img-width
  --card-img-height
  --card-img-fit
  --card-img-aspect-ratio
  --card-title-line-height
  --card-group-display
  --card-group-grid-template-columns
  --card-group-direction
  --card-group-gap
  --card-padding-compact
  --card-content-gap-compact
  --card-margin-bottom-compact
  --card-font-size-compact
  --card-header-padding-compact
  --card-body-padding-compact
  --card-footer-padding-compact
  --card-cursor
  --card-transition
  --card-hover-bg
  --card-hover-border-clr
  --card-hover-shadow
  --card-hover-transform
  --card-interactive-cursor

  By default, --card-bg uses transparent. You can override this for advanced customization.
*/.card {
  flex-basis: var(--size-content-1, 100%);
  display: var(--card-display, flex);
  flex-direction: var(--card-flex-direction, column);
  justify-content: var(--card-justify-content, normal);
  align-items: var(--card-align-items, normal);
  flex-wrap: var(--card-flex-wrap, nowrap);
  gap: var(--card-content-gap, 1rem);
  background: var(--card-bg, transparent);
  border: var(--card-border-width, 1px) solid var(--card-border-clr, var(--card-border-color, var(--clr-light, #eee)));
  padding: var(--card-padding, 0);
  margin-block-end: var(--card-margin-bottom, 1rem);
  border-radius: var(--card-radius, 6px);
  box-shadow: var(--card-shadow, none);
  overflow: var(--card-overflow, auto);
  cursor: var(--card-cursor, default);
  transition: var(--card-transition, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease);
}.card-header {
  display: var(--card-header-display, flex);
  flex-direction: var(--card-header-flex-direction, row);
  justify-content: var(--card-header-justify-content, space-between);
  align-items: var(--card-header-align-items, center);
  flex-wrap: var(--card-header-flex-wrap, wrap);
  gap: var(--card-header-gap, 0.5rem);
  padding: var(--card-header-padding, 1.5rem);
  border-bottom: var(--card-header-border, none);
  background-color: var(--card-header-bg, transparent);
}.card-body {
  display: var(--card-body-display, block);
  flex-direction: var(--card-body-flex-direction, row);
  justify-content: var(--card-body-justify-content, normal);
  align-items: var(--card-body-align-items, normal);
  flex-wrap: var(--card-body-flex-wrap, nowrap);
  gap: var(--card-body-gap, 0);
  padding: var(--card-body-padding, 1.5rem);
  font-size: var(--card-font-size, var(--font-size-default));
  background-color: var(--card-body-bg, transparent);
}.card-footer {
  display: var(--card-footer-display, flex);
  flex-direction: var(--card-footer-flex-direction, row);
  justify-content: var(--card-footer-justify-content, space-between);
  align-items: var(--card-footer-align-items, center);
  flex-wrap: var(--card-footer-flex-wrap, wrap);
  gap: var(--card-footer-gap, 0.5rem);
  padding: var(--card-footer-padding, 1rem 1.5rem);
  border-top: var(--card-footer-border, none);
  background-color: var(--card-footer-bg, transparent);
}.card-img {
  width: var(--card-img-width, 100%);
  height: var(--card-img-height, auto);
  object-fit: var(--card-img-fit, cover);
  aspect-ratio: var(--card-img-aspect-ratio, auto);
}.card .card-title {
  line-height: var(--card-title-line-height, var(--font-lineheight-1, 1.2));
}.card :where(p) {
  --block-padding-left: 0;
}.card-group {
  --card-margin-bottom: 0;
  display: var(--card-group-display, grid);
  grid-template-columns: var(--card-group-grid-template-columns, repeat(auto-fill, minmax(20rem, 1fr)));
  flex-direction: var(--card-group-direction, row);
  gap: var(--card-group-gap, 1.5rem);
}/* Card Density Modifiers (Compact / High Density) */:where(.card-compact, .card.card-compact, .card-sm, .card.card-sm) {
  --card-header-padding: var(--card-header-padding-compact, var(--card-header-padding-sm, 0.65rem 1rem));
  --card-body-padding: var(--card-body-padding-compact, var(--card-body-padding-sm, 0.85rem 1rem));
  --card-footer-padding: var(--card-footer-padding-compact, var(--card-footer-padding-sm, 0.65rem 1rem));
  --card-content-gap: var(--card-content-gap-compact, var(--card-content-gap-sm, 0.75rem));
  --card-margin-bottom: var(--card-margin-bottom-compact, var(--card-margin-bottom-sm, 0.5rem));
  --card-font-size: var(--card-font-size-compact, var(--card-font-size-sm, var(--font-size-1, 0.875rem)));
  --card-padding: var(--card-padding-compact, var(--card-padding-sm, var(--card-padding, 0.85rem 1rem)));
}:where(.card-compact, .card.card-compact, .card-sm, .card.card-sm):has(> :where(.card-header, .card-body, .card-footer)) {
  --card-padding: var(--card-padding-compact, var(--card-padding-sm, var(--card-padding, 0)));
}/* Card Interaction States & Modifiers */:where(.card):where(:hover, :focus-within) {
  background-color: var(--card-hover-bg, var(--card-bg, transparent));
  border-color: var(--card-hover-border-clr, var(--card-border-clr, var(--card-border-color, var(--clr-light, #eee))));
  box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
  transform: var(--card-hover-transform, none);
}:where(a.card, button.card, .card.card-interactive, .card-interactive) {
  --card-cursor: var(--card-interactive-cursor, pointer);
  text-decoration: none;
}/*
  Carousel Component CSS Variables (override globally as needed):
  --carousel-bg (defaults to --clr-light)
  --carousel-bg-dark (defaults to --clr-dark)
  --carousel-slide-bg (defaults to --clr-light)
  --carousel-slide-bg-dark (defaults to --clr-dark)
  --carousel-auto-columns
  --carousel-gap
  --carousel-slide-radius
  --carousel-slide-current-outline
  --carousel-slide-current-outline-offset
  --carousel-indicator-size
  --carousel-indicator-bg
  --carousel-indicator-color
  --carousel-indicator-current-bg
  --carousel-ratio

  By default, --carousel-bg and --carousel-slide-bg use --clr-light, and their dark variants use --clr-dark. You can override these for advanced customization.
*/:root {
  --carousel-bg: var(--clr-light, #fff);
  --carousel-bg-dark: var(--clr-dark, #222);
  --carousel-slide-bg: var(--clr-light, #fff);
  --carousel-slide-bg-dark: var(--clr-dark, #222);
  --carousel-auto-columns: 100%;
  --carousel-gap: 0;
  --carousel-auto-columns: 80%;
  --carousel-gap: var(--size-2, 0.5rem);
  --carousel-slide-radius: var(--radius-2);
  --carousel-slide-current-outline: 2px solid var(--clr-bg);
  --carousel-slide-current-outline-offset: -10px;
  --carousel-indicator-size: var(--size-4, 1.5rem);
  --carousel-indicator-bg: var(--clr-secondary);
  --carousel-indicator-color: var(--clr-on-primary);
  --carousel-indicator-current-bg: var(--clr-primary);
  --carousel-ratio: 16 / 9;
}.carousel-body {
  display: grid;
  grid-template-areas: "stack";
  /*  overflow-x: auto; */
  overflow: hidden;
  gap: var(--carousel-gap);
  background-color: var(--carousel-bg);
  position: relative;
  aspect-ratio: var(--carousel-ratio);
}.carousel-body > .slide {
  grid-area: stack;
  border-radius: var(--carousel-slide-radius);
  overflow: hidden;
  background-color: var(--carousel-slide-bg);
  position: relative;
  z-index: 1;
  outline-offset: 10px;
  transition: all 0.5s;
  position: absolute;
  height: 100%;
  aspect-ratio: var(--carousel-ratio);
  right: -100%;
}.carousel-body > .slide.leaving {
  right: 0;
}.carousel-body > .slide.current {
  outline: var(--carousel-slide-current-outline);
  outline-offset: var(--carousel-slide-current-outline-offset);
  right: 0;
  z-index: 2;
}.carousel-body > .slide > img {
  width: 100%;
  aspect-ratio: var(--carousel-ratio);
  object-fit: cover;
}.carousel-body > .slide > .slide-contents {
  position: absolute;
  inset: var(--size-4, 1.5rem);
  z-index: 1;
  display: grid;
  place-content: center;
}.carousel-controls {
  display: flex;
  justify-content: space-between;
  padding: var(--size-4, 1.5rem);
}.carousel-slides-indicators {
  display: flex;
  gap: 1rem;
}.carousel-slides-indicators > * {
  font-size: 0.75rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  border-radius: 50%;
  width: var(--carousel-indicator-size);
  height: var(--carousel-indicator-size);
  background-color: var(--carousel-indicator-bg);
  color: var(--carousel-indicator-color);
}.carousel-slides-indicators > *.current {
  background-color: var(--carousel-indicator-current-bg);
}.carousel-slides-indicators > *:where(:hover, .current) {
  outline: 2px solid var(--gray-4);
  outline-offset: 3px;
}.carousel-progress {
  appearance: none;
  margin: 0;
  width: 100%;
  height: 3px;
  accent-color: var(--accent-color);
}@media (prefers-color-scheme: dark) {
  :root {
    --carousel-bg: var(--carousel-bg-dark);
    --carousel-slide-bg: var(--carousel-slide-bg-dark);
  }
}::-webkit-progress-value {
  background-color: var(--carousel-progress-color, coral);
}::-moz-progress-bar {
  background-color: var(--carousel-progress-color, coral);
}.collapsable {
  display: none;
}/*
  Dropdown Component CSS Variables (override globally as needed):
  --dropdown-bg (defaults to --clr-light)
  --dropdown-bg-dark (defaults to --clr-dark)
  --dropdown-position
  --dropdown-shadow
  --dropdown-width
  --dropdown-height
  --dropdown-a-color
  --dropdown-a-display
  --dropdown-a-padding
  --dropdown-menu-position
  --dropdown-menu-top
  --dropdown-menu-right
  --dropdown-menu-display
  --dropdown-menu-flex-direction

  By default, --dropdown-bg uses --clr-light and --dropdown-bg-dark uses --clr-dark. You can override these for advanced customization.
*/.dropdown {
  position: var(--dropdown-position, relative);
}.dropdown-menu {
  position: var(--dropdown-menu-position, absolute);
  top: var(--dropdown-menu-top, 100%);
  width: var(--dropdown-width, 20rem);
  height: var(--dropdown-height, auto);
  right: var(--dropdown-menu-right, 0);
  display: var(--dropdown-menu-display, flex);
  flex-direction: var(--dropdown-menu-flex-direction, column);
  background-color: var(--dropdown-bg, var(--clr-light, #fff));
  box-shadow: var(--dropdown-shadow, none);
}.dropdown-menu a {
  color: var(--dropdown-a-color, var(--clr-dark, #222));
  display: var(--dropdown-a-display, block);
  padding: var(--dropdown-a-padding, 0.5rem);
}/*
  Explorer Component CSS Variables (override globally as needed):
  --explorer-bg (defaults to --clr-light)
  --explorer-bg-dark (defaults to --clr-dark)

  By default, --explorer-bg uses --clr-light and --explorer-bg-dark uses --clr-dark. You can override these for advanced customization.
*/:root {
  --explorer-bg: var(--clr-light, #fff);
  --explorer-bg-dark: var(--clr-dark, #222);
}.explorer-container .explorer-nav {
  border-radius: var(--explorer-nav-radius, var(--radius-2));
  display: flex;
  gap: var(--size-1, 0.25rem);
  padding: var(--size-1, 0.25rem);
  justify-content: space-between;
  background-color: var(--explorer-nav-bg, var(--bg-darken));
  color: var(--explorer-nav-color, #ddd);
  margin-block-end: var(--size-4, 1.5rem);
}.explorer-container .explorer-nav .breadcrumbs ::marker {
  content: "";
}.explorer-container .explorer-nav .breadcrumbs a {
  margin: 0;
}.explorer-container .explorer-nav .breadcrumbs a:empty {
  display: none;
}.explorer-nav .breadcrumb-item:last-child {
  text-decoration: none;
}.explorer-nav .breadcrumb-item:last-child .badge {
  background-color: var(--clr-secondary);
}.explorer-main {
  display: grid;
  gap: var(--explorer-main-gap, var(--grid-gap));
  grid-template-columns: var(--explorer-main-cols, 2fr 3fr);
  min-height: var(--explorer-main-min-height, 30rem);
  overflow-x: hidden;
  background-color: var(--explorer-bg, var(--clr-light, #fff));
}.explorer-main > * {
  overflow-x: hidden;
}.explorer-main .explorer-items-list {
  position: relative;
  overflow-x: hidden;
}.explorer-item-info .item-name {
  color: var(--clr-secondary);
}.explorer-item-info .file_info {
  height: 0;
  opacity: 0;
  transition: var(--explorer-info-transition, all 0.2s);
  font-size: var(--font-size-0);
}.explorer-item-info .file_info.show_info {
  height: auto;
  opacity: 1;
  animation: var(--animation-slide-in-left);
  animation-duration: var(--explorer-info-animation-duration, 0.2s);
}.explorer-item-info img {
  margin-bottom: var(--size-4, 1.5rem);
}.explorer-item-info {
  container: editor-toolbar/inline-size;
}@container editor-toolbar (min-width: 500px) {
  .image-editor-toolbar {
    margin-top: var(--size-4, 1.5rem);
    display: flex;
    gap: var(--size-3, 1rem);
  }
  .image-editor-toolbar > * {
    flex: 1;
  }
}#upload-zone {
  position: absolute;
  inset: 1rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}#upload-zone > * {
  flex: 1;
}#upload-zone:not(.show) {
  display: none;
}.explorer-items-list .icon {
  block-size: var(--size-6, 3rem);
  display: inline-flex;
  box-shadow: var(--shadow-2);
}.explorer-items-list :where(.icon, .item-name) {
  transition: all 0.2s;
}.explorer-items-list > div {
  min-height: var(--size-6, 3rem);
}/* Display: list */.explorer-items-list .tree-display-list .icon {
  font-size: 1rem;
}.explorer-items-list .tree-display-list > *:hover > .icon {
  border-radius: var(--radius-round);
  transform: scale(1.8);
}.explorer-items-list .tree-display-list > *:hover > .item-name {
  padding-left: 0.8rem;
}.explorer-items-list .item-nav .icon i {
  transition: all 0.2s;
}.explorer-items-list .item-nav .icon:hover i {
  color: var(--accent-color);
}.explorer-items-list .tree-display-grid > * {
  position: relative;
}.explorer-items-list .tree-display-grid > * .item-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}/* Display: grid */.explorer-items-list .tree-display-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}.explorer-items-list .tree-display-grid > * {
  display: flex;
  flex-direction: column;
  text-align: center;
}.explorer-items-list .tree-display-grid > * > .icon {
  border-radius: var(--radius-2);
  height: 5rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}.explorer-items-list .tree-display-grid > * > img.icon {
  aspect-ratio: auto;
}.explorer-items-list .tree-display-grid > * > :where(.icon, .icon .fa::before, .icon .fas::before) {
  font-size: 3rem;
}/*
  Footer Component CSS Variables (override globally as needed):
  --footer-bg (defaults to --clr-light)
  --footer-bg-dark (defaults to --clr-dark)
  --footer-color
  --footer-padding-block

  By default, --footer-bg uses --clr-light and --footer-bg-dark uses --clr-dark. You can override these for advanced customization.
*/footer {
  background-color: var(--footer-bg, var(--clr-light, #fff));
  color: var(--footer-color, var(--clr-dark, #222));
  padding-block: var(--footer-padding-block);
}/*
  Form Component CSS Variables (override globally as needed):
  --form-bg (defaults to --clr-light)
  --form-bg-dark (defaults to --clr-dark)
  --form-control-bg (defaults to --clr-light)
  --form-control-bg-dark (defaults to --clr-dark)
  --accent-color
  --input-group-label-bg
  --input-group-label-padding
  --form-control-border-radius
  --form-shadow
  --form-margin-block
  --form-group-margin-bottom
  --form-control-color
  --form-fieldset-padding-inline
  --form-fieldset-border
  --form-cols-display
  --form-cols-gap
  --form-cols-justify-content
  --form-group-display
  --form-group-flex-direction
  --form-group-justify-content
  --form-group-align-items
  --form-group-flex-wrap
  --btn-group-display
  --btn-group-flex-direction
  --btn-group-gap
  --btn-group-item-margin
  --btn-group-item-outline-offset
  --form-control-width
  --form-control-box-sizing
  --form-control-border-width
  --form-control-border-clr
  --form-control-padding
  --form-control-font-size
  --form-control-transition
  --form-control-focus-outline
  --form-control-focus-border-clr
  --form-control-focus-shadow
  --form-control-padding-sm
  --form-control-font-size-sm
  --form-control-padding-lg
  --form-control-font-size-lg
  --form-control-valid-border-clr
  --form-control-invalid-border-clr
  --form-control-disabled-border-clr
  --form-control-placeholder-clr
  --form-hint-color
  --form-hint-font-size
  --form-hint-line-height
  --form-hint-margin-top
  --form-hint-display
  --form-hint-max-inline-size
  --form-hint-color-danger
  --form-hint-color-success
  --form-hint-color-warning
  --form-hint-color-info
  --form-control-description-clr (legacy alias for --form-hint-color)
  --btn-group-checkbox-display
  --btn-group-checkbox-flex-direction
  --btn-group-checkbox-gap
  --btn-group-checkbox-input-display
  --btn-padding-inline
  --btn-padding-block
  --btn-group-checkbox-bg-color
  --btn-group-checkbox-color
  --btn-group-checkbox-text-align
  --btn-group-checkbox-cursor
  --btn-group-checkbox-font-size
  --btn-group-checkbox-checked-bg-color
  --btn-group-checkbox-checked-color
  --form-label-display
  --form-label-font-weight
  --form-label-font-size
  --form-label-color
  --form-label-margin-bottom
  --form-check-display
  --form-check-align-items
  --form-check-gap
  --form-check-padding
  --form-check-border-width
  --form-check-border-clr
  --form-check-radius
  --form-check-bg
  --form-check-margin-bottom
  --form-check-cursor
  --form-check-transition
  --form-check-checked-border-clr
  --form-check-checked-bg
  --form-check-checked-shadow
  --btn-group-checkbox-checked-text-shadow
  --btn-group-checkbox-border-radius
  --input-group-display
  --input-group-flex-direction
  --input-group-align-items
  --input-group-margin-bottom

  By default, --form-bg and --form-control-bg use --clr-light, and --form-bg-dark and --form-control-bg-dark use --clr-dark. You can override these for advanced customization.
*/form {
  background-color: var(--form-bg, transparent);
  box-shadow: var(--form-shadow, none);
  border-radius: var(--form-control-border-radius, 0.5rem);
  margin-block: var(--form-margin-block, 1.5rem);
}form fieldset {
  padding-inline: var(--form-fieldset-padding-inline, 0);
  border: var(--form-fieldset-border, 0);
}.form-cols {
  display: var(--form-cols-display, flex);
  gap: var(--form-cols-gap, var(--size-4, 1.5rem));
  justify-content: var(--form-cols-justify-content, stretch);
}.form-cols > * {
  flex: 1;
}:where(label, .form-label) {
  display: var(--form-label-display, block);
  font-weight: var(--form-label-font-weight, 600);
  font-size: var(--form-label-font-size, var(--font-size-default, 1rem));
  color: var(--form-label-color, var(--clr-text-default, inherit));
  margin-bottom: var(--form-label-margin-bottom, var(--size-1, 0.35rem));
}.form-group,
.form-group-inline {
  display: var(--form-group-display, flex);
  flex-direction: var(--form-group-flex-direction, column);
  justify-content: var(--form-group-justify-content, normal);
  align-items: var(--form-group-align-items, stretch);
  flex-wrap: var(--form-group-flex-wrap, nowrap);
  margin-bottom: var(--form-group-margin-bottom, 1rem);
  gap: var(--form-group-gap, 0.5rem);
}.form-group-inline {
  flex-direction: var(--form-group-flex-direction, row);
}.btn-group,
.input-group,
.form-radio,
.form-check {
  --form-control-display: grid;
  display: var(--btn-group-display, flex);
  flex-direction: var(--btn-group-flex-direction, row);
  gap: var(--btn-group-gap, var(--size-2, 0.5rem));
}:where(.form-check, label.form-check) {
  display: var(--form-check-display, inline-flex);
  align-items: var(--form-check-align-items, center);
  gap: var(--form-check-gap, 0.5rem);
  padding: var(--form-check-padding, 0);
  border: var(--form-check-border-width, 0) solid var(--form-check-border-clr, transparent);
  border-radius: var(--form-check-radius, 0);
  background-color: var(--form-check-bg, transparent);
  margin-bottom: var(--form-check-margin-bottom, 0);
  cursor: var(--form-check-cursor, pointer);
  transition: var(--form-check-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
}:where(.form-check, label.form-check):has(:checked) {
  border-color: var(--form-check-checked-border-clr, var(--accent-color, var(--clr-primary, #007bff)));
  background-color: var(--form-check-checked-bg, var(--form-check-bg, transparent));
  box-shadow: var(--form-check-checked-shadow, none);
}:where(.form-check, .form-radio) :where(label, .form-check-label, .form-radio-label) {
  margin-bottom: 0;
  cursor: pointer;
}:where(.btn-group, .input-group, .form-radio, .form-check) > * {
  margin: var(--btn-group-item-margin, 0);
}:where(:not(:active):focus-visible) {
  outline-offset: var(--btn-group-item-outline-offset, 0);
}.form-control {
  box-sizing: var(--form-control-box-sizing, border-box);
  accent-color: var(--accent-color, #007bff);
  background-color: var(--form-control-bg, #f8f9fa);
  color: var(--form-control-color, #222);
  border: var(--form-control-border-width, 1px) solid var(--form-control-border-clr, var(--clr-border));
  border-radius: var(--form-control-border-radius, 0.5rem);
  padding: var(--form-control-padding, 0.5rem);
  font-size: var(--form-control-font-size, var(--font-size-default));
  transition: var(--form-control-transition, border-color 0.15s ease, box-shadow 0.15s ease);
}.form-control:focus {
  outline: var(--form-control-focus-outline, none);
  border-color: var(--form-control-focus-border-clr, var(--accent-color, var(--clr-primary, #007bff)));
  box-shadow: var(--form-control-focus-shadow, 0 0 0 2px rgba(0, 123, 255, 0.15));
}.form-control:valid {
  --form-control-border-clr: var(--form-control-valid-border-clr, var(--clr-success, #28a745));
}.form-control:invalid {
  --form-control-border-clr: var(--form-control-invalid-border-clr, var(--clr-danger, #dc3545));
}.form-control:disabled {
  --form-control-border-clr: var(--form-control-disabled-border-clr, var(--clr-border));
  cursor: not-allowed;
}:where(.form-control:not([type=checkbox]):not([type=radio])) {
  width: var(--form-control-width, 100%);
}:where(.form-control-sm, .form-control.form-control-sm) {
  --form-control-padding: var(--form-control-padding-sm, 0.25rem 0.5rem);
  --form-control-font-size: var(--form-control-font-size-sm, var(--font-size-1, 0.85rem));
}:where(.form-control-lg, .form-control.form-control-lg) {
  --form-control-padding: var(--form-control-padding-lg, 0.75rem 1rem);
  --form-control-font-size: var(--form-control-font-size-lg, var(--font-size-3, 1.25rem));
}.form-control::placeholder {
  color: var(--form-control-placeholder-clr, #6c757d);
  font-style: var(--form-control-placeholder-style, italic);
}.form-hint,
.form-control-description {
  --form-control-description-clr: var(--form-hint-color, var(--gray-6, #6c757d));
  display: var(--form-hint-display, block);
  color: var(--form-hint-color, var(--gray-6, #6c757d));
  font-size: var(--form-hint-font-size, var(--font-size-1, 0.85rem));
  line-height: var(--form-hint-line-height, 1.35);
  margin-top: var(--form-hint-margin-top, var(--size-1, 0.25rem));
  max-inline-size: var(--form-hint-max-inline-size, none);
}.form-hint.is-danger, .form-hint.is-error, .form-hint.form-hint-danger, .form-hint.form-hint-error,
.form-control-description.is-danger,
.form-control-description.is-error,
.form-control-description.form-hint-danger,
.form-control-description.form-hint-error {
  --form-hint-color: var(--form-hint-color-danger, var(--clr-danger, #dc3545));
}.form-hint.is-success, .form-hint.form-hint-success,
.form-control-description.is-success,
.form-control-description.form-hint-success {
  --form-hint-color: var(--form-hint-color-success, var(--clr-success, #28a745));
}.form-hint.is-warning, .form-hint.form-hint-warning,
.form-control-description.is-warning,
.form-control-description.form-hint-warning {
  --form-hint-color: var(--form-hint-color-warning, var(--clr-warning, #ffc107));
}.form-hint.is-info, .form-hint.form-hint-info,
.form-control-description.is-info,
.form-control-description.form-hint-info {
  --form-hint-color: var(--form-hint-color-info, var(--clr-info, #17a2b8));
}/* checkboxes & radio groups */.btn-group-checkbox,
.btn-group-radio {
  display: var(--btn-group-checkbox-display, inline-flex);
  flex-direction: var(--btn-group-checkbox-flex-direction, row);
  gap: var(--btn-group-checkbox-gap, 2px);
  border-radius: var(--form-control-border-radius);
  overflow: hidden;
  margin-bottom: var(--btn-group-margin-bottom, 1rem);
}.btn-group-checkbox > *,
.btn-group-radio > * {
  flex: var(--btn-group-items-flex, 1);
}:where(.btn-group-checkbox, .btn-group-radio) input {
  display: var(--btn-group-checkbox-input-display, none) !important;
}:where(.btn-group-checkbox, .btn-group-radio) > * {
  padding-inline: var(--btn-padding-inline, 1.5rem);
  padding-block: var(--btn-padding-block, 0.25rem);
  flex: 1;
  background-color: var(--btn-group-checkbox-bg-color, var(--gray-4));
  color: var(--btn-group-checkbox-color, var(--gray-8));
  text-align: var(--btn-group-checkbox-text-align, center);
  cursor: var(--btn-group-checkbox-cursor, pointer);
  font-size: var(--btn-group-checkbox-font-size, 0.8em);
  display: var(--btn-group-checkbox-display, block);
}:where(.btn-group-checkbox, .btn-group-radio) > *:has(:checked) {
  background-color: var(--btn-group-checkbox-checked-bg-color, var(--accent-color));
  color: var(--btn-group-checkbox-checked-color, var(--gray-2));
  text-shadow: var(--btn-group-checkbox-checked-text-shadow, 0 0 1rem var(--blue-2));
}:where(.btn-group-checkbox, .btn-group-radio).btn-group-sm > * {
  --btn-padding-inline: var(--size-3, 1rem);
  --btn-padding-block: var(--size-0, 0.1rem);
}:has(> :where(.btn-group,
.btn-group-checkbox,
.btn-group-radio)) {
  container: var(--btn-group-container-name, btn-group)/var(--btn-group-container-size, inline-size);
}:where(.btn-group-checkbox,
.btn-group-radio,
.input-group) .form-control {
  border-radius: var(--btn-group-checkbox-border-radius, 0);
}/* Input group */.input-group {
  display: var(--input-group-display, flex);
  flex-direction: var(--input-group-flex-direction, row);
  align-items: var(--input-group-align-items, stretch);
  margin-bottom: var(--input-group-margin-bottom, var(--size-3, 1rem));
  border: var(--input-group-border-width, 1px) solid var(--input-group-border-clr, var(--clr-border));
  border-radius: var(--input-group-border-radius, var(--border-radius, 8px));
  overflow: var(--input-group-overflow, hidden);
  gap: var(--input-group-gap, 0);
}.input-group > :first-child {
  border-radius: var(--input-group-border-radius, var(--border-radius, 8px)) 0 0 var(--input-group-border-radius, var(--border-radius, 8px));
}.input-group > :last-child {
  border-radius: 0 var(--input-group-border-radius, var(--border-radius, 8px)) var(--input-group-border-radius, var(--border-radius, 8px)) 0;
}.input-group label {
  background-color: var(--input-group-label-bg, var(--gray-9));
  padding: var(--input-group-label-padding, 0 0.5rem);
  display: flex;
  align-items: center;
  font-size: var(--input-group-label-font-size, inherit);
  color: var(--input-group-label-color, var(--gray-2));
}@container btn-group (max-width: 300px) {
  .btn-group,
  .btn-group-checkbox,
  .btn-group-radio {
    flex-direction: column;
    width: var(--btn-group-width, fit-content);
  }
  :where(.btn-group-checkbox, .btn-group-radio) > * {
    flex: 100%;
  }
}/*
  Inline Group / Actions Group / Cluster Component CSS Variables:
  --group-display
  --group-direction
  --group-align-items
  --group-justify-content
  --group-flex-wrap
  --group-gap
  --group-gap-sm
  --group-gap-lg
  --group-margin
  --group-padding
  --group-width
  --inline-group-direction
  --actions-group-direction
  --cluster-direction
*/:where(.inline-group, .actions-group, .group, .cluster) {
  display: var(--group-display, inline-flex);
  flex-direction: var(--group-direction, row);
  align-items: var(--group-align-items, center);
  justify-content: var(--group-justify-content, flex-start);
  flex-wrap: var(--group-flex-wrap, wrap);
  gap: var(--group-gap, var(--size-2, 0.5rem));
  margin: var(--group-margin, 0);
  padding: var(--group-padding, 0);
  width: var(--group-width, auto);
}/* Direction isolation for horizontal micro-groups:
   Prevents nested .inline-group, .actions-group and .cluster from unintentionally inheriting
   --group-direction: column from an ancestor .group or .group-vertical.
*/:where(.inline-group) {
  --group-direction: var(--inline-group-direction, row);
}:where(.actions-group) {
  --group-direction: var(--actions-group-direction, row);
}:where(.cluster) {
  --group-direction: var(--cluster-direction, row);
}/* Density and size modifiers */:where(.group-sm, .group-compact, .inline-group-sm, .actions-group-sm) {
  --group-gap: var(--group-gap-sm, var(--size-1, 0.25rem));
}:where(.group-lg, .inline-group-lg, .actions-group-lg) {
  --group-gap: var(--group-gap-lg, var(--size-3, 1rem));
}/* Alignment modifiers */:where(.group-center, .inline-group-center, .actions-group-center) {
  --group-justify-content: center;
}:where(.group-end, .group-right, .inline-group-end, .actions-group-end) {
  --group-justify-content: flex-end;
}:where(.group-between, .inline-group-between, .actions-group-between) {
  --group-justify-content: space-between;
}/* Wrapping modifiers */:where(.group-nowrap, .inline-group-nowrap, .actions-group-nowrap) {
  --group-flex-wrap: nowrap;
}/* Direction modifiers */:where(.group-vertical, .group-column, .inline-group-vertical, .actions-group-vertical) {
  --group-direction: column;
  --group-align-items: stretch;
}/* Full width modifier */:where(.group-full, .group-block, .inline-group-full) {
  --group-display: flex;
  --group-width: 100%;
}/* Responsive stacking modifier for small screens */@media (max-width: 640px) {
  :where(.group-responsive, .inline-group-responsive, .actions-group-responsive, .group-stack-sm, .actions-group-stack-sm) {
    --group-direction: column;
    --group-align-items: stretch;
    --group-width: 100%;
    display: flex;
  }
}/*
  Checkboxes & Radios Component CSS Variables (override globally as needed):
  --form-control-bg (defaults to --clr-light)
  --form-control-bg-dark (defaults to --clr-dark)
  --form-control-disabled
  --form-control-color

  By default, --form-control-bg uses --clr-light and --form-control-bg-dark uses --clr-dark. You can override these for advanced customization.
*/input:where([type=radio], [type=checkbox]) {
  appearance: none;
  background-color: var(--form-control-bg, var(--clr-light, #fff));
  margin: var(--form-control-margin, 0);
  font: inherit;
  color: currentColor;
  width: var(--form-control-size, 1.15em);
  height: var(--form-control-size, 1.15em);
  border: var(--form-control-border-width, 0.15em) solid currentColor;
  transform: var(--form-control-transform, translateY(-0.075em));
  display: var(--form-control-display, grid);
  place-content: var(--form-control-place-content, center);
  border-radius: var(--form-control-border-radius, 0.15em);
}input[type=checkbox] {
  --form-control-border-radius: 2px;
}input[type=radio] {
  --form-control-border-radius: 50%;
  transform: translateY(-0.075em);
}input:where([type=radio], [type=checkbox])::before {
  content: "";
  width: var(--form-control-icon-size, 0.65em);
  height: var(--form-control-icon-size, 0.65em);
  transform: scale(0);
  transition: var(--form-control-transition, 120ms transform ease-in-out);
  box-shadow: inset 1em 1em var(--accent-color, var(--clr-text-default, #000));
}input[type=radio]::before {
  border-radius: var(--form-control-border-radius, 50%);
}input:where([type=radio], [type=checkbox]):checked::before {
  transform: scale(1);
}input[type=checkbox]:checked::before {
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}input:where([type=radio], [type=checkbox]):focus {
  outline: max(2px, 0.15em) solid var(--form-control-disabled);
  outline-offset: max(2px, 0.15em);
}input:where([type=radio], [type=checkbox]):disabled {
  --form-control-color: var(--form-control-disabled);
  background-color: var(--form-control-bg-dark, var(--clr-dark, #222));
  color: var(--form-control-disabled);
  cursor: not-allowed;
}/*
  Header Component CSS Variables (override globally as needed):
  --header-bg (defaults to --clr-light)
  --header-bg-dark (defaults to --clr-dark)
  --header-padding-top

  By default, --header-bg uses --clr-light and --header-bg-dark uses --clr-dark. You can override these for advanced customization.
*/header {
  padding-top: var(--header-padding-top);
  background-color: var(--header-bg, transparent);
}/*
  Hero Component CSS Variables (override globally as needed):
  --hero-bg (defaults to --clr-light)
  --hero-bg-dark (defaults to --clr-dark)
  --hero-padding
  --hero-message-display
  --hero-message-grid-template-columns
  --hero-message-color
  --hero-message-line-height
  --hero-highlight-color
  --under-hero-color
  --under-hero-font-size
  --under-hero-margin-block-end

  By default, --hero-bg uses --clr-light and --hero-bg-dark uses --clr-dark. You can override these for advanced customization.
*/.hero {
  padding: var(--hero-padding, 4rem);
  background-color: var(--hero-bg, var(--clr-light, #fff));
}.hero-message {
  display: var(--hero-message-display, grid);
  grid-template-columns: var(--hero-message-grid-template-columns, max-content);
  color: var(--hero-message-color, var(--clr-text-default));
  line-height: var(--hero-message-line-height, var(--font-lineheight-0));
}.hero-message > div:last-child {
  color: var(--hero-highlight-color, var(--clr-primary));
}.under-hero {
  color: var(--under-hero-color, var(--clr-text-default));
  font-size: var(--under-hero-font-size, var(--font-size-4));
  margin-block-end: var(--under-hero-margin-block-end, var(--size-3, 1rem));
}/* Icons */.icon {
  display: var(--icon-display, inline-flex);
  border-radius: var(--icon-radius, 50%);
  background-color: var(--icon-bg, transparent);
  justify-content: var(--icon-justify-content, center);
  align-items: var(--icon-align-items, center);
  block-size: var(--icon-size, 2rem);
  margin-inline: var(--icon-margin-inline, 4px);
  aspect-ratio: var(--icon-aspect-ratio, 1);
  font-size: var(--icon-font-size, 1ch);
}.icon i {
  color: var(--icon-clr, var(--clr-text-default, #222));
}.icon-lg {
  --icon-size: var(--icon-size-lg, 3rem);
}.icon-lg > i {
  --icon-font-size: var(--icon-font-size-lg, 1em);
}.icon-sm {
  --icon-size: var(--icon-size-sm, 1rem);
}.icon-sm > i {
  --icon-font-size: var(--icon-font-size-sm, .5em);
}.icon.active {
  outline: var(--icon-active-outline-width, 2px) var(--icon-active-outline-style, solid) var(--icon-active-outline, var(--icon-bg));
  outline-offset: var(--icon-active-outline-offset, 2px);
}.icon-info {
  --icon-bg: var(--clr-info);
}.icon-success {
  --icon-bg: var(--clr-success);
}.icon-warning {
  --icon-bg: var(--clr-warning);
}.icon-danger {
  --icon-bg: var(--clr-danger);
}.icon-light {
  --icon-bg: var(--clr-light);
}.icon-light > i {
  color: var(--icon-clr, var(--clr-dark, #222));
}.icon-dark {
  --icon-bg: var(--clr-dark);
}.icon-dark > i {
  color: var(--icon-clr, var(--clr-light, #f8f9fa));
}.icon-primary {
  --icon-bg: var(--clr-primary);
}.icon-secondary {
  --icon-bg: var(--clr-secondary);
}/*
  List Component CSS Variables (override globally as needed):

  Container (.list-group):
  --list-display
  --list-flex-direction
  --list-padding
  --list-border-radius
  --list-border-size
  --list-border-style
  --list-border-color   (defaults to --clr-light)
  --list-overflow
  --list-bg
  --list-style
  --list-max-inline-size

  Actions variant (.list-group-actions):
  --list-actions-display
  --list-actions-gap
  --list-actions-flex-direction
  --list-item-actions-display
  --list-item-actions-justify-content
  --list-item-actions-align-items
  --list-item-actions-gap

  Item (.list-item):
  --list-item-min-width
  --list-item-display
  --list-item-flex-direction
  --list-item-justify-content
  --list-item-align-items
  --list-item-gap
  --list-item-padding
  --list-item-cursor
  --list-item-transition
  --list-item-bg
  --list-item-text-transform
  --list-item-text-decoration
  --list-item-name-white-space
  --list-item-name-overflow
  --list-item-name-text-overflow
  --list-item-name-flex-grow
  --list-item-nav-width
  --list-item-nav-transition
  --list-item-nav-border-radius
  --list-item-nav-bg
  --list-item-nav-display
  --list-item-nav-overflow
  --list-item-nav-hover-width
  --list-item-nav-hover-padding-inline
  --list-item-nav-hover-padding-block
  --list-item-icon-margin-right
*//* ---- Container ---- */.list-group {
  display: var(--list-display, flex);
  flex-direction: var(--list-flex-direction, column);
  padding: var(--list-padding, 0);
  border-radius: var(--list-border-radius, 6px);
  border: var(--list-border-size, 1px) var(--list-border-style, solid) var(--list-border-color, var(--clr-light, #ddd));
  overflow: var(--list-overflow, auto);
  background-color: var(--list-bg, transparent);
}.list-group > * {
  list-style: var(--list-style, none);
  padding: var(--list-item-padding, 0.5rem 1.5rem);
  max-inline-size: var(--list-max-inline-size, none);
}.list-group > *:not(:last-child) {
  border-bottom: var(--list-border-size, 1px) var(--list-border-style, solid) var(--list-border-color, var(--clr-light, #ddd));
}/* ---- Actions variant ---- */.list-group-actions {
  display: var(--list-actions-display, flex);
  gap: var(--list-actions-gap, 0);
}.list-group-actions > * {
  --list-item-display: var(--list-item-actions-display, flex);
  --list-item-flex-direction: var(--list-actions-flex-direction, row);
  --list-item-justify-content: var(--list-item-actions-justify-content, space-between);
  --list-item-align-items: var(--list-item-actions-align-items, center);
  --list-item-gap: var(--list-item-actions-gap, 0.5rem);
  --list-item-cursor: pointer;
}.list-group-actions > *:hover,
.list-group-actions > *.active {
  background-color: hsla(var(--accent-color-hsl)/30%);
}/* ---- Item ---- */:where(.list-item, .list-group > *, .list-group-actions > *) {
  min-width: var(--list-item-min-width, 0);
  display: var(--list-item-display, flex);
  flex-direction: var(--list-item-flex-direction, row);
  justify-content: var(--list-item-justify-content, space-between);
  align-items: var(--list-item-align-items, center);
  gap: var(--list-item-gap, 0.5rem);
  padding: var(--list-item-padding, 0.5rem);
  cursor: var(--list-item-cursor, pointer);
  transition: var(--list-item-transition, all 0.3s);
  background-color: var(--list-item-bg, transparent);
  text-transform: var(--list-item-text-transform, none);
  text-decoration: var(--list-item-text-decoration, none);
}.list-item:where(:hover, .active) {
  background-color: hsla(var(--accent-color-hsl), 20%);
}.list-item .item-name {
  white-space: var(--list-item-name-white-space, nowrap);
  overflow: var(--list-item-name-overflow, hidden);
  text-overflow: var(--list-item-name-text-overflow, ellipsis);
  flex-grow: var(--list-item-name-flex-grow, 1);
}.list-item .item-nav {
  width: var(--list-item-nav-width, auto);
}.list-item .item-nav > * {
  transition: var(--list-item-nav-transition, all 0.3s);
  width: var(--list-item-nav-width, 0);
  border-radius: var(--list-item-nav-border-radius, var(--radius-round));
  background-color: var(--list-item-nav-bg, var(--gray-7));
  display: var(--list-item-nav-display, flex);
  overflow: var(--list-item-nav-overflow, hidden);
}.list-item:hover .item-nav > * {
  width: var(--list-item-nav-hover-width, auto);
  padding-inline: var(--list-item-nav-hover-padding-inline, 1.5rem);
  padding-block: var(--list-item-nav-hover-padding-block, 0.25rem);
}.list-item .icon {
  margin-right: var(--list-item-icon-margin-right, 0.5rem);
}/*
  Media Object Component CSS Variables (override globally or locally as needed):
  --media-display
  --media-align-items
  --media-justify-content
  --media-gap
  --media-direction
  --media-figure-display
  --media-figure-align-items
  --media-figure-justify-content
  --media-figure-size
  --media-figure-radius
  --media-figure-overflow
  --media-figure-flex-shrink
  --media-figure-bg
  --media-figure-border-width
  --media-figure-border-clr
  --media-figure-img-fit
  --media-body-display
  --media-body-flex-direction
  --media-body-justify-content
  --media-body-gap
  --media-body-flex
  --media-body-min-width
  --media-title-font-size
  --media-title-font-weight
  --media-title-color
  --media-title-line-height
  --media-title-margin
  --media-meta-font-size
  --media-meta-color
  --media-meta-line-height
  --media-meta-margin
  --media-actions-display
  --media-actions-align-items
  --media-actions-gap
  --media-actions-margin-start
  --media-actions-flex-shrink
*/:where(.media) {
  display: var(--media-display, flex);
  align-items: var(--media-align-items, center);
  justify-content: var(--media-justify-content, flex-start);
  gap: var(--media-gap, 0.75rem);
  flex-direction: var(--media-direction, row);
}:where(.media-figure) {
  display: var(--media-figure-display, inline-flex);
  align-items: var(--media-figure-align-items, center);
  justify-content: var(--media-figure-justify-content, center);
  width: var(--media-figure-size, 2.75rem);
  height: var(--media-figure-size, 2.75rem);
  border-radius: var(--media-figure-radius, var(--radius-round, 50%));
  overflow: var(--media-figure-overflow, hidden);
  flex-shrink: var(--media-figure-flex-shrink, 0);
  background-color: var(--media-figure-bg, var(--clr-surface-alt, var(--gray-2, #e9ecef)));
  border: var(--media-figure-border-width, 1px) solid var(--media-figure-border-clr, var(--clr-border, var(--clr-light, #dee2e6)));
  text-decoration: none;
  color: inherit;
}:where(.media-figure img) {
  width: 100%;
  height: 100%;
  object-fit: var(--media-figure-img-fit, cover);
  display: block;
}:where(.media-body, .media-content) {
  display: var(--media-body-display, flex);
  flex-direction: var(--media-body-flex-direction, column);
  justify-content: var(--media-body-justify-content, center);
  gap: var(--media-body-gap, 0.15rem);
  flex: var(--media-body-flex, 1);
  min-width: var(--media-body-min-width, 0);
}:where(.media-title) {
  font-size: var(--media-title-font-size, 1rem);
  font-weight: var(--media-title-font-weight, 700);
  color: var(--media-title-color, inherit);
  line-height: var(--media-title-line-height, 1.25);
  margin: var(--media-title-margin, 0);
  text-decoration: none;
}:where(.media-meta, .media-subtitle) {
  font-size: var(--media-meta-font-size, 0.78rem);
  color: var(--media-meta-color, var(--clr-text-muted, var(--clr-secondary, #6c757d)));
  line-height: var(--media-meta-line-height, 1.3);
  margin: var(--media-meta-margin, 0);
}:where(.media-actions) {
  margin-inline-start: var(--media-actions-margin-start, auto);
  display: var(--media-actions-display, flex);
  align-items: var(--media-actions-align-items, center);
  gap: var(--media-actions-gap, 0.5rem);
  flex-shrink: var(--media-actions-flex-shrink, 0);
}/* Modificateurs d'echelle et de densite */:where(.media-sm, .media.media-sm, .media-compact, .media.media-compact) {
  --media-figure-size: 2rem;
  --media-gap: 0.5rem;
  --media-title-font-size: 0.875rem;
  --media-meta-font-size: 0.75rem;
}:where(.media-lg, .media.media-lg) {
  --media-figure-size: 3.5rem;
  --media-gap: 1rem;
  --media-title-font-size: 1.2rem;
  --media-meta-font-size: 0.875rem;
}html.has-modal-open {
  overflow-y: hidden;
}/*
  Modal Component CSS Variables (override globally as needed):
  --modal-bg (defaults to --clr-light)
  --modal-bg-dark (defaults to --clr-dark)
  --modal-text-color
  --modal-width
  --modal-height
  --modal-min-height
  --modal-max-width
  --modal-max-height
  --modal-margin-inline
  --modal-margin-block
  --modal-padding
  --modal-border
  --modal-border-width
  --modal-border-style
  --modal-border-color
  --modal-border-clr
  --modal-border-radius
  --modal-box-shadow
  --modal-transition
  --modal-backdrop-bg
  --modal-backdrop-filter
  --modal-position
  --modal-z-index
  --modal-top
  --modal-right
  --modal-bottom
  --modal-left
  --modal-overflow
  --modal-container-overflow
  --modal-dialog-overflow
  --modal-dialog-top
  --modal-outline
  --modal-justify-content
  --modal-align-items
  --modal-display
  --modal-show-display
  --modal-dialog-display
  --modal-dialog-flex-direction
  --modal-dialog-position
  --modal-full-width-z-index
  --modal-full-width-width
  --modal-full-width-height
  --modal-content-position
  --modal-content-display
  --modal-content-flex-direction
  --modal-content-flex
  --modal-content-height
  --modal-content-min-height
  --modal-header-position
  --modal-header-z-index
  --modal-header-top
  --modal-header-bg
  --modal-header-shadow
  --modal-header-border
  --modal-header-border-bottom
  --modal-header-display
  --modal-header-align-items
  --modal-header-justify-content
  --modal-header-gap
  --modal-header-color
  --modal-header-btns-margin-left
  --modal-header-btns-gap
  --modal-header-btns-display
  --modal-close-bg
  --modal-close-color
  --modal-close-font-size
  --modal-close-border
  --modal-close-border-radius
  --modal-close-padding
  --modal-close-cursor
  --modal-close-display
  --modal-close-align-items
  --modal-close-justify-content
  --modal-close-width
  --modal-close-height
  --modal-close-margin-left
  --modal-close-position
  --modal-close-top
  --modal-close-right
  --modal-close-transition
  --modal-body-bg
  --modal-body-overflow-y
  --modal-body-z-index
  --modal-body-flex
  --modal-body-min-height
  --modal-footer-position
  --modal-footer-z-index
  --modal-footer-bottom
  --modal-footer-bg
  --modal-footer-border
  --modal-footer-border-top

  By default, --modal-bg uses --clr-light and --modal-bg-dark uses --clr-dark. You can override these for advanced customization.
*/.modal {
  position: var(--modal-position, fixed);
  z-index: var(--modal-z-index, 1500);
  top: var(--modal-top, 0);
  right: var(--modal-right, 0);
  bottom: var(--modal-bottom, 0);
  left: var(--modal-left, 0);
  overflow: var(--modal-container-overflow, var(--modal-overflow, hidden));
  outline: var(--modal-outline, 0);
  background-color: var(--modal-backdrop-bg, transparent);
  backdrop-filter: var(--modal-backdrop-filter, blur(40px));
  -webkit-backdrop-filter: var(--modal-backdrop-filter, blur(40px));
  justify-content: var(--modal-justify-content, center);
  align-items: var(--modal-align-items, flex-start);
  display: var(--modal-display, none);
}.modal.show,
dialog.modal[open],
dialog.modal:modal {
  display: var(--modal-show-display, flex);
}/* Reset User-Agent sur dialog.modal et prise en charge du top layer */:where(dialog.modal) {
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}/* Pseudo-élément d'arrière-plan natif du top layer */:where(dialog.modal::backdrop) {
  background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.6));
  backdrop-filter: var(--modal-backdrop-filter, blur(6px));
  -webkit-backdrop-filter: var(--modal-backdrop-filter, blur(6px));
}/* Prise en charge transparente des formulaires natifs <form method="dialog"> */:where(.modal form.modal-content, dialog.modal form.modal-content) {
  margin: 0;
  width: 100%;
}:where(form.modal-dialog) {
  box-sizing: border-box;
}.modal-dialog {
  position: var(--modal-dialog-position, relative);
  display: var(--modal-dialog-display, block);
  flex-direction: var(--modal-dialog-flex-direction, column);
  width: var(--modal-width, 80vw);
  height: var(--modal-height, auto);
  min-height: var(--modal-min-height, auto);
  overflow: var(--modal-dialog-overflow, auto);
  top: var(--modal-dialog-top, var(--modal-top, 5vh));
  margin-inline: var(--modal-margin-inline, auto);
  margin-block: var(--modal-margin-block, 0);
  max-height: var(--modal-max-height, 90vh);
  max-width: var(--modal-max-width, 90vw);
  background-color: var(--modal-bg, var(--clr-light, #fff));
  border: var(--modal-border, var(--modal-border-width, 0) var(--modal-border-style, solid) var(--modal-border-color, var(--modal-border-clr, transparent)));
  border-radius: var(--modal-border-radius, 0.5rem);
  box-shadow: var(--modal-box-shadow, 0 0 10px rgba(0, 0, 0, 0.1));
  transition: var(--modal-transition, all 0.2s);
  color: var(--modal-text-color, var(--clr-text-default, #222));
}/* Centered dialog modifier (safe flexbox centering without data-loss) */:where(.modal.modal-centered .modal-dialog, .modal-dialog.modal-dialog-centered) {
  --modal-dialog-top: 0;
  --modal-margin-block: auto;
}/* Dialog size modifiers */:where(.modal.modal-sm .modal-dialog, .modal-dialog.modal-dialog-sm) {
  --modal-width: 90%;
  --modal-max-width: 400px;
}:where(.modal.modal-md .modal-dialog, .modal-dialog.modal-dialog-md) {
  --modal-width: 80vw;
  --modal-max-width: 650px;
}:where(.modal.modal-lg .modal-dialog, .modal-dialog.modal-dialog-lg) {
  --modal-width: 85vw;
  --modal-max-width: 850px;
}:where(.modal.modal-xl .modal-dialog, .modal-dialog.modal-dialog-xl) {
  --modal-width: 95%;
  --modal-max-width: 1100px;
  --modal-height: 90vh;
  --modal-max-height: 92vh;
}/* Full-height modifier */:where(.modal.modal-fullheight .modal-dialog, .modal.modal-full-height .modal-dialog,
.modal-dialog.modal-dialog-fullheight, .modal-dialog.modal-dialog-full-height) {
  --modal-height: 90vh;
  --modal-dialog-display: flex;
  --modal-dialog-flex-direction: column;
}:where(.modal-fullheight .modal-content, .modal-full-height .modal-content,
.modal-dialog-fullheight .modal-content, .modal-dialog-full-height .modal-content) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--modal-content-min-height, 0);
  overflow: hidden;
}:where(.modal-fullheight .modal-body, .modal-full-height .modal-body,
.modal-dialog-fullheight .modal-body, .modal-dialog-full-height .modal-body) {
  flex: 1;
  min-height: var(--modal-body-min-height, 0);
  overflow-y: auto;
}.modal.modal-full-width {
  z-index: var(--modal-full-width-z-index, 1600) !important;
}.modal.modal-full-width .modal-dialog {
  width: var(--modal-full-width-width, 100vw) !important;
  height: var(--modal-full-width-height, 100vh) !important;
  margin-block: 0;
  max-width: 100vw;
  max-height: 100vh;
  inset: 0;
}.modal-dialog .modal-content > * {
  padding: var(--modal-padding, 1.5rem);
}.modal-content,
.modal-body {
  position: var(--modal-content-position, relative);
  display: var(--modal-content-display, flex);
  flex-direction: var(--modal-content-flex-direction, column);
  flex: var(--modal-content-flex, 1);
  height: var(--modal-content-height, 100%);
  min-height: var(--modal-content-min-height, 0);
}.modal-header {
  position: var(--modal-header-position, sticky);
  z-index: var(--modal-header-z-index, 10);
  top: var(--modal-header-top, 0);
  background-color: var(--modal-header-bg, var(--modal-bg, var(--clr-light, #fff)));
  border-bottom: var(--modal-header-border-bottom, var(--modal-header-border, none));
  box-shadow: var(--modal-header-shadow, 2px 2px 10px rgba(0, 0, 0, 0.1));
  display: var(--modal-header-display, flex);
  align-items: var(--modal-header-align-items, center);
  justify-content: var(--modal-header-justify-content, space-between);
  gap: var(--modal-header-gap, var(--size-2, 0.5rem));
  color: var(--modal-header-color, var(--clr-text-default, #222));
}.modal-header-btns {
  margin-left: var(--modal-header-btns-margin-left, auto);
  gap: var(--modal-header-btns-gap, 1rem);
  display: var(--modal-header-btns-display, flex);
}:where(.modal-close, .modal .close) {
  background-color: var(--modal-close-bg, transparent);
  color: var(--modal-close-color, var(--clr-text-default, #222));
  font-size: var(--modal-close-font-size, var(--font-size-7, 1rem));
  border: var(--modal-close-border, none);
  border-radius: var(--modal-close-border-radius, 0);
  padding: var(--modal-close-padding, 0);
  cursor: var(--modal-close-cursor, pointer);
  display: var(--modal-close-display, inline-flex);
  align-items: var(--modal-close-align-items, center);
  justify-content: var(--modal-close-justify-content, center);
  width: var(--modal-close-width, auto);
  height: var(--modal-close-height, auto);
  margin-left: var(--modal-close-margin-left, 0);
  position: var(--modal-close-position, static);
  top: var(--modal-close-top, auto);
  right: var(--modal-close-right, auto);
  transition: var(--modal-close-transition, color 0.15s ease, opacity 0.15s ease);
}.modal-body {
  background-color: var(--modal-body-bg, transparent);
  overflow-y: var(--modal-body-overflow-y, auto);
  z-index: var(--modal-body-z-index, 1);
  flex: var(--modal-body-flex, 1);
  min-height: var(--modal-body-min-height, 0);
}.modal-footer {
  position: var(--modal-footer-position, sticky);
  z-index: var(--modal-footer-z-index, 10);
  bottom: var(--modal-footer-bottom, 0);
  background-color: var(--modal-footer-bg, var(--modal-bg, var(--clr-light, #fff)));
  border-top: var(--modal-footer-border-top, var(--modal-footer-border, none));
}/*
  Nav Component CSS Variables (override globally as needed):
  --header-bg (defaults to --clr-light)
  --header-bg-dark (defaults to --clr-dark)
  --header-nav-bg
  --nav-display
  --nav-bg
  --nav-padding
  --nav-gap
  --nav-margin-block
  --nav-list-style
  --nav-padding-inline-start
  --nav-a-color
  --nav-a-display
  --nav-a-padding
  --nav-a-text-decoration
  --nav-a-text-underline-offset
  --nav-a-text-decoration-thickness
  --nav-a-text-decoration-color
  --nav-a-disabled-cursor
  --nav-a-disabled-opacity
  --nav-a-active-color
  --nav-a-active-text-decoration
  --nav-a-active-text-underline-offset
  --nav-a-active-text-decoration-thickness
  --nav-a-active-text-decoration-color
  --nav-a-submenu-icon
  --nav-a-submenu-icon-width
  --nav-a-submenu-icon-height
  --nav-submenu-bg
  --nav-submenu-shadow
  --nav-submenu-width
  --nav-submenu-min-width
  --nav-submenu-transition
  --nav-submenu-position
  --nav-submenu-z-index
  --nav-submenu-overflow
  --nav-submenu-padding-block
  --nav-submenu-hidden-display
  --nav-submenu-hidden-transform
  --nav-submenu-hidden-opacity
  --nav-submenu-hidden-height
  --nav-submenu-hidden-margin
  --nav-submenu-hidden-transition-property
  --nav-submenu-hidden-transition-duration
  --nav-submenu-hidden-transition-timing-function
  --nav-submenu-hidden-transition-behavior
  --nav-submenu-hover-display
  --nav-submenu-show-display
  --nav-submenu-show-opacity
  --nav-submenu-show-transform
  --nav-submenu-show-height
  --nav-submenu-show-max-height
  --nav-flex-direction
  --nav-direction
  --nav-justify-content
  --nav-align-items
  --nav-width
  --nav-gap-vertical
  --nav-link-display
  --nav-link-align-items
  --nav-link-justify-content
  --nav-link-gap
  --nav-link-padding
  --nav-link-radius
  --nav-link-color
  --nav-link-bg
  --nav-link-border
  --nav-link-text-decoration
  --nav-link-font-weight
  --nav-link-font-size
  --nav-link-cursor
  --nav-link-transition
  --nav-link-color-hover
  --nav-link-bg-hover
  --nav-link-color-active
  --nav-link-bg-active
  --nav-link-font-weight-active
  --nav-link-indicator-display
  --nav-link-indicator-inset-top
  --nav-link-indicator-inset-bottom
  --nav-link-indicator-width
  --nav-link-indicator-color
  --nav-submenu-gap
  --nav-submenu-padding-left
  --nav-submenu-margin-left
  --nav-submenu-border-width
  --nav-submenu-border-clr
  --nav-subitem-gap
  --nav-subitem-padding
  --nav-subitem-radius
  --nav-subitem-color
  --nav-subitem-font-size
  --nav-subitem-bg
  --nav-subitem-transition
  --nav-subitem-color-hover
  --nav-subitem-bg-hover
  --nav-subitem-color-active
  --nav-subitem-bg-active

  By default, --header-bg uses --clr-light and --header-bg-dark uses --clr-dark. You can override these for advanced customization.
*/.nav-container {
  background-color: var(--header-nav-bg, var(--header-bg, transparent));
}/* Vertical navigation / Sidebar navigation modifier */:where(.nav-vertical, .nav.nav-vertical, .sidebar .nav) {
  --nav-flex-direction: column;
  --nav-gap: var(--nav-gap-vertical, var(--size-1, 0.25rem));
}.nav {
  display: var(--nav-display, flex);
  flex-direction: var(--nav-flex-direction, var(--nav-direction, row));
  justify-content: var(--nav-justify-content, normal);
  align-items: var(--nav-align-items, center);
  width: var(--nav-width, auto);
  gap: var(--nav-gap, 0.75rem);
  padding: var(--nav-padding, 0);
  margin-block: var(--nav-margin-block, 0 1rem);
  background-color: var(--nav-bg, transparent);
}.nav > *,
.nav > li > * {
  list-style: var(--nav-list-style, none);
  margin-bottom: 0;
}.nav a {
  color: var(--nav-a-color, var(--nav-link-color, var(--clr-text-default, #222)));
  display: var(--nav-a-display, var(--nav-link-display, block));
  padding: var(--nav-a-padding, var(--nav-link-padding, 0.2rem 0.5rem));
  text-decoration: var(--nav-a-text-decoration, var(--nav-link-text-decoration, underline));
  text-decoration-thickness: var(--nav-a-text-decoration-thickness, 1px);
  text-underline-offset: var(--nav-a-text-underline-offset, 3px);
  text-decoration-color: var(--nav-a-text-decoration-color, currentColor);
}.nav a.disabled {
  cursor: var(--nav-a-disabled-cursor, not-allowed);
  opacity: var(--nav-a-disabled-opacity, 0.5);
}.nav a.active {
  color: var(--nav-a-active-color, var(--nav-link-color-active, var(--clr-primary, #007bff)));
  text-decoration: var(--nav-a-active-text-decoration, var(--nav-link-text-decoration, underline));
  text-decoration-thickness: var(--nav-a-active-text-decoration-thickness, 1px);
  text-underline-offset: var(--nav-a-active-text-underline-offset, var(--text-underline-offset, 3px));
  text-decoration-color: var(--nav-a-active-text-decoration-color, var(--clr-primary, #007bff));
}.nav > *:has(.nav) {
  position: relative;
}.nav > :where(*:has(.nav), .has-submenu) > a {
  display: flex;
  align-items: flex-end;
}.nav > :where(*:has(.nav), .has-submenu) > a::after {
  content: "";
  width: var(--nav-a-submenu-icon-width, 1rem);
  height: var(--nav-a-submenu-icon-height, 1rem);
  background-image: var(--nav-a-submenu-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m5 6l5 5l5-5l2 1l-7 7l-7-7z'/%3E%3C/svg%3E"));
  display: inline-block;
  margin-left: var(--size-2, 0.5rem);
  transition: var(--nav-submenu-transition, all 0.2s);
}.nav > :where(*:has(.nav), .has-submenu) > a:where(:active, :focus)::after {
  rotate: 180deg;
}.nav > :where(*:has(.nav), .has-submenu) .nav {
  display: var(--nav-submenu-hidden-display, none);
  transform: var(--nav-submenu-hidden-transform, translateX(-30%));
  opacity: var(--nav-submenu-hidden-opacity, 0);
  height: var(--nav-submenu-hidden-height, auto);
  margin: var(--nav-submenu-hidden-margin, 0);
  transition-property: var(--nav-submenu-hidden-transition-property, transform, display, opacity);
  transition-duration: var(--nav-submenu-hidden-transition-duration, 0.25s);
  transition-timing-function: var(--nav-submenu-hidden-transition-timing-function, ease-in-out);
  transition-behavior: var(--nav-submenu-hidden-transition-behavior, allow-discrete);
  position: var(--nav-submenu-position, absolute);
  z-index: var(--nav-submenu-z-index, 100);
  overflow: var(--nav-submenu-overflow, hidden);
  padding-block: var(--nav-submenu-padding-block, 0.5rem);
  box-shadow: var(--nav-submenu-shadow, none);
  width: var(--nav-submenu-width, auto);
  min-width: var(--nav-submenu-min-width, 10rem);
  background-color: var(--nav-submenu-bg, var(--nav-bg, #fff));
}.nav > :where(*:has(.nav), .has-submenu) .nav:has(a:hover) {
  display: var(--nav-submenu-hover-display, block);
}.nav > :where(:has(> :active, > :focus), .has-submenu:focus-within) .nav {
  display: var(--nav-submenu-show-display, block);
  opacity: var(--nav-submenu-show-opacity, 1);
  transform: var(--nav-submenu-show-transform, translateX(0));
  height: var(--nav-submenu-show-height, auto);
}@starting-style {
  .nav > :where(:has(> :active, > :focus), .has-submenu:focus-within) .nav {
    transform: var(--nav-submenu-show-transform, translateX(-30%));
    max-height: var(--nav-submenu-show-max-height, 0);
    opacity: var(--nav-submenu-show-opacity, 0);
  }
}/* Rich Nav Links & Buttons (Vertical Nav, Sidebars, Pills, .nav-link) */:where(.nav) :where(.nav-link, button.nav-link, .nav > button:not([class*=btn]), .nav-vertical a:not([class*=btn]), .sidebar .nav a:not([class*=btn])) {
  display: var(--nav-link-display, flex);
  align-items: var(--nav-link-align-items, center);
  justify-content: var(--nav-link-justify-content, space-between);
  gap: var(--nav-link-gap, var(--size-2, 0.5rem));
  padding: var(--nav-link-padding, 0.4rem 0.75rem);
  border-radius: var(--nav-link-radius, 0.375rem);
  color: var(--nav-link-color, var(--clr-text-default, #222));
  background-color: var(--nav-link-bg, transparent);
  border: var(--nav-link-border, none);
  text-decoration: var(--nav-link-text-decoration, none);
  font-weight: var(--nav-link-font-weight, normal);
  font-size: var(--nav-link-font-size, inherit);
  cursor: var(--nav-link-cursor, pointer);
  position: relative;
  transition: var(--nav-link-transition, color 0.15s ease, background-color 0.15s ease);
}:where(.nav) :where(.nav-link, button.nav-link, .nav > button:not([class*=btn]), .nav-vertical a:not([class*=btn]), .sidebar .nav a:not([class*=btn])):hover {
  color: var(--nav-link-color-hover, var(--clr-text-default, #111));
  background-color: var(--nav-link-bg-hover, rgba(0, 0, 0, 0.05));
}:where(.nav) :where(.nav-link, button.nav-link, .nav > button:not([class*=btn]), .nav-vertical a:not([class*=btn]), .sidebar .nav a:not([class*=btn])).active {
  color: var(--nav-link-color-active, var(--clr-primary, #007bff));
  background-color: var(--nav-link-bg-active, rgba(0, 123, 255, 0.1));
  font-weight: var(--nav-link-font-weight-active, 600);
  text-decoration: none;
}:where(.nav) :where(.nav-link, button.nav-link, .nav > button:not([class*=btn]), .nav-vertical a:not([class*=btn]), .sidebar .nav a:not([class*=btn])).active::before {
  content: "";
  display: var(--nav-link-indicator-display, none);
  position: absolute;
  left: 0;
  top: var(--nav-link-indicator-inset-top, 15%);
  bottom: var(--nav-link-indicator-inset-bottom, 15%);
  width: var(--nav-link-indicator-width, 3px);
  background-color: var(--nav-link-indicator-color, var(--clr-primary, #007bff));
  border-radius: 0 4px 4px 0;
}:where(.nav-vertical, .sidebar .nav) :where(.nav-link, a, button.nav-link).active::before {
  --nav-link-indicator-display: block;
}/* Vertical nested tree submenus (in-flow) */:where(.nav-submenu) {
  display: flex;
  flex-direction: column;
  gap: var(--nav-submenu-gap, var(--size-1, 0.25rem));
  padding-left: var(--nav-submenu-padding-left, var(--size-3, 1rem));
  margin-left: var(--nav-submenu-margin-left, var(--size-2, 0.5rem));
  border-left: var(--nav-submenu-border-width, 1px) solid var(--nav-submenu-border-clr, var(--clr-border, var(--clr-light, #eee)));
}:where(.nav-subitem) {
  display: flex;
  align-items: center;
  gap: var(--nav-subitem-gap, var(--size-2, 0.5rem));
  padding: var(--nav-subitem-padding, 0.3rem 0.5rem);
  border-radius: var(--nav-subitem-radius, 0.25rem);
  color: var(--nav-subitem-color, var(--clr-secondary, #6c757d));
  font-size: var(--nav-subitem-font-size, var(--font-size-1, 0.85rem));
  text-decoration: none;
  background-color: var(--nav-subitem-bg, transparent);
  transition: var(--nav-subitem-transition, color 0.15s ease, background-color 0.15s ease);
}:where(.nav-subitem):hover {
  color: var(--nav-subitem-color-hover, var(--clr-text-default, #111));
  background-color: var(--nav-subitem-bg-hover, rgba(0, 0, 0, 0.04));
}:where(.nav-subitem).active {
  color: var(--nav-subitem-color-active, var(--clr-primary, #007bff));
  background-color: var(--nav-subitem-bg-active, rgba(0, 123, 255, 0.08));
  font-weight: 600;
}/*
  Sidebar Component CSS Variables (override globally as needed):
  --sidebar-display
  --sidebar-flex-direction
  --sidebar-justify-content
  --sidebar-align-items
  --sidebar-gap
  --sidebar-bg
  --sidebar-width
  --sidebar-min-width
  --sidebar-max-width
  --sidebar-height
  --sidebar-min-height
  --sidebar-max-height
  --sidebar-overflow-y
  --sidebar-border
  --sidebar-border-right
  --sidebar-border-left
  --sidebar-z-index
  --sidebar-margin
  --sidebar-padding
  --sidebar-transition
  --sidebar-text-display
  --sidebar-position
  --sidebar-top
  --sidebar-align-self
  --sidebar-container-display
  --sidebar-container-flex-direction
  --sidebar-container-flex-direction-md
  --sidebar-container-gap
  --sidebar-container-children-flex

  Density & Scale State Tokens:
  --sidebar-width-sm / --sidebar-width-collapsed
  --sidebar-padding-sm / --sidebar-padding-collapsed
  --sidebar-text-display-collapsed
  --sidebar-nav-link-justify-content
  --sidebar-nav-link-padding
  --sidebar-addon-display
  --sidebar-width-lg / --sidebar-width-expanded
  --sidebar-padding-lg / --sidebar-padding-expanded

  By default, the sidebar layout activates a flex row on screens 1024px+.
*/:where(.has-sidebar, *:has(> .sidebar)) {
  display: var(--sidebar-container-display, flex);
  flex-direction: var(--sidebar-container-flex-direction, column);
  gap: var(--sidebar-container-gap, 1rem);
}:where(.has-sidebar, *:has(> .sidebar)) > * {
  flex: var(--sidebar-container-children-flex, 1);
}:where(.has-sidebar, *:has(> .sidebar)) > .sidebar {
  display: var(--sidebar-display, block);
  flex-direction: var(--sidebar-flex-direction, column);
  justify-content: var(--sidebar-justify-content, normal);
  align-items: var(--sidebar-align-items, stretch);
  gap: var(--sidebar-gap, 0);
  flex: 0 0 var(--sidebar-width, 33%);
  min-width: var(--sidebar-min-width, auto);
  max-width: var(--sidebar-max-width, none);
  height: var(--sidebar-height, auto);
  min-height: var(--sidebar-min-height, auto);
  max-height: var(--sidebar-max-height, none);
  overflow-y: var(--sidebar-overflow-y, visible);
  border: var(--sidebar-border, none);
  border-right: var(--sidebar-border-right, var(--sidebar-border, none));
  border-left: var(--sidebar-border-left, var(--sidebar-border, none));
  z-index: var(--sidebar-z-index, auto);
  margin: var(--sidebar-margin, 0);
  padding: var(--sidebar-padding, 0);
  background-color: var(--sidebar-bg, transparent);
  transition: var(--sidebar-transition, none);
}:where(.sidebar) :where(.sidebar-text, .nav-text, .sidebar-label) {
  display: var(--sidebar-text-display, inline);
}/* Sidebar Scale & Density Modifiers (Collapsed / Icon-rail) */:where(.sidebar-sm, .sidebar.sidebar-sm,
.sidebar-collapsed, .sidebar.sidebar-collapsed,
.sidebar-compact, .sidebar.sidebar-compact,
.has-sidebar.sidebar-sm, .has-sidebar.sidebar-collapsed, .has-sidebar.sidebar-compact,
.has-sidebar-sm, .has-sidebar-collapsed) {
  --sidebar-width: var(--sidebar-width-sm, var(--sidebar-width-collapsed, 4.5rem));
  --sidebar-padding: var(--sidebar-padding-sm, var(--sidebar-padding-collapsed, var(--sidebar-padding, 0)));
  --sidebar-text-display: var(--sidebar-text-display-collapsed, none);
  --nav-link-justify-content: var(--sidebar-nav-link-justify-content, center);
  --nav-link-padding: var(--sidebar-nav-link-padding, 0.6rem 0.5rem);
}:where(.sidebar-sm, .sidebar.sidebar-sm,
.sidebar-collapsed, .sidebar.sidebar-collapsed,
.sidebar-compact, .sidebar.sidebar-compact,
.has-sidebar.sidebar-sm, .has-sidebar.sidebar-collapsed, .has-sidebar.sidebar-compact,
.has-sidebar-sm, .has-sidebar-collapsed) :where(.nav-link, a) > :where(span:not([class*=icon]):not([class*=badge])) {
  display: var(--sidebar-text-display, none);
}:where(.sidebar-sm, .sidebar.sidebar-sm,
.sidebar-collapsed, .sidebar.sidebar-collapsed,
.sidebar-compact, .sidebar.sidebar-compact,
.has-sidebar.sidebar-sm, .has-sidebar.sidebar-collapsed, .has-sidebar.sidebar-compact,
.has-sidebar-sm, .has-sidebar-collapsed) :where(.badge, .nav-submenu) {
  display: var(--sidebar-addon-display, none);
}/* Sidebar Scale Modifiers (Expanded / Wide) */:where(.sidebar-lg, .sidebar.sidebar-lg,
.sidebar-expanded, .sidebar.sidebar-expanded,
.sidebar-wide, .sidebar.sidebar-wide,
.has-sidebar.sidebar-lg, .has-sidebar.sidebar-expanded, .has-sidebar.sidebar-wide,
.has-sidebar-lg, .has-sidebar-expanded) {
  --sidebar-width: var(--sidebar-width-lg, var(--sidebar-width-expanded, 50%));
  --sidebar-padding: var(--sidebar-padding-lg, var(--sidebar-padding-expanded, var(--sidebar-padding, 0)));
}@media (min-width: 1024px) {
  :where(.has-sidebar, *:has(> .sidebar)) {
    flex-direction: var(--sidebar-container-flex-direction-md, row);
  }
  :where(.has-sidebar, *:has(> .sidebar)) > .sidebar {
    position: var(--sidebar-position, sticky);
    align-self: var(--sidebar-align-self, flex-start);
    top: var(--sidebar-top, 3rem);
  }
}html {
  scrollbar-color: var(--scrollbar-thumb-bg, #444) var(--scrollbar-bg, #ccc);
  scrollbar-width: var(--scrollbar-width, thin);
}/* width */::-webkit-scrollbar {
  width: var(--scrollbar-width, 0.5rem);
  height: var(--scrollbar-width, 0.5rem);
}/* button */::-webkit-scrollbar-button {
  display: none;
}/* Handle */::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg, #444);
  border-radius: var(--scrollbar-radius, 5px);
}/* Handle on hover */::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg, #222);
}/* Track */::-webkit-scrollbar-track {
  background: var(--scrollbar-bg, #ccc);
  border-radius: var(--scrollbar-radius, 5px);
}/* The track NOT covered by the handle. */::-webkit-scrollbar-track-piece {
  background: var(--scrollbar-track-piece-bg, #000);
}/* Corner */::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner-bg, #999);
}/* Resizer */::-webkit-resizer {
  background: var(--scrollbar-resizer-bg, #111);
}/*
  Table Component CSS Variables (override globally as needed):
  --table-bg (defaults to --clr-light)
  --table-bg-dark (defaults to --clr-dark)
  --table-position
  --table-margin-block
  --table-text-color
  --table-layout
  --table-width
  --table-border-collapse
  --table-padding
  --table-cell-bg
  --table-cell-color
  --table-cell-border-width
  --table-cell-border-clr
  --table-cell-border-radius
  --table-cell-text-align
  --table-head-bg
  --table-head-color
  --table-foot-bg
  --table-foot-color
  --table-stripe-bg
  --table-cell-border-width-stripes
  --table-cell-border-clr-stripes
  --table-thead-position
  --table-thead-top

  By default, --table-bg uses --clr-light and --table-bg-dark uses --clr-dark. You can override these for advanced customization.
*/table {
  position: var(--table-position, relative);
  table-layout: var(--table-layout, fixed);
  width: var(--table-width, 100%);
  border-collapse: var(--table-border-collapse, collapse);
  background-color: var(--table-bg, transparent);
  margin-block: var(--table-margin-block, var(--size-2));
  color: var(--table-text-color, var(--clr-text-default, #000));
}table thead :where(tr) :where(td, th) {
  background-color: var(--table-head-bg, transparent);
  color: var(--table-head-color, var(--clr-text-default, #000));
}table tfoot :where(tr) :where(td, th) {
  background-color: var(--table-foot-bg, transparent);
  color: var(--table-foot-color, var(--clr-text-default, #000));
}table :where(tr) {
  border: var(--table-cell-border-width, 1px) solid var(--table-cell-border-clr, #111);
}table :where(td, th) {
  padding: var(--table-padding, var(--size-3, 1rem) var(--size-3, 1rem));
  background-color: var(--table-cell-bg, transparent);
  text-align: var(--table-cell-text-align, left);
  border: var(--table-cell-border-width, 1px) solid var(--table-cell-border-clr, #111);
  border-radius: var(--table-cell-border-radius, 0);
  color: var(--table-cell-color, var(--clr-text-default, #000));
}table.table-stripes :where(td, th) {
  --table-cell-border-width: var(--table-cell-border-width-stripes, 0);
  --table-cell-border-clr: var(--table-cell-border-clr-stripes, none);
}table.table-stripes tbody tr:nth-child(odd) {
  background-color: var(--table-stripe-bg, rgba(0, 0, 0, 0.05));
}thead {
  position: var(--table-thead-position, static);
  top: var(--table-thead-top, 0);
}/*
  Toolbar / App-Bar Component CSS Variables (override globally as needed):
  --toolbar-display
  --toolbar-align-items
  --toolbar-justify-content
  --toolbar-flex-wrap
  --toolbar-gap
  --toolbar-padding
  --toolbar-bg
  --toolbar-color
  --toolbar-border-width
  --toolbar-border-clr
  --toolbar-radius
  --toolbar-shadow
  --toolbar-min-height
  --toolbar-transition
  --toolbar-group-gap
  --toolbar-group-flex-wrap
  --toolbar-bg-translucent
  --toolbar-backdrop-filter
  --toolbar-sticky-top
  --toolbar-z-index
  --toolbar-floating-radius
  --toolbar-floating-shadow
  --toolbar-floating-border-clr
  --toolbar-min-height-compact
  --toolbar-padding-compact
  --toolbar-gap-compact
  --toolbar-bottom-position
  --toolbar-padding-bottom
*/:where(.toolbar, .app-bar) {
  display: var(--toolbar-display, flex);
  align-items: var(--toolbar-align-items, center);
  justify-content: var(--toolbar-justify-content, space-between);
  flex-wrap: var(--toolbar-flex-wrap, wrap);
  gap: var(--toolbar-gap, var(--size-3, 1rem));
  padding: var(--toolbar-padding, var(--size-2, 0.5rem) var(--size-3, 1rem));
  background-color: var(--toolbar-bg, var(--clr-light, #fff));
  color: var(--toolbar-color, var(--clr-text-default, var(--clr-dark, #222)));
  border: var(--toolbar-border-width, 1px) solid var(--toolbar-border-clr, transparent);
  border-radius: var(--toolbar-radius, 0);
  box-shadow: var(--toolbar-shadow, none);
  min-height: var(--toolbar-min-height, 3.25rem);
  transition: var(--toolbar-transition, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease);
}/* Alignment zones / sub-groups (direct children or within .container) */:where(.toolbar, .app-bar) :where(.toolbar-start, .toolbar-center, .toolbar-end, .toolbar-actions) {
  display: flex;
  align-items: center;
  gap: var(--toolbar-group-gap, var(--size-2, 0.5rem));
  flex-wrap: var(--toolbar-group-flex-wrap, wrap);
}:where(.toolbar, .app-bar) :where(.toolbar-center) {
  justify-content: center;
  flex: 1;
}/* Container support (contained layout within full-width toolbar) */:where(.toolbar, .app-bar) > :where(.container) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--toolbar-gap, var(--size-3, 1rem));
}:where(.toolbar, .app-bar):has(> :where(.container)) {
  padding-inline: 0;
}/* Modifiers *//* Translucent / Glass */:where(.toolbar-translucent, .app-bar-translucent, .toolbar-glass, .app-bar-glass) {
  --toolbar-bg: var(--toolbar-bg-translucent, rgba(255, 255, 255, 0.82));
  backdrop-filter: var(--toolbar-backdrop-filter, blur(12px));
  -webkit-backdrop-filter: var(--toolbar-backdrop-filter, blur(12px));
}/* Sticky */:where(.toolbar-sticky, .app-bar-sticky) {
  position: sticky;
  top: var(--toolbar-sticky-top, 0);
  z-index: var(--toolbar-z-index, 100);
}/* Floating / Detached */:where(.toolbar-floating, .app-bar-floating) {
  --toolbar-radius: var(--toolbar-floating-radius, 9999px);
  --toolbar-shadow: var(--toolbar-floating-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
  --toolbar-border-clr: var(--toolbar-floating-border-clr, var(--clr-border, rgba(0, 0, 0, 0.08)));
  margin-inline: auto;
  width: fit-content;
  max-width: 95vw;
}/* Compact / Density */:where(.toolbar-compact, .app-bar-compact, .toolbar-sm, .app-bar-sm) {
  --toolbar-min-height: var(--toolbar-min-height-compact, 2.5rem);
  --toolbar-padding: var(--toolbar-padding-compact, var(--size-1, 0.25rem) var(--size-2, 0.5rem));
  --toolbar-gap: var(--toolbar-gap-compact, var(--size-2, 0.5rem));
}/* Bottom Anchored / Mobile Navigation */:where(.toolbar-bottom, .app-bar-bottom) {
  position: var(--toolbar-bottom-position, fixed);
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  border-top: var(--toolbar-border-width, 1px) solid var(--toolbar-border-clr, transparent);
  border-bottom: none;
  z-index: var(--toolbar-z-index, 100);
  padding-bottom: calc(var(--toolbar-padding-bottom, var(--size-2, 0.5rem)) + env(safe-area-inset-bottom, 0px));
}:root {
  /* Size scale */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1rem;
  --size-4: 1.5rem;
  --size-5: 2rem;
  --size-6: 2.5rem;
  --size-7: 3rem;
  --size-8: 3.5rem;
  --size-10: 4rem;
  /* Core color tokens */
  --clr-primary: #007bff;
  --clr-secondary: #919ea9;
  --clr-success: #28a745;
  --clr-info: #17a2b8;
  --clr-warning: #ffc107;
  --clr-danger: #dc3545;
  --clr-light: #e3e3e3;
  --clr-dark: #222;
  --clr-link: #007bff;
  --clr-disabled: #adb5bd;
  --radius-round: 50%;
  --gray-1: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #6c757d;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  /* Fonts */
  --default-font: system-ui;
  --headings-font: var(--default-font);
  --headings-color: var(--clr-primary);
  --headings-weight: bold;
  --font-size-1: .85rem;
  --font-size-2: 1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-10: 4rem;
  /* Text */
}/* 
import "open-props/open-props.min.css";
import "open-props/normalize.light.min.css";
import "open-props/colors-hsl.min.css";
*//* Layout *//* UI components *//* @import 'themes/default.css'; */