.role-switch {
  display: flex;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid #d8c99c99;
  border-radius: 999px;
  background: #0a2f38bc;
  letter-spacing: 0;
}

.role-switch button {
  min-height: 33px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d1ded9;
  font-size: 13px;
  white-space: nowrap;
}

.role-switch button[aria-pressed="true"] {
  background: #d1b47d;
  color: #123741;
  font-weight: 700;
}

.role-switch button:hover:not([aria-pressed="true"]) {
  background: #ffffff20;
}

.guide-intro {
  top: auto;
  right: 7%;
  bottom: 74px;
  left: 7%;
  padding: 12px 17px;
  border-left: 2px solid #d1b47d;
  background: linear-gradient(90deg, #092c36ec, #092c36b8);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.5;
}

.avatar.role-male {
  width: min(82%, 550px);
  aspect-ratio: 1024 / 1536;
}

.avatar.role-male .mouth {
  left: 50.3%;
  top: 10.3%;
  width: 2.5%;
  height: .75%;
}

.avatar.role-male .blink { top: 8.35%; }
.avatar.role-male .left-eye { left: 44.9%; }
.avatar.role-male .right-eye { left: 51.1%; }

@media (min-width: 761px) {
  .avatar { bottom: -32%; }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .avatar.role-male { width: min(100%, 450px); }
}

@media (max-width: 760px) {
  .role-switch button { min-height: 29px; padding: 4px 8px; font-size: 12px; }
  .avatar.role-male { width: min(70%, 350px); bottom: -47%; }
  .guide-intro { top: auto; bottom: 58px; font-size: 17px; }
}

@media (max-width: 480px) {
  .guide-kicker { gap: 7px; font-size: 12px; letter-spacing: .08em; }
  .guide-kicker .line { width: 15px; }
  .role-switch button { padding: 3px 7px; font-size: 11px; }
  .avatar.role-male { bottom: -54%; }
}