/* Shared optical finish. Load after each page's layout stylesheet. */
.glass{
 --glass-tone:var(--glass,255,255,255);
 --glass-x:42%;--glass-y:18%;--glass-activity:0;
 isolation:isolate;overflow:hidden;
 border:1px solid rgba(var(--glass-tone),.10);border-radius:999px;
 background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(var(--glass-tone),.055),transparent 66%),linear-gradient(155deg,rgba(var(--glass-tone),.018),rgba(var(--glass-tone),.006) 48%,rgba(var(--glass-tone),.026));
 background-color:transparent;
 box-shadow:inset 0 1px 1px rgba(var(--glass-tone),.16),inset 0 -1px 1px rgba(var(--glass-tone),.035),0 4px 20px #00000008;
 backdrop-filter:blur(10px) saturate(155%) contrast(102%);
 -webkit-backdrop-filter:blur(10px) saturate(155%) contrast(102%);
 transition:border-color .45s,box-shadow .45s,background-color .45s;
}
.glass::before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 inset:-115% -55%;padding:0;border-radius:0;
 background:radial-gradient(ellipse at 30% 48%,transparent 37%,rgba(var(--glass-tone),.09) 41%,transparent 46%),linear-gradient(117deg,transparent 41%,rgba(var(--glass-tone),.015) 46%,rgba(var(--glass-tone),.16) 49%,rgba(var(--glass-tone),.025) 51%,transparent 58%);
 filter:blur(1.5px);opacity:calc(.35 + var(--glass-activity)*.40);
 animation:glass-light-flow 21s cubic-bezier(.45,0,.55,1) infinite;
 transform:translateX(-13%) rotate(-18deg) scale(1.02);
}
.glass::after{
 content:"";position:absolute;pointer-events:none;inset:0;
 border-radius:inherit;padding:1px;
 background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(var(--glass-tone),.60),transparent 66%),linear-gradient(150deg,rgba(var(--glass-tone),.26),rgba(var(--glass-tone),.012) 30%,rgba(var(--glass-tone),.035) 65%,rgba(var(--glass-tone),.21) 88%,rgba(var(--glass-tone),.018));
 -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;
 box-shadow:none;filter:none;
}
.glass:hover{background-color:transparent;border-color:rgba(var(--glass-tone),.16);box-shadow:inset 0 1px 1px rgba(var(--glass-tone),.23),inset 0 -1px 1px rgba(var(--glass-tone),.05),0 6px 24px #0000000b}
.glass:active{background-color:transparent;box-shadow:inset 0 1px 2px rgba(var(--glass-tone),.18),inset 0 -1px 2px rgba(var(--glass-tone),.04),0 2px 12px #00000008}
.glass:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.glass.segmented button,.glass.state-switch button{background:transparent;box-shadow:none}
.glass.state-switch button{min-width:44px}
.glass.segmented button:hover,.glass.state-switch button:hover{background:rgba(var(--glass-tone),.025)}
.glass.segmented button[aria-pressed=true],.glass.state-switch button[aria-pressed=true]{background:linear-gradient(150deg,rgba(var(--glass-tone),.07),rgba(var(--glass-tone),.018));box-shadow:inset 0 1px 0 rgba(var(--glass-tone),.13),inset 0 -1px 0 rgba(var(--glass-tone),.025)}
@keyframes glass-light-flow{0%,100%{transform:translateX(-13%) rotate(-18deg) scale(1.02)}50%{transform:translateX(15%) rotate(14deg) scale(1.06)}}
.is-paused .glass::before{animation-play-state:paused}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background-color:rgba(var(--glass-tone),.025)}}
@media(prefers-reduced-motion:reduce){.glass,.glass:hover,.glass:active{transition:none}.glass::before{animation:none;opacity:.35;transform:translateX(-4%) rotate(-8deg)} }
@media(prefers-contrast:more){.glass{border-color:rgba(var(--glass-tone),.28)}.glass::after{opacity:.9}}