@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Arial,sans-serif;color:#283c35;background:#f7f8f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}header{height:88px;display:flex;align-items:center;padding:0 36px;border-bottom:1px solid #e2e6df;background:#fff;gap:30px}.brand{text-decoration:none;color:#273d34;font-size:28px;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:-1px}.brand-logo{display:block;height:37px;width:auto}.brand-icon{display:none;height:36px;width:auto}.brand-divider{width:1px;height:24px;background:#dde3db;margin:0 12px}.brand-description{font-size:12px;font-weight:500;letter-spacing:0;color:#8b958e}.save-state{margin-left:auto;font-size:11px;color:#8b958e;display:flex;gap:8px;align-items:center}i{display:inline-block;width:6px;height:6px;background:#6c9678;border-radius:50%}.primary{background:#345d49;color:white;border:0;padding:13px 20px;border-radius:8px;font-size:12px;font-weight:600}.primary span{margin-left:20px}main{display:flex;min-height:calc(100vh - 88px)}aside{width:290px;flex-shrink:0;padding:35px 24px 20px;background:#fff;border-right:1px solid #e2e6df;display:flex;flex-direction:column}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#87958b;font-weight:700}h1{font-size:25px;letter-spacing:-1px;margin:12px 0}.intro{font-size:12px;line-height:1.9;color:#8b958e;margin:0 0 30px}.catalog-title{font-size:12px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:13px}.catalog-title span{font-weight:400;color:#99a29b;font-size:10px}.room-card{width:100%;border:1px solid #e4e8e0;background:#fff;display:flex;align-items:center;padding:14px 12px;margin-bottom:9px;border-radius:9px;text-align:left;gap:13px;cursor:grab;transition:.2s}.room-card:hover{border-color:#7e9c88;background:#f7faf6;transform:translateX(3px)}.room-preview{width:49px;height:49px;display:grid;place-items:center;background:var(--bg);border-radius:6px;flex-shrink:0}.room-shape{width:32px;height:28px;border:2px solid var(--color);position:relative}.card-info strong{font-size:12px;display:block;margin-bottom:6px;font-weight:700}.card-info small{font-size:10px;color:#929a93}.drag-dots{margin-left:auto;color:#aeb6ad;font-size:18px}.aside-tip{display:flex;gap:12px;background:#f5f6f0;border-radius:9px;padding:14px;margin-top:23px}.aside-tip>span{font-size:24px;color:#879170}.aside-tip p{font-size:10px;line-height:1.8;color:#8a907d;margin:0}footer{font-size:8px;letter-spacing:1.7px;color:#a3aaa0;margin-top:auto;padding-top:30px}.workspace{flex:1;min-width:0;padding:32px 32px 0;display:flex;flex-direction:column}.project-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:15px}.project-name{display:flex;align-items:center;gap:12px}.project-name input{border:0;background:transparent;color:#283c35;font-weight:700;font-size:21px;width:255px;outline:none}.project-name span{color:#9ba69c}.project-subtitle{font-size:11px;color:#929c92;margin-top:8px}.project-stats{display:flex;gap:30px}.project-stats>div{display:flex;flex-direction:column;gap:5px}.project-stats strong{font-size:24px;font-weight:600}.project-stats span{font-size:9px;color:#929c92}.canvas-wrap{position:relative;flex:1;min-height:530px;background:#fbfcf9;border:1px solid #dce2d6;border-radius:12px;overflow:hidden}.canvas-tools{position:absolute;top:19px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}.tool-group{display:flex;background:white;border:1px solid #e0e5dc;border-radius:7px;box-shadow:0 2px 6px #263e3105;padding:3px;pointer-events:auto}.tool-group button,.zoom button{border:0;background:transparent;width:33px;height:31px;color:#748176;font-size:21px}.tool-group button:disabled{opacity:.3}.tool-group span{width:1px;background:#e5e9e1;margin:5px}.grid-badge{font-size:9px;color:#8e9c8e;background:#fbfcf9dc;padding:8px;border-radius:6px}.grid-badge i{width:5px;height:5px;margin-right:5px;background:#95a88c}#viewport{position:absolute;inset:0;overflow:auto;touch-action:none}#board{width:1600px;height:1100px;position:relative;transform-origin:0 0;background-image:radial-gradient(#cfd8c8 1px,transparent 1px);background-size:20px 20px}#empty{position:absolute;width:490px;top:195px;left:130px;text-align:center;pointer-events:none}.empty-icon{font-size:65px;color:#a8b7a0;position:relative;width:85px;margin:auto;line-height:1}.empty-icon span{position:absolute;font-size:21px;right:5px;bottom:2px;background:#fbfcf9}.empty-icon+h2{font-size:19px;font-weight:600;margin:25px 0 11px;letter-spacing:-.5px}#empty p{color:#9aa496;font-size:11px;line-height:1.9}.empty-tag{display:inline-block;margin-top:17px;font-size:10px;color:#94a18b;background:#edf1e7;padding:8px 13px;border-radius:20px}.canvas-bottom{position:absolute;bottom:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:10px}.scale{font-size:9px;color:#95a08e}.scale i{width:40px;height:7px;border:1px solid #8c9a83;border-top:0;border-radius:0;display:block;background:none;margin-bottom:5px}.canvas-hint{font-size:9px;color:#a1aa9a;background:#fbfcf9c9}.zoom{display:flex;align-items:center;background:#fff;border:1px solid #e0e5dc;border-radius:7px;pointer-events:auto}.zoom span{font-size:10px;width:42px;text-align:center}.zoom button:last-child{border-left:1px solid #e0e5dc}.workspace-bottom{display:flex;justify-content:space-between;align-items:center;height:48px;font-size:9px;color:#9ba394}.workspace-bottom i{margin-right:6px;width:5px;height:5px}.placed-room{position:absolute;border:3px solid var(--color);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;user-select:none;touch-action:none;color:var(--color)}.placed-room.selected{outline:2px solid #355c48;outline-offset:5px;z-index:2}.placed-room strong{font-size:12px;pointer-events:none}.placed-room small{font-size:10px;margin-top:6px;opacity:.75;pointer-events:none}.placed-room .dimension{position:absolute;top:5px;font-size:8px;opacity:.65}#selection{position:fixed;bottom:65px;left:50%;transform:translateX(-25%);z-index:5;background:white;border:1px solid #dde4d9;border-radius:10px;padding:8px;box-shadow:0 8px 30px #243c3512;white-space:nowrap}#selection span{font-size:11px;font-weight:700;padding:0 10px}#selection button{border:0;background:#f2f5ee;padding:10px;margin-left:5px;border-radius:6px;color:#51654f;font-size:10px}#selection #delete{color:#a56c60;background:#faf0ec}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#2c4d3c;color:white;border-radius:8px;padding:12px 20px;font-size:12px;z-index:9;opacity:0;transition:opacity .2s;pointer-events:none}button:hover{filter:brightness(.96)}@media(min-width:1450px){aside{width:320px;padding-left:32px;padding-right:32px}.workspace{padding:40px 45px 0}#empty{left:230px;top:220px}}@media(max-width:950px){header{padding:0 20px}.brand-description,.brand-divider,.save-state{display:none}.primary{margin-left:auto}aside{width:230px;padding:25px 15px}.workspace{padding:25px 18px 0}.project-stats{gap:15px}.project-name input{width:205px;font-size:18px}.canvas-hint{display:none}#empty{left:30px;width:340px}.project-stats span{font-size:8px}}@media(max-width:650px){header{height:70px}.brand{font-size:23px}main{flex-direction:column}aside{width:100%;padding:20px;border-right:0;border-bottom:1px solid #e2e6df}h1{font-size:21px}.intro,.aside-tip,footer,.catalog-title,.eyebrow{display:none}#catalog{display:flex;overflow:auto;gap:8px}.room-card{min-width:135px;flex-direction:column;padding:10px;gap:8px;margin:0}.drag-dots{display:none}.card-info{text-align:center}.room-preview{height:36px;width:45px}.workspace{padding:20px 12px 0}.project-bar{align-items:flex-start;margin-bottom:20px}.project-name input{font-size:17px;width:190px}.project-stats{gap:10px}.project-stats strong{font-size:19px}.project-stats span{max-width:65px;line-height:1.5}.project-subtitle{font-size:9px}.canvas-wrap{min-height:530px}.grid-badge{font-size:8px}.workspace-bottom>span:last-child{display:none}#empty{left:15px;width:310px}#selection{left:50%;transform:translateX(-50%);bottom:15px}#selection span{display:none}}
#selection{display:flex;align-items:center;gap:8px;bottom:24px;left:50%;transform:translateX(-50%);white-space:normal;max-width:calc(100vw - 24px)}#selection[hidden]{display:none}.selection-title{display:flex;align-items:center;gap:6px;padding-right:8px;border-right:1px solid #e5e9e1}.selection-title>span{font-size:11px;font-weight:700;padding:0 5px}.edit-field{display:flex;flex-direction:column;gap:4px;color:#829084;font-size:9px}.edit-field input,.edit-field select{height:35px;min-width:74px;padding:0 8px;border:1px solid #e0e5dc;border-radius:6px;background:#fbfcf9;color:#34483c;font-size:11px}.edit-field select{min-width:132px}.edit-field input:disabled{background:#eef1eb;color:#929a93}.selection-actions{display:flex;gap:4px;align-items:center}#selection button{border:0;background:#f2f5ee;padding:9px;border-radius:6px;color:#51654f;font-size:10px;white-space:nowrap}#selection #delete{color:#a56c60;background:#faf0ec}@media(max-width:650px){#selection{bottom:12px;gap:5px;padding:6px;flex-wrap:wrap;justify-content:center}.selection-title{border:0;padding:0}.selection-title>span{display:inline!important}.edit-field{font-size:8px}.edit-field input{min-width:62px;width:66px}.edit-field select{min-width:112px;width:115px}#selection button{padding:8px;margin:0}}
#selection{display:flex;align-items:center;gap:8px;bottom:24px;left:50%;transform:translateX(-50%);white-space:normal;max-width:calc(100vw - 24px)}#selection[hidden]{display:none}.selection-title{display:flex;align-items:center;gap:6px;padding-right:8px;border-right:1px solid #e5e9e1}.selection-title>span{font-size:11px;font-weight:700;padding:0 5px}.size-readout{display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:2px;align-items:center;font-size:8px;color:#829084}.size-readout strong{font-size:10px;font-weight:600;color:#34483c}.edit-field{display:flex;flex-direction:column;gap:4px;color:#829084;font-size:9px}.edit-field select{height:35px;min-width:132px;padding:0 8px;border:1px solid #e0e5dc;border-radius:6px;background:#fbfcf9;color:#34483c;font-size:11px}.selection-actions{display:flex;gap:4px;align-items:center}#selection button{border:0;background:#f2f5ee;padding:9px;border-radius:6px;color:#51654f;font-size:10px;white-space:nowrap}#selection #delete{color:#a56c60;background:#faf0ec}.resize-handle{position:absolute!important;z-index:4;width:14px;height:14px;padding:0!important;margin:0!important;border:2px solid #fff!important;border-radius:50%!important;background:#355c48!important;box-shadow:0 0 0 1px #355c48;touch-action:none}.resize-width{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-height{bottom:-8px;left:50%;transform:translateX(-50%);cursor:ns-resize}.resize-both{right:-8px;bottom:-8px;cursor:nwse-resize}.placed-room.selected{overflow:visible}@media(max-width:650px){#selection{bottom:12px;gap:5px;padding:6px;flex-wrap:wrap;justify-content:center}.selection-title{border:0;padding:0}.selection-title>span{display:inline!important}.edit-field{font-size:8px}.edit-field select{min-width:112px;width:115px}#selection button{padding:8px;margin:0}}
.language-picker select{border:1px solid #e1e6df;border-radius:7px;background:#fff;color:#42574a;padding:9px 10px;font:inherit;font-size:11px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){.language-picker select{padding:7px 6px;font-size:10px}header{gap:10px}}
/* Link back to the Public Development journey. */
.return-to-lokka{color:#285b42;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;padding:9px 11px;border:1px solid #a8c0ae;border-radius:9px;background:#eef5ee}
.return-to-lokka:hover,.return-to-lokka:focus-visible{background:#dcebdd;outline:2px solid #285b42;outline-offset:2px}
@media(max-width:650px){.return-to-lokka{padding:7px;font-size:11px}.brand .brand-logo{display:none}.brand .brand-icon{display:block;height:34px}header .primary{font-size:0;padding:10px}header .primary span{font-size:15px;margin-left:0}}