:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #f1e4d6; background: #160d10; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }
.museum-exhibition { position: relative; min-height: 100svh; padding: max(35px, env(safe-area-inset-top)) clamp(24px, 4.2vw, 80px) max(25px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; isolation: isolate; }
/* Local scrims protect text contrast without grading or dimming the original artwork. */
.museum-exhibition::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,rgba(14,9,11,.32),transparent 18%,transparent 78%,rgba(14,9,11,.48)); }
.museum-header { display: flex; align-items: center; gap: 26px; }
.museum-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 24px; border-right: 1px solid #e6c8b32b; font-size: 12px; letter-spacing: .12em; color: #e7d2c5; }
.museum-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.museum-wordmark { display: grid; gap: 7px; }
.museum-wordmark > span { font-size: 14px; letter-spacing: .24em; }
.museum-wordmark small { color: #d5c0b5b8; font-size: 8px; letter-spacing: .27em; }
.museum-poem { position: absolute; top: max(38px, env(safe-area-inset-top)); right: clamp(24px, 4.2vw, 80px); display: flex; flex-direction: row-reverse; gap: 14px; margin: 0; color: #e0c5b0; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 16px; font-weight: 400; text-shadow: 0 2px 10px #10090de6; }
.museum-poem span { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .26em; line-height: 1.5; white-space: nowrap; }
.museum-caption { margin-top: auto; padding: 90px 0 48px; width: fit-content; max-width: 100%; text-shadow: 0 2px 18px #13070bb0; }
.museum-eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 13px; font-size: 9px; letter-spacing: .32em; color: #d8b9a2; }
.museum-eyebrow > span { width: 22px; height: 1px; background: #bc8160; }
.museum-caption h1 { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: clamp(52px, 5.7vw, 88px); font-weight: 400; letter-spacing: .13em; line-height: 1.2; margin: 0; }
.museum-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px 24px; }
.museum-music { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 16px; color: #eddfd3; border: 1px solid #dac0ac45; border-radius: 2px; background: #160d104d; cursor: pointer; font-size: 11px; letter-spacing: .1em; transition: border-color .25s, background .25s; }
.museum-music:hover { background: #42202173; border-color: #dfb09388; }
.museum-music-controls { display: grid; justify-items: end; gap: 7px; max-width: 240px; }
.museum-music-status { color: #d5c0b5b8; font-size: 10px; line-height: 1.6; text-align: right; }
.museum-music-status:empty { display: none; }
.museum-media-state { position: fixed; bottom: max(112px,calc(env(safe-area-inset-bottom) + 94px)); right: clamp(24px,4.2vw,80px); display: grid; justify-items: end; gap: 8px; max-width: min(280px,75vw); color: #e0c5b0; font-size: 11px; line-height: 1.7; text-shadow: 0 2px 10px #160d10; }
.museum-media-state button { min-height: 44px; padding: 8px 15px; border: 1px solid #dac0ac45; border-radius: 2px; background: #160d10a6; color: #eddfd3; font: inherit; cursor: pointer; }
.museum-music svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.1; fill: none; }
.museum-music[aria-pressed="false"] .music-waves, .museum-music[aria-pressed="true"] .music-muted { display: none; }
.museum-icp { width: fit-content; color: #cfb8ac8f; font-size: 9px; letter-spacing: .045em; }
.museum-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid #eac19d; outline-offset: 6px; }
@media (max-width: 600px) {
  .museum-exhibition { padding: max(20px, env(safe-area-inset-top)) 23px max(18px, env(safe-area-inset-bottom)); }
  .museum-header { gap: 16px; }
  .museum-back { padding-right: 15px; }
  .museum-back > span { display: none; }
  .museum-wordmark > span { font-size: 12px; }
  .museum-wordmark small { font-size: 7px; }
  .museum-poem { top: max(93px, calc(env(safe-area-inset-top) + 73px)); right: 23px; gap: 7px; font-size: 11px; color: #e0c5b0e6; }
  .museum-poem span { line-height: 1.35; letter-spacing: .18em; }
  .museum-caption { padding-bottom: 29px; }
  .museum-caption h1 { font-size: 54px; }
  .museum-eyebrow { margin-bottom: 13px; font-size: 8px; }
  .museum-footer { column-gap: 10px; }
  .museum-music { padding: 9px 11px; font-size: 10px; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .museum-exhibition { padding-top: 14px; padding-bottom: 12px; }
  .museum-caption { padding-top: 26px; padding-bottom: 18px; }
  .museum-caption h1 { font-size: 42px; }
  .museum-eyebrow { margin-bottom: 12px; }
  .museum-poem { top: 22px; gap: 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .museum-music { transition: none; } }