:root{--ink:#183c33;--muted:#718077;--cream:#f8f7f2;--green:#2c5a45;--line:#dce1d9;--lime:#dce8a4}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--cream);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #afbb56;outline-offset:3px}button{color:inherit}button:hover{filter:brightness(.96)}.header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:15px;color:inherit;text-decoration:none;align-items:center}.brand-mark{background:var(--green);color:var(--cream);font-size:23px;font-weight:700;width:49px;height:49px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 0 1px #ffffff22}.brand-mark span{font-size:9px;position:absolute;bottom:3px;right:4px;color:#d8e39b}.brand-copy{font-weight:650;font-size:18px;letter-spacing:1px}.brand-copy small{display:block;font-size:8px;font-weight:600;letter-spacing:2.2px;color:var(--muted);margin-top:6px}.header-right{display:flex;align-items:center;gap:20px}.model-badge{font-size:11px;font-weight:550;display:flex;align-items:center;gap:8px}.model-badge i,.live-dot{width:6px;height:6px;border-radius:50%;background:#739069;display:inline-block}.icon-btn{border:1px solid var(--line);border-radius:50%;width:33px;height:33px;background:#fff9;font-size:18px;display:inline-flex;align-items:center;justify-content:center}.header .icon-btn{font-size:16px}.layout{height:calc(100dvh - 88px);display:grid;grid-template-columns:300px 1fr}.sidebar{padding:37px 26px 24px 34px;overflow:auto;display:flex;flex-direction:column}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:700;color:#84927d}.intro h1{font-size:34px;line-height:1.4;letter-spacing:-1px;margin:17px 0 13px;font-weight:550}.intro h1 em{font-style:normal;font-weight:750;position:relative}.intro h1 em:after{content:"";height:8px;background:#dce6ab;position:absolute;bottom:1px;left:0;right:0;z-index:-1}.intro p{font-size:12px;color:var(--muted);line-height:1.9;margin:0}.explore-heading{display:flex;justify-content:space-between;align-items:center;margin-top:31px;margin-bottom:12px}.explore-heading h2{font-size:11px;font-weight:650;margin:0}.explore-heading span{font-size:7px;letter-spacing:1px;color:#9ba69c}.locations{display:flex;flex-direction:column;gap:4px}.location{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;padding:11px 10px}.loc-icon{font-size:22px;width:30px;flex-shrink:0;font-weight:400;color:#77907b}.location>span:nth-child(2){font-size:12px;font-weight:650}.location small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:4px}.location b{font-size:14px;font-weight:400;margin-left:auto;color:#9ca999}.location.selected{background:#e9eddf;border-color:#dde3cc}.location.selected .loc-icon,.location.selected b{color:#31583b}.model-note{margin-top:auto;padding-top:24px;display:flex;gap:10px;color:var(--muted)}.note-icon{border:1px solid #aab6a7;border-radius:50%;width:15px;height:15px;flex-shrink:0;text-align:center;font-size:11px}.model-note strong{font-size:10px;font-weight:600}.model-note p{font-size:10px;line-height:1.7;margin:6px 0}.model-note button{font-size:10px;padding:0;border:0;background:none;color:#426345;text-decoration:underline;text-underline-offset:3px}.viewer{position:relative;overflow:hidden;min-width:0;background:#e8ede6}.viewer:fullscreen{width:100%;height:100%;background:#e8ede6}#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.viewer-top{position:absolute;top:23px;left:27px;right:26px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.view-label{display:flex;align-items:center;gap:9px;font-size:11px;color:#4d6455;font-weight:600}.view-label #view-mode{font-size:9px;color:#8a978a;font-weight:400;border-left:1px solid #aabaac;padding-left:9px;margin-left:3px}.viewer-actions{display:flex;gap:7px;pointer-events:auto}.viewer-actions .icon-btn{background:#fff8;border-color:#fff7}.hotspot{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:7px;white-space:nowrap;background:#fffef9ef;color:#375242;border:1px solid #dfe5d7;border-radius:30px;padding:8px 12px;font-size:10px;font-weight:600;box-shadow:0 3px 16px #2b403016;transition:opacity .2s}.hotspot:after{content:"";width:5px;height:5px;border-radius:50%;background:#75925f;box-shadow:0 0 0 4px #dfe8d4}.hotspot:hover{background:#f5f7e8;transform:translate(-50%,-100%) scale(1.04)}.orientation{position:absolute;right:24px;bottom:128px;width:73px;text-align:center;pointer-events:none;color:#6e826f}.orientation>span{font-size:10px;letter-spacing:2px;position:absolute;top:38px;left:30px}.orientation svg{width:73px;height:73px;stroke:#b2c0ac;fill:none;stroke-width:1}.orientation path{fill:#859c71;stroke:none;transform-origin:50% 50%}.orientation small{display:block;font-size:8px;letter-spacing:1px;margin-top:-3px}.hint{position:absolute;bottom:120px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;letter-spacing:.25px;color:#6d806c;pointer-events:none}.hint>span:first-child{font-size:21px;color:#82967b}.toolbar{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;background:#fcfcf7ed;backdrop-filter:blur(10px);border:1px solid #ffffff;border-radius:14px;padding:7px;box-shadow:0 8px 26px #1b3a2512}.mode-tabs{display:flex;gap:3px}.mode-tabs button,.tool-option{border:0;background:none;font-size:10px;padding:11px 13px;border-radius:8px;color:#6a7d6a}.mode-tabs button span{font-size:14px;margin-right:3px}.mode-tabs button.active{background:#315543;color:#fff}.tool-divider{height:22px;width:1px;background:var(--line)}.tool-option{padding:8px 4px;display:flex;align-items:center;gap:5px}.tool-option span:first-child{font-size:19px}.tool-option:not(.active){opacity:.4}.zoom{display:flex;align-items:center;border:1px solid #e2e7dc;border-radius:8px;overflow:hidden;margin-right:1px}.zoom button{border:0;background:transparent;font-size:18px;width:30px;height:30px}.zoom button+button{border-left:1px solid #e2e7dc}.viewer-footer{position:absolute;bottom:20px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#92a08e;pointer-events:none}.viewer-footer span:first-child{letter-spacing:1px}.walk-controls{position:absolute;bottom:160px;left:25px;text-align:center;color:#698060}.walk-controls[hidden]{display:none}.walk-controls>span{display:block;font-size:9px;margin-top:7px}.dpad{display:grid;grid-template-columns:repeat(3,36px);gap:4px}.dpad button{height:36px;border:1px solid #fff;background:#ffffffc9;border-radius:9px;font-size:19px;touch-action:none;user-select:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}dialog{border:1px solid #dde4d5;border-radius:20px;background:#fcfcf8;color:var(--ink);padding:35px;max-width:520px;max-height:85dvh;box-shadow:0 30px 100px #14382433}dialog::backdrop{background:#153f3677;backdrop-filter:blur(5px)}dialog>.dialog-close.icon-btn{position:absolute;right:18px;top:18px}dialog h2{font-size:24px;line-height:1.5;margin-top:17px}dialog p{font-size:13px;line-height:1.85;color:#667765}.dialog-controls{padding:16px 0;border-top:1px solid var(--line)}.dialog-controls>div{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;font-size:11px}.dialog-controls span{color:#7b8d77}.primary-btn{border:0;background:#345a42;border-radius:8px;color:#fff;padding:12px 20px;font-size:12px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);background:#193e33;color:white;padding:12px 21px;border-radius:25px;box-shadow:0 5px 30px #0002;font-size:12px;opacity:0;pointer-events:none;transition:all .25s}.toast.show{opacity:1;transform:translate(-50%,0)}#webgl-error{position:absolute;inset:0;display:grid;align-content:center;text-align:center;background:var(--cream);padding:30px}#webgl-error[hidden]{display:none}#webgl-error p{font-size:14px}.hotspots{pointer-events:none;position:absolute;inset:0}.hotspot{pointer-events:auto}[hidden]{display:none!important}
@media(min-width:1600px){.layout{grid-template-columns:340px 1fr}.sidebar{padding:45px 35px 30px 44px}.intro h1{font-size:40px}.location{padding:13px}.intro p{font-size:14px}.location>span:nth-child(2){font-size:14px}.location small{font-size:11px}}
@media(max-height:800px) and (min-width:901px){.sidebar{padding-top:23px}.intro h1{font-size:30px;margin:12px 0 8px}.explore-heading{margin-top:22px}.location{padding:8px}.model-note{padding-top:15px}.intro p{font-size:11px}}
@media(max-width:900px){.header{height:72px;padding:0 21px}.layout{height:calc(100dvh - 72px);grid-template-columns:245px 1fr}.sidebar{padding:29px 18px 20px 22px}.intro h1{font-size:30px}.intro .eyebrow{font-size:7px}.toolbar{gap:7px}.mode-tabs button{padding:10px 9px;font-size:9px}.option-text{display:none}.orientation{right:13px;bottom:150px}.viewer-top{left:20px;right:18px}.model-badge{font-size:10px}.viewer-footer{left:20px;right:20px}.hint{font-size:9px}.tool-divider{display:none}}
@media(max-width:650px){.header{height:66px;padding:0 17px}.brand-mark{width:39px;height:39px;font-size:20px;border-radius:10px}.brand{gap:11px}.brand-copy{font-size:14px;letter-spacing:.5px}.brand-copy small{font-size:6px;letter-spacing:1.5px;margin-top:4px}.model-badge{font-size:8px;gap:5px}.header-right{gap:10px}.header .icon-btn{width:27px;height:27px;font-size:13px}.layout{height:calc(100dvh - 66px);display:flex;flex-direction:column-reverse}.sidebar{padding:0 12px 12px;background:#fafaf5;border-top:1px solid var(--line);flex-shrink:0;overflow:visible}.intro,.model-note,.explore-heading{display:none}.locations{flex-direction:row;overflow-x:auto;padding:10px 0 0;gap:7px;scrollbar-width:none}.location{padding:10px 12px;flex-shrink:0;background:#f0f2e9;border-color:transparent;border-radius:8px;gap:6px}.loc-icon{font-size:15px;width:17px}.location>span:nth-child(2){font-size:10px;white-space:nowrap}.location small,.location b{display:none}.location.selected{background:#dde7cd;border-color:#ccd8b6}.viewer{flex:1;min-height:0}.viewer-top{top:17px;left:17px;right:14px}.view-label{font-size:10px;gap:7px}.view-label #view-mode{font-size:8px}.viewer-actions{gap:6px}.viewer-actions .icon-btn{width:30px;height:30px}.toolbar{bottom:38px;padding:6px;border-radius:12px;gap:6px;max-width:calc(100% - 26px)}.mode-tabs button{font-size:9px;padding:10px 8px}.mode-tabs button span{font-size:13px;margin-right:1px}.tool-option{padding:7px 3px}.zoom button{width:24px;font-size:17px;height:29px}.hint{bottom:96px;font-size:8px;gap:6px}.hint>span:first-child{font-size:17px}.viewer-footer{bottom:13px;left:17px;right:17px;font-size:6px;letter-spacing:.8px}.orientation{right:12px;bottom:124px;width:58px;opacity:.7}.orientation svg{width:58px;height:58px}.orientation>span{font-size:8px;top:30px;left:25px}.orientation small{font-size:6px}.hotspot{font-size:9px;padding:7px 10px}.walk-controls{bottom:135px;left:16px}.dpad{grid-template-columns:repeat(3,34px)}.dpad button{height:34px}.walk-controls>span{font-size:8px}.toast{bottom:95px;font-size:10px;padding:10px 16px;max-width:90%;text-align:center}dialog{margin:auto 20px;padding:30px 24px}dialog h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.view-label{padding:7px 11px;border-radius:20px;background:#f7f9efb8;backdrop-filter:blur(8px)}.hint>span:last-child{background:#f5f8edb3;padding:5px 10px;border-radius:20px}.viewer-footer{color:#51654f;text-shadow:0 1px 5px #ffffff}
/* Pixel Room v2: crisp pixels, chunky controls and a restrained game-like palette. */
:root{--ink:#244b3d;--muted:#6e8168;--cream:#f5f1d9;--green:#365d42;--line:#c5cdaa;--lime:#d6e38e}
body{background:#f5f1d9}.header{border-bottom:3px solid #365d42;background:#f8f4df}.brand-mark{border-radius:0;box-shadow:3px 3px 0 #b0bd7b;font-family:monospace;border:2px solid #244b3d}.brand-copy small,.eyebrow,.explore-heading>span,.viewer-footer,.model-badge{font-family:monospace}.brand-copy small{font-size:9px;letter-spacing:1.6px}.eyebrow{color:#76854f;font-size:10px;letter-spacing:.8px}.intro h1{font-weight:750;letter-spacing:-.7px}.intro h1 em:after{height:10px;background:#d4df90}.intro p{line-height:1.9}.sidebar{background:#f6f2dd}.location{border-radius:2px;border:2px solid transparent}.location.selected{background:#e3e8b9;border:2px solid #75915a;box-shadow:3px 3px 0 #c0ce91}.location small{color:#758469}.loc-icon{font-family:monospace}.location b{font-family:monospace;color:#65834f}.viewer{background:#e8ede4}#scene{image-rendering:auto}.icon-btn{border:2px solid #8a9e75;border-radius:2px;background:#f7f6df;box-shadow:2px 2px 0 #c2cca5;font-family:monospace;font-weight:bold}.viewer-actions .icon-btn{background:#f9f7e4;border-color:#8a9e75}.view-label{border:2px solid #b4c198;border-radius:1px;background:#f8f6e0ee;backdrop-filter:none;padding:7px 9px}.live-dot,.model-badge i{border-radius:0;width:7px;height:7px;background:#8aab51}.hotspot{border-radius:0;border:2px solid #789365;background:#fbf9e2;box-shadow:3px 3px 0 #bacda2;padding:7px 9px}.hotspot:after{border-radius:0;background:#88a558;box-shadow:0 0 0 3px #dbe7b5}.hotspot:hover{transform:translate(-50%,-100%);background:#e9eec9}.toolbar{border-radius:2px;border:2px solid #496c47;box-shadow:5px 5px 0 #a4b58b;background:#f9f8df;backdrop-filter:none}.mode-tabs button{border-radius:0;border:1px solid transparent}.mode-tabs button.active{background:#3c6548;border-color:#234835;box-shadow:inset 0 -3px 0 #2b4d36}.tool-option{border-radius:0}.zoom{border-radius:0;border:2px solid #a6b88c}.zoom button+button{border-left:1px solid #a6b88c}.hint>span:last-child{background:#f5f7dbd9;border-radius:0;padding:5px 9px}.viewer-footer{font-size:9px;letter-spacing:.6px}.dpad button{border-radius:0;border:2px solid #59784e;box-shadow:2px 2px 0 #a3b78d;background:#f8f8df;font-family:monospace;font-weight:bold}.dpad button:active{background:#dbe6ad;transform:translate(1px,1px);box-shadow:1px 1px 0 #a3b78d}.orientation svg circle{stroke-dasharray:4 4}.orientation>span{font-family:monospace}dialog{border-radius:3px;border:3px solid #426647;box-shadow:8px 8px 0 #7f976c;background:#faf7df}dialog::backdrop{backdrop-filter:blur(2px)}.primary-btn{border-radius:0;border:2px solid #22412c;background:#456e42;box-shadow:3px 3px 0 #b2c385}.toast{border-radius:1px;background:#31583b;border:2px solid #d8e4ac;box-shadow:4px 4px 0 #819873}.note-icon{border-radius:0}.model-note button{text-decoration-thickness:2px}
@media(max-width:650px){.header{border-bottom-width:2px}.brand-mark{width:38px;height:38px;border-radius:0}.brand-copy{font-size:14px}.brand-copy small{font-size:6px;letter-spacing:.8px}.model-badge{font-size:7px;max-width:105px;line-height:1.4}.header-right{gap:8px}.sidebar{background:#f7f3dc;border-top:2px solid #91a477;padding-bottom:14px}.location{border-radius:1px;padding:9px 10px;background:#e9edcc}.location.selected{box-shadow:2px 2px 0 #aabd88}.toolbar{padding:5px;gap:5px;bottom:40px;box-shadow:4px 4px 0 #a4b58b}.mode-tabs button{padding:9px 6px;font-size:9px}.zoom button{width:23px}.view-label{padding:6px 8px}.view-label #view-mode{font-size:7px}.hotspot{font-size:8px;padding:6px 8px}.viewer-footer{font-size:6px}.dpad button{height:34px}.intro h1{font-size:30px}}

/* V3: real cubic geometry at normal screen resolution, not a pixelated image. */
.intro h1{font-size:31px;line-height:1.45}.intro p{font-size:11px}.explore-heading{margin-top:20px}.location{padding:8px 10px}.model-note{padding-top:12px}.model-note p{font-size:9px}.viewer-footer{letter-spacing:1px}
@media(max-width:650px){.dpad{grid-template-columns:repeat(3,44px)}.dpad button{height:44px}.walk-controls{bottom:132px}.location{padding:10px 12px}}

@media(max-height:820px) and (min-width:651px){.sidebar{padding-top:20px;padding-bottom:14px}.intro h1{font-size:27px;margin-top:10px;margin-bottom:8px}.intro p{line-height:1.7;margin:0}.explore-heading{margin-top:19px;margin-bottom:10px}.locations{gap:4px}.location{padding:6px 8px}.location>span:nth-child(2){font-size:11px}.location small{font-size:9px;line-height:1.3;margin-top:2px}.model-note{margin-top:15px;padding-top:12px}.model-note p{font-size:8px;line-height:1.6}}

/* V4 corridor interaction and smaller, comfortably tappable controls. */
.door-controls{position:absolute;right:24px;bottom:170px;display:flex;flex-direction:column;align-items:center;gap:7px}.door-controls button{min-height:44px;min-width:116px;border:2px solid #486a45;background:#f7f6db;color:#31573b;box-shadow:3px 3px 0 #a4b58b;padding:11px 18px;font-weight:650}.door-controls button:disabled{opacity:.55}.door-controls small{font-size:10px;background:#f5f5dedb;padding:5px 7px}.location{padding-top:5px;padding-bottom:5px}.model-note{margin-top:10px}.intro h1{font-size:27px}.intro p{font-size:10px}.model-note p{font-size:8px}
@media(max-width:650px){.door-controls{right:16px;bottom:144px}.door-controls button{min-width:105px;padding:10px 13px;font-size:12px}.door-controls small{font-size:8px}.location{padding:10px 12px}.orientation{display:none}.view-label #view-mode{display:none}}
@media(max-height:500px){.walk-controls{bottom:116px}.door-controls{bottom:120px}.hint{display:none}}