.casa .viewport .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.casa .viewer-top{justify-content:flex-start}.casa .top-right{margin-left:auto}
.casa .pill-back{justify-content:center;padding:10px 16px 10px 12px;gap:8px}.casa .pill-back svg{width:18px;height:18px}
.casa .pill-brand .mark{width:22px;height:22px}
.casa .pill-lang{padding:4px}.casa .prefs,.casa .seg{display:flex;align-items:center;gap:2px;margin:0}
.casa .seg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.casa .seg a,.casa .seg .seg-current{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;border-radius:999px;font:600 11.5px/1 var(--font-text);letter-spacing:.08em;color:#cfcdd6}
.casa .seg .seg-current{background:var(--d-surface-alt);color:#fff}
@media(hover:hover) and (pointer:fine){.casa .seg a:hover{background:rgb(255 255 255/.14);color:#fff}}
@media(pointer:coarse){.casa .seg a,.casa .seg .seg-current{min-height:44px}}
.preview-band a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.preview-band .preview-notice{display:block;margin-top:5px;color:rgb(242 241 245/.8)}
.preview .viewer-info{max-height:calc(100svh - 240px);overflow:auto}
/* The note of a preview keeps to who made it, what is assumed and the offer: the sizes are in the plan view. */
.preview #info-body dl{display:none}
.preview-extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--divider);font-size:13px;color:var(--muted)}
.preview-extra p{margin:0 0 8px}.preview-extra .preview-sign{color:var(--ink);font-weight:500}.preview-extra .preview-footer{margin:10px 0 0;font-size:12px}
.info-cta .download-link{margin-top:2px}.info-cta .info-link{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:861px) and (min-height:501px){
 .preview-band{left:24px;top:88px;translate:none;width:min(780px,calc(100% - 520px));text-align:left}
 .preview .scene-title{top:196px}
 .preview .viewer-info{top:92px;translate:none;max-height:calc(100svh - 132px - var(--sheet,260px))}
}
@media(min-width:861px) and (max-width:1199px){.preview .scene-title{display:none}}
/* Up to 860 px high the view tools go in a row at the top right (client/casa/casa.css): the note opens under them. */
@media(min-width:861px) and (min-height:501px) and (max-height:860px){.preview .viewer-info{top:144px;right:16px;max-height:calc(100svh - 184px - var(--sheet,260px))}}
@media(max-width:860px),(max-height:500px){
 .casa .pill-lang{display:none}.casa .pill-back span{display:none}.casa .pill-back{padding:10px;min-width:44px}
 .preview .scene-title{display:none}
 .preview .view-tools{top:auto;bottom:calc(var(--sheet,230px) + 22px)}
 .preview-band{top:68px}
 .preview .viewer-info{top:auto;bottom:calc(var(--sheet,230px) + 84px);max-height:calc(100svh - var(--sheet,230px) - 200px)}
}
/* A phone on its side: the band keeps clear of the view tools at the top right and steps aside while the rooms are
   open (the preview opens with them folded, client/casa/main.js); the note opens over everything, below the header. */
@media(max-height:500px) and (orientation:landscape){
 .preview-band{left:16px;translate:none;width:calc(100% - 188px)}
 .preview.ready:not(.panels-collapsed) .preview-band{display:none}
 .preview .view-tools{top:68px;bottom:auto}
 .preview .viewer-info{top:68px;bottom:auto;max-height:calc(100svh - 80px)}
}