/* Roomwise — a playful workshop with familiar macOS app controls. */ :root{--pink:#f0ede8;--accent:#a7967f;--line:rgba(60,60,67,.12);--muted:#797876;--ink:#1f1e1d;--surface:#f7f6f5;--focus:#99784a;color-scheme:light} body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.015em} button,input,select,textarea{font-family:inherit}button{color:var(--ink);border-color:var(--line);border-radius:10px;background:#fff;font-weight:500;transition:background .16s,box-shadow .16s,transform .16s}button:hover{background:#f2f2f1}button:active{transform:scale(.98)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #99784a80;outline-offset:3px}button.dark,.add{background:#1f1e1d;border-color:#1f1e1d;color:white;box-shadow:0 1px 2px #00000014}button.dark:hover,.add:hover{background:#383736}button.active{background:#f0f0ef;border-color:transparent;color:#1f1e1d}input,select,textarea{border:1px solid #dddcda;border-radius:9px;background:#fff;color:var(--ink);font-weight:400}input:focus,select:focus,textarea:focus{border-color:#99784a}label{color:#72716f;font-weight:500}h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.035em}.muted,dialog p{color:var(--muted)}.eyebrow{color:#8a8987;letter-spacing:1.5px;font-weight:600}.logo{font-family:inherit;letter-spacing:-1.5px;font-weight:700}.brand .project{color:#8a8987;font-size:11px;letter-spacing:0}.logo b{font-weight:700} /* A restrained shell keeps the room itself in focus. */ #editor header{height:78px;flex-basis:78px;padding:0 26px;background:rgba(255,255,255,.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--line)}.headright{gap:8px}.headright button{min-height:34px;padding:8px 13px;border-radius:9px;font-size:12px}.headright #saved{color:#8a8987;margin-right:8px}.headright #uploadBtn{background:#1f1e1d}#editor main{border-top:0;grid-template-columns:292px minmax(340px,1fr) 248px}#editor .library,#editor .details{background:#fafafa;padding:24px 18px;scrollbar-color:#cdccca transparent}.library{border-right:1px solid var(--line)}.details{border-left:1px solid var(--line)}.paneltitle h2{font-size:18px;font-weight:600}.paneltitle>span{color:#8a8987}.library>.muted{font-size:12px;line-height:1.5;margin:0 0 16px}.add{min-height:48px;font-size:13px;border-radius:11px;margin:3px 0 16px}.library-browse{color:#99784a;font-weight:500;font-size:12px;margin:0 0 18px}.person-add{background:#fff;border-color:var(--line);font-size:12px;min-height:40px;margin:0 0 22px}.person-add:hover{background:#f2f2f1}.filters{gap:2px;background:#eeeeed;border-radius:9px;padding:3px;margin-bottom:16px}.filters button{flex:1;border-radius:7px;padding:7px 6px;min-height:29px;font-size:11px;background:transparent;color:#72716f}.filters button.active{background:white;color:#1f1e1d;box-shadow:0 1px 4px #00000016}.piece{border-radius:11px;gap:10px;padding:10px 8px;margin-bottom:3px}.piece:hover{background:#f2f2f1}.piece.selected{background:#f1efeb;border-color:transparent}.piece b{font-size:12px;font-weight:600;line-height:1.4}.piece .dimensions{color:#8a8987}.thumb{background:#efefee;border-radius:8px}.placementtoggle{color:#797876;font-size:10px}.remove-piece{color:#9f9d9b;border-radius:6px}.remove-piece:hover{color:#a18257;background:#f7f3ed}.workspace{background:white;padding:22px 22px 0}.roomnav{margin-bottom:18px}.roomnav>span{font-size:10px;font-weight:600;color:#8a8987;letter-spacing:1.2px;margin-bottom:10px}#roomTabs{gap:6px}#roomTabs button{border:0;background:#f7f6f5;border-radius:10px;font-size:13px;min-height:42px;padding:11px 17px;font-weight:500}#roomTabs button.active{background:#1f1e1d;color:white}.switch{background:#f2f2f1;border-radius:9px;padding:3px;gap:2px}.switch button{background:transparent;border-radius:7px;min-height:30px;padding:7px 13px;font-size:11px;color:#797876}.switch button.active{background:white;box-shadow:0 1px 4px #00000014;color:#1f1e1d}.viewactions button{font-size:11px;color:#72716f;border-color:var(--line)}.viewactions #reset{color:#8a8987}.floor-picker{font-size:11px;color:#8a8987;margin:10px 0 0}.floor-picker select{border-color:var(--line);background:#f7f6f5;font-size:11px;border-radius:8px}.scene{background:white}.roomlabel{left:8px;top:16px;color:#8a8987;font-size:11px}.statusdot{background:#bbaf9d}#roomLabel{font-weight:500;color:#72716f}.scenecontrols{bottom:50px;right:5px;background:#ffffffd9;backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 3px 15px #00000008;border-radius:12px;padding:4px;gap:2px}.scenecontrols button{border:0;background:transparent;border-radius:8px;min-height:30px;padding:7px 11px}.scenecontrols button:hover{background:#f0f0ef}.instruction{color:#9e9c9a;font-size:10px;bottom:17px}.roomsettings summary{font-size:12px;color:#797876}.selectiontitle h2{font-size:18px}.selectedphoto{background:#f3f2f1;border-radius:12px;height:130px}.product-name-editor{color:#8a8987;font-size:11px}.product-name-editor input{font-family:inherit;font-size:14px;font-weight:500;padding:11px;background:#fff;border-color:var(--line);border-radius:9px}.piece-specs summary{font-size:12px}.selectedactions button{border-radius:8px;font-size:11px;background:#fff}.movepiece button{background:#fff;border-color:var(--line);color:#1f1e1d}.service,#checks{color:#8a8987;font-size:11px}#editor footer{background:#fafafa;color:#9e9c9a;border-top:1px solid var(--line);font-size:10px;padding:10px 26px;flex-basis:32px}#toast{background:#2d2c2aea;backdrop-filter:blur(20px);box-shadow:0 8px 32px #0002;border:1px solid #ffffff20;font-weight:400;border-radius:14px} /* Welcome and setup. */ .welcome-word{color:#1f1e1d}.welcome-bottom p{color:#8a8987}.start{font-weight:500;border-radius:30px}.start span{color:#d8d0c4}.setup{background:#f7f6f5}.setup-inner{max-width:540px;background:white;padding:36px;border:1px solid #00000006;border-radius:24px;box-shadow:0 10px 45px #00000004;margin-top:35px}.setup h1{font-size:36px;letter-spacing:-1.5px}.setup p{color:#8a8987}.upload-card{background:#fafafa;border-color:var(--line);border-radius:14px;padding:22px}.upload-icon{background:#edebe7;color:#90826f;border-radius:12px}.upload-card b{font-size:16px;font-weight:600}.resume{color:#99784a;font-weight:400}.back{color:#72716f}.or{color:#9e9c9a} /* Modal sheets use the same controls as the editor. */ dialog{border:1px solid #ffffffa0;background:#fff;border-radius:22px;padding:32px;box-shadow:0 24px 100px #00000026}dialog::backdrop{background:#18181745;backdrop-filter:blur(8px)}dialog h2{font-size:27px;font-weight:600;letter-spacing:-.8px}dialog .close{background:#f2f2f1;color:#797876;border-radius:50%;width:29px;height:29px;min-height:29px;line-height:24px;padding:0;font-size:22px;right:18px;top:18px}.modelpreview,.modelcompare figure{background:#f7f6f5;border-radius:16px}.modelpreview span,.modelcompare figcaption{color:#8a8987}.modelcompare figure img{padding:14px}.visualaccept{background:#f7f6f5}.dialogbuttons button{border-radius:10px}.tag{color:#8a8987}#costDetails{background:#f7f6f5}.character-presets button.active{background:#edeae6;border-color:#e2dcd4}#skinChoices button[aria-pressed=true]{box-shadow:0 0 0 3px #a19584} /* Furniture library. */ .library-page{background:#f7f6f5}.library-page header{height:78px;padding:0 5vw;background:#ffffffdb;backdrop-filter:blur(24px);border-color:var(--line)}.library-page header a{font-size:27px;letter-spacing:-1.4px}.library-page header span{font-size:12px;color:#8a8987}.library-page main{display:block;border:0;max-width:1440px;padding:48px 5vw}.library-page h1{font-size:42px;font-weight:600;letter-spacing:-1.8px}.library-page p{color:#8a8987;max-width:680px;line-height:1.6}.library-page .note{background:transparent;border:0;padding:0;color:#8a8987;font-size:12px;margin:18px 0 28px;max-width:780px}.library-page .filters{display:inline-flex;flex-wrap:wrap;background:#ecebe9;gap:2px;padding:4px;margin:0 0 24px;border-radius:11px}.library-page .filters button{flex:initial;border:0;border-radius:8px;min-height:34px;padding:9px 16px;font-size:12px;font-weight:500}.library-page #status{color:#8a8987;font-size:11px;margin:0 0 16px}.library-page .grid{gap:18px}.library-page .card{background:white;border:1px solid #00000005;border-radius:20px;padding:14px;box-shadow:0 3px 12px #00000003;transition:box-shadow .2s,transform .2s}.library-page .card:hover{box-shadow:0 8px 25px #00000009;transform:translateY(-2px)}.library-page .card img{background:#f9f8f7;border-radius:12px;height:195px}.library-page .card h2{font-size:14px;font-weight:600;letter-spacing:-.2px;margin:17px 5px 9px}.library-page .card small{color:#8a8987;font-size:11px;margin:5px}.library-page .card a{color:#99784a;text-decoration:none;margin-left:5px}.library-page .card a.use-model{background:#f2f2f1;color:#1f1e1d;border-radius:10px;font-size:12px;font-weight:500;padding:12px;margin:16px 0 0}.library-page .card a.use-model:hover{background:#eae9e7}.library-page footer{background:transparent;color:#8a8987;border-color:var(--line)} @media(min-width:1500px){#editor main{grid-template-columns:310px minmax(500px,1fr) 270px}#editor .workspace{padding:24px 28px 0}} @media(min-width:701px) and (max-width:1100px){#editor main{grid-template-columns:230px minmax(220px,1fr) 205px}#editor .library,#editor .details{padding:20px 12px}#editor .workspace{padding:20px 12px 0}.headright button{font-size:10px;padding:7px 9px}#roomTabs button{font-size:12px;padding:10px 12px}} @media(max-width:700px){#editor header{height:auto;flex-basis:auto;min-height:105px;padding:15px}#editor .workspace{padding:18px 14px 0}#editor .library,#editor .details{padding:22px 18px}.setup-inner{padding:25px 22px;margin:25px auto}.setup h1{font-size:30px}.library-page main{padding:32px 5vw}.library-page h1{font-size:32px}.library-page .filters{display:flex}.library-page .filters button{padding:8px 11px}.library-page .grid{gap:12px}.library-page .card{padding:10px;border-radius:16px}.library-page .card img{height:145px}.library-page header span{font-size:10px}} @media(prefers-reduced-motion:reduce){button,.library-page .card{transition:none}} /* A friendly workshop palette, with macOS-style control hierarchy. */ :root{--pink:#f0ebe3;--accent:#c3b39d;--line:#e7e5e3;--muted:#898682;--ink:#2f2e2c;--focus:#a89984} body{color:var(--ink)} #editor header{background:#fdfdfceF;border-bottom-color:#ebe9e5}.brand .project{color:#9c978f}.logo{color:#2f2e2c} #editor .library,#editor .details{background:#fbfaf8;scrollbar-color:#dad4cb transparent} button{border-color:#e6e4e1;border-radius:12px;font-weight:600}button:hover{background:#f6f3ee}button.dark,.add{background:#34322f;border-color:#34322f;box-shadow:0 3px 0 #25221e20}button.dark:hover,.add:hover{background:#4e4a44} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#baac9980}input:focus,select:focus,textarea:focus{border-color:#beb19f} .add{border-radius:14px}.person-add{background:#faf8f5;border-color:#e4ddd3;color:#70685d;border-radius:12px}.person-add:hover{background:#f5f0e9}.library-browse,.resume{color:#958670}.library>.muted{color:#9c9892} .filters{background:#eeebe8;border:1px solid #e8e6e2;border-radius:11px}.filters button.active{background:#fdfdfc;box-shadow:0 2px 4px #61544213;color:#696155}.filters button{border-radius:8px;color:#979189} .piece{border-radius:14px}.piece:hover{background:#f6f3ef}.piece.selected{background:#f5f0ea;border-color:#e6ded4}.thumb{background:#eeedeb;border-radius:11px}.piece b{color:#3b3835}.piece .dimensions,.placementtoggle{color:#9d9892}.remove-piece{color:#afa596} #roomTabs button{background:#f5f4f2;border:1px solid #ece9e5;border-radius:13px;color:#847f77;font-weight:600;min-height:44px}#roomTabs button.active{background:#f0ebe3;border-color:#e1d9cd;color:#5e564b;box-shadow:0 2px 0 #aa9c8813} .roomnav>span{color:#a79f93}.switch{background:#f0eeec;border:1px solid #eae7e2;border-radius:11px}.switch button.active{color:#70675b;background:#fdfdfc}.switch button{color:#a19b92}.floor-picker select{background:#faf9f7;border-color:#e7e5e1;color:#79746c;border-radius:10px}.floor-picker{color:#a6a097} .scenecontrols{background:#fdfdfceF;border-color:#e9e6e1;border-radius:15px;box-shadow:0 5px 16px #6e5f4b10}.scenecontrols button:hover{background:#f3f0eb}.roomlabel,#roomLabel{color:#958d82}.statusdot{background:#d8c9b4}.instruction{color:#aba69f} .selectedphoto{background:#f2f1ef;border-radius:16px}.product-name-editor input{border-color:#e4e1dd;border-radius:11px;background:#fefefd;color:#4e4b46}.product-name-editor{color:#9e9890}.movepiece button{background:#faf8f5;border-color:#e6dfd5;color:#817769}.selectedactions button{border-radius:10px}.roomsettings summary{color:#a39d94}#editor footer{background:#fbfaf8;color:#aca7a1;border-color:#ebe9e5} .welcome-word{color:#2f2e2c}.start span{color:#e6daca}.setup{background:#fbf9f7}.setup-inner{border-color:#eeebe6;box-shadow:0 8px 35px #a1948212}.upload-card{background:#fcfaf8;border-color:#e6ded4;border-radius:17px}.upload-icon{background:#eee9e1;color:#a49683}.eyebrow{color:#aca295} dialog{border-color:#efebe6;box-shadow:0 24px 90px #61594e28;border-radius:24px}dialog::backdrop{background:#403b3535;backdrop-filter:blur(7px)}dialog .close{background:#f3f0ec;color:#a69d91}.modelpreview,.modelcompare figure{background:#f9f8f6;border-radius:18px}#costDetails{background:#faf8f6} .library-page{background:#fbfaf8}.library-page header{background:#fdfdfceF;border-color:#ebe9e5}.library-page h1{color:#3a3733}.library-page header span,.library-page p,.library-page .note{color:#9c978f}.library-page .filters{background:#eeebe7;border-color:#e6e3df}.library-page .filters button.active{background:#fdfdfc;color:#796e5e}.library-page .card{border:1px solid #ece8e3;border-radius:22px;box-shadow:0 4px 0 #a69a8a09}.library-page .card:hover{box-shadow:0 7px 20px #a69a8a12}.library-page .card img{background:#f9f8f7;border-radius:15px}.library-page .card a{color:#9e8f7a}.library-page .card a.use-model{background:#f1ece6;color:#7c705f;border-radius:12px}.library-page .card a.use-model:hover{background:#e8e1d7}.library-page .card small,.library-page #status{color:#a49e95} /* Warm paper canvas and beige accents; panels share the page background. */ :root{--pink:#e9dcc8;--accent:#b69b78;--line:#e8e1d6;--muted:#918777;--ink:#332f29;--focus:#a98e67} body,.workspace,.scene{background:#fdfbf7} #editor header,#editor .library,#editor .details,.library-page header{background:transparent;backdrop-filter:none} #editor footer{background:transparent} button,input,select,textarea,.product-name-editor input{background-color:#fffcf7} button.active,#roomTabs button.active,.piece.selected{background:#e9dcc8;border-color:#ddcbb0;color:#65543d} .filters,.switch{background:#eee7dc}.filters button.active,.switch button.active{background:#fffcf7} .person-add,.movepiece button{background:#f5ecdf;border-color:#e3d3bd;color:#80684b} .library-browse,.resume,.library-page .card a{color:#98784f}.thumb,.selectedphoto{background:#f2ede4} .library-page{background:#fdfbf7}.library-page .card{background:#fffcf7}.library-page .card a.use-model{background:#e9dcc8;color:#65543d} dialog,.setup-inner{background:#fdfbf7}.modelpreview,.modelcompare figure{background:#f5f0e7} #skinChoices button[aria-pressed=true]{box-shadow:0 0 0 3px #b69b78} /* Classic porcelain, ink and a restrained dusty-rose accent. */ :root{--pink:#fbe3a7;--accent:#e4b05c;--line:#e5e1df;--muted:#858080;--ink:#302e30;--focus:#c68e3c} body,.workspace,.scene,.library-page{background:#fcfbf9;color:#302e30} #editor header,#editor .library,#editor .details,#editor footer,.library-page header{background:transparent} button,input,textarea,.product-name-editor input{background:#fffefd;border-color:#e4dfdd;color:#454044} button.dark,.add{background:#353236;border-color:#353236;color:#fff;box-shadow:0 2px 0 #201d2215}button.dark:hover,.add:hover{background:#4d464d} button.active,#roomTabs button.active,.piece.selected{background:#fbe3a7;border-color:#efd29a;color:#80602e} #roomTabs button{background:#f4f0ef;border-color:#e9e3e1;color:#817678}.filters,.switch{background:#eeebea;border-color:#e7e1e1}.filters button.active,.switch button.active{background:#fffefd;color:#65555d}.filters button,.switch button{color:#8c8085} .person-add,.movepiece button{background:#fff5df;border-color:#eed9b2;color:#967038}.person-add:hover,.movepiece button:hover{background:#f9e4b9} .library-browse,.resume,.library-page .card a{color:#a77b36}.thumb,.selectedphoto{background:#f1edeb}.piece b,.logo,.welcome-word,.library-page h1{color:#353136}.piece:hover{background:#fff7e8} .piece .dimensions,.placementtoggle,.brand .project,.product-name-editor,.floor-picker,.roomsettings summary,.library>.muted{color:#948577} .roomnav>span,.roomlabel,#roomLabel{color:#9b8567}.statusdot{background:#efbd61}.instruction{color:#ac9c87} .scenecontrols{background:#fffdfceF;border-color:#e6dfdf;box-shadow:0 5px 18px #493a4310}.scenecontrols button:hover{background:#fff0d0} .library-page .card,dialog,.setup-inner{background:#fffefd;border-color:#eae1d3}.library-page .card img,.modelpreview,.modelcompare figure{background:#f7f3f2}.library-page .card a.use-model{background:#fbe3a7;color:#785965}.library-page .filters{background:#eeebea}.setup{background:#f6f3f2}.upload-card{background:#fff9ed;border-color:#edd7ad}.upload-icon{background:#fbe3a7;color:#a17b41} /* Native-style popup controls, without the browser's square menu. */ .mac-select{display:block;position:relative;min-width:0;margin-top:7px}.mac-select-native{display:none!important}.mac-select-button{position:relative;width:100%;min-height:36px;padding:8px 32px 8px 11px;text-align:left;border:1px solid #dcd7d6;border-radius:8px;background:linear-gradient(#fffefd,#f5f2f1);box-shadow:0 1px 2px #30232b08;font-size:12px;font-weight:400;color:#51494e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline-offset:2px}.mac-select-button::after{content:'⌃\a⌄';white-space:pre;position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;line-height:7px;color:#96868f}.mac-select-button:hover{background:linear-gradient(#fffefd,#eee8eb)}.mac-select-button[aria-expanded=true]{border-color:#dbb77b;box-shadow:0 0 0 3px #e7c48e26}.mac-select-menu{position:fixed;inset:auto;margin:0;border:1px solid #ffffffdf;border-radius:12px;background:#fffdfcf5;backdrop-filter:blur(24px);box-shadow:0 0 0 1px #4d35441a,0 12px 40px #42313a28;padding:5px;overflow-y:auto;color:#453b42;font:13px -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}.mac-select-option{position:relative;display:block;border-radius:7px;padding:8px 12px 8px 28px;font-weight:400;cursor:pointer;outline:none;line-height:1.35}.mac-select-option[aria-selected=true]::before{content:'✓';position:absolute;left:9px;font-size:12px}.mac-select-option.focused{background:#fbe8bc;color:#785b33}.mac-select-option[aria-disabled=true]{opacity:.4;cursor:default}.floor-picker .mac-select{margin:0;min-width:165px;max-width:220px}.floor-picker .mac-select-button{min-height:32px;font-size:11px}.three .mac-select-button{font-size:11px}#selected .mac-select-button{padding:9px 28px 9px 10px}#skinChoices button[aria-pressed=true]{box-shadow:0 0 0 3px #e4b05c} /* A compact inspector for the actual mesh, with direct room switching. */ .selectedphoto.mesh-icon{height:145px;padding:7px;background:transparent;object-fit:contain;margin-bottom:4px} #selected .product-name-editor{margin:10px 0 16px}.piece-specs[open]>summary{padding-bottom:8px} .movepiece .mac-select-button,.movepiece .mac-select-button:hover,.movepiece .mac-select-button[aria-expanded=true]{background:transparent;box-shadow:none;border-color:#e4dfdd;color:#766b71} .product-link{margin:12px 0 8px}.product-link a{font-size:11px;color:#95838d;text-decoration:none}.product-link a:hover{text-decoration:underline} #selected>.muted{display:none} #personDialog{width:min(1040px,94vw);padding:30px;overflow:hidden;height:min(820px,92dvh);max-height:92dvh;display:flex;flex-direction:column}#personDialog:not([open]){display:none}#personDialog>p{margin:0 0 20px;max-width:770px}#personDialog>h2{margin-top:8px}.character-builder{display:grid;grid-template-columns:1fr 1fr;gap:28px;flex:1;min-height:0}.character-stage{display:flex;flex-direction:column;min-height:0;background:#f7f3f2;border-radius:20px;overflow:hidden}.character-stage .modelpreview{position:relative!important;top:auto!important;margin:0;flex:1;min-height:0;background:transparent;border-radius:0}.character-stage #personPreview{height:100%;width:100%;display:block}.character-stage>p{text-align:center;font-size:11px;color:#a18a95;margin:0;padding:16px}.character-options{overflow-y:auto;min-height:0;padding:0 8px 12px 0;overscroll-behavior:contain;scrollbar-width:thin}.person-photo-picker{position:relative;border:1px solid #e2d9de;background:linear-gradient(#fffefd,#f4eeF1);border-radius:12px;padding:14px 16px;cursor:pointer;margin:0 0 8px;display:flex;flex-direction:column;gap:5px}.person-photo-picker>span{font-size:13px;color:#785c6b}.person-photo-picker small{font-size:10px;font-weight:400;color:#a18c97}.person-photo-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;margin:0}.character-options #personPhotoStatus{font-size:10px;margin-bottom:20px}.visual-select-source{display:none!important}.visual-choices{border:0;padding:0;margin:18px 0}.visual-choices legend{font-size:12px;font-weight:600;color:#86717d;margin-bottom:10px}#outfitChoices,#hairChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.character-choice{padding:3px 2px 8px;border-radius:12px;min-width:0;background:#fffefd;border:1px solid #e7e0e2}.character-choice img{width:100%;height:69px;object-fit:contain;display:block}.character-choice span{font-size:9px;line-height:1.25;display:block;font-weight:500;min-height:22px}.character-choice[aria-pressed=true]{border-color:#d7a04c;background:#fff0ce;box-shadow:0 0 0 1px #ebc688}.character-options .three{gap:7px}.character-options .three label{font-size:10px}.character-options .character-presets{margin:16px 0}.character-options .character-presets button{min-width:0;flex:1}.character-options #placePerson{margin-top:15px} @media(max-width:700px){#personDialog{height:94dvh;padding:25px 18px;overflow-y:auto}.character-builder{display:flex;flex-direction:column;overflow:visible;flex:none}.character-stage{height:360px;flex:none}.character-options{overflow:visible}.character-stage #personPreview{height:100%}} .character-choice{padding:8px 4px}.character-choice img{height:83px}.character-choice span{display:none} #addDialog #customBuildStatus[data-outcome]{display:block!important;background:#f4f1f2;border:1px solid #e3d9de;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.5;color:#70545f}#addDialog #customBuildStatus[data-outcome=failed]{color:#9b4f51;background:#fcf2f0} .selected-photo-views{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.reference-view{padding:5px;border-radius:10px;min-height:0;background:#fffefd;border:1px solid #d9c5cf}.reference-view img{display:block;width:64px;height:64px;object-fit:contain;border-radius:6px}.reference-view span{display:block;font-size:10px;color:#a17689;padding:5px 0 1px}.photo-view-count{font-size:11px;color:#9d8b95;margin:8px 0 18px}#photoChoices .chosen-view{border:2px solid #bd91a5;background:#f5e7ee}#photoChoices .chosen-view::after{content:'✓';display:block;font-size:11px;color:#9b6c83}#photoChoices button{align-self:start} .mesh-build-tray{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fcfbf9;border:1px solid #dcd4d1;border-radius:20px;box-shadow:0 10px 40px #35323624;max-width:calc(100vw - 36px);font-size:13px}.mesh-build-tray[hidden]{display:none}.mesh-build-tray p{margin:5px 0;color:#817977}.mesh-build-tray button{white-space:nowrap}.mesh-build-tray small{color:#817977}@media(max-width:700px){.mesh-build-tray{width:calc(100vw - 36px);flex-wrap:wrap;bottom:12px}.mesh-build-tray div{flex:1 1 100%}} .welcome-account{position:absolute;top:24px;right:24px;display:flex;gap:8px;z-index:5}.account-dialog{max-width:460px;width:calc(100vw - 36px)}.account-dialog form{display:grid;gap:14px}.account-dialog h2{margin-top:6px}.account-dialog [role=alert]{color:#aa514c}.project-card{display:block;width:100%;text-align:left;margin:8px 0}#creditBalance{font-size:12px;color:#817977;white-space:nowrap}.headright{flex-wrap:wrap;gap:8px}body[data-version=user] #matchPhoto,body[data-version=user] #downloadModelDetails,body[data-version=user] #providerBtn{display:none!important}body[data-version=user] #aiState{display:none}.account-dialog p{line-height:1.5} .account-switch{text-align:center;margin:4px 0 0;font-size:14px}.account-switch button{border:0;background:transparent;box-shadow:none;padding:0 3px;min-height:0;color:var(--accent,#987585);text-decoration:underline;text-underline-offset:3px;font-size:inherit}.account-credit-message{text-align:center;font-size:13px;color:#817977;margin:0 0 4px} .account-dialog .account-credit-message{text-align:left;font-size:17px;font-weight:600;line-height:1.5;color:#ac7b2c;margin:0 0 8px} .furniture-filter{position:relative;margin:18px 0 14px;border:1px solid #e1dcda;border-radius:12px;background:transparent}.furniture-filter summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;padding:11px 14px;font-weight:600}.furniture-filter summary::-webkit-details-marker{display:none}.furniture-filter-menu{padding:4px 12px 12px;display:grid;gap:8px}.furniture-filter-menu label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}.furniture-filter-menu input{width:16px;height:16px;margin:0;accent-color:#dcac5e}.furniture-filter-menu button{font-size:13px;padding:6px;margin-bottom:4px}.piece .thumb{background:transparent}.piece .thumb img{object-fit:contain;width:100%;height:100%} /* Give the room the full center column; controls float above it. */ @media(min-width:701px){ #editor .workspace{position:relative;padding:0;isolation:isolate} #editor .workspace>.scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;z-index:0} #editor .roomnav{position:absolute;top:16px;left:20px;right:20px;z-index:2;margin:0;pointer-events:none} #editor .roomnav>span{display:none} #editor #roomTabs{pointer-events:auto;display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;max-width:100%} #editor #roomTabs button{min-height:36px;padding:8px 13px;white-space:nowrap;background:#fcfbf9dd;backdrop-filter:blur(12px)} #editor #roomTabs button.active{background:#fbe3a7ed} #editor .toolbar{position:absolute;top:70px;left:20px;right:20px;z-index:2;pointer-events:none;background:transparent;margin:0} #editor .toolbar>*{pointer-events:auto} #editor .toolbar .switch,#editor .viewactions button{backdrop-filter:blur(12px);background:#fcfbf9d9} #editor .floor-picker{position:absolute;bottom:20px;left:20px;z-index:2;margin:0} #editor .roomlabel{top:124px;left:22px;pointer-events:none} #editor .instruction{bottom:7px;font-size:9px;pointer-events:none} #editor .scenecontrols{bottom:20px;right:20px} } #editor .piece{grid-template-columns:80px minmax(0,1fr) 20px;gap:9px;padding:10px 6px} #editor .piece .thumb{width:80px;height:76px;border-radius:12px;overflow:hidden} @media(min-width:1500px){#editor .piece{grid-template-columns:92px minmax(0,1fr) 20px}#editor .piece .thumb{width:92px;height:86px}} #editor:not(.has-selection) .details{display:none!important} @media(min-width:1101px){#editor:not(.has-selection) main{grid-template-columns:292px minmax(340px,1fr)}} @media(min-width:1500px){#editor:not(.has-selection) main{grid-template-columns:310px minmax(500px,1fr)}} @media(min-width:701px) and (max-width:1100px){#editor:not(.has-selection) main{grid-template-columns:230px minmax(220px,1fr)}} #closeSelection{border:0;background:transparent;font-size:23px;padding:0 6px;min-height:28px;color:#948577} /* Reserve inspector width so selection never reframes the room. */ #editor .details{opacity:1;transform:translateX(0);transition:opacity 280ms ease,transform 320ms cubic-bezier(.2,.7,.3,1),visibility 0s;visibility:visible} #editor:not(.has-selection) .details{display:block!important;opacity:0;transform:translateX(14px);pointer-events:none;visibility:hidden;transition:opacity 280ms ease,transform 320ms cubic-bezier(.2,.7,.3,1),visibility 0s 320ms} @media(min-width:1101px){#editor:not(.has-selection) main{grid-template-columns:292px minmax(340px,1fr) 248px}} @media(min-width:1500px){#editor:not(.has-selection) main{grid-template-columns:310px minmax(500px,1fr) 270px}} @media(min-width:701px) and (max-width:1100px){#editor:not(.has-selection) main{grid-template-columns:230px minmax(220px,1fr) 205px}} @media(prefers-reduced-motion:reduce){#editor .details,#editor:not(.has-selection) .details{transition:none;transform:none}} #editor:not(.has-selection) .details{position:absolute;right:0;width:248px;height:100%;box-sizing:border-box} @media(min-width:1101px){#editor:not(.has-selection) main{grid-template-columns:292px minmax(340px,1fr)}} @media(min-width:1500px){#editor:not(.has-selection) main{grid-template-columns:310px minmax(500px,1fr)}} @media(min-width:701px) and (max-width:1100px){#editor:not(.has-selection) main{grid-template-columns:230px minmax(220px,1fr)}} #selected .piece-specs summary{font-size:13px;font-weight:600}#selected label,#selected .finish-color>span{font-size:11px;font-weight:500;color:#8b8186}#selected input:not([type=range]),#selected .mac-select-button{font-size:12px;min-height:34px;padding:8px 10px}#selected .three{gap:7px}#selected .two{align-items:start;gap:10px}#selected .piece-specs{margin-top:18px}.rotation-control{padding:12px 14px;background:#f3efed;border:1px solid #e6dfe0;border-radius:13px;margin:16px 0}.rotation-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.rotation-heading span{font-size:13px;font-weight:600;color:#5c5058}.rotation-heading button{font-size:12px;padding:6px 9px;min-height:30px;background:#fffefd}.rotation-control input{width:100%;margin:12px 0 2px;accent-color:#d7a14d}#publishSelectedModel{font-size:11px;min-height:34px;padding:9px;margin-top:16px}.finish-color{position:relative;min-width:0;display:grid;gap:7px}.color-popover summary{display:flex;align-items:center;gap:8px;list-style:none;border:1px solid #e1dadd;border-radius:10px;padding:7px 8px;cursor:pointer;min-height:34px;box-sizing:border-box;background:#fffefd}.color-popover summary::-webkit-details-marker{display:none}.finish-swatch{width:23px;height:23px;border:1px solid #00000018;border-radius:6px;flex-shrink:0}.finish-value{font-size:10px;color:#81767b}.color-popover-content{position:absolute;right:0;top:65px;width:205px;background:#fffefd;padding:15px;border:1px solid #e7dfe3;border-radius:15px;box-shadow:0 12px 36px #45313e22;z-index:8}.color-popover-content strong{font-size:12px;display:block;margin-bottom:12px}.finish-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}.finish-palette button{border:1px solid #00000019;border-radius:50%;width:25px;height:25px;min-height:0;padding:0}.color-popover-content label{display:block;margin:10px 0 0}.color-popover-content input[type=range]{width:100%;accent-color:#d6a454;margin-top:6px}#finishHue{appearance:none;height:7px;border-radius:8px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)} #selected .finish-color{margin:14px 0;max-width:140px}.color-popover-content{max-height:360px;overflow-y:auto} .color-popover-content{left:0;right:auto;width:180px} #finishColorSquare{position:relative;height:115px;width:100%;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair;margin:12px 0 15px}.color-square-cursor{position:absolute;width:13px;height:13px;border:2px solid #fff;box-shadow:0 1px 4px #0006;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}#selected .color-popover-content #finishHue{width:100%;height:9px;margin:0 0 12px;display:block;min-height:0;padding:0;border:0}#finishHue::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:2px solid white;box-shadow:0 1px 4px #0004;border-radius:50%;background:transparent}#finishHue::-moz-range-thumb{width:13px;height:13px;border:2px solid white;border-radius:50%;background:transparent}.color-square-keyboard{display:flex;gap:8px}.color-square-keyboard label{font-size:9px!important;flex:1;min-width:0}.color-square-keyboard input{width:100%;box-sizing:border-box}.color-popover-content .hex-label{margin-top:10px}.color-popover-content{max-height:min(440px,70vh)} .color-popover-content{width:210px;box-sizing:border-box}.finish-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.finish-palette button{width:100%;height:auto;aspect-ratio:1}.color-square-keyboard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.color-square-keyboard:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none} .flooring-select .mac-select-button{display:flex;align-items:center;gap:9px;min-height:36px;padding:7px 32px 7px 9px!important;border-radius:11px;background:#fffefdca;box-shadow:0 1px 3px #45313b07;font-size:12px}.flooring-select .mac-select-button::after{content:'';width:6px;height:6px;border-right:1.5px solid #8e8289;border-bottom:1.5px solid #8e8289;right:13px;top:46%;transform:translateY(-50%) rotate(45deg)}.flooring-swatch{display:inline-block;width:26px;height:26px;object-fit:cover;border-radius:6px;border:1px solid #00000012;flex-shrink:0}.flooring-menu .mac-select-option{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 27px;font-size:12px}.flooring-menu .mac-select-option.focused{background:#ece7e9;color:#493e45}.select-group-heading{padding:9px 10px 5px;font-size:10px;font-weight:600;color:#a0929a;letter-spacing:.3px}.select-group-heading:not(:first-child){border-top:1px solid #e8e1e5;margin-top:5px}.flooring-menu{padding:6px;max-width:300px} #selected .piece-specs label,#selected .piece-specs .three label,#selected .finish-color>span{font-size:11px!important;font-weight:500;color:#8b8186} #selected .piece-specs .color-popover{border:0!important;border-top:0!important;padding:0!important;margin:0!important} #selected .piece-specs .color-popover>summary{margin:0;border-top:1px solid #e1dadd} #selected .selectedactions{margin-top:12px;gap:8px} .room-budget{border:1px solid #e6dedf;background:#f7f3ef;border-radius:15px;padding:14px;margin:3px 0 17px}.budget-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.budget-heading strong{font-size:12px}.budget-heading button{border:0;background:transparent;min-height:0;padding:3px;font-size:10px;color:#927581}.budget-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:12px 0 8px}.budget-total strong{font-size:21px;letter-spacing:-.5px}.budget-total span{font-size:10px;color:#93868d}.room-budget progress{appearance:none;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;display:block;background:#e7dfdc}.room-budget progress::-webkit-progress-bar{background:#e7dfdc;border-radius:8px}.room-budget progress::-webkit-progress-value{background:#a6b19a;border-radius:8px}.room-budget progress::-moz-progress-bar{background:#a6b19a}.room-budget progress.over-budget::-webkit-progress-value{background:#be7e72}.room-budget progress.over-budget::-moz-progress-bar{background:#be7e72}#budgetStatus{font-size:11px;margin-top:7px;color:#80716f}#budgetMissing{display:block;font-size:9px;line-height:1.5;margin-top:5px;color:#a08d86}.room-budget label{font-size:10px;margin:12px 0 0}.room-budget input{font-size:12px;min-height:32px;margin-top:6px;padding:7px 9px}.item-price{font-size:11px;font-weight:600;color:#776b71;margin:5px 0}.recommendations-trigger{position:absolute;left:20px;bottom:72px;z-index:2;display:flex;align-items:center;gap:7px;border:1px solid #e5daca;border-radius:16px;background:#fffdf8ed;backdrop-filter:blur(12px);padding:8px 12px;box-shadow:0 4px 15px #58433310;font-size:11px;color:#7e6b53}.recommendations-trigger:hover{background:#fff5df;transform:translateY(-1px)}#recommendationsDialog{width:min(760px,90vw);max-height:88dvh;overflow-y:auto}#recommendationsDialog h2{margin-right:30px}.recommendation-toolbar{display:flex;align-items:end;gap:16px}.recommendation-toolbar label{flex:1;margin:0}.recommendation-toolbar button{margin-bottom:0;min-height:36px}.recommendation-toolbar .mac-select{max-width:none}#recommendationStatus{font-size:12px;color:#9a7d51;line-height:1.5}#recommendationScope{font-size:10px;line-height:1.6}#recommendationList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.recommendation-card{border:1px solid #e9e0e3;background:#fffefd;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}.recommendation-card img{height:135px;width:100%;object-fit:contain;border-radius:10px}.recommendation-card small{font-size:10px;color:#9b8568}.recommendation-card a{font-size:12px;line-height:1.45;color:#51454c;text-decoration:none}.recommendation-card strong{font-size:13px}.recommendation-card button{margin-top:auto;font-size:11px;padding:9px 7px;background:#fff0ce;border-color:#ecd4a4}@media(max-width:700px){#recommendationList{grid-template-columns:repeat(2,minmax(0,1fr))}.recommendations-trigger{bottom:78px;left:12px}.recommendation-toolbar{flex-wrap:wrap}} .piece .item-price{display:flex;align-items:center;gap:4px;margin:4px 0;color:#9b825e;font-size:11px}.piece .item-price input{width:80px;min-height:24px;padding:2px 4px;margin:0;border:1px solid transparent;border-radius:6px;background:transparent;font-size:11px;box-sizing:border-box;color:#776b71}.piece .item-price input:hover,.piece .item-price input:focus{border-color:#e8d4b1;background:#fffefd}.piece .item-price input::placeholder{color:#ad9d84;font-weight:400}.piece .item-price input::-webkit-inner-spin-button{appearance:none}#budgetStatus:empty,#budgetMissing:empty{display:none} .recommendations-trigger{width:112px;height:120px;min-height:0;left:auto;right:auto;top:150px;bottom:auto;border:0;background:transparent!important;box-shadow:none;backdrop-filter:none;padding:0;cursor:grab;touch-action:none;user-select:none;z-index:3;transition:filter .15s}.recommendations-trigger svg{display:block;width:112px;height:120px;pointer-events:none}.recommendations-trigger:hover{transform:none;filter:brightness(1.03)}.recommendations-trigger:active{cursor:grabbing}.recommendations-trigger:focus-visible{outline:2px solid #d6b34d;outline-offset:2px;border-radius:30px}#recommendationList{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.recommendation-card{padding:16px;gap:10px}.recommendation-card[hidden]{display:none}.recommendation-card img{height:205px}.recommendation-card a{font-size:14px;line-height:1.45}.recommendation-card small{font-size:11px}.recommendation-card strong{font-size:15px}.recommendation-card button{min-height:38px;font-size:12px}.recommendation-toolbar{gap:12px}.recommendation-toolbar label{min-width:0}.recommendation-toolbar>button{font-size:12px;white-space:nowrap}@media(max-width:550px){#recommendationList{grid-template-columns:1fr}.recommendation-card img{height:190px}.recommendation-toolbar label{flex-basis:40%}} .recommendations-trigger{width:150px;height:174px;outline-offset:0;background:none!important;border:none!important;box-shadow:none!important;filter:none!important;overflow:visible}.recommendations-trigger .bulb-caption{position:absolute;left:-5px;top:0;width:160px;height:62px;pointer-events:none}.recommendations-trigger .recommendation-bulb{display:block;position:absolute;left:30px;top:42px;width:90px;height:130px;object-fit:contain;pointer-events:none;user-select:none}.recommendations-trigger:focus-visible{outline:2px dashed #d8bd7b;border-radius:30px}.recommendations-trigger:hover .recommendation-bulb{filter:brightness(1.025)} #editor header #saved{display:none!important} html:has(#editor:not([hidden])),body:has(#editor:not([hidden])){height:100dvh;overflow:hidden} .recommendations-trigger{height:195px}.recommendations-trigger .recommendation-bulb{left:10px;top:36px;width:130px;height:158px} /* Bulb palette: butter yellow, honey and soft apricot. */ :root{--pink:#fbe3a7;--accent:#dfa84d;--focus:#b9852f;--line:#e9dfd0;--muted:#8d8479;--ink:#38332c;--surface:#fff8ea;--butter:#fbe3a7;--honey:#e9b45c;--apricot:#f3bd65} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#d4a35488}input:focus,select:focus,textarea:focus{border-color:#d5ad68}input[type=range],input[type=checkbox],.furniture-filter-menu input{accent-color:#d7a14d} button.active,.piece.selected,#editor #roomTabs button.active{background:#fbe3a7ed;border-color:#edd19a;color:#795b2c}.piece:hover{background:#fff6e2}.person-add{background:#fff5df;border-color:#edd9b1;color:#967038}.person-add:hover{background:#fbe8bc}.statusdot{background:#edba5d}.mac-select-option.focused{background:#fbe8bc;color:#785b33}.mac-select-button[aria-expanded=true]{border-color:#dbb77b;box-shadow:0 0 0 3px #e7c48e26}.rotation-control{background:#fff6e3;border-color:#eddcba}.rotation-heading span{color:#806338}.room-budget{background:#fff7e7;border-color:#ecddc0}.budget-heading button,.account-switch button,.library-browse{color:#a47a34}.recommendation-card button{background:#fbe6b5;border-color:#e9cc91;color:#765a2d}.recommendation-card button:hover{background:#f7d994}.character-choice[aria-pressed=true]{background:#fff0ce;border-color:#d7a04c;box-shadow:0 0 0 1px #ebc688}.character-presets button.active{background:#fbe3a7}.person-photo-picker{background:linear-gradient(#fffefd,#fff3d9);border-color:#ead5ad}.upload-card{background:#fff9ed;border-color:#edd7ad}.upload-icon{background:#fbe3a7;color:#a17b41}.rotation-control input{accent-color:#d7a14d} .room-budget progress::-webkit-progress-value{background:#e1b35c}.room-budget progress::-moz-progress-bar{background:#e1b35c}.room-budget progress.over-budget::-webkit-progress-value{background:#d88f4e}.room-budget progress.over-budget::-moz-progress-bar{background:#d88f4e} .room-budget{background:transparent;border-color:#e6e0d7;box-shadow:none}.room-budget progress::-webkit-progress-value{background:#c8b384}.room-budget progress::-moz-progress-bar{background:#c8b384}.budget-heading button{color:#9d8961}button.active,.piece.selected,#editor #roomTabs button.active{background:#faf2df;border-color:#eadcc0;color:#786847}.rotation-control{background:#f8f5ee;border-color:#e8e0d1}.person-add{background:#fbf8f0;border-color:#e8dfcc;color:#947d52}.recommendation-card button{background:#f9f0dc;border-color:#e6d8b8;color:#806b44} /* Product import: only dimensions, color and material remain editable. */ #addDialog #matchPhoto,#addDialog #downloadModelDetails,#addDialog #undoEnhancement,#addDialog #showOriginalModel,#addDialog #showCustomCandidate,#addDialog #constructionBuilder,#addDialog #tableConstruction,#addDialog #partsReview,#addDialog #useWoodFrame,#addDialog #meshFinishControls,#addDialog label:has(#refinementNotes),#addDialog label:has(#autoCustomize),#addDialog details:has(#repairArc),#addDialog #selectedPhotoViews,#addDialog #photoViewCount{display:none!important} #specReview>label,#specReview>.two{display:none!important}#specReview{border:0;margin-top:18px}#specReview>summary{pointer-events:none;list-style:none;font-size:13px;padding-bottom:12px}#specReview>summary::-webkit-details-marker{display:none}#specReview>.three{display:grid} #addDialog .modelcompare:not(.has-product-model){grid-template-columns:1fr}#addDialog .modelcompare:not(.has-product-model) .modelpreview{display:none!important}#addDialog .modelcompare:not(.has-product-model) figure{max-width:440px;margin:0 auto;width:100%;box-sizing:border-box}#addDialog .modelcompare:not(.has-product-model) figure img{max-height:330px;object-fit:contain} #photoChoices .chosen-view{border-color:#d3b575;background:#fcf6e8}#photoChoices .chosen-view::after{display:none} /* Prototype: a sunny header, quiet controls, and a retractable furniture drawer. */ /* Gradient header option preserved: #editor header{background:linear-gradient(100deg,#ffedb1 0%,#fbd58d 52%,#f5b651 100%);backdrop-filter:none;border-bottom:1px solid #eac988} */ /* Gradient header option preserved: #editor header .headright>button{background:transparent;color:#fff;border:1px solid #ffffffb8;box-shadow:none;font-weight:600;min-height:36px} */ /* Gradient header option preserved: #editor header .headright>button:hover{background:#ffffff21;border-color:#fff} */ #editor header .brand .project{color:#87754e} #editor .library #addBtn{background:#7d7c76;border-color:#7d7c76;color:#fff;box-shadow:none} #editor .library #addBtn:hover{background:#6f6e69} #editor main{position:relative;--library-width:292px} #toggleLibrary{position:absolute;z-index:12;left:calc(var(--library-width) - 13px);top:48%;width:27px;height:58px;min-height:0;padding:0;border:1px solid #e5e1da;border-radius:18px;background:#fffefa;box-shadow:0 2px 8px #55462a0c;font-size:25px;color:#827b6b;transition:left 300ms ease} #editor.library-collapsed main{grid-template-columns:0 minmax(0,1fr) 248px} #editor.library-collapsed:not(.has-selection) main{grid-template-columns:0 minmax(0,1fr)} #editor.library-collapsed .library{visibility:hidden;pointer-events:none;padding:0;border:0;overflow:hidden} #editor.library-collapsed #toggleLibrary{left:4px} #editor .library-tools{margin:24px 0 8px;border-top:1px solid #e8e2d8;padding-top:14px} .library-tools summary{font-size:12px;color:#8a8170;cursor:pointer}.library-tools>div{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}.library-tools button{font-size:11px;padding:7px 9px;min-height:32px}.library-tools #creditBalance{width:100%} .recommendations-trigger{width:110px!important;height:138px!important} .recommendations-trigger .recommendation-bulb{width:82px!important;height:106px!important;left:14px!important;top:30px!important} .recommendations-trigger .bulb-caption{width:126px!important;height:49px!important;left:-8px!important;top:-4px!important;opacity:0;transform:translateY(4px);transition:opacity 180ms ease,transform 180ms ease;pointer-events:none} .recommendations-trigger:hover .bulb-caption,.recommendations-trigger:focus-visible .bulb-caption{opacity:1;transform:translateY(0)} @media(min-width:1500px){#editor main{--library-width:310px}#editor.library-collapsed.has-selection main{grid-template-columns:0 minmax(0,1fr) 270px}} @media(min-width:701px) and (max-width:1100px){#editor main{--library-width:230px}#editor.library-collapsed.has-selection main{grid-template-columns:0 minmax(0,1fr) 205px}} @media(max-width:700px){#toggleLibrary{position:fixed;top:auto;bottom:16px;left:12px}#editor.library-collapsed .library{display:none}#editor header .headright{margin-left:auto}} @media(prefers-reduced-motion:reduce){#toggleLibrary,.recommendations-trigger .bulb-caption{transition:none}} .recommendations-trigger .bulb-caption{top:3px!important} /* Shared workshop sheets with a macOS-like image action. */ #addDialog,#recommendationsDialog{padding:28px;background:#fffefa;border:1px solid #eee3cf;border-radius:22px} .brand-dialog-header{margin:-28px -28px 26px;padding:28px 64px 25px 28px;background:linear-gradient(100deg,#ffedb1,#fbd58d 52%,#f5b651);border-bottom:1px solid #eac988} .brand-dialog-header .eyebrow{display:block;font-size:9px;letter-spacing:1.8px;color:#8b7245;margin:0 0 9px} .brand-dialog-header h2{font-size:26px;letter-spacing:-.7px;color:#443b2c;margin:0;line-height:1.2} .brand-dialog-header p{color:#806d4f;font-size:12px;line-height:1.6;margin:12px 0 0;max-width:620px} #addDialog>.close,#recommendationsDialog>.close{z-index:2;top:17px;right:17px;background:#ffffff85;border:1px solid #fff9;color:#857248} #addDialog .dark,#recommendationsDialog .dark,#recommendationsDialog .recommendation-card button{background:linear-gradient(110deg,#ffe6a0,#f7ba59);border:1px solid #e8bb68;color:#60491e;box-shadow:inset 0 1px #fff8,0 2px 4px #9b703b10;font-weight:600} #addDialog .dark:hover,#recommendationsDialog .dark:hover{filter:brightness(1.035)} #addDialog label,#recommendationsDialog label{font-size:12px;color:#81786a} #addDialog .urlrow{align-items:end;gap:12px}#addDialog .urlrow input{background:#fff;border-radius:12px} #addDialog .product-image-upload{margin:20px 0 26px;padding:16px 18px;border:1px solid #e8e2d8;border-radius:14px;background:#f9f7f2;font-size:12px;color:#81786a} .image-upload-actions{display:flex;align-items:center;gap:14px;margin-top:10px;min-width:0} #uploadProductImage{background:linear-gradient(#fff,#f3f0ea);border:1px solid #dcd5c9;border-radius:9px;box-shadow:0 1px 2px #51482b0c,inset 0 1px #fff;color:#665b47;font-size:12px;padding:9px 15px;min-height:36px;flex-shrink:0} #uploadProductImage>span{font-size:16px;margin-right:6px}#productImageFilename{font-size:11px;color:#a09582;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #recommendationsDialog .mac-select-button{background:linear-gradient(#fff,#f6f3ed);border-color:#e1dbd0;border-radius:10px} @media(max-width:550px){.brand-dialog-header h2{font-size:22px}.image-upload-actions{align-items:start;flex-direction:column;gap:8px}} /* Room information and a focused model approval sheet. */ .brand-dialog-header{background:transparent;border-bottom:1px solid #e9e1d4} .brand-dialog-header h2{color:#bd832b}.brand-dialog-header .eyebrow{color:#bb9254}.brand-dialog-header p{color:#948773} #editor.room-inspector .details{display:flex!important;flex-direction:column} #editor.room-inspector .selectiontitle{order:-1;margin-bottom:20px} #editor.room-inspector #selected,#editor.room-inspector #aiState{display:none} #editor.room-inspector .roomsettings{border:0;margin:0} #editor.room-inspector .roomsettings>summary{display:none} #roomTabs button input{width:140px;font:inherit;padding:0;border:0;background:transparent;margin:0;color:inherit;min-height:0} #addDialog #pasteFallback{display:none!important} .product-model-column{display:flex;flex-direction:column;min-width:0} #addDialog .product-model-column .custombuild{display:flex;flex-direction:column;align-items:stretch;margin:20px 0 0;gap:8px} #buildCreditBalance{text-align:right;margin:0;font-size:11px;color:#99866a} #addDialog .product-model-column .modelpreview{flex:1;margin-top:12px} #addDialog .modelcompare:not(.has-product-model){grid-template-columns:1fr 1fr} #addDialog .modelcompare:not(.has-product-model) .modelpreview{display:none} #addDialog #customizeProduct{font-size:12px;padding:12px;min-height:42px} #costDialog #costExplanation,#costDialog>.eyebrow{display:none} #costDialog{max-width:420px}#costDialog h2{color:#bd832b;font-size:23px} #costDialog.model-credit-review #costDetails{background:#fbf7ee;text-align:center;border:1px solid #eee1ca;padding:24px;border-radius:14px} #costDialog.model-credit-review #costDetails strong{font-size:28px;color:#9b712d}#costDialog.model-credit-review #costDetails p{margin:10px 0 0;font-size:12px} #costDialog #approveCost{background:linear-gradient(110deg,#ffe6a0,#f7ba59);border-color:#e8bb68;color:#60491e} @media(max-width:550px){#addDialog .modelcompare:not(.has-product-model){grid-template-columns:1fr}} /* Compact reference/model comparison with a close action anchored to the sheet. */ .brand-dialog-header h2,#costDialog h2{color:#35332f}.brand-dialog-header .eyebrow{color:#827b70} #addDialog,#recommendationsDialog{padding-top:0} .sheet-close-dock{position:sticky;top:0;height:0;z-index:30;overflow:visible;pointer-events:none} #addDialog .sheet-close-dock>.close,#recommendationsDialog .sheet-close-dock>.close{position:absolute;top:17px;right:-11px;pointer-events:auto;width:30px;height:30px;min-height:30px;background:#fffefaed;border:1px solid #e8e1d5;color:#797368;box-shadow:0 2px 7px #4e40200c} #addDialog .brand-dialog-header,#recommendationsDialog .brand-dialog-header{margin-top:0} #addDialog .reviewhero{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;margin:22px 0 16px;align-items:center} #addDialog .reviewhero>img{width:100px;height:110px;padding:0;object-fit:contain} #addDialog .reviewhero h3{font-size:16px;margin:0 0 14px} #addDialog .reviewhero #photoChoices{margin:0;padding:0;gap:7px;border:0} #addDialog .reviewhero #photoChoices img{width:54px;height:58px} #addDialog .modelcompare{align-items:start;gap:18px} #addDialog .modelcompare>figure{margin:0!important;max-width:none!important;min-height:260px} #addDialog .modelcompare>figure img{height:260px;box-sizing:border-box;object-fit:contain} #addDialog .product-model-column .custombuild{margin:0 0 12px;gap:8px} #addDialog .product-model-column .modelpreview{margin:0;width:100%} #addDialog .product-model-column .modelpreview canvas{height:260px} #recommendationsDialog .recommendation-toolbar .mac-select-button,#recommendationsDialog #findRecommendations{min-height:44px;padding-top:12px;padding-bottom:12px} #recommendationStatus:empty{display:none} @media(max-width:550px){#addDialog .reviewhero{grid-template-columns:80px minmax(0,1fr)}#addDialog .reviewhero>img{width:80px;height:100px}} #recommendationsDialog .recommendation-toolbar{margin-bottom:24px} #buildCreditBalance{display:none!important} #addDialog .modelcompare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:12px} #addDialog .product-model-column{display:contents} #addDialog .product-model-column .custombuild{grid-column:2;grid-row:1;margin:0} #addDialog .modelcompare>figure{grid-column:1;grid-row:2;align-self:stretch;min-height:0} #addDialog .product-model-column .modelpreview{grid-column:2;grid-row:2;align-self:stretch;margin:0} #addDialog .modelcompare>figure img{height:260px;flex:1;min-height:0} #addDialog .modelcompare>figure figcaption,#addDialog .modelpreview>span{min-height:34px;box-sizing:border-box;padding:10px} #importColorPicker .finish-color{position:relative;max-width:180px;gap:8px} #importColorPicker .color-popover{border:0!important;margin:0!important;padding:0!important} #importColorPicker .color-popover summary{min-height:38px;padding:8px 10px} #importColorPicker .color-popover-content{z-index:35;width:250px;max-width:calc(100vw - 72px)} #importfinishColorSquare{position:relative;height:140px;width:100%;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair;margin:12px 0 15px} #importfinishHue{appearance:none;width:100%;height:9px;border-radius:8px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);padding:0;border:0;display:block;margin:0 0 12px;min-height:0} #importfinishHue::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:2px solid white;box-shadow:0 1px 4px #0004;border-radius:50%;background:transparent} #importfinishHue::-moz-range-thumb{width:13px;height:13px;border:2px solid white;border-radius:50%;background:transparent} @media(max-width:550px){#addDialog .modelcompare{grid-template-columns:1fr}#addDialog .product-model-column .custombuild{grid-column:1;grid-row:1}#addDialog .modelcompare>figure{grid-column:1;grid-row:2}#addDialog .product-model-column .modelpreview{grid-column:1;grid-row:3}} #addDialog .product-model-column .modelpreview{display:flex;flex-direction:column} #addDialog .product-model-column .modelpreview canvas{flex:1;min-height:260px} #addDialog .product-model-column .modelpreview>span{flex-shrink:0} .product-photo-guidance{display:block;margin-top:12px;max-width:500px;font-size:11px;line-height:1.5;color:#9b907c} #sharedModelMatch{padding:12px;border:1px solid #e8dcc5;border-radius:12px;background:#faf7ef;font-size:11px;color:#8a7b61;line-height:1.5} #sharedModelMatch strong{font-size:12px;color:#66573d}#sharedModelMatch p{font-size:12px;margin:6px 0;color:#7b6c54}#sharedModelMatch small{display:block;font-size:10px} #sharedModelMatch button{width:100%;margin-top:10px;min-height:36px;background:#fff9e8;border-color:#ddc594;color:#8b692c;font-size:11px} #addDialog .reviewhero:has(>img[hidden])>div{grid-column:1/-1} #sharedModelMatch{min-width:0;overflow-wrap:anywhere} #sharedModelMatch button{white-space:normal} #sharedModelMatch .reject-library-match{background:transparent;border:0;min-height:24px;padding:2px;color:#9a8a70;margin-top:6px} /* Gradient header option preserved: .library-page>header{background:linear-gradient(100deg,#ffedb1 0%,#fbd58d 52%,#f5b651 100%);border-bottom:1px solid #eac988;min-height:78px;gap:20px} */ .library-page>header>span{color:#87754e} /* Gradient header option preserved: .library-page>header .dashboard-back{margin-left:auto;border:1px solid #ffffffb8;border-radius:10px;padding:10px 15px;color:#fff;background:transparent;font-size:12px;font-weight:600;letter-spacing:0;text-decoration:none;white-space:nowrap} */ /* Gradient header option preserved: .library-page>header .dashboard-back:hover{background:#ffffff21;border-color:#fff} */ @media(max-width:650px){.library-page>header{flex-wrap:wrap;gap:12px}.library-page>header>span{display:none}} @font-face{font-family:'Roomwise Archivo';src:url('./assets/archivo-variable.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap} #editor header .logo,.library-page>header>a:first-child{font-family:'Roomwise Archivo',Arial,sans-serif;font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 900;letter-spacing:-.6px} /* Animate only the mascot, preserving the launcher's stored canvas position. */ .recommendations-trigger .recommendation-octopus{position:absolute;left:0;top:32px;width:110px;height:100px;object-fit:contain;pointer-events:none;user-select:none;transform-origin:50% 65%;will-change:transform} .recommendations-trigger:hover .recommendation-octopus,.recommendations-trigger:focus-visible .recommendation-octopus{animation:octopus-greeting 1.6s ease-in-out infinite} @keyframes octopus-greeting{0%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-4px) rotate(-5deg) scale(1.03,.97)}55%{transform:translateY(-7px) rotate(4deg) scale(.98,1.03)}78%{transform:translateY(-2px) rotate(-2deg)}} @media(prefers-reduced-motion:reduce){.recommendations-trigger .recommendation-octopus{animation:none!important;will-change:auto}} /* Fish option: idle breathing and bubbles; hover invites a little swim. */ .recommendations-trigger .fish-mascot{position:absolute;left:0;top:42px;width:110px;height:85px;pointer-events:none;animation:fish-idle 3.2s ease-in-out infinite;transform-origin:center} .recommendation-fish{display:block;width:110px;height:85px;object-fit:contain;user-select:none;transform-origin:45% 50%;animation:fish-breathe 2.8s ease-in-out infinite} .fish-bubble{position:absolute;left:8px;top:42px;width:8px;height:8px;background:#81cbe0b3;border:1px solid #70bdd5;border-radius:50%;opacity:0;animation:fish-bubbles 3.6s ease-out infinite} .fish-bubble:after{content:'';position:absolute;left:2px;top:1px;width:2px;height:2px;background:#fff;border-radius:50%} .fish-bubble-two{animation-delay:1.2s;width:6px;height:6px} .fish-bubble-three{animation-delay:2.4s;width:10px;height:10px} .recommendations-trigger:hover .fish-mascot,.recommendations-trigger:focus-visible .fish-mascot{animation:fish-greeting 1.3s ease-in-out infinite} .recommendations-trigger:hover .fish-bubble,.recommendations-trigger:focus-visible .fish-bubble{animation-duration:1.8s} .recommendations-trigger:hover .fish-bubble-two,.recommendations-trigger:focus-visible .fish-bubble-two{animation-delay:.6s} .recommendations-trigger:hover .fish-bubble-three,.recommendations-trigger:focus-visible .fish-bubble-three{animation-delay:1.2s} @keyframes fish-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,1.07)}} @keyframes fish-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes fish-greeting{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-7px,-5px) rotate(-8deg)}65%{transform:translate(3px,-2px) rotate(6deg)}} @keyframes fish-bubbles{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:.8}75%{opacity:.55}100%{opacity:0;transform:translate(-13px,-45px) scale(1.1)}} @media(prefers-reduced-motion:reduce){.recommendations-trigger .fish-mascot,.recommendations-trigger .recommendation-fish,.recommendations-trigger .fish-bubble{animation:none!important}.fish-bubble-one{opacity:.6;transform:translate(-7px,-18px)}} /* A little more presence for the fish and its invitation. */ .recommendations-trigger .fish-mascot{left:-8px;top:40px;width:126px;height:98px} .recommendations-trigger .recommendation-fish{width:126px;height:98px} .recommendations-trigger .fish-bubble{left:9px;top:48px;width:11px;height:11px} .recommendations-trigger .fish-bubble-two{width:8px;height:8px} .recommendations-trigger .fish-bubble-three{width:13px;height:13px} .recommendations-trigger .fish-bubble:after{left:3px;top:2px;width:3px;height:3px} .recommendations-trigger .bulb-caption{width:144px!important;height:56px!important;left:-17px!important;top:-2px!important} /* Painted fish variant; previous orange fish and octopus styles remain available. */ .recommendations-trigger .painted-fish-mascot{left:-17px;top:48px;width:144px;height:64px} .recommendations-trigger .painted-fish-mascot .recommendation-fish{width:144px;height:64px} .recommendations-trigger .painted-fish-mascot .fish-bubble{left:4px;top:30px} .recommendations-trigger .painted-fish-mascot{left:-53px;top:40px;width:216px;height:96px} .recommendations-trigger .painted-fish-mascot .recommendation-fish{width:216px;height:96px} .recommendations-trigger .painted-fish-mascot .fish-bubble{left:6px;top:45px} .recommendations-trigger:has(.painted-fish-mascot){width:182px!important;height:154px!important} .recommendations-trigger .painted-fish-mascot{left:-17px} .recommendations-trigger:has(.painted-fish-mascot) .bulb-caption{left:19px!important} .welcome-word{font-family:'Roomwise Archivo',Arial,sans-serif;font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 900;font-size:clamp(44px,8vw,114.67px);letter-spacing:-.025em;white-space:nowrap;transform-origin:50% 0;will-change:transform;pointer-events:none} .welcome canvas{width:100vw;max-width:none} @media(prefers-reduced-motion:reduce){.welcome-word{will-change:auto}} .welcome-bottom .welcome-slogan{font-size:clamp(17px,1.6vw,21px);font-weight:500;letter-spacing:-.35px;color:#665e51;margin-bottom:23px} /* Cream header variant, matching the page and footer. */ #editor header,.library-page>header{background:#fcfbf9;border-bottom:1px solid #e5e1df;backdrop-filter:none} .library-page>header{min-height:78px;gap:20px} #editor header .headright>button,.library-page>header .dashboard-back{background:transparent;color:#454044;border:1px solid #dcd5cc;box-shadow:none;font-weight:600;min-height:36px} .library-page>header .dashboard-back{margin-left:auto;border-radius:10px;padding:10px 15px;font-size:12px;letter-spacing:0;text-decoration:none;white-space:nowrap} #editor header .headright>button:hover,.library-page>header .dashboard-back:hover{background:#f2eee7;border-color:#c8bdad} /* Typewritten wordmark with a distinct band above the vignette. */ .welcome-word{top:13%;line-height:1.02;will-change:auto} .welcome-letter{position:relative;display:inline-block} .welcome-letter.typing-current:after{content:'';position:absolute;right:-.035em;top:.12em;height:.72em;width:2px;background:#b89960;animation:welcome-caret .6s steps(1) infinite} .welcome canvas{height:60vh;max-height:540px;transform:translateY(65px)} @keyframes welcome-caret{50%{opacity:0}} @media(max-width:650px){.welcome-word{top:17%}.welcome canvas{height:52vh;transform:translateY(38px)}} @media(prefers-reduced-motion:reduce){.welcome-letter.typing-current:after{animation:none;display:none}} /* Prototype composition: generous wordmark, central room, quiet Gill Sans copy. */ #welcome{font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif} #welcome button{font-family:inherit} .welcome-word{top:8.5%;font-size:clamp(44px,8vw,144px)} .welcome canvas{height:76vh;max-height:760px;transform:translateY(25px)} .welcome-bottom{bottom:3.5%} .welcome-bottom .welcome-slogan{font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif;font-size:clamp(20px,1.8vw,28px);font-weight:300;letter-spacing:-.5px;margin-bottom:20px} .welcome-bottom .start{font-size:18px;font-weight:400} @media(max-width:650px){.welcome-word{top:16%}.welcome canvas{height:62vh;transform:translateY(15px)}.welcome-bottom{bottom:5%}.welcome-bottom .welcome-slogan{font-size:21px}} /* A compact visual introduction beside room setup. */ .setup-layout{max-width:1080px;margin:28px auto 40px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center} .setup-layout .setup-inner{width:100%;max-width:560px;margin:0;padding:32px} .setup-layout .setup-inner h1{font-size:32px;margin:15px 0 28px;line-height:1.12} .setup-explainer{font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif;text-align:center;padding:20px 0} .setup-explainer h2{font-size:29px;font-weight:400;letter-spacing:-.6px;margin:14px 0 6px;color:#454039} .setup-guide{display:block;width:100%;max-width:390px;margin:0 auto;overflow:visible} .guide-label{font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif;font-size:19px;fill:#695e4f;font-weight:400} .guide-arrow{fill:none;stroke:#ccb991;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:guide-flow 6s ease-in-out infinite} .guide-arrow-second{animation-delay:1.4s} .guide-model,.guide-room-chair{transform-box:fill-box;transform-origin:center;animation:guide-model-pop 6s ease-in-out infinite} .guide-room-chair{animation-name:guide-room-pop} .guide-link{animation:guide-link-glow 6s ease-in-out infinite} @keyframes guide-flow{0%,12%,85%,100%{opacity:.3}25%,60%{opacity:1}} @keyframes guide-model-pop{0%,20%{opacity:0;transform:scale(.85) translateY(4px)}32%,90%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.97)}} @keyframes guide-room-pop{0%,45%{opacity:0;transform:scale(.65) translateY(8px)}58%,90%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.97)}} @keyframes guide-link-glow{0%,100%{opacity:.7}12%,75%{opacity:1}} @media(max-width:850px){.setup-layout{grid-template-columns:1fr;max-width:560px;gap:24px;margin-top:18px}.setup-explainer{padding:0}.setup-explainer h2{font-size:25px}.setup-guide{max-width:265px}.setup-layout .setup-inner{padding:28px}} @media(prefers-reduced-motion:reduce){.setup-guide *{animation:none!important}} /* Make room for the floor-plan-to-3D step while keeping setup balanced. */ .setup-guide{max-width:340px} .guide-floorplan{animation:guide-link-glow 6s ease-in-out infinite} @media(max-width:850px){.setup-guide{max-width:265px}} /* Static, numbered steps with one consistent title-and-caption hierarchy. */ .setup-explainer h2{font-size:28px;margin-bottom:24px} .setup-steps{list-style:none;display:grid;gap:14px;margin:0;padding:0;text-align:left} .setup-steps li{min-height:112px;display:grid;grid-template-columns:26px minmax(0,1fr) 130px;gap:12px;align-items:center;padding:15px 17px;border:1px solid #e5ded4;border-radius:16px;background:#fcfbf9} .step-number{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eee5d5;color:#8b744f;font-size:13px;font-weight:500} .setup-explainer .step-copy h3{font-family:inherit;font-size:17px;font-weight:500;line-height:1.25;letter-spacing:-.2px;margin:0 0 6px;color:#494239} .setup-explainer .step-copy p{font-family:inherit;font-size:13px;font-weight:400;line-height:1.35;color:#918575;margin:0} .step-visual{width:130px;height:82px;object-fit:contain;display:block} .step-link{width:130px;padding:12px 8px;border:1px solid #e4ddcf;border-radius:10px;background:#fffefd;font-size:12px;white-space:nowrap;color:#8d806c} .step-link span{color:#ad8d53;font-size:17px;margin-right:6px} @media(max-width:1050px) and (min-width:851px){.setup-layout{gap:26px}.setup-steps li{grid-template-columns:24px minmax(0,1fr) 100px;padding:12px;gap:8px}.step-visual,.step-link{width:100px}.step-link{font-size:10px}.setup-explainer .step-copy h3{font-size:16px}} @media(max-width:850px){.setup-explainer{width:100%}.setup-steps li{min-height:105px}} @media(max-width:400px){.setup-steps li{grid-template-columns:24px minmax(0,1fr) 90px;padding:12px;gap:8px}.step-visual,.step-link{width:90px}.step-link{font-size:9px}.setup-explainer .step-copy h3{font-size:16px}.setup-explainer .step-copy p{font-size:12px}} /* Modal notifications belong to the top-layer content, above its backdrop. */ dialog #toast.dialog-notice{position:sticky;top:8px;bottom:auto;left:auto;transform:none;display:block;width:100%;max-width:none;margin:0 0 20px;padding:13px 16px;background:#fff5df;color:#665033;border:1px solid #e7d1a8;border-radius:12px;box-shadow:0 3px 12px #55442d0a;font-size:13px;line-height:1.5;text-align:left;z-index:20;pointer-events:auto;filter:none;backdrop-filter:none} .photo-cleanup-hint{font-size:12px!important;color:#91816b!important;text-align:right;margin:0 0 9px!important;line-height:1.4!important}#preparedPhotoActions{text-align:center;padding:0 10px 12px}#togglePreparedPhoto{font-size:11px;min-height:28px;padding:5px 10px;background:transparent;color:#8c7247;border:0} #addDialog .photo-cleanup-option{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:12px 13px;background:#f8f5ee;border:1px solid #e8e0d2;border-radius:12px;text-align:left;font-size:13px;font-weight:500;color:#625748;cursor:pointer} .photo-cleanup-option input{flex:none;width:15px;height:15px;margin:1px 0 0;accent-color:#c59b4e} .photo-cleanup-option small{display:block;font-size:11px;font-weight:400;line-height:1.5;margin-top:3px;color:#958774} .recommendation-search{margin:0 0 22px}.recommendation-search>div{display:flex;gap:10px}.recommendation-search input{flex:1;min-width:0;margin:0;min-height:46px}.recommendation-search button{min-height:46px;padding:10px 24px}.recommendation-search label{display:block;margin:0 0 8px;font-size:12px}#recommendationWebSearch{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 20px;font-size:11px;color:#8c8175}#recommendationWebSearch a{border:1px solid #e7ded1;border-radius:20px;padding:7px 11px;color:#77634b;text-decoration:none}#recommendationWebSearch a:hover{background:#fff4dc}.recommendation-toolbar input{min-height:44px;margin:0;width:100%;padding:10px}#recommendationsDialog .recommendation-toolbar{flex-wrap:wrap}#recommendationsDialog .recommendation-toolbar label{flex:1;min-width:120px} .shopping-import-notice{margin:20px 0;padding:16px 18px;border:1px solid #ead5af;border-radius:14px;background:#fff7e7;color:#776348;font-size:13px;line-height:1.6}.shopping-import-notice a{display:block;margin-top:7px;color:#967336;text-underline-offset:3px}.shopping-import-notice[hidden]{display:none} .draw-apartment{display:block;width:100%;margin:14px 0 22px;text-align:left;background:#faf6ec;border:1px solid #e6d6b8;padding:16px 20px;font-weight:600}.draw-apartment span{display:block;font-size:12px;font-weight:400;color:#918474;margin-top:5px}.room-sketch-dialog{width:min(1100px,94vw);max-height:92dvh;overflow:auto}.sketch-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);gap:26px}.sketch-presets,.sketch-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.sketch-presets button,.sketch-tools button{font-size:12px;padding:8px 12px;min-height:34px}.sketch-tools{margin-top:10px;align-items:center}.sketch-tools label{display:flex;align-items:center;gap:7px;margin:0;font-size:12px}.sketch-tools input{width:16px;min-height:16px;margin:0}#sketchCanvas{width:100%;background:#fcfbf9;border:1px solid #e3dbcd;border-radius:16px;touch-action:none}#sketchCanvas circle{cursor:grab}#sketchCanvas line{cursor:pointer;pointer-events:stroke}#sketchWalls{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:160px;overflow:auto;margin:12px 0}#sketchWalls button{font-size:12px;min-height:34px;padding:7px}#sketchWalls button.active{background:#f8e9c9;border-color:#cda65e}#sketchSummary{font-size:13px;line-height:1.5;color:#876943}.sketch-estimate{font-size:12px;line-height:1.6;color:#8c8173}#sketchCreate{width:100%;margin-top:12px}.sketch-details label{font-size:12px}.sketch-details input{min-height:40px}.sketch-layout .muted{font-size:12px;line-height:1.6}@media(max-width:780px){.sketch-layout{grid-template-columns:1fr}.room-sketch-dialog{padding:22px}.sketch-layout{gap:12px}} .room-wall-lengths{font-size:12px;line-height:1.8;color:#8a7c6b;margin:12px 0}.room-wall-lengths strong{display:block;margin-bottom:5px;font-weight:600} .sketch-canvas-wrap{position:relative}.sketch-wall-editor{position:absolute;z-index:3;transform:translate(-50%,-50%);width:210px;background:#fffdfa;border:1px solid #d7ba85;border-radius:14px;box-shadow:0 8px 28px #493b2826;padding:13px}.sketch-wall-editor label{display:block;margin:0;font-size:12px}.sketch-wall-editor input{margin:6px 0 10px;width:100%;min-height:38px}.sketch-wall-editor>div{display:flex;gap:6px}.sketch-wall-editor button{flex:1;min-height:30px;padding:5px 8px;font-size:12px}.sketch-wall-editor button[type=submit]{background:#f6dfae;border-color:#d6b675}.sketch-wall-editor[hidden]{display:none}#sketchCanvas text[data-wall]{cursor:text;user-select:none} .account-check{display:flex!important;align-items:flex-start;gap:9px;font-size:12px;line-height:1.55;margin:13px 0}.account-check input{width:16px;min-height:16px;margin:2px 0 0;flex-shrink:0}.account-check a,.account-profile-link{color:#957136;text-underline-offset:3px}.account-draft-note{font-size:11px;line-height:1.5;color:#9a8b77}.account-profile-link{display:block;margin:16px 0}.account-dialog form[hidden],#accountSignupOptions[hidden]{display:none}#accountVerifyForm button{margin-top:10px}#accountVerifyCode{letter-spacing:5px;font-size:22px} /* A dedicated explanation screen separates discovery from room creation. */ .how-works{position:fixed;inset:0;z-index:5;min-height:100dvh;overflow-y:auto;background:#fcfbf9;padding:72px 5vw 44px;font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif}.how-works-content{max-width:1220px;margin:0 auto;text-align:center}.how-works .eyebrow{font-size:12px;letter-spacing:3px}.how-works h2{font-family:inherit;font-size:clamp(34px,4vw,54px);font-weight:500;line-height:1.12;letter-spacing:-1.5px;color:#3b3731;margin:18px 0 42px}.how-works .setup-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}.how-works .setup-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;min-height:310px;border:1px solid #e7dfd1;border-radius:23px;background:#fffefb;padding:24px 20px;text-align:center}.how-works .setup-steps li:not(:last-child)::after{content:'→';position:absolute;right:-24px;top:48%;width:24px;background:#fcfbf9;color:#ba9e71;font-size:24px;z-index:1}.how-works .step-number{order:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;color:#917342;background:#f5ead4;margin-bottom:17px}.how-works .step-visual,.how-works .step-link{order:1;width:100%;height:112px;max-width:190px;margin:0 auto 22px;object-fit:contain}.how-works .step-link{display:flex;align-items:center;justify-content:center;font-size:12px;height:55px;margin-top:29px;margin-bottom:50px;white-space:nowrap;border-radius:13px;padding:10px;border:1px solid #ded3c2;background:#fcfbf9}.how-works .step-copy{order:2}.how-works .step-copy h3{font-family:inherit;font-size:21px;line-height:1.2;font-weight:500;color:#474036;margin:0 0 11px;letter-spacing:-.3px}.how-works .step-copy p{font-family:inherit;font-size:15px;line-height:1.5;font-weight:400;color:#928473;margin:0}.how-works-action{margin:34px auto 0}.how-works-action button{min-width:250px;border-radius:30px;font-family:inherit;font-size:17px;padding:16px 28px}.how-works-action p{font-size:13px;color:#a09382;margin:12px 0}.setup-layout{grid-template-columns:minmax(0,650px);justify-content:center;max-width:730px!important}.setup-inner{width:100%}@media(max-width:850px){.how-works{padding:70px 22px 30px}.how-works h2{margin-bottom:28px}.how-works .setup-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,75vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px}.how-works .setup-steps li{scroll-snap-align:center;min-height:300px}.how-works .setup-steps li:not(:last-child)::after{right:-19px;width:18px;font-size:20px}.how-works-action{margin-top:22px}} /* Ideas uses the same quiet cream and charcoal controls as the dashboard. */ #recommendationsDialog .recommendation-search label, #recommendationsDialog .recommendation-toolbar label{font-size:12px;line-height:1.4;font-weight:500;color:#827b70} #recommendationsDialog .recommendation-search{margin-bottom:24px} #recommendationsDialog .recommendation-search>div{align-items:center;gap:12px} #recommendationsDialog .recommendation-search input, #recommendationsDialog .recommendation-toolbar input, #recommendationsDialog .recommendation-toolbar .mac-select-button{height:46px;min-height:46px;font-size:13px;line-height:20px;padding:12px 14px;border-radius:11px;color:#514b47;background:#fffefd;box-shadow:0 1px 2px #30232b05} #recommendationsDialog .recommendation-search input::placeholder{color:#9a938b;font-size:13px} #recommendationsDialog .recommendation-toolbar{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:12px;margin-bottom:24px} #recommendationsDialog .recommendation-toolbar label{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0} #recommendationsDialog .recommendation-toolbar .mac-select, #recommendationsDialog .recommendation-toolbar input{margin:0} #recommendationsDialog .recommendation-toolbar .mac-select-button{padding-right:34px} #recommendationsDialog .mac-select-button::after{content:'';width:6px;height:6px;border-right:1.5px solid #8e8478;border-bottom:1.5px solid #8e8478;right:15px;top:47%;transform:translateY(-50%) rotate(45deg)} #recommendationsDialog .dark{height:46px;min-height:46px;padding:12px 24px;font-size:13px;line-height:20px;background:#35332f;border:1px solid #35332f;color:#fffefd;box-shadow:0 2px 3px #35332f12;border-radius:11px;white-space:nowrap} #recommendationsDialog .dark:hover{background:#4c4841;filter:none} #recommendationsDialog .recommendation-card button{min-height:42px;background:#f5efE3;border-color:#e4d8c2;color:#706049;box-shadow:none;font-size:12px} #recommendationsDialog .recommendation-card button:hover{background:#eee4d2} #recommendationWebSearch{gap:8px;font-size:11px;line-height:18px} #recommendationWebSearch a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;color:#7b6a55;background:#fffefd} #recommendationWebSearch a:hover{background:#f5efe5} #recommendationWebSearch a svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5} @media(max-width:620px){ #recommendationsDialog .recommendation-toolbar{grid-template-columns:1fr 1fr} #recommendationsDialog .recommendation-search>div{gap:8px} #recommendationsDialog .dark{padding-left:16px;padding-right:16px} #recommendationsDialog .brand-dialog-header h2{font-size:24px} } /* A spacious, self-contained illustration for each step. */ .how-works{padding-top:80px;padding-bottom:52px} .how-works-content{max-width:1380px} .how-works h2{margin:20px 0 52px;line-height:1.16} .how-works .setup-steps{gap:28px} .how-works .setup-steps li{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:32px 160px 1fr;justify-items:center;align-items:start;row-gap:24px;min-height:366px;padding:28px 22px 30px} .how-works .setup-steps li:not(:last-child)::after{content:none} .how-works .step-number{margin:0} .how-works .step-visual,.how-works .step-link{align-self:center;grid-row:2;width:100%;height:132px;max-width:210px;margin:0;object-fit:contain} .how-works .step-link{height:58px;font-size:13px;gap:8px} .how-works .step-link>span{font-size:19px;line-height:1;color:#b49a73} .how-works .step-copy{grid-row:3;width:100%;max-width:255px} .how-works .step-copy h3{font-size:21px;line-height:1.3;margin-bottom:14px} .how-works .step-copy p{font-size:15px;line-height:1.55} .how-works-action{margin-top:38px} @media(max-width:1050px) and (min-width:851px){.how-works .setup-steps{gap:18px}.how-works .setup-steps li{padding:24px 16px;row-gap:20px}.how-works .step-copy h3{font-size:19px}.how-works .step-copy p{font-size:14px}} @media(max-width:850px){.how-works{padding-top:70px}.how-works h2{margin-bottom:36px}.how-works .setup-steps{gap:18px}.how-works .setup-steps li{min-height:366px}.how-works-action{margin-top:24px}} @media(min-width:851px) and (max-height:800px){ .how-works{padding-top:40px;padding-bottom:24px} .how-works h2{font-size:42px;margin:16px 0 30px} .how-works .setup-steps li{grid-template-rows:30px 128px 1fr;min-height:330px;row-gap:20px;padding:22px 20px} .how-works .step-visual{height:120px} .how-works-action{margin-top:24px} } /* Match the apartment tab's subdued cream and gold treatment. */ #recommendationsDialog .recommendation-search button.dark, #recommendationsDialog #findRecommendations, #recommendationsDialog .recommendation-card button{ background:#fbf3df;border:1px solid #ead8b5;color:#7c6b45; box-shadow:0 2px 3px #66533308;font-size:13px;font-weight:600;line-height:20px; } #recommendationsDialog .recommendation-search button.dark, #recommendationsDialog #findRecommendations{height:46px;min-height:46px;padding:12px 24px} #recommendationsDialog .recommendation-search button.dark:hover, #recommendationsDialog #findRecommendations:hover, #recommendationsDialog .recommendation-card button:hover{background:#f4e8cd;filter:none} #sketchDialog button.active,#sketchDialog [aria-pressed=true]{background:#fbf3df;border-color:#ead8b5;color:#7c6b45;box-shadow:none} #sketchCanvas [data-wall]{cursor:grab} #sketchCanvas [data-corner]{cursor:move} #sketchCanvas:active [data-wall]{cursor:grabbing} #sketchDialog input[type=checkbox]{accent-color:#a18c62} /* Keep the introduction within one viewport, with no vertical scroll. */ .how-works{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;padding:clamp(28px,6vh,70px) 5vw 24px} body:has(#howWorks:not([hidden])){overflow:hidden;overscroll-behavior:none} .how-works-content{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,34px)} .how-works h2{flex:none;font-size:clamp(30px,3.7vw,54px);margin:0;line-height:1.15} .how-works .setup-steps{width:100%;min-height:0;flex:0 1 390px;margin:0} .how-works .setup-steps li{min-height:0;grid-template-rows:30px minmax(70px,1fr) auto;row-gap:clamp(10px,2.5vh,24px);padding:clamp(16px,3vh,28px) 20px} .how-works .step-visual{max-height:100%;height:132px} .how-works-action{flex:none;margin:0} .how-works-action p{margin:10px 0 0} @media(max-width:850px){.how-works{padding:60px 22px 20px}.how-works h2{font-size:clamp(28px,6vw,42px)}.how-works .setup-steps{overflow-y:hidden;grid-auto-columns:minmax(240px,75vw);flex-basis:370px}.how-works .setup-steps li{min-height:0}.how-works-action{margin:0}} @media(max-height:600px){.how-works-content{gap:12px}.how-works{padding-top:42px;padding-bottom:14px}.how-works h2{font-size:30px}.how-works .eyebrow{font-size:10px}.how-works .step-copy h3{font-size:17px;margin-bottom:7px}.how-works .step-copy p{font-size:12px}.how-works .setup-steps li{padding:12px 16px;row-gap:8px}.how-works-action button{min-height:40px;padding:10px 24px;font-size:15px}.how-works-action p{font-size:11px;margin-top:6px}} .how-works>#howBack{position:absolute;top:clamp(16px,4vh,44px);left:5vw;margin:0} .how-works .setup-steps li{grid-template-rows:30px minmax(0,1fr) 86px} @media(max-height:600px){.how-works .setup-steps li{grid-template-rows:26px minmax(0,1fr) 74px}} .how-works h2{transform:translateY(-12px)} .how-works-action{transform:translateY(12px)} @media(max-height:600px){.how-works h2{transform:translateY(-6px)}.how-works-action{transform:translateY(6px)}} /* Center the setup card independently of the Back control. */ #setup{position:relative;display:flex;flex-direction:column;min-height:100dvh;padding:64px 24px} #setup>#backHome{position:absolute;top:28px;left:32px;margin:0} #setup .setup-layout{display:block;width:min(100%,560px);max-width:560px!important;margin:auto;flex:none} #setup .setup-layout .setup-inner{width:100%;max-width:none;margin:0} @media(max-width:600px){#setup{padding:72px 18px 32px}#setup>#backHome{left:18px;top:20px}} @media(min-width:601px) and (max-height:850px){ #setup{padding:24px} #setup .setup-layout .setup-inner{padding:24px 30px} #setup .setup-inner h1{margin:12px 0 22px} #setup .upload-card{padding:18px} #setup .or{margin:20px 0} #setup #dimensionForm .dark{margin-top:10px} #setup .resume{margin-top:12px} } /* Geometric close marks avoid font-dependent baseline offsets. */ button.close,dialog button.close,#closeSelection,#meshBuildDismiss{display:grid;place-items:center;padding:0;line-height:1} button .close-mark{display:block;width:20px;height:20px;flex:none;pointer-events:none;overflow:visible} button .close-mark path{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:square} .sketch-wall-info{margin:18px 0;padding:16px;border:1px solid #e8dfd0;border-radius:15px;background:#fcfaf5} .sketch-wall-info h3{font-size:14px;margin:0 0 6px;color:#615845} #sketchDialog .sketch-wall-info p{font-size:12px;margin:0;color:#948773;line-height:1.5} #sketchWalls{margin:12px 0 0;max-height:220px} .sketch-wall-inline{display:flex;align-items:center;gap:5px;min-width:0;padding:5px 7px;border:1px solid #d8c39a;border-radius:12px;background:#fbf3df} .sketch-wall-inline label{font-size:11px;white-space:nowrap;margin:0} #sketchDialog .sketch-wall-inline input{width:100%;min-width:0;min-height:29px;padding:5px;margin:0;font-size:12px} .sketch-wall-inline span{font-size:11px;color:#8b7b5f} #sketchWalls .sketch-wall-inline button{padding:3px 5px;min-height:28px;background:transparent;border:0;color:#7c6b45} .selectiontitle{display:flex;align-items:center;justify-content:space-between;gap:12px} .selectiontitle h2{margin:0;line-height:1.3} #closeSelection{position:static;align-self:center;margin:0;flex:none} .room-tab{position:relative;flex:none} #editor #roomTabs .room-tab>[data-space]{padding-right:36px} #editor #roomTabs .room-tab-delete{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:#8b8172;opacity:0;pointer-events:none} #roomTabs .room-tab:hover .room-tab-delete,#roomTabs .room-tab:focus-within .room-tab-delete{opacity:1;pointer-events:auto} #editor #roomTabs .room-tab-delete:hover{background:#e9e2d6} #roomTabs .room-tab-delete .close-mark{width:16px;height:16px} @media(hover:none){#editor #roomTabs .room-tab-delete{opacity:1;pointer-events:auto}} #deleteRoomDialog{width:min(430px,90vw)} #deleteRoomDialog p{font-size:13px;line-height:1.6} .how-works .setup-steps li{grid-template-rows:30px minmax(0,1fr) 112px} @media(max-height:600px){.how-works .setup-steps li{grid-template-rows:26px minmax(0,1fr) 96px}} .how-works h2{transform:translateY(-32px)} .how-works-action{transform:translateY(32px)} @media(max-height:600px){.how-works h2{transform:translateY(-12px)}.how-works-action{transform:translateY(12px)}} /* Keep the editable length clearly separated from the wall name. */ .sketch-wall-inline{display:grid;grid-template-columns:minmax(48px,1fr) minmax(50px,72px) auto 22px;gap:8px;padding:7px 9px} .sketch-wall-inline label{font-size:12px;text-align:left} #sketchDialog .sketch-wall-inline input{height:32px;min-height:32px;padding:5px 7px;text-align:right;border-radius:7px} #sketchDialog .sketch-wall-inline input:focus-visible{outline:2px solid #b6a17a;outline-offset:1px} #sketchDialog .sketch-wall-inline input::placeholder{font-size:11px;text-align:right} #sketchWalls .sketch-wall-inline button{width:22px;min-width:22px} #sketchWalls .sketch-wall-inline{grid-column:1/-1;grid-template-columns:minmax(70px,1fr) 100px auto 26px;gap:12px} /* Match the base selector's specificity so hover can reveal the close control. */ #editor #roomTabs .room-tab:hover>.room-tab-delete, #editor #roomTabs .room-tab:focus-within>.room-tab-delete{opacity:1;pointer-events:auto} /* Stable wall rows: editing swaps only the value area, never expands the tile. */ #sketchWalls{grid-template-columns:minmax(0,1fr);gap:6px;max-height:230px} #sketchWalls>button{height:40px;min-height:40px;text-align:left;padding:8px 10px;font-size:12px;font-weight:500} #sketchWalls .sketch-wall-inline{grid-column:auto;height:40px;min-height:40px;grid-template-columns:minmax(60px,1fr) 86px auto 22px;gap:8px;padding:4px 10px} #sketchWalls .sketch-wall-inline label{font-size:12px;font-weight:500;line-height:20px} #sketchDialog .sketch-wall-inline input{height:29px;min-height:29px;font-size:12px} .sketch-wall-scroll-wrap{position:relative;margin-top:12px;padding-right:16px} #sketchWalls{margin-top:0;scrollbar-width:none} #sketchWalls::-webkit-scrollbar{display:none} .wall-scroll-track{position:absolute;right:0;top:0;bottom:0;width:9px;background:#eee8dc;border-radius:8px;cursor:pointer;touch-action:none} .wall-scroll-track>span{display:block;position:absolute;top:0;left:1px;width:7px;border-radius:7px;background:#b3a58b;min-height:26px;pointer-events:none} .wall-scroll-track:hover>span{background:#948263} .wall-scroll-track:focus-visible{outline:2px solid #b6a17a;outline-offset:3px} #sketchDialog .sketch-wall-info .wall-count{margin-top:9px;font-size:11px;color:#8a7b64} .how-works h2{transform:translateY(-42px)} .how-works-action{transform:translateY(42px)} @media(max-height:600px){.how-works h2{transform:translateY(-16px)}.how-works-action{transform:translateY(16px)}} .plan-outline-edit{margin:12px 0;padding:12px;border:1px solid #e6ddcd;border-radius:12px;background:#fcfaf5} .plan-outline-edit>#editDetected{width:100%;font-size:12px;min-height:36px} #planEditTools>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} #planEditTools button{font-size:11px;padding:7px 9px;min-height:32px} #planEditTools [aria-pressed=true],#editDetected[aria-pressed=true]{background:#fbf3df;border-color:#d8c39a;color:#7c6b45} #planEditTools p{font-size:11px;line-height:1.5;margin:10px 0} #planCanvas{touch-action:none} #planEditTools>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex-wrap:nowrap} #planEditTools>div button{min-width:0;padding:7px 3px;white-space:nowrap;font-size:10px} .plan-wall-scale{margin-top:28px} .plan-wall-scale h3{margin-bottom:20px} /* Library models need only editable size and finish before placement. */ #addDialog.library-import{width:min(620px,calc(100vw - 40px));padding:34px} #addDialog.library-import>:not(.close):not(.sheet-close-dock):not(#productReview){display:none!important} #addDialog.library-import #productReview>:not(#specReview):not(.import-finishes):not(.dialogbuttons){display:none!important} #addDialog.library-import #specReview>:not(summary):not(.three){display:none!important} #addDialog.library-import #specReview{display:block;border:0;padding:0;margin:0 0 22px} #addDialog.library-import #specReview>summary{pointer-events:none;list-style:none;margin-bottom:18px} #addDialog.library-import #specReview>summary::marker{content:''} #addDialog.library-import #specReview>summary::-webkit-details-marker{display:none} #addDialog.library-import .import-finishes{align-items:start;gap:18px} #addDialog.library-import .finish-color>span,#addDialog.library-import label{font-family:var(--roomwise-text-font);font-size:13px;font-weight:500;line-height:1.5;color:var(--muted)} #addDialog.library-import .dialogbuttons{margin-top:28px} #addDialog.library-import>.sheet-close-dock{display:block!important} #addDialog.library-import .import-finishes>label{margin:0} .plan-wall-scale .plan-scale-help{font-size:12px;line-height:1.6;margin:0 0 18px} #selected>.product-link{margin:12px 0 20px} #selected>.product-link a{display:inline-flex;align-items:center;min-height:34px;font-size:13px;font-weight:500;color:#806f4e} #buyCreditsLink{margin-left:14px;color:#806f4e;font-size:12px;font-weight:500} /* Feet-and-inches inputs keep exact numeric measurements for the model. */ .measurement-input{display:flex;align-items:stretch;position:relative;width:100%;margin-top:7px;min-width:0}.measurement-input>input{width:100%;min-width:0;margin:0!important;padding-right:25px!important}.measurement-arrows{position:absolute;right:4px;top:4px;bottom:4px;display:flex;flex-direction:column;width:20px}.measurement-arrows>button{flex:1;padding:0!important;min-height:0!important;line-height:1;border:0!important;border-radius:3px!important;background:transparent!important;color:#8c806c!important;font-size:12px!important}.measurement-arrows>button:hover{background:#eee7da!important} /* Import review: large selected photo, size and finish, then centered build actions. */ #addDialog:not(.library-import) .reviewhero{grid-template-columns:minmax(200px,.9fr) minmax(0,1.1fr);align-items:start;gap:24px;margin:24px 0} #addDialog:not(.library-import) .reviewhero>img{width:100%;height:300px;max-height:none;padding:16px;background:#faf8f5;border-radius:18px;object-fit:contain} #addDialog:not(.library-import) .reviewhero h3{line-height:1.5;font-size:18px;margin-top:8px} #addDialog .reviewhero #photoChoices{flex-wrap:wrap;overflow:visible;gap:10px}#addDialog .reviewhero #photoChoices img{width:72px;height:76px} #addDialog:not(.library-import) .modelcompare{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:24px} #addDialog:not(.library-import) .product-model-column{display:block;width:min(100%,520px)} #addDialog:not(.library-import) .modelcompare .custombuild{width:min(100%,520px);margin:0 auto;display:flex;flex-direction:column;gap:12px} #addDialog:not(.library-import) .custombuild>button,#addDialog .photo-cleanup-option{width:100%;margin:0!important} #addDialog .custombuild .photo-cleanup-option{padding:16px 20px}#addDialog .custombuild .photo-cleanup-option small{line-height:1.6} #addDialog #sourceTag,#addDialog #photoViewCount,#addDialog .modelcompare>figure,#addDialog #modelPreviewStatus,#addDialog #visualNotes,#addDialog #libraryModelStatus{display:none!important} #addDialog:not(.library-import) .modelpreview canvas{height:320px} #addDialog .dialogbuttons{justify-content:center;margin-top:24px}#addDialog .dialogbuttons #placeProduct{min-width:220px} #addDialog #productReview>details:not(#specReview),#addDialog #downloadModelDetails,#addDialog #refinementNotes,#addDialog #matchPhoto{display:none!important} @media(max-width:600px){#addDialog:not(.library-import) .reviewhero{grid-template-columns:1fr;gap:16px}#addDialog:not(.library-import) .reviewhero>img{height:260px}#addDialog .reviewhero #photoChoices img{width:62px;height:66px}} .piece-specs .three,.roomsettings .three{grid-template-columns:1fr;gap:8px}.piece-specs .three>label,.roomsettings .three>label{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;margin:0}.piece-specs .three .measurement-input,.roomsettings .three .measurement-input{margin:0} #addDialog:has(#productReview:not([hidden])):not(.editing-source):not(.library-import)>.urlrow,#addDialog:has(#productReview:not([hidden])):not(.editing-source):not(.library-import)>.product-image-upload,#addDialog:has(#productReview:not([hidden])):not(.library-import)>.brand-dialog-header{display:none} #changeImportSource{display:block;margin:20px 0 0 auto;padding:7px 10px;min-height:0;font-size:11px;border:0;background:transparent;color:#8c7c60} #addDialog.library-import #changeImportSource{display:none!important} #changeImportSource{margin-right:36px} /* Keep the phone room canvas clear of the recommendations mascot. */ @media (max-width:700px){ #editor #recommendationsBtn{display:none!important} } /* Compact phone workspace; desktop controls retain their existing layout. */ @media(max-width:700px){ #editor{height:100dvh;min-height:0;overflow:hidden} #editor header{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:10px;min-height:68px;height:68px;flex:0 0 68px} #editor header .brand{flex:1 1 auto;min-width:0;gap:3px} #editor header .logo{font-size:clamp(16px,4.5vw,23px);letter-spacing:-.8px;white-space:nowrap} #editor header .brand .project{font-size:8px;white-space:nowrap} #editor header .headright{flex:0 0 auto;flex-wrap:nowrap;gap:5px;margin-left:auto} #editor header #uploadBtn,#editor header #importProject{font-size:clamp(8px,2.35vw,11px);padding:7px 6px;min-height:44px;white-space:nowrap;border-radius:9px} #editor #export,#editor #snapshot{display:none!important} #editor main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} #editor .workspace{flex:0 0 51dvh;height:51dvh;min-height:280px;padding:10px 12px 0;overflow:hidden} #editor .roomnav{margin-bottom:8px} #editor .roomnav>span{font-size:8px;margin-bottom:5px} #editor #roomTabs{gap:5px;flex-wrap:nowrap;overflow-x:auto} #editor #roomTabs .room-tab{flex:0 0 auto} #editor #roomTabs button{font-size:11px;min-height:32px;padding:7px 10px} #editor #roomTabs .room-tab-delete{padding:3px 6px;min-height:28px;font-size:15px} #editor .toolbar{gap:8px;flex-shrink:0} #editor .switch button,#editor .viewactions button{font-size:10px;min-height:32px;padding:7px 9px} #editor .floor-picker{font-size:10px;gap:7px;margin:7px 0 0;flex-shrink:0} #editor .floor-picker .mac-select{min-width:130px;max-width:155px} #editor .floor-picker .mac-select-button{font-size:10px;min-height:32px;padding:5px 27px 5px 7px!important} #editor .floor-picker .flooring-swatch{width:20px;height:20px} #editor .roomlabel{font-size:10px;top:9px} #editor .roomlabel #roomLabel{font-size:10px} #editor .instruction{display:none} #editor .scenecontrols{bottom:10px} #editor .library{flex:1 1 0;min-height:160px;max-height:none;height:auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 24px;border-top:1px solid var(--line)} #editor .library>.muted{margin-bottom:8px} #editor .library .add{margin:2px 0 12px} #editor .details{flex:1 1 0;min-height:180px;max-height:none;overflow-y:auto} #editor.has-selection .library{display:none} #editor footer{flex:0 0 28px;min-height:28px;padding:7px 12px;font-size:9px} } @media(max-width:700px) and (max-height:550px){#editor main{overflow-y:auto}#editor .workspace{height:65dvh;min-height:260px;flex-basis:65dvh}#editor .library{flex:none;min-height:260px}} .character-color{display:block;margin-top:7px} .character-color .color-popover{border:0} .character-color summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 28px 7px 9px;border:1px solid #dcd7d6;border-radius:9px;background:linear-gradient(#fffefd,#f5f2f1);box-shadow:0 1px 2px #30232b08;position:relative} .character-color summary:after{content:'⌃\a⌄';white-space:pre;position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;line-height:7px;color:#96868f} .character-color .color-popover[open] summary{border-color:#dbb77b;box-shadow:0 0 0 3px #e7c48e26} .character-color .color-popover-content{width:220px;max-height:calc(100dvh - 24px);overflow:auto;z-index:100;background:#fffdfcf5;backdrop-filter:blur(24px);border:1px solid #e7dfe3;border-radius:14px;box-shadow:0 12px 36px #45313e22} .character-color [id$="finishColorSquare"]{position:relative;height:115px;width:100%;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair;margin:12px 0 15px} .character-color [id$="finishHue"]{appearance:none;height:9px;border-radius:8px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);padding:0} .character-color .hex-label input{font-size:12px;min-height:34px;padding:8px 10px} .library-loading{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid var(--line);border-radius:20px;background:#fbfaf7;color:#817568;margin:20px 0;font-size:13px} .library-loading strong{font-size:18px;color:#4d4437} .loading-spinner{width:38px;height:38px;border:3px solid #e9dfcf;border-top-color:#c48a2d;border-radius:50%;animation:library-spin .85s linear infinite} .library-page:has(.grid .card) .library-loading:not([hidden]){position:fixed;inset:0;z-index:100;background:#fcfbf8ef;backdrop-filter:blur(8px);margin:0;border:0;border-radius:0} .library-price-tools{display:flex;align-items:center;gap:16px;margin:8px 0 20px}.library-price-tools p{font-size:11px;line-height:1.5;margin:0;max-width:690px}.library-price-tools button{flex-shrink:0;font-size:12px}.library-price-checked{display:block;font-size:10px!important;line-height:1.4;margin:4px 3px 10px!important} @keyframes library-spin{to{transform:rotate(360deg)}} @media(max-width:600px){.library-price-tools{align-items:flex-start;flex-direction:column;gap:10px}} @media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;border-style:dotted}} .library-loading[hidden]{display:none!important}