/* Presentation shell: controls occupy a rail, the model has its own clear viewport. */
main{background:radial-gradient(ellipse at 68% 43%,#fffdf7 0%,#eeebe2 78%)}
main:before{content:'';position:absolute;inset:0 auto 0 0;width:302px;background:#f8f6efc9;border-right:1px solid #ded9cc;pointer-events:none}
.title,.interior-mode .title,.wall-detail .title{left:26px;top:29px;width:250px;padding:0;background:none;box-shadow:none}
.title h1,.interior-mode .title h1,.wall-detail .title h1{font-size:32px;margin:12px 0;line-height:1.12}
.title .eyebrow{font-size:8px;letter-spacing:1.55px;line-height:1.6}.title p{font-size:11px;line-height:1.7}
#stage{inset:82px 16px 123px 316px}
.view-switch{top:23px;right:26px;left:auto;gap:3px;background:#faf8f1;border-radius:9px;padding:5px}.view-switch button{font-size:11px;padding:10px 16px;border-radius:5px;min-height:40px}
#interior-reference{display:none!important}
.device-filters{top:165px;left:24px;right:auto;width:254px;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;transform:none}
.device-filters>.eyebrow{grid-column:1/-1;font-size:8px;margin:0 0 7px 2px}
.device-filters button{display:flex;align-items:center;gap:9px;text-align:left;font-size:19px;min-height:43px;padding:8px 12px;border:1px solid #dcd7ca;background:#fffdf6;border-radius:6px;color:#8a806c}
.device-filters button span{font-size:11px;color:#655e50}.device-filters button[aria-pressed=true]{background:#58634d;color:#fff;border-color:#58634d}.device-filters button[aria-pressed=true] span{color:#fff}
#wall-browser,.interior-mode #wall-browser.active-browse{top:358px;left:24px;width:254px;padding:13px 12px;border-radius:6px;background:#fffdf7;z-index:6}
#wall-browser[hidden]{display:none!important}#wall-browser>div{display:flex;flex-direction:column;align-items:stretch;gap:9px}#wall-browser select{width:100%;max-width:100%;font-size:11px;padding:8px 0}#wall-device-open{padding:10px 12px;border:1px solid #d6d2c6;border-radius:4px;font-size:11px}
.scene-palette{left:24px;bottom:28px;width:254px;padding:16px 13px;border-radius:7px;background:#fffdf6;border-color:#ddd7c8}.quick-scenes{gap:5px}.quick-scenes button{min-height:66px;padding:10px 4px;border-radius:5px}.quick-scenes button span{font-size:10px}#all-off{min-height:30px;font-size:10px}#demo-summary{font-size:10px;line-height:1.5}
.room-nav{bottom:76px;left:calc(50% + 151px);max-width:calc(100% - 340px);padding:5px;border-radius:8px;background:#faf8f2f2}.room-nav button{font-size:11px;padding:11px 15px;border-radius:5px;min-height:39px}
.scene-tools{bottom:21px;left:calc(50% + 151px);max-width:calc(100% - 340px);border-radius:8px;padding:5px;gap:3px;overflow:auto;scrollbar-width:none;background:#faf8f2f2}.scene-tools button{height:35px;min-width:35px;padding:0 9px;border-radius:5px;font-size:12px}.scene-tools .segmented{display:none}.scene-tools #rotate-left,.scene-tools #rotate-right{font-size:22px}.scene-tools .tool-divider{margin:0 2px}
.gesture-hint{top:69px;bottom:auto;left:326px;right:auto;font-size:9px;opacity:.7;color:#877d6b}.model-caption{bottom:8px;left:26px;max-width:254px;font-size:8px}.room-label{padding:7px 11px;font-size:10px;border-radius:5px;background:#fffdf5e8;box-shadow:0 2px 12px #3d342d13;color:#655b4c;border-color:#e5dece}
#room-card{left:24px;right:auto;top:358px;bottom:auto;width:254px;padding:18px;background:#fffdf6;box-shadow:none;border-radius:6px}#room-card h2{font-size:23px;margin:12px 0}#room-card p{font-size:11px;line-height:1.6;margin-bottom:10px}#room-card .eyebrow{font-size:8px}
main:has(#room-card:not([hidden])) #wall-browser{display:none!important}
#device-panel{left:18px;right:auto;top:18px;bottom:24px;width:324px;max-height:none;padding:24px;background:#fffdf6f7;border-radius:9px;box-shadow:0 8px 30px #453f3010;z-index:8}
main:has(#device-panel:not([hidden])):before{width:360px}main:has(#device-panel:not([hidden])) #stage{left:374px}main:has(#device-panel:not([hidden])) .title,main:has(#device-panel:not([hidden])) .device-filters,main:has(#device-panel:not([hidden])) #wall-browser,main:has(#device-panel:not([hidden])) .scene-palette,main:has(#device-panel:not([hidden])) #room-card{display:none!important}
main:has(#device-panel:not([hidden])) .gesture-hint{left:384px}main:has(#device-panel:not([hidden])) .room-nav,main:has(#device-panel:not([hidden])) .scene-tools{left:calc(50% + 180px);max-width:calc(100% - 390px)}
.device-close{width:36px;height:36px;top:9px;right:9px}.product-controller{width:224px;height:224px}.product-touch{width:190px;height:190px}.display-product{width:252px}.device-controls button,.system-primary{min-height:42px}.device-panel-fine{font-size:10px;line-height:1.7}
#plan{inset:12px;overflow:auto}#fallback{inset:0}.device-marker{min-width:32px;min-height:32px}.service-label{font-size:10px}
@media(max-height:790px) and (min-width:761px){.scene-palette{bottom:25px;padding:12px}.scene-palette .eyebrow{display:none}.quick-scenes{margin-top:0}.quick-scenes button{min-height:52px}#demo-summary{margin:9px 0 0}#all-off{margin-top:4px}.title{top:24px}.device-filters{top:155px}#wall-browser,.interior-mode #wall-browser.active-browse,#room-card{top:342px}}
@media(max-height:700px) and (min-width:761px){#demo-summary{display:none}.scene-palette{padding:8px}#all-off{min-height:23px}.quick-scenes button{min-height:43px;flex-direction:row;justify-content:center}.quick-scenes button b{font-size:16px}#room-card{max-height:150px;overflow:auto}.title h1{font-size:29px}.device-filters{top:140px}.device-filters button{min-height:36px}#wall-browser,.interior-mode #wall-browser.active-browse,#room-card{top:300px}}
@media(max-width:1000px) and (min-width:761px){main:before{width:256px}.title,.interior-mode .title{left:20px;width:218px}.title h1{font-size:29px}.device-filters,#wall-browser,.scene-palette,#room-card,.interior-mode #wall-browser.active-browse{left:16px;width:224px}#stage{left:268px}.room-nav,.scene-tools{left:calc(50% + 128px);max-width:calc(100% - 286px)}.room-nav button{padding:10px}.gesture-hint{left:278px}.view-switch{right:18px}.view-switch button{padding:10px 12px}.model-caption{left:18px;max-width:220px}}
@media(max-width:760px){
 header{height:100px;padding:12px 16px}.brand-name{font-size:21px}.brand-project,.demo-badge{display:none}.header-right{gap:7px}.apartment-switch{position:absolute;left:16px;right:16px;bottom:8px;padding:3px}.apartment-switch button{flex:1;padding:7px 8px;gap:8px;justify-content:center}.apartment-switch strong{font-size:15px}.apartment-switch small{font-size:8px}
 main{height:calc(100dvh - 100px)}main:before{display:none}
 .title,.interior-mode .title,.wall-detail .title{left:18px;top:16px;width:calc(100% - 36px);padding:0}.title h1,.interior-mode .title h1,.wall-detail .title h1{font-size:27px;margin:6px 0}.title .eyebrow,.interior-mode .title .eyebrow{font-size:7px}.title p,.interior-mode .title p{font-size:10px;display:block}
 .view-switch{left:16px;right:16px;top:105px;bottom:auto;flex-direction:row;justify-content:center;padding:3px;gap:1px;border-radius:6px}.view-switch button{flex:1;min-height:34px;font-size:10px;padding:7px 5px;white-space:nowrap}.view-switch button:last-child{border-top:0;border-left:1px solid #ded8cb;margin-left:3px}
 #stage{inset:152px 6px 205px 6px}
 .gesture-hint{display:none}.device-filters{top:auto;bottom:155px;left:12px;right:12px;width:auto;max-width:none;display:flex;flex-wrap:nowrap;gap:5px;overflow:auto;padding:2px 0;scrollbar-width:none;background:none}.device-filters>.eyebrow{display:none}.device-filters button{flex:none;min-height:39px;padding:6px 10px;gap:6px;font-size:16px}.device-filters button span{font-size:10px;white-space:nowrap}
 .room-nav{left:12px;right:12px;bottom:105px;transform:none;max-width:none;width:auto;border-radius:6px}.room-nav button{min-height:33px;font-size:10px;padding:9px 12px}
 .scene-tools{left:12px;right:12px;transform:none;bottom:60px;max-width:none;width:auto;border-radius:6px;padding:3px;gap:1px;justify-content:space-between}.scene-tools button{min-width:31px;height:31px;padding:0 6px;font-size:11px}.scene-tools button span{display:none}.scene-tools #rotate-left,.scene-tools #rotate-right{font-size:20px}.scene-tools .tool-divider{display:none}
 .scene-palette{left:12px;right:12px;bottom:12px;width:auto;padding:4px;border-radius:6px;background:#faf8f2f2}.scene-palette .eyebrow,#demo-summary,#all-off{display:none}.quick-scenes{display:grid;grid-template-columns:repeat(4,1fr);margin:0;gap:4px}.quick-scenes button{flex-direction:row;justify-content:center;min-height:31px;padding:4px 8px;gap:6px}.quick-scenes button b{font-size:16px}.quick-scenes button span{font-size:10px}
 .model-caption{display:none}
 #wall-browser,.interior-mode #wall-browser.active-browse{left:12px;right:12px;top:153px;bottom:auto;width:auto;padding:10px 12px;background:#fffdf6f0}.interior-mode #wall-browser:not(.active-browse){display:none}#wall-browser>div{flex-direction:row;align-items:center}#wall-browser label{font-size:7px}#wall-browser select{min-width:0;flex:1;font-size:10px}#wall-device-open{font-size:10px;padding:8px;white-space:nowrap}
 main:has(#wall-browser:not([hidden])) #stage{top:235px}
 #room-card{left:12px;right:12px;width:auto;top:153px;bottom:auto;padding:10px 15px;max-height:95px;overflow:auto}#room-card h2{font-size:20px;margin:2px 0}#room-card .eyebrow,#room-card .reference-button{display:none}#room-card p{font-size:9px;margin:4px 25px 0 0}main:has(#room-card:not([hidden])) #stage{top:244px}
 #device-panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:61dvh;padding:20px 24px;border-radius:12px;box-shadow:0 -4px 40px #312c2a30;z-index:12}
 main:has(#device-panel:not([hidden])) #stage{left:6px;right:6px;top:55px;bottom:59dvh}main:has(#device-panel:not([hidden])) .view-switch,main:has(#device-panel:not([hidden])) .room-nav,main:has(#device-panel:not([hidden])) .scene-tools{display:none}main:has(#device-panel:not([hidden])) .title{display:block!important;top:12px;left:16px}main:has(#device-panel:not([hidden])) .title .eyebrow,main:has(#device-panel:not([hidden])) .title p{display:none}main:has(#device-panel:not([hidden])) .title h1{font-size:22px;margin:0}.product-controller{width:200px;height:200px}.product-touch{width:176px;height:176px}.display-product{width:238px}
}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}
@media(min-width:761px){
 #room-card{top:17px;left:326px;width:280px;border:0;background:none;padding:0 20px 0 0;max-height:64px;overflow:hidden}
 #room-card h2{font-size:22px;margin:5px 0}#room-card p{font-size:9px;line-height:1.4;margin:0;color:#948876}#room-card .eyebrow,#room-card .reference-button{display:none}#room-close{right:0;top:0;min-width:24px}
 main:has(#room-card:not([hidden])) .gesture-hint{visibility:hidden!important}
 main:has(#room-card:not([hidden])) #wall-browser:not([hidden]){display:block!important}
}
@media(max-width:760px){.room-label:not(.active){display:none}}
/* Keep the first controls visible without scrolling past the product preview. */
#device-panel h2{font-size:23px;margin:11px 0 7px;line-height:1.16}#device-panel .device-location{font-size:10px;margin:0 0 10px}
#device-panel .product-controller{width:180px;height:180px;margin:14px auto}#device-panel .product-touch{width:160px;height:160px}
#device-panel .zone-legend{gap:4px;margin:12px 0;font-size:9px}#device-panel .zone-legend button{padding:7px 6px;min-height:30px}
#device-panel h3{font-size:20px;margin:18px 0 10px}.device-controls{margin:10px 0}.device-controls button{padding:9px 13px}.device-notice:empty{display:none}
#device-panel .display-product{width:226px;margin:15px auto 8px;padding:14px 15px 8px}.display-scenes button{height:64px}.display-tabs{padding-bottom:8px}
@media(max-width:760px){#device-panel .product-controller{width:168px;height:168px}#device-panel .product-touch{width:150px;height:150px}#device-panel .zone-legend button{min-height:33px}}
@media(min-width:761px) and (max-width:1000px){#room-card{left:278px;width:150px}#room-card h2{font-size:18px}#room-card p{display:none}}
/* Give the apartment more of the working viewport. */
@media(min-width:1001px){#stage{inset:24px 8px 116px 304px}}
@media(min-width:761px) and (max-width:1000px){#stage{top:24px;bottom:116px}}
.gesture-hint{display:none}
.presentation-launch{display:flex;align-items:center;gap:8px;min-height:40px;padding:10px 14px;border:1px solid #b5bca8;border-radius:6px;background:#57634b;color:#fffdf7;font-size:17px;white-space:nowrap}.presentation-launch span{font-size:11px}
#presentation-exit{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:50;display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 14px;border:1px solid #d5cfbf;border-radius:7px;background:#fffdf4d9;color:#5b594c;font-size:20px;backdrop-filter:blur(12px);opacity:.6;transition:opacity .2s}#presentation-exit span{font-size:11px}#presentation-exit kbd{font:10px Arial;border:1px solid #cfc9bc;padding:3px 5px;border-radius:3px;color:#8d8576}#presentation-exit:hover,#presentation-exit:focus-visible{opacity:1}#presentation-exit[hidden]{display:none}
body.presentation-mode header{display:none!important}
body.presentation-mode main{height:100dvh!important;width:100%;background:radial-gradient(ellipse at 50% 45%,#fffdf6 0%,#eeeae0 85%)}
body.presentation-mode main:before{display:none!important}
body.presentation-mode main>:not(#stage){display:none!important}
body.presentation-mode main #stage{inset:10px!important}
body.presentation-mode #labels,body.presentation-mode #device-markers,body.presentation-mode #service-status-labels{display:none!important}
@media(max-width:1000px){.presentation-launch{padding:9px 11px}.presentation-launch span{font-size:10px}}
@media(max-width:760px){.presentation-launch{min-height:32px;font-size:15px;padding:7px 9px;gap:5px}.presentation-launch span{font-size:9px}body.presentation-mode main #stage{inset:8px!important}#presentation-exit{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));padding:8px 11px}#presentation-exit kbd{display:none}}
