:root {
  --lg-blur: 14px;          
  --lg-saturate: 180%;      
  --lg-brightness: 1.05;
  --lg-tint: 255 255 255;   
  --lg-tint-alpha: 0.10;
  --lg-radius: 22px;
  --lg-bezel: 1px;          
  --lg-rim-key: 0.75;       
  --lg-rim-bounce: 0.45;    
  --lg-fringe: 0.30;        
  --lg-spec: 0.28;
  --lg-mx: 50%;             
  --lg-my: 0%;
  --lg-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 8px 28px -6px rgb(0 0 0 / 0.18),
    0 24px 48px -24px rgb(0 0 0 / 0.28);
  --lg-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lg-dur: 380ms;
  --lg-ink: 15 17 21;
  --lg-ink-dim: 0.62;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-tint: 255 255 255;
    --lg-tint-alpha: 0.07;
    --lg-brightness: 1.12;
    --lg-rim-key: 0.42;
    --lg-rim-bounce: 0.22;
    --lg-ink: 245 246 250;
    --lg-shadow:
      0 1px 2px rgb(0 0 0 / 0.30),
      0 8px 28px -6px rgb(0 0 0 / 0.50),
      0 24px 48px -24px rgb(0 0 0 / 0.65);
  }
}
:root[data-theme="dark"] {
  --lg-tint-alpha: 0.07; --lg-brightness: 1.12;
  --lg-rim-key: 0.42; --lg-rim-bounce: 0.22; --lg-ink: 245 246 250;
  --lg-shadow: 0 1px 2px rgb(0 0 0/.30), 0 8px 28px -6px rgb(0 0 0/.50), 0 24px 48px -24px rgb(0 0 0/.65);
}
:root[data-theme="light"] {
  --lg-tint-alpha: 0.10; --lg-brightness: 1.05;
  --lg-rim-key: 0.75; --lg-rim-bounce: 0.45; --lg-ink: 15 17 21;
}
.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-radius);
  color: rgb(var(--lg-ink));
  background: transparent;
  box-shadow: var(--lg-shadow);
  transition:
    transform var(--lg-dur) var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease);
  overflow: hidden;
  will-change: transform;
}
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    brightness(var(--lg-brightness));
  -webkit-backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    brightness(var(--lg-brightness));
  background:
    linear-gradient(
      148deg,
      rgb(var(--lg-tint) / calc(var(--lg-tint-alpha) * 1.9)) 0%,
      rgb(var(--lg-tint) / calc(var(--lg-tint-alpha) * 0.55)) 38%,
      rgb(var(--lg-tint) / calc(var(--lg-tint-alpha) * 0.45)) 62%,
      rgb(var(--lg-tint) / calc(var(--lg-tint-alpha) * 1.5)) 100%
    );
}
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgb(255 255 255 / var(--lg-spec)) 0%,
      rgb(255 255 255 / 0) 55%
    );
  box-shadow:
    inset  1px  1px 1px -0.5px rgb(255 255 255 / var(--lg-rim-key)),
    inset -1px -1px 1px -0.5px rgb(255 255 255 / var(--lg-rim-bounce)),
    inset  2px  0   2px -1.5px rgb(120 190 255 / var(--lg-fringe)),
    inset -2px  0   2px -1.5px rgb(255 140 175 / var(--lg-fringe)),
    inset  0    0   0   var(--lg-bezel) rgb(255 255 255 / 0.14),
    inset  0   10px 22px -18px rgb(255 255 255 / 0.55),
    inset  0  -12px 26px -20px rgb(255 255 255 / 0.35);
}
.lg > * { position: relative; z-index: 2; }
button.lg, a.lg, input.lg, select.lg, summary.lg {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
}
.lg-regular {  }
.lg-clear {
  --lg-tint-alpha: 0.03;
  --lg-blur: 5px;
  --lg-saturate: 150%;
  --lg-rim-key: 0.55;
  --lg-spec: 0.18;
}
.lg-clear::before {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.10)),
    linear-gradient(148deg,
      rgb(var(--lg-tint) / 0.10) 0%,
      rgb(var(--lg-tint) / 0.02) 50%,
      rgb(var(--lg-tint) / 0.08) 100%);
}
.lg-clear { --lg-ink: 255 255 255; }
.lg-on-light {
  --lg-ink: 15 17 21;
  --lg-ink-dim: 0.60;
  --lg-tint-alpha: 0.24;
  --lg-rim-key: 0.95;
  --lg-rim-bounce: 0.60;
  --lg-spec: 0.35;
}
.lg-on-dark {
  --lg-ink: 245 246 250;
  --lg-ink-dim: 0.66;
  --lg-tint-alpha: 0.08;
  --lg-rim-key: 0.50;
  --lg-rim-bounce: 0.26;
  --lg-spec: 0.22;
}
.lg-capsule { --lg-radius: 999px; }
.lg-card    { --lg-radius: 26px; }
.lg-sheet   { --lg-radius: 32px; }
.lg-chip    { --lg-radius: 14px; }
.lg-container {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: calc(var(--lg-radius) + 6px);
}
.lg-container > .lg-item {
  position: relative;
  z-index: 2;
  border: 0;
  border-radius: calc(var(--lg-radius) - 6px);
  background: rgb(var(--lg-ink) / 0.10);
  color: inherit;
  transition: background var(--lg-dur) var(--lg-ease);
}
.lg-container > .lg-item:hover  { background: rgb(var(--lg-ink) / 0.18); }
.lg-container > .lg-item[aria-pressed="true"],
.lg-container > .lg-item[data-active] {
  background: rgb(var(--lg-ink) / 0.26);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.lg-interactive { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lg-interactive:hover  { transform: translateY(-1px) scale(1.008); }
.lg-interactive:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; }
.lg-interactive:focus-visible {
  outline: 2px solid rgb(var(--lg-ink) / 0.55);
  outline-offset: 3px;
}
.lg-title { font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--lg-ink)); }
.lg-body  { color: rgb(var(--lg-ink) / var(--lg-ink-dim)); }
.lg-dim   { color: rgb(var(--lg-ink) / 0.45); }
@media (prefers-reduced-transparency: reduce) {
  .lg::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgb(250 250 252 / 0.97);
  }
  .lg::after { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); background: none; }
  .lg { --lg-ink: 15 17 21; }
  @media (prefers-color-scheme: dark) {
    .lg::before { background: rgb(28 28 32 / 0.97); }
    .lg::after  { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
    .lg { --lg-ink: 245 246 250; }
  }
}
@media (prefers-contrast: more) {
  .lg::before { --lg-blur: 22px; background: rgb(255 255 255 / 0.88); }
  .lg::after  { box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.85); background: none; }
  .lg { --lg-ink: 0 0 0; --lg-ink-dim: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .lg, .lg-interactive:hover, .lg-interactive:active { transition: none; transform: none; }
  .lg::after { --lg-mx: 50%; --lg-my: 0%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg::before { background: rgb(255 255 255 / 0.72); }
  @media (prefers-color-scheme: dark) { .lg::before { background: rgb(30 30 34 / 0.72); } }
}