.product-visual .render-panel{display:grid;place-items:center;bottom:145px}
.nova-puppet{position:relative;display:block;aspect-ratio:2/3;height:100%;width:auto;max-width:100%;min-width:0;padding:0;border:0;background:none;transform-style:preserve-3d;transform-origin:50% 66%;touch-action:pan-y;-webkit-tap-highlight-color:transparent;will-change:transform;outline-offset:7px}
.product-visual .nova-puppet .studio-product{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;transform:none!important;animation:none!important;pointer-events:none;filter:drop-shadow(0 25px 35px #0005)}
.nova-face-panel{position:absolute;left:22.3%;top:7.3%;width:67.5%;height:41.7%;overflow:hidden;border-radius:50%;pointer-events:none;mask-image:radial-gradient(ellipse closest-side,#000 95%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 95%,transparent 100%);transform:translateZ(.1px)}
.expression-image{position:absolute;left:-20%;top:-20%;width:140%;height:140%;max-width:none;object-fit:fill;opacity:0;transition:opacity .7s ease;pointer-events:none;user-select:none}
.expression-image.active{opacity:1}
.nova-face-panel{z-index:3}
.expression-controls{position:absolute;bottom:73px;left:50%;transform:translateX(-50%);display:flex;gap:18px;z-index:6}
.expression-controls button{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:1px solid transparent;border-radius:11px;padding:6px 9px 7px;min-width:52px;color:#647e98;transition:background .2s,border-color .2s,color .2s}
.expression-controls button img{display:block;width:35px;height:35px;opacity:.65;transition:opacity .2s,transform .2s}
.expression-controls button span{font:8px/1.3 monospace;letter-spacing:.1em}
.expression-controls button.selected{background:#a0ccf110;border-color:#a0ccf12c;color:#c3eaf3}
.expression-controls button.selected img,.expression-controls button:hover img{opacity:1;transform:translateY(-2px)}
.visual-motion-controls{bottom:31px}.visual-motion-controls button{padding:7px 14px;font-family:inherit;font-size:11px}.product-visual .visual-caption{bottom:7px;font-size:10px;white-space:nowrap}
.product-marker{transition:color .6s}.product-aura{transition:background .7s}.product-visual[data-mood="gold"] .product-aura{background:radial-gradient(circle,#d79a3d26,transparent 68%)}.product-visual[data-mood="mint"] .product-aura{background:radial-gradient(circle,#5ac9ac26,transparent 68%)}.product-visual[data-mood="blue"] .product-aura{background:radial-gradient(circle,#377fcf30,transparent 68%)}
@media(max-width:700px){.product-visual{height:590px}.product-visual .render-panel{inset:0 -15px 140px}.expression-controls{gap:15px;bottom:69px}.expression-controls button{min-width:50px;padding:5px 7px}.expression-controls button img{width:33px;height:33px}.visual-motion-controls{bottom:29px}.product-visual .visual-caption{bottom:7px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.expression-image,.expression-controls button,.expression-controls button img,.product-aura{transition:none}.expression-controls button.selected img,.expression-controls button:hover img{transform:none}}

/* Supplied character PNGs replace the old face overlay without image edits. */
.product-visual .nova-puppet{aspect-ratio:1097/1434}
.product-visual .nova-puppet .character-image{object-fit:contain;opacity:0;transition:opacity .45s ease;user-select:none}
.product-visual .nova-puppet .character-image.active{opacity:1}
.expression-controls{gap:12px}
.expression-controls button img{width:42px;height:48px;object-fit:contain}
.product-visual[data-mood="pink"] .product-aura{background:radial-gradient(circle,#e9599633,transparent 68%)}
.product-visual[data-mood="yellow"] .product-aura{background:radial-gradient(circle,#edb33130,transparent 68%)}
@media(max-width:700px){.expression-controls{gap:10px}.expression-controls button{min-width:48px;padding:5px 6px}.expression-controls button img{width:34px;height:40px}.product-visual .nova-puppet{max-height:100%;max-width:100%}}
@media(prefers-reduced-motion:reduce){.product-visual .nova-puppet .character-image{transition:none}}

.character-rig-defs{position:absolute;pointer-events:none;overflow:hidden}
.product-visual .nova-puppet .character-image{overflow:visible}
.character-layer{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none;user-select:none}
.character-arm{will-change:transform}
.arm-left{transform-origin:35.5% 56.5%;transform:rotate(var(--arm-left,0deg))}
.arm-right{transform-origin:71% 58%;transform:rotate(var(--arm-right,0deg))}
@media(prefers-reduced-motion:reduce){.character-arm{transform:none;will-change:auto}}

/* Small persona props, separately generated; original character art stays intact. */
.persona-accessory{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 1px #0004)}
.accessory-mint{width:29%;left:43%;top:-3%;transform:rotate(5deg);z-index:4}
.accessory-blue{width:42%;height:24%;object-fit:fill;left:31%;top:50%;z-index:3}
.accessory-arm-carrier{position:absolute;inset:0;pointer-events:none;transform-origin:71% 58%;transform:rotate(var(--arm-right,0deg));z-index:5}
.accessory-pink{width:25%;left:65%;top:61%;transform:rotate(-6deg)}
.accessory-yellow{width:20%;left:40%;top:61%;transform:rotate(-3deg);z-index:4}
@media(prefers-reduced-motion:reduce){.accessory-arm-carrier{transform:none}}

/* Face portraits use the full-resolution source, with no dimming or bitmap resampling. */
.expression-controls button .thumbnail-portrait{position:relative;display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#101722;border:1px solid #8faccc40;box-shadow:0 2px 8px #0003}
.expression-controls button .thumbnail-portrait img{position:absolute;width:72px;height:auto;max-width:none;left:50%;top:-3px;transform:translateX(-50%);object-fit:initial;opacity:1;transition:none;filter:none}
.expression-controls button:hover .thumbnail-portrait img,.expression-controls button.selected .thumbnail-portrait img{transform:translateX(-50%);opacity:1}
.expression-controls button.selected .thumbnail-portrait{border-color:#94efff;box-shadow:0 0 0 2px #94efff18}
@media(max-width:700px){.expression-controls button .thumbnail-portrait{width:40px;height:40px}.expression-controls button .thumbnail-portrait img{width:64px;top:-3px}}

.character-image[data-expression="pink"] .arm-left{transform-origin:31.2% 57.3%}
