:root{--paper:#f4f2e8;--ink:#193b31;--muted:#52675b;--line:#d5d9cb;--gold:#916327;--white:#fffdf7;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-underline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #8a602c;outline-offset:3px}.skip{position:fixed;z-index:9;left:15px;top:-100px;background:var(--ink);color:var(--white);padding:14px}.skip:focus{top:10px}.test-strip{background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;gap:16px;padding:9px 4vw;font-size:11px;letter-spacing:.08em}.test-strip span{letter-spacing:0}header{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4vw;border-bottom:1px solid var(--line)}.brand img{display:block;width:175px;height:auto}header>a:last-child{font-size:13px;min-height:44px;display:flex;align-items:center}.intro{padding:38px 4vw 30px;display:flex;justify-content:space-between;align-items:end;gap:40px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:600;margin:0 0 12px}.intro h1{font:400 clamp(35px,3.8vw,60px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:0}.intro p:last-child{font-size:15px;color:var(--muted)}#workspace{margin:0 3vw 40px;border:1px solid var(--line);background:var(--white);border-radius:10px;overflow:clip}.toolbar{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center}.view-tabs{display:flex;padding:4px;background:#e9ede1;border-radius:6px;gap:3px}.view-tabs button{border:0;background:transparent;min-height:44px;padding:10px 18px;font-size:14px;border-radius:4px}.view-tabs button[aria-pressed=true]{background:var(--ink);color:var(--white);box-shadow:0 3px 6px #193b3120}.history{display:flex;gap:7px}.history button{border:1px solid var(--line);min-height:44px;padding:8px 12px;background:var(--white);border-radius:4px;font-size:13px}.history button:hover:not(:disabled){background:#e9ede1}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px}.scene-column{min-width:0;background:#eaece2;display:flex;flex-direction:column}.canvas-caption{display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--muted);padding:15px 24px;border-top:1px solid var(--line);background:#f4f5ee}.canvas-caption span:last-child{white-space:nowrap}#plan-stage{padding:18px;flex:1;min-width:0}#plan{display:block;width:100%;max-height:800px;aspect-ratio:43/35;background:#fbfaf4;border-radius:5px;touch-action:pan-y;outline:none}#plan .object,#plan .wall-handle,#plan .rotate-handle{touch-action:none}#plan .object{cursor:grab;outline:none}#plan .object:active{cursor:grabbing}#plan .object .selection-ring{fill:none;stroke:#9a6c32;stroke-width:.09;stroke-dasharray:.22 .12;pointer-events:none}#plan .object:focus-visible .selection-ring{stroke:#71480e;stroke-width:.16}#plan .rotate-handle{cursor:crosshair}#plan .wall-handle{stroke:#a47b45;stroke-width:.32;stroke-dasharray:.7 .3;cursor:col-resize;outline:none}#plan .wall-hit{stroke:transparent;stroke-width:1.2}#plan .wall-handle[data-wall=bedroomDepth],#plan .wall-handle[data-wall=bathDepth]{cursor:row-resize}#plan .room-label{font:1px Georgia,serif;fill:#3c5145;pointer-events:none}#plan .room-size{font:.55px Arial;fill:#596b60;pointer-events:none}#plan .perimeter{fill:none;stroke:#294d40;stroke-width:.35}#plan .window{stroke:#9bb7ad;stroke-width:.35}.choices-panel{padding:24px 22px;border-left:1px solid var(--line);background:var(--white);min-width:0}.choices-panel h2{font:400 24px/1.15 Georgia,serif;margin:0 0 10px}.selection-help{font-size:13px;color:var(--muted);margin-bottom:0}#selection-size{font-size:13px;margin:0 0 14px;color:var(--muted)}.action-message{font-size:12px;min-height:18px;margin:12px 0;color:#715020}.finishes{border-block:1px solid var(--line);padding:20px 0;margin:20px 0 0}.finishes h2{font-size:20px;margin-bottom:12px}.finishes>div{display:flex;gap:8px;justify-content:space-between}.finishes button{font-size:10px;padding:5px 1px;min-height:62px;border:0;border-bottom:2px solid transparent;background:transparent}.finishes button[aria-pressed=true]{border-color:var(--ink)}.finishes p,.settings p{font-size:12px;color:var(--muted)}.swatch{display:block;width:38px;height:30px;border:3px solid white;outline:1px solid #d2d6c7;margin:auto auto 7px;border-radius:3px}.swatch.oak{background:linear-gradient(130deg,#c7b8a2 50%,#f0e7d9 50%)}.swatch.sage{background:linear-gradient(130deg,#b7c5c6 50%,#e0e6e4 50%)}.swatch.walnut{background:linear-gradient(130deg,#b4a492 50%,#d5c0af 50%)}.settings{border-bottom:1px solid var(--line);padding:3px 0;min-width:0}.settings summary{font-size:13px;padding:14px 0;min-height:46px;cursor:pointer}.settings label{font-size:12px;display:block;margin:12px 0 7px}.settings input[type=range]{width:100%;min-height:44px;accent-color:var(--ink)}.settings select,.settings input[type=file]{font-size:12px;width:100%;min-height:44px;max-width:100%;padding:7px;border:1px solid var(--line);background:white}.settings button{display:block;width:100%;min-height:44px;margin:8px 0;border:1px solid var(--ink);border-radius:3px;background:var(--white);font-size:13px}.settings .primary{background:var(--ink);color:var(--white)}.settings output{font-size:12px;color:var(--muted)}.settings ul{padding-left:18px;font-size:12px}#three-stage{height:700px;position:relative;min-width:0;overflow:hidden;touch-action:none}#three-stage canvas{display:block;width:100%;height:100%;touch-action:none}#three-message{position:absolute;inset:0;display:grid;place-content:center;padding:30px;text-align:center;font-size:15px;background:#eaece2;z-index:2}#three-message[hidden]{display:none}#three-hint{position:absolute;left:16px;bottom:14px;right:16px;text-align:center;pointer-events:none;font-size:12px;color:#294738;background:#fffdf3dc;padding:9px 14px;border-radius:6px}.scope-note{padding:30px 4vw 60px;display:grid;grid-template-columns:1fr 1fr;gap:10vw}.scope-note h2{font:400 38px/1.15 Georgia,serif;margin:0}.scope-note p{font-size:14px;color:var(--muted);max-width:650px}footer{padding:24px 4vw;background:var(--ink);color:var(--paper);font-size:12px;display:flex;justify-content:space-between;gap:20px}[hidden]{display:none!important}@media(max-width:1000px){.studio-grid{grid-template-columns:minmax(0,1fr) 245px}.choices-panel{padding:20px 16px}.view-tabs button{padding:10px 13px}#three-stage{height:620px}}@media(max-width:760px){.studio-grid{grid-template-columns:minmax(0,1fr)}.choices-panel{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.selection{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.selection .eyebrow,.selection .action-message{grid-column:1/-1}.selection-help{grid-row:2/4;grid-column:2}.finishes{margin:0;padding:18px 0;grid-column:1/-1}.finishes>div{justify-content:start;gap:28px}.finishes button{font-size:12px}.finishes h2{font-size:21px}.toolbar{padding:10px;gap:8px;flex-wrap:wrap}.view-tabs{flex:1;justify-content:space-between}.view-tabs button{flex:1;padding:8px 10px;font-size:13px}.history{justify-content:flex-end;margin-left:auto}.history button{font-size:12px}.intro{padding:28px 4vw 24px;gap:20px}.intro h1{font-size:39px}.intro>p{font-size:13px}.canvas-caption{padding:12px 16px;display:block}.canvas-caption span:last-child{display:none}#plan-stage{padding:10px}#three-stage{height:560px}#workspace{margin:0 12px 32px}.scope-note{padding:24px 24px 40px;gap:24px}.scope-note h2{font-size:31px}.scope-note p{font-size:13px}}@media(max-width:480px){.test-strip{font-size:9px;padding:9px 16px}.test-strip span{max-width:155px;text-align:right}header{height:66px;padding:14px 18px}.brand img{width:140px}header>a:last-child{font-size:11px;max-width:90px;line-height:1.5}.intro{display:block;padding:28px 20px 20px}.intro h1{font-size:40px;max-width:330px}.intro>p{font-size:14px;margin-bottom:0}.history span{display:none}.history button{min-width:44px}.selection{display:block}.selection h2{font-size:23px}.selection-help{font-size:13px}.settings{grid-column:1/-1}.scope-note{grid-template-columns:1fr}.scope-note h2{font-size:34px}.finishes{padding-top:8px}.canvas-caption{font-size:11px}#three-stage{height:470px}footer{flex-wrap:wrap;font-size:11px}.view-tabs button{font-size:12px;padding:8px 11px}.toolbar{padding:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} 

/* Continuous wall hit areas and a steady canvas while advanced settings scroll. */
#plan .wall-hit{stroke:none;fill:transparent;pointer-events:all}
.toolbar{position:sticky;top:0;z-index:4;background:var(--white)}
@media(min-width:761px){#plan-stage,#three-stage{height:clamp(420px,70vh,760px)}#plan-stage{flex:none}#plan{width:auto;height:100%;max-width:100%;max-height:100%;margin:auto}.choices-panel{max-height:calc(clamp(420px,70vh,760px) + 70px);overflow-y:auto}.canvas-caption{min-height:70px}.studio-grid{align-items:start}}

.finishes button{min-width:52px}
@media(max-width:480px){.toolbar{display:grid;grid-template-columns:1fr auto}.view-tabs{grid-column:1/-1;width:100%}.view-tabs button{white-space:nowrap}.history{grid-column:2}}



/* Exterior controls follow the existing quiet action hierarchy. */
.exterior-settings{padding:20px 0 16px}.exterior-settings h2,.lighting h2{font-size:21px;margin:16px 0 12px}.choice-row{display:flex;gap:8px}.choice-row button{flex:1}.choice-row button[aria-pressed=true]{background:var(--ink);color:var(--white)}
@media(max-width:760px){.exterior-settings,.lighting{grid-column:1/-1}.exterior-settings{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.exterior-settings h2,.exterior-settings>button,.exterior-settings p{grid-column:1/-1}.exterior-settings label{grid-column:1}.exterior-settings select{grid-column:2}.exterior-settings label{margin:auto 0}}
@media(max-width:480px){.view-tabs{display:grid;grid-template-columns:1fr 1fr}.view-tabs button{padding:8px 6px;min-height:44px}.view-tabs{gap:4px}.exterior-settings{display:block}}

.plan-switch{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border-bottom:1px solid var(--line);background:#f4f5ed}.plan-switch label{font-size:12px}.plan-switch select{min-height:44px;padding:8px 12px;margin-left:12px;color:var(--ink);background:white;border:1px solid var(--line);border-radius:4px}.floor-tabs{display:flex;gap:6px}.floor-tabs button{min-height:44px;padding:9px 16px;border:1px solid var(--line);background:white;border-radius:4px}.floor-tabs button[aria-pressed=true]{background:#dfe6d7;border-color:#56715f}.plan-switch>span{font-size:12px;color:var(--muted)}#plan{aspect-ratio:auto;width:100%;height:100%;overflow:visible}#plan .fixed{cursor:help}.fixed path,.fixed rect{pointer-events:visiblePainted}.plan-wall{stroke:#466151;stroke-width:.22;stroke-linecap:square}.perimeter{stroke:#193b31;stroke-width:.34;fill:none}.locked-outline{fill:none;stroke:#6d7d71;stroke-width:.04}.room-jumps{padding:18px 0}.room-jumps h2,.lighting h2{font-size:21px}.room-jumps button{font-size:12px}.check-row{display:flex!important;gap:10px;align-items:center;min-height:44px}.check-row input{width:20px;height:20px}.room-label{paint-order:stroke;stroke:#fffdf7;stroke-width:.08;stroke-linejoin:round}.selection-help{min-height:58px}
@media(max-width:760px){.plan-switch{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}.plan-switch label{display:flex;align-items:center;justify-content:space-between;gap:8px}.plan-switch select{margin:0;max-width:230px}.floor-tabs button{flex:1}.plan-switch>span{font-size:11px}.room-jumps{grid-column:1/-1}#plan-stage{height:auto;min-height:620px}#plan{height:auto;aspect-ratio:22/56;max-height:none}.lighting{grid-column:1/-1}.view-tabs button{padding:8px;font-size:12px}}

.studio-controls{position:sticky;top:0;z-index:4;background:var(--white)}.studio-controls .toolbar{position:static}

@media(max-width:480px){.plan-switch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.plan-switch label{display:block;min-width:0}.plan-switch select{width:100%;font-size:12px;padding:7px}.lot-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.plan-switch>span{grid-column:1/-1}.floor-tabs{gap:4px;min-width:0}.floor-tabs button{padding:6px 4px;font-size:11px;min-width:0}.view-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.view-tabs button{font-size:11px;padding:6px 4px;white-space:nowrap}}

/* Clear dimensions and paired exterior colour choices. */
.measurements{margin-top:12px}.measurements dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;font-size:12px;line-height:1.4}.measurements dt{min-width:0}.measurements dd{margin:0;text-align:right;max-width:125px}.measurements p{font-size:12px}.room-measure{font-family:Arial;fill:#425447;paint-order:stroke;stroke:#fffdf7;stroke-width:.06;pointer-events:none}
.exterior-palettes{padding:20px 0}.exterior-palettes h2{font-size:21px}#exterior-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#exterior-palettes button{width:100%;margin:0;min-height:78px;padding:9px 7px;border:1px solid var(--line);font-size:12px;background:#fffdf7;border-radius:5px}#exterior-palettes button[aria-pressed=true]{border:2px solid var(--ink);padding:8px 6px;background:#f0eee6}.exterior-swatch{height:24px;display:flex;margin:0 0 6px;overflow:hidden;border-radius:3px;border:1px solid #0002}.exterior-swatch span:first-child{flex:3}.exterior-swatch span{flex:1}.exterior-palettes p{font-size:12px}
@media(max-width:760px){.measurements,.exterior-palettes{grid-column:1/-1}.measurements dl{font-size:13px}#exterior-palettes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* A large alternative to small furniture and SVG rotation handles. */
.item-toolbar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--white)}.item-toolbar label{font-size:12px;display:flex;align-items:center;gap:10px;min-width:0}.item-toolbar select{min-height:44px;max-width:320px;min-width:0;border:1px solid var(--line);background:white;color:var(--ink);padding:8px;font-size:13px}.item-toolbar button{min-height:44px;min-width:68px;padding:8px 12px;border:1px solid var(--ink);border-radius:4px;background:var(--white);font-size:13px}.item-toolbar>span{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto}
@media(max-width:760px){.item-toolbar{padding:8px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr) auto}.item-toolbar label{display:block;font-size:11px}.item-toolbar select{display:block;width:100%;max-width:none;font-size:12px}.item-toolbar button{align-self:end}.item-toolbar>span{grid-column:1/-1;margin:0}.item-toolbar[hidden]{display:none!important}}

/* Explicit touch editing establishes touch-action before a gesture starts. */
#plan.editing{touch-action:none;outline:3px solid #916327;outline-offset:-3px;cursor:crosshair}#edit-plan[aria-pressed=true]{background:var(--ink);color:white}.item-toolbar{flex-wrap:wrap}.item-toolbar button{white-space:nowrap}.test-strip{line-height:1.5}
#plan:not(.editing) .object,#plan:not(.editing) .rotate-handle{touch-action:pan-y}
@media(max-width:760px){.intro{display:block;padding:20px 16px}.intro h1{font-size:30px;margin:6px 0}.intro>p{display:none}.intro .eyebrow{margin:0}.item-toolbar{grid-template-columns:minmax(0,1fr) auto auto}.item-toolbar button{font-size:12px;padding:8px}.item-toolbar>span{grid-column:1/-1}.test-strip{padding:8px 12px}.test-strip span{display:block}.plan-switch select{max-width:100%}}

/* Keep scrolling guidance visible with editing controls. */
#edit-hint{flex-basis:100%;margin:0;font-size:12px;font-weight:600;color:var(--ink);grid-column:1/-1;white-space:normal}
@media(max-height:500px){.studio-controls{position:static}.toolbar{position:static}.plan-switch{padding:8px;gap:8px}.item-toolbar{padding:8px}.intro{padding-top:14px;padding-bottom:14px}}

.view-zoom{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.view-zoom button{flex:1;min-width:72px;min-height:44px}.view-controls p{font-size:14px;line-height:1.6}

#three-stage .view-zoom{position:absolute;bottom:12px;left:12px;right:12px;z-index:2;display:flex;flex-wrap:nowrap;gap:7px;margin:0;pointer-events:none}#three-stage .view-zoom button{flex:0 1 auto;min-width:70px;min-height:44px;border:1px solid #a9b4a5;border-radius:5px;background:#fffdf5ed;color:#193b31;padding:9px 12px;font-size:13px;box-shadow:0 2px 6px #0001;pointer-events:auto}#three-stage .view-zoom button:hover{background:white}@media(max-width:480px){#three-stage .view-zoom button{flex:1;font-size:12px}}