/* Web interpretation of Liquid Glass. The optical lens renders SVG copies of
   navigation glyphs, not screenshots of the page or Apple's native material. */
:root {
  --glass-fill:rgba(255,255,255,.54);
  --glass-shadow:0 12px 30px #00000012,0 2px 6px #0000000c,inset 0 1.5px 1px #fff,inset 0 -1px 1px #00000012;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .liquid-glass {
    background:linear-gradient(155deg,#ffffff55,#ffffff0a 48%,#ffffff36),var(--glass-fill);
    -webkit-backdrop-filter:blur(14px) saturate(1.65);
    backdrop-filter:blur(14px) saturate(1.65);
  }
}
.liquid-glass::before {
  background:radial-gradient(ellipse at var(--glass-x,22%) var(--glass-y,0%),#ffffffa8,transparent 55%);
}
.liquid-glass::after { border-color:#ffffffd9; box-shadow:inset 1px 0 1px #fff8,inset -1px -1px 1px #00000009; }
.bottom-nav {
  --glass-fill:rgba(250,250,252,.58);
  border:1px solid #ffffffab;
  border-radius:999px;
  padding:7px;
  gap:2px;
  overflow:visible;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 16px 36px #00000019,0 3px 9px #0000000c,inset 0 1.5px 1px #fff,inset 0 -1px 1px #00000019;
}
.bottom-nav>a { min-height:58px; border-radius:999px; color:#343437; text-shadow:0 1px 5px #ffffffc9; }
.bottom-nav>a[aria-current=page] { color:var(--accent); background:#ffffff7a; box-shadow:inset 0 1px 0 #fff,0 2px 5px #0000000c; }
.bottom-nav>a[aria-current=page]::after { display:none; }
.bottom-nav.has-glass-lens>a[aria-current=page] { background:none; box-shadow:none; }
.bottom-nav>a:active { transform:none; }
.bottom-nav>a:focus-visible { outline-offset:-2px; }
.glass-selection {
  position:absolute;
  left:0;
  top:5px;
  height:calc(100% - 10px);
  width:var(--lens-width,70px);
  transform:translate3d(var(--lens-left,0px),0,0);
  pointer-events:none;
  z-index:0;
  border-radius:999px;
  background:linear-gradient(160deg,#ffffffc4,#ffffff38 48%,#d9d9df32);
  box-shadow:0 3px 8px #0000000b,inset 0 1.5px 1px #fffffff0,inset 1px 0 1px #fff9,inset 0 -1px 1.5px #00000020;
  border:1px solid #ffffffbd;
}
.glass-selection::before,.glass-selection::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.glass-selection::before {
  z-index:3;
  background:conic-gradient(from 80deg,#ffffff00 0deg,#a5d5ff8a 30deg,#dbb8ff82 65deg,#fff 100deg,#ffffff00 145deg,#ffffff00 190deg,#ffdfaf9c 224deg,#acd6ff85 250deg,#fff 290deg,#ffffff00 345deg);
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.16;
}
.glass-selection::after {
  z-index:4;
  border-top:2px solid #fffffff2;
  border-bottom:1.5px solid #ffffffed;
  box-shadow:inset 2px 0 3px #fff,inset -2px 0 3px #fff9;
  opacity:.45;
}
.glass-optics { position:absolute; inset:0; border-radius:inherit; overflow:hidden; opacity:0; }
.glass-optics>svg { display:block; width:100%; height:100%; overflow:visible; }
.glass-optics::after { content:''; position:absolute; left:17%; right:17%; top:4px; height:7px; border-radius:50%; border-top:2px solid #fff; box-shadow:0 -1px 3px #d0e4ff70,0 1px 2px #fff; }
.bottom-nav.is-glass-pressed .glass-selection {
  top:-5px;
  height:calc(100% + 10px);
  z-index:3;
  background:#ffffff91;
  border-color:#ffffffeb;
  box-shadow:0 10px 22px #00000024,0 2px 5px #00000014,inset 0 2px 2px #fff,inset 0 -2px 2px #ffffffd9,0 0 0 1px #ffffff9e;
}
.bottom-nav.is-glass-pressed .glass-optics { opacity:1; }
.bottom-nav.is-glass-pressed .glass-selection::before { opacity:.75; }
.bottom-nav.is-glass-pressed .glass-selection::after { opacity:1; }
@media(hover:hover) {
  .bottom-nav>a:hover { background:#ffffff30; }
}
@media(prefers-reduced-motion:no-preference) {
  .glass-selection { transition:transform .56s cubic-bezier(.32,0,.18,1),width .4s cubic-bezier(.32,0,.18,1),height .32s ease,top .32s ease,box-shadow .32s ease; }
  .glass-optics,.glass-selection::before,.glass-selection::after { transition:opacity .16s ease; }
  .bottom-nav.is-glass-dragging .glass-selection { transition:height .2s ease,top .2s ease,box-shadow .2s ease; }
}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
  .glass-selection { display:none!important; }
  .bottom-nav.has-glass-lens>a[aria-current=page] { background:#ededed; box-shadow:none; outline:1px solid currentColor; outline-offset:-2px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
  .liquid-glass { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none; }
  .bottom-nav { background:Canvas!important; border:1px solid CanvasText; }
  .bottom-nav>a { text-shadow:none; }
}
@media(forced-colors:active) {
  .bottom-nav.has-glass-lens>a[aria-current=page] { background:Highlight; color:HighlightText; }
}