:where(:root, [data-theme="light"]) {
  --lg-foreground: rgb(0 0 0 / 0.88);
  --lg-muted: rgb(60 60 67 / 0.6);
  --lg-glass: rgb(255 255 255 / 0.6);
  --lg-glass-active: rgb(236 236 240 / 0.85);
  --lg-edge: rgb(0 0 0 / 0.08);
  --lg-drop: rgb(0 0 0 / 0.06);
  --lg-selection: rgb(0 0 0 / 0.1);
  --lg-lens: rgb(0 0 0 / 0.03);
  --lg-lens-drop: rgb(0 0 0 / 0.11);
  --lg-segment-track: rgb(118 118 128 / 0.12);
  --lg-segment-thumb: rgb(255 255 255);
  --lg-segment-label: rgb(0 0 0);
  --lg-segment-lens: rgb(0 0 0 / 0.03);
  --lg-surface: rgb(250 250 252 / 0.86);
  --lg-surface-edge: rgb(0 0 0 / 0.08);
  --lg-shadow: rgb(25 25 35 / 0.12);
  --lg-highlight: rgb(60 60 67 / 0.09);
  --lg-separator: rgb(60 60 67 / 0.15);
  --lg-destructive: #ff383c;
  --lg-track: rgb(59 59 66 / 0.3);
  --lg-rail: rgb(0 0 0 / 0.1);
  --lg-on: #34c759;
  --lg-fill: #0088ff;
  --lg-ring: rgb(0 0 0 / 0.4);
  --lg-lens-shine: -1.5;
  --lg-rim-shine: 0.3;
  --lg-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

:where([data-theme="dark"]) {
  --lg-foreground: rgb(255 255 255);
  --lg-muted: rgb(235 235 245 / 0.6);
  --lg-glass: rgb(40 40 40 / 0.62);
  --lg-glass-active: rgb(70 70 70 / 0.62);
  --lg-edge: rgb(255 255 255 / 0.08);
  --lg-drop: transparent;
  --lg-selection: rgb(255 255 255 / 0.145);
  --lg-lens: rgb(255 255 255 / 0.055);
  --lg-lens-drop: transparent;
  --lg-segment-track: transparent;
  --lg-segment-thumb: rgb(235 235 245 / 0.3);
  --lg-segment-label: rgb(255 255 255);
  --lg-segment-lens: transparent;
  --lg-surface: rgb(28 28 31 / 0.86);
  --lg-surface-edge: rgb(255 255 255 / 0.13);
  --lg-shadow: rgb(0 0 0 / 0.38);
  --lg-highlight: rgb(235 235 245 / 0.13);
  --lg-separator: rgb(235 235 245 / 0.16);
  --lg-destructive: #ff4245;
  --lg-track: rgb(235 235 245 / 0.3);
  --lg-rail: rgb(255 255 255 / 0.1);
  --lg-on: #30d158;
  --lg-fill: #0091ff;
  --lg-ring: rgb(255 255 255 / 0.5);
  --lg-lens-shine: 1;
  --lg-rim-shine: 0.13;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --lg-foreground: rgb(255 255 255);
    --lg-muted: rgb(235 235 245 / 0.6);
    --lg-glass: rgb(40 40 40 / 0.62);
    --lg-glass-active: rgb(70 70 70 / 0.62);
    --lg-edge: rgb(255 255 255 / 0.08);
    --lg-drop: transparent;
    --lg-selection: rgb(255 255 255 / 0.145);
    --lg-lens: rgb(255 255 255 / 0.055);
    --lg-lens-drop: transparent;
    --lg-segment-track: transparent;
    --lg-segment-thumb: rgb(235 235 245 / 0.3);
    --lg-segment-label: rgb(255 255 255);
    --lg-segment-lens: transparent;
    --lg-surface: rgb(28 28 31 / 0.86);
    --lg-surface-edge: rgb(255 255 255 / 0.13);
    --lg-shadow: rgb(0 0 0 / 0.38);
    --lg-highlight: rgb(235 235 245 / 0.13);
    --lg-separator: rgb(235 235 245 / 0.16);
    --lg-destructive: #ff4245;
    --lg-track: rgb(235 235 245 / 0.3);
    --lg-rail: rgb(255 255 255 / 0.1);
    --lg-on: #30d158;
    --lg-fill: #0091ff;
    --lg-ring: rgb(255 255 255 / 0.5);
  --lg-lens-shine: 1;
    --lg-rim-shine: 0.13;
  }
}

/* Glass */

.lg-glass {
  position: relative;
  background-color: var(--lg-glass);
  background-image: var(--lg-rim, none);
  background-size: 100% 100%;
  -webkit-backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5));
  backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5));
  box-shadow:
    inset 0 0 0 0.5px var(--lg-edge),
    0 1px 3px var(--lg-drop);
}

/* Glass that paints its rim (see refraction.ts) draws its edge line there,
   under the light, which an inset shadow would cover. */
.lg-glass[data-rim] {
  box-shadow: 0 1px 3px var(--lg-drop);
}

.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 240px at var(--lg-x, 50%) var(--lg-y, 50%),
    rgb(255 255 255 / 0.035),
    rgb(255 255 255 / 0.025) 50%,
    transparent
  );
  opacity: 0;
  transition: opacity 220ms ease-in-out;
}

.lg-glass[data-pressed]::after {
  opacity: 1;
  transition-duration: 0s;
}

/* Button */

.lg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  color: var(--lg-foreground);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  /* A long press keeps pressing, as on iOS, rather than selecting the label. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 200ms ease;
}

.lg-button[data-icon] {
  padding-left: 12px;
}

.lg-button[data-icon="only"] {
  width: 40px;
  padding: 0;
}

.lg-button > svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Lights up at once when pressed, as on iOS, and fades on release. */
.lg-button:is(:active, [data-pressed]) {
  background-color: var(--lg-glass-active);
  transition-duration: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .lg-button:hover {
    background-color: var(--lg-glass-active);
  }
}

.lg-button:disabled {
  background-color: var(--lg-glass);
  opacity: 0.35;
  cursor: default;
}

.lg-button[data-destructive]:not([data-tint]) {
  --lg-tint: var(--lg-destructive);
}

.lg-button:is([data-tint], [data-destructive]) {
  color: var(--lg-tint);
}

.lg-button[data-variant="filled"] {
  --lg-button-fill: var(--lg-tint, var(--lg-fill));
  color: #fff;
}

.lg-button[data-variant="filled"],
.lg-button[data-variant="filled"]:disabled {
  background-color: var(--lg-button-fill);
}

.lg-button[data-variant="filled"]:is(:active, [data-pressed]) {
  background-color: color-mix(in srgb, var(--lg-button-fill) 85%, #000);
}

@media (hover: hover) and (pointer: fine) {
  .lg-button[data-variant="filled"]:hover {
    background-color: color-mix(in srgb, var(--lg-button-fill) 88%, #fff);
  }

  .lg-button[data-variant="filled"]:hover:is(:active, [data-pressed]) {
    background-color: color-mix(in srgb, var(--lg-button-fill) 85%, #000);
  }
}

.lg-button:focus-visible,
.lg-tab:focus-visible,
.lg-switch:focus-visible,
.lg-menu-item:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: 2px;
}

/* Tab bar */

/* The bar's padding is --lg-tab-inset. The selection fills its slot, less
   --lg-thumb-inset on every side: none here, 2px on a segmented control. */
.lg-tab-bar {
  --lg-tab-width: 84px;
  --lg-tab-height: 32px;
  --lg-tab-inset: 4px;
  --lg-thumb-inset: 0px;
  --lg-lens-grow-x: 27px;
  --lg-lens-grow-y: 20px;
  position: relative;
  display: inline-flex;
  padding: var(--lg-tab-inset);
  border-radius: calc(var(--lg-tab-height) / 2 + var(--lg-tab-inset));
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.lg-tab-bar-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.lg-tab-bar-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 260px at var(--lg-x, 20%) 50%,
    rgb(255 255 255 / 0.09),
    rgb(255 255 255 / 0.045) 60%,
    transparent
  );
  opacity: 0;
  transition: opacity 160ms ease;
}

:is(.lg-tab-bar, .lg-segmented)[data-lifted] .lg-tab-bar-glass::before {
  opacity: 1;
  transition-duration: 120ms;
}

/* The labels, with room around them for the whole lifted lens, which
   refracts them (see lens.ts): Safari paints none of a filter outside its
   element. The room hangs outside the bar and takes no clicks. */
.lg-tab-labels {
  --lg-room-x: calc(var(--lg-lens-grow-x) / 2 + 4px);
  --lg-room-y: calc(var(--lg-lens-grow-y) / 2 + 4px);
  position: relative;
  z-index: 1;
  display: flex;
  margin: calc(var(--lg-room-y) * -1) calc(var(--lg-room-x) * -1);
  padding: var(--lg-room-y) var(--lg-room-x);
  pointer-events: none;
}

/* What the lifted lens shows in place of the labels: the same labels in full
   colour, laid exactly over them and seen only through the lens. */
.lg-tab-lensed {
  position: absolute;
  top: var(--lg-tab-inset);
  left: var(--lg-tab-inset);
  color: var(--lg-tab-selected, var(--lg-foreground));
  visibility: hidden;
}

:is(.lg-tab-bar, .lg-segmented)[data-lensing] .lg-tab-tint {
  visibility: hidden;
}

.lg-tab,
.lg-tab-copy {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--lg-tab-width);
  height: var(--lg-tab-height);
  font: inherit;
  font-size: 14px;
}

.lg-tab {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: calc(var(--lg-tab-height) / 2);
  color: var(--lg-muted);
  background: none;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-touch-callout: none;
  transition: color 200ms ease;
}

.lg-tab:focus-visible {
  outline-offset: -2px;
}

/* A tab's own label, wrapped so its colour can change at once, without the
   tab's colour transition. While the selection is over the selected tab (no
   data-away), it draws that tab's label alone: drawn twice, the copy on its
   own layer lands a fraction of a pixel off and the label beneath fringes it.
   Transparent, not hidden, so the tab keeps its name. */
.lg-tab-face {
  display: contents;
}

.lg-tab-bar:not([data-away]) .lg-tab[data-selected] > .lg-tab-face {
  color: transparent;
}

/* A label alone, centred by its letters: its box is trimmed to the height of
   the capitals above the baseline, so neither the font's ascent and descent
   nor the page's line height moves it off centre. Browsers without text-box
   centre its line box instead. */
.lg-tab-text {
  display: block;
  text-box: trim-both cap alphabetic;
}

/* Tabs with icons, as in an iOS tab bar: each icon over a small label, the
   others in full colour and the selected one in --lg-tab-selected. */
.lg-tab-bar[data-icons] {
  --lg-tab-width: 72px;
  --lg-tab-height: 52px;
  --lg-lens-grow-x: 24px;
  --lg-lens-grow-y: 16px;
  --lg-tab-selected: var(--lg-fill);
}

.lg-tab-bar[data-icons] :is(.lg-tab, .lg-tab-copy) {
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
  font-weight: 500;
}

.lg-tab-bar[data-icons] .lg-tab {
  color: var(--lg-foreground);
}

.lg-tab-icon {
  display: flex;
}

.lg-tab-icon > svg {
  width: 26px;
  height: 26px;
}

@media (hover: hover) and (pointer: fine) {
  .lg-tab:hover {
    color: var(--lg-foreground);
  }
}

.lg-tab-lens,
.lg-tab-tint,
.lg-segmented-thumb {
  position: absolute;
  top: calc(var(--lg-tab-inset) + var(--lg-thumb-inset));
  left: calc(var(--lg-tab-inset) + var(--lg-thumb-inset));
  width: calc(var(--lg-tab-width) - 2 * var(--lg-thumb-inset));
  height: calc(var(--lg-tab-height) - 2 * var(--lg-thumb-inset));
  border-radius: calc(var(--lg-tab-height) / 2 - var(--lg-thumb-inset));
  pointer-events: none;
  transform: translateX(calc(var(--lg-tab-width) * var(--lg-index, 0)));
  transition: opacity 140ms ease;
  will-change: transform;
}

.lg-tab-tint {
  z-index: 1;
  overflow: hidden;
  color: var(--lg-tab-selected, var(--lg-foreground));
}

/* The labels again, set back by the tint's inset so they line up. */
.lg-tab-row {
  display: flex;
  height: var(--lg-tab-height);
  margin: calc(var(--lg-thumb-inset) * -1) 0 0 calc(var(--lg-thumb-inset) * -1);
  transform: translateX(calc(var(--lg-tab-width) * var(--lg-index, 0) * -1));
  transform-origin: 0 0;
  will-change: transform;
}

/* Lifted, the lens casts iOS's shadow (fitted to iOS 26.1), faded in with its
   lift (--lg-lift) and kept to iOS's size against its own stretch
   (--lg-lift-y). The page's --lg-lens-drop colours it: none on a dark page. */
.lg-tab-lens.lg-glass {
  z-index: 2;
  background-color: transparent;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 calc(7px / var(--lg-lift-y, 1)) calc(11px / var(--lg-lift-y, 1))
    color-mix(in srgb, var(--lg-lens-drop) calc(var(--lg-lift, 0) * 100%), transparent);
  transition:
    opacity 140ms ease,
    background-color 140ms ease;
}

.lg-tab-bar[data-lifted] .lg-tab-lens.lg-glass {
  background-color: var(--lg-lens);
  transition-duration: 100ms;
}

.lg-tab-lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-selection);
  transition: opacity 140ms ease;
}

.lg-tab-lens[data-pressed]::after {
  opacity: 0.2;
}

.lg-tab-bar[data-lifted] .lg-tab-lens::before {
  opacity: 0;
  transition-duration: 100ms;
}

:is(.lg-tab-bar, .lg-segmented)[data-refracting] .lg-tab-lens.lg-glass {
  background-image: var(--lg-rim, none);
}

/* On a light page (data-light), where a faint lens is lost against light
   glass, the lifted lens stands out as iOS 26.1's does: it drops under the
   labels and bends the bar's glass and the page behind it, where the browser
   can (--lg-filter), and takes iOS's brighter rim. The labels it bends on its
   own, so they bend once. At rest it lies over the labels, as before. */
:is(.lg-tab-bar, .lg-segmented)[data-refracting][data-light] .lg-tab-lens.lg-glass {
  background-image: var(--lg-rim-bright, var(--lg-rim, none));
}

.lg-segmented[data-refracting][data-light] .lg-tab-lens.lg-glass,
.lg-tab-bar[data-under][data-light] .lg-tab-lens.lg-glass {
  z-index: 0;
  -webkit-backdrop-filter: var(--lg-filter, none);
  backdrop-filter: var(--lg-filter, none);
}

/* A tab bar's lens on a light page changes over with its lift, so the
   selected label never changes colour at once: the grey of the selection,
   which lies over the label at rest, fades as the lens lifts (--lg-rest),
   the lens drops under the labels once it's gone (data-under), and only then
   does its fill come in (--lg-under), as its bend does. Settling, the same
   in reverse. */
.lg-tab-bar[data-light] .lg-tab-lens::before {
  opacity: var(--lg-rest, 1);
  transition: none;
}

.lg-tab-bar[data-light] .lg-tab-lens.lg-glass {
  background-color: color-mix(in srgb, var(--lg-lens) calc(var(--lg-under, 0) * 100%), transparent);
  transition: opacity 140ms ease;
}

:is(.lg-tab-bar, .lg-segmented)[data-hidden] :is(.lg-tab-lens, .lg-tab-tint, .lg-segmented-thumb),
:is(.lg-tab-bar, .lg-segmented):not([data-ready]):not(:has([data-selected])) :is(.lg-tab-lens, .lg-tab-tint, .lg-segmented-thumb) {
  opacity: 0;
}

/* Segmented control, sized as iOS 26.1's, measured from UIKit: a 32px
   capsule, segments of 13px labels, and under the selected one a thumb inset
   2px on every side. Held, the thumb fades and the lens lifts in its place,
   24px wider and 16px taller. Its track is the tab bar's glass. On a light
   page it's tinted with iOS's track fill (--lg-segment-track), or the white
   thumb would vanish against a white page; on a dark one it's the glass
   alone, exactly as the tab bar's. */
.lg-segmented {
  --lg-tab-width: 84px;
  --lg-tab-height: 32px;
  --lg-tab-inset: 0px;
  --lg-thumb-inset: 2px;
  --lg-lens-grow-x: 24px;
  --lg-lens-grow-y: 16px;
  --lg-tab-selected: var(--lg-segment-label);
  position: relative;
  display: inline-flex;
  border-radius: calc(var(--lg-tab-height) / 2);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.lg-segmented > .lg-tab-bar-glass {
  background-image: var(--lg-rim, none), linear-gradient(var(--lg-segment-track) 0 0);
}

.lg-segmented :is(.lg-tab, .lg-tab-copy) {
  font-size: 13px;
}

/* Every label in full colour, the selected one in medium, as UIKit sets it.
   With no colour to change under the thumb, there's no tint: a second copy
   of a label drawn over it would thicken it. */
.lg-segmented .lg-tab,
.lg-segmented .lg-tab:hover {
  color: var(--lg-segment-label);
}

.lg-segmented :is(.lg-tab, .lg-tab-copy)[data-selected] {
  font-weight: 500;
}

.lg-segmented .lg-tab-tint {
  display: none;
}

.lg-segmented-thumb {
  background: var(--lg-segment-thumb);
}

.lg-segmented[data-lifted] .lg-segmented-thumb {
  opacity: 0;
  transition-duration: 100ms;
}

.lg-segmented .lg-tab-lens::before {
  content: none;
}

.lg-segmented[data-lifted] .lg-tab-lens.lg-glass {
  background-color: var(--lg-segment-lens);
  transition-duration: 100ms;
}

/* Input */

.lg-input {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  color: var(--lg-foreground);
  transition: background-color 200ms ease;
}

.lg-input:focus-within {
  background-color: var(--lg-glass-active);
}

.lg-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: none;
  font: inherit;
  font-size: 14px;
}

.lg-input input::placeholder {
  color: var(--lg-muted);
}

.lg-input input::-webkit-search-cancel-button {
  display: none;
}

.lg-input-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--lg-muted);
}

.lg-input-icon {
  display: grid;
  place-items: center;
}

.lg-input-icon > svg {
  width: 100%;
  height: 100%;
}

.lg-input-clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lg-muted);
  background: none;
  cursor: pointer;
}

.lg-input-clear svg {
  width: 14px;
  height: 14px;
}

.lg-input:has(input:disabled) {
  opacity: 0.35;
}

/* Switch and slider thumbs */

/* At rest, a white knob. Held, it lifts into clear glass, a lens that bends the
   track under its rim (see lens.ts), so the blur and brightening clear as it
   lifts and the track shows through true, all but a little frost:
   --lg-thumb-frost, the blur kept on the lifted glass. */
.lg-switch-thumb,
.lg-slider-thumb {
  --lg-settled: calc(1 - var(--lg-lift, 0));
  --lg-thumb-blur: calc(2px * var(--lg-settled) + var(--lg-thumb-frost, 0.5px) * var(--lg-lift, 0));
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--lg-thumb-blur)) brightness(calc(1 + 0.15 * var(--lg-settled))) saturate(1.5);
  backdrop-filter: blur(var(--lg-thumb-blur)) brightness(calc(1 + 0.15 * var(--lg-settled))) saturate(1.5);
  box-shadow:
    0 6px 24px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
    inset 0 2px 1px rgb(255 255 255 / 0.45),
    inset 2px 7px 24px rgb(0 0 0 / 0.09),
    inset -2px -7px 24px rgb(255 255 255 / 0.16);
}

.lg-thumb-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
}

/* Switch */

.lg-switch {
  --lg-scale: 0.375;
  position: relative;
  flex: none;
  width: calc(160px * var(--lg-scale));
  height: calc(67px * var(--lg-scale));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}


.lg-switch::before {
  content: "";
  position: absolute;
  inset: min(0px, calc((67px * var(--lg-scale) - 44px) / 2)) -8px;
}

/* What the lifted thumb refracts: the track, with room around it for the
   whole lens, since Safari paints none of a filter outside its element. */
.lg-switch-bed {
  position: absolute;
  inset: -6px -12px;
  pointer-events: none;
}

.lg-switch-track,
.lg-switch-fill {
  position: absolute;
  border-radius: 999px;
}

.lg-switch-track {
  inset: 6px 12px;
  background: var(--lg-track);
}

.lg-switch-fill {
  inset: 0;
  background: var(--lg-on);
  opacity: 0;
}

/* What the lifted thumb shows in place of the track: the track as Aave's
   switch draws it, a little smaller so the glass rings it, growing as the
   thumb does. It's seen only through the thumb (see lens.ts). */
.lg-switch-inset {
  visibility: hidden;
}

/* Centred by margins rather than a transform: WebKit sizes a filter's box by
   its content's untransformed layout, so nothing may sit past it even before
   a transform moves it back. */
.lg-switch-inset .lg-switch-track {
  inset: 0;
  width: calc((100% - 24px) * (0.85 + 0.1 * var(--lg-lift, 0)));
  height: calc((100% - 12px) * 0.75 * (0.525 + 0.45 * var(--lg-lift, 0)));
  margin: auto;
}

.lg-switch-thumb {
  top: 50%;
  left: calc(-21.95px * var(--lg-scale));
  width: calc(146px * var(--lg-scale));
  height: calc(92px * var(--lg-scale));
  transform: translate(0, -50%) scale(0.65);
}

.lg-switch[aria-checked="true"] .lg-switch-fill {
  opacity: 1;
}

.lg-switch[aria-checked="true"] .lg-switch-thumb {
  transform: translate(calc(57.9px * var(--lg-scale)), -50%) scale(0.65);
}

.lg-switch:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Slider */

.lg-slider {
  position: relative;
  width: 100%;
  height: 40px;
}

/* What the lifted thumb refracts, with room around the track for the whole lens. */
.lg-slider-bed {
  position: absolute;
  inset: -4px -16px;
  pointer-events: none;
}

.lg-slider-track {
  position: absolute;
  inset: 21px 16px auto;
  height: 6px;
  border-radius: 3px;
  background: var(--lg-rail);
}

/* Ends under the middle of the thumb, where a lifted thumb shows it. It's
   rounded rather than clipped by the track, since Safari can't refract
   content clipped round its corners. */
.lg-slider-fill {
  display: block;
  width: calc((100% - 36px) * var(--lg-progress) + 18px);
  height: 100%;
  border-radius: inherit;
  background: var(--lg-fill);
}

/* What the lifted thumb shows in place of the track: the track as Aave's
   slider draws it, a little thicker as if magnified, growing as the thumb
   does. It's
   seen only through the thumb (see lens.ts). --lg-slider-line sets how thick
   it is once the thumb is fully lifted, and --lg-slider-bend how far the
   thumb's rim bends it. */
.lg-slider-magnified {
  visibility: hidden;
}

.lg-slider-magnified .lg-slider-track {
  inset: 0 16px;
  height: calc(var(--lg-slider-line, 8px) * (0.6 + 0.4 * var(--lg-lift, 0)));
  margin: auto 0;
  border-radius: 999px;
}

/* Within a few pixels of either end, the fill gives way from the middle of
   the thumb to the end of the track, so through the thumb an empty slider
   shows no fill and a full one no bare track. */
.lg-slider-magnified .lg-slider-fill {
  --lg-travel: calc((100% - 36px) * var(--lg-progress));
  width: calc(
    var(--lg-travel) + min(18px, var(--lg-travel) * 4) + max(0px, 18px - (100% - 36px - var(--lg-travel)) * 4)
  );
}

.lg-slider-thumb {
  top: 0;
  left: calc((100% - 36px) * var(--lg-progress) - 12px);
  width: 60px;
  height: 40px;
  scale: 0.6;
}

.lg-slider input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.lg-slider input::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

/* The native thumb only takes the touch; the glass thumb is drawn beneath.
   iOS shades the native one even without its appearance, so hide it. */
.lg-slider input::-webkit-slider-thumb {
  width: 36px;
  height: 40px;
  margin-top: -17px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  /* A touch on the thumb drags it rather than scrolling the page; the rest of
     the track still scrolls. Blocking touchmove instead would stop Safari's
     own drag. */
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
}

.lg-slider input::-moz-range-track {
  height: 6px;
  background: transparent;
}

.lg-slider input::-moz-range-thumb {
  width: 36px;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.lg-slider:has(input:focus-visible) .lg-slider-thumb {
  outline: 2px solid var(--lg-ring);
  outline-offset: 3px;
}

.lg-slider:has(input:disabled) {
  opacity: 0.35;
}

.lg-slider input:disabled {
  cursor: default;
}

/* Menu */

.lg-menu {
  position: relative;
  display: inline-flex;
}

.lg-menu-card {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 200px;
  border-radius: 20px;
  color: var(--lg-foreground);
  font-size: 14px;
  transform-origin: calc(100% - 20px) 20px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lg-menu-card[data-align="start"] {
  right: auto;
  left: 0;
  transform-origin: 20px 20px;
}

.lg-menu-card[data-phase="leaving"] {
  pointer-events: none;
}

.lg-menu-surface {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.9);
  backdrop-filter: blur(22px) saturate(1.9);
  box-shadow:
    inset 0 0 0 0.5px var(--lg-surface-edge),
    0 12px 40px var(--lg-shadow);
  pointer-events: none;
}

.lg-menu-card[data-align="start"] .lg-menu-surface {
  right: auto;
  left: 0;
}

.lg-menu-glyph {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.lg-menu-card[data-align="start"] .lg-menu-glyph {
  right: auto;
  left: 0;
}

.lg-menu-glyph > svg {
  width: 20px;
  height: 20px;
}

.lg-menu-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.lg-menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.025));
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.lg-menu-card[data-pressed]::after {
  opacity: 1;
}

.lg-menu-plate {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  background: var(--lg-highlight);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 80ms ease-out;
}

.lg-menu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 14px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lg-menu-item > svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.lg-menu-item:focus-visible {
  outline-offset: -2px;
  background: var(--lg-highlight);
}

@media (hover: hover) and (pointer: fine) {
  .lg-menu-item:hover:not(:disabled) {
    background: var(--lg-highlight);
  }
}

.lg-menu-card[data-scrubbing] .lg-menu-item {
  background: transparent;
  outline: none;
}

.lg-menu-item[data-destructive] {
  color: var(--lg-destructive);
}

.lg-menu-item:disabled {
  opacity: 0.38;
  cursor: default;
}

.lg-menu-separator {
  flex: none;
  margin: 7px 11px;
  border-top: 0.5px solid var(--lg-separator);
}

@media (prefers-reduced-motion: reduce) {
  .lg-menu-plate {
    transition: opacity 80ms ease-out;
  }

  .lg-menu-card {
    animation: lg-menu-fade 100ms ease-out;
  }
}

@keyframes lg-menu-fade {
  from {
    opacity: 0;
  }
}