/* Miri, the app's mark (the doctor, 2026-11-02). She starts where Android's splash leaves her — in the
   middle, 146.67px (the splash icon: 66dp of 108 at 240dp) — crouches, hops up bigger as the name comes
   in, lands, blinks, and the welcome fades into the app. Loaded before the application bundle. */
#app-welcome {
  /* The large viewport: Chrome first lays the page out shorter (its bar not yet hidden), and Miri must
     not jump when it grows. */
  position:fixed; inset:0 0 auto; height:100lvh; z-index:10000; overflow:hidden;
  background:#5b4be0; color:#fff5de; text-align:center;
  font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
#app-welcome .miri { position:absolute; left:50%; top:50%; width:146.67px; height:146.67px; margin:-73.33px 0 0 -73.33px; }
#app-welcome .miri-pose { position:absolute; inset:0; transform-origin:50% 90%; }
#app-welcome .miri img { position:absolute; inset:0; width:100%; height:100%; }
#app-welcome .miri-blink { opacity:0; }
/* Under her once she has hopped up; hidden till then, as on the splash. */
#app-welcome .welcome-words { position:absolute; left:24px; right:24px; top:calc(50% + 70px); }
#app-welcome .welcome-name { font-size:27px; font-weight:650; letter-spacing:-.7px; line-height:1.2; margin:0 0 8px; opacity:0; }
#app-welcome .welcome-sub { font-size:13px; color:#e0d9ff; line-height:1.5; margin:0; opacity:0; }
#app-welcome.playing { animation:welcome-out .2s .92s ease-in both; }
#app-welcome.playing .miri { animation:miri-up .52s .08s cubic-bezier(.3,1.45,.5,1) both; }
#app-welcome.playing .miri-pose { animation:miri-hop .64s ease-in-out both; }
#app-welcome.playing .miri-blink { animation:miri-blink 1.1s linear both; }
#app-welcome.playing .welcome-name { animation:words-in .45s .22s cubic-bezier(.2,.8,.3,1) both; }
#app-welcome.playing .welcome-sub { animation:words-in .45s .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes miri-up { to { transform:translateY(-52px) scale(1.36); } }
/* Crouch, stretch on the way up, squash on landing, settle. */
@keyframes miri-hop {
  0% { transform:none; }
  13% { transform:scale(1.07,.9); }
  44% { transform:scale(.95,1.07) rotate(-3deg); }
  69% { transform:scale(1.04,.96) rotate(2deg); }
  85% { transform:scale(.99,1.01) rotate(-.6deg); }
  100% { transform:none; }
}
@keyframes miri-blink { 0%,58%,74%,100% { opacity:0; } 61%,71% { opacity:1; } }
@keyframes words-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes welcome-out { to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  #app-welcome *,#app-welcome.playing,#app-welcome.playing * { animation:none!important; }
}