:root { color-scheme: light; --appearance-surface: #fff; --appearance-text: #203047; --appearance-border: #dce3ed; --appearance-active: #edf3ff; }
:root[data-theme='dark'] { color-scheme: dark; --appearance-surface: #1b273a; --appearance-text: #e6edf8; --appearance-border: #41516a; --appearance-active: #2a4165; }
.theme-picker { position: fixed; right: 20px; bottom: 20px; z-index: 25; color: var(--appearance-text); font: 500 12px 'Sora', 'Segoe UI', sans-serif; }
.theme-picker summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; background: var(--appearance-surface); border: 1px solid var(--appearance-border); border-radius: 24px; padding: 12px 16px; box-shadow: 0 4px 20px #0002; user-select: none; }
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-picker summary svg { width: 18px; height: 18px; }
.theme-options { position: absolute; bottom: calc(100% + 8px); right: 0; width: 180px; padding: 6px; background: var(--appearance-surface); border: 1px solid var(--appearance-border); border-radius: 12px; box-shadow: 0 10px 32px #0003; display: grid; gap: 4px; }
.theme-options button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 7px; padding: 11px 12px; text-align: left; color: inherit; background: transparent; cursor: pointer; font: inherit; }
.theme-options button:hover, .theme-options button[aria-pressed='true'] { background: var(--appearance-active); }
.theme-options button[aria-pressed='true']::after { content: '\2713'; font-weight: 700; }
.theme-picker summary:focus-visible, .theme-options button:focus-visible { outline: 2px solid #3984de; outline-offset: 3px; }
@media (max-width: 600px) { .theme-picker { right: 14px; bottom: 14px; } }