:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; }
.viewport { overflow: auto; height: calc(100svh - 56px); overscroll-behavior: contain; }
.sky { position: relative; width: 100%; margin-inline: auto; }
.sky > img { width: 100%; height: auto; display: block; }
.star { position: absolute; display: block; transform: translate(-50%, -50%); }
.star:hover, .star:focus-visible { outline: 2px solid #fff; background: #ffffff22; z-index: 1; }
.controls { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 16px; border-top: 1px solid #222; background: #0d0d0d; }
.controls > span { color: #aaa; font-size: 12px; }
.controls > div { display: flex; align-items: center; gap: 4px; }
button, .photo-toolbar a { font: inherit; font-size: 14px; color: inherit; border: 1px solid #444; border-radius: 4px; background: #171717; min-height: 44px; min-width: 44px; padding: 8px 12px; cursor: pointer; text-decoration: none; }
button:hover, .photo-toolbar a:hover { background: #303030; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, a:focus-visible, .viewport:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
output { min-width: 28px; text-align: center; font-size: 12px; }
#fit { font-size: 12px; }
dialog { padding: 12px; background: #111; border: 1px solid #444; border-radius: 4px; max-width: 96vw; max-height: 96svh; }
dialog::backdrop { background: #000d; }
.photo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
#photo { display: block; max-width: 88vw; max-height: calc(96svh - 94px); object-fit: contain; margin: auto; }
#photo-status { text-align: center; font-size: 14px; color: #aaa; }
#photo-status[hidden] { display: none; }
@media (max-width: 600px) {
  .controls { padding-inline: 10px; gap: 8px; }
  .controls > span { max-width: 135px; }
  #photo { max-width: 86vw; }
}