/**
 * Codebase v6.0
 */

:root {
  
  /*
   * t = text; tc = text color
   * b = border; bc = border color
   * bg = backgrpund; bgc = background color
   * a-deco = link anchor text-decoration
   * btn = button
   * ff = font-family
   * fw = font-width
   * lh = line-height
   * hd = heading
   * s = spacing
   * m = margin
   * p = padding
   * w = width
   * h = height
   * x = x-axis (inline axis)
   * y = y-axis (block axis)
   * xxs, xs, sm, md, lg, xl, xxl = "Teeshirt" sizes, used in
   * font sizes, button & form element sizes, and media queries
   * for layout and decoration 
   */
  
  /* Typography */
  --t-sans: ui-sans-serif, sans-serif;
  --t-serif: ui-serif, serif;
  --t-mono: ui-monospace, monospace;
  --t-base: var(--t-sans);
  --t-prose: var(--t-serif);
  --t-mb: 1rem; /* margin-bottom */
  --t-lh: 1.5; /* line-height*/
  --t-sm: 0.875em; /* 14px */
  --t-md: 100%; /* 16px */
  --t-lg: 1.375em; /* 22px */
  --t-long-read: clamp(1em, 0.75em + 0.7813vw, 1.25em); /* 16px > 20px */
  --t-comfort: clamp(1em, 0.5833rem + 1.3021vw, 1.625em);
  --t-display: clamp(1em, 0.3333em + 2.0833vw, 2em);
  --t-thin: 200;
  --t-normal: 400;
  --t-semibold: 600;
  --t-bold: 700;
  --t-heavy: 900;
  --t-btn: 400;
  
  /* Headings */
  --h1: 2.5em;
  --h2: 1.875em;
  --h3: 1.5em;
  --h4: 1.25em;
  --h5: 1.125em;
  --h6: 1em;
  --hd-fw: var(--t-semibold);
  --hd-lh: calc(1em + .5rem); /* gives .5rem more than the heading’s own size */
  --hd-m-block: 2rem 1rem;

  /* Links (decoration) */
  --a-deco-offset: 0.3em;
  --a-deco-thickness: 1px;
  --a-deco-thickness-hover: 2px;
  
  /* Forms */
  --b-form: 1px solid var(--bc-form);
  --y-form-sm: 1.75rem;
  --y-form: 2.5rem;
  --y-form-lg: 3.25rem;

  
  /* Container and width dimensions */
  --w-xxs: 256px;
  --w-xs: 512px;
  --w-sm: 768px;
  --w-md: 1024px;
  --w-lg: 1280px;
  --w-xl: 1536px;
  --w-xxl: 1792px;
  
  /* Spacing (margin, padding, gap, border-radius) */
  --s: 0.25rem; /* for the designer to optionally add to buttons and form elements */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: clamp(1.5rem, 1rem + 1.5625vw, 2rem);
  --s-4: clamp(2.5rem, 2rem + 1.5625vw, 3rem);
  --pill: 99rem;
  --p-cell: 0.5rem 1rem; /* e.g. table cells */
  
  /* Borders */
  --b-thin: 1px solid var(--bc-detail);
  --b-thick: 4px solid var(--bc-detail);
  --b-heavy: 8px solid var(--bc-detail);

  /* Squares (and icon) */
  --icon: 1.5rem; /* and square-xs */
  --sq-sm: 3rem;
  --sq: 4.5rem;
  --sq-lg: 6rem;
  --sq-xl: 7.5rem;

  /* Colors */
  --blue: #1262ed;
  --green: #128a12;
  --amber: #e6de00;
  --red: #cf000f;
  --purple: #9400d3;
  --teal: #0080A2;
  --gray: #767676;

  /* UI alias colors*/
  --info: var(--blue);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  
  /* Lightness levels */
  --l50: white 95%;
  --l100: white 84%;
  --l150: white 74%;
  --l200: white 63%;
  --l250: white 53%;
  --l300: white 42%;
  --l350: white 32%;
  --l400: white 21%;
  --l450: white 11%;
  --l500: black 0%;
  --l550: black 8%;
  --l600: black 17%;
  --l650: black 26%;
  --l700: black 34%;
  --l750: black 42%;
  --l800: black 51%;
  --l850: black 60%;
  --l900: black 68%;
  --l950: black 76%;
  --l1000: black 85%;

  /* Base theme */
  --bgc-body: white;
  --tc-base: color-mix(in oklch, var(--gray), var(--l900));
  --tc-link: color-mix(in oklch, var(--blue), var(--l500));
  --tc-link-hover: color-mix(in oklch, var(--blue), var(--l600));
  --bgc-ui: color-mix(in oklch, var(--gray), var(--l100));
  --b-form: var(--b-thin);
  --tc-form: var(--tc-base);
  --bgc-form: var(--bgc-body);
  --b-btn: var(--b-thin);
  --tc-btn: inherit;
  --tc-btn-hover: inherit;
  --bgc-btn: transparent;
  --bgc-btn-hover: var(--bgc-ui);
  --b-code: var(--b-thin)
  --tc-code: inherit;
  --bgc-code: color-mix(in oklch, var(--gray), var(--l100));
  --bc-detail: rgba(0, 0, 0, 0.15);

  /* Glassmorphic backgrounds */
  --alpha-1: 0.1;
  --alpha-2: 0.25;
  --alpha-3: 0.4;
  --alpha-4: 0.55;
  --alpha-5: 0.7;
  --glass-1: saturate(1.8) blur(1px);
  --glass-2: saturate(1.8) blur(4px);
  --glass-3: saturate(1.8) blur(8px);
  --glass-4: saturate(1.8) blur(13px);
  --glass-5: saturate(1.8) blur(19px);
}

/* Basics */
/**
 * CSS Reset -- based on:
 * ======================
 * https://www.joshwcomeau.com/css/custom-css-reset/
 * https://andy-bell.co.uk/a-more-modern-css-reset/
 * https://vale.rocks/posts/css-reset
 */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  block-size: 100%;
  scrollbar-gutter: stable;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

body {
  min-width: 100%;
  min-height: 100dvh;
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--t-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bgc-body);
}

img,
picture,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

svg {
  max-inline-size: 100%;
}

svg:not([fill]) {
  fill: currentColor;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea {
  resize: vertical;
}

fieldset,
iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

abbr[title] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

:target {
  scroll-margin-block: 5ex;
}

:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

body {
  font-family: var(--t-base);
  font-size: var(--t-md);
  color: var(--tc-base);
  background: var(--bgc-body);
}
:focus-visible {
  outline: 0.125rem solid -webkit-focus-ring-color;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem white;
  z-index: 1;
}

/* Screen-reader only (and appears when tabbing, etc.) */
.sr-only:not(:focus):not(:active),
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
p,
dl,
pre,
table,
fieldset,
figure,
figcaption,
blockquote {
  margin-block: 0 var(--t-mb);
  hanging-punctuation: first allow-end last;
}
caption {
  margin-block: var(--s-2);
}

p {
  text-wrap: pretty;
  font-variant-numeric: proportional-nums;
}

h1 {
  font-family: var(--hd-ff);
  font-weight: var(--hd-fw);
  line-height: var(--hd-lh);
  margin-block: 0 var(--t-mb);
}

h1,
.h1 {
  font-size: var(--h1);
}

h2,
.h2 {
  font-size: var(--h2);
}

h3,
.h3 {
  font-size: var(--h3);
}

h4,
.h4 {
  font-size: var(--h4);
}

h5,
.h5 {
  font-size: var(--h5);
}

h6,
.h6 {
  font-size: var(--h6);
}

h2,
h3,
h4,
h5,
h6 {
  margin-block: var(--hd-m-block);
  font-family: var(--hd-ff);
  font-weight: var(--hd-fw);
  line-height: var(--hd-lh);
  font-variant-numeric: lining-nums;
}

hr {
  width: 100%;
  border: 0;
  border-top: var(--b-thin);
  height: 0;
  margin-block: 2rem;
}

a {
  --tc: var(--tc-link);
  text-decoration: underline;
  color: var(--tc);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration-skip-ink: auto;
  text-underline-offset: var(--a-deco-offset);
  text-decoration-thickness: var(--a-deco-thickness);
  &:hover {
    --tc: var(--tc-link-hover);
  }
}

a:has(.t-underline-none):not(.t-underline-hover-only)
:not(.t-underline-none) {
  text-decoration: underline;
}

a:not(.t-underline-none):hover,
a:has(.t-underline-none):hover :not(.t-underline-none) {
  text-decoration: underline;
  text-decoration-thickness: var(--a-deco-thickness-hover);
}

a:has(.t-underline-none),
a:has(.t-underline-none):hover {
  text-decoration: none;
}

.t-underline-none,
.t-underline-hover-only,
.links-underline-none a,
.links-underline-none a:hover,
.links-underline-hover-only a {
  text-decoration: none;
}

ol,
ul,
menu {
  margin-block: 0 var(--t-mb);
  padding-left: 1.5em;
}

ol ol, ol ul, ul ol, ul ul {
  margin-block: 0
}

ol ol {
  list-style-type: lower-alpha;
  ol {
    list-style-type: lower-roman;
  }
}

dl {
  margin: 0 0 var(--t-mb);
}

dt {
  font-weight: bold;
}

dd {
  margin: var(--t-mb) 0;
  padding-left: 1.5em;
}

.list-style-type-none {
  list-style-type: none;
}

time,
table {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

blockquote {
  margin-inline: 0;
  padding-inline: var(--s-4);
}

blockquote p:last-child {
  margin-bottom: 0;
}

code,
kbd,
samp {
  font-family: var(--t-mono);
  font-style: normal;
  font-weight: normal;
}

code {
  display: inline-block;
  border: var(--b-code);
  padding-inline: 0.25em;
  color: var(--tc-code);
  background: var(--bgc-code);
  font-variant-numeric: slashed-zero;
}

pre {
  font-style: normal;
  font-weight: normal;
  white-space: pre;

  &:not(:has(code)) {
    overflow-x: auto;
  }

  code {
    display: block;
    border-radius: var(--s-1);
    padding: 1em;
    background: var(--bgc-code);
    overflow-x: auto;
    /* So that the :focus-visible ring works, and so that the background color extends into the overflowing area */
  }
}

sub,
sup {
  font-size: 85%;
  line-height: 0;
}

.t-nowrap {
  white-space: nowrap;
}

.t-lg {
  font-size: var(--t-lg);
}

small,
.t-sm {
  font-size: var(--t-sm);
}

.t-thin {
  font-weight: var(--t-thin);
}

.t-normal {
  font-weight: var(--t-normal);
}

.t-semibold {
  font-weight: var(--t-semibold);
}

.t-bold {
  font-weight: var(--t-bold);
}

.t-heavy {
  font-weight: var(--t-heavy);
}

.t-italic {
  font-style: italic;
}

.t-right {
  text-align: right;
}

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

@media (min-width: 512px) {
  .xs\:t-right {
    text-align: right;
  }

  .xs\:t-center {
    text-align: center;
  }

  .xs\:t-left {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .sm\:t-right {
    text-align: right;
  }

  .sm\:t-center {
    text-align: center;
  }

  .sm\:t-left {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .md\:t-right {
    text-align: right;
  }

  .md\:t-center {
    text-align: center;
  }

  .md\:t-left {
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .lg\:t-right {
    text-align: right;
  }

  .lg\:t-center {
    text-align: center;
  }

  .lg\:t-left {
    text-align: left;
  }
}

.t-balance {
  text-wrap: balance;
}

.t-uppercase {
  text-transform: uppercase;
}

mark,
.t-highlight {
  color: currentColor;
  background: var(--bgc-highlight);
}

.t-long-read {
  font-size: var(--t-long-read);
}

.t-comfort {
  font-size: var(--t-comfort);
}

.t-display {
  font-size: var(--t-display);
}

.t-base {
  font-family: var(--t-default);
}

.t-prose {
  font-family: var(--t-prose);
}

/* Tables */

.table {
  width: 100%;
  margin-bottom: var(--t-mb);
  border-collapse: collapse;
  border-spacing: 0;

  &:not(.table-borderless, .table-lined) {
    th,
    td {
      border: var(--b-thin);
    }
  }

  th,
  td {
    padding: var(--p-cell);
    vertical-align: top;
    text-align: unset;
  }
}

.table-lined {
  border-top: var(--b-thin);
  border-bottom: var(--b-thin);
  tbody tr {
    border-top: var(--b-thin);
  }
}
.table-compact {
  th,
  td {
    padding: 0.25rem 0.5rem;
  }
}

.table-fixed {
  table-layout: fixed;
}

.table-striped {
  thead,
  tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
  }

  tbody tr:nth-child(odd) {
    background-color: rgba(29, 28, 31, 0.05);

  }
}

[class*=table] .t-left {
  text-align: left !important;
}

[class*=table] .t-center {
  text-align: center !important;
}

[class*=table] .t-right {
  text-align: right !important;
}

[class*=table] .vertical-align-top {
  vertical-align: top;
}

[class*=table] .vertical-align-middle {
  vertical-align: middle;
}

[class*=table] .vertical-align-bottom {
  vertical-align: bottom;
}
fieldset {
  border: var(--b-thin);
  padding: var(--s-2);
}

label,
legend {
  font-family: var(--t-base);
}

::placeholder {
  color: var(--tc-form);
  opacity: 0.5;
}

input,
select,
textarea {
  min-height: var(--y-form);
  border: var(--b-form);
  border-radius: unset;
  padding: var(--p-cell);
  font-family: var(--t-base);
  font-size: inherit;
  text-align: start;
  color: var(--tc-form);
  background: var(--bgc-form);
}

select:not([multiple]) {
  height: var(--y-form);
}

[type="color"] {
  width: var(--y-form);
  height: var(--y-form);
  padding: 0.25em;
}

[type="checkbox"],
[type="radio"] {
  display: inline-block;
  min-height: unset;
}

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

::file-selector-button {
  border: 0;
  font-size: 1em;
  color: white;
  background: var(--bgc-btn);
}

:disabled:hover,
.disabled:hover {
  cursor: not-allowed;
}

textarea:not([rows]) {
  min-height: 6em;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
.btn {
  --tc: var(--tc-btn);
  --bgc: var(--bgc-btn);
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  min-width: fit-content;
  min-height: var(--y-form);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border: var(--b-btn);
  padding: 0 calc(var(--y-form) / 3);
  font-family: var(--t-base);
  font-size: inherit;
  font-weight: var(--t-btn);
  text-decoration: none;
  color: var(--tc);
  background: var(--bgc);
  transition: all 0.15s ease;

  &:hover {
    --tc: var(--tc-btn-hover);
    --bgc: var(--bgc-btn-hover);
    text-decoration: none !important;
    cursor: pointer;
  }
}

.btn-sm,
.elem-sm {
  min-height: var(--y-form-sm);
  padding: 0 calc(var(--y-form-sm) / 2);
}

.btn-lg,
.elem-lg {
  min-height: var(--y-form-lg);
  padding: 0 calc(var(--y-form-lg) / 2);
}

.btn-icon {
  width: var(--y-form);
  height: var(--y-form);
  padding: 0;
  line-height: inherit;
} /* and buttons */

/* Layout */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
  top: 0;
}

.top {
  top: 0;
}

.right {
  right: 0;
}

.bottom {
  bottom: 0;
}

.left {
  left: 0;
}

/* Blocks */

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

/* Flexbox */

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-start {
  justify-content: flex-start;
}

.flex-center {
  justify-content: center;
}

.flex-end {
  justify-content: flex-end;
}

.flex-top {
  align-items: flex-start;
}

.flex-middle {
  align-items: center;
}

.flex-bottom {
  align-items: flex-end;
}

.flex-space-between {
  justify-content: space-between;
}

.flex-grow-equal > * {
  flex: 1;
}

.flex-grow-auto > * {
  flex: auto;
}

.grow {
  flex: 1;
}

/* Gaps  (for flexbox and grid) */

.gap-1 {
  gap: var(--s-1);
}

.gap-2 {
  gap: var(--s-2);
}

.gap-3 {
  gap: var(--s-3);
}

.gap-4 {
  gap: var(--s-4);
}

/* Grid  (2, 3, or 4 columns) */

.grid {
  display: grid;
}
.grid-dense {
  grid-auto-flow: dense;
}

/* Simply specifying columns will enable auto-width columns */

.equal-2-cols {
  grid-template-columns: repeat(2, minmax(1rem, 1fr));
}

.equal-3-cols {
  grid-template-columns: repeat(3, minmax(1rem, 1fr));
}

.equal-4-cols {
  grid-template-columns: repeat(4, minmax(1rem, 1fr));
}

.col-1 {
  grid-column: 1
}

.cols-1-2 {
  grid-column: 1 / span 2
}

.cols-1-3 {
  grid-column: 1 / span 3
}

.cols-1-4 {
  grid-column: 1 / span 4
}

.col-2 {
  grid-column: 2
}

.cols-2-3 {
  grid-column: 2 / span 2
}

.cols-2-4 {
  grid-column: 2 / span 3
}

.col-3 {
  grid-column: 3
}

.cols-3-4 {
  grid-column: 3 / span 2
}

.col-4 {
  grid-column: 4
}

.row-1 {
  grid-row: 1
}

.rows-1-2 {
  grid-row: 1 / span 2
}

.rows-1-3 {
  grid-row: 1 / span 3
}

.rows-1-4 {
  grid-row: 1 / span 4
}

.row-2 {
  grid-row: 2
}

.rows-2-3 {
  grid-row: 2 / span 2
}

.rows-2-4 {
  grid-row: 2 / span 3
}

.row-3 {
  grid-row: 3
}

.rows-3-4 {
  grid-row: 3 / span 2
}

.row-4 {
  grid-row: 4
}
@media (min-width: 512px) {
  .xs\:relative {
    position: relative;
  }

  .xs\:absolute {
    position: absolute;
  }

  .xs\:fixed {
    position: fixed;
  }

  .xs\:static {
    position: static;
  }

  .xs\:sticky {
    position: sticky;
    top: 0;
  }

  .xs\:top {
    top: 0;
  }

  .xs\:right {
    right: 0;
  }

  .xs\:bottom {
    bottom: 0;
  }

  .xs\:left {
    left: 0;
  }

  /* Blocks */

  .xs\:block {
    display: block;
  }

  .xs\:inline-block {
    display: inline-block;
  }

  .xs\:inline-flex {
    display: inline-flex;
  }

  /* Flexbox */

  .xs\:flex {
    display: flex;
  }

  .xs\:flex-wrap {
    flex-wrap: wrap;
  }

  .xs\:flex-column {
    flex-direction: column;
  }
  
  .xs\:flex-row {
    flex-direction: row;
  }

  .xs\:flex-start {
    justify-content: flex-start;
  }

  .xs\:flex-center {
    justify-content: center;
  }

  .xs\:flex-end {
    justify-content: flex-end;
  }

  .xs\:flex-top {
    align-items: flex-start;
  }

  .xs\:flex-middle {
    align-items: center;
  }

  .xs\:flex-bottom {
    align-items: flex-end;
  }

  .xs\:flex-space-between {
    justify-content: space-between;
  }

  .xs\:flex-grow-equal > * {
    flex: 1;
  }

  .xs\:flex-grow-auto > * {
    flex: auto;
  }

  .xs\:grow {
    flex: 1;
  }

  /* Grid  (2, 3, or 4 columns) */

  .xs\:grid {
    display: grid;
  }
  .xs\:grid-dense {
    grid-auto-flow: dense;
  }

  /* Simply specifying columns will enable auto-width columns */

  .xs\:equal-2-cols {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }

  .xs\:equal-3-cols {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }

  .xs\:equal-4-cols {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }

  .xs\:col-1 {
    grid-column: 1
  }

  .xs\:cols-1-2 {
    grid-column: 1 / span 2
  }

  .xs\:cols-1-3 {
    grid-column: 1 / span 3
  }

  .xs\:cols-1-4 {
    grid-column: 1 / span 4
  }

  .xs\:col-2 {
    grid-column: 2
  }

  .xs\:cols-2-3 {
    grid-column: 2 / span 2
  }

  .xs\:cols-2-4 {
    grid-column: 2 / span 3
  }

  .xs\:col-3 {
    grid-column: 3
  }

  .xs\:cols-3-4 {
    grid-column: 3 / span 2
  }

  .xs\:col-4 {
    grid-column: 4
  }

  .xs\:row-1 {
    grid-row: 1
  }

  .xs\:rows-1-2 {
    grid-row: 1 / span 2
  }

  .xs\:rows-1-3 {
    grid-row: 1 / span 3
  }

  .xs\:rows-1-4 {
    grid-row: 1 / span 4
  }

  .xs\:row-2 {
    grid-row: 2
  }

  .xs\:rows-2-3 {
    grid-row: 2 / span 2
  }

  .xs\:rows-2-4 {
    grid-row: 2 / span 3
  }

  .xs\:row-3 {
    grid-row: 3
  }

  .xs\:rows-3-4 {
    grid-row: 3 / span 2
  }

  .xs\:row-4 {
    grid-row: 4
  }} /* 512px */
@media (min-width: 768px) {
  .sm\:relative {
    position: relative;
  }

  .sm\:absolute {
    position: absolute;
  }

  .sm\:fixed {
    position: fixed;
  }

  .sm\:static {
    position: static;
  }

  .sm\:sticky {
    position: sticky;
    top: 0;
  }

  .sm\:top {
    top: 0;
  }

  .sm\:right {
    right: 0;
  }

  .sm\:bottom {
    bottom: 0;
  }

  .sm\:left {
    left: 0;
  }

  /* Blocks */

  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  /* Flexbox */

  .sm\:flex {
    display: flex;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:flex-column {
    flex-direction: column;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-start {
    justify-content: flex-start;
  }

  .sm\:flex-center {
    justify-content: center;
  }

  .sm\:flex-end {
    justify-content: flex-end;
  }

  .sm\:flex-top {
    align-items: flex-start;
  }

  .sm\:flex-middle {
    align-items: center;
  }

  .sm\:flex-bottom {
    align-items: flex-end;
  }

  .sm\:flex-space-between {
    justify-content: space-between;
  }

  .sm\:flex-grow-equal > * {
    flex: 1;
  }

  .sm\:flex-grow-auto > * {
    flex: auto;
  }

  .sm\:grow {
    flex: 1;
  }

  /* Grid  (2, 3, or 4 columns) */

  .sm\:grid {
    display: grid;
  }
  .sm\:grid-dense {
    grid-auto-flow: dense;
  }

  /* Simply specifying columns will enable auto-width columns */

  .sm\:equal-2-cols {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }

  .sm\:equal-3-cols {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }

  .sm\:equal-4-cols {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }

  .sm\:col-1 {
    grid-column: 1
  }

  .sm\:cols-1-2 {
    grid-column: 1 / span 2
  }

  .sm\:cols-1-3 {
    grid-column: 1 / span 3
  }

  .sm\:cols-1-4 {
    grid-column: 1 / span 4
  }

  .sm\:col-2 {
    grid-column: 2
  }

  .sm\:cols-2-3 {
    grid-column: 2 / span 2
  }

  .sm\:cols-2-4 {
    grid-column: 2 / span 3
  }

  .sm\:col-3 {
    grid-column: 3
  }

  .sm\:cols-3-4 {
    grid-column: 3 / span 2
  }

  .sm\:col-4 {
    grid-column: 4
  }

  .sm\:row-1 {
    grid-row: 1
  }

  .sm\:rows-1-2 {
    grid-row: 1 / span 2
  }

  .sm\:rows-1-3 {
    grid-row: 1 / span 3
  }

  .sm\:rows-1-4 {
    grid-row: 1 / span 4
  }

  .sm\:row-2 {
    grid-row: 2
  }

  .sm\:rows-2-3 {
    grid-row: 2 / span 2
  }

  .sm\:rows-2-4 {
    grid-row: 2 / span 3
  }

  .sm\:row-3 {
    grid-row: 3
  }

  .sm\:rows-3-4 {
    grid-row: 3 / span 2
  }

  .sm\:row-4 {
    grid-row: 4
  }
} /* 768px */
@media (min-width: 1024px) {
  .md\:relative {
    position: relative;
  }

  .md\:absolute {
    position: absolute;
  }

  .md\:fixed {
    position: fixed;
  }

  .md\:static {
    position: static;
  }

  .md\:sticky {
    position: sticky;
    top: 0;
  }

  .md\:top {
    top: 0;
  }

  .md\:right {
    right: 0;
  }

  .md\:bottom {
    bottom: 0;
  }

  .md\:left {
    left: 0;
  }

  /* Blocks */

  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  /* Flexbox */

  .md\:flex {
    display: flex;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:flex-column {
    flex-direction: column;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-start {
    justify-content: flex-start;
  }

  .md\:flex-center {
    justify-content: center;
  }

  .md\:flex-end {
    justify-content: flex-end;
  }

  .md\:flex-top {
    align-items: flex-start;
  }

  .md\:flex-middle {
    align-items: center;
  }

  .md\:flex-bottom {
    align-items: flex-end;
  }

  .md\:flex-space-between {
    justify-content: space-between;
  }

  .md\:flex-grow-equal > * {
    flex: 1;
  }

  .md\:flex-grow-auto > * {
    flex: auto;
  }

  .md\:grow {
    flex: 1;
  }

  /* Grid  (2, 3, or 4 columns) */

  .md\:grid {
    display: grid;
  }
  .md\:grid-dense {
    grid-auto-flow: dense;
  }

  /* Simply specifying columns will enable auto-width columns */

  .md\:equal-2-cols {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }

  .md\:equal-3-cols {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }

  .md\:equal-4-cols {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }

  .md\:col-1 {
    grid-column: 1
  }

  .md\:cols-1-2 {
    grid-column: 1 / span 2
  }

  .md\:cols-1-3 {
    grid-column: 1 / span 3
  }

  .md\:cols-1-4 {
    grid-column: 1 / span 4
  }

  .md\:col-2 {
    grid-column: 2
  }

  .md\:cols-2-3 {
    grid-column: 2 / span 2
  }

  .md\:cols-2-4 {
    grid-column: 2 / span 3
  }

  .md\:col-3 {
    grid-column: 3
  }

  .md\:cols-3-4 {
    grid-column: 3 / span 2
  }

  .md\:col-4 {
    grid-column: 4
  }

  .md\:row-1 {
    grid-row: 1
  }

  .md\:rows-1-2 {
    grid-row: 1 / span 2
  }

  .md\:rows-1-3 {
    grid-row: 1 / span 3
  }

  .md\:rows-1-4 {
    grid-row: 1 / span 4
  }

  .md\:row-2 {
    grid-row: 2
  }

  .md\:rows-2-3 {
    grid-row: 2 / span 2
  }

  .md\:rows-2-4 {
    grid-row: 2 / span 3
  }

  .md\:row-3 {
    grid-row: 3
  }

  .md\:rows-3-4 {
    grid-row: 3 / span 2
  }

  .md\:row-4 {
    grid-row: 4
  }
} /* 1024px */
@media (min-width: 1024px) {
  .lg\:relative {
    position: relative;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:fixed {
    position: fixed;
  }

  .lg\:static {
    position: static;
  }

  .lg\:sticky {
    position: sticky;
    top: 0;
  }

  .lg\:top {
    top: 0;
  }

  .lg\:right {
    right: 0;
  }

  .lg\:bottom {
    bottom: 0;
  }

  .lg\:left {
    left: 0;
  }

  .lg\:top-100\% {
    top: 100%;
  }

  .lg\:right-100\% {
    right: 100%;
  }

  .lg\:bottom-100\% {
    bottom: 100%;
  }

  .lg\:left-100\% {
    left: 100%;
  }

  /* Blocks */

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  /* Flexbox */

  .lg\:flex {
    display: flex;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }

  .lg\:flex-column {
    flex-direction: column;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-start {
    justify-content: flex-start;
  }

  .lg\:flex-center {
    justify-content: center;
  }

  .lg\:flex-start {
    justify-content: flex-start;
  }

  .lg\:flex-top {
    align-items: flex-start;
  }

  .lg\:flex-middle {
    align-items: center;
  }

  .lg\:flex-bottom {
    align-items: flex-end;
  }

  .lg\:flex-space-between {
    justify-content: space-between;
  }

  .lg\:flex-grow-equal > * {
    flex: 1;
  }

  .lg\:flex-grow-auto > * {
    flex: auto;
  }

  .lg\:grow {
    flex: 1;
  }

  /* Grid  (2, 3, or 4 columns) */

  .lg\:grid {
    display: grid;
  }
  .lg\:grid-dense {
    grid-auto-flow: dense;
  }

  /* Simply specifying columns will enable auto-width columns */

  .lg\:equal-2-cols {
    grid-template-columns: repeat(2, minmax(1rem, 1fr));
  }

  .lg\:equal-3-cols {
    grid-template-columns: repeat(3, minmax(1rem, 1fr));
  }

  .lg\:equal-4-cols {
    grid-template-columns: repeat(4, minmax(1rem, 1fr));
  }

  .lg\:col-1 {
    grid-column: 1
  }

  .lg\:cols-1-2 {
    grid-column: 1 / span 2
  }

  .lg\:cols-1-3 {
    grid-column: 1 / span 3
  }

  .lg\:cols-1-4 {
    grid-column: 1 / span 4
  }

  .lg\:col-2 {
    grid-column: 2
  }

  .lg\:cols-2-3 {
    grid-column: 2 / span 2
  }

  .lg\:cols-2-4 {
    grid-column: 2 / span 3
  }

  .lg\:col-3 {
    grid-column: 3
  }

  .lg\:cols-3-4 {
    grid-column: 3 / span 2
  }

  .lg\:col-4 {
    grid-column: 4
  }

  .lg\:row-1 {
    grid-row: 1
  }

  .lg\:rows-1-2 {
    grid-row: 1 / span 2
  }

  .lg\:rows-1-3 {
    grid-row: 1 / span 3
  }

  .lg\:rows-1-4 {
    grid-row: 1 / span 4
  }

  .lg\:row-2 {
    grid-row: 2
  }

  .lg\:rows-2-3 {
    grid-row: 2 / span 2
  }

  .lg\:rows-2-4 {
    grid-row: 2 / span 3
  }

  .lg\:row-3 {
    grid-row: 3
  }

  .lg\:rows-3-4 {
    grid-row: 3 / span 2
  }

  .lg\:row-4 {
    grid-row: 4
  }
} /* 1280px */
/* Containers and widths */


.container,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-xs,
.container-xxs {
  width: min(100% - var(--s-2), var(--w-max));
  margin-inline: auto;
}

[class*="w-"] {
  width: min(100%, var(--w-max));
}

.container-xxs,
.w-xxs {
  --w-max: var(--w-xxs);
}

.container-xs,
.w-xs {
  --w-max: var(--w-xs);
}

.container-sm,
.w-sm {
  --w-max: var(--w-sm);
}

.container-md,
.w-md {
  --w-max: var(--w-md);
}

.container-lg,
.w-lg {
  --w-max: var(--w-lg);
}

.container-xl,
.w-xl {
  --w-max: var(--w-xl);
}

.container,
.container-xxl,
.w-xxl {
  --w-max: var(--w-xxl);
}

.w-auto {
  max-width: unset;
  width: auto !important;
}

.w-fit-content {
  width: fit-content;
}

.w-100\% {
  width: 100%;
}

.w-max-100\% {
  max-width: 100%;
}

.w-100vw {
  width: 100vw;
}

.w-max-100vw {
  max-width: 100vw;
}

.h-100\% {
  height: 100%;
}

.h-max-100\% {
  max-height: 100%;
}

.h-50vh,
.h-50dvh {
  min-height: 50dvh;
}

.h-100vh,
.h-100dvh {
  min-height: 100dvh;
}

.h-max-100vh,
.h-max-100dvh {
  max-height: 100dvh;
}

/* Squares (and icon) */

.icon,
.square-xs {
  min-width: var(--icon);
  width: var(--icon);
  min-height: var(--icon);
  height: var(--icon);
}

.icon > svg {
  position: absolute;
  inset: 0;
}

.square {
  min-width: var(--sq);
  width: var(--sq);
  min-height: var(--sq);
  height: var(--sq);
}
.square-sm {
  min-width: var(--sq-sm);
  width: var(--sq-sm);
  min-height: var(--sq-sm);
  height: var(--sq-sm);
}
.square-md {
  min-width: var(--sq);
  width: var(--sq);
  min-height: var(--sq);
  height: var(--sq);
}
.square-lg {
  min-width: var(--sq-lg);
  width: var(--sq-lg);
  min-height: var(--sq-lg);
  height: var(--sq-lg);
}
.square-xl {
  min-width: var(--sq-xl);
  width: var(--sq-xl);
  min-height: var(--sq-xl);
  height: var(--sq-xl);
}

/* .box requires a .relative wrapper */

.box {
  position: absolute;
  inset: 0;

  &.fixed {
    position: fixed;
  }
}

/* z-index */

.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

.z-index-997 {
  z-index: 997;
}

.z-index-998 {
  z-index: 998;
}

.z-index-999 {
  z-index: 999;
}

/* Overflows */

.overflow-x {
  overflow-x: auto;
}

.overflow-y {
  overflow-y: auto;
}

.overflow-clip {
  overflow: clip;
}

/* Invisibility */

.hidden {
  display: hidden;
}

@media (max-width: 511px) {
  .sm\:hidden-below {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .sm\:hidden-below {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .md\:hidden-below {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .lg\:hidden-below {
    display: none !important;
  }
}

@media (min-width: 512px) {
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .md\:hidden {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .lg\:hidden {
    display: none !important;
  }
}

/* Gaps  (for flexbox and grid) */

.gap-1 {
  gap: var(--s-1);
}

.gap-2 {
  gap: var(--s-2);
}

.gap-3 {
  gap: var(--s-3);
}

.gap-4 {
  gap: var(--s-4);
}

/* Decoration */

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--s-1);
}

.m-2 {
  margin: var(--s-2);
}

.m-3 {
  margin: var(--s-3);
}

.m-4 {
  margin: var(--s-4);
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--s-1);
}

.mt-2 {
  margin-top: var(--s-2);
}

.mt-3 {
  margin-top: var(--s-3);
}

.mt-4 {
  margin-top: var(--s-4);
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: var(--s-1);
}

.mr-2 {
  margin-right: var(--s-2);
}

.mr-3 {
  margin-right: var(--s-3);
}

.mr-4 {
  margin-right: var(--s-4);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--s-1);
}

.mb-2 {
  margin-bottom: var(--s-2);
}

.mb-3 {
  margin-bottom: var(--s-3);
}

.mb-4 {
  margin-bottom: var(--s-4);
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: var(--s-1);
}

.ml-2 {
  margin-left: var(--s-2);
}

.ml-3 {
  margin-left: var(--s-3);
}

.ml-4 {
  margin-left: var(--s-4);
}

.mx-1 {
  margin-inline: var(--s-1);
}

.mx-2 {
  margin-inline: var(--s-2);
}

.mx-3 {
  margin-inline: var(--s-3);
}

.mx-4 {
  margin-inline: var(--s-4);
}

.my-0 {
  margin-block: 0;
}

.my-1 {
  margin-block: var(--s-1);
}

.my-2 {
  margin-block: var(--s-2);
}

.my-3 {
  margin-block: var(--s-3);
}

.my-4 {
  margin-block: var(--s-4);
}

.m-auto {
    margin: auto;
}

.mt-auto {
    margin-top: auto;
}

.mr-auto {
    margin-right: auto;
}

.mb-auto {
    margin-bottom: auto;
}

.ml-auto {
    margin-left: auto;
}

.mx-auto {
    margin-inline:auto
}

.my-auto {
    margin-inline:auto
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--s-1);
}

.p-2 {
  padding: var(--s-2);
}

.p-3 {
  padding: var(--s-3);
}

.p-4 {
  padding: var(--s-4);
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: var(--s-1);
}

.pt-2 {
  padding-top: var(--s-2);
}

.pt-3 {
  padding-top: var(--s-3);
}

.pt-4 {
  padding-top: var(--s-4);
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: var(--s-1);
}

.pr-2 {
  padding-right: var(--s-2);
}

.pr-3 {
  padding-right: var(--s-3);
}

.pr-4 {
  padding-right: var(--s-4);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: var(--s-1);
}

.pb-2 {
  padding-bottom: var(--s-2);
}

.pb-3 {
  padding-bottom: var(--s-3);
}

.pb-4 {
  padding-bottom: var(--s-4);
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: var(--s-1);
}

.pl-2 {
  padding-left: var(--s-2);
}

.pl-3 {
  padding-left: var(--s-3);
}

.pl-4 {
  padding-left: var(--s-4);
}

.px-1 {
  padding-inline: var(--s-1);
}

.px-2 {
  padding-inline: var(--s-2);
}

.px-3 {
  padding-inline: var(--s-3);
}

.px-4 {
  padding-inline: var(--s-4);
}

.py-1 {
  padding-block: var(--s-1);
}

.py-2 {
  padding-block: var(--s-2);
}

.py-3 {
  padding-block: var(--s-3);
}

.py-4 {
  padding-block: var(--s-4);
}

.p-cell {
  padding: var(--p-cell);
}

.b-0 {
  border: 0;
}

.b-thin {
  border: var(--b-thin);
}

.b-thick {
  border: var(--b-thick);
}

.b-heavy {
  border: var(--b-heavy);
}

.bt-thin {
  border-top: var(--b-thin);
}

.bt-thick {
  border-top: var(--b-thick);
}

.bt-heavy {
  border-top: var(--b-heavy);
}

.br-thin {
  border-right: var(--b-thin);
}

.br-thick {
  border-right: var(--b-thick);
}

.br-heavy {
  border-right: var(--b-heavy);
}

.bb-thin {
  border-bottom: var(--b-thin);
}

.bb-thick {
  border-bottom: var(--b-thick);
}

.bb-heavy {
  border-bottom: var(--b-heavy);
}

.bl-thin {
  border-left: var(--b-thin);
}

.bl-thick {
  border-left: var(--b-thick);
}

.bl-heavy {
  border-left: var(--b-heavy);
}
/* Rounded corners */

.unrounded {
  border-radius: 0;
}

.rounded {
  --rad: var(--s-1);
  border-radius: var(--rad);
}
.rounded-tl {
  border-top-left-radius: var(--rad);
}
.rounded-tr {
  border-top-right-radius: var(--rad);
}
.rounded-br {
  border-bottom-right-radius: var(--rad);
}
.rounded-bl {
  border-bottom-left-radius: var(--rad);
}
.rounded-xs {
  --rad: var(--s);
}
.rounded-sm {
  --rad: var(--s-1);
}
.rounded-md {
  --rad: var(--s-2);
}
.rounded-lg {
  --rad: var(--s-3);
}
.rounded-xl {
  --rad: var(--s-4);
}
.rounded-pill {
  --rad: var(--pill);
}

/* Box shadows */

.bs-0 {
  box-shadow: none;
}

// see responsive bs-0 below

[class*=bs] {
  transition: box-shadow 0.15s ease-in-out;
}

.bs-1,
.hover\:bs-1:hover {
  box-shadow:
    /* z-axis lift */
    0 1px 4px rgba(0, 0, 0, .25),
    /* spread */
    0 2px 12px rgba(0, 0, 0, .05);
}

.bs-2,
.hover\:bs-2:hover {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .2),
    0 4px 24px rgba(0, 0, 0, .1);
}

.bs-3,
.hover\:bs-3:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .15),
    0 8px 48px rgba(0, 0, 0, .1);
}

.bs-4,
.hover\:bs-4:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .1),
    0 16px 60px rgba(0, 0, 0, .1);
}

.bs-5,
.hover\:bs-5:hover {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, .075),
    0 24px 84px rgba(0, 0, 0, .075);
}

/* Images */

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
  overflow: clip;
}
.img-cover-right-top {
  object-position: right top;
}
.img-cover-right {
  object-position: right;
}
.img-cover-right-bottom {
  object-position: right bottom;
}
.img-cover-bottom {
  object-position: bottom;
}
.img-cover-left-bottom {
  object-position: left bottom;
}
.img-cover-left {
  object-position: left;
}
.img-cover-left-top {
  object-position: left top;
}
.img-cover-top {
  object-position: top;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

/* Aspect ratios */

.aspect-ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio 21x9 {
  aspect-ratio: 21 / 9;
}

.aspect-ratio 24x9 {
  aspect-ratio: 24 / 9;
}

.aspect-ratio-4x3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1x1 {
  aspect-ratio: 1 / 1;
}

.opacity-25\%,
.hover\:opacity-25\%\:hover {
  opacity: 0.25;
}

.opacity-50\%,
.hover\:opacity-50\%\:hover {
  opacity: 0.5;
}

.opacity-75\%,
.hover\:opacity-75\%\:hover {
  opacity: 0.75;
}

.hover\:opacity-100\%\:hover {
  opacity: 1;
}

/* Glassmorphic */

.bg-black-glass-1 {
  background-color: rgba(0, 0, 0, var(--alpha-1));
  -webkit-backdrop-filter: var(--glass-1);
  backdrop-filter: var(--glass-1);
}  
.bg-black-glass-2 {
  background-color: rgba(0, 0, 0, var(--alpha-2));
  -webkit-backdrop-filter: var(--glass-2);
  backdrop-filter: var(--glass-2);
}
.bg-black-glass-3 {
  background-color: rgba(0, 0, 0, var(--alpha-3));
  -webkit-backdrop-filter: var(--glass-3);
  backdrop-filter: var(--glass-3);
}
.bg-black-glass-4 {
  background-color: rgba(0, 0, 0, var(--alpha-4));
  -webkit-backdrop-filter: var(--glass-4);
  backdrop-filter: var(--glass-4);
}
.bg-black-glass-5 {
  background-color: rgba(0, 0, 0, var(--alpha-5));
  -webkit-backdrop-filter: var(--glass-5);
  backdrop-filter: var(--glass-5);
}

.bg-white-glass-1 {
  background-color: rgba(255, 255, 255, var(--alpha-1));
  -webkit-backdrop-filter: var(--glass-1);
  backdrop-filter: var(--glass-1);
}
.bg-white-glass-2 {
  background-color: rgba(255, 255, 255, var(--alpha-2));
  -webkit-backdrop-filter: var(--glass-2);
  backdrop-filter: var(--glass-2);
}
.bg-white-glass-3 {
  background-color: rgba(255, 255, 255, var(--alpha-3));
  -webkit-backdrop-filter: var(--glass-3);
  backdrop-filter: var(--glass-3);
}
.bg-white-glass-4 {
  background-color: rgba(255, 255, 255, var(--alpha-4));
  -webkit-backdrop-filter: var(--glass-4);
  backdrop-filter: var(--glass-4);
}
.bg-white-glass-5 {
  background-color: rgba(255, 255, 255, var(--alpha-5));
  -webkit-backdrop-filter: var(--glass-5);
  backdrop-filter: var(--glass-5);
}


/* Border colors */

.b-blue,
.hover\:b-blue:hover {
  --bc: var(--blue);
  border-color: var(--bc);
}

.b-green,
.hover\:b-green:hover {
  --bc: var(--green);
  border-color: var(--bc);
}

.b-amber,
.hover\:b-amber:hover {
  --bc: var(--amber);
  border-color: var(--bc);
}

.b-red,
.hover\:b-red:hover {
  --bc: var(--red);
  border-color: var(--bc);
}

.b-purple,
.hover\:b-purple:hover {
  --bc: var(--purple);
  border-color: var(--bc);
}

.b-teal,
.hover\:b-teal:hover {
  --bc: var(--teal);
  border-color: var(--bc);
}

.b-gray,
.hover\:b-gray:hover {
  --bc: var(--gray);
  border-color: var(--bc);
}

/* Text colors */

.t-blue,
.hover\:t-blue:hover {
  --tc: var(--blue);
  color: var(--tc);
}

.t-green,
.hover\:t-green:hover {
  --tc: var(--green);
  color: var(--tc);
}

.t-amber,
.hover\:t-amber:hover {
  --tc: var(--amber);
  color: var(--tc);
}

.t-red,
.hover\:t-red:hover {
  --tc: var(--red);
  color: var(--tc);
}

.t-purple,
.hover\:t-purple:hover {
  --tc: var(--purple);
  color: var(--tc);
}

.t-teal,
.hover\:t-teal:hover {
  --tc: var(--teal);
  color: var(--tc);
}

.t-gray,
.hover\:t-gray:hover {
  --tc: var(--gray);
  color: var(--tc);
}

/* Background colors */

.bg-blue,
.hover\:bg-blue:hover {
  --bgc: var(--blue);
  background: var(--bgc);
}

.bg-green,
.hover\:bg-green:hover {
  --bgc: var(--green);
  background: var(--bgc);
}

.bg-amber,
.hover\:bg-amber:hover {
  --bgc: var(--amber);
  background: var(--bgc);
}

.bg-red,
.hover\:bg-red:hover {
  --bgc: var(--red);
  background: var(--bgc);
}

.bg-purple,
.hover\:bg-purple:hover {
  --bgc: var(--purple);
  background: var(--bgc);
}

.bg-teal,
.hover\:bg-teal:hover {
  --bgc: var(--teal);
  background: var(--bgc);
}

.bg-gray,
.hover\:bg-gray:hover {
  --bgc: var(--gray);
  background: var(--bgc);
}

/* Border lightness levels */

[class*="b-100"],
[class*="b-200"],
[class*="b-300"],
[class*="b-400"],
[class*="b-500"],
[class*="b-600"],
[class*="b-700"],
[class*="b-800"],
[class*="b-900"] {
  border-color: color-mix(in OKLAB, var(--bc), var(--bl));
}

.b-100,
.hover\:b-100:hover {
  --bl: var(--l100);
}

.b-200,
.hover\:b-200:hover {
  --bl: var(--l200);
}

.b-300,
.hover\:b-300:hover {
  --bl: var(--l300);
}

.b-400,
.hover\:b-400:hover {
  --bl: var(--l400);
}

.b-500,
.hover\:b-500:hover {
  --bl: var(--l500);
}

.b-600,
.hover\:b-600:hover {
  --bl: var(--l600);
}

.b-700,
.hover\:b-700:hover {
  --bl: var(--l700);
}

.b-800,
.hover\:b-800:hover {
  --bl: var(--l800);
}

.b-900,
.hover\:b-900:hover {
  --bl: var(--l900);
}

/* Text lightness levels */

[class*="t-100"],
[class*="t-200"],
[class*="t-300"],
[class*="t-400"],
[class*="t-500"],
[class*="t-600"],
[class*="t-700"],
[class*="t-800"],
[class*="t-900"] {
  color: color-mix(in OKLAB, var(--tc), var(--tl));
}

.t-100,
.hover\:t-100:hover {
  --tl: var(--l100);
}

.t-200,
.hover\:t-200:hover {
  --tl: var(--l200);
}

.t-300,
.hover\:t-300:hover {
  --tl: var(--l300);
}

.t-400,
.hover\:t-400:hover {
  --tl: var(--l400);
}

.t-500,
.hover\:t-500:hover {
  --tl: var(--l500);
}

.t-600,
.hover\:t-600:hover {
  --tl: var(--l600);
}

.t-700,
.hover\:t-700:hover {
  --tl: var(--l700);
}

.t-800,
.hover\:t-800:hover {
  --tl: var(--l800);
}

.t-900,
.hover\:t-900:hover {
  --tl: var(--l900);
}

/* Background lightness levels */

[class*="bg-100"],
[class*="bg-200"],
[class*="bg-300"],
[class*="bg-400"],
[class*="bg-500"],
[class*="bg-600"],
[class*="bg-700"],
[class*="bg-800"],
[class*="bg-900"] {
  background: color-mix(in OKLAB, var(--bgc), var(--bgl));
}

.bg-100,
.hover\:bg-100:hover {
  --bgl: var(--l100);
}

.bg-200,
.hover\:bg-200:hover {
  --bgl: var(--l200);
}

.bg-300,
.hover\:bg-300:hover {
  --bgl: var(--l300);
}

.bg-400,
.hover\:bg-400:hover {
  --bgl: var(--l400);
}

.bg-500,
.hover\:bg-500:hover {
  --bgl: var(--l500);
}

.bg-600,
.hover\:bg-600:hover {
  --bgl: var(--l600);
}

.bg-700,
.hover\:bg-700:hover {
  --bgl: var(--l700);
}

.bg-800,
.hover\:bg-800:hover {
  --bgl: var(--l800);
}

.bg-900,
.hover\:bg-900:hover {
  --bgl: var(--l900);
}

/* Colors - other */

.b-currentcolor {
  border-color: currentColor;
}

.b-transparent {
  border-color: transparent;
}

.b-white,
.hover\:b-white:hover {
  border-color: white;
}

.t-white,
.hover\:t-white:hover {
  color: white;
}

.bg-white,
.hover\:bg-white:hover {
  background: white;
}

.b-black,
.hover\:b-black:hover {
  border-color: black;
}

.t-black,
.hover\:t-black:hover {
  color: black;
}

.bg-black,
.hover\:bg-black:hover {
  background: black;
}

/* Components */
/* Badges (inline; else use SUP or SUB to position them) */

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 2em;
  padding: 0 0.25em;
  text-align: center;
  white-space: nowrap;
  background-color: var(--bgc-ui);
}

/* Labels */

.label {
  display: inline-block;
  line-height: 1.25em;
  padding: 0 0.2em;
  white-space: nowrap;
  background-color: var(--bgc-ui);
}

/* UI colors */

[class*="info"] {
  color: white;
  background: var(--info);
}

a[class*="info"]:hover,
button[class*="info"]:hover {
  color: white;
  background: color-mix(in oklch, var(--info), var(--l600));
}

[class*="success"] {
  color: white;
  background: var(--success);
}

a[class*="success"]:hover,
button[class*="success"]:hover {
  color: white;
  background: color-mix(in oklch, var(--success), var(--l600));
}

[class*="warning"] {
  color: black;
  background: var(--warning);
}

a[class*="warning"]:hover,
button[class*="warning"]:hover {
  color: black;
  background: color-mix(in oklch, var(--warning), var(--l600));
}

[class*="danger"] {
  color: white;
  background: var(--danger);
}

a[class*="danger"]:hover,
button[class*="danger"]:hover {
  color: white;
  background: color-mix(in oklch, var(--danger), var(--l600));
}