:root{color-scheme:light;--ink:#203c34;--paper:#f7f6f0;--line:#d8ded5;--muted:#647269;--green:#315d49;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:#e8e7df}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c99f55;outline-offset:3px}button{border:0}#app{height:100dvh;min-height:520px;position:relative;overflow:hidden}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:0;left:0;right:0;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(#f7f6f0f2,#f7f6f000);pointer-events:none}.topbar>*{pointer-events:auto}.identity{display:flex;gap:13px;align-items:center}.mark{width:43px;height:43px;background:var(--ink);color:var(--paper);border-radius:12px;display:grid;place-items:center;font-size:30px}h1{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0 0 4px;letter-spacing:-.7px}.identity p{font-size:12px;margin:0;color:var(--muted)}.identity p span{padding:0 6px}.quiet{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:12px}.quiet:hover{background:#e7ede4}.controlbar{position:absolute;top:102px;left:30px;display:flex;align-items:center;gap:17px;padding:8px 10px;background:#f9f8f3f5;border:1px solid #fff9;box-shadow:0 4px 24px #203c3412;border-radius:13px}.modes{display:flex;gap:3px}.modes button{padding:10px 15px;border-radius:8px;color:var(--ink);background:transparent;font-size:13px;white-space:nowrap}.modes button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.modes button:hover:not([aria-pressed=true]){background:#e8ece4}.room-select{display:flex;gap:7px;align-items:center;font-size:12px}.room-select label{color:var(--muted)}select{border:0;background:transparent;color:var(--ink);max-width:175px;padding:9px 4px}select:disabled{opacity:.5}.toggle{display:flex;gap:6px;align-items:center;font-size:12px;cursor:pointer}.toggle input{accent-color:var(--ink);width:15px;height:15px}.controlbar>.quiet{padding:9px 10px;background:transparent}.view-label{position:absolute;bottom:90px;left:31px;pointer-events:none;text-shadow:0 1px 12px #f7f6f0}.view-label>span,.eyebrow{letter-spacing:2px;font-size:10px;font-weight:600}.view-label h2{font:400 27px Georgia,serif;margin:9px 0 8px}.view-label p{font-size:12px;color:#3c5043;margin:0}.help{position:absolute;z-index:5;top:88px;right:30px;width:300px;max-width:calc(100% - 40px);border:1px solid var(--line);background:var(--paper);padding:24px;border-radius:14px;box-shadow:0 16px 50px #203c3420}.help h2,dialog h2{font:400 25px Georgia,serif;margin:0 0 15px}.help p,dialog p{font-size:13px;line-height:1.65;color:#4c5d50}.help button,dialog button{background:var(--ink);color:white;border-radius:8px;padding:11px 18px}.map-panel{position:absolute;bottom:65px;right:30px;width:220px;background:#f7f6f0ef;border:1px solid #fff9;border-radius:12px;box-shadow:0 5px 25px #203c3415;overflow:hidden}.map-panel>button{display:flex;justify-content:space-between;width:100%;padding:13px 15px;background:transparent;color:var(--ink);font-size:12px;text-align:left}#map{width:100%;height:auto;display:block;cursor:crosshair}#map-area p{font-size:10px;text-align:center;color:var(--muted);margin:2px 8px 12px}footer{position:absolute;left:30px;right:30px;bottom:17px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#4c5d50}.dot{padding:0 7px}footer .quiet{background:#f7f6f0bb;font-size:11px;padding:7px 10px}.walk-controls{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);text-align:center;user-select:none;touch-action:none}.walk-controls button{width:45px;height:43px;margin:2px;background:#f7f6f0ee;color:var(--ink);border:1px solid #ffffffc9;border-radius:10px;font-size:23px;box-shadow:0 2px 10px #0001;touch-action:none}.walk-controls button:active{background:var(--ink);color:white}.walk-controls[hidden]{display:none}dialog{border:1px solid var(--line);padding:30px;border-radius:15px;max-width:470px;width:calc(100% - 36px);background:var(--paper);color:var(--ink);box-shadow:0 15px 80px #0003}dialog::backdrop{background:#16312666;backdrop-filter:blur(5px)}#loading{position:absolute;inset:0;z-index:10;background:var(--paper);display:grid;place-items:center;text-align:center;transition:opacity .4s}#loading[hidden]{display:none}#loading h2{font:400 32px Georgia,serif;letter-spacing:-.5px;margin:16px 0}#loading p{font-size:13px;color:var(--muted)}.progress{height:3px;background:#dce2d6;border-radius:3px;overflow:hidden;width:250px;margin:25px auto}#load-progress{height:100%;background:var(--ink);width:5%;transition:width .2s}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:900px){.controlbar{gap:8px;flex-wrap:wrap;max-width:calc(100% - 40px);left:20px}.topbar{padding:20px}.map-panel{right:20px;width:180px}.view-label{left:20px;bottom:85px}footer{left:20px;right:20px}.room-select{gap:2px}.modes button{padding:10px 12px}}@media(max-width:600px){#app{min-height:650px}.identity p{font-size:10px}.identity p span{padding:0 3px}h1{font-size:22px}.mark{width:35px;height:35px;font-size:25px;border-radius:10px}.topbar{padding:16px;align-items:flex-start}.topbar>.quiet{font-size:11px;padding:8px;max-width:74px}.controlbar{top:86px;left:14px;max-width:calc(100% - 28px);padding:7px;gap:5px}.modes{width:100%;justify-content:space-between}.modes button{flex:1;padding:10px}.room-select{flex:1}select{max-width:170px}.controlbar>.quiet{font-size:11px;padding:7px}.view-label{left:17px;bottom:82px;max-width:calc(100% - 170px)}.view-label h2{font-size:22px}.view-label p{font-size:11px;line-height:1.4}.map-panel{right:14px;bottom:75px;width:145px}.map-panel>button{padding:10px;font-size:11px}#map-area p{font-size:9px}.walk-controls{bottom:210px;left:50%}footer{left:14px;right:14px;bottom:13px;font-size:10px;align-items:flex-end}footer>span{max-width:190px;line-height:1.5}.help{right:15px;top:75px}.dot{padding:0 3px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.orbit-controls{position:absolute;bottom:94px;left:50%;transform:translateX(-50%);display:flex;gap:6px;white-space:nowrap}.orbit-controls[hidden]{display:none}.orbit-controls button{padding:10px 12px;border:1px solid #ffffffbb;border-radius:10px;background:#f7f6f0ed;color:var(--ink);font-size:23px;box-shadow:0 2px 10px #0001}.orbit-controls button span{font-size:11px;vertical-align:middle;margin:0 3px}.orbit-controls button:hover{background:#e8ece4}@media(max-width:900px){.controlbar{max-width:calc(100% - 40px)}}@media(max-width:600px){.controlbar{max-width:calc(100% - 28px)}.controlbar .toggle{font-size:11px}.orbit-controls{bottom:220px}.orbit-controls button{padding:9px}.orbit-controls button span{font-size:10px}}

/* Compact touch layout and safe areas for portrait and landscape phones. */
.controlbar{z-index:3;gap:14px}.controlbar .quiet{min-height:40px}.view-settings{position:absolute;top:calc(100% + 8px);right:0;display:grid;gap:12px;width:265px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #203c3424}.view-settings[hidden]{display:none}.view-settings .toggle{min-height:34px}.view-settings .toggle input{width:20px;height:20px}.quality-label{display:grid;gap:5px;font-size:12px}.quality-label select{max-width:none;background:#e8ece4;border-radius:7px;min-height:42px;padding:8px}.walk-controls button{width:48px;height:46px}.help{max-height:calc(100dvh - 100px);overflow-y:auto;z-index:6}button{touch-action:manipulation}.map-panel{z-index:2}.map-panel>button{min-height:44px}
@media(max-width:600px){
 body{overflow:hidden;overscroll-behavior:none}#app{height:100dvh;min-height:0}.topbar{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.identity{gap:8px}.identity p{font-size:9px}.identity h1{font-size:22px}.topbar>.quiet{min-height:44px;max-width:78px}
 .controlbar{top:calc(78px + env(safe-area-inset-top));left:12px;right:12px;max-width:none;gap:5px;padding:6px;border-radius:12px}.modes{width:100%}.modes button{min-height:44px;font-size:12px}.room-select{min-width:0;flex:1;gap:5px;padding-left:6px}.room-select select{max-width:none;min-width:0;width:100%;min-height:44px;font-size:13px}.controlbar>.quiet{min-height:44px;padding:8px 12px;font-size:12px}.view-settings{right:0;width:min(280px,calc(100vw - 26px))}
 .view-label{bottom:calc(175px + env(safe-area-inset-bottom));left:16px;max-width:calc(100% - 32px)}.view-label h2{font-size:23px;margin:6px 0}.view-label p{font-size:11px}.walk-controls{left:16px;transform:none;bottom:calc(47px + env(safe-area-inset-bottom))}.walk-controls button{width:50px;height:48px;margin:2px;font-size:25px;border-radius:12px}.map-panel{right:12px;bottom:calc(53px + env(safe-area-inset-bottom));width:138px}.map-panel>button{padding:10px 12px;font-size:12px}.orbit-controls{bottom:calc(110px + env(safe-area-inset-bottom));gap:8px}.orbit-controls button{min-width:110px;min-height:48px;padding:8px 12px}.orbit-controls button span{font-size:11px}
 footer{left:14px;right:12px;bottom:calc(9px + env(safe-area-inset-bottom));font-size:9px}footer>span{max-width:190px}footer .quiet{min-height:36px;font-size:10px}.help{top:calc(65px + env(safe-area-inset-top));right:12px;width:310px;max-height:calc(100dvh - 90px);padding:20px}dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
}
@media(max-height:500px) and (orientation:landscape){
 #app{min-height:0;height:100dvh}.topbar{padding:9px 16px}.identity h1{font-size:19px}.identity p{display:none}.mark{width:30px;height:30px;font-size:22px}.topbar>.quiet{padding:7px 10px}.controlbar{top:53px;left:12px;right:auto;max-width:calc(100% - 24px);flex-wrap:nowrap;gap:8px}.modes{width:auto}.modes button{min-height:36px;padding:7px 10px}.room-select{max-width:205px}.room-select select{min-height:36px;font-size:12px}.controlbar>.quiet{min-height:36px}.view-label{left:16px;bottom:145px;max-width:calc(100% - 32px)}.view-label>span,.view-label p{display:none}.view-label h2{font-size:20px}.walk-controls{left:14px;transform:none;bottom:38px}.walk-controls button{width:44px;height:39px;margin:1px;font-size:22px}.orbit-controls{bottom:65px}.map-panel{width:130px;bottom:45px;right:14px}footer{bottom:7px}.help{top:48px;max-height:calc(100dvh - 60px)}
}

.room-select label{white-space:nowrap}
@media(max-height:500px) and (orientation:landscape){.orbit-controls{left:16px;transform:none;bottom:55px}}

@media(max-width:600px) and (max-height:680px) and (orientation:portrait){.view-label{display:none}}