/* One real 3D product stage. Text and connection actions remain native DOM. */
.matte-home .device-reel { height:238px; }
.reel-slot { top:3px; height:217px; }
.reel-product-slot .reel-model { width:210px; height:169px; margin-left:-15px; margin-bottom:0; transform:none; display:grid; place-items:center; }
.reel-product { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.reel-product-slot .reel-name { padding-top:6px; }
.reel-scale { bottom:5px; }
.reel-slot:not(.reel-product-slot) .reel-model { height:169px; transform:translateY(17px) scale(.93); }
.reel-scene { position:absolute; inset:0 0 auto; width:100%; height:173px; pointer-events:none; opacity:0; transition:opacity 220ms ease; }
.device-reel[data-scene=ready] .reel-scene { opacity:1; }
.device-reel[data-scene=ready] .reel-slot:not([data-kind=other]) .reel-model { visibility:hidden; }
.device-reel[data-scene=ready] .reel-track { perspective:650px; }
.device-reel[data-empty=true] .reel-scene { visibility:hidden; }
@media(max-width:800px){
 .matte-home .device-reel { height:210px; }
 .reel-slot { height:196px; top:0; }
 .reel-product-slot .reel-model { height:153px; width:202px; margin-left:-11px; }
 .reel-product-slot .reel-name { font-size:20px; height:41px; padding-top:3px; }
 .reel-slot:not(.reel-product-slot) .reel-model { height:153px; transform:translateY(10px) scale(.87); }
 .reel-scene { height:155px; }
}
@media(max-width:370px){
 .matte-home .device-reel { height:194px; }
 .reel-slot { height:182px; }
 .reel-product-slot .reel-model { height:140px; width:192px; margin-left:-6px; }
 .reel-product-slot .reel-name { font-size:19px; }
 .reel-slot:not(.reel-product-slot) .reel-model { height:140px; transform:translateY(5px) scale(.8); }
 .reel-scene { height:142px; }
}
@media(max-width:800px) and (max-height:740px){
 .miniapp .matte-home .device-reel { height:183px; }
 .miniapp .reel-slot { height:172px; top:0; }
 .miniapp .reel-product-slot .reel-model { height:131px; width:190px; margin-left:-5px; transform:none; }
 .miniapp .reel-product-slot .reel-name { height:38px; font-size:18px; }
 .miniapp .reel-slot:not(.reel-product-slot) .reel-model { height:131px; transform:scale(.78); }
 .miniapp .reel-scene { height:133px; }
}
@media(prefers-reduced-motion:reduce){.reel-scene { transition:none; }}
@media(forced-colors:active){.reel-scene { display:none; }.device-reel[data-scene=ready] .reel-slot:not([data-kind=other]) .reel-model { visibility:visible; }}