:root { color-scheme: dark; --panel: rgba(24,23,18,.86); --line: rgba(255,255,255,.16); --cream: #f5efe1; --sage: #a5b099; --oak: #d2a46d; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #12120f; color: var(--cream); font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; }
button { font: inherit; }
.tour-shell, .panorama-stage, #pano { width: 100%; height: 100dvh; }
#pano { background: #28261e; }
.topbar { position: fixed; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 28px; pointer-events: none; background: linear-gradient(180deg, rgba(12,12,10,.54), transparent); }
.topbar-actions { display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; }
.floor-nav { display: inline-flex; align-items: center; gap: 3px; padding: 3px; overflow: hidden; border: 1px solid rgba(210,164,109,.74); border-radius: 6px; background: rgba(17,16,13,.9); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.floor-link { display: grid; place-items: center; width: 43px; min-height: 38px; border-radius: 3px; color: #fff8e9; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.floor-link + .floor-link { border-left: 0; }
.floor-link:not(.active):hover, .floor-link:not(.active):focus-visible { color: #fffdf5; background: rgba(210,164,109,.28); outline: none; }
.floor-link.active { color: #1b1711; background: #e5bb7b; box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 2px 7px rgba(0,0,0,.3); }
.brand { font-size: 16px; font-weight: 700; letter-spacing: .05em; }
.brand span { margin-left: 10px; color: rgba(245,239,225,.7); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.map-toggle, .home-link, .icon-button { border: 1px solid var(--line); color: var(--cream); background: rgba(25,24,19,.72); cursor: pointer; pointer-events: auto; }
.map-toggle, .home-link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border-radius: 5px; font-size: 13px; }
.home-link { text-decoration: none; }
.map-toggle:hover, .map-toggle:focus-visible, .home-link:hover, .home-link:focus-visible { border-color: var(--oak); background: rgba(55,46,33,.9); outline: none; }
.map-icon { width: 16px; height: 14px; border: 1px solid currentColor; opacity: .9; background: linear-gradient(90deg, transparent 31%, currentColor 32%, currentColor 37%, transparent 38%, transparent 62%, currentColor 63%, currentColor 68%, transparent 69%); }
.home-icon { position: relative; width: 15px; height: 12px; margin-top: 3px; border: 1px solid currentColor; border-radius: 1px; opacity: .9; }
.home-icon::before { content: ""; position: absolute; top: -6px; left: 1px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(45deg); }
.room-panel { position: fixed; z-index: 3; top: 98px; left: 28px; width: min(286px, calc(100vw - 56px)); padding: 19px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 14px 42px rgba(0,0,0,.26); backdrop-filter: blur(12px); }
.eyebrow { margin: 0 0 7px; color: var(--sage); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
h1, h2 { margin: 0; letter-spacing: 0; } h1 { color: #fffdf5; font-size: 20px; line-height: 1.28; } h2 { color: #fffdf5; font-size: 19px; }
#sceneMeta { margin: 6px 0 16px; color: rgba(245,239,225,.68); font-size: 12px; }
.scene-nav { display: grid; gap: 7px; }
.scene-nav button { min-height: 35px; padding: 5px 8px; overflow: hidden; border: 1px solid transparent; border-radius: 4px; color: rgba(245,239,225,.78); background: rgba(255,255,255,.055); text-align: left; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.scene-nav button:hover, .scene-nav button:focus-visible { border-color: rgba(210,164,109,.65); outline: none; }.scene-nav button.active { border-color: var(--oak); color: #fffaf1; background: rgba(210,164,109,.2); }
.scene-count { position: fixed; z-index: 3; right: 28px; bottom: 22px; color: rgba(255,255,255,.78); font-size: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.75); }.fade { position: fixed; z-index: 5; inset: 0; pointer-events: none; opacity: 0; background: #11110e; transition: opacity .25s ease; }.fade.visible { opacity: .24; }
.hotspot { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; color: #fff; background: rgba(31,27,20,.56); box-shadow: 0 0 0 5px rgba(255,250,230,.09), 0 7px 18px rgba(0,0,0,.38); cursor: pointer; transition: transform .18s ease, background .18s ease; }.hotspot::after { content: ">"; display: block; margin-top: -2px; font-size: 22px; line-height: 1; }.hotspot-previous::after { content: "<"; }.hotspot:hover, .hotspot:focus-visible { transform: scale(1.12); background: rgba(181,138,83,.9); outline: none; }
.map-panel { position: fixed; z-index: 7; top: 14px; right: 14px; bottom: 14px; width: min(465px, calc(100vw - 28px)); display: flex; flex-direction: column; padding: 19px; border: 1px solid var(--line); border-radius: 7px; background: rgba(24,23,18,.94); box-shadow: -18px 0 50px rgba(0,0,0,.32); transform: translateX(calc(100% + 24px)); transition: transform .28s ease; backdrop-filter: blur(15px); }.map-panel.open { transform: translateX(0); }.map-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 16px; }.icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 4px; font-size: 24px; line-height: 1; }.icon-button:hover, .icon-button:focus-visible { border-color: var(--oak); outline: none; }
.plan-wrap { position: relative; width: 100%; max-height: calc(100dvh - 112px); overflow: auto; border-radius: 3px; background: #202023; }.plan-image { display: block; width: 100%; min-width: 380px; height: auto; opacity: .94; }.plan-markers { position: absolute; inset: 0; min-width: 380px; }.plan-marker { position: absolute; transform: translate(-50%,-50%); width: 13px; height: 13px; padding: 0; border: 2px solid #fff6dd; border-radius: 50%; background: #171710; box-shadow: 0 0 0 4px rgba(15,15,12,.42); cursor: pointer; }.plan-marker::after { content: attr(data-name); position: absolute; left: 9px; top: -9px; min-width: max-content; padding: 3px 5px; border-radius: 3px; color: #fff9eb; background: rgba(22,22,18,.84); font-size: 10px; white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }.plan-marker:hover::after, .plan-marker:focus-visible::after, .plan-marker.active::after { opacity: 1; transform: translateY(0); }.plan-marker.active { width: 16px; height: 16px; border-color: var(--oak); background: var(--oak); }.plan-marker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .topbar { height: 63px; padding: 0 14px; }.topbar-actions { gap: 5px; }.brand { font-size: 12px; }.brand span, .overview-return span:last-child, .home-link span:last-child, .map-toggle span:last-child { display: none; }.overview-return, .home-link, .map-toggle { width: 38px; justify-content: center; padding: 0; }.floor-link { width: 36px; min-height: 34px; font-size: 12px; }.room-panel { top: auto; bottom: 47px; left: 12px; width: calc(100vw - 24px); padding: 14px; } h1 { font-size: 18px; } #sceneMeta { margin-bottom: 11px; }.scene-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }.scene-nav button { min-height: 32px; padding: 4px 6px; font-size: 11px; }.scene-count { right: 14px; bottom: 15px; }.map-panel { inset: 8px; width: auto; padding: 15px; } }
.direction-readout { position: fixed; z-index: 4; top: 84px; right: 28px; display: inline-flex; align-items: center; gap: 8px; min-width: 96px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: rgba(25,24,19,.72); color: var(--cream); box-shadow: 0 10px 24px rgba(0,0,0,.18); backdrop-filter: blur(10px); pointer-events: none; }.direction-readout > span:last-child { display: grid; gap: 2px; }.direction-readout b { color: rgba(245,239,225,.72); font-size: 10px; font-weight: 500; letter-spacing: .04em; }.direction-readout small { color: #fffdf5; font-size: 13px; font-weight: 700; }.direction-arrow { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(210,164,109,.82); border-radius: 50%; color: var(--oak); font-size: 15px; font-weight: 700; line-height: 1; transition: transform .1s linear; }.marker-heading { display: none; position: absolute; left: 50%; top: -16px; width: 10px; height: 18px; transform: translateX(-50%); transform-origin: 50% 24px; transition: transform .1s linear; }.marker-heading::before { content: ""; position: absolute; top: 0; left: 0; border-right: 5px solid transparent; border-bottom: 10px solid var(--oak); border-left: 5px solid transparent; }.marker-heading::after { content: ""; position: absolute; top: 9px; left: 4px; width: 2px; height: 9px; background: var(--oak); }.plan-marker.active .marker-heading { display: block; }
@media (max-width: 640px) { .direction-readout { top: 70px; right: 14px; min-width: 88px; padding: 6px 8px; } }
.map-panel { bottom: auto; max-height: calc(100dvh - 28px); }.plan-wrap { max-height: min(560px, calc(100dvh - 130px)); overflow: hidden; }.plan-image { min-width: 0; }.plan-markers { min-width: 0; }
@media (max-width: 640px) { .map-panel { bottom: 8px; max-height: none; }.plan-wrap { max-height: calc(100dvh - 104px); overflow: auto; }.plan-image,.plan-markers { min-width: 380px; } }
.map-head-actions { display: inline-flex; align-items: center; gap: 8px; }.map-direction { min-width: 42px; border: 1px solid rgba(210,164,109,.5); border-radius: 3px; color: var(--oak); padding: 7px 6px; text-align: center; font-size: 12px; font-weight: 700; }
.overview-screen { position: fixed; z-index: 3; inset: 0; display: grid; place-items: center; padding: 86px 28px 24px; background: #171610; }.overview-screen[hidden] { display: none; }.overview-canvas { position: relative; width: min(1440px, 100%); max-height: calc(100dvh - 110px); line-height: 0; }.overview-canvas img { display: block; width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; border-radius: 3px; box-shadow: 0 18px 60px rgba(0,0,0,.35); }.overview-hotspots { position: absolute; inset: 0; }.overview-hotspot { position: absolute; width: 25px; height: 25px; transform: translate(-50%,-50%); border: 2px solid #fff6dd; border-radius: 50%; background: rgba(38,33,24,.86); box-shadow: 0 0 0 5px rgba(210,164,109,.18),0 4px 13px rgba(0,0,0,.4); cursor: pointer; }.overview-hotspot::before { content: "+"; color: var(--oak); font-size: 18px; line-height: 18px; }.overview-hotspot::after { content: attr(data-name); position: absolute; left: 50%; bottom: 32px; display: none; transform: translateX(-50%); min-width: max-content; border-radius: 3px; background: rgba(22,22,18,.9); color: #fff9eb; padding: 5px 7px; font-size: 11px; line-height: 1.2; white-space: nowrap; }.overview-hotspot:hover,.overview-hotspot:focus-visible { background: var(--oak); transform: translate(-50%,-50%) scale(1.14); outline: none; }.overview-hotspot:hover::after,.overview-hotspot:focus-visible::after { display: block; }.overview-return { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--cream); background: rgba(25,24,19,.72); cursor: pointer; font-size: 13px; }.overview-return:hover,.overview-return:focus-visible { border-color: var(--oak); background: rgba(55,46,33,.9); outline: none; }.overview-icon { width: 16px; height: 12px; border: 1px solid currentColor; opacity: .9; background: linear-gradient(90deg,transparent 31%,currentColor 32%,currentColor 37%,transparent 38%,transparent 62%,currentColor 63%,currentColor 68%,transparent 69%); }body.overview-mode .room-panel,body.overview-mode .scene-count,body.overview-mode .direction-readout,body.overview-mode .map-toggle,body.overview-mode .overview-return { display: none; }body:not(.overview-mode) .home-link { display: none; }
@media (max-width: 640px) { .overview-screen { padding: 68px 12px 14px; }.overview-canvas,.overview-canvas img { max-height: calc(100dvh - 82px); }.overview-hotspot { width: 30px; height: 30px; }.overview-hotspot::after { display: none; } }
.overview-canvas { width: min(1440px, calc((100dvh - 110px) * 1.5), 100%); }.overview-canvas img { width: 100%; max-height: none; }
@media (max-width: 640px) { .overview-canvas { width: min(calc((100dvh - 82px) * 1.5), 100%); }.overview-canvas img { max-height: none; } }