.experience-controls{position:fixed;inset:0;pointer-events:none;font:12px system-ui,sans-serif;color:#efece4;z-index:3}
.experience-modes{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.experience-modes button{display:flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid #545962;border-radius:2px;font:11px/20px 'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;background:#0e1116ed;color:#b8bdc6;cursor:pointer;transition:background .2s,color .2s,border-color .2s;box-shadow:0 3px 16px #0002}
.experience-modes button:hover{background:#202735;border-color:#8fb3ff}.experience-modes button[aria-pressed=true]{background:#8fb3ff;border-color:#8fb3ff;color:#07080b}
.experience-controls button:focus-visible{outline:2px solid #8fb3ff;outline-offset:3px}.experience-controls button:disabled{opacity:.3;cursor:default}
.experience-floors{position:absolute;top:20px;right:68px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #ffffff30;border-radius:8px;background:#14252dd9;box-shadow:0 8px 28px #0002;backdrop-filter:blur(12px);pointer-events:auto}
.experience-floors button{font:inherit;color:inherit;border:0;border-radius:5px;background:transparent;padding:10px 13px;cursor:pointer}.experience-floors button:hover{background:#ffffff18}
.experience-floors span{min-width:80px;text-align:center;font-variant-numeric:tabular-nums}.experience-floors[hidden]{display:none}
.experience-angle{position:fixed;right:16px;bottom:64px;padding:7px 10px;border-radius:6px;background:#14252dd9;color:#efece4;font:11px system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none;z-index:3}.experience-angle[hidden]{display:none}
@media(max-width:650px){.experience-floors{top:12px;right:60px}.experience-floors button{padding:9px}.experience-floors span{min-width:64px}.experience-modes{bottom:12px;gap:6px}.experience-modes button{padding:7px 8px;font-size:10px;gap:5px}.experience-angle{right:12px;bottom:58px}}
@media(prefers-reduced-motion:reduce){.experience-controls button{transition:none}}

@media(max-width:650px){html[data-continuous-demo] #reset{bottom:60px}}

/* All viewer actions share the mode buttons' rectangular visual language. */
.experience-floors{gap:0;padding:0;border:1px solid #545962;border-radius:2px;background:#0e1116ed;box-shadow:0 3px 16px #0002;backdrop-filter:none;font:11px/20px ui-monospace,SFMono-Regular,Consolas,monospace;color:#b8bdc6}
.experience-floors button{border-radius:0;padding:8px 12px;font:14px/20px ui-monospace,monospace;transition:background .2s,color .2s}.experience-floors button:hover{background:#202735;color:#8fb3ff}
html[data-continuous-demo] #reset{border:1px solid #545962;border-radius:2px;background:#0e1116ed;color:#b8bdc6;font:14px/20px ui-monospace,monospace;padding:8px 12px;box-shadow:0 3px 16px #0002;transition:background .2s,color .2s}
html[data-continuous-demo] #reset:hover{background:#202735;color:#8fb3ff}html[data-continuous-demo] #reset:focus-visible{outline:2px solid #8fb3ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html[data-continuous-demo] #reset,.experience-floors button{transition:none}}

/* One thumb-friendly navigation dock; floor navigation appears only inside. */
html[data-embedded] #reset{display:none}
.experience-modes{bottom:max(16px,env(safe-area-inset-bottom));gap:4px;padding:5px;border:1px solid #ffffff26;border-radius:10px;background:#0e1116ed;box-shadow:0 6px 24px #0003;max-width:calc(100% - 16px)}
.experience-modes button{min-height:44px;justify-content:center;border-color:transparent;background:transparent;border-radius:6px;white-space:nowrap;box-shadow:none}
.experience-modes .experience-theater{min-width:44px;padding:6px;font:24px/24px system-ui,sans-serif;border-left:1px solid #ffffff26;border-radius:0 6px 6px 0}
.experience-floors{top:auto;right:auto;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 66px);transform:translateX(-50%);border-color:#ffffff26;border-radius:8px}
.experience-floors button{min-width:44px;min-height:44px}
@media(max-width:650px){
 .experience-modes{width:max-content;gap:2px;bottom:max(12px,env(safe-area-inset-bottom))}
 .experience-modes button{padding:8px 12px;font-size:11px;min-height:44px}
 .experience-modes button span[aria-hidden]{display:none}
 .experience-floors{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 66px)}
}
@media(max-height:450px){.experience-modes{bottom:8px}.experience-floors{bottom:70px}}

/* El canvas dice que se puede tomar: mano abierta, y cerrada mientras se arrastra. */
#city canvas{cursor:grab}
#city canvas:active{cursor:grabbing}

/* The authored floor programme lives in the existing navigation dock. */
.experience-floors select{min-height:44px;min-width:80px;max-width:min(230px,calc(100vw - 120px));padding:8px 24px 8px 10px;border:0;border-radius:0;background:#0e1116;color:inherit;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;text-overflow:ellipsis}
.experience-floors select:focus-visible{outline:2px solid #8fb3ff;outline-offset:2px}.experience-floors select:disabled{opacity:.4;cursor:default}