:root {
  color-scheme: dark;
  --lg-ink: #f0f0ed;
  --lg-copy: #c2c3c0;
  --lg-muted: #929490;
  --lg-faint: #6e706d;
  --lg-canvas: #111214;
  --lg-fill: rgba(46, 48, 49, 0.34);
  --lg-fill-strong: rgba(34, 36, 37, 0.78);
  --lg-edge: rgba(236, 237, 232, 0.12);
  --lg-edge-strong: rgba(236, 237, 232, 0.26);
  --lg-blue: #d0d1cc;
  --lg-cyan: #c5c6c2;
  --lg-violet: #bfc0bb;
  --lg-amber: #e2e2dc;
  --lg-radius-sm: 7px;
  --lg-radius-md: 11px;
  --lg-radius-lg: 15px;
  --lg-blur-chrome: 20px;
  --lg-blur-tile: 16px;
  --lg-shadow-float: 0 6px 18px rgba(0, 0, 0, 0.11);
  --lg-shadow-tile: 0 4px 14px rgba(0, 0, 0, 0.09);
}

[data-lg-theme="light"] {
  color-scheme: light;
  --lg-ink: #20211f;
  --lg-copy: #464844;
  --lg-muted: #70736e;
  --lg-faint: #858781;
  --lg-canvas: #e9e9e5;
  --lg-fill: rgba(255, 255, 252, 0.5);
  --lg-fill-strong: rgba(248, 248, 244, 0.8);
  --lg-edge: rgba(255, 255, 250, 0.72);
  --lg-edge-strong: rgba(255, 255, 250, 0.92);
  --lg-shadow-float: 0 8px 22px rgba(30, 32, 29, 0.09);
  --lg-shadow-tile: 0 6px 18px rgba(30, 32, 29, 0.075);
}

*,
*::before,
*::after { box-sizing: border-box; }

.lg-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: var(--lg-canvas);
}

.lg-glass {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--lg-edge);
  background: var(--lg-fill);
  -webkit-backdrop-filter: blur(var(--lg-blur-tile)) saturate(115%);
  backdrop-filter: blur(var(--lg-blur-tile)) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--lg-shadow-tile);
}

.lg-glass::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
  content: "";
  pointer-events: none;
}

.lg-glass::after {
  display: none;
}

.lg-glass > * { position: relative; z-index: 1; }

.lg-glass--chrome {
  --lg-blur-tile: var(--lg-blur-chrome);
  background: var(--lg-fill-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--lg-shadow-float);
}

.lg-glass--tile { background-color: rgba(43, 45, 46, 0.4); }

.lg-glass--control {
  background: rgba(242, 242, 236, 0.055);
  border-color: rgba(236, 237, 232, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lg-glass-copy { color: var(--lg-ink); text-shadow: none; }
.lg-copy-secondary { color: var(--lg-copy); }
.lg-copy-tertiary { color: var(--lg-muted); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-glass { background-color: var(--lg-fill-strong); }
}

@media (prefers-reduced-transparency: reduce) {
  .lg-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #242627;
    border-color: rgba(225, 226, 220, 0.3);
    box-shadow: var(--lg-shadow-tile);
  }
  [data-lg-theme="light"] .lg-glass { background: #f5f5f1; }
}

@media (prefers-contrast: more) {
  .lg-glass { border-color: rgba(247, 248, 242, 0.5); }
  .lg-copy-secondary { color: var(--lg-ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
