:root{--zc-background:#f3f3ed;--zc-ink:#314951;--zc-muted:#6a7d80;--zc-surface:#e8eeea;--zc-border:#cedbd6;--zc-accent:#426a75;--zc-accent-ink:#f5f6ef;--zc-sky-text:#304b58;--zc-cloud-paper:#f5f6ee;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px Arial,sans-serif}main{max-width:1120px;margin:auto;padding:26px 32px}header{display:flex;justify-content:space-between;gap:14px;font-size:10px;color:var(--zc-muted)}.eyebrow{font-size:9px;letter-spacing:.18em;line-height:1.8}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:27px 0 24px}.heading .eyebrow{margin:0 0 7px}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.035em}h1{font-size:49px;margin:0}.heading>p{font:italic 14px/1.8 Georgia,serif;color:var(--zc-muted)}.viewport{height:490px;position:relative;overflow:hidden;border-radius:150px 150px 20px 20px;border:1px solid var(--zc-border)}canvas{width:100%;height:100%;display:block;cursor:pointer}.sky-caption{position:absolute;top:34px;left:30px;right:30px;text-align:center;pointer-events:none;color:var(--zc-sky-text)}.sky-caption h2{font-size:29px;margin:8px 0}.horizon{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.24em;color:var(--zc-sky-text);pointer-events:none}.controls{text-align:center;margin:20px 0 26px}.controls>p{font-size:12px;color:var(--zc-muted);line-height:1.7}.actions,.settings{display:flex;justify-content:center;align-items:center;gap:10px}.actions button{min-width:200px}button,select{min-height:46px;padding:12px 18px;border:1px solid var(--zc-border);background:var(--zc-surface);color:var(--zc-ink);font:inherit;border-radius:10px;cursor:pointer}#watch{background:var(--zc-accent);color:var(--zc-accent-ink)}button:disabled{opacity:.55;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.settings{margin-top:12px;font-size:12px}.settings label{display:flex;align-items:center;gap:9px;color:var(--zc-muted)}.atlas{border-top:1px solid var(--zc-border);padding-top:20px}.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.atlas h2{font-size:26px;margin:0}.atlas-heading span,.atlas>p{font-size:11px;color:var(--zc-muted)}ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:18px 0;padding:0;gap:8px}li{padding:13px;border:1px solid var(--zc-border);border-radius:8px;font-size:11px;color:var(--zc-muted)}li.found{background:var(--zc-surface);color:var(--zc-ink)}#status{min-height:22px;font-size:12px;color:var(--zc-muted);line-height:1.6}footer{font-size:9px;color:var(--zc-muted)}@media(max-width:600px){main{padding:16px}header{font-size:8px}.eyebrow{font-size:8px}.heading{display:block;margin:23px 0 20px}h1{font-size:38px}.heading>p{font-size:12px;margin:9px 0 0}.heading>p br{display:none}.viewport{height:420px;border-radius:105px 105px 16px 16px}.sky-caption{top:31px;left:15px;right:15px}.sky-caption .eyebrow{font-size:7px}.sky-caption h2{font-size:24px}.actions{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}.actions button{min-width:0;font-size:12px;padding:12px 9px}.settings{flex-wrap:wrap;gap:8px}.settings label{font-size:11px;gap:5px}.settings button,.settings select{font-size:11px;padding:10px}.atlas h2{font-size:24px}ol{grid-template-columns:repeat(2,1fr)}li{padding:11px;font-size:10px}}

.viewport[data-light=blue]{--zc-sky-text:#f2f5ed}
/* An observatory window above a small contact-sheet cloud atlas. */
body{background:radial-gradient(ellipse at 50% -12%,var(--zc-surface),transparent 60%),var(--zc-background)}
header{padding-bottom:12px;border-bottom:1px solid var(--zc-border);text-transform:uppercase}
.heading{align-items:end;margin:22px 0 18px}
.heading>p{max-width:235px;padding-left:18px;border-left:1px solid var(--zc-border)}
.viewport{height:clamp(400px,49vh,540px);border:8px solid var(--zc-surface);border-radius:48% 48% 4px 4px / 22% 22% 4px 4px;outline:1px solid var(--zc-border);box-shadow:0 24px 50px color-mix(in srgb,var(--zc-ink) 14%,transparent)}
.viewport::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,transparent 44%,color-mix(in srgb,var(--zc-ink) 11%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--zc-surface) 11%,transparent),transparent 40%)}
.sky-caption{z-index:1;top:34px}
.sky-caption h2{font-size:clamp(29px,3vw,39px);line-height:1.15}
.horizon{z-index:1;bottom:20px}
.controls{margin:16px 0 27px}
.controls>p{font:italic 15px/1.4 Georgia,serif;color:var(--zc-ink);margin:0 0 12px}
.actions button{border-radius:999px;min-height:51px}
.settings button,.settings select{border-radius:999px;background:transparent}
.atlas{position:relative;padding-top:24px}
.atlas::before{content:"CLOUD STUDIES / 01—12";position:absolute;top:-18px;left:0;padding-right:13px;background:var(--zc-background);color:var(--zc-muted);font-size:9px;letter-spacing:.18em}
.atlas-heading h2{font-size:31px}
.atlas ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.atlas li{position:relative;min-height:76px;border-radius:2px;background:color-mix(in srgb,var(--zc-surface) 58%,transparent);padding:14px}
.atlas li.found{background:var(--zc-surface);border-color:var(--zc-accent);box-shadow:inset 0 3px 0 var(--zc-accent)}
@media(max-width:600px){main{padding:12px 14px 24px}header{padding-bottom:6px}.heading{margin:12px 0}.heading>p{border:0;padding:0;margin:4px 0;font-size:11px;line-height:1.3}h1{font-size:35px}.viewport{height:330px;border-width:5px;border-radius:45% 45% 3px 3px / 16% 16% 3px 3px}.sky-caption{top:21px}.sky-caption h2{font-size:24px;margin:4px 0}.horizon{bottom:12px}.controls{margin:11px 0 21px}.controls>p{font-size:12px;margin:0 0 7px}.actions button{min-height:44px}.settings{margin-top:7px}.atlas{padding-top:18px}.atlas ol{grid-template-columns:repeat(2,minmax(0,1fr))}.atlas li{min-height:58px}}

/* Round two: the sky is the page, with only a few observatory marks. */
:root{--zc-cloud-rail:#405761;--zc-cloud-glass:#e8f1ed;--zc-cloud-ink:#253d49}
body{background:var(--zc-cloud-glass)}
main{max-width:none;padding:0 0 30px}
header{position:relative;z-index:3;max-width:1240px;margin:auto;padding:18px 35px 0;border:0;color:var(--zc-cloud-ink)}
.heading{position:relative;z-index:2;max-width:1240px;margin:0 auto -125px;padding:32px 35px 0;align-items:start;color:var(--zc-cloud-ink);pointer-events:none}
.heading .eyebrow{color:var(--zc-cloud-ink)}
.heading h1{font:300 clamp(41px,5vw,68px)/1.02 "Segoe UI",Arial,sans-serif;letter-spacing:-.055em}
.heading>p{font:13px/1.5 Arial,sans-serif;letter-spacing:.04em;max-width:175px;border:0;padding:0;color:var(--zc-cloud-ink)}
.viewport{width:100%;height:clamp(520px,70vh,720px);border:0;border-radius:0;outline:0;box-shadow:none}
.viewport::before{content:"N  ·  OBSERVATION 01";position:absolute;z-index:2;left:35px;bottom:52px;font:9px Arial,sans-serif;letter-spacing:.24em;color:var(--zc-cloud-ink);pointer-events:none}
.viewport::after{background:linear-gradient(180deg,color-mix(in srgb,var(--zc-cloud-glass) 62%,transparent),transparent 33%,transparent 68%,color-mix(in srgb,var(--zc-cloud-rail) 26%,transparent))}
.sky-caption{top:48%;transform:translateY(-50%);color:var(--zc-cloud-ink)}
.sky-caption h2{font:400 clamp(30px,3vw,43px)/1.1 Georgia,serif}
.horizon{bottom:50px;color:var(--zc-cloud-ink)}
.controls{position:relative;z-index:3;max-width:780px;margin:-33px auto 43px;padding:10px 16px 14px;background:color-mix(in srgb,var(--zc-cloud-glass) 88%,transparent);border:1px solid color-mix(in srgb,var(--zc-cloud-rail) 27%,transparent);backdrop-filter:blur(8px);box-shadow:0 15px 31px color-mix(in srgb,var(--zc-cloud-rail) 12%,transparent)}
.controls>p{font:11px Arial,sans-serif;color:var(--zc-cloud-ink);margin:3px 0 9px}
.actions button,.settings button,.settings select{border-radius:2px;min-height:42px}
.actions #watch{background:var(--zc-cloud-rail);color:var(--zc-cloud-glass)}
.settings{margin-top:5px}
.atlas,#status,footer{max-width:1120px;margin-left:auto;margin-right:auto}
.atlas{border-color:var(--zc-cloud-rail)}
.atlas::before{background:var(--zc-cloud-glass)}
.atlas ol{gap:0;border-left:1px solid var(--zc-border);border-top:1px solid var(--zc-border)}
.atlas li{border:0;border-right:1px solid var(--zc-border);border-bottom:1px solid var(--zc-border);background:transparent;min-height:73px}
@media(max-width:600px){main{padding:0 0 24px}header{padding:8px 15px 0}.heading{margin:0 0 -73px;padding:13px 15px 0;display:block}.heading h1{font-size:35px}.heading>p{margin:3px 0;font-size:10px;max-width:none}.heading>p br{display:none}.viewport{height:353px}.viewport::before{left:15px;bottom:37px;font-size:8px}.sky-caption{top:46%}.sky-caption h2{font-size:24px}.horizon{bottom:35px;font-size:7px}.controls{margin:-13px 10px 24px;padding:7px 9px 10px}.controls>p{font-size:10px}.actions button{min-height:42px}.settings{gap:3px}.settings button,.settings select{min-height:36px}.atlas,#status,footer{margin-left:15px;margin-right:15px}.atlas ol{grid-template-columns:repeat(3,minmax(0,1fr))}.atlas li{min-height:54px;padding:7px;font-size:9px}}
.heading:has(+ .viewport[data-light=blue]),.heading:has(+ .viewport[data-light=blue]) .eyebrow,.heading:has(+ .viewport[data-light=blue])>p{color:var(--zc-cloud-glass)}
.heading:has(+ .viewport[data-light=blue]) .eyebrow{color:var(--zc-cloud-ink)}
.viewport[data-light=blue] .sky-caption,.viewport[data-light=blue] .horizon,.viewport[data-light=blue]::before{color:var(--zc-cloud-glass)}
@media(max-width:600px){.viewport::before{bottom:55px}.horizon{bottom:28px}}
body,.atlas,.atlas h2,.atlas-heading span,.atlas>p,.atlas li,#status,footer{color:var(--zc-cloud-ink)}
.controls .actions button:not(#watch),.controls .settings button,.controls .settings select{color:var(--zc-cloud-ink);background:var(--zc-cloud-glass);border-color:color-mix(in srgb,var(--zc-cloud-rail) 38%,transparent)}
.controls .settings label{color:var(--zc-cloud-ink)}

/* The sky owns flexible space; the atlas is a keyboard-scrollable observation tray. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:5px}
header,.heading,.controls,#status,footer{flex:none}
.viewport{flex:1 1 0;height:auto;min-height:0}
.controls{margin:-22px auto 6px}
.atlas{flex:0 1 112px;min-height:54px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.atlas ol{margin:8px 0}
.atlas:focus-visible{outline:2px solid var(--zc-cloud-rail);outline-offset:-2px}
@media(max-width:600px){main{padding-bottom:4px}.heading{padding-top:5px}.heading h1{font-size:clamp(27px,8vw,34px)}.viewport{height:auto;min-height:0}.controls{margin:-8px 8px 3px;padding:5px 7px}.controls>p{margin:0 0 3px}.atlas{flex-basis:88px;min-height:45px}.atlas h2{font-size:18px}.atlas ol{margin:5px 0}.atlas li{min-height:44px}#status,footer{margin-top:1px;margin-bottom:1px}}

/* Polish: the generated sky fades in, its words size themselves to the window, and short frames stay uncluttered. */
#sky{animation:sky-in 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes sky-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){#sky{animation:none}}
.viewport{container-type:size}
.sky-caption h2{transition:opacity .8s;text-shadow:0 1px 22px color-mix(in srgb,var(--zc-cloud-glass) 70%,transparent)}
.viewport[data-light=blue] .sky-caption,.viewport[data-light=blue] .horizon{text-shadow:0 1px 16px #0a1430b3}
.heading:has(+ .viewport[data-light=blue]) h1{text-shadow:0 1px 18px #0a143099}
@container (max-height:330px){.sky-caption .eyebrow,.horizon{display:none}.sky-caption{top:54%}.sky-caption h2{font-size:clamp(19px,7cqh,30px);margin:0}}
@container (max-height:200px){.sky-caption{top:62%}.sky-caption h2{font-size:17px}}
.viewport:has(canvas)::before{transition:opacity .6s}
@container (max-height:330px){.viewport::before{display:none}}
@media(max-height:560px){
  header{padding-top:5px;font-size:8px}
  .heading{margin-bottom:-40px;padding-top:4px}.heading .eyebrow,.heading>p{display:none}.heading h1{font-size:clamp(22px,4.4vw,32px)}
  .viewport{min-height:120px}
  .controls{margin:-12px auto 3px;padding:5px 8px 7px}.controls>p{display:none}
  .actions button,.settings button,.settings select{min-height:34px;padding:6px 12px}
  .settings{margin-top:4px;gap:6px}
  .atlas{flex-basis:54px;min-height:36px;padding-top:8px}.atlas>p{display:none}.atlas h2{font-size:17px}.atlas::before{display:none}.atlas li{min-height:34px;padding:6px}
  #status{min-height:0;margin:2px auto;font-size:11px;line-height:1.35}footer{display:none}
}
@media(max-height:400px){
  .heading{margin-bottom:-28px}.heading h1{font-size:22px}
  .viewport{min-height:110px}
  .controls{margin:-8px 6px 2px;padding:4px 6px 5px}
  .actions{display:flex;gap:6px}.actions button{min-width:0;flex:1;font-size:12px}
  .settings{flex-wrap:nowrap}.settings label{font-size:0;gap:0}.settings select{font-size:12px}
  .settings button,.settings select{padding:5px 9px;font-size:12px}
  .atlas{flex-basis:44px}.atlas-heading h2{font-size:15px}
}
@media(max-height:400px) and (max-width:360px){
  header .eyebrow{display:none}header{justify-content:flex-end}
  .heading{display:none}
  .actions button{font-size:11px;padding:5px 6px}
  .settings{gap:4px}.settings button,.settings select{font-size:11px;padding:4px 6px;min-height:32px}
  #status{font-size:10px}
}
.viewport[data-light=blue]::after{background:linear-gradient(180deg,#0d1834a6,transparent 34%,transparent 70%,#05091640)}
.heading:has(+ .viewport[data-light=blue]) .eyebrow{color:color-mix(in srgb,var(--zc-cloud-glass) 78%,transparent)}
/* The atlas scrolls inside a fixed band: fade its lower edge so cut-off cards read as "more below", not as a clipping bug. */
.atlas{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent);padding-bottom:22px}