/*
 * Signal weather occupies the air, with one fixed view from top to bottom. The canvas is as tall
 * as the largest viewport (lvh), so a phone's toolbar sliding in and out as you scroll never
 * resizes it: a resize would blank the canvas and start the flow over.
 */
.atmospheric body { isolation: isolate; }
.atmosphere-preview body { padding-bottom: 74px; }
.atmospheric .ink-bed {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: 100lvh; min-height: 100%; z-index: -1;
  background: radial-gradient(ellipse at 80% 40%, #34542380, #0b0c0b 75%);
}
.atmospheric .ink.unavailable { display: none; }
.pollen-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.experiment-dock {
  position: fixed; z-index: 20; inset: auto 24px 18px; display: flex; align-items: center; gap: 22px;
  padding: 12px 18px; border: 1px solid #ffffff29; border-radius: 14px;
  background: #10170fe8; backdrop-filter: blur(24px); box-shadow: 0 8px 35px #0007;
  font-family: var(--mono); font-size: 10px; color: #c0cdbb; letter-spacing: .02em;
}
.lab-back { padding-right: 22px; border-right: 1px solid #ffffff26; }
.lab-title { font-size: 11px; color: var(--ink); }
.lab-title b { margin-right: 8px; font-weight: 500; color: var(--accent); }
.experiment-dock nav { display: flex; align-items: center; gap: 6px; }
.experiment-dock nav a { padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; }
.experiment-dock nav a:hover { background: #ffffff10; }
.experiment-dock nav [aria-current] { color: var(--accent); background: #ceff3210; border-color: #ceff3233; }
.lab-scroll { margin-left: auto; }
.lab-scroll i { font-size: 17px; font-style: normal; margin-left: 12px; color: var(--accent); }
.lab-meter { display: block; position: absolute; bottom: 0; left: 12px; right: 12px; height: 1px; background: #ffffff0a; overflow: hidden; }
.lab-meter::after { content: ""; display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--journey, 0)); transform-origin: left; }
@media(max-width: 760px) {
  .experiment-dock { inset: auto 10px 10px; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
  .lab-back { padding-right: 12px; font-size: 9px; }
  .lab-title { margin-right: auto; font-size: 10px; }
  .lab-scroll { display: none; }
  .experiment-dock nav { gap: 0; }
  .experiment-dock nav a { padding: 6px; }
}