.mrl-phone { position:relative; margin:0 auto; max-width:436px; }

.mrl-phone > img.mrl-phone__shell { display:block; width:436px; max-width:100%; height:auto; max-height:none; }
.mrl-phone__screen { position:absolute; inset:0;
  -webkit-mask-image:url(/home/iphone-circle-mask.png); mask-image:url(/home/iphone-circle-mask.png);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.mrl-phone svg { width:100%; height:100%; display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
/* Residents, a resident, a dose marked Given, and back to Residents, where it starts over. */
.mrl-phone .v, .mrl-phone .due, .mrl-phone .done, .mrl-phone .pg, .mrl-phone .cx, .mrl-phone .cy, .mrl-phone .press, .mrl-phone .ring { animation-duration:12.6s; animation-iteration-count:infinite; animation-fill-mode:both; }
.mrl-phone .v1 { animation-name:hp-v1; }
.mrl-phone .v2 { animation-name:hp-v2; }
.mrl-phone .due { animation-name:hp-due; }
.mrl-phone .done { animation-name:hp-done; }
.mrl-phone .pg { animation-name:hp-pg; }
.mrl-phone .cx { animation-name:hp-cx; }
.mrl-phone .cy { animation-name:hp-cy; }
.mrl-phone .press, .mrl-phone .ring { transform-box:fill-box; transform-origin:center; }
.mrl-phone .press { animation-name:hp-press; }
.mrl-phone .ring { animation-name:hp-ring; }
@keyframes hp-v1{0%{opacity:1}24.603%{opacity:1}26.984%{opacity:0}97.619%{opacity:0}100%{opacity:1}}
@keyframes hp-v2{0%{opacity:0}24.603%{opacity:0}26.984%{opacity:1}97.619%{opacity:1}100%{opacity:0}}
@keyframes hp-due{0%{opacity:1}61.111%{opacity:1}63.492%{opacity:0}99.921%{opacity:0}100%{opacity:1}}
@keyframes hp-done{0%{opacity:0}61.111%{opacity:0}63.492%{opacity:1}99.921%{opacity:1}100%{opacity:0}}
@keyframes hp-pg{0%{transform:translateY(0)}42.857%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}52.381%{transform:translateY(-100px)}79.365%{transform:translateY(-100px);animation-timing-function:cubic-bezier(.4,0,.2,1)}88.889%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes hp-cx{0%{transform:translateX(196px)}15.873%{transform:translateX(196px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}22.222%{transform:translateX(436px)}52.381%{transform:translateX(436px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}58.730%{transform:translateX(215px)}88.889%{transform:translateX(215px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}95.238%{transform:translateX(196px)}100%{transform:translateX(196px)}}
@keyframes hp-cy{0%{transform:translateY(224px)}15.873%{transform:translateY(224px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}22.222%{transform:translateY(395px)}52.381%{transform:translateY(395px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}58.730%{transform:translateY(822px)}88.889%{transform:translateY(822px);animation-timing-function:cubic-bezier(.45,.05,.35,1)}95.238%{transform:translateY(224px)}100%{transform:translateY(224px)}}
@keyframes hp-press{0%{transform:scale(1)}23.016%{transform:scale(1)}23.968%{transform:scale(0.74)}25.397%{transform:scale(1)}59.524%{transform:scale(1)}60.476%{transform:scale(0.74)}61.905%{transform:scale(1)}96.032%{transform:scale(1)}96.984%{transform:scale(0.74)}98.413%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes hp-ring{0%{opacity:0;transform:scale(0.55)}23.016%{opacity:0;transform:scale(0.55)}23.175%{opacity:0.5;transform:scale(0.55)}27.778%{opacity:0;transform:scale(1.9)}59.524%{opacity:0;transform:scale(0.55)}59.683%{opacity:0.5;transform:scale(0.55)}64.286%{opacity:0;transform:scale(1.9)}96.032%{opacity:0;transform:scale(0.55)}96.190%{opacity:0.5;transform:scale(0.55)}100.794%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}

@media (prefers-reduced-motion: reduce) {
  .mrl-phone .v, .mrl-phone .due, .mrl-phone .done, .mrl-phone .pg, .mrl-phone .cx, .mrl-phone .cy,
  .mrl-phone .press, .mrl-phone .ring { animation:none; }
  .mrl-phone .v2, .mrl-phone .cursor { display:none; }
}