/* Shared polish: dissolve the source rectangle into the page, without moving any map node. */
body[data-state=map] .art>.still{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent),linear-gradient(transparent,#000 12%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent),linear-gradient(transparent,#000 12%,#000 80%,transparent);mask-composite:intersect}
.field-grid{mask-image:radial-gradient(ellipse at 68% 50%,#000 20%,transparent 73%)}
.product-intro{max-width:660px;line-height:1.95}.product-visuals{gap:30px}.product-visuals figure>div{height:230px}.product-visuals .molecule{border-left:0;padding-left:0}.powder img{max-width:360px;padding:20px 10px}.molecule img{padding:18px 0}.powder-sprite{width:230px;height:230px;flex:none;background-image:url('assets/统一浅玻璃盘-三种原料示意.png');background-size:300% 100%;background-repeat:no-repeat;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 50%,transparent 73%)}
/* A: the DNA remains a quiet trace in the margin. */
body[data-variant=a] .product{margin-left:29%;margin-right:6%}body[data-variant=a] .pencil-side{width:28%;top:24%;height:48%;left:-1%;}body[data-variant=a] .pencil{opacity:.26;inset:0;width:100%;height:85%}body[data-variant=a] .pencil-orbit{opacity:.45;width:92%;left:0;top:9%}body[data-variant=a] .pencil-guides{opacity:.3}body[data-variant=a] .pencil-caption{left:20%;bottom:0;width:67%;opacity:.65}body[data-variant=a][data-state=product] .rings{opacity:.2}body[data-variant=a] .product-visuals{grid-template-columns:1.08fr 1fr}body[data-variant=a] .product-visuals figure>div{height:250px}body[data-variant=a] .powder-sprite{width:250px;height:250px}
/* B: each compound takes the place of the decorative DNA. */
body[data-variant=b] .pencil-side{display:none}body[data-variant=b] .product{margin-left:42%;margin-right:6%}body[data-variant=b] .product-visuals{grid-template-columns:1fr}body[data-variant=b] .product-visuals .molecule{display:none}body[data-variant=b] .product-visuals .powder>div{height:265px}body[data-variant=b] .powder-sprite{width:265px;height:265px}body[data-variant=b] .powder img{max-width:420px}body[data-variant=b][data-state=product] .rings{opacity:.16;transform:translate(-52vw,-50%) scale(.55)}
.molecular-stage{position:absolute;left:4%;top:18%;width:35%;height:520px;z-index:4;opacity:0;transform:translateX(70px);transition:opacity 1.1s .1s,transform 1.1s var(--ease)}body[data-variant=b][data-state=product] .molecular-stage{opacity:1;transform:translateX(0)}.structure-kicker{font-size:8px;letter-spacing:.2em;color:#8c9c88;margin:0 5% 12px}.molecular-stage h2{font-size:22px;font-weight:400;color:#547159;margin:0 5%;max-width:88%;line-height:1.5}.molecular-orbit{position:absolute;width:85%;aspect-ratio:1;border:1px solid #bdcdb342;border-radius:50%;left:3%;top:21%;transform:rotate(-23deg)}.molecular-orbit:after{content:"";position:absolute;inset:10%;border:1px dashed #b2c7ad5a;border-radius:50%}#molecularCanvas{position:absolute;left:0;top:70px;width:100%;height:385px;cursor:grab;touch-action:pan-y;outline-offset:-12px}#molecularCanvas:active{cursor:grabbing}#stageFallback{position:absolute;left:0;top:90px;width:100%;height:320px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#8d9a84}#stageFallback img{width:100%;height:100%;object-fit:contain;padding:25px}.molecular-caption{position:absolute;left:5%;right:5%;bottom:8px;border-top:1px solid #bfceba;padding-top:16px;display:flex;justify-content:space-between;gap:15px;align-items:center}.molecular-caption>span{font-size:13px;letter-spacing:.08em;color:#54745b}.molecular-caption small{font-size:9px;color:#91a08a}.molecular-stage [hidden]{display:none!important}
@media(min-width:1600px){body[data-variant=a] .product{margin-left:29%}body[data-variant=b] .product{margin-left:42%}.molecular-stage{height:580px}#molecularCanvas{height:440px}}
@media(max-width:1050px){body[data-variant=a] .product{margin-left:26%;margin-right:4%}body[data-variant=a] .pencil-side{width:25%}body[data-variant=b] .product{margin-left:37%;margin-right:4%}.molecular-stage{left:2%;width:33%;height:450px;top:23%}#molecularCanvas{height:310px}.molecular-stage h2{font-size:19px}.molecular-caption{flex-direction:column;align-items:flex-start;gap:8px}.product-visuals{gap:20px}.product-text{gap:18px}}
@media(max-width:650px){body[data-variant=a] .pencil-side{top:95px;left:4%;width:90%;height:100px}body[data-variant=a] .pencil{width:46%;left:2%;height:100%;opacity:.22}body[data-variant=a] .pencil-orbit{width:110px;left:8%;top:-4%;opacity:.25}body[data-variant=a] .pencil-caption{left:56%;bottom:26%;width:37%;font-size:10px}body[data-variant=a] .pencil-guides{display:none}body[data-variant=a] .product{margin:142px 7% 80px}body[data-variant=a] .product-visuals{grid-template-columns:1fr}body[data-variant=a] .product-visuals .molecule{border-top:1px solid #c9d3c6}body[data-variant=a] .product-visuals figure>div{height:220px}body[data-variant=a] .powder-sprite{height:220px;width:220px}.product-visuals .molecule>div{height:165px!important}body[data-variant=b] .product{margin:355px 7% 80px}.molecular-stage{left:7%;top:78px;width:86%;height:300px}.structure-kicker{font-size:7px;margin-bottom:6px}.molecular-stage h2{font-size:18px}.molecular-orbit{width:225px;left:11%;top:5%}#molecularCanvas{top:40px;height:225px}.molecular-caption{bottom:0;flex-direction:row;padding-top:9px;align-items:center}.molecular-caption>span{font-size:11px}.molecular-caption small{font-size:8px}#stageFallback{top:45px;height:210px}.product-visuals{gap:0}body[data-variant=b] .product-visuals .powder>div{height:235px}body[data-variant=b] .powder-sprite{height:235px;width:235px}.product-top{gap:8px}.product-select select{max-width:143px}.product-visuals figcaption{font-size:8px}}

/* Round 17 A: a quiet product index over the pencil DNA. These nodes link catalog fields, not atoms to effects. */
body[data-variant=a] .pencil-side{top:18%;height:590px;left:2%;width:26%;pointer-events:none}
body[data-variant=a] .pencil{opacity:.19;height:83%;top:8%}
body[data-variant=a] .pencil-orbit{opacity:.28}
body[data-variant=a] .pencil-caption,body[data-variant=a] .pencil-guides{display:none}
.dna-map{position:absolute;inset:0;color:#486851}
.dna-map-kicker{font-size:9px;letter-spacing:.18em;color:#7d9783;margin:0 0 0 5%}
.dna-route{position:absolute;inset:5% 0 0;width:100%;height:83%;fill:none;stroke:#9ab5a0;stroke-width:1;opacity:.65}
.dna-route path{stroke-dasharray:4 6}.dna-route circle{fill:#689177;stroke:#f6f5ef;stroke-width:3}
.dna-node{position:absolute;left:18%;width:75%;background:#f6f5efdf;border-left:1px solid #88ae90;padding:10px 12px 10px 15px;box-shadow:0 10px 28px #829b8110;overflow-wrap:anywhere;pointer-events:auto;text-align:left;transition:background .2s,border-color .2s}
.dna-node:hover,.dna-node:focus-visible,.dna-node.is-active{background:#eef5eb;border-left-color:#367e57}
.dna-node:before{content:"";position:absolute;width:15px;height:1px;background:#8eab96;left:-15px;top:18px}
.dna-node small{display:block;font-size:8px;letter-spacing:.13em;color:#819884;margin-bottom:7px}
.dna-node strong{display:block;font-size:17px;font-weight:500;line-height:1.45;color:#365d42}
.dna-node span{display:block;font-size:10px;line-height:1.5;color:#758d79;margin-top:5px}
.dna-node-one{top:13%;left:18%}.dna-node-two{top:40%;left:29%;width:67%;border-left-color:#458168}.dna-node-three{top:67%;left:20%}
.dna-map-note{position:absolute;bottom:0;left:5%;font-size:9px;line-height:1.7;color:#819283;border-top:1px solid #b9cbbd;padding-top:11px;width:90%;margin:0}
.map-linked{animation:map-link-pulse 1.4s ease-out 1}@keyframes map-link-pulse{0%,65%{box-shadow:0 0 0 7px #a7cbb260;background:#e4f1e8}100%{box-shadow:0 0 0 0 transparent;background:transparent}}
body[data-variant=a] #moleculeImage{height:250px!important;position:relative}
body[data-variant=a] #molecularStage{position:relative;left:auto;top:auto;width:100%;height:100%;opacity:1;transform:none;transition:none}
body[data-variant=a] #molecularStage .structure-kicker,body[data-variant=a] #molecularStage h2{display:none}
body[data-variant=a] #molecularStage .molecular-orbit{width:205px;left:calc(50% - 102px);top:12px}
body[data-variant=a] #molecularCanvas{top:0;height:215px}
body[data-variant=a] #stageFallback{top:15px;height:190px}
body[data-variant=a] .molecular-caption{bottom:0;padding-top:7px}
body[data-variant=a] .molecular-caption{display:none}
.motion-toggle{position:absolute;top:7px;right:4%;z-index:3;font-size:9px;color:#4b7458;border:1px solid #aac0ab;background:#f6f5efd9;padding:6px 9px;min-width:68px}
.motion-toggle:hover{background:#e7efe6}.motion-toggle[hidden]{display:none}
body[data-variant=b] .molecular-stage:before{content:"";position:absolute;inset:25% 9% 12%;background:url('assets/dna-pencil-light-v2.png') center/contain no-repeat;opacity:.065;pointer-events:none}
body[data-variant=b] .motion-toggle{top:54px;right:8%}

/* Round 17 B: the powder and its documented identifiers read as one product record. */
body[data-variant=b] .product-visuals .powder>.material-layout{height:265px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(185px,.96fr);align-items:center;gap:24px}
body[data-variant=b] #powderImage{height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
body[data-variant=b] .powder-sprite{max-width:100%;width:245px;height:245px}
.material-brief{border-left:1px solid #b6cbb9;padding:14px 0 14px 25px;position:relative;min-width:0}
.material-brief:before{content:"";position:absolute;width:20px;height:1px;background:#7fa489;left:-20px;top:35px}
.material-brief:after{content:"";position:absolute;width:5px;height:5px;border:1px solid #629473;background:#f6f5ef;border-radius:50%;left:-24px;top:32px}
.brief-rule{font-size:8px;letter-spacing:.15em;color:#72917b}.brief-head{font-size:15px;line-height:1.4;color:#325c40;margin:14px 0}
.material-brief dl{margin:0}.material-brief dl>div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #d1decf;padding:8px 0;font-size:10px}
.material-brief dt{color:#879886}.material-brief dd{margin:0;color:#3d6248;max-width:60%;text-align:right;overflow-wrap:anywhere}
.brief-source{font-size:9px;color:#899a88;line-height:1.6;margin:12px 0 0}
body[data-variant=b] .specs{display:none}
body[data-variant=b] .powder figcaption{display:none}

@media(max-width:1050px){body[data-variant=a] .pencil-side{left:1%;width:24%;height:530px}.dna-node{width:80%;left:15%;padding:8px 9px}.dna-node-two{left:21%;width:75%}.dna-node strong{font-size:14px}body[data-variant=b] .product-visuals .powder>.material-layout{gap:12px;grid-template-columns:1fr 1fr}.material-brief{padding-left:15px}}
@media(max-width:650px){body[data-variant=a] .pencil-side{top:80px;left:7%;width:86%;height:240px}body[data-variant=a] .pencil{left:0;width:42%;height:95%;opacity:.15}body[data-variant=a] .pencil-orbit{left:0;width:145px}body[data-variant=a] .product{margin:330px 7% 80px}.dna-map-kicker{font-size:8px;margin-left:0}.dna-route{left:0;top:12%;width:95%;height:70%}.dna-node{left:13%;width:80%;padding:5px 8px 5px 10px}.dna-node small{font-size:7px;margin-bottom:2px}.dna-node strong{font-size:11px;line-height:1.3}.dna-node span{font-size:8px;margin-top:1px}.dna-node-one{top:14%;left:15%}.dna-node-two{top:38%;left:24%;width:70%}.dna-node-three{top:62%;left:18%}.dna-map-note{font-size:7px;line-height:1.4;bottom:0;padding-top:4px}body[data-variant=a] #moleculeImage{height:215px!important}body[data-variant=a] #molecularCanvas{height:185px}body[data-variant=a] #molecularStage .molecular-orbit{width:170px;left:calc(50% - 85px)}body[data-variant=a] .molecular-caption{bottom:0}body[data-variant=b] .product{margin-top:355px}body[data-variant=b] .product-visuals .powder>.material-layout{height:auto;grid-template-columns:1fr;gap:0}body[data-variant=b] #powderImage{height:210px}body[data-variant=b] .powder-sprite{width:210px;height:210px}.material-brief{border-left:0;border-top:1px solid #b6cbb9;padding:12px 0 0}.material-brief:before,.material-brief:after{display:none}.brief-head{margin:6px 0 12px;font-size:13px}.material-brief dl{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.material-brief dl>div{display:block}.material-brief dd{max-width:none;text-align:left;margin-top:4px}.brief-source{margin:7px 0 0}body[data-variant=b] .motion-toggle{top:38px}}
@media(max-width:650px){.product-select select{min-height:44px}.wayfinding #back{min-height:44px}.product-tabs button{min-height:40px}.motion-toggle{min-height:36px}}
@media(max-width:650px){.dna-node{min-height:44px}.dna-map-note{line-height:1.3}}
@media(prefers-reduced-motion:reduce){.map-linked{animation:none;outline:2px solid #7dad8d;outline-offset:4px}}