/* #region (base) */
html, body {
  overscroll-behavior: none;
}

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

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fafafa;
  font-family: var(--f-family-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: #0a0a0a;
}

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

ul, ol {
  list-style: none;
}

a {
  color: inherit;
}

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

/* #region (components) */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--color-primary);
  border-radius: 2px;
  padding-inline: 24px;
  white-space: nowrap;
  user-select: none;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--color-btn-text);
  font-weight: 500;
  appearance: none;
  transition: box-shadow .3s, background .3s;
  box-shadow: 0 1px 1px -.5px hsl(0 0% 0% / 0.055), 0 4.5px 4.5px -2.25px hsl(0 0% 0% / 0.065), 0 18px 18px -9px hsl(0 0% 0% / 0.0875);

  &:active {
    translate: 0 1px;
  }

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

.hero-sm {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  container-type: inline-size;
  padding-inline: 1.5rem;
  background: var(--color-bg);
  color: var(--color-contrast-high);
  text-align: center;
  height: 100dvh;

  @media (min-width: 64rem) {
    display: none;
  }
}

.logo-lg {
  width: 220px;
  position: fixed;
  z-index: 2;
  top: 2.5rem;
  left: 2.5rem;
  color: var(--color-contrast-high);
  display: none;

  @media (min-width: 64rem) {
    display: block;
  }
}

.avatar {
  --avatar-size: 24px;
  --avatar-radius: 50%;

  width: 1em;
  height: 1em;
  font-size: var(--avatar-size);
  position: relative;
  display: block;
  border-radius: var(--avatar-radius);
}

.avatar::after, .avatar-img, .avatar-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (hover: hover) {
  .avatar-link:hover {
    opacity: 0.8;
  }
}

.avatar-link:focus-visible {
  outline: 1.5px solid var(--color-contrast-high);
  outline-offset: 1.5px;
}

.avatar::after { /* inset shadow */
  content: '';
  box-shadow: inset 0 0 0 1px hsla(223, 70%, 4%, 0); /* invisible by default */
  pointer-events: none;
}

.avatar-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

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

.avatar-group > *:not(:first-child) {
  margin-left: -0.15em;
}

.avatar-group :where(.avatar) {
  box-shadow: 0 0 0 2px var(--color-bg);
}

.section {
  position: relative;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  clip-path: inset(0);
  height: 100dvh;
}

@media (min-width: 40rem) {
  .section {
    padding: 6rem 1.5rem;
  }
}

@media (min-width: 64rem) {
  .section {
    height: 100dvh;
  }
}

.aside {
  width: 250px;
  border-radius: 8px;
  position: fixed;
  z-index: 2;
  top: 2.5rem;
  right: 2.5rem;
  background: var(--color-bg-light);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .08), inset 0 1px 0 hsl(0 0% 100% / .08), 0 0 0 1px hsl(from var(--color-black) h s l / 0.056), 0 1px 1px -.5px hsl(from var(--color-black) h s l / 0.055), 0 4.5px 4.5px -2.25px hsl(from var(--color-black) h s l / 0.065), 0 18px 18px -9px hsl(from var(--color-black) h s l / 0.0875);
  padding: 1rem;
  display: none;

  .btn {
    width: 100%;
  }
}

.aside-title {
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-contrast-high);
}

.aside-list {
  color: var(--color-contrast-medium);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.aside-item {
  display: flex;
  align-items: center;
}

.aside-item::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--color-contrast-medium);
  margin-right: 0.5rem;
  mask-size: 16px;
  mask-position: center;
  mask-repeat: no-repeat;
}

.aside-item:nth-child(1)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Cpath d='m14.1305,5.0489l-5.3805.9511V2c0-.4142.3358-.75.75-.75h4.5c.4142,0,.75.3358.75.75v2.3104c0,.3639-.2612.6752-.6195.7386Z' opacity='.3' stroke-width='0'%3E%3C/path%3E%3Cpath d='m10.3391,11.531l4.4109.969v-3.5c0-.4142-.3358-.75-.75-.75h-3.5c-.4142,0-.75.3358-.75.75v1.7984c0,.3522.2451.657.5891.7325Z' opacity='.3' stroke-width='0'%3E%3C/path%3E%3Cpath d='m6.75,7.75c0,1.1046-.8954,2-2,2s-2-.8954-2-2,.8954-2,2-2,2,.8954,2,2Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m1,14c.5491-1.1652,2.0308-2,3.7724-2s3.2233.8348,3.7724,2' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m14.1305,5.0489l-5.3805.9511V2c0-.4142.3358-.75.75-.75h4.5c.4142,0,.75.3358.75.75v2.3104c0,.3639-.2612.6752-.6195.7386Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m10.3391,11.531l4.4109.969v-3.5c0-.4142-.3358-.75-.75-.75h-3.5c-.4142,0-.75.3358-.75.75v1.7984c0,.3522.2451.657.5891.7325Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.aside-item:nth-child(2)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Cpath d='m10.0652,6.25l-1.0589-3.5h-4.5264c-.2752,0-.5383.1134-.7272.3135l-2.3658,2.506c-.1802.1909-.2701.4353-.2715.6805h4.9459l2.4554,7.4155c.0795-.0492.1626-.092.2285-.1656l5.8859-6.5771c.1715-.1917.2549-.4326.2535-.6729h-4.8193Z' opacity='.3' stroke-width='0'%3E%3C/path%3E%3Cpath d='m6.0613,6.25l2.4387,7.25m.5-10.75l1.0652,3.5' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m11.5201,2.75h-7.0402c-.2752,0-.5382.1134-.7272.3135l-2.3658,2.506c-.3567.3779-.3646.9661-.018,1.3533l5.8859,6.5771c.3975.4442,1.0929.4442,1.4904,0l5.8858-6.5771c.3466-.3873.3387-.9754-.018-1.3533l-2.3657-2.506c-.1889-.2001-.452-.3135-.7272-.3135Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m2,6.25h12' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m13.75,12.75l1,1' fill='none' stroke='%23000000' stroke-linecap='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m2.25,12.75l-1,1' fill='none' stroke='%23000000' stroke-linecap='round' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.aside-item:nth-child(3)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Ccircle cx='8' cy='8' r='7' opacity='.3' stroke-width='0'%3E%3C/circle%3E%3Cpath d='m3,3.101c-1.2372,1.2625-2,2.9917-2,4.899,0,3.866,3.134,7,7,7s7-3.134,7-7c0-1.9073-.7628-3.6364-2-4.899' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m1.5001,2.3534l2.4749-.3535-.3536,2.4749L1.5001,2.3534Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='m7.5379,4.3217c.1587-.429.7654-.429.9242,0l.7114,1.9226c.0998.2697.3125.4824.5822.5822l1.9225.7114c.429.1587.429.7654,0,.9242l-1.9225.7114c-.2697.0998-.4824.3125-.5822.5822l-.7114,1.9225c-.1587.429-.7654.429-.9242,0l-.7114-1.9225c-.0998-.2697-.3125-.4824-.5822-.5822l-1.9226-.7114c-.429-.1587-.429-.7654,0-.9242l1.9226-.7114c.2697-.0998.4824-.3125.5822-.5822l.7114-1.9226Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.aside-item:nth-child(4)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Ccircle cx='8' cy='8' r='7' opacity='.3' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/circle%3E%3Cpath d='m10,5.25h-2.875c-.7594,0-1.375.6155-1.3751,1.3748h0c-.0001.7595.6155,1.3753,1.3751,1.3753h.875s.8753,0,.8753,0c.7592,0,1.3748.6154,1.3748,1.3747h0c0,.7594-.6155,1.375-1.3748,1.375h-2.8753m2-6.4999v1.0002m0,6.4998v-1' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 64rem) {
  .aside {
    display: block;
  }
}

.preview-img {
  position: relative;
  z-index: 2;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-noise {
  position: absolute;
  z-index: 1;
  /* inset: 0; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .25;
  -webkit-filter: url(#noise-bg-fx) grayscale(100%);
          filter: url(#noise-bg-fx) grayscale(100%);
}
/* #endregion */

/* #region (util) */
:root {
  --f-family-heading: "Instrument Serif", 'Inter', system-ui, sans-serif;
  --f-family-body: 'Inter', system-ui, sans-serif;
}

[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*="--place-cont:"] { place-content: var(--place-cont); }
[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:"] { 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 (min-width: 64rem) {
  [style*="--d--at-lg:"] { display: var(--d--at-lg); }
  [style*="--size--at-lg:"] { width: var(--size--at-lg); height: var(--size--at-lg); }
  [style*="--w--at-lg:"] { width: var(--w--at-lg); }
  [style*="--h--at-lg:"] { height: var(--h--at-lg); }
  [style*="--min-w--at-lg:"] { min-width: var(--min-w--at-lg); }
  [style*="--min-h--at-lg:"] { min-height: var(--min-h--at-lg); }
  [style*="--max-w--at-lg:"] { max-width: var(--max-w--at-lg); }
  [style*="--max-h--at-lg:"] { max-height: var(--max-h--at-lg); }
  [style*="--p--at-lg:"] { padding: var(--p--at-lg); }
  [style*="--py--at-lg:"] { padding-top: var(--py--at-lg); padding-bottom: var(--py--at-lg); }
  [style*="--px--at-lg:"] { padding-left: var(--px--at-lg); padding-right: var(--px--at-lg); }
  [style*="--pt--at-lg:"] { padding-top: var(--pt--at-lg); }
  [style*="--pr--at-lg:"] { padding-right: var(--pr--at-lg); }
  [style*="--pb--at-lg:"] { padding-bottom: var(--pb--at-lg); }
  [style*="--pl--at-lg:"] { padding-left: var(--pl--at-lg); }
  [style*="--my--at-lg:"] { margin-top: var(--my--at-lg); margin-bottom: var(--my--at-lg); }
  [style*="--mx--at-lg:"] { margin-left: var(--mx--at-lg); margin-right: var(--mx--at-lg); }
  [style*="--mt--at-lg:"] { margin-top: var(--mt--at-lg); }
  [style*="--mr--at-lg:"] { margin-right: var(--mr--at-lg); }
  [style*="--mb--at-lg:"] { margin-bottom: var(--mb--at-lg); }
  [style*="--ml--at-lg:"] { margin-left: var(--ml--at-lg); }
  [style*="--bg--at-lg:"] { background: var(--bg--at-lg); }
  [style*="--radius--at-lg:"] { border-radius: var(--radius--at-lg); }
  [style*="--radius-tl--at-lg:"] { border-top-left-radius: var(--radius-tl--at-lg); }
  [style*="--radius-tr--at-lg:"] { border-top-right-radius: var(--radius-tr--at-lg); }
  [style*="--radius-br--at-lg:"] { border-bottom-right-radius: var(--radius-br--at-lg); }
  [style*="--radius-bl--at-lg:"] { border-bottom-left-radius: var(--radius-bl--at-lg); }
  [style*="--bd--at-lg:"] { border-width: var(--bd--at-lg); }
  [style*="--bd-y--at-lg:"] { border-block-width: var(--bd-y--at-lg); }
  [style*="--bd-x--at-lg:"] { border-inline-width: var(--bd-x--at-lg); }
  [style*="--bd-t--at-lg:"] { border-top-width: var(--bd-t--at-lg); }
  [style*="--bd-r--at-lg:"] { border-right-width: var(--bd-r--at-lg); }
  [style*="--bd-b--at-lg:"] { border-bottom-width: var(--bd-b--at-lg); }
  [style*="--bd-l--at-lg:"] { border-left-width: var(--bd-l--at-lg); }
  [style*="--bd-color--at-lg:"] { border-color: var(--bd-color--at-lg); }
  [style*="--bd-style--at-lg:"] { border-style: var(--bd-style--at-lg); }
  [style*="--shadow--at-lg:"] { box-shadow: var(--shadow--at-lg); }
  [style*="--pos--at-lg:"] { position: var(--pos--at-lg); }
  [style*="--inset--at-lg:"] { inset: var(--inset--at-lg); }
  [style*="--t--at-lg:"] { top: var(--t--at-lg); }
  [style*="--r--at-lg:"] { right: var(--r--at-lg); }
  [style*="--b--at-lg:"] { bottom: var(--b--at-lg); }
  [style*="--l--at-lg:"] { left: var(--l--at-lg); }
  [style*="--ov--at-lg:"] { overflow: var(--ov--at-lg); }
  [style*="--v--at-lg:"] { visibility: var(--v--at-lg); }
  [style*="--ar--at-lg:"] { aspect-ratio: var(--ar--at-lg); }
  [style*="--grid-tem-cols--at-lg:"] { grid-template-columns: var(--grid-tem-cols--at-lg); }
  [style*="--grid-tem-rows--at-lg:"] { grid-template-rows: var(--grid-tem-rows--at-lg); }
  [style*="--grid-cols--at-lg:"] { grid-template-columns: repeat(var(--grid-cols--at-lg), minmax(0, 1fr)); }
  [style*="--gap--at-lg:"] { gap: var(--gap--at-lg); }
  [style*="--col-gap--at-lg:"] { -moz-column-gap: var(--col-gap--at-lg); column-gap: var(--col-gap--at-lg); }
  [style*="--row-gap--at-lg:"] { row-gap: var(--row-gap--at-lg); }
  [style*="--col--at-lg:"] { grid-column: var(--col--at-lg); }
  [style*="--col-start--at-lg:"] { grid-column-start: var(--col-start--at-lg); }
  [style*="--col-end--at-lg:"] { grid-column-end: var(--col-end--at-lg); }
  [style*="--row--at-lg:"] { grid-row: var(--row--at-lg); }
  [style*="--row-start--at-lg:"] { grid-row-start: var(--row-start--at-lg); }
  [style*="--row-end--at-lg:"] { grid-row-end: var(--row-end--at-lg); }
  [style*="--just-cont--at-lg:"] { justify-content: var(--just-cont--at-lg); }
  [style*="--just-items--at-lg:"] { justify-items: var(--just-items--at-lg); }
  [style*="--align-items--at-lg:"] { align-items: var(--align-items--at-lg); }
  [style*="--align-cont--at-lg:"] { align-content: var(--align-cont--at-lg); }
  [style*="--place-items--at-lg:"] { place-items: var(--place-items--at-lg); }
  [style*="--place-cont--at-lg:"] { place-content: var(--place-cont--at-lg); }
  [style*="--fx-wrap--at-lg:"] { flex-wrap: var(--fx-wrap--at-lg); }
  [style*="--fx-direction--at-lg:"] { flex-direction: var(--fx-direction--at-lg); }
  [style*="--fx--at-lg:"] { flex: var(--fx--at-lg); }
  [style*="--fx-grow--at-lg:"] { flex-grow: var(--fx-grow--at-lg); }
  [style*="--fx-shrink--at-lg:"] { flex-shrink: var(--fx-shrink--at-lg); }
  [style*="--fx-basis--at-lg:"] { flex-basis: var(--fx-basis--at-lg); }
  [style*="--align-self--at-lg:"] { align-self: var(--align-self--at-lg); }
  [style*="--ord--at-lg:"] { order: var(--ord--at-lg); }
  [style*="--f-size--at-lg:"] { font-size: var(--f-size--at-lg); }
  [style*="--f-weight--at-lg:"] { font-weight: var(--f-weight--at-lg); }
  [style*="--lt-spacing--at-lg:"] { letter-spacing: var(--lt-spacing--at-lg); }
  [style*="--t-transform--at-lg:"] { text-transform: var(--t-transform--at-lg); }
  [style*="--t-align--at-lg:"] { text-align: var(--t-align--at-lg); }
  [style*="--t-wrap--at-lg:"] { text-wrap: var(--t-wrap--at-lg); }
  [style*="--ws--at-lg:"] { white-space: var(--ws--at-lg); }
  [style*="--float--at-lg:"] { float: var(--float--at-lg); }
  [style*="--v-align--at-lg:"] { vertical-align: var(--v-align--at-lg); }
  [style*="--translate--at-lg:"] { translate: var(--translate--at-lg); }
  [style*="--bd-filter--at-lg:"] { -webkit-backdrop-filter: var(--bd-filter--at-lg); backdrop-filter: var(--bd-filter--at-lg); }
  [style*="--filter--at-lg:"] { -webkit-filter: var(--filter--at-lg); filter: var(--filter--at-lg); }
  [style*="--line-clamp--at-lg:"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp--at-lg); }
}

@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 { 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:"]::selection { background: var(--bg--selection); }
[style*="--color--selection:"]::selection { color: var(--color--selection); }

[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 oklch(100% 0 0 / .8);
  outline-offset: 3px;
}

[style*="--translate--active:"]:active { translate: var(--translate--active); }
/* #endregion */

/* #region (themes) */
[style*="--theme: default"] {
  --color-bg: #EDEDED;
  --color-bg-light: #ffff;
  --color-contrast-medium: #737373;
  --color-contrast-high: #0a0a0a;
  --color-primary: #6B17F5;
  --color-secondary: #6B17F5;
  --color-black: #0a0a0a;
  --color-btn-text: var(--color-bg);
}

[style*="--theme: grayscale"] {
  --color-bg: #EDEDED;
  --color-bg-light: #fafafa;
  --color-contrast-medium: #A0A2A6;
  --color-contrast-high: #101010;
  --color-primary: #101010;
  --color-secondary: #101010;
  --color-black: #101010;
  --color-btn-text: var(--color-bg);
}

[style*="--theme: dark"] {
  --color-bg: #0a0a0a;
  --color-bg-light: #262626;
  --color-contrast-medium: #737373;
  --color-contrast-high: #fafafa;
  --color-primary: #fafafa;
  --color-secondary: #fafafa;
  --color-black: #0a0a0a;
  --color-btn-text: var(--color-bg);
}

[style*="--theme: blue-orange"] {
  --color-bg: #fff;
  --color-bg-light: #fff;
  --color-contrast-medium: hsl(241 92% 53% / 0.7);
  --color-contrast-high: #1B17F5;
  --color-primary: #FF8222;
  --color-secondary: #FF8222;
  --color-black: #0a0a0a;
  --color-btn-text: var(--color-bg);
}

[style*="--theme: retro-sunrise"] {
  --color-bg: #FED4E7;
  --color-bg-light: #FEE6F1;
  --color-contrast-medium: #82026293;
  --color-contrast-high: #820263;
  --color-primary: #820263;
  --color-secondary: #FFF;
  --color-black: #0a0a0a;
  --color-btn-text: #FFF;
}

[style*="--theme: urban-oasis"] {
  --color-bg: #C8D3D5;
  --color-bg-light: #FCFAFA;
  --color-contrast-medium: #6E8387;
  --color-contrast-high: #090B0B;
  --color-primary: #473BF0;
  --color-secondary: #473BF0;
  --color-black: #0a0a0a;
  --color-btn-text: #FFF;
}
/* #endregion */