/* User-supplied sun/moon design, deduplicated and scoped to this component.
 * The sky and artwork retain their day/night colors in either website palette.
 * The visual switch is 60 x 34px inside a 60 x 44px keyboard/touch target.
 */
.cp-theme-toggle {
    --cp-toggle-shift: 26px;
    --cp-toggle-drift: 4px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin-inline-start: 16px;
    vertical-align: middle;
    line-height: 1;
}
.cp-theme-toggle[hidden] { display: none !important; }
.cp-theme-toggle:dir(rtl) { --cp-toggle-shift: -26px; --cp-toggle-drift: -4px; }
.cp-theme-toggle__switch { position: relative; display: inline-block; flex: 0 0 60px; inline-size: 60px; block-size: 44px; cursor: pointer; }
.cp-theme-toggle__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.cp-theme-toggle__slider { position: absolute; inset-block: 5px; inset-inline: 0; overflow: hidden; isolation: isolate; border-radius: 34px; background-color: var(--cp-toggle-day-sky); transition: background-color .4s; }
.cp-theme-toggle__sun-moon { position: absolute; inset-inline-start: 4px; inset-block-end: 4px; inline-size: 26px; block-size: 26px; border-radius: 50%; background-color: var(--cp-toggle-sun); transform: translateX(0) rotate(0); transition: transform .4s ease, background-color .4s; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider { background-color: var(--cp-toggle-night-sky); }
.cp-theme-toggle__input:focus-visible + .cp-theme-toggle__slider { outline: 2px solid var(--cp-focus, #e8c875); outline-offset: 3px; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__sun-moon { transform: translateX(var(--cp-toggle-shift)) rotate(360deg); background-color: var(--cp-toggle-moon); }
.cp-theme-toggle__moon-dot { position: absolute; z-index: 4; opacity: 0; fill: var(--cp-toggle-crater); transition: opacity .4s; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__moon-dot { opacity: 1; }
.cp-theme-toggle__moon-dot--1 { inset-inline-start: 10px; inset-block-start: 3px; inline-size: 6px; block-size: 6px; }
.cp-theme-toggle__moon-dot--2 { inset-inline-start: 2px; inset-block-start: 10px; inline-size: 10px; block-size: 10px; }
.cp-theme-toggle__moon-dot--3 { inset-inline-start: 16px; inset-block-start: 18px; inline-size: 3px; block-size: 3px; }
.cp-theme-toggle__light-ray { position: absolute; z-index: -1; fill: var(--cp-toggle-ray); opacity: .1; }
.cp-theme-toggle__light-ray--1 { inset-inline-start: -8px; inset-block-start: -8px; inline-size: 43px; block-size: 43px; }
.cp-theme-toggle__light-ray--2 { inset-inline-start: -50%; inset-block-start: -50%; inline-size: 55px; block-size: 55px; }
.cp-theme-toggle__light-ray--3 { inset-inline-start: -18px; inset-block-start: -18px; inline-size: 60px; block-size: 60px; }
.cp-theme-toggle__cloud { position: absolute; block-size: auto; aspect-ratio: 1; animation: cp-toggle-cloud 6s infinite; transition: opacity .4s; }
.cp-theme-toggle__cloud--light { fill: var(--cp-toggle-cloud-light); }
.cp-theme-toggle__cloud--dark { fill: var(--cp-toggle-cloud-dark); animation-delay: 1s; }
.cp-theme-toggle__cloud--1 { inset-inline-start: 30px; inset-block-start: 15px; inline-size: 40px; }
.cp-theme-toggle__cloud--2 { inset-inline-start: 44px; inset-block-start: 10px; inline-size: 20px; }
.cp-theme-toggle__cloud--3 { inset-inline-start: 18px; inset-block-start: 24px; inline-size: 30px; }
.cp-theme-toggle__cloud--4 { inset-inline-start: 36px; inset-block-start: 18px; inline-size: 40px; }
.cp-theme-toggle__cloud--5 { inset-inline-start: 48px; inset-block-start: 14px; inline-size: 20px; }
.cp-theme-toggle__cloud--6 { inset-inline-start: 22px; inset-block-start: 26px; inline-size: 30px; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__cloud { opacity: 0; animation-play-state: paused; }
.cp-theme-toggle__stars { position: absolute; inset: 0; transform: translateY(-32px); opacity: 0; transition: transform .4s, opacity .4s; pointer-events: none; }
.cp-theme-toggle__star { fill: var(--cp-toggle-star); position: absolute; block-size: auto; aspect-ratio: 1; animation: cp-toggle-twinkle 2s infinite; animation-play-state: paused; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__stars { transform: translateY(0); opacity: 1; }
.cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__star { animation-play-state: running; }
.cp-theme-toggle__star--1 { inline-size: 20px; inset-block-start: 2px; inset-inline-start: 3px; animation-delay: .3s; }
.cp-theme-toggle__star--2 { inline-size: 6px; inset-block-start: 16px; inset-inline-start: 3px; }
.cp-theme-toggle__star--3 { inline-size: 12px; inset-block-start: 20px; inset-inline-start: 10px; animation-delay: .6s; }
.cp-theme-toggle__star--4 { inline-size: 18px; inset-block-start: 0; inset-inline-start: 18px; animation-delay: 1.3s; }
.cp-theme-toggle .cp-theme-toggle__auto { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; margin: 0; padding-block: 4px; padding-inline: 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cp-muted, #b1aea4); font: inherit; font-size: .7rem; font-weight: 400; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.cp-theme-toggle .cp-theme-toggle__auto[aria-pressed="true"] { color: var(--cp-accent, #e8c875); border-color: var(--cp-border, #39362e); }
.cp-theme-toggle .cp-theme-toggle__auto:hover { color: var(--cp-accent, #e8c875); background: var(--cp-accent-soft, #292316); }
.cp-theme-toggle .cp-theme-toggle__auto:focus-visible { outline: 2px solid var(--cp-focus, #e8c875); outline-offset: 2px; }
.mobilenavcontainer > .cp-theme-toggle { margin-inline-start: auto; margin-inline-end: 12px; }
.cp-theme-toggle:not(.is-ready) *, .cp-theme-toggle:not(.is-ready) *::before, .cp-theme-toggle:not(.is-ready) *::after { animation: none !important; transition: none !important; }
@keyframes cp-toggle-cloud { 0%,100% { transform: translateX(0); } 40% { transform: translateX(var(--cp-toggle-drift)); } 80% { transform: translateX(calc(-1 * var(--cp-toggle-drift))); } }
@keyframes cp-toggle-twinkle { 0%,100% { transform: scale(1); } 40% { transform: scale(1.2); } 80% { transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .cp-theme-toggle *, .cp-theme-toggle *::before, .cp-theme-toggle *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .cp-theme-toggle__slider { border: 1px solid CanvasText; } .cp-theme-toggle__sun-moon { background: CanvasText; } .cp-theme-toggle__input:checked + .cp-theme-toggle__slider .cp-theme-toggle__sun-moon { background: Highlight; } }