/* Identical sky switch styles to the wedding website catalogue. */
.sky-toggle{position:relative;display:inline-block;flex-shrink:0;width:68px;height:32px}.sky-toggle input{position:absolute;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:3}.sky-track{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:99px;background:#3d7eae;box-shadow:inset 0 2px 4px #0005,0 1px 2px #fff9;transition:background .5s}.sky-toggle input:focus-visible+.sky-track{outline:3px solid var(--accent);outline-offset:4px}.sky-circle{position:absolute;left:-6px;top:-6px;width:44px;height:44px;border-radius:50%;background:#ffffff18;box-shadow:0 0 0 8px #ffffff18,0 0 0 16px #ffffff13;display:grid;place-items:center;transition:transform .5s cubic-bezier(.22,1,.36,1)}.sky-sun{width:27px;height:27px;background:#ecca2f;border-radius:50%;overflow:hidden;box-shadow:inset 1px 1px 1px #ffffba,inset 0 -1px 1px #967725,1px 3px 4px #0005}.sky-moon{display:block;position:relative;width:100%;height:100%;border-radius:50%;background:#c4c9d1;transform:translateX(100%);transition:transform .5s;box-shadow:inset 1px 1px 1px white}.sky-moon i{position:absolute;left:4px;top:10px;width:9px;height:9px;border-radius:50%;background:#959db1;box-shadow:inset 0 1px 2px #0002}.sky-moon i:nth-child(2){left:17px;top:14px;width:5px;height:5px}.sky-moon i:nth-child(3){left:12px;top:4px;width:4px;height:4px}.sky-clouds{position:absolute;left:4px;bottom:-8px;width:17px;height:17px;border-radius:50%;background:#f3fdff;box-shadow:12px 4px #f3fdff,22px 3px #f3fdff,34px 0 #f3fdff,48px -5px #f3fdff,56px -17px 0 5px #f3fdff,0 -5px #aacadf,18px -4px #aacadf,38px -8px #aacadf,53px -23px 0 5px #aacadf;transition:transform .5s}.sky-stars{position:absolute;width:47px;height:27px;left:4px;top:-30px;transition:top .5s}.sky-toggle input:checked+.sky-track{background:#1d1f2c}.sky-toggle input:checked+.sky-track .sky-circle{transform:translateX(36px)}.sky-toggle input:checked+.sky-track .sky-moon{transform:translateX(0)}.sky-toggle input:checked+.sky-track .sky-clouds{transform:translateY(50px)}.sky-toggle input:checked+.sky-track .sky-stars{top:2px}
.sky-toggle input{appearance:auto;border:0;padding:0}.sky-toggle{vertical-align:middle}.scene-header nav,.keepsake-header nav{align-items:center}.scene-header{background:var(--scene-bg,#fbf6ed)}.scene-header .sky-toggle{margin-left:4px}
html[data-theme=dark]{color-scheme:dark;--scene-bg:#160e10}html[data-theme=dark] body:has(.scene-header){--ink:#faeee7;--muted:#c9b8ae;--line:#5a393b;--accent:#e4a197;background:var(--scene-bg);color:var(--ink)}html[data-theme=dark] .scene-kicker{color:#e4bca1}html[data-theme=dark] .scene-variants label:has(input:checked),html[data-theme=dark] .scene-photo-note,html[data-theme=dark] .scene-caricature{background:#2a1a1d}html[data-theme=dark] .scene-related-grid a{background:#24171a}html[data-theme=dark] .scene-primary{background:#9e3047;color:#fff}html[data-theme=dark] .scene-preview{background:#2a1a1d;border-color:var(--line)}
@media(max-width:600px){.keepsake-header{padding:14px 18px;gap:12px;flex-wrap:wrap}.keepsake-header nav{flex-wrap:wrap;justify-content:flex-end;flex:1}.keepsake-header .ks-button{font-size:11px;padding:8px 10px}.scene-header nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.scene-header nav a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sky-track,.sky-circle,.sky-moon,.sky-clouds,.sky-stars{transition:none}}

.scene-header,.keepsake-header{position:sticky;top:0;z-index:60}.keepsake-header{background:var(--ks-paper)}
@media(min-width:801px){.scene-preview-column{top:calc(var(--detail-header-height,90px) + 16px)}.scene-preview{width:min(380px,100%,calc((100dvh - var(--detail-header-height,90px) - 145px)*.5625))}}
@media(min-width:851px){.ks-preview{top:calc(var(--detail-header-height,90px) + 16px);max-height:calc(100dvh - var(--detail-header-height,90px) - 32px)}.ks-preview #preview-media img,.ks-preview #preview-media iframe{max-height:calc(100dvh - var(--detail-header-height,90px) - 190px)}}

/* Catalogue mobile dimensions and thumb travel. */
@media(max-width:650px){.sky-toggle{width:60px;height:30px}.sky-toggle input:checked+.sky-track .sky-circle{transform:translateX(30px)}}
