.roof-anatomy{min-width:0;background:#f2f5ed;border:1px solid #d8e0d4;border-radius:18px;padding:20px;color:#254a3e}.roof-anatomy-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.roof-anatomy-heading h2{font-size:19px;margin:0}.roof-anatomy-heading span{font-size:12px;color:#6d7d6a}.roof-anatomy-hint{font-size:12px;color:#62715f;margin:9px 0}.roof-anatomy-stage{position:relative;aspect-ratio:3/2}.roof-anatomy-stage img{display:block;width:100%;height:auto}.roof-anatomy-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.roof-anatomy-overlay[hidden],.roof-anatomy-controls[hidden]{display:none}.roof-anatomy-overlay g{cursor:pointer;outline:none}.roof-anatomy-overlay path{fill:transparent;stroke:transparent;stroke-width:5;stroke-linejoin:round;pointer-events:all}.roof-anatomy-overlay .roof-region-line{fill:none;stroke-width:30;stroke-linecap:round;pointer-events:stroke}.roof-anatomy-overlay g[aria-pressed=true] path,.roof-anatomy-overlay g:focus-visible path{fill:#f1b85133;stroke:#f8c762}.roof-anatomy-overlay g[aria-pressed=true] .roof-region-line,.roof-anatomy-overlay g:focus-visible .roof-region-line{fill:none;stroke:#f8c76299}.roof-anatomy-info{padding:12px 14px;border-left:3px solid #598269;background:#ffffffb3;min-height:104px;border-radius:0 8px 8px 0}.roof-anatomy-info strong{font-size:15px}.roof-anatomy-info p{font-size:13px;line-height:1.75;margin:5px 0 0}.roof-anatomy-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.roof-anatomy-controls button{font:inherit;font-size:12px;padding:7px 9px;border:1px solid #c7d5c3;border-radius:7px;background:#ffffffa6;color:#375b48;cursor:pointer;min-height:36px}.roof-anatomy-controls button[aria-pressed=true]{background:#275d48;color:#fff;border-color:#275d48}.roof-anatomy-controls button:focus-visible{outline:2px solid #275d48;outline-offset:2px}.roof-anatomy-note{font-size:11px!important;line-height:1.7;color:#6a7865;margin:12px 0 0!important}.roof-hero{grid-template-columns:1.04fr 1fr!important;gap:28px!important}.roof-hero h1{font-size:clamp(2rem,3.5vw,2.8rem)}@media(max-width:780px){.roof-hero{grid-template-columns:1fr!important}.roof-anatomy{padding:16px}.roof-anatomy-controls button{min-height:44px}}@media(prefers-reduced-motion:reduce){.roof-anatomy *{transition:none}}@media print{.roof-anatomy-overlay,.roof-anatomy-controls{display:none}}