/* Local preview: smoke tint keeps the live page visible under the glass. */
.root-nav > .root-nav-buttons,
.root-nav.dark-nav > .root-nav-buttons {
  --lg-text: #fff;
  --lg-on-glass: #fff;
  --lg-tint: rgb(20 24 29 / 0.2);
  --lg-indicator: rgb(255 255 255 / 0.1);
  color: #fff;
}
.root-nav-buttons > button,
.root-nav-buttons .lg-nav__copy > span {
  color: #fff;
}
.root-nav-buttons > button > svg,
.root-nav-buttons .lg-nav__copy > span > svg {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
}

/* Shared frosted glass in every section, with no page refraction. */
.root-nav:has(> .root-nav-buttons) {
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / .35);
  background: rgb(34 39 48 / .32);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .25);
}
.root-nav > .root-nav-buttons > .lg-surface { display: none; }

/* A single real icon; selected state has no copied or refracted content. */
.root-nav-buttons > :is(.lg-nav__copy,.lg-lens-shadow) { display:none !important; }
.root-nav .root-nav-buttons:defined > button.selected {
  background: rgb(255 255 255 / .12);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .15);
}