:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #f5f8fc; background: #0f2648; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100dvh; overflow: hidden; }
body { --dock: max(16px, env(safe-area-inset-bottom)); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #e2c27c; outline-offset: 3px; }
[hidden] { display: none !important; }
#renderCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.mast, .place, .tools, .scenes, .hint, .begin, .joystick { position: fixed; z-index: 4; }
.mast { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 22px 0; pointer-events: none; }
.mast > * { pointer-events: auto; }
.identity { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; text-shadow: 0 1px 8px #000; }
.identity img { width: 36px; height: 36px; border-radius: 4px; }
.identity strong, .identity small { display: block; }
.identity strong { font-weight: 600; font-size: 16px; letter-spacing: .1em; text-wrap: balance; }
.identity small { margin-top: 2px; color: #d6e2f0; font-size: 11px; }
.mast nav { display: flex; gap: 8px; }
.mast nav button, .tools button, .tour, .scene { background: #0f2648d9; }
.mast nav button { height: 36px; padding: 0 14px; border-radius: 4px; font-size: 13px; }
.mast nav small { margin-left: 6px; color: #cfdcec; }
.mast nav .catalog-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px 0 14px; border: 1px solid #fff2c2; border-radius: 999px; color: #10284a; font-weight: 600; letter-spacing: .04em; background: linear-gradient(180deg, #fff3c2 0%, #f9d46a 42%, #ebb23a 58%, #f7cf62 100%); box-shadow: inset 0 1px 0 #fffdf2, inset 0 -2px 4px #b37a1240, 0 0 0 1px #b8862f40, 0 4px 16px #f2bb3f5c; }
.catalog-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffffc7 50%, transparent 65%); transform: translateX(-130%); animation: catalog-shine 5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes catalog-shine { 0%, 64% { transform: translateX(-130%); } 84%, 100% { transform: translateX(130%); } }
.catalog-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mast nav .catalog-btn small { margin-left: 0; color: #7a5410; }
.place { top: 76px; left: 22px; margin: 0; padding: 8px 12px; border-radius: 4px; border-left: 2px solid #e2c27c; background: #0f2648b3; font-size: 13px; letter-spacing: .08em; }
.walk-status { position: fixed; z-index: 4; top: 118px; left: 22px; margin: 0; padding: 8px 12px; border-radius: 4px; background: #0f2648e6; font-size: 12px; pointer-events: none; }
.walk-message .hint, .inspecting-art .walk-status { visibility: hidden; }
.tools { right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.tools button { width: 42px; height: 42px; border-radius: 6px; display: grid; place-items: center; }
.watch-options { display: grid; gap: 8px; }
.tools .options-toggle, .tools .move-option, .tools .preface-option, .tool-text { display: none; }
.tools img, .tools svg { width: 20px; height: 20px; }
.tools button[aria-pressed="true"] { background: #f5f8fc; color: #183e72; }
.tools button[aria-pressed="true"] img { filter: invert(1); }
.joystick { right: 22px; bottom: 118px; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle, #0f264826 0 38%, #0f2648a6 74%, #0f2648d0 100%); border: 1.5px solid #f2cf72; box-shadow: 0 0 0 4px #f2cf7224, inset 0 0 16px #f2cf7230, 0 6px 20px #06142c59; touch-action: none; display: none; }
.walking .joystick { display: block; }
.joystick-arrows { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #f6d983; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.joystick span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #4a3100; background: radial-gradient(circle at 34% 28%, #fffbe8 0 10%, #ffe28a 34%, #f0b93a 68%, #c98a18 100%); box-shadow: inset 0 2px 2px #ffffffb0, inset 0 -3px 6px #9c66084d, 0 4px 10px #2b1c0059; transform: translate(-50%, -50%); pointer-events: none; }
.joystick span svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scenes { left: 50%; bottom: var(--dock); transform: translateX(-50%); display: flex; gap: 10px; align-items: stretch; max-width: calc(100% - 28px); }
.tour { width: 64px; border-radius: 8px; display: grid; place-items: center; gap: 2px; font-size: 12px; }
.tour span:first-child { font-size: 16px; }
.scene-strip { display: flex; gap: 8px; overflow: auto; padding-bottom: 2px; }
.scene { width: 112px; flex: 0 0 auto; padding: 4px; border-radius: 8px; text-align: left; }
.scene img { display: block; width: 100%; height: 62px; object-fit: cover; border-radius: 4px; background: #1b3358; }
.scene span { display: block; padding: 4px 2px 2px; font-size: 11px; letter-spacing: .06em; }
.scene small { margin-left: 2px; color: #c3d2e6; font-size: inherit; letter-spacing: 0; }
.scene[aria-pressed="true"] { outline: 2px solid #e2c27c; }
.hint { left: 50%; bottom: 122px; transform: translateX(-50%); margin: 0; color: #f5f8fc; font-size: 12px; letter-spacing: .04em; text-shadow: 0 1px 6px #000; pointer-events: none; white-space: nowrap; }
.hint { transition: opacity .5s; }
.hint.is-gone { opacity: 0; }
.begin { left: 50%; top: 62%; transform: translate(-50%, -50%); background: #183e72; color: #fff; border: 1px solid #e2c27c; border-radius: 999px; padding: 14px 30px; font-size: 15px; font-weight: 600; letter-spacing: .16em; box-shadow: 0 6px 22px #0f264840; }
.paper { color: #1b2c45; background: #fbfcfd; border: 0; border-radius: 12px; width: min(680px, calc(100% - 28px)); max-height: calc(100dvh - 36px); padding: 42px 40px; overflow: auto; }
.paper::backdrop { background: #0c1d3880; }
.dialog-close { position: absolute; right: 14px; top: 10px; width: 36px; height: 36px; font-size: 26px; color: #1b2c45; }
.eyebrow { margin: 0 0 12px; color: #2f8fb5; font-size: 12px; letter-spacing: .12em; }
.paper h2 { margin: 0 0 22px; color: #183e72; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-weight: 700; font-size: 34px; letter-spacing: .12em; line-height: 1.45; }
.paper p { font-size: 14px; line-height: 1.9; }
#preface-content p { text-indent: 2em; }
.facts { display: grid; grid-template-columns: 82px 1fr; gap: 10px 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #dde5ee; font-size: 13px; }
.facts dt { color: #66768c; }
.facts dd { margin: 0; }
.primary { background: #1d4c8c; color: #fff; border-radius: 6px; padding: 10px 16px; }
.catalog { width: min(1040px, calc(100% - 28px)); padding: 28px; }
.catalog header { display: flex; justify-content: space-between; align-items: start; }
.catalog header .dialog-close { position: static; }
.catalog-filter { position: sticky; top: -28px; display: flex; gap: 12px; align-items: center; padding: 10px 0; background: #fbfcfd; border-bottom: 1px solid #dde5ee; }
.catalog-filter nav { display: flex; gap: 4px; overflow: auto; flex: 1; }
.catalog-filter button { padding: 8px 10px; border-radius: 4px; font-size: 12px; color: #1b2c45; white-space: nowrap; }
.catalog-filter button[aria-current="true"] { background: #1d4c8c; color: #fff; }
.catalog-filter input { width: 180px; border: 1px solid #cfd9e4; border-radius: 4px; background: #fff; color: #1b2c45; padding: 8px 10px; }
#catalog-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 16px; }
#catalog-list button { display: block; width: 100%; padding: 0; text-align: left; color: #1b2c45; }
#catalog-list img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #edf2f7; }
#catalog-list p { margin: 6px 0 0; font-size: 13px; }
#catalog-list small, #catalog-empty { color: #6b7a8f; font-size: 12px; }
.loading { position: fixed; left: 22px; bottom: 22px; z-index: 5; display: flex; gap: 12px; align-items: center; margin: 0; padding: 8px 12px; border-radius: 4px; background: #0f2648c7; color: #f5f8fc; font-size: 13px; }
.loading p { margin: 0; }
.loading.is-error { left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); }
#toast { position: fixed; left: 50%; bottom: 132px; transform: translateX(-50%); z-index: 6; margin: 0; padding: 10px 14px; border-radius: 6px; background: #183e72e6; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.visible { opacity: 1; }
.work-open { position: fixed; z-index: 4; left: 50%; bottom: 154px; transform: translateX(-50%); max-width: calc(100% - 160px); padding: 12px 20px; border-radius: 24px; background: #f5f8fc; color: #1b2c45; box-shadow: 0 4px 18px #0002; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspecting-art .mast, .inspecting-art .place, .inspecting-art .tools, .inspecting-art .scenes, .inspecting-art .hint, .inspecting-art .joystick, .inspecting-art .begin, .inspecting-art .work-open { visibility: hidden; }
.inspection-tools { position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); left: 22px; right: 22px; display: flex; gap: 8px; align-items: center; }
.inspection-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 5px; background: #0f2648d9; color: #f5f8fc; font-size: 13px; }
.inspection-tools svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inspection-step { display: flex; gap: 8px; margin-right: auto; }
.inspection-step button { padding: 0; }
.inspection-modes { display: flex; gap: 8px; order: 1; }
.inspection-info { display: none; }
.inspection-tools button[aria-pressed="true"] { background: #f5f8fc; color: #1b2c45; }
.inspection-tools button:disabled { opacity: .3; cursor: default; }
.art-status { position: fixed; z-index: 5; bottom: 24px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 5px; background: #0f2648bd; color: #f5f8fc; font-size: 12px; }
@media (max-width: 720px), (max-height: 500px) and (max-width: 960px) {
  .mast { gap: 12px; padding-left: 14px; padding-right: 14px; align-items: center; }
  .identity { gap: 8px; min-width: 0; }
  .identity strong { font-size: 13px; letter-spacing: 0; line-height: 1.45; }
  .identity img { width: 28px; height: 28px; }
  .mast nav { gap: 6px; flex-shrink: 0; }
  .identity small { display: none; }
  .mast nav button { height: 44px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .mast nav .catalog-btn { height: 44px; padding: 0 16px 0 13px; font-size: 13px; }
  .mast nav small { display: none; }
  /* Phones keep one top button and a short 更多 menu; the strip already marks the current room. */
  #preface-btn, .place, #rotate-btn, #vr-btn { display: none; }
  /* --above is the first free line over the scene strip (strip height plus a 14px gap). */
  body { --above: calc(var(--dock) + 98px); --stick: 104px; --tools-bottom: var(--above); }
  body.walking { --tools-bottom: calc(var(--above) + var(--stick) + 12px); }
  .tools { top: auto; bottom: var(--tools-bottom); right: 14px; transform: none; gap: 6px; transition: bottom .25s ease; }
  .tools.is-open { z-index: 6; }
  .tools .options-toggle { display: grid; width: 48px; height: 48px; font-size: 12px; border: 1px solid #ffffff2b; border-radius: 10px; }
  .watch-options { display: none; position: absolute; right: 0; bottom: 56px; width: 176px; padding: 8px; border-radius: 10px; background: #0f2648f0; }
  .tools.is-open .watch-options { display: grid; gap: 4px; }
  .watch-options button, .tools .move-option, .tools .preface-option { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; background: transparent; }
  .watch-options .tool-text { display: block; font-size: 13px; }
  .joystick { right: 14px; bottom: var(--above); width: var(--stick); height: var(--stick); }
  #toast { bottom: calc(var(--above) + 56px); }
  .hint { top: 72px; bottom: auto; left: 14px; transform: none; padding: 7px 9px; border-radius: 4px; background: #0f26488c; font-size: 11px; letter-spacing: 0; }
  .walk-status { top: 72px; left: 14px; font-size: 11px; padding: 7px 9px; }
  .scene { width: 92px; }
  .scene img { height: 52px; }
  #catalog-list { grid-template-columns: repeat(2, 1fr); }
  .catalog-filter { flex-wrap: wrap; }
  .catalog-filter input, .catalog-filter nav { width: 100%; }
  .work-open { bottom: calc(var(--above) + 4px); max-width: calc(100% - 140px); padding: 10px 15px; font-size: 13px; }
  .walking .work-open { left: 14px; transform: none; max-width: calc(100% - var(--stick) - 42px); }
  .inspection-tools { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 8px; padding: 12px; border-radius: 12px; background: #0f2648f0; }
  .inspection-tools button { min-width: 44px; height: 44px; padding: 0; font-size: 13px; }
  .inspection-tools button span { display: none; }
  .inspection-tools svg { width: 21px; height: 21px; }
  .inspection-info { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; font-size: 13px; }
  #inspect-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #inspect-count { flex-shrink: 0; color: #c3d2e6; font-size: 12px; font-variant-numeric: tabular-nums; }
  .inspection-modes { justify-self: center; gap: 2px; padding: 2px; border-radius: 24px; background: #ffffff14; }
  .inspection-modes button { width: 54px; border-radius: 22px; background: transparent; }
  .inspection-step { margin: 0; gap: 6px; order: 2; }
  .art-status { bottom: 136px; }
}
@media (max-height: 500px) and (max-width: 960px) {
  .mast { padding-top: max(10px, env(safe-area-inset-top)); }
  .hint, .walk-status { top: 62px; }
  body { --dock: max(10px, env(safe-area-inset-bottom)); --above: calc(var(--dock) + 86px); --stick: 88px; }
  body.walking { --tools-bottom: calc(var(--above) + var(--stick) + 10px); }
  /* The menu opens to the left of 更多 and always rests on the strip, even when 更多 sits above the stick. */
  .watch-options { right: 56px; bottom: calc(var(--above) - var(--tools-bottom)); max-height: calc(100dvh - var(--above) - 12px); overflow: auto; }
  .scene img { height: 42px; }
  .work-open { bottom: calc(var(--above) + 2px); }
  .inspection-tools { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: 12px; right: 12px; display: flex; gap: 8px; padding: 8px; background: #0f2648ed; border-radius: 8px; }
  .inspection-info { flex: 1; order: 0; }
  .inspection-back { order: -1; }
  .inspection-tools button { height: 44px; min-width: 44px; }
  .art-status { bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .catalog-btn::after { animation: none; } }