/* Twenty tiny operation characters. Shapes remain readable without motion or color alone. */
.dt-operation-mascot {
  --op-main: #6f9cd6;
  --op-light: #a9c8ef;
  --op-dark: #456890;
  --op-signal: #b4dcff;
  width: 100%;
  max-width: 88px;
  line-height: 0;
  opacity: .82;
  user-select: none;
  pointer-events: none;
}
.dt-operation-mascot--scout { --op-main:#6bab95; --op-light:#a7d9bd; --op-dark:#3e7468; --op-signal:#93d0b6; }
.dt-operation-mascot--worker { --op-main:#8d82bc; --op-light:#beb1e7; --op-dark:#625b88; --op-signal:#d3c8f5; }
.dt-operation-mascot--studio { --op-main:#ba7f99; --op-light:#e7b0c4; --op-dark:#8a5e75; --op-signal:#efbfd0; }
.dt-operation-mascot--agency { --op-main:#bc9961; --op-light:#e4c58e; --op-dark:#8b714a; --op-signal:#fae0a2; }
.dt-operation-mascot--local { --op-main:#739ca5; --op-light:#b7d3d0; --op-dark:#4b6e79; --op-signal:#a6e1bd; }
.dt-operation-mascot--intern { --op-main:#b6a585; --op-light:#eadcc2; --op-dark:#8d7c61; --op-signal:#f0d69e; }
.dt-operation-mascot--leadfarm { --op-main:#6caa7d; --op-light:#b2d39a; --op-dark:#496c54; --op-signal:#c7e3aa; }
.dt-operation-mascot--meeting { --op-main:#8c93b7; --op-light:#c1c7df; --op-dark:#565e80; --op-signal:#a7c6e7; }
.dt-operation-mascot--influencer { --op-main:#b9779a; --op-light:#efd0dc; --op-dark:#775671; --op-signal:#f6d9e8; }
.dt-operation-mascot--toaster { --op-main:#a3adb5; --op-light:#c7d3db; --op-dark:#647583; --op-signal:#e9b477; }
.dt-operation-mascot--recruiter { --op-main:#83ab96; --op-light:#b7d7bc; --op-dark:#4f7161; --op-signal:#e2c58c; }
.dt-operation-mascot--clone { --op-main:#6b9d99; --op-light:#afd3c3; --op-dark:#446e70; --op-signal:#b9efd0; }
.dt-operation-mascot--dream { --op-main:#8e8ab7; --op-light:#c6bde7; --op-dark:#5d5a7d; --op-signal:#c9cce8; }
.dt-operation-mascot--oracle { --op-main:#8e78b9; --op-light:#c8b4df; --op-dark:#62537d; --op-signal:#edcba3; }
.dt-operation-mascot--ministry { --op-main:#8b9f7a; --op-light:#c7cfaa; --op-dark:#536d59; --op-signal:#ddc185; }
.dt-operation-mascot--moon { --op-main:#7e96b1; --op-light:#bdcddd; --op-dark:#53687d; --op-signal:#b9d8ef; }
.dt-operation-mascot--time { --op-main:#bc9b6f; --op-light:#e7d7b9; --op-dark:#8a7259; --op-signal:#debb7c; }
.dt-operation-mascot--afterlife { --op-main:#7da8a4; --op-light:#c2e2dc; --op-dark:#536d74; --op-signal:#b5dbd5; }
.dt-operation-mascot--universe { --op-main:#817da7; --op-light:#bba2d2; --op-dark:#605a7d; --op-signal:#dcb7a6; }
.dt-operation-mascot svg { width:100%; height:auto; display:block; overflow:visible; }
.dt-operation-mascot .dt-op__main { fill:var(--op-main); }
.dt-operation-mascot .dt-op__light { fill:var(--op-light); }
.dt-operation-mascot .dt-op__dark { fill:var(--op-dark); }
.dt-operation-mascot .dt-op__ink { fill:#172734; }
.dt-operation-mascot .dt-op__signal { fill:var(--op-signal); }
.dt-operation-mascot .dt-op__shadow { fill:#050a12; opacity:.45; }
.dt-operation-mascot .dt-op__wire { fill:none; stroke:var(--op-main); stroke-width:4; stroke-linejoin:round; }
.dt-operation-mascot .dt-op__smile { fill:none; stroke:#28353e; stroke-width:2; stroke-linejoin:round; }
.dt-operation-mascot .dt-op__screen-face { fill:none; stroke:#a8dfc2; stroke-width:2; stroke-linejoin:round; }
.dt-operation-mascot .dt-op__spark { fill:none; stroke:var(--op-signal); stroke-width:1.5; opacity:0; }
.dt-operation-mascot .dt-op__character { transform-origin:36px 53px; }
.dt-operation-mascot .dt-op__lookout { transform-origin:36px 35px; }
.dt-operation-mascot .dt-op__brush { transform-origin:60px 36px; }
.dt-operation-mascot .dt-op__case { transform-origin:56px 39px; }
.dt-operation-mascot[data-active="true"] { opacity:1; }
.dt-operation-mascot[data-active="true"] .dt-op__character { animation:dt-op-bob 3.2s ease-in-out infinite; }
.dt-operation-mascot[data-active="true"] .dt-op__spark { animation:dt-op-spark 4.3s ease-in-out infinite; }
.dt-operation-mascot[data-active="true"] .dt-op__signal { animation:dt-op-signal 2.8s ease-in-out infinite; }
.dt-operation-mascot--scout[data-active="true"] .dt-op__lookout { animation:dt-op-look 4s ease-in-out infinite; }
.dt-operation-mascot--worker[data-active="true"] .dt-op__case { animation:dt-op-case 3.2s ease-in-out infinite; }
.dt-operation-mascot--studio[data-active="true"] .dt-op__brush { animation:dt-op-paint 2.6s ease-in-out infinite; }
.dt-operation-mascot--agency[data-active="true"] .dt-op__partners { animation:dt-op-bob 3.2s ease-in-out -.8s infinite; }
.dt-operation-mascot--local[data-active="true"] .dt-op__character { animation:none; }
.dt-operation-mascot--local[data-active="true"] .dt-op__steam { animation:dt-op-steam 4s ease-in-out infinite; }
.dt-operation-mascot--toaster[data-active="true"] .dt-op__steam,
.dt-operation-mascot--dream[data-active="true"] .dt-op__dream { animation:dt-op-steam 4s ease-in-out infinite; }
.dt-operation-mascot .dt-op__clock-hand { transform-origin:36px 31px; }
.dt-operation-mascot--time[data-active="true"] .dt-op__clock-hand { animation:dt-op-clock 12s linear infinite; }
@keyframes dt-op-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.5px); } }
@keyframes dt-op-spark { 0%,100% { opacity:.2; } 50% { opacity:.75; } }
@keyframes dt-op-signal { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes dt-op-look { 0%,100% { transform:translateX(-1px); } 50% { transform:translateX(1px); } }
@keyframes dt-op-case { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes dt-op-paint { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg); } }
@keyframes dt-op-steam { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:.75; transform:translateY(-2px); } }
@keyframes dt-op-clock { to { transform:rotate(-360deg); } }
@media(prefers-reduced-motion:reduce) {
  .dt-operation-mascot *, .dt-operation-mascot *::before, .dt-operation-mascot *::after { animation:none!important; transition:none!important; }
  .dt-operation-mascot[data-active="true"] .dt-op__spark { opacity:.5; }
}