:root{
  --nfx-gold:#d8ad58;
  --nfx-violet:#7b3fc5;
  --nfx-bg:rgba(10,8,14,.92);
  --nfx-line:rgba(223,184,102,.26);
  --nfx-muted:rgba(255,255,255,.62);
}

/* Runtime is intentionally non-blocking. */
#nana-experience-dock{
  position:fixed;
  z-index:850;
  right:20px;
  bottom:20px;

  width:min(380px,calc(100vw - 32px));

  border:1px solid var(--nfx-line);
  border-radius:24px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(113,46,153,.22),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(11,8,15,.97),
      rgba(22,11,29,.94)
    );

  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 40px rgba(110,43,151,.08);

  backdrop-filter:blur(22px);

  color:#fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  pointer-events:auto;
}

#nana-experience-dock *{
  box-sizing:border-box;
}

.nfx-head{
  height:54px;
  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  border-bottom:1px solid rgba(223,184,102,.12);
}

.nfx-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nfx-brand strong{
  color:var(--nfx-gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  letter-spacing:.13em;
  font-weight:500;
}

.nfx-brand span{
  color:rgba(255,255,255,.47);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.nfx-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.nfx-icon{
  width:34px;
  height:34px;
  padding:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(223,184,102,.18);
  border-radius:999px;

  background:rgba(255,255,255,.025);
  color:#fff;

  cursor:pointer;
}

.nfx-body{
  position:relative;
  min-height:390px;
  padding:16px;
}

.nfx-stage{
  position:relative;
  height:230px;

  overflow:hidden;

  border:1px solid rgba(223,184,102,.16);
  border-radius:19px;

  background:
    radial-gradient(
      ellipse at 50% 84%,
      rgba(213,164,77,.16),
      transparent 45%
    ),
    radial-gradient(
      circle at 50% 26%,
      rgba(122,55,176,.18),
      transparent 42%
    ),
    rgba(3,3,5,.66);
}

.nfx-stage::before{
  content:"";
  position:absolute;
  inset:-25% 22% 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,225,163,.09),
      transparent 78%
    );

  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  filter:blur(8px);
  pointer-events:none;

  animation:nfx-light 7s ease-in-out infinite;
}

.nfx-performer{
  position:absolute;
  left:50%;
  top:50%;

  width:138px;
  height:184px;

  transform:
    translate(-50%,-50%)
    rotate(-2deg);

  transform-origin:50% 85%;

  border-radius:52% 52% 42% 42% / 38% 38% 62% 62%;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      rgba(215,170,81,.20),
      rgba(116,50,174,.20)
    );

  box-shadow:
    0 18px 50px rgba(0,0,0,.42);

  animation:
    nfx-dance 1.05s
    cubic-bezier(.42,.05,.58,.95)
    infinite;
}

.nfx-performer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  filter:
    saturate(1.04)
    contrast(1.02);
}

.nfx-stage-label{
  position:absolute;
  left:12px;
  bottom:10px;

  z-index:4;

  padding:6px 9px;

  border:1px solid rgba(223,184,102,.16);
  border-radius:999px;

  background:rgba(5,4,7,.66);
  color:rgba(255,255,255,.72);

  font-size:9px;
  letter-spacing:.08em;
}

.nfx-wardrobe{
  position:absolute;
  right:9px;
  top:9px;

  z-index:5;

  display:flex;
  flex-direction:column;
  gap:6px;

  max-height:210px;
  overflow-y:auto;
  scrollbar-width:none;
}

.nfx-wardrobe::-webkit-scrollbar{
  display:none;
}

.nfx-look{
  width:40px;
  height:47px;
  padding:2px;

  border:1px solid rgba(223,184,102,.18);
  border-radius:10px;

  background:rgba(4,4,6,.72);

  overflow:hidden;
  opacity:.54;

  cursor:pointer;

  transition:
    transform .18s ease,
    opacity .18s ease,
    border-color .18s ease;
}

.nfx-look img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:7px;
}

.nfx-look:hover,
.nfx-look:focus,
.nfx-look.active{
  opacity:1;
  transform:translateX(-3px) scale(1.06);
  border-color:rgba(235,198,116,.70);
  outline:none;
}

.nfx-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:12px;
}

.nfx-btn,
.nfx-nav a{
  min-height:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 11px;

  border:1px solid rgba(223,184,102,.18);
  border-radius:999px;

  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.88);

  text-decoration:none;
  font-size:10px;

  cursor:pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.nfx-btn:hover,
.nfx-nav a:hover,
.nfx-btn:focus,
.nfx-nav a:focus{
  transform:translateY(-2px);
  background:rgba(118,51,168,.18);
  border-color:rgba(223,184,102,.48);
  outline:none;
}

.nfx-nav{
  display:flex;
  gap:6px;

  margin-top:12px;

  overflow-x:auto;
  scrollbar-width:none;
}

.nfx-nav::-webkit-scrollbar{
  display:none;
}

.nfx-nav a{
  flex:0 0 auto;
}

.nfx-status{
  margin-top:10px;
  color:var(--nfx-muted);
  font-size:9px;
  letter-spacing:.04em;
}

#nana-experience-dock.nfx-collapsed{
  width:164px;
}

#nana-experience-dock.nfx-collapsed .nfx-body{
  display:none;
}

#nana-experience-dock.nfx-collapsed .nfx-head{
  border-bottom:0;
}

@keyframes nfx-dance{
  0%,100%{
    transform:
      translate(-50%,-50%)
      rotate(-3deg)
      translateY(0)
      scale(1);
  }

  25%{
    transform:
      translate(-50%,-50%)
      rotate(4deg)
      translateY(-8px)
      scale(1.015);
  }

  50%{
    transform:
      translate(-50%,-50%)
      rotate(-2deg)
      translateY(0)
      scale(.99);
  }

  75%{
    transform:
      translate(-50%,-50%)
      rotate(3deg)
      translateY(-5px)
      scale(1.01);
  }
}

@keyframes nfx-light{
  0%,100%{
    transform:translateX(-8%) rotate(-2deg);
    opacity:.55;
  }

  50%{
    transform:translateX(8%) rotate(2deg);
    opacity:.92;
  }
}

/* iPhone: bottom sheet, but customer page stays visible. */
@media(max-width:699px){
  #nana-experience-dock{
    left:10px;
    right:10px;
    bottom:10px;

    width:auto;
    max-height:52vh;

    border-radius:20px;
  }

  .nfx-body{
    min-height:0;
    padding:11px;
  }

  .nfx-stage{
    height:190px;
  }

  .nfx-performer{
    width:116px;
    height:154px;
  }

  .nfx-wardrobe{
    flex-direction:row;

    left:8px;
    right:8px;
    top:auto;
    bottom:8px;

    max-height:none;

    overflow-x:auto;
    overflow-y:hidden;
  }

  .nfx-look{
    flex:0 0 auto;
    width:36px;
    height:42px;
  }

  #nana-experience-dock.nfx-collapsed{
    left:auto;
    width:164px;
  }
}

/* iPad */
@media(min-width:700px) and (max-width:1499px){
  #nana-experience-dock{
    width:340px;
  }

  .nfx-stage{
    height:220px;
  }
}

/* Apple TV / large-screen browser */
@media(min-width:1500px){
  #nana-experience-dock{
    right:34px;
    bottom:34px;

    width:440px;

    border-radius:30px;
  }

  .nfx-head{
    height:66px;
    padding:0 20px;
  }

  .nfx-brand strong{
    font-size:22px;
  }

  .nfx-body{
    min-height:470px;
    padding:20px;
  }

  .nfx-stage{
    height:295px;
    border-radius:23px;
  }

  .nfx-performer{
    width:176px;
    height:234px;
  }

  .nfx-btn,
  .nfx-nav a{
    min-height:48px;
    padding:11px 16px;
    font-size:13px;
  }

  .nfx-look{
    width:52px;
    height:61px;
  }
}

@media(prefers-reduced-motion:reduce){
  .nfx-performer,
  .nfx-stage::before{
    animation:none !important;
  }
}