:root {
  color-scheme: light;
  --wall: #eae6dc;
  --paper: #eae6dc;
  --paper-raised: #f5f2ec;
  --ink: #292330;
  --muted: #69636d;
  --line: #cbc4c9;
  --purple: #69517d;
  --blue: #415c85;
  --wine: #793b50;
  --accent: var(--purple);
  --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-editorial: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --viewer-header-height: 66px;
}
* { box-sizing: border-box; }
html,body { height:100%; margin:0; }
body { color:var(--ink); background:var(--wall); font-family:var(--font-ui); overflow:hidden; }
button { font:inherit; cursor:pointer; }
a { color:var(--blue); }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
[hidden] { display:none !important; }
#museum { position:fixed; inset:0; isolation:isolate; background:#aca69e; }
#museum-canvas { display:block; position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; outline:0; }
#museum-canvas:active { cursor:grabbing; }

/* A single small interface cluster; the 3D world owns the rest of the screen. */
.museum-hud { position:absolute; z-index:6; bottom:25px; right:25px; width:178px; pointer-events:none; }
.museum-hud>* { pointer-events:auto; }
.minimap { display:block; width:100%; text-align:left; padding:9px 9px 7px; color:#e8e4dd;
  border:1px solid rgba(240,234,231,.26); border-radius:6px;
  background:rgba(36,37,43,.88); backdrop-filter:blur(12px); box-shadow:0 8px 28px #0c101022;
  transition:border-color .15s,background .15s; }
.minimap:hover { border-color:#aca3c6; background:rgba(34,32,42,.96); }
.minimap-heading { display:block; padding:1px 3px 5px; font-size:10px; line-height:1.3; font-weight:650;
  color:#efedea; letter-spacing:.015em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
#minimap-svg { display:block; width:100%; height:116px; }
.hud-actions { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 1px 0; }
.hud-brand { font-size:11px; font-weight:700; letter-spacing:.15em; text-shadow:0 1px 7px #1118;
  color:#f7f5f0; white-space:nowrap; text-align:center; margin-bottom:7px; }
.hud-buttons { display:flex; align-items:center; justify-content:center; gap:6px; }
/* Hide only the small map: branding and all four utility controls remain. */
.museum-hud.is-minimap-hidden .minimap { display:none; }
.museum-hud.is-minimap-hidden .hud-actions { padding-top:0; }
.museum-hud.is-minimap-hidden .hud-brand { margin-bottom:6px; }
.ui-button { width:29px; height:29px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  color:#f2eee8; border:1px solid #ede6e45a; border-radius:5px;
  background:#262733e0; backdrop-filter:blur(9px); }
.ui-button:hover { background:#594467; border-color:#e7d9fa91; }
.ui-button span { line-height:1; font-size:17px; }
#help-button span { font-size:15px; font-weight:700; }
#exit-button span { font-size:18px; }
/* Opt-in ambient music: never autoplays; hover or keyboard focus exposes volume. */
.music-control { position:relative; }
.speaker-icon { display:block; width:18px; height:18px; }
.music-toggle .icon-playing { display:none; }
.music-toggle.is-playing .icon-muted { display:none; }
.music-toggle.is-playing .icon-playing { display:block; }
.music-volume { position:absolute; right:0; bottom:100%; display:flex; align-items:center; gap:8px;
  width:195px; padding:10px; background:var(--paper-raised); color:var(--ink);
  border:1px solid #c8bfcb; border-radius:5px; box-shadow:0 6px 22px #13101f50;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease; }
/* Explicitly controlled to avoid sticky :focus-within after a mouse click. */
.music-control.is-volume-visible .music-volume { opacity:1; visibility:visible; pointer-events:auto; }
.music-volume label,.music-volume output { font-size:11px; white-space:nowrap; }
.music-volume input { min-width:0; flex:1; width:66px; accent-color:var(--purple); cursor:pointer; }
.music-volume output { width:26px; text-align:right; font-variant-numeric:tabular-nums; }
.map-room { fill:rgba(198,186,204,.10); stroke:none; }
.map-room.is-current { fill:rgba(157,129,186,.36); }
.map-wall { stroke:#d9d2df; stroke-width:.28; stroke-linecap:round; }
#minimap-svg .map-room-label { font-size:2.15px; }
.map-room-label { fill:#dfd7e2; font-family:var(--font-ui); font-size:1.45px; font-weight:650; letter-spacing:.10px; }
.map-marker { fill:#eee1ff; stroke:#25182d; stroke-width:.32; stroke-linejoin:round; }
.map-marker-ring { fill:#a486cf3b; stroke:#d2b4f2a8; stroke-width:.24; }

.artwork-hint { position:absolute; z-index:5; display:none; pointer-events:none; font-size:10px;
  letter-spacing:.08em; color:#f9f7f3; background:#342a43ed; border:1px solid #bcb1d1;
  border-radius:4px; padding:6px 9px; }
.artwork-hint.is-visible { display:block; }
.notification { position:absolute; z-index:8; left:50%; top:20%; transform:translate(-50%,-10px);
  background:#eeeae5f0; color:#302637; border:1px solid #c1b4c3; border-radius:5px;
  padding:11px 16px; font-size:11px; font-weight:650; letter-spacing:.07em;
  box-shadow:0 5px 24px #19111d30; opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; white-space:nowrap; }
.notification.is-visible { opacity:1; transform:translate(-50%,0); }
/* One uninterrupted scale animation, with opacity animated independently.
   Avoids the stepped enlargement caused by multiple scale keyframes. */
.room-arrival { position:absolute; z-index:7; left:50%; top:50%; pointer-events:none; opacity:0;
  color:#fff; font:600 clamp(28px,4.5vw,62px)/1.12 Georgia,'Times New Roman',serif;
  letter-spacing:.005em; text-align:center; white-space:nowrap;
  text-shadow:0 2px 22px #141014ad,0 1px 4px #14101488;
  transform:translate(-50%,-50%) scale(.94); }
.room-arrival.is-arriving {
  animation: museum-room-scale 1.8s cubic-bezier(.20,.15,.30,1) both,
             museum-room-opacity 1.8s ease-in-out both;
}
@keyframes museum-room-scale {
  from { transform:translate(-50%,-50%) scale(.94); }
  to { transform:translate(-50%,-50%) scale(1.17); }
}
@keyframes museum-room-opacity {
  0% { opacity:0; }
  18% { opacity:.60; }
  55% { opacity:.60; }
  100% { opacity:0; }
}

/* Light, neutral visitor interfaces; purple/blue/burgundy accents only. */
.overlay-backdrop { position:absolute; inset:0; z-index:15; background:rgba(25,21,31,.53); backdrop-filter:blur(5px); }
.overlay { position:absolute; z-index:16; background:var(--paper); color:var(--ink);
  border:1px solid #bcb2be; box-shadow:0 20px 80px #17101e50; }
.overlay-header { display:flex; justify-content:space-between; align-items:center; gap:16px;
  min-height:60px; padding:11px 22px; border-bottom:1px solid var(--line); }
.overlay-kicker { font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--wine); }
.overlay-action { border:1px solid #c0b4c3; border-radius:4px; background:#f7f4f0; color:var(--purple);
  padding:9px 12px; font-size:12px; font-weight:600; }
.overlay-action:hover { background:#e3dce9; border-color:#9c87ab; }
.close-action { font-size:17px; padding:6px 11px; line-height:1.2; }
.primary-button { background:var(--purple); border:1px solid var(--purple); color:#fff; font:650 12px var(--font-ui);
  letter-spacing:.06em; border-radius:4px; padding:12px 18px; }
.primary-button:hover { background:#513967; }

/* Artwork is full-size and uncluttered. Controls live solely in the header. */
.artwork-viewer { inset:0; display:flex; flex-direction:column; overflow:hidden; }
.viewer-header { height:var(--viewer-header-height); min-height:var(--viewer-header-height);
  flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:16px;
  padding:9px 19px; background:var(--paper-raised); }
.viewer-heading { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(14px,1.7vw,20px); line-height:1.2; font-weight:650; }
.viewer-zoom-group { display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
#viewer-zoom-label { min-width:42px; font-size:12px; font-variant-numeric:tabular-nums; font-weight:650; color:var(--purple); text-align:right; margin-right:5px; }
.viewer-zoom-group button { min-width:28px; height:30px; background:#f8f6f1; color:var(--ink);
  border:1px solid #c9c0cb; border-radius:4px; font-size:14px; }
.viewer-zoom-group button:hover { background:#e1dbe9; }
#zoom-reset { min-width:42px; font-size:11px; }
.viewer-actions { justify-self:end; display:flex; align-items:center; gap:7px; }
.viewer-image-viewport { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  background:var(--paper); overflow:hidden; touch-action:none; cursor:default; }
.viewer-image-status { color:#6b6270; font:400 15px/1.5 var(--font-editorial); text-align:center; padding:20px; }
.viewer-image-viewport.can-pan { cursor:grab; }
.viewer-image-viewport.can-pan:active { cursor:grabbing; }
.viewer-image-viewport img { max-width:94%; max-height:94%; object-fit:contain; user-select:none;
  transform-origin:center; pointer-events:none; }
.viewer-information { position:absolute; z-index:2; right:0; top:var(--viewer-header-height); bottom:0;
  width:min(420px,42%); background:var(--paper-raised); border-left:1px solid #c9bdc9;
  overflow-y:auto; overflow-anchor:none; scroll-behavior:auto; box-shadow:-15px 0 35px #28203320; }
.viewer-info-inner { padding:30px 30px 55px; }
.viewer-info-category { color:var(--wine); font:400 17px/1.35 Georgia,'Times New Roman',serif;
  text-transform:none; letter-spacing:normal; }
.viewer-info-inner h2 { font-size:clamp(23px,2.4vw,32px); line-height:1.18; margin:12px 0 13px;
  font-weight:650; letter-spacing:-.025em; }
.viewer-metadata { font-size:12px; color:var(--muted); line-height:1.8;
  border-bottom:1px solid #d4cbd3; padding-bottom:19px; }
.viewer-description { font:400 15px/1.75 var(--font-editorial); color:#38313b; white-space:normal; }
.viewer-description p { margin:19px 0; }
.viewer-info-inner > a { font-size:12px; font-weight:650; color:var(--blue); }
.viewer-info-inner > a:hover { color:var(--wine); }

.help-overlay,.map-overlay { width:min(590px,calc(100% - 24px)); max-height:min(730px,calc(100% - 28px));
  left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; border-radius:5px; }
.help-content { padding:22px 30px 28px; overflow-y:auto; }
.guide-heading { margin:0; font:600 27px/1.18 var(--font-editorial); letter-spacing:-.02em; }
.guide-continue-wrap { text-align:center; margin:25px 0 2px; }
.guide-continue-wrap .primary-button { font-size:13px; padding:13px 23px; }
.help-content p { color:#504851; font-size:14px; line-height:1.65; margin:0 0 20px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 23px; margin:18px 0 22px; }
.guide-grid>div { border-top:1px solid #ccc2cf; padding-top:11px; display:flex; flex-direction:column; gap:6px; }
.guide-grid strong { font-size:12px; color:var(--purple); font-weight:700; }
.guide-grid span { font-size:12px; color:var(--muted); line-height:1.8; }
.guide-grid kbd { display:inline-block; padding:1px 5px; margin:1px 1px 1px 0;
  min-width:22px; border:1px solid #beb5c0; border-bottom-width:2px; border-radius:4px;
  font:600 11px/1.55 var(--font-ui); background:#faf8f4; color:#3c3543; text-align:center; }
/* Visitor-adjustable walking speed is shared by touch and keyboard controls. */
.guide-speed-control { padding:13px 14px 12px; border:1px solid #c7b9d0;
  background:#f2eef2; border-radius:4px; margin-bottom:12px; }
.guide-speed-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.guide-speed-heading label { font-size:12px; color:#3a3042; font-weight:700; }
.guide-speed-heading output { font-size:12px; color:var(--purple); font-variant-numeric:tabular-nums; }
#walking-speed-range { width:100%; display:block; margin:13px 0 5px; accent-color:var(--purple); cursor:pointer; }
.guide-speed-extents { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }
.guide-mobile-note { display:block; }
.guide-settings { display:grid; gap:9px; margin-bottom:19px; }
.guide-setting { display:flex; gap:10px; align-items:flex-start; margin:0; padding:13px 14px;
  background:#e0dbe4; border:1px solid #c7b9d0; border-radius:4px; cursor:pointer; }
.guide-setting input { width:16px; height:16px; flex:none; margin:2px 0 0; accent-color:var(--purple); cursor:pointer; }
.guide-setting span { display:flex; flex-direction:column; gap:3px; }
.guide-setting strong { font-size:12px; color:#3a3042; }
.guide-setting small { font-size:11px; color:#64576d; line-height:1.4; }
.help-content p.guide-note { font-size:12px; line-height:1.6; color:#645e66; }
.map-content { padding:22px 24px 25px; overflow-y:auto; text-align:center; }
#large-map-svg { display:block; width:min(100%,450px); height:min(55vh,360px); margin:auto;
  padding:10px; background:#393440; border:1px solid #b2a7b5; border-radius:5px; }
.map-content p { color:#4c4450; margin:13px 0 0; font-size:12px; }
.map-content p.map-note { color:var(--muted); font-size:11px; }

.exit-confirm-overlay { left:50%; top:50%; width:min(420px,calc(100% - 32px));
  transform:translate(-50%,-50%); border-radius:6px; }
.exit-confirm-content { padding:30px; }
.exit-confirm-content h2 { font-size:25px; font-weight:600; letter-spacing:-.025em; margin:14px 0 26px; }
.exit-confirm-actions { display:flex; justify-content:flex-end; gap:9px; }

.loading-screen,.error-screen { position:absolute; inset:0; z-index:80; display:flex; align-items:center;
  justify-content:center; flex-direction:column; background:#292331; color:#f4f0eb; padding:24px; text-align:center; }
.loading-emblem { font-size:48px; color:#c2a9d0; margin-bottom:25px; }
.loading-title { font-size:30px; font-weight:600; letter-spacing:.22em; }
.loading-subtitle { color:#d7cad7; font-size:16px; margin-top:12px; }
.loading-track { width:min(260px,80vw); height:2px; background:#645667; margin-top:31px; }
.loading-progress { height:100%; width:0; background:#b6a0d3; transition:width .35s; }
.loading-detail { font-size:11px; color:#d3c7d1; margin-top:14px; letter-spacing:.08em; }
.error-title { font-weight:500; font-size:29px; }
.error-screen p { max-width:520px; line-height:1.6; color:#e0d8e1; }
.touch-controls { display:none; }
.searchable-index { position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.noscript-message { position:absolute; z-index:100; inset:0; background:#eae6dc; padding:30px;
  display:flex; align-items:center; justify-content:center; }
.debug-panel { position:absolute; bottom:0; left:0; z-index:100; background:#2d2638d9;
  font:11px monospace; color:#e9ddec; padding:6px 9px; pointer-events:none; }

@media(max-width:830px) {
  .museum-hud { top:12px; right:12px; bottom:auto; width:150px; }
  #minimap-svg { height:100px; }
  .minimap-heading { font-size:9px; }
  .hud-brand { font-size:10px; }
  .ui-button { width:27px; height:27px; }
  .touch-controls { display:flex; position:absolute; z-index:6; left:0; right:0;
    bottom:max(12px,env(safe-area-inset-bottom)); align-items:flex-end; justify-content:space-between;
    padding:0 12px; gap:8px; pointer-events:none; }
  .touch-stick-group,.touch-vertical { pointer-events:auto; }
  .touch-stick-label { text-align:center; font-size:9px; letter-spacing:.18em;
    margin-bottom:7px; color:#f7f3ea; text-shadow:0 2px 8px #000; }
  .touch-stick { width:108px; height:108px; display:flex; align-items:center; justify-content:center;
    background:#21232c91; border:1px solid #f4eefe7a; border-radius:50%;
    touch-action:none; backdrop-filter:blur(6px); position:relative; }
  .touch-stick::before { content:''; width:48px; height:48px; border:1px solid #e7d5ee50; border-radius:50%; position:absolute; }
  .touch-stick-knob { width:43px; height:43px; border-radius:50%; background:#b4a1c97d;
    border:1px solid #eee1f0c2; box-shadow:0 2px 12px #0004; pointer-events:none; }
  .touch-vertical { display:flex; gap:8px; align-items:center; margin-bottom:3px; }
  .touch-vertical button { width:43px; height:54px; border-radius:7px; border:1px solid #e7dcf0aa;
    background:#2c2939b5; color:#f6edfa; font-size:22px; touch-action:none; }
  .touch-vertical button small { display:block; font:8px var(--font-ui); letter-spacing:.04em; }
  .touch-vertical button.pressed { background:#68517d; }
  /* Mobile: title and larger action targets on the top row; zoom is directly
     under the title on the left, not centered beneath both header columns. */
  :root { --viewer-header-height:112px; }
  .viewer-header { padding:9px 12px; column-gap:10px;
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(45px,auto) 36px;
    row-gap:7px; align-items:center; }
  .viewer-heading { grid-column:1; grid-row:1; font-size:15px; }
  .viewer-actions { grid-column:2; grid-row:1; gap:7px; }
  .viewer-actions .overlay-action { min-height:44px; font-size:12px; padding:10px 12px; }
  .viewer-actions .close-action { min-width:44px; font-size:19px; padding:8px 11px; }
  .viewer-zoom-group { grid-column:1; grid-row:2; justify-content:flex-start; }
  .viewer-information { width:min(100%,415px); }
  .viewer-info-inner { padding:24px; }
}
@media(max-width:480px) {
  .museum-hud { width:140px; }
  #minimap-svg { height:92px; }
  .hud-brand { font-size:9px; letter-spacing:.1em; }
  .hud-buttons { gap:3px; }
  .ui-button { width:25px; height:25px; }
  .touch-stick { width:92px; height:92px; }
  .touch-stick-knob { width:38px; height:38px; }
  .touch-vertical { flex-direction:column; gap:5px; }
  .touch-vertical button { width:43px; height:39px; font-size:17px; }
  .touch-vertical button small { font-size:7px; }
  .touch-stick-label { font-size:8px; }
  .help-content { padding:17px 19px 21px; }
  .guide-heading { font-size:25px; }
  .guide-grid { gap:9px 12px; }
  .guide-grid span { font-size:11px; }
  .guide-grid kbd { font-size:10px; min-width:19px; padding:0 3px; }
  .room-arrival { font-size:clamp(24px,7vw,42px); }
  .music-volume { right:-4px; }
  .overlay-header { padding:8px 12px; }
  .viewer-header { column-gap:7px; padding:8px 9px; }
  .viewer-heading { font-size:14px; }
  .viewer-zoom-group { gap:3px; }
  #viewer-zoom-label { min-width:36px; font-size:11px; margin-right:3px; }
  .viewer-zoom-group button { min-width:26px; height:30px; font-size:14px; }
  #zoom-reset { min-width:38px; font-size:11px; }
  .viewer-actions { gap:6px; }
  .viewer-actions .overlay-action { min-height:44px; font-size:12px; padding:9px 10px; }
  .viewer-actions .close-action { min-width:44px; font-size:19px; padding:9px 11px; }
  .viewer-information { width:100%; }
  .viewer-info-inner { padding:19px; }
}
@media(hover:none) and (pointer:coarse) { .artwork-hint { display:none !important; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.001s !important; animation-duration:.001s !important; } }

/* The minimap follows the visitor locally; expanded floor plans pan and zoom. */
#large-map-svg { cursor:grab; touch-action:none; user-select:none; }
#large-map-svg.is-panning { cursor:grabbing; }
.map-zoom-controls { display:flex; justify-content:center; align-items:center; gap:7px; flex-wrap:wrap; margin:13px auto 0; }
.map-zoom-controls button { padding:8px 11px; background:#f6f2ed; color:#493857; border:1px solid #bfb2c8; border-radius:4px; font-size:12px; font-weight:650; }
.map-zoom-controls button:hover { background:#e5dcea; }

/* The brochure-stand information is plain museum copy, not an artwork viewer. */
.brochure-overlay { max-height:min(80vh,620px); overflow-y:auto; }
.brochure-overlay .exit-confirm-content h2 { margin:0 0 18px; }
.brochure-text { font:400 15px/1.7 var(--font-editorial); color:var(--ink); margin-bottom:24px; }
.brochure-text p { margin:0 0 12px; }
.brochure-text p:last-child { margin-bottom:0; }

/* Descriptive artwork HTML is sanitized into actual semantic elements. */
/* Inline links are part of the artwork's prose, never tiny metadata links. */
.viewer-info-inner .viewer-description a,
.viewer-info-inner .viewer-description a:link,
.viewer-info-inner .viewer-description a:visited {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  font-style:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:#c02aac;
  text-decoration:none;
  text-decoration-line:none;
  text-underline-offset:initial;
  transition:color .13s ease;
}
.viewer-info-inner .viewer-description a:hover,
.viewer-info-inner .viewer-description a:focus-visible { color:#346ac6; text-decoration:none; }
.viewer-info-inner .viewer-description a:active { color:#c72c45; text-decoration:none; }
.viewer-description ul,.viewer-description ol { margin:12px 0 20px; padding-left:1.6em; }
.viewer-description li { margin:5px 0; }
.viewer-description blockquote { margin:18px 0; padding:2px 0 2px 17px; border-left:3px solid #a398b8; }
.viewer-description h3,.viewer-description h4 { margin:22px 0 10px; font-size:1.12em; line-height:1.35; }
.viewer-description pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.viewer-description p { margin:17px 0; }