/* Editorial interface for the reference-led house presentation. */
:root{--ink:#23372f;--muted:#708075;--line:#d9ded5;--paper:#f8f7f2;--forest:#203d32;--brass:#a17b52}
body{background:var(--paper);color:var(--ink);font:14px/1.45 'Golos Text','Segoe UI',Arial,sans-serif}
button{border-radius:3px;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
button:hover{background:#e9ede5}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--brass)}
header{height:80px;padding:0 30px;background:#faf9f5;border-bottom:1px solid var(--line)}
.brand{gap:12px;font-size:20px;letter-spacing:.13em;font-weight:600;color:#233c32;white-space:nowrap}
.brandmark{width:43px;height:43px;border-color:#9daa9b;border-radius:50%;font:24px/1 'Prata',Georgia,serif;color:#2b4939}
.brand small{font-size:9px;letter-spacing:.14em;font-weight:500;color:#77877c;margin-top:4px}
header nav{background:transparent;border-bottom:1px solid #d7ddd4;border-radius:0;padding:0;gap:9px;align-self:stretch;align-items:center}
.mode{padding:14px 13px 12px;border-radius:0;border-bottom:2px solid transparent;font-size:13px;font-weight:500;color:#637568}
.mode:hover{background:transparent;color:var(--forest)}
.mode.active{background:transparent;color:var(--forest);border-bottom-color:var(--brass);box-shadow:none;font-weight:700}
header .outline{border-color:#b2c0b2;background:transparent;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.015em;padding:11px 16px}
header .outline:hover{background:var(--forest);border-color:var(--forest);color:white}
main{grid-template-columns:minmax(0,1fr) 350px;height:calc(100dvh - 80px)}
#viewport{background:#c5cec4}
.scene-heading{left:44px;top:42px;max-width:min(590px,calc(100% - 72px));padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;color:#fff;text-shadow:none}
.scene-heading .eyebrow{display:flex;align-items:center;gap:11px;color:#f3ebda;font-size:10px;font-weight:700;letter-spacing:.21em;text-shadow:0 1px 5px #102317,0 2px 16px #102317}
.scene-heading .eyebrow:before{content:"";width:22px;height:1px;background:#d1b28a;box-shadow:0 1px 5px #102317}
.scene-heading h1{font:400 clamp(38px,3.2vw,58px)/1.12 'Prata',Georgia,serif;letter-spacing:-.035em;margin:17px 0 16px;color:#fff;text-shadow:0 2px 9px #092015,0 3px 24px #092015b8}
.scene-heading p{margin:0;color:#fff;font-size:13px;font-weight:500;letter-spacing:.025em;line-height:1.5;text-shadow:0 1px 5px #092015,0 2px 16px #092015}
.view-tools{left:20px;bottom:78px;gap:6px}
.view-tools button{padding:10px 13px;background:#faf9f4;color:var(--forest);border:1px solid #e2e4dc;border-radius:3px;box-shadow:0 2px 8px #15251e1b;backdrop-filter:none;font-size:12px;font-weight:600}
.view-tools button:hover{background:#fff;border-color:#aab6a7;transform:translateY(-1px)}
.scene-bottom{background:#f7f6f0;backdrop-filter:none;border-top:1px solid #dce1d7;min-height:58px;padding:12px 20px}
#location{font-size:13px;font-weight:700}
#location span{font-size:11px;color:var(--muted)}
#controls{font-size:11px;color:#66786b}
#fps{color:#879489}
aside{background:#faf9f5;border-left:1px solid #d8ded5;padding:27px 20px 20px}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:700;color:#738376}
h1,h2{font-family:'Prata',Georgia,serif}
h2{font-size:25px;line-height:1.2;letter-spacing:-.025em;color:#233a30;margin:11px 0 19px}
.floors{gap:4px;padding-bottom:12px;border-color:var(--line)}
.floors button{font-size:12px;padding:8px 12px;border-radius:3px;color:#52685a}
.floors .active{background:#dfe8dc;color:#213b2d;font-weight:700}
.map-wrap{border-radius:4px;border-color:#dce1d8;background:#f1f1e9;margin-top:14px}
#map text{font-family:'Golos Text','Segoe UI',Arial,sans-serif}
.map-caption{font-size:10px;color:#758578}
#map-help{font-size:12px;color:#66796b;margin:17px 0 13px}
.rooms{margin-bottom:24px;gap:6px}
.rooms button{border-radius:3px;background:#ebeee7;color:#334d3a;font-size:11px;padding:8px 10px}
.rooms button:hover{background:#dfe8dc}
.rooms button.active{background:#d4e3d2;color:#183727;box-shadow:inset 0 0 0 1px #8eac8a;font-weight:700}
.catalog{border-color:var(--line);padding-top:20px}
.catalog-head h2{font-size:21px;margin:0;white-space:normal}
#catalog-toggle{background:transparent;border:1px solid #c8d4c6;border-radius:3px;padding:7px 9px;color:#365342;font-size:11px;font-weight:600}
#catalog-toggle:hover{background:#e8eee5}
.catalog-card{background:#f3f3ed;border-color:#dce3d7;border-radius:4px}
.catalog-card:hover{background:#e9eee6}
#selection{border-radius:4px}
footer{border-color:var(--line);gap:11px 14px}
footer button,footer a,.import-label{font-size:11px;color:#4d6656}
footer small{font-size:10px}
#edit-tools,#walktip{font-family:'Golos Text','Segoe UI',Arial,sans-serif}
#walktip{top:17px;left:18px;transform:none;width:min(322px,calc(100% - 36px));max-width:none;padding:10px 12px;background:#fbfaf5f5;border:1px solid #d9e0d5;border-radius:3px;box-shadow:0 3px 14px #10291d22;font-size:11px;line-height:1.4;text-align:left;color:#344e3d}
#walktip button{border-radius:3px;font-size:10px;font-weight:600;padding:7px 9px;margin:5px 5px 0 0}
#loading{background:#f6f5ef}
#loading h2{font-family:'Prata',Georgia,serif}
@media(max-width:1000px){header{padding:0 18px}.brand{font-size:17px}.brand small{font-size:8px}.mode{padding:12px 8px}main{grid-template-columns:minmax(0,1fr) 322px}aside{padding:24px 17px}.scene-heading{left:28px;top:28px;max-width:calc(100% - 50px)}.scene-heading h1{font-size:clamp(35px,3.7vw,47px)}}
@media(max-width:720px){header{height:104px;flex-wrap:wrap;padding:10px 14px 8px;gap:4px}.brand{font-size:15px}.brandmark{width:34px;height:34px;font-size:18px}.brand small{font-size:7px}header nav{order:3;width:100%;justify-content:space-between;align-self:auto;gap:0}.mode{flex:1;padding:6px 4px;font-size:11px}header .outline{font-size:11px;padding:7px 9px}main{height:auto;display:flex;flex-direction:column}#viewport{height:calc(68dvh - 40px);min-height:400px}.scene-heading{top:25px;left:22px;max-width:calc(100% - 42px)}.scene-heading .eyebrow{font-size:9px}.scene-heading h1{font-size:clamp(29px,7vw,39px);margin:13px 0}.scene-heading p{font-size:11px;max-width:330px}.view-tools{left:9px;right:9px;bottom:67px;gap:4px}.view-tools button{font-size:10px;padding:8px 9px}.scene-bottom{padding:10px 12px;min-height:55px}aside{border-left:0;border-top:1px solid var(--line);padding:22px 18px}.catalog-head h2{font-size:20px}}

/* An always-readable route out of captured mouse control. */
#escape-hint {position:absolute;right:20px;bottom:85px;z-index:12;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#bbf22e;color:#172012;border:1px solid #8cba22;border-radius:8px;box-shadow:0 3px 18px #0003;font-size:13px;font-weight:600;pointer-events:none;max-width:290px}
#escape-hint[hidden]{display:none}#escape-hint kbd{font:700 16px 'Golos Text',sans-serif;background:#172012;color:#fff;padding:7px 10px;border-radius:5px}#escape-hint.paused{background:#fffdf5;border-color:#d6dbc9;flex-direction:column;align-items:flex-start;gap:3px}#escape-hint.paused span{font-size:11px;font-weight:400}
@media(max-width:720px){#escape-hint{right:10px;bottom:132px;max-width:230px;font-size:11px;padding:8px 10px}}

.look-setting{display:grid;grid-template-columns:1fr 110px 36px;gap:9px;align-items:center;margin:14px 0 2px;padding:10px 12px;background:#eff1e9;border:1px solid #dde3d7;border-radius:5px;color:#365142;font-size:11px;font-weight:600}
.look-setting input{width:100%;accent-color:#79925b;cursor:pointer}
.look-setting output{font-variant-numeric:tabular-nums;text-align:right;color:#203e2e}
.placed-head{border-top:1px solid var(--line);margin-top:19px;padding-top:17px}
.placed-head h3{font:600 15px/1.3 'Golos Text','Segoe UI',sans-serif;margin:0 0 5px;color:#263e31}
.placed-head h3 span{font-size:12px;color:#718573;font-weight:400}
.placed-head p{font-size:11px;color:#687d6f;margin:0 0 10px}
#placed-items{display:grid;gap:5px;max-height:360px;overflow:auto;padding-right:3px}
.placed-row{display:flex;align-items:stretch;gap:5px}
.placed-row button{font-size:11px;padding:8px 9px;min-height:34px;border-radius:4px}
.placed-find{flex:1;text-align:left;background:#f1f3eb;color:#344f3d;border:1px solid #e0e6dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placed-find:hover{background:#e5ebdf}
.placed-remove{background:#fffaf7;color:#885637;border:1px solid #e8d9ce}
.placed-remove:hover{background:#f9ebe4}
@media(max-width:720px){.look-setting{grid-template-columns:1fr 95px 32px;font-size:10px}}

body.measure .scene-heading{opacity:0}
#measure-panel{position:absolute;z-index:15;top:18px;left:18px;width:min(335px,calc(100% - 36px));padding:16px;background:#faf9f4f5;color:#233a30;border:1px solid #ced8cc;border-radius:7px;box-shadow:0 6px 25px #0b221c30;max-height:calc(100% - 175px);overflow:auto}
.measure-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#54705d;font-size:10px;letter-spacing:.11em;font-weight:700}
.measure-heading button{color:#795b3d;font-size:11px;letter-spacing:0;padding:5px 7px;border:1px solid #dcd7cb}
#measure-status{font-size:13px;line-height:1.42;margin:11px 0;color:#243b30}
#measure-object{font-size:11px;background:#e9efe5;color:#294735;padding:8px 10px;border-radius:3px;margin:8px 0}
.measure-actions{display:flex;gap:7px;margin:11px 0}.measure-actions button{background:#274a38;color:#fff;padding:8px 11px;font-size:11px;font-weight:600;flex:1}.measure-actions button:hover{background:#396348}.measure-actions button:disabled{opacity:.42}
#measure-list{display:grid;gap:5px;max-height:145px;overflow:auto}.measure-row{display:flex;justify-content:space-between;gap:8px;background:#f0f1e9;padding:6px 8px;border-radius:3px}.measure-row span{display:grid;gap:2px}.measure-row b{font-size:12px;color:#2a4432}.measure-row small{font-size:10px;color:#6e7b6e}.measure-row button{font-size:17px;color:#8a6349;padding:0 4px}
#measure-panel>small{display:block;font-size:10px;line-height:1.45;color:#778476;margin-top:10px}
#measure-labels{position:absolute;inset:0;z-index:11;pointer-events:none}.measure-label{position:absolute;transform:translate(-50%,-50%);background:#fffaf0;color:#5c3c23;border:1px solid #bd814e;border-radius:4px;box-shadow:0 2px 7px #171c154d;padding:3px 6px;font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:720px){#measure-panel{top:10px;left:10px;width:min(300px,calc(100% - 20px));max-height:calc(100% - 170px);padding:11px}.measure-row small{font-size:9px}}

/* The compact room card gives buyers the current floor's usable scale. */
#room-facts{padding:13px 14px;margin:0 0 18px;border:1px solid #d5ddce;background:#f0f3e9;border-radius:4px;color:#263e34}
#room-facts small{display:block;font-size:9px;letter-spacing:.12em;font-weight:700;color:#718274}
#room-facts strong{display:block;font:400 19px 'Prata',Georgia,serif;margin:7px 0 4px}
#room-facts>span{font-size:13px;font-weight:700;color:#496750}
#room-facts p{font-size:10px;line-height:1.45;color:#778678;margin:7px 0 0}
#evening[aria-pressed="true"]{background:#263941;color:#fff;border-color:#263941}
#touchcontrols{z-index:13;bottom:140px;left:14px;right:14px;align-items:center}
#touchcontrols>span{max-width:152px;text-align:center;background:#173b32b9;padding:9px 10px;line-height:1.35}
#touch-arrows{width:132px;height:132px;display:grid;grid-template:repeat(3,42px)/repeat(3,42px);gap:3px;pointer-events:auto;touch-action:none}
#touch-arrows button{background:#faf9f4d9;border:1px solid #fefefde8;border-radius:8px;color:#213b30;font-size:25px;line-height:1;touch-action:none;box-shadow:0 2px 9px #16281d30}
#touch-arrows button.is-held{background:#bbf22e;color:#183024}
#touch-arrows [data-touch="forward"]{grid-column:2;grid-row:1}
#touch-arrows [data-touch="left"]{grid-column:1;grid-row:2}
#touch-arrows [data-touch="back"]{grid-column:2;grid-row:3}
#touch-arrows [data-touch="right"]{grid-column:3;grid-row:2}
@media(max-width:720px){body.walk #viewport{min-height:520px}.view-tools{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none}.view-tools::-webkit-scrollbar{display:none}.view-tools button{flex:none}body.walk #escape-hint{display:none!important}body.walk #walktip{display:none!important}#touchcontrols{bottom:128px}#touchcontrols>span{font-size:10px}}

/* The catalogue shows the actual scene assets, with enough room to judge
their shape and the size they will occupy. */
.catalog-search-label{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;color:#526957;text-transform:uppercase;margin:13px 0 10px}
#catalog-search{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid #cbd8c9;border-radius:5px;background:#fff;color:#263f32;font:12px 'Golos Text',sans-serif}
.catalog-categories{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;padding:0 0 10px;margin-bottom:7px}
.catalog-categories button{flex:none;padding:7px 10px;border:1px solid #d5dfd3;border-radius:18px;background:#f4f5ee;color:#47604d;font-size:10px;font-weight:600}
.catalog-categories button.active{background:#284a38;color:#fff;border-color:#284a38}
#catalog-items{gap:8px}
.catalog-card{min-height:164px;padding:8px 9px 11px;background:#fffdfa;border:1px solid #d7ded2;box-shadow:0 2px 7px #193a2810}
.catalog-card:hover{background:#fff;border-color:#89a082;box-shadow:0 5px 14px #193a2820}
.catalog-card img{height:98px;margin:0 auto 5px;mix-blend-mode:normal;object-position:center}
.catalog-card b{font-size:11px;line-height:1.25;min-height:27px;color:#243c2e}
.catalog-card small{font-size:10px;color:#607465;font-variant-numeric:tabular-nums}
.catalog-card .add{right:8px;top:7px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e5eee1;color:#365c40;font-size:19px;line-height:1}
#catalog-empty{padding:15px;background:#f1f3eb;border:1px dashed #c8d4c3;border-radius:5px;color:#617665;font-size:12px}
#selection{border-color:#a5bba1;background:#eff4ea;box-shadow:0 3px 12px #1c362313}
#selected-size{line-height:1.5;font-variant-numeric:tabular-nums}
#remove{color:#864f38}
#measure-right-angle{width:100%;margin:0 0 11px;padding:8px 10px;background:#f0e9dc;border:1px solid #d5b994;border-radius:4px;color:#674e30;font-size:11px;font-weight:700}
#measure-right-angle[aria-pressed="true"]{background:#a87946;border-color:#a87946;color:white}
#measure-right-angle:disabled{opacity:.45}
.plan-dimension{pointer-events:none}
.plan-dimension text{fill:#624b30;font-size:.38px;font-weight:700;paint-order:stroke;stroke:#fbfaf3;stroke-width:.15}
#map-dimensions{pointer-events:none}
@media(max-width:720px){#catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-card{min-height:155px}.catalog-card img{height:86px}#measure-right-angle{font-size:10px}}