.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.home-city-route{position:relative;overflow:hidden;color:#fff;background:#082e27}.route-journey{position:relative}.route-chapter{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#183d33}.route-chapter:before{content:"";position:absolute;z-index:0;inset:-2%;background:url("city-journey/guilin-route-desktop-v1.webp?v=20260828-route30") center/cover no-repeat;transform:scale(1.035)}.route-chapter--even:before{transform:scaleX(-1) scale(1.035)}.route-chapter--three:before{background-position:center 42%;filter:saturate(.88) hue-rotate(8deg)}.route-chapter--four:before{background-position:center 58%;filter:saturate(.78) brightness(.87)}.route-chapter--five:before{background-position:center 70%;filter:saturate(.86) hue-rotate(-8deg)}.route-chapter--six:before{background-position:center 88%;filter:saturate(.75) brightness(.76)}
.route-chapter-overlay{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,30,25,.58),transparent 27%,transparent 73%,rgba(2,30,25,.58)),linear-gradient(0deg,rgba(2,31,25,.74),transparent 32%,rgba(3,30,25,.3))}.route-chapter--one .route-chapter-overlay{background:linear-gradient(90deg,rgba(2,30,25,.52),transparent 30%,transparent 70%,rgba(2,30,25,.52)),linear-gradient(0deg,rgba(2,31,25,.62),transparent 44%,rgba(3,30,25,.48))}.route-chapter+.route-chapter{border-top:1px solid rgba(242,216,142,.28)}body[data-page="hub"] .system-logo{color:#fff!important;filter:drop-shadow(0 3px 8px rgba(0,22,18,.78))}body[data-page="hub"] .system-logo-mark{border-color:rgba(255,255,255,.72)!important}body[data-page="hub"] .system-logo-copy small{color:rgba(255,255,255,.82)!important}
.route-intro{position:absolute;z-index:6;top:max(44px,5.5vh);left:50%;width:min(760px,calc(100% - 48px));text-align:center;transform:translateX(-50%);text-shadow:0 4px 22px rgba(0,26,22,.48)}.route-intro p{margin:0 0 9px;color:#e8ce86;font-size:10px;font-weight:800;letter-spacing:.22em}.route-intro h3{margin:0;font-family:"Songti SC","STSong",serif;font-size:clamp(34px,4.5vw,64px);font-weight:500;line-height:1.08}.route-intro span{display:block;margin-top:11px;color:rgba(255,255,255,.72);font-size:9px;letter-spacing:.18em}.route-chapter-title{position:absolute;z-index:6;top:max(26px,3.5vh);left:50%;margin:0;display:grid;gap:2px;text-align:center;transform:translateX(-50%);text-shadow:0 3px 16px rgba(0,26,22,.5)}.route-chapter-title small{color:#e9d08b;font-size:8px;font-weight:800;letter-spacing:.22em}.route-chapter-title strong{font-family:"Songti SC",serif;font-size:clamp(27px,3vw,42px);font-weight:500;white-space:nowrap}.route-chapter-title span{color:rgba(255,255,255,.7);font-size:9px;letter-spacing:.12em;white-space:nowrap}
.route-line{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(4,42,33,.55))}.route-line path{fill:none;stroke:rgba(242,211,126,.82);stroke-width:4;stroke-linecap:round;stroke-dasharray:4 13;animation:routeFlow 20s linear infinite}.route-stop{position:absolute;z-index:5;left:var(--x);top:var(--y);width:82px;height:82px;border-radius:50%;transform:translate(-50%,-50%);transition:z-index .01s,transform .25s,filter .25s}.route-stop:hover,.route-stop:focus-visible{z-index:9;outline:none;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 14px 22px rgba(1,31,25,.55))}.route-emblem{position:absolute;inset:5px;display:grid;place-items:center;overflow:hidden;border:3px solid #f2d989;border-radius:50%;color:#f8edc8;background:#0a4b3e;box-shadow:0 0 0 3px rgba(7,57,47,.9),0 0 22px rgba(239,205,111,.5),0 12px 28px rgba(0,30,25,.45)}.route-emblem img{width:100%;height:100%;display:block;object-fit:cover}.route-glyph{font-family:"Songti SC",serif;font-size:31px;background:radial-gradient(circle at 34% 25%,rgba(151,225,111,.55),transparent 25%),linear-gradient(145deg,#276956,#062f28)}.route-copy{position:absolute;top:50%;width:174px;min-height:62px;padding:9px 13px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(242,218,147,.5);border-radius:14px;color:#153c33;background:rgba(249,244,222,.93);box-shadow:0 12px 32px rgba(0,35,28,.34);backdrop-filter:blur(9px);transform:translateY(-50%)}.stop-left .route-copy{left:calc(100% + 13px)}.stop-right .route-copy{right:calc(100% + 13px);text-align:right}.route-copy small{color:#61766e;font-size:8px;font-weight:800}.route-copy strong{margin-top:1px;font-family:"Songti SC",serif;font-size:23px;font-weight:700;line-height:1.08}.route-copy span{margin-top:2px;color:#5b6f68;font-size:9px;white-space:nowrap}.route-stop>b{position:absolute;z-index:3;right:-2px;bottom:0;width:27px;height:27px;display:grid;place-items:center;border:2px solid #f4dc94;border-radius:50%;color:#f7ebc4;background:#093f35;font-family:Georgia,serif;font-size:8px;box-shadow:0 5px 12px rgba(0,30,24,.4)}.is-concept .route-copy{border-style:dashed}.route-stop-final .route-emblem{animation:finalBeacon 2.6s ease-in-out infinite}.route-stop-final .route-copy{color:#f8ebbd;background:rgba(7,54,44,.92)}.route-stop-final .route-copy small,.route-stop-final .route-copy span{color:rgba(255,255,255,.72)}.route-screen-index{position:absolute;z-index:6;right:clamp(108px,9vw,150px);bottom:clamp(22px,4vh,46px);font-family:Georgia,serif;font-size:24px;text-shadow:0 3px 14px rgba(0,24,20,.55)}.route-screen-index i{margin-left:4px;color:rgba(255,255,255,.55);font-size:10px;font-style:normal}.route-complete{position:absolute;z-index:7;right:clamp(70px,9vw,150px);bottom:clamp(20px,3.5vh,42px);min-width:196px;height:46px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(242,216,142,.6);border-radius:999px;color:#153b32;background:rgba(248,235,191,.92);font-size:11px;font-weight:800;backdrop-filter:blur(8px)}
@keyframes routeFlow{to{stroke-dashoffset:-170}}@keyframes finalBeacon{50%{box-shadow:0 0 0 3px rgba(7,57,47,.9),0 0 36px rgba(244,208,105,.95),0 14px 30px rgba(0,30,25,.5)}}
@media(max-width:700px){.route-chapter:before{inset:-1%;background-image:url("city-journey/guilin-route-mobile-v1.webp?v=20260828-route30");transform:scale(1.025)}.route-chapter--even:before{transform:scaleX(-1) scale(1.025)}.route-chapter--three:before{background-position:center 30%}.route-chapter--four:before{background-position:center 50%}.route-chapter--five:before{background-position:center 70%}.route-chapter--six:before{background-position:center 88%}.route-chapter-overlay,.route-chapter--one .route-chapter-overlay{background:linear-gradient(90deg,rgba(2,28,23,.42),transparent 28%,transparent 72%,rgba(2,28,23,.42)),linear-gradient(0deg,rgba(2,30,24,.72),transparent 28%,rgba(2,30,24,.46))}.route-intro{top:max(27px,4vh);width:calc(100% - 30px)}.route-intro p{margin-bottom:6px;font-size:7px}.route-intro h3{font-size:clamp(30px,8.4vw,38px);line-height:1.06}.route-intro span{margin-top:6px;font-size:7px}.route-chapter-title{top:max(17px,2.5vh)}.route-chapter-title small{font-size:6px}.route-chapter-title strong{font-size:24px}.route-chapter-title span{font-size:7px}.route-line path{stroke-width:6}.route-stop{top:calc(var(--y) + 1%);width:64px;height:64px}.route-emblem{inset:4px;border-width:2px;box-shadow:0 0 0 2px rgba(7,57,47,.9),0 0 16px rgba(239,205,111,.54),0 9px 20px rgba(0,30,25,.42)}.route-glyph{font-size:24px}.route-copy{width:132px;min-height:52px;padding:7px 9px;border-radius:11px}.stop-left .route-copy{left:calc(100% + 7px)}.stop-right .route-copy{right:calc(100% + 7px)}.route-copy small{font-size:6px}.route-copy strong{font-size:18px}.route-copy span{font-size:7px}.route-stop>b{width:22px;height:22px;border-width:1px;font-size:7px}.route-screen-index{right:82px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));font-size:19px}.route-complete{display:none}}
@media(max-width:390px){.route-copy{width:120px}.route-stop{width:59px;height:59px}.route-copy strong{font-size:16px}.route-copy span{font-size:6px}}
@media(max-width:700px) and (max-height:720px){.route-stop{width:56px;height:56px}.route-copy{width:116px;min-height:46px;padding:5px 7px}.route-copy strong{font-size:15px}.route-copy span{display:none}}
@media(prefers-reduced-motion:reduce){.route-line path,.route-stop-final .route-emblem{animation:none}}

/* Horizontal city card: prominent name plus two side annotation rows. */
.route-copy{width:232px;min-height:68px;padding:10px 14px;display:grid;grid-template-columns:minmax(72px,.85fr) minmax(112px,1.15fr);grid-template-rows:auto auto;align-items:center;gap:3px 13px}.route-copy strong{grid-column:1;grid-row:1/3;margin:0;font-size:26px;white-space:nowrap}.route-copy small{grid-column:2;grid-row:1;align-self:end;font-size:9px;white-space:nowrap}.route-copy span{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:10px;white-space:nowrap}.stop-right .route-copy{grid-template-columns:minmax(112px,1.15fr) minmax(72px,.85fr)}.stop-right .route-copy strong{grid-column:2;text-align:right}.stop-right .route-copy small,.stop-right .route-copy span{grid-column:1;text-align:right}
@media(max-width:700px){.route-copy{width:174px;min-height:58px;padding:8px 10px;grid-template-columns:minmax(57px,.8fr) minmax(92px,1.2fr);gap:2px 8px}.route-copy strong{font-size:19px}.route-copy small{font-size:7px}.route-copy span{display:block;font-size:8px}.stop-right .route-copy{grid-template-columns:minmax(92px,1.2fr) minmax(57px,.8fr)}}
@media(max-width:390px){.route-copy{width:166px;grid-template-columns:55px 87px}.stop-right .route-copy{grid-template-columns:87px 55px}.route-copy strong{font-size:18px}}
@media(max-width:700px) and (max-height:720px){.route-copy{width:160px;min-height:52px;grid-template-columns:52px 84px}.stop-right .route-copy{grid-template-columns:84px 52px}.route-copy span{display:block;font-size:6px}}

/* 2026-08-31：30站名称与圆形城市标统一留白，左右卡片不再贴边或互相遮挡。 */
.route-stop { --route-card-gap:24px; }
.route-copy { box-sizing:border-box; width:222px; min-height:66px; padding:10px 12px; display:grid; grid-template-columns:minmax(88px,.92fr) minmax(98px,1.08fr); grid-template-rows:auto auto; align-content:center; column-gap:12px; row-gap:3px; }
.stop-left .route-copy { left:calc(100% + var(--route-card-gap)); right:auto; text-align:left; }
.stop-right .route-copy { right:calc(100% + var(--route-card-gap)); left:auto; grid-template-columns:minmax(98px,1.08fr) minmax(88px,.92fr); text-align:right; }
.route-copy strong { font-size:22px; line-height:1; }
.route-copy small { font-size:8.5px; line-height:1.25; }
.route-copy span { font-size:9.5px; line-height:1.25; }
@media (min-width:901px) and (max-width:1100px) {
  .route-stop { --route-card-gap:20px; }
  .route-copy { width:196px; grid-template-columns:minmax(78px,.9fr) minmax(90px,1.1fr); column-gap:10px; }
  .stop-right .route-copy { grid-template-columns:minmax(90px,1.1fr) minmax(78px,.9fr); }
  .route-copy strong { font-size:20px; }
}
@media (min-width:701px) and (max-width:900px) {
  .route-stop { --route-card-gap:16px; }
  .route-copy { width:174px; min-height:62px; padding:9px 10px; grid-template-columns:minmax(68px,.9fr) minmax(78px,1.1fr); column-gap:8px; }
  .stop-right .route-copy { grid-template-columns:minmax(78px,1.1fr) minmax(68px,.9fr); }
  .route-copy strong { font-size:18px; }
  .route-copy small { font-size:7.5px; }
  .route-copy span { font-size:8.5px; }
}
@media (max-width:700px) {
  .route-stop { --route-card-gap:12px; }
  .route-copy { width:150px; min-height:58px; padding:8px 9px; grid-template-columns:minmax(60px,.92fr) minmax(64px,1.08fr); column-gap:7px; row-gap:2px; }
  .stop-right .route-copy { grid-template-columns:minmax(64px,1.08fr) minmax(60px,.92fr); }
  .route-copy strong { font-size:16px; }
  .route-copy small { font-size:6.5px; }
  .route-copy span { display:block; font-size:7px; }
}
@media (max-width:390px) {
  .route-copy { width:142px; grid-template-columns:minmax(56px,.92fr) minmax(60px,1.08fr); column-gap:6px; }
  .stop-right .route-copy { grid-template-columns:minmax(60px,1.08fr) minmax(56px,.92fr); }
}