body{--mode-background:#e9eef1}
body.dark{--mode-background:#101012}
body::after{content:'';position:fixed;inset:0;z-index:1000;background:var(--mode-background);opacity:0;pointer-events:none;transition:opacity 170ms ease}
body.mode-leaving::after,body.mode-arriving::after{opacity:1;pointer-events:auto}
.view-switch{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;border:1px solid #8795a333;border-radius:24px;white-space:nowrap;font-size:11px;color:inherit;background:#ffffff70;text-decoration:none}
.dark .view-switch{background:#ffffff0d;border-color:#ffffff20}
.view-switch:focus-visible{outline:2px solid #597eb1;outline-offset:4px}
@media(prefers-reduced-motion:reduce){body::after{transition:none}}

.view-mode{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #9aa6b44a;border-radius:24px;background:#ffffff50;font-size:11px;line-height:1.4}.view-mode>span{padding:5px 9px;border-radius:18px;background:#ffffffbd;color:#304355}.view-mode>.view-switch{padding:5px 9px;border:0;background:transparent;box-shadow:none}.dark .view-mode{background:#ffffff08;border-color:#ffffff24}.dark .view-mode>span{background:#ffffff1c;color:#f1f4f8}