/* Comparison image keeps its full 8:5 capture inside the available viewport. */
.intro{white-space:pre-line}
.compare-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex:none}
.comparison .compare-heading h2{margin:0;flex:1}
.compare-heading button{font-size:13px;color:var(--gold);white-space:nowrap;min-height:40px}
#compare-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-width:none;max-height:none;margin:auto;padding:12px;background:#171226;color:#f2eee6;border:1px solid var(--hair);border-radius:8px;overflow:hidden}
#compare-dialog::backdrop{background:#090611e8}
#compare-dialog .comparison{height:100%;min-height:0;max-height:none;margin:0}
#compare-dialog .viewer{flex:1;min-height:0}
#compare-dialog .photo{flex:1;min-height:0;height:auto;aspect-ratio:auto;touch-action:none}
#compare-dialog .note{display:none}
.night-carousel{max-width:960px;margin:auto;position:relative}
.night-carousel img{display:block;max-height:65svh;object-fit:contain;background:#211a2f}
.night-carousel figcaption{text-align:center;margin-top:10px}
.night-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:10px}
.night-controls button{width:52px;height:42px;font-size:22px;color:var(--gold)}
.night-controls span{font-size:13px;color:var(--dim);min-width:40px;text-align:center}
.comparison{height:calc(100svh - 32px);min-height:460px;max-height:1100px;display:flex;flex-direction:column;scroll-margin-top:16px;margin-top:42px}
.comparison h2{margin:0 0 12px;font-size:24px;flex:none}
.comparison .tabs{padding:0 0 12px;flex:none}
.comparison .viewer{flex:1;min-height:0;display:flex;flex-direction:column}
.comparison .photo{flex:1;min-height:0;aspect-ratio:auto}
.comparison .controls{padding:8px 18px;flex:none}
.comparison .caption{font-size:14px;line-height:1.5;padding:0 18px 10px;flex:none}
.comparison .note{font-size:12px;line-height:1.5;margin:10px 0 0;flex:none}
.recipe{margin-top:64px;border-top:1px solid var(--hair);padding-top:24px}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.recipe article{padding:20px;border:1px solid var(--hair);border-radius:6px;background:#211a2f}
.recipe h3{font-weight:500;color:#f2eee6;line-height:1.5}.recipe article h3{margin-top:0}
.swatches{display:flex;gap:10px}.swatches i{width:32px;height:32px;border:1px solid #ffffff33;border-radius:50%;background:var(--swatch)}
.prompt-box{padding:22px;border:1px solid var(--hair);border-radius:6px;background:#100d1c}
.prompt-box pre{font:14px/1.9 system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 22px;color:#dfd7e8}
.prompt-box button,.download{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:8px 16px;background:#e8b54d0a}
#copy-status{margin-left:16px;color:var(--gold);font-size:13px}.pack{display:block;margin-top:24px;padding:22px;border:1px solid var(--hair);border-radius:6px}.pack a{white-space:nowrap}.pack h3{margin-top:0}
@media(max-width:700px){.comparison{height:auto;min-height:0;margin-top:30px}.comparison .photo{flex:none;height:auto;aspect-ratio:8/5}.comparison .viewer{flex:none}.comparison h2{font-size:22px}.recipe-grid{grid-template-columns:1fr}.pack{display:block}.prompt-box{padding:16px}.recipe article{padding:16px}}
@media(max-width:700px){.pack{padding:16px}.compare-heading{align-items:flex-start}.comparison .compare-heading h2{font-size:19px}.compare-heading button{font-size:12px;padding:6px 10px}#compare-dialog .caption{font-size:12px}}

/* Flat project palette: night sky, sand, volcanic ground and castle roof. */
:root{color-scheme:dark;--navy:#101a30;--sand:#e4d4ae;--volcano:#b7967d;--castle:#4e9ccf;--gold:var(--sand);--dim:#bdcbdb;--hair:#9ebde138}
body{background:var(--navy);color:#edf3f8}
nav{border-color:#9ebde138}nav b{color:#9ebde1}a{color:#e4d4ae}
select,button{background:#213852;color:#edf3f8;border-color:#4e9ccf80;border-radius:12px}
h1 em{color:#e4d4ae}h2{color:#e4d4ae}.eyebrow{color:#9ebde1}
.history{gap:22px}.history article{padding:24px;border:1px solid #b7967d;border-radius:24px;background:#b7967d}.history article+article{background:#4e9ccf;border-color:#4e9ccf}.history h2{margin:10px 0}.history h2,.history p,.history small{color:var(--navy)}
.comparison{height:auto;min-height:0;max-height:none;display:block;margin-top:44px}
.compare-heading{margin-bottom:16px}.comparison .viewer{width:min(100%,calc((100svh - 190px)*1.6));margin:auto;display:block;position:relative;border:0;border-radius:22px;background:transparent;overflow:visible}
.comparison .photo{height:auto;aspect-ratio:8/5;min-height:0;display:block;flex:none;border-radius:22px;overflow:hidden;background:transparent;box-shadow:0 12px 30px #00000026}
.photo img{inset:0;object-fit:contain}.comparison .controls{padding:12px 4px 6px;color:#bdcbdb}.comparison .caption{padding:0 4px 4px;color:#bdcbdb}
.media-actions{position:absolute;top:12px;right:12px;z-index:4;cursor:default}
.media-actions button{background:#101a30f5;border:1px solid #9ebde16b;color:#edf3f8;font-size:13px;box-shadow:0 2px 12px #00000026}
.comparison .tabs{position:absolute;bottom:12px;left:12px;right:12px;z-index:3;padding:6px;gap:6px;border-radius:14px;background:#101a30ef;backdrop-filter:blur(12px);cursor:default;width:max-content;max-width:calc(100% - 24px);margin:auto;scrollbar-width:thin}
.tabs button{font-size:12px;border:0;background:transparent;color:#edf3f8;padding:7px 11px;border-radius:9px}.tabs button[aria-pressed=true]{background:#e4d4ae;color:#101a30;box-shadow:0 2px 6px #00000026}
.photo .label{top:12px;left:12px;background:#101a30ef;border:0;color:#edf3f8;border-radius:9px;font-size:11px}.photo .label.after{left:134px;right:auto;color:#e4d4ae}
.divider{background:#e4d4ae}.divider:after{background:#e4d4ae;color:#101a30;border-color:#b7967d}
#compare-dialog{padding:0;background:transparent;border:0;box-shadow:none;border-radius:22px}
#compare-dialog::backdrop{background:#101a30ef;backdrop-filter:blur(12px)}
#compare-dialog .comparison{display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0}
#compare-dialog .compare-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#compare-dialog .viewer{width:min(100%,calc((100dvh - 20px)*1.6));flex:none;margin:0;border-radius:22px}
#compare-dialog .photo{width:100%;height:auto;aspect-ratio:8/5;flex:none;border-radius:22px}
#compare-dialog .controls{position:absolute;z-index:3;left:24px;right:24px;bottom:70px;padding:4px 12px;border-radius:12px;background:#101a30ef;backdrop-filter:blur(12px);color:#bdcbdb}
#compare-dialog .caption{display:none}
.night{border-color:var(--hair)}.night-carousel{width:min(100%,calc(75svh * 1.6));max-width:none}.night-carousel img{width:100%;height:auto;max-height:none;aspect-ratio:8/5;object-fit:contain;border-radius:22px;background:transparent;box-shadow:0 12px 30px #00000026}
.night-controls button{background:#4e9ccf;color:#101a30;border-color:#4e9ccf}.night-controls span{color:#bdcbdb}
.motion video{display:block;border-radius:22px;overflow:hidden;box-shadow:0 12px 30px #00000026}
.recipe{border-color:var(--hair)}.recipe h3{color:#e4d4ae}.prompt-box{background:#213852;border-color:#4e9ccf66;border-radius:22px}.prompt-box pre{color:#edf3f8}.pack{background:#705c5e;border-color:#b7967d;border-radius:22px}
.prompt-box button,.download{color:#101a30;background:#e4d4ae;border:1px solid #e4d4ae;border-radius:12px;box-shadow:0 3px 0 #00000026}
footer{color:#bdcbdb;border-color:var(--hair)}
@media(max-width:700px){.comparison .viewer{width:100%}.history article{padding:20px}.photo .label{font-size:9px;padding:3px 6px;top:10px;left:10px}.photo .label.after{left:104px}.media-actions{top:9px;right:9px}.media-actions button{font-size:11px;padding:5px 8px}.comparison .tabs{bottom:8px;left:8px;right:8px;max-width:calc(100% - 16px);padding:4px}.tabs button{padding:5px 9px;font-size:11px}#compare-dialog .controls{left:12px;right:12px;bottom:54px;padding:0 8px;gap:10px}.comparison .photo,.night-carousel img,.motion video{border-radius:18px}}