:root {
  color-scheme: light;
  --vivu-graphite: #292a2e;
  --vivu-graphite-soft: #3a3b42;
  --vivu-mark-graphite: #464553;
  --vivu-night: #101115;
  --vivu-purple-deep: #675f91;
  --vivu-purple-light: #9a8bd0;
  --vivu-blue-deep: #416a82;
  --vivu-blue-light: #8eb6cb;
  --vivu-canvas: #f5f7fa;
  --vivu-product-canvas: #fafbfc;
  --vivu-surface: #ffffff;
  --vivu-surface-soft: #f6f8fa;
  --vivu-surface-strong: #edf0f4;
  --vivu-ink: #292a2e;
  --vivu-muted: #72737b;
  --vivu-faint: #9b9ca4;
  --vivu-line: #e2e6ec;
  --vivu-line-strong: #cfd6df;
  --vivu-accent: #675f91;
  --vivu-accent-soft: #eef0f8;
  --vivu-accent-ink: #514a78;
  --vivu-info: #416a82;
  --vivu-info-soft: #e9f1f5;
  --vivu-success: #39725d;
  --vivu-danger: #9a454b;
  --vivu-brand-mist: #e9ecf5;
  --vivu-shadow: 0 20px 55px rgba(41, 42, 46, 0.12);
  --vivu-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --vivu-canvas: #101115;
  --vivu-product-canvas: #121318;
  --vivu-surface: #191a1e;
  --vivu-surface-soft: #15161a;
  --vivu-surface-strong: #24252b;
  --vivu-ink: #f3f1f7;
  --vivu-muted: #aaa8b2;
  --vivu-faint: #7f7e88;
  --vivu-line: #32333a;
  --vivu-line-strong: #484951;
  --vivu-accent: #9a8bd0;
  --vivu-accent-soft: #373349;
  --vivu-accent-ink: #c7bbed;
  --vivu-info: #8eb6cb;
  --vivu-info-soft: #293943;
  --vivu-success: #7fbaa1;
  --vivu-danger: #e89ba0;
  --vivu-brand-mist: #252631;
  --vivu-shadow: 0 22px 62px rgba(0, 0, 0, 0.3);
}

.vivu-lockup {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vivu-ink);
  text-decoration: none;
}

.vivu-mark {
  width: var(--vivu-mark-size, 34px);
  height: var(--vivu-mark-size, 34px);
  flex: 0 0 auto;
}

.vivu-word {
  color: inherit;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: 0;
}

.vivu-word .dot { color: var(--vivu-accent); }

.vivu-motion-mark {
  position: relative;
  width: var(--vivu-mark-size, 96px);
  height: var(--vivu-mark-size, 96px);
  flex: 0 0 auto;
}

.vivu-motion-mark.compact { --vivu-mark-size: 24px; }
.vivu-motion-mark.small { --vivu-mark-size: 32px; }
.vivu-motion-mark.medium { --vivu-mark-size: 52px; }

.vivu-loading-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vivu-motion-mark span {
  position: absolute;
  display: block;
  border-radius: 999px;
  transform-origin: center;
}

.vivu-motion-mark span:nth-child(1) {
  left: 13%; top: 19%; width: 18%; height: 62%; background: var(--vivu-mark-graphite);
  animation: vivu-frame-a 3.4s infinite ease-in-out;
}

.vivu-motion-mark span:nth-child(2) {
  left: 40%; top: 28%; width: 18%; height: 44%; background: var(--vivu-purple-deep);
  animation: vivu-frame-b 3.4s infinite ease-in-out;
}

.vivu-motion-mark span:nth-child(3) {
  left: 67%; top: 36%; width: 20%; height: 28%; background: var(--vivu-purple-light);
  animation: vivu-frame-c 3.4s infinite ease-in-out;
}

@keyframes vivu-frame-a {
  0%, 8% { opacity: .15; transform: scaleY(.16); }
  24%, 84% { opacity: 1; transform: scaleY(1); }
  96%, 100% { opacity: .15; transform: scaleY(.16); }
}

@keyframes vivu-frame-b {
  0%, 20% { opacity: 0; transform: translateX(-13px) scaleY(.24); }
  40%, 84% { opacity: 1; transform: translateX(0) scaleY(1); }
  96%, 100% { opacity: 0; transform: translateX(-13px) scaleY(.24); }
}

@keyframes vivu-frame-c {
  0%, 38% { opacity: 0; transform: translateX(-13px) scale(.42); }
  57%, 77% { opacity: 1; transform: translateX(0) scale(1); }
  84% { transform: scale(1.1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}

@media (prefers-reduced-motion: reduce) {
  .vivu-motion-mark span { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}