:root {
  --bg: #0d1117;
  --panel: #161b22;
  --line: #2a313c;
  --text: #e6e9ef;
  --muted: #8b95a5;
  --accent: #7cb7ff;
  --sky-sun: #ffd479;
  --sky-moon: #e4ebf7;
  --sky-planet: #ffb98a;
  --sky-star: #c9d4e6;
  --sky-helicopter: #ff9c8a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1rem; color: var(--muted); margin: 1.5rem 0 .5rem; }
[hidden] { display: none !important; }

header.site {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  align-items: baseline;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.2rem; color: var(--text); }
header nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.account { margin-left: auto; }
.account form { margin: 0; }
.alert { color: #ff9b8e; margin: 0 0 .75rem; }

.signin { display: grid; gap: .75rem; max-width: 320px; }
.signin input {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .4rem .6rem;
}

main { max-width: 1400px; margin: 0 auto; padding: 1rem; }

.hero, .stage img { display: block; width: 100%; height: auto; border-radius: 6px; background: #000 center / cover; }
.stage { aspect-ratio: 16 / 9; }
picture { display: contents; }     /* the photo inside lays out as if it were bare */

.player { position: relative; container-type: inline-size; }
.player:fullscreen { background: #000; }
.player:fullscreen .hero { height: 100%; border-radius: 0; }

/* A paused frame's JXL, over the video at the same size. Nothing can go under the video's own
   controls, so it fades out above them, and clicks go through it to them. */
.player .still {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5rem), transparent calc(100% - 2.5rem));
}
.player .still img { display: block; width: 100%; height: 100%; object-fit: contain; }
.player:fullscreen .still { border-radius: 0; }
.player .skip {
  position: absolute; top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none;
  padding: .4em .9em; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 1.1rem;
}
.player .skip[data-side=back] { left: 15%; }
.player .skip[data-side=on] { right: 15%; }
.player .clock {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .1rem .5rem;
  border-radius: 4px;
  background: rgb(0 0 0 / .55);
  font-variant-numeric: tabular-nums;
}
.player:has(.overlay:not([hidden])) .clock { display: none; }

.player-buttons { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; }
.player-buttons button {
  font: inherit;
  font-size: .75rem;
  color: var(--text);
  background: rgb(0 0 0 / .55);
  border: 0;
  border-radius: 4px;
  padding: .1rem .5rem;
  cursor: pointer;
}
.player-buttons button[aria-pressed="false"] { color: var(--muted); }

/* What's in the home page's photo. Lines are in frame pixels so they stay on the sky, and labels are
   in the page's own sizes so they stay readable. A phone keeps the names that matter. */
.view { position: relative; }
.sky { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; pointer-events: none; font-size: clamp(10px, 1cqw, 14px); line-height: 1.25; }
.sky svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgb(0 0 0 / .9)); }
.sky polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sky .pass { stroke-width: 2; stroke-dasharray: 1 6; }
.sky .pass.gone { stroke-width: 1; stroke-opacity: .7; stroke-dasharray: none; }
.sky .pass.sun { stroke: var(--sky-sun); }
.sky .pass.moon { stroke: var(--sky-moon); }
.sky .route { stroke: var(--accent); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 6 5; }
.sky .streak { stroke: var(--accent); stroke-width: 2; }
.sky .route.helicopter, .sky .streak.helicopter { stroke: var(--sky-helicopter); }

.mark { position: absolute; color: var(--sky-star); --ring: .7em; }
.mark.plane { color: var(--accent); --ring: 2em; }
.mark.helicopter { color: var(--sky-helicopter); --ring: 2em; }
.mark.planet { color: var(--sky-planet); --ring: 1.3em; }
.mark.moon { color: var(--sky-moon); --ring: 2em; }
.mark.sun { color: var(--sky-sun); --ring: 2.6em; }
.mark::before {
  content: "";
  position: absolute;
  left: calc(var(--ring) / -2);
  top: calc(var(--ring) / -2);
  width: var(--ring);
  height: var(--ring);
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(0 0 0 / .55);
}
.mark.hour { --ring: .45em; }
.mark.hour.sun { color: var(--sky-sun); }
.mark.hour.moon { color: var(--sky-moon); }
.mark.hour::before { background: currentcolor; }
.mark-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: .05em .4em;
  border-radius: 3px;
  background: rgb(0 0 0 / .55);
  white-space: nowrap;
}
.mark-label b { font-weight: 600; }
.mark-label small { font-size: .85em; color: #fff; }
.mark.star .mark-label, .mark.hour .mark-label { padding: 0 .25em; background: rgb(0 0 0 / .5); font-size: .85em; }
.mark.star .mark-label b, .mark.hour .mark-label b { font-weight: 400; }
.mark.right .mark-label { left: calc(var(--ring) / 2 + .35em); transform: translateY(-50%); }
.mark.left .mark-label { right: calc(var(--ring) / 2 + .35em); transform: translateY(-50%); }
.mark.above .mark-label { bottom: calc(var(--ring) / 2 + .35em); transform: translateX(-50%); }
.mark.below .mark-label { top: calc(var(--ring) / 2 + .35em); transform: translateX(-50%); }
.sky-credit {
  position: absolute;
  right: .4em;
  bottom: .3em;
  max-width: calc(100% - .8em);
  padding: 0 .35em;
  border-radius: 3px;
  background: rgb(0 0 0 / .45);
  font-size: .75em;
  color: rgb(255 255 255 / .8);
  pointer-events: auto;
}
@container (max-width: 640px) {
  .mark.star .mark-label, .mark.hour .mark-label, .mark-label small { display: none; }
}

/* The overlay. --u is one unit of the design, which sits at three quarters size on a 1280-wide
   player: everything scales with the player, so it covers the same part of the picture at any size.
   It sits above the video's own controls, and clicks go through it to them. */
.overlay {
  --u: calc(100cqw / 1707);
  --accent: #f0592a;
  --faint: rgb(255 255 255 / .72);
  position: absolute;
  left: calc(32 * var(--u));
  bottom: max(calc(32 * var(--u)), 3.25rem);
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgb(20 20 22 / .7);
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .25);
  color: #fff;
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.overlay svg { display: block; overflow: visible; }
.overlay text { text-anchor: middle; fill: #fff; }
.overlay-rule { width: calc(1 * var(--u)); align-self: stretch; background: rgb(255 255 255 / .16); }
.overlay-label { font-size: 1em; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--faint); }

.overlay-dial { display: flex; flex-direction: column; align-items: center; gap: .2em; font-size: 1.1em; color: var(--faint); }
.overlay-dial svg { width: calc(200 * var(--u)); }
.overlay .night { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 8; }
.overlay .daylight { fill: none; stroke: var(--accent); stroke-width: 8; opacity: .85; }
.overlay .ray { stroke: rgb(255 255 255 / .75); stroke-width: 1.4; stroke-linecap: round; }
.overlay .ray-time { font-size: 9px; fill: var(--faint); }
.overlay .sun { fill: #fff; stroke: #141416; stroke-width: 1.5; }
.overlay .sun.down { fill: #8a8a90; }
.overlay .sun-glow { fill: var(--accent); opacity: .3; }
.overlay .sun-glow.down { opacity: 0; }
.overlay .time { font-size: 28px; font-weight: 300; }
.overlay .date { font-size: 9.5px; font-weight: 600; letter-spacing: 1px; fill: rgb(255 255 255 / .78); }

/* A fixed width, or the panel would change size each time the trend's words do. */
.overlay-barometer { display: flex; flex-direction: column; align-items: center; gap: .4em; width: calc(140 * var(--u)); }
.overlay-barometer svg { width: calc(120 * var(--u)); }
.overlay-barometer .overlay-label { font-size: 1.1em; letter-spacing: .02em; text-transform: none; }
.overlay-barometer .overlay-axis { width: calc(120 * var(--u)); }
.overlay .scale { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 1.4; }
.overlay .tick { stroke: rgb(255 255 255 / .6); stroke-width: 1.4; }
.overlay .scale-label { font-size: 8px; fill: rgb(255 255 255 / .66); }
.overlay .needle { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.overlay .ghost { stroke: rgb(255 255 255 / .35); stroke-width: 1; stroke-dasharray: 2 2; }
.overlay .pivot { fill: #fff; }
.overlay .pressure { font-size: 15px; }

.overlay-temps { display: flex; flex-direction: column; gap: .6em; width: calc(350 * var(--u)); }
.overlay-temps svg { width: 100%; }
.overlay-values { display: flex; align-items: center; gap: .5em; }
.overlay-values .key { width: 1.2em; height: .3em; border-radius: 999px; background: #fff; }
.overlay-values .key.roof { background: var(--accent); }
.overlay-values .value { font-size: 1.7em; line-height: 1; margin-right: .2em; white-space: nowrap; }
.overlay-values .value.small { font-size: 1.3em; margin-right: 0; color: rgb(255 255 255 / .85); }
.overlay-values .cpu { margin-left: auto; }
.overlay polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.overlay .roof-day { stroke: var(--accent); stroke-opacity: .25; stroke-width: 1.2; }
.overlay .outside-day { stroke: rgb(255 255 255 / .22); stroke-width: 1.2; }
.overlay .roof-so-far { stroke: var(--accent); stroke-width: 1.8; }
.overlay .outside-so-far { stroke: #fff; stroke-width: 1.8; }
.overlay .pressure-day { stroke: var(--accent); stroke-opacity: .25; stroke-width: 1.2; }
.overlay .pressure-so-far { stroke: var(--accent); stroke-width: 1.8; }
.overlay .pressure-now { fill: var(--accent); }
.overlay .head { stroke: rgb(255 255 255 / .3); }
.overlay .roof-now { fill: var(--accent); }
.overlay .outside-now { fill: #fff; }
.overlay-axis { display: flex; justify-content: space-between; letter-spacing: .06em; color: rgb(255 255 255 / .66); }

/* On a small player the whole panel would be too small to read, so it's the dial alone. */
@container (max-width: 900px) {
  .overlay { --u: min(calc(100cqw / 760), .6px); left: calc(16 * var(--u)); }
  .overlay-rule, .overlay-barometer, .overlay-temps, .overlay-dial div, .overlay .ray-time { display: none; }
}

.readings { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .75rem 0; }
.readings dt { color: var(--muted); font-size: .8rem; }
.readings dd { margin: 0; font-variant-numeric: tabular-nums; }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: .75rem 0; }
.bar form { margin: 0; }
.kept, .notice { color: #7ee2a8; }
.notice { margin: 0 0 .75rem; }

button, select, .button {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .3rem .75rem;
}
button { cursor: pointer; }
button:hover, .button[href]:hover { border-color: var(--accent); }
.button { display: inline-block; text-decoration: none; }     /* a link that looks like the buttons */
.button:hover { text-decoration: none; }
.button[aria-disabled] { color: var(--muted); border-color: transparent; }

/* The timelapse's buttons, and a frame's, close together. Play and Pause, and Copy link and Copied, take the same
   room, so the buttons beside them stay put. */
.transport { display: flex; gap: .25rem; }
.transport :is(button, .button) { white-space: nowrap; }
.transport [data-stream-target=playButton] { min-width: 5em; }
.bar .copy { min-width: 7.5em; }
/* A phone hasn't room for all five with their words, so the steps are arrows alone. */
@media (max-width: 480px) { .transport .word { display: none; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.grid.large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.strip a { flex: 0 0 170px; }
.grid img, .strip img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--panel); }
.grid span, .strip span { display: block; color: var(--muted); font-size: .8rem; padding-top: .1rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.list span { color: var(--muted); }