/* Original SVG compositions. Theme colors belong to the illustration, not the page. */
.sve-art {
  --art-ink: #dce4f0;
  --art-muted: #8191a9;
  --art-line: #4c5c73;
  --art-faint: #273449;
  --art-surface: #121b29;
  --art-surface-high: #202c3e;
  --art-metal-light: #c6d0df;
  --art-metal-mid: #78879e;
  --art-metal-dark: #354359;
  --art-accent: #aa99ef;
  --art-accent-soft: #382f55;
  --art-blue: #73a9ef;
  --art-teal: #70c5ba;
  --art-paper: #172231;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 20 / 9;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}
[data-theme="light"] .sve-art {
  --art-ink: #26364d;
  --art-muted: #65788f;
  --art-line: #a5b4c6;
  --art-faint: #e0e6ee;
  --art-surface: #f7f9fc;
  --art-surface-high: #eaf0f6;
  --art-metal-light: #ffffff;
  --art-metal-mid: #d8e0ea;
  --art-metal-dark: #9baec5;
  --art-accent: #7962be;
  --art-accent-soft: #ede8f8;
  --art-blue: #397aba;
  --art-teal: #368d83;
  --art-paper: #ffffff;
}
.sve-art > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.sve-art--small { max-height: 152px; }
.sve-art--wide { aspect-ratio: 8 / 3; max-height: 260px; }
.sve-art svg { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sve-art .art-line { stroke: var(--art-line); }
.sve-art .art-faint { stroke: var(--art-faint); }
.sve-art .art-ink { stroke: var(--art-ink); }
.sve-art .art-muted { stroke: var(--art-muted); }
.sve-art .art-accent { stroke: var(--art-accent); }
.sve-art .art-blue { stroke: var(--art-blue); }
.sve-art .art-teal { stroke: var(--art-teal); }
.sve-art .art-paper { fill: var(--art-paper); stroke: var(--art-line); }
.sve-art .art-panel { fill: var(--art-surface); stroke: var(--art-line); }
.sve-art .art-raised { fill: var(--art-surface-high); stroke: var(--art-line); }
.sve-art .art-accent-panel { fill: var(--art-accent-soft); stroke: var(--art-accent); }
.sve-art .art-fill-ink { fill: var(--art-ink); }
.sve-art .art-fill-muted { fill: var(--art-muted); }
.sve-art .art-fill-accent { fill: var(--art-accent); }
.sve-art .art-fill-blue { fill: var(--art-blue); }
.sve-art .art-fill-teal { fill: var(--art-teal); }
.sve-art .art-fill-faint { fill: var(--art-faint); }
.sve-art .art-dashed { stroke-dasharray: 3 5; }
.sve-art .art-type { fill: var(--art-ink); stroke: none; font-family: var(--font-sans, 'Onest', Arial, sans-serif); font-weight: 400; }
.sve-art .art-label { fill: var(--art-ink); font-weight: 450; }
.sve-art .art-brand { fill: var(--art-ink); font-weight: 650; letter-spacing: -.45px; }
.sve-art .art-type-accent { fill: var(--art-accent); }
.sve-art .art-stop-light { stop-color: var(--art-metal-light); }
.sve-art .art-stop-mid { stop-color: var(--art-metal-mid); }
.sve-art .art-stop-dark { stop-color: var(--art-metal-dark); }
.sve-art .art-stop-surface { stop-color: var(--art-surface); }
.sve-art .art-stop-raised { stop-color: var(--art-surface-high); }
.sve-art .art-stop-accent { stop-color: var(--art-accent); }
.sve-art .art-stop-blue { stop-color: var(--art-blue); }
.sve-art .art-stop-teal { stop-color: var(--art-teal); }
.sve-art .art-rise, .sve-art .art-wave, .sve-art .art-travel,
.sve-art .art-orbit, .sve-art .art-pulse, .sve-art .art-reveal {
  transform-box: fill-box;
  transform-origin: center;
}
/* Every entrance ends in a fully visible, static composition in under four seconds. */
.sve-art.is-playing .art-rise { animation: sve-art-rise 1.15s cubic-bezier(.2,.7,.2,1) both; }
.sve-art.is-playing .art-wave { animation: sve-art-wave 1.45s ease-in-out 2; }
.sve-art.is-playing .art-travel { animation: sve-art-travel 2.5s cubic-bezier(.2,.7,.2,1) both; }
.sve-art.is-playing .art-orbit { animation: sve-art-orbit 3s ease-in-out both; }
.sve-art.is-playing .art-pulse { animation: sve-art-pulse 1.45s ease-in-out 2; }
.sve-art.is-playing .art-reveal { animation: sve-art-reveal 1.45s ease both; }
.sve-art.is-playing [data-art-delay="1"] { animation-delay: .14s; }
.sve-art.is-playing [data-art-delay="2"] { animation-delay: .28s; }
.sve-art.is-playing [data-art-delay="3"] { animation-delay: .42s; }
.sve-art.is-paused :is(.art-rise,.art-wave,.art-travel,.art-orbit,.art-pulse,.art-reveal) { animation-play-state: paused; }
@keyframes sve-art-rise { from { opacity: .15; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sve-art-wave { 0%,100% { transform: scaleY(1); } 45% { transform: scaleY(.48); } 70% { transform: scaleY(.84); } }
@keyframes sve-art-travel { 0% { opacity: 0; transform: translateX(-15px); } 35%,65% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
@keyframes sve-art-orbit { 0% { opacity: .25; transform: rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(0deg); } }
@keyframes sve-art-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sve-art-reveal { from { opacity: .1; transform: scaleX(.83); } to { opacity: 1; transform: scaleX(1); } }
@media (max-width: 760px) {
  .sve-art--small { max-height: 136px; }
  .sve-art--wide { aspect-ratio: 20 / 9; max-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .sve-art :is(.art-rise,.art-wave,.art-travel,.art-orbit,.art-pulse,.art-reveal) { animation: none !important; transform: none !important; }
}
