/* The sky and the day: this stop's own drawings (05-17 sections.sky). Shared looks are in living/explain.css. */
.sk-moons { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 6px; }
.sk-sky { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 14px 34px -16px rgba(60,30,10,0.7); }
.sk-sky .sk-ph, .sk-sky .sk-de { transition: opacity 0.6s; }
.sk-key { display: grid; gap: 12px; }
.sk-key .note { margin: 0; font-size: 14.5px; line-height: 1.5; }
.sk-key b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 700 18px/1 var(--wum-display); text-transform: uppercase; color: #1D1210; }
.sk-key b i { width: 12px; height: 12px; border-radius: 50%; }
.sk-key b i.ph { background: #6E5A4C; box-shadow: 0 0 0 2px #FF946B; }
.sk-key b i.de { background: #EAF2FF; box-shadow: 0 0 0 2px #9FC6FF; }
.sk-fast { width: fit-content; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(60,40,30,0.18); background: rgba(255,255,255,0.8); font: 600 13.5px/1 var(--wum-body); color: #1D1B19; cursor: pointer; }
.sk-fast[aria-pressed="true"] { background: #1D1B19; color: #FFF4EA; }
.sk-blue, .sk-suns { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .sk-moons { grid-template-columns: minmax(0, 1fr); } }