@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#303943;--paper:#edece5;--accent:#526d83}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid #69869c;outline-offset:5px}#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;inset:0 0 auto;height:112px;padding:32px 52px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.wordmark{color:var(--ink);text-decoration:none;font-size:38px;line-height:1;letter-spacing:7px;font-weight:500}.wordmark small{display:block;font-size:8px;letter-spacing:5px;margin-top:9px}.header-center{font-size:9px;letter-spacing:2px;padding-right:80px;color:#6a7580}.round{width:39px;height:39px;border:1px solid #444f5b26;border-radius:50%;background:#f6f5eda0;font-size:20px;backdrop-filter:blur(12px);transition:.2s}.round:hover{background:#fff;transform:translateY(-2px)}.intro{position:fixed;top:25%;left:52px;width:315px;pointer-events:none;transition:.5s}.intro button{pointer-events:auto}.eyebrow{font-size:8px;letter-spacing:2px;font-weight:600;color:#717981}h1{font-size:51px;letter-spacing:-2.8px;font-weight:400;line-height:1.15;margin:24px 0 20px}.intro p{font-size:13px;line-height:1.9;color:#757b81}.specs{display:flex;gap:25px;margin:35px 0 30px}.specs strong{font-size:22px;letter-spacing:-1px;font-weight:500}.specs em{font-size:13px;letter-spacing:0;font-style:normal}.specs small{display:block;font-size:6px;letter-spacing:1px;margin-top:9px;color:#717981;white-space:nowrap}.primary{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:18px 22px;background:var(--accent);color:#fff;border-radius:3px;font-size:11px;min-width:218px;transition:.2s}.primary:hover{background:#3d566c;transform:translateY(-2px)}.primary span{font-size:20px}.drawing-note{font-size:8px;line-height:1.8;color:#8b9197;margin-top:19px}.right-tools{position:fixed;right:35px;top:38%;display:flex;flex-direction:column;gap:10px}.right-tools button:nth-child(3){margin-top:12px}.scene-caption{position:fixed;left:42%;bottom:140px;font-size:8px;letter-spacing:1.7px;display:flex;align-items:center;gap:12px;color:#6c747d}.scene-caption i{width:5px;height:5px;border-radius:50%;background:#7792a5}.plan{position:fixed;right:35px;bottom:133px;width:180px;background:#f7f6efb0;backdrop-filter:blur(16px);border:1px solid #fff9;border-radius:5px;padding:15px 14px 11px;box-shadow:0 8px 30px #6a695609}.plan-title,.plan-bottom{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1px}.plan-title button{background:transparent;font-size:16px}.plan svg{width:100%;height:110px;margin:10px 0}.outline{fill:#e3e3d8;stroke:#7c8790;stroke-width:2}.walls{fill:none;stroke:#7c8790;stroke-width:2}#planRooms path{fill:transparent;cursor:pointer;transition:fill .2s}#planRooms path:hover,#planRooms path.selected{fill:#6a879e50}#plan-dot{fill:#526e85;stroke:#faf9f1;stroke-width:2}.plan-bottom{font-size:6px;color:#868c93}footer{position:fixed;bottom:0;left:0;right:0;height:106px;display:flex;align-items:center;justify-content:space-between;padding:20px 52px;border-top:1px solid #616f7e1c;background:linear-gradient(0deg,#edece5e8,#edece540);gap:20px}nav{display:flex;padding:5px;background:#d7dce187;border:1px solid #c9d0d64d;border-radius:6px}nav button{padding:13px 18px;background:transparent;font-size:10px;color:#7c8790;border-radius:4px;white-space:nowrap}nav button.active{background:#fafaf3;color:#435e75;box-shadow:0 2px 5px #282f3710}.hint{font-size:8px;color:#838a92}.light-switch{display:flex;align-items:center;gap:12px;background:transparent;font-size:10px;white-space:nowrap}.light-switch b{font-weight:400}.light-switch>span:first-child{font-size:18px}.switch{width:30px;height:18px;background:#8197a8;border-radius:20px;padding:3px}.switch i{display:block;border-radius:50%;width:12px;height:12px;background:#fff;transform:translateX(12px);transition:.3s}.night .switch i{transform:translateX(0)}.room-panel{position:fixed;bottom:115px;left:52px;width:345px;background:#f7f7efef;backdrop-filter:blur(20px);box-shadow:0 15px 70px #282f3720;border:1px solid #fff;border-radius:8px;padding:20px;transform:translateY(12px);opacity:0;pointer-events:none;transition:.25s}.room-panel.open{opacity:1;transform:none;pointer-events:auto}.panel-heading{font-size:13px;display:flex;justify-content:space-between;margin-bottom:15px}.panel-heading button{background:transparent;font-size:22px}.room-panel>button{display:flex;align-items:center;width:100%;gap:12px;background:transparent;border-top:1px solid #6473831c;padding:17px 0;font-size:11px;text-align:left}.room-panel>button:hover{color:#6789a3}.room-panel>button>span{font-size:8px;color:#818c97}.room-panel small{margin-left:auto;font-size:8px;color:#7d8791}dialog{border:1px solid white;border-radius:12px;background:#f1f0e6;color:var(--ink);padding:40px;max-width:460px;box-shadow:0 30px 100px #0002}dialog::backdrop{background:#1c212655;backdrop-filter:blur(8px)}dialog h2{font-size:30px;font-weight:400;letter-spacing:-1px}dialog p{font-size:12px;line-height:1.9;color:#68717b}#closeHelp{position:absolute;right:16px;top:16px}#helpDone{margin-top:25px}#loading{position:fixed;z-index:20;inset:0;background:#edece5;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .8s;gap:25px}#loading p{font-size:10px;color:#6f7b87;letter-spacing:1px}#toast{position:fixed;top:110px;left:50%;transform:translate(-50%,-10px);background:#fafaf1ee;box-shadow:0 5px 20px #0001;padding:13px 22px;border-radius:6px;font-size:11px;opacity:0;pointer-events:none;transition:.3s}#toast.show{opacity:1;transform:translate(-50%,0)}body.inside .intro{transform:translateX(-25px);opacity:0;pointer-events:none}body.inside .intro button{pointer-events:none}body.inside .scene-caption{left:52px}@media(max-width:1050px){.hint{display:none}.intro{left:32px;width:250px}h1{font-size:43px}.specs{gap:18px}header,footer{padding-left:32px;padding-right:32px}.plan{width:150px}.scene-caption{left:38%}}@media(max-width:650px){header{height:88px;padding:20px 22px}.wordmark{font-size:29px}.wordmark small{font-size:6px}.header-center{display:none}.intro{left:24px;top:111px;width:280px}h1{font-size:39px;margin:14px 0 10px}.eyebrow{font-size:6px}.intro p{font-size:11px;line-height:1.7;margin:0}.specs{margin:18px 0;gap:24px}.specs strong{font-size:19px}.specs small{font-size:5px}.primary{padding:12px 16px;min-width:185px;font-size:10px}.drawing-note{display:none}.right-tools{right:16px;top:48%}.right-tools .round{width:33px;height:33px}.plan{right:15px;bottom:102px;width:112px;padding:9px}.plan svg{height:75px;margin:4px 0}.plan-title{font-size:5px}.plan-bottom{font-size:5px}.scene-caption{left:24px;bottom:121px;font-size:6px;gap:8px}footer{height:85px;padding:13px 16px;gap:5px}nav{padding:3px}nav button{padding:12px 10px;font-size:8px}.light-switch{gap:6px}.light-switch b{display:none}.room-panel{left:16px;bottom:98px;width:calc(100% - 32px)}body.inside .scene-caption{left:24px}dialog{padding:30px 25px;margin:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:650px){#scene{top:225px;bottom:85px}.intro{top:103px;width:calc(100% - 48px)}h1{font-size:34px;margin:10px 0}.intro p,.specs,.drawing-note{display:none}.intro .primary{padding:9px 14px;min-width:175px;max-width:195px}.plan{width:93px;bottom:103px;background:#f7f6efb0}.plan svg{height:58px}.right-tools{top:auto;bottom:207px}.right-tools button{width:29px!important;height:29px!important;font-size:17px}.right-tools button:nth-child(3){margin-top:0}.scene-caption{bottom:105px;max-width:180px;flex-wrap:wrap}.scene-caption span:last-child{display:none}body.inside #scene{top:0;bottom:85px}body.inside .right-tools{bottom:240px}.room-panel{max-height:calc(100dvh - 125px);overflow:auto}}
/* The apartment gets its own clear stage; menus remain readable above the model. */
body.inside header{background:linear-gradient(#edece5e8,transparent);height:100px}body.inside .plan{background:#f7f6efdc}body.inside .right-tools{top:33%}#doorToggle{font-size:23px}.room-panel{z-index:5}dialog{z-index:10}.drawing-note{max-width:250px}body.inside footer{background:#edece5ed}#loading p{max-width:280px;text-align:center;line-height:1.8}
@media(min-width:1000px){.intro{width:290px}.plan{width:155px;right:28px}.plan svg{height:93px}.right-tools{right:28px}.scene-caption{left:44%;bottom:130px}}
@media(max-width:650px){#scene{top:195px;bottom:85px}.intro{top:96px}h1{font-size:30px;margin:8px 0}.intro .primary{padding:7px 12px;font-size:9px}.right-tools{bottom:206px;gap:7px}.right-tools button:nth-child(3){margin-top:0}body.inside .right-tools{top:auto;bottom:212px}.plan{bottom:100px;right:12px;width:85px}.plan svg{height:52px}.plan-title{font-size:4.5px}.plan-bottom{font-size:4.5px}.scene-caption{bottom:106px;font-size:5.5px}.light-switch{min-height:36px}header{padding-top:18px}.round{background:#f6f5edc9}}
.credits{font-size:9px!important;line-height:1.6!important}.credits a{color:#526d83}button{touch-action:manipulation}#roomPanel:not(.open){visibility:hidden}#roomPanel.open{visibility:visible}body.inside .scene-caption{background:#f4f3e9a0;padding:7px 9px;border-radius:4px;backdrop-filter:blur(6px)}
/* Crisp architectural UI: thin SVG strokes and clear, consistent tap targets. */
.round svg,nav svg,.primary svg{width:18px;height:18px;display:block;stroke:currentColor;stroke-width:1.45;fill:none;stroke-linecap:round;stroke-linejoin:round}.round{display:grid;place-items:center}.primary svg{width:20px;height:20px}nav button{display:flex;align-items:center;gap:7px}nav svg{width:15px;height:15px}#scene{opacity:1;transition:opacity .2s ease}#scene.changing-room{opacity:0}canvas{image-rendering:auto}.plan svg{shape-rendering:geometricPrecision}header,.intro,footer,.plan,.room-panel{-webkit-font-smoothing:antialiased}button:disabled{opacity:.4;cursor:wait}.right-tools{gap:11px}.scene-caption{letter-spacing:1.4px}.intro h1{font-size:clamp(34px,3.7vw,51px);max-width:320px}.intro{width:320px}.intro .primary{font-size:12px}.plan{box-shadow:0 12px 35px #272e3510}.plan-title{font-weight:600}.specs small{font-size:7px}body.inside header{pointer-events:none}body.inside header button,body.inside header a{pointer-events:auto}body.inside .header-center{opacity:.5}
@media(max-width:650px){.intro{width:calc(100% - 48px)}.intro h1{font-size:30px}.intro .primary{font-size:10px}.round svg{width:16px;height:16px}nav button{gap:4px}nav svg{width:13px;height:13px}.right-tools{gap:8px}}
#restAction{position:fixed;left:50%;bottom:126px;transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:16px 20px;background:#faf5e9ed;border:1px solid #fff9;border-radius:8px;backdrop-filter:blur(18px);box-shadow:0 12px 45px #44352216;z-index:4;max-width:calc(100% - 36px)}#restAction[hidden]{display:none}#restAction p{font-size:10px;line-height:1.6;margin:6px 0 0;color:#7e7768;max-width:270px}#restAction .primary{min-width:160px;white-space:nowrap;padding:15px 20px}.night header{background:linear-gradient(#e7decee8,transparent)}@media(max-width:650px){#restAction{left:16px;right:16px;bottom:99px;transform:none;max-width:none;gap:12px;padding:12px}#restAction .eyebrow{font-size:5px}#restAction p{font-size:8px;max-width:145px}#restAction .primary{min-width:112px;font-size:9px;padding:13px 10px}body:has(#restAction:not([hidden])) .plan{bottom:190px}body:has(#restAction:not([hidden])) .scene-caption{bottom:181px}}
/* On narrow screens the rest action stays small so the bed remains visible. */
@media(max-width:650px){#restAction{left:16px;right:auto;max-width:calc(100% - 32px);padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}#restAction>div{display:none}#restAction .primary{min-width:140px;font-size:10px;border-radius:4px}body:has(#restAction:not([hidden])) .plan{bottom:100px}body:has(#restAction:not([hidden])) .scene-caption{bottom:156px}}
/* Touch locomotion shares the same collision system as keyboard walking. */
.move-stick{display:none;--stick-x:0px;--stick-y:0px;position:fixed;left:max(20px,env(safe-area-inset-left));bottom:calc(114px + env(safe-area-inset-bottom));width:112px;height:112px;border:1px solid #ffffffb0;border-radius:50%;background:#faf7f044;backdrop-filter:blur(12px);box-shadow:0 4px 24px #24354720;z-index:7;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;padding:0;outline-offset:5px}
.stick-rings{position:absolute;inset:13px;border:1px solid #ffffffb3;border-radius:50%;pointer-events:none}.stick-rings:before,.stick-rings:after{content:'';position:absolute;background:#ffffff65}.stick-rings:before{width:1px;height:100%;left:50%}.stick-rings:after{height:1px;width:100%;top:50%}.stick-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:#526d83d9;border:1px solid #ffffffd9;box-shadow:0 3px 12px #24354738;transform:translate(var(--stick-x),var(--stick-y));pointer-events:none}.stick-label{position:absolute;left:0;right:0;bottom:-22px;font-size:7px;letter-spacing:1.5px;color:#556b7b;pointer-events:none}.move-stick.held{background:#f4f4ee70}.move-stick.unavailable{opacity:.35;pointer-events:none}body:has(#roomPanel.open) .move-stick,body:has(dialog[open]) .move-stick{visibility:hidden}
@media(max-width:850px),(pointer:coarse){body.inside .move-stick{display:block}}
@media(max-width:650px){
 body.inside header{height:74px;padding:16px 18px}body.inside .wordmark{font-size:24px;letter-spacing:5px}body.inside .wordmark small{font-size:5px;letter-spacing:3px}
 body.inside #scene{top:0;bottom:0}body.inside footer{height:calc(74px + env(safe-area-inset-bottom));padding:10px 12px calc(10px + env(safe-area-inset-bottom));z-index:6}
 body.inside nav button{min-height:44px;padding:10px 12px;font-size:9px}body.inside .light-switch{min-width:44px;min-height:44px;justify-content:center}body.inside .switch{display:none}
 body.inside .plan{top:84px;right:12px;bottom:auto;width:82px;padding:8px;background:#f7f6efbf}body.inside .plan svg{height:48px}body.inside .plan-bottom{display:none}
 body.inside .right-tools{top:auto;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));gap:9px}body.inside .right-tools button{width:44px!important;height:44px!important;margin-top:0}body.inside #zoomIn,body.inside #zoomOut{display:none}
 body.inside .scene-caption,body.inside:has(#restAction:not([hidden])) .scene-caption{left:18px;bottom:calc(255px + env(safe-area-inset-bottom));font-size:6px;max-width:180px;pointer-events:none}
 #restAction{left:auto;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));max-width:calc(100% - 155px)}#restAction .primary{min-width:132px;padding:14px 12px;font-size:10px}
 .room-panel{bottom:calc(84px + env(safe-area-inset-bottom));max-height:calc(100dvh - 175px);z-index:9}.room-panel>button{min-height:56px}
 #toast{top:80px;max-width:calc(100% - 30px);font-size:10px;padding:10px 14px;width:max-content;z-index:12}
}
@media(max-height:500px) and (max-width:950px){
 body.inside header{height:60px;padding:10px 16px}body.inside .plan{display:none}body.inside footer{height:64px;padding:8px 16px}body.inside #scene{inset:0}
 .move-stick{width:88px;height:88px;left:16px;bottom:88px}.stick-knob{width:38px;height:38px;margin:-19px}.stick-label{bottom:-17px}
 body.inside .right-tools{top:75px;bottom:auto;right:14px;gap:7px}body.inside #zoomIn,body.inside #zoomOut{display:none}
 body.inside .scene-caption,body.inside:has(#restAction:not([hidden])) .scene-caption{left:16px;top:72px;bottom:auto}#restAction{left:auto;right:14px;bottom:78px}.room-panel{bottom:74px;max-height:calc(100dvh - 95px)}
}
@media(max-height:500px) and (max-width:950px){body.inside .wordmark{font-size:24px}#restAction{left:auto;right:14px;transform:none;padding:0;border:0;background:none;box-shadow:none}#restAction>div{display:none}#restAction .primary{min-width:132px;padding:12px 14px;font-size:10px}}
.stick-rings:before{top:0}.stick-rings:after{left:0}
@media(max-width:650px){body.inside:has(#restAction:not([hidden])) .plan{top:84px;bottom:auto;height:auto}}
@media(max-height:500px) and (max-width:950px){body.inside:has(#restAction:not([hidden])) .plan{display:none}}
@media(max-width:650px){body.inside header{height:calc(74px + env(safe-area-inset-top));padding-top:calc(16px + env(safe-area-inset-top))}body.inside .plan,body.inside:has(#restAction:not([hidden])) .plan{top:calc(84px + env(safe-area-inset-top))}}