.roof-explorer{background:#fff;border:1px solid #c9dfec;grid-template-columns:1.25fr .75fr;min-height:610px;display:grid;box-shadow:0 25px 80px #0e416318}.roof-explorer-stage{isolation:isolate;perspective:1100px;background:radial-gradient(circle at 72% 25%,#236da0 0,#0b3559 35%,#071e37 85%);min-height:610px;position:relative;overflow:hidden}.roof-explorer.evening .roof-explorer-stage{background:radial-gradient(circle at 72% 24%,#b7783d 0,#214366 35%,#091d35 80%)}.roof-explorer-stage:before{content:"";pointer-events:none;background-image:linear-gradient(#acdfff16 1px,#0000 1px),linear-gradient(90deg,#acdfff16 1px,#0000 1px);background-size:50px 50px;position:absolute;inset:0;mask-image:linear-gradient(#0000 15%,#000)}.roof-explorer-orbit{aspect-ratio:1;pointer-events:none;border:1px solid #74b8e353;border-radius:50%;position:absolute;top:-13%;left:15%}.orbit-outer{width:80%}.orbit-inner{border-color:#b0e5ff3d;width:55%;top:0;left:27%}.roof-explorer-sun{background:#d9f5ff;border-radius:50%;width:100px;height:100px;transition:background .5s,box-shadow .5s,transform .5s;position:absolute;top:9%;right:14%;box-shadow:0 0 45px 20px #a7e0ff64,0 0 120px 60px #73b7ec42}.evening .roof-explorer-sun{background:#ffd38b;transform:translate(-30px,38px);box-shadow:0 0 45px 20px #ffba687a,0 0 120px 60px #ed813d4a}.roof-explorer-horizon{background:#9aceec42;height:1px;position:absolute;bottom:9%;left:-10%;right:-10%;transform:rotate(-7deg)}.roof-explorer-roof{width:58%;height:47%;transform-style:preserve-3d;filter:drop-shadow(20px 38px 24px #0008);position:absolute;top:25%;left:22%}.roof-explorer-surface{background:linear-gradient(135deg,#42647c,#1b334b);border:12px solid #627b8c;position:absolute;inset:0;transform:translateZ(28px);box-shadow:inset 0 0 0 3px #0e2336,0 0 0 1px #a9c9db}.roof-explorer-panel-grid{grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(7,1fr);gap:4px;display:grid;position:absolute;inset:5%}.roof-explorer-panel{transform-origin:50%;background:linear-gradient(135deg,#092b53,#155d8d 62%,#1d7dae);border:1px solid #93d9f4;display:block;box-shadow:inset 0 0 0 2px #ffffff1c,0 2px 4px #071a2f}.roof-explorer-panel:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 23%,#a5daf13d 24%,#0000 25%);width:100%;height:100%;display:block}.roof-explorer-edge{background:#162d43;border:1px solid #819aad;position:absolute}.edge-front{transform-origin:top;height:48px;bottom:-48px;left:0;right:0;transform:rotateX(-90deg)}.edge-side{transform-origin:0;width:48px;top:0;bottom:0;right:-48px;transform:rotateY(90deg)}.roof-explorer-callout{z-index:2;color:#173d5a;background:#ffffffed;padding:.6rem .8rem;font-size:.75rem;font-weight:800;position:absolute;box-shadow:0 12px 32px #0004}.roof-explorer-callout span{color:#0b74bd;margin-right:.5rem}.callout-a{top:30%;left:6%}.callout-b{bottom:25%;right:4%}.roof-explorer-stage-footer{color:#c8eaff;text-transform:uppercase;letter-spacing:.14em;justify-content:space-between;gap:1rem;font-size:.67rem;font-weight:800;display:flex;position:absolute;bottom:1.2rem;left:1.5rem;right:1.5rem}.roof-explorer-controls{flex-direction:column;padding:clamp(2rem,4vw,4rem);display:flex}.roof-explorer-controls-head h3{letter-spacing:-.05em;margin:.7rem 0;font-size:clamp(1.8rem,2.5vw,2.8rem);line-height:1.16}.roof-explorer-controls-head p{color:#607286;margin:0 0 1.8rem;line-height:1.7}.roof-slider{border-top:1px solid #d6e4ed;padding:1rem 0;display:block}.roof-slider>span{color:#263f55;justify-content:space-between;align-items:center;gap:1rem;display:flex}.roof-slider small{color:#0b6bb5;font-size:.75rem;font-weight:800}.roof-slider input{accent-color:#0b6bb5;cursor:pointer;width:100%;margin-top:.9rem}.roof-light-control{border-top:1px solid #d6e4ed;padding:1rem 0}.roof-light-control>span{color:#263f55;margin-bottom:.8rem;font-weight:700;display:block}.roof-light-control div{gap:.5rem;display:flex}.roof-light-control button{color:#31506c;background:#fff;border:1px solid #bed5e5;padding:.55rem .85rem;font-size:.82rem;font-weight:700}.roof-light-control button.active{color:#fff;background:#0b6bb5;border-color:#0b6bb5}.roof-explorer-cta{color:#0754a1;border-top:1px solid #d6e4ed;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1.1rem;font-weight:800;display:flex}@media (width<=900px){.roof-explorer{grid-template-columns:1fr}.roof-explorer-stage{min-height:480px}.roof-explorer-controls{gap:.5rem}.roof-explorer-cta{margin-top:1rem}}@media (width<=600px){.roof-explorer-stage{min-height:370px}.roof-explorer-roof{width:66%;height:44%;top:27%;left:18%}.roof-explorer-sun{width:65px;height:65px}.roof-explorer-panel-grid{gap:2px}.roof-explorer-surface{border-width:8px}.roof-explorer-callout{padding:.5rem;font-size:.64rem}.roof-explorer-stage-footer span:last-child{display:none}.roof-explorer-controls{padding:1.5rem}}@media (prefers-reduced-motion:reduce){.roof-explorer-sun{transition:none}}