*{box-sizing:border-box}body{margin:0;background:#faf8f3;color:#254a50;font-family:Arial,"Microsoft YaHei",sans-serif}header{height:84px;max-width:1320px;padding:0 36px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e1d7}header a{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-size:16px;letter-spacing:.8px}header img{width:44px;height:48px;object-fit:contain}header span{font-size:11px;color:#8f9691}main{max-width:1320px;margin:auto;padding:0 28px}.heading{text-align:center;padding:30px 0 0}.heading p{font-size:10px;letter-spacing:3px;color:#85938b;margin:0 0 12px}h1{font-size:clamp(27px,3vw,43px);font-weight:600;letter-spacing:-1.5px;margin:0}h1 em{font-style:normal;color:#bc3f70}#stage{position:relative;height:760px;isolation:isolate}.halo{position:absolute;left:50%;top:48%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff1b13d,transparent 68%);pointer-events:none}#product{position:absolute;left:50%;top:48%;width:232px;transform:translate(-50%,-50%);z-index:3;text-align:center}.pack{height:342px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 16px 23px #5d4b2020)}.pack img{width:100%;height:100%;object-fit:contain;border-radius:7px}.product-copy p{font-size:10px;letter-spacing:2px;color:#8f947e;margin:19px 0 9px}.product-copy h2{font-size:18px;line-height:1.5;margin:0;font-weight:500}#connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}#line{fill:none;stroke:url(#ink);stroke-width:2;stroke-linecap:round;opacity:0}#start{fill:#d5a522;opacity:0}#end{fill:#c93876;opacity:0}.scene{position:absolute;left:0;top:0;width:154px;height:154px;border:3px solid #fff;padding:0;border-radius:50%;background:#fff;box-shadow:0 8px 24px #2a443611;cursor:pointer;z-index:4;overflow:visible;will-change:transform}.scene img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.scene span{position:absolute;top:100%;left:-25%;width:150%;padding-top:11px;display:block;color:#62766a;font-size:11px;white-space:nowrap}.scene.active{border-color:#ca5a82;box-shadow:0 12px 32px #90456422;z-index:5}.scene.active span{color:#b13969;font-weight:600}button:focus-visible{outline:3px solid #bd3f71;outline-offset:5px}dialog{border:0;border-radius:18px;padding:20px;width:min(780px,90vw);background:#faf8f3;color:#254a50}dialog::backdrop{background:#20373788;backdrop-filter:blur(5px)}dialog button{display:block;margin-left:auto;border:0;background:none;font-size:27px;color:inherit;cursor:pointer}dialog img{width:100%;height:65vh;object-fit:contain;border-radius:10px}dialog h2{text-align:center;font-size:20px;font-weight:500}@media(max-width:700px){header{height:70px;padding:0 20px}header a{font-size:13px}header span{font-size:9px}main{padding:0 10px}.heading{padding-top:28px}h1{font-size:28px;line-height:1.4}h1 em{display:block}#stage{height:850px}#product{width:150px;top:48%}.pack{height:222px}.product-copy h2{font-size:14px}.product-copy p{font-size:9px;letter-spacing:0}.scene{width:86px;height:86px}.scene span{font-size:9px;padding-top:7px}.halo{width:95%;height:600px}}
@media(min-width:701px){#product{width:210px}.pack{height:310px}.product-copy{width:280px;margin-left:-35px}.product-copy h2{font-size:16px}}


/* Smaller central packaging and a clean connection without endpoint dots. */
#start,#end{display:none}
@media(min-width:701px){#product{width:172px}.pack{height:255px}.product-copy{width:280px;margin-left:-54px}}
@media(max-width:700px){#product{width:124px}.pack{height:184px}}


/* One original name design, eight applications of the same name. */
#product{width:172px}.pack{position:relative;width:172px;height:91px;overflow:hidden;filter:drop-shadow(0 5px 9px #26375110);border-radius:3px}.pack img{position:absolute;width:375px;height:auto;max-width:none;left:-26px;top:-113px;border-radius:0}.product-copy{width:260px;margin-left:-44px}.product-copy h2{font-size:15px}.scene-art{width:100%;height:100%;border-radius:50%;background-image:url('assets/leo-scenes-varied.png');background-size:400% 200%;background-repeat:no-repeat}#detail-photo{width:min(100%,65vh);aspect-ratio:1;margin:auto;background-image:url('assets/leo-scenes-varied.png');background-size:400% 200%;border-radius:12px;background-repeat:no-repeat}@media(max-width:700px){#product{width:144px}.pack{width:144px;height:76px}.pack img{width:314px;left:-22px;top:-95px}.product-copy{width:180px;margin-left:-18px}.product-copy h2{font-size:13px}}

.pack{height:85px}@media(max-width:700px){.pack{height:71px}}


/* Full original LEO packaging, sized to keep the surrounding scenes prominent. */
#product{width:172px}.pack{width:172px;height:256px;overflow:visible;filter:drop-shadow(0 12px 20px #5d4b2020);border-radius:6px}.pack img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;border-radius:6px}.product-copy{width:260px;margin-left:-44px}@media(max-width:700px){#product{width:124px}.pack{width:124px;height:185px}.pack img{position:static;width:100%;height:100%}.product-copy{width:180px;margin-left:-28px}}


#series{display:none}.product-copy h2{margin-top:18px}


/* Embedded homepage presentation. */
header{display:none}body{background:#f9f7f1}.heading{padding-top:18px}main{padding-bottom:20px}

/* Larger application photos while retaining space for all eight scenes. */
@media(min-width:701px){.scene{width:190px;height:190px}.scene span{font-size:12px}#stage{height:820px}}
@media(min-width:701px) and (max-width:900px){.scene{width:160px;height:160px}}
@media(max-width:700px){.scene{width:104px;height:104px}#stage{height:920px}.scene span{font-size:10px}}