/* Character layers dissolve independently of the enclosing open/close state. */
.window-host>.day-character-layer{opacity:0}
.window-host.is-open>.day-character-layer{opacity:var(--character-opacity,0)}
.history-panel .day-character-layer{opacity:0}
.history-panel.is-active .day-character-layer{opacity:var(--character-opacity,0)}
.sky-shade{transition:opacity 1.6s ease-in-out}
.sky-scene[data-period=night] .sky-shade{opacity:.35}
.unknown-veil{transition:opacity 1s ease-in-out,background-color 1.6s ease-in-out}
.sky-scene[data-period=night] .unknown-veil{background:#34445c}

/* Keep chart labels on pale paper while its paint washes follow the hour. */
.graph-time-wash{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out}
.graph-time-wash[data-time=morning]{background:radial-gradient(ellipse at 5% 5%,#a4d4d999,transparent 70%),linear-gradient(145deg,#eff2e6dd,#f7eddd77)}
.graph-time-wash[data-time=afternoon]{background:radial-gradient(ellipse at 80% 12%,#f6dca766,transparent 70%);opacity:1}
.graph-time-wash[data-time=evening]{background:radial-gradient(ellipse at 10% 5%,#f0bb9daa,transparent 65%),radial-gradient(ellipse at 90% 70%,#c9b3d177,transparent 70%),linear-gradient(150deg,#f5e7dcee,#ece6e8cc)}
.graph-time-wash[data-time=night]{background:radial-gradient(ellipse at 90% 5%,#a4b1cd77,transparent 70%),radial-gradient(ellipse at 5% 90%,#f0d4ab55,transparent 60%),linear-gradient(150deg,#e4e8f1ee,#e7ece6ee)}
.graph-window[data-period]:not([data-period=afternoon]) .graph-time-wash[data-time=afternoon]{opacity:0}
.graph-window[data-period=morning] .graph-time-wash[data-time=morning],
.graph-window[data-period=afternoon] .graph-time-wash[data-time=afternoon],
.graph-window[data-period=evening] .graph-time-wash[data-time=evening],
.graph-window[data-period=night] .graph-time-wash[data-time=night]{opacity:1}
.artwork-controls{border:1px solid #cabb9f;border-radius:4px;padding:15px 16px 8px;margin:22px 0;color:var(--ink)}
.artwork-controls legend{font:22px var(--serif);padding:0 7px}
.artwork-controls label{font-size:10px;letter-spacing:.3px;display:block;margin-bottom:7px}
.artwork-controls select{width:100%;min-height:40px;padding:8px 10px;border:1px solid #b9aa8e;border-radius:3px;background:#fff9ed;font:12px var(--sans);color:var(--ink)}
.artwork-controls .small-copy{font-size:10px;line-height:1.7;margin:10px 0 4px;min-height:34px}
@media(prefers-reduced-motion:reduce){.graph-time-wash,.sky-shade,.unknown-veil{transition:none!important}}