/* The stage belongs to scroll motion; each scene owns only its inner layers. */
.care-illustration.care-scenes-ready{
  --cs-jade:#4f906b;
  --cs-lime:#dfff82;
  --cs-forest:#184f3a;
  --cs-lavender:#cbb8ee;
  --cs-pearl:#f9fff0;
  min-height:365px;
  isolation:isolate;
}
:root[data-theme=light] .care-illustration.care-scenes-ready{
  --cs-jade:#629477;
  --cs-lime:#e4f6a8;
  --cs-forest:#285a46;
  --cs-lavender:#d9cbee;
  --cs-pearl:#fffff8;
}
:root[data-theme=dark] .care-illustration.care-scenes-ready{
  --cs-jade:#75b891;
  --cs-lime:#ddff87;
  --cs-forest:#235e47;
  --cs-lavender:#b9a7dd;
  --cs-pearl:#edf7ec;
}
.care-illustration.care-scenes-ready:before{
  width:72%;height:auto;aspect-ratio:1;
  opacity:.48;
  transform:rotate(-18deg) scale(1.04);
}
.care-scene-stage{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  height:auto;
  aspect-ratio:420/360;
  flex:0 0 auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  will-change:transform;
}
.care-scene{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  opacity:0;
  visibility:hidden;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.care-scene.is-active{opacity:1;visibility:visible}
.care-scene>svg{display:block;width:100%;height:100%;overflow:visible}
.care-illustration.care-scenes-ready .care-graphic-label,
.care-illustration.care-scenes-ready .care-graphic-bottom{z-index:2;pointer-events:none}
.care-illustration.care-scenes-ready .care-graphic-label{top:24px}
.care-illustration.care-scenes-ready .care-graphic-bottom{bottom:23px}
:root[data-theme=dark] .care-scene>svg{filter:drop-shadow(0 10px 23px #03130b28)}
body.readable .care-scene-stage{display:none}
@media(min-width:601px) and (max-width:950px){
  .care-illustration.care-scenes-ready{min-height:355px}
  .care-scene-stage{width:340px;max-width:110%}
}
@media(max-width:600px){
  .care-illustration.care-scenes-ready{height:246px;min-height:246px}
  .care-scene-stage{width:288px;max-width:100%;height:247px;aspect-ratio:420/360}
  .care-illustration.care-scenes-ready:before{width:200px;opacity:.3;transform:rotate(-18deg)}
  .care-illustration.care-scenes-ready .care-graphic-label{top:13px;font-size:6px;letter-spacing:1.4px}
  .care-illustration.care-scenes-ready .care-graphic-bottom{bottom:12px;font-size:6px;letter-spacing:1.2px}
}