*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0d0f11;overflow:hidden;
  font-family:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;
  color:#f2efe9;-webkit-font-smoothing:antialiased}
canvas#app{position:fixed;inset:0;width:100%;height:100%;display:block}

#titlecard{position:fixed;top:26px;left:28px;max-width:340px;pointer-events:none;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.kicker{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin-bottom:9px}
#titlecard h1{font-size:31px;font-weight:250;letter-spacing:.035em;line-height:1}
#titlecard p{font-size:11.5px;line-height:1.65;opacity:.7;margin-top:11px;font-weight:300}
#titlecard .meta{margin-top:13px;display:flex;gap:16px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.5}
#titlecard .meta b{font-weight:500;opacity:1}

nav#views{position:fixed;left:28px;bottom:26px}
.grp-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;margin-bottom:9px}
.btns{display:flex;flex-direction:column;gap:1px;width:186px}
button{font:inherit;font-size:11px;letter-spacing:.06em;color:#f2efe9;cursor:pointer;
  background:rgba(255,255,255,.055);border:none;border-left:2px solid transparent;
  padding:8px 12px;text-align:left;backdrop-filter:blur(9px);transition:.18s;font-weight:300}
button:hover{background:rgba(255,255,255,.14)}
button.active{border-left-color:#e8b877;background:rgba(255,255,255,.13)}
button .n{opacity:.4;margin-right:9px;font-size:9.5px}

#panel{position:fixed;right:26px;bottom:26px;width:268px;padding:15px 16px 13px;
  background:rgba(16,18,20,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08)}
.row{display:block;margin-bottom:11px}
.row>span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;display:block;margin-bottom:8px}
.row em{font-size:10.5px;font-style:normal;opacity:.8;letter-spacing:.05em}
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:rgba(255,255,255,.2);margin:2px 0 7px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#e8b877;cursor:pointer;box-shadow:0 0 0 4px rgba(232,184,119,.18)}
.toggles{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.toggles button{flex:1 1 auto;text-align:center;padding:6px 8px;font-size:9.5px;opacity:.45;
  border:1px solid rgba(255,255,255,.1);border-left:1px solid rgba(255,255,255,.1)}
.toggles button.on{opacity:1;background:rgba(232,184,119,.16);border-color:rgba(232,184,119,.4)}
.hint{font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.32}

/* 平面圖卡片。圖紙本身是淺色的，壓在深色玻璃底上就是「釘在牆上的一張圖」。 */
#plan{position:fixed;top:24px;right:26px;width:clamp(210px,21vw,320px);cursor:pointer;z-index:5;
  background:rgba(16,18,20,.5);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);padding:10px 10px 9px;
  transition:opacity .45s,transform .45s,border-color .18s}
#plan img{display:block;width:100%;height:auto}
#plan .plabel{display:flex;align-items:baseline;margin:0 2px 8px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase}
#plan .plabel span{opacity:.55}
#plan .plabel em{margin-left:auto;font-style:normal;opacity:.32;letter-spacing:.13em}
#plan:hover{border-color:rgba(232,184,119,.35)}
#plan.gone{opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none}
#planbtn{position:fixed;top:24px;right:26px;z-index:5;padding:7px 12px;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(16,18,20,.5);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(9px)}

#loader{position:fixed;inset:0;background:#0d0f11;display:flex;align-items:center;justify-content:center;
  z-index:40;transition:opacity .7s}
#loader.gone{opacity:0;pointer-events:none}
.lwrap{width:220px;text-align:center}
.lbar{height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.lbar i{display:block;height:100%;width:30%;background:#e8b877;animation:sl 1.1s infinite ease-in-out}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.ltxt{margin-top:13px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.45}
@media (max-width:900px){#titlecard p{display:none}#panel{display:none}
  #plan,#planbtn{display:none}}

#enter-gallery{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:6;
  padding:9px 18px;font-size:11px;letter-spacing:.1em;text-decoration:none;color:#f2efe9;
  background:rgba(16,18,20,.55);border:1px solid rgba(232,184,119,.45);backdrop-filter:blur(9px);
  border-radius:999px;transition:.18s}
#enter-gallery:hover{background:rgba(232,184,119,.18);border-color:rgba(232,184,119,.7)}