:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f8fafc;background:#101c25;font-synthesis:none;color-scheme:dark;--glass:rgba(15,26,35,.86);--line:rgba(230,241,249,.18);--accent:#f4cc90}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;font-size:.875rem}button{cursor:pointer;color:inherit;background:none;border:1px solid var(--line);border-radius:9px;min-height:44px;padding:0 16px;transition:background .16s}button:hover{background:rgba(255,255,255,.12)}button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:wait}#app{width:100%;height:100svh;min-height:320px;position:relative;overflow:hidden;background:#91acbe}#viewport,#fallback,#viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#viewport{touch-action:none;cursor:grab}#viewport:active{cursor:grabbing}#fallback{object-fit:cover;filter:brightness(.55)}#fallback[hidden]{display:none}#viewport canvas{outline:none}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 30px;background:linear-gradient(180deg,rgba(8,20,29,.78),transparent);pointer-events:none}.identity{display:flex;align-items:center;gap:13px;text-shadow:0 1px 12px #0005}.identity>svg{width:32px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.5}.identity h1{font-size:1.1rem;font-weight:550;letter-spacing:.01em;line-height:1.2;margin:0}.identity p{font-size:.75rem;letter-spacing:.18em;margin:6px 0 0;color:#dce6ec}.header-actions{display:flex;gap:8px;pointer-events:auto}.icon-button{width:44px;padding:0;border-radius:50%;background:var(--glass);backdrop-filter:blur(16px);display:grid;place-items:center}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-button span{font-size:1.15rem}.location-pill{position:absolute;left:30px;top:110px;border:1px solid var(--line);border-radius:30px;display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--glass);font-size:.875rem;backdrop-filter:blur(18px)}.view-dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}.control-bar{position:absolute;bottom:67px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--glass);box-shadow:0 10px 50px #0004;backdrop-filter:blur(20px);white-space:nowrap}.mode-group{display:flex;border-radius:8px;background:#07141b8a;padding:3px}.mode-group button{border:0;min-height:40px;padding:0 15px;color:#c4cdd3}.mode-group button.active{color:#fff;background:#344653;box-shadow:0 1px 4px #0003}.divider{width:1px;height:25px;background:var(--line);margin:0 2px}.room-picker{display:flex;align-items:center;gap:5px;padding-left:6px}.room-picker svg{width:20px;height:20px;fill:none;stroke:#c7d5df;stroke-width:1.5}.room-picker select{color:#eef5fa;border:0;background:transparent;min-height:44px;max-width:185px;padding:0 15px 0 6px;cursor:pointer}.room-picker option{background:#182933;color:white}.accent{background:var(--accent);color:#17232a;border-color:var(--accent);font-weight:650}.accent:hover{background:#ffdcaa;color:#17232a}.hint{position:absolute;bottom:31px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#e4eaf0;padding:7px 12px;border-radius:6px;text-shadow:0 1px 4px #000;background:#101c255c;white-space:nowrap}.hint span{padding:0 10px;color:#c9d8e3}.model-note{position:absolute;bottom:10px;left:20px;color:#e1e7eb;font-size:.75rem;text-shadow:0 1px 3px #000;background:#17232a66;padding:3px 6px;border-radius:4px;pointer-events:none}#touch-controls{display:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0a172935;backdrop-filter:blur(2px)}#loading[hidden]{display:none}.loading-card{max-width:360px;width:calc(100% - 60px);background:rgba(12,27,39,.90);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 12px 70px #0004}.eyebrow{font-size:.75rem;letter-spacing:.16em;color:var(--accent);font-weight:650}.loading-card h2{font-size:1.85rem;letter-spacing:-.03em;margin:14px 0 9px;font-weight:550}.loading-card p{font-size:1rem;color:#c8d5de;line-height:1.6;margin:0 0 26px}.progress-track{height:3px;background:#ffffff1a;border-radius:4px;overflow:hidden}#progress{height:100%;width:3%;background:var(--accent);transition:width .2s}#load-percent{display:block;font-size:.75rem;color:#aabac5;margin-top:12px}#retry{margin-top:18px}#toast{position:absolute;left:50%;bottom:147px;transform:translate(-50%,10px);opacity:0;transition:opacity .2s,transform .2s;font-size:.875rem;background:var(--glass);border:1px solid var(--line);padding:12px 18px;border-radius:12px;pointer-events:none;max-width:80%;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #50616e;border-radius:18px;background:#142733;color:#f4f8fc;padding:36px;max-width:640px;width:calc(100% - 32px);max-height:85svh;box-shadow:0 24px 90px #0007}dialog::backdrop{background:#06121cb3;backdrop-filter:blur(5px)}dialog .close-dialog.icon-button{position:absolute;right:15px;top:15px;font-size:1.4rem}dialog h2{font-weight:550;font-size:1.6rem;margin:13px 0 25px;letter-spacing:-.02em}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}.help-grid h3{font-size:.9375rem;font-weight:600;margin:0 0 7px}.help-grid p{color:#bdcbd6;font-size:1rem;line-height:1.65;margin:0 0 15px}dialog>.accent{margin-top:12px}.is-loading .control-bar,.is-loading .hint,.is-loading #touch-controls{visibility:hidden}
@media (pointer:coarse){#touch-controls{display:block}#desktop-hint{display:none}#joystick{position:absolute;width:108px;height:108px;bottom:66px;left:30px;border-radius:50%;background:#11222c66;border:1px solid #ffffff45;backdrop-filter:blur(8px);touch-action:none;user-select:none;box-shadow:inset 0 0 0 21px #ffffff09}#joystick-knob{position:absolute;width:44px;height:44px;left:32px;top:32px;border-radius:50%;background:#d8e4ec99;border:1px solid #fff9;box-shadow:0 3px 10px #0003;pointer-events:none}.joystick-cross:before,.joystick-cross:after{content:"";position:absolute;background:#ffffff30;left:24px;top:53px;width:58px;height:1px}.joystick-cross:after{transform:rotate(90deg)}#joystick>span{position:absolute;top:120px;left:0;right:0;text-align:center;font-size:.75rem;letter-spacing:.15em;text-shadow:0 1px 3px #000}#look-hint{position:absolute;right:35px;bottom:74px;display:grid;justify-items:center;gap:14px;pointer-events:none}#look-hint svg{width:48px;height:32px;stroke:#fff7;fill:none;stroke-width:1}#look-hint span{font-size:.75rem;letter-spacing:.11em;color:#e5edf3;text-shadow:0 1px 3px #000}.control-bar{bottom:auto;top:168px}#toast{bottom:210px}#app.overview #touch-controls{display:none}}
@media(max-width:600px){#app{min-height:320px}.topbar{padding:calc(16px + env(safe-area-inset-top)) 17px 22px}.identity{gap:9px}.identity>svg{width:26px;height:30px}.identity h1{font-size:.95rem}.identity p{font-size:.75rem;letter-spacing:.14em}.header-actions{gap:7px}.location-pill{left:17px;top:calc(91px + env(safe-area-inset-top));font-size:.75rem;padding:8px 12px}.control-bar{top:calc(139px + env(safe-area-inset-top));bottom:auto;gap:4px;padding:7px;border-radius:13px;width:calc(100% - 32px);flex-wrap:wrap;justify-content:space-between}.mode-group button{padding:0 12px;min-height:44px;font-size:.875rem}.divider{display:none}.room-picker{padding-left:0;flex:1;justify-content:flex-end}.room-picker select{max-width:154px;font-size:.875rem;padding-right:4px}.room-picker svg{width:16px}.control-bar>.accent,.control-bar>#roof-toggle{flex:1;min-height:39px;margin-top:4px;font-size:.875rem}.control-bar>#enter.hidden-mobile{display:none}.model-note{left:12px;right:12px;text-align:center;bottom:calc(9px + env(safe-area-inset-bottom));font-size:.75rem;background:none}#joystick{left:26px;bottom:calc(69px + env(safe-area-inset-bottom))}#look-hint{right:27px;bottom:calc(89px + env(safe-area-inset-bottom))}dialog{padding:30px 25px}.help-grid{grid-template-columns:1fr;gap:3px}dialog h2{font-size:1.35rem;padding-right:20px}#toast{bottom:240px;max-width:90%;width:max-content}.hint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}[hidden]{display:none!important}
@media (pointer:coarse) and (max-height:500px){#app{min-height:280px}.topbar{padding:12px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left))}.location-pill{top:78px;left:max(20px,env(safe-area-inset-left))}.control-bar{top:80px;bottom:auto;max-width:calc(100% - 310px);padding:6px;gap:4px}.mode-group button{padding:0 10px}.room-picker select{max-width:140px}.control-bar>#enter{display:none}.control-bar>.divider{display:none}#joystick{width:92px;height:92px;left:max(24px,env(safe-area-inset-left));bottom:39px}#joystick-knob{left:24px;top:24px}.joystick-cross:before,.joystick-cross:after{left:16px;top:45px}#joystick>span{top:99px}#look-hint{bottom:55px;right:max(32px,env(safe-area-inset-right));gap:7px}.model-note{bottom:7px}#toast{bottom:70px}}

/* Compact, scene-first controls. Keep room context in the header rather than a third floating row. */
:root{--glass:rgba(12,22,31,.9);--line:rgba(230,241,249,.22)}
.topbar{padding:20px 24px 35px}.identity p{font-size:.875rem;letter-spacing:0;color:#e1e9ed;margin-top:5px;line-height:1.4}
.identity h1{font-weight:650}.control-bar{border-radius:18px;padding:8px;gap:8px;bottom:68px}.mode-group{border-radius:12px}.mode-group button{border-radius:9px;min-height:44px}.room-picker select{max-width:220px;min-width:150px}.room-picker select:focus-visible{outline-offset:0;border-radius:7px}
.hint{font-size:.875rem;bottom:23px;padding:8px 12px;background:rgba(12,22,31,.84);border:1px solid var(--line);border-radius:12px}.hint kbd{font:inherit;font-weight:650;color:#fff}.hint span{padding:0 5px}.model-note{bottom:12px;font-size:.75rem;opacity:.85}.control-bar button{min-height:44px}.control-bar>.accent,.control-bar>#roof-toggle{min-height:44px}
#joystick{border:1px solid #ffffff75;background:rgba(12,22,31,.52)}#joystick-knob{background:rgba(245,249,252,.78)}#look-hint span,#joystick>span{font-size:.875rem;letter-spacing:.06em}.is-loading .identity p{opacity:.65}
@media(pointer:coarse){.control-bar{top:92px;bottom:auto}#toast{bottom:210px}}
@media(max-width:600px){
 .topbar{padding:calc(12px + env(safe-area-inset-top)) 16px 25px}.identity h1{font-size:1rem}.identity p{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;letter-spacing:0}.identity>svg{display:none}
 .control-bar{top:calc(82px + env(safe-area-inset-top));width:calc(100% - 24px);gap:5px;padding:6px;border-radius:15px;align-items:stretch}.mode-group{flex:none}.mode-group button{padding:0 10px}.room-picker{min-width:0;flex:1}.room-picker select{width:100%;max-width:none;min-width:0;font-size:.875rem;padding-right:2px}.room-picker svg{display:none}.control-bar>.accent,.control-bar>#roof-toggle{margin-top:0;min-height:44px}
 #joystick{left:22px;bottom:calc(66px + env(safe-area-inset-bottom))}#look-hint{right:24px;bottom:calc(82px + env(safe-area-inset-bottom))}.model-note{bottom:calc(8px + env(safe-area-inset-bottom));font-size:.75rem}.hint{display:none}
}
@media(pointer:coarse) and (max-height:500px){
 .topbar{padding:10px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));right:auto;width:230px}.identity h1{font-size:.9375rem}.identity p{font-size:.875rem;max-width:160px}.header-actions{position:fixed;right:max(14px,env(safe-area-inset-right));top:10px}
 .control-bar{top:10px;left:50%;max-width:calc(100% - 390px);width:auto;min-width:240px;flex-wrap:wrap;transform:translateX(-50%);padding:5px}.mode-group button{padding:0 9px}.room-picker select{max-width:150px;min-width:90px}.control-bar>#enter{display:none}.model-note{bottom:7px}
}
@media(max-width:360px){.control-bar .mode-group button{padding:0 8px}.room-picker select{font-size:.875rem}.identity p{max-width:170px}}

@media(max-width:600px) and (min-height:501px){.control-bar{display:grid;grid-template-columns:auto minmax(0,1fr)}.control-bar>.accent,.control-bar>#roof-toggle{grid-column:1 / -1}.room-picker{width:100%;justify-content:stretch}}
