@font-face{font-family:Pixelify;src:url('./fonts/PixelifySans.ttf') format('truetype');font-display:swap;font-weight:400 700}
@font-face{font-family:PressStart;src:url('./fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ink:#452615;--cream:#ffedcd;--green:#377737;--rust:#ad5727;--outline:#633415;font-family:Pixelify,monospace;color:var(--ink);background:#60351e;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input[type=color],summary{cursor:pointer}button{color:inherit}button:disabled{cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ffe283;outline-offset:4px}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.scene{position:relative;width:100%;max-width:1800px;aspect-ratio:3/2;margin:auto;background:url('./forest-room.png') center/100% 100% no-repeat;container-type:inline-size;isolation:isolate}
.landscape-canvas{position:absolute;inset:0;pointer-events:none;z-index:0}.landscape-canvas canvas{display:block;width:100%;height:100%}
.site-header{position:absolute;left:23.7%;top:1.5%;width:64.2%;height:7.2%;display:flex;align-items:center;gap:1.6cqw;z-index:4;color:#fff0d1}.brand{display:flex;align-items:center;gap:1.2cqw;text-decoration:none;color:inherit;white-space:nowrap;flex:1;min-width:0}.brand img{width:20cqw;height:auto;image-rendering:pixelated;object-fit:contain}.brand span{font-family:PressStart,monospace;font-size:1.09cqw;line-height:1.7;letter-spacing:-.03em}.nav-help{background:none;border:0;border-left:2px solid #b8753c;border-right:2px solid #b8753c;color:inherit;font-weight:600;font-size:1.65cqw;padding:.7cqw 1.2cqw;white-space:nowrap}.language-control{width:4.8cqw;flex:none}.language-control select{width:100%;border:0;background:#663716;color:#fff0d1;font-size:1.5cqw;font-weight:600;padding:.4cqw .1cqw;appearance:auto}.language-control option{font-size:16px}.headline{position:absolute;left:28.5%;top:16.9%;width:44.2%;margin:0;text-align:center;font-family:PressStart,monospace;font-size:1.53cqw;line-height:1.6;font-weight:400;letter-spacing:-.055em;color:#45230f;z-index:2}.mascot-canvas{position:absolute;left:0;top:26.3%;width:25%;height:44.8%;pointer-events:none;z-index:3}.mascot-canvas canvas{width:100%;height:100%;display:block}.mascot-platform{display:none}
.editor-frame{position:absolute;left:23.6%;top:26.55%;width:57.8%;height:53.8%;z-index:2}.stage{position:absolute;left:7.2%;top:3.65%;width:82.4%;height:65.7%;overflow:hidden;background:#fbf0d8;touch-action:pan-y;isolation:isolate}.stage.is-drop-target{outline:5px dashed #cf7221;outline-offset:-10px}.image-viewport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;max-width:100%;max-height:100%;background-color:#fff;background-image:conic-gradient(#d7d7d7 25%,#f8f8f8 0 50%,#d7d7d7 0 75%,#f8f8f8 0);background-size:28px 28px}#sourceImage,#resultCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}#resultCanvas{z-index:1}#sourceImage{z-index:0}.preview-label{position:absolute;top:4%;z-index:5;color:#fff;font-size:1.32cqw;padding:.38cqw 1.3cqw;pointer-events:none;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);text-shadow:1px 1px #0005}.original-label{left:2.2%;background:#173f58c9}.cutout-label{right:2.2%;background:#4b4b4bc9}.comparison-divider{position:absolute;z-index:4;top:0;bottom:0;width:3px;padding:0;border:0;background:#fffbed;box-shadow:1px 0 6px #392e2866;cursor:ew-resize;touch-action:none;left:50%;overflow:visible}.comparison-divider span{position:absolute;left:50%;top:50%;width:3.6cqw;height:3.6cqw;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff5df;box-shadow:0 2px 5px #35260e55;color:#76451e;font-size:1.9cqw;white-space:nowrap;line-height:1}.demo-badge{position:absolute;right:2.5%;bottom:3%;padding:3px 8px;z-index:6;font-size:1cqw;background:#fff6dddc;color:#674a30}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:20px;font-size:1.4cqw}.empty-state strong{font-size:1.8cqw}.empty-leaf{font-size:3cqw;color:#739441}.busy-overlay{position:absolute;inset:0;z-index:8;background:#32210a91;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff8dc;font-size:1.8cqw;backdrop-filter:blur(2px)}.pixel-spinner{display:inline-block;color:#ffe488;font-size:1.6em;animation:twinkle 1.2s steps(4) infinite}@keyframes twinkle{50%{transform:scale(.8);color:#aee781}}.brush-cursor{position:absolute;z-index:7;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #34271a;pointer-events:none;transform:translate(-50%,-50%)}
.toolbar{position:absolute;left:2.4%;top:81.5%;width:96%;height:18.8%;display:grid;grid-template-columns:1.28fr 1fr 1fr;align-items:center;gap:1.05cqw;padding:0 .1cqw 1.25cqw}.background-options{display:flex;align-items:center;gap:.8cqw;min-width:0}.background-label{font-size:1.15cqw;font-weight:600}.swatch-group{display:flex;position:relative;gap:.65cqw;align-items:center}.swatch-option{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;background:none;border:0;font-weight:600;font-size:.84cqw}.swatch{display:block;width:3cqw;height:3cqw;border:2px solid #9f7a57;border-radius:4px;box-shadow:1px 1px 0 #fff inset}.checkerboard{background:conic-gradient(#c4c4c4 25%,#fff 0 50%,#c4c4c4 0 75%,#fff 0) 0/10px 10px}.white-swatch{background:#fff}.rainbow-swatch{background:linear-gradient(100deg,#fcf76c,#8ced73,#85d3ec,#b69ae5,#f28edf)}.swatch-option.is-active .swatch{border-color:#543117;outline:2px solid #a78046;outline-offset:1px}.custom-color{position:absolute;right:0;top:0;width:3cqw;height:3cqw}.custom-color input{width:100%;height:100%;padding:0;border:0;opacity:0}
.pixel-button{position:relative;display:flex;align-items:center;justify-content:center;gap:.8cqw;min-width:0;border:3px solid #87440e;border-bottom:5px solid #65320d;border-radius:6px;background:#ff790d;color:#fff7e7;text-shadow:1px 2px #97400160;font-weight:600;font-size:1.75cqw;line-height:1.1;box-shadow:inset 0 3px 0 #ffb644,inset 3px 0 0 #ff9423,inset -3px 0 0 #d65009,0 2px 0 #dda665;padding:1.1cqw .8cqw;white-space:nowrap;transition:filter .15s}.pixel-button svg{height:1.95cqw;width:1.95cqw;fill:currentColor;flex:none}.pixel-button:hover:enabled{filter:brightness(1.08)}.pixel-button:active:enabled{transform:translateY(2px);box-shadow:inset 0 2px 3px #7f3906}.download-button{border-color:#365629;background:#367f36;box-shadow:inset 0 3px 0 #71a850,inset 3px 0 0 #5c9342,inset -3px 0 0 #28632e,0 2px 0 #b1a368;font-size:1.44cqw}.download-button:disabled{filter:saturate(.75);color:#ffffffc9}.status-row{position:absolute;bottom:-.2cqw;left:4%;right:4%;text-align:center;font-size:1.04cqw;line-height:1.1;min-height:1.2em}.scene-footer{position:absolute;left:36%;top:93.25%;width:29%;text-align:center;font-size:1.3cqw;font-weight:600;color:#fff0ce;z-index:2;margin:0}.scene-footer>span:first-child{font-size:1.6em;vertical-align:middle;padding-right:8px}
.studio-drawer{max-width:1120px;margin:0 auto 40px;padding:18px 24px 20px;color:var(--cream);background:#55311e;box-shadow:inset 0 3px #8f572d;border:2px solid #392316;font-size:17px}.view-options{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.view-options button,.editor-segment button,.editor-row button,.editor-group button{padding:8px 14px;border:2px solid #966a40;background:#f1dbb3;box-shadow:0 2px #21170c;color:#563418}.view-options button.is-active,.editor-segment button.is-active,.editor-group button.is-active{background:#53783b;color:#fff3d4;border-color:#8ba05c}.view-options #btnReset{margin-left:auto}details{margin-top:16px;border-top:1px solid #a777434d;padding-top:12px}summary{width:fit-content;padding:5px 0;color:#f5d499}#editorControls{padding-top:18px}.editor-group{border:1px solid #98724a;padding:16px;margin:10px 0;background:#f6e7c9;color:var(--ink)}.editor-group h3{margin:0 0 12px;font-size:20px}.editor-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}.editor-field{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.editor-field input[type=range]{accent-color:#517a38;max-width:220px}.editor-field input[type=number]{width:75px;padding:5px}.editor-segment{display:flex;gap:5px;flex-wrap:wrap}.editor-group p{margin:8px 0;color:#765439}.error-message{padding:12px;background:#ffe8cd;border:2px solid #b14329;color:#822c18}.editor-group small{font-size:14px}.editor-group input,.editor-group select{accent-color:#527539}.editor-group select{padding:6px;background:#fff9e7;border:1px solid #ac8a59}
dialog{max-width:min(90vw,540px);padding:36px;background:#fff0d2;color:var(--ink);border:7px ridge #a67540;box-shadow:0 0 0 3px #3c2619;font-size:20px}dialog::backdrop{background:#17150dcc;backdrop-filter:blur(3px)}dialog h2{font-size:25px;line-height:1.5}dialog p{line-height:1.7}dialog .pixel-button{font-size:18px;padding:12px 24px}dialog .dialog-close{position:absolute;right:10px;top:5px;font-size:30px;background:none;border:0}
@media(min-width:1800px){body{background:#3d281a}.studio-drawer{margin-top:0}}
@media(max-width:760px){
.scene{width:100%;aspect-ratio:auto;min-height:790px;background-size:auto 1250px;background-position:left top;padding:0 16px 45px;display:flex;flex-direction:column;align-items:center;isolation:isolate;overflow:hidden;container-type:normal}.landscape-canvas{width:1875px;height:1250px;inset:0;opacity:.9}.site-header{position:relative;top:auto;left:auto;width:calc(100% + 32px);height:84px;padding:10px 16px;background:#643a22f2;border-bottom:5px ridge #a67544;gap:10px}.brand{display:block;flex:1}.brand img{width:160px;height:51px;display:block;object-position:left}.brand span{display:block;font-size:7px;line-height:1;margin-top:0;white-space:nowrap}.nav-help{font-size:14px;padding:8px;width:64px;white-space:normal}.language-control{width:49px}.language-control select{font-size:16px;padding:8px 0}.headline{position:relative;top:auto;left:auto;order:2;width:100%;font-size:13px;line-height:1.8;letter-spacing:-.045em;margin:12px 0 14px;padding:12px 8px;background:#ffefcbdc;border:3px solid #876233;box-shadow:0 3px #352713}.mascot-canvas{position:relative;left:auto;top:auto;width:220px;height:293px;z-index:2;align-self:center;margin:-20px 0 -9px;order:1}.mascot-platform{display:block;position:absolute;top:328px;left:50%;width:260px;height:60px;transform:translateX(-50%);background:linear-gradient(#a9af5b 0 5px,#617139 5px 12px,#775027 12px 18px,#a56c35 18px 35px,#664324 35px 45px,#332719 45px);clip-path:polygon(8% 0,92% 0,100% 15%,100% 70%,92% 100%,8% 100%,0 70%,0 15%);border:4px solid #46361c;z-index:1}.editor-frame{position:relative;inset:auto;width:100%;height:auto;order:3;background:#fff0d4;border:7px ridge #aa7944;box-shadow:0 0 0 3px #48301e,0 7px 0 #30271daa;padding:10px 10px 14px}.stage{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.23;border:2px solid #c5a373}.preview-label{font-size:15px;padding:4px 11px;top:8px}.demo-badge{font-size:12px}.comparison-divider span{width:37px;height:37px;font-size:23px}.empty-state{font-size:16px}.empty-state strong{font-size:20px}.empty-leaf{font-size:34px}.busy-overlay{font-size:18px}.toolbar{position:relative;inset:auto;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0 23px}.background-options{grid-column:1/-1;justify-content:center;gap:16px}.background-label{font-size:16px}.swatch-group{gap:14px}.swatch-option{font-size:12px;gap:4px}.swatch{height:34px;width:34px}.custom-color{width:34px;height:34px}.pixel-button{font-size:18px;gap:7px;padding:12px 6px;border-width:2px;border-bottom-width:4px;white-space:normal;min-height:58px}.pixel-button svg{width:22px;height:22px}.download-button{font-size:16px}.status-row{font-size:13px;bottom:0;left:0;right:0}.scene-footer{position:relative;inset:auto;order:4;width:auto;font-size:15px;margin:25px 0 0;padding:7px 15px;background:#603920e6;box-shadow:0 2px #a4723a}.scene-footer>span:first-child{font-size:21px}.studio-drawer{margin:0 12px 24px;font-size:16px;padding:16px 12px;box-shadow:none}.view-options{gap:5px}.view-options button{padding:8px 9px;font-size:14px}.view-options #btnReset{margin-left:0}.editor-group{padding:12px}.editor-row{gap:10px}.editor-field{max-width:100%}.editor-field input[type=range]{max-width:160px}dialog{font-size:17px;padding:24px}dialog h2{font-size:20px}}
@media(max-width:360px){.site-header{gap:6px}.brand img{width:132px}.brand span{font-size:6px}.nav-help{font-size:13px;width:55px}.scene{padding-left:10px;padding-right:10px}.headline{font-size:11px}.pixel-button{font-size:16px}.download-button{font-size:14px}.background-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.image-viewport{background-image:none}.image-viewport.checker{background-image:conic-gradient(#d7d7d7 25%,#f8f8f8 0 50%,#d7d7d7 0 75%,#f8f8f8 0)}#resultCanvas{touch-action:none}.side-sign{position:absolute;z-index:1;text-align:center;color:#52321b;font-size:1.12cqw;line-height:1.15;font-weight:600;pointer-events:none}.side-sign span{display:block;font-size:2cqw;padding-top:.6cqw}.sign-left{left:7.1%;top:14.3%;width:6.5%;transform:rotate(-3deg)}.sign-right{left:91.25%;top:15.9%;width:5.5%;font-size:1.05cqw;transform:rotate(3deg)}.sign-small{left:94.3%;top:52.9%;width:4.3%;font-size:.95cqw;transform:rotate(6deg)}.editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.editor-checks{display:flex;flex-wrap:wrap;gap:14px;padding-top:16px}.editor-checkbox{display:flex;gap:5px;align-items:center}.editor-note{line-height:1.5}.stage.is-picking{cursor:crosshair}.stage.is-brushing{cursor:none}.editor-frame:has(.stage[aria-busy=true]) .upload-button{filter:saturate(.9)}
@media(max-width:760px){.side-sign{display:none}.brand img{width:160px}.brand span{font-size:7px}.editor-fields{grid-template-columns:1fr}}
@media(max-width:360px){.brand img{width:132px}.brand span{font-size:6px}}
.stage.is-demo .image-viewport{width:100%!important;height:100%!important}.stage.is-demo #sourceImage,.stage.is-demo #resultCanvas{object-fit:cover}
@media(max-width:760px){.mascot-platform{top:321px;width:280px;height:143px;background:url('./forest-room.png') 0 -503px/1172px 782px no-repeat;border:0;clip-path:polygon(0 7%,73% 0,100% 17%,100% 54%,93% 57%,93% 74%,67% 76%,53% 100%,31% 83%,0 73%)}.mascot-canvas{margin-bottom:65px}.headline{background:#fff0d2}.stage.is-demo .image-viewport{width:100%!important;height:100%!important}}
@media(min-width:761px){.nav-help{max-width:14cqw;white-space:normal;font-size:1.45cqw}.site-header .brand img{flex-shrink:0}.site-header .brand span{font-size:1.02cqw}}
@media(min-width:761px){.headline{top:15.6%;height:7%;display:flex;align-items:center;justify-content:center;line-height:1.5}}

/* Compare can be dragged repeatedly from any point, including either endpoint. */
.image-viewport.is-comparing{touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.comparison-divider span{pointer-events:none}
.scene-footer{text-decoration:none;line-height:1.25}
.scene-footer:hover{color:#ffe094}
#advancedPanel{scroll-margin-top:20px}

/* Keep the illustrated room and comparison coordinates fixed across scripts. */
.side-sign .sign-copy{font-size:inherit;line-height:inherit;padding:0;white-space:pre-line}
.site-header{direction:ltr}.brand{position:relative;z-index:1}.brand:focus-visible{outline:3px solid #ffe49e;outline-offset:4px}
html[dir=rtl] .nav-help,html[dir=rtl] .brand span,html[dir=rtl] .language-control{direction:rtl}
html[dir=rtl] .image-viewport{direction:ltr}
html[dir=rtl] .view-options #btnReset{margin-left:0;margin-inline-start:auto}
html:lang(ar),html:lang(zh){font-family:Tahoma,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
html:lang(ar) :is(.brand span,.headline),html:lang(zh) :is(.brand span,.headline){font-family:inherit;letter-spacing:normal;font-weight:700}
html:lang(ar) .headline{line-height:1.8}
html:lang(ar) .pixel-button,html:lang(zh) .pixel-button{line-height:1.5}
html:lang(ar) .side-sign,html:lang(zh) .side-sign{line-height:1.5}
html:lang(ar) .language-control,html:lang(zh) .language-control{width:5.8cqw}
html:lang(ar) .language-control option,html:lang(zh) .language-control option{font-family:Tahoma,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
@media(max-width:760px){html:lang(ar) .language-control,html:lang(zh) .language-control{width:58px}.brand span{white-space:normal;line-height:1.4}html:lang(ar) .brand span,html:lang(zh) .brand span{font-size:10px}html:lang(ar) .brand span{text-align:left}html:lang(ar) .headline,html:lang(zh) .headline{font-size:17px}.background-options{flex-wrap:wrap}.background-options .swatch-group{min-width:0}}
@media(min-width:761px){html:lang(fr) .upload-button{font-size:1.3cqw}html:lang(fr) .brand span,html:lang(pl) .brand span{white-space:normal}}
@media(max-width:760px){html:lang(ar) .nav-help{width:80px;font-size:13px;flex:none}html:lang(fr) .nav-help{width:68px;flex:none}html:lang(ar) .site-header{gap:6px}html:lang(ar) .brand img{max-width:100%;height:auto}}
@media(max-width:360px){html:lang(ar) .language-control{width:52px}html:lang(ar) .nav-help{width:72px;font-size:12px}html:lang(fr) .nav-help{width:62px;font-size:12px}}