.w3aw-luna {
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  max-width: var(--w3aw-luna-max-width, 640px);
  margin-inline: auto;
  text-align: center;
  background: var(--w3aw-luna-background-color, transparent);
  font-family: inherit;
}
.w3aw-luna *, .w3aw-luna *::before, .w3aw-luna *::after { box-sizing: border-box; }
.w3aw-luna .w3aw-luna-phases {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--w3aw-luna-phase-gap, 16px);
  gap: min(var(--w3aw-luna-phase-gap, 16px), 10cqi);
  width: 100%;
  max-width: calc(6 * var(--w3aw-luna-moon-size, 90px) + 5 * var(--w3aw-luna-phase-gap, 16px));
  margin-inline: auto;
  direction: ltr;
}
.w3aw-luna .w3aw-luna-moon {
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  background-color: var(--w3aw-luna-moon-color, #b29a74);
  background-image: radial-gradient(ellipse at 30% 35%, rgba(65, 48, 27, .2) 0 9%, transparent 12%), radial-gradient(ellipse at 55% 60%, rgba(65, 48, 27, .18) 0 18%, transparent 22%), radial-gradient(ellipse at 65% 20%, rgba(65, 48, 27, .15) 0 12%, transparent 15%);
  -webkit-mask-image: var(--w3aw-luna-mask);
  mask-image: var(--w3aw-luna-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.w3aw-luna.w3aw-luna-has-image .w3aw-luna-moon { background: transparent; }
.w3aw-luna[data-w3aw-luna-state="entering"] .w3aw-luna-moon,
.w3aw-luna[data-w3aw-luna-state="floating"] .w3aw-luna-moon { will-change: transform; }
.w3aw-luna .w3aw-luna-image { display: block; width: 100%; height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.w3aw-luna .w3aw-luna-branding { width: var(--w3aw-luna-branding-width, 360px); max-width: 100%; margin: var(--w3aw-luna-title-gap, 44px) auto 0; }
.w3aw-luna .w3aw-luna-branding-image { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.w3aw-luna .w3aw-luna-title {
  margin: var(--w3aw-luna-title-gap, 44px) 0 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--w3aw-luna-title-size, 112px);
  font-size: min(var(--w3aw-luna-title-size, 112px), 22cqi);
  font-weight: var(--w3aw-luna-title-weight, 300);
  letter-spacing: var(--w3aw-luna-letter-spacing, 2px);
  line-height: 1.05;
  text-transform: none;
  color: var(--w3aw-luna-text-color, #4a392b);
  overflow-wrap: anywhere;
}
.w3aw-luna .w3aw-luna-tagline {
  margin: var(--w3aw-luna-tagline-gap, 12px) 0 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--w3aw-luna-tagline-size, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--w3aw-luna-tagline-color, #4a392b);
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .w3aw-luna .w3aw-luna-moon { transform: none !important; opacity: 1 !important; will-change: auto !important; }
}