/* Independent reading space: no modal shade, no text behind a guide panel. */
html body #cityHow{box-sizing:border-box;position:relative;max-width:none;width:100%;margin:calc(148px + var(--city-how-shift,0px)) 0 0;padding:0 16px 10px;color:#0b1a3a;font:13px/1.5 system-ui,sans-serif;z-index:1}
html body #cityHow .ch-inner{border:1px solid #c4a46b77;border-radius:16px;background:#f9f5e9;padding:10px 14px}
#cityHow .ch-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#cityHow .ch-top strong{font-size:14px}#cityHow .ch-tip{flex:1;font-size:12px;color:#625943}#cityHow button,#cityHow a{box-sizing:border-box;border:1px solid #bda77188;border-radius:16px;background:#fffdf5;color:#0b1a3a;font:inherit;text-decoration:none;cursor:pointer;padding:6px 12px;min-height:34px}#cityHow [data-ch=start],#cityHow [data-ch=next]{background:#0b1a3a;color:#f4d88b}#cityHow button:disabled{opacity:.4;cursor:default}#cityHow button:focus-visible,#cityHow a:focus-visible{outline:3px solid #c69c42;outline-offset:3px}
#cityHow .ch-body{padding-top:10px}#cityHow .ch-body[hidden]{display:none!important}#cityHow .ch-heading{display:flex;gap:12px;align-items:baseline}#cityHow .ch-step-title{font-size:17px;margin:0}#cityHow .ch-count{white-space:nowrap;color:#8c6b28;font-weight:600}#cityHow p{margin:7px 0}#cityHow .ch-zh{color:#655a42}#cityHow .ch-actions,#cityHow .ch-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}#cityHow .ch-footer [data-ch=close]{margin-left:auto}
html body #mapwrap{margin-top:0!important;height:max(260px,calc(100dvh - 182px - var(--city-how-h,56px) - var(--city-how-shift,0px)))!important}
html body #mapwrap>.ovl-l{top:calc(-136px - var(--city-how-h,56px) - var(--city-how-shift,0px))!important}
html body #mapwrap>.hint{display:none!important}
@media(min-width:761px){html body #mapwrap>.ovl-r{top:calc(-136px - var(--city-how-h,56px) - var(--city-how-shift,0px))!important}}
@media(min-width:901px){html body #cityHow .ch-inner{margin-right:calc(clamp(200px,21vw,310px) + 20px)}}
@media(max-width:760px){html body #cityHow{margin-top:calc(176px + var(--city-how-shift,0px));padding:0 10px 8px;font-size:12px}#cityHow .ch-inner{padding:10px}#cityHow .ch-top{gap:6px}#cityHow .ch-tip{flex-basis:100%;order:3}#cityHow .ch-top strong{font-size:13px}#cityHow .ch-top [data-ch=start]{margin-left:auto}#cityHow .ch-step-title{font-size:15px}#cityHow .ch-body{padding-bottom:8px}html body #mapwrap{height:max(260px,calc(100dvh - 210px - var(--city-how-h,76px) - var(--city-how-shift,0px)))!important}html body #mapwrap>.ovl-l{top:calc(-164px - var(--city-how-h,76px) - var(--city-how-shift,0px))!important}#cityExplorer .ce-how{font-size:10px;padding:7px 10px}}
html.bus-on body #cityHow{display:none!important}html.bus-on body #mapwrap{margin-top:0!important;height:100dvh!important}html.city-map-offscreen body #cityExplorer .ce-how{visibility:hidden}
.city-how-highlight{outline:2px solid #c69c42!important;outline-offset:4px!important}
@media(prefers-reduced-motion:reduce){#cityHow *{scroll-behavior:auto!important}}

/* On small screens the same guide node enters normal flow beneath the lesson. */
#cityHow .ch-guide-slot:empty{display:none}
html body #cityHow #guideDock{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;margin:12px 0 0!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box;z-index:auto!important}
html body #cityHow #guideDock.minimized{width:100%!important;max-width:100%!important}

@media(max-width:900px){html.city-how-active body #island{visibility:hidden!important;pointer-events:none!important}}