#mode-switch{position:fixed;display:flex;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;padding:3px;gap:2px;background:#fff;border:1px solid #00000008;box-shadow:0 3px 18px #00000012;isolation:isolate;visibility:visible;pointer-events:auto}
#mode-switch::before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:49px;border-radius:24px;background:#191919;transform:translateX(51px);transition:transform .5s cubic-bezier(.22,1,.36,1);z-index:-1}
#mode-switch.is-text::before{transform:translateX(0)}
#mode-switch button{background:transparent;width:49px;height:23px;transition:color .25s,opacity .25s}
#mode-switch button.selected{background:transparent;color:#fff}
#mode-switch button:not(.selected){color:#555}
#mode-switch button:hover{background:transparent}
#mode-switch button:not(.selected):hover{color:#000}
.text-panel.is-open{transform:none}
@media(max-width:600px){#mode-switch{bottom:max(24px,env(safe-area-inset-bottom))}#mode-switch button{width:54px;height:26px}#mode-switch::before{width:54px;transform:translateX(56px)}#mode-switch.is-text::before{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#mode-switch::before{transition:none}}
/* The dialog shell stays still, so its fixed control never inherits slide motion. */
.text-panel{transform:none;transition:none;background:transparent;scrollbar-gutter:stable}
.text-panel::before{content:"";position:fixed;inset:0;background:#f3f2ee;transform:translateX(-100%);transition:transform .85s cubic-bezier(.76,0,.24,1);pointer-events:none}
.text-panel.is-open::before{transform:translateX(0)}
.text-panel .text-panel-inner{position:relative;transform:translateX(-100vw);opacity:0;transition:transform .85s cubic-bezier(.76,0,.24,1),opacity .45s ease}
.text-panel.is-open .text-panel-inner{transform:none;opacity:1}
#mode-switch{opacity:0;transform:translate(-50%,24px);pointer-events:none;transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1)}
#mode-switch.is-ready{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.text-panel::before,.text-panel .text-panel-inner{transition:none}#mode-switch{transition:none}}
/* A persistent overlay avoids top-layer changes and button relocation on every click. */
html{scrollbar-gutter:stable}
.text-panel{z-index:21;visibility:hidden;pointer-events:none;transition:visibility 0s .65s}
.text-panel.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.text-panel::backdrop{background:transparent}
.text-panel::before{transform:translate3d(-100%,0,0);transition:transform .65s cubic-bezier(.22,.7,.25,1);will-change:transform}
.text-panel.is-open::before{transform:translate3d(0,0,0)}
.text-panel .text-panel-inner{transform:translate3d(-100vw,0,0);opacity:1;transition:transform .65s cubic-bezier(.22,.7,.25,1)}
.text-panel.is-open .text-panel-inner{transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){.text-panel,.text-panel::before,.text-panel .text-panel-inner{transition:none}}