:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; user-select: none; touch-action: manipulation; }
.frame { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.frame.blanked { background: #000; cursor: default; }
.frame.blanked > * { visibility: hidden !important; }
.backdrop { position: absolute; inset: 0; background: #000; }
.photo { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .55s ease; }
.photo.ready { opacity: 1; }
.photo.ken-burns { position: absolute; top: 50%; left: 50%; animation: ken-burns var(--kb-duration, 15s) linear both; will-change: transform; }
@keyframes ken-burns {
  from { transform: translate3d(calc(-50% + var(--kb-start-x)), calc(-50% + var(--kb-start-y)), 0) scale(var(--kb-start-scale)); }
  to { transform: translate3d(calc(-50% + var(--kb-end-x)), calc(-50% + var(--kb-end-y)), 0) scale(var(--kb-end-scale)); }
}
.weather { position: fixed; z-index: 4; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 11px; width: min(270px, calc(100vw - 32px)); padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; color: #fff; background: rgba(5, 9, 8, .76); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); text-shadow: 0 1px 4px #000; pointer-events: none; }
.weather.rain-expected { border-color: rgba(119, 201, 255, .75); background: rgba(7, 31, 49, .84); }
.weather-icon { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1; }
.weather-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.weather-reading { display: flex; align-items: baseline; gap: 9px; }
.weather-copy strong { font-size: clamp(1.25rem, 3.7vw, 2rem); line-height: 1; }
.weather-reading > span { font-size: clamp(.72rem, 1.8vw, .9rem); font-weight: 720; line-height: 1.15; white-space: pre-wrap; }
.weather-trend { position: relative; display: block; width: 100%; height: 34px; }
.weather-trend-chart { display: block; width: 100%; height: 34px; overflow: visible; }
.weather-trend polyline, .weather-trend line { fill: none; vector-effect: non-scaling-stroke; }
.weather-now-line { stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.weather-history { stroke: rgba(255, 255, 255, .92); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.weather-forecast { stroke: #82d3ff; stroke-width: 2; stroke-dasharray: 4 3; stroke-linecap: round; stroke-linejoin: round; }
.weather-now { fill: #fff; stroke: #123342; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.weather-extreme { position: absolute; z-index: 1; padding: 1px 3px; border-radius: 4px; background: rgba(5, 9, 8, .72); font-size: .52rem; font-weight: 850; line-height: 1; text-shadow: 0 1px 3px #000; }
.weather-high { color: #ffe29a; transform: translate(-50%, 3px); }
.weather-low { color: #a8e3ff; transform: translate(-50%, calc(-100% - 3px)); }
.overlay { position: absolute; z-index: 2; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); left: max(18px, env(safe-area-inset-left)); padding: clamp(14px, 3vw, 28px); border-radius: 18px; color: white; background: linear-gradient(135deg, rgba(5, 9, 8, .84), rgba(5, 9, 8, .52)); box-shadow: 0 12px 50px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); }
.overlay p { margin: 0; text-wrap: balance; text-shadow: 0 1px 4px #000; }
.headline { font-size: clamp(1.25rem, 3.8vw, 2.4rem); font-weight: 780; line-height: 1.15; }
.headline.interactive, .headline-source.interactive { cursor: pointer; pointer-events: auto; }
.headline::before { content: "Morning headline · "; color: #a7ddca; font-size: .62em; text-transform: uppercase; letter-spacing: .05em; }
.headline-source { margin-top: 7px !important; color: rgba(255, 255, 255, .76); font-size: clamp(.625rem, 1.9vw, 1.2rem); font-weight: 600; line-height: 1.15; }
.headline-source::before { content: "Source · "; color: #a7ddca; text-transform: uppercase; letter-spacing: .05em; }
.quote { font-size: clamp(1.25rem, 3.8vw, 2.4rem); font-weight: 720; line-height: 1.2; }
.quote::before { content: "Evening reflection · "; color: #e8cf8b; font-size: .62em; text-transform: uppercase; letter-spacing: .05em; }
.calendar { margin-top: 9px !important; font-size: clamp(1rem, 2.8vw, 1.55rem); }
.caption { margin-top: 9px !important; font-size: clamp(1.05rem, 3vw, 1.7rem); font-weight: 620; }
.status { position: relative; z-index: 3; padding: 12px 16px; border-radius: 12px; background: rgba(0, 0, 0, .7); color: #fff; }
@media (orientation: portrait) { .overlay { bottom: max(34px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .photo.ken-burns { animation: none; transform: translate3d(-50%, -50%, 0) scale(var(--kb-start-scale)); } }