/* Product introductions live around the floating object, never inside its canvas. */
.pd-3d-view[data-has-hotspots] .pd-hotspot{
  --min-hotspot-opacity:0;box-sizing:border-box;position:relative;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:1px solid #ffffffb3;border-radius:50%;
  background:#edf6ffed;color:#122d56;box-shadow:0 0 0 6px #c5e8ff22,0 5px 22px #071b3d3d;
  font:600 12px/1 DmlumaUI,var(--preview-language-font,Arial),sans-serif;
  cursor:pointer;transition:background .2s,box-shadow .2s,opacity .2s;
}
.pd-hotspot::before{content:"";position:absolute;inset:5px;border:1px solid #173a6524;border-radius:50%;pointer-events:none}
.pd-3d-view[data-has-hotspots] .pd-hotspot:hover,.pd-3d-view[data-has-hotspots] .pd-hotspot[aria-pressed="true"]{background:#ffe8a8;box-shadow:0 0 0 8px #ffe8a81c,0 5px 24px #06173542;border-color:#ffeebb}
.pd-hotspot[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.pd-hotspot-guide,.pd-hotspot-card{position:absolute;z-index:3;box-sizing:border-box;direction:inherit}
.pd-hotspot-guide{inset-inline-start:clamp(24px,5vw,88px);top:43%;width:180px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pd-hotspot-guide-label{margin:0;color:#f4f8ff;font-size:12px;line-height:1.75;text-shadow:0 1px 10px #071b3d77}
.pd-hotspot-start{border:0;border-bottom:1px solid #ffffff7a;background:transparent;padding:0 0 7px;color:#fff;min-height:38px;font:500 13px/1.5 DmlumaUI,var(--preview-language-font,Arial),sans-serif;cursor:pointer;text-align:start}
.pd-hotspot-nav{display:flex;align-items:center;gap:7px;direction:ltr}
.pd-hotspot-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff47;border-radius:50%;background:#102b4870;color:#fff;font:400 12px/1 DmlumaUI,var(--preview-language-font,Arial),sans-serif;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,color .2s}
.pd-hotspot-step:hover{background:#244365d9}
.pd-hotspot-step[aria-pressed="true"]{background:#ffe8a8;color:#0b2b53;border-color:#ffe8a8}
.pd-hotspot-card{
  inset-inline-end:clamp(24px,5vw,88px);top:50%;transform:translateY(-50%);width:clamp(260px,24vw,330px);
  max-height:calc(100dvh - 240px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#68839c66 transparent;
  padding:28px;border:1px solid #ffffffe0;border-radius:20px;
  background:linear-gradient(145deg,#f6faffef,#fdf6f4eb);color:#153455;
  box-shadow:0 24px 90px #04183229;backdrop-filter:blur(24px);animation:pd-hotspot-card-in .35s ease both;
}
.pd-hotspot-kicker{display:block;margin:0 0 16px;font-size:10px;line-height:1.5;font-weight:500;letter-spacing:.12em;color:#5b748e}
.pd-hotspot-title{margin:0 0 14px;font:500 clamp(21px,2vw,27px)/1.35 DmlumaUI,var(--preview-language-font,Arial),sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.pd-hotspot-title:focus-visible{outline:2px solid #7ba8c7;outline-offset:5px;border-radius:2px}
.pd-hotspot-body{margin:0;font-size:14px;line-height:1.8;color:#506a83;white-space:pre-line}
.pd-hotspot-pending{display:inline-flex;margin:16px 0 0;padding:5px 10px;border-radius:20px;background:#f8e5b8;color:#786130;font-size:10px;line-height:1.4}
.pd-hotspot-media{margin:16px 0 0;overflow:hidden;border-radius:10px}
.pd-hotspot-media img,.pd-hotspot-media video{display:block;max-width:100%;width:100%;height:auto;max-height:240px;object-fit:contain;background:#e7edf2}
.pd-hotspot-media-placeholder{margin:17px 0 0;padding-top:16px;border-top:1px solid #1534551a;color:#698098;font-size:11px;line-height:1.6}
.pd-hotspot-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.pd-hotspot-next,.pd-hotspot-close{font:500 12px/1.5 DmlumaUI,var(--preview-language-font,Arial),sans-serif;min-height:44px;cursor:pointer;border-radius:24px;padding:10px 16px}
.pd-hotspot-next{background:#153455;color:#fff;border:1px solid #153455}
.pd-hotspot-next:hover{background:#24547f}
.pd-hotspot-close{background:transparent;color:#36536f;border:1px solid #15345529}
.pd-hotspot-close:hover{background:#e3edf6}
.pd-3d-view[data-hotspot-active] .pd-hotspot-guide-label,.pd-3d-view[data-hotspot-active] .pd-hotspot-start{display:none}
.pd-dialog--model .pd-3d-view[data-has-hotspots] .pd-3d-canvas{transition:left .45s ease,right .45s ease,top .45s ease,bottom .45s ease}
.pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{inset:0 36% 0 14%}
.pd-3d-view[data-hotspot-active] .pd-hotspot:not([aria-pressed="true"]){visibility:hidden;pointer-events:none}
.pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-model{mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 30px),transparent)}
.pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-hotspot-guide{top:auto;bottom:147px}
@keyframes pd-hotspot-card-in{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(min-width:721px) and (max-width:1050px){
  .pd-hotspot-guide{top:160px;width:170px}
  .pd-hotspot-card{inset-inline-end:24px;width:270px;padding:22px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{left:4%;right:39%}
}
@media(max-width:720px){
  .pd-hotspot-guide{top:auto;bottom:128px;inset-inline-start:18px;inset-inline-end:18px;width:auto;flex-direction:row;align-items:center;justify-content:center;gap:12px}
  .pd-hotspot-guide-label{display:none}
  .pd-hotspot-start{font-size:12px;max-width:145px}
  .pd-hotspot-nav{gap:6px}
  .pd-hotspot-step{width:40px;height:40px}
  .pd-dialog--model .pd-3d-view[data-has-hotspots] .pd-3d-canvas{bottom:190px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{inset:140px 5px 364px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-hotspot-guide{top:88px;bottom:auto;justify-content:center}
  .pd-hotspot-card{top:auto;bottom:116px;inset-inline:16px;width:auto;max-height:240px;padding:18px 20px;border-radius:18px;transform:none}
  .pd-hotspot-kicker{margin-bottom:8px;font-size:9px}
  .pd-hotspot-title{font-size:21px;margin-bottom:8px}
  .pd-hotspot-body{font-size:13px;line-height:1.6}
  .pd-hotspot-pending{margin-top:9px;padding:4px 8px}
  .pd-hotspot-media-placeholder{margin-top:9px;padding-top:9px;font-size:10px}
  .pd-hotspot-actions{margin-top:12px;gap:8px}
  .pd-hotspot-next,.pd-hotspot-close{min-height:40px;padding:8px 14px;font-size:11px}
  .pd-hotspot-media img,.pd-hotspot-media video{max-height:140px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-hint{display:none}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-footer{bottom:max(24px,env(safe-area-inset-bottom))}
}
@media(max-height:740px) and (max-width:720px) and (orientation:portrait){
  .pd-hotspot-card{bottom:82px;max-height:200px;padding:14px 18px}
  .pd-hotspot-title{font-size:19px}.pd-hotspot-kicker{margin-bottom:6px}
  .pd-hotspot-body{font-size:12px}.pd-hotspot-media-placeholder{margin-top:7px;padding-top:7px}
  .pd-hotspot-actions{margin-top:9px}.pd-hotspot-next,.pd-hotspot-close{min-height:36px;padding:7px 12px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{inset:136px 5px 294px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-footer{bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(max-height:520px) and (orientation:landscape){
  .pd-hotspot-guide{top:120px;bottom:auto;inset-inline-start:24px;width:145px;gap:8px;flex-direction:column;align-items:start}
  .pd-hotspot-guide-label{display:none}
  .pd-hotspot-start{font-size:11px}
  .pd-hotspot-nav{gap:5px}
  .pd-hotspot-step{width:36px;height:36px}
  .pd-dialog--model .pd-3d-view[data-has-hotspots] .pd-3d-canvas{inset:18px 23% 82px}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{inset:18px 37% 82px 18%}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-hotspot-guide{top:130px;bottom:auto;inset-inline-start:24px}
  .pd-hotspot-card{top:85px;bottom:82px;inset-inline-end:24px;inset-inline-start:auto;max-height:none;width:245px;transform:none;padding:16px 18px;border-radius:16px}
  .pd-hotspot-kicker{margin-bottom:7px;font-size:9px}.pd-hotspot-title{font-size:20px;margin-bottom:8px}
  .pd-hotspot-body{font-size:12px;line-height:1.6}.pd-hotspot-pending{margin-top:6px;padding:3px 8px}
  .pd-hotspot-media-placeholder{margin-top:6px;padding-top:6px;font-size:10px}
  .pd-hotspot-actions{margin-top:8px}.pd-hotspot-next,.pd-hotspot-close{min-height:36px;padding:7px 10px;font-size:11px}
}
@media(max-height:520px) and (max-width:650px) and (orientation:landscape){
  .pd-hotspot-card{inset-inline-end:16px;width:42vw;top:76px;bottom:76px;padding:12px}
  .pd-hotspot-title{font-size:18px}.pd-hotspot-kicker{font-size:8px}
  .pd-hotspot-guide,.pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-hotspot-guide{inset-inline-start:18px;top:105px;width:70px}
  .pd-hotspot-nav{flex-direction:column}
  .pd-hotspot-start{font-size:10px;line-height:1.5}
  .pd-dialog--model .pd-3d-view[data-hotspot-active] .pd-3d-canvas{inset:12px 44% 76px 16%}
  .pd-dialog--model .pd-3d-view[data-has-hotspots] .pd-3d-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
 .pd-hotspot-card{animation:none}
 .pd-3d-view[data-has-hotspots] .pd-hotspot,.pd-hotspot-step,.pd-dialog--model .pd-3d-view[data-has-hotspots] .pd-3d-canvas{transition:none}
}