@font-face{font-family:THWQ;src:url('assets/sans.otf') format('opentype');font-display:swap}@font-face{font-family:Arabic;src:url('assets/arabic.ttf') format('truetype');font-display:swap}@font-face{font-family:Arabic;src:url('assets/arabic-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{font-family:THWQ,Arial,Arabic,sans-serif;color:#1b1c1b;background:#f8f8f6;font-synthesis:none;--paper:#f8f8f6;--ink:#1b1c1b;--muted:#656661;--line:#d9dad5;--accent:#1b1c1b;--wash:#efefeb;--style-text:#1b1c1b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:transparent;border:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button,select{min-height:44px}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}img{width:100%;display:block;object-fit:cover}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3{font-weight:400}h2{font-size:clamp(2rem,3.3vw,3.6rem);letter-spacing:-.04em;line-height:1.13;white-space:pre-line}h3{font-size:1.5rem;letter-spacing:-.025em;line-height:1.25}h4{font-size:1.1rem;font-weight:400}p{line-height:1.55}input[type=number]{background:transparent;border:1px solid var(--line);border-radius:0;padding:8px;min-height:44px;width:75px;font-size:1rem}input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--ink);touch-action:pan-y;cursor:pointer}input[type=range]::-webkit-slider-thumb{min-height:24px;min-width:24px}select{width:100%;border:1px solid var(--line);padding:8px;background:var(--paper);border-radius:0}summary{cursor:pointer;min-height:44px;display:list-item;padding:12px 0}[hidden]{display:none!important}.skip:not(:focus){position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;overflow:hidden}.skip:focus{display:block;padding:16px}.header{height:88px;padding:0 5%;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:20px;font-size:1.9rem;letter-spacing:.03em;line-height:1;font-family:THWQ,Arial,sans-serif}.arabic-mark{font-family:Arabic,sans-serif;font-size:1.7rem;border-inline-start:1px solid var(--line);padding-inline-start:20px;letter-spacing:0}.header nav{display:flex;gap:30px;margin-inline-start:auto;font-size:.9rem}.header nav a{padding:15px 0}.header #language{font-family:Arabic,THWQ,sans-serif;font-size:.95rem;border-inline-start:1px solid var(--line);padding-inline-start:30px}.welcome{display:grid;grid-template-columns:1fr 1fr;min-height:640px;min-height:min(740px,82svh);padding:36px 3% 36px 5%;gap:4%;align-items:stretch}.welcome-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:38px 0}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;line-height:1.5;margin-bottom:20px}.welcome h1{font-size:clamp(2.6rem,5.2vw,6rem);line-height:1.04;letter-spacing:-.045em}.welcome h1 span{display:block}.welcome-description{font-size:1.1rem;max-width:390px;margin:26px 0 32px;color:var(--muted)}.button{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:36px;min-height:54px;font-size:1rem;border:1px solid transparent}.primary{background:var(--ink);color:white}.primary:hover{background:#383a37}.secondary{border:1px solid var(--line)}.welcome-copy>.button{min-width:255px}.caption{font-size:.8125rem;line-height:1.5;color:var(--muted)}.welcome-copy>.caption{margin-top:16px}.welcome-image{position:relative;min-height:460px;overflow:hidden;background:#e7e7e4}.welcome-image>img{position:absolute;height:100%;inset:0;object-position:55% center}.welcome-image figcaption{position:absolute;bottom:0;inset-inline:0;padding:60px 24px 24px;background:linear-gradient(transparent,#0009);color:#fff;display:flex;justify-content:space-between;gap:15px;font-size:.8125rem}.principles{display:flex;justify-content:space-between;gap:20px;padding:24px 5%;border-block:1px solid var(--line);font-size:.875rem;color:var(--muted)}.section{padding:76px 5%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:36px}.section-heading .support{max-width:350px}.text-button{text-decoration:underline;text-underline-offset:5px;font-size:.875rem;padding:0}.studio-workspace{display:grid;grid-template-columns:minmax(285px,.75fr) minmax(0,1.4fr);gap:5%}.steps{display:flex;border-bottom:1px solid var(--line);margin-bottom:28px;gap:10px}.steps button{display:flex;align-items:center;gap:8px;flex:1;padding:12px 0;font-size:.875rem;border-bottom:2px solid transparent;color:var(--muted)}.steps button>span:first-child{font-size:.75rem}.steps button[aria-current=step]{border-color:var(--ink);color:var(--ink)}.support{font-size:1rem;color:var(--muted);line-height:1.6}.control-panel>.support{margin:12px 0 24px}.control-panel .button{width:100%;margin-top:24px}.dimensions{display:grid;grid-template-columns:1fr 1fr;gap:22px}.dimension>div{display:flex;justify-content:space-between;align-items:center;gap:8px}.dimension label{font-size:.875rem}.dimension>div>span{display:flex;align-items:center;gap:5px;font-size:.8rem}.dimension input[type=number]{width:65px;text-align:center}.room-details{border-top:1px solid var(--line);margin-top:16px;font-size:.875rem}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}.detail-grid label{display:flex;flex-direction:column;gap:8px;font-size:.875rem}.detail-grid input[type=number]{width:100%}.room-details .caption{margin-bottom:15px}.error{font-size:.875rem;color:#972b2b;margin-top:10px}.error:empty{display:none}.room-view{min-width:0;align-self:start;position:sticky;top:20px;background:var(--wash);padding:24px;transition:background-color .35s ease}.view-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.8125rem;color:var(--style-text)}.room-canvas{height:clamp(350px,35vw,540px);position:relative;touch-action:pan-y;direction:ltr}.room-canvas canvas{display:block;width:100%;height:100%;outline-offset:-4px;touch-action:none!important}.room-canvas.touch-active canvas{touch-action:none!important}.room-canvas>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:25px;z-index:1}.room-canvas>div>p{max-width:280px}.view-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid color-mix(in srgb,var(--style-text) 15%,transparent);padding-top:10px}.view-buttons{display:flex;align-items:center;gap:4px}.view-buttons button{width:40px;padding:0;font-size:1.4rem;color:var(--style-text)}.view-buttons #resetView{width:auto;padding-inline:12px;font-size:.8125rem}.toolbar-rule{height:18px;border-inline-start:1px solid var(--line);margin:0 3px}.touch-mode{font-size:.8125rem;padding:8px;display:none;border:1px solid var(--line)}.touch-mode[aria-pressed=true]{background:var(--ink);color:#fff}.room-view>.caption{margin-top:8px;color:var(--style-text);opacity:.8}.room-treatment{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--style-text);font-size:.875rem}.swatches{display:flex;gap:5px}.swatches span{height:20px;width:20px;border:1px solid #0001}.room-view>.room-disclaimer{margin-top:16px;font-size:.75rem}.style-options{display:grid;gap:9px;margin-bottom:24px}.style-option{display:flex;align-items:center;gap:14px;text-align:start;border:1px solid var(--line);padding:13px 15px;min-height:70px}.style-option .style-dot{width:26px;height:34px;flex-shrink:0}.style-option strong{display:block;font-size:1rem;font-weight:400}.style-option small{display:block;margin-top:5px;font-size:.8125rem;color:var(--muted)}.style-option[aria-pressed=true]{border-color:var(--ink);background:var(--wash);box-shadow:inset 3px 0 var(--ink)}.intensity-heading{display:flex;justify-content:space-between;font-size:.875rem;gap:15px}.range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}#intensityDescription{margin:18px 0 12px;font-size:.9375rem}.materials{display:flex;flex-wrap:wrap;gap:6px}.materials span{padding:6px 9px;background:var(--wash);font-size:.8125rem}.collection-empty{border-block:1px solid var(--line);padding:25px 0;margin:20px 0}.empty-mark{display:block;font-size:1.35rem;letter-spacing:.06em;color:var(--muted);margin-bottom:24px}.collection-empty p{font-size:.9375rem;color:var(--muted);margin-top:12px}.direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.direction-card{border-top:1px solid var(--line);padding-top:24px}.direction-palette{height:130px;display:flex;margin-bottom:24px}.direction-palette span{flex:1}.direction-palette span:first-child{flex:2}.direction-card h3{font-size:1.6rem;min-height:2.5em}.direction-card p{font-size:1rem;color:var(--muted);margin:12px 0;max-width:300px}.direction-card .text-button{margin-top:10px}.approach{background:var(--ink);color:#f8f8f6}.approach>div{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.approach p:not(.eyebrow){max-width:450px;color:#c7c9c3;font-size:1.1rem}footer{padding:35px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer>p{font-size:.8rem;letter-spacing:.07em}footer>.caption{max-width:230px}.products:empty{display:none}.product{border-bottom:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:70px 1fr;gap:15px}.product img{height:70px;transition:transform .2s}.product button{text-align:start}.product p{font-size:.875rem;margin-top:5px}.product small{color:var(--muted)}#roomTotal{margin:20px 0}#total{display:block;font-size:1.8rem;margin:10px 0;font-weight:400}dialog{width:min(540px,92vw);border:0;padding:30px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#0007;backdrop-filter:blur(4px)}.dialog-close{float:inline-end;font-size:1.8rem}dialog img{max-height:360px;object-fit:contain;margin-bottom:20px}dialog p{margin-top:12px}.direction-card button:hover,.text-button:hover{opacity:.65}
[dir=rtl]{font-family:Arabic,THWQ,sans-serif}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .eyebrow{letter-spacing:0;line-height:1.4}[dir=rtl] .welcome h1{font-size:clamp(3rem,5.5vw,6rem)}[dir=rtl] .style-option[aria-pressed=true]{box-shadow:inset -3px 0 var(--ink)}[dir=rtl] .wordmark{direction:ltr}[dir=rtl] input[type=number]{direction:ltr}[dir=rtl] .view-heading output{direction:ltr}
@media(hover:hover){.product button:hover img{transform:scale(1.6);position:relative;z-index:2}}
@media(pointer:coarse){.touch-mode{display:block}}
@media(min-width:1600px){header,main,footer{max-width:1800px;margin-inline:auto}}
@media(max-width:1000px){.welcome{min-height:560px}.welcome h1{font-size:4.6vw}.studio-workspace{gap:3%;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr)}.room-view{padding:18px}.view-buttons{gap:0}.view-buttons button{width:34px}.view-toolbar{flex-wrap:wrap}.header nav{gap:20px}.dimensions{gap:14px}.dimension>div{flex-wrap:wrap}.direction-card h3{font-size:1.4rem}}
@media(max-width:760px){.header{height:auto;min-height:76px;gap:18px;padding:17px 5%;flex-wrap:wrap}.wordmark{font-size:1.6rem;gap:14px}.arabic-mark{font-size:1.45rem;padding-inline-start:14px}.header nav{order:3;width:100%;margin:0;justify-content:space-between;border-top:1px solid var(--line);padding-top:4px}.header nav a{padding:10px 0;font-size:.875rem}.header #language{margin-inline-start:auto;padding-inline-start:15px}.welcome{grid-template-columns:1fr;padding:28px 5% 24px;gap:26px;min-height:0}.welcome-copy{padding:10px 0 0}.welcome h1{font-size:clamp(2.65rem,10.8vw,5rem)}[dir=rtl] .welcome h1{font-size:3.4rem}.welcome-description{margin:20px 0 24px;font-size:1rem;max-width:370px}.welcome-copy>.button{width:100%}.welcome-image{min-height:270px;aspect-ratio:1.35}.welcome-image figcaption{padding:45px 16px 16px;font-size:.75rem}.welcome-image figcaption span:last-child{display:none}.eyebrow{margin-bottom:12px}.principles{font-size:.75rem;gap:12px;padding-block:18px}.section{padding:40px 5%}.section-heading{gap:18px;margin-bottom:22px;align-items:start}.section-heading h2{font-size:1.9rem}.section-heading .text-button{white-space:nowrap}.studio-workspace{display:flex;flex-direction:column;gap:18px}.studio-controls{display:contents}.steps{order:0;margin-bottom:0}.control-panel{order:1}.room-view{order:2;position:static;padding:15px}.control-panel>h3{font-size:1.25rem}.control-panel>.support{margin:8px 0 14px;font-size:.9375rem}.dimensions{gap:24px}.dimension>div{flex-wrap:nowrap}.dimension input[type=number]{width:65px}.room-details{margin-top:4px}.control-panel .button{margin-top:12px}.room-canvas{height:285px}.view-heading{font-size:.75rem;gap:8px}.room-treatment{margin-top:15px}.room-view>.room-disclaimer{font-size:.75rem}.view-buttons button{width:35px}.view-buttons #resetView{padding-inline:8px}.view-toolbar{gap:4px}.touch-mode{padding:6px;font-size:.75rem}.style-options{grid-template-columns:1fr;gap:7px;margin-bottom:16px}.style-option{min-height:60px;padding:10px 12px}.style-option small{font-size:.75rem}.direction-grid{grid-template-columns:1fr;gap:30px}.direction-card{display:grid;grid-template-columns:95px 1fr;gap:0 22px}.direction-palette{grid-row:1/4;height:150px;margin:0}.direction-card h3{min-height:0;font-size:1.4rem}.direction-card p{font-size:.9375rem;margin:10px 0}.direction-card .text-button{justify-self:start;margin-top:0}.directions>.section-heading{display:block}.directions>.section-heading>.support{margin-top:16px}.approach>div{grid-template-columns:1fr;gap:24px}.approach p:not(.eyebrow){font-size:1rem}footer{flex-wrap:wrap;gap:22px}footer>.caption{max-width:none;width:100%}.collection-empty{margin:16px 0;padding:20px 0}body[data-step=edit] .room-view{order:1}body[data-step=edit] #editPanel{order:2}.steps button{font-size:.875rem}}
@media(max-width:360px){.dimensions{gap:14px}.dimension>div{flex-wrap:wrap}.dimension input[type=number]{width:100%}.room-canvas{height:250px}.view-toolbar{display:block}.touch-mode{margin-top:6px}}
.welcome-image>img{filter:grayscale(1);object-position:center 52%}body[data-theme=neutral] .direction-palette,body[data-theme=neutral] .style-dot{filter:grayscale(1)}
:root{background:var(--paper);color:var(--ink)}body{background:var(--paper);color:var(--ink);position:relative;isolation:isolate;transition:background-color .4s,color .4s}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--texture-opacity,.5)}
body[data-theme=japandi]::before{background-image:repeating-linear-gradient(0deg,#78755215 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#fff9df35 0 2px,transparent 2px 7px)}
body[data-theme=mcm]::before{background-image:repeating-linear-gradient(90deg,transparent 0 79px,#76523a0b 79px 80px)}
body[data-theme=dopamine]::before{background-image:radial-gradient(#b0436b26 .8px,transparent 1px);background-size:20px 20px}
.header,.principles,.steps,.room-details,.direction-card,footer{transition:border-color .4s,color .4s}.primary{color:var(--paper)}.primary:hover{background:var(--accent)}.approach{color:var(--paper);transition:background-color .4s,color .4s}.approach p:not(.eyebrow){color:var(--paper);opacity:.82}.touch-mode[aria-pressed=true]{color:var(--paper)}
.screen-scroll-edge{position:fixed;top:0;bottom:0;width:16px;z-index:20;touch-action:pan-y;pointer-events:auto}.edge-start{inset-inline-start:0}.edge-end{inset-inline-end:0}
.preview-products-heading{display:flex;justify-content:space-between;gap:15px;align-items:baseline;margin:24px 0 12px}.preview-products-heading>span{font-size:.8rem;color:var(--muted)}.preview-product{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}.finish-chip{width:42px;height:54px;border:1px solid var(--line);border-radius:2px}.preview-product strong{font-size:.9375rem;font-weight:400;display:block}.preview-product small{font-size:.75rem;display:block;color:var(--muted);margin-top:6px}.preview-product .text-button{font-size:.75rem}.context-pieces{margin:18px 0;font-size:.875rem}
body[data-theme=japandi]::before{background-image:repeating-linear-gradient(0deg,#6e694721 0 1px,transparent 1px 3px,#fff9dd40 3px 4px,transparent 4px 6px),repeating-linear-gradient(90deg,#fff9df2a 0 2px,transparent 2px 8px)}
body[data-theme=mcm]::before{background-image:repeating-linear-gradient(90deg,transparent 0 3px,#6846280c 3px 4px,transparent 4px 9px),repeating-linear-gradient(0deg,transparent 0 119px,#815b3220 119px 120px)}
body[data-theme=dopamine]::before{background-image:radial-gradient(circle at 2px 2px,#5c419227 1.3px,transparent 1.6px);background-size:22px 22px}
body[data-theme=dopamine] .style-option[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}body[data-theme=mcm] .finish-chip{border-radius:50% 50% 2px 2px}
@media(max-width:760px){.screen-scroll-edge{width:14px}.preview-product{gap:10px}.preview-products-heading{margin-top:18px}}
.preview-product{grid-template-columns:72px minmax(0,1fr) auto}.piece-photo{width:72px;height:80px;padding:0;position:relative;cursor:zoom-in;z-index:1}.piece-photo img{width:100%;height:100%;object-fit:contain;background:#e9e7e2;transition:transform .2s,box-shadow .2s;transform-origin:left center;border:1px solid #8884}.piece-photo:focus-visible{z-index:5}.estimate-price{font-size:.9375rem;margin-top:8px}.estimate-price small{display:inline;font-size:.75rem}.preview-total{border-top:1px solid var(--line);margin-top:22px;padding:22px 0}.preview-total>strong{display:block;font-size:2rem;font-weight:400;margin:12px 0}.preview-total>.caption{max-width:350px}
.style-option[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}.style-option[aria-pressed=true] small{color:inherit;opacity:.8}.materials span{background:color-mix(in srgb,var(--ink) 12%,transparent)}.room-view{background:var(--wash);color:var(--style-text)}.touch-mode{color:var(--style-text)}.touch-mode[aria-pressed=true]{background:#282d27;color:#fff}.primary:hover{background:var(--ink);opacity:.85}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.drop-card{text-align:start;padding:0;min-width:0}.drop-image{aspect-ratio:1.4;overflow:hidden;background:var(--ink)}.drop-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.005);transition:transform .4s;filter:none!important}.drop-title{font-size:1.7rem;display:flex;justify-content:space-between;gap:20px;margin:20px 0 8px}.local-drops>.caption{margin-top:26px}.local-drops{border-top:1px solid var(--line)}
body[data-theme=japandi]::before{background-image:repeating-linear-gradient(0deg,#716c4230 0 1px,transparent 1px 3px,#fff9dd60 3px 4px,transparent 4px 6px),repeating-linear-gradient(90deg,#fff9df45 0 2px,transparent 2px 8px),repeating-linear-gradient(90deg,transparent 0 239px,#65653c10 239px 243px)}
body[data-theme=mcm]::before{background-image:repeating-linear-gradient(89deg,#d3a96516 0 1px,transparent 1px 7px,#120a0720 7px 9px,transparent 9px 18px),repeating-linear-gradient(90deg,transparent 0 169px,#dbb27720 169px 171px)}
body[data-theme=dopamine]::before{background-image:conic-gradient(from 90deg,#f7d36913 25%,transparent 0 50%,#f7d36913 0 75%,transparent 0);background-size:64px 64px}
[dir=rtl] .piece-photo img{transform-origin:right center}
@media(hover:hover) and (pointer:fine){.piece-photo:hover,.piece-photo:focus-visible{z-index:5}.piece-photo:hover img,.piece-photo:focus-visible img{transform:scale(2.8);box-shadow:0 10px 35px #0005}.drop-card:hover img{transform:scale(1.035)}}
@media(max-width:760px){.preview-product{grid-template-columns:64px minmax(0,1fr) auto}.piece-photo{width:64px;height:74px}.drop-grid{grid-template-columns:1fr;gap:30px}.header nav{gap:14px}.header nav a{font-size:.8125rem}.drop-title{font-size:1.5rem}}
body:not([data-theme=neutral]) .welcome-image>img{filter:none}.room-view{background:color-mix(in srgb,var(--wash) 80%,transparent)}.room-details .detail-grid{gap:14px}
#products{scroll-margin-top:32px;overflow-anchor:none;outline:none}
@media(max-width:760px){#products{scroll-margin-top:88px}.preview-products-heading{margin-top:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.render-test{margin-top:24px;padding-top:24px;border-top:1px solid #aaa;color:#282d27;font-size:14px}.render-test p{margin:12px 0}.render-test label{display:block;margin:12px 0}.render-test .test-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.render-test .button{background:#eee;color:#222;padding:10px;font-size:14px}.render-test .primary{background:#222;color:white}.render-test pre{max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px}.render-test img{object-fit:contain;background:#f8f8f6}.render-test #renderStale{color:#82351d}

/* Refined candidate — 16 Sep 2026. Architectural hierarchy, no commerce claims added. */
.hero-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(520px,100%);margin-top:34px;padding-top:18px;border-top:1px solid var(--line);gap:18px}.hero-specs span{display:grid;gap:5px}.hero-specs b{font-size:.72rem;letter-spacing:.12em;font-weight:400;color:var(--muted)}.hero-specs em{font-style:normal;font-size:.78rem;line-height:1.35}.welcome-image{box-shadow:inset 0 0 0 1px #0000000b}.welcome-image:after{content:"";position:absolute;inset:18px;border:1px solid #ffffff45;pointer-events:none}.welcome-image figcaption{z-index:1}.principles span:before{content:"—";margin-inline-end:10px;color:var(--line)}
.studio{border-top:1px solid var(--line)}.studio-workspace{grid-template-columns:minmax(300px,.68fr) minmax(0,1.52fr);gap:4.5%}.room-view{border:1px solid color-mix(in srgb,var(--style-text) 11%,transparent);padding:22px 24px 18px}.room-canvas{height:clamp(410px,38vw,590px)}.view-heading{padding-bottom:8px}.view-toolbar{padding-top:12px}.room-treatment{border-top:1px solid color-mix(in srgb,var(--style-text) 12%,transparent);padding-top:16px}.steps button[aria-current=step]{font-weight:600}.control-panel h3{max-width:360px}.control-panel>.support{max-width:380px}.style-option{transition:border-color .18s,background-color .18s,transform .18s}.style-option:hover{transform:translateX(2px)}[dir=rtl] .style-option:hover{transform:translateX(-2px)}
.direction-card{position:relative}.direction-card:before{content:attr(data-index);position:absolute;inset-inline-end:0;top:20px;font-size:.68rem;letter-spacing:.12em;color:var(--muted)}.local-drops{background:color-mix(in srgb,var(--paper) 94%,var(--ink) 6%)}
@media(max-width:760px){.hero-specs{margin-top:24px;gap:10px}.hero-specs em{font-size:.7rem}.welcome-image:after{inset:10px}.principles{display:none}.section{padding-top:34px}.studio-workspace{gap:14px}.steps{order:0}.room-view{order:1;position:static;padding:12px 14px}.control-panel{order:2}.room-canvas{height:255px}.view-heading{position:relative;z-index:2}.view-toolbar{padding-top:8px}.room-treatment{margin-top:10px;padding-top:10px}.room-view>.room-disclaimer{margin-top:10px}.control-panel .button{min-height:56px}.style-option:hover{transform:none}body[data-step=edit] .room-view{order:1}body[data-step=edit] #editPanel{order:2}}
@media(max-width:420px){.hero-specs{grid-template-columns:repeat(3,1fr);gap:7px}.hero-specs b{font-size:.65rem}.hero-specs em{font-size:.66rem}.room-canvas{height:238px}.view-toolbar{flex-wrap:wrap}.view-buttons #resetView{font-size:.75rem}}
@media(min-width:1600px){.welcome{grid-template-columns:.9fr 1.1fr;gap:5%;padding-inline-start:7%;padding-inline-end:4%}.welcome-description{max-width:430px}.studio-workspace{grid-template-columns:minmax(320px,.62fr) minmax(0,1.55fr)}}

.final-render-panel{display:none;margin-top:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--style-text) 14%,transparent)}body[data-step=edit] .final-render-panel{display:block}.final-render-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.final-render-heading .eyebrow{margin:0 0 6px;font-size:.68rem}.final-render-heading h4{font-size:1rem}.final-render-heading .button{width:auto;min-width:210px;margin:0;padding:12px 14px}.final-render-panel>#renderRoomStatus{margin-top:10px;max-width:560px}.final-render-panel figure{margin-top:16px;border:1px solid color-mix(in srgb,var(--style-text) 12%,transparent);background:#111}.final-render-panel figure img{width:100%;height:auto;max-height:520px;object-fit:contain}.final-render-panel figcaption{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px;background:var(--paper)}
@media(max-width:760px){.final-render-heading{display:block}.final-render-heading .button{width:100%;margin-top:12px}.final-render-panel figure img{max-height:420px}.final-render-panel figcaption{align-items:flex-start;flex-direction:column}}

/* Final render preview: preserve the exported PNG's full intrinsic aspect ratio. */
.final-render-panel figure{background:var(--paper);overflow:visible}
.final-render-panel figure img{display:block;width:100%;height:auto;max-height:none;object-fit:fill}
@media(max-width:760px){.final-render-panel figure img{height:auto;max-height:none}}

/* Robust final-preview surface: draw decoded PNG to canvas to avoid browser image compositor clipping. */
#renderRoomImage{display:none!important}.final-render-panel figure canvas{display:block;width:100%;height:auto;max-width:100%;background:var(--paper)}

/* Edge/WebGL fallback: final preview is four small canvas strips so the compositor cannot drop the lower half of a large image layer. */
#renderRoomCanvas,#renderRoomImage{display:none!important}.render-room-tiles{display:block;width:100%;line-height:0;background:var(--paper)}.render-room-tiles canvas{display:block;width:100%;height:auto;margin:0;padding:0}

/* Final-render mode: the Blender output replaces the interactive room instead of duplicating it. */
.final-render-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.room-view.rendered-mode .room-canvas,.room-view.rendered-mode .view-toolbar,.room-view.rendered-mode #viewHint,.room-view.rendered-mode .room-treatment,.room-view.rendered-mode .room-disclaimer{display:none!important}
.room-view.rendered-mode .final-render-panel{margin-top:0;padding-top:0;border-top:0}
.room-view.rendered-mode .final-render-heading{padding-top:4px}
.room-view.rendered-mode #renderRoomResult{margin-top:18px}
.room-view.rendered-mode .render-room-tiles{background:var(--paper)}
.room-view.rendered-mode .render-room-tiles canvas{width:100%;height:auto}
.room-view.rendered-mode .view-heading{margin-bottom:18px}
@media(max-width:760px){.final-render-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}.final-render-heading .final-render-actions .button{margin-top:0;width:100%}}

/* 19 Sep 2026 — focused UX polish: hero, RTL, mobile studio and render feedback. */
.welcome h1,.section-heading h2{text-wrap:balance}.welcome-description,.support{text-wrap:pretty}
.welcome-copy>.button{transition:transform .18s ease,opacity .18s ease}.welcome-image>img{transition:transform .7s ease,filter .35s ease}
[dir=rtl] .welcome-copy,[dir=rtl] .section-heading,[dir=rtl] .control-panel{text-align:start}
[dir=rtl] .welcome-description{max-width:430px}
.room-canvas{overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.steps{scrollbar-width:none}.steps::-webkit-scrollbar,.header nav::-webkit-scrollbar{display:none}
.render-progress{position:relative;height:2px;margin-top:12px;overflow:hidden;background:color-mix(in srgb,var(--style-text) 14%,transparent)}
.render-progress span{position:absolute;inset-block:0;width:34%;background:var(--style-text);animation:renderSweep 1.1s ease-in-out infinite}
#renderRoom[aria-busy=true]{cursor:progress}
@keyframes renderSweep{0%{inset-inline-start:-34%}50%{inset-inline-start:48%}100%{inset-inline-start:100%}}
@media(hover:hover) and (pointer:fine){.welcome-image:hover>img{transform:scale(1.012)}.welcome-copy>.button:hover{transform:translateY(-1px)}}
@media(max-width:760px){
 .header nav{overflow-x:auto;justify-content:flex-start;gap:24px;scrollbar-width:none}
 .header nav a{white-space:nowrap;flex:0 0 auto}
 .steps{position:sticky;top:0;z-index:6;background:var(--paper);padding-top:4px}
 .room-view{scroll-margin-top:12px}
 .room-canvas{height:clamp(255px,68vw,320px)}
 .view-toolbar{padding-bottom:2px}
 .final-render-panel>#renderRoomStatus{line-height:1.55}
}
@media(max-width:420px){.room-canvas{height:clamp(245px,72vw,292px)}.steps button{gap:5px}}
@media(max-width:760px){}