/*
 * $UNRLZD loading screen: the dot wordmark, lit by one light that breathes (opacity only).
 * Claude Design handoff c4e910f4 (design/handoff-dot-logo, README "Loading screen"), moved out of
 * inline <style> because the production CSP is style-src 'self'. The markup sits inside #root in
 * index.html; React's first render replaces it, no script involved. design/OVERRIDES.md "Dot logo".
 */
html,
body {
  margin: 0;
  background: #0a0a0a;
}
/* #root is zoomed by --fit-zoom (lib/fit.ts) as soon as the bundle runs: draw the splash at 1 */
.splash {
  zoom: calc(1 / var(--fit-zoom, 1));
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: #0a0a0a;
}
.splash-mark {
  position: relative;
  width: clamp(373px, 40vw, 600px);
  aspect-ratio: 87.97 / 19.1;
}
.splash-mark picture,
.splash-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.splash-lit {
  animation: splash-breathe 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes splash-breathe {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-lit {
    animation: none;
    opacity: 1;
  }
}
/*
 * Size switch (README: the dots need >= 3 device px to stay round). index.html's <picture> sources
 * already serve the dot layers only from 1.5 dppx up and the solid kit wordmark below it; here the
 * 1x box takes the solid wordmark's own size and aspect, and its second (lit) layer is not drawn.
 */
@media (max-resolution: 1.5dppx) {
  .splash-mark .splash-lit {
    display: none;
  }
  .splash-mark {
    width: clamp(240px, 40vw, 600px);
    aspect-ratio: 86.77 / 17.9;
  }
}
@media (min-resolution: 1.5dppx) and (max-width: 420px) {
  .splash-mark {
    width: min(92vw, 373px);
  }
}