.hero-demo{position:relative;isolation:isolate;width:100%;height:650px;min-width:0;color:#f5f5f3;--pd-arrival:0;--pd-scan:0%;--pd-light-angle:132deg}
.hero-demo .pd-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-demo .pd-stage{position:absolute;inset:0 0 70px;touch-action:pan-y}
.hero-demo .pd-ground{position:absolute;left:9%;right:3%;bottom:2%;height:17%;background:radial-gradient(ellipse,#0009 0%,#0004 32%,transparent 69%);transform:rotate(-5deg);pointer-events:none}
.hero-demo .pd-stage:before{content:"";position:absolute;inset:1% 2% 7%;background:radial-gradient(ellipse at 48% 40%,#ffffff06,transparent 68%);pointer-events:none}
.hero-demo .pd-webgl{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.hero-demo[data-renderer="webgl"] .pd-webgl{opacity:1}
.hero-demo .pd-projection{position:absolute;inset:0;perspective-origin:50% 50%;transform-style:preserve-3d;pointer-events:none}
.hero-demo .pd-plane{position:absolute;left:50%;top:50%;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
.hero-demo .pd-plane:before{content:"";position:absolute;inset:0;border:1px solid #dadbdd;border-radius:11px;background:linear-gradient(var(--pd-light-angle),#f4f4f4 0%,#626365 13%,#d4d4d5 25%,#fff 35%,#838386 46%,#353538 65%,#c9c9cb 79%,#f4f4f4 87%,#707073 100%);box-shadow:inset 0 1px 0 #fff,1px 2px 0 #8c8d90,2px 4px 0 #343438,3px 5px 0 #a2a3a7,8px 20px 38px #0008}
.hero-demo .pd-surface{position:absolute;inset:1.8%;overflow:hidden;border-radius:7px;border:1px solid #222225;background:#fff;box-shadow:0 0 0 1px #ffffff52}
.hero-demo .pd-surface:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(var(--pd-light-angle),transparent 15%,#ffffff06 37%,transparent 57%);pointer-events:none}
.hero-demo[data-renderer="webgl"] .pd-surface{visibility:hidden}
.hero-demo[data-renderer="webgl"] .pd-plane:before{display:none}
.hero-demo .pd-plugin-surface:after{content:"";position:absolute;inset:0;border:2px solid #ff994a;border-radius:inherit;opacity:var(--pd-arrival);pointer-events:none}
.hero-demo .pd-plugin-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.hero-demo .pd-extension-image{position:absolute;display:block;left:-177.5%;top:-18.928571%;width:320%;height:142.857143%;max-width:none;object-fit:fill}
.hero-demo .pd-screen-backup{display:flex;flex-direction:column;height:100%;font-family:Inter,Arial,sans-serif;font-size:clamp(7px,1vw,12px);line-height:1.5;padding:7%;color:#18181b;background:white}
.hero-demo .pd-screen-backup>strong{margin:-8% -8% 10%;padding:9%;color:white;background:#18181b;font-size:1.5em}
.hero-demo .pd-screen-backup>span{color:#73737d;margin-top:7%}
.hero-demo .pd-screen-backup>p{margin:8% 0}
.hero-demo .pd-screen-backup>b{margin-top:auto;padding:6%;text-align:center;color:white;background:#ff7627;border-radius:7px}
.hero-demo .pd-screen-backup nav{border-bottom:1px solid #ececf0;padding-bottom:7%}
.hero-demo .pd-file{position:absolute;left:50%;top:50%;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#333336,#1d1d20);border:1px solid #a9a9ae;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 #606064,0 16px 36px #0008;color:#f6f6f6;opacity:0;pointer-events:none;will-change:transform,opacity;white-space:nowrap}
.hero-demo .pd-file b{display:block;font-size:12px;font-weight:600}
.hero-demo .pd-file small{display:block;margin-top:4px;color:#b9b9c0;font-size:9px}
.hero-demo .pd-file-icon{position:relative;display:block;width:28px;height:35px;border:1.5px solid #ff964f;border-radius:4px 9px 4px 4px;background:#ff762721}
.hero-demo .pd-file-icon:before{content:"";position:absolute;left:6px;right:6px;top:14px;height:2px;background:#ff964f;box-shadow:0 5px 0 #ff964f,0 10px 0 #ff964f}
.hero-demo .pd-file-check{font-style:normal;color:#ff964f;font-size:15px;margin-left:2px}
.hero-demo .pd-controls{position:absolute;inset:12px 12px auto auto;width:0;height:0;z-index:10;font-family:Inter,Arial,sans-serif}
.hero-demo .pd-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-demo .pd-preview-label{font-size:10px;line-height:1.2;color:#a2a2ac}
.hero-demo .pd-status{font-size:11px;line-height:1.3;font-weight:500;color:#e1e1e6}
.hero-demo .pd-actions{display:flex;align-items:center;flex-shrink:0;gap:13px}
.hero-demo .pd-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:5px 0;border:0;border-radius:0;background:transparent;color:#c7c7cf;font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;cursor:pointer;white-space:nowrap}
.hero-demo .pd-actions button:hover{color:#fff}
.hero-demo .pd-actions button:focus-visible{outline:2px solid #ff964f;outline-offset:5px;border-radius:2px}
.hero-demo .pd-actions button>span:first-child{font-size:16px;font-weight:400}
.hero-demo .pd-pause{min-width:53px}
.hero-demo .pd-actions .pd-replay{display:none}
.hero-demo .pd-actions .pd-pause{position:absolute;top:0;right:0;width:1px;height:1px;min-width:0;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-demo .pd-actions .pd-pause:focus-visible{width:auto;height:auto;min-height:40px;padding:10px 14px;overflow:visible;clip-path:none;border:1px solid #838389;border-radius:6px;background:#252529;color:white;outline:2px solid #ff964f;outline-offset:3px}
.hero-demo [hidden]{display:none!important}

/* Static HTML/CSS webpage. Product images use exactly the same projection as WebGL. */
.hero-demo .pd-browser-bar{display:flex;align-items:center;gap:5px;height:8.2%;padding:0 2%;background:#edf0f0}
.hero-demo .pd-browser-bar>i{width:5px;height:5px;background:#c9d1ce;border-radius:50%}
.hero-demo .pd-browser-bar>i:first-child{background:#e7a89c}
.hero-demo .pd-browser-bar>i:nth-child(2){background:#e5c584}
.hero-demo .pd-browser-bar>span{width:65%;margin-left:12%;background:white;text-align:center;font-size:7px;padding:3px;border-radius:3px;color:#5e6970}
.hero-demo .pd-website-surface{background:#fbfaf6}
.hero-demo .pd-site-nav{height:12.5%;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dedfd6;color:#273632}
.hero-demo .pd-site-nav b{font-size:22px;letter-spacing:-1px}
.hero-demo .pd-site-nav span{font-size:7px}
.hero-demo .pd-site-content{display:grid;grid-template-columns:1.25fr 1fr;gap:5%;height:66%;padding:4% 5% 0}
.hero-demo .pd-site-content>div:first-child{padding-top:9%;color:#283b32}
.hero-demo .pd-site-content small{font-size:7px;color:#7a8375}
.hero-demo .pd-site-content strong{display:block;font:bold clamp(16px,2.25vw,31px)/1.12 Georgia,serif;letter-spacing:-.03em;margin:10% 0 8%}
.hero-demo .pd-site-content p{font-size:7px;color:#69736b;line-height:1.5}
.hero-demo .pd-site-content>div>span{display:inline-block;background:#2a3d33;color:white;font-size:7px;padding:7% 9%;margin-top:9%}
.hero-demo .pd-site-art{position:relative;background:#e4e8d8}
.hero-demo .pd-site-art small{position:absolute;bottom:5%;left:6%;font-size:6px}
.hero-demo .pd-lamp-stem{position:absolute;width:5%;height:37%;left:48%;top:37%;background:linear-gradient(90deg,#a75b34,#e8ae7b,#b77549)}
.hero-demo .pd-lamp-base{position:absolute;width:40%;height:8%;left:30%;top:70%;border-radius:50%;background:linear-gradient(90deg,#b8784c,#e8ae7b)}
.hero-demo .pd-lamp-shade{position:absolute;left:18%;top:20%;width:64%;height:31%;border-radius:100% 100% 8% 8%;background:linear-gradient(115deg,#dfa071,#eeb98d 45%,#bd7647)}
.hero-demo .pd-site-footer{margin:4% 5% 0;padding-top:3%;border-top:1px solid #dedfd6;color:#657066;font-size:7px}
.hero-demo .pd-scan{position:absolute;left:0;right:0;top:var(--pd-scan);height:2px;background:#ff7627;box-shadow:0 -8px 16px #ff762729;opacity:0}
.hero-demo[data-phase="scan"] .pd-scan{opacity:1}

@media(min-width:1600px){.hero-demo{height:710px}}
@media(max-width:1100px){.hero-demo{height:570px}}
@media(max-width:960px){.hero-demo{max-width:720px;height:620px;margin-inline:auto}}
@media(max-width:600px){.hero-demo{height:470px}.hero-demo .pd-controls{padding:0;gap:10px}.hero-demo .pd-actions{gap:10px}.hero-demo .pd-actions button{font-size:10px}.hero-demo .pd-preview-label{font-size:9px}.hero-demo .pd-status{font-size:10px}.hero-demo .pd-file{padding:9px 11px;gap:7px}.hero-demo .pd-file b{font-size:10px}.hero-demo .pd-file small{font-size:8px}.hero-demo .pd-file-icon{width:24px;height:30px}}
@media(max-width:380px){.hero-demo{height:405px}.hero-demo .pd-controls{align-items:flex-start;gap:6px}.hero-demo .pd-actions{gap:9px}.hero-demo .pd-actions button{font-size:9px}.hero-demo .pd-pause{min-width:40px}.hero-demo .pd-caption{max-width:135px}.hero-demo .pd-status{line-height:1.5}.hero-demo .pd-site-content strong{font-size:17px}.hero-demo .pd-site-nav b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.hero-demo .pd-plane,.hero-demo .pd-file{will-change:auto}.hero-demo .pd-file,.hero-demo .pd-scan{display:none}.hero-demo .pd-controls{justify-content:center}.hero-demo .pd-caption{text-align:center}.hero-demo .pd-actions{display:none}}