*{box-sizing:border-box}body{margin:0;background:#dce5e9;color:#182c37;font-family:Segoe UI,Arial,sans-serif;overflow:hidden}#viewport{position:fixed;inset:0}#viewport canvas{display:block;touch-action:none}header{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}h1{font-size:27px;font-weight:650;margin:6px 0}h1 span{font-weight:350;color:#607480}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;color:#526876}button,select{font:inherit;font-size:14px;border:1px solid #b8c8ce;border-radius:7px;padding:10px 12px;background:#fff;color:#243f4e;cursor:pointer}button:hover{background:#e6f4f1}button:focus-visible,select:focus-visible{outline:3px solid #069c8d;outline-offset:2px}.panel{position:absolute;top:127px;left:28px;width:232px;padding:19px;background:#fffffff0;box-shadow:0 8px 36px #27424e12;border-radius:12px}.floors{display:flex;margin:16px 0 8px}.floors button{flex:1;padding:9px 6px;border-radius:0}.floors button:first-child{border-radius:6px 0 0 6px}.floors button:last-child{border-radius:0 6px 6px 0}.floors .active{background:#203f50;color:white;border-color:#203f50}p{line-height:1.6;font-size:14px}#floorInfo{font-size:13px;min-height:37px;color:#617480}.panel>button{width:100%;margin-bottom:9px}.primary{background:#087f77;color:white;border-color:#087f77;font-weight:600}.primary:hover{background:#08685f}.panel label{display:block;font-size:14px;margin-top:17px}.panel select{width:100%;margin-top:7px}.check{display:flex!important;align-items:center;gap:8px}.check input{accent-color:#087f77;width:16px;height:16px}.note{border-top:1px solid #dbe4e7;margin-top:19px;padding-top:14px;font-size:12px;line-height:1.7}.note span{color:#647881}footer{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:30px;background:#203f50e8;color:white;font-size:13px;text-align:center;max-width:90vw;width:max-content}#status{position:absolute;top:101px;left:50%;transform:translateX(-50%);background:#ffffffec;padding:8px 17px;border-radius:20px;font-size:13px;pointer-events:none}.map{position:absolute;bottom:85px;right:25px;background:#fffffff0;padding:13px;border-radius:12px}.map canvas{width:150px;height:237px;display:block;margin-top:10px}#crosshair{display:none;position:absolute;left:50%;top:50%;font-size:24px;color:white;text-shadow:0 1px 4px black;pointer-events:none}dialog{max-width:880px;width:92vw;max-height:90vh;border:0;border-radius:14px;padding:28px;color:#203f50}dialog::backdrop{background:#0b2336a8}dialog #close{float:right}dialog li{font-size:14px;line-height:1.6;margin:8px 0}.references{display:flex;gap:20px}.references figure{margin:0;flex:1}.references img{width:100%}figcaption{padding:8px}#touch{display:none;position:absolute;bottom:90px;left:30px;text-align:center}#touch button{width:46px;height:44px;margin:2px;touch-action:none}body.walking #crosshair{display:block}body.walking #touch{display:block}@media(max-width:700px){header{top:14px;left:14px;right:14px}header h1{font-size:21px}header .eyebrow{font-size:9px}header button{font-size:12px;max-width:130px}.panel{left:14px;top:96px;width:174px;padding:12px}.panel .eyebrow,.note{display:none}.panel label{margin-top:10px}.map{right:12px;bottom:85px;padding:8px}.map canvas{width:95px;height:150px}#status{top:auto;bottom:62px;max-width:90vw;text-align:center}footer{bottom:12px;font-size:11px;padding:9px;width:92vw}.references{display:block}.references figure{margin-bottom:15px}}

#dimensions{position:fixed;inset:0;pointer-events:none}.dimension{position:absolute;transform:translate(-50%,-50%);font-size:11px;max-width:115px;text-align:center;line-height:1.35;background:#ffffffec;padding:3px 5px;border:1px solid #73938e;border-radius:3px}.panel #plan.active{background:#087f77;color:white}body.plan-mode .map{display:none}body.plan-mode .dimension{z-index:1}.panel,header{z-index:2}
.dimension{max-width:90px;font-size:11px}.dimension.narrow{transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;max-width:none}
.dimension{white-space:pre-line} @media(max-width:700px){.panel{width:calc(100% - 28px);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;top:86px}.panel .floors{grid-column:1/-1;margin:0}.panel #floorInfo,.panel .check{display:none!important}.panel>button{font-size:12px;padding:7px;margin:0}.panel>label:not(.check){grid-column:1/-1;margin:0;font-size:12px}.panel select{margin-top:3px;padding:6px}.dimension{font-size:9px;max-width:70px;padding:2px}body.plan-mode header,body.plan-mode .panel{opacity:.94}}

#walkHud{display:none;position:fixed;top:18px;right:20px;z-index:4;align-items:center;gap:8px;background:#fffffff0;border-radius:10px;padding:8px}#walkHud span{font-size:12px;padding:0 8px;color:#274b57}body.walking #walkHud{display:flex}body.walking:not(.walk-menu) header,body.walking:not(.walk-menu) .panel{display:none}body.walking .map{opacity:.8;bottom:80px}body.walking #status{top:24px;left:24px;transform:none}body.walking #touch{display:none}body.walking.walk-menu #crosshair{display:none}body.walking.walk-menu header{display:none}body.walking .panel{top:85px}#viewport canvas:focus{outline:none}@media(pointer:coarse){body.walking:not(.walk-menu) #touch{display:block}}@media(max-width:700px){#walkHud{top:12px;left:12px;right:12px;justify-content:space-between}#walkHud span{font-size:10px;padding:0}#walkHud button{font-size:12px;padding:8px}body.walking #status{top:72px;bottom:auto;left:50%;transform:translateX(-50%);font-size:11px;width:max-content}body.walking.walk-menu #status{display:none}}
.references{flex-wrap:wrap}.references figure{flex:1 1 240px}

.presentation-bar{display:none;position:fixed;left:24px;right:24px;bottom:24px;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;background:#fffffff2;backdrop-filter:blur(16px);border:1px solid #ffffffa8;border-radius:14px;box-shadow:0 12px 35px #1e353922;z-index:8}.presentation-bar strong{display:block;font-size:20px;font-weight:500;margin-top:5px}.presentation-bar .eyebrow{font-size:10px}.presentation-bar nav,.presentation-actions{display:flex;gap:6px}.presentation-bar button{font-size:13px;border-color:transparent;background:transparent}.presentation-bar button:hover{background:#edf1ec}.presentation-bar button.active{background:#233d3e;color:#fff}body.presenting .presentation-bar{display:flex}body.presenting header,body.presenting .panel,body.presenting #walkHud,body.presenting #status,body.presenting .map,body.presenting #help,body.presenting #crosshair,body.presenting #touch{display:none!important}#present{border-color:#47665b;color:#304e42;background:#eef3ed}@media(max-width:700px){.presentation-bar{left:10px;right:10px;bottom:10px;padding:10px;flex-wrap:wrap;gap:8px}.presentation-bar>div:first-child{display:none}.presentation-bar nav{width:100%;overflow:auto}.presentation-bar nav button{flex:1;padding:8px 5px;font-size:12px}.presentation-actions{margin-left:auto}.presentation-bar button{padding:7px 10px}}

/* Phone walkthrough: two independent thumbs, with controls above safe areas. */
[hidden]{display:none!important}
.panel{max-height:calc(100dvh - 145px);overflow-y:auto;overscroll-behavior:contain}
.panel .quality-label{margin-bottom:12px}.panel #offlineStatus{font-size:12px;line-height:1.4;margin:8px 0}
#joystick{width:116px;height:116px;border:1px solid #ffffffa0;border-radius:50%;background:#203f5070;backdrop-filter:blur(5px);display:grid;place-items:center;touch-action:none;user-select:none}
#joystick span{width:46px;height:46px;border-radius:50%;background:#fffffff2;box-shadow:0 3px 15px #162d4666;pointer-events:none}
#joystick.engaged{background:#087f7790}.touch-caption{text-align:center;color:white;font-size:11px;letter-spacing:2px;margin-top:8px;text-shadow:0 1px 3px #182c37}
#lookHint{display:none;position:fixed;right:24px;bottom:95px;color:white;background:#203f50aa;padding:10px 13px;border-radius:20px;font-size:12px;pointer-events:none}
.hud-floors{display:flex;gap:4px}.hud-floors .active{background:#203f50;color:white}#walkHud button{min-height:44px}
.presentation-actions #tourWalk{background:#087f77;color:white}.presentation-bar{padding-bottom:max(15px,env(safe-area-inset-bottom))}
@media(pointer:coarse){
 body.walking:not(.walk-menu):not(.presenting) #lookHint{display:block}
 #touch{left:max(22px,env(safe-area-inset-left));bottom:max(35px,env(safe-area-inset-bottom))}
 body.walking #help{display:none}body.walking .map{display:none}
 body.walking #crosshair{opacity:.55}
 button,select{min-height:44px}
}
@media(max-width:700px){
 .panel{max-height:calc(100dvh - 110px)}
 #walkHud{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));gap:4px;padding:6px;flex-wrap:wrap}
 #walkHud>span{width:100%;text-align:center;font-size:11px}
 #walkHud button{padding:8px;font-size:12px}
 body.walking #status{top:98px}
 .presentation-bar{bottom:max(10px,env(safe-area-inset-bottom))}.presentation-actions{width:100%;justify-content:flex-end}
 #offlineStatus{grid-column:1/-1}.panel .quality-label{margin:0}
}
@media(pointer:coarse) and (max-height:500px){
 header{top:10px}.panel,body.walking .panel{top:70px;max-height:calc(100dvh - 80px);width:min(420px,calc(100% - 28px));left:max(14px,env(safe-area-inset-left))}
 #walkHud{top:8px;left:auto;right:max(10px,env(safe-area-inset-right))}#walkHud>span{display:none}
 body.walking #status{top:15px;left:18px;transform:none}
 #joystick{width:102px;height:102px}#touch{bottom:16px}#lookHint{bottom:55px}
 .presentation-bar{left:14px;right:14px;bottom:8px;padding:8px;flex-wrap:nowrap}.presentation-bar>div:first-child{display:none}.presentation-bar nav{width:auto;flex:1}.presentation-actions{width:auto}.presentation-bar button{padding:8px;font-size:12px}
}
