:root{--accent:#d9bd87;--bg:#101916;color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#f8f4e9;background:var(--bg)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #fff3;background:#111d19c9;padding:10px 15px;border-radius:5px;min-height:42px}button:hover,button[aria-current=true]{color:var(--accent);border-color:var(--accent)}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}#world,#stage-canvas,#shade{position:fixed;inset:0;width:100%;height:100%}#world{touch-action:none}#shade{pointer-events:none;background:linear-gradient(#0008,transparent 30%,transparent 60%,#000b)}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 32px;z-index:20}header strong{font-size:19px;letter-spacing:.14em}header button{background:transparent;border-color:transparent;padding:8px 12px}#cover{position:fixed;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#061511eb,#06151188 50%,#06151122);z-index:10;background-size:cover;background-position:center}.cover-inner{max-width:730px;margin:0 8vw;padding:30px;border-left:1px solid var(--accent);text-shadow:0 2px 18px #000}h1{font-family:"Songti SC","Noto Serif CJK SC",serif;font-weight:500;letter-spacing:.12em}.cover-inner h1{font-size:clamp(38px,5vw,76px);margin:20px 0}.cover-inner p{line-height:1.9}.eyebrow{color:var(--accent);letter-spacing:.22em;font-size:12px}.primary{background:var(--accent);color:#17201c;border:0;margin-top:24px;padding:15px 25px}.room-heading{position:fixed;top:90px;left:32px;max-width:46vw;pointer-events:none;text-shadow:0 2px 12px #000}.room-heading h1{font-size:32px;margin:10px 0}.room-heading p:not(.eyebrow){font-size:14px;line-height:1.8}#hotspots{position:fixed;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);border-radius:30px;background:#15251ee6;box-shadow:0 3px 18px #0007;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}#guide{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:132px;width:auto;aspect-ratio:9/16;pointer-events:none;z-index:12;filter:drop-shadow(0 4px 15px #0007)}#guide-image,#guide-video{width:100%;height:100%;object-fit:contain;object-position:bottom}#guide .guide-controls{position:absolute;right:0;top:35%;display:grid;gap:3px;pointer-events:auto;background:#101d18b8;padding:3px;border-radius:6px}.guide-controls button{min-height:34px;width:38px;padding:4px;font-size:16px}.guide-controls #scale{font-size:10px}#captions{position:fixed;bottom:140px;left:34%;right:15%;text-align:center;font-size:clamp(16px,1.5vw,24px);line-height:1.65;text-shadow:0 2px 4px #000,0 0 12px #000;background:#08161080;border-radius:5px;padding:9px;pointer-events:none}#captions:empty{display:none}.view-controls{position:fixed;right:24px;bottom:160px;display:grid;gap:7px;z-index:15}.view-controls button{font-size:12px}footer{position:fixed;bottom:0;left:0;right:0;min-height:120px;background:linear-gradient(transparent,#06100fea);z-index:16;padding:16px 32px 12px}#rooms{display:flex;justify-content:center;gap:12px;overflow-x:auto}#rooms button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;white-space:nowrap}#rooms button[aria-current=true]{border-bottom-color:var(--accent)}.footer-tools{display:flex;gap:15px;justify-content:space-between;margin-top:8px}.footer-tools button{background:transparent;border:0;font-size:12px;padding:7px}#notice,#error{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:100;padding:20px;background:#101f1bee;border:1px solid var(--accent);max-width:min(560px,90vw);line-height:1.8}#error{border-color:#f09e72}dialog{width:min(800px,92vw);max-height:85dvh;overflow:auto;border:1px solid #b9b09066;background:#13201b;color:inherit;border-radius:12px;padding:35px}dialog::backdrop{background:#000b}.close{position:sticky;top:0;float:right;z-index:1}#detail-content h2{font-weight:500;color:var(--accent)}#detail-content p{line-height:1.9;white-space:pre-line}#detail-content img,#detail-content video{max-width:100%;max-height:50vh;display:block;margin:auto}#detail-content button{margin:6px}#countdown{position:fixed;inset:0;pointer-events:none}#pattern-name{position:absolute;top:100px;left:32px;background:#101916b0;padding:12px 18px;font-size:23px}#count-number{position:absolute;right:5vw;bottom:18vh;font-size:clamp(64px,10vw,140px);font-weight:300;text-shadow:0 4px 15px #000}#exit-clean{position:fixed;bottom:20px;right:20px;z-index:90}body.clean header,body.clean footer,body.clean .room-heading,body.clean .view-controls,body.clean #guide,body.clean #captions,body.clean #hotspots{display:none}#catalog:empty{display:none}@media(max-width:700px){header{padding:14px 16px;gap:5px}header strong{font-size:15px;letter-spacing:.06em}header button{padding:5px;font-size:12px}.room-heading{left:18px;top:72px;max-width:78vw}.room-heading h1{font-size:26px}.room-heading p:not(.eyebrow){font-size:12px}.cover-inner{margin:0 6vw;padding:22px}.view-controls{right:12px;bottom:190px;gap:5px}.view-controls button{padding:7px;font-size:11px}#guide{bottom:150px}#captions{left:8%;right:8%;bottom:115px;font-size:15px;padding:7px}footer{padding:12px 14px 10px;min-height:106px}#rooms{gap:5px;justify-content:flex-start}#rooms button{font-size:13px;padding:8px 14px}.footer-tools{gap:4px}.footer-tools button{font-size:11px;padding:4px}#pattern-name{top:80px;left:15px;font-size:19px}.hotspot{font-size:12px;max-width:170px}dialog{padding:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

:root {
  --accent: #c7ac7a;
  --bg: #151b1b;
  --ink: #232d2b;
  --paper: #f2f0e9;
  --quiet: #99a39a;
  color: #f5f2eb;
  background: var(--bg);
}
button { border-radius: 0; transition: color .2s, border-color .2s, background .2s; }
button:hover { background-color: #f5f2ea20; }
#shade {
  background: linear-gradient(180deg, #07151890 0%, #07151818 23%, transparent 53%, #08151533 72%, #061011ce 100%);
}
#transition {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 52% 47%, #eee6d59e, #1f2929 67%, #0b1416);
  transition: opacity .38s ease;
}
#transition.active { opacity: 1; pointer-events: auto; }
#transition::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(110deg, transparent 28%, #fff7e235 49%, transparent 69%);
  transform: translateX(-55%);
}
#transition.active::after { opacity: 1; transform: translateX(50%); transition: transform .8s ease, opacity .4s; }
header { padding: 19px 34px; border-bottom: 1px solid #fff2; background: linear-gradient(#07151599,#0715151a); }
header strong { font-size: 15px; letter-spacing: .18em; font-weight: 500; }
header button { font-size: 12px; letter-spacing: .07em; }
#cover { background-position: center; }
.cover-inner { max-width: 690px; margin-left: min(12vw, 170px); border: 0; padding: 30px 0; }
.cover-inner::before { content: ''; display: block; height: 1px; width: 120px; background: var(--accent); margin-bottom: 28px; }
.cover-inner .eyebrow { font-size: 13px; letter-spacing: .28em; }
.cover-inner h1 { font-size: clamp(46px,6vw,94px); line-height: 1.17; margin: 22px 0 20px; letter-spacing: .13em; text-shadow: 0 2px 24px #0007; }
.cover-inner p:not(.eyebrow) { font-size: clamp(15px,1.25vw,20px); letter-spacing: .1em; color: #f4f4ec; }
.primary { background: #dbcaab; color: #1d2827; border: 1px solid #dbcaab; min-width: 170px; letter-spacing: .14em; }
.primary:hover { background: #f5e8ce; color: #16201f; }
.room-heading { top: 112px; left: 5vw; max-width: 520px; }
.room-heading .eyebrow { color: #e2c898; letter-spacing: .25em; font-size: 12px; }
.room-heading h1 { font-size: clamp(30px,3vw,52px); line-height: 1.2; letter-spacing: .09em; font-weight: 400; }
.room-heading p:not(.eyebrow) { font-size: 15px; color: #f2f1ea; max-width: 440px; }
#hotspots { z-index: 8; }
.hotspot {
  border: 1px solid #f7e9ca91; background: #192324d9; color: #f5f0e4;
  box-shadow: 0 10px 28px #0006; backdrop-filter: blur(12px);
  border-radius: 2px; min-height: 38px; padding: 8px 13px;
  font-size: 13px; letter-spacing: .06em;
}
.hotspot:hover { background: #263230ec; color: #f7e6bc; }
.view-controls { right: 28px; bottom: 143px; gap: 2px; }
.view-controls button { font-size: 12px; background: #17232291; border-color: #fff2; min-width: 100px; }
footer { min-height: 103px; padding: 10px 28px 9px; background: linear-gradient(#07131422,#071314f2 34%); }
#rooms { gap: 0; justify-content: center; }
#rooms button { font-size: 13px; padding: 9px 13px; letter-spacing: .05em; border-bottom-width: 1px; color: #e2e6dc; }
#rooms button:hover,#rooms button[aria-current=true] { color: #ead0a2; background: transparent; }
.footer-tools { justify-content: center; margin-top: 1px; gap: 23px; }
.footer-tools button { color: #c8d3cb; font-size: 11px; letter-spacing: .06em; }
#guide { bottom: 112px; }
#guide .guide-controls { right: -43px; top: 43%; background: #14201ecf; border: 1px solid #eee2c55e; border-radius: 2px; }
#captions { background: #0f1b1ac9; border-left: 2px solid var(--accent); border-radius: 0; left: 32%; right: 20%; bottom: 123px; }
dialog {
  width: min(1060px, 94vw); max-height: 89dvh; background: var(--paper); color: var(--ink);
  border: 1px solid #d8cfbb; border-radius: 0; padding: 36px 48px 44px;
  box-shadow: 0 25px 80px #000b;
}
dialog::backdrop { background: #071313c9; backdrop-filter: blur(4px); }
dialog[open] { animation: exhibit-reveal .3s ease-out; }
@keyframes exhibit-reveal { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
dialog button { border: 1px solid #4f635d45; background: transparent; color: var(--ink); }
dialog button:hover,dialog button[aria-current=true] { color: #183632; background: #dcd6c7; border-color: #8f957f; }
dialog .close { right: -22px; top: -18px; border: 0; font-size: 24px; line-height: 1; background: transparent; }
#detail-content h2 { font-family: "Songti SC", "Noto Serif CJK SC", serif; color: var(--ink); font-size: clamp(30px,3vw,46px); font-weight: 500; margin: 12px 0 18px; letter-spacing: .08em; }
#detail-content h3 { color: #7b725e; font-size: 15px; letter-spacing: .14em; font-weight: 500; border-bottom: 1px solid #c7bdaa; padding-bottom: 10px; margin: 28px 0 14px; }
#detail-content p { font-size: 15px; line-height: 1.9; }
#detail-content .detail-intro { max-width: 760px; font-size: 17px; line-height: 1.95; margin: 0 0 22px; }
#detail-content .detail-media { margin: 16px 0; }
#detail-content img,#detail-content video { max-height: min(55vh,560px); width: auto; max-width: 100%; object-fit: contain; background: #e4e0d7; }
#detail-content img.zoomable { cursor: zoom-in; }
#detail-content figure.zoomed { position: fixed; z-index: 4; inset: 0; margin: 0; padding: 3vh 3vw; background: #101818ed; display: grid; place-items: center; cursor: zoom-out; }
#detail-content figure.zoomed img { max-height: 92vh!important; max-width: 94vw!important; width: auto!important; object-fit: contain!important; background: transparent; cursor: zoom-out; }
#detail-content figure.zoomed figcaption,#detail-content figure.zoomed video { display: none; }
#detail-content figcaption { color: #6a7069; font-size: 12px; line-height: 1.6; padding: 8px 0; }
#detail-content .detail-video-note { color: #776b57; font-size: 12px; border-left: 2px solid #bea576; padding-left: 10px; }
.step-nav { display: flex; gap: 6px; overflow: auto; padding: 1px 0 5px; }
.step-nav button { white-space: nowrap; font-size: 13px; padding: 7px 10px; min-height: 35px; }
.step-panel { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(180px,1fr); gap: 24px; align-items: center; background: #e8e4da; padding: 16px; min-height: 200px; }
.step-panel .detail-media { margin: 0!important; }
.step-panel img,.step-panel video { max-height: 390px!important; }
.step-panel p { margin: 0!important; }
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; }
.detail-gallery h3 { grid-column: 1/-1; margin-bottom: 0!important; }
.detail-gallery .detail-media { margin: 0!important; }
.detail-gallery img { width: 100%!important; max-height: 260px!important; object-fit: cover!important; }
#detail-content .detail-credit { font-size: 12px; color: #66716a; border-top: 1px solid #c7bdaa; padding-top: 13px; }
@media (prefers-reduced-motion: reduce) { #transition,#transition::after { transition: none!important; } dialog[open] { animation: none!important; } }
@media (max-width: 700px) {
  header { padding: 10px 13px; }
  header strong { font-size: 13px; letter-spacing: .05em; }
  header button { font-size: 11px; padding: 4px 5px; }
  .cover-inner { margin: 0 7vw; }
  .cover-inner h1 { font-size: clamp(38px,11vw,60px); }
  .room-heading { top: 68px; left: 17px; max-width: 73vw; }
  .room-heading h1 { font-size: 28px; }
  .room-heading p:not(.eyebrow) { font-size: 12px; }
  .view-controls { right: 10px; bottom: 185px; }
  .view-controls button { min-width: 78px; font-size: 10px; }
  #guide .guide-controls { right: 0; top: 36%; }
  footer { padding: 8px 9px 6px; min-height: 102px; }
  #rooms { justify-content: flex-start; }
  #rooms button { font-size: 11px; padding: 8px 10px; }
  .footer-tools { gap: 6px; }
  .footer-tools button { font-size: 10px; }
  #captions { left: 7%; right: 7%; bottom: 113px; }
  dialog { width: 95vw; padding: 20px 18px 30px; }
  dialog .close { right: -8px; top: -8px; }
  #detail-content h2 { font-size: 28px; padding-right: 28px; }
  #detail-content .detail-intro { font-size: 15px; }
  .step-panel { grid-template-columns: 1fr; gap: 9px; }
  .detail-gallery { grid-template-columns: 1fr 1fr; gap: 9px; }
}