@import url('./assets/fonts/noto-serif-sc.css');
@import url('./assets/fonts/newsreader.css');

/* The museum interface is a quiet typographic layer over the architecture. */
:root{--hud-paper:#eeece4;--hud-muted:#b4b8b1;--hud-accent:#cbbd98;--hud-line:#e8e5da26;--hud-surface:#191e1ce8;--museum-serif:'Newsreader','Noto Serif SC','Songti SC',SimSun,serif;--museum-sans:'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif}
body{font-family:var(--museum-sans)}
#vignette{background:linear-gradient(180deg,#111815b0,transparent 24%,transparent 64%,#101614e6 100%)}
header{padding:27px 32px;background:none;color:var(--hud-paper);align-items:flex-start}
.identity{gap:13px;align-items:center}.identity img{width:24px;height:24px;filter:none}
.brand{font-family:var(--museum-serif);font-size:24px;font-weight:400;line-height:1.15;letter-spacing:2px}
.brand small{font:8px/1.4 var(--museum-sans);letter-spacing:1.6px;color:var(--hud-muted);margin-top:9px}
html[lang=en] .brand{font-size:26px;letter-spacing:.2px}html[lang=en] .brand small{font-size:7px;letter-spacing:1.5px}
.top{align-items:center;gap:8px}.top button,.top .primary{height:35px;min-width:35px;padding:0 13px;background:transparent;border:0;color:var(--hud-paper);box-shadow:none;font-size:11px;letter-spacing:.7px}
.top button:hover{background:#f3f1e80d}.top #archive{display:flex;align-items:center;gap:10px;padding-left:0;padding-right:15px}
.top #language{border-left:1px solid var(--hud-line);font-size:10px;padding:0 16px}
.top #support{color:#d5c397}.support-logo{display:block;width:68px;height:68px;object-fit:contain;margin:18px 0 14px}.support-uses{display:grid;grid-template-columns:30px 1fr;gap:22px 15px;border-top:1px solid #b8bdad;padding:28px 0;margin-top:30px}.support-uses>span{font:14px Georgia,serif;color:#9c824e;padding-top:4px}.support-uses h3{font:21px var(--museum-serif);margin:0 0 8px;color:#2d4438}.support-uses p{font:13px/1.9 var(--museum-sans);margin:0;color:#647062}.support-contract{padding:20px 0;border-top:1px solid #b8bdad}.support-contract code{display:block;font:13px/1.9 monospace;color:#304438;overflow-wrap:anywhere;user-select:all;margin:12px 0}.support-contract button{padding-left:0}.support-buy{display:inline-flex;align-items:center;padding:14px 22px;background:#2d4438;color:#eee7d3;text-decoration:none;font-size:14px}.support-buy:hover{background:#3d5547}.top #archive{padding-right:5px}@media(max-width:760px){.top #support{font-size:9px;letter-spacing:0;padding:0 8px;min-width:0}.support-logo{width:80px;height:80px}.support-contract code{font-size:12px}.support-buy{font-size:13px}}
.top #fullscreen{font-size:0;padding:0;width:35px;min-width:35px;display:grid;place-items:center}
.top #archive::before,.top #fullscreen::before,.tools button::before{content:'';display:block;width:18px;height:18px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;flex:none}
.gallery-label{top:138px;left:35px;max-width:325px;padding:0;background:none;border:0;color:var(--hud-paper);text-shadow:0 2px 15px #101613aa}
.gallery-label .kicker{font:8px var(--museum-sans);letter-spacing:2.4px;color:var(--hud-muted)}
.gallery-label h1{font:400 32px/1.5 var(--museum-serif);margin:14px 0 10px;letter-spacing:1px}
.gallery-label p{font-size:10px;color:#c8cbc1;letter-spacing:1px}.gallery-label h1,.gallery-label p{filter:drop-shadow(0 1px 3px #0c1715)}

/* One consistent utility rail. Labels appear beside the icon on hover or focus. */
.tools{right:25px;top:50%;transform:translateY(-50%);gap:0;background:#161c19b3;border:1px solid #e8e5da18;backdrop-filter:blur(12px);padding:5px 0;box-shadow:none}
.tools button{position:relative;min-width:42px;width:42px;height:44px;padding:0;font-size:0;background:transparent;border:0;color:#d4d6cc;box-shadow:none;display:grid;place-items:center}
.tools button::before{width:18px;height:18px;opacity:.8}.tools button+button{border-top:1px solid #e8e5da08}
.tools button:hover,.tools button:focus-visible{background:#f3f1e80a;color:#fff9e9}.tools button[aria-pressed=true]{color:var(--hud-accent)}
.tools button:disabled{opacity:.25}.tools button::after{content:attr(aria-label);position:absolute;right:calc(100% + 13px);top:50%;transform:translateY(-50%) translateX(4px);padding:9px 12px;background:#141a17ed;color:#e8e8df;font:10px var(--museum-sans);letter-spacing:.5px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s}
.tools button:hover::after,.tools button:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* A six-part exhibition directory, without filled button tiles. */
#bottom{left:0;right:0;bottom:27px;display:flex;justify-content:center;align-items:end;padding:0;background:none;pointer-events:none}
#rooms{display:flex;gap:10px;padding:0;background:none;border:0;box-shadow:none;pointer-events:auto;overflow:visible}
#rooms button{flex:none;min-width:72px;padding:9px 12px 11px;font:11px var(--museum-sans);letter-spacing:.6px;color:#c6c9bf;border:0;border-bottom:1px solid transparent;background:none;position:relative}
#rooms button small{font:8px var(--museum-sans);letter-spacing:1.8px;color:#9ca49a;margin:0 0 9px}
#rooms button.active{color:#f0ede0;border-bottom-color:var(--hud-accent);background:none}
#rooms button.active small{color:var(--hud-accent)}#rooms button:hover{background:none;color:#fff8e7;border-bottom-color:#e5dbbc55}
.movement{position:fixed;right:28px;bottom:28px;pointer-events:auto;display:block;margin:0}
.help{padding:0;background:none;text-shadow:none;font:8px var(--museum-sans);letter-spacing:.4px;max-width:180px;color:#a7afa3;margin:0 0 12px;opacity:.7;text-align:right}
.move{gap:5px}.move button{height:29px;width:29px;font-size:15px;border:1px solid #e8e5da28;color:#dddccf;background:#181f1a55;border-radius:3px;box-shadow:none}
.move button:hover,.move button:active{background:#f3f1e817;border-color:#cfc8b288}
#location{left:50%;right:auto;bottom:103px;transform:translateX(-50%);padding:0;gap:8px;border:0;background:none;color:#c5cabe;font:9px var(--museum-sans);letter-spacing:1.5px;text-shadow:0 1px 8px #0a1512}
.dot{width:3px;height:3px;background:#c1b895}#skipTour{border:0;border-bottom:1px solid #cfbea867;background:none;color:var(--hud-accent);padding:3px 0;margin-left:7px;font:10px var(--museum-sans)}

/* A small architectural plan replaces the large beige map card. */
.map{left:32px;bottom:112px;width:80px;padding:0;background:none;border:0;box-shadow:none;color:#c6cabe;opacity:.8}
.map-title{font:8px var(--museum-sans);letter-spacing:1.2px}.map-title small{display:none}
.map-plan{height:99px;width:69px;border:1px solid #e0deca59;background:#131d1640;margin:10px 0 8px}
.map-void{border:1px solid #e0deca40;background:none}.map-island{border-color:#c9c1a16e;background:none}.map-stairs{font-size:16px;color:#c9c1a1}
#mapDot{width:6px;height:6px;background:#ede9d4;border:1px solid #fffff8;border-radius:50%;box-shadow:0 0 0 3px #e6ddbd20}
.map-scale{color:#a5ada0;font:8px var(--museum-sans);letter-spacing:1.4px;margin:0}.coffee-mode .map{opacity:.45}
.music-control{left:31px;bottom:29px;height:31px;padding:0;gap:10px;background:none;border:0;box-shadow:none;color:#cdd1c6;font-family:var(--museum-sans)}
.music-control button{color:#e4dfcb}.music-control #musicToggle{height:27px;width:27px;border:1px solid #e8e5da35;border-radius:50%;background:none}
.music-control #musicLabel{font:9px var(--museum-sans);letter-spacing:.4px;color:#c1c7b9}
.music-control svg{width:12px;height:12px;stroke-width:1.4}
.music-control input{-webkit-appearance:none;appearance:none;width:53px;height:2px;margin:0 0 0 1px;padding:0;background:#d4d5c83b;border:0;border-radius:0;opacity:.55;accent-color:#dbd2b7}
.music-control input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:7px;height:7px;background:#d7d3be;border:0;border-radius:50%}
.music-control:hover input,.music-control:focus-within input{opacity:1}

/* Information cards share the same typography and sit clear of the rail. */
.exhibit-info,.coffee-info,.piano-info{right:88px;bottom:135px;width:310px;padding:20px 22px;background:var(--hud-surface);border:1px solid #e8e5da26;border-top:1px solid #a9a28a;box-shadow:0 8px 35px #06130c24;backdrop-filter:blur(16px);color:var(--hud-paper)}
.exhibit-meta{font:8px var(--museum-sans);letter-spacing:2px;color:#bfb99e}
.exhibit-info h3{font:400 24px/1.45 var(--museum-serif);letter-spacing:.4px;margin:13px 0}
.exhibit-info p{font:11px/1.9 var(--museum-sans);color:#c3c7bc;letter-spacing:.2px;margin-bottom:18px}
.exhibit-info button{font-family:var(--museum-sans);color:#ddd7c0;border-bottom-color:#aaa183;font-size:10px}
.exhibit-info .exhibit-close{right:19px;top:19px;font-size:9px;color:#9ea89b}
.coffee-choices{gap:6px;margin:15px 0 20px}.coffee-choices button{padding:7px 9px;border:1px solid #b5b7a92e;font-size:10px}
.coffee-choices button.selected{background:#cbc4aa;color:#242c25;border-color:#cbc4aa}
h2,.person h3{font-family:var(--museum-serif);font-weight:400}.caption{font-family:var(--museum-sans);font-size:9px;letter-spacing:2px}

@media(max-width:1100px) and (min-width:761px){#rooms{gap:3px}#rooms button{min-width:66px;padding-inline:10px;font-size:10px}.music-control{left:23px;gap:8px}.music-control input{width:36px}.movement{right:23px}.help{max-width:130px;font-size:7px}.map{left:25px}}
@media(max-width:950px) and (min-width:761px){.music-control input{display:none}#rooms button{min-width:61px;padding-inline:8px}.top button{font-size:10px}.brand{font-size:22px}}
@media(max-width:760px){
 header{padding:22px 18px;align-items:center}.identity{gap:10px}.identity img{width:20px;height:20px}.brand{font-size:20px;letter-spacing:1.3px}.brand small{font-size:6px;letter-spacing:1px;margin-top:7px}
 html[lang=en] .brand{font-size:20px;letter-spacing:0}html[lang=en] .brand small{font-size:5.5px;letter-spacing:.65px}
 .top{gap:0}.top #archive{font-size:0;padding:0 11px;width:37px;height:31px}.top #archive::before{width:17px;height:17px}.top #language{padding:0 0 0 11px;min-width:32px;font-size:9px;height:27px}.top #fullscreen{display:none}
 .gallery-label{left:21px;top:112px;max-width:260px;padding:0}.gallery-label h1{font-size:27px;line-height:1.55;margin:12px 0}.gallery-label .kicker{font-size:7px;letter-spacing:1.9px}.gallery-label p{font-size:8px;max-width:240px;line-height:1.8}
 .tools{right:15px;top:145px;transform:none;padding:3px 0}.tools button{width:35px;min-width:35px;height:37px}.tools button::before{width:16px;height:16px}.tools button::after{font-size:9px;padding:8px;right:calc(100% + 9px)}
 #bottom{bottom:18px;padding:0 16px;display:block;background:none}#rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;overflow:visible;border:0;padding:0}
 #rooms button{display:flex;gap:10px;align-items:center;justify-content:center;min-width:0;font-size:10px;padding:9px 3px;letter-spacing:.4px}
 #rooms button small{font-size:7px;letter-spacing:.5px;display:inline;margin:0;color:#899787}
 .movement{position:fixed;bottom:113px;left:auto;right:17px;display:block;margin:0}.help{display:none}.move button{width:27px;height:27px;font-size:14px}
 #location{left:50%;right:auto;bottom:164px;transform:translateX(-50%);max-width:calc(100vw - 36px);font-size:7px;letter-spacing:.8px;flex-wrap:nowrap;justify-content:center;white-space:nowrap;padding:0}#skipTour{font-size:8px}
 .map{left:20px;bottom:190px;width:57px;opacity:.65}.map-plan{width:48px;height:69px;margin:8px 0 7px}.map-title{font-size:7px}.map-scale{font-size:6px;letter-spacing:1px}.map-island{width:13px;height:13px;left:calc(50% - 6.5px)}.map-stairs{font-size:13px}#mapDot{width:5px;height:5px}
 .music-control{left:19px;bottom:113px;height:27px;gap:7px}.music-control #musicToggle{width:24px;height:24px}.music-control #musicLabel{font-size:8px;letter-spacing:0}.music-control input{width:31px;display:block}.music-control svg{width:11px;height:11px}
 .exhibit-info,.coffee-info,.piano-info{left:18px;right:72px;bottom:231px;width:auto;max-width:310px;padding:16px 17px}
 .exhibit-info h3{font-size:22px}.exhibit-info p{font-size:10px;line-height:1.85;-webkit-line-clamp:5}.exhibit-meta{font-size:7px;letter-spacing:1.4px;padding-right:35px}.exhibit-info .exhibit-close{top:15px;right:14px;font-size:8px}
 .coffee-choices{gap:5px;margin:12px 0 16px}.coffee-choices button{font-size:9px;padding:7px 8px}.coffee-mode .coffee-info{padding:14px 15px}.coffee-mode .coffee-info #coffeeAction{font-size:10px}.coffee-mode .coffee-info .exhibit-close{top:16px}
 .piano-info p{font-size:10px}.piano-info h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){button,.tools button::after,.gallery-label{transition:none}}
.presence-status{position:fixed;z-index:8;left:50%;top:36px;transform:translateX(-50%);background:rgba(23,36,30,.72);border:1px solid #7c8a7140;border-radius:20px;padding:8px 14px;color:#ded8c5;font:10px var(--museum-sans);letter-spacing:1px}.presence-status:before{content:'';display:inline-block;width:4px;height:4px;background:#c7b67e;border-radius:50%;margin-right:8px;vertical-align:middle}.visitors-panel{position:fixed;z-index:15;top:82px;left:50%;transform:translateX(-50%);width:310px;padding:25px;background:#182820f5;color:#ddd7c4;box-shadow:0 12px 40px #0003;border:1px solid #a7ac8f33}.visitors-panel[hidden]{display:none}.visitors-panel h3{font:25px var(--museum-serif);margin:18px 0 10px}.visitors-panel p{font:11px/1.9 var(--museum-sans);color:#b0b9aa}.visitors-panel ul{padding:0;margin:18px 0 0;max-height:240px;overflow:auto;list-style:none}.visitors-panel li{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #a7ac8f22;font-size:11px}.visitors-panel small{color:#a4ad9c}.visitors-panel #visitorsClose{float:right;background:none;border:0;padding:0;color:#b5bea9;font-size:10px}.coffee-choices select{width:100%;margin-top:4px;background:#24382e;color:#ddd8c5;border:1px solid #9aab8a55;padding:9px;font:11px var(--museum-sans)}@media(max-width:760px){.presence-status{top:82px;font-size:8px;padding:7px 10px}.visitors-panel{top:118px;width:min(310px,calc(100vw - 36px));padding:20px}.coffee-choices select{font-size:10px;padding:7px}}

#archive{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h6a3%203%200%200%201%203%203v14a4%204%200%200%200-3-2H4zM13%207a3%203%200%200%201%203-3h4v15h-4a4%204%200%200%200-3%202%22%2F%3E%3C%2Fsvg%3E")}
#fullscreen{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204H4v4M16%204h4v4M4%2016v4h4M20%2016v4h-4%22%2F%3E%3C%2Fsvg%3E")}
#floorToggle{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019h5v-5h5V9h5V4M4%2010l7-7M6%203h5v5%22%2F%3E%3C%2Fsvg%3E")}
#perspective{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207S2%2012%202%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
#characterView{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2021v-3a7%207%200%200%201%2014%200v3M4%2010l-2%202%202%202M20%2010l2%202-2%202%22%2F%3E%3C%2Fsvg%3E")}
#goCafe{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h12v7a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5ZM16%209h2a3%203%200%200%201%200%206h-2M3%2022h16M8%202v3M12%202v3%22%2F%3E%3C%2Fsvg%3E")}
#about{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207v.1%22%2F%3E%3C%2Fsvg%3E")}
@media(max-width:760px){.coffee-mode .map,.piano-mode .map{display:none}}

.disclaimer-link{position:fixed;z-index:6;left:32px;bottom:3px;height:20px;padding:3px 0;background:none;border:0;color:#b6bcae;font:9px var(--museum-sans);letter-spacing:.6px}.disclaimer-link:hover{background:none;color:#f1ead6}.disclaimer-copy{border-top:1px solid #c8c6b4;padding-top:22px;margin-top:28px}.disclaimer-copy p{font:13px/1.9 var(--museum-sans);color:#4b5e50}.disclaimer-copy strong{font-weight:600;color:#293f32}.disclaimer-copy.standalone{border-top:0;padding-top:0;margin-top:0}.disclaimer-copy.standalone p{font-size:15px;line-height:2;margin-bottom:27px}@media(max-width:760px){.disclaimer-link{left:50%;transform:translateX(-50%);bottom:1px;height:22px;font-size:8px}#bottom{bottom:29px}.disclaimer-copy.standalone p{font-size:14px}}