/* Retained Liquid Glass reference: apple-design-demo/glass-reference/2026-10-26-v1.
   Independent navigation instances share live backdrop refraction and a continuous feathered core. */
:root[data-theme="dark"] {
  --glass-fallback-face: rgb(32 32 36 / .56);
  --glass-fallback-selection: rgb(82 82 88 / .82);
  --glass-fallback-ink: #f5f5f7;
  --glass-fallback-accent: #acd2ff;
  --glass-opaque-face: #24252a;
  --glass-opaque-selection: #303c4e;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --glass-fallback-face: rgb(32 32 36 / .56);
    --glass-fallback-selection: rgb(82 82 88 / .82);
    --glass-fallback-ink: #f5f5f7;
    --glass-fallback-accent: #acd2ff;
    --glass-opaque-face: #24252a;
    --glass-opaque-selection: #303c4e;
  }
}
:is(.nav,.case-section-nav) {
  --navigation-face: var(--glass-fallback-face,rgb(250 250 250 / .43));
  --selected-glass: var(--glass-fallback-selection,rgb(255 255 255 / .88));
  --glass-ink: var(--glass-fallback-ink,#1d1d1f);
  --glass-active-ink: var(--glass-fallback-accent,#0055ad);
  --light-x: 30%;
  --light-y: 10%;
  --light-angle: 315deg;
  --light-energy: .67;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  border: var(--glass-panel-border,0);
  border-radius: 999px;
  background: var(--glass-panel-background,transparent);
  box-shadow: var(--glass-panel-shadow,0 8px 40px rgb(0 0 0 / .12));
  color: var(--glass-ink);
}
:is(.nav,.case-section-nav)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--navigation-face);
  -webkit-backdrop-filter: blur(4.2px);
  backdrop-filter: blur(4.2px);
  pointer-events: none;
}
:is(.nav,.case-section-nav)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(var(--light-angle),rgb(255 255 255 / .85),rgb(255 255 255 / .12) 38%,rgb(0 0 0 / .12) 65%,rgb(255 255 255 / .67));
  -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,linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .67;
  pointer-events: none;
}
:is(.nav,.case-section-nav) a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 17px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--glass-link-ink,var(--glass-ink));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease-out;
}
:is(.nav,.case-section-nav) a[aria-current]:not([aria-current="false"]) { --glass-link-ink: var(--glass-active-ink); }
:is(.nav,.case-section-nav) a:hover { background: transparent; text-decoration: none; }
:is(.nav,.case-section-nav):not(.glass-ready) a[aria-current]:not([aria-current="false"]) { background: var(--selected-glass); }
:is(.nav,.case-section-nav) a:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
:is(.nav,.case-section-nav) .nav-selection {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 0;
  z-index: 1;
  border: var(--glass-selection-border,0);
  border-radius: 999px;
  background: var(--selected-glass);
  box-shadow: var(--glass-panel-shadow,0 2px 8px #0000000d);
  pointer-events: none;
  transform-origin: center;
  transition: background-color 180ms ease-out;
}
:is(.nav,.case-section-nav) .nav-selection::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff70,transparent 75%);
  opacity: var(--light-energy);
  pointer-events: none;
}
:is(.nav,.case-section-nav)[data-material="light"] {
  --selected-glass: rgb(255 255 255 / .88);
  --glass-ink: #1d1d1f;
  --glass-active-ink: #0055ad;
}
:is(.nav,.case-section-nav)[data-material="dark"] {
  --selected-glass: rgb(50 56 66 / .96);
  --glass-ink: #f5f5f7;
  --glass-active-ink: #acd2ff;
}
:is(.nav,.case-section-nav)[data-material="dark"]::after { background: linear-gradient(var(--light-angle),#ffffff70,#ffffff12 38%,#0005 65%,#ffffff55); }
:is(.nav,.case-section-nav)[data-material="dark"] .nav-selection::after { background: radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff18,transparent 75%); }
#navigation-glass feFlood { transition: flood-color 180ms ease-out,flood-opacity 180ms ease-out; }
@media (max-width:760px) {
  .nav {
    position: fixed;
    left: 50%;
    bottom: max(15px,env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 50;
    width: max-content;
    max-width: calc(100vw - 24px);
    pointer-events: auto;
  }
  .nav a,.nav a[aria-current="page"] { padding: 9px 13px; min-height: 44px; font-size: 12px; gap: 5px; }
  .nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
}
@media (max-width:380px) {
  .nav { gap: 0; }
  .nav a,.nav a[aria-current="page"] { padding-inline: 10px; gap: 4px; }
}
@media (prefers-reduced-motion:reduce) {
  :is(.nav,.case-section-nav) a,:is(.nav,.case-section-nav) .nav-selection,#navigation-glass feFlood { transition: none; }
  :is(.nav,.case-section-nav) .nav-selection::after { opacity: .3; }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :is(.nav,.case-section-nav)::before,:is(.nav,.case-section-nav)::after { display: none; }
  :is(.nav,.case-section-nav) {
    --glass-panel-background: var(--glass-opaque-face,#fff);
    --glass-panel-border: 1px solid var(--glass-fallback-ink,#1d1d1f);
    --glass-panel-shadow: none;
    --glass-selection-border: 1px solid var(--glass-fallback-accent,#0055ad);
    --selected-glass: var(--glass-opaque-selection,#e8f1fc);
  }
  :is(.nav,.case-section-nav) .nav-selection::after { display: none; }
  :is(.nav,.case-section-nav) a,:is(.nav,.case-section-nav) .nav-selection,#navigation-glass feFlood { transition: none; }
}
@media (forced-colors:active) {
  :is(.nav,.case-section-nav)::before,:is(.nav,.case-section-nav)::after { display: none; }
  :is(.nav,.case-section-nav) {
    --glass-panel-background: Canvas;
    --glass-panel-border: 1px solid ButtonText;
    --glass-panel-shadow: none;
    --glass-selection-border: 2px solid Highlight;
    --selected-glass: Canvas;
    --glass-ink: LinkText;
    --glass-active-ink: LinkText;
  }
  :is(.nav,.case-section-nav) .nav-selection::after { display: none; }
  :is(.nav,.case-section-nav) a,:is(.nav,.case-section-nav) .nav-selection,#navigation-glass feFlood { transition: none; }
}