:root { color-scheme: dark; background: #151613; color: #f0eee4; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; min-height: 100%; }
body { background: #151613; }
.exhibit { position: relative; width: 100%; height: 100svh; min-height: 400px; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; overflow: hidden; perspective: 1400px; background: #151613; }
.scene-plane { position: absolute; inset: -2.4%; transform-origin: 54% 40%; }
[data-spatial="ready"] .scene-plane { will-change: transform; }
.scene-plane picture, .scene-plane img, #spatial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-plane img { object-fit: cover; object-position: 54% 22%; }
#spatial-canvas { opacity: 0; transition: opacity 250ms ease; }
[data-spatial="ready"] #spatial-canvas { opacity: 1; }
.exhibit::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,11,9,.42), transparent 25%, transparent 64%, rgba(10,11,9,.65)); }
.frame { position: absolute; z-index: 2; inset: clamp(18px, 2.4vw, 38px); border: 1px solid rgba(240,238,228,.72); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.header { display: flex; align-items: flex-start; justify-content: space-between; }
.mark, .motion-toggle, .navigation a { pointer-events: auto; color: inherit; text-decoration: none; }
.mark { width: 88px; height: 99px; display: grid; place-items: center; border-right: 1px solid rgba(240,238,228,.72); border-bottom: 1px solid rgba(240,238,228,.72); font-family: "Songti SC", "SimSun", serif; font-size: 52px; line-height: 1; }
.motion-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; border: 0; border-left: 1px solid rgba(240,238,228,.72); border-bottom: 1px solid rgba(240,238,228,.72); background: transparent; font: inherit; font-size: 12px; letter-spacing: .12em; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1; }
.navigation { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(240,238,228,.72); }
.navigation a { min-width: 0; min-height: 80px; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); padding: 16px clamp(16px, 2.4vw, 36px); transition: background-color 200ms ease; }
.navigation a + a { border-left: 1px solid rgba(240,238,228,.72); }
.navigation a:hover, .motion-toggle:hover { background-color: rgba(240,238,228,.1); }
.nav-number { font-size: 11px; letter-spacing: .08em; align-self: flex-start; padding-top: 4px; }
.nav-title { font-family: "Songti SC", "SimSun", serif; font-size: clamp(20px, 2vw, 28px); letter-spacing: .12em; }
.nav-arrow { margin-left: auto; font-family: sans-serif; font-size: 20px; font-weight: 300; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 700px) {
  .scene-plane img { object-position: 50% 22%; }
  .frame { inset: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .mark { width: 70px; height: 78px; font-size: 42px; }
  .navigation a { min-height: 68px; gap: 12px; padding: 12px 14px; }
  .nav-title { font-size: 20px; }
}
@media (max-width: 700px) and (max-aspect-ratio: 3/4) {
  /* Portrait art direction: retain both faces instead of cutting one in half. */
  .scene { inset: 9% 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }