:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
.theme-picker, .theme-picker * { box-sizing: border-box; }
.theme-picker {
    --tp-panel: #fffefb;
    --tp-ink: #202925;
    --tp-muted: #667168;
    --tp-border: #dce0d5;
    --tp-active: #f8e9e2;
    --tp-accent: #c34328;
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    color: var(--tp-ink);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    letter-spacing: normal;
}
[data-theme=dark] .theme-picker {
    --tp-panel: #202925;
    --tp-ink: #f6f4ed;
    --tp-muted: #b2bdb4;
    --tp-border: #3b493f;
    --tp-active: #3c2b25;
    --tp-accent: #ff947b;
}
.theme-picker[hidden] { display: none; }
.theme-picker > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    background: var(--tp-panel);
    color: var(--tp-ink);
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
}
.theme-picker > summary::-webkit-details-marker { display: none; }
.theme-picker > summary:hover, .theme-picker[open] > summary { border-color: var(--tp-accent); }
.theme-picker > summary:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 3px; }
.theme-picker-current { display: none; height: 18px; }
.theme-picker[data-mode=light] [data-theme-icon=light],
.theme-picker[data-mode=dark] [data-theme-icon=dark],
.theme-picker[data-mode=system] [data-theme-icon=system] { display: inline-flex; }
.theme-picker-chevron { color: var(--tp-muted); }
.theme-picker[open] .theme-picker-chevron { transform: rotate(180deg); }
.theme-picker-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(290px, calc(100vw - 40px));
    padding: 14px 8px 8px;
    background: var(--tp-panel);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px #101f1924;
    z-index: 200;
}
.theme-picker fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-picker legend { padding: 0 8px; font-size: 13px; font-weight: 750; color: var(--tp-ink); }
.theme-picker fieldset > p { margin: 4px 8px 13px; font-size: 11px; color: var(--tp-muted); }
.theme-picker-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 9px;
    border-radius: 9px;
    min-height: 58px;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}
.theme-picker-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; }
.theme-picker-option:has(input:checked) { background: var(--tp-active); color: var(--tp-accent); }
.theme-picker-option:hover { border-color: var(--tp-border); }
.theme-picker-option:has(input:focus-visible) { outline: 2px solid var(--tp-accent); outline-offset: -2px; }
.theme-picker-option-icon { display: flex; flex-shrink: 0; }
.theme-picker-copy { display: block; flex: 1; }
.theme-picker-copy strong { display: block; font-size: 12px; font-weight: 700; color: inherit; }
.theme-picker-copy small { display: block; font-size: 10px; color: var(--tp-muted); margin-top: 2px; }
.theme-picker-check { visibility: hidden; font-size: 16px; }
.theme-picker-option:has(input:checked) .theme-picker-check { visibility: visible; }
.theme-picker-footnote { border-top: 1px solid var(--tp-border); padding: 10px 9px 2px; margin-top: 7px; font-size: 10px; color: var(--tp-muted); }
@media (max-width: 600px) {
    .theme-picker-label, .theme-picker-chevron { display: none; }
    .theme-picker > summary { width: 44px; height: 44px; padding: 12px; justify-content: center; }
}

/* Compact, three-way control keeps the system preference one click away. */
.global-theme { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 500; }

.theme-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-compact { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--tp-border); border-radius: 999px; background: var(--tp-panel); box-shadow: 0 2px 8px #101f1910; }
.theme-compact-option { position: relative; display: grid; place-items: center; width: 40px; height: 36px; border-radius: 999px; cursor: pointer; color: var(--tp-muted); }
.theme-compact-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.theme-compact-option:has(input:checked) { background: var(--tp-active); color: var(--tp-accent); }
.theme-compact-option:hover { color: var(--tp-ink); }
.theme-compact-option:has(input:focus-visible) { outline: 2px solid var(--tp-ink); outline-offset: 2px; }
.theme-picker { font-size: 14px; }
.theme-picker > summary, .theme-picker-copy strong { font-size: 14px; }
.theme-picker-copy small, .theme-picker-footnote, .theme-picker fieldset > p { font-size: 12px; }
.theme-picker-option { min-height: 64px; }
.theme-picker legend { font-size: 15px; }

:root { --resize-dur: 300ms; --resize-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
.theme-compact { position: relative; display: block; width: 44px; height: 44px; }
.theme-compact-option { position: absolute; top: 3px; left: 3px; width: 36px; height: 36px; display: grid; opacity: 0; pointer-events: none; transform: translateY(0); transition: opacity 150ms ease-out, transform var(--resize-dur) var(--resize-ease), background-color 150ms ease-out; }
.theme-compact-option:has(input:checked) { opacity: 1; pointer-events: auto; }
.theme-compact:hover, .theme-compact:focus-within { height: 120px; }
.theme-compact:hover .theme-compact-option, .theme-compact:focus-within .theme-compact-option { opacity: 1; pointer-events: auto; transform: translateY(calc(var(--theme-index) * 38px)); }
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
  .theme-compact-option { transition: none !important; }
}