:root.wl-test {
  --wl-layer-canvas: 12;
  --wl-layer-section: 18;
  --wl-layer-dock: 10030;
  --wl-layer-dialog: 10120;
  --wl-react-spring: cubic-bezier(.16, 1, .3, 1);
}

.wl-react-experience {
  position: relative;
  z-index: var(--wl-layer-canvas);
}

.wl-cosmic-field {
  position: fixed;
  z-index: var(--wl-layer-canvas);
  inset: 0;
  width: 100vw;
  height: 100dvh;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .4s ease;
}

.wl-cosmic-field.is-on { opacity: .7; }

.wl-spark-layer {
  position: fixed;
  z-index: 10100;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.wl-energy-button {
  overflow: hidden !important;
  isolation: isolate;
}

.wl-test a.wl-energy-button::after { content: none; }

.wl-energy-button > :not(.wl-button-energy) {
  position: relative;
  z-index: 2;
}

.wl-test .wl-energy-button .node-atom__button-content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wl-test .wl-energy-button .node-atom__button-icon {
  display: block !important;
  flex: 0 0 auto !important;
}

.wl-test .wl-energy-button .node-atom__button-text {
  display: block;
  line-height: 1.1;
}

.wl-button-energy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.wl-button-energy__rim,
.wl-button-energy__light,
.wl-button-energy__scan,
.wl-button-energy__scan::after {
  position: absolute;
  display: block;
  pointer-events: none;
}

.wl-button-energy__rim {
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(ellipse 180px 70px at var(--wl-button-light-x, 70%) 0%, #fff0df, rgba(255,215,194,.48) 35%, transparent 90%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .45s ease;
}

.wl-button-energy__light {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 180px 54px at var(--wl-button-light-x, 70%) -12px, rgba(255,221,197,.38), transparent 78%),
    linear-gradient(180deg, rgba(255,230,206,.06), transparent 42%, rgba(94,17,17,.09));
  transition: opacity .55s ease;
}

.wl-button-energy__scan {
  inset: 0;
  opacity: 0;
  background: linear-gradient(108deg, transparent 24%, rgba(255,206,174,.07) 40%, rgba(255,241,223,.23) 48%, rgba(255,221,203,.1) 54%, transparent 68%);
  transform: translate3d(-110%, 0, 0);
}

.wl-button-energy__scan::after {
  content: '';
  top: 1px;
  right: 25%;
  left: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,239,220,.85), transparent);
}

.wl-energy-button:focus-visible .wl-button-energy__rim,
.wl-energy-button:focus-visible .wl-button-energy__light { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .wl-energy-button:hover .wl-button-energy__rim,
  .wl-energy-button:hover .wl-button-energy__light { opacity: 1; }
  .wl-energy-button:hover .wl-button-energy__scan { animation: wlEnergyScan 1.6s cubic-bezier(.22, .61, .36, 1) both; }
}

.wl-space-dialog__cta svg {
  display: block;
  flex: 0 0 auto;
}

.wl-cosmic-dock {
  position: fixed;
  z-index: var(--wl-layer-dock);
  top: 50%;
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  width: 58px;
  padding: 8px;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(28, 29, 32, .86), rgba(12, 13, 15, .74));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .09), 0 0 42px rgba(239, 93, 79, .07);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform: translate3d(calc(100% + 38px), -50%, 0) scale(.94);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: width .32s var(--wl-react-spring), transform .45s var(--wl-react-spring), opacity .28s ease;
  will-change: width, transform;
}

.wl-cosmic-dock.is-visible {
  transform: translate3d(0, -50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.wl-cosmic-dock:hover,
.wl-cosmic-dock:has(.wl-cosmic-dock__item:focus-visible) { width: 178px; }

.wl-cosmic-dock__item {
  position: relative;
  display: flex;
  min-width: 42px;
  height: 44px;
  padding: 0;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 14px;
  color: rgba(255, 255, 255, .68);
  background: transparent;
  font: 700 12px/1.1 Montserrat, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .22s ease, background-color .22s ease, transform .22s var(--wl-react-spring);
}

.wl-cosmic-dock__item:hover,
.wl-cosmic-dock__item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .075);
}

.wl-cosmic-dock__item:active { transform: scale(.97); }

.wl-cosmic-dock__item.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(239, 93, 79, .22), rgba(239, 93, 79, .05));
}

.wl-cosmic-dock__item.is-active::before {
  content: '';
  position: absolute;
  left: -1px;
  width: 3px;
  height: 22px;
  border-radius: 99px;
  background: var(--wl-accent);
  box-shadow: 0 0 13px rgba(239, 93, 79, .95);
}

.wl-cosmic-dock__icon {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}

.wl-cosmic-dock__icon svg {
  display: block;
  flex: 0 0 auto;
}

.wl-cosmic-dock__label {
  display: block;
  width: 112px;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .26s var(--wl-react-spring);
  white-space: nowrap;
}

.wl-cosmic-dock:hover .wl-cosmic-dock__label,
.wl-cosmic-dock:has(.wl-cosmic-dock__item:focus-visible) .wl-cosmic-dock__label {
  opacity: 1;
  transform: translateX(0);
}

.wl-lunar-interface {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .4s ease;
}

.wl-lunar-interface.is-off { opacity: .12; }

.wl-lunar-interface__rings {
  position: absolute;
  top: -34%;
  right: -12%;
  display: block;
  width: min(76vw, 1110px);
  height: auto;
  overflow: visible;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 18px rgba(239, 93, 79, .12));
}

.wl-lunar-interface__rings .ring {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 500px 500px;
}

.wl-lunar-interface__rings .ring-a {
  stroke: rgba(255, 255, 255, .17);
  stroke-dasharray: 7 18 90 24;
  animation: wlHudOrbit 38s linear infinite;
}

.wl-lunar-interface__rings .ring-b {
  stroke: rgba(239, 93, 79, .31);
  stroke-dasharray: 3 28 126 38;
  animation: wlHudOrbitReverse 46s linear infinite;
}

.wl-lunar-interface__rings .ring-c {
  stroke: rgba(255, 193, 181, .16);
  stroke-dasharray: 110 28 2 22;
  animation: wlHudOrbit 31s linear infinite;
}

.wl-lunar-interface__rings .satellites {
  transform-origin: 500px 500px;
  animation: wlHudOrbit 24s linear infinite;
}

.wl-lunar-interface__rings .satellite { fill: rgba(255, 255, 255, .9); }
.wl-lunar-interface__rings .satellite-a { fill: var(--wl-accent-hot); filter: drop-shadow(0 0 8px var(--wl-accent)); }
.wl-lunar-interface__rings .satellite-b { opacity: .62; }
.wl-lunar-interface__rings .satellite-c { fill: #ffd5cc; opacity: .72; }

.wl-lunar-interface__gravity {
  position: absolute;
  top: -15%;
  right: -8%;
  width: min(67vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .42;
  background:
    radial-gradient(circle at 48% 48%, transparent 0 43%, rgba(255,255,255,.035) 43.3%, transparent 43.8%),
    conic-gradient(from 228deg, transparent 0 62%, rgba(239,93,79,.14) 69%, transparent 76%);
  filter: blur(.1px) drop-shadow(0 0 42px rgba(239,93,79,.09));
  transform: translate3d(var(--wl-hero-x, 0), var(--wl-hero-y, 0), 0) rotate(-10deg);
  transition: transform 1.15s var(--wl-react-spring), opacity .35s ease;
}

.wl-lunar-interface__eclipse {
  position: absolute;
  top: -20%;
  right: -19%;
  width: min(82vw, 1180px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .3;
  background: linear-gradient(102deg, transparent 39%, rgba(255,255,255,.12) 49.6%, rgba(239,93,79,.09) 50.2%, transparent 61%);
  mix-blend-mode: screen;
  transform: translate3d(-11%, 0, 0) rotate(-8deg);
  animation: wlEclipseSweep 11s var(--wl-react-spring) infinite;
}

.wl-lunar-interface__trigger {
  position: absolute;
  right: clamp(160px, 18vw, 330px);
  bottom: clamp(82px, 15vh, 138px);
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.2), rgba(239,93,79,.2) 34%, rgba(11,12,14,.72) 72%);
  box-shadow: 0 16px 38px rgba(0,0,0,.32), 0 0 32px rgba(239,93,79,.2), inset 0 1px rgba(255,255,255,.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  opacity: .68;
  transform: scale(.92);
  transition: transform .28s var(--wl-react-spring), border-color .22s ease, box-shadow .28s ease, opacity .22s ease;
}

.wl-lunar-interface:hover .wl-lunar-interface__trigger,
.wl-lunar-interface__trigger:focus-visible { opacity: 1; }

.wl-lunar-interface__trigger::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(239, 93, 79, .25);
  border-radius: 50%;
  transform: scale(.86);
  opacity: 0;
  transition: transform .28s var(--wl-react-spring), opacity .2s ease;
}

.wl-lunar-interface__trigger:hover,
.wl-lunar-interface__trigger:focus-visible {
  transform: scale(1.075);
  border-color: rgba(255, 255, 255, .64);
  box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 46px rgba(239,93,79,.36), inset 0 1px rgba(255,255,255,.35);
}

.wl-lunar-interface__trigger:hover::after,
.wl-lunar-interface__trigger:focus-visible::after { transform: scale(1); opacity: 1; }
.wl-lunar-interface__trigger:active { transform: scale(.95); }

.wl-lunar-interface__trigger-orbit {
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(255, 255, 255, .23);
  border-radius: 50%;
  animation: wlHudOrbit 12s linear infinite;
}

.wl-test .wl-gallery-tile.wl-gallery-cosmic {
  --wl-gallery-x: 50%;
  --wl-gallery-y: 50%;
  --wl-gallery-rx: 0deg;
  --wl-gallery-ry: 0deg;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.14) !important;
  border-radius: clamp(14px, 1.4vw, 22px) !important;
  transform: perspective(900px) rotateX(var(--wl-gallery-rx)) rotateY(var(--wl-gallery-ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .38s var(--wl-react-spring), border-color .32s ease, box-shadow .38s ease !important;
  will-change: transform;
}

.wl-test .wl-gallery-tile.wl-gallery-cosmic.is-cosmic-active {
  border-color: rgba(255,131,106,.48) !important;
  box-shadow: 0 30px 72px rgba(0,0,0,.38), 0 0 42px rgba(239,93,79,.14), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  transform: perspective(900px) rotateX(var(--wl-gallery-rx)) rotateY(var(--wl-gallery-ry)) translate3d(0, -7px, 8px) scale(1.008);
}

.wl-test .wl-gallery-tile.wl-gallery-cosmic > img,
.wl-test .wl-gallery-tile.wl-gallery-cosmic > svg {
  position: relative;
  z-index: 1;
  transform: scale(1.001);
  transition: transform .65s var(--wl-react-spring), filter .42s ease !important;
}

.wl-test .wl-gallery-tile.wl-gallery-cosmic.is-cosmic-active > img,
.wl-test .wl-gallery-tile.wl-gallery-cosmic.is-cosmic-active > svg {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.035) brightness(1.025);
}

.wl-gallery-cosmos {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.wl-gallery-cosmos__field {
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    radial-gradient(circle at var(--wl-gallery-x) var(--wl-gallery-y), rgba(255,255,255,.25) 0 1%, rgba(239,93,79,.14) 8%, transparent 31%),
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.82) 0 1px, transparent 1.6px),
    radial-gradient(circle at 79% 64%, rgba(255,157,137,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 36%, rgba(255,255,255,.65) 0 .8px, transparent 1.5px);
  background-size: auto, 92px 84px, 137px 123px, 171px 151px;
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}

.wl-gallery-cosmic.is-cosmic-active .wl-gallery-cosmos__field { opacity: .82; }

.wl-gallery-cosmos__orbit {
  position: absolute;
  top: var(--wl-gallery-y);
  left: var(--wl-gallery-x);
  width: 70%;
  aspect-ratio: 1.8;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-17deg) scale(.72);
  transition: opacity .24s ease, transform .48s var(--wl-react-spring);
}

.wl-gallery-cosmos__orbit.orbit-two {
  width: 48%;
  border-color: rgba(239,93,79,.46);
  transform: translate(-50%, -50%) rotate(24deg) scale(.66);
}

.wl-gallery-cosmic.is-cosmic-active .wl-gallery-cosmos__orbit {
  opacity: .64;
  transform: translate(-50%, -50%) rotate(7deg) scale(1);
}

.wl-gallery-cosmic.is-cosmic-active .wl-gallery-cosmos__orbit.orbit-two {
  opacity: .7;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
}

.wl-gallery-cosmos__flare {
  position: absolute;
  top: var(--wl-gallery-y);
  left: var(--wl-gallery-x);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.88), 0 0 34px 13px rgba(239,93,79,.34);
  transform: translate(-50%, -50%) scale(.4);
  transition: opacity .18s ease, transform .28s var(--wl-react-spring);
}

.wl-gallery-cosmic.is-cosmic-active .wl-gallery-cosmos__flare { opacity: .92; transform: translate(-50%, -50%) scale(1); }

.wl-gallery-cosmos__scan {
  position: absolute;
  inset: -35%;
  opacity: 0;
  background: linear-gradient(104deg, transparent 42%, rgba(255,255,255,.18) 49.5%, rgba(255,119,94,.12) 50.5%, transparent 58%);
  transform: translate3d(-72%, 0, 0);
}

.wl-gallery-cosmic.is-cosmic-active .wl-gallery-cosmos__scan {
  animation: wlGalleryScan .82s var(--wl-react-spring) var(--wl-gallery-delay, 0ms) both;
}

.wl-dialog-open { overscroll-behavior: none; }

.wl-dialog-close {
  position: absolute;
  z-index: 8;
  top: 18px;
  right: 18px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 9, 11, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .22s var(--wl-react-spring), background-color .22s ease, border-color .22s ease;
}

.wl-dialog-close:hover,
.wl-dialog-close:focus-visible {
  transform: rotate(7deg) scale(1.06);
  border-color: rgba(239, 93, 79, .68);
  background: rgba(239, 93, 79, .22);
}

.wl-space-dialog,
.wl-product-dialog {
  position: fixed;
  z-index: var(--wl-layer-dialog);
  inset: 0;
  display: grid;
  padding: clamp(14px, 4vw, 54px);
  place-items: center;
  background: rgba(2, 3, 5, .76);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  animation: wlDialogScrimIn .25s ease both;
  box-sizing: border-box;
}

.wl-space-dialog__panel {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  min-height: min(680px, calc(100dvh - 64px));
  grid-template-columns: minmax(360px, .95fr) minmax(390px, 1.05fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: clamp(26px, 3vw, 44px);
  background:
    radial-gradient(circle at 19% 48%, rgba(239,93,79,.16), transparent 34%),
    radial-gradient(circle at 94% 2%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(145deg, rgba(24,25,28,.96), rgba(8,9,11,.96));
  box-shadow: 0 46px 130px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.09), 0 0 70px rgba(239,93,79,.08);
  animation: wlDialogPanelIn .4s var(--wl-react-spring) both;
  box-sizing: border-box;
}

.wl-space-dialog__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(circle at 18% 21%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 77% 14%, rgba(255,176,160,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 73%, rgba(255,255,255,.58) 0 .8px, transparent 1.5px);
  background-size: 170px 150px, 250px 230px, 310px 290px;
  pointer-events: none;
}

.wl-space-dialog__visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.wl-space-dialog__moon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(37vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1c1d1f url('/images/lroc-color-2k.jpg') center / 205% auto no-repeat;
  box-shadow: -30px 12px 70px rgba(0,0,0,.5), 0 0 70px rgba(255,141,119,.14), inset -78px -20px 98px rgba(0,0,0,.76), inset 18px 0 32px rgba(255,223,215,.08);
  transform: translate(-50%, -50%);
  animation: wlMoonFloat 8s ease-in-out infinite alternate;
}

.wl-space-dialog__moon::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: inset 16px 0 28px rgba(255,255,255,.06);
}

.wl-space-dialog__moon-shadow {
  position: absolute;
  inset: -2%;
  display: block;
  border-radius: 50%;
  background: linear-gradient(98deg, transparent 38%, rgba(0,0,0,.16) 54%, rgba(0,0,0,.86) 88%);
}

.wl-space-dialog__orbit {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.wl-space-dialog__orbit span {
  position: absolute;
  display: grid;
  min-width: 42px;
  height: 24px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: rgba(255,255,255,.82);
  background: rgba(10,11,13,.72);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  font: 700 9px/1 Montserrat, Arial, sans-serif;
  white-space: nowrap;
}

.wl-space-dialog__orbit.orbit-one {
  width: min(43vw, 535px);
  aspect-ratio: 1.22;
  animation: wlOrbitTilt 28s linear infinite;
}

.wl-space-dialog__orbit.orbit-two {
  width: min(49vw, 610px);
  aspect-ratio: 1.34;
  border-color: rgba(239,93,79,.2);
  animation: wlOrbitTiltReverse 36s linear infinite;
}

.wl-space-dialog__orbit.orbit-one span:first-child { top: 1%; left: 20%; }
.wl-space-dialog__orbit.orbit-one span:last-child { right: 2%; bottom: 19%; }
.wl-space-dialog__orbit.orbit-two span:nth-child(1) { top: 8%; right: 6%; }
.wl-space-dialog__orbit.orbit-two span:nth-child(2) { bottom: 4%; left: 28%; }
.wl-space-dialog__orbit.orbit-two span:nth-child(3) { top: 36%; left: -3%; }

.wl-space-dialog__content {
  position: relative;
  z-index: 4;
  display: flex;
  padding: clamp(70px, 8vw, 112px) clamp(42px, 6vw, 88px) clamp(48px, 6vw, 82px) 34px;
  flex-direction: column;
  justify-content: center;
}

.wl-space-dialog__logo {
  display: block;
  width: 156px;
  height: auto;
  margin: 0 0 38px;
}

.wl-space-dialog__content h2 {
  max-width: 580px;
  margin: 0;
  color: #fff;
  font: 800 clamp(30px, 3.2vw, 54px)/1.03 Montserrat, Arial, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.wl-space-dialog__content h2 span { color: var(--wl-accent); }

.wl-space-dialog__brands {
  display: flex;
  margin: 35px 0 38px;
  flex-wrap: wrap;
  gap: 8px;
}

.wl-space-dialog__brands span {
  display: grid;
  min-height: 36px;
  padding: 0 14px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: #fff;
  background: rgba(255,255,255,.06);
  font: 800 11px/1 Montserrat, Arial, sans-serif;
}

.wl-space-dialog__cta {
  display: inline-flex;
  width: fit-content;
  min-height: 52px;
  padding: 0 25px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 99px;
  color: #fff !important;
  background: linear-gradient(100deg, #e84d3a, #ff705a);
  box-shadow: 0 16px 42px rgba(239,93,79,.24), inset 0 1px rgba(255,255,255,.24);
  font: 800 13px/1 Montserrat, Arial, sans-serif;
  text-decoration: none !important;
  transition: transform .25s var(--wl-react-spring), box-shadow .25s ease;
}

.wl-space-dialog__cta:hover,
.wl-space-dialog__cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(239,93,79,.36), inset 0 1px rgba(255,255,255,.28);
}

.wl-product-dialog__panel {
  position: relative;
  display: flex;
  width: min(620px, 100%);
  height: min(790px, calc(100dvh - 42px));
  padding: 42px 76px 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: clamp(26px, 4vw, 42px);
  background: radial-gradient(circle at 50% 35%, rgba(239,93,79,.15), transparent 43%), rgba(13,14,16,.94);
  box-shadow: 0 48px 140px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.08);
  animation: wlDialogPanelIn .4s var(--wl-react-spring) both;
  box-sizing: border-box;
}

.wl-product-dialog__halo {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 630px;
  aspect-ratio: 1;
  border: 1px solid rgba(239,93,79,.2);
  border-radius: 50%;
  box-shadow: 0 0 120px rgba(239,93,79,.11), inset 0 0 70px rgba(255,255,255,.025);
  transform: translate(-50%, -50%);
  animation: wlHaloBreathe 5.4s ease-in-out infinite alternate;
}

.wl-product-dialog__preview {
  position: relative;
  z-index: 2;
  width: min(390px, 100%);
  aspect-ratio: 534 / 740;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow: 0 32px 76px rgba(0,0,0,.5), 0 0 48px rgba(239,93,79,.13);
  transform: translateZ(0);
}

.wl-product-dialog__preview::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 13px;
  left: 50%;
  width: 38px;
  height: 27px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  background:
    radial-gradient(circle at 50% 50%, var(--wl-accent) 0 2px, rgba(239,93,79,.14) 2.5px 6px, transparent 6.5px),
    rgba(24,25,27,.97);
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
  transform: translateX(-50%);
  pointer-events: none;
}

.wl-product-clone {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.wl-product-clone .wl-dope-product { z-index: 3 !important; }

.wl-card-react-fx {
  position: absolute;
  z-index: 82;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateZ(18px);
}

.wl-card-react-fx__orbit,
.wl-card-react-fx__spark,
.wl-card-react-fx__horizon {
  position: absolute;
  display: block;
  pointer-events: none;
}

.wl-card-react-fx__orbit {
  top: var(--wl-card-y, 50%);
  left: var(--wl-card-x, 50%);
  border: 1px solid rgba(255, 197, 185, .42);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-18deg) scale(.62);
  transition: opacity .36s ease, transform .82s var(--wl-react-spring);
}

.wl-card-react-fx__orbit.orbit-one {
  width: 92%;
  aspect-ratio: 1.74;
  box-shadow: 0 0 30px rgba(239,93,79,.08);
}

.wl-card-react-fx__orbit.orbit-two {
  width: 64%;
  aspect-ratio: 1.24;
  border-color: rgba(255,255,255,.25);
  transform: translate(-50%, -50%) rotate(23deg) scale(.64);
}

.wl-card-react-fx__spark {
  top: var(--wl-card-spark-y);
  left: var(--wl-card-spark-x);
  width: 3px;
  height: 3px;
  opacity: 0;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(239,93,79,.9));
  transform: scale(.15) rotate(28deg);
}

.wl-card-react-fx__spark::before,
.wl-card-react-fx__spark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #fff, rgba(255,133,111,.86), transparent);
  transform: translate(-50%, -50%);
}

.wl-card-react-fx__spark::before { width: 15px; height: 1px; }
.wl-card-react-fx__spark::after { width: 1px; height: 15px; }

.wl-card-react-fx__horizon {
  right: -18%;
  bottom: 16%;
  left: -18%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(239,93,79,.92) 42%, #fff 50%, rgba(239,93,79,.62) 58%, transparent);
  box-shadow: 0 0 14px rgba(239,93,79,.56), 0 -16px 44px rgba(239,93,79,.12);
  transform: translateX(-72%) rotate(-3deg);
  transition: opacity .3s ease, transform .88s var(--wl-react-spring);
}

.wl-premium-card:hover > .wl-card-react-fx .wl-card-react-fx__orbit.orbit-one {
  opacity: .52;
  transform: translate(-50%, -50%) rotate(18deg) scale(1.06);
}

.wl-premium-card:hover > .wl-card-react-fx .wl-card-react-fx__orbit.orbit-two {
  opacity: .34;
  transform: translate(-50%, -50%) rotate(-15deg) scale(1.04);
}

.wl-premium-card:hover > .wl-card-react-fx .wl-card-react-fx__spark {
  animation: wlCardSpark 1.08s var(--wl-react-spring) var(--wl-card-spark-delay) both;
}

.wl-premium-card:hover > .wl-card-react-fx .wl-card-react-fx__horizon {
  opacity: .82;
  transform: translateX(72%) rotate(-3deg);
}

.wl-story-react-stage { position: relative; }

.wl-story-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.wl-story-stage__sticky {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

.wl-story-stage-fixed .wl-story-stage__sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.wl-story-stage-after .wl-story-stage__sticky {
  top: auto;
  bottom: 0;
}

.wl-story-stage__nebula,
.wl-story-stage__moon,
.wl-story-stage__orbits,
.wl-story-stage__constellation,
.wl-story-stage__flare {
  position: absolute;
  display: block;
  pointer-events: none;
}

.wl-story-stage__nebula {
  z-index: 0;
  inset: -15%;
  opacity: var(--wl-story-nebula-opacity, .4);
  background:
    radial-gradient(ellipse at 14% 35%, rgba(239,93,79,.16), transparent 32%),
    radial-gradient(ellipse at 76% 62%, rgba(121,129,145,.1), transparent 34%),
    radial-gradient(ellipse at 52% 13%, rgba(255,255,255,.045), transparent 24%);
  filter: blur(28px) saturate(115%);
  transform: translate3d(0, var(--wl-story-nebula-y, 0px), 0) scale(1.04);
}

.wl-story-stage__moon {
  z-index: 1;
  top: 8%;
  right: -13vw;
  width: min(58vw, 910px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .28;
  background:
    linear-gradient(104deg, rgba(4,5,7,.88) 0 19%, transparent 53%),
    url('/images/lroc-color-2k.jpg') 48% 52% / 205% auto no-repeat,
    #282b30;
  box-shadow: inset 34px -24px 72px rgba(0,0,0,.72), -22px 6px 90px rgba(239,93,79,.08);
  filter: grayscale(.9) contrast(1.16) brightness(1.18);
  mix-blend-mode: screen;
  transform: translate3d(0, var(--wl-story-moon-y, 0px), 0) rotate(var(--wl-story-moon-rotate, -8deg));
  transform-origin: center;
  will-change: transform;
}

.wl-story-stage__moon::before {
  content: '';
  position: absolute;
  inset: -4%;
  display: block;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(239,93,79,.08), inset 0 0 52px rgba(255,255,255,.03);
}

.wl-story-stage__moon i {
  position: absolute;
  inset: -14%;
  display: block;
  border: 1px solid rgba(239,93,79,.18);
  border-radius: 50%;
  transform: rotate(18deg) scaleY(.72);
}

.wl-story-stage__orbits {
  z-index: 2;
  top: -5%;
  right: -18vw;
  width: min(70vw, 1080px);
  height: auto;
  overflow: visible;
  opacity: .27;
  fill: none;
  stroke: rgba(255,181,166,.74);
  stroke-width: 1;
  stroke-dasharray: 4 15 110 28;
  transform: translate3d(0, var(--wl-story-orbit-y, 0px), 0) rotate(var(--wl-story-orbit-rotate, 3.6deg));
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(239,93,79,.16));
}

.wl-story-stage__constellation {
  z-index: 3;
  top: 17%;
  left: 7%;
  width: 30vw;
  height: 38vh;
  opacity: .33;
  background:
    linear-gradient(24deg, transparent 0 23%, rgba(255,255,255,.15) 23.2% 23.4%, transparent 23.6%),
    linear-gradient(142deg, transparent 0 54%, rgba(239,93,79,.17) 54.15% 54.35%, transparent 54.5%);
}

.wl-story-stage__constellation i {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 15px rgba(239,93,79,.5);
  transform: rotate(45deg);
}

.wl-story-stage__constellation i:nth-child(1) { top: 13%; left: 8%; }
.wl-story-stage__constellation i:nth-child(2) { top: 43%; left: 31%; width: 4px; height: 4px; }
.wl-story-stage__constellation i:nth-child(3) { top: 27%; left: 66%; }
.wl-story-stage__constellation i:nth-child(4) { top: 73%; left: 48%; width: 3px; height: 3px; }
.wl-story-stage__constellation i:nth-child(5) { top: 61%; left: 88%; }

.wl-story-stage__flare {
  z-index: 4;
  left: var(--wl-story-flare-x, 12%);
  bottom: 11%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(255,255,255,.85), 0 0 42px 15px rgba(239,93,79,.26), 0 0 110px 38px rgba(239,93,79,.08);
  transition: left .18s linear;
}

.wl-kinetic-title { overflow: visible !important; }

.wl-kinetic-title .node-atom {
  opacity: .18;
  clip-path: inset(0 100% 0 0);
  filter: blur(7px);
  transform: translate3d(0, 22px, 0) rotateX(-7deg);
  transform-origin: left bottom;
  transition: opacity .7s ease, clip-path 1.08s var(--wl-react-spring), filter .85s ease, transform 1s var(--wl-react-spring);
}

.wl-kinetic-title.is-revealed .node-atom {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotateX(0);
}

.wl-kinetic-title::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 6%;
  bottom: 6%;
  left: -8%;
  display: block;
  width: 8%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), rgba(239,93,79,.26), transparent);
  filter: blur(2px);
  transform: skewX(-14deg) translateX(-160%);
  pointer-events: none;
}

.wl-kinetic-title.is-revealed::after { animation: wlTitleSweep 1.05s var(--wl-react-spring) .18s both; }

.wl-section-orbit {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.wl-section-orbit.is-on { opacity: 1; }

.wl-section-orbit__ring {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(239,93,79,.035);
}

.wl-section-orbit--projects .ring-one {
  top: 8%;
  right: -17vw;
  width: min(76vw, 1100px);
  aspect-ratio: 1;
}

.wl-section-orbit--projects .ring-two {
  top: 16%;
  right: -9vw;
  width: min(58vw, 840px);
  aspect-ratio: 1;
  border-color: rgba(239,93,79,.1);
}

.wl-section-orbit--brands .ring-one {
  left: -18vw;
  bottom: -48vw;
  width: 72vw;
  aspect-ratio: 1;
  border-color: rgba(239,93,79,.12);
}

.wl-section-orbit--gallery .ring-one {
  top: 8%;
  left: 50%;
  width: min(88vw, 1320px);
  aspect-ratio: 1.8;
  transform: translateX(-50%) rotate(-7deg);
}

.wl-section-orbit--gallery .ring-two {
  top: 13%;
  left: 50%;
  width: min(72vw, 1080px);
  aspect-ratio: 1.8;
  transform: translateX(-50%) rotate(4deg);
  border-color: rgba(239,93,79,.08);
}

.wl-section-orbit__flare {
  position: absolute;
  right: 8%;
  top: 22%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255,255,255,.7), 0 0 34px 11px rgba(239,93,79,.23);
}

.wl-react-arrival.wl-react-arrived {
  animation: wlContentArrival .66s var(--wl-react-spring) both;
  animation-delay: calc(var(--wl-arrival-order, 0) * 34ms);
}

/* Technical card counters from the early layout are intentionally absent in the presentation version. */
.wl-test :is(#blk8891390124, #blk8101421105) :is(
  [data-node-id="8141411141383"],
  [data-node-id="8431529126571"]
) > .node-atom::after { content: none !important; display: none !important; }

@keyframes wlHudOrbit { to { transform: rotate(360deg); } }
@keyframes wlHudOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes wlEnergyScan {
  0% { opacity: 0; transform: translate3d(-110%, 0, 0); }
  25%, 55% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(110%, 0, 0); }
}
@keyframes wlCardSpark {
  0% { opacity: 0; transform: scale(.15) rotate(28deg); }
  28% { opacity: .9; transform: scale(1.2) rotate(0); }
  72% { opacity: .54; transform: scale(.72) rotate(-16deg); }
  100% { opacity: 0; transform: scale(.12) rotate(-31deg); }
}
@keyframes wlTitleSweep {
  0% { opacity: 0; transform: skewX(-14deg) translateX(-160%); }
  28% { opacity: .58; }
  100% { opacity: 0; transform: skewX(-14deg) translateX(1380%); }
}
@keyframes wlDialogScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlDialogPanelIn {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wlMoonFloat {
  from { transform: translate(-50%, -50%) rotate(-1.2deg) scale(.985); }
  to { transform: translate(-50%, -52%) rotate(1.4deg) scale(1.015); }
}
@keyframes wlOrbitTilt {
  from { transform: translate(-50%, -50%) rotate(-18deg); }
  to { transform: translate(-50%, -50%) rotate(342deg); }
}
@keyframes wlOrbitTiltReverse {
  from { transform: translate(-50%, -50%) rotate(12deg); }
  to { transform: translate(-50%, -50%) rotate(-348deg); }
}
@keyframes wlHaloBreathe {
  from { opacity: .42; transform: translate(-50%, -50%) scale(.94); }
  to { opacity: .92; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes wlContentArrival {
  from { opacity: .45; transform: translate3d(0, 20px, 0) scale(.985); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes wlGalleryScan {
  0% { opacity: 0; transform: translate3d(-72%, 0, 0); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(72%, 0, 0); }
}
@keyframes wlEclipseSweep {
  0%, 62% { opacity: 0; transform: translate3d(-15%, 0, 0) rotate(-8deg); }
  72% { opacity: .3; }
  90%, 100% { opacity: 0; transform: translate3d(18%, 0, 0) rotate(-8deg); }
}

@media (max-width: 1199px) {
  .wl-cosmic-dock { display: none; }
  .wl-cosmic-field.is-on { opacity: .48; }
  .wl-lunar-interface__rings { top: -11%; right: -49%; width: 126vw; opacity: .72; }
  .wl-lunar-interface__trigger { right: 9vw; bottom: 78px; }
  .wl-section-orbit--projects .ring-one { right: -46vw; width: 118vw; }
  .wl-story-stage__moon { right: -39vw; width: 94vw; opacity: .12; }
  .wl-story-stage__orbits { right: -47vw; width: 112vw; opacity: .19; }
  .wl-story-stage__constellation { width: 43vw; }
}

@media (max-width: 767px) {
  .wl-cosmic-field.is-on { opacity: .34; }
  .wl-lunar-interface__rings { top: 4%; right: -69%; width: 154vw; opacity: .56; }
  .wl-lunar-interface__trigger {
    right: max(15px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px));
    width: 50px;
    height: 50px;
  }
  .wl-space-dialog,
  .wl-product-dialog {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .wl-space-dialog__panel {
    width: 100%;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(230px, 38dvh) auto;
    overflow-y: auto;
    border-radius: 24px;
  }
  .wl-space-dialog__visual { min-height: 230px; }
  .wl-space-dialog__moon { width: min(64vw, 260px); }
  .wl-space-dialog__orbit.orbit-one { width: min(82vw, 330px); }
  .wl-space-dialog__orbit.orbit-two { width: min(94vw, 380px); }
  .wl-space-dialog__orbit span { display: none; }
  .wl-space-dialog__content {
    padding: 28px 22px 30px;
    justify-content: flex-start;
  }
  .wl-space-dialog__logo { width: 116px; margin-bottom: 24px; }
  .wl-space-dialog__content h2 { font-size: clamp(26px, 8.5vw, 38px); }
  .wl-space-dialog__brands { margin: 24px 0; gap: 6px; }
  .wl-space-dialog__brands span { min-height: 34px; padding-inline: 11px; font-size: 9px; }
  .wl-space-dialog__cta { width: 100%; box-sizing: border-box; }
  .wl-product-dialog__panel {
    width: 100%;
    height: 100%;
    padding: 62px 18px 26px;
    border-radius: 24px;
  }
  .wl-product-dialog__preview { width: min(77vw, 340px); }
  .wl-product-dialog__halo { width: 118vw; }
  .wl-section-orbit__ring,
  .wl-section-orbit__flare { opacity: .54; }
  .wl-gallery-cosmos__orbit,
  .wl-gallery-cosmos__flare,
  .wl-gallery-cosmos__scan { display: none; }
  .wl-gallery-cosmos__field { opacity: .3; }
  .wl-story-stage__sticky { min-height: 520px; }
  .wl-story-stage__moon { top: 18%; right: -70vw; width: 142vw; opacity: .085; }
  .wl-story-stage__orbits { top: 8%; right: -81vw; width: 158vw; opacity: .13; }
  .wl-story-stage__constellation { display: none; }
  .wl-story-stage__flare { opacity: .58; }
  .wl-card-react-fx { mix-blend-mode: normal; opacity: .72; }
  .wl-card-react-fx__orbit { display: none; }
}

@media (max-width: 430px) and (max-height: 700px) {
  .wl-space-dialog__panel { grid-template-rows: 190px auto; }
  .wl-space-dialog__visual { min-height: 190px; }
  .wl-space-dialog__moon { width: 180px; }
  .wl-space-dialog__content { padding-top: 20px; }
  .wl-space-dialog__logo { margin-bottom: 16px; }
  .wl-space-dialog__brands { margin: 17px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-cosmic-field.is-on { opacity: .32; }
  .wl-lunar-interface__rings .ring,
  .wl-lunar-interface__rings .satellites,
  .wl-lunar-interface__trigger-orbit,
  .wl-lunar-interface__eclipse,
  .wl-space-dialog__moon,
  .wl-space-dialog__orbit,
  .wl-product-dialog__halo { animation: none !important; }
  .wl-space-dialog,
  .wl-product-dialog,
  .wl-space-dialog__panel,
  .wl-product-dialog__panel,
  .wl-react-arrival.wl-react-arrived { animation-duration: .001ms !important; }
  .wl-gallery-cosmic,
  .wl-gallery-cosmic.is-cosmic-active,
  .wl-gallery-cosmic > img,
  .wl-gallery-cosmic > svg { transform: none !important; transition: none !important; }
  .wl-spark-layer,
  .wl-card-react-fx,
  .wl-button-energy__scan { display: none !important; }
  .wl-button-energy__rim,
  .wl-button-energy__light { transition: none; }
  .wl-story-stage__nebula,
  .wl-story-stage__moon,
  .wl-story-stage__orbits,
  .wl-story-stage__flare { transition: none !important; animation: none !important; }
  .wl-kinetic-title .node-atom,
  .wl-kinetic-title.is-revealed .node-atom {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .wl-kinetic-title::after { display: none !important; }
}