/* Crisp, unrotated text and native CSS shapes. */
.crisp-bubbles .wizard-aside-art{grid-template-rows:88px 184px 88px;gap:22px 18px}
.crisp-bubbles .wizard-aside-art .speech{
  display:grid;place-items:center;max-width:214px;width:100%;height:100%;
  background:#fff;color:#163c29;padding:12px 10px;
  font-size:15px;font-weight:800;line-height:1.65;letter-spacing:.01em;
  border:2px solid #102f20;transform:none;filter:none;text-shadow:none;
  box-shadow:none;isolation:isolate;overflow:visible;
}
.crisp-bubbles .wizard-aside-art .bubble-text{position:relative;z-index:1;transform:none}
.crisp-bubbles .wizard-aside-art .speech::after{
  content:'';position:absolute;width:14px;height:14px;
  background:#fff;transform:rotate(45deg);left:auto;right:auto;
  border:0;box-shadow:none;z-index:0;
}
.crisp-bubbles .wizard-aside-art :is(.s1,.s2)::after{
  top:auto;bottom:-9px;border-right:2px solid #102f20;border-bottom:2px solid #102f20;
}
.crisp-bubbles .wizard-aside-art :is(.s3,.s4)::after{
  bottom:auto;top:-9px;border-left:2px solid #102f20;border-top:2px solid #102f20;
}
.crisp-bubbles .wizard-aside-art :is(.s1,.s3)::after{right:24px}
.crisp-bubbles .wizard-aside-art :is(.s2,.s4)::after{left:24px}
.crisp-bubbles .wizard-aside-art.is-playing .speech{
  animation:crisp-bubble-appear .2s ease-out var(--bubble-delay) 1 both;
}
@keyframes crisp-bubble-appear{from{opacity:0}to{opacity:1}}
.bubble-option-01 .wizard-aside-art .speech{
  border:0;border-radius:0;background:transparent;
}
.bubble-option-01 .wizard-aside-art .speech::after{content:none}
.bubble-option-01 .speech .bubble-outline{stroke:#102f20;stroke-width:2px}
.bubble-option-02 .wizard-aside-art .speech{
  border:3px solid var(--yellow);border-radius:50%;padding:12px 15px;
}
.bubble-option-02 .wizard-aside-art .speech::after{
  width:12px;height:12px;background:#fff;border-color:var(--yellow);border-width:3px;
}
.bubble-option-02 .wizard-aside-art :is(.s1,.s2)::after{bottom:-6px}
.bubble-option-02 .wizard-aside-art :is(.s3,.s4)::after{top:-6px}
.bubble-option-02 .wizard-aside-art :is(.s1,.s3)::after{right:28px}
.bubble-option-02 .wizard-aside-art :is(.s2,.s4)::after{left:28px}
.bubble-option-03 .wizard-aside-art .speech{
  border:3px solid #102f20;border-radius:4px;box-shadow:5px 5px 0 var(--yellow);
}
.bubble-option-03 .wizard-aside-art .speech::after{border-width:3px}
.bubble-option-03 .wizard-aside-art :is(.s1,.s2)::after{bottom:-10px}
.bubble-option-03 .wizard-aside-art :is(.s3,.s4)::after{top:-10px}
@media(max-width:1050px) and (min-width:761px){
 .crisp-bubbles .wizard-aside-art{gap:22px 12px}
 .crisp-bubbles .wizard-aside-art .speech{font-size:13px;padding:10px 8px}
}
@media(max-width:760px){
 .crisp-bubbles .wizard-aside-art{grid-template-rows:84px 166px 84px;gap:20px 14px}
 .crisp-bubbles .wizard-aside-art .speech{font-size:13px;padding:10px 8px}
}
@media(max-width:360px){
 .crisp-bubbles .wizard-aside-art{gap:20px 12px}
 .crisp-bubbles .wizard-aside-art .speech{font-size:12px;padding:10px 6px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
 .crisp-bubbles .wizard-aside-art.is-playing .speech{animation:none!important;opacity:1}
}