.hero-art{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;isolation:isolate}.hero-art:before{content:'';position:absolute;background:#dceaff;width:440px;height:440px;border-radius:50%;z-index:-2;top:60px;left:40px}.orbit{position:absolute;border:1px solid #b9cce9;border-radius:50%;z-index:-1;transform:rotate(-25deg)}.orbit-one{width:520px;height:380px;top:92px;left:0}.orbit-two{width:430px;height:485px;left:45px;top:35px;border-style:dashed;opacity:.55}.character-scene{position:relative;width:110%;margin-top:15px;animation:float 7s ease-in-out infinite}.characters{display:block;width:100%;filter:drop-shadow(0 18px 12px #16326210)}.art-label{position:absolute;z-index:2;padding:12px 16px;background:white;border:1px solid #e1e9f4;border-radius:12px;box-shadow:0 12px 35px #15376e08;font-size:10px;font-weight:700;transform:rotate(-4deg);top:40px;left:20px}.code-symbol{font-size:15px;color:var(--blue);margin-right:9px}.code-note{position:absolute;right:0;bottom:29px;background:#18365f;color:#d9e7ff;width:218px;border-radius:13px;padding:15px 19px;box-shadow:0 15px 30px #19376225;transform:rotate(4deg);animation:float-note 8s ease-in-out infinite}.terminal-dots{font-size:7px;letter-spacing:3px;color:#83a2d0;display:block;margin-bottom:10px}.code-note code{font-size:12px;line-height:1.6;display:block}.code-note code span{color:#8cbdff}.code-note code b{color:#ffcd68;font-weight:400}.code-note-caption{font-size:8px;display:block;border-top:1px solid #385074;margin-top:12px;padding-top:8px;color:#aabeda}.spark{position:absolute;color:#efb633;font-size:38px}.spark-one{top:10px;right:20px}.spark-two{bottom:60px;left:8px;font-size:44px}.vertical-note{position:absolute;right:-23px;top:160px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#8198b8}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes float-note{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}.hero-art.is-paused *{animation-play-state:paused}@media(max-width:1100px){.hero-art:before{width:340px;height:340px;left:0;top:100px}.orbit-one{width:390px;height:300px;left:-25px;top:120px}.orbit-two{width:350px;height:400px;left:0;top:70px}.code-note{bottom:25px}.art-label{left:-5px;top:65px;font-size:9px}}@media(max-width:760px){.hero-art{height:400px;margin:0 auto;width:100%;max-width:420px}.hero-art:before{width:300px;height:300px;top:48px;left:calc(50% - 150px)}.character-scene{width:100%;max-width:400px;margin-top:0}.orbit-one{width:340px;height:270px;top:65px;left:calc(50% - 170px)}.orbit-two{width:290px;height:340px;top:22px;left:calc(50% - 145px)}.art-label{top:24px;left:12px;padding:8px 10px;font-size:8px}.code-note{width:175px;padding:12px 14px;bottom:18px;right:10px}.code-note code{font-size:10px}.code-note-caption{font-size:7px}.spark-one{right:10px;top:18px}.spark-two{left:10px;bottom:50px;font-size:32px}.vertical-note{right:0;top:120px}}
.motion-toggle{position:absolute;bottom:0;left:25px;border:0;border-bottom:1px dotted #91a3bc;background:transparent;color:#60718a;padding:5px 0;font-size:9px;z-index:3}@media(max-width:760px){.motion-toggle{left:10px;bottom:10px}}
.hero-art:before{background:radial-gradient(circle at 40% 30%,#ffffff30,#8cc6ff12 65%,#ffffff08)}
.orbit{border-color:#ffffff38}
.art-label{color:#172d4e}
.vertical-note{color:#c4dcff}
.motion-toggle{color:#d8e7ff;border-bottom-color:#c4dcff80}
.spark{color:#ffce46}

/* Illustrations contained in the shorter carousel. */
.hero-art{height:390px}
.character-scene{width:100%;height:350px;margin:0}
.characters{width:100%;height:100%;object-fit:contain}
.hero-art:before{width:330px;height:330px;top:30px;left:calc(50% - 165px)}
.orbit-one{width:410px;height:300px;top:45px;left:calc(50% - 205px)}
.orbit-two{width:330px;height:360px;top:10px;left:calc(50% - 165px)}
.art-label{top:0;left:15px;font-size:9px;padding:9px 12px}
.code-note{width:175px;bottom:20px;padding:12px 14px}
.code-note code{font-size:10px}
.code-note-caption{font-size:7px;margin-top:8px;padding-top:6px}
.spark-one{top:0}
.spark-two{bottom:30px}
.vertical-note{top:100px}
@media(max-width:760px){
  .hero-art{height:250px;margin-top:10px}
  .character-scene{height:225px;max-width:none}
  .hero-art:before{width:210px;height:210px;top:20px;left:calc(50% - 105px)}
  .orbit-one{width:270px;height:190px;top:30px;left:calc(50% - 135px)}
  .orbit-two{width:220px;height:240px;top:0;left:calc(50% - 110px)}
  .art-label{top:0;left:0;font-size:7px;padding:6px 8px}
  .code-note{width:133px;bottom:15px;right:0;padding:8px 10px}
  .code-note code{font-size:8px}
  .terminal-dots{margin-bottom:4px}
  .code-note-caption{display:none}
  .spark{font-size:23px}
  .spark-two{bottom:28px}
  .vertical-note{display:none}
  .motion-toggle{bottom:0;left:0;font-size:8px}
}