/* the search pages (site/pages): dark like the night sky, the live sky at the top, plain readable text */
html { background: #0b1330; }
body { margin: 0; color: #dfe6ff; font-family: "Avenir Next", "Nunito", ui-rounded, system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
header { padding: 18px max(20px, env(safe-area-inset-left)); }
header a { color: #fff; font-weight: 600; letter-spacing: 1px; text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 8px max(20px, env(safe-area-inset-left)) 40px; }
h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 600; color: #fff; line-height: 1.2; margin: 8px 0 12px; }
h2 { font-size: 22px; font-weight: 600; color: #fff; margin: 36px 0 8px; }
h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 20px 0 4px; }
p { margin: 0 0 12px; }
a { color: #9cc9f5; }
.lead { font-size: 19px; color: #fff; opacity: .92; }
.sky { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; margin: 20px 0 8px; background: #1b2552; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.sky iframe { position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.sky.big iframe { width: 100%; height: 100%; transform: none; pointer-events: auto; }
.sky .open { position: absolute; right: 14px; bottom: 12px; font-size: 14px; color: #fff; background: rgba(10,16,40,.55); padding: 6px 12px; border-radius: 999px; text-decoration: none; backdrop-filter: blur(6px); }
.status { font-size: 15px; opacity: .85; }
.skies { columns: 2; padding-left: 20px; }
footer { max-width: 760px; margin: 0 auto; padding: 24px max(20px, env(safe-area-inset-left)) 48px; font-size: 14px; opacity: .8; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 600px) { .skies { columns: 1; } .sky { border-radius: 12px; } }