/* Motion owns individual scale/opacity/transition, never semantic visibility or focus. */
.lg-motion { transform-origin: center; }
.lg-glass.lg-motion[data-lg-motion-pressed='true']::before {
  background-image: radial-gradient(ellipse at var(--lg-motion-light-x, 50%) var(--lg-motion-light-y, 50%), rgb(255 255 255 / .42), transparent 65%),
    linear-gradient(color-mix(in srgb, var(--lg-tint) calc(var(--lg-tint-opacity) * 100%), transparent), color-mix(in srgb, var(--lg-tint) calc(var(--lg-tint-opacity) * 100%), transparent));
}
@media (prefers-reduced-motion: reduce) { .lg-motion { scale: none !important; } }
/* The decorative layer is a sibling of the scrollport, never a content mask. */
.lg-scroll-edges {
  --lg-scroll-edge-size: 32px;
  --lg-scroll-edge-fill: rgb(245 247 252 / .86);
  --lg-scroll-edge-solid-fill: #f4f6fb;
  --lg-scroll-edge-line: rgb(23 32 51 / .24);
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; user-select: none; border-radius: inherit;
}
.lg-scroll-edges::before, .lg-scroll-edges::after {
  content: ''; position: absolute; inset-inline: 0;
  height: min(var(--lg-scroll-edge-size), 50%); pointer-events: none;
  opacity: 0; transition: opacity 140ms ease;
  background: var(--lg-scroll-edge-fill);
  /* Only this empty decorative pseudo-element is faded, never scroll content. */
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.lg-scroll-edges::before { top: 0; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.lg-scroll-edges::after {
  bottom: 0; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}
.lg-scroll-edges[data-lg-edge-top='true']::before, .lg-scroll-edges[data-lg-edge-bottom='true']::after { opacity: 1; }
/* A focused control and its outline stay completely unobscured. */
.lg-scroll-edges[data-lg-edge-focus='true']::before, .lg-scroll-edges[data-lg-edge-focus='true']::after { opacity: 0; transition: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-scroll-edges::before, .lg-scroll-edges::after { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.lg-scroll-edges[data-lg-edge-style='hard']::before, .lg-scroll-edges[data-lg-edge-style='hard']::after {
  -webkit-mask-image: none; mask-image: none;
}
.lg-scroll-edges[data-lg-edge-style='hard']::before { border-bottom: 1px solid var(--lg-scroll-edge-line); }
.lg-scroll-edges[data-lg-edge-style='hard']::after { border-top: 1px solid var(--lg-scroll-edge-line); }
@media (prefers-color-scheme: dark) {
  .lg-scroll-edges { --lg-scroll-edge-fill: rgb(22 28 43 / .86); --lg-scroll-edge-solid-fill: #192133; --lg-scroll-edge-line: rgb(244 247 255 / .32); }
}
/* Opaque boundaries are thin separators so they do not cover focused content. */
.lg-scroll-edges[data-lg-edge-solid='true']::before, .lg-scroll-edges[data-lg-edge-solid='true']::after {
  height: 2px; background: var(--lg-scroll-edge-solid-fill); border: 0;
  -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .lg-scroll-edges::before, .lg-scroll-edges::after {
    height: 2px; background: CanvasText; border: 0;
    -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) { .lg-scroll-edges::before, .lg-scroll-edges::after { transition: none; } }
@media print { .lg-scroll-edges { display: none; } }
/* One decorative backing; controls retain their own semantics and hit targets. */
.lg-glass-indicator { box-sizing: border-box; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lg-glass-indicator { transition: none !important; } }
/* All selectors are prefixed. No reset, no global styles, no required JS. */
.lg-glass {
  --lg-radius: 24px; --lg-blur: 18px; --lg-saturation: 1.35;
  --lg-opacity: 1; --lg-tint: #ffffff; --lg-tint-opacity: 0;
  --lg-fill-rgb: 245 247 252; --lg-fill-alpha: .72; --lg-solid-fill: #f4f6fb;
  --lg-ink: #172033; --lg-edge: rgb(255 255 255 / .72);
  position: relative; z-index: 0; isolation: isolate; border-radius: var(--lg-radius); color: var(--lg-ink);
  background: var(--lg-solid-fill); border: 1px solid var(--lg-edge);
  box-shadow: 0 12px 36px -12px rgb(12 20 40 / .28), inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -1px 0 rgb(0 0 0 / .12);
}
.lg-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at var(--lg-pointer-x, 20%) var(--lg-pointer-y, 0%), rgb(255 255 255 / .3), transparent 65%);
}
/* A web design choice, not Apple's native curve. Optical displacement remains round. */
@supports (corner-shape: superellipse(1.5)) {
  .lg-glass[data-lg-corner='continuous']:not([data-lg-renderer='svg-experimental']) { corner-shape: superellipse(1.5); }
  .lg-glass::before { corner-shape: inherit; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-glass { background: transparent; }
  .lg-glass::before {
    background-color: var(--lg-fill, rgb(var(--lg-fill-rgb) / calc(var(--lg-fill-alpha) * var(--lg-opacity))));
    background-image: radial-gradient(ellipse at var(--lg-pointer-x, 20%) var(--lg-pointer-y, 0%), rgb(255 255 255 / .3), transparent 65%),
      linear-gradient(color-mix(in srgb, var(--lg-tint) calc(var(--lg-tint-opacity) * 100%), transparent), color-mix(in srgb, var(--lg-tint) calc(var(--lg-tint-opacity) * 100%), transparent));
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(var(--lg-blur)) saturate(var(--lg-saturation));
    backdrop-filter: var(--lg-filter, blur(0px)) blur(var(--lg-blur)) saturate(var(--lg-saturation));
  }
}
.lg-glass[data-lg-variant='clear'] { --lg-fill-rgb: 16 22 35; --lg-fill-alpha: .24; --lg-solid-fill: #192133; --lg-ink: #fff; --lg-blur: 6px; }
.lg-glass[data-lg-appearance='dark'], .lg-glass[data-lg-appearance='auto'][data-lg-backdrop='dark'] {
  --lg-fill-rgb: 22 28 43; --lg-solid-fill: #192133; --lg-ink: #f4f7ff; --lg-edge: rgb(255 255 255 / .28);
}
@media (prefers-color-scheme: dark) {
  .lg-glass:not([data-lg-appearance='light']):not([data-lg-appearance='dark']):not([data-lg-backdrop='light']):not([data-lg-backdrop='dark']) {
    --lg-fill-rgb: 22 28 43; --lg-solid-fill: #192133; --lg-ink: #f4f7ff; --lg-edge: rgb(255 255 255 / .28);
  }
}
.lg-glass[data-lg-appearance='light'], .lg-glass[data-lg-appearance='auto'][data-lg-backdrop='light'] {
  --lg-fill-rgb: 245 247 252; --lg-solid-fill: #f4f6fb; --lg-ink: #172033; --lg-edge: rgb(255 255 255 / .72);
}
/* Opaque accessibility mode always uses a readable fill/ink pair, including clear. */
.lg-glass[data-lg-variant='clear'][data-lg-appearance='auto'][data-lg-backdrop='auto'][data-lg-solid='true'] { --lg-ink: #172033; --lg-solid-fill: #f4f6fb; }
@media (prefers-color-scheme: dark) {
  .lg-glass[data-lg-variant='clear'][data-lg-appearance='auto'][data-lg-backdrop='auto'][data-lg-solid='true'] { --lg-ink: #f4f7ff; --lg-solid-fill: #192133; }
}
.lg-glass[data-lg-solid='true'] { background: var(--lg-solid-fill); }
.lg-glass[data-lg-solid='true']::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
.lg-glass:focus-visible, .lg-glass :focus-visible { outline: 3px solid #4379e8; outline-offset: 4px; }
.lg-button { font: inherit; min-height: 44px; min-width: 44px; padding: .7rem 1.2rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .lg-button:hover:not(:disabled) { box-shadow: 0 12px 32px -12px rgb(12 20 40 / .4), inset 0 1px 0 white; }
}
.lg-glass[data-lg-interactive='true'] { transition: box-shadow .18s ease; }
.lg-glass[data-lg-interactive='true'][data-lg-pressed='true'] { box-shadow: 0 4px 16px -6px rgb(12 20 40 / .32), inset 0 1px 3px rgb(255 255 255 / .65); }
.lg-glass[data-lg-interactive='true'][data-lg-pressed='true']::before { background-position: center; filter: brightness(1.12); }
.lg-button[data-lg-interactive='true'] { transition: scale .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease; }
.lg-button[data-lg-interactive='true']:active:not(:disabled), .lg-button[data-lg-interactive='true'][data-lg-pressed='true']:not(:disabled) { scale: .96; }
.lg-button:disabled { opacity: .55; cursor: not-allowed; }
.lg-panel { padding: 1.5rem; }
.lg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; }
.lg-toolbar > button { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; white-space: normal; background: transparent; border: 0; color: inherit; font: inherit; min-height: 44px; min-width: 44px; border-radius: max(0px, calc(var(--lg-radius) - 8px)); padding: .5rem 1rem; cursor: pointer; }
.lg-toolbar > button[aria-pressed='true'] { background: rgb(127 127 127 / .16); }
@media (hover: hover) and (pointer: fine) {
  .lg-toolbar > button:hover { background: rgb(127 127 127 / .16); }
}
/* Opt-in layout helpers; preserve native scrolling and browser zoom gestures. */
.lg-touch-target { min-width: 44px; min-height: 44px; min-inline-size: 44px; min-block-size: 44px; }
.lg-safe-area {
  padding-top: calc(var(--lg-safe-top, var(--lg-safe-gap, 16px)) + env(safe-area-inset-top, 0px));
  padding-right: calc(var(--lg-safe-right, var(--lg-safe-gap, 16px)) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--lg-safe-bottom, var(--lg-safe-gap, 16px)) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--lg-safe-left, var(--lg-safe-gap, 16px)) + env(safe-area-inset-left, 0px));
}
.lg-mobile-viewport { min-height: 100vh; }
@supports (height: 100dvh) { .lg-mobile-viewport { min-height: 100dvh; } }
/* Legacy helper no longer masks essential content or focus outlines. Use attachGlassScrollEdge. */
.lg-scroll-edge { isolation: isolate; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lg-glass { background: var(--lg-solid-fill); border-color: currentColor; }
  .lg-glass::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-glass, .lg-glass::before { animation: none !important; transition: none !important; }
  .lg-button[data-lg-interactive='true'] { scale: none !important; }
  .lg-glass[data-lg-pressed='true']::before { filter: none; }
}
@media (forced-colors: active) {
  .lg-glass { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .lg-glass::before { display: none; }
}
@media print { .lg-glass { background: #fff; color: #000; box-shadow: none; border: 1px solid #555; } .lg-glass::before { display: none; } }