/* Exhibition UI. Edit colours and type here; the Viewer canvas stays independent. */
:root { color-scheme:light; --ink:#344453; --muted:#64737c; --panel:rgba(255,255,255,.92); --line:rgba(90,110,120,.23); --accent:#388b98; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; overflow:hidden; }
body { background:#dae5e7; color:var(--ink); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
a { color:var(--accent); text-underline-offset:3px; }
[hidden] { display:none!important; }
#scene { position:absolute; inset:0; }
#scene canvas { outline:none; touch-action:none; }
.identity { position:absolute; top:max(24px,env(safe-area-inset-top)); left:max(26px,env(safe-area-inset-left)); display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.84); pointer-events:none; }
.identity-mark { font:30px/34px Georgia,serif; width:34px; text-align:center; border-right:1px solid var(--line); padding-right:10px; }
.identity-title { display:block; font-size:11px; letter-spacing:1.8px; margin-bottom:5px; }
.identity-subtitle { display:block; font-size:9px; letter-spacing:1px; color:var(--muted); }
.orbit-status { position:absolute; top:max(34px,env(safe-area-inset-top)); right:max(26px,env(safe-area-inset-right)); display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.88); color:var(--ink); padding:12px 15px; font-size:9px; letter-spacing:1px; }
.status-dot { width:5px; height:5px; border:1px solid currentColor; border-radius:50%; color:var(--accent); }
.orbit-status[data-running="true"] .status-dot { background:var(--accent); }
.orbit-status[aria-pressed="false"] { color:#748087; }
/* Initial About / Controls modal, following the reference's light two-column layout. */
dialog { color:var(--ink); border:1px solid var(--line); background:var(--panel); border-radius:8px; box-shadow:0 3px 18px rgba(21,39,47,.08); }
dialog::backdrop { background:rgba(24,43,47,.23); }
.intro { position:fixed; inset:0; margin:auto; padding:0; width:min(980px,calc(100% - 56px)); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow:hidden; }
.intro[open] { display:flex; flex-direction:column; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(255px,1fr); gap:48px; padding:36px 40px 26px; overflow-y:auto; overscroll-behavior:contain; min-height:0; scrollbar-width:thin; }
.eyebrow { font-size:9px; letter-spacing:1.7px; color:var(--muted); line-height:1.7; display:block; }
.intro h1 { font-size:31px; font-weight:600; line-height:1.2; letter-spacing:-.5px; margin:14px 0 26px; }
.intro h1 span { display:inline-block; font-size:14px; font-weight:400; letter-spacing:2px; margin-left:8px; color:var(--muted); }
.intro h1:focus { outline:none; }
.intro h2 { font-size:18px; line-height:1.3; margin:23px 0 12px; font-weight:600; }
.intro h2 span { font-size:12px; font-weight:400; color:var(--muted); }
.intro p { font-size:14px; line-height:1.65; margin:0 0 14px; }
.intro .intro-chinese { color:#61717a; font-size:13px; line-height:1.85; }
.intro .intro-credits { color:var(--muted); font-size:12px; margin-top:22px; }
.intro-controls { padding-top:6px; }
.intro-controls h2 { margin:0 0 20px; }
.intro-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px; border-bottom:1px dashed #bbc5cb; cursor:pointer; }
.intro-option input { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin:0; }
.intro-control-list { margin:0; }
.intro-control-list div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed #bbc5cb; font-size:13px; line-height:1.6; }
.intro-control-list dt { white-space:nowrap; }
.intro-control-list dd { margin:0; text-align:right; color:#63727c; }
.intro .intro-note { font-size:11px; color:var(--muted); line-height:1.7; margin:17px 0 0; }
.intro-footer { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 40px 21px; border-top:1px solid var(--line); background:rgba(245,248,248,.75); }
.intro .load-status { color:var(--muted); font-size:11px; line-height:1.5; margin:0; }
.enter { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:26px; min-width:230px; border:1px solid #4a7883; background:#3d6974; color:#fff; border-radius:4px; padding:14px 17px; font-size:12px; min-height:46px; transition:background .15s; }
.enter:hover:enabled { background:#315c68; }
.enter:disabled { color:#e9eff0; background:#83979d; border-color:#83979d; }
.enter-arrow { font-size:19px; line-height:14px; }
.spinner { height:14px; width:14px; border:1px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 1s linear infinite; }
.text-button { background:none; color:var(--accent); border:0; padding:9px 12px 0 0; text-decoration:underline; font-size:11px; }
.close-button { position:absolute; right:10px; top:8px; border:0; background:none; color:var(--muted); font-size:23px; width:34px; height:34px; z-index:1; }
.scene-caption { position:absolute; bottom:30px; left:26px; display:none; pointer-events:none; padding:9px 12px; background:rgba(255,255,255,.83); border:1px solid var(--line); border-radius:4px; }
.scene-caption span { display:block; font-size:9px; letter-spacing:1px; }
.scene-caption span+span { font-size:10px; letter-spacing:0; color:var(--muted); margin-top:5px; }
body.entered .scene-caption { display:block; }
.toolbar { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:5px; background:rgba(255,255,255,.91); border:1px solid var(--line); border-radius:7px; }
.toolbar button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-width:62px; min-height:57px; color:var(--ink); border:0; background:transparent; border-radius:4px; transition:background .15s; }
.toolbar button span { font-size:9px; }
.toolbar button:hover,.toolbar button[aria-pressed="true"],.toolbar button[aria-expanded="true"] { background:rgba(65,125,139,.12); }
.toolbar button[aria-disabled="true"] { opacity:.48; }
.toolbar-divider { height:28px; width:1px; background:var(--line); margin:0 4px; }
#help-panel { position:fixed; inset:auto 24px 105px auto; width:min(410px,calc(100% - 32px)); max-height:calc(100% - 140px); margin:0; overflow:auto; padding:28px; }
#help-panel h2 { font-size:24px; font-weight:500; line-height:1.3; margin:16px 0; }
.help-intro { font-size:12px; line-height:1.8; color:var(--muted); }
.help-controls { margin:20px 0 0; }
.help-controls div { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.help-controls dt { font-size:11px; white-space:nowrap; }
.help-controls dd { margin:0; text-align:right; font-size:11px; line-height:1.9; color:var(--muted); }
kbd { font:10px Arial,sans-serif; display:inline-block; padding:0 4px; margin:1px; border:1px solid var(--line); border-radius:3px; }
.help-note { font-size:11px; line-height:1.7; color:var(--muted); margin:20px 0 0; }
.toast { position:absolute; bottom:110px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); padding:12px 18px; background:#f6f8f8; border:1px solid var(--line); border-radius:5px; font-size:12px; text-align:center; }
.no-script { position:absolute; top:40%; left:10%; background:#f5f7f7; padding:25px; }
.debug-panel { position:absolute; top:110px; right:20px; width:330px; max-height:calc(100% - 220px); overflow:auto; padding:16px; background:rgba(17,30,30,.96); border:1px solid #b6cfa8; border-radius:4px; font-size:11px; }
.debug-panel summary { cursor:pointer; font-size:12px; letter-spacing:1px; }
.debug-panel pre { font:10px/1.5 monospace; white-space:pre-wrap; margin:12px 0; }
.debug-panel canvas { width:100%; height:190px; background:#203434; border:1px solid var(--line); }
.debug-panel label { display:block; margin:12px 0 6px; }
.debug-panel textarea { width:100%; height:180px; resize:vertical; background:#162525; color:#e4ebd6; border:1px solid var(--line); padding:8px; font:10px/1.5 monospace; }
.debug-panel button { padding:8px; margin:5px 5px 0 0; color:#edf3df; background:#365044; border:1px solid #728b73; border-radius:3px; font-size:10px; }
.debug-panel .debug-error { color:#ffd9ba; line-height:1.5; }
.debug-panel p { line-height:1.6; color:#b7c9bc; }

.debug-panel { color:#e4ebd6; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:760px) {
  .identity { top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); }
  .identity-subtitle { font-size:8px; letter-spacing:.5px; } .identity-title { letter-spacing:1px; }
  .orbit-status { top:max(26px,env(safe-area-inset-top)); right:16px; font-size:8px; padding:10px; letter-spacing:.5px; }
  .intro { width:calc(100% - 30px); max-height:calc(100vh - 30px); max-height:calc(100dvh - 30px); }
  .intro-grid { grid-template-columns:1fr; gap:24px; padding:27px 24px 20px; }
  .intro h1 { font-size:28px; margin-bottom:20px; } .intro h1 span { font-size:13px; }
  .intro-controls { padding:0; } .intro-controls h2 { margin-bottom:14px; }
  .intro p { font-size:13px; } .intro .intro-credits { margin-bottom:0; }
  .intro-footer { padding:15px 22px; flex-direction:column; align-items:stretch; gap:12px; }
  .intro-footer .enter { width:100%; min-width:0; }
  .scene-caption { bottom:106px; left:16px; } .scene-caption span+span { display:none; }
  .toolbar { bottom:max(18px,env(safe-area-inset-bottom)); } .toolbar button { min-width:54px; min-height:54px; }
  #help-panel { right:16px; bottom:100px; padding:25px; }
  .debug-panel { right:14px; width:calc(100% - 28px); max-width:330px; }
}
@media(max-width:440px) { .orbit-status { top:88px; right:16px; } .eyebrow { letter-spacing:1px; font-size:8px; } }
@media(max-height:540px) and (min-width:761px) { .intro-grid { padding-top:22px; padding-bottom:18px; } .intro-footer { padding-top:12px; padding-bottom:12px; } }
@media(hover:none) and (pointer:coarse) { .desktop-control { display:none!important; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } .spinner { animation-duration:2.5s; } }

/* Opt-in localhost diagnostics; absent from the public experience. */
.performance-panel { position:fixed;z-index:40;right:20px;top:110px;width:310px;max-height:75vh;overflow:auto;padding:14px;background:#182b2cf2;color:#f2f5ed;border:1px solid #9dada7;border-radius:4px;font:12px/1.5 monospace; }
.performance-panel summary {cursor:pointer;margin-bottom:10px;}
.performance-panel select,.performance-panel button {font:inherit;margin:8px 0;padding:6px;}
.performance-panel pre {white-space:pre-wrap;font:11px/1.45 monospace;}

@media(max-width:440px){.toolbar button{min-width:46px}.toolbar{max-width:calc(100% - 20px)}.performance-panel{right:12px;width:min(310px,calc(100% - 24px))}}

/* Annotation shares the viewer's CSS pixel projection, independent of dynamic resolution. */
.building-hotspot{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;z-index:6;touch-action:manipulation;}
.building-hotspot::before{content:"";display:block;width:14px;height:14px;margin:auto;background:#1688ff;border:3px solid #dceeff;border-radius:50%;box-shadow:0 0 0 5px #1688ff45;}
.building-hotspot span{position:absolute;left:39px;top:12px;color:white;white-space:nowrap;font-size:12px;letter-spacing:.03em;text-shadow:0 1px 4px #000;background:#14263199;border-radius:3px;padding:3px 7px;}
.building-hotspot:focus-visible{outline:2px solid white;border-radius:50%;}
.building-info{position:fixed;z-index:8;bottom:100px;left:30px;max-width:340px;width:calc(100% - 60px);padding:25px;color:#f4f8ff;background:rgba(17,30,42,.88);border:1px solid #ffffff25;border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
.building-info.visible{opacity:1;transform:none;pointer-events:auto;}
.building-info h2{font-size:18px;line-height:1.5;margin:0 20px 12px 0;}
.building-info p{font-size:14px;line-height:1.85;margin:0;color:#e2eaf2;}
.building-info-close{position:absolute;right:10px;top:8px;border:0;background:none;color:white;font-size:26px;cursor:pointer;width:32px;height:32px;}
@media(max-width:600px){.building-info{bottom:90px;left:18px;width:calc(100% - 36px);padding:20px;max-width:360px;}.building-hotspot span{display:none;}}
@media(prefers-reduced-motion:reduce){.building-info{transition:none;}}