/* Generated by update-glass.py from the liquid-glass skill. Do not edit. */
/* liquid-glass.css: layers for liquid-glass.js. Values measured from Apple's
   renderer (iOS 26.5 and 27.0 simulators), see reference/measurements/.

   Layer model (bottom → top):
     ::before   the lens      blur + refraction + tint (one SVG filter in Chromium)
     .lg-edge   iOS 27 dark outline, thin, strongest on the left/right sides
     .lg-glow   press glow under the finger
     ::after    rim highlight, ~1px, angle-dependent (CSS tiers only; Chromium
                draws it inside the SVG filter as true added light)
     content    labels and icons; legibility comes from the tint, not text-shadow

   The interior is FLAT. Apple has no inner glow or inner shade; earlier
   versions of this skill invented them.

   NEVER put mix-blend-mode on anything inside .lg. In Chromium it turns the
   glass into an isolated group and the lens samples nothing: the glass goes
   invisible. Masks, opacity and transforms are safe. */

/* <generated> by reference/measurements/lab/build.py from presets.json. Do not hand-edit. */
:root {
  --lg-spring-tab: linear(0.0, 0.0167, 0.0603, 0.1221, 0.1955, 0.275, 0.3565, 0.4369, 0.5138, 0.5858, 0.6519, 0.7116, 0.7646, 0.811, 0.8511, 0.8854, 0.9142, 0.9381, 0.9576, 0.9733, 0.9857, 0.9952, 1.0024, 1.0076, 1.0112, 1.0135, 1.0147, 1.0152, 1.015, 1.0144, 1.0135, 1.0124, 1.0112, 1.01, 1.0088, 1.0076, 1.0065, 1.0055, 1.0045, 1.0037, 1);
  --lg-spring-press: linear(0.0, 0.017, 0.061, 0.1228, 0.1955, 0.2736, 0.3531, 0.4311, 0.5054, 0.5747, 0.6382, 0.6954, 0.7463, 0.7911, 0.8299, 0.8633, 0.8917, 0.9155, 0.9354, 0.9517, 0.965, 0.9757, 0.9841, 0.9907, 0.9957, 0.9994, 1.0021, 1.004, 1.0052, 1.0059, 1.0062, 1.0063, 1.0061, 1.0058, 1.0053, 1.0049, 1.0044, 1.0039, 1.0034, 1.0029, 1);
}
.lg--ios27 { --lg-spring-tab: linear(0.0, 0.0184, 0.0655, 0.1315, 0.2086, 0.291, 0.3742, 0.4551, 0.5316, 0.6022, 0.6663, 0.7235, 0.7738, 0.8174, 0.8547, 0.8864, 0.9128, 0.9346, 0.9524, 0.9667, 0.9781, 0.9869, 0.9936, 0.9986, 1.0023, 1.0047, 1.0063, 1.0073, 1.0077, 1.0077, 1.0074, 1.007, 1.0064, 1.0058, 1.0052, 1.0045, 1.0039, 1.0034, 1.0028, 1.0024, 1); }
/* CSS-only defaults (no JS): set .lg--ios26|ios27, .lg--regular|clear, .lg--dark|light yourself. */
.lg--ios26.lg--regular.lg--dark {
  --lg-blur: 3.0px;
  --lg-fb-sat: 1.17;
  --lg-fb-fill: rgba(29,29,29,0.495);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,0.277) 0deg, rgba(255,255,255,0.157) 15deg, rgba(255,255,255,0.109) 30deg, rgba(255,255,255,0.040) 45deg, rgba(255,255,255,0.109) 60deg, rgba(255,255,255,0.157) 75deg, rgba(255,255,255,0.277) 90deg, rgba(255,255,255,0.266) 105deg, rgba(255,255,255,0.345) 120deg, rgba(255,255,255,0.365) 135deg, rgba(255,255,255,0.345) 150deg, rgba(255,255,255,0.266) 165deg, rgba(255,255,255,0.277) 180deg, rgba(255,255,255,0.157) 195deg, rgba(255,255,255,0.109) 210deg, rgba(255,255,255,0.040) 225deg, rgba(255,255,255,0.109) 240deg, rgba(255,255,255,0.157) 255deg, rgba(255,255,255,0.277) 270deg, rgba(255,255,255,0.266) 285deg, rgba(255,255,255,0.345) 300deg, rgba(255,255,255,0.365) 315deg, rgba(255,255,255,0.345) 330deg, rgba(255,255,255,0.266) 345deg, rgba(255,255,255,0.277) 360deg);
  --lg-glow-a: 0.092;
}
.lg--ios26.lg--regular.lg--light {
  --lg-blur: 3.0px;
  --lg-fb-sat: 1.027;
  --lg-fb-fill: rgba(255,255,255,0.564);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,0.655) 0deg, rgba(255,255,255,0.390) 15deg, rgba(255,255,255,0.295) 30deg, rgba(255,255,255,0.000) 45deg, rgba(255,255,255,0.295) 60deg, rgba(255,255,255,0.390) 75deg, rgba(255,255,255,0.655) 90deg, rgba(255,255,255,0.625) 105deg, rgba(255,255,255,0.805) 120deg, rgba(255,255,255,0.715) 135deg, rgba(255,255,255,0.805) 150deg, rgba(255,255,255,0.625) 165deg, rgba(255,255,255,0.655) 180deg, rgba(255,255,255,0.390) 195deg, rgba(255,255,255,0.295) 210deg, rgba(255,255,255,0.000) 225deg, rgba(255,255,255,0.295) 240deg, rgba(255,255,255,0.390) 255deg, rgba(255,255,255,0.655) 270deg, rgba(255,255,255,0.625) 285deg, rgba(255,255,255,0.805) 300deg, rgba(255,255,255,0.715) 315deg, rgba(255,255,255,0.805) 330deg, rgba(255,255,255,0.625) 345deg, rgba(255,255,255,0.655) 360deg);
  --lg-glow-a: 0.300;
}
.lg--ios26.lg--clear {
  --lg-blur: 1.5px;
  --lg-fb-sat: 1.08;
  --lg-fb-fill: rgba(255,255,255,0.112);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,0.581) 0deg, rgba(255,255,255,0.337) 15deg, rgba(255,255,255,0.222) 30deg, rgba(255,255,255,0.010) 45deg, rgba(255,255,255,0.222) 60deg, rgba(255,255,255,0.337) 75deg, rgba(255,255,255,0.581) 90deg, rgba(255,255,255,0.559) 105deg, rgba(255,255,255,0.724) 120deg, rgba(255,255,255,0.677) 135deg, rgba(255,255,255,0.724) 150deg, rgba(255,255,255,0.559) 165deg, rgba(255,255,255,0.581) 180deg, rgba(255,255,255,0.337) 195deg, rgba(255,255,255,0.222) 210deg, rgba(255,255,255,0.010) 225deg, rgba(255,255,255,0.222) 240deg, rgba(255,255,255,0.337) 255deg, rgba(255,255,255,0.581) 270deg, rgba(255,255,255,0.559) 285deg, rgba(255,255,255,0.724) 300deg, rgba(255,255,255,0.677) 315deg, rgba(255,255,255,0.724) 330deg, rgba(255,255,255,0.559) 345deg, rgba(255,255,255,0.581) 360deg);
  --lg-glow-a: 0.148;
}
.lg--ios27.lg--regular.lg--dark {
  --lg-blur: 5.6px;
  --lg-fb-sat: 1.75;
  --lg-fb-fill: rgba(117,117,117,0.262);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,0.345) 0deg, rgba(255,255,255,0.211) 15deg, rgba(255,255,255,0.170) 30deg, rgba(255,255,255,0.075) 45deg, rgba(255,255,255,0.057) 60deg, rgba(255,255,255,0.008) 75deg, rgba(255,255,255,0.000) 90deg, rgba(255,255,255,0.008) 105deg, rgba(255,255,255,0.057) 120deg, rgba(255,255,255,0.075) 135deg, rgba(255,255,255,0.170) 150deg, rgba(255,255,255,0.211) 165deg, rgba(255,255,255,0.345) 180deg, rgba(255,255,255,0.211) 195deg, rgba(255,255,255,0.170) 210deg, rgba(255,255,255,0.075) 225deg, rgba(255,255,255,0.057) 240deg, rgba(255,255,255,0.008) 255deg, rgba(255,255,255,0.000) 270deg, rgba(255,255,255,0.008) 285deg, rgba(255,255,255,0.057) 300deg, rgba(255,255,255,0.075) 315deg, rgba(255,255,255,0.170) 330deg, rgba(255,255,255,0.211) 345deg, rgba(255,255,255,0.345) 360deg);
  --lg-glow-a: 0.122;
  --lg-outline: conic-gradient(from 0deg, rgba(0,0,0,0.004) 0deg, rgba(0,0,0,0.004) 15deg, rgba(0,0,0,0.096) 30deg, rgba(0,0,0,0.317) 45deg, rgba(0,0,0,0.263) 60deg, rgba(0,0,0,0.121) 75deg, rgba(0,0,0,0.308) 90deg, rgba(0,0,0,0.121) 105deg, rgba(0,0,0,0.263) 120deg, rgba(0,0,0,0.317) 135deg, rgba(0,0,0,0.096) 150deg, rgba(0,0,0,0.004) 165deg, rgba(0,0,0,0.004) 180deg, rgba(0,0,0,0.004) 195deg, rgba(0,0,0,0.096) 210deg, rgba(0,0,0,0.317) 225deg, rgba(0,0,0,0.263) 240deg, rgba(0,0,0,0.121) 255deg, rgba(0,0,0,0.308) 270deg, rgba(0,0,0,0.121) 285deg, rgba(0,0,0,0.263) 300deg, rgba(0,0,0,0.317) 315deg, rgba(0,0,0,0.096) 330deg, rgba(0,0,0,0.004) 345deg, rgba(0,0,0,0.004) 360deg);
}
.lg--ios27.lg--regular.lg--light {
  --lg-blur: 5.6px;
  --lg-fb-sat: 1.91;
  --lg-fb-fill: rgba(255,255,255,0.465);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,0.606) 0deg, rgba(255,255,255,0.372) 15deg, rgba(255,255,255,0.292) 30deg, rgba(255,255,255,0.115) 45deg, rgba(255,255,255,0.106) 60deg, rgba(255,255,255,0.000) 75deg, rgba(255,255,255,0.000) 90deg, rgba(255,255,255,0.000) 105deg, rgba(255,255,255,0.106) 120deg, rgba(255,255,255,0.115) 135deg, rgba(255,255,255,0.292) 150deg, rgba(255,255,255,0.372) 165deg, rgba(255,255,255,0.606) 180deg, rgba(255,255,255,0.372) 195deg, rgba(255,255,255,0.292) 210deg, rgba(255,255,255,0.115) 225deg, rgba(255,255,255,0.106) 240deg, rgba(255,255,255,0.000) 255deg, rgba(255,255,255,0.000) 270deg, rgba(255,255,255,0.000) 285deg, rgba(255,255,255,0.106) 300deg, rgba(255,255,255,0.115) 315deg, rgba(255,255,255,0.292) 330deg, rgba(255,255,255,0.372) 345deg, rgba(255,255,255,0.606) 360deg);
  --lg-glow-a: 0.265;
  --lg-outline: conic-gradient(from 0deg, rgba(0,0,0,0.117) 0deg, rgba(0,0,0,0.054) 15deg, rgba(0,0,0,0.183) 30deg, rgba(0,0,0,0.429) 45deg, rgba(0,0,0,0.288) 60deg, rgba(0,0,0,0.125) 75deg, rgba(0,0,0,0.308) 90deg, rgba(0,0,0,0.125) 105deg, rgba(0,0,0,0.288) 120deg, rgba(0,0,0,0.429) 135deg, rgba(0,0,0,0.183) 150deg, rgba(0,0,0,0.054) 165deg, rgba(0,0,0,0.117) 180deg, rgba(0,0,0,0.054) 195deg, rgba(0,0,0,0.183) 210deg, rgba(0,0,0,0.429) 225deg, rgba(0,0,0,0.288) 240deg, rgba(0,0,0,0.125) 255deg, rgba(0,0,0,0.308) 270deg, rgba(0,0,0,0.125) 285deg, rgba(0,0,0,0.288) 300deg, rgba(0,0,0,0.429) 315deg, rgba(0,0,0,0.183) 330deg, rgba(0,0,0,0.054) 345deg, rgba(0,0,0,0.117) 360deg);
}
.lg--ios27.lg--clear {
  --lg-blur: 1.2px;
  --lg-fb-sat: 1.166;
  --lg-fb-fill: rgba(255,255,255,0.14);
  --lg-rim: conic-gradient(from 0deg, rgba(255,255,255,1.000) 0deg, rgba(255,255,255,0.879) 15deg, rgba(255,255,255,0.700) 30deg, rgba(255,255,255,0.368) 45deg, rgba(255,255,255,0.277) 60deg, rgba(255,255,255,0.060) 75deg, rgba(255,255,255,0.000) 90deg, rgba(255,255,255,0.060) 105deg, rgba(255,255,255,0.277) 120deg, rgba(255,255,255,0.368) 135deg, rgba(255,255,255,0.700) 150deg, rgba(255,255,255,0.879) 165deg, rgba(255,255,255,1.000) 180deg, rgba(255,255,255,0.879) 195deg, rgba(255,255,255,0.700) 210deg, rgba(255,255,255,0.368) 225deg, rgba(255,255,255,0.277) 240deg, rgba(255,255,255,0.060) 255deg, rgba(255,255,255,0.000) 270deg, rgba(255,255,255,0.060) 285deg, rgba(255,255,255,0.277) 300deg, rgba(255,255,255,0.368) 315deg, rgba(255,255,255,0.700) 330deg, rgba(255,255,255,0.879) 345deg, rgba(255,255,255,1.000) 360deg);
  --lg-glow-a: 0.151;
  --lg-outline: conic-gradient(from 0deg, rgba(0,0,0,0.000) 0deg, rgba(0,0,0,0.000) 15deg, rgba(0,0,0,0.092) 30deg, rgba(0,0,0,0.308) 45deg, rgba(0,0,0,0.258) 60deg, rgba(0,0,0,0.117) 75deg, rgba(0,0,0,0.308) 90deg, rgba(0,0,0,0.117) 105deg, rgba(0,0,0,0.258) 120deg, rgba(0,0,0,0.308) 135deg, rgba(0,0,0,0.092) 150deg, rgba(0,0,0,0.000) 165deg, rgba(0,0,0,0.000) 180deg, rgba(0,0,0,0.000) 195deg, rgba(0,0,0,0.092) 210deg, rgba(0,0,0,0.308) 225deg, rgba(0,0,0,0.258) 240deg, rgba(0,0,0,0.117) 255deg, rgba(0,0,0,0.308) 270deg, rgba(0,0,0,0.117) 285deg, rgba(0,0,0,0.258) 300deg, rgba(0,0,0,0.308) 315deg, rgba(0,0,0,0.092) 330deg, rgba(0,0,0,0.000) 345deg, rgba(0,0,0,0.000) 360deg);
}
/* </generated> */

.lg {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  color: var(--lg-ink, #fff);
  background: transparent; /* anything here would be sampled by the lens */
}
.lg--light { --lg-ink: #000; }

/* ---- the lens ----
   Tier B (Safari, Firefox, or no JS): blur + fitted saturate + fitted overlay.
   Tier A (Chromium, set by JS via data-lg-filter): one SVG filter does
   blur → refract → tint, and only the thickness overlay remains in CSS. */
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(var(--lg-thick, transparent), var(--lg-thick, transparent)),
    linear-gradient(var(--lg-fb-fill), var(--lg-fb-fill));
  -webkit-backdrop-filter: blur(calc(var(--lg-blur) * var(--lg-amt, 1))) saturate(var(--lg-fb-sat));
  backdrop-filter: blur(calc(var(--lg-blur) * var(--lg-amt, 1))) saturate(var(--lg-fb-sat));
  opacity: var(--lg-amt, 1); /* appear / disappear ramp (JS) */
}
/* No @supports (backdrop-filter: url()) here on purpose: Safari and Firefox
   say yes to it but render nothing, and WebKit then drops the blur too.
   The JS checks for Blink before setting data-lg-filter. */
.lg[data-lg-filter]::before {
  background: linear-gradient(var(--lg-thick, transparent), var(--lg-thick, transparent));
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
}

/* ---- rim highlight: added light, not a white border ----
   iOS 26: brightest top-left AND bottom-right, equal.  iOS 27: top and bottom. */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: -1;
  pointer-events: none;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--lg-amt, 1);
}
/* iOS 27 Clear: brighter core plus a soft ~3px tail */
.lg--ios27.lg--clear::after { padding: 1.5px; }
/* Chromium: the filter already added the highlight as true light */
.lg[data-lg-filter]::after { background: none; }

/* ---- iOS 27 dark outline: straddles the edge, darkest at the sides ---- */
.lg-edge {
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 1px;
  z-index: -1;
  pointer-events: none;
  background: var(--lg-outline, none);
  opacity: var(--lg-amt, 1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---- shadow: Apple's is faint or absent. Never the old 40px drop shadow. ---- */
.lg.lg--ios26.lg--dark.lg--regular  { box-shadow: 0 3px 12px rgba(0, 0, 0, calc(.05 * var(--lg-amt, 1))); }
.lg.lg--ios26.lg--light.lg--regular { box-shadow: 0 3px 16px rgba(0, 0, 0, calc(.12 * var(--lg-amt, 1))); }
/* iOS 27 and Clear: none measured */

/* ---- press: the glass GROWS and glows (measured 1.066 / 1.062, +0.06) ---- */
.lg--interactive {
  transition: transform 300ms var(--lg-spring-press, ease-out);
  will-change: transform;
}
.lg--ios26.lg--pressed { transform: scale(1.066); }
.lg--ios27.lg--pressed { transform: scale(1.062); }

.lg-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--lg-px, 50%) var(--lg-py, 50%), rgba(255, 255, 255, calc(var(--lg-glow-a, .15) * 1.3)), transparent 70%),
    linear-gradient(rgba(255, 255, 255, var(--lg-glow-a, .15)), rgba(255, 255, 255, var(--lg-glow-a, .15)));
  transition: opacity 150ms ease-out 200ms; /* glow lingers ~0.2s after release */
}
.lg--pressed .lg-glow { opacity: 1; transition: opacity 120ms ease-out; }

/* ---- inner elements: FILLS, never nested glass ----
   Measured in the iOS tab bar (light): selected pill darkens the bar by ~11%. */
.lg-fill         { background: rgba(255, 255, 255, .14); border-radius: 999px; }
.lg-fill--active { background: rgba(255, 255, 255, .24); }
.lg--light .lg-fill         { background: rgba(0, 0, 0, .06); }
.lg--light .lg-fill--active { background: rgba(0, 0, 0, .11); }

/* ---- selection pill: rigid slide on Apple's spring ----
   A programmatic tab switch does NOT stretch the pill (measured). The stretch
   seen under a finger belongs to the lift-into-lens touch state. */
.lg-pill {
  position: absolute;
  left: var(--lg-pill-x, 0);
  width: var(--lg-pill-w, 0);
  transition:
    left  550ms var(--lg-spring-tab, ease-out),
    width 550ms var(--lg-spring-tab, ease-out);
}

/* ---- iOS 26 flip: the old look fades out over ~0.3s (JS adds .lg-xfade) ---- */
.lg { transition: color 300ms ease-out; }
.lg-xfade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  pointer-events: none;
}

/* ---- scroll edge effect (attachScrollEdge) ----
   iOS 26: soft, masked by the measured strength profile. iOS 27: a hard band.
   Keep your bar above it (z-index > 1). */
.lg-scroll-edge {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--lg-se-fill, transparent);
  -webkit-backdrop-filter: var(--lg-se-filter);
  backdrop-filter: var(--lg-se-filter);
  transition: opacity 200ms ease-out;
}
.lg-scroll-edge--top { top: 0; }
.lg-scroll-edge--bottom { bottom: 0; }

/* ---- merge / split (attachGlassGroup) ----
   One glass layer behind all [data-lg-item] children, shaped by the smooth
   union of their outlines (mask image from JS). Items stay transparent. */
.lg-group {
  position: relative;
  isolation: isolate;
  color: var(--lg-ink, #fff);
}
.lg-group.lg--light { --lg-ink: #000; }
.lg-group [data-lg-item] { background: transparent; }
.lg-group-layer,
.lg-group-rim {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.lg-group-layer {
  background:
    linear-gradient(var(--lg-thick, transparent), var(--lg-thick, transparent)),
    linear-gradient(var(--lg-fb-fill), var(--lg-fb-fill));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-fb-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-fb-sat));
}
.lg-group-layer[data-lg-filter] {
  background: linear-gradient(var(--lg-thick, transparent), var(--lg-thick, transparent));
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
}
.lg-group-rim { background-size: 100% 100%; }

/* ---- touch lens (attachTabLens) ----
   Held: the whole bar grows (measured ×1.05 iOS 26, ×1.04 iOS 27) on the press
   spring and springs back on release. The lens element is larger than the
   visible capsule by --lg-lens-m on each side (outward rim samples need
   backdrop there); clip-path trims it. */
.lg-tabbar { transition: transform 300ms var(--lg-spring-press, ease-out); }
.lg-tabbar.lg--held { transform: scale(var(--lg-grow, 1.05)); }
.lg-lens {
  position: absolute;
  left: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.lg-lens[data-lg-filter] {
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
}
/* Tier B (no SVG in backdrop-filter): no magnifier, but the clear rim with a
   faint rainbow edge so the lift still reads. */
.lg-lens:not([data-lg-filter])::before {
  content: '';
  position: absolute;
  inset: var(--lg-lens-m);
  border-radius: var(--lg-lens-r);
  padding: 1.5px;
  background: conic-gradient(from 200deg, rgba(255,80,80,.28), rgba(255,220,80,.28), rgba(80,255,160,.28), rgba(80,160,255,.28), rgba(200,80,255,.28), rgba(255,80,80,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* iOS 27: the lens carries the dark outline too (Tier A draws it in the filter) */
.lg-lens:not([data-lg-filter])::after {
  content: '';
  position: absolute;
  inset: calc(var(--lg-lens-m) - 0.5px);
  border-radius: var(--lg-lens-r);
  padding: 1px;
  background: var(--lg-outline, none);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---- Tier C: accessibility. These must win. ---- */
@media (prefers-reduced-transparency: reduce) {
  .lg::before,
  .lg[data-lg-filter]::before {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background: rgba(28, 28, 30, .92);
  }
  .lg--light::before,
  .lg--light[data-lg-filter]::before { background: rgba(242, 242, 247, .92); }
  .lg-group-layer,
  .lg-group-layer[data-lg-filter] {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background: rgba(28, 28, 30, .92);
  }
  .lg-group.lg--light .lg-group-layer { background: rgba(242, 242, 247, .92); }
  .lg-lens { display: none; }
  .lg-scroll-edge { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(28, 28, 30, .9); }
  .lg-scroll-edge--light { background: rgba(242, 242, 247, .9); }
}

@media (prefers-contrast: more) {
  .lg::before,
  .lg[data-lg-filter]::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #000;
  }
  .lg--light::before,
  .lg--light[data-lg-filter]::before { background: #fff; }
  .lg::after, .lg[data-lg-filter]::after { background: #fff; padding: 2px; }
  .lg-group-layer, .lg-group-layer[data-lg-filter] { -webkit-backdrop-filter: none; backdrop-filter: none; background: #000; }
  .lg-group.lg--light .lg-group-layer { background: #fff; }
  .lg-lens { display: none; }
  .lg--light::after { background: #000; }
}

@media (prefers-reduced-motion: reduce) {
  .lg--interactive, .lg-pill, .lg-tabbar { transition: none; }
  .lg--pressed, .lg-tabbar.lg--held { transform: none; }
  .lg-lens { display: none; }
}