.roof-preview{background:#cfe2ef;width:100%;height:100%;min-height:360px;position:relative}.roof-preview canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.preview-hint{color:#f5f3edcc;background:#16191cb8;padding:6px 9px;font:10px IBM Plex Mono,monospace;position:absolute;bottom:12px;right:12px}select{cursor:pointer;background:#eae7de80;border:1px solid #16191c4d;border-radius:12px;width:100%;padding:12px}.roof-drawing{width:100%;height:auto;font-family:IBM Plex Mono,monospace;display:block}.roof-drawing line,.roof-drawing polygon,.roof-drawing polyline,.roof-drawing rect,.roof-drawing path,.roof-drawing circle{vector-effect:non-scaling-stroke}.roof-drawing text{fill:#16191c}.roof-drawing .view-title{text-transform:uppercase;letter-spacing:.08em;fill:#4a4f54;font-weight:600}.roof-drawing .ground{fill:#c9c4b8}.roof-drawing .wall{fill:#efece4;stroke:#16191c;stroke-width:1px}.roof-drawing .plate,.roof-drawing .ridge-board,.roof-drawing .rafter{fill:#e9d3ad;stroke:#16191c;stroke-width:1.4px}.roof-drawing .sheathing,.roof-drawing .trim{fill:#f6f1e6;stroke:#16191c;stroke-width:1px}.roof-drawing .strap{fill:none;stroke:#6b7076;stroke-width:1.6px}.roof-drawing .drip{fill:none;stroke:#16191c;stroke-width:1.4px}.roof-drawing .hatch{stroke:none}.roof-drawing .hatch-line{stroke:#16191c;stroke-width:.35px;opacity:.5}.roof-drawing .roof-face{fill:#bdb7ae;stroke:#16191c;stroke-width:1.4px}.roof-drawing .fascia{fill:#fbfaf6;stroke:#16191c;stroke-width:1px}.roof-drawing .roof-plan{fill:#e4e0d7;stroke:#16191c;stroke-width:1.4px}.roof-drawing .ridge{stroke:#16191c;stroke-width:1.4px}.roof-drawing .hidden,.roof-drawing .walls-below{fill:none;stroke:#16191c;stroke-width:.7px;stroke-dasharray:6 4}.roof-drawing .center-line{stroke:#16191c;stroke-width:.5px;stroke-dasharray:12 3 2 3}.roof-drawing .center-mark{font-weight:600}.roof-drawing .rafter-line{stroke:#16191c;stroke-width:.6px}.roof-drawing .rafter-end{stroke:#16191c;stroke-width:1.4px}.roof-drawing .outlooker{stroke:#16191c;stroke-width:.6px}.roof-drawing .pitch-leg,.roof-drawing .arc{fill:none;stroke:#b07a00;stroke-width:1.2px}.roof-drawing .pitch-text,.roof-drawing .angle{fill:#8a5f00;font-weight:700}.roof-drawing .dim line,.roof-drawing .ext,.roof-drawing .tick{stroke:#16191c;stroke-width:.5px}.roof-drawing .dim.is-fail line,.roof-drawing .dim.is-fail .tick{stroke:#c81e1e}.roof-drawing .dim.is-fail text{fill:#c81e1e;font-weight:700}.roof-drawing .leader line{stroke:#16191c;stroke-width:.5px}.roof-drawing .leader circle{fill:#16191c}.roof-drawing .leader text,.roof-drawing .note{font-size:.95em}.roof-drawing .note.fail{fill:#c81e1e;font-weight:700}.roof-drawing .datum circle{fill:none;stroke:#16191c;stroke-width:.6px}.roof-drawing .datum path{stroke:#16191c;stroke-width:.6px}.roof-drawing .datum-label,.roof-drawing .datum text{font-size:.85em;font-weight:600}.roof-drawing .break{fill:none;stroke:#16191c;stroke-width:.8px}.roof-drawing .walk-line{fill:none;stroke:#b07a00;stroke-width:1.2px}.roof-drawing .walk-arrow{fill:#b07a00}.roof-drawing .plan-label{fill:#8a5f00;font-weight:700}.roof-checks td,.roof-buy td{vertical-align:top;border-top:1px solid #16191c1f;padding:10px 12px}.roof-checks th,.roof-buy th{text-align:left;text-transform:uppercase;letter-spacing:.12em;color:#4a4f54;padding:8px 12px;font:600 11px IBM Plex Mono,monospace}.roof-checks .is-ok .verdict{color:#1f7a3a}.roof-checks .is-double .verdict{color:#8a5f00}.roof-checks .is-double{background:#f5a20014}.roof-checks .is-no{background:#c81e1e12}.roof-checks .is-no .verdict{color:#c81e1e}:is(.roof-3d:fullscreen,.roof-3d.is-fullscreen){border-radius:0;height:100%}.roof-3d.is-fullscreen{z-index:60;height:100dvh;position:fixed;inset:0}#roof-pitch-result figure{cursor:zoom-in}.drawing-zoom{z-index:70;cursor:zoom-out;background:#f5f3ed;flex-direction:column;gap:10px;padding:24px;display:flex;position:fixed;inset:0}.drawing-zoom p{text-transform:uppercase;letter-spacing:.1em;color:#4a4f54;font:600 12px IBM Plex Mono,monospace}.drawing-zoom svg{flex:1;width:100%;height:100%;min-height:0}