*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#f2f4f6;color:#293237;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select,a{touch-action:manipulation}button,select{font:inherit;font-size:14px;color:inherit;background:#fff;border:1px solid #d6dcdf;border-radius:9px;min-height:42px;padding:8px 14px;cursor:pointer}button[aria-pressed=true],.primary{color:#fff;background:#c94b2e;border-color:#c94b2e}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #df603f;outline-offset:3px}a{color:inherit;text-decoration:none}header{display:flex;align-items:center;gap:18px;padding:12px 24px;background:#ffffffdf;z-index:2}.brand{font-weight:750;color:#c94b2e;font-size:23px}.return{font-size:13px;color:#616d73}header select{margin-left:auto;max-width:45vw}main{flex:1;min-height:0;position:relative;background:radial-gradient(ellipse at 50% 43%,#fff 15%,#f1f3f5 76%)}model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent}.title{position:absolute;left:24px;top:18px;pointer-events:none;z-index:1;max-width:38vw}h1{font-size:clamp(18px,2.4vw,28px);margin:0 0 6px}#spec,#part-name{font-size:13px;color:#6a747b}#part-name{margin-top:8px}.loader,.error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 24px;border-radius:16px;background:#fffffff5;z-index:3;text-align:center}.loader progress{display:block;margin:10px auto;width:180px}.error a{display:block;margin-top:15px;color:#bd452b}[hidden]{display:none!important}footer{background:#ffffffed;z-index:2;padding:12px 24px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}.controls,.parts,.actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.controls{justify-content:space-between}#cycle{display:block;width:100%;height:3px;accent-color:#d35b38}label{font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap}input{accent-color:#cc5436}.note{font-size:11px;color:#778188;text-align:center;margin:0}#intro{font-size:12px;color:#b44930;margin-left:10px}:fullscreen header .return,.expanded header .return{display:none}:fullscreen .title,.expanded .title{opacity:.8}#fullscreen{white-space:nowrap}#load-progress{accent-color:#d35b38}@media(min-width:900px){main{min-height:65vh}.title{max-width:30vw}body:fullscreen main{min-height:0}}@media(max-width:700px){header{padding:8px 12px;gap:8px}.brand{font-size:18px}.return{display:none}header select{font-size:12px;min-height:38px;max-width:50vw;padding:6px;margin-left:auto}header button{font-size:12px;min-height:38px;padding:6px 9px}.title{top:10px;left:14px;max-width:85%;}h1{font-size:16px}.title #spec{font-size:11px}#part-name{display:none}footer{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:6px}button{font-size:12px;min-height:38px;padding:6px 10px}.controls{justify-content:center;gap:6px}.actions{gap:5px}.note{font-size:10px}model-viewer{top:40px;height:calc(100% - 40px)}}@media(max-height:500px) and (orientation:landscape){header{padding:4px 12px}.brand{font-size:17px}header button,header select{min-height:30px;font-size:12px}.title{top:8px}.title h1{font-size:16px}footer{padding:4px 10px;gap:3px}.note{display:none}.controls{justify-content:center}button{min-height:30px;padding:4px 9px}main{min-height:0}model-viewer{top:0;height:100%}}
/* Immersive showroom: the stage remains the full viewport, including WebViews without native fullscreen. */
body.expanded{position:fixed;inset:0;background:#07101b;color:#eef5f8;overflow:hidden}
body.expanded header{position:absolute;inset:0 0 auto;display:flex;justify-content:flex-end;background:transparent;padding:16px 22px;z-index:10;pointer-events:none}
body.expanded header>*{pointer-events:auto}
body.expanded header .brand,body.expanded header .return,body.expanded header select{display:none}
body.expanded #fullscreen{background:#192e40cf;border:1px solid #7f9db1;color:#f5fbff;backdrop-filter:blur(10px)}
body.expanded main{position:absolute;inset:0;background:radial-gradient(ellipse 58% 65% at 50% 46%,#263a49 0%,#111f30 45%,#060e19 100%)}
body.expanded main::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.92%,#89a3b115 50%,transparent 50.08%),linear-gradient(0deg,transparent 49.92%,#89a3b115 50%,transparent 50.08%);background-size:140px 140px;mask-image:radial-gradient(circle at center,#0007,transparent 70%);pointer-events:none}
body.expanded model-viewer{inset:20px 0 86px;height:calc(100% - 106px)}
body.expanded .title{top:28px;left:32px;max-width:36vw;text-shadow:0 2px 16px #081321}
body.expanded .title h1{font-size:clamp(22px,2.8vw,36px);color:#f4fbff}
body.expanded #spec,body.expanded #part-name{color:#a8c4d0}
body.expanded footer{position:absolute;inset:auto 20px 16px;background:#0e1d2bdc;border:1px solid #819baa45;color:#eef5f8;border-radius:16px;padding:10px 16px 12px;backdrop-filter:blur(18px)}
body.expanded button,body.expanded select{background:#1a3143;border:1px solid #637e93;color:#eef6fb}
body.expanded button[aria-pressed=true],body.expanded .primary{background:#d45736;border-color:#d45736}
body.expanded .note{color:#9fb4c0}
body.expanded #cycle{accent-color:#f27855}
@media(max-width:700px){body.expanded header{padding:8px 10px}body.expanded .title{top:10px;left:14px;max-width:72vw}body.expanded .title h1{font-size:18px}body.expanded model-viewer{inset:43px 0 103px;height:calc(100% - 146px)}body.expanded footer{left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));padding:6px 8px 8px;border-radius:12px}body.expanded footer button{font-size:11px;min-height:34px;padding:4px 8px}body.expanded .note{font-size:9px}}
/* Wide screens: use the horizontal space for context and a second view, while leaving air above and below the product. */
.companion{display:none}
@media(min-width:1100px){
main model-viewer{left:50%;right:auto;width:min(56vw,900px);height:100%;transform:translateX(-50%)}
.title{top:30%;left:clamp(28px,5vw,106px);max-width:23vw}
.title h1{font-size:clamp(24px,2.4vw,38px);line-height:1.22;letter-spacing:.02em}
.title::after{content:none}
.companion{display:flex;position:absolute;z-index:2;right:clamp(26px,5vw,110px);top:48%;transform:translateY(-50%);width:clamp(170px,15vw,265px);min-height:340px;align-items:center;flex-direction:column;justify-content:center;padding:14px;border:1px solid #dde4e7;border-radius:18px;background:#fff9;box-shadow:0 18px 50px #2033451b;backdrop-filter:blur(8px)}
.companion-eyebrow{align-self:flex-start;font-size:12px;color:#9b6a59;letter-spacing:.16em;margin:4px 8px 10px}
.companion button{width:100%;height:250px;border:0;background:transparent;padding:4px;min-height:0}
.companion button:hover{background:#e9ecee88}
.companion img{display:block;width:100%;height:100%;object-fit:contain}
.companion-label{font-size:13px;color:#58636a;margin-top:8px}
body.expanded model-viewer{left:50%;right:auto;width:min(56vw,900px);height:calc(100% - 106px)}
body.expanded .title{left:clamp(28px,5vw,106px);top:30%;max-width:23vw}
body.expanded .companion{background:#14293bcc;border-color:#718da055;box-shadow:0 24px 70px #0004;top:46%}
body.expanded .companion-eyebrow{color:#e3a38d}
body.expanded .companion-label{color:#c6d8e1}
body.expanded .companion button{background:transparent;border:0}
body.expanded .companion button:hover{background:#31485977}
}
.product-facts{margin-top:20px;max-width:340px;padding:18px 20px;border-radius:16px;background:#fffffff0;box-shadow:0 12px 36px #25374718;pointer-events:auto;text-shadow:none}
.product-facts dl{display:grid;grid-template-columns:80px 1fr;gap:9px 12px;margin:0}
.product-facts dt{font-size:13px;color:#68757c}
.product-facts dd{margin:0;font-size:15px;font-weight:650;color:#26343a}
.product-facts .price{color:#be4c32;font-size:20px}
.product-facts h2{font-size:13px;color:#65747c;font-weight:600;margin:16px 0 7px}
.product-facts ul{margin:0;padding-left:18px;font-size:14px;line-height:1.65;color:#37454c}
body.expanded .product-facts{background:#13293bd9;border:1px solid #718da055;box-shadow:0 18px 45px #0003}
body.expanded .product-facts dt,body.expanded .product-facts h2{color:#afc8d3}
body.expanded .product-facts dd,body.expanded .product-facts ul{color:#f0f8fb}
body.expanded .product-facts .price{color:#f29b7e}
@media(max-width:1099px){.product-facts{margin-top:10px;padding:10px 12px;max-width:280px}.product-facts dl{gap:3px 8px;grid-template-columns:70px 1fr}.product-facts dt,.product-facts dd{font-size:11px}.product-facts .price{font-size:15px}.product-facts h2{margin:7px 0 3px;font-size:11px}.product-facts ul{font-size:11px;line-height:1.45}}
@media(max-width:700px){.title:has(.product-facts:not([hidden])){max-width:min(74vw,290px);background:#fffffff2;padding:10px 12px;border-radius:12px;box-shadow:0 8px 24px #20304018}.title .product-facts{background:transparent;box-shadow:none;padding:0;margin-top:6px}.title .product-facts ul{padding-left:16px}body.expanded .title:has(.product-facts:not([hidden])){background:#13293be8}body.expanded .title .product-facts{border:0}}

/* The information panel stays readable across all product names and price states. */
.product-facts .price{font-size:clamp(14px,1.4vw,20px);overflow-wrap:anywhere}
.product-facts li+li{margin-top:5px}
@media(min-width:1100px){.title{top:23%;max-width:25vw}.product-facts{max-width:370px}.companion{top:46%}}
@media(max-width:700px){.title:has(.product-facts:not([hidden])){max-width:min(78vw,310px)}.product-facts .price{font-size:12px}.product-facts li+li{margin-top:2px}}

/* Exhibition stage: a real second 3D object replaces the white poster thumbnail. */
@media(min-width:1100px){
 main{background:radial-gradient(ellipse 58% 72% at 50% 46%,#fdfefe 0%,#e8eef1 57%,#cfd9df 100%)}
 main::after{content:"";position:absolute;left:34%;right:22%;bottom:11%;height:12%;border-radius:50%;background:#19334320;filter:blur(35px);pointer-events:none}
 .companion{width:clamp(215px,19vw,350px);min-height:0;height:min(61vh,560px);right:clamp(18px,3vw,65px);top:46%;padding:0;overflow:hidden;border:1px solid #a8c3cf66;border-radius:24px;background:radial-gradient(ellipse at 50% 41%,#b9d5dd30 0%,#25435410 45%,#102635e8 100%);box-shadow:0 25px 70px #0c253745, inset 0 1px #f5ffff35;color:#f4faff}
 .companion::before{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:15%;border-radius:50%;background:#61a5be30;filter:blur(25px);pointer-events:none}
 .companion::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:1px;background:linear-gradient(90deg,transparent,#b6e2eb70,transparent);pointer-events:none}
 .companion-eyebrow{position:absolute;top:22px;left:24px;z-index:2;margin:0;color:#f5a98a;font-size:12px;font-weight:650;letter-spacing:.18em}
 .companion button{position:absolute;inset:0;width:100%;height:100%;padding:34px 0 40px;background:transparent;border:0;border-radius:0}
 .companion button:hover{background:#ffffff0c}
 .companion model-viewer{position:relative;inset:auto;left:auto;right:auto;top:auto;transform:none;width:100%;height:100%;--poster-color:transparent;pointer-events:none;background:transparent}
 .companion-label{position:absolute;left:24px;right:24px;bottom:21px;z-index:2;margin:0;color:#e5f3f7;font-size:16px;font-weight:600;letter-spacing:.04em;text-align:left}
 .companion-label::after{content:"↗";float:right;color:#f3a586;font-size:22px;font-weight:300}
 body.expanded main{background:radial-gradient(ellipse 57% 64% at 49% 42%,#314e60 0%,#14283a 49%,#07101d 100%)}
 body.expanded .companion{top:46%;background:radial-gradient(ellipse at 50% 37%,#254b6199 0%,#112b3fc9 53%,#08192bf2 100%);border-color:#8bb1c454;box-shadow:0 28px 80px #0008,inset 0 1px #e2faff24}
 body.expanded .companion button{background:transparent;border:0}
 body.expanded .companion button:hover{background:#ffffff0c}
 body.expanded .companion model-viewer{position:relative;inset:auto;left:auto;top:auto;right:auto;transform:none;width:100%;height:100%}
 body.expanded .companion-label{color:#e8f5f9}
}
@media(min-width:1100px) and (max-height:650px){.companion{height:55vh}.companion-eyebrow{top:14px}.companion-label{bottom:12px}}

/* Mobile: keep identification above the stage, never over the package. */
@media(max-width:700px){
 .title,.title:has(.product-facts:not([hidden])),body.expanded .title,body.expanded .title:has(.product-facts:not([hidden])){position:relative;top:auto;left:auto;max-width:none;width:100%;padding:8px 14px;background:#fff;box-shadow:none;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:auto}
 .title h1,body.expanded .title h1{margin:0;font-size:14px;line-height:1.35}
 .title #spec{flex:none;color:#68737a;font-size:11px;text-align:right}
 .title .product-facts,body.expanded .title .product-facts{display:none!important}
 main>model-viewer#viewer,body.expanded main>model-viewer#viewer{top:42px;bottom:0;height:calc(100% - 42px)}
}