/* Local vector artwork: no image downloads, third-party logos or animation runtime. */
.activity-art {
  --art-bg: #c4adff;
  --art-detail: #fff8d7;
  color: #191919;
  background-color: var(--art-bg);
  background-image: linear-gradient(#19191912 1px, transparent 1px), linear-gradient(90deg, #19191912 1px, transparent 1px);
  background-size: 20px 20px;
  isolation: isolate;
}
.activity-art--terminal { --art-bg: #c8e991; --art-detail: #81c4a0; }
.activity-art--rocket { --art-bg: #b5cefa; --art-detail: #ffbb76; }
.activity-art--palette { --art-bg: #ffbc9b; --art-detail: #fff0a4; }
.activity-art--camera { --art-bg: #f7d78e; --art-detail: #fff8df; }
.activity-art--music { --art-bg: #d9b7f2; --art-detail: #fff0a4; }
.activity-art--ball { --art-bg: #ffbd83; --art-detail: #ffdda5; }
.activity-art--heart { --art-bg: #f2b7c7; --art-detail: #fff6df; }
.activity-art--book { --art-bg: #b8d9d2; --art-detail: #ffe7a3; }
.activity-art--chart { --art-bg: #cce792; --art-detail: #fff9d2; }
.activity-art--puzzle { --art-bg: #b8dced; --art-detail: #fff3a0; }
.activity-art--compass { --art-bg: #ead3a1; --art-detail: #fcaa83; }
.activity-art--flag { --art-bg: #c8c6f5; --art-detail: #fff3ac; }
.activity-art > .mono { z-index: 2; right: 14px; line-height: 1.5; }
.activity-art .activity-status { z-index: 2; max-width: calc(100% - 28px); }
.activity-scene { position: absolute; width: 208px; height: 124px; left: calc(50% - 104px); top: 30px; pointer-events: none; }
.activity-glyph { position: absolute; width: 96px; height: 96px; left: 56px; top: 4px; shape-rendering: crispEdges; animation: quest-arrive 4.8s steps(4, end) 1; }
.glyph-cutout { fill: var(--art-bg); }
.glyph-detail { fill: var(--art-detail); animation: quest-detail 2.4s steps(2, end) 2; }
.activity-orbit { position: absolute; width: 104px; height: 88px; left: 52px; top: 4px; border: 1px dashed #19191938; transform: rotate(-12deg); }
.activity-ground { position: absolute; width: 64px; height: 4px; background: #19191926; left: 72px; top: 110px; }
.activity-spark { position: absolute; width: 4px; height: 16px; background: currentColor; opacity: .65; animation: quest-spark 2.4s steps(2, end) 2; }
.activity-spark:after { content: ""; position: absolute; width: 16px; height: 4px; left: -6px; top: 6px; background: currentColor; }
.activity-spark--one { left: 24px; top: 24px; }
.activity-spark--two { right: 18px; top: 74px; transform: scale(.65); animation-delay: -.8s; }
.activity-art--terminal .activity-orbit, .activity-art--chart .activity-orbit { transform: none; width: 136px; left: 36px; height: 72px; top: 16px; }
.activity-art--heart .activity-orbit, .activity-art--music .activity-orbit { transform: rotate(12deg); }
.activity-art--rocket .activity-glyph { animation-name: quest-launch; }
.activity-art--heart .activity-glyph { animation-name: quest-heartbeat; transform-origin: center; }
.activity-art--ball .activity-glyph { animation-name: quest-bounce; }
.activity-art--music .activity-glyph, .activity-art--flag .activity-glyph { animation-name: quest-sway; transform-origin: bottom center; }
.glyph-needle { transform-origin: 48px 48px; animation: quest-needle 4.8s steps(4, end) 1; }
.glyph-flame { transform-origin: 48px 76px; animation: quest-flame 1.2s steps(2, end) 4; }
.activity-art:is(:hover, :focus-visible) .activity-glyph { animation: quest-hover 1.2s steps(4, end) infinite; }
.activity-card:nth-child(3n + 2) .activity-glyph { animation-delay: -.6s; }
.activity-card:nth-child(3n) .activity-glyph { animation-delay: -1.2s; }
@keyframes quest-arrive { 0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 12%, 37%, 62%, 87% { transform: translateY(-4px); } }
@keyframes quest-launch { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-7px); } }
@keyframes quest-heartbeat { 0%, 20%, 50%, 70%, 100% { transform: scale(1); } 10%, 60% { transform: scale(1.07); } 30%, 80% { transform: scale(1.03); } }
@keyframes quest-bounce { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25%, 75% { transform: translateY(-8px) rotate(12deg); } }
@keyframes quest-sway { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes quest-needle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 60% { transform: rotate(-12deg); } }
@keyframes quest-flame { 50% { transform: scaleY(.6); } }
@keyframes quest-detail { 50% { opacity: .55; } }
@keyframes quest-spark { 50% { opacity: .2; } }
@keyframes quest-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce), print {
  .activity-scene, .activity-scene * { animation: none !important; transition: none !important; }
}