/* Dimensional illustrations share the product's purple, pearl and silver palette. */
main{overflow-x:clip}
.drawing-panel{background:radial-gradient(ellipse at 48% 44%,#60316c 0%,#3e1249 60%,#30073b 100%)}
.drawing-top{padding-top:10px;min-height:39px}
.scene-view-switch{display:flex;padding:3px;background:#ffffff0c;border:1px solid #ffffff14;border-radius:6px;gap:2px;letter-spacing:0}
.scene-view-switch button{min-height:28px;padding:4px 12px;color:#d7c1df;background:transparent;border-radius:4px;font-size:10px;font-weight:600;transition:background-color 160ms ease,color 160ms ease}
.scene-view-switch button[aria-pressed=true]{background:#f0e4f6;color:#491354;box-shadow:0 2px 5px #16021f30}
.scene-view-switch button:focus-visible{outline-color:#e5bfef;outline-offset:2px}
.room-illustration{flex:1;min-height:0;perspective:850px;transform-style:preserve-3d;--tilt-x:0deg;--tilt-y:0deg}
.room-scene{display:block;width:100%;height:100%;stroke:none;overflow:visible;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-origin:50% 55%}
.room-scene path,.room-scene ellipse,.room-scene rect{stroke-linejoin:round}
.ceiling-float{animation:ceiling-hover 7s ease-in-out infinite;transform:translateY(-7px)}
.room-light-beams,.room-light-pools{animation:light-breathe 7s ease-in-out infinite}
.room-area-tag{animation:room-tag-hover 7s ease-in-out infinite;animation-delay:-2s}
.drawing-bottom{position:relative;z-index:1;font-size:8px;padding-top:7px}
.hero-product{padding-bottom:53px}
.try-note{bottom:-17px;font-size:9px}
.floating-note{bottom:28px}
.motion-toggle{position:absolute;right:0;bottom:-16px;display:flex;align-items:center;gap:7px;min-height:34px;padding:5px 9px;font-size:10px;color:#76627d;background:transparent;border-radius:6px}
.motion-toggle-icon{font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;min-width:10px}
.benefit{overflow:hidden;position:relative}
.benefit-top{margin-bottom:0}
.benefit-top>span{font-size:9px}
.object-stage{height:205px;margin:0 -12px 16px;position:relative;isolation:isolate;perspective:900px;--tilt-x:0deg;--tilt-y:0deg}
.object-stage::before{content:'';position:absolute;inset:2% 12% 5%;background:radial-gradient(ellipse,#ffffff98,transparent 67%);z-index:-1;pointer-events:none}
.object-float{position:absolute;inset:0;transform-style:preserve-3d;animation:object-hover 6s ease-in-out infinite}
.layers-stage .object-float{animation-delay:-2s}.document-stage .object-float{animation-delay:-4s}
.object-shadow{position:absolute;width:145px;height:27px;left:50%;bottom:27px;margin-left:-72px;border-radius:50%;background:radial-gradient(ellipse,#4e23592c,transparent 70%);animation:object-shadow 6s ease-in-out infinite}
.object-coordinate{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#937f9b;font-size:7px;letter-spacing:1.5px;font-weight:600}
.tape-measure{position:absolute;top:39px;left:50%;width:205px;height:124px;margin-left:-100px;transform:rotateX(calc(12deg + var(--tilt-x))) rotateY(calc(-24deg + var(--tilt-y))) rotateZ(-12deg);transform-style:preserve-3d}
.tape-case{position:absolute;left:10px;top:0;width:119px;height:118px;border-radius:33px 38px 26px 28px;background:linear-gradient(135deg,#fefcff 2%,#d6c9e0 45%,#a087ad 88%);box-shadow:1px 1px 0 #fff inset,-3px -3px 0 #bfa8cc inset,1px 1px 0 #775686,2px 2px 0 #775686,3px 3px 0 #775686,4px 4px 0 #775686,5px 5px 0 #775686,6px 6px 0 #775686,7px 7px 0 #775686,8px 8px 0 #775686,9px 9px 0 #775686,10px 10px 0 #775686,13px 17px 21px #49245524;transform:translateZ(15px)}
.tape-face{position:absolute;inset:18px 15px;border-radius:50%;background:linear-gradient(140deg,#eee6f3,#d0bddb 70%);box-shadow:0 1px 1px #fff inset,0 -2px 2px #8e749b55 inset;display:flex;align-items:center;justify-content:center;flex-direction:column}
.tape-face img{width:47px;height:47px}.tape-face>span{font-size:9px;font-weight:700;color:#775485;margin-top:2px}
.tape-button{position:absolute;width:31px;height:10px;top:-3px;left:48px;border-radius:5px 5px 0 0;background:linear-gradient(#754783,#370842);transform:translateZ(-1px)}
.tape-strip{position:absolute;left:99px;top:85px;width:114px;height:27px;border-radius:0 3px 2px 0;background:linear-gradient(#fff7eb,#e4d3b6);box-shadow:0 3px 0 #b9a685,0 8px 14px #47204f22;display:flex;align-items:end;justify-content:space-around;padding:5px 6px 2px 16px;transform-origin:0 50%;animation:tape-extend 6s ease-in-out infinite}
.tape-strip::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,transparent 0 7px,#776950 7px 8px)}
.tape-strip>span{font-size:9px;font-weight:600;color:#726245}.tape-strip>i{position:absolute;right:-2px;top:-3px;width:5px;height:36px;background:linear-gradient(90deg,#e0d9e6,#9a8f9d);box-shadow:2px 1px 1px #79707e}
.material-stack{position:absolute;top:54px;left:50%;width:146px;height:117px;margin-left:-73px;transform-style:preserve-3d;transform:rotateX(calc(53deg + var(--tilt-x))) rotateZ(-33deg) rotateY(var(--tilt-y))}
.material-layer{position:absolute;inset:0;border-radius:8px;box-shadow:1px 1px 0 #c0a6cb,2px 2px 0 #b49ac0,3px 3px 0 #ab90b7,4px 4px 0 #a183ae;transform-style:preserve-3d}
.layer-base{background:linear-gradient(145deg,#795088,#370842);box-shadow:1px 1px 0 #38133f,2px 2px 0 #38133f,3px 3px 0 #38133f,4px 4px 0 #38133f,12px 20px 22px #41234820}
.layer-base::after{content:'';position:absolute;inset:11px;border:1px solid #f0daff55;border-radius:3px}
.layer-middle{background:linear-gradient(140deg,#e0cdea88,#b190c9aa);border:1px solid #fff7;transform:translateZ(30px);animation:layer-middle-hover 6s ease-in-out infinite;animation-delay:-2s}
.layer-top{display:grid;grid-template-columns:1fr 1fr;place-items:center;padding:14px 19px;background:linear-gradient(135deg,#fff,#f1e6f8 52%,#c5b1d6);border:1px solid #fff;transform:translateZ(61px);animation:layer-top-hover 6s ease-in-out infinite;animation-delay:-2s}
.layer-top>span{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fffaf0 30%,#ecdbb7 34%,#f4edf7 48%,#a08cae 58%,#e7ddee 69%);box-shadow:0 0 12px #fff9d69c}
.document-object{position:absolute;top:27px;left:50%;margin-left:-64px;width:128px;height:149px;transform:rotateX(calc(19deg + var(--tilt-x))) rotateY(calc(-24deg + var(--tilt-y))) rotateZ(-13deg);transform-style:preserve-3d}
.document-page{position:absolute;inset:0;padding:17px 16px;background:linear-gradient(135deg,#fff,#f5edf9);border:1px solid #fff;border-radius:7px;box-shadow:1px 2px 0 #cebcd9,2px 4px 0 #f8f1fb,3px 6px 0 #c7b3d1,4px 8px 0 #ece0f3,6px 10px 0 #ad95bb,13px 20px 20px #4123481a;transform:translateZ(8px)}
.document-page>img{width:86px;height:auto;margin-bottom:14px}.document-page>b{font-size:10px;letter-spacing:1.8px;display:block;margin-bottom:10px;color:#4e225c}
.document-page>i{display:block;background:#ded1e7;height:3px;border-radius:2px;margin-bottom:7px}.document-page>i:nth-of-type(2){width:83%}.document-page>i:nth-of-type(3){width:63%}
.document-signature{width:38px;height:13px;border-bottom:2px solid #7e4b96;border-radius:0 0 70% 40%;transform:skewX(-40deg) rotate(-13deg);margin:13px 0 0 3px}
.document-seal{position:absolute;right:-29px;bottom:7px;display:grid;place-items:center;width:61px;height:61px;border:1px solid #bf98cf;border-radius:19px;background:linear-gradient(140deg,#ac79c1,#683477 54%,#450e53);box-shadow:1px 2px 0 #3c0d46,2px 4px 0 #3c0d46,3px 6px 0 #3c0d46,6px 14px 16px #3711412e;transform:translateZ(36px);animation:seal-hover 6s ease-in-out infinite;animation-delay:-4s}
.document-seal>svg{width:33px;height:33px;stroke:#faf0ff;stroke-width:2.5}
.workflow-visual{perspective:1000px}
.phone-device{animation:phone-hover 8s ease-in-out infinite}
.device-card.card-upper{animation:device-card-hover 7s ease-in-out infinite}.device-card.card-lower{animation:device-card-hover 7s ease-in-out infinite;animation-delay:-3.5s}
.downlight-object{position:absolute;right:1%;top:12%;width:85px;height:106px;pointer-events:none;transform:rotate(-17deg);animation:downlight-hover 7s ease-in-out infinite}
.downlight-housing{position:absolute;inset:8px 9px 28px;border-radius:50% 50% 43% 43%;background:linear-gradient(90deg,#928399,#f7f4fa 34%,#bfb3c6 68%,#88798f);box-shadow:inset 2px 0 2px #fff9}
.downlight-rim{position:absolute;left:0;right:0;bottom:22px;height:42px;border-radius:50%;background:linear-gradient(160deg,#fff,#c5b6d0);box-shadow:0 4px 0 #a390ae,0 6px 0 #e4d9eb,0 17px 19px #54245d25}
.downlight-rim::after{content:'';position:absolute;inset:7px 12px;border-radius:50%;background:radial-gradient(ellipse,#fff8e1 30%,#e3d7be 54%,#a494ad 60%,#fcf7ff 69%);box-shadow:0 2px 3px #674d7022 inset}
.downlight-beam{position:absolute;top:77px;left:9px;right:9px;height:96px;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(#fff7dd70,#fff7dd00);animation:light-breathe 7s ease-in-out infinite}
@keyframes ceiling-hover{0%,100%{transform:translateY(-5px)}50%{transform:translateY(-19px)}}
@keyframes light-breathe{0%,100%{opacity:.48}50%{opacity:.95}}
@keyframes room-tag-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes object-hover{0%,100%{transform:translateY(3px)}50%{transform:translateY(-8px)}}
@keyframes object-shadow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.82);opacity:.55}}
@keyframes tape-extend{0%,100%{transform:scaleX(.88)}50%{transform:scaleX(1)}}
@keyframes layer-middle-hover{0%,100%{transform:translateZ(25px)}50%{transform:translateZ(34px)}}
@keyframes layer-top-hover{0%,100%{transform:translateZ(51px)}50%{transform:translateZ(70px)}}
@keyframes seal-hover{0%,100%{transform:translateZ(30px) translateY(0)}50%{transform:translateZ(42px) translateY(-4px)}}
@keyframes phone-hover{0%,100%{transform:rotate(-6deg) translateY(0) rotateY(-3deg)}50%{transform:rotate(-4deg) translateY(-9px) rotateY(4deg)}}
@keyframes device-card-hover{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes downlight-hover{0%,100%{transform:rotate(-17deg) translateY(0)}50%{transform:rotate(-11deg) translateY(-10px)}}
/* Offscreen and background animation is paused. The global control also freezes it. */
[data-motion-zone]:not(.motion-in-view) *,html.motion-paused [data-motion-zone] *,html.motion-background [data-motion-zone] *{animation-play-state:paused!important}
html.motion-paused [data-tilt],html.motion-background [data-tilt]{--tilt-x:0deg!important;--tilt-y:0deg!important}
@media(hover:hover) and (pointer:fine){.scene-view-switch button:not([aria-pressed=true]):hover{background:#ffffff18;color:white}.motion-toggle:hover{background:#eadfed}}
@media(min-width:1600px){.object-stage{height:226px;margin-top:10px;margin-bottom:22px}.tape-measure{top:50px}.material-stack{top:65px}.document-object{top:38px}}
@media(max-width:1190px){.object-stage{height:186px;margin-inline:-17px;margin-bottom:18px}.tape-measure{top:30px;scale:.88}.material-stack{top:43px;scale:.88}.document-object{top:19px;scale:.91}.object-coordinate{font-size:6px;letter-spacing:1px}.try-note{font-size:8px}.motion-toggle{font-size:9px}.downlight-object{scale:.85;right:-2%;top:10%}}
@media(max-width:950px) and (min-width:761px){.object-stage{height:168px}.tape-measure{top:19px;scale:.74}.material-stack{top:36px;scale:.77}.document-object{top:6px;scale:.78}.object-coordinate{font-size:5px;letter-spacing:.8px}.benefit h3{font-size:20px}.drawing-bottom{font-size:6px}.scene-view-switch button{font-size:8px;padding-inline:9px}.try-note{font-size:7px;left:0;gap:5px}.try-note svg{width:29px}.motion-toggle{font-size:8px}.downlight-object{right:-5%;top:9%}}
@media(max-width:760px){.object-stage{height:195px;margin:0 0 23px}.tape-measure{top:29px;scale:1}.material-stack{top:51px;scale:1}.document-object{top:21px;scale:1}.object-coordinate{font-size:7px}.benefit{padding:25px 26px 27px}.benefit-top{margin-bottom:0}.benefit h3{font-size:28px}.benefit p{max-width:none}.benefit-caption{padding-top:2px}.benefit-top>svg{position:static;width:22px;height:22px}.drawing-top{padding-top:11px;font-size:7px}.scene-view-switch button{font-size:10px;min-height:30px;padding-inline:11px}.drawing-bottom{font-size:7px;gap:4px;padding-inline:12px}.hero-product{padding-bottom:51px}.motion-toggle{font-size:9px;bottom:-16px}.try-note{left:7px;font-size:8px;gap:5px}.try-note svg{width:30px}.floating-note{bottom:27px}.downlight-object{top:9%;right:0;scale:.82}}
@media(max-width:390px){.drawing-top{font-size:6px;padding-inline:12px}.scene-view-switch button{font-size:9px;padding-inline:9px}.drawing-bottom{font-size:6px}.motion-toggle{font-size:8px;gap:5px;padding-inline:5px}.try-note{font-size:7px}.try-note svg{width:25px}}
@media(prefers-reduced-motion:reduce){[data-motion-zone] *{animation:none!important;transition:none!important}[data-tilt]{--tilt-x:0deg!important;--tilt-y:0deg!important}.motion-toggle{display:none}}
@media(pointer:coarse){.scene-view-switch button{min-height:44px}.motion-toggle{min-height:44px;bottom:-21px}}
html.keyboard-mode [data-tilt]{--tilt-x:0deg!important;--tilt-y:0deg!important}