.gls-glassmorphism-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #0f172a), color-mix(in srgb, var(--c) 25%, #312e81));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glassmorphism-card-orbit {
  position: absolute;
  inset: 0;
  animation: gls-glassmorphism-card-spin 16s linear infinite;
}
.gls-glassmorphism-card-blob {
  position: absolute;
  border-radius: 50%;
}
.gls-glassmorphism-card-blob:nth-child(1) {
  left: 3.6em;
  top: 0.1em;
  width: 6.4em;
  height: 6.4em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
}
.gls-glassmorphism-card-blob:nth-child(2) {
  right: 3.9em;
  bottom: 0.9em;
  width: 5.4em;
  height: 5.4em;
  background: linear-gradient(135deg, #fcd34d, #ec4899);
}
.gls-glassmorphism-card-pane {
  position: relative;
  width: 13.5em;
  padding: 1em 1.25em 1.2em;
  border-radius: 1em;
  background: color-mix(in srgb, #fff 18%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glassmorphism-card-pane:hover { transform: translateY(-0.25em); }
.gls-glassmorphism-card-icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin-bottom: 0.7em;
  border-radius: 0.6em;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.gls-glassmorphism-card-icon svg { width: 1.1em; height: 1.1em; }
.gls-glassmorphism-card-title { margin: 0; font-size: 1.05em; font-weight: 650; }
.gls-glassmorphism-card-text {
  margin: 0.3em 0 0;
  font-size: 0.78em;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.82);
}
@keyframes gls-glassmorphism-card-spin {
  to { transform: rotate(1turn); }
}

.gls-liquid-glass-button {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #0b1026), color-mix(in srgb, var(--c) 30%, #3b0764));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-liquid-glass-button-dots {
  position: absolute;
  inset: -2.2em;
  background: radial-gradient(circle, rgb(255 255 255 / 0.6) 0.13em, transparent 0.15em) 0 0 / 1.1em 1.1em;
  animation: gls-liquid-glass-button-drift 5s linear infinite;
}
.gls-liquid-glass-button-orb {
  position: absolute;
  left: 3em;
  top: 1.4em;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, #f472b6 45%, color-mix(in srgb, var(--c) 60%, #7c3aed) 75%, transparent 76%);
  animation: gls-liquid-glass-button-orb 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-button-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 1em 1.7em 1em 1.9em;
  border: 0;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  font: 650 1.05em/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  text-shadow: 0 0.05em 0.35em rgb(0 0 0 / 0.45);
  box-shadow: 0 0.7em 1.4em -0.5em rgb(0 0 0 / 0.5);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* frosted layer: the fallback every browser draws */
.gls-liquid-glass-button-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(0.12em) saturate(1.8);
  backdrop-filter: blur(0.12em) saturate(1.8);
}
/* refraction layer: Chromium bends the backdrop through the SVG map */
.gls-liquid-glass-button-lens {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: url(#gls-liquid-glass-button-lens);
}
/* specular rim and a soft top sheen */
.gls-liquid-glass-button-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 55%);
  box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gls-liquid-glass-button-arrow {
  width: 1em;
  height: 1em;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-liquid-glass-button-btn:hover { transform: scale(1.07); }
.gls-liquid-glass-button-btn:hover .gls-liquid-glass-button-arrow { transform: translateX(0.2em); }
.gls-liquid-glass-button-btn:active { transform: scale(0.96); transition-duration: 0.15s; }
.gls-liquid-glass-button-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0.2em; }
.gls-liquid-glass-button-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-button-drift {
  to { transform: translate(1.1em, 1.1em); }
}
@keyframes gls-liquid-glass-button-orb {
  to { transform: translate(8.5em, 1.6em) scale(0.85); }
}

.gls-liquid-glass-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #1e1b4b) 0%, color-mix(in srgb, var(--c) 30%, #9d174d) 55%, #f97316 100%);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-liquid-glass-card-sun {
  position: absolute;
  left: 50%;
  top: 1.3em;
  width: 7.4em;
  height: 7.4em;
  margin-left: -3.7em;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 0.5em, color-mix(in srgb, var(--c) 35%, #831843) 0.5em 0.85em) 0 55% / 100% 45% no-repeat,
    linear-gradient(180deg, #fef08a, #fb923c 60%, #ec4899);
  box-shadow: 0 0 2.5em rgb(251 146 60 / 0.45);
}
.gls-liquid-glass-card-hills {
  position: absolute;
  inset: auto 0 0;
  height: 4.2em;
  background:
    radial-gradient(60% 100% at 18% 100%, color-mix(in srgb, var(--c) 45%, #1e1b4b) 98%, transparent 100%),
    radial-gradient(55% 90% at 82% 100%, color-mix(in srgb, var(--c) 35%, #312e81) 98%, transparent 100%),
    linear-gradient(transparent 55%, color-mix(in srgb, var(--c) 40%, #0f172a) 55%);
}
.gls-liquid-glass-card-pane {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  width: 10.5em;
  height: 6em;
  padding: 0.9em 1em;
  border-radius: 1.5em;
  box-shadow: 0 1em 2em -0.8em rgb(0 0 0 / 0.55);
  animation: gls-liquid-glass-card-glide 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-card-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(0.14em) saturate(1.7) brightness(1.08);
  backdrop-filter: blur(0.14em) saturate(1.7) brightness(1.08);
}
.gls-liquid-glass-card-lens {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: url(#gls-liquid-glass-card-lens);
}
.gls-liquid-glass-card-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.2), transparent 40%);
  box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22);
  pointer-events: none;
}
.gls-liquid-glass-card-kicker {
  margin: 0;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.gls-liquid-glass-card-title {
  margin: 0.15em 0 0;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0.05em 0.4em rgb(0 0 0 / 0.35);
}
.gls-liquid-glass-card-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-card-glide {
  from { transform: translate(-3.6em, 0.3em) rotate(-2deg); }
  to { transform: translate(3.6em, -0.3em) rotate(2deg); }
}

.gls-glass-navbar {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 30%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-navbar-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-navbar-orb-a {
  left: -1em;
  top: -2.5em;
  width: 7em;
  height: 7em;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 70%);
  animation: gls-glass-navbar-drift-a 8s ease-in-out infinite alternate;
}
.gls-glass-navbar-orb-b {
  right: -0.5em;
  top: -1.5em;
  width: 6em;
  height: 6em;
  background: radial-gradient(circle at 40% 40%, #fde68a, #f472b6 70%);
  animation: gls-glass-navbar-drift-b 9s ease-in-out infinite alternate;
}
.gls-glass-navbar-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.8em;
  padding: 0.3em 0.3em 0.3em 0.8em;
  border-radius: 99em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  font-size: 0.76em;
}
.gls-glass-navbar-bar a { color: inherit; text-decoration: none; }
.gls-glass-navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-right: 0.3em;
  font-weight: 750;
}
.gls-glass-navbar-mark {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--c), #f472b6, #fde68a, var(--c));
}
.gls-glass-navbar-links {
  position: relative;
  display: flex;
}
.gls-glass-navbar-link {
  position: relative;
  width: 4em;
  padding: 0.5em 0;
  border-radius: 99em;
  text-align: center;
  font-weight: 550;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.gls-glass-navbar-link:hover,
.gls-glass-navbar-link[aria-current="page"] { opacity: 1; }
.gls-glass-navbar-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.gls-glass-navbar-pill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0.2em 0.5em -0.2em rgb(0 0 0 / 0.3);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gls-glass-navbar-links:has(.gls-glass-navbar-link:nth-of-type(2):hover) .gls-glass-navbar-pill { transform: translateX(4em); }
.gls-glass-navbar-links:has(.gls-glass-navbar-link:nth-of-type(3):hover) .gls-glass-navbar-pill { transform: translateX(8em); }
.gls-glass-navbar-bar .gls-glass-navbar-cta {
  margin-left: 0.2em;
  padding: 0.5em 0.95em;
  border-radius: 99em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 70%, #0f172a);
  font-weight: 650;
  transition: transform 0.25s ease;
}
.gls-glass-navbar-bar .gls-glass-navbar-cta:hover { transform: scale(1.05); }
.gls-glass-navbar-hero {
  margin: auto 0;
  text-align: center;
}
.gls-glass-navbar-heading {
  margin: 0;
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.gls-glass-navbar-sub {
  margin: 0.35em 0 0;
  font-size: 0.75em;
  color: rgb(255 255 255 / 0.75);
}
@keyframes gls-glass-navbar-drift-a {
  to { transform: translate(9em, 0.8em); }
}
@keyframes gls-glass-navbar-drift-b {
  to { transform: translate(-10em, 1em) scale(1.15); }
}

.gls-glassmorphism-login-form {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #581c87));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glassmorphism-login-form-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glassmorphism-login-form-orb-a {
  left: 3.2em;
  top: 0.6em;
  width: 5.6em;
  height: 5.6em;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  animation: gls-glassmorphism-login-form-float 6s ease-in-out infinite alternate;
}
.gls-glassmorphism-login-form-orb-b {
  right: 3.4em;
  bottom: 0.5em;
  width: 4.8em;
  height: 4.8em;
  background: linear-gradient(140deg, #fcd34d, #f43f5e);
  animation: gls-glassmorphism-login-form-float 7s ease-in-out -3s infinite alternate-reverse;
}
.gls-glassmorphism-login-form-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45em;
  width: 11.5em;
  margin: 0;
  padding: 0.85em 0.95em 0.95em;
  border-radius: 1em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glassmorphism-login-form-title {
  margin: 0 0 0.15em;
  font-size: 0.95em;
  font-weight: 700;
  text-align: center;
}
.gls-glassmorphism-login-form-field {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 2.1em;
  padding: 0 0.7em;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 0.65em;
  background: rgb(255 255 255 / 0.12);
  cursor: text;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.gls-glassmorphism-login-form-field svg {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  opacity: 0.8;
}
.gls-glassmorphism-login-form-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.75em;
}
.gls-glassmorphism-login-form-field input::placeholder { color: rgb(255 255 255 / 0.7); }
.gls-glassmorphism-login-form-field:hover { background: rgb(255 255 255 / 0.17); }
.gls-glassmorphism-login-form-field:focus-within {
  border-color: rgb(255 255 255 / 0.75);
  background: rgb(255 255 255 / 0.2);
  box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--c) 45%, transparent);
}
.gls-glassmorphism-login-form-submit {
  position: relative;
  overflow: hidden;
  height: 2.2em;
  margin-top: 0.2em;
  border: 0;
  border-radius: 0.65em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  color: #fff;
  font: 650 0.8em/1 system-ui, sans-serif;
  box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 80%, #000);
  cursor: pointer;
}
.gls-glassmorphism-login-form-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.5) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.gls-glassmorphism-login-form-submit:hover::after { transform: translateX(100%); }
.gls-glassmorphism-login-form-submit:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glassmorphism-login-form-float {
  to { transform: translate(0.8em, 1.4em) scale(1.08); }
}

.gls-liquid-glass-switch {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 50%, #0f172a), color-mix(in srgb, var(--c) 30%, #134e4a));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-liquid-glass-switch-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-liquid-glass-switch-orb-a {
  left: 2.5em;
  top: 1em;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, #5eead4, var(--c));
  animation: gls-liquid-glass-switch-sway 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-switch-orb-b {
  right: 2.8em;
  bottom: 0.8em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #fb7185);
  animation: gls-liquid-glass-switch-sway 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-liquid-glass-switch-row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 15.5em;
  padding: 0.75em 0.8em;
  border-radius: 1.2em;
  box-shadow: 0 0.6em 1.5em -0.6em rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.25);
  cursor: pointer;
}
.gls-liquid-glass-switch-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
}
.gls-liquid-glass-switch-row input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gls-liquid-glass-switch-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 0.6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
}
.gls-liquid-glass-switch-icon svg { width: 1.1em; height: 1.1em; }
.gls-liquid-glass-switch-text { display: grid; flex: 1; }
.gls-liquid-glass-switch-name { font-size: 0.85em; font-weight: 650; }
.gls-liquid-glass-switch-hint { font-size: 0.65em; color: rgb(255 255 255 / 0.72); }
.gls-liquid-glass-switch-track {
  position: relative;
  flex: none;
  width: 3.9em;
  height: 1.85em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.22);
  box-shadow: inset 0 0.08em 0.2em rgb(0 0 0 / 0.25);
  transition: background-color 0.35s ease;
}
.gls-liquid-glass-switch-row input:checked + .gls-liquid-glass-switch-track { background: var(--c); }
.gls-liquid-glass-switch-row input:focus-visible + .gls-liquid-glass-switch-track { outline: 2px solid #fff; outline-offset: 0.18em; }
.gls-liquid-glass-switch-thumb {
  position: absolute;
  left: 0.18em;
  top: 0.18em;
  width: 2.35em;
  height: 1.49em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.12em 0.35em rgb(0 0 0 / 0.3);
  transition: translate 0.5s cubic-bezier(0.34, 1.45, 0.64, 1), scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}
.gls-liquid-glass-switch-row input:checked + .gls-liquid-glass-switch-track .gls-liquid-glass-switch-thumb { translate: 1.19em 0; }
.gls-liquid-glass-switch-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: url(#gls-liquid-glass-switch-lens);
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* rim light and sheen, drawn above the lens */
.gls-liquid-glass-switch-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0) 55%);
  box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22);
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* hover or press: the thumb turns into a clear lens */
.gls-liquid-glass-switch-row:hover .gls-liquid-glass-switch-thumb {
  scale: 1.3 1.4;
  background: rgb(255 255 255 / 0.12);
  box-shadow: 0 0.2em 0.5em rgb(0 0 0 / 0.25);
}
.gls-liquid-glass-switch-row:hover .gls-liquid-glass-switch-lens,
.gls-liquid-glass-switch-row:hover .gls-liquid-glass-switch-thumb::after { opacity: 1; }
.gls-liquid-glass-switch-row:active .gls-liquid-glass-switch-thumb { scale: 1.45 1.55; }
.gls-liquid-glass-switch-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-switch-sway {
  to { transform: translate(2.5em, 0.8em) scale(1.1); }
}

.gls-liquid-glass-tab-bar {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c) 30%, #0f172a);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-liquid-glass-tab-bar-feed {
  position: absolute;
  inset: 0.5em 0.5em auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
  animation: gls-liquid-glass-tab-bar-scroll 12s linear infinite;
}
.gls-liquid-glass-tab-bar-feed span {
  height: 4.4em;
  border-radius: 0.8em;
  background: radial-gradient(circle at 28% 30%, rgb(255 255 255 / 0.55), transparent 32%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 1) { --a: color-mix(in srgb, var(--c) 50%, #fff); --b: var(--c); }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 2) { --a: #fde68a; --b: #f97316; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 3) { --a: #f9a8d4; --b: #db2777; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 4) { --a: #6ee7b7; --b: #0d9488; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 5) { --a: #c4b5fd; --b: #7c3aed; }
.gls-liquid-glass-tab-bar-feed span:nth-child(6n + 6) { --a: #fca5a5; --b: color-mix(in srgb, var(--c) 40%, #dc2626); }
.gls-liquid-glass-tab-bar-bar {
  position: absolute;
  left: 50%;
  bottom: 0.7em;
  isolation: isolate;
  display: flex;
  padding: 0.25em;
  border-radius: 99em;
  translate: -50% 0;
  box-shadow: 0 0.6em 1.4em -0.4em rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.gls-liquid-glass-tab-bar-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(15 23 42 / 0.4);
  -webkit-backdrop-filter: blur(0.8em) saturate(1.8);
  backdrop-filter: blur(0.8em) saturate(1.8);
}
.gls-liquid-glass-tab-bar-tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1em;
  width: 3.6em;
  height: 2.6em;
  border-radius: 99em;
  color: rgb(255 255 255 / 0.85);
  cursor: pointer;
  transition: color 0.3s ease;
}
.gls-liquid-glass-tab-bar-tab input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gls-liquid-glass-tab-bar-tab svg {
  width: 1.15em;
  height: 1.15em;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-liquid-glass-tab-bar-tab span { font-size: 0.55em; font-weight: 600; }
.gls-liquid-glass-tab-bar-tab:hover svg { transform: translateY(-0.1em); }
.gls-liquid-glass-tab-bar-tab:has(input:checked) { color: color-mix(in srgb, var(--c) 55%, #fff); }
.gls-liquid-glass-tab-bar-tab:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: -2px; }
.gls-liquid-glass-tab-bar-drop {
  position: absolute;
  left: 0.1em;
  top: 0.1em;
  z-index: 2;
  width: 3.9em;
  height: 2.9em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22);
  backdrop-filter: url(#gls-liquid-glass-tab-bar-lens);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(2) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(3.6em); }
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(3) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(7.2em); }
.gls-liquid-glass-tab-bar-bar:has(.gls-liquid-glass-tab-bar-tab:nth-of-type(4) input:checked) .gls-liquid-glass-tab-bar-drop { transform: translateX(10.8em); }
.gls-liquid-glass-tab-bar-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-tab-bar-scroll {
  to { transform: translateY(-9.7em); }
}

.gls-frosted-glass-panel {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c) 45%, #0f172a);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-frosted-glass-panel-aurora {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(closest-side at 32% 40%, color-mix(in srgb, var(--c) 90%, #fff), transparent),
    radial-gradient(closest-side at 68% 58%, #f472b6, transparent),
    radial-gradient(closest-side at 50% 30%, #facc15, transparent 80%),
    radial-gradient(closest-side at 40% 70%, #2dd4bf, transparent);
  animation: gls-frosted-glass-panel-turn 14s linear infinite;
}
.gls-frosted-glass-panel-pane {
  position: relative;
  overflow: hidden;
  width: 14em;
  padding: 1.1em 1.25em 1.2em;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 1.1em;
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(1.5em) saturate(1.3);
  backdrop-filter: blur(1.5em) saturate(1.3);
  box-shadow: inset 0 0 1.6em rgb(255 255 255 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0.8em 2em -1em rgb(0 0 0 / 0.5);
}
.gls-frosted-glass-panel-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.gls-frosted-glass-panel-kicker {
  position: relative;
  margin: 0;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.gls-frosted-glass-panel-title {
  position: relative;
  margin: 0.25em 0 0;
  font-size: 1.2em;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.gls-frosted-glass-panel-text {
  position: relative;
  margin: 0.35em 0 0;
  font-size: 0.75em;
  color: rgb(255 255 255 / 0.85);
}
@keyframes gls-frosted-glass-panel-turn {
  to { transform: rotate(1turn); }
}

.gls-liquid-glass-magnifier {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle, rgb(255 255 255 / 0.3) 0.08em, transparent 0.1em) 0 0 / 0.7em 0.7em, linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 35%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-liquid-glass-magnifier-print {
  width: 17em;
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--c) 40%, #fff), #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gls-liquid-glass-magnifier-path {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.4em;
  height: 5.4em;
  margin: -2.7em 0 0 -2.7em;
  animation: gls-liquid-glass-magnifier-x 5.2s ease-in-out infinite alternate;
}
.gls-liquid-glass-magnifier-lens {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.35), transparent 30%);
  -webkit-backdrop-filter: saturate(1.4) brightness(1.08);
  backdrop-filter: url(#gls-liquid-glass-magnifier-lens) saturate(1.4) brightness(1.08);
  box-shadow:
    inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    inset 0.25em 0 0.4em -0.3em rgb(34 211 238 / 0.6),
    inset -0.25em 0 0.4em -0.3em rgb(244 114 182 / 0.6),
    0 0.8em 1.5em -0.6em rgb(0 0 0 / 0.6);
  animation: gls-liquid-glass-magnifier-y 3.4s ease-in-out infinite alternate;
}
.gls-liquid-glass-magnifier-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-magnifier-x {
  from { transform: translateX(-7em); }
  to { transform: translateX(7em); }
}
@keyframes gls-liquid-glass-magnifier-y {
  from { transform: translateY(-2.4em); }
  to { transform: translateY(2.4em); }
}

.gls-macos-glass-dock {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 40%, #1e1b4b), color-mix(in srgb, var(--c) 25%, #6d28d9));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-macos-glass-dock::before,
.gls-macos-glass-dock::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-macos-glass-dock::before {
  left: -25%;
  top: 48%;
  width: 95%;
  height: 120%;
  background: linear-gradient(20deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff) 70%);
  box-shadow: 0 0 2em color-mix(in srgb, var(--c) 60%, transparent);
  animation: gls-macos-glass-dock-wave 9s ease-in-out infinite alternate;
}
.gls-macos-glass-dock::after {
  right: -30%;
  top: 38%;
  width: 85%;
  height: 110%;
  background: linear-gradient(200deg, #fde68a, #fb7185 60%);
  box-shadow: 0 0 2em rgb(251 113 133 / 0.5);
  animation: gls-macos-glass-dock-wave 11s ease-in-out -5s infinite alternate-reverse;
}
.gls-macos-glass-dock-dock {
  position: absolute;
  left: 50%;
  bottom: 0.6em;
  display: flex;
  align-items: flex-end;
  gap: 0.4em;
  padding: 0.38em 0.45em 0.5em;
  border-radius: 1.05em;
  translate: -50% 0;
  background: color-mix(in srgb, #fff 18%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-macos-glass-dock-app {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.55em;
  background: var(--tile);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0.15em 0.35em rgb(0 0 0 / 0.3);
  transform-origin: 50% 100%;
  transition: scale 0.25s ease, translate 0.25s ease, margin 0.25s ease;
}
.gls-macos-glass-dock-app svg { width: 1.35em; height: 1.35em; }
.gls-macos-glass-dock-app:nth-child(1) { --tile: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); }
.gls-macos-glass-dock-app:nth-child(2) { --tile: linear-gradient(180deg, #86efac, #16a34a); }
.gls-macos-glass-dock-app:nth-child(3) { --tile: linear-gradient(180deg, #fda4af, #e11d48); }
.gls-macos-glass-dock-app:nth-child(4) {
  --tile: #fff;
  animation: gls-macos-glass-dock-launch 4s linear infinite;
}
.gls-macos-glass-dock-app:nth-child(5) { --tile: #fff; }
.gls-macos-glass-dock-app:nth-child(6) { --tile: linear-gradient(180deg, #d1d5db, #6b7280); }
/* running indicator */
.gls-macos-glass-dock-app:nth-child(-n + 3)::before,
.gls-macos-glass-dock-app:nth-child(4)::before {
  content: "";
  position: absolute;
  bottom: -0.32em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.85);
}
/* app name above the hovered icon */
.gls-macos-glass-dock-app::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 0.5em);
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  background: rgb(15 23 42 / 0.6);
  color: #fff;
  font-size: 0.4em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: 0 0.3em;
  transition: opacity 0.2s ease, translate 0.2s ease;
  pointer-events: none;
}
.gls-macos-glass-dock-app:hover {
  scale: 1.45;
  translate: 0 -0.3em;
  margin-inline: 0.5em;
}
.gls-macos-glass-dock-app:hover::after { opacity: 1; translate: 0 0; }
.gls-macos-glass-dock-app:has(+ .gls-macos-glass-dock-app:hover),
.gls-macos-glass-dock-app:hover + .gls-macos-glass-dock-app {
  scale: 1.2;
  translate: 0 -0.12em;
  margin-inline: 0.22em;
}
.gls-macos-glass-dock-app:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-macos-glass-dock-launch {
  0%, 36%, 100% { transform: translateY(0); animation-timing-function: ease-out; }
  6% { transform: translateY(-0.9em); animation-timing-function: ease-in; }
  12% { transform: translateY(0); animation-timing-function: ease-out; }
  18% { transform: translateY(-0.9em); animation-timing-function: ease-in; }
  24% { transform: translateY(0); animation-timing-function: ease-out; }
  30% { transform: translateY(-0.9em); animation-timing-function: ease-in; }
}
@keyframes gls-macos-glass-dock-wave {
  to { transform: translate(12%, -8%) rotate(8deg); }
}

.gls-dark-glassmorphism-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #05060b), #0a0a12);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-dark-glassmorphism-card-glow {
  position: absolute;
  z-index: -1;
  width: 9em;
  height: 9em;
  border-radius: 50%;
}
.gls-dark-glassmorphism-card-glow-a {
  left: 1.5em;
  top: -1.5em;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: gls-dark-glassmorphism-card-drift 7s ease-in-out infinite alternate;
}
.gls-dark-glassmorphism-card-glow-b {
  right: 1em;
  bottom: -2em;
  background: radial-gradient(closest-side, #d946ef, transparent);
  animation: gls-dark-glassmorphism-card-drift 8s ease-in-out -3s infinite alternate-reverse;
}
.gls-dark-glassmorphism-card-pane {
  width: 14.5em;
  padding: 0.95em 1.1em 0.8em;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1.1em;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.01)), rgb(8 8 14 / 0.4);
  -webkit-backdrop-filter: blur(1em) saturate(1.6);
  backdrop-filter: blur(1em) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1em 2.2em -1em rgb(0 0 0 / 0.9);
}
.gls-dark-glassmorphism-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gls-dark-glassmorphism-card-label {
  font-size: 0.7em;
  font-weight: 550;
  color: rgb(255 255 255 / 0.6);
}
.gls-dark-glassmorphism-card-badge {
  padding: 0.25em 0.6em;
  border-radius: 99em;
  background: rgb(34 197 94 / 0.15);
  color: #4ade80;
  font-size: 0.6em;
  font-weight: 700;
}
.gls-dark-glassmorphism-card-value {
  margin: 0.15em 0 0.35em;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gls-dark-glassmorphism-card-chart {
  display: block;
  width: 100%;
  height: 2.6em;
  overflow: visible;
}
.gls-dark-glassmorphism-card-line {
  stroke-width: 0.16em;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  animation: gls-dark-glassmorphism-card-draw 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gls-dark-glassmorphism-card-area { animation: gls-dark-glassmorphism-card-area 4.5s ease infinite; }
@keyframes gls-dark-glassmorphism-card-draw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  45%, 82% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes gls-dark-glassmorphism-card-area {
  0%, 25% { opacity: 0; }
  50%, 82% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes gls-dark-glassmorphism-card-drift {
  to { transform: translate(4em, 1.5em) scale(1.15); }
}

.gls-glass-toast-notification {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 50%, #1e1b4b), color-mix(in srgb, var(--c) 30%, #9d174d) 70%, #f97316);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-toast-notification-orb {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -3em;
  width: 11em;
  height: 11em;
  margin-left: -5.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 45%, transparent 70%);
  animation: gls-glass-toast-notification-orb 8s ease-in-out infinite alternate;
}
.gls-glass-toast-notification-clock {
  position: absolute;
  bottom: 0.35em;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 3.4em;
  font-weight: 250;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.9);
}
.gls-glass-toast-notification-toast {
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: 16.5em;
  margin-top: 0.75em;
  padding: 0.6em 0.75em;
  border-radius: 1.1em;
  background: color-mix(in srgb, #fff 24%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  animation: gls-glass-toast-notification-show 5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.gls-glass-toast-notification:hover .gls-glass-toast-notification-toast { animation-play-state: paused; }
.gls-glass-toast-notification-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 0.55em;
  background: linear-gradient(180deg, #86efac, #16a34a);
}
.gls-glass-toast-notification-icon svg { width: 1.2em; height: 1.2em; }
.gls-glass-toast-notification-body { display: grid; flex: 1; min-width: 0; }
.gls-glass-toast-notification-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.72em;
}
.gls-glass-toast-notification-top time { color: rgb(255 255 255 / 0.7); }
.gls-glass-toast-notification-msg {
  overflow: hidden;
  font-size: 0.7em;
  color: rgb(255 255 255 / 0.9);
  white-space: nowrap;
  text-overflow: ellipsis;
}
@keyframes gls-glass-toast-notification-show {
  0% { opacity: 0; transform: translateY(-4em) scale(0.94); }
  10% { opacity: 1; transform: translateY(0.25em) scale(1); }
  15%, 74% { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(-4em) scale(0.94); }
}
@keyframes gls-glass-toast-notification-orb {
  to { transform: translate(3em, 1em) scale(1.1); }
}

.gls-glass-credit-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 20%, #1e1b4b));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  perspective: 40em;}
.gls-glass-credit-card-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-credit-card-orb-a {
  left: 3.5em;
  top: 0.4em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 60%, #7c3aed);
  animation: gls-glass-credit-card-orb 7s ease-in-out infinite alternate;
}
.gls-glass-credit-card-orb-b {
  right: 2.4em;
  bottom: -0.6em;
  width: 5.5em;
  height: 5.5em;
  background: linear-gradient(135deg, #fde68a, #f97316 50%, #db2777);
  animation: gls-glass-credit-card-orb 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-glass-credit-card-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  width: 13.2em;
  height: 8.3em;
  padding: 0.85em 1em;
  border-radius: 0.9em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  background-image: linear-gradient(135deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.02));
  animation: gls-glass-credit-card-float 6s ease-in-out infinite alternate;
}
.gls-glass-credit-card-card::after {
  content: "";
  position: absolute;
  inset: 0 -100%;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.28) 45%, rgb(165 243 252 / 0.22) 49%, rgb(251 207 232 / 0.28) 53%, transparent 60%);
  animation: gls-glass-credit-card-sheen 4s ease-in-out infinite;
  pointer-events: none;
}
.gls-glass-credit-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gls-glass-credit-card-brand {
  font-size: 0.95em;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}
.gls-glass-credit-card-wave { width: 1.1em; height: 1.1em; opacity: 0.85; }
.gls-glass-credit-card-chip {
  width: 1.9em;
  height: 1.45em;
  border-radius: 0.3em;
  background:
    linear-gradient(90deg, transparent 32%, rgb(120 72 0 / 0.35) 32% 36%, transparent 36% 64%, rgb(120 72 0 / 0.35) 64% 68%, transparent 68%),
    linear-gradient(180deg, transparent 45%, rgb(120 72 0 / 0.35) 45% 55%, transparent 55%),
    linear-gradient(135deg, #fde68a, #d4a017 55%, #fef3c7);
}
.gls-glass-credit-card-number {
  margin: 0;
  font: 600 0.82em/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 0.05em 0.2em rgb(0 0 0 / 0.3);
}
.gls-glass-credit-card-field {
  display: grid;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 0.05em 0.3em rgb(0 0 0 / 0.35);
}
.gls-glass-credit-card-field small {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
@keyframes gls-glass-credit-card-float {
  from { transform: rotateX(8deg) rotateY(-12deg) translateY(0.2em); }
  to { transform: rotateX(-5deg) rotateY(10deg) translateY(-0.3em); }
}
@keyframes gls-glass-credit-card-sheen {
  0% { transform: translateX(-35%); }
  60%, 100% { transform: translateX(35%); }
}
@keyframes gls-glass-credit-card-orb {
  to { transform: translate(1.5em, 1.2em) scale(1.1); }
}

.gls-glass-music-player {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #1e1b4b), color-mix(in srgb, var(--c) 25%, #831843));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-music-player-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-music-player-orb-a {
  left: 1.5em;
  top: -1em;
  width: 7em;
  height: 7em;
  background: linear-gradient(135deg, #f0abfc, var(--c));
  animation: gls-glass-music-player-orb 7s ease-in-out infinite alternate;
}
.gls-glass-music-player-orb-b {
  right: 2em;
  bottom: -1.5em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, #fde047, #fb7185);
  animation: gls-glass-music-player-orb 9s ease-in-out -4s infinite alternate-reverse;
}
.gls-glass-music-player-card {
  display: flex;
  gap: 0.9em;
  width: 17.5em;
  padding: 0.8em;
  border-radius: 1.2em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-music-player-art {
  flex: none;
  width: 5.4em;
  height: 5.4em;
  border-radius: 0.8em;
  background:
    radial-gradient(circle at 50% 110%, #fde047 0 1.6em, transparent 1.65em),
    repeating-linear-gradient(180deg, transparent 0 0.3em, rgb(76 5 25 / 0.35) 0.3em 0.45em) 0 100% / 100% 45% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #1e1b4b), #db2777 70%, #fb923c);
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.5);
}
.gls-glass-music-player-info {
  display: grid;
  flex: 1;
  min-width: 0;
  align-content: space-between;
}
.gls-glass-music-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.gls-glass-music-player-meta { display: grid; }
.gls-glass-music-player-meta b { font-size: 0.85em; font-weight: 650; }
.gls-glass-music-player-meta span { font-size: 0.68em; color: rgb(255 255 255 / 0.72); }
.gls-glass-music-player-eq {
  display: flex;
  align-items: flex-end;
  gap: 0.12em;
  height: 0.9em;
  margin-top: 0.15em;
}
.gls-glass-music-player-eq i {
  width: 0.16em;
  height: 100%;
  border-radius: 0.1em;
  background: #fff;
  transform-origin: bottom;
  animation: gls-glass-music-player-eq 0.9s ease-in-out infinite alternate;
}
.gls-glass-music-player-eq i:nth-child(2) { animation-delay: -0.35s; }
.gls-glass-music-player-eq i:nth-child(3) { animation-delay: -0.6s; }
.gls-glass-music-player-eq i:nth-child(4) { animation-delay: -0.15s; }
.gls-glass-music-player-bar {
  position: relative;
  height: 0.28em;
  margin-top: 0.4em;
  overflow: hidden;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.25);
}
.gls-glass-music-player-bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  animation: gls-glass-music-player-progress 16s linear infinite;
}
.gls-glass-music-player-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.55em;
  color: rgb(255 255 255 / 0.7);
  font-variant-numeric: tabular-nums;
}
.gls-glass-music-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.gls-glass-music-player-controls button {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.gls-glass-music-player-controls svg { width: 0.9em; height: 0.9em; }
.gls-glass-music-player-controls button:hover { background: rgb(255 255 255 / 0.2); }
.gls-glass-music-player-controls button:active { transform: scale(0.9); }
.gls-glass-music-player-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.gls-glass-music-player-controls .gls-glass-music-player-play {
  width: 2.1em;
  height: 2.1em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 60%, #1e1b4b);
}
.gls-glass-music-player-controls .gls-glass-music-player-play:hover { background: #fff; transform: scale(1.08); }
@keyframes gls-glass-music-player-eq {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}
@keyframes gls-glass-music-player-progress {
  from { transform: scaleX(0.05); }
  to { transform: scaleX(1); }
}
@keyframes gls-glass-music-player-orb {
  to { transform: translate(2.5em, 1.5em) scale(1.12); }
}

.gls-glass-weather-widget {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #0c4a6e), color-mix(in srgb, var(--c) 45%, #7dd3fc));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-weather-widget-sun {
  position: absolute;
  z-index: -1;
  right: 3.2em;
  top: 0.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0 1.3em, #facc15 1.35em 1.8em, transparent 1.85em), repeating-conic-gradient(rgb(253 224 71 / 0.75) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent);
  mask: radial-gradient(closest-side, #000 70%, transparent);
  animation: gls-glass-weather-widget-spin 20s linear infinite;
}
.gls-glass-weather-widget-cloud {
  position: absolute;
  z-index: -1;
  height: 1.8em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 1em -0.8em 0 0.3em #fff, 2.3em -0.2em 0 0.1em #fff;
}
.gls-glass-weather-widget-cloud-a {
  left: 1em;
  top: 2.8em;
  width: 4.2em;
  animation: gls-glass-weather-widget-drift 14s ease-in-out infinite alternate;
}
.gls-glass-weather-widget-cloud-b {
  left: 8em;
  bottom: 1.3em;
  width: 3.4em;
  opacity: 0.85;
  animation: gls-glass-weather-widget-drift 11s ease-in-out -6s infinite alternate-reverse;
}
.gls-glass-weather-widget-card {
  width: 14em;
  padding: 0.8em 0.95em 0.7em;
  border-radius: 1.2em;
  background: color-mix(in srgb, #fff 18%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  text-shadow: 0 0.05em 0.3em rgb(12 74 110 / 0.35);
}
.gls-glass-weather-widget-now { display: grid; }
.gls-glass-weather-widget-city { font-size: 0.78em; font-weight: 650; }
.gls-glass-weather-widget-temp {
  font-size: 2.4em;
  font-weight: 250;
  line-height: 1.05;
}
.gls-glass-weather-widget-cond { font-size: 0.62em; font-weight: 550; opacity: 0.9; }
.gls-glass-weather-widget-hours {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0.55em 0 0;
  padding: 0.5em 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.3);
  list-style: none;
  text-align: center;
}
.gls-glass-weather-widget-hours li {
  display: grid;
  justify-items: center;
  gap: 0.2em;
}
.gls-glass-weather-widget-hours span { font-size: 0.55em; font-weight: 600; opacity: 0.85; }
.gls-glass-weather-widget-hours b { font-size: 0.62em; font-weight: 650; }
.gls-glass-weather-widget-sunny,
.gls-glass-weather-widget-cloudy {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
}
.gls-glass-weather-widget-sunny {
  background: #fde047;
  box-shadow: 0 0 0.35em #fde047;
}
.gls-glass-weather-widget-cloudy {
  background: radial-gradient(circle at 70% 30%, #fde047 0 0.22em, transparent 0.24em), radial-gradient(circle at 40% 70%, #fff 0 0.34em, transparent 0.36em), radial-gradient(circle at 70% 72%, #e2e8f0 0 0.28em, transparent 0.3em);
}
@keyframes gls-glass-weather-widget-spin {
  to { transform: rotate(1turn); }
}
@keyframes gls-glass-weather-widget-drift {
  to { transform: translateX(9em); }
}

.gls-glass-profile-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #3b0764));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-profile-card-orb {
  position: absolute;
  z-index: -1;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-profile-card-orb-a {
  left: 1.2em;
  top: 0.6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
}
.gls-glass-profile-card-orb-b {
  right: 1.2em;
  bottom: 0.6em;
  background: linear-gradient(135deg, #fcd34d, #ec4899);
}
.gls-glass-profile-card:hover .gls-glass-profile-card-orb-a { transform: translate(3.5em, 1em); }
.gls-glass-profile-card:hover .gls-glass-profile-card-orb-b { transform: translate(-3.5em, -1em); }
.gls-glass-profile-card-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 16em;
  padding: 1em 1.1em;
  border-radius: 1.1em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-profile-card:hover .gls-glass-profile-card-card { transform: translateY(-0.3em); }
.gls-glass-profile-card-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4em;
  height: 3.4em;
  border: 0.15em solid rgb(255 255 255 / 0.6);
  border-radius: 50%;
  background: linear-gradient(135deg, #fda4af, color-mix(in srgb, var(--c) 70%, #7c3aed));
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gls-glass-profile-card-avatar i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #22c55e;
}
.gls-glass-profile-card-avatar i:first-of-type { animation: gls-glass-profile-card-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.gls-glass-profile-card-avatar i:last-of-type { box-shadow: 0 0 0 0.12em rgb(255 255 255 / 0.9); }
.gls-glass-profile-card-info { min-width: 0; }
.gls-glass-profile-card-name { margin: 0; font-size: 0.95em; font-weight: 650; }
.gls-glass-profile-card-role {
  margin: 0.1em 0 0.6em;
  font-size: 0.66em;
  color: rgb(255 255 255 / 0.75);
}
.gls-glass-profile-card-actions { display: flex; gap: 0.4em; }
.gls-glass-profile-card-actions a {
  padding: 0.5em 0.9em;
  border-radius: 99em;
  font-size: 0.66em;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.gls-glass-profile-card-follow { background: #fff; color: color-mix(in srgb, var(--c) 60%, #0f172a); }
.gls-glass-profile-card-follow:hover { background: rgb(255 255 255 / 0.85); }
.gls-glass-profile-card-message {
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.gls-glass-profile-card-message:hover { background: rgb(255 255 255 / 0.22); }
.gls-glass-profile-card-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-profile-card-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.gls-glass-pricing-card {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #134e4a));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-pricing-card-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-pricing-card-orb-a {
  left: 1.8em;
  bottom: 0.2em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, #5eead4, var(--c));
  animation: gls-glass-pricing-card-orb 7s ease-in-out infinite alternate;
}
.gls-glass-pricing-card-orb-b {
  right: 2em;
  top: 0.2em;
  width: 5.5em;
  height: 5.5em;
  background: linear-gradient(135deg, #fef08a, #f472b6);
  animation: gls-glass-pricing-card-orb 8s ease-in-out -3s infinite alternate-reverse;
}
.gls-glass-pricing-card-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1em;
  width: 19em;
  padding: 0.95em 1.1em;
  border-radius: 1.2em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-pricing-card-card:hover { transform: translateY(-0.3em); }
.gls-glass-pricing-card-card::before {
  content: "";
  position: absolute;
  inset: -50% auto -50% 0;
  width: 3em;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: translateX(-4em) rotate(20deg);
  animation: gls-glass-pricing-card-sweep 4.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  pointer-events: none;
}
.gls-glass-pricing-card-plan {
  display: grid;
  justify-items: start;
  flex: none;
  width: 6.6em;
}
.gls-glass-pricing-card-badge {
  padding: 0.3em 0.65em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.9);
  color: color-mix(in srgb, var(--c) 70%, #0f172a);
  font-size: 0.52em;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gls-glass-pricing-card-name { margin: 0.45em 0 0; font-size: 0.8em; font-weight: 600; opacity: 0.85; }
.gls-glass-pricing-card-price {
  margin: 0 0 0.35em;
  font-size: 2.1em;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.gls-glass-pricing-card-price span { font-size: 0.35em; font-weight: 550; letter-spacing: 0; opacity: 0.75; }
.gls-glass-pricing-card-cta {
  justify-self: stretch;
  padding: 0.6em 0;
  border-radius: 0.6em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 70%, #0f172a);
  font-size: 0.68em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.gls-glass-pricing-card-cta:hover { transform: scale(1.04); }
.gls-glass-pricing-card-cta:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
.gls-glass-pricing-card-features {
  display: grid;
  gap: 0.55em;
  margin: 0;
  padding: 0 0 0 1em;
  border-left: 1px solid rgb(255 255 255 / 0.3);
  list-style: none;
  font-size: 0.7em;
}
.gls-glass-pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.gls-glass-pricing-card-features li::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
@keyframes gls-glass-pricing-card-sweep {
  0% { transform: translateX(-4em) rotate(20deg); }
  45%, 100% { transform: translateX(23em) rotate(20deg); }
}
@keyframes gls-glass-pricing-card-orb {
  to { transform: translate(2em, -1em) scale(1.1); }
}

.gls-glass-modal-dialog {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c) 15%, #f1f5f9);
  color: #0f172a;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-modal-dialog-app {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.6em 1fr;
  gap: 0.6em;
  padding: 0.7em;
}
.gls-glass-modal-dialog-top {
  grid-column: 1 / -1;
  border-radius: 0.6em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #1e293b) 0 2.5em, transparent 2.5em), rgb(255 255 255 / 0.8);
}
.gls-glass-modal-dialog-tile {
  border-radius: 0.8em;
  background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.6), transparent 35%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-glass-modal-dialog-tile:nth-child(2) { --a: color-mix(in srgb, var(--c) 40%, #fff); --b: var(--c); }
.gls-glass-modal-dialog-tile:nth-child(3) { --a: #fde68a; --b: #f97316; }
.gls-glass-modal-dialog-tile:nth-child(4) { --a: #f9a8d4; --b: #db2777; }
.gls-glass-modal-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / 0.3);
  -webkit-backdrop-filter: blur(0.3em);
  backdrop-filter: blur(0.3em);
  animation: gls-glass-modal-dialog-overlay 6s ease infinite;
}
.gls-glass-modal-dialog-dialog {
  position: relative;
  display: grid;
  justify-items: center;
  width: 12.5em;
  padding: 0.95em 1em 0.9em;
  border-radius: 1.2em;
  text-align: center;
  background: color-mix(in srgb, #fff 55%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  animation: gls-glass-modal-dialog-pop 6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.gls-glass-modal-dialog:hover .gls-glass-modal-dialog-overlay,
.gls-glass-modal-dialog:hover .gls-glass-modal-dialog-dialog { animation-play-state: paused; }
.gls-glass-modal-dialog-icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgb(244 63 94 / 0.15);
  color: #e11d48;
}
.gls-glass-modal-dialog-icon svg { width: 1.05em; height: 1.05em; }
.gls-glass-modal-dialog-title { margin: 0.45em 0 0; font-size: 0.9em; font-weight: 700; }
.gls-glass-modal-dialog-text {
  margin: 0.25em 0 0.8em;
  font-size: 0.64em;
  line-height: 1.4;
  color: rgb(15 23 42 / 0.7);
}
.gls-glass-modal-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
  width: 100%;
}
.gls-glass-modal-dialog-actions button {
  padding: 0.6em 0;
  border: 0;
  border-radius: 0.6em;
  font: 650 0.66em/1 system-ui, sans-serif;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.gls-glass-modal-dialog-actions button:hover { filter: brightness(1.08); transform: translateY(-0.08em); }
.gls-glass-modal-dialog-actions button:focus-visible { outline: 2px solid #0f172a; outline-offset: 0.15em; }
.gls-glass-modal-dialog-cancel {
  background: rgb(255 255 255 / 0.55);
  color: #0f172a;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.12);
}
.gls-glass-modal-dialog-delete { background: #e11d48; color: #fff; }
@keyframes gls-glass-modal-dialog-overlay {
  0%, 6% { opacity: 0; }
  16%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes gls-glass-modal-dialog-pop {
  0%, 12% { opacity: 0; transform: translateY(0.8em) scale(0.9); }
  20% { opacity: 1; transform: translateY(-0.1em) scale(1.02); }
  25%, 76% { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(0.4em) scale(0.95); }
}

.gls-glass-search-bar {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-search-bar-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-search-bar-orb-a {
  left: 2.5em;
  top: 3em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-search-bar-orb 7s ease-in-out infinite alternate;
}
.gls-glass-search-bar-orb-b {
  right: 1.5em;
  top: 3.8em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-search-bar-orb 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-glass-search-bar-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1em;
  margin: 0;
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  color: rgb(255 255 255 / 0.9);
}
.gls-glass-search-bar-box {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 1.3em;
}
.gls-glass-search-bar-field {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 13.5em;
  height: 2.5em;
  padding: 0 0.5em 0 0.9em;
  border-radius: 99em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  cursor: text;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}
.gls-glass-search-bar-field svg { flex: none; width: 0.95em; height: 0.95em; }
.gls-glass-search-bar-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.8em;
}
.gls-glass-search-bar-field input::placeholder { color: rgb(255 255 255 / 0.72); }
.gls-glass-search-bar-field input::-webkit-search-cancel-button { display: none; }
.gls-glass-search-bar-field kbd {
  flex: none;
  padding: 0.3em 0.5em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.18);
  font: 600 0.6em/1 system-ui, sans-serif;
  transition: opacity 0.25s ease;
}
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-field {
  width: 17em;
  background-color: rgb(255 255 255 / 0.24);
  box-shadow: 0 0 0 0.2em rgb(255 255 255 / 0.18), 0 0.8em 1.8em -0.6em rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.gls-glass-search-bar-box:focus-within kbd { opacity: 0; }
.gls-glass-search-bar-list {
  position: absolute;
  top: calc(100% + 0.45em);
  display: grid;
  width: 17em;
  margin: 0;
  padding: 0.35em;
  border-radius: 1em;
  list-style: none;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4em) scale(0.97);
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.3s;
}
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.1s, 0.1s, 0s;
}
.gls-glass-search-bar-list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.6em;
  border-radius: 0.65em;
  font-size: 0.72em;
  opacity: 0;
  transform: translateY(-0.3em);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-list li { opacity: 1; transform: none; }
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-list li:nth-child(1) { transition-delay: 0.15s; }
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-list li:nth-child(2) { transition-delay: 0.22s; }
.gls-glass-search-bar-box:is(:hover, :focus-within) .gls-glass-search-bar-list li:nth-child(3) { transition-delay: 0.29s; }
.gls-glass-search-bar-list li:hover { background: rgb(255 255 255 / 0.18); }
.gls-glass-search-bar-list span {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.45em;
  background: rgb(255 255 255 / 0.2);
  font-weight: 700;
}
@keyframes gls-glass-search-bar-orb {
  to { transform: translate(2.5em, 1em) scale(1.1); }
}

.gls-glass-sidebar {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #0f172a), color-mix(in srgb, var(--c) 20%, #312e81));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-sidebar-board {
  position: absolute;
  inset: 0.7em 0.7em 0.7em 4.3em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 3.2em 1fr;
  gap: 0.6em;
}
.gls-glass-sidebar-stat {
  border-radius: 0.8em;
  background: radial-gradient(circle at 80% 20%, rgb(255 255 255 / 0.45), transparent 40%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-glass-sidebar-stat:nth-child(1) { --a: color-mix(in srgb, var(--c) 40%, #fff); --b: var(--c); }
.gls-glass-sidebar-stat:nth-child(2) { --a: #fde68a; --b: #f472b6; }
.gls-glass-sidebar-chart {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 0.45em;
  padding: 0.6em 0.8em 0;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.06);
}
.gls-glass-sidebar-chart i {
  flex: 1;
  height: 90%;
  border-radius: 0.35em 0.35em 0 0;
  background: linear-gradient(180deg, #5eead4, var(--c));
  transform-origin: bottom;
  animation: gls-glass-sidebar-bar 2.8s ease-in-out infinite alternate;
}
.gls-glass-sidebar-chart i:nth-child(2) { animation-delay: -0.6s; }
.gls-glass-sidebar-chart i:nth-child(3) { animation-delay: -1.8s; }
.gls-glass-sidebar-chart i:nth-child(4) { animation-delay: -1s; }
.gls-glass-sidebar-chart i:nth-child(5) { animation-delay: -2.4s; }
.gls-glass-sidebar-chart i:nth-child(6) { animation-delay: -0.3s; }
.gls-glass-sidebar-chart i:nth-child(7) { animation-delay: -1.4s; }
.gls-glass-sidebar-rail {
  position: absolute;
  inset: 0.7em auto 0.7em 0.7em;
  display: grid;
  align-content: start;
  gap: 0.3em;
  width: 3em;
  padding: 0.4em;
  overflow: hidden;
  border-radius: 1em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) { width: 9.5em; }
.gls-glass-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.2em;
  padding: 0 0.55em;
  border-radius: 0.7em;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.gls-glass-sidebar-item svg { flex: none; width: 1.1em; height: 1.1em; }
.gls-glass-sidebar-item span {
  font-size: 0.75em;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-0.4em);
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) .gls-glass-sidebar-item span {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.gls-glass-sidebar-item b {
  position: absolute;
  left: 1.35em;
  top: 0.3em;
  display: grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  border-radius: 99em;
  background: #f43f5e;
  font-size: 0.55em;
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s ease;
}
.gls-glass-sidebar-rail:is(:hover, :focus-within) .gls-glass-sidebar-item b { left: 12em; top: 1.05em; }
.gls-glass-sidebar-item:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.gls-glass-sidebar-item[aria-current="page"] {
  background: rgb(255 255 255 / 0.22);
  color: #fff;
  box-shadow: inset 0.18em 0 0 var(--c), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.gls-glass-sidebar-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes gls-glass-sidebar-bar {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

.gls-glass-dropdown-menu {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #581c87));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-dropdown-menu-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-dropdown-menu-orb-a {
  left: 3.5em;
  top: 3.5em;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-dropdown-menu-orb 7s ease-in-out infinite alternate;
}
.gls-glass-dropdown-menu-orb-b {
  right: 3.2em;
  top: 5.5em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-dropdown-menu-orb 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-glass-dropdown-menu-menu {
  position: relative;
  margin-top: 0.8em;
}
.gls-glass-dropdown-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.75em 0.35em 0.35em;
  border-radius: 99em;
  background: color-mix(in srgb, #fff 18%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  font-size: 0.82em;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.gls-glass-dropdown-menu-trigger::-webkit-details-marker { display: none; }
.gls-glass-dropdown-menu-trigger:hover { background-color: rgb(255 255 255 / 0.26); }
.gls-glass-dropdown-menu-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
.gls-glass-dropdown-menu-avatar {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, #fda4af, var(--c));
  font-size: 0.85em;
  font-weight: 750;
}
.gls-glass-dropdown-menu-chevron {
  width: 1em;
  height: 1em;
  transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-dropdown-menu-menu[open] .gls-glass-dropdown-menu-chevron { rotate: 180deg; }
.gls-glass-dropdown-menu-list {
  position: absolute;
  top: calc(100% + 0.45em);
  left: 50%;
  width: 12.5em;
  margin: 0;
  padding: 0.35em;
  border-radius: 1em;
  list-style: none;
  background: color-mix(in srgb, #fff 20%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  translate: -50% 0;
  transform-origin: 50% 0;
  animation: gls-glass-dropdown-menu-drop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gls-glass-dropdown-menu-list a {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.5em 0.6em;
  border-radius: 0.6em;
  color: inherit;
  font-size: 0.72em;
  font-weight: 550;
  text-decoration: none;
  animation: gls-glass-dropdown-menu-item 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background-color 0.2s ease;
}
.gls-glass-dropdown-menu-list li:nth-child(2) a { animation-delay: 0.05s; }
.gls-glass-dropdown-menu-list li:nth-child(3) a { animation-delay: 0.1s; }
.gls-glass-dropdown-menu-list li:nth-child(4) a { animation-delay: 0.15s; }
.gls-glass-dropdown-menu-list a:hover { background: rgb(255 255 255 / 0.2); }
.gls-glass-dropdown-menu-list a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.gls-glass-dropdown-menu-list svg { flex: none; width: 1.15em; height: 1.15em; opacity: 0.9; }
.gls-glass-dropdown-menu-list kbd {
  margin-left: auto;
  font: inherit;
  font-size: 0.9em;
  opacity: 0.6;
}
.gls-glass-dropdown-menu-danger {
  margin-top: 0.3em;
  padding-top: 0.3em;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.gls-glass-dropdown-menu-danger a { color: #fecdd3; }
.gls-glass-dropdown-menu-danger a:hover { background: rgb(244 63 94 / 0.28); color: #fff; }
@keyframes gls-glass-dropdown-menu-drop {
  from { opacity: 0; transform: translateY(-0.5em) scale(0.95); }
}
@keyframes gls-glass-dropdown-menu-item {
  from { opacity: 0; transform: translateY(-0.35em); }
}
@keyframes gls-glass-dropdown-menu-orb {
  to { transform: translate(2em, -1.2em) scale(1.1); }
}

.gls-liquid-glass-slider {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 50%, #0f172a), color-mix(in srgb, var(--c) 25%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  --v: 0.6;
  --label: "60%";}
.gls-liquid-glass-slider:has(input[value="0"]:checked) { --v: 0; --label: "0%"; }
.gls-liquid-glass-slider:has(input[value="20"]:checked) { --v: 0.2; --label: "20%"; }
.gls-liquid-glass-slider:has(input[value="40"]:checked) { --v: 0.4; --label: "40%"; }
.gls-liquid-glass-slider:has(input[value="80"]:checked) { --v: 0.8; --label: "80%"; }
.gls-liquid-glass-slider:has(input[value="100"]:checked) { --v: 1; --label: "100%"; }
.gls-liquid-glass-slider-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-liquid-glass-slider-orb-a {
  left: 2.8em;
  top: 0.8em;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-liquid-glass-slider-orb 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-slider-orb-b {
  right: 2.5em;
  bottom: 0.6em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #fb7185);
  animation: gls-liquid-glass-slider-orb 8s ease-in-out -4s infinite alternate-reverse;
}
.gls-liquid-glass-slider-panel {
  position: relative;
  isolation: isolate;
  padding: 0.8em 1em 0.95em;
  border-radius: 1.2em;
  box-shadow: 0 0.6em 1.5em -0.6em rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.gls-liquid-glass-slider-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
}
.gls-liquid-glass-slider-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.7em;
  font-size: 0.75em;
  font-weight: 650;
}
.gls-liquid-glass-slider-value { font-variant-numeric: tabular-nums; opacity: 0.8; }
.gls-liquid-glass-slider-value::after { content: var(--label); }
.gls-liquid-glass-slider-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.gls-liquid-glass-slider-row > svg { flex: none; width: 1em; height: 1em; opacity: 0.85; }
.gls-liquid-glass-slider-track {
  position: relative;
  width: 11em;
  height: 0.42em;
  border-radius: 99em;
  background: rgb(255 255 255 / 0.25);
}
.gls-liquid-glass-slider-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c));
  clip-path: inset(0 calc(100% - 1.2em - var(--v) * 8.6em) 0 0 round 99em);
  transition: clip-path 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gls-liquid-glass-slider-stops {
  position: absolute;
  inset: -1em -0.4em;
  z-index: 3;
  display: flex;
}
.gls-liquid-glass-slider-stops label {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.gls-liquid-glass-slider-stops input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gls-liquid-glass-slider-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 2.4em;
  height: 1.5em;
  margin-top: -0.75em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.12em 0.35em rgb(0 0 0 / 0.3);
  translate: calc(var(--v) * 8.6em) 0;
  pointer-events: none;
  transition: translate 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.gls-liquid-glass-slider-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0) 55%);
  box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
    inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
    inset 0 0 0 1px rgb(255 255 255 / 0.22);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gls-liquid-glass-slider-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: url(#gls-liquid-glass-slider-lens);
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* hover or press: the thumb turns into a clear lens */
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-thumb {
  scale: 1.35 1.5;
  background: rgb(255 255 255 / 0.12);
}
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-lens,
.gls-liquid-glass-slider-track:hover .gls-liquid-glass-slider-thumb::after { opacity: 1; }
.gls-liquid-glass-slider-track:has(input:focus-visible) .gls-liquid-glass-slider-thumb { outline: 2px solid #fff; outline-offset: 0.2em; }
.gls-liquid-glass-slider-svg {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes gls-liquid-glass-slider-orb {
  to { transform: translate(2.5em, 1em) scale(1.1); }
}

.gls-glass-calculator {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 30%, #1e1b4b));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-calculator-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-calculator-orb-a {
  right: 3em;
  top: 0.8em;
  width: 6.5em;
  height: 6.5em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-calculator-float-a 8s ease-in-out infinite alternate;
}
.gls-glass-calculator-orb-b {
  left: 2.6em;
  bottom: 0.6em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-calculator-float-b 9s ease-in-out infinite alternate;
}
.gls-glass-calculator-body {
  display: grid;
  grid-template-columns: 6.8em auto;
  gap: 0.55em;
  padding: 0.55em;
  border-radius: 1.15em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-calculator-screen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.6em 0.65em 0.5em;
  border-radius: 0.75em;
  background: rgb(15 23 42 / 0.24);
  box-shadow: inset 0 0.1em 0.35em rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(255 255 255 / 0.2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gls-glass-calculator-history { margin-bottom: auto; font-size: 0.55em; opacity: 0.55; }
.gls-glass-calculator-expr { font-size: 0.66em; opacity: 0.8; }
.gls-glass-calculator-result {
  font-size: 1.55em;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gls-glass-calculator-result::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.85em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  animation: gls-glass-calculator-caret 1.1s steps(1) infinite;
}
.gls-glass-calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1.95em);
  grid-auto-rows: 1.3em;
  gap: 0.28em;
}
.gls-glass-calculator-keys button {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.75em;
  background: rgb(255 255 255 / 0.13);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.72em;
  font-weight: 600;
  cursor: pointer;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.gls-glass-calculator-keys .gls-glass-calculator-fn { background: rgb(255 255 255 / 0.3); }
.gls-glass-calculator-keys .gls-glass-calculator-op {
  background: color-mix(in srgb, var(--c) 72%, transparent);
  font-size: 0.9em;
}
.gls-glass-calculator-keys .gls-glass-calculator-eq {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  font-size: 0.9em;
}
.gls-glass-calculator-keys .gls-glass-calculator-zero {
  grid-column: span 2;
  place-items: center start;
  padding-left: 1.05em;
}
.gls-glass-calculator-keys button:hover { filter: brightness(1.3); }
.gls-glass-calculator-keys button:active {
  scale: 0.9;
  transition-duration: 0.08s;
}
.gls-glass-calculator-keys button:focus-visible { outline: 2px solid #fff; outline-offset: 0.12em; }
@keyframes gls-glass-calculator-float-a {
  to { transform: translate(-3.5em, 1.4em) scale(1.12); }
}
@keyframes gls-glass-calculator-float-b {
  to { transform: translate(3em, -2.2em) scale(0.9); }
}
@keyframes gls-glass-calculator-caret {
  50% { opacity: 0; }
}

.gls-glass-header-on-scroll {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: block;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, #0b1020), #0b1020);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-header-on-scroll-page {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 3.6em 1.3em 1em;
  animation: gls-glass-header-on-scroll-scroll 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gls-glass-header-on-scroll-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -2em;
  top: 1.2em;
  width: 12em;
  height: 9em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.85;
}
.gls-glass-header-on-scroll-kicker {
  display: inline-block;
  margin: 0 0 0.9em;
  padding: 0.35em 0.8em;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 25%, transparent);
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gls-glass-header-on-scroll-hero {
  margin: 0;
  font-size: 1.95em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, #fff 45%, color-mix(in srgb, var(--c) 40%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gls-glass-header-on-scroll-lede {
  margin: 0.6em 0 1.1em;
  font-size: 0.66em;
  opacity: 0.7;
}
.gls-glass-header-on-scroll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}
.gls-glass-header-on-scroll-grid span {
  height: 3em;
  border-radius: 0.7em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.gls-glass-header-on-scroll-grid span:nth-child(4n + 1) { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); }
.gls-glass-header-on-scroll-grid span:nth-child(4n + 2) { background: linear-gradient(135deg, #fde68a, #f472b6); }
.gls-glass-header-on-scroll-grid span:nth-child(4n + 3) { background: linear-gradient(135deg, #5eead4, #6366f1); }
.gls-glass-header-on-scroll-grid span:nth-child(4n) { background: linear-gradient(135deg, #fdba74, #a855f7); }
.gls-glass-header-on-scroll-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: 2.6em;
  padding: 0 0.8em 0 1.3em;
}
/* the frost: faded in as content scrolls underneath */
.gls-glass-header-on-scroll-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(0.8em) saturate(1.6);
  backdrop-filter: blur(0.8em) saturate(1.6);
  box-shadow: 0 0.5em 1.2em -0.6em rgb(0 0 0 / 0.55);
  opacity: 0;
  animation: gls-glass-header-on-scroll-frost 9s ease infinite;
}
.gls-glass-header-on-scroll-logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  font-size: 0.8em;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.gls-glass-header-on-scroll-logo i {
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.35em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.gls-glass-header-on-scroll-nav {
  display: flex;
  gap: 0.15em;
  margin-left: auto;
}
.gls-glass-header-on-scroll-nav a {
  padding: 0.45em 0.7em;
  border-radius: 99em;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.66em;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.gls-glass-header-on-scroll-nav a:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
.gls-glass-header-on-scroll-cta {
  padding: 0.5em 0.95em;
  border-radius: 99em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 60%, #0f172a);
  font-size: 0.66em;
  font-weight: 700;
  text-decoration: none;
  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-header-on-scroll-cta:hover { scale: 1.06; }
.gls-glass-header-on-scroll-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-header-on-scroll-scroll {
  0%, 10% { transform: translateY(0); }
  40%, 60% { transform: translateY(-7em); }
  90%, 100% { transform: translateY(0); }
}
@keyframes gls-glass-header-on-scroll-frost {
  0%, 14% { opacity: 0; }
  24%, 78% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

.gls-glass-clock-widget {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 50%, #0f172a), color-mix(in srgb, var(--c) 30%, #312e81));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-clock-widget-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-clock-widget-orb-a {
  left: 1.6em;
  top: 0.3em;
  width: 7em;
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-clock-widget-drift-a 9s ease-in-out infinite alternate;
}
.gls-glass-clock-widget-orb-b {
  right: 1.8em;
  bottom: 0.2em;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, #fdba74, #ec4899);
  animation: gls-glass-clock-widget-drift-b 10s ease-in-out infinite alternate;
}
.gls-glass-clock-widget-card {
  --m: 9;
  display: flex;
  gap: 0.95em;
  margin: 0;
  padding: 0.85em 1.05em 0.7em;
  border-radius: 1.3em;
  list-style: none;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-clock-widget-city {
  display: grid;
  justify-items: center;
  line-height: 1.25;
}
.gls-glass-clock-widget-city:nth-child(1) { --h: 2; }
.gls-glass-clock-widget-city:nth-child(2) { --h: 5; }
.gls-glass-clock-widget-city:nth-child(3) { --h: 10; }
.gls-glass-clock-widget-city:nth-child(4) { --h: 11; }
.gls-glass-clock-widget-city b { font-size: 0.6em; font-weight: 700; letter-spacing: 0.05em; }
.gls-glass-clock-widget-city small { font-size: 0.5em; font-weight: 600; opacity: 0.75; }
.gls-glass-clock-widget-dial {
  position: relative;
  width: 3.3em;
  height: 3.3em;
  margin-bottom: 0.4em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: #111827;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 0.35em 0.8em -0.35em rgb(0 0 0 / 0.45);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-clock-widget-night .gls-glass-clock-widget-dial {
  background: rgb(15 23 42 / 0.6);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.3), 0 0.35em 0.8em -0.35em rgb(0 0 0 / 0.5);
}
.gls-glass-clock-widget-city:hover .gls-glass-clock-widget-dial { scale: 1.08; }
/* twelve hour ticks: a conic gradient masked to a ring */
.gls-glass-clock-widget-dial::before {
  content: "";
  position: absolute;
  inset: 0.2em;
  border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, currentColor 0 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  opacity: 0.55;
}
/* center cap, painted over the hands */
.gls-glass-clock-widget-dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.26em;
  height: 0.26em;
  margin: -0.13em 0 0 -0.13em;
  border-radius: 50%;
  background: #f97316;
}
.gls-glass-clock-widget-hour,
.gls-glass-clock-widget-min,
.gls-glass-clock-widget-sec {
  position: absolute;
  left: 50%;
  bottom: 50%;
  border-radius: 99em;
  background: currentColor;
  transform-origin: 50% 100%;
  animation: gls-glass-clock-widget-turn linear infinite;
}
.gls-glass-clock-widget-hour {
  width: 0.17em;
  height: 0.8em;
  margin-left: -0.085em;
  transform: rotate(calc(var(--h) * 30deg + var(--m) * 0.5deg));
  animation-duration: 43200s;
}
.gls-glass-clock-widget-min {
  width: 0.12em;
  height: 1.2em;
  margin-left: -0.06em;
  transform: rotate(calc(var(--m) * 6deg));
  animation-duration: 3600s;
}
.gls-glass-clock-widget-sec {
  width: 0.07em;
  height: 1.55em;
  margin: 0 0 -0.3em -0.035em;
  background: #f97316;
  transform-origin: 50% calc(100% - 0.3em);
  transform: rotate(240deg);
  animation-duration: 60s;
}
@keyframes gls-glass-clock-widget-turn {
  to { rotate: 1turn; }
}
@keyframes gls-glass-clock-widget-drift-a {
  to { transform: translate(4em, 1.5em) scale(1.1); }
}
@keyframes gls-glass-clock-widget-drift-b {
  to { transform: translate(-4.5em, -1em) scale(0.9); }
}

.gls-glass-chat-bubbles {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--c) 40%, #1e1b4b);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-chat-bubbles-wall {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(38% 50% at 28% 32%, color-mix(in srgb, var(--c) 80%, #fff), transparent 70%),
    radial-gradient(42% 48% at 74% 68%, #f472b6, transparent 70%),
    radial-gradient(30% 36% at 72% 26%, #fbbf24, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #1e1b4b), #4c1d95);
  animation: gls-glass-chat-bubbles-wall 12s ease-in-out infinite alternate;
}
.gls-glass-chat-bubbles-chat {
  display: grid;
  gap: 0.5em;
  width: 15em;
}
.gls-glass-chat-bubbles-time {
  margin: 0;
  font-size: 0.55em;
  font-weight: 600;
  text-align: center;
  opacity: 0.8;
}
.gls-glass-chat-bubbles-thread {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gls-glass-chat-bubbles-in,
.gls-glass-chat-bubbles-out {
  grid-column: 1;
  max-width: 75%;
  padding: 0.5em 0.85em;
  border-radius: 1.1em;
  font-size: 0.72em;
  line-height: 1.3;
  animation: 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.gls-glass-chat-bubbles-in {
  justify-self: start;
  border-bottom-left-radius: 0.3em;
  background: color-mix(in srgb, #fff 22%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transform-origin: 0 100%;
}
.gls-glass-chat-bubbles-out {
  justify-self: end;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-bottom-right-radius: 0.3em;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.2), transparent 70%), color-mix(in srgb, var(--c) 75%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  box-shadow: 0 0.5em 1.2em -0.6em rgb(0 0 0 / 0.45);
  transform-origin: 100% 100%;
}
.gls-glass-chat-bubbles-m1 { grid-row: 1; animation-name: gls-glass-chat-bubbles-m1; }
.gls-glass-chat-bubbles-m2 { grid-row: 2; animation-name: gls-glass-chat-bubbles-m2; }
.gls-glass-chat-bubbles-m3 { grid-row: 3; animation-name: gls-glass-chat-bubbles-m3; }
.gls-glass-chat-bubbles-typing {
  grid-row: 3;
  display: flex;
  gap: 0.28em;
  padding: 0.75em 0.85em;
  animation-name: gls-glass-chat-bubbles-typing;
}
.gls-glass-chat-bubbles-typing i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: gls-glass-chat-bubbles-dot 1.2s ease-in-out infinite;
}
.gls-glass-chat-bubbles-typing i:nth-child(2) { animation-delay: 0.15s; }
.gls-glass-chat-bubbles-typing i:nth-child(3) { animation-delay: 0.3s; }
.gls-glass-chat-bubbles-compose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.15em;
  padding: 0.28em 0.28em 0.28em 0.85em;
  border-radius: 99em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-chat-bubbles-field { font-size: 0.68em; opacity: 0.75; }
.gls-glass-chat-bubbles-send {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.gls-glass-chat-bubbles-send svg { width: 0.85em; height: 0.85em; }
@keyframes gls-glass-chat-bubbles-m1 {
  0% { opacity: 0; transform: translateY(0.6em) scale(0.6); }
  5% { opacity: 1; transform: translateY(-0.08em) scale(1.03); }
  8%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes gls-glass-chat-bubbles-m2 {
  0%, 11% { opacity: 0; transform: translateY(0.6em) scale(0.6); }
  16% { opacity: 1; transform: translateY(-0.08em) scale(1.03); }
  19%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes gls-glass-chat-bubbles-typing {
  0%, 20% { opacity: 0; transform: scale(0.5); }
  24% { opacity: 1; transform: scale(1.05); }
  27%, 44% { opacity: 1; transform: none; }
  48%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes gls-glass-chat-bubbles-m3 {
  0%, 46% { opacity: 0; transform: translateY(0.3em) scale(0.7); }
  51% { opacity: 1; transform: translateY(-0.08em) scale(1.03); }
  54%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes gls-glass-chat-bubbles-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-0.3em); opacity: 1; }
}
@keyframes gls-glass-chat-bubbles-wall {
  to { transform: translate(6%, -5%) rotate(8deg) scale(1.05); }
}

@property --gls-glass-progress-ring-p {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.gls-glass-progress-ring {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #4c1d95));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-progress-ring-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-progress-ring-orb-a {
  left: 7.5em;
  top: -1.2em;
  width: 6.4em;
  height: 6.4em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-progress-ring-drift-a 8s ease-in-out infinite alternate;
}
.gls-glass-progress-ring-orb-b {
  right: 2.4em;
  bottom: 0.4em;
  width: 5.2em;
  height: 5.2em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-progress-ring-drift-b 9s ease-in-out infinite alternate;
}
.gls-glass-progress-ring-card {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 1em 1.5em 1em 1em;
  border-radius: 1.3em;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  animation: gls-glass-progress-ring-fill 5.5s infinite;
}
.gls-glass-progress-ring-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.4em;
  height: 5.4em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0.15em 0.4em rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.15);
}
/* track and fill: a conic gradient masked to a band, with a round start cap */
.gls-glass-progress-ring-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0.33em, color-mix(in srgb, var(--c) 35%, #fff) 0.32em, transparent 0.34em),
    conic-gradient(color-mix(in srgb, var(--c) 35%, #fff), var(--c) calc(var(--gls-glass-progress-ring-p) * 1%), rgb(15 23 42 / 0.3) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.66em), #000 calc(100% - 0.64em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.66em), #000 calc(100% - 0.64em));
}
/* the glowing head, turned to the end of the arc */
.gls-glass-progress-ring-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0.33em, #fff 0.19em, var(--c) 0.21em 0.32em, transparent 0.34em);
  rotate: calc(var(--gls-glass-progress-ring-p) * 3.6deg);
  filter: drop-shadow(0 0 0.3em var(--c));
}
.gls-glass-progress-ring-value {
  counter-reset: gls-glass-progress-ring-n var(--gls-glass-progress-ring-p);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gls-glass-progress-ring-value::before { content: counter(gls-glass-progress-ring-n); }
.gls-glass-progress-ring-value::after {
  content: "%";
  margin-left: 0.05em;
  font-size: 0.55em;
  font-weight: 600;
  opacity: 0.8;
}
.gls-glass-progress-ring-info { min-width: 0; }
.gls-glass-progress-ring-label {
  margin: 0;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.gls-glass-progress-ring-amount {
  margin: 0.25em 0 0.8em;
  font-size: 0.7em;
  color: rgb(255 255 255 / 0.8);
}
.gls-glass-progress-ring-amount b {
  display: block;
  color: #fff;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gls-glass-progress-ring-btn {
  display: inline-block;
  padding: 0.45em 1em;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 99em;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 0.64em;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.25s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-progress-ring-btn:hover { background: rgb(255 255 255 / 0.28); scale: 1.05; }
.gls-glass-progress-ring-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-progress-ring-fill {
  0% { --gls-glass-progress-ring-p: 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  40%, 80% { --gls-glass-progress-ring-p: 72; animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }
  94%, 100% { --gls-glass-progress-ring-p: 0; }
}
@keyframes gls-glass-progress-ring-drift-a {
  to { transform: translate(3em, 1.5em) scale(1.12); }
}
@keyframes gls-glass-progress-ring-drift-b {
  to { transform: translate(-3.5em, -1.2em) scale(0.9); }
}

.gls-glass-filter-chips {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 50%, #0c4a6e), color-mix(in srgb, var(--c) 30%, #1e1b4b));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-filter-chips-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-filter-chips-orb-a {
  right: 3em;
  top: 0.4em;
  width: 6.2em;
  height: 6.2em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-filter-chips-drift-a 8s ease-in-out infinite alternate;
}
.gls-glass-filter-chips-orb-b {
  left: 3em;
  bottom: 0.3em;
  width: 5.4em;
  height: 5.4em;
  background: linear-gradient(135deg, #fdba74, #ec4899);
  animation: gls-glass-filter-chips-drift-b 10s ease-in-out infinite alternate;
}
.gls-glass-filter-chips-panel {
  width: 15.5em;
  padding: 0.85em 0.95em 0.75em;
  border-radius: 1.2em;
  counter-reset: gls-glass-filter-chips-n;
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-filter-chips-title {
  margin: 0 0 0.65em;
  font-size: 0.72em;
  font-weight: 700;
}
.gls-glass-filter-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.gls-glass-filter-chips-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.85em;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 99em;
  background-color: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
  font-size: 0.64em;
  font-weight: 600;
  cursor: pointer;
  transition: translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gls-glass-filter-chips-chip input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gls-glass-filter-chips-chip input:checked { counter-increment: gls-glass-filter-chips-n; }
.gls-glass-filter-chips-chip:hover {
  translate: 0 -0.15em;
  background-color: rgb(255 255 255 / 0.2);
}
.gls-glass-filter-chips-chip:has(input:checked) {
  border-color: rgb(255 255 255 / 0.55);
  background-color: color-mix(in srgb, var(--c) 72%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0.35em 0.9em -0.35em var(--c);
}
.gls-glass-filter-chips-chip:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 0.15em; }
.gls-glass-filter-chips-check {
  width: 0;
  height: 1em;
  margin-right: 0;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, stroke-dashoffset 0.35s ease 0.1s;
}
.gls-glass-filter-chips-chip:has(input:checked) .gls-glass-filter-chips-check {
  width: 1em;
  margin-right: 0.35em;
  opacity: 1;
  stroke-dashoffset: 0;
}
.gls-glass-filter-chips-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.gls-glass-filter-chips-count { font-size: 0.62em; color: rgb(255 255 255 / 0.8); }
.gls-glass-filter-chips-count::before {
  content: counter(gls-glass-filter-chips-n) " ";
  color: #fff;
  font-weight: 700;
}
.gls-glass-filter-chips-apply {
  padding: 0.5em 1em;
  border-radius: 99em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 60%, #0f172a);
  font-size: 0.62em;
  font-weight: 700;
  text-decoration: none;
  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-filter-chips-apply:hover { scale: 1.05; }
.gls-glass-filter-chips-apply:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-filter-chips-drift-a {
  to { transform: translate(-4em, 2em) scale(1.1); }
}
@keyframes gls-glass-filter-chips-drift-b {
  to { transform: translate(4.5em, -1.5em) scale(0.9); }
}

.gls-glass-stacked-cards {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #0f172a), color-mix(in srgb, var(--c) 25%, #312e81));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-stacked-cards-orbit {
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: gls-glass-stacked-cards-spin 18s linear infinite;
}
.gls-glass-stacked-cards-blob {
  position: absolute;
  border-radius: 50%;
}
.gls-glass-stacked-cards-blob:nth-child(1) {
  left: 4em;
  top: 0.4em;
  width: 7em;
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
}
.gls-glass-stacked-cards-blob:nth-child(2) {
  right: 4.5em;
  bottom: 0.6em;
  width: 5em;
  height: 5em;
  background: linear-gradient(135deg, #fcd34d, #ec4899);
}
.gls-glass-stacked-cards-stack {
  position: relative;
  width: 7.4em;
  height: 5.2em;
  margin-top: 1em;
}
.gls-glass-stacked-cards-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.7em 0.8em;
  border-radius: 1em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: transform 0.6s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.gls-glass-stacked-cards-card:nth-child(1) {
  transform: translate(0, -1.25em) rotate(0) scale(0.86);
  transition-delay: 0.1s;
}
.gls-glass-stacked-cards-card:nth-child(2) {
  transform: translate(0, -0.62em) rotate(0) scale(0.93);
  transition-delay: 0.05s;
}
.gls-glass-stacked-cards-card:nth-child(3) { transform: translate(0, 0) rotate(0) scale(1); }
/* fanned like a hand of cards: each card overlaps the one on its left, so every title shows */
.gls-glass-stacked-cards:hover .gls-glass-stacked-cards-card:nth-child(1) { transform: translate(-6em, 0.35em) rotate(-8deg) scale(1); }
.gls-glass-stacked-cards:hover .gls-glass-stacked-cards-card:nth-child(2) { transform: translate(0, -0.45em) rotate(0) scale(1); }
.gls-glass-stacked-cards:hover .gls-glass-stacked-cards-card:nth-child(3) { transform: translate(6em, 0.35em) rotate(8deg) scale(1); }
.gls-glass-stacked-cards-icon {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-bottom: auto;
  border-radius: 0.5em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.gls-glass-stacked-cards-card:nth-child(1) .gls-glass-stacked-cards-icon { background: linear-gradient(135deg, #fde68a, #f97316); }
.gls-glass-stacked-cards-card:nth-child(2) .gls-glass-stacked-cards-icon { background: linear-gradient(135deg, #f9a8d4, #a855f7); }
.gls-glass-stacked-cards-card:nth-child(3) .gls-glass-stacked-cards-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); }
.gls-glass-stacked-cards-icon svg { width: 1em; height: 1em; }
.gls-glass-stacked-cards-title {
  margin: 0;
  font-size: 0.78em;
  font-weight: 700;
}
.gls-glass-stacked-cards-meta {
  margin: 0.15em 0 0;
  font-size: 0.6em;
  color: rgb(255 255 255 / 0.78);
}
@keyframes gls-glass-stacked-cards-spin {
  to { transform: rotate(1turn); }
}

.gls-glass-table {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 35%, #0b1020), color-mix(in srgb, var(--c) 25%, #1e1b4b));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-table-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.gls-glass-table-orb-a {
  left: 1.5em;
  top: 0.2em;
  width: 7em;
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
  animation: gls-glass-table-drift-a 9s ease-in-out infinite alternate;
}
.gls-glass-table-orb-b {
  right: 1.5em;
  bottom: 0;
  width: 6em;
  height: 6em;
  background: linear-gradient(135deg, #fde68a, #f472b6);
  animation: gls-glass-table-drift-b 11s ease-in-out infinite alternate;
}
.gls-glass-table-card {
  width: 17.5em;
  padding: 0.7em 0.7em 0.55em;
  border-radius: 1.2em;
  background: color-mix(in srgb, #fff 14%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.gls-glass-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.35em 0.5em;
}
.gls-glass-table-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 0.74em;
  font-weight: 700;
}
.gls-glass-table-live {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #4ade80;
}
.gls-glass-table-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4ade80;
  animation: gls-glass-table-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.gls-glass-table-all {
  color: rgb(255 255 255 / 0.8);
  font-size: 0.62em;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.gls-glass-table-all:hover { color: #fff; text-decoration: underline; }
.gls-glass-table-all:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
.gls-glass-table-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.12em;
  font-variant-numeric: tabular-nums;
}
.gls-glass-table-table th {
  padding: 0 0.7em 0.6em;
  border-bottom: 1px solid rgb(255 255 255 / 0.22);
  color: rgb(255 255 255 / 0.7);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.gls-glass-table-table td {
  padding: 0.4em 0.53em;
  font-size: 0.66em;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.gls-glass-table-table th:last-child,
.gls-glass-table-table td:last-child { text-align: right; }
.gls-glass-table-table td:first-child { border-radius: 0.7em 0 0 0.7em; }
.gls-glass-table-table td:last-child { border-radius: 0 0.7em 0.7em 0; font-weight: 650; }
.gls-glass-table-table tbody tr:hover td { background-color: rgb(255 255 255 / 0.15); }
.gls-glass-table-table tbody tr:first-child td { animation: gls-glass-table-new 4.5s ease-in-out infinite; }
.gls-glass-table-who {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
}
.gls-glass-table-avatar {
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.25);
}
.gls-glass-table-table tbody tr:nth-child(1) .gls-glass-table-avatar { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); }
.gls-glass-table-table tbody tr:nth-child(2) .gls-glass-table-avatar { background: linear-gradient(135deg, #fde68a, #f472b6); }
.gls-glass-table-table tbody tr:nth-child(3) .gls-glass-table-avatar { background: linear-gradient(135deg, #5eead4, #6366f1); }
.gls-glass-table-table tbody tr:nth-child(4) .gls-glass-table-avatar { background: linear-gradient(135deg, #fdba74, #a855f7); }
.gls-glass-table-pill {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 99em;
  font-size: 0.85em;
  font-weight: 700;
}
.gls-glass-table-paid { background: rgb(34 197 94 / 0.3); color: #dcfce7; box-shadow: inset 0 0 0 1px rgb(74 222 128 / 0.45); }
.gls-glass-table-pending { background: rgb(245 158 11 / 0.3); color: #fef3c7; box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.45); }
.gls-glass-table-refund { background: rgb(244 63 94 / 0.3); color: #ffe4e6; box-shadow: inset 0 0 0 1px rgb(251 113 133 / 0.45); }
@keyframes gls-glass-table-new {
  0%, 55%, 100% { background-color: transparent; }
  12%, 30% { background-color: color-mix(in srgb, var(--c) 40%, transparent); }
}
@keyframes gls-glass-table-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes gls-glass-table-drift-a {
  to { transform: translate(4em, 1.5em) scale(1.1); }
}
@keyframes gls-glass-table-drift-b {
  to { transform: translate(-4em, -1.5em) scale(0.9); }
}