:root{--color-paper: oklch(97.5% .006 240);--color-paper-2: oklch(94.5% .008 240);--color-paper-3: oklch(91% .01 240);--color-rule: oklch(86% .01 240);--color-ink: oklch(24% .02 250);--color-ink-2: oklch(40% .018 250);--color-ink-3: oklch(50% .014 250);--color-accent: oklch(52% .15 38);--color-accent-hover: oklch(46% .15 38);--color-accent-ink: oklch(98% .01 60);--color-accent-wash: oklch(94% .03 45);--color-ok: oklch(50% .12 150);--color-warn: oklch(58% .13 75);--color-error: oklch(50% .17 25);--color-focus: oklch(52% .17 250);--region-wall: oklch(62% .14 38);--region-window: oklch(62% .14 230);--region-door: oklch(62% .14 280);--region-balcony: oklch(62% .14 150);--region-pillar: oklch(62% .14 85);--region-parapet: oklch(62% .14 330);--region-gate: oklch(62% .14 190);--region-roof_edge: oklch(62% .14 0);--region-railing: oklch(62% .14 120);--font-display: "Newsreader", ui-serif, Georgia, serif;--font-body: "IBM Plex Sans", ui-sans-serif, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--text-4xl: 3.25rem;--space-2xs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--radius-sm: 4px;--radius-md: 6px;--rule-hair: 1px solid var(--color-rule);--rule-thick: 2px solid var(--color-ink);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .12s;--dur-base: .2s;--dur-slow: .32s}*,*:before,*:after{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;font-style:normal;line-height:1.15;overflow-wrap:anywhere;min-width:0}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}p{margin:0}img{display:block;max-width:100%}a{color:var(--color-accent)}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100dvh}.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:var(--space-xl);padding:var(--space-xl) var(--space-lg);overflow-y:auto;border-right:var(--rule-hair)}.mobile-brand{font-family:var(--font-display);font-weight:600}.wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl)}.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}.step-link{display:flex;align-items:baseline;gap:var(--space-sm);width:100%;padding:var(--space-xs) var(--space-sm);border:0;border-left:2px solid transparent;background:none;color:var(--color-ink-2);text-align:left;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}.step-link .num{font-family:var(--font-mono);font-size:var(--text-xs)}.step-link:hover:not(:disabled){background:var(--color-paper-2)}.step-link[aria-current=step]{color:var(--color-ink);font-weight:600;border-left-color:var(--color-accent)}.step-link:disabled{color:var(--color-ink-3);cursor:not-allowed}.mobile-bar{display:none}main{width:100%;max-width:1200px;padding:var(--space-2xl) var(--space-xl) var(--space-3xl)}.stage-head{display:grid;gap:var(--space-xs);margin-bottom:var(--space-xl)}.label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-2)}.lede{color:var(--color-ink-2);max-width:60ch}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-xl);align-items:start}.panel{display:grid;gap:var(--space-md);padding-top:var(--space-md);border-top:var(--rule-thick)}.stack{display:grid;gap:var(--space-md)}.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}.fade-in{animation:fade-in var(--dur-base) var(--ease-out)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-lg);border:1px solid var(--color-ink-2);border-radius:var(--radius-sm);background:transparent;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--color-ink);transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.btn:hover:not(:disabled){background:var(--color-paper-2)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn[aria-busy=true]{cursor:progress}.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-small{min-height:36px;padding:0 var(--space-sm);font-size:var(--text-sm)}.field{display:grid;gap:var(--space-2xs)}.field>label,.field>.field-label{font-size:var(--text-sm);font-weight:500}input[type=text],input[type=number],select,textarea{width:100%;min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper)}input:hover,select:hover,textarea:hover{border-color:var(--color-ink-3)}[aria-invalid=true],[aria-invalid=true]:hover{border-color:var(--color-error)}textarea{min-height:112px;resize:vertical}.step-jump{width:auto;min-height:40px}.progress-line{font-size:var(--text-sm);color:var(--color-ink-2)}.notice{padding:var(--space-sm) var(--space-md);border-left:2px solid var(--color-ink-3);background:var(--color-paper-2);font-size:var(--text-sm)}.notice.error{border-left-color:var(--color-error)}.notice.ok{border-left-color:var(--color-ok)}.notice.warn{border-left-color:var(--color-warn)}.notice ul{margin:var(--space-2xs) 0 0;padding-left:1.1em}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.badge{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3);white-space:nowrap}.badge.web{color:var(--color-ok)}.badge.wrap{white-space:normal}.plain-fieldset{border:0;margin:0;padding:0;min-width:0}.badge.override{color:var(--color-accent)}.dropzone{display:grid;place-items:center;gap:var(--space-sm);min-height:240px;padding:var(--space-xl);border:1px dashed var(--color-ink-3);border-radius:var(--radius-md);text-align:center;cursor:pointer;background:var(--color-paper)}.dropzone:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}.dropzone[data-over=true]{background:var(--color-accent-wash);border-color:var(--color-accent)}.how-it-works{list-style:none;counter-reset:how;margin:var(--space-xs) 0 0;padding:0;display:grid;gap:var(--space-2xs)}.how-it-works li{counter-increment:how;display:flex;gap:var(--space-sm);align-items:baseline}.how-it-works li:before{content:counter(how,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-2)}.thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:var(--space-md)}.thumb{display:grid;gap:var(--space-xs);padding:var(--space-xs);border:var(--rule-hair);border-radius:var(--radius-sm)}.thumb[data-primary=true]{border-color:var(--color-accent)}.thumb img{width:100%;aspect-ratio:4 / 3;object-fit:cover}.canvas-wrap{border:var(--rule-hair);background:var(--color-paper-2);touch-action:none}.skeleton{display:grid;place-items:center;width:100%;background:var(--color-paper-2);color:var(--color-ink-2);font-size:var(--text-sm);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{background:var(--color-paper-3)}}.part-list{list-style:none;margin:0;padding:0;display:grid;max-height:420px;overflow-y:auto}.part-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-2xs);border-bottom:var(--rule-hair)}.part-row[aria-current=true]{background:var(--color-accent-wash)}.swatch{width:12px;height:12px;border-radius:2px}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs);border-bottom:var(--rule-hair)}.tab{min-height:44px;padding:var(--space-sm) var(--space-md);border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap;cursor:pointer}.tab[aria-selected=true]{border-bottom-color:var(--color-accent);font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.chip{min-height:40px;padding:0 var(--space-md);border:1px solid var(--color-rule);border-radius:999px;background:var(--color-paper);white-space:nowrap;cursor:pointer}.chip:hover{border-color:var(--color-ink-3)}.chip[aria-pressed=true]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper)}.swatches{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.swatch-btn{position:relative;width:32px;height:32px;padding:0;border:1px solid var(--color-ink-3);border-radius:50%;cursor:pointer}.swatch-btn:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px}.swatch-btn[aria-pressed=true]{outline:2px solid var(--color-ink);outline-offset:2px}.swatch-btn:disabled{opacity:.4;cursor:not-allowed}.assign-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs);font-size:var(--text-sm);color:var(--color-ink-2)}.assign-list li{display:flex;align-items:center;gap:var(--space-xs)}.color-chip{flex:none;width:16px;height:16px;border:1px solid var(--color-ink-3);border-radius:2px}.design-list{display:grid;gap:var(--space-md)}.design{display:grid;gap:var(--space-xs);padding-top:var(--space-md);border-top:var(--rule-hair)}.design[data-active=true] h3{color:var(--color-accent)}.compare{position:relative;--pos: 50%;overflow:hidden;border:var(--rule-hair)}.compare img{width:100%}.compare .after{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--pos))}.compare .divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--color-paper);box-shadow:0 0 0 1px var(--color-ink-3);pointer-events:none}.compare-range{width:100%;accent-color:var(--color-accent)}.table-scroll{overflow-x:auto}.cost-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.cost-table th{padding:var(--space-xs);border-bottom:var(--rule-thick);color:var(--color-ink-2);font-weight:500;text-align:left;white-space:nowrap}.cost-table td{padding:var(--space-xs);border-bottom:var(--rule-hair);vertical-align:top}.cost-table .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}.cost-table .subtotal td{font-weight:600;border-bottom:var(--rule-thick)}.rate-input{width:8ch;min-height:36px;text-align:right;font-family:var(--font-mono)}.summary-card{display:grid;gap:var(--space-2xs);padding:var(--space-md) 0;border-top:var(--rule-thick);border-bottom:var(--rule-hair)}.summary-card .amount{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:500;white-space:nowrap}.footer{display:grid;gap:var(--space-2xs);margin-top:var(--space-3xl);padding-top:var(--space-md);border-top:var(--rule-hair);font-size:var(--text-xs);color:var(--color-ink-3)}@media (max-width: 1023px){.workspace{grid-template-columns:minmax(0,1fr)}}@media (max-width: 767px){.tab{padding:var(--space-xs) var(--space-2xs);font-size:var(--text-sm)}.app{grid-template-columns:minmax(0,1fr)}.rail{display:none}.mobile-bar{display:block;position:sticky;top:0;z-index:2;background:var(--color-paper);border-bottom:var(--rule-hair)}.mobile-bar .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}.mobile-bar .inner>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-bar .progress{height:2px;width:calc(var(--done) * 100%);background:var(--color-accent)}main{padding:var(--space-lg) var(--space-md) var(--space-3xl)}h1{font-size:var(--text-2xl)}.swatches{gap:var(--space-sm)}.swatch-btn:after{top:-6px;right:-6px;bottom:-6px;left:-6px}.table-scroll{overflow-x:visible}.cost-table,.cost-table tbody,.cost-table tr,.cost-table td{display:block}.cost-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cost-table tbody{margin-bottom:var(--space-md)}.cost-table tr{padding:var(--space-xs) 0;border-bottom:var(--rule-hair)}.cost-table td{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);border:0;padding:var(--space-2xs) 0}.cost-table td[data-label]:before{content:attr(data-label);font-family:var(--font-body);font-weight:500;color:var(--color-ink-2);text-align:left}.cost-table td:first-child{display:block}.cost-table .subtotal td{font-weight:600}.btn-small,.rate-input,.step-jump,.chip,.part-row{min-height:44px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}.shade-picker{display:grid;gap:var(--space-xs);min-width:0}.family-row{display:flex;gap:var(--space-2xs);overflow-x:auto;padding-bottom:var(--space-2xs);scrollbar-width:thin}.family-tab{display:inline-flex;align-items:center;gap:var(--space-2xs);flex:none;min-height:36px;padding:0 var(--space-sm);border:1px solid var(--color-rule);border-radius:999px;background:var(--color-paper);font-size:var(--text-sm);white-space:nowrap;cursor:pointer}.family-tab:hover:not(:disabled){border-color:var(--color-ink-3)}.family-tab[aria-selected=true]{border-color:var(--color-ink);background:var(--color-paper-2);font-weight:600}.family-tab:disabled{opacity:.5;cursor:not-allowed}.family-dot{width:12px;height:12px;border:1px solid var(--color-ink-3);border-radius:50%}.custom-colour{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-ink-2);cursor:pointer}.custom-colour input[type=color]{width:32px;height:32px;padding:0;border:1px dashed var(--color-ink-3);border-radius:50%;background:none;cursor:pointer}.custom-colour input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.custom-colour input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.custom-colour input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.shade-browser{display:grid;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border:var(--rule-hair);border-radius:var(--radius-sm)}.shade-browser summary{display:flex;align-items:center;min-height:40px;font-weight:500;cursor:pointer}@property --enhance-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.btn-enhance{border-color:var(--color-accent);color:var(--color-accent)}.btn-enhance:hover:not(:disabled){background:var(--color-accent-wash)}.enhance-wrap{position:relative;border-radius:var(--radius-sm)}.enhance-wrap textarea{display:block}.enhance-wrap.is-enhancing textarea{opacity:.55}.enhance-wrap.is-enhancing:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;padding:2px;border-radius:var(--radius-md);pointer-events:none;background:conic-gradient(from var(--enhance-angle),var(--color-accent),#E3B35B,#2F5D62,#9CAF88,var(--color-accent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:enhance-spin 2.4s linear infinite}@keyframes enhance-spin{to{--enhance-angle: 360deg}}.magic{position:relative;isolation:isolate;overflow:hidden}.magic-veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:start center;overflow:hidden;padding-top:clamp(var(--space-xl),20%,160px);background:color-mix(in oklch,var(--color-paper) 25%,transparent);backdrop-filter:blur(3px) saturate(1.3);-webkit-backdrop-filter:blur(3px) saturate(1.3);animation:fade-in var(--dur-slow) var(--ease-out)}.magic-blob{position:absolute;width:60%;aspect-ratio:1;background:var(--c);opacity:.7;filter:blur(26px);mix-blend-mode:multiply;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:magic-morph 6s ease-in-out infinite alternate,magic-drift 8s ease-in-out infinite alternate}.magic-blob:nth-child(1){top:-15%;left:-15%}.magic-blob:nth-child(2){top:-10%;right:-20%;animation-direction:alternate-reverse;animation-delay:-2s}.magic-blob:nth-child(3){bottom:-20%;left:10%;animation-delay:-4s}.magic-blob:nth-child(4){bottom:-15%;right:-10%;animation-direction:alternate-reverse;animation-delay:-1s}@keyframes magic-morph{0%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}50%{border-radius:63% 37% 38% 62%/55% 61% 39% 45%}to{border-radius:35% 65% 52% 48%/62% 35% 65% 38%}}@keyframes magic-drift{0%{transform:translate(0) scale(1) rotate(0)}to{transform:translate(20%,14%) scale(1.3) rotate(50deg)}}.magic-sheen{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgb(255 255 255 / .5) 50%,transparent 58%);animation:magic-sheen 2.6s var(--ease-in-out) infinite}@keyframes magic-sheen{0%{transform:translate(-35%)}to{transform:translate(35%)}}.magic-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px #ffffffd9;animation:magic-twinkle 2.2s ease-in-out infinite}.magic-sparks i:nth-child(1){top:22%;left:18%}.magic-sparks i:nth-child(2){top:30%;left:72%;animation-delay:-.6s}.magic-sparks i:nth-child(3){top:64%;left:34%;animation-delay:-1.2s}.magic-sparks i:nth-child(4){top:72%;left:80%;animation-delay:-1.7s}.magic-sparks i:nth-child(5){top:46%;left:52%;animation-delay:-.3s}@keyframes magic-twinkle{0%,to{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}.magic-caption{position:relative;z-index:1;padding:var(--space-xs) var(--space-md);border-radius:999px;background:color-mix(in oklch,var(--color-paper) 88%,transparent);font-size:var(--text-sm);font-weight:500;box-shadow:0 0 0 1px var(--color-rule)}.home{max-width:1200px;margin:0 auto;padding:var(--space-lg) var(--space-xl) var(--space-2xl)}.home-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:var(--rule-hair)}.home-hero,.home-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-2xl);align-items:center}.home-hero{padding:var(--space-3xl) 0 var(--space-2xl)}.home-hero h1{font-size:var(--text-4xl);max-width:15ch}.home .compare img{aspect-ratio:4 / 3;object-fit:cover}.shade-strip{display:flex;height:12px;overflow:hidden;border-radius:var(--radius-sm)}.shade-strip span{flex:1}.home-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg);padding:var(--space-xl) 0;border-bottom:var(--rule-hair)}.fact{display:grid;gap:var(--space-2xs);align-content:start;color:var(--color-ink-2);font-size:var(--text-sm)}.fact-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;line-height:1;color:var(--color-ink)}.home-section{display:grid;gap:var(--space-sm);padding-top:var(--space-3xl)}.home-steps{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg) var(--space-xl)}.home-steps li{display:grid;gap:var(--space-2xs);align-content:start;padding-top:var(--space-sm);border-top:var(--rule-thick)}.home-steps .num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent)}.home-steps p{color:var(--color-ink-2);font-size:var(--text-sm)}@media (max-width: 1023px){.home-hero,.home-split{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.home-hero{padding-top:var(--space-2xl)}.home-facts,.home-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 767px){.home{padding:var(--space-md) var(--space-md) var(--space-2xl)}.home-hero h1{font-size:var(--text-3xl)}.home-steps{grid-template-columns:minmax(0,1fr)}.family-tab{min-height:44px}}