:root { color-scheme: dark; font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #3b3a3c; -webkit-font-smoothing: antialiased; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#scene.is-pointer { cursor: grab; }
#scene.is-dragging { cursor: grabbing; }

/* The photograph's title and credit, quiet in a corner (above the thumbnail strip). */
.credit { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: calc(88px + env(safe-area-inset-bottom)); padding: 6px 11px; border-radius: 999px; background: #1a191b99; color: #f2eee899; text-decoration: none; white-space: nowrap; z-index: 9; }
.credit:hover { color: #f2eee8; background: #1a191bcc; }
.credit:empty { display: none; }

/* 返回首页按钮：悬浮在左上角，不遮住画面主体 */
.back-home { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); padding: 6px 12px; border-radius: 999px; background: #1a191b99; color: #f2eee899; text-decoration: none; white-space: nowrap; z-index: 10; font-size: 13px; backdrop-filter: blur(4px); }
.back-home:hover { color: #fff; background: #1a191bcc; }

/* 照片选择条：底部横向缩略图，点击切换墙上挂的哪一张 */
.gallery { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); pointer-events: none; }
.gallery-label { text-align: center; font-size: 11px; letter-spacing: .05em; color: #f2eee899; margin-bottom: 8px; pointer-events: auto; }
.gallery-bar { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; max-width: min(92vw, 900px); margin: 0 auto; padding: 4px 2px 6px; scrollbar-width: thin; pointer-events: auto; }
.gallery-thumb { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 2px solid #ffffff33; border-radius: 10px; overflow: hidden; background: #1a191b; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { border-color: #f2eee899; transform: translateY(-2px); }
.gallery-thumb.is-active { border-color: #ff7eb3; box-shadow: 0 0 12px #ff7eb366; }