@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;450;500;550;600;650;700;800&display=swap');
:root{font-family:Manrope,Arial,sans-serif;color:#30372e;background:#e7e9e3;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,label.upload:focus-within{outline:2px solid #607450;outline-offset:4px}button{color:inherit}#viewport{position:absolute;inset:0}canvas{display:block;outline:none;touch-action:none}.brand{position:absolute;top:34px;left:40px;pointer-events:none}.brand-name{font-size:33px;letter-spacing:7px;line-height:1;font-weight:800}.brand-name span{font-size:10px;vertical-align:top;letter-spacing:0;margin-left:3px}.brand-sub{font-size:8px;letter-spacing:2.6px;margin-top:12px;font-weight:650}.project{position:absolute;top:145px;left:40px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:650;color:#7b8173}h1{font-size:36px;line-height:1.18;font-weight:450;letter-spacing:-1.5px;margin:18px 0}p{margin:0}.project p{font-size:11px;color:#838977}.top-status{position:absolute;left:40px;bottom:100px;display:flex;gap:8px;align-items:center;font-size:10px;color:#777e70}.top-status i{height:5px;width:5px;border-radius:100%;background:#849275}.panel{position:absolute;right:24px;top:24px;bottom:75px;width:305px;background:rgba(250,251,247,.93);border:1px solid #ffffffb0;border-radius:6px;padding:24px;box-shadow:0 18px 60px #46513e0d;overflow-y:auto;scrollbar-width:thin;backdrop-filter:blur(15px)}.panel-heading{display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:none;font-size:9px;color:#929587;padding:0}h2{font-size:28px;letter-spacing:-1.1px;font-weight:500;margin:20px 0 6px}.sub{font-size:10px;color:#8c9186}.section{padding-top:21px;margin-top:18px;border-top:1px solid #e2e5dc}.label{display:flex;gap:12px;font-size:9px;color:#9ca28e;align-items:center}.label>span{font-size:10px;color:#4c5547;font-weight:650}.label b{margin-left:auto;color:#8c9382;font-size:8px;font-weight:400}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}.zones button{font-size:10px;line-height:1.5;background:#eff1e9;border:1px solid transparent;border-radius:3px;padding:10px 5px;color:#808776}.zones button.active{background:#e1e6d8;border-color:#95a385;color:#47543c}.swatches{display:flex;justify-content:space-between;margin:16px 0}.swatch{width:29px;height:29px;border-radius:50%;border:3px solid #fafbf7;outline:1px solid transparent}.swatch.active{outline-color:#747e69}.swatch:hover{transform:translateY(-2px)}.custom-color{display:flex;align-items:center;gap:9px;font-size:9px;color:#88907d}input[type=color]{width:23px;height:23px;padding:0;border:0;border-radius:3px;background:none;margin-left:auto;cursor:pointer}code{font-size:9px;width:58px}.texture-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.texture-choices button{border:1px solid #e0e4d8;background:transparent;border-radius:4px;padding:4px 4px 7px;font-size:9px;color:#7d8575}.texture-choices button.active{border-color:#97a58a;background:#edf0e7;color:#44533c}.texture-thumb{display:block;height:32px;border-radius:2px;margin-bottom:6px;background-color:#aaa28b;background-image:linear-gradient(#ffffff42 1px,transparent 1px),linear-gradient(90deg,#ffffff42 1px,transparent 1px);background-size:100% 8px,22px 16px}.texture-thumb.rustic{background-color:#9a8c73;background-image:url('assets/brick-albedo.png');background-size:180px;filter:contrast(1.4) brightness(.7);opacity:.8}.texture-thumb.linear{background-color:#978c79;background-size:100% 5px,37px 10px}.range-label{display:flex;justify-content:space-between;margin-top:16px;font-size:9px;color:#8d9584}input[type=range]{appearance:none;width:100%;height:2px;background:#dbe1d1;accent-color:#6a7b58;margin:15px 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#748366;border:2px solid white;outline:1px solid #748366;border-radius:50%;cursor:pointer}.upload{display:block;text-align:center;border:1px dashed #cbd2c2;border-radius:3px;padding:9px;font-size:9px;color:#78836d;cursor:pointer}.upload input{display:none}.micro{font-size:8px;color:#a1a797;text-align:center;margin-top:7px}.lighting{padding-top:17px;margin-top:17px}.segmented{display:flex;margin-top:13px;gap:3px;background:#edf0e7;border-radius:3px;padding:3px}.segmented button{flex:1;font-size:9px;border:0;background:none;padding:8px 4px;border-radius:2px;color:#8b9381;white-space:nowrap}.segmented button.active{background:#fff;color:#58664a;box-shadow:0 1px 3px #3331}.primary,.secondary{display:flex;justify-content:space-between;align-items:center;width:100%;border-radius:3px;font-size:10px;padding:13px 14px}.primary{margin-top:23px;background:#566847;color:white;border:1px solid #566847}.primary span{font-size:9px;color:#c3ceb8}.primary:hover{background:#435638}.secondary{margin-top:8px;background:transparent;border:1px solid #d6ddcb;color:#7d8870}.views{position:absolute;bottom:58px;left:calc((100% - 330px)/2);transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#fafbf7ed;border:1px solid #fff;border-radius:5px;box-shadow:0 8px 35px #34442b0a;white-space:nowrap}.views button{font-size:10px;border:0;padding:10px 13px;background:none;border-radius:3px;color:#8c9482}.views button.active{background:#e3e9da;color:#546745}.views span{height:14px;width:1px;background:#dce2d2;margin:0 4px}footer{position:absolute;left:40px;right:25px;bottom:20px;display:flex;justify-content:space-between;gap:20px;font-size:8px;color:#959c8c;pointer-events:none}#loading{position:fixed;inset:0;background:#eef0e9;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .65s}#loading.hidden{opacity:0;pointer-events:none}.loader-mark{font-size:70px;font-weight:700;color:#5c6d4f}#loading>span{font-size:11px;letter-spacing:3px;color:#7d8872}.progress{height:2px;width:160px;background:#dce2d4}.progress i{display:block;width:5%;height:2px;background:#6f805e;transition:width .2s}dialog{border:0;border-radius:6px;padding:15px;background:#f7f8f3;max-height:92vh;max-width:90vw;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#26302599;backdrop-filter:blur(8px)}dialog img{max-height:78vh;max-width:85vw;object-fit:contain;display:block}dialog p{font-size:10px;padding:14px 0 2px;color:#6b765f}dialog button{position:absolute;right:22px;top:22px;border:0;background:#fff;border-radius:50%;width:32px;height:32px;font-size:23px}#toast{position:absolute;bottom:117px;left:calc((100% - 330px)/2);transform:translateX(-50%);padding:12px 20px;background:#3f513c;color:white;font-size:11px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .25s}#toast.visible{opacity:1}button:disabled{opacity:.5;cursor:wait}@media(min-height:900px){.panel{top:40px;bottom:auto;padding:28px;width:320px;right:32px}.section{margin-top:22px;padding-top:23px}.project{top:165px}}@media(max-width:1100px){.project{top:130px;left:24px}h1{font-size:26px}.brand{left:24px}.panel{width:275px;padding:19px;right:16px}.views{left:calc((100% - 290px)/2)}.views button{padding:9px}.project .eyebrow{font-size:7px}footer{left:24px;font-size:7px}}@media(max-width:760px){.brand{left:20px;top:22px}.brand-name{font-size:25px}.brand-sub{font-size:6px}.project{display:none}.panel{top:auto;bottom:66px;right:12px;width:205px;max-height:43vh;padding:15px;background:#fafbf7f5}.panel h2{font-size:21px;margin-top:12px}.panel-heading .eyebrow{font-size:7px}.panel .sub{font-size:8px}.section{padding-top:12px;margin-top:12px}.swatch{height:23px;width:23px}.views{bottom:15px;left:50%;max-width:96vw;gap:0}.views button{font-size:8px;padding:9px 8px}footer{display:none}.top-status{left:20px;bottom:75px;font-size:8px}.label{gap:5px}.label b{display:none}#toast{left:50%;bottom:70px;max-width:90vw}.primary,.secondary{font-size:9px;padding:11px 7px}}
@media (min-width:761px) and (max-height:950px){.section{margin-top:14px;padding-top:16px}.panel h2{margin-top:16px}.primary{margin-top:17px}.lighting{padding-top:14px;margin-top:14px}}
.project{top:auto;bottom:150px}.project h1{font-size:26px;letter-spacing:-.8px;margin:12px 0}.project p{font-size:9px}.project .eyebrow{font-size:8px}.brand{opacity:.85}
#panel-toggle{display:none}@media(max-width:760px){#panel-toggle{display:block;position:absolute;right:20px;top:24px;padding:10px 13px;border:1px solid #ffffffaa;background:#fafbf7ed;border-radius:4px;color:#56664a;font-size:10px;z-index:4}.panel{display:none;bottom:70px;top:80px;max-height:calc(100vh - 160px);width:265px}.panel-open .panel{display:block}.top-status{bottom:75px}.views{bottom:17px}}

[hidden]{display:none!important}.model-picker{position:absolute;top:36px;left:260px;display:flex;gap:4px;padding:5px;background:#fafbf7eb;border:1px solid #fff9;border-radius:5px;backdrop-filter:blur(12px)}.model-picker button{border:0;background:none;border-radius:3px;padding:11px 16px;font-size:11px;color:#76836d}.model-picker button.active{background:#e1e7d7;color:#465b38}.model-picker small{font-size:8px;opacity:.65;margin-right:7px}@media(max-width:1100px){.model-picker{left:210px;top:32px}.model-picker button{padding:10px;font-size:10px}}@media(max-width:760px){.model-picker{top:84px;left:20px}.model-picker button{font-size:10px;padding:10px 14px}.panel{top:138px;max-height:calc(100vh - 215px)}}

/* The studio signature is part of the material panel, with a fixed footer. */
.panel{--panel-inset:24px;display:flex;flex-direction:column;overflow:hidden;padding:0;bottom:64px;max-height:calc(100dvh - 88px)}
.panel-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9cfc0 transparent;padding:var(--panel-inset);flex:1 1 auto}
.studio-credit{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;margin:0 var(--panel-inset);padding:15px 0 17px;border-top:1px solid #dce2d3;color:#66705e;text-decoration:none;background:none}
.studio-credit-caption{grid-column:1;grid-row:1;font-size:9px;letter-spacing:.055em;line-height:1.3}
.studio-credit-brand{display:flex;grid-column:1 / -1;align-items:center;justify-content:space-between;gap:18px}
.developer-logo{display:block;width:156px;max-width:calc(100% - 42px);height:auto;aspect-ratio:12505.52 / 2582.74}
.studio-credit-arrow{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d8e0d1;border-radius:50%;font-size:16px;color:#548472;transition:color .2s,border-color .2s,transform .2s}
.studio-credit-domain{grid-column:2;grid-row:1;text-align:right;align-self:center;font-size:9px;line-height:1.2;color:#6e7965}
.studio-credit:hover .studio-credit-arrow{color:#0c988b;border-color:#14b8a6;transform:translate(1px,-1px)}
.studio-credit:hover .studio-credit-domain{color:#098d81}
.studio-credit:focus-visible,.studio-credit-mobile:focus-visible{outline:2px solid #14b8a6;outline-offset:5px;border-radius:2px}
.studio-credit-mobile{display:none}
@media(min-height:900px) and (min-width:761px){.panel{--panel-inset:28px;bottom:auto;max-height:calc(100dvh - 104px)}}
@media(max-width:1100px) and (min-width:761px){.panel{--panel-inset:19px}}
@media(max-width:760px){.panel{display:none;--panel-inset:18px;top:138px;bottom:108px;max-height:calc(100dvh - 246px);width:min(290px,calc(100vw - 24px))}.panel-open .panel{display:flex}.studio-credit{padding:13px 0 14px;gap:8px}.studio-credit .developer-logo{width:145px}.studio-credit-mobile{display:flex;position:absolute;bottom:9px;left:50%;transform:translateX(-50%);align-items:center;gap:9px;min-height:36px;text-decoration:none;color:#354b3d;white-space:nowrap}.studio-credit-mobile>span{font-size:9px}.studio-credit-mobile .developer-logo{width:112px;max-width:none}.studio-credit-mobile>span:last-child{color:#0b746a;font-size:13px}.panel-open .studio-credit-mobile{visibility:hidden}.views{bottom:55px}.top-status{bottom:110px}#toast{bottom:110px}}
@media(prefers-reduced-motion:reduce){.studio-credit-arrow{transition:none}}