:root {
  --paper: #f4eedf;
  --paper-deep: #e9dfca;
  --ink: #21312d;
  --muted: #6f766c;
  --jade: #246a58;
  --jade-light: #6ca58a;
  --vermilion: #b94e35;
  --blue: #3b7c9d;
  --purple: #755b8d;
  --gold: #d5a64e;
  --line: #d5cbb8;
  --shadow: 0 20px 60px rgba(39, 47, 40, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
.app { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* Session welcome */
.welcome-modal { position: absolute; z-index: 300; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; background: rgba(22,34,28,.7); backdrop-filter: blur(9px); transition: opacity .35s ease, visibility .35s ease; }
.welcome-modal.show { visibility: visible; opacity: 1; }
.welcome-paper { position: relative; width: min(500px,100%); padding: 42px 42px 34px; overflow: hidden; border: 1px solid #cdbfa7; color: var(--ink); text-align: center; background-color: var(--paper); background-image: repeating-linear-gradient(2deg, transparent 0 8px, rgba(104,85,55,.025) 9px); box-shadow: 0 28px 80px rgba(6,14,10,.32); }
.welcome-paper::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(141,116,76,.24); pointer-events: none; }
.welcome-seal { position: absolute; left: 28px; top: 27px; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--vermilion); color: var(--vermilion); font: 600 12px "STKaiti", KaiTi, serif; writing-mode: vertical-rl; }
.welcome-paper > p { margin: 0; color: var(--vermilion); font: 9px Georgia, serif; }.welcome-paper h1 { margin: 17px 0 10px; font: 600 39px "STKaiti", KaiTi, serif; }.welcome-copy { display: block; color: var(--muted); font: 13px/1.7 "Songti SC", SimSun, serif; }
.welcome-rule { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 15px; }.welcome-rule i { width: 44px; height: 1px; background: var(--line); }.welcome-rule b { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.welcome-guide { margin-top: 20px; padding: 14px 0 4px; border-top: 1px solid var(--line); text-align: left; }.welcome-guide > span { display: block; margin-bottom: 4px; color: var(--vermilion); font-size: 10px; font-weight: 600; }.welcome-guide ol { margin: 0; padding: 0; list-style: none; }.welcome-guide li { display: grid; grid-template-columns: 31px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(134,119,92,.13); }.welcome-guide li:last-child { border-bottom: 0; }.welcome-guide li > b { color: var(--jade); font: 600 12px Georgia, serif; }.welcome-guide li strong, .welcome-guide li small { display: block; }.welcome-guide li strong { font-size: 12px; }.welcome-guide li small { margin-top: 3px; color: var(--muted); font: 10px/1.55 "Songti SC", SimSun, serif; }.welcome-paper > button { width: 100%; height: 45px; margin-top: 18px; padding: 0 16px; border: 0; border-radius: 3px; color: white; text-align: left; background: var(--jade); }.welcome-paper > button span { float: right; }

/* Map workspace */
.map-view { position: absolute; inset: 0; display: grid; grid-template-columns: 286px 1fr; grid-template-rows: 80px 1fr; background-color: var(--paper); background-image: repeating-linear-gradient(0deg, rgba(84,75,59,.025) 0 1px, transparent 1px 7px); transition: opacity .3s ease, transform .4s ease; }
.map-view.hidden { opacity: 0; pointer-events: none; transform: scale(.985); }
.map-topbar { position: relative; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(248,244,234,.94); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-seal { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--vermilion); color: var(--vermilion); font: 600 14px/1 "STKaiti", KaiTi, serif; writing-mode: vertical-rl; }
.brand strong { display: block; font: 600 21px "STKaiti", KaiTi, serif; }
.brand div span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.site-search { position: absolute; z-index: 35; left: 50%; top: 50%; width: min(390px,35vw); height: 42px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.84); box-shadow: 0 5px 18px rgba(60,64,54,.08); transform: translate(-50%,-50%); }
.search-symbol { position: relative; flex: 0 0 17px; width: 14px; height: 14px; margin-left: 13px; border: 1.8px solid var(--jade); border-radius: 50%; }
.search-symbol::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 6px; height: 2px; background: var(--jade); transform: rotate(45deg); transform-origin: left center; }
.site-search input { min-width: 0; flex: 1; height: 100%; padding: 0 8px 0 10px; border: 0; outline: 0; color: var(--ink); font-size: 12px; background: transparent; }.site-search input::placeholder { color: #959b93; }
.site-search > button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; color: var(--muted); font-size: 19px; background: transparent; visibility: hidden; opacity: 0; }.site-search.has-value > button { visibility: visible; opacity: 1; }
.search-results { position: absolute; left: -1px; right: -1px; top: calc(100% + 7px); display: none; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: rgba(248,244,234,.98); box-shadow: 0 16px 35px rgba(43,51,44,.2); }.search-results.open { display: block; }
.search-results button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 0; border-bottom: 1px solid rgba(207,198,180,.58); color: var(--ink); text-align: left; background: transparent; }.search-results button:last-child { border-bottom: 0; }.search-results button:hover, .search-results button:focus-visible { outline: 0; background: rgba(36,106,88,.09); }
.search-results button span, .search-results button b, .search-results button small { display: block; }.search-results button b { font-size: 12px; }.search-results button small { margin-top: 4px; color: var(--muted); font-size: 9px; }.search-results button i { flex: 0 0 auto; color: var(--vermilion); font: 700 8px Georgia, serif; }
.search-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.map-nav { display: flex; align-items: center; gap: 8px; }
.nav-button { width: 54px; height: 50px; display: grid; place-items: center; gap: 1px; padding: 4px; border: 0; color: var(--muted); background: transparent; }
.nav-button span { font-size: 19px; line-height: 1; }
.nav-button b { font-size: 9px; font-weight: 500; }
.nav-button:hover { color: var(--jade); }
.checkin-summary { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; }
.checkin-summary > span { color: var(--muted); font-size: 10px; }
.checkin-summary strong { font: 400 12px Georgia, serif; }
.checkin-summary strong b { color: var(--vermilion); font-size: 20px; }

.map-sidebar { grid-column: 1; grid-row: 2; position: relative; z-index: 8; padding: 36px 25px 22px; border-right: 1px solid var(--line); background: rgba(244,238,223,.9); }
.eyebrow { margin: 0; color: var(--vermilion); font: 9px Georgia, serif; }
.map-sidebar h1 { margin: 10px 0 13px; font: 600 34px/1.18 "STKaiti", KaiTi, serif; letter-spacing: 0; }
.map-intro { margin: 0; color: #687169; font: 12px/1.75 "Songti SC", SimSun, serif; }
.route-switcher { display: grid; gap: 6px; margin-top: 25px; }
.route-switcher button { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 9px; width: 100%; min-height: 52px; padding: 7px 10px; border: 1px solid transparent; border-radius: 4px; text-align: left; color: var(--muted); background: transparent; }
.route-switcher button i { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.route-switcher button span, .route-switcher button b, .route-switcher button small { display: block; }
.route-switcher button b { color: var(--ink); font-size: 12px; }
.route-switcher button small { margin-top: 3px; font-size: 9px; font-weight: 400; }
.route-switcher button:nth-child(1) { color: var(--vermilion); }
.route-switcher button:nth-child(2) { color: var(--blue); }
.route-switcher button:nth-child(3) { color: var(--jade); }
.route-switcher button.active { border-color: var(--line); background: rgba(255,255,255,.68); box-shadow: 0 6px 18px rgba(73,70,59,.07); }
.route-switcher button.active i { background: currentColor; box-shadow: 0 0 0 4px rgba(185,78,53,.11); }
.sidebar-feature { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 10px; margin-top: 18px; padding: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.32); }
.sidebar-feature img { width: 68px; height: 72px; object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 64% 58%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 64% 58%, #000 72%, transparent 100%); }
.sidebar-feature img.photo { height: 58px; object-fit: cover; border: 4px solid #f8f2e5; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; box-shadow: 0 4px 9px rgba(51,58,49,.16); transform: rotate(-2deg); }
.sidebar-feature span, .sidebar-feature strong, .sidebar-feature small { display: block; }.sidebar-feature span { color: var(--vermilion); font-size: 8px; }.sidebar-feature strong { margin-top: 5px; font: 600 14px "STKaiti", KaiTi, serif; }.sidebar-feature small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.sidebar-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 12px; }
.sidebar-stats div { text-align: center; border-right: 1px solid var(--line); }.sidebar-stats div:last-child { border-right: 0; }.sidebar-stats b, .sidebar-stats span { display: block; }.sidebar-stats b { color: var(--jade); font: 600 16px Georgia, serif; }.sidebar-stats span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.route-brief { position: absolute; left: 25px; right: 25px; bottom: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.route-brief > span { color: var(--vermilion); font: 9px Georgia, serif; }
.route-brief > strong { display: block; margin-top: 5px; font: 600 17px "STKaiti", KaiTi, serif; }
.route-brief p { min-height: 40px; margin: 7px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.route-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -2px 0 11px; }.route-facts > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.route-facts i { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--vermilion); font-style: normal; }.route-facts b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.route-brief button { width: 100%; height: 38px; padding: 0 13px; border: 0; border-radius: 3px; color: white; text-align: left; background: var(--jade); }
.route-brief button span { float: right; }

.chengdu-map { grid-column: 2; grid-row: 2; position: relative; overflow: hidden; min-width: 0; background-color: #edf0e4; background-image: linear-gradient(rgba(64,92,74,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(64,92,74,.055) 1px, transparent 1px); background-size: 32px 32px; }
.chengdu-map::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(105,118,98,.18); pointer-events: none; }
.map-caption { position: absolute; z-index: 5; top: 30px; left: 32px; display: flex; align-items: baseline; gap: 10px; color: rgba(45,65,54,.34); }
.map-caption span { font: 10px Georgia, serif; }
.map-caption strong { font: 600 35px "STKaiti", KaiTi, serif; }
.map-caption small { font: 9px Georgia, serif; }
.map-geometry { position: absolute; inset: 0; width: 100%; height: 100%; }
.district { fill: rgba(227,222,198,.5); stroke: rgba(105,111,87,.25); stroke-width: 2; }
.ring { fill: none; stroke: rgba(160,144,107,.52); stroke-width: 6; stroke-dasharray: 2 7; stroke-linecap: round; }
.ring-two { stroke-width: 4; opacity: .75; }
.river-main, .river-branch { fill: none; stroke: #84bec5; stroke-width: 26; stroke-linecap: round; opacity: .72; }
.river-branch { stroke-width: 13; opacity: .56; }
.river-label { fill: #286e7d; stroke: rgba(237,240,228,.94); stroke-width: 5px; paint-order: stroke fill; font: 600 13px "STKaiti", KaiTi, serif; letter-spacing: 0; pointer-events: none; }
.river-label-main { dominant-baseline: hanging; }.river-label-branch { font-size: 11px; }
.road { fill: none; stroke: rgba(184,168,133,.55); stroke-width: 5; stroke-dasharray: 8 5; }
.route-path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 9; opacity: .14; transition: opacity .25s ease, stroke-width .25s ease, filter .25s ease; }
.route-path.active { opacity: .98; stroke-width: 6; filter: drop-shadow(0 2px 2px rgba(46,54,46,.2)); animation: route-flow 9s linear infinite; }
.route-path.culture { stroke: var(--vermilion); }
.route-path.night { stroke: var(--blue); }
.route-path.nature { stroke: var(--jade); }
@keyframes route-flow { to { stroke-dashoffset: -136; } }
.map-landmarks { position: absolute; inset: 0; z-index: 6; }
.map-landmark { position: absolute; width: 132px; min-height: 108px; padding: 0; border: 0; color: var(--ink); background: transparent; transform: translate(-50%, -50%); transition: transform .18s ease, filter .18s ease; }
.map-landmark:hover, .map-landmark:focus-visible { z-index: 8; transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 8px 7px rgba(35,47,40,.18)); outline: none; }
.landmark-art { position: relative; width: 72px; height: 57px; display: block; margin: 0 auto -3px; }
.landmark-name { position: relative; display: inline-block; min-width: 62px; padding: 5px 9px; border-radius: 3px; color: white; font: 600 12px "STKaiti", KaiTi, serif; background: var(--jade); box-shadow: 0 3px 8px rgba(42,58,47,.14); }
.map-landmark:nth-child(3n+2) .landmark-name { background: var(--blue); }
.map-landmark:nth-child(3n+3) .landmark-name { background: var(--purple); }
.map-landmark[data-kind="panorama"] .landmark-name { background: var(--vermilion); }
.landmark-360 { position: absolute; z-index: 3; right: 4px; top: -4px; min-width: 32px; height: 19px; padding: 0 5px; display: grid; place-items: center; border: 2px solid white; border-radius: 10px; color: white; font: 700 8px Georgia, serif; background: var(--vermilion); }
.landmark-check { position: absolute; z-index: 4; left: 13px; top: 4px; width: 18px; height: 18px; display: none; place-items: center; border: 2px solid white; border-radius: 50%; color: white; font-size: 10px; background: var(--jade); }
.map-landmark.checked .landmark-check { display: grid; }
.map-landmark.route-muted { opacity: .4; filter: grayscale(.25) saturate(.65); }
.map-landmark.route-stop { z-index: 7; filter: drop-shadow(0 8px 7px rgba(35,47,40,.2)); }
.map-landmark.route-stop .watercolor-icon, .map-landmark.route-stop .photo-marker { filter: saturate(1.08) contrast(1.04) drop-shadow(0 6px 5px rgba(48,58,47,.2)); }
.route-order { position: absolute; z-index: 6; left: 3px; top: 50%; width: 25px; height: 25px; display: none; place-items: center; border: 2px solid #fffaf0; border-radius: 50%; color: white; font: 700 8px Georgia, serif; background: var(--active-route-color, var(--vermilion)); box-shadow: 0 4px 10px rgba(40,47,40,.24); }
.map-landmark.route-stop .route-order { display: grid; }
.map-landmark.search-focus { z-index: 18 !important; opacity: 1 !important; filter: drop-shadow(0 0 12px var(--gold)) !important; animation: search-focus 1s ease-in-out 2; }
@keyframes search-focus { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.14); } }
.watercolor-icon { width: 128px; height: 105px; display: block; margin: 0 auto; object-fit: contain; mix-blend-mode: multiply; filter: saturate(.96) contrast(1.02) drop-shadow(0 5px 4px rgba(52,61,48,.12)); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 78%, transparent 100%); }
.photo-marker { width: 88px; height: 64px; display: block; margin: 0 auto 4px; object-fit: cover; border: 5px solid #f8f2e5; box-shadow: 0 5px 12px rgba(57,61,50,.2); transform: rotate(-2deg); }
.map-landmark:nth-child(even) .photo-marker { transform: rotate(2deg); }
.map-landmark:has(.watercolor-icon) .landmark-360 { right: 7px; top: 0; }
.map-landmark:has(.watercolor-icon) .landmark-check { left: 8px; top: 5px; }
.map-landmark[data-spot="sanxingdui"] { width: 150px; min-height: 122px; }
.map-landmark[data-spot="sanxingdui"] .watercolor-icon { width: 146px; height: 122px; }
.map-landmark[data-spot="sanxingdui"] .route-order { left: 8px; top: 54%; }
.map-route-labels { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.map-route-labels button { position: absolute; display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 9px 5px 5px; border: 1px solid rgba(77,87,74,.18); border-radius: 3px; color: #626b62; background: rgba(247,242,229,.86); box-shadow: 0 4px 12px rgba(54,62,52,.1); pointer-events: auto; transition: color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease; }
.map-route-labels button i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: white; font: 700 7px Georgia, serif; }
.map-route-labels button span { color: inherit; font: 600 10px "STKaiti", KaiTi, serif; white-space: nowrap; }
.map-route-labels button.culture { left: 52%; top: 58%; color: var(--vermilion); }
.map-route-labels button.night { right: 8%; top: 55%; color: var(--blue); }
.map-route-labels button.nature { left: 31%; top: 11%; color: var(--jade); }
.map-route-labels button.culture i { background: var(--vermilion); }.map-route-labels button.night i { background: var(--blue); }.map-route-labels button.nature i { background: var(--jade); }
.map-route-labels button:not(.active) { opacity: .58; }
.map-route-labels button.active { color: white; background: var(--active-route-color, var(--vermilion)); border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(54,62,52,.2); }
.map-route-labels button.active i { color: var(--active-route-color, var(--vermilion)); background: white; }

/* Hand-drawn landmark silhouettes */
.landmark-art.roof i, .landmark-art.gate i { position: absolute; left: 10px; top: 17px; width: 52px; height: 30px; border: 3px solid #40554c; border-top: 0; background: #e9d39b; }
.landmark-art.roof::before, .landmark-art.gate::before { content: ""; position: absolute; z-index: 2; left: 3px; top: 8px; width: 66px; height: 18px; border-bottom: 5px solid #40554c; border-radius: 50%; transform: rotate(-2deg); }
.landmark-art.roof::after, .landmark-art.gate::after { content: ""; position: absolute; z-index: 3; left: 12px; top: 3px; width: 48px; height: 15px; border-bottom: 4px solid #8f4938; border-radius: 50%; }
.landmark-art.roof b { position: absolute; z-index: 4; left: 31px; top: 27px; width: 11px; height: 20px; background: #74473d; }
.landmark-art.gate i { left: 7px; width: 58px; background: #c87355; }
.landmark-art.gate b { position: absolute; z-index: 4; left: 27px; top: 29px; width: 20px; height: 18px; border-radius: 8px 8px 0 0; background: #263b35; }
.landmark-art.tower i { position: absolute; left: 29px; top: 7px; width: 15px; height: 44px; background: #c89a49; clip-path: polygon(42% 0,58% 0,70% 12%,65% 28%,83% 100%,17% 100%,35% 28%,30% 12%); }
.landmark-art.tower::after { content: ""; position: absolute; left: 13px; top: 49px; width: 46px; height: 5px; background: #53655a; }
.landmark-art.bridge::before { content: ""; position: absolute; left: 4px; top: 28px; width: 64px; height: 23px; border: 5px solid #52645b; border-bottom: 0; border-radius: 42px 42px 0 0; }
.landmark-art.bridge::after { content: ""; position: absolute; left: 11px; top: 16px; width: 51px; height: 13px; border-bottom: 5px solid #a8513f; border-radius: 50%; }
.landmark-art.panda { width: 60px; border-radius: 50%; background: #f1eee2; }
.landmark-art.panda::before, .landmark-art.panda::after { content: ""; position: absolute; top: 7px; width: 18px; height: 20px; border-radius: 50%; background: #26312e; }
.landmark-art.panda::before { left: 5px; transform: rotate(-24deg); }
.landmark-art.panda::after { right: 5px; transform: rotate(24deg); }
.landmark-art.panda i { position: absolute; z-index: 2; left: 10px; top: 13px; width: 40px; height: 38px; border-radius: 50%; background: #f6f1e4; }
.landmark-art.panda b::before, .landmark-art.panda b::after { content: ""; position: absolute; z-index: 3; top: 24px; width: 11px; height: 15px; border-radius: 50%; background: #26312e; }
.landmark-art.panda b::before { left: 16px; transform: rotate(30deg); }
.landmark-art.panda b::after { right: 16px; transform: rotate(-30deg); }
.landmark-art.mountain::before, .landmark-art.mountain::after { content: ""; position: absolute; bottom: 5px; clip-path: polygon(50% 0,100% 100%,0 100%); }
.landmark-art.mountain::before { left: 4px; width: 52px; height: 48px; background: #6c9a72; }
.landmark-art.mountain::after { right: 3px; width: 42px; height: 36px; background: #44745f; }
.landmark-art.mountain i { position: absolute; z-index: 2; left: 24px; top: 18px; width: 18px; height: 15px; clip-path: polygon(50% 0,100% 100%,0 100%); background: #eef0df; }
.landmark-art.park::before { content: ""; position: absolute; left: 7px; bottom: 5px; width: 56px; height: 21px; border-radius: 50%; background: #6e9d68; }
.landmark-art.park::after { content: ""; position: absolute; left: 27px; top: 8px; width: 16px; height: 42px; background: #805944; clip-path: polygon(40% 100%,45% 35%,0 0,47% 25%,72% 0,57% 34%,100% 14%,60% 46%,68% 100%); }
.landmark-art.park i { position: absolute; z-index: 2; left: 15px; top: 2px; width: 43px; height: 31px; border-radius: 50%; background: #5e8c5f; }
.landmark-art.water::before { content: ""; position: absolute; left: 5px; top: 14px; width: 63px; height: 35px; border-radius: 50%; background: #79b7bd; clip-path: polygon(0 55%,18% 27%,35% 57%,53% 5%,74% 59%,100% 35%,100% 100%,0 100%); }
.landmark-art.water::after { content: ""; position: absolute; left: 13px; top: 2px; width: 45px; height: 32px; background: #56836a; clip-path: polygon(50% 0,100% 100%,0 100%); }

.map-key { position: absolute; z-index: 7; left: 27px; bottom: 24px; display: flex; gap: 16px; padding: 9px 12px; color: var(--muted); font-size: 9px; background: rgba(250,247,239,.86); border: 1px solid rgba(117,119,102,.18); }
.map-key span { display: flex; align-items: center; gap: 5px; }
.map-key i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.key-360 { background: var(--vermilion); }.key-photo { background: var(--blue); }.key-checked { background: var(--jade); }
.north-arrow { position: absolute; z-index: 6; right: 30px; top: 30px; width: 34px; height: 58px; text-align: center; color: var(--ink); }
.north-arrow b { font: 10px Georgia, serif; }
.north-arrow span { display: block; width: 18px; height: 40px; margin: 3px auto; background: var(--ink); clip-path: polygon(50% 0,100% 100%,50% 76%,0 100%); }

/* True panorama */
.panorama-view { position: absolute; z-index: 25; inset: 0; visibility: hidden; opacity: 0; background: #14201b; transition: opacity .36s ease, visibility .36s ease; }
.panorama-view.open { visibility: visible; opacity: 1; }
.pannellum-viewer { position: absolute; inset: 0; }
.panorama-embed { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: none; border: 0; background: #0d1511; }
.panorama-embed.show { display: block; }
.panorama-embed-cover { position: absolute; z-index: 3; inset: 0; display: none; place-items: center; padding: 24px; color: white; text-align: center; background-color: #17251f; background-size: cover; background-position: center; }
.panorama-embed-cover.show { display: grid; }
.panorama-embed-cover::before { content: ""; position: absolute; inset: 0; background: rgba(10,20,15,.56); }
.panorama-embed-cover > div { position: relative; z-index: 1; width: min(430px,100%); padding: 28px; border: 1px solid rgba(255,255,255,.46); background: rgba(17,35,27,.76); backdrop-filter: blur(8px); }
.panorama-embed-cover span { color: var(--gold); font: 9px Georgia, serif; }.panorama-embed-cover h2 { margin: 7px 0 9px; font: 600 28px "STKaiti", KaiTi, serif; }.panorama-embed-cover p { margin: 0 auto 18px; color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.7; }
.panorama-embed-cover button { width: 100%; height: 43px; padding: 0 14px; border: 0; border-radius: 3px; color: white; text-align: left; background: var(--vermilion); }.panorama-embed-cover button b { float: right; }.panorama-embed-cover a { display: inline-block; margin-top: 13px; color: rgba(255,255,255,.72); font-size: 10px; }
.embed-node-layer { position: absolute; z-index: 11; left: 25px; top: 50%; display: none; gap: 8px; transform: translateY(-50%); }
.embed-node-layer.show { display: grid; }
.embed-node-layer button { display: flex; align-items: center; gap: 9px; min-width: 125px; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; color: white; background: rgba(15,36,28,.76); backdrop-filter: blur(8px); }
.embed-node-layer button span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.embed-node-layer button b { font-size: 11px; font-weight: 500; }
.panorama-empty { position: absolute; z-index: 2; inset: 0; display: none; place-items: center; padding: 24px; background-color: #23342d; background-size: cover; background-position: center; }
.panorama-empty.show { display: grid; }
.panorama-empty::before { content: ""; position: absolute; inset: 0; background: rgba(14,27,21,.56); backdrop-filter: blur(3px); }
.panorama-empty-card { position: relative; z-index: 1; width: min(470px,100%); padding: 30px; border: 1px solid rgba(255,255,255,.42); color: white; text-align: center; background: rgba(17,34,27,.82); box-shadow: var(--shadow); }
.panorama-empty-card > span { color: var(--gold); font: 9px Georgia, serif; }
.panorama-empty-card h2 { margin: 8px 0 11px; font: 600 29px "STKaiti", KaiTi, serif; }
.panorama-empty-card p { max-width: 350px; margin: 0 auto; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.75; }
.panorama-empty-card dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.panorama-empty-card dt { color: rgba(255,255,255,.55); font-size: 9px; }.panorama-empty-card dd { margin: 5px 0 0; font: 600 13px Georgia, serif; }
.panorama-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8,16,12,.58), transparent 25%, transparent 68%, rgba(8,15,12,.34)); }
.pano-topbar { position: absolute; z-index: 12; left: 0; top: 0; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 25px; color: white; }
.back-map, .pano-route { justify-self: start; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.38); border-radius: 3px; color: white; background: rgba(10,20,15,.48); backdrop-filter: blur(10px); }
.back-map span { margin-right: 8px; font-size: 17px; }.pano-route { justify-self: end; }
.pano-title { display: flex; align-items: center; gap: 10px; }
.pano-badge { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: var(--gold); font: 700 11px Georgia, serif; }
.pano-title strong, .pano-title small { display: block; }.pano-title strong { font: 600 20px "STKaiti", KaiTi, serif; }.pano-title small { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 9px; }
.pano-hint { position: absolute; z-index: 11; left: 50%; bottom: 32px; padding: 9px 12px; border-radius: 3px; color: white; font-size: 10px; background: rgba(10,20,15,.5); transform: translateX(-50%); backdrop-filter: blur(8px); }
.pano-hint span { margin-right: 6px; font-size: 16px; }
.pano-controls { position: absolute; z-index: 12; right: 27px; bottom: 27px; display: flex; gap: 6px; }
.pano-controls button { width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: white; background: rgba(10,20,15,.48); backdrop-filter: blur(8px); }
.pano-compass { position: absolute; z-index: 12; right: 36px; bottom: 90px; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(10,20,15,.38); }
.pano-compass span { position: absolute; left: 23px; top: 8px; width: 3px; height: 24px; transform-origin: 50% 18px; background: linear-gradient(to bottom, var(--vermilion) 50%, white 50%); }
.pano-compass b { position: absolute; top: -16px; left: 21px; color: white; font-size: 9px; }
.custom-pano-hotspot { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: white; background: rgba(34,106,88,.9); box-shadow: 0 0 0 7px rgba(255,255,255,.13), 0 8px 22px rgba(0,0,0,.3); cursor: pointer; }
.custom-pano-hotspot::before { content: "+"; font-size: 22px; font-weight: 300; }.custom-pano-hotspot.checked::before { content: "✓"; font-size: 15px; }
.pano-hotspot-label { position: absolute; left: 50%; top: 48px; padding: 6px 9px; border-radius: 3px; color: white; font-size: 11px; white-space: nowrap; background: rgba(10,20,15,.74); transform: translateX(-50%); }
.pnlm-load-box { left: 50%; width: 150px; margin-left: -75px; border-radius: 3px; background: rgba(12,25,19,.82); }.pnlm-lmsg { font-size: 0; }.pnlm-lmsg::after { content: "正在进入全景"; font-size: 12px; }.pnlm-about-msg, .pnlm-orientation-button { display: none !important; }

/* Story drawer */
.story-panel { position: absolute; z-index: 70; top: 0; right: 0; width: min(430px, 100%); height: 100%; overflow: auto; color: var(--ink); background: var(--paper); box-shadow: -24px 0 60px rgba(0,0,0,.28); transform: translateX(104%); transition: transform .38s cubic-bezier(.22,.78,.26,1); }
.story-panel.open { transform: translateX(0); }
.panel-close { position: absolute; z-index: 3; right: 16px; top: 16px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: white; font-size: 24px; background: rgba(15,25,20,.35); }
.story-cover { position: relative; height: 245px; display: flex; align-items: flex-end; padding: 26px; color: white; background-color: #394e44; background-size: cover; background-position: center; }
.story-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,14,.82), transparent 68%); }
.story-cover > * { position: relative; z-index: 1; }.story-kicker { position: absolute; top: 24px; left: 25px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.65); font-size: 9px; }
.story-cover div span { font-size: 10px; color: rgba(255,255,255,.75); }.story-cover h2 { margin: 5px 0 0; font: 500 34px "STKaiti", KaiTi, serif; }
.story-body { padding: 0 26px 32px; }.story-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: rgba(45,95,76,.28) transparent; overscroll-behavior-x: contain; }.story-tabs button { position: relative; flex: 0 0 auto; min-width: 82px; height: 52px; padding: 0 12px; border: 0; color: #80847d; background: transparent; font-size: 12px; white-space: nowrap; }.story-tabs button.active { color: var(--jade); font-weight: 600; }.story-tabs button.active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; background: var(--jade); }
.story-tab { display: none; padding-top: 21px; }.story-tab.active { display: block; }.story-tab p { margin: 0 0 14px; color: #5d655e; font: 14px/1.85 "Songti SC", SimSun, serif; }.story-tab .lead { color: var(--ink); font-size: 16px; line-height: 1.7; }
.guide-section-heading { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.guide-section-heading span { color: var(--vermilion); font: 9px/1 Georgia, serif; letter-spacing: 1.6px; }.guide-section-heading h3 { margin: 7px 0 0; color: var(--ink); font: 600 22px/1.2 "STKaiti", KaiTi, serif; letter-spacing: 0; }.guide-content { display: grid; }.guide-entry { padding: 11px 0 13px; border-bottom: 1px solid rgba(122,112,92,.15); }.guide-entry:last-child { border-bottom: 0; }.guide-entry h4 { margin: 0; color: var(--ink); font: 600 16px/1.45 "STKaiti", KaiTi, serif; letter-spacing: 0; }.guide-entry p { margin: 0; color: #596158; font: 13px/1.75 "Songti SC", SimSun, serif; }.guide-entry.is-list p { position: relative; padding-left: 15px; }.guide-entry.is-list p::before { content: ""; position: absolute; left: 1px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--vermilion); }.guide-images { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }.guide-images.single { grid-template-columns: 1fr; }.guide-images img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; border-radius: 4px; background: #ddd4c4; }.guide-empty { padding: 28px 0; color: var(--muted); font: 13px/1.7 "Songti SC", SimSun, serif; text-align: center; }.season-content .guide-entry.is-heading { margin-top: 4px; padding-top: 16px; }.season-content .guide-entry.is-heading h4 { color: var(--jade); font-size: 18px; }
.visit-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.visit-summary article { min-height: 132px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.38); }.visit-summary article > span, .reservation-panel > span, .facility-list article span { display: block; color: var(--vermilion); font-size: 10px; font-weight: 600; letter-spacing: 0; }.visit-summary article p, .facility-list article p { margin: 8px 0 0; color: #596158; font: 12px/1.65 "Songti SC", SimSun, serif; }.reservation-panel { margin-top: 12px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.reservation-panel strong { display: block; margin-top: 7px; color: var(--ink); font-size: 15px; }.reservation-panel p { margin: 6px 0 12px; font-size: 12px; line-height: 1.65; }.reservation-panel button { height: 38px; padding: 0 15px; border: 0; border-radius: 3px; color: white; background: var(--jade); font-size: 11px; }.reservation-panel button[hidden] { display: none; }.facility-list { display: grid; gap: 0; margin-top: 12px; }.facility-list article { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(122,112,92,.15); }.facility-list article i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--jade); background: rgba(36,106,88,.1); font: 600 11px/1 Arial, sans-serif; font-style: normal; }.facility-list article p { margin-top: 5px; }.visit-disclaimer { margin-top: 16px !important; color: var(--muted) !important; font-size: 10px !important; line-height: 1.55 !important; }
.fact-source { margin: 16px 0; padding: 10px 12px; border-left: 3px solid var(--gold); color: #747970; font-size: 9px; line-height: 1.6; background: rgba(222,211,188,.42); }
.audio-story { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; margin-top: 18px; padding: 13px; border: 1px solid #d7cebc; border-radius: 4px; background: #e9e2d3; }.audio-play { width: 42px; height: 42px; border: 0; border-radius: 50%; color: white; background: var(--jade); }.audio-story strong, .audio-story div > span { display: block; }.audio-story strong { font-size: 12px; }.audio-story div > span { margin-top: 2px; color: #777b73; font-size: 9px; }.audio-story i { display: block; height: 2px; margin-top: 8px; background: #c9bfac; }.audio-story i b { display: block; width: 0; height: 100%; background: var(--vermilion); }.audio-story time { color: var(--muted); font-size: 9px; }
.checkin-button { width: 100%; height: 44px; margin-top: 14px; border: 1px solid var(--jade); border-radius: 3px; color: var(--jade); background: transparent; }.checkin-button span { margin-right: 7px; }.checkin-button.done { color: white; background: var(--jade); }
.tab-intro { min-height: 47px; }.compare { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #b4a58e; }.compare-old, .compare-new { position: absolute; inset: 0; background-size: cover; background-position: center; }.compare-new { clip-path: inset(0 0 0 52%); }.compare-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: 52%; width: 2px; background: white; }.compare-divider span { position: absolute; left: 50%; top: 50%; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: var(--jade); background: white; transform: translate(-50%,-50%); }.compare input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }.compare-label { position: absolute; z-index: 2; top: 12px; padding: 5px 7px; color: white; font-size: 9px; background: rgba(10,20,15,.62); }.compare-label.old { left: 12px; }.compare-label.now { right: 12px; }.compare-unavailable { position: absolute; z-index: 7; inset: 0; display: none; place-content: center; padding: 30px; color: white; text-align: center; background: rgba(35,49,42,.92); }.compare-unavailable.show { display: grid; }.compare-unavailable strong, .compare-unavailable span { display: block; }.compare-unavailable strong { font: 600 18px "STKaiti", KaiTi, serif; }.compare-unavailable span { max-width: 240px; margin-top: 8px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.6; }.story-tab .caption { margin-top: 9px; font-size: 10px; line-height: 1.5; color: #878980; }
.sketch-card { padding: 18px; border: 1px solid #d5c7ad; background: #eee5d4; text-align: center; }.sketch-card canvas { display: block; width: 100%; aspect-ratio: 16 / 10; background: #e8ddc8; filter: contrast(.98) saturate(.9); }.sketch-card > strong, .sketch-card > span { display: block; }.sketch-card > strong { margin-top: 12px; font: 600 16px "STKaiti", KaiTi, serif; }.sketch-card > span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.manual-download { padding: 25px 22px; border: 1px solid #d5c7ad; background: #eee5d4; text-align: center; }.manual-download > span, .manual-download > strong, .manual-download > small { display: block; }.manual-download > span { color: var(--vermilion); font: 9px Georgia, serif; }.manual-download > strong { margin-top: 8px; font: 600 21px "STKaiti", KaiTi, serif; }.manual-download > small { margin-top: 6px; color: var(--muted); font-size: 10px; }.manual-download > a { display: block; height: 44px; margin-top: 21px; padding: 0 14px; border-radius: 3px; color: white; line-height: 44px; text-align: left; text-decoration: none; background: var(--jade); }.manual-download > a b { float: right; font-size: 16px; }

/* Routes and stamps */
.route-drawer { position: absolute; z-index: 90; inset: 0; display: grid; place-items: center; padding: 30px; visibility: hidden; opacity: 0; background: rgba(21,31,26,.68); backdrop-filter: blur(10px); transition: opacity .25s ease, visibility .25s ease; }.route-drawer.open { visibility: visible; opacity: 1; }
.drawer-sheet { width: min(980px,100%); max-height: 88vh; overflow: auto; background: var(--paper); box-shadow: var(--shadow); }.drawer-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 27px; border-bottom: 1px solid var(--line); }.drawer-sheet header span { color: var(--vermilion); font: 9px Georgia, serif; }.drawer-sheet h2 { margin: 4px 0 0; font: 600 24px "STKaiti", KaiTi, serif; }.drawer-sheet header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 21px; background: transparent; }
.drawer-sheet > header small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.drawer-content { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 475px; }.route-cards { display: grid; gap: 10px; padding: 24px; }.route-card { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 16px; min-height: 105px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.42); transition: border-color .2s ease, background .2s ease, transform .2s ease; }.route-card.active { border-color: var(--jade); background: rgba(255,255,255,.78); transform: translateX(3px); }.route-card-number { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--vermilion); font: 20px Georgia, serif; }.route-card:nth-child(2) .route-card-number { color: var(--blue); }.route-card:nth-child(3) .route-card-number { color: var(--jade); }.route-card strong, .route-card span, .route-card small { display: block; }.route-card strong { font: 600 17px "STKaiti", KaiTi, serif; }.route-card span { margin-top: 6px; color: var(--muted); font-size: 10px; }.route-card small { margin-top: 6px; color: #8a8c84; font-size: 9px; }.route-card button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: var(--jade); }.route-card button.active { box-shadow: 0 0 0 5px rgba(36,106,88,.14); }
.route-legs { grid-column: 1 / -1; display: grid; gap: 5px; padding-top: 11px; border-top: 1px dashed var(--line); }
.route-leg { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 39px; padding: 5px 7px; border-radius: 3px; background: rgba(233,226,211,.54); }
.route-leg > i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #b6a990; border-radius: 50%; color: var(--jade); font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 14px; font-style: normal; background: rgba(255,255,255,.46); }
.route-leg > span { min-width: 0; margin: 0; }.route-leg span b { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.route-leg span small { margin-top: 2px; color: var(--muted); font-size: 8px; }.route-leg time { color: #777d75; font-size: 8px; white-space: nowrap; }
.route-study-row { grid-column: 1 / -1; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding-top: 11px; border-top: 1px dashed var(--line); }.route-study-row > i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--vermilion); border-radius: 50%; color: var(--vermilion); font: 600 11px/1 Georgia, serif; font-style: normal; background: rgba(255,255,255,.42); }.route-card:nth-child(2) .route-study-row > i { border-color: var(--blue); color: var(--blue); }.route-card:nth-child(3) .route-study-row > i { border-color: var(--jade); color: var(--jade); }.route-study-row.complete > i { color: white !important; border-color: var(--gold) !important; background: var(--gold); box-shadow: 0 0 0 4px rgba(213,166,78,.14); }.route-study-row > div strong { font-size: 12px; }.route-study-row > div small { margin-top: 3px; font-size: 8px; }.route-card .route-study-button { width: auto; height: 34px; padding: 0 11px; border-radius: 3px; font-size: 10px; background: var(--vermilion); }.route-card:nth-child(2) .route-study-button { background: var(--blue); }.route-card:nth-child(3) .route-study-button { background: var(--jade); }.route-study-button b { margin-left: 6px; }
.checkin-board { padding: 29px 24px; border-left: 1px solid var(--line); background: #ebe2cf; }.checkin-board > span { color: var(--jade); font: 9px Georgia, serif; }.checkin-board h3 { margin: 6px 0 20px; font: 600 22px "STKaiti", KaiTi, serif; }.stamp-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.stamp { aspect-ratio: 1; display: grid; place-items: center; padding: 5px; border: 1px dashed #a99d87; color: #938c7c; text-align: center; font-size: 9px; transform: rotate(-1.5deg); }.stamp:nth-child(even) { transform: rotate(1.5deg); }.stamp.done { border: 2px solid var(--vermilion); color: var(--vermilion); font: 600 11px "STKaiti", KaiTi, serif; background: rgba(255,255,255,.34); }
.study-badge-board { margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(142,129,104,.32); }.study-badge-board > span { color: var(--vermilion); font: 9px Georgia, serif; }.study-badge-board h3 { margin-bottom: 13px; font-size: 19px; }.study-badges { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.study-badge { min-width: 0; min-height: 102px; display: grid; justify-items: center; align-content: center; gap: 5px; padding: 8px 4px; border: 1px dashed #a99d87; border-radius: 3px; color: #8c867a; background: rgba(255,255,255,.2); }.study-badge i { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 600 16px "STKaiti", KaiTi, serif; font-style: normal; }.study-badge span { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.study-badge small { color: inherit; font-size: 8px; }.study-badge.unlocked { color: var(--vermilion); border: 1px solid var(--vermilion); background: rgba(255,255,255,.46); box-shadow: inset 0 0 0 3px rgba(185,78,53,.07); }

/* Route study challenge */
.study-modal { position: absolute; z-index: 140; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(17,28,23,.74); backdrop-filter: blur(10px); transition: opacity .25s ease, visibility .25s ease; }.study-modal.open { visibility: visible; opacity: 1; }.study-sheet { --study-color: var(--vermilion); width: min(760px,100%); max-height: 92vh; overflow: auto; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px rgba(4,12,8,.36); }.study-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); }.study-sheet header span { color: var(--study-color); font: 9px Georgia, serif; letter-spacing: 1.2px; }.study-sheet h2 { margin: 4px 0 0; font: 600 25px "STKaiti", KaiTi, serif; letter-spacing: 0; }.study-sheet header small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.study-sheet header > button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 21px; background: transparent; }
.study-progress { padding: 18px 26px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.26); }.study-progress > div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; }.study-progress > div strong { color: var(--study-color); font-size: 10px; }.study-progress > i { height: 4px; display: block; margin-top: 9px; overflow: hidden; background: rgba(91,96,84,.13); }.study-progress > i b { width: 0; height: 100%; display: block; background: var(--study-color); transition: width .3s ease; }.study-progress nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }.study-progress nav button { min-width: 0; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font-size: 10px; }.study-progress nav button span { overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }.study-progress nav button.active { color: var(--study-color); border-color: var(--study-color); background: rgba(255,255,255,.55); }.study-progress nav button.done { color: white; border-color: var(--study-color); background: var(--study-color); }
.study-award { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 18px; margin: 20px 26px 0; padding: 17px 19px; color: white; background: var(--study-color); }.study-award[hidden] { display: none; }.study-award > span { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.78); border-radius: 50%; font: 600 29px "STKaiti", KaiTi, serif; box-shadow: inset 0 0 0 4px rgba(255,255,255,.14); }.study-award small, .study-award strong, .study-award p { display: block; }.study-award small { color: rgba(255,255,255,.72); font: 8px Georgia, serif; }.study-award strong { margin-top: 5px; font: 600 20px "STKaiti", KaiTi, serif; }.study-award p { margin: 4px 0 0; color: rgba(255,255,255,.8); font-size: 10px; line-height: 1.5; }
.study-question-area { padding: 28px 35px 30px; }.study-location { color: var(--study-color); font-size: 10px; font-weight: 600; }.study-question-area > h3 { margin: 10px 0 21px; font: 600 23px/1.5 "STKaiti", KaiTi, serif; letter-spacing: 0; }.study-options { display: grid; gap: 8px; }.study-options button { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr) 24px; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-align: left; background: rgba(255,255,255,.42); }.study-options button:hover:not(:disabled), .study-options button:focus-visible { border-color: var(--study-color); outline: 0; }.study-options button > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--study-color); font: 600 11px Georgia, serif; }.study-options button b { font-size: 12px; font-weight: 500; }.study-options button i { color: inherit; font-size: 16px; font-style: normal; text-align: center; }.study-options button.correct { color: #216d51; border-color: #4c9577; background: rgba(76,149,119,.11); }.study-options button.wrong { color: #a84734; border-color: #bd6957; background: rgba(189,105,87,.1); }.study-options button:disabled { cursor: default; opacity: 1; }
.study-feedback { display: none; margin-top: 13px; padding: 13px 15px; border-left: 3px solid currentColor; background: rgba(255,255,255,.38); }.study-feedback.show { display: block; }.study-feedback.correct { color: #216d51; }.study-feedback.wrong { color: #a84734; }.study-feedback strong { font-size: 11px; }.study-feedback p { margin: 4px 0 0; color: var(--muted); font: 11px/1.65 "Songti SC", SimSun, serif; }.study-question-area footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }.study-question-area footer button { min-width: 112px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: transparent; font-size: 11px; }.study-question-area footer button:last-child { color: white; border-color: var(--study-color); background: var(--study-color); }.study-question-area footer button:disabled { cursor: not-allowed; opacity: .35; }

/* Share and export */
.share-modal { position: absolute; z-index: 95; inset: 0; display: grid; place-items: center; padding: 28px; visibility: hidden; opacity: 0; background: rgba(21,31,26,.7); backdrop-filter: blur(10px); transition: opacity .25s ease, visibility .25s ease; }.share-modal.open { visibility: visible; opacity: 1; }
.share-sheet { width: min(980px,100%); max-height: 90vh; overflow: auto; background: var(--paper); box-shadow: var(--shadow); }.share-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 21px 26px; border-bottom: 1px solid var(--line); }.share-sheet header span { color: var(--vermilion); font: 9px Georgia, serif; }.share-sheet h2 { margin: 4px 0 0; font: 600 24px "STKaiti", KaiTi, serif; }.share-sheet header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 21px; background: transparent; }
.share-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; min-height: 560px; }.poster-area { display: grid; place-items: center; padding: 26px; background: #dfe3d7; }.poster-area img { display: block; width: auto; max-width: min(390px,100%); max-height: 68vh; object-fit: contain; border: 1px solid #cdbfa7; box-shadow: 0 16px 38px rgba(40,47,40,.2); }
.share-actions { padding: 27px 23px; border-left: 1px solid var(--line); }.share-actions > span, .manual-list > span { color: var(--muted); font-size: 9px; }.share-route-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 9px; }.share-route-tabs button { min-height: 38px; padding: 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px; background: transparent; }.share-route-tabs button.active { color: white; border-color: var(--active-route-color,var(--jade)); background: var(--active-route-color,var(--jade)); }
.share-poster-button { width: 100%; height: 44px; margin-top: 14px; padding: 0 14px; border: 0; border-radius: 3px; color: white; text-align: left; background: var(--jade); }.share-poster-button b { float: right; }
.manual-list { display: grid; gap: 7px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }.manual-list > a { position: relative; min-height: 57px; display: block; padding: 10px 38px 9px 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,.38); }.manual-list a b, .manual-list a small { display: block; }.manual-list a b { font-size: 11px; }.manual-list a small { margin-top: 5px; color: var(--muted); font-size: 9px; }.manual-list a i { position: absolute; right: 12px; top: 50%; color: var(--jade); font-size: 17px; transform: translateY(-50%); }.manual-list > a:hover { border-color: var(--jade); }
.toast { position: absolute; z-index: 120; left: 50%; bottom: 28px; min-width: 210px; padding: 12px 17px; border-radius: 3px; color: white; text-align: center; font-size: 11px; background: rgba(25,39,32,.92); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%,16px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: translate(-50%,0); }

/* Night mode */
body.night-mode { --paper: #17211c; --paper-deep: #202c25; --ink: #edf0e8; --muted: #aab5ac; --line: rgba(222,226,214,.18); --jade: #4f9a7f; --jade-light: #73b79d; --gold: #e0b65e; color-scheme: dark; background: #0e1512; }
.map-view, .map-topbar, .map-sidebar, .chengdu-map, .story-panel, .drawer-sheet, .welcome-paper { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.night-mode .map-view { background-color: #111915; background-image: repeating-linear-gradient(0deg, rgba(224,213,184,.025) 0 1px, transparent 1px 7px); }
.night-mode .map-topbar { border-color: var(--line); background: rgba(17,25,21,.96); }
.night-mode .site-search { border-color: var(--line); background: rgba(31,43,36,.96); box-shadow: 0 8px 24px rgba(0,0,0,.2); }.night-mode .site-search input { color: var(--ink); }.night-mode .site-search input::placeholder { color: #7f8d84; }.night-mode .search-results { border-color: var(--line); background: rgba(25,36,30,.99); }.night-mode .search-results button { border-color: rgba(226,231,216,.1); color: var(--ink); }.night-mode .search-results button:hover, .night-mode .search-results button:focus-visible { background: rgba(79,154,127,.15); }
.night-mode .brand div span, .night-mode .nav-button, .night-mode .checkin-summary > span { color: var(--muted); }
.night-mode .nav-button:hover, .night-mode .nav-button:focus-visible { color: var(--gold); }
.night-mode .checkin-summary { border-color: var(--line); color: var(--ink); background: #202a24; }
.night-mode .map-sidebar { border-color: var(--line); background: rgba(20,30,25,.96); }
.night-mode .map-intro, .night-mode .route-brief p, .night-mode .route-facts > span, .night-mode .sidebar-feature small, .night-mode .sidebar-stats span { color: var(--muted); }
.night-mode .route-switcher button b { color: var(--ink); }.night-mode .route-switcher button.active { border-color: rgba(224,182,94,.28); background: rgba(255,255,255,.06); }
.night-mode .sidebar-feature { border-color: var(--line); background: rgba(255,255,255,.04); }.night-mode .sidebar-feature img:not(.photo) { mix-blend-mode: normal; }
.night-mode .route-facts i { border-color: var(--line); color: var(--gold); }
.night-mode .chengdu-map { background-color: #17231e; background-image: linear-gradient(rgba(183,204,188,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(183,204,188,.055) 1px, transparent 1px); }
.night-mode .chengdu-map::before { border-color: rgba(211,221,207,.15); }.night-mode .district { fill: rgba(37,49,41,.62); stroke: rgba(199,207,188,.2); }
.night-mode .ring { stroke: rgba(190,174,133,.42); }.night-mode .road { stroke: rgba(180,159,116,.32); }.night-mode .river-main, .night-mode .river-branch { stroke: #467f8b; opacity: .76; }
.night-mode .river-label { fill: #91cad2; stroke: rgba(23,35,30,.94); }.night-mode .map-caption { color: rgba(226,231,216,.34); }
.night-mode .watercolor-icon { mix-blend-mode: normal; filter: saturate(.82) brightness(.82) contrast(1.04) drop-shadow(0 6px 6px rgba(0,0,0,.28)); }.night-mode .photo-marker { border-color: #d8ccb3; }
.night-mode .map-route-labels button { border-color: rgba(226,231,216,.14); background: rgba(24,37,31,.9); }.night-mode .map-route-labels button.active { background: var(--active-route-color, var(--vermilion)); }
.night-mode .map-key { color: var(--muted); border-color: rgba(220,225,211,.12); background: rgba(17,27,22,.9); }.night-mode .north-arrow { color: #d9ddcf; }.night-mode .north-arrow span { background: #d9ddcf; }
.night-mode .story-panel, .night-mode .drawer-sheet { color: var(--ink); background: var(--paper); }.night-mode .story-tabs { border-color: var(--line); }.night-mode .story-tabs button { color: var(--muted); }.night-mode .story-tabs button.active { color: #83c6aa; }
.night-mode .story-tab p, .night-mode .story-tab .caption { color: #b8c0b8; }.night-mode .story-tab .lead { color: var(--ink); }.night-mode .fact-source { color: #c4c9bf; background: rgba(224,182,94,.1); }
.night-mode .guide-section-heading, .night-mode .guide-entry, .night-mode .reservation-panel, .night-mode .facility-list article { border-color: var(--line); }.night-mode .guide-entry p, .night-mode .visit-summary article p, .night-mode .facility-list article p { color: #b8c0b8; }.night-mode .visit-summary article { border-color: var(--line); background: rgba(255,255,255,.035); }.night-mode .facility-list article i { color: #83c6aa; background: rgba(131,198,170,.1); }
.night-mode .audio-story { border-color: var(--line); background: #202c25; }.night-mode .audio-story div > span, .night-mode .audio-story time { color: var(--muted); }.night-mode .audio-story i { background: #455149; }
.night-mode .checkin-button { border-color: var(--jade-light); color: var(--jade-light); }.night-mode .checkin-button.done { color: #fff; background: var(--jade); }
.night-mode .sketch-card { border-color: var(--line); background: #202b24; }.night-mode .sketch-card canvas { opacity: .86; }.night-mode .compare-unavailable { background: rgba(18,29,24,.94); }
.night-mode .manual-download { border-color: var(--line); background: #202b24; }
.night-mode .drawer-sheet > header { border-color: var(--line); }.night-mode .drawer-sheet header button { border-color: var(--line); color: var(--ink); }.night-mode .route-card { border-color: var(--line); background: rgba(255,255,255,.035); }.night-mode .route-card.active { border-color: var(--jade-light); background: rgba(255,255,255,.075); }
.night-mode .route-card span, .night-mode .route-card small, .night-mode .route-leg time { color: var(--muted); }.night-mode .route-leg { background: rgba(255,255,255,.045); }.night-mode .route-leg > i { border-color: rgba(224,182,94,.28); background: rgba(255,255,255,.05); }.night-mode .route-leg span b { color: var(--ink); }
.night-mode .checkin-board { border-color: var(--line); background: #202b24; }.night-mode .stamp { border-color: #68736b; color: #8f9991; }.night-mode .stamp.done { border-color: var(--vermilion); color: #e9856f; background: rgba(255,255,255,.035); }
.night-mode .route-study-row, .night-mode .study-badge-board { border-color: var(--line); }.night-mode .route-study-row > i, .night-mode .study-badge { background: rgba(255,255,255,.04); }.night-mode .study-badge.unlocked { background: rgba(255,255,255,.07); }.night-mode .study-sheet { color: var(--ink); background: var(--paper); }.night-mode .study-sheet > header, .night-mode .study-progress { border-color: var(--line); }.night-mode .study-progress { background: rgba(255,255,255,.025); }.night-mode .study-progress nav button, .night-mode .study-options button, .night-mode .study-question-area footer button { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.035); }.night-mode .study-progress nav button.active { border-color: var(--study-color); }.night-mode .study-progress nav button.done, .night-mode .study-question-area footer button:last-child { color: white; background: var(--study-color); }.night-mode .study-feedback { background: rgba(255,255,255,.035); }
.night-mode .welcome-paper { border-color: #4b594f; background-color: #18231d; background-image: repeating-linear-gradient(2deg, transparent 0 8px, rgba(232,220,190,.02) 9px); }.night-mode .welcome-paper::before { border-color: rgba(225,211,175,.16); }
.night-mode .share-sheet { color: var(--ink); background: var(--paper); }.night-mode .share-sheet > header, .night-mode .share-actions, .night-mode .manual-list { border-color: var(--line); }.night-mode .share-sheet header button { border-color: var(--line); color: var(--ink); }.night-mode .poster-area { background: #101713; }.night-mode .share-route-tabs button { border-color: var(--line); }.night-mode .manual-list > a { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.04); }

@media (max-width: 900px) {
  .map-view { grid-template-columns: 1fr; grid-template-rows: 68px 1fr 126px; }
  .map-topbar { grid-row: 1; padding: 0 14px; }.brand-seal { width: 39px; height: 39px; }.brand strong { font-size: 18px; }.brand div span { display: none; }
  .site-search { width: min(250px,28vw); }
  .map-sidebar { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 13px 15px; border: 0; border-top: 1px solid var(--line); }.map-sidebar .eyebrow, .map-sidebar h1, .map-intro { display: none; }.route-switcher { display: flex; margin: 0; overflow-x: auto; }.route-switcher button { min-width: 104px; min-height: 47px; }.route-brief { position: static; width: 155px; padding: 0 0 0 13px; border: 0; border-left: 1px solid var(--line); }.route-brief > span, .route-brief > strong, .route-brief p { display: none; }.route-brief button { height: 39px; }
  .sidebar-feature, .sidebar-stats, .route-facts { display: none; }
  .chengdu-map { grid-column: 1; grid-row: 2; }.map-caption { top: 18px; left: 16px; }.map-caption strong { font-size: 27px; }.map-caption small { display: none; }.north-arrow { top: 18px; right: 17px; }.map-key { left: 14px; bottom: 12px; gap: 9px; }.map-landmark { width: 94px; transform: translate(-50%,-50%) scale(.86); }.map-landmark:hover { transform: translate(-50%,-50%) scale(.92); }
  .map-route-labels { inset: auto 12px 47px; display: flex; justify-content: center; gap: 5px; }
  .map-route-labels button, .map-route-labels button.culture, .map-route-labels button.night, .map-route-labels button.nature { position: static; min-height: 28px; padding: 3px 6px 3px 3px; }
  .map-route-labels button i { width: 19px; height: 19px; }.map-route-labels button span { font-size: 9px; }
  .pano-topbar { grid-template-columns: 1fr auto; padding: 13px; }.pano-title { order: -1; }.pano-route { display: none; }.back-map { justify-self: end; }.pano-compass { display: none; }.pano-controls { right: 14px; bottom: 17px; }.pano-hint { bottom: 19px; }
  .drawer-content { grid-template-columns: 1fr; }.checkin-board { border: 0; border-top: 1px solid var(--line); }.stamp-grid { grid-template-columns: repeat(5,1fr); }
}

@media (max-width: 600px) {
  .map-nav { gap: 1px; }.nav-button { width: 40px; }.nav-button b { display: none; }.checkin-summary { padding: 0 9px; }.checkin-summary > span { display: none; }
  .map-view { grid-template-rows: 108px 1fr 112px; }.map-topbar { align-items: flex-start; padding-top: 10px; }.map-sidebar { grid-template-columns: 1fr 92px; padding: 10px; }.route-switcher button { min-width: 92px; padding: 5px 7px; }.route-switcher button small { display: none; }.route-brief { width: 92px; padding-left: 8px; }.route-brief button { padding: 0 8px; font-size: 10px; }
  .site-search { left: 10px; right: 10px; top: 61px; width: auto; height: 38px; transform: none; }.site-search input { font-size: 11px; }.search-results { max-height: 230px; }
  .map-caption span { display: none; }.map-key { right: 14px; justify-content: center; }.map-key span:nth-child(3) { display: none; }.landmark-art { transform: scale(.82); transform-origin: bottom center; }.landmark-name { font-size: 11px; }.landmark-360 { right: 9px; }
  .watercolor-icon { width: 108px; height: 92px; }
  .map-landmark[data-spot="sanxingdui"] { left: 82% !important; top: 7% !important; width: 112px; min-height: 98px; }
  .map-landmark[data-spot="sanxingdui"] .watercolor-icon { width: 112px; height: 98px; }
  .story-panel { top: auto; bottom: 0; height: 88%; border-radius: 7px 7px 0 0; transform: translateY(104%); }.story-panel.open { transform: translateY(0); }.story-cover { height: 185px; }.story-body { padding: 0 20px 24px; }
  .visit-summary { grid-template-columns: 1fr; }.visit-summary article { min-height: 0; }
  .route-drawer { padding: 0; align-items: end; }.drawer-sheet { max-height: 94vh; }.drawer-content { display: block; }.route-card { grid-template-columns: 55px 1fr 36px; gap: 10px; }.route-card-number { width: 48px; height: 48px; }.stamp-grid { grid-template-columns: repeat(4,1fr); }
  .route-study-row { grid-template-columns: 34px minmax(0,1fr) auto; }.route-study-row > div small { line-height: 1.45; }
  .study-modal { padding: 0; align-items: end; transition: none; }.study-sheet { max-height: 94vh; border-radius: 7px 7px 0 0; }.study-sheet > header { padding: 18px 19px; }.study-sheet h2 { font-size: 22px; }.study-progress { padding: 15px 18px; }.study-progress nav button { justify-content: center; padding: 0 6px; }.study-progress nav button span { display: none; }.study-award { grid-template-columns: 58px 1fr; gap: 13px; margin: 16px 18px 0; padding: 14px; }.study-award > span { width: 49px; height: 49px; font-size: 24px; }.study-award strong { font-size: 17px; }.study-question-area { padding: 22px 18px 24px; }.study-question-area > h3 { font-size: 20px; }.study-options button { min-height: 50px; }.study-question-area footer button { min-width: 0; flex: 1; }
  .route-leg { grid-template-columns: 24px minmax(0,1fr); }.route-leg time { grid-column: 2; margin-top: -3px; }.route-leg > i { width: 23px; height: 23px; }
  .welcome-paper { padding: 38px 22px 24px; }.welcome-paper h1 { font-size: 33px; }.welcome-seal { left: 18px; top: 18px; }.welcome-guide { margin-top: 16px; }.welcome-guide li { grid-template-columns: 27px 1fr; gap: 7px; padding: 7px 0; }.welcome-guide li small { font-size: 9px; }
  .share-modal { padding: 0; align-items: end; }.share-sheet { max-height: 94vh; }.share-layout { display: block; }.poster-area { padding: 16px; }.poster-area img { max-width: min(260px,100%); max-height: 52vh; }.share-actions { padding: 20px 17px; border-left: 0; border-top: 1px solid var(--line); }
  .pano-title small { display: none; }.pano-badge { width: 40px; height: 40px; }.back-map { width: 43px; padding: 0; font-size: 0; border-radius: 50%; }.back-map span { margin: 0; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }