/* src/styles/base.css */
:where(:root, [data-theme=light]) {
  --lg-fg: rgb(0 0 0 / 0.88);
  --lg-fg-muted: rgb(60 60 67 / 0.62);
  --lg-fg-faint: rgb(60 60 67 / 0.3);
  --lg-accent: #0088ff;
  --lg-green: #34c759;
  --lg-red: #ff383c;
  --lg-fill: rgb(255 255 255 / 0.66);
  --lg-fill-pressed: rgb(255 255 255 / 0.92);
  --lg-blur: 6px;
  --lg-saturate: 1.9;
  --lg-brightness: 1.04;
  --lg-edge: rgb(0 0 0 / 0.06);
  --lg-shadow: 0 8px 28px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.07);
  --lg-rim-opacity: 1;
  --lg-glow: rgb(255 255 255 / 0.55);
  --lg-lens-fill: rgb(255 255 255 / 0.1);
  --lg-lens-shadow: 0 10px 30px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.08);
  --lg-lens-edge: rgb(0 0 0 / 0.07);
  --lg-lens-ring: rgb(0 0 0 / 0.22);
  --lg-navigation-fill: rgb(255 255 255 / 0.48);
  --lg-selection-lens-fill: rgb(255 255 255 / 0.14);
  --lg-selection-lens-edge: rgb(45 48 53 / 0.28);
  --lg-selection-lens-bevel: inset 0 3px 7px rgb(45 48 53 / 0.1), inset 0 -1px 2px rgb(255 255 255 / 0.8);
  --lg-selection-lens-brightness: 1;
  --lg-switch-face-fade: 1;
  --lg-panel-fill: rgb(255 255 255 / 0.62);
  --lg-menu-fill: rgb(250 250 252 / 0.94);
  --lg-panel-blur: 28px;
  --lg-tab-selection: rgb(0 0 0 / 0.07);
  --lg-segment-selection: rgb(0 0 0 / 0.08);
  --lg-track: rgb(120 120 128 / 0.26);
  --lg-rail: rgb(120 120 128 / 0.2);
  --lg-block-well: rgb(120 120 128 / 0.24);
  --lg-block-lit: #ffffff;
  --lg-block-lit-fg: rgb(0 0 0 / 0.78);
  --lg-thumb: #ffffff;
  --lg-thumb-shadow:
    0 3px 8px rgb(0 0 0 / 0.15),
    0 1px 1px rgb(0 0 0 / 0.06),
    0 0 0 0.5px rgb(0 0 0 / 0.04);
  --lg-scrim: rgb(0 0 0 / 0.18);
  --lg-ring: rgb(0 136 255 / 0.55);
  --lg-font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro",
    "Inter",
    system-ui,
    sans-serif;
}
:where([data-theme=dark]) {
  --lg-fg: rgb(255 255 255 / 0.96);
  --lg-fg-muted: rgb(235 235 245 / 0.6);
  --lg-fg-faint: rgb(235 235 245 / 0.3);
  --lg-accent: #0091ff;
  --lg-green: #30d158;
  --lg-red: #ff4245;
  --lg-fill: rgb(44 44 48 / 0.5);
  --lg-fill-pressed: rgb(90 90 96 / 0.55);
  --lg-blur: 8px;
  --lg-saturate: 1.6;
  --lg-brightness: 0.96;
  --lg-edge: rgb(255 255 255 / 0.09);
  --lg-shadow: 0 8px 28px rgb(0 0 0 / 0.38), 0 1px 3px rgb(0 0 0 / 0.3);
  --lg-rim-opacity: 0.62;
  --lg-glow: rgb(255 255 255 / 0.16);
  --lg-lens-fill: rgb(28 28 30 / 0.3);
  --lg-lens-shadow: 0 10px 30px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
  --lg-lens-edge: rgb(255 255 255 / 0.12);
  --lg-lens-ring: rgb(255 255 255 / 0.3);
  --lg-navigation-fill: var(--lg-fill);
  --lg-selection-lens-fill: rgb(255 255 255 / 0.09);
  --lg-selection-lens-edge: rgb(255 255 255 / 0.25);
  --lg-selection-lens-bevel: inset 0 0 0 transparent;
  --lg-selection-lens-brightness: 1.06;
  --lg-switch-face-fade: 0.92;
  --lg-panel-fill: rgb(30 30 33 / 0.62);
  --lg-menu-fill: rgb(38 38 42 / 0.94);
  --lg-tab-selection: rgb(0 0 0 / 0.36);
  --lg-segment-selection: rgb(255 255 255 / 0.14);
  --lg-track: rgb(120 120 128 / 0.44);
  --lg-rail: rgb(120 120 128 / 0.4);
  --lg-block-well: rgb(120 120 128 / 0.3);
  --lg-block-lit: #ffffff;
  --lg-block-lit-fg: rgb(0 0 0 / 0.78);
  --lg-thumb: #ffffff;
  --lg-thumb-shadow: 0 3px 8px rgb(0 0 0 / 0.3), 0 1px 1px rgb(0 0 0 / 0.16);
  --lg-scrim: rgb(0 0 0 / 0.4);
  --lg-ring: rgb(0 145 255 / 0.7);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme=light])) {
    --lg-fg: rgb(255 255 255 / 0.96);
    --lg-fg-muted: rgb(235 235 245 / 0.6);
    --lg-fg-faint: rgb(235 235 245 / 0.3);
    --lg-accent: #0091ff;
    --lg-green: #30d158;
    --lg-red: #ff4245;
    --lg-fill: rgb(44 44 48 / 0.5);
    --lg-fill-pressed: rgb(90 90 96 / 0.55);
    --lg-blur: 8px;
    --lg-saturate: 1.6;
    --lg-brightness: 0.96;
    --lg-edge: rgb(255 255 255 / 0.09);
    --lg-shadow: 0 8px 28px rgb(0 0 0 / 0.38), 0 1px 3px rgb(0 0 0 / 0.3);
    --lg-rim-opacity: 0.62;
    --lg-glow: rgb(255 255 255 / 0.16);
    --lg-lens-fill: rgb(28 28 30 / 0.3);
    --lg-lens-shadow: 0 10px 30px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
    --lg-lens-edge: rgb(255 255 255 / 0.12);
    --lg-lens-ring: rgb(255 255 255 / 0.3);
    --lg-navigation-fill: var(--lg-fill);
    --lg-selection-lens-fill: rgb(255 255 255 / 0.09);
    --lg-selection-lens-edge: rgb(255 255 255 / 0.25);
    --lg-selection-lens-bevel: inset 0 0 0 transparent;
    --lg-selection-lens-brightness: 1.06;
    --lg-switch-face-fade: 0.92;
    --lg-panel-fill: rgb(30 30 33 / 0.62);
    --lg-menu-fill: rgb(38 38 42 / 0.94);
    --lg-tab-selection: rgb(0 0 0 / 0.36);
    --lg-segment-selection: rgb(255 255 255 / 0.14);
    --lg-track: rgb(120 120 128 / 0.44);
    --lg-rail: rgb(120 120 128 / 0.4);
    --lg-thumb-shadow: 0 3px 8px rgb(0 0 0 / 0.3), 0 1px 1px rgb(0 0 0 / 0.16);
    --lg-block-well: rgb(120 120 128 / 0.3);
    --lg-scrim: rgb(0 0 0 / 0.4);
    --lg-ring: rgb(0 145 255 / 0.7);
  }
}
.lg-symbol {
  display: inline-block;
  flex: none;
  width: var(--lg-symbol-size, 24px);
  height: var(--lg-symbol-size, 24px);
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
.lg-glass {
  position: relative;
  box-sizing: border-box;
  background-color: var(--lg-glass-fill, var(--lg-fill));
  -webkit-backdrop-filter: blur(var(--lg-glass-blur, var(--lg-blur))) saturate(var(--lg-saturate));
  backdrop-filter: var(--lg-filter, ) blur(var(--lg-glass-blur, var(--lg-blur))) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  box-shadow: var(--lg-glass-shadow, var(--lg-shadow)), inset 0 0 0 0.5px var(--lg-edge);
  transition: background-color 260ms ease;
  -webkit-tap-highlight-color: transparent;
}
[data-lg-refract] {
  --lg-filter: var(--lg-refraction);
}
html[data-lg-scrolling] [data-lg-refract],
[data-lg-refract][data-lg-offscreen],
html[data-lg-quality=low] [data-lg-refract=surface] {
  --lg-filter: initial;
}
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--lg-rim, none);
  background-size: 100% 100%;
  opacity: var(--lg-rim-opacity);
  pointer-events: none;
  z-index: 0;
}
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 85% 85% at var(--lg-x, 50%) var(--lg-y, 50%),
      var(--lg-glow),
      transparent);
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 0;
}
.lg-glass[data-pressed]::after {
  opacity: 1;
  transition-duration: 80ms;
}
.lg-glass > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-transparency: reduce) {
  .lg-glass {
    --lg-fill: color-mix(in srgb, Canvas 92%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lg-glass,
  .lg-glass::after {
    transition-duration: 0.01ms !important;
  }
}
.lg-glass > .lg-mirror {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: var(--lg-inner-mask);
  mask-image: var(--lg-inner-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.lg-mirror__zoom {
  position: absolute;
  inset: 0;
  transform-origin: center;
}
.lg-mirror * {
  transition: none !important;
  animation: none !important;
}
.lg-mirror .lg-glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.lg-mirror .lg-glass::after {
  display: none;
}
.lg-mirror__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.lg-glass.lg-glass--host {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lg-glass.lg-glass--host::before {
  background-image:
    var(--lg-rim, linear-gradient(transparent, transparent)),
    linear-gradient(var(--lg-host-tint, transparent), var(--lg-host-tint, transparent)),
    linear-gradient(var(--lg-glass-fill, var(--lg-fill)), var(--lg-glass-fill, var(--lg-fill)));
  background-size: 100% 100%;
  -webkit-backdrop-filter: blur(var(--lg-glass-blur, var(--lg-blur))) saturate(var(--lg-saturate));
  backdrop-filter: var(--lg-filter, ) blur(var(--lg-glass-blur, var(--lg-blur))) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  opacity: 1;
  transition: background-color 260ms ease;
}

/* src/components/GlassButton/GlassButton.css */
.lg-button {
  --lg-h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--lg-h);
  min-width: var(--lg-h);
  padding: 0 calc(var(--lg-h) * 0.42);
  margin: 0;
  border: 0;
  border-radius: calc(var(--lg-h) / 2);
  color: var(--lg-tint, var(--lg-fg));
  font-family: var(--lg-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: scale, translate;
}
.lg-button--sm {
  --lg-h: 36px;
  font-size: 14px;
  gap: 6px;
}
.lg-button--lg {
  --lg-h: 52px;
  font-size: 17px;
  font-weight: 600;
}
.lg-button[data-icon-only] {
  width: var(--lg-h);
  padding: 0;
}
.lg-button__icon {
  display: inline-grid;
  place-items: center;
  width: calc(var(--lg-h) * 0.48);
  height: calc(var(--lg-h) * 0.48);
}
.lg-button__icon > :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
.lg-button__label {
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
.lg-button[data-pressed] {
  background-color: var(--lg-fill-pressed);
  transition-duration: 60ms;
}
.lg-button--filled {
  --lg-glow: rgb(255 255 255 / 0.24);
}
.lg-button:not([data-shimmer])::after {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .lg-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--lg-fill) 70%, var(--lg-fill-pressed));
  }
}
.lg-button:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: 3px;
}
.lg-button:disabled {
  cursor: default;
  color: var(--lg-fg-faint);
}
.lg-button--clear {
  --lg-glass-fill: color-mix(in srgb, var(--lg-fill) 30%, transparent);
  --lg-glass-blur: 1.5px;
}
.lg-button--tinted {
  color: var(--lg-tint, var(--lg-accent));
}
.lg-button--tinted-filled {
  --lg-glass-fill: color-mix(in srgb, var(--lg-tint, var(--lg-tint-default, var(--lg-accent))) 26%, var(--lg-fill));
  color: var(--lg-tint, var(--lg-tint-default, var(--lg-accent)));
}
.lg-button--tinted-filled[data-pressed] {
  background-color: color-mix(in srgb, var(--lg-tint, var(--lg-tint-default, var(--lg-accent))) 30%, var(--lg-fill-pressed));
}
.lg-button[data-destructive] {
  --lg-tint-default: var(--lg-red);
}
.lg-button--glass[data-destructive],
.lg-button--clear[data-destructive],
.lg-button--tinted[data-destructive] {
  color: var(--lg-tint, var(--lg-red));
}
.lg-button--filled {
  --lg-glass-fill: var(--lg-tint, var(--lg-tint-default, var(--lg-accent)));
  color: #fff;
}
.lg-button--filled[data-pressed] {
  background-color: color-mix(in srgb, var(--lg-tint, var(--lg-tint-default, var(--lg-accent))) 82%, #fff);
}
@media (hover: hover) and (pointer: fine) {
  .lg-button--filled:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--lg-tint, var(--lg-tint-default, var(--lg-accent))) 90%, #fff);
  }
}
.lg-button--filled:disabled {
  --lg-glass-fill: var(--lg-fill);
}

/* src/components/GlassCard/GlassCard.css */
.lg-card.lg-glass {
  --lg-glass-fill: var(--lg-panel-fill);
  --lg-glass-blur: var(--lg-panel-blur);
  color: var(--lg-fg);
  font-family: var(--lg-font);
}
.lg-card--clear.lg-glass {
  --lg-glass-fill: color-mix(in srgb, var(--lg-fill) 35%, transparent);
  --lg-glass-blur: 2px;
}
.lg-card::after {
  display: none;
}

/* src/components/GlassInput/GlassInput.css */
.lg-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-family: var(--lg-font);
}
.lg-input__label {
  padding-left: 16px;
  color: var(--lg-fg-muted);
  font-size: 13px;
  font-weight: 500;
}
.lg-input__field.lg-glass {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 14px;
  border-radius: 22px;
  color: var(--lg-fg);
  cursor: text;
  will-change: scale, translate;
}
.lg-input__field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  caret-color: var(--lg-input-tint, var(--lg-accent));
  font: inherit;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.lg-input__field input::placeholder {
  color: var(--lg-fg-muted);
}
.lg-input__field input::-webkit-search-cancel-button,
.lg-input__field input::-webkit-search-decoration {
  -webkit-appearance: none;
}
.lg-input__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--lg-fg-muted);
}
.lg-input__icon > :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
.lg-input__clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -4px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--lg-fg-faint);
  cursor: pointer;
  animation: lg-input-pop 380ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lg-input__clear :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
@keyframes lg-input-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.lg-input:has(input:disabled) {
  opacity: 0.45;
}

/* src/components/GlassSheet/GlassSheet.css */
.lg-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.lg-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--lg-scrim);
  opacity: 0;
  pointer-events: auto;
}
.lg-sheet.lg-glass {
  --lg-glass-fill: var(--lg-panel-fill);
  --lg-glass-blur: var(--lg-panel-blur);
  position: relative;
  width: min(560px, calc(100% - 16px));
  max-height: calc(100% - 64px);
  margin-bottom: max(8px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 38px;
  color: var(--lg-fg);
  font-family: var(--lg-font);
  pointer-events: auto;
  touch-action: pan-y;
  outline: none;
  transform: translateY(110%);
  will-change: transform;
}
.lg-sheet::after {
  display: none;
}
.lg-sheet--detents.lg-glass {
  --lg-sheet-run: 160px;
  width: min(640px, 100%);
  height: calc(100% - 10px + var(--lg-sheet-run));
  max-height: none;
  margin-bottom: calc(-1 * var(--lg-sheet-run));
  padding-bottom: var(--lg-sheet-run);
  border-radius: 38px 38px 0 0;
}
.lg-sheet--detents:not([data-raised]) {
  overflow: hidden;
  touch-action: none;
}
.lg-sheet__grabber-zone {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
  touch-action: none;
}
.lg-sheet__grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--lg-fg-faint);
}
.lg-sheet__content {
  padding: 8px 24px 28px;
}

/* src/components/GlassMenu/GlassMenu.css */
.lg-menu-anchor {
  position: relative;
  display: inline-flex;
  flex: none;
}
.lg-menu-surface {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 50;
  color: var(--lg-fg);
  font-family: var(--lg-font);
  touch-action: none;
}
.lg-menu-anchor[data-align=start] .lg-menu-surface {
  right: auto;
  left: 0;
}
.lg-menu.lg-glass {
  --lg-glass-fill: color-mix(in srgb, var(--lg-fill) 55%, transparent);
  --lg-glass-blur: 12px;
  --lg-saturate: 1.9;
  position: absolute;
  inset: 0;
  box-shadow:
    0 18px 44px rgb(0 0 0 / 0.18),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.6),
    inset 0 1px 1px rgb(255 255 255 / 0.75),
    inset 0 -1px 1px rgb(255 255 255 / 0.25);
  transform-origin: top right;
  transition: none;
  pointer-events: none;
}
.lg-menu-anchor[data-align=start] .lg-menu.lg-glass {
  transform-origin: top left;
}
.lg-menu::after {
  display: none;
}
.lg-menu__content {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 6px;
  transform-origin: top right;
}
.lg-menu-anchor[data-align=start] .lg-menu__content {
  right: auto;
  left: 0;
  transform-origin: top left;
}
.lg-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.lg-menu__item:hover,
.lg-menu__item[data-active],
.lg-menu__item:focus-visible {
  background: color-mix(in srgb, var(--lg-fg) 8%, transparent);
  outline: none;
}
.lg-menu__item:disabled {
  opacity: 0.4;
  cursor: default;
}
.lg-menu__item[data-destructive] {
  color: var(--lg-tint-default, #ff3b30);
}
.lg-menu__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.lg-menu__icon > :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
.lg-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-menu__check {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--lg-accent);
}

/* src/components/internal/LensTrack.css */
.lg-track {
  --lg-pad: 4px;
  --lg-item-h: 54px;
  --lg-item-w: 68px;
  --lg-lift: 0;
  position: relative;
  overflow: visible;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--lg-item-w), 1fr);
  padding: var(--lg-pad);
  border-radius: 999px;
  font-family: var(--lg-font);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
}
.lg-track__glass {
  --lg-glass-fill: var(--lg-navigation-fill);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.lg-track[data-lifted] {
  z-index: 10;
}
.lg-track[data-lifted] .lg-track__glass::after {
  opacity: 0.7;
  transition-duration: 120ms;
}
.lg-track__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--lg-item-h);
  min-width: 0;
  padding: 0 10px;
  font: inherit;
  white-space: nowrap;
}
.lg-track__item[aria-selected=true] {
  color: var(--lg-track-active, var(--lg-accent));
}
.lg-track[data-previewing] .lg-track__item {
  color: var(--lg-fg);
}
.lg-track[data-previewing] .lg-track__item[data-lg-preview] {
  color: var(--lg-track-active, var(--lg-accent));
}
.lg-track[data-lifted] .lg-nav__label {
  background: var(--lg-content-tint);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lg-track[data-lifted] .lg-nav__icon > .lg-symbol {
  background: var(--lg-content-tint);
}
.lg-track__item {
  position: relative;
  z-index: 2;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lg-fg);
  cursor: pointer;
  -webkit-touch-callout: none;
}
.lg-track[data-keyboard] .lg-track__item:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: -3px;
}
.lg-track__lens,
.lg-track__select {
  position: absolute;
  top: var(--lg-pad);
  left: var(--lg-pad);
  width: calc((100% - var(--lg-pad) * 2) / var(--lg-count));
  height: calc(100% - var(--lg-pad) * 2);
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(calc(100% * var(--lg-index)));
}
.lg-track__lens.lg-glass {
  z-index: 1;
  background-color: color-mix(in srgb, var(--lg-selection-lens-fill) calc(var(--lg-lift) * 100%), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 calc(var(--lg-lift) * 8px) calc(var(--lg-lift) * 26px) rgb(0 0 0 / calc(var(--lg-lift) * 0.18)),
    inset 0 0 0 0.5px color-mix(in srgb, var(--lg-selection-lens-edge) calc(var(--lg-lift) * 45%), transparent),
    var(--lg-selection-lens-bevel);
  transition: none;
}
.lg-track__lens.lg-glass::before {
  opacity: calc(var(--lg-lift) * 0.5);
  z-index: 2;
}
.lg-track__lens.lg-glass::after {
  display: none;
}
.lg-track__select {
  z-index: 1;
  background: var(--lg-track-selection);
  opacity: calc(1 - var(--lg-lift) * 2.2);
}
.lg-track__lens {
  opacity: 0;
}
.lg-track[data-lifted] .lg-track__lens.lg-glass {
  z-index: 4;
}
.lg-track[data-lifted] .lg-track__lens.lg-glass[data-lg-refract] {
  -webkit-backdrop-filter: var(--lg-filter, ) blur(0.3px) saturate(1.5) brightness(var(--lg-selection-lens-brightness));
  backdrop-filter: var(--lg-filter, ) blur(0.3px) saturate(1.5) brightness(var(--lg-selection-lens-brightness));
}
.lg-track:not([data-ready]) .lg-track__lens {
  transition: none;
}
.lg-track--tabbar {
  --lg-item-h: 60px;
  --lg-navigation-fill: var(--lg-fill);
  --lg-selection-lens-fill: rgb(255 255 255 / 0.09);
  --lg-selection-lens-edge: rgb(255 255 255 / 0.25);
  --lg-selection-lens-bevel: inset 0 0 0 transparent;
  --lg-selection-lens-brightness: 1.06;
  --lg-track-selection: var(--lg-tab-selection);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lg-track--tabbar:not(.lg-track--labels-only, .lg-track--icons-only) .lg-track__item {
  padding-bottom: 3px;
}
.lg-track--tabbar .lg-nav__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.lg-track--tabbar .lg-nav__icon > :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
.lg-track--tabbar .lg-nav__label {
  line-height: 1.1;
}
.lg-track--tabbar.lg-track--icons-only .lg-nav__icon {
  width: 28px;
  height: 28px;
}
.lg-track--tabbar.lg-track--labels-only {
  --lg-item-h: 44px;
  font-size: 15px;
  font-weight: 600;
}
.lg-track--segmented {
  --lg-selection-lens-bevel: inset 0 0 0 transparent;
  --lg-pad: 4px;
  --lg-item-h: 36px;
  --lg-item-w: 64px;
  --lg-track-selection: var(--lg-segment-selection);
  --lg-track-active: var(--lg-fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lg-track--segmented .lg-track__item {
  flex-direction: row;
  gap: 6px;
  padding: 0 16px;
}
.lg-track--segmented .lg-track__item {
  color: var(--lg-fg);
}
.lg-track--segmented .lg-nav__icon {
  display: inline-flex;
}
.lg-track--sm.lg-track--segmented {
  --lg-item-h: 28px;
  --lg-pad: 3px;
  font-size: 13px;
}
.lg-track[data-lg-copy] > .lg-track__item {
  color: var(--lg-track-active, var(--lg-accent));
}
.lg-track[data-lg-copy] .lg-nav__label {
  background: none;
  color: var(--lg-track-active, var(--lg-accent));
  -webkit-text-fill-color: currentColor;
}
.lg-track[data-lg-copy] .lg-nav__icon > .lg-symbol {
  background: var(--lg-track-active, var(--lg-accent));
}
[data-lg-copy] > :is(.lg-track__glass, .lg-track__select) {
  visibility: hidden;
}
.lg-track[data-lifted]:not([data-lg-copy]) > .lg-track__item :is(.lg-nav__label, .lg-nav__icon) {
  -webkit-mask: var(--lg-content-hide, none);
  mask: var(--lg-content-hide, none);
  -webkit-mask-composite:
    source-out,
    source-over,
    source-over,
    source-over;
  mask-composite:
    subtract,
    add,
    add,
    add;
}
.lg-track:not([data-lifted]) .lg-track__lens > .lg-mirror {
  visibility: hidden;
}

/* src/components/GlassSlider/GlassSlider.css */
.lg-slider {
  --lg-lift: 0;
  --lg-over: 0px;
  position: relative;
  width: 100%;
  height: 38px;
  font-family: var(--lg-font);
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lg-slider[data-lifted],
.lg-slider[data-dragging] {
  z-index: 10;
}
.lg-slider__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--lg-rail);
  pointer-events: none;
}
.lg-slider__fill {
  display: block;
  height: 100%;
  width: calc(19px + (100% - 38px) * var(--lg-progress) + 19px * (min(0, var(--lg-progress) / 0.12 - 1) + max(0, (var(--lg-progress) - 0.88) / 0.12)));
  border-radius: inherit;
  background: var(--lg-slider-fill, var(--lg-accent));
}
.lg-slider__thumb-slot {
  position: absolute;
  top: 50%;
  left: calc(19px + (100% - 38px) * var(--lg-progress));
  translate: var(--lg-over) 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}
.lg-slider__thumb.lg-glass {
  position: absolute;
  left: -29px;
  top: -19px;
  width: 58px;
  height: 38px;
  border-radius: 999px;
  scale: 0.655;
  background-color: color-mix(in srgb, var(--lg-lens-fill) calc(var(--lg-lift) * 100%), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 calc(2px + var(--lg-lift) * 8px) calc(6px + var(--lg-lift) * 20px) rgb(0 0 0 / calc(0.14 + var(--lg-lift) * 0.06)),
    0 0.5px 1px rgb(0 0 0 / calc(0.08 * (1 - var(--lg-lift)))),
    inset 0 0 0 0.75px color-mix(in srgb, var(--lg-lens-ring) calc(var(--lg-lift) * 100%), transparent);
  transition: none;
  will-change: scale;
}
.lg-slider[data-lifted] .lg-slider__thumb.lg-glass[data-lg-refract] {
  -webkit-backdrop-filter: var(--lg-filter, ) blur(0.3px) saturate(1.6) brightness(1.08);
  backdrop-filter: var(--lg-filter, ) blur(0.3px) saturate(1.6) brightness(1.08);
}
.lg-slider[data-mirror] > .lg-slider__rail {
  --x: calc(19px + (100% - 38px) * var(--lg-progress) + var(--lg-over));
  --r: calc(26px * var(--lg-lift));
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 calc(var(--x) - var(--r)),
      transparent calc(var(--x) - var(--r)),
      transparent calc(var(--x) + var(--r)),
      #000 calc(var(--x) + var(--r)));
  mask-image:
    linear-gradient(
      90deg,
      #000 calc(var(--x) - var(--r)),
      transparent calc(var(--x) - var(--r)),
      transparent calc(var(--x) + var(--r)),
      #000 calc(var(--x) + var(--r)));
}
.lg-slider__thumb.lg-glass::before {
  opacity: calc(var(--lg-lift) * 1.3);
  z-index: 2;
}
.lg-slider__face {
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-thumb);
}
.lg-slider__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}
.lg-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  touch-action: none;
}
.lg-slider__input::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border: 0;
}
.lg-slider__input:focus {
  outline: none;
}
.lg-slider[data-keyboard]:has(.lg-slider__input:focus) .lg-slider__thumb,
.lg-slider[data-keyboard]:has(.lg-slider__input:focus) .lg-slider__block {
  outline: 2px solid var(--lg-ring);
  outline-offset: 4px;
}
.lg-slider:has(.lg-slider__input:disabled) {
  opacity: 0.4;
  cursor: default;
}
.lg-slider--block {
  height: 52px;
}
.lg-slider__block.lg-glass {
  --lg-glass-fill: var(--lg-block-well);
  --lg-glass-blur: 14px;
  position: absolute;
  inset: 0;
  border-radius: min(26px, 50%);
  overflow: hidden;
  transform-origin: center;
  will-change: scale, translate;
}
.lg-slider__block-fill {
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  background: var(--lg-slider-fill, var(--lg-block-lit));
  clip-path: inset(0 calc(100% - 100% * var(--lg-progress)) 0 0);
}
.lg-slider__block-content {
  position: absolute !important;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--lg-fg);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.lg-slider__block-content--lit {
  color: var(--lg-block-lit-fg);
}
.lg-slider__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.lg-slider__icon > :is(svg, .lg-symbol) {
  width: 100%;
  height: 100%;
}
.lg-slider__value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.lg-slider--block .lg-slider__input {
  touch-action: none;
}

/* src/components/GlassSwitch/GlassSwitch.css */
.lg-switch {
  --lg-lift: 0;
  position: relative;
  flex: none;
  width: 64px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lg-switch::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.lg-switch[data-lifted] {
  z-index: 10;
}
.lg-switch__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-track);
  pointer-events: none;
}
.lg-switch[data-lifted]:not([data-lg-copy]) > .lg-switch__track,
.lg-switch[data-lifted]:not([data-lg-copy]) > .lg-switch__fill {
  --a: clamp(0px, var(--lg-knob-x) - var(--lg-hole) - 7px, 100%);
  --b: clamp(0px, var(--lg-knob-x) - var(--lg-hole) + 5px, 100%);
  --c: clamp(0px, var(--lg-knob-x) + var(--lg-hole) - 5px, 100%);
  --d: clamp(0px, var(--lg-knob-x) + var(--lg-hole) + 7px, 100%);
  --gap: rgb(0 0 0 / calc(1 - var(--lg-lift)));
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 var(--a),
      var(--gap) var(--b),
      var(--gap) var(--c),
      #000 var(--d));
  mask-image:
    linear-gradient(
      90deg,
      #000 var(--a),
      var(--gap) var(--b),
      var(--gap) var(--c),
      #000 var(--d));
}
.lg-switch__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-switch-on, var(--lg-green));
  opacity: 0;
  pointer-events: none;
}
.lg-switch__thumb.lg-glass {
  position: absolute;
  top: 50%;
  left: calc(21px - 29px);
  width: 58px;
  height: 38px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(0, -50%) scale(0.655);
  transform-origin: center;
  background-color: color-mix(in srgb, var(--lg-lens-fill) calc(var(--lg-lift) * 100%), transparent);
  -webkit-backdrop-filter: blur(0.5px) saturate(1.6) brightness(1.08);
  backdrop-filter: var(--lg-filter, ) blur(0.3px) saturate(1.6) brightness(1.08);
  box-shadow:
    0 calc(2px + var(--lg-lift) * 8px) calc(6px + var(--lg-lift) * 20px) rgb(0 0 0 / calc(0.12 + var(--lg-lift) * 0.08)),
    0 0.5px 1px rgb(0 0 0 / calc(0.08 * (1 - var(--lg-lift)))),
    inset 0 0 0 0.75px color-mix(in srgb, var(--lg-lens-ring) calc(var(--lg-lift) * 100%), transparent);
  transition: none;
  will-change: transform;
}
.lg-switch__thumb.lg-glass::before {
  opacity: calc(var(--lg-lift) * 1.3);
  z-index: 2;
}
.lg-switch__face {
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-thumb);
  opacity: calc(1 - var(--lg-lift) * var(--lg-switch-face-fade));
}
.lg-switch:focus {
  outline: none;
}
.lg-switch[data-keyboard]:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: 3px;
}
.lg-switch:disabled {
  opacity: 0.4;
  cursor: default;
}
/*# sourceMappingURL=index.css.map */