:root{--ink:#263e37;--muted:#7b8376;--paper:#f3f1e9;--line:#344b3524}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Microsoft JhengHei',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #507b68;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}#room-app{height:100dvh;min-height:650px;position:relative;overflow:hidden}header{position:absolute;top:27px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;z-index:3}.brand{font-weight:700;letter-spacing:-.5px;font-size:16px}.brand span{font-size:10px;font-weight:400;letter-spacing:2px;margin-left:15px;color:var(--muted)}.header-actions{display:flex;gap:24px;align-items:center;font-size:11px}.header-actions button{border:0;background:none;padding:8px}.intro{position:absolute;top:94px;left:40px;pointer-events:none;z-index:2}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#718373}h1{font-family:Georgia,serif;font-size:clamp(25px,3vw,43px);font-weight:400;margin:10px 0 12px;letter-spacing:-1.5px}.intro p{font-size:11px;letter-spacing:1px;color:var(--muted)}#room-canvas{position:absolute;inset:130px 0 125px}canvas{display:block;touch-action:none;width:100%;height:100%}#hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:1px solid #fff9;border-radius:50%;background:#54735ef0;color:#fff;width:34px;height:34px;font:15px Georgia;box-shadow:0 3px 14px #314b3323;transition:background .2s,opacity .2s}.hotspot:hover,.hotspot.active{background:#233e32;outline:4px solid #809b7444}.hotspot span{position:absolute;left:42px;top:7px;white-space:nowrap;font:10px Arial;background:#f7f5ecef;color:var(--ink);padding:4px 7px;border-radius:4px;opacity:0;transition:opacity .2s}.hotspot:hover span,.hotspot:focus-visible span{opacity:1}.room-toolbar{position:absolute;right:38px;bottom:162px;display:flex;gap:5px}.room-toolbar button{background:#fff9;border:1px solid var(--line);border-radius:7px;padding:8px 11px;font-size:11px}.room-toolbar button[aria-pressed=true]{background:var(--ink);color:white}.bottom{position:absolute;bottom:21px;left:38px;right:38px;text-align:center;pointer-events:none}#status{font-size:11px;color:var(--muted);min-height:16px}nav{pointer-events:auto;display:flex;justify-content:center;gap:8px;margin:17px auto 24px}nav button{padding:12px 21px;border:1px solid var(--line);border-radius:30px;background:#f8f7f0d9;display:flex;align-items:center;gap:12px;font-size:12px}nav button b{font:15px Georgia;color:#738673}nav button.active{background:var(--ink);color:white}nav button.active b{color:#b6cbb4}.bottom-line{border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.1px;color:var(--muted)}.bottom-line label{pointer-events:auto;font-size:10px;display:flex;align-items:center;gap:5px;letter-spacing:0}input{accent-color:#537967}#loading{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:14px;padding:20px 26px;display:flex;align-items:center;gap:12px;background:#fbfaf5ed;box-shadow:0 10px 50px #30463818;font-size:12px;z-index:4}#loading[hidden]{display:none}#loading i{width:7px;height:7px;border-radius:50%;background:#719774}#retry{border:0;background:#e5eadc;border-radius:5px;padding:8px}dialog{position:fixed;inset:0 30px 0 auto;margin:auto 0;width:410px;max-width:calc(100vw - 30px);max-height:85dvh;border:1px solid #fff;border-radius:20px;background:#fbfaf4;box-shadow:0 20px 100px #273c3433;padding:35px;overflow:auto;color:var(--ink)}dialog::backdrop{background:#24382718;backdrop-filter:blur(1px)}dialog h2{font:32px/1.3 Georgia,'Microsoft JhengHei',serif;letter-spacing:-1px;margin:17px 0 25px}#close-details{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px}#detail-body{font-size:13px;line-height:1.9;color:#5d6b61}#detail-body article{padding:17px 0;border-top:1px solid var(--line)}#detail-body h3{font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);margin:4px 0 9px}#detail-body .meta{font-size:9px;letter-spacing:1px;color:#88937f}#detail-body p{margin:7px 0 12px}#detail-body a{display:inline-block;border-bottom:1px solid #759378;margin-top:7px;font-size:11px}#detail-body img{width:100%;height:145px;object-fit:cover;border-radius:9px;margin:10px 0}#back-room{margin-top:25px;background:var(--ink);color:#fff;border:0;border-radius:25px;padding:13px 20px;font-size:12px}.fallback{position:fixed;inset:0;background:var(--paper);display:grid;place-content:center;z-index:10}@media(max-width:700px){#room-app{min-height:660px}header{left:20px;right:20px;top:23px}.brand{font-size:14px}.brand span{display:none}.header-actions{gap:8px;font-size:10px}.intro{left:22px;top:84px}h1{font-size:29px}.intro p{font-size:10px}#room-canvas{inset:167px 0 170px}.bottom{left:18px;right:18px;bottom:20px}nav{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:390px;margin:12px auto 15px}nav button{justify-content:center;padding:10px 12px;font-size:11px;gap:9px}.room-toolbar{right:20px;bottom:208px}.bottom-line{font-size:6px;letter-spacing:.3px}.bottom-line #metrics{display:none}.bottom-line label{font-size:9px}.hotspot{width:28px;height:28px;font-size:12px}.hotspot span{display:none}dialog{inset:auto 0 0;margin:0 auto;width:100%;max-width:100%;max-height:76dvh;border-radius:22px 22px 0 0;padding:28px}.eyebrow{font-size:8px}#status{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}
#room-canvas{top:90px;bottom:106px}dialog::backdrop{backdrop-filter:none;background:#2438270d}
@media(max-width:700px){#room-canvas{top:158px;bottom:172px}}
/* Immersive mode: the room is the page, UI is a restrained in-world HUD. */
#room-app{min-height:0;height:100dvh}#room-canvas{inset:0;outline:none}header{pointer-events:none}header a,header button{pointer-events:auto}.brand span{letter-spacing:1px}#room-nav[hidden]{display:none}.bottom{bottom:18px}.bottom-line{border:0;padding-top:8px}.bottom-line #metrics{display:none}#status{font-size:12px;color:#354d40;text-shadow:0 1px 4px #fff}.room-toolbar{bottom:90px}.hotspot{width:22px;height:22px;font-size:0;background:#fcfff5aa;border:2px solid #49645088;box-shadow:0 0 0 5px #fff3}.hotspot:hover,.hotspot.near{background:#52745e}.hotspot span{font:11px Arial;top:-2px;left:30px}.hotspot.near span{opacity:1}#interact{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:5;background:#243c32ee;color:#fff;border:1px solid #ffffff40;border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 30px #16251f25;white-space:nowrap;font-size:13px}#interact[hidden],#cinema-controls[hidden],#tv-player[hidden]{display:none}kbd{background:#ffffff20;border:1px solid #ffffff55;border-radius:5px;padding:4px 7px;font:12px Arial}#tv-player{position:absolute;top:0;left:0;width:960px;height:540px;transform-origin:0 0;z-index:2;background:#080c0b}#tv-player iframe{width:100%;height:100%;border:0;display:block}#cinema-controls{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:6;background:#f7f5edef;border:1px solid #fff;border-radius:12px;padding:12px 18px;display:flex;gap:12px;align-items:center;max-width:95vw;font-size:11px}#cinema-controls strong{white-space:nowrap}#cinema-controls span{max-width:240px;color:#5b685e;line-height:1.5}#cinema-controls button{border:0;border-radius:20px;background:#284334;color:white;padding:9px 14px;white-space:nowrap}#cinema-controls a{white-space:nowrap;text-decoration:underline}#touch-pad{display:none}body.watching .hotspot,body.watching #interact{display:none}body.watching .room-toolbar{display:none}
@media(max-width:700px){header{top:18px;left:18px;right:18px}.header-actions a{display:none}.bottom{left:12px;right:12px;bottom:12px}#status{font-size:10px}.room-toolbar{right:15px;bottom:115px}#interact{bottom:183px;font-size:11px;padding:10px 12px}#touch-pad{position:absolute;bottom:96px;left:20px;display:grid;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,35px);gap:3px;z-index:4}#touch-pad button{border:1px solid #71857860;border-radius:8px;background:#f5f4e8cc;touch-action:none}#touch-pad button:first-child{grid-column:2}#touch-pad button:nth-child(2){grid-row:2;grid-column:1}#touch-pad button:nth-child(3){grid-row:2;grid-column:2}#touch-pad button:nth-child(4){grid-row:2;grid-column:3}#cinema-controls{bottom:68px;flex-wrap:wrap;width:90vw;gap:8px}#cinema-controls span{flex:1;font-size:9px}#cinema-controls a{font-size:10px}body.watching #touch-pad{display:none}}