.roofing-hero-photo{-webkit-mask-image:linear-gradient(90deg,#0000 0%,#0000001f 17%,#000000ad 40%,#000 62%);mask-image:linear-gradient(90deg,#0000 0%,#0000001f 17%,#000000ad 40%,#000 62%)}.roofing-hero-photo:after{content:"";background:linear-gradient(90deg,#eae7de 0%,#eae7de47 30%,#0000 54%);position:absolute;inset:0}.unit-button.is-active,.shape-button.is-active{color:#f5f3ed;background:#16191c;border-color:#16191c}.shape-button.is-active small{color:#f5a200;opacity:1}.label{text-transform:uppercase;letter-spacing:.04em;color:#2a2f33;margin-bottom:6px;font:500 10px IBM Plex Mono,monospace;display:block}.input-wrap{background:#eae7de80;border:1px solid #16191c4d;border-radius:12px;align-items:center;min-height:48px;padding:0 14px;display:flex}.input-wrap input{background:0 0;outline:0;width:100%;min-width:0;padding:12px 0;font-family:IBM Plex Mono,monospace}.input-wrap input::placeholder{color:#2a2f3373}.input-wrap .length-unit,.input-wrap .area-unit{color:#2a2f33;flex:none;font:10px IBM Plex Mono,monospace}select{background-color:#eae7de80;border:1px solid #16191c4d;border-radius:12px;width:100%;min-height:48px;padding:12px 14px;font-size:14px}.roof-diagram{min-height:285px}.roof-diagram svg{width:100%;height:100%;max-height:300px;display:block}.roof-face{fill:#f5a20033;stroke:#16191c;stroke-width:2px}.roof-face.rear{fill:#16191c14}.roof-line{fill:none;stroke:#16191c;stroke-width:2px;stroke-linejoin:round}.dimension-line{fill:none;stroke:#b87700;stroke-width:1.5px}.roof-diagram text{fill:#2a2f33;font:11px IBM Plex Mono,monospace}.pitch-mark{fill:#f5a2004d;stroke:#b87700;stroke-width:1.5px}.roof-result-preview{background:#d8d7d2;min-height:520px;position:relative}.roof-result-preview canvas{cursor:grab;touch-action:none;width:100%;height:100%;min-height:520px;display:block}.roof-result-preview canvas:active{cursor:grabbing}.roof-result-stats{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#16191ce0;border:1px solid #f5f3ed24;border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:absolute;bottom:12px;left:12px;right:12px;overflow:hidden}.preview-hint{color:#f5f3edd1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;background:#16191cc7;border:1px solid #f5f3ed2e;padding:6px 9px;font:10px IBM Plex Mono,monospace;position:absolute;top:12px;right:12px}.framing-note{color:#16191c;pointer-events:none;background:#f5a200e6;border:1px solid #b8770073;padding:6px 9px;font:600 10px IBM Plex Mono,monospace;position:absolute;top:12px;left:12px}@media (width<=639px){.roofing-hero-photo{opacity:.22;-webkit-mask-image:linear-gradient(90deg,#0000,#000);mask-image:linear-gradient(90deg,#0000,#000)}.roofing-hero-photo:after{background:linear-gradient(90deg,#eae7de 2%,#eae7de66 80%)}.roof-diagram{min-height:230px}.roof-result-preview,.roof-result-preview canvas{min-height:560px}.roof-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}