/* #region (base) */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Geist Mono", system-ui, monospace;
  font-weight: 500;
  color: var(--color-contrast-higher);
  font-size: 0.8125rem;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul, ol {
  list-style: none;
}
/* #endregion */

/* #region (experiment) */
:root {
  --f-family-heading: "Geist", system-ui, sans-serif;
}

.main {
  position: relative;
  width: 540px;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  &:has(input#theme-picker-gold:checked) {
    --color-bg-light: #BA965A;
    --color-bg: #BA965A;
    --color-contrast-higher: #2F2212;
    --color-contrast-highest: #101010;

    :is([data-display=dark], [data-display=light]) {
      display: none;
    }
  }

  &:has(input#theme-picker-dark:checked) {
    --color-bg-light: #1F1F1F;
    --color-bg: #111111;
    --color-contrast-higher: #fff;
    --color-contrast-highest: #fff;

    :is([data-display=gold], [data-display=light]) {
      display: none;
    }
  }

  &:has(input#theme-picker-light:checked) {
    --color-bg-light: oklch(77% 0 0);
    --color-bg: oklch(77% 0 0);
    --color-contrast-higher: black;
    --color-contrast-highest: black;

    :is([data-display=gold], [data-display=dark]) {
      display: none;
    }
  }
}

.container {
  position: relative;
  z-index: 2;
  width: 444px;
  height: 440px;
  background: hsl(from var(--color-bg) h s l / .85);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  display: flex;
  flex-direction: column;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1.25px solid transparent;
    -webkit-mask: linear-gradient(black, black) padding-box, linear-gradient(black, black);
            mask: linear-gradient(black, black) padding-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

.main:has(input#theme-picker-gold:checked) .container::after {
  background: linear-gradient(160deg, hsl(from #FFE38F h s l / .97), hsl(from #372E22 h s l / .46) 19%, hsl(from #886C4A h s l / 1) 70%, hsl(from #FFE38F h s l / .37)) border-box;
  mix-blend-mode: overlay;
}

.main:has(input#theme-picker-dark:checked) .container::after {
  background: linear-gradient(160deg, hsl(from white h s l / .30), hsl(from white h s l / .02) 37%, hsl(from white h s l / 0.05) 70%, hsl(from white h s l / .1)) border-box;
}

.main:has(input#theme-picker-light:checked) .container::after {
  background: linear-gradient(160deg, hsl(from white h s l / .77), hsl(from white h s l / 0.2) 19%, hsl(from white h s l / 0.2) 70%, hsl(from white h s l / .3)) border-box;
  mix-blend-mode: overlay;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
}

.title {
  font-size: 20px;
  font-family: var(--f-family-heading);
  font-weight: normal;
  letter-spacing: -0.025em;
  color: hsl(from var(--color-contrast-higher) h s l / .85);
  
  .main:has(input#theme-picker-gold:checked) & {
    text-shadow: 0 1px 0 hsl(from white h s l / .2);
  }

  .main:has(input#theme-picker-light:checked) & {
    text-shadow: 0 1px 0 hsl(from white h s l / .2);
  }
}

.btn-primary,
.btn-secondary {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 12px;
  transition: translate .1s;

  &:active {
    translate: 0 1px;
  }

  &:focus-visible {
    outline: 1.5px solid var(--color-contrast-highest);
    outline-offset: 2px;
    transition: none;
  }
}

.btn-primary {
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(black, black) padding-box, linear-gradient(black, black);
            mask: linear-gradient(black, black) padding-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

.main:has(input#theme-picker-gold:checked) {
  .btn-primary {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
    text-shadow: 0 1px 0 hsl(from white h s l / .3);
    background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.25), hsl(from white h s l / 0)), var(--color-bg-light);
    background-blend-mode: overlay, normal;
    box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .15), 0px 40px 11px rgba(136, 97, 46, 0.01), 0px 26px 10px rgba(136, 97, 46, 0.05), 0px 14px 9px rgba(136, 97, 46, 0.17), 0px 6px 6px rgba(136, 97, 46, 0.29), 0px 2px 4px rgba(136, 97, 46, 0.33);

    &::after {
      background: linear-gradient(180deg, hsl(from white h s l / .65), hsl(from #5B4B32 h s l / .68) 41%, hsl(from #7F6845 h s l / .46) 75%, hsl(from white h s l / .25)) border-box;
      mix-blend-mode: overlay;
    }

    @media (hover: hover) {
      &:hover {
        background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.35), hsl(from white h s l / 0)), var(--color-bg-light);
      }
    }
  
    &:active {
      box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .15), 0px 20px 10px rgba(136, 97, 46, 0.01), 0px 12px 10px rgba(136, 97, 46, 0.05), 0px 6px 9px rgba(136, 97, 46, 0.17), 0px 2px 4px rgba(136, 97, 46, 0.29), 0px 1px 2px rgba(136, 97, 46, 0.33);
    }
  }
}

.main:has(input#theme-picker-dark:checked) {
  .btn-primary {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
    text-shadow: 0 -1px 0 hsl(from black h s l / .5);
    background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.05), hsl(from white h s l / 0)), hsl(from var(--color-bg-light) h s l / .8);
    box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .45), 0px 40px 11px rgba(0, 0, 0, 0.01), 0px 26px 10px rgba(0, 0, 0, 0.025), 0px 14px 9px rgba(0, 0, 0, 0.1), 0px 6px 6px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.25);

    &::after {
      background: linear-gradient(180deg, hsl(from white h s l / .75), hsl(from black h s l / .48) 41%, hsl(from black h s l / .26) 75%, hsl(from white h s l / .25)) border-box;
      mix-blend-mode: overlay;
    }

    @media (hover: hover) {
      &:hover {
        background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.1), hsl(from white h s l / 0)), var(--color-bg-light);
      }
    }
  
    &:active {
      box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .15), 0px 20px 10px rgba(0, 0, 0, 0.01), 0px 12px 10px rgba(0, 0, 0, 0.05), 0px 6px 9px rgba(0, 0, 0, 0.17), 0px 2px 4px rgba(0, 0, 0, 0.29), 0px 1px 2px rgba(0, 0, 0, 0.33);
    }
  }
}

.main:has(input#theme-picker-light:checked) {
  .btn-primary {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
    text-shadow: 0 1px 0 hsl(from white h s l / .2);
    background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.2), hsl(from white h s l / 0)), hsl(from var(--color-bg-light) h s l / .95);
    box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .15), 0 1px 1px -.5px hsla(0 0% 0% / 0.1), 0 4.5px 4.5px -2.25px hsla(0 0% 0% / 0.15), 0 18px 18px -9px hsla(0 0% 0% / 0.25);

    &::after {
      background: linear-gradient(180deg, hsl(from white h s l / .75), hsl(from black h s l / .25) 41%, hsl(from black h s l / .25) 75%, hsl(from white h s l / .35)) border-box;
      mix-blend-mode: overlay;
    }

    @media (hover: hover) {
      &:hover {
        background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.3), hsl(from white h s l / 0)), var(--color-bg-light);
      }
    }
  
    &:active {
      box-shadow: inset 0 0 0 1px hsl(from white h s l / .04), 0 0 0 1px hsl(from black h s l / .15), 0 1px 1px -.5px hsla(0 0% 0% / 0.1), 0 2.5px 4.5px -2.25px hsla(0 0% 0% / 0.15), 0 8px 18px -9px hsla(0 0% 0% / 0.25);
    }
  }
}

.btn-secondary {
  background: transparent;

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .main:has(input#theme-picker-gold:checked) & {
    color: hsl(from white h s l / .8);
    text-shadow: 0 -1px 0 hsl(from black h s l / .15);

    &::after {
      background: hsl(from hsl(35 35% 43%) h s l / .78);
    }
  }

  .main:has(input#theme-picker-dark:checked) & {
    color: hsl(from var(--color-contrast-higher) h s l / .83);

    &::after {
      background: hsl(from black h s l / .58);
    }
  }

  .main:has(input#theme-picker-light:checked) & {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
    text-shadow: 0 1px 0 hsl(from white h s l / .2);

    &::after {
      background: hsl(from black h s l / .1);
    }
  }
}

.btn-icon {
  height: 34px;
  width: 34px;
  border-radius: 50%;
}

.main:has(input#theme-picker-gold:checked) .btn-icon svg {
  -webkit-filter: drop-shadow(0 1px 0 hsl(0 0% 100% / .5));
  filter: drop-shadow(0 1px 0 hsl(0 0% 100% / .5));
}

.main:has(input#theme-picker-dark:checked) .btn-icon svg {
  -webkit-filter: drop-shadow(0 -1px 0 hsl(0 0% 0% / .5));
  filter: drop-shadow(0 -1px 0 hsl(0 0% 0% / .5));
}

.main:has(input#theme-picker-light:checked) .btn-icon svg {
  -webkit-filter: drop-shadow(0 1px 0 hsl(0 0% 100% / .4));
  filter: drop-shadow(0 1px 0 hsl(0 0% 100% / .4));
}

.main:has(input#theme-picker-gold:checked) {
  .text, .text-subtle {
    text-shadow: 0 1px 0 hsl(from white h s l / .15);
  }
  
  .text {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
  }
  
  .text-subtle {
    color: hsl(from var(--color-contrast-higher) h s l / .5);
  }
}

.main:has(input#theme-picker-dark:checked) {
  .text {
    color: hsl(from var(--color-contrast-higher) h s l / .83);
  }
  
  .text-subtle {
    color: hsl(from var(--color-contrast-higher) h s l / .35);
  }
}

.main:has(input#theme-picker-light:checked) {
  .text, .text-subtle {
    text-shadow: 0 1px 0 hsl(from white h s l / .2);
  }

  .text {
    color: hsl(from var(--color-contrast-higher) h s l / .85);
  }
  
  .text-subtle {
    color: hsl(from var(--color-contrast-higher) h s l / .5);
  }
}

.theme-picker {
  display: flex;
  justify-content: space-between;
  border-radius: 12px;

  &:has(input:focus-visible):focus-within {
    outline: 1.5px solid var(--color-contrast-highest);
    outline-offset: 7.5px;
    transition: none;
  }
}

.theme-picker-btn {
  cursor: pointer;
}

.theme-picker-img-wrapper {
  position: relative;
}

.theme-picker-img-wrapper::before, .theme-picker-img-wrapper::after {
  content: '';
  position: absolute;
  border-radius: 15px;
}

.theme-picker-img-wrapper::before {
  inset: -3px;
  z-index: -2;
  box-shadow: 0 0 0 1.5px white;
  display: none;
}

.theme-picker-btn:has(input:checked) .theme-picker-img-wrapper::before {
  display: block;
}

.theme-picker-img-wrapper::after {
  inset: -3px;
  z-index: -1;
}

.main:has(input#theme-picker-gold:checked) .theme-picker-img-wrapper::after {
  background: hsl(from var(--color-contrast-highest) h s l / .2);
  mix-blend-mode: overlay;
  box-shadow: 0 1px 0 hsl(from white h s l / .2), inset 0 1px 0 hsl(from black h s l / .07), inset 0 1px 4px hsl(from black h s l / .08);
}

.main:has(input#theme-picker-dark:checked) .theme-picker-img-wrapper::after {
  background: hsl(from black h s l / .9);
  box-shadow: 0 1px 0 hsl(from white h s l / .15), inset 0 1px 0 hsl(from black h s l / 1), inset 0 1px 4px hsl(from black h s l / .25);
}

.main:has(input#theme-picker-light:checked) .theme-picker-img-wrapper::after {
  background: hsl(from black h s l / .1);
  box-shadow: 0 1px 0 hsl(from white h s l / .2), inset 0 1px 0 hsl(from black h s l / 0.15), inset 0 1px 4px hsl(from black h s l / .1);
}

.theme-picker-img {
  width: 124px;
  -webkit-user-drag: none;
  user-drag: none;
}

.footer {
  position: relative;
  margin-top: auto;
  padding: 24px;

  &::before, &::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    height: 1px;
    mix-blend-mode: overlay;
  }

  &::before {
    top: -1px;
  }

  &::after {
    top: 0;
  }

  .main:has(input#theme-picker-gold:checked) & {
    &::before {
      background: hsl(from #4B3F34 h s l / .25);
    }

    &::after {
      background: hsl(from white h s l / .1);
    }
  }

  .main:has(input#theme-picker-dark:checked) & {
    &::before {
      background: hsl(from black h s l / .75);
    }

    &::after {
      background: hsl(from white h s l / .15);
    }
  }

  .main:has(input#theme-picker-light:checked) & {
    &::before {
      background: hsl(from black h s l / .175);
    }

    &::after {
      background: hsl(from white h s l / .2);
    }
  }
}

.light {
  position: absolute;
  background: white;
  height: 196px;
  width: 196px;
  border-radius: 50%;
  z-index: 10;
  mix-blend-mode: overlay;
  -webkit-filter: blur(150px);
          filter: blur(150px);  
  pointer-events: none;
}

.bg-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-filter: url(#noise-bg-fx) grayscale(100%);
          filter: url(#noise-bg-fx) grayscale(100%);
  z-index: 10;
  mix-blend-mode: screen;

  .main:has(input#theme-picker-gold:checked) & {
    opacity: .15;
  }

  .main:has(input#theme-picker-dark:checked) & {
    opacity: .1;
  }

  .main:has(input#theme-picker-light:checked) & {
    opacity: .15;
  }
}

.switch {
  --switch-w: 44px; /* width */
  --switch-h: 22px; /* height */
  --switch-radius: 50em; /* border-radius */
  --switch-p: 3px; /* padding */
  --switch-trans-duration: .2s;

  position: relative;
  display: block;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: var(--switch-radius);
  padding: var(--switch-p);
  
  &::before { /* bg */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
  }

  .main:has(input#theme-picker-gold:checked) & {
    &::before {
      background: hsl(from var(--color-contrast-highest) h s l / .26);
      box-shadow: 0 1px 0 hsl(from white h s l / .2), inset 0 1px 0 hsl(from black h s l / .07), inset 0 1px 4px hsl(from black h s l / .08);
      mix-blend-mode: overlay;
   
    }
  }

  .main:has(input#theme-picker-dark:checked) & {
    &::before {
      background: hsl(from black h s l / .95);
      box-shadow: 0 1px 0 hsl(from white h s l / .1), inset 0 1px 0 hsl(from black h s l / .95), inset 0 1px 4px hsl(from black h s l / .4);
    }
  }

  .main:has(input#theme-picker-light:checked) & {
    &::before {
      background: hsl(from black h s l / .1);
      box-shadow: 0 1px 0 hsl(from white h s l / .2), inset 0 1px 0 hsl(from black h s l / .1), inset 0 1px 4px hsl(from black h s l / .25);
    }
  }
}

/* switch active background color */
.main:has(input#theme-picker-gold:checked) {
  .switch:has(.switch-input:checked) {
    background: var(--color-contrast-highest); 
  }
}

.main:has(input#theme-picker-dark:checked) {
  .switch:has(.switch-input:checked) {
    background: hsl(from white h s l / .83);
    box-shadow: 0px 5.8px 5.5px -5px hsla(0 0% 100% / 0.0825), 0px 16px 15px -5px hsl(0 0% 100% / 0.12)
  }
}

.main:has(input#theme-picker-light:checked) {
  .switch:has(.switch-input:checked) {
    background: hsl(from var(--color-contrast-highest) h s l / .85); 
  }
}

.switch:has(.switch-input:focus-visible) {
  /* focus effect */
  outline: 1.5px solid var(--color-contrast-highest);
  outline-offset: 1.5px;
  transition: none;
}

.switch-input {
  /* SR only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.switch-marker {
  height: calc(var(--switch-h) - var(--switch-p)*2);
  width: calc(var(--switch-h) - var(--switch-p)*2);
  border-radius: calc(var(--switch-radius) - var(--switch-p));

  &:active {
    translate: 0;
  }

  .main:has(input#theme-picker-dark:checked) & {
    background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.15), hsl(from white h s l / 0)), hsl(from var(--color-bg-light) h s l / .8);
  }
}

.switch:has(input:checked) .switch-marker {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));

  .main:has(input#theme-picker-dark:checked) & {
    background: radial-gradient(ellipse at -20px top, hsl(from white h s l / 0), hsl(from white h s l / 0)), hsl(from var(--color-bg-light) h s l / 1);
    box-shadow: 0 0 0 1px hsl(from black h s l / 0.85), 0px 40px 11px rgba(0, 0, 0, 0.01), 0px 26px 10px rgba(0, 0, 0, 0.025), 0px 14px 9px rgba(0, 0, 0, 0.1), 0px 6px 6px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.25);

    &::after {
      background: linear-gradient(180deg, hsl(from white h s l / 0.4), hsl(from black h s l / .88) 41%, hsl(from black h s l / .46) 75%, hsl(from white h s l / .25)) border-box;
      mix-blend-mode: normal;
    }
  }
}

@media not (prefers-reduced-motion) {
  .switch {
    transition: all var(--switch-trans-duration);
  }

  .switch-marker {
    transition: transform var(--switch-trans-duration);
  }
}
/* #endregion */

/* #region (util) */
* {
  border-width: 0;
  border-style: solid;
  border-color: var(--bd-color-default, currentColor);
}

[style*="--d:"] { display: var(--d); }
[style*="--size:"] { width: var(--size); height: var(--size); }
[style*="--w:"] { width: var(--w); }
[style*="--h:"] { height: var(--h); }
[style*="--min-w:"] { min-width: var(--min-w); }
[style*="--min-h:"] { min-height: var(--min-h); }
[style*="--max-w:"] { max-width: var(--max-w); }
[style*="--max-h:"] { max-height: var(--max-h); }
[style*="--p:"] { padding: var(--p); }
[style*="--py:"] { padding-top: var(--py); padding-bottom: var(--py); }
[style*="--px:"] { padding-left: var(--px); padding-right: var(--px); }
[style*="--pt:"] { padding-top: var(--pt); }
[style*="--pr:"] { padding-right: var(--pr); }
[style*="--pb:"] { padding-bottom: var(--pb); }
[style*="--pl:"] { padding-left: var(--pl); }
[style*="--m:"] { margin: var(--m); }
[style*="--my:"] { margin-top: var(--my); margin-bottom: var(--my); }
[style*="--mx:"] { margin-left: var(--mx); margin-right: var(--mx); }
[style*="--mt:"] { margin-top: var(--mt); }
[style*="--mr:"] { margin-right: var(--mr); }
[style*="--mb:"] { margin-bottom: var(--mb); }
[style*="--ml:"] { margin-left: var(--ml); }
[style*="--bg:"] { background: var(--bg); }
[style*="--radius:"] { border-radius: var(--radius); }
[style*="--radius-tl:"] { border-top-left-radius: var(--radius-tl); }
[style*="--radius-tr:"] { border-top-right-radius: var(--radius-tr); }
[style*="--radius-br:"] { border-bottom-right-radius: var(--radius-br); }
[style*="--radius-bl:"] { border-bottom-left-radius: var(--radius-bl); }
[style*="--bd:"] { border-width: var(--bd-w); }
[style*="--bd-y:"] { border-block-width: var(--bd-y); }
[style*="--bd-x:"] { border-inline-width: var(--bd-x); }
[style*="--bd-t:"] { border-top-width: var(--bd-t); }
[style*="--bd-r:"] { border-right-width: var(--bd-r); }
[style*="--bd-b:"] { border-bottom-width: var(--bd-b); }
[style*="--bd-l:"] { border-left-width: var(--bd-l); }
[style*="--bd-color:"] { border-color: var(--bd-color); }
[style*="--bd-style:"] { border-style: var(--bd-style); }
[style*="--shadow:"] { box-shadow: var(--shadow); }
[style*="--pos:"] { position: var(--pos); }
[style*="--inset:"] { inset: var(--inset); }
[style*="--t:"] { top: var(--t); }
[style*="--r:"] { right: var(--r); }
[style*="--b:"] { bottom: var(--b); }
[style*="--l:"] { left: var(--l); }
[style*="--ov:"] { overflow: var(--ov); }
[style*="--v:"] { visibility: var(--v); }
[style*="--ar:"] { aspect-ratio: var(--ar); }
[style*="--obj-fit:"] { -o-object-fit: var(--obj-fit); object-fit: var(--obj-fit); }
[style*="--op:"] { opacity: var(--op); }
[style*="--trans:"] { transition: var(--trans); }
[style*="--grid-tem-cols:"] { grid-template-columns: var(--grid-tem-cols); }
[style*="--grid-tem-rows:"] { grid-template-rows: var(--grid-tem-rows); }
[style*="--grid-cols:"] { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
[style*="--gap:"] { gap: var(--gap); }
[style*="--col-gap:"] { -moz-column-gap: var(--col-gap); column-gap: var(--col-gap); }
[style*="--row-gap:"] { row-gap: var(--row-gap); }
[style*="--col:"] { grid-column: var(--col); }
[style*="--col-start:"] { grid-column-start: var(--col-start); }
[style*="--col-end:"] { grid-column-end: var(--col-end); }
[style*="--row:"] { grid-row: var(--row); }
[style*="--row-start:"] { grid-row-start: var(--row-start); }
[style*="--row-end:"] { grid-row-end: var(--row-end); }
[style*="--just-cont:"] { justify-content: var(--just-cont); }
[style*="--just-items:"] { justify-items: var(--just-items); }
[style*="--align-items:"] { align-items: var(--align-items); }
[style*="--align-cont:"] { align-content: var(--align-cont); }
[style*="--place-items:"] { place-items: var(--place-items); }
[style*="--fx-wrap:"] { flex-wrap: var(--fx-wrap); }
[style*="--fx-direction:"] { flex-direction: var(--fx-direction); }
[style*="--fx:"] { flex: var(--fx); }
[style*="--fx-grow:"] { flex-grow: var(--fx-grow); }
[style*="--fx-shrink:"] { flex-shrink: var(--fx-shrink); }
[style*="--fx-basis:"] { flex-basis: var(--fx-basis); }
[style*="--align-self:"] { align-self: var(--align-self); }
[style*="--ord:"] { order: var(--ord); }
[style*="--lh:"] { line-height: var(--lh); }
[style*="--color:"] { color: var(--color); }
[style*="--f-size:"] { font-size: var(--f-size); }
[style*="--f-family:"] { font-family: var(--f-family); }
[style*="--f-weight:"] { font-weight: var(--f-weight); }
[style*="--f-style:"] { font-style: var(--f-style); }
[style*="--f-variant-numeric:"] { font-variant-numeric: var(--f-variant-numeric); }
[style*="--lt-spacing:"] { letter-spacing: var(--lt-spacing); }
[style*="--t-transform:"] { text-transform: var(--t-transform); }
[style*="--t-ov:"] { text-overflow: var(--t-ov); }
[style*="--t-align:"] { text-align: var(--t-align); }
[style*="--t-wrap:"] { text-wrap: var(--t-wrap); }
[style*="--t-deco:"] { -webkit-text-decoration: var(--t-deco); text-decoration: var(--t-deco); }
[style*="--us:"] { -webkit-user-select: var(--us); -moz-user-select: var(--us); -ms-user-select: var(--us); user-select: var(--us); }
[style*="--ol:"] { outline: var(--ol); }
[style*="--ws:"] { white-space: var(--ws); }
[style*="--float:"] { float: var(--float); }
[style*="--cur:"] { cursor: var(--cur); }
[style*="--lis:"] { list-style: var(--lis); }
[style*="--v-align:"] { vertical-align: var(--v-align); }
[style*="--z:"] { z-index: var(--z); }
[style*="--translate:"] { translate: var(--translate); }
[style*="--rotate:"] { rotate: var(--rotate); }
[style*="--scale:"] { scale: var(--scale); }
[style*="--origin:"] { transform-origin: var(--origin); }
[style*="--pointer-ev:"] { pointer-events: var(--pointer-ev); }
[style*="--iso:"] { isolation: var(--iso); }
[style*="--bd-filter:"] { -webkit-backdrop-filter: var(--bd-filter); backdrop-filter: var(--bd-filter); }
[style*="--filter:"] { -webkit-filter: var(--filter); filter: var(--filter); }
[style*="--line-clamp:"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); }

@media (hover: hover) {
  [style*="--bg--hover:"]:hover { background: var(--bg--hover); }
  [style*="--bd-color--hover:"]:hover { border-color: var(--bd-color--hover); }
  [style*="--shadow--hover:"]:hover { box-shadow: var(--shadow--hover); }
  [style*="--op--hover:"]:hover { opacity: var(--op--hover); }
  [style*="--trans--hover:"]:hover { transition: var(--trans--hover); }
  [style*="--color--hover:"]:hover { color: var(--color--hover); }
  [style*="--t-deco--hover:"]:hover { -webkit-text-decoration: var(--t-deco--hover); text-decoration: var(--t-deco--hover); }
  [style*="--cur--hover:"]:hover { cursor: var(--cur--hover); }
  [style*="--filter--hover:"]:hover { -webkit-filter: var(--filter--hover); filter: var(--filter--hover); }
}

[style*="--bg--selection:"]::-moz-selection { background: var(--bg--selection); }

[style*="--bg--selection:"]::selection { background: var(--bg--selection); }
[style*="--color--selection:"]::-moz-selection { color: var(--color--selection); }
[style*="--color--selection:"]::selection { color: var(--color--selection); }

/* Custom CSS */
[style*="--sr: only"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

[style*="--ol--focus: ring"]:focus-visible {
  outline: 1.5px solid var(--color-contrast-highest);
  outline-offset: 2px;
  transition: none;
}
/* #endregion */