:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #192e43; background: #f2f5f8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
.eyebrow { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: #536b82; }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.03em; margin: 12px 0; line-height: 1.12; }
.intro { font-size: 1.1rem; color: #536b82; }
.panel { margin-top: 24px; padding: 24px 28px; background: white; border: 1px solid #d7e1ea; border-radius: 14px; }
h2 { margin-top: 0; font-size: 1.2rem; }
p, footer, details, li { line-height: 1.6; }
.grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; }
.grid label { font-weight: 600; }
input, select { font: inherit; padding: 7px 9px; border: 1px solid #b9c8d6; border-radius: 6px; }
#object, #ra, #dec { width: 11.5em; }
#fov, #maxmag { width: 7em; }
label.inline { font-weight: 600; }
.lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
button.small { padding: 7px 12px; }
.hint, footer { color: #536b82; font-size: .88rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
button, .download { display: inline-block; border: 1px solid #174f77; border-radius: 7px; padding: 10px 16px; background: #174f77; color: white; font: inherit; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { background: white; color: #174f77; }
:focus-visible { outline: 3px solid #e7a840; outline-offset: 3px; }
#error { color: #9a2323; font-weight: 600; }
#progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: -0.25rem 0 0.75rem; }
#progress-bar { width: min(100%, 16rem); height: 0.75rem; accent-color: #2b5797; }
#progress-text { color: #4a5560; font-size: 0.9rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.notes { color: #8a5a00; margin: 0 0 12px; }
/* The picture never gets taller than the screen, so it and its controls can be seen together:
   beside it on wide screens (controls stay in view while scrolling), below it on narrow ones,
   where the picture leaves room for the controls (~290px). */
.viewer { display: grid; gap: 16px 20px; align-items: start; }
.sky-frame { position: relative; justify-self: center; width: min(100%, calc(100svh - 290px)); }
#sky { display: block; width: 100%; height: auto; aspect-ratio: 1; background: black; border-radius: 6px; }
/* Full screen: an icon on the picture's corner, like a video player's. Light on a dark,
   translucent square, so it shows on the black sky and on bright stars alike. */
.icon-button { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px;
               padding: 0; color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .45);
               border-radius: 8px; }
.icon-button:hover { background: rgba(0, 0, 0, .85); }
/* Reset sits apart, below the downloads, and asks first (#reset-confirm). */
.reset-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid #d7e1ea; }
dialog { max-width: min(26rem, calc(100vw - 32px)); padding: 20px 22px; color: #192e43; background: white;
         border: 1px solid #d7e1ea; border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 20, 30, .25); }
dialog::backdrop { background: rgba(10, 20, 30, .45); }
dialog h3 { margin: 0 0 8px; font-size: 1.1rem; }
dialog p { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.controls .actions { margin-top: 12px; }
.exit { display: none; }
/* Full screen: the picture and its controls take the whole window (the browser's own full screen
   too, where allowed). The Exit button has its own band at the top, so it never covers the picture.
   Neutral black around the picture (a tinted surround shifts how faint stars and the sky's black
   look) and a dark controls panel (a bright one beside the picture hampers seeing faint stars).
   Text meets WCAG AA contrast (tested). */
.viewer.fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 56px 16px 16px;
                     background: #000; grid-template-columns: minmax(0, 1fr) 260px; overflow: auto; }
.viewer.fullscreen .sky-frame { width: min(100%, calc(100dvh - 72px)); }
.viewer.fullscreen .controls { position: static; background: #16191d; color: #e6edf3; border: 1px solid #2c3238;
                               border-radius: 10px; padding: 14px; }
.viewer.fullscreen .controls output, .viewer.fullscreen .controls .credit { color: #aab6c2; }
.viewer.fullscreen .controls a:not(.download) { color: #8ab4f8; }
.viewer.fullscreen .controls .secondary, .viewer.fullscreen .exit, .viewer.fullscreen dialog .secondary {
  background: #22272e; color: #e6edf3; border-color: #3d444d; }
.viewer.fullscreen .exit { display: inline-block; position: fixed; top: 10px; right: 16px; z-index: 1001; padding: 7px 14px; }
.viewer.fullscreen .exit .key { color: #aab6c2; font-size: .85em; }
.viewer.fullscreen #fullscreen, .viewer.fullscreen .controls .hint { display: none; }  /* redundant here */
.viewer.fullscreen .reset-row { border-top-color: #2c3238; }
.viewer.fullscreen dialog { color: #e6edf3; background: #16191d; border-color: #3d444d; }
.viewer.fullscreen dialog::backdrop { background: rgba(0, 0, 0, .6); }
body.no-scroll { overflow: hidden; }
@media (max-aspect-ratio: 1/1) {
  .viewer.fullscreen { grid-template-columns: 1fr; }
  .viewer.fullscreen .sky-frame { width: min(100%, calc(100dvh - 72px - 330px)); }
}
.controls .hint, .controls .credit { margin: 10px 0 0; }
@media (min-width: 880px) {
  .viewer { grid-template-columns: minmax(0, 1fr) 260px; }
  .sky-frame { width: min(100%, calc(100svh - 32px)); }
  .controls { position: sticky; top: 16px; }
}
/* label + value on one row, slider below. The value has its own fixed-width column (widest:
   "59047.00"), so changing numbers never move the sliders under the pointer. */
.sliders { display: grid; grid-template-columns: 1fr 9ch; gap: 2px 12px; align-items: center; }
.sliders input { grid-column: 1 / -1; margin-bottom: 6px; }
.sliders label { font-size: .92rem; }
.sliders output { color: #536b82; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; }
.sliders input { width: 100%; padding: 0; border: 0; }
#hr { display: block; width: 100%; height: auto; margin-top: 18px; border-radius: 6px; background: black; }
/* HR Diagram of Your Own Image: a picture of any shape, and its diagrams. */
.picture-frame { position: relative; justify-self: center; width: fit-content; max-width: 100%; }
#picture { display: block; max-width: 100%; max-height: calc(100svh - 32px); width: auto; height: auto;
  margin: 0 auto; background: black; border-radius: 6px; }
/* Full screen (same treatment as Show Clusters): the picture as tall as the window allows. */
.viewer.fullscreen .picture-frame { justify-self: center; }
.viewer.fullscreen #picture { max-height: calc(100dvh - 72px); }
@media (max-aspect-ratio: 1/1) { .viewer.fullscreen #picture { max-height: calc(100dvh - 72px - 330px); } }
#diagram { display: block; width: 100%; max-width: 1000px; height: auto; margin-top: 18px; border-radius: 6px;
  background: black; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; background: #f5f8fb; padding: 12px; border-radius: 6px; }
summary { cursor: pointer; font-weight: 600; }
details label { display: block; font-weight: 600; margin: 16px 0 8px; }
footer { margin-top: 28px; }
.site-version { margin-top: 10px; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  main { padding: 24px 16px; }
  .panel { padding: 18px; }
  .grid { grid-template-columns: 1fr; }
}
.credit { color: #536b82; font-size: .82rem; margin: 10px 0 0; }
.upload { margin-top: 16px; padding-top: 12px; border-top: 1px solid #d7e1ea; }
.placeholder { color: #536b82; font-style: italic; margin: 0; }
.feature { border-color: #174f77; }
.badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #e3eef7; color: #174f77; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.tools { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; }
.tools dt { font-weight: 600; }
.tools dd { margin: 0; }
@media (max-width: 600px) { .tools { grid-template-columns: 1fr; } }
.eyebrow a { color: inherit; }