.characterIntro{
  --intro-navy:#13213f;
  --intro-coral:#ef6674;
  --intro-gold:#ffd477;
  margin:38px 0 28px;
  overflow:hidden;
  border:1px solid #d8dfeb;
  border-radius:26px;
  background:#fff;
  box-shadow:0 22px 60px rgba(24,37,71,.14);
}

.characterIntroHeading{
  padding:22px 24px 17px;
  text-align:center;
  color:var(--intro-navy);
  background:linear-gradient(180deg,#fff,#fff9ee);
}

.characterIntroHeading span{
  color:#a14c57;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.characterIntroHeading h3{
  margin:5px 0 4px;
  font-family:Georgia,serif;
  font-size:clamp(28px,4vw,43px);
  line-height:1.05;
}

.characterIntroHeading p{margin:0;color:#657289;font-size:14px}

.characterIntroTheatre{
  position:relative;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 17%,rgba(255,239,178,.9),rgba(255,239,178,0) 38%),
    linear-gradient(180deg,#273961 0,#172544 62%,#10182c 100%);
}

.characterIntroTheatre::before{
  position:absolute;
  z-index:0;
  inset:0;
  content:"";
  opacity:.3;
  background-image:linear-gradient(90deg,transparent 49.6%,rgba(255,255,255,.06) 50%,transparent 50.4%);
  background-size:120px 100%;
}

.characterIntroCurtain{
  position:absolute;
  z-index:20;
  top:0;
  width:15%;
  height:100%;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,#661f33 0,#9f3049 20%,#58182b 43%,#9d3049 67%,#5a192c 100%);
  box-shadow:0 0 28px rgba(0,0,0,.38);
  transition:transform .9s ease;
}

.characterIntroCurtain::after{
  position:absolute;
  top:44%;
  width:27px;
  height:13px;
  content:"";
  border-radius:50%;
  background:#f3c868;
  box-shadow:0 0 0 5px rgba(105,66,21,.25);
}

.characterIntroCurtainLeft{left:0;border-radius:0 65% 8% 0}.characterIntroCurtainLeft::after{right:-7px}
.characterIntroCurtainRight{right:0;border-radius:65% 0 0 8%}.characterIntroCurtainRight::after{left:-7px}

.characterIntroLights{
  position:absolute;
  z-index:1;
  top:-20%;
  left:50%;
  width:58%;
  height:105%;
  transform:translateX(-50%);
  opacity:.65;
  pointer-events:none;
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  background:linear-gradient(90deg,transparent,rgba(255,244,197,.42),transparent);
  transition:width .7s ease,opacity .7s ease;
}

.characterIntroFloor{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  height:24%;
  border-top:1px solid rgba(255,219,148,.34);
  background:repeating-linear-gradient(94deg,#8d593c 0,#a8734c 8%,#70452f 16%);
  transform:perspective(460px) rotateX(48deg) scaleX(1.2);
  transform-origin:50% 100%;
}

.characterIntroCast{position:absolute;z-index:4;inset:24px 8% 118px}

.characterIntroPerson{
  --x:0%;
  --rise:0px;
  --scale:.75;
  position:absolute;
  bottom:var(--rise);
  left:var(--x);
  width:15.5%;
  height:74%;
  margin:0;
  transform:scale(var(--scale));
  transform-origin:50% 100%;
  transition:left .9s cubic-bezier(.2,.82,.2,1),bottom .9s cubic-bezier(.2,.82,.2,1),transform .9s cubic-bezier(.2,.82,.2,1),opacity .65s,filter .65s;
}

.characterIntroPerson img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 18px 12px rgba(0,0,0,.35));
}

.characterIntroPerson figcaption{
  position:absolute;
  bottom:-10px;
  left:50%;
  padding:5px 10px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  color:#1b2945;
  background:rgba(255,255,255,.92);
  box-shadow:0 5px 15px rgba(0,0,0,.18);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.introPos1{--x:0%;--rise:0px;--scale:.68}.introPos2{--x:12%;--rise:35px;--scale:.75}
.introPos3{--x:24%;--rise:76px;--scale:.82}.introPos4{--x:36%;--rise:116px;--scale:.9;z-index:7}
.introPos5{--x:49%;--rise:116px;--scale:.9;z-index:6}.introPos6{--x:62%;--rise:76px;--scale:.82}
.introPos7{--x:74%;--rise:35px;--scale:.75}.introPos8{--x:86%;--rise:0px;--scale:.68}

.characterIntroOpening{
  position:absolute;
  z-index:15;
  bottom:25px;
  left:50%;
  width:min(420px,80%);
  transform:translateX(-50%);
  text-align:center;
}

.characterIntroOpening p{margin:0 0 10px;color:#fcebd0;font-size:13px;font-weight:700}
.characterIntroStart{
  border:0;
  border-radius:999px;
  padding:14px 34px;
  color:#fff;
  background:linear-gradient(135deg,#f07a7e,#df445d);
  box-shadow:0 12px 30px rgba(224,54,83,.45);
  font-size:17px;
  font-weight:900;
  transition:transform .2s,box-shadow .2s;
}
.characterIntroStart:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(224,54,83,.55)}
.characterIntroStart span{margin-right:7px;font-size:11px}

.characterIntroDialog{
  position:absolute;
  z-index:18;
  right:4.5%;
  bottom:26px;
  width:min(570px,53%);
  padding:17px 19px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:22px;
  color:#24324d;
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 60px rgba(3,10,27,.48);
  animation:characterIntroRise .45s ease-out;
}

.characterIntroDialog header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.characterIntroAvatar{display:grid;width:37px;height:37px;place-items:center;border-radius:12px;color:#fff;background:var(--intro-coral);font-family:Georgia,serif;font-size:20px;font-weight:900}
.characterIntroDialog header strong,.characterIntroDialog header small{display:block}
.characterIntroDialog header strong{font-family:Georgia,serif;font-size:18px}.characterIntroDialog header small{margin-top:2px;color:#8993a6;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.characterIntroReplay{margin-left:auto;border:0;border-radius:10px;padding:8px 10px;color:#31537b;background:#eaf1f8;font-size:12px;font-weight:800}

.characterIntroTranscript{
  min-height:105px;
  max-height:166px;
  margin:0;
  overflow:auto;
  color:#3d4960;
  font-size:14px;
  line-height:1.68;
}

.characterIntroWord{opacity:0;transition:opacity .12s,color .12s,background .12s}
.characterIntroWord.is-visible{opacity:1}
.characterIntroWord.is-current{padding:1px 2px;border-radius:4px;color:#6c2331;background:#ffe1b7}
.characterIntroGap{white-space:pre-wrap}

.characterIntroAnswer{margin-top:13px;padding-top:12px;border-top:1px solid #e0e6ef}
.characterIntroAnswer label{color:#247578;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.characterIntroExample{display:inline;margin-left:8px;color:#758095;font-size:11px}
.characterIntroAnswer>div{display:flex;gap:8px;margin-top:8px}
.characterIntroAnswer input{min-width:0;flex:1;border:1.5px solid #cad5e5;border-radius:11px;padding:10px 12px;outline:none;color:#263650;background:#fbfdff}
.characterIntroAnswer input:focus{border-color:#299699;box-shadow:0 0 0 3px rgba(41,150,153,.14)}
.characterIntroAnswer button{border:0;border-radius:11px;font-weight:900}
.characterIntroMic{width:42px;background:#e5f5f2}.characterIntroMic.is-listening{color:#fff;background:#e15468;animation:characterIntroPulse .8s infinite alternate}
.characterIntroSubmit{padding:0 15px;color:#fff;background:#1d527c}.characterIntroSubmit span{margin-left:4px}
.characterIntroFeedback{min-height:18px;margin:7px 0 0;color:#c43e52;font-size:12px;font-weight:750}

.characterIntroComplete{
  position:absolute;
  z-index:18;
  bottom:28px;
  left:50%;
  width:min(430px,86%);
  padding:18px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px;
  text-align:center;
  color:#23364c;
  background:rgba(255,255,255,.95);
  box-shadow:0 18px 55px rgba(0,0,0,.4);
}
.characterIntroComplete>span{display:grid;width:38px;height:38px;margin:0 auto 7px;place-items:center;border-radius:50%;color:#fff;background:#23936f;font-weight:900}
.characterIntroComplete strong{font-family:Georgia,serif;font-size:20px}.characterIntroComplete p{margin:5px 0 11px;color:#6d798c;font-size:12px}
.characterIntroComplete button{border:0;border-radius:999px;padding:9px 15px;color:#244c70;background:#e7f0f7;font-size:12px;font-weight:850}

.characterIntroTheatre.is-speaking .characterIntroCurtainLeft{transform:translateX(-37%)}
.characterIntroTheatre.is-speaking .characterIntroCurtainRight{transform:translateX(37%)}
.characterIntroTheatre.is-speaking .characterIntroLights{width:42%;opacity:1}
.characterIntroTheatre.is-speaking .characterIntroPerson:not([data-character="busra"]){opacity:.28;filter:saturate(.55) brightness(.72);transform:scale(calc(var(--scale) * .78))}
.characterIntroTheatre.is-speaking .characterIntroPerson[data-character="busra"]{left:15%;bottom:-6px;z-index:12;transform:scale(1.24)}
.characterIntroTheatre.is-speaking .characterIntroPerson[data-character="busra"] figcaption{opacity:0}
.characterIntroTheatre.is-complete .characterIntroPerson{opacity:.75;filter:none}

@keyframes characterIntroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes characterIntroPulse{to{transform:scale(1.08)}}

@media(max-width:700px){
  .characterIntro{margin-top:28px;border-radius:20px}
  .characterIntroHeading{padding:18px 14px 14px}.characterIntroHeading h3{font-size:29px}.characterIntroHeading p{font-size:12px}
  .characterIntroTheatre{min-height:690px}
  .characterIntroCurtain{width:10%}
  .characterIntroCast{inset:15px 3% 225px}
  .characterIntroPerson{width:22%;height:58%}
  .introPos1{--x:-7%;--rise:0px;--scale:.58}.introPos2{--x:6%;--rise:25px;--scale:.64}
  .introPos3{--x:19%;--rise:49px;--scale:.7}.introPos4{--x:32%;--rise:75px;--scale:.77}
  .introPos5{--x:45%;--rise:75px;--scale:.77}.introPos6{--x:58%;--rise:49px;--scale:.7}
  .introPos7{--x:71%;--rise:25px;--scale:.64}.introPos8{--x:84%;--rise:0px;--scale:.58}
  .characterIntroPerson figcaption{bottom:-7px;padding:3px 6px;font-size:8px}
  .characterIntroTheatre.is-speaking .characterIntroPerson:not([data-character="busra"]){bottom:245px;opacity:.2;transform:scale(calc(var(--scale) * .7))}
  .characterIntroTheatre.is-speaking .characterIntroPerson[data-character="busra"]{left:35%;bottom:195px;width:30%;height:52%;transform:scale(1.16)}
  .characterIntroDialog{right:4%;bottom:13px;left:4%;width:auto;padding:14px;border-radius:18px}
  .characterIntroTranscript{min-height:100px;max-height:145px;font-size:12.5px;line-height:1.58}
  .characterIntroAnswer>div{flex-wrap:wrap}.characterIntroAnswer input{flex-basis:calc(100% - 50px)}.characterIntroSubmit{height:40px;flex:1}
  .characterIntroExample{display:block;margin:3px 0 0}
}

@media(prefers-reduced-motion:reduce){.characterIntroPerson,.characterIntroCurtain,.characterIntroLights,.characterIntroWord{transition-duration:.01ms!important}.characterIntroDialog{animation:none}}

.characterIntroTeaser{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);
  align-items:stretch;
  gap:0;
  margin:30px 0;
  padding:0;
  overflow:hidden;
  border:1px solid #ead6c6;
  border-radius:26px;
  color:#172b47;
  background:linear-gradient(145deg,#fffaf4 0,#f0faf7 100%);
  box-shadow:0 20px 52px rgba(57,73,67,.16);
  scroll-margin-top:22px;
}
.characterIntroTeaserVisual{position:relative;display:block;min-height:270px;overflow:hidden;background:#f7e9dd;text-decoration:none}
.characterIntroTeaserVisual img{display:block;width:100%;height:100%;min-height:270px;object-fit:cover;object-position:center}
.characterIntroTeaserVisual>span{position:absolute;right:16px;bottom:15px;padding:8px 12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;background:rgba(23,43,71,.86);box-shadow:0 8px 22px rgba(20,32,52,.24);font-size:11px;font-weight:850;letter-spacing:.02em;backdrop-filter:blur(8px)}
.characterIntroTeaserVisual>span b{color:#ffd07a;font-size:15px}
.characterIntroTeaserContent{display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px 27px}
.characterIntroTeaserContent>span{color:#d95769;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.characterIntroTeaser h3{margin:6px 0 8px;font-family:Georgia,serif;font-size:clamp(25px,3vw,34px);line-height:1.05}
.characterIntroTeaser p{margin:0;color:#607080;font-size:13px;line-height:1.55}
.characterIntroTeaser ul{display:flex;gap:7px;margin:14px 0 18px;padding:0;list-style:none}
.characterIntroTeaser li{padding:6px 9px;border:1px solid #dbe9e5;border-radius:999px;color:#315f56;background:rgba(255,255,255,.8);font-size:10px;font-weight:850}
.characterIntroTeaser li span{margin-right:3px}
.characterIntroTeaserButton{display:inline-flex;align-items:center;gap:7px;padding:12px 18px;border-radius:999px;color:#fff!important;background:linear-gradient(135deg,#ef6674,#d94a61);box-shadow:0 10px 24px rgba(217,74,97,.3);text-decoration:none;font-size:13px;font-weight:900;transition:transform .18s,box-shadow .18s}
.characterIntroTeaserButton:hover,.characterIntroTeaserButton:focus-visible{transform:translateY(-2px);box-shadow:0 14px 28px rgba(217,74,97,.38)}
.characterIntroTeaserButton span{font-size:15px}
@media(max-width:700px){.characterIntroTeaser{grid-template-columns:1fr;border-radius:22px}.characterIntroTeaserVisual,.characterIntroTeaserVisual img{min-height:0;aspect-ratio:16/9}.characterIntroTeaserContent{padding:21px 19px 23px}.characterIntroTeaser h3{font-size:27px}.characterIntroTeaserButton{align-self:stretch;justify-content:center}.characterIntroTeaserVisual>span{right:10px;bottom:10px}.characterIntroTeaser ul{margin-bottom:16px}}