#mode-switch::before{display:none}
.mode-indicator{position:absolute;left:calc(4px + var(--switch-index) * (var(--segment) + 2px));top:4px;bottom:4px;width:var(--segment);background:#191919;border-radius:30px;z-index:-1;pointer-events:none}
#mode-switch.is-ready .mode-indicator{animation:mode-indicator-intro .5s cubic-bezier(.16,1,.3,1) .65s both}
#mode-switch.is-exiting button,#mode-switch.is-exiting .mode-indicator{animation:none;opacity:0;transition:opacity .16s ease}
#mode-switch.is-about-hidden{visibility:hidden;pointer-events:none}
body.case-open #mode-switch{visibility:visible;opacity:1;pointer-events:none}
body.case-open #mode-switch.is-about-hidden{visibility:hidden}
.case-close{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:1px solid #00000008;background:#fff;color:#191919;box-shadow:0 3px 18px #00000012;font:300 30px/1 Arial;z-index:30;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,18px) scale(.65);transition:opacity .25s,transform .45s cubic-bezier(.16,1,.3,1),visibility .25s}
body.case-open .case-close.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.about-close.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.case-close:hover{background:#191919;color:#fff}.case-close:focus-visible{outline:2px solid #888;outline-offset:4px}
@media(max-width:600px){.case-close{bottom:max(24px,env(safe-area-inset-bottom));width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.case-close{transition:none}}
@media(prefers-reduced-motion:reduce){#mode-switch.is-ready .mode-indicator{animation:none}}