:root{--ink:#243544;--muted:#75808b;--blue:#277dae;--navy:#163e66;--pale:#edf6fb;--border:#e1e7ec;--orange:#dc663d;--amber:#bb8731;--bg:#f5f7f8;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--bg);padding-bottom:116px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #58abe3;outline-offset:3px}a{color:inherit;text-decoration:none}button{border:0;background:none}p,h1,h2,h3{margin:0}.site-header{height:87px;padding:0 max(28px,calc((100vw - 1400px)/2));display:flex;align-items:center;gap:23px;background:white;border-bottom:1px solid var(--border)}.brand img{width:127px;display:block}.header-divider{width:1px;height:27px;background:var(--border)}.header-label{font-size:10px;font-weight:700;letter-spacing:2px;color:#728394}.phone{margin-left:auto;display:grid;gap:5px;font-size:12px}.phone span{color:var(--muted);font-size:10px}.phone strong{font-weight:600;color:var(--navy);letter-spacing:.3px}.preview-badge{font-size:10px;color:#627687;border:1px solid #dde7ee;border-radius:4px;padding:9px 11px;margin-left:12px}main{max-width:1400px;margin:auto;padding:0 28px}.breadcrumb{font-size:10px;color:var(--muted);padding:21px 0}.breadcrumb span{margin:0 11px;color:#bcc5cc}.intro{display:flex;align-items:center;justify-content:space-between;margin:10px 0 30px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--blue)}h1{font-size:38px;letter-spacing:-1.5px;font-weight:600;margin:9px 0 10px;color:#20384a}.intro p:not(.eyebrow){font-size:13px;color:#78828d;line-height:1.6}.intro-mark{font-size:13px;line-height:1.8;border-left:1px solid #ccd9e1;padding-left:23px;color:#88959e}.intro-mark strong{font-weight:400;color:var(--navy)}.steps{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:25px;background:#fff9}.steps>a,.steps>button{display:flex;align-items:center;gap:12px;flex:1;font-size:12px;text-align:left;padding:16px 20px;border-right:1px solid var(--border)}.steps>:last-child{border:0}.steps span{font-size:10px;color:#95a8b6}.steps b{margin-left:auto;font-weight:400;color:#86a0b2}.steps .active{background:#eef6fa;color:var(--navy)}.steps .active span{color:var(--blue)}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);gap:23px;align-items:start}.controls{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}.control-section{padding:22px;border-bottom:1px solid var(--border);scroll-margin:20px}.control-section:last-child{border:0}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}.section-number{display:grid;place-items:center;background:#edf4fa;color:var(--blue);font-size:10px;border-radius:50%;width:24px;height:24px}.section-heading h2{font-size:13px;font-weight:600}.models{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:19px}.model{position:relative;text-align:left;border:1px solid var(--border);border-radius:7px;padding:10px 8px 12px;background:#fff}.model.selected{border:1.5px solid var(--blue);padding:9.5px 7.5px 11.5px;background:#f7fbfd}.model strong{display:block;font-size:11px;margin-top:12px}.model small{display:block;color:var(--muted);font-size:9px;margin-top:5px;white-space:nowrap}.mini-fence{display:block;width:100%;height:49px;margin:6px 0 4px;border-left:5px solid #343e47;border-right:5px solid #343e47;box-shadow:0 9px 8px -8px #667787}.mini-fence.perfetto{background:repeating-linear-gradient(#4b5660 0px,#3a444d 7px,#242f37 8px,#6b757c 9px)}.mini-fence.piano{background:repeating-linear-gradient(#434f59 0,#394650 7px,transparent 7px,transparent 12px)}.selected-dot{display:none;position:absolute;right:6px;top:5px;border-radius:50%;background:var(--blue);color:#fff;font-size:9px;width:15px;height:15px;text-align:center;line-height:15px}.selected .selected-dot{display:block}.field-label{font-size:10px;font-weight:600;display:block;margin:15px 0 9px}.field-help{font-size:10px;line-height:1.6;color:var(--muted);margin-top:9px}select{border:1px solid var(--border);background:#fff;border-radius:5px;width:100%;height:36px;font-size:11px;padding:0 9px;color:var(--ink)}.colors{display:flex;gap:7px}.color{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid var(--border);border-radius:5px;padding:9px 7px;flex:1;font-size:10px}.color i{width:19px;height:19px;border-radius:50%;box-shadow:inset 0 0 0 1px #fff3}.anthracite{background:#39444d}.black{background:#171b1e}.color small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.color.selected{background:var(--pale);border-color:#7ab7d7}.color b{display:none;font-size:10px;color:var(--blue);margin-left:auto}.color.selected b{display:block}.length-input{display:flex;border:1px solid #b8d4e5;border-radius:6px;height:45px;align-items:center;background:#f5fafe;overflow:hidden}.length-input button{width:36px;height:100%;font-size:20px;color:#61869f}.length-input input{width:0;flex:1;border:0;background:none;font-size:26px;font-weight:600;color:var(--blue);text-align:center;outline-offset:0;-moz-appearance:textfield}.length-input input::-webkit-inner-spin-button{-webkit-appearance:none}.length-input>span{font-size:12px;color:var(--blue);margin-right:12px}input[type=range]{width:100%;height:4px;accent-color:var(--blue);margin:23px 0 11px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#9aa8b1}.field-error{color:#b24c32;font-size:10px;line-height:1.5;margin-top:5px}.gate-type label{font-size:10px;display:block;color:var(--muted);margin-bottom:8px}.add-buttons{display:flex;gap:8px;margin-top:11px}.add-buttons button{display:flex;align-items:center;gap:5px;border:1px solid #d4e2ec;color:var(--navy);border-radius:5px;padding:11px 9px;flex:1;font-size:11px}.add-buttons button span{margin-left:auto;border-radius:4px;background:#edf4f8;font-size:9px;padding:3px 6px}.check{display:flex;gap:8px;margin-top:18px;align-items:flex-start;font-size:11px;cursor:pointer}.check input{accent-color:var(--blue);margin:0;width:14px;height:14px}.check small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.visual-workspace{min-width:0}.inspiration{height:236px;position:relative;overflow:hidden;border-radius:10px;background:#46534e;color:#fff}.inspiration>img{width:100%;height:100%;object-fit:cover;object-position:center 53%}.inspiration:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10232ce0,transparent 48%,#15282665)}.photo-top,.photo-bottom{position:absolute;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;z-index:1}.photo-top{top:20px;font-size:8px;font-weight:600;letter-spacing:1.5px}.photo-chip{font-size:9px;letter-spacing:.2px;background:#ffffff21;border:1px solid #ffffff59;border-radius:4px;padding:7px 10px;backdrop-filter:blur(8px)}.photo-bottom{bottom:22px;align-items:flex-end}.photo-bottom h2{font-size:30px;font-weight:500;letter-spacing:-.8px}.photo-bottom p{font-size:11px;color:#d9e0e3;margin-top:6px}.photo-bottom>span{font-size:8px;line-height:1.7;text-align:right;color:#e0e7eb}.layout-panel{background:#fff;border:1px solid var(--border);border-radius:10px;margin-top:18px;overflow:hidden}.layout-header{padding:23px 23px 16px;display:flex;justify-content:space-between;align-items:center}.layout-header h2{font-size:19px;letter-spacing:-.5px;font-weight:500;margin-top:6px}.view-toggle{display:flex;border:1px solid var(--border);padding:3px;border-radius:6px;background:#f7f9fa}.view-toggle button{font-size:10px;padding:8px 10px;border-radius:4px;color:#83909b}.view-toggle button.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px #31445615}.editor-instruction{margin:0 23px;font-size:10px;color:#758793;display:flex;gap:8px;align-items:center}.move-symbol{color:var(--blue);font-size:16px}.editor-instruction button{margin-left:auto;font-size:10px;color:#7a8c99;white-space:nowrap}.canvas-scroll{overflow-x:auto;background:radial-gradient(#bed0dd66 .6px,transparent .6px);background-size:15px 15px;margin-top:10px;min-height:220px}#fence-canvas{display:block;width:100%;min-width:580px;touch-action:pan-y;user-select:none}#fence-canvas .opening{cursor:grab;touch-action:none}#fence-canvas .opening:active{cursor:grabbing}#fence-canvas .opening:focus{outline:none}#fence-canvas .opening:focus .outline{stroke:#6ab7e5;stroke-width:3}.canvas-footer{padding:5px 23px 14px;display:flex;align-items:center;justify-content:space-between}.legend{display:flex;gap:16px;color:#8b99a3;font-size:8px}.legend>span{display:flex;align-items:center;gap:5px}.legend i{width:6px;height:6px;border-radius:2px;background:#4c5962}.legend .blue{background:var(--blue)}.legend .amber{background:#d5aa60}.zoom{display:flex;align-items:center;gap:4px;font-size:9px;color:#8797a2}.zoom button{width:22px;height:22px;border:1px solid var(--border);border-radius:4px;font-size:15px}.zoom span{min-width:33px;text-align:center}.selected-element{margin:0 23px;padding:13px 0;border-top:1px solid var(--border);display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10px;min-height:55px}.selected-element>strong{font-size:11px;color:var(--navy);margin-right:auto}.selected-element label{color:#8a969e;font-size:9px}.selected-element input{width:66px;border:1px solid #b9d7e9;border-radius:4px;padding:6px;font-size:11px;color:var(--blue)}.selected-element select{width:auto;font-size:10px;height:29px}.selected-element .move-btn{border:1px solid var(--border);border-radius:4px;padding:6px 8px}.selected-element .remove{color:#ae6757;border-left:1px solid var(--border);padding-left:12px;margin-left:3px;font-size:9px}.layout-notes{display:flex;gap:9px;padding:11px 23px;background:#f8fafc;border-top:1px solid var(--border);color:#94a1ab;font-size:9px;line-height:1.5}.layout-notes>span{color:#88a4b6}.materials-strip{display:flex;margin-top:16px;border:1px solid var(--border);border-radius:8px;background:white;padding:19px 22px;align-items:center}.materials-strip>div{flex:1;border-right:1px solid var(--border);padding:0 15px}.materials-strip>div:first-child{padding-left:0}.materials-strip>div:last-child{border:0;padding-right:0}.materials-strip>div>span{font-size:22px;color:var(--navy)}.materials-strip p{font-size:9px;color:#8293a0;margin-top:5px}.materials-strip .auto-note{display:flex;gap:11px;flex:1.8;align-items:center}.materials-strip .auto-note>span{font-size:13px;color:#65a695;background:#edf8f4;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.auto-note p{line-height:1.6;margin:0}.auto-note strong{font-weight:400;color:#5c7987}.warnings{border:1px solid #e9dcc6;background:#fffdf9;border-radius:7px;margin-top:13px;color:#927136;font-size:10px}.warnings summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;justify-content:space-between}.warnings ul{padding:0 30px;line-height:1.7}.warnings p{padding:0 16px 14px;line-height:1.7}.next-step{margin:30px 0;display:flex;gap:20px;align-items:center;padding-top:22px;border-top:1px solid var(--border)}.next-step>span{font-size:8px;letter-spacing:1.2px;color:var(--blue);white-space:nowrap}.next-step p{font-size:10px;line-height:1.8;color:#82909b;max-width:470px}.next-step a{margin-left:auto;font-size:10px;color:var(--navy);white-space:nowrap}.quote-bar{position:fixed;bottom:0;left:0;right:0;z-index:5;background:#fff;box-shadow:0 -3px 25px #344c6210;border-top:1px solid #dfe7ed;display:flex;align-items:center;gap:28px;padding:19px max(28px,calc((100vw - 1344px)/2));min-height:100px}.quote-meta{display:flex;gap:11px;align-items:center;margin-right:auto}.live-dot{width:7px;height:7px;border-radius:50%;background:#4a947d}.quote-meta strong{display:block;font-size:12px}.quote-meta div>span{display:block;font-size:10px;color:#8b97a1;margin-top:7px}.quote-price{text-align:right;display:grid;gap:4px}.quote-price>span{font-size:10px;color:#758996}.quote-price strong{font-size:28px;font-weight:600;letter-spacing:-1px;color:var(--orange)}.quote-price strong em{font-style:normal;font-size:12px;letter-spacing:0}.quote-price small{font-size:8px;color:#9aa4ad}.primary{background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:27px;font-size:12px;font-weight:500;padding:16px 19px;transition:background .15s}.primary:hover{background:#24577e}.primary>span{font-size:18px}.secondary{border:1px solid var(--border);border-radius:5px;padding:13px 16px;font-size:12px}dialog{border:1px solid var(--border);border-radius:14px;padding:28px;width:min(650px,calc(100vw - 28px));color:var(--ink);max-height:90vh;box-shadow:0 25px 90px #18374740}dialog::backdrop{background:#15324566;backdrop-filter:blur(3px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{font-size:27px;color:#84949e;padding:0 4px}dialog h2{font-size:32px;letter-spacing:-1px;font-weight:500;margin:13px 0 12px}.dialog-intro{font-size:12px;line-height:1.7;color:var(--muted)}.summary-config{background:#f3f8fb;padding:12px;margin:18px 0;color:var(--navy);border-radius:6px;font-size:11px;line-height:1.6}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:11px}th{font-size:9px;font-weight:500;color:var(--muted);padding:10px 8px;text-align:left;border-bottom:1px solid var(--border)}td{padding:13px 8px;border-bottom:1px solid var(--border);line-height:1.5}td a:hover{text-decoration:underline}td small{display:block;font-size:9px;color:var(--muted);margin-top:4px}td:nth-child(2){text-align:center}td:last-child,th:last-child{text-align:right;white-space:nowrap}.summary-total{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:12px}.summary-total strong{font-size:23px;color:var(--orange)}.not-included{background:#fffbf3;border:1px solid #eee2cd;border-radius:6px;font-size:10px;line-height:1.6;padding:13px;color:#90743d}.not-included strong{font-weight:600}.not-included ul{padding-left:18px;margin:8px 0 0}.snapshot-note{font-size:9px;line-height:1.7;color:#8a939c;margin:13px 0}.form-preview{border-top:1px solid var(--border);padding-top:20px;margin-top:20px}.small-badge{color:var(--blue);font-size:8px;letter-spacing:1px}.form-preview h3{font-size:16px;font-weight:500;margin:8px 0}.form-preview p{font-size:11px;color:var(--muted);line-height:1.7}.dialog-actions{display:flex;gap:12px;margin-top:22px}.dialog-actions .primary{font-size:11px}.toast{position:fixed;bottom:119px;left:50%;transform:translateX(-50%) translateY(12px);background:#243f54;color:#fff;border-radius:7px;padding:12px 18px;max-width:90vw;width:max-content;z-index:9;font-size:12px;box-shadow:0 8px 30px #153e6333;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.notice{padding:20px;background:#fff2e5;color:#a65426}.hidden{display:none}@media(min-width:1450px){.workspace{grid-template-columns:310px minmax(0,1fr)}.inspiration{height:275px}}@media(max-width:1000px){.workspace{grid-template-columns:265px minmax(0,1fr);gap:16px}.control-section{padding:17px}.header-label,.intro-mark{display:none}.quote-bar{gap:16px}.quote-meta{display:none}.quote-price{margin-right:auto;text-align:left}.photo-bottom>span{max-width:120px;font-size:7px}.view-toggle button{font-size:9px;padding:7px}.layout-header{padding:19px 17px}.layout-header h2{font-size:17px}.editor-instruction{margin:0 17px;font-size:9px}.materials-strip{padding:15px}.materials-strip .auto-note{display:none}.materials-strip>div:nth-child(3){border:0}.selected-element{margin:0 17px}.selected-element>strong{width:100%}.next-step{flex-wrap:wrap}.next-step a{margin-left:0}}@media(max-width:720px){body{padding-bottom:145px}.site-header{height:72px;padding:0 17px;gap:12px}.brand img{width:100px}.header-divider,.phone{display:none}.preview-badge{margin-left:auto;font-size:9px}main{padding:0 16px}.breadcrumb{font-size:9px;padding:18px 0}.breadcrumb span{margin:0 5px}.intro{margin:7px 0 22px}h1{font-size:29px;letter-spacing:-1px}.intro p:not(.eyebrow){font-size:12px;max-width:320px}.steps{margin-bottom:16px}.steps>a,.steps>button{padding:12px 9px;font-size:9px;gap:6px;line-height:1.5}.steps b{display:none}.workspace{display:flex;flex-direction:column}.controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0}.control-section{padding:17px}.control-section:first-child{grid-column:1/-1}.section-heading{margin-bottom:14px}.models{gap:12px;margin-bottom:12px}.model{display:grid;grid-template-columns:65px 1fr;column-gap:12px;padding:12px}.model.selected{padding:11.5px}.mini-fence{grid-row:1/3;margin:0;height:37px}.model strong{margin-top:5px;font-size:11px}.model small{font-size:8px;margin:4px 0}.selected-dot{top:3px;right:3px}.control-section:first-child>select{width:100%}.controls .control-section:nth-child(2){border-right:1px solid var(--border);border-bottom:0}.field-help{font-size:9px}.add-buttons{flex-direction:column}.add-buttons button{font-size:10px;padding:8px}.check{font-size:10px;gap:6px}.check small{font-size:8px}.check input{flex-shrink:0}.gate-type select{font-size:9px;padding-left:4px}.visual-workspace{width:100%}.inspiration{height:220px}.photo-top,.photo-bottom{left:18px;right:18px}.photo-bottom h2{font-size:26px}.photo-bottom p{font-size:9px}.photo-bottom>span{font-size:7px}.layout-header{align-items:flex-start;gap:8px}.layout-header h2{font-size:17px}.view-toggle button{font-size:8px;padding:7px}.canvas-scroll{min-height:170px}#fence-canvas{min-width:580px}.editor-instruction{font-size:9px;line-height:1.5}.editor-instruction button{font-size:9px;padding:2px}.canvas-footer{padding:9px 14px;gap:6px}.legend{gap:9px;font-size:7px}.zoom{font-size:8px}.selected-element{font-size:9px;gap:7px}.selected-element input{width:60px}.selected-element .remove{padding-left:7px}.materials-strip>div>span{font-size:20px}.materials-strip p{font-size:8px}.quote-bar{padding:12px 16px;display:grid;grid-template-columns:1fr;gap:9px}.quote-price{text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;width:100%}.quote-price>span{font-size:9px}.quote-price strong{font-size:22px;grid-column:2;grid-row:1/3}.quote-price small{font-size:8px}.quote-bar>.primary{padding:10px 14px;font-size:11px;width:100%}.toast{bottom:145px;font-size:11px}.next-step{margin:22px 0;gap:10px}.next-step p{font-size:10px}.next-step a{font-size:10px}dialog{padding:20px}.dialog-actions{flex-direction:column}dialog h2{font-size:27px}.summary-total{gap:10px}.summary-total strong{white-space:nowrap;font-size:21px}.model small{white-space:normal}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}