/* Small illustrations share a palette and animate individual working parts. */
.diag-subject-art{display:block;width:100%;height:100%;overflow:visible;--art-light:#A8BCF5;--art-dark:#7373C5}
.diag-subject--MAT2 .diag-subject-art{--art-light:#C2D9F6;--art-dark:#87A6DC}
.diag-subject--HIST .diag-subject-art{--art-light:#B5E2F5;--art-dark:#7AA9D6}
.diag-subject--FIS .diag-subject-art{--art-light:#FFE5A2;--art-dark:#EBA957}
.diag-subject--QUI .diag-subject-art{--art-light:#D4B2F1;--art-dark:#9A79C8}
.diag-subject-icon .diag-subject-art{width:calc(100% - 2px);height:auto;aspect-ratio:1}
.art-key{transform-origin:31px 30px;animation:subject-key 4s ease-in-out infinite}
.art-digits{animation:subject-digits 4s ease-in-out infinite}
.art-compass{transform-origin:31px 14px;animation:subject-compass 5.8s ease-in-out infinite}
.art-page{transform-origin:24px 24px;animation:subject-page 6s ease-in-out infinite}
.art-globe{transform-origin:24px 21px;animation:subject-globe 7s ease-in-out infinite}
.art-dna{transform-origin:24px 24px;animation:subject-dna 6s ease-in-out infinite}
.art-electron{transform-origin:24px 24px;animation:subject-orbit 7s linear infinite}
.art-electron-two{animation-duration:9s;animation-delay:-4s;animation-direction:reverse}
.art-bubble{animation:subject-bubble 3.8s ease-in-out infinite}
.art-bubble-two{animation-delay:-1.3s}.art-bubble-three{animation-delay:-2.5s}
.diag-subject.unavailable .diag-subject-art *{animation-play-state:paused}
@keyframes subject-key{0%,30%,50%,100%{transform:translateY(0) scale(1)}38%,43%{transform:translateY(1px) scale(.91)}}
@keyframes subject-digits{0%,37%,50%,100%{opacity:1}42%,46%{opacity:.25}}
@keyframes subject-compass{0%,18%,100%{transform:rotate(-7deg)}48%,65%{transform:rotate(9deg)}}
@keyframes subject-page{0%,25%,100%{transform:skewY(0) scaleX(1)}48%,60%{transform:skewY(-7deg) scaleX(.8)}}
@keyframes subject-globe{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes subject-dna{0%,100%{transform:rotate(-5deg) scaleX(1)}50%{transform:rotate(5deg) scaleX(.87)}}
@keyframes subject-orbit{to{transform:rotate(360deg)}}
@keyframes subject-bubble{0%{transform:translateY(2px);opacity:0}20%{opacity:.9}75%{opacity:.7}100%{transform:translateY(-13px);opacity:0}}
@media(prefers-reduced-motion:reduce){.diag-subject-art *{animation:none!important}}