/* The splash screen, written by development/plans/splash-rollout/launch.mjs: edit there, not here.
   The pre-paint script turns it on in the installed app (or with ?splash) and takes it away. It starts
   as the launch image left off: the mark, 120 pt, in the middle of the screen on the system's page
   colour (iOS picks the launch image by the system's appearance, not the app's saved theme). Then
   the mark makes its move, a glint crosses, and the splash fades into the app. Longhands only:
   Vite's minifier turns an animation shorthand without a name into `animation: none`. The mark's
   <svg> is 0 × 0 in the markup, so without this style (offline, a blocked file) nothing shows. */
#splash { display: none; }
.splash #splash { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: #09090b; touch-action: none; }
@media (prefers-color-scheme: light) { .splash #splash { background: #f5f4f1; } }
#splash svg { width: 120px; height: 120px; translate: 0 calc(-1 * var(--splash-lift, 0px)); }
#splash :where(g[class], .trace) { transform-box: view-box; animation-duration: 560ms; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); animation-delay: 60ms; animation-fill-mode: both; }
#splash .gl { animation-name: splash-glint; animation-duration: 640ms; }
@keyframes splash-glint { to { transform: translateX(2000px); } }
#splash .st0 { transform-origin:422px 242px; --d:49ms }
#splash .st1 { transform-origin:512px 242px; --d:76ms }
#splash .st2 { transform-origin:602px 242px; --d:103ms }
#splash .st3 { transform-origin:332px 332px; --d:49ms }
#splash .st4 { transform-origin:692px 332px; --d:157ms }
#splash .st5 { transform-origin:242px 422px; --d:49ms }
#splash .st6 { transform-origin:782px 422px; --d:211ms }
#splash .st7 { transform-origin:242px 512px; --d:76ms }
#splash .st8 { transform-origin:332px 512px; --d:103ms }
#splash .st9 { transform-origin:422px 512px; --d:130ms }
#splash .st10 { transform-origin:512px 512px; --d:157ms }
#splash .st11 { transform-origin:602px 512px; --d:184ms }
#splash .st12 { transform-origin:692px 512px; --d:211ms }
#splash .st13 { transform-origin:782px 512px; --d:238ms }
#splash .st14 { transform-origin:242px 602px; --d:103ms }
#splash .st15 { transform-origin:332px 692px; --d:157ms }
#splash .st16 { transform-origin:422px 782px; --d:211ms }
#splash .st17 { transform-origin:512px 782px; --d:238ms }
#splash .st18 { transform-origin:602px 782px; --d:265ms }
#splash .st19 { transform-origin:692px 782px; --d:292ms }
#splash .dt { animation-name: splash-ew-d; animation-duration: 420ms; animation-delay: calc((60ms + var(--d))); }
@keyframes splash-ew-d { 40% { transform: scale(1.25); } }
.splash-out #splash { opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.splash-out #splash svg { scale: 1.08; transition: scale 320ms cubic-bezier(0.3, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  #splash :where(g[class], .trace) { animation: none; }
  .splash-out #splash { transition-duration: 200ms; }
  .splash-out #splash svg { scale: none; }
}