:root{--ink:#33362e;--muted:#94988b;--line:#e1e3d9;--paper:#f7f7f1;--green:#6f785a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #83926d;outline-offset:4px}[hidden]{display:none!important}.site-header{height:83px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:650;letter-spacing:-.4px}.brand-symbol{width:33px;height:33px;border:1px solid #3d4434;display:flex;align-items:center;justify-content:center;font:18px/1 Georgia,serif;letter-spacing:-4px;padding-right:4px}.brand-symbol span{transform:translateY(4px)}.brand small{display:block;font-size:7px;letter-spacing:2.4px;color:#8b927e;font-weight:500;line-height:1.7}.header-center{font-size:11px;color:#929985;letter-spacing:.6px}.site-header nav{display:flex;gap:26px;align-items:center;font-size:10px}.demo-tag{border:1px solid #d9decf;padding:3px 8px;border-radius:3px;color:#8b957d;font-size:9px}.site-header nav a span{margin-left:12px}main{max-width:1480px;margin:auto;padding:30px 4% 0}.project-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{font-size:8px;letter-spacing:1.5px;color:#8b947d;font-weight:600}h1{font-size:clamp(21px,2.1vw,30px);font-weight:500;letter-spacing:-1px;margin:5px 0 0;line-height:1.5}.project-id{font-size:8px;letter-spacing:1.4px;color:#9ca48f;padding-bottom:5px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid #dfe2d5;overflow:hidden;border-radius:10px;background:#fffefa;box-shadow:0 12px 35px #3e49290a}.viewer{position:relative;min-width:0;background:#efeee8;min-height:624px}.viewer-heading{position:absolute;z-index:2;left:28px;right:28px;top:23px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.room-label{font-size:8px;color:#939785;letter-spacing:1.8px}.viewer-heading h2{font:27px/1.3 Georgia,"Times New Roman",serif;color:#565e48;margin:5px 0;letter-spacing:-.5px;font-weight:400}.render-tag{display:inline-flex;gap:5px;align-items:center;font-size:9px;color:#869275;border:1px solid #cfd5bf;border-radius:20px;padding:3px 8px;background:#f5f6ec9c}.render-tag i{width:4px;height:4px;border-radius:50%;background:#8d9d77}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;max-width:100%;width:100%;height:100%}.scene-compass{position:absolute;bottom:98px;left:28px;width:35px;text-align:center;color:#9da58f;pointer-events:none}.scene-compass>span{font-size:8px;letter-spacing:1px}.scene-compass svg{width:30px;height:30px;display:block;margin:auto}.dimension-label{position:absolute;right:28px;bottom:104px;font-size:11px;color:#7e896e;pointer-events:none}.dimension-label span{display:block;font-size:8px;color:#a1a793;text-align:right}.viewer-bottom{position:absolute;bottom:20px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:12px}.interaction-note{display:flex;gap:8px;align-items:center;font-size:9px;color:#8a927e}.interaction-note svg{width:15px;height:17px;stroke:currentColor;stroke-width:1}.view-buttons{display:flex;gap:2px;background:#f7f8f0b8;border:1px solid #d9decb;padding:4px;border-radius:5px;backdrop-filter:blur(6px)}.view-buttons button{padding:5px 12px;background:none;border:0;color:#929a84;font-size:9px;border-radius:3px}.view-buttons button.active{background:#fffef7;color:#526341;box-shadow:0 1px 3px #4e5c3310}.inspector{border-left:1px solid #dfe2d5;padding:25px 23px 0;background:#fffefa}.inspector-title h2{font-size:15px;letter-spacing:-.5px;margin:7px 0 3px;font-weight:500}.inspector-title p{font-size:10px;color:#969d88;margin:0 0 23px}.control-section{padding:18px 0;border-top:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:13px}.section-title h3{margin:0;font-size:11px;font-weight:500;letter-spacing:-.3px}.section-title h3 span{font-size:8px;color:#9da78e;margin-right:9px}.control-caption{font-size:7px;letter-spacing:1px;color:#a0a88f}.swatches{display:flex;gap:11px;align-items:center}.swatch{width:32px;height:32px;border-radius:50%;background:var(--swatch);border:1px solid #00000007;position:relative;padding:0;flex:0 0 auto}.swatch:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;transition:border-color .2s}.swatch.active:after{border-color:#8c9875}.swatch.active:before{content:"";position:absolute;inset:12px;border:1px solid #fff;background:#ffffff80;border-radius:50%}.custom-color{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px dashed #c8d0b7;color:#a4ad95;position:relative;cursor:pointer}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.material-meta{display:flex;justify-content:space-between;font-size:9px;color:#8e987f;margin-top:13px}.material-meta span:last-child{font-size:8px;letter-spacing:.4px;color:#a8b097}.layout-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.layout-option{border:1px solid #e1e5d7;border-radius:5px;padding:8px 7px;background:#fbfcf5;text-align:left;color:#919c7d}.layout-option.active{border-color:#9faa8a;background:#f3f5ea}.layout-option svg{width:100%;height:51px;display:block;margin:0 0 6px}.layout-option svg rect{stroke:#9ca78a;fill:#e7ecdb;stroke-width:1}.layout-option.active svg rect{fill:#d4ddc3;stroke:#8b9c73}.layout-option>span{font-size:10px;display:block;color:#758362;margin-left:6px}.layout-option small{font-size:8px;display:block;color:#a1aa94;margin:2px 0 2px 6px}.view-settings{padding:17px 0;border-top:1px solid var(--line)}.zoom-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#818b71}.zoom-label>span{font-size:9px;word-spacing:10px;color:#a2ab92}.zoom-label label{font-size:10px}input[type=range]{width:100%;appearance:none;background:#e7ebdd;height:3px;border:0;display:block;margin:17px 0 19px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#8d9c75;border:2px solid #fff;box-shadow:0 0 0 1px #bbc5aa}.view-actions{display:flex;justify-content:space-between;align-items:center}.toggle{display:flex;align-items:center;gap:7px;font-size:9px;color:#939e80;cursor:pointer}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle-track{width:24px;height:13px;border-radius:9px;background:#e1e6d6;position:relative}.toggle-track:after{content:"";width:9px;height:9px;position:absolute;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-track{background:#8d9d75}.toggle input:checked+.toggle-track:after{transform:translateX(11px)}.toggle input:focus-visible+.toggle-track{outline:2px solid #83926d;outline-offset:3px}#reset{font-size:9px;color:#909c7d;border:0;background:none;padding:0}.inspector-bottom{padding:17px 0 21px;border-top:1px solid var(--line)}.inspector-bottom>span{font-size:8px;color:#afb6a0;display:block;text-align:center}.inspector-bottom a{display:flex;align-items:center;justify-content:space-between;margin-top:13px;border-radius:4px;background:#6d7958;color:#f8f9f1;padding:9px 11px;font-size:10px}.project-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 3px;color:#9aa38a;font-size:8px}.project-footer>span{letter-spacing:1.2px;font-size:7px;white-space:nowrap}#status{font-size:9px;color:#879774;overflow-wrap:anywhere}.scope-note{display:flex;gap:22px;border-top:1px solid #e4e8da;padding:18px 3px 22px;color:#a1a994;align-items:flex-start}.scope-note>span{font-size:7px;letter-spacing:1.1px;white-space:nowrap;padding-top:2px}.scope-note p{margin:0;font-size:9px;line-height:1.9;max-width:790px}footer{max-width:1362px;margin:0 auto;border-top:1px solid var(--line);padding:22px 0 27px;display:flex;gap:20px;color:#a0a991;align-items:center;font-size:8px}footer a{font-size:10px;letter-spacing:1.5px;color:#697759}footer>span:last-child{margin-left:auto;font-size:7px;letter-spacing:1.2px}@media(min-width:1600px){.viewer{min-height:690px}.inspector{padding-top:30px}.control-section{padding:22px 0}.inspector-title p{margin-bottom:28px}}@media(max-width:1100px){.studio{grid-template-columns:minmax(0,1fr) 270px}.inspector{padding:23px 18px 0}.swatches{gap:10px}.swatch{width:29px;height:29px}.custom-color{width:28px;height:28px}.viewer-bottom{flex-direction:column-reverse;align-items:flex-start;gap:10px}.dimension-label{bottom:115px}.scene-compass{bottom:112px}footer{margin:0 4%}.header-center{display:none}}@media(max-width:780px){.site-header{height:72px;padding:0 20px}.brand{font-size:14px;gap:8px}.brand-symbol{width:29px;height:29px;font-size:16px}.brand small{font-size:6px}.site-header nav{gap:14px}.demo-tag{display:none}.site-header nav a{font-size:9px}.site-header nav a span{margin-left:8px}main{padding:23px 16px 0}.project-heading{margin-bottom:17px;display:block}.eyebrow{font-size:7px}h1{font-size:22px;letter-spacing:-.8px;margin-top:5px}.project-id{display:none}.studio{grid-template-columns:1fr;border-radius:8px}.viewer{min-height:470px}.viewer-heading{left:20px;right:20px;top:18px}.viewer-heading h2{font-size:25px}.room-label{font-size:7px}.render-tag{font-size:8px}.viewer-bottom{left:19px;right:19px;bottom:16px;flex-direction:row;align-items:center;gap:8px}.interaction-note{font-size:7px;gap:4px}.interaction-note svg{width:12px;height:15px}.view-buttons{padding:3px}.view-buttons button{padding:4px 8px;font-size:8px}.scene-compass{left:20px;bottom:62px;width:25px}.scene-compass svg{width:23px;height:23px}.dimension-label{right:20px;bottom:66px;font-size:9px}.dimension-label>span{font-size:7px}.inspector{border-left:0;border-top:1px solid #dfe2d5;padding:24px 21px 0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.inspector-title{grid-column:1/-1}.inspector-title p{margin-bottom:18px}.inspector-title h2{font-size:16px}.control-section{padding:18px 0}.control-section:nth-of-type(3){grid-column:1/-1}.layout-options{gap:12px}.layout-option{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:9px}.layout-option svg{grid-row:1/3;width:65px;height:45px;margin:0}.layout-option>span{align-self:end;margin-left:3px;font-size:11px}.layout-option small{align-self:start;margin-left:3px;margin-top:1px}.view-settings,.inspector-bottom{grid-column:1/-1}.inspector-bottom{padding-bottom:23px}.swatches{gap:10px}.swatch{width:28px;height:28px}.swatch.active:before{inset:10px}.custom-color{width:27px;height:27px}.control-caption{display:none}.material-meta{font-size:8px}.section-title h3{font-size:11px}.section-title h3 span{margin-right:7px}.scope-note{display:block;padding:14px 2px 21px}.scope-note>span{display:block;font-size:7px;margin-bottom:5px}.scope-note p{font-size:8px}.project-footer{padding:10px 2px}#status{font-size:8px;max-width:75%}.project-footer>span{font-size:6px;letter-spacing:.7px}footer{margin:0 18px;padding:20px 0;font-size:7px;gap:12px}footer>span:last-child{display:none}footer a{font-size:9px;letter-spacing:1px}}@media(max-width:370px){.inspector{column-gap:18px;padding-left:17px;padding-right:17px}.swatches{gap:8px}.swatch{width:25px;height:25px}.custom-color{width:24px;height:24px}.viewer{min-height:420px}.interaction-note{font-size:6px}.view-buttons button{padding:4px 7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.inspector-title p{font-size:12px}.section-title h3{font-size:12px}.material-meta{font-size:11px}.material-meta span:last-child{font-size:10px}.layout-option>span{font-size:12px}.layout-option small{font-size:10px}.zoom-label label{font-size:12px}.toggle{font-size:11px}#reset{font-size:11px}.inspector-bottom>span{font-size:10px}.inspector-bottom a{font-size:12px}.interaction-note{font-size:11px}.view-buttons button{font-size:11px}#status{font-size:11px}.scope-note p{font-size:11px}
@media(max-width:1100px) and (min-width:781px){.interaction-note{font-size:10px}}@media(max-width:780px){.interaction-note{font-size:9px}.view-buttons button{font-size:10px}.inspector-title p{font-size:12px}.section-title h3{font-size:13px}.material-meta{font-size:11px}.control-section{padding:20px 0}.layout-option>span{font-size:12px}.layout-option small{font-size:10px}#status{font-size:10px}.scope-note p{font-size:10px}.inspector-bottom>span{font-size:11px}}
/* Let the viewport, rather than the controls' intrinsic widths, size the mobile studio. */
@media(max-width:780px){
  main,.studio,.studio>*,.inspector>*,.layout-options>*{min-width:0;max-width:100%}
  .studio{width:100%;grid-template-columns:minmax(0,1fr)}
  .inspector{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches{flex-wrap:wrap;row-gap:13px;padding:3px 0}
  .custom-color{flex:0 0 auto}
  .section-title,.material-meta,.zoom-label,.view-actions{flex-wrap:wrap;row-gap:7px}
  .layout-options{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
  .layout-option{grid-template-columns:minmax(0,65px) minmax(0,1fr);min-width:0;overflow-wrap:anywhere}
  .layout-option svg{width:100%;max-width:65px}
  .view-settings input{min-width:0;max-width:100%}
  .viewer-bottom{flex-wrap:wrap}
  .interaction-note{min-width:0}
  .interaction-note svg{flex:0 0 auto}
  .view-buttons{max-width:100%;flex-wrap:wrap}
  .inspector-bottom a{min-width:0;gap:10px;overflow-wrap:anywhere}
  .inspector-bottom a>span{flex:0 0 auto}
  .viewer-heading>div{min-width:0}
  .render-tag{flex:0 0 auto}
}
@media(max-width:390px){
  .inspector{grid-template-columns:minmax(0,1fr);column-gap:0;padding:23px 20px 0}
  .inspector>*{grid-column:1}
  .control-section:nth-of-type(3){grid-column:1}
  .swatches{gap:13px;row-gap:13px}
  .swatch{width:30px;height:30px}
  .custom-color{width:29px;height:29px}
  .layout-options{grid-template-columns:minmax(0,1fr);gap:9px}
  .layout-option{grid-template-columns:76px minmax(0,1fr);padding:10px 12px}
  .layout-option svg{max-width:70px}
  .viewer-bottom{flex-direction:column-reverse;align-items:flex-start;gap:10px}
  .scene-compass{bottom:94px}
  .dimension-label{bottom:97px}
  .viewer-heading{left:17px;right:17px;gap:9px}
  .viewer-heading h2{font-size:23px}
  .render-tag{font-size:7px;padding:3px 6px}
}