.character-product-hotspots {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
}
.character-product-hotspot {
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent;
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.character-product-hotspot::after {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: min(8dvh, 72px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid transparent; transform: translate(-50%, -50%) scale(.8);
  transition: border-color 80ms ease, box-shadow 80ms ease, transform 80ms ease;
  pointer-events: none;
}
.character-product-hotspot:hover::after,
.character-product-hotspot:focus-visible::after {
  transition-duration: 0ms;
  border-color: rgba(167,111,255,.52);
  box-shadow: 0 0 24px rgba(73,223,255,.18), inset 0 0 20px rgba(255,75,215,.08);
  transform: translate(-50%, -50%) scale(1);
}
.product-introduction-overlay {
  position: fixed; inset: 0; z-index: 2147483646; isolation: isolate;
  overflow: hidden; background: #000; color: #fff;
  font: 14px/1.5 'Microsoft YaHei',system-ui,sans-serif;
}
.product-introduction-surface {
  position: absolute; inset: 0; background: #000;
  transform-origin: var(--origin-x) var(--origin-y);
  animation: product-aperture-expand 920ms cubic-bezier(.2,.88,.2,1) both;
  will-change: clip-path, transform, opacity, filter;
}
.product-introduction-overlay[data-state="open"] .product-introduction-surface {
  clip-path: none; transform: none; opacity: 1; filter: none; will-change: auto;
}
.product-introduction-overlay[data-state="opening"] { background: transparent; }
.product-introduction-overlay[data-state="closing"] { background: transparent; pointer-events: none; }
.product-introduction-overlay[data-state="closing"] .product-introduction-close { visibility: hidden; }
.product-introduction-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; }
.product-introduction-frame.is-ready { opacity: 1; transition: opacity 180ms ease; }
.product-introduction-close {
  position: absolute; z-index: 4; top: max(8px,env(safe-area-inset-top)); right: max(8px,env(safe-area-inset-right));
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  color: #fff; background: rgba(12,14,20,.94); border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%; font: 28px/1 system-ui,sans-serif; cursor: pointer;
}
.product-introduction-close:hover,.product-introduction-close:focus-visible { background: #303340; outline: 2px solid #a9edff; outline-offset: 2px; }
.product-introduction-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; }
.product-introduction-loading[hidden] { display: none; }
.product-introduction-spinner { width: 34px; height: 34px; border: 1px solid #ffffff40; border-top-color: #fff; border-radius: 50%; animation: product-aperture-spin 780ms linear infinite; }
.product-introduction-retry { padding: 8px 18px; color: #fff; background: #20242e; border: 1px solid #ffffff70; border-radius: 20px; cursor: pointer; }
.product-aperture-ring {
  position: absolute; z-index: 3; left: var(--origin-x); top: var(--origin-y); width: 48px; height: 48px;
  box-sizing: border-box; border: 1px solid rgba(255,255,255,.82); border-radius: 50%;
  box-shadow: 0 0 16px rgba(255,255,255,.18); pointer-events: none;
  animation: product-minimal-ring 580ms cubic-bezier(.2,.85,.2,1) both;
}
@keyframes product-aperture-expand {
  0% { clip-path: circle(2px at var(--origin-x) var(--origin-y)); opacity: 0; filter: blur(5px); transform: scale(.985); }
  22% { clip-path: circle(12vmax at var(--origin-x) var(--origin-y)); opacity: 1; filter: blur(1.5px); }
  68% { clip-path: circle(104vmax at var(--origin-x) var(--origin-y)); filter: none; transform: scale(1.006); }
  100% { clip-path: circle(175vmax at var(--origin-x) var(--origin-y)); opacity: 1; filter: none; transform: scale(1); }
}
@keyframes product-minimal-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  28% { opacity: .82; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.35); }
}
@keyframes product-aperture-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .product-introduction-surface,.product-aperture-ring { animation-duration: 1ms; }
  .character-product-hotspot::after { transition-duration: 1ms; }
}