/* Shared light/dark theme toggle control markup — used across all pages that render the `.theme-track` toggle button. Keep in sync with the toggle markup emitted in each page's (`.theme-track` / `.theme-track-inner` / `.tt-left` / `.tt-right`). */ .theme-track { width: 64px; height: 32px; padding: 4px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; border: 1px solid transparent; transition: background 0.3s, border-color 0.3s; flex-shrink: 0; } .theme-track-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; pointer-events: none; } .tt-left, .tt-right { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s; flex-shrink: 0; } [data-theme="dark"] .theme-track { background: #09090b; border-color: #27272a; } [data-theme="light"] .theme-track { background: #ffffff; border-color: #e4e4e7; } [data-theme="dark"] .tt-left { background: #27272a; } [data-theme="dark"] .tt-left svg { color: #ffffff; } [data-theme="dark"] .tt-right { background: transparent; } [data-theme="dark"] .tt-right svg { color: #71717a; } [data-theme="light"] .tt-left { background: transparent; } [data-theme="light"] .tt-left svg { color: #09090b; } [data-theme="light"] .tt-right { background: #e5e7eb; } [data-theme="light"] .tt-right svg { color: #374151; }