.theme-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:7px 13px;border:1px solid currentColor;border-radius:24px;background:transparent;color:inherit;font:13px/1.4 var(--display);cursor:pointer;white-space:nowrap}
.theme-picker-trigger:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.theme-picker-icon{display:grid;grid-template-columns:repeat(2,5px);gap:2px}.theme-picker-icon i{width:5px;height:5px;background:currentColor;border-radius:1px}.theme-picker-icon i:nth-child(2){opacity:.4}.theme-picker-icon i:nth-child(3){opacity:.65}
#theme-picker{width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:28px;border:1px solid #d8ceba;border-radius:14px;background:#f5f0e6 url('./portrait-collage/paper.webp') repeat;color:#292a25;box-shadow:0 24px 90px #0005;overflow:auto;color-scheme:light}
#theme-picker::backdrop{background:#10171499;backdrop-filter:blur(5px)}
.theme-picker-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
#theme-picker h2{font:500 29px/1.3 var(--display);margin:0 0 7px}.theme-picker-heading p{font-size:13px;color:#736d61;margin:0;line-height:1.6}
.theme-picker-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:transparent;border:1px solid #cfc6b5;border-radius:50%;font:26px/1 sans-serif;color:#423e35;cursor:pointer}
.theme-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.theme-choice{display:block;min-width:0;padding:0;text-align:left;border:1px solid #d7cebd;border-radius:7px;background:#faf6ee;color:#292a25;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.theme-choice-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e8e0d3}.theme-choice-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.theme-choice-caption{display:block;padding:13px 15px}.theme-choice-caption strong{display:block;font:500 20px/1.4 var(--display)}.theme-choice-caption small{display:block;margin-top:3px;font:11px/1.6 sans-serif;color:#736d61}
.theme-choice-check{display:none;position:absolute;top:10px;right:10px;place-items:center;width:26px;height:26px;background:#ac4928;color:white;border-radius:50%;font:16px sans-serif;box-shadow:0 1px 5px #0003}
.theme-choice[aria-pressed=true]{border-color:#ac4928;box-shadow:0 0 0 2px #ac4928}.theme-choice[aria-pressed=true] .theme-choice-check{display:grid}.theme-choice:hover{border-color:#ac4928}
.theme-picker-trigger:focus-visible,.theme-choice:focus-visible,.theme-picker-close:focus-visible{outline:2px solid #b45a35;outline-offset:4px}
html:has(#theme-picker[open]){overflow:hidden}
@media(max-width:700px){.theme-picker-trigger{font-size:11px;gap:6px;padding:7px 9px;min-height:36px}.theme-picker-icon{display:none}#theme-picker{padding:20px 16px;max-height:calc(100dvh - 24px)}#theme-picker h2{font-size:25px}.theme-picker-heading{margin-bottom:18px}.theme-picker-grid{gap:12px}.theme-choice-caption{padding:10px}.theme-choice-caption strong{font-size:17px}.theme-choice-caption small{font-size:10px}.theme-choice-art{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.theme-choice{transition:none}}
