/* Comfortable reading and a drawing sheet that shares the studio identity. */
.browser-top small{color:#626f59}
.possibilities .section-index,.possibilities .section-heading>p{color:#5e6b55}
.hero-description,.hero-note,.material-card small,.sector-strip span,.section-index,.section-heading>p,.app-brand>span:last-child,.presets span,.config-controls legend>span,.config-controls fieldset label,.roof-options button,.config-controls legend small,.toggle-row small,.demo-disclaimer,.demo-under,.feature-top,.material-samples>span,.feature-card>p,.brand-copy>p,.sample-nav,.steps p,.faq-section>div>p,.faq-list details p,.contact-form label>span,.contact-form .consent>span,.form-note,.footer,.tiny-label,.drag-hint,.view-tabs button,.brand-visual-label,.brand-color-switch,.sales-note,.sales-spec small,.sales-message>p,.message-heading small,.attachment small{color:#626f59}
.section h2 em,.step-number{color:#76816b}.feature-blueprint .feature-top,.feature-blueprint>p{color:#b5c7cd}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#687260}.view-tabs button.active{color:#2e3930}.roof-options button.active{color:var(--blue)}.is-night .tiny-label,.is-night .drag-hint{color:#b4c7c9}.is-night .view-tabs button{color:#4d594b}
@media(min-width:681px) and (max-width:900px){.hero-art{margin-right:0}.hero-viewport{right:0;left:-25px}}
body{overflow-x:clip}.nav-links{font-size:13px}.hero-description{font-size:15px}.hero-art{min-width:0}.section-heading>p,.brand-copy>p{font-size:14px}.feature-card>p{font-size:13px}.steps p{font-size:12px}.faq-list summary{font-size:14px}.faq-list details p{font-size:13px}.controls-heading{font-size:14px}.config-controls legend{font-size:12px}.config-controls legend>span{font-size:9px}.config-controls legend small{font-size:10px}.config-controls fieldset label,.toggle-row{font-size:12px}.config-controls fieldset output{font-size:13px}.roof-options button{font-size:10px}.config-controls .button{font-size:12px;min-height:48px}.demo-disclaimer{font-size:9px;line-height:1.6}.presets button{font-size:11px}.view-tabs button{font-size:11px}.app-brand>span:last-child{font-size:11px}.model-foot strong{font-size:16px}.drag-hint{font-size:9px}.demo-under,.demo-under .text-link{font-size:11px}.contact-form label{font-size:12px}.contact-form input:not([type=checkbox]),.contact-form textarea{font-size:14px}.contact-form label>span{font-size:10px}.contact-form .consent>span{font-size:11px}.form-note{font-size:10px}.contact-form .button>span:first-child{font-size:13px;line-height:1.5}.contact-copy>p{font-size:14px}.check-list li{font-size:13px}.sales-spec strong{font-size:13px}.sales-spec small{font-size:10px}.sales-note{font-size:12px}.sales-message>p{font-size:13px}.message-heading strong{font-size:13px}.attachment strong{font-size:11px}.attachment small{font-size:9px}.sales-panel .text-link{line-height:1.7}.brand-browser img{object-fit:contain}.footer{font-size:10px}.form-row{min-width:0}.contact-grid>*{min-width:0}
#drawing-panel{background-color:#f6f8fa;background-image:linear-gradient(#c4d0de18 1px,transparent 1px),linear-gradient(90deg,#c4d0de18 1px,transparent 1px);background-size:22px 22px}#live-drawing{border:1px solid #d2dce6;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 12px 25px #223e5810;margin:14px 0 24px}#live-drawing .technical-drawing{padding:8px}#live-drawing .technical-drawing :is(line,polyline,polygon,rect){stroke:#405c70}#live-drawing .technical-drawing .wall-face{fill:#f4f6f8}#live-drawing .technical-drawing .dimension-line,#live-drawing .technical-drawing .dimension-tick{stroke:#3158bf;stroke-width:1.2}#live-drawing .technical-drawing .dimension-guide{stroke:#bccada;stroke-width:.8}#live-drawing .technical-drawing .dimension-label{fill:#3158bf;font-weight:600}#live-drawing .technical-drawing .opening-gate{fill:#e4ebf1}#live-drawing .technical-drawing .opening-window{fill:#d8e8f2}.drawing-switch button{font-size:10px}
@media(max-width:1180px){.hero-description{font-size:14px}.nav-links{font-size:12px}.section-heading>p{font-size:12px}.config-controls .button{font-size:11px}.config-controls legend{font-size:11px}.roof-options button{font-size:9px}.steps p{font-size:11px}.feature-card>p{font-size:12px}.contact-form .button>span:first-child{font-size:12px}.check-list li{font-size:12px}}
@media(max-width:900px){.hero-description{font-size:12px}.nav-links{font-size:11px}.controls-heading{font-size:12px}.config-controls fieldset label,.toggle-row{font-size:11px}.roof-options button{font-size:8px}.config-controls .button{font-size:10px}.demo-disclaimer{font-size:8px}.presets button{font-size:9px}.view-tabs button{font-size:9px}.app-brand>span:last-child{font-size:10px}.model-foot strong{font-size:14px}.drag-hint{font-size:8px}.demo-under,.demo-under .text-link{font-size:10px}.feature-card>p{font-size:11px}.steps p{font-size:11px}.faq-list summary{font-size:12px}.faq-list details p{font-size:12px}.contact-form label{font-size:10px}.contact-form input:not([type=checkbox]),.contact-form textarea{font-size:12px}.contact-form label>span{font-size:8px}.contact-form .consent>span{font-size:10px}.contact-form .button>span:first-child{font-size:11px}.check-list li{font-size:11px}.brand-copy>p{font-size:12px}}
@media(max-width:680px){.hero-description{font-size:13px}.nav-links{font-size:14px}.feature-card>p{font-size:13px}.section-heading>p{font-size:12px}.controls-heading{font-size:14px}.config-controls legend{font-size:12px}.config-controls fieldset label,.toggle-row{font-size:12px}.roof-options button{font-size:11px}.config-controls .button{font-size:12px}.demo-disclaimer{font-size:10px}.view-tabs button{font-size:10px}.app-brand>span:last-child{font-size:8px}.presets button{font-size:10px}.demo-under,.demo-under .text-link{font-size:10px}.check-list li{font-size:12px}.steps p{font-size:12px}.steps h3{font-size:14px}.faq-list summary{font-size:13px}.faq-list details p{font-size:13px}.contact-form label{font-size:12px}.contact-form input:not([type=checkbox]),.contact-form textarea{font-size:16px}.contact-form label>span{font-size:9px}.contact-form .consent>span{font-size:11px}.form-row{gap:14px}.form-heading h3{font-size:18px}.contact-form{padding:23px}.contact-form .button>span:first-child{font-size:12px}.contact-form .button{gap:7px;padding-inline:12px}.form-note{font-size:9px}.brand-copy>p{font-size:13px}.footer{font-size:9px}#drawing-panel{max-height:none;min-height:330px}#live-drawing{margin:10px 9px 16px}.hero-viewport{inset:-12px -14px 10px}}