.glass-shell{position:relative;border-radius:28px;color:#fff;text-shadow:0 1px 3px #0009}
.glass-optics{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:#ffffff06;box-shadow:0 8px 24px #0002,inset 0 .5px 0 #ffffff55,inset 0 -.5px 0 #ffffff18}
.glass-optics::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 100px 2px at var(--glass-x,65%) 0,#fff9,transparent);border:1px solid #ffffff1a}
.glass-shell>:not(.glass-optics){position:relative;z-index:1}
.glass-shell[data-glass-mode="opaque"] .glass-optics{background:#222;box-shadow:none}
.glass-shell[data-glass-mode="off"] .glass-optics{background:transparent;box-shadow:none}
.glass-shell[data-glass-mode="off"] .glass-optics::after{display:none}
.glass-shell[data-glass-mode="fallback"] .glass-optics{background:#20202040}
.glass-shell button{transition:background .18s,transform .18s}
.glass-shell button:active{transform:scale(.97)}
.glass-shell{min-width:0}
.glass-shell[data-glass-mode="refraction"] strong{background:#202020a8;padding:4px 8px;border-radius:8px;color:white;text-shadow:none}
.glass-shell[data-glass-mode="opaque"]{color:white!important;text-shadow:none!important}
@media(max-width:600px){.glass-shell strong{font-size:20px}.glass-shell button{font-size:13px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.glass-shell button{transition:none}}
@media(forced-colors:active){.glass-shell{color:CanvasText;text-shadow:none}.glass-optics{background:Canvas!important;border:1px solid CanvasText;box-shadow:none}.glass-optics::after{display:none}}