:root{color-scheme:dark;--paper:#f5f1e7;--ink:#292b27;--accent:#d7b678;font-family:Arial,'PingFang SC',sans-serif;color:var(--paper);font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1d1b16}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0;background:none}#room{position:relative;width:100%;height:100%;overflow:hidden}#poster,#canvas-host{position:absolute;inset:0;width:100%;height:100%}#poster{object-fit:cover;transition:opacity .7s}#poster.ready{opacity:0;pointer-events:none}canvas{display:block;width:100%;height:100%}.masthead{position:absolute;z-index:3;inset:28px 40px auto;display:flex;align-items:center;gap:30px}.identity{display:flex;align-items:center;gap:30px;text-decoration:none;color:inherit;white-space:nowrap}.monogram{font-size:44px;letter-spacing:-5px;font-weight:600;line-height:1}.identity strong{font-size:18px;font-weight:600;display:block}.identity small{font-size:12px;display:block;margin-top:4px;opacity:.72;letter-spacing:.5px}nav{margin-left:auto;display:flex;gap:25px}nav button{font-size:14px;padding:12px 0;text-shadow:0 1px 8px #0008;transition:opacity .2s}nav button:hover{opacity:.65}.round{width:40px;height:40px;border:1px solid #ffffff8a;border-radius:50%;font-size:18px;background:#151b1522;backdrop-filter:blur(8px)}#hotspots{position:absolute;inset:0;pointer-events:none;transition:opacity .35s}.hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%);pointer-events:auto;display:flex;width:max-content;white-space:nowrap;gap:16px;align-items:center;text-align:left;padding:14px 16px;background:#242722c7;box-shadow:0 6px 24px #0002;border:1px solid #eeeeee1a;border-radius:10px;backdrop-filter:blur(14px);font-size:14px;line-height:1.2;transition:background .2s,box-shadow .2s,translate .2s}.hotspot small{display:block;font-size:11px;margin-top:6px;opacity:.66}.hotspot .arrow{font-size:14px;border:1px solid #ffffff78;border-radius:50%;width:18px;height:18px;display:grid;place-items:center}.hotspot:hover{background:#393e33e0;box-shadow:0 7px 32px #0005;translate:0 -3px}.welcome{position:absolute;bottom:76px;left:40px;padding:21px 23px;background:#232621bb;backdrop-filter:blur(14px);border-radius:11px;width:204px;font-size:13px;line-height:1.55;box-shadow:0 8px 25px #0002;transition:opacity .3s}.welcome strong{font-weight:600}.welcome p{margin:2px 0 6px}.welcome>span{font-size:10px;opacity:.7}.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;text-align:center;text-shadow:0 1px 5px #0008;opacity:.8}.hint span{display:block;font-size:24px;margin-top:7px}#return{position:absolute;bottom:36px;left:40px;border:1px solid #fff4;background:#242722c9;padding:14px 20px;border-radius:30px;backdrop-filter:blur(14px)}body.focused #hotspots,body.focused .welcome,body.focused .hint{opacity:0;pointer-events:none}body.focused .hotspot{pointer-events:none}#loading{position:absolute;bottom:30px;right:40px;font-size:12px;letter-spacing:.4px;width:200px;color:#f5f1e7c9;transition:opacity .6s}#loading span{float:right}#loading i{display:block;margin-top:10px;height:2px;background:linear-gradient(to right,var(--accent) calc(var(--progress,0)*1%),#ffffff2a 0)}#loading.done{opacity:0;pointer-events:none}#review{position:absolute;right:20px;bottom:15px;background:#181b18f2;border:1px solid #ffffff30;border-radius:9px;z-index:10;padding:10px 14px;font-size:12px;max-width:350px}#review label{display:block;margin:12px 0}#review pre{white-space:pre-wrap;font-size:11px;line-height:1.4;color:#bdc9bc}#review summary{cursor:pointer;min-width:130px}body.loading .hotspot{pointer-events:none;opacity:.5}@media(max-width:700px){.masthead{inset:20px 20px auto;gap:12px}.identity{gap:16px}.identity strong{font-size:14px}.identity small{font-size:10px}.monogram{font-size:36px}nav{display:flex;position:fixed;left:20px;right:20px;bottom:18px;margin:0;justify-content:space-around;gap:8px;background:#242722d9;border:1px solid #ffffff24;border-radius:30px;backdrop-filter:blur(14px);padding:0 10px}nav button{font-size:12px;min-height:44px;min-width:44px;flex:1}.round{margin-left:auto}.welcome{left:20px;bottom:82px;width:170px;font-size:11px;padding:16px}.hotspot{font-size:12px;padding:12px;gap:9px;min-height:44px}.hotspot small{font-size:10px}.hotspot .arrow{display:none}.hint{display:none}#loading{right:20px;bottom:18px;width:150px}#return{left:20px;bottom:30px}#review{max-width:280px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The reference's interface is composed on the same 1672-wide scene grid. */
#room{--ui-scale:1}
.socials{position:absolute;left:calc(48px * var(--ui-scale));bottom:calc(25px * var(--ui-scale));display:flex;align-items:center;gap:calc(22px * var(--ui-scale));z-index:3;transition:opacity .3s}
.socials a,.socials button{display:grid;place-items:center;width:28px;height:32px;color:var(--paper);padding:4px;border-radius:4px}
.socials img,.socials svg{width:20px;height:20px}.socials a:hover{transform:translateY(-2px)}
.socials button:disabled{opacity:.7;cursor:default}
.music-card{position:absolute;right:calc(38px * var(--ui-scale));bottom:calc(22px * var(--ui-scale));display:flex;align-items:center;gap:calc(20px * var(--ui-scale));width:calc(314px * var(--ui-scale));min-height:calc(70px * var(--ui-scale));padding:calc(14px * var(--ui-scale)) calc(18px * var(--ui-scale));border:1px solid #ffffff14;border-radius:calc(10px * var(--ui-scale));background:#252724db;box-shadow:0 6px 25px #0003;backdrop-filter:blur(12px);transition:opacity .3s}
.music-card div{flex:none;font-size:calc(13px * var(--ui-scale));line-height:1.5}.music-card strong,.music-card span{display:block}.music-card strong{font-weight:400}.music-card span{opacity:.85}
.music-card .waveform{width:calc(130px * var(--ui-scale));height:calc(28px * var(--ui-scale));opacity:.34}
.music-card button{padding:0;margin-left:auto;opacity:.55;cursor:default}.music-card button svg{width:calc(15px * var(--ui-scale));height:calc(20px * var(--ui-scale))}
.hint svg{display:block;width:18px;height:30px;margin:6px auto 0}
body.focused .socials,body.focused .music-card{opacity:0;pointer-events:none}
@media(min-width:701px){
.masthead{inset:calc(32px * var(--ui-scale)) calc(48px * var(--ui-scale)) auto;gap:calc(30px * var(--ui-scale))}
.identity{gap:calc(28px * var(--ui-scale))}.monogram{font-size:calc(48px * var(--ui-scale));letter-spacing:calc(-5px * var(--ui-scale))}
.identity strong{font-size:calc(20px * var(--ui-scale))}.identity small{font-size:calc(13px * var(--ui-scale))}
nav{gap:calc(30px * var(--ui-scale))}nav button{font-size:calc(16px * var(--ui-scale))}.round{width:calc(40px * var(--ui-scale));height:calc(40px * var(--ui-scale));font-size:calc(18px * var(--ui-scale))}
.hotspot{font-size:calc(16px * var(--ui-scale));padding:calc(16px * var(--ui-scale)) calc(18px * var(--ui-scale));gap:calc(14px * var(--ui-scale));border-radius:calc(10px * var(--ui-scale));background:#272827d4}
.hotspot small{font-size:calc(12px * var(--ui-scale));margin-top:calc(6px * var(--ui-scale))}.hotspot .arrow{font-size:calc(13px * var(--ui-scale));width:calc(17px * var(--ui-scale));height:calc(17px * var(--ui-scale))}
.welcome{bottom:calc(78px * var(--ui-scale));left:calc(48px * var(--ui-scale));padding:calc(20px * var(--ui-scale));width:calc(206px * var(--ui-scale));font-size:calc(13.5px * var(--ui-scale));background:#252725d4;border-radius:calc(10px * var(--ui-scale))}
.hint{bottom:calc(24px * var(--ui-scale));font-size:calc(12px * var(--ui-scale))}.hint svg{width:calc(18px * var(--ui-scale));height:calc(30px * var(--ui-scale))}
}
@media(max-width:700px){.socials{left:17px;bottom:67px;gap:12px}.music-card{right:16px;bottom:80px;width:145px;min-height:42px;padding:10px;gap:8px}.music-card .waveform{display:none}.music-card div{font-size:10px}.music-card button svg{width:12px;height:16px}.welcome{bottom:112px}.hint svg{display:none}}
@media(max-width:700px){#hotspots{display:none}.round{width:44px;height:44px}.socials a,.socials button{width:44px;height:44px}.socials{gap:2px;bottom:61px}}

/* Translucent scene entry cards: retain clear lettering over visible room detail. */
.hotspot,.welcome,.music-card{background:rgba(30,33,29,.46);border:1px solid rgba(255,245,225,.23);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 5px 20px #0002;text-shadow:0 1px 4px #0009}
.hotspot:hover,.hotspot:focus-visible{background:rgba(39,43,36,.62);border-color:rgba(255,245,225,.4)}