/* Compiled from style-small.scss — sass css/style-small.scss css/style-small.css */
.sl [data-act] {
  touch-action: manipulation;
}
.sl [data-act]:focus-visible {
  outline: 3px solid #6fa7cb;
  outline-offset: 3px;
}
.sl-card {
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.sl-card:active {
  box-shadow: 0 0 0 4px rgba(32, 52, 104, 0.25) inset;
}
.se-patient:focus-visible {
  outline-offset: 6px;
}
.se-patient::after {
  content: 'Tap to follow';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  margin-inline: auto;
  width: max-content;
  padding: 0.4rem 1.4rem;
  border-radius: 999px;
  background: rgba(32, 52, 104, 0.08);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #203468;
  white-space: nowrap;
}
.se-patient.is-done::after {
  content: 'Tap to review';
}
.remote {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #f4f7fa;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #203468;
  user-select: none;
  -webkit-user-select: none;
}
.remote[hidden] {
  display: none;
}
.remote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(0.9);
  transform: scale(1.06);
  opacity: 0.55;
}
.remote__top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.4rem;
  background: #6fa7cb;
}
.remote__back {
  position: absolute;
  left: 4rem;
  top: 5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 5.6rem;
  padding: 0 2.6rem 0 2rem;
  border: 2px solid rgba(32, 52, 104, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #203468;
  cursor: pointer;
}
.remote__back svg {
  width: 2.4rem;
  height: 2.4rem;
}
.remote__photo {
  position: absolute;
  left: 0;
  right: 0;
  top: 9rem;
  width: 58rem;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 2.4rem 4rem rgba(32, 52, 104, 0.25));
}
.remote__name {
  position: absolute;
  left: 0;
  top: 62.4rem;
  width: 100%;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.1;
}
.remote__step {
  position: absolute;
  left: 0;
  top: 70.6rem;
  width: 100%;
  margin: 0;
  text-align: center;
  font-weight: 500;
  font-size: 2.4rem;
  color: rgba(32, 52, 104, 0.8);
}
.remote__step span {
  font-weight: 700;
  color: #203468;
}
.remote__dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 76.4rem;
  margin-inline: auto;
  width: max-content;
  display: flex;
  gap: 1rem;
}
.remote__dots i {
  width: 3.2rem;
  height: 0.8rem;
  border-radius: 1rem;
  background: rgba(32, 52, 104, 0.18);
  transition: background 0.3s ease, width 0.3s ease;
}
.remote__dots i.is-done {
  background: #6fa7cb;
}
.remote__dots i.is-now {
  width: 6rem;
  background: #203468;
}
.remote__arrows {
  position: absolute;
  left: 0;
  right: 0;
  top: 81rem;
  margin-inline: auto;
  width: max-content;
  display: flex;
  gap: 6rem;
}
.remote__arrow {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: 11rem;
  padding: 0 4.4rem;
  border: 0;
  border-radius: 999px;
  background: #203468;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1.6rem 3rem rgba(32, 52, 104, 0.3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.remote__arrow svg {
  width: 3.4rem;
  height: 3.4rem;
}
.remote__arrow:active {
  transform: scale(0.94);
  filter: brightness(1.2);
}
.remote__arrow:focus-visible {
  outline: 3px solid #6fa7cb;
  outline-offset: 4px;
}
.remote__arrow--prev {
  background: #fff;
  color: #203468;
  box-shadow: 0 1.2rem 2.4rem rgba(32, 52, 104, 0.16), inset 0 0 0 2px rgba(32, 52, 104, 0.2);
}
.remote__hint {
  position: absolute;
  right: 4rem;
  top: 5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.2rem 2.4rem;
  border-radius: 999px;
  background: #203468;
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}
.remote__hint svg {
  width: 2.6rem;
  height: 2.6rem;
}
.remote__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4.8rem;
  background: linear-gradient(90deg, #6fa7cb 0 13.4%, #fdbe4e 13.4% 26.9%, #52c1ae 26.9% 40.3%, #986fa0 40.3% 53.6%, #6c3078 53.6%);
}