@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#272d28;background:#f5f3ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b18447;outline-offset:3px}header{height:100px;padding:0 4%;border-bottom:1px solid #deded5;display:flex;align-items:center;gap:36px}.brand{font-family:Georgia,serif;font-size:31px;letter-spacing:5px;text-decoration:none;color:inherit}.brand span{display:block;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:2px;margin-top:6px}.edition{font-size:10px;letter-spacing:2px;margin-left:auto;color:#777b70}header button{background:#283e32;color:white;border:0;padding:13px 22px;border-radius:3px;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;max-width:1800px;margin:auto}.studio{padding:45px 38px 25px 5%}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:2px;color:#687365;font-weight:600;margin:0 0 15px}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-1.5px;margin:0}h1{font-size:44px;line-height:1.12}h2{font-size:30px;line-height:1.2}.intro-note{font-size:11px;line-height:1.8;color:#7b7c72;margin:0 0 4px 18px}#viewport{height:565px;position:relative;background:#e8e5dc;border-radius:5px;overflow:hidden}canvas{display:block;width:100%;height:100%}.scene-label{position:absolute;left:22px;top:23px;font-size:10px;letter-spacing:1px;z-index:1}.scene-label>span:last-child{display:block;font-size:9px;color:#777b70;margin:7px 0 0 13px}.dot{display:inline-block;background:#526c49;width:6px;height:6px;border-radius:50%;margin-right:7px}.views{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;background:#faf9f4e8;border:1px solid #ffffff;border-radius:5px;padding:4px;white-space:nowrap}.views button{padding:10px 14px;background:none;border:0;font-size:10px;border-radius:3px}.views .active{background:#2e4437;color:#fff}#capture{position:absolute;right:16px;top:20px;background:#faf9f4ca;border:0;padding:9px;font-size:10px;border-radius:3px}.under-scene{display:flex;justify-content:space-between;margin:17px 0;font-size:8px;letter-spacing:1px;color:#777b70}aside{border-left:1px solid #deded5;padding:40px 27px;background:#faf9f5}.panel-title{padding-bottom:27px}.control{border-top:1px solid #deded5;padding:23px 0}h3{font-size:12px;font-weight:500;margin:0 0 17px}h3>span{color:#8c947f;font-size:10px;margin-right:12px}h3 small{display:block;font-size:9px;color:#85897e;margin:7px 0 0 27px;font-weight:400}.patterns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.patterns button{background:transparent;border:1px solid #dbddd3;border-radius:4px;font-size:10px;padding:12px 5px}.patterns .selected,.slot.selected{border-color:#4f644f;background:#edf0e8}.pattern{display:block;width:38px;height:28px;margin:0 auto 10px;background-color:#d8d7cc}.checker,.diamond{background-image:conic-gradient(#66725b 25%,transparent 0 50%,#66725b 0 75%,transparent 0);background-size:16px 16px}.diamond{transform:rotate(-45deg) scale(.75)}.running{background-image:linear-gradient(0deg,transparent 90%,#f5f3ee 90%),repeating-conic-gradient(#66725b 0 25%,transparent 0 50%);background-size:100% 9px,28px 18px}.slots{display:flex;gap:8px;margin-bottom:17px}.slot{width:50%;border:1px solid #dcded3;background:transparent;text-align:left;padding:10px;font-size:9px;border-radius:4px}.slot strong{display:block;margin-top:6px;font-size:11px;font-weight:500}.filter-label{font-size:9px;color:#6f786a}select{background:transparent;border:1px solid #d8dbd0;border-radius:3px;padding:8px;font-size:11px;color:#394736}#category{width:100%;margin:6px 0 14px}.materials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}.material{border:0;background:transparent;padding:0;text-align:left;font-size:9px;line-height:1.4}.material img{width:100%;height:55px;object-fit:cover;border:2px solid transparent;border-radius:4px;display:block;margin-bottom:5px}.material.chosen img{border-color:#3d563d}.sample-note{font-size:9px;line-height:1.6;color:#86877a;margin:15px 0 0}.field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:10px}.field-row input{width:42px;height:27px;border:1px solid #d9ddd2;padding:2px;background:transparent}.hint{font-size:9px;color:#818677}.check{font-size:10px;display:flex;align-items:center;gap:7px;margin-top:17px;cursor:pointer}input{accent-color:#3f5742}.summary{background:#edf0e7;padding:18px;border-radius:4px}.summary>span{font-size:8px;letter-spacing:1.4px}.summary p{font:17px/1.5 Georgia,serif;margin:8px 0 15px}.summary button{font-size:10px;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:4px}footer{border-top:1px solid #deded5;padding:23px 4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#777d70}footer a{color:inherit;text-decoration:none}#loading{position:absolute;top:45%;width:100%;text-align:center;font-size:13px;padding:20px;line-height:1.7}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#283e32;color:#fff;padding:13px 22px;border-radius:4px;font-size:12px;display:none;z-index:10}@media(min-width:1500px){#viewport{height:680px}}@media(max-width:1050px){main{grid-template-columns:minmax(0,1fr) 310px}.studio{padding:35px 20px}.intro-note{display:none}h1{font-size:36px}aside{padding:30px 20px}#viewport{height:540px}}@media(max-width:740px){header{height:80px;padding:0 20px}.brand{font-size:23px}.brand span{font-size:6px}.edition{display:none}header button{margin-left:auto;padding:10px;font-size:10px}main{display:block}.studio{padding:28px 18px 8px}h1{font-size:35px}#viewport{height:440px}aside{border-left:0;border-top:1px solid #deded5;padding:28px 22px}.materials{grid-template-columns:repeat(3,1fr)}.material img{height:85px}.panel-title h2 br{display:none}.under-scene{font-size:7px}.views button{padding:10px}footer{gap:15px;font-size:7px}footer>span:nth-child(2){display:none}}

/* Photographic material library */
#material-search{width:100%;margin:6px 0 0;padding:9px 10px;border:1px solid #d8dbd0;border-radius:3px;background:#fffefa;color:#394736;font:11px 'DM Sans',sans-serif}
.material-count{font-size:9px;color:#747d6c;margin:12px 0 10px}
.materials{max-height:304px;overflow-y:auto;align-content:start;padding-right:5px;scrollbar-width:thin;scrollbar-color:#b4beaa transparent}
.material{overflow-wrap:anywhere;align-self:start}
.material img{aspect-ratio:1.5;object-fit:cover}
.material-status{font-size:10px;color:#596c50;line-height:1.5;margin:10px 0 0}
.material-status:empty{display:none}
.no-materials{font-size:11px;color:#747d6c;grid-column:1/-1;padding:15px 0}
button:disabled{opacity:.5;cursor:wait}
@media(max-width:740px){.materials{max-height:360px}}

/* Room and bathroom surface navigation */
.zoom-controls{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;padding:4px;background:#faf9f4ec;border:1px solid #fff;border-radius:5px}
.zoom-controls button{border:0;background:transparent;border-radius:3px;width:44px;min-height:40px;font-size:23px;line-height:1;color:#2e4437}
.zoom-controls button:hover:not(:disabled){background:#e4eadd}
.zoom-controls #zoom-reset{font-size:10px;min-height:32px}
.zoom-controls button:disabled{cursor:default}
#viewport canvas:focus-visible{outline:3px solid #b18447;outline-offset:-3px}
[hidden]{display:none!important}
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px}
.rooms button{min-height:46px;padding:10px 12px;display:flex;align-items:center;gap:9px;background:transparent;border:1px solid #d8dcd0;border-radius:4px;text-align:left;font-size:11px;line-height:1.3;transition:background .15s,border-color .15s}
.rooms button span{font-size:9px;color:#8c947f;flex-shrink:0}
.rooms button:hover{background:#e9ede2}
.rooms button.selected{background:#2e4437;border-color:#2e4437;color:#fff}
.rooms button.selected span{color:#bdcbb0}
.rooms button.pending{border-color:#ac854c;background:#eee8d9;color:#473b27}
.room-status{font-size:10px;color:#737e68;margin:0 0 12px;min-height:15px}
.room-status:empty{display:none}
.scene-label strong{font-weight:500}
.surface-badge{position:absolute;top:74px;left:22px;padding:6px 9px;background:#faf9f4d9;border-radius:3px;font-size:9px;color:#596b50}
.surface-selector{display:flex;gap:5px;padding:4px;background:#ecefe5;border-radius:4px;margin:0 0 18px}
.surface-selector button{flex:1;border:0;background:transparent;padding:11px 7px;font-size:11px;border-radius:3px}
.surface-selector .selected{background:#2e4437;color:#fff}
.wall-note{font-size:10px;color:#74806c;line-height:1.6;margin:0 0 20px}
.room-subtitle{font:italic 17px Georgia,serif;color:#69745f;margin:24px 0 10px}
.views{max-width:calc(100% - 20px)}
@media(min-width:1600px){.rooms{grid-template-columns:repeat(6,minmax(0,1fr))}.rooms button{font-size:10px;padding:9px}}
@media(max-width:1050px) and (min-width:741px){.rooms button{padding:9px 7px;font-size:10px;gap:6px}}
@media(max-width:740px){.rooms{gap:6px;margin-bottom:16px}.rooms button{font-size:10px;padding:9px 7px;gap:6px}.views button{padding:10px 8px;font-size:9px}.room-subtitle{font-size:16px;margin:15px 0}}