:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #252a27;
  background: #f7f8f6;
  --accent: #3479db;
  --secondary: #929892;
  --edge: 24px;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html,body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { height: 100dvh; overscroll-behavior: none; }
button,input { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; touch-action: manipulation; }
button:focus-visible,input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button[hidden],[hidden] { display: none !important; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.surface { background: rgba(255,255,255,.96); border: 1px solid #e8ebe6; box-shadow: 0 2px 3px #28342703,0 8px 24px #28342709; }
#stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
#stage.dragging { cursor: grabbing; }
#stage.over-exhibit { cursor: pointer; }
#photos,#motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viewpoint { position: absolute; left: 50%; top: 50%; width: 25px; height: 25px; transform: translate(-50%,-50%); border-radius: 50%; background: #3479db14; pointer-events: none; display: grid; place-items: center; box-shadow: 0 0 0 5px #3479db08; }
.viewpoint i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 5px #184f8f35; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: #f7f8f6; z-index: 3; }
.loading-card { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-radius: 18px; font-size: 13px; }
.loading-spinner { width: 16px; height: 16px; border: 2px solid #e5e9e3; border-top-color: #535f52; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.masthead { position: absolute; top: calc(var(--edge) + env(safe-area-inset-top,0px)); left: calc(var(--edge) + env(safe-area-inset-left,0px)); right: calc(var(--edge) + env(safe-area-inset-right,0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 5; pointer-events: none; }
.brand { display: flex; gap: 12px; align-items: center; padding: 10px 20px 10px 11px; border-radius: 17px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: #f1f3ef; font-size: 26px; font-weight: 500; letter-spacing: -.08em; padding-right: 3px; }
h1 { display: flex; flex-direction: column; gap: 3px; margin: 0; line-height: 1.05; }
.title-prefix { font-size: 8px; color: #7c877e; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.title-name { font-size: 22px; letter-spacing: -.04em; font-weight: 580; }
.header-actions { display: flex; align-items: center; border-radius: 16px; padding: 5px; pointer-events: auto; }
.icon-button { display: grid; place-items: center; background: transparent; width: 42px; height: 42px; padding: 0; flex: 0 0 auto; border-radius: 12px; transition: background .18s, transform .2s; }
.icon-button:active,.text-button:active { transform: scale(.93); background-color: #f0f3ee; }
.action-divider { height: 20px; width: 1px; background: #eef0ec; margin: 0 3px; }
.search-panel { position: absolute; top: calc(101px + env(safe-area-inset-top,0px)); left: calc(var(--edge) + env(safe-area-inset-left,0px)); width: 304px; z-index: 7; }
.search-box { display: flex; align-items: center; gap: 10px; height: 50px; border-radius: 15px; padding: 0 14px; }
.search-box>svg { color: #879187; flex: 0 0 auto; width: 19px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13px; height: 44px; }
.search-box input::placeholder { color: #9aA298; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box .icon-button { width: 28px; height: 28px; margin-right: -5px; }
.search-box:focus-within { border-color: #bacfc0; box-shadow: 0 0 0 3px #48775108,0 8px 24px #28342709; }
.search-results { margin-top: 8px; border-radius: 16px; padding: 6px; max-height: min(420px,55dvh); overflow: auto; }
.search-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; text-align: left; background: transparent; border-radius: 10px; }
.search-result:hover,.search-result:focus-visible { background: #f3f5f0; }
.result-number { font-size: 10px; width: 35px; height: 35px; display: grid; place-items: center; background: #f0f3ed; color: #7b8976; border-radius: 10px; font-variant-numeric: tabular-nums; }
.result-label { display: flex; flex-direction: column; gap: 4px; }
.result-label strong { font-size: 13px; font-weight: 550; }
.result-label small { font-size: 10px; color: #8b9588; }
.search-empty { margin: 14px 12px; font-size: 12px; color: #879187; }
.map-location { position: absolute; top: calc(33px + env(safe-area-inset-top,0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-radius: 30px; z-index: 5; font-size: 11px; font-weight: 500; pointer-events: none; }
.location-dot { width: 5px; height: 5px; border-radius: 50%; background: #89a185; }
.location-divider { color: #d0d6cd; }
.location-floor { color: #9ba298; white-space: nowrap; font-size: 10px; }
#current-hall { white-space: nowrap; }
.map-tools { position: absolute; right: calc(var(--edge) + env(safe-area-inset-right,0px)); bottom: calc(100px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5; }
.map-tools>.icon-button { width: 45px; height: 45px; border-radius: 14px; }
.zoom-capsule { display: flex; flex-direction: column; align-items: center; padding: 2px; border-radius: 14px; }
.zoom-capsule .icon-button { width: 39px; height: 39px; }
#zoom-level { color: #929b8e; font-size: 9px; font-variant-numeric: tabular-nums; line-height: 15px; }
.minimap { position: absolute; left: calc(var(--edge) + env(safe-area-inset-left,0px)); bottom: calc(70px + env(safe-area-inset-bottom,0px)); width: 192px; border-radius: 16px; padding: 9px 9px 10px; z-index: 5; overflow: hidden; text-align: left; transition: transform .2s; }
.minimap:active { transform: scale(.97); }
#minimap { display: block; width: 100%; height: auto; border-radius: 7px; pointer-events: none; background: #f7f8f4; }
.minimap-caption { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; color: #939b8f; font-size: 7px; letter-spacing: .1em; }
#exhibit-count { letter-spacing: 0; font-size: 8px; }
.navigation { position: absolute; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%); width: 334px; z-index: 5; }
.controls { border-radius: 20px; padding: 11px 14px 10px; }
.player-main { display: flex; align-items: center; gap: 11px; }
.play-button { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border-radius: 50%; background: #2e3730; color: #fff; transition: transform .2s,background .2s; }
.play-button svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.play-button:active { transform: scale(.9); background: #5c6c5a; }
.play-button:disabled { opacity: .5; cursor: progress; }
.player-info { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.player-title { font-size: 12px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-status { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #9aa294; }
.activity-dot { width: 4px; height: 4px; border-radius: 50%; background: #c8d1c4; }
.activity-dot.active { background: #7ca175; }
.sound-button { width: 30px; height: 30px; color: #879380; }
.sound-button svg { width: 17px; }
.sound-button.muted { color: #b1b7ae; }
.timeline { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; }
.timecode { font-size: 8px; font-variant-numeric: tabular-nums; color: #9ea796; }
progress { display: block; flex: 1; width: 100%; height: 2px; border: 0; border-radius: 2px; appearance: none; background: #eef1ea; overflow: hidden; }
progress::-webkit-progress-bar { background: #eef1ea; }
progress::-webkit-progress-value { background: #829a79; border-radius: 2px; }
progress::-moz-progress-bar { background: #829a79; }
.gesture-hint { position: absolute; left: calc(var(--edge) + env(safe-area-inset-left,0px)); bottom: calc(21px + env(safe-area-inset-bottom,0px)); margin: 0; font-size: 9px; color: #8c9587; z-index: 5; }
kbd { display: inline-grid; place-items: center; min-width: 16px; height: 17px; padding: 0 3px; margin-right: 2px; background: #ffffffb8; border: 1px solid #e2e7de; border-radius: 4px; font-family: inherit; font-size: 8px; color: #707f69; }
.hint-separator { padding: 0 6px; color: #bdc6b8; }
.touch-hint { display: none; }
.credits { position: absolute; right: calc(var(--edge) + env(safe-area-inset-right,0px)); bottom: calc(18px + env(safe-area-inset-bottom,0px)); font-size: 8px; color: #99a191; z-index: 5; text-align: right; }
.copyright { margin: 0 0 5px; }
a { color: inherit; text-decoration: none; }
a:hover { color: #4b5c46; }
.contact-links { display: flex; justify-content: flex-end; gap: 12px; }
.exhibit-card { position: absolute; left: calc(var(--edge) + env(safe-area-inset-left,0px)); top: calc(168px + env(safe-area-inset-top,0px)); width: 304px; padding: 22px; border-radius: 18px; z-index: 6; animation: card-in .2s ease-out; }
.exhibit-card>.icon-button { position: absolute; right: 6px; top: 7px; width: 30px; height: 30px; color: #99a391; }
.exhibit-card h2 { margin: 12px 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
#exhibit-detail { font-size: 11px; color: #929c89; margin: 0 0 19px; }
.text-button { background: #f2f5ee; border: 1px solid #e7ede1; border-radius: 10px; padding: 11px 13px; font-size: 11px; font-weight: 500; width: 100%; display: flex; justify-content: space-between; transition: transform .2s; }
.eyebrow { margin: 0; font-size: 8px; font-weight: 600; letter-spacing: .16em; color: #9ba493; }
.toast { position: absolute; bottom: calc(145px + env(safe-area-inset-bottom,0px)); left: 50%; transform: translate(-50%,8px); z-index: 10; padding: 13px 18px; border-radius: 15px; max-width: min(410px,calc(100% - 40px)); text-align: center; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.library-sheet { color: inherit; width: min(440px,calc(100% - 28px)); max-height: min(680px,84dvh); margin: auto; padding: 20px 22px 23px; border-radius: 26px; overflow: auto; animation: card-in .25s ease-out; }
.library-sheet::backdrop { background: #43533b22; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.library-sheet.closing { animation: card-out .18s ease-in both; }
.sheet-grabber { width: 32px; height: 3px; border-radius: 3px; background: #dce3d5; margin: -5px auto 18px; }
.library-heading { display: flex; align-items: center; justify-content: space-between; }
.library-heading h2 { margin: 7px 0 0; font-size: 26px; font-weight: 550; letter-spacing: -.04em; }
.library-heading>.icon-button { background: #f1f4ec; width: 33px; height: 33px; }
.library-note { margin: 17px 0; font-size: 11px; color: #94a088; }
.library-list { display: flex; flex-direction: column; gap: 5px; }
.track-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; background: transparent; border-radius: 14px; text-align: left; transition: background .15s; }
.track-row:hover { background: #f4f6f0; }
.track-row[aria-pressed="true"] { background: #eef3e8; }
.track-art { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 12px; color: #7b8c6d; background: #e8eede; font-size: 23px; font-weight: 450; }
.track-label { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.track-label strong { font-size: 13px; font-weight: 550; }
.track-label small { color: #9aa58e; font-size: 9px; }
.track-indicator { font-size: 11px; color: #7c916a; }
.library-footnote { font-size: 10px; line-height: 1.6; color: #9ca591; margin: 18px 5px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes card-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (hover:hover) { .icon-button:hover { background-color: #f1f4ee; } .map-tools>.icon-button:hover { background-color: #fff; } }
@media (max-width:960px) { .map-location { left: auto; right: 145px; transform: none; } .location-floor,.location-divider { display: none; } .gesture-hint { font-size: 8px; } .hint-separator { padding: 0 3px; } }
@media (max-width:700px) {
  :root { --edge: 14px; }
  .masthead { align-items: center; }
  .brand { padding: 9px 15px 9px 9px; gap: 9px; border-radius: 15px; }
  .brand-mark { width: 34px; height: 34px; font-size: 23px; border-radius: 10px; }
  .title-prefix { font-size: 7px; }
  .title-name { font-size: 20px; }
  .header-actions { border-radius: 14px; padding: 4px; }
  .header-actions .icon-button { width: 36px; height: 36px; }
  .search-panel { top: calc(82px + env(safe-area-inset-top,0px)); width: calc(100% - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); }
  .search-box { height: 46px; }
  .map-location { top: calc(142px + env(safe-area-inset-top,0px)); right: auto; left: 50%; transform: translateX(-50%); font-size: 10px; padding: 9px 13px; }
  .exhibit-card { top: auto; bottom: calc(153px + env(safe-area-inset-bottom,0px)); width: calc(100% - 88px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); padding: 18px; }
  .exhibit-card h2 { font-size: 20px; }
  body.has-selection .minimap { visibility: hidden; }
  .map-tools { bottom: calc(156px + env(safe-area-inset-bottom,0px)); gap: 8px; }
  .map-tools>.icon-button { width: 42px; height: 42px; }
  .zoom-capsule .icon-button { width: 36px; height: 36px; }
  .minimap { bottom: calc(155px + env(safe-area-inset-bottom,0px)); width: 137px; border-radius: 13px; padding: 7px; }
  .minimap-caption { font-size: 6px; margin-top: 6px; }
  #exhibit-count { display: none; }
  .navigation { width: min(334px,calc(100% - 28px)); bottom: calc(65px + env(safe-area-inset-bottom,0px)); }
  .controls { border-radius: 17px; padding: 10px 13px 9px; }
  .gesture-hint { left: 50%; transform: translateX(-50%); bottom: calc(41px + env(safe-area-inset-bottom,0px)); white-space: nowrap; font-size: 8px; }
  .desktop-hint { display: none; } .touch-hint { display: inline; }
  .credits { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom,0px)); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 10px; text-align: center; font-size: 7px; }
  .copyright { margin: 0; }
  .contact-links { gap: 9px; }
  .toast { bottom: calc(154px + env(safe-area-inset-bottom,0px)); }
}
@media (max-height:540px) and (min-width:701px) { :root { --edge: 16px; } .brand { padding-top: 6px; padding-bottom: 6px; } .search-panel { top: 84px; } .exhibit-card { top: 143px; padding: 16px; } .map-tools { bottom: 63px; gap: 5px; } .minimap { width: 150px; bottom: 54px; } .navigation { bottom: 17px; } .map-location { top: 25px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }