.page-themes .theme-picker{position:relative;width:100%;max-width:400px;color:var(--text);z-index:12}
.theme-picker svg,.page-themes .preview-appearance svg{width:20px;height:20px;flex-shrink:0}
.theme-picker-trigger{width:100%;min-height:56px;padding:9px 14px 9px 10px;display:flex;align-items:center;gap:12px;border:1px solid var(--control-border);border-radius:15px;background:var(--surface);color:var(--text);font:650 16px var(--font);text-align:left;box-shadow:0 3px 10px #473a2405;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.theme-picker-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f6efe5;color:#a48b62}
.theme-picker-chevron{margin-left:auto;color:#9d8d72;display:grid;place-items:center;transition:transform .2s}
.theme-picker-trigger[aria-expanded=true]{border-color:#bba684;box-shadow:0 0 0 3px #bca8871a}
.theme-picker-trigger[aria-expanded=true] .theme-picker-chevron{transform:rotate(180deg)}
.theme-picker-trigger:hover{border-color:#baa88a}
.theme-picker-options{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:320px;overflow:auto;overscroll-behavior:contain;scroll-padding:6px;padding:6px;border:1px solid var(--control-border);border-radius:16px;background:var(--surface);box-shadow:0 14px 40px #372e2020;scrollbar-width:thin;scrollbar-color:#cfc1ab transparent;animation:picker-open .16s ease-out}
.theme-picker.opens-up .theme-picker-options{top:auto;bottom:calc(100% + 8px)}
.theme-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 13px;border-radius:10px;color:var(--control-ink);font-size:15px;font-weight:500;cursor:pointer}
.theme-choice:hover,.theme-choice.is-active{background:#f7f2ea;color:#786445}
.theme-choice[aria-selected=true]{background:#f3ebdd;color:#735f3e;font-weight:750}
.theme-choice-check{display:grid;place-items:center;visibility:hidden;color:#9f8151}.theme-choice[aria-selected=true] .theme-choice-check{visibility:visible}
.theme-picker-trigger:focus-visible,.page-themes .preview-appearance button:focus-visible{outline:3px solid #c5b08d;outline-offset:3px}
.page-themes .preview-appearance{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:224px;max-width:100%;gap:0;margin:0 auto 16px;padding:4px;border:1px solid #e4dbcc;border-radius:17px;background:#eee8de}
.page-themes .preview-appearance::before{content:'';position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border-radius:12px;background:#fffdfb;box-shadow:0 2px 6px #52453013;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.page-themes .preview-appearance[data-active=dark]::before{transform:translateX(100%)}
.page-themes .preview-appearance button,.page-themes .preview-appearance button[aria-pressed=true]{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:#887962;font:650 14px var(--font);transition:color .2s}
.page-themes .preview-appearance button[aria-pressed=true]{color:#574932}
html[data-appearance=dark] .theme-picker-icon{background:#493e2d;color:#edd9b8}
html[data-appearance=dark] .theme-picker-chevron{color:#dbcaae}
html[data-appearance=dark] .theme-choice:hover,html[data-appearance=dark] .theme-choice.is-active{background:#3f3729;color:#f5e6cf}
html[data-appearance=dark] .theme-choice[aria-selected=true]{background:#584a34;color:#f9f1e5}
html[data-appearance=dark] .theme-choice-check{color:#edd5af}
html[data-appearance=dark] .page-themes .preview-appearance{background:#29231a;border-color:#5d5240}
html[data-appearance=dark] .page-themes .preview-appearance::before{background:#e6cda5;box-shadow:0 2px 8px #0c090535}
html[data-appearance=dark] .page-themes .preview-appearance button{color:#d7c7ac}
html[data-appearance=dark] .page-themes .preview-appearance button[aria-pressed=true]{color:#3a2f1d}
@keyframes picker-open{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.page-themes .theme-picker{max-width:none}.theme-picker-trigger{min-height:54px}.theme-choice{min-height:46px}.page-themes .preview-appearance{width:216px;margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.theme-picker-options{animation:none}.theme-picker-trigger,.theme-picker-chevron,.page-themes .preview-appearance::before,.page-themes .preview-appearance button{transition:none}}
.motion-paused .theme-picker-options{animation:none}.motion-paused .theme-picker-trigger,.motion-paused .theme-picker-chevron,.motion-paused .preview-appearance::before,.motion-paused .preview-appearance button{transition:none}