/* Real optical layers are separate from their readable, clickable controls. */
.datecontrol,.account-bar{position:relative}
.liquid-optics{position:absolute!important;inset:-1px;z-index:0;pointer-events:none;border-radius:inherit}
.has-liquid-glass{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:transparent!important;box-shadow:0 4px 18px #16335608!important}
.has-liquid-glass::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:var(--liquid-tint)}
:root{--liquid-tint:#ffffff62;--selection-bg:#ffffffa0;--selection-edge:#ffffff33}
.has-liquid-glass>:not(.liquid-optics){position:relative;z-index:2}
nav{position:relative}
.nav-selection{position:absolute!important;left:0;top:0;z-index:1!important;pointer-events:none;border-radius:14px;background:var(--selection-bg);border:1px solid var(--selection-edge);box-shadow:0 2px 6px #264b7106;transition:transform .46s cubic-bezier(.22,1.2,.36,1),width .3s,height .3s}
nav.has-selection a{position:relative;z-index:2;transition:color .2s,transform .2s}
nav.has-selection a.active{background:transparent!important;box-shadow:none!important}
nav.has-selection a:active{transform:scale(.94)}
:root[data-theme=dark]{--liquid-tint:#171d2999;--selection-bg:#ffffff12;--selection-edge:#ffffff0b}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){--liquid-tint:#171d2999;--selection-bg:#ffffff12;--selection-edge:#ffffff0b}
}
@media(max-width:700px){
  nav{position:fixed;border-radius:28px}
  nav .nav-selection{border-radius:22px}
  nav.has-liquid-glass{box-shadow:0 6px 22px #16335614!important}
  nav.has-liquid-glass a{color:var(--ink)}
  nav.has-liquid-glass a.active{color:var(--blue)}
  nav .nav-selection{background:var(--blue-soft);border-color:var(--selection-edge)}
}
@media(prefers-reduced-motion:reduce){.nav-selection{transition:none}nav.has-selection a:active{transform:none}}
@media print{.liquid-optics,.nav-selection{display:none!important}}