.roofStudio{margin:0;background:var(--pt-page-background,var(--pt-bg))}
.roofStudioMain{position:relative;height:calc(100vh - var(--roof-studio-top,120px))}
.roofScene{position:absolute;inset:0}
.roofScene canvas{display:block;width:100%;height:100%}
.roofStudioPanel{position:absolute;top:16px;right:16px;width:260px;padding:14px 16px;background:var(--pt-panel);border:1px solid var(--pt-border);border-radius:var(--pt-radius-card);display:flex;flex-direction:column;gap:12px}
.roofStudioPanel h2{margin:0;font-size:15px;color:var(--pt-ink)}
.roofStudioPanel label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:13px;color:var(--pt-muted)}
.roofStudioPanel input[type=range]{width:100%;accent-color:var(--pt-accent)}
.roofStudioPanel output{color:var(--pt-ink);font-variant-numeric:tabular-nums}
.roofStudioNote{margin:0;font-size:12px;color:var(--pt-muted)}
@media(max-width:700px){.roofStudioPanel{left:12px;right:12px;top:auto;bottom:12px;width:auto}}
.roofStudioLegend{margin:-4px 0 0;font-size:12px;color:var(--pt-muted);line-height:1.8}
.roofStudioLegend i{display:inline-block;width:10px;height:10px;margin:0 3px 0 6px;border-radius:2px;vertical-align:-1px}
.roofStudioLegend i:first-child{margin-left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.roofStudioCheck{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;justify-content:flex-start!important;color:var(--pt-ink)!important}
.roofStudioButton{font:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--pt-border);border-radius:var(--pt-radius-control);background:var(--pt-surface);color:var(--pt-ink);cursor:pointer}.roofStudioButton:hover{border-color:var(--pt-accent)}