@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root { --navy:#10223c; --red:#e94335; --teal:#008d78; --ink:#18252c; --paper:#f7f5ef; --line:#cdd0cf; --muted:#61707a; --white:#fff; --focus:#005cc8; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:#dce2e4; } body { min-width:320px; margin:0; color:var(--ink); background:#dce2e4; font-family:"Noto Sans SC",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { -webkit-tap-highlight-color:transparent; } h1,h2,h3,p { text-wrap:pretty; }
.topbar { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; min-height:50px; padding:env(safe-area-inset-top) 18px 0; color:#fff; background:var(--navy); }.brand { display:flex; align-items:center; gap:8px; min-height:50px; color:inherit; font-size:16px; font-weight:800; text-decoration:none; }.brand-seal { display:grid; width:25px; height:25px; place-items:center; color:#fff; background:var(--red); font-size:13px; }.topbar-links { display:flex; align-items:center; }.topbar-links a { display:grid; min-height:44px; padding:0 9px; place-items:center; color:#fff; font-size:12px; font-weight:600; text-decoration:none; }.topbar-links a:last-child { padding-right:0; }.topbar-links a:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
main { width:100%; background:var(--paper); }.search-deck { padding:20px 18px 12px; border-bottom:4px solid var(--navy); }.search-copy { margin:0; } h1 { margin:0; color:var(--ink); font-size:25px; line-height:1.2; letter-spacing:-.035em; }.search-copy p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }.city-picker { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; margin-top:12px; }.city-picker-meta { display:flex; min-width:64px; flex-direction:column; gap:2px; }.city-picker-meta span { color:var(--muted); font-size:10px; line-height:1.2; }.city-picker-meta strong { color:var(--navy); font-size:15px; line-height:1.2; }.city-select-wrap { display:block; min-width:0; }.city-select-wrap select { display:block; width:100%; min-width:0; min-height:42px; padding:0 34px 0 12px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--white); cursor:pointer; font-size:13px; }.city-select-wrap select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.address-form { position:sticky; z-index:2; top:calc(50px + env(safe-area-inset-top)); padding:0 18px; background:var(--paper); }.address-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }.input-row { display:grid; grid-template-columns:minmax(0,1fr) 56px; min-height:52px; margin:0 -18px; border-bottom:4px solid var(--navy); background:var(--white); }.input-row input { min-width:0; height:52px; padding:0 18px; border:0; outline:0; color:var(--ink); background:transparent; font-size:16px; }.input-row input::placeholder { color:#66747b; opacity:1; }.input-row input:focus { box-shadow:inset 0 -3px var(--focus); }.input-row button { display:grid; min-height:52px; place-items:center; padding:0; border:0; color:#fff; background:var(--red); cursor:pointer; }.input-row button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:2.2; }.input-row button:active { background:#f05243; }.input-row button:focus-visible,.category-nav button:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }.input-row button:disabled { cursor:wait; opacity:.68; }.input-row button:disabled svg { animation:spin .8s linear infinite; }
.search-extras { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:8px 18px 10px; border-bottom:1px solid var(--line); }.location-action { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:5px; padding:0 10px; border:1px solid var(--line); color:#344a55; background:#eef0ed; cursor:pointer; font-size:12px; font-weight:700; }.location-action svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; }.location-action:disabled { cursor:wait; opacity:.58; }.location-action:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }.search-history { min-width:0; margin:0; overflow:hidden; }.search-history > p { display:none; }.history-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.history-items button { min-width:0; min-height:44px; padding:0 8px; overflow:hidden; border:0; color:#52616a; background:#e8ebe9; cursor:pointer; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.history-items button:active { color:#fff; background:var(--teal); }.history-items button:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.results { padding:18px 0 32px; }.result-bar { padding:0 18px 10px; border-bottom:1px solid var(--line); }.result-heading { display:flex; align-items:center; gap:12px; }.result-bar h2 { margin:0; color:var(--ink); font-size:20px; line-height:1.25; letter-spacing:-.025em; }.result-bar > p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }.share-trigger { min-height:30px; margin-left:auto; padding:0 10px; border:1px solid var(--navy); color:var(--navy); background:var(--white); cursor:pointer; font-size:12px; font-weight:600; }.share-trigger:active { color:#fff; background:var(--navy); }.share-trigger:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }.category-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:10px 18px; background:var(--paper); border-bottom:1px solid var(--line); }.category-nav[hidden] { display:none; }.category-nav button { min-width:0; min-height:30px; padding:0 4px; overflow:hidden; border:1px solid var(--line); color:#53616a; background:transparent; cursor:pointer; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.category-nav button:active { border-color:var(--teal); color:#fff; background:var(--teal); }.category-nav i,.category-nav b { display:none; }
.place-list { min-width:0; }.category-group { --route:var(--teal); scroll-margin-top:108px; margin:0; padding:0 18px; border-bottom:1px solid var(--line); }.category-heading { display:flex; align-items:center; min-height:37px; }.category-heading p { margin:0; color:var(--ink); font-size:14px; font-weight:800; }.category-heading p::before { content:""; display:inline-block; width:9px; height:9px; margin-right:7px; background:var(--route); border-radius:50%; vertical-align:1px; }.place { display:grid; grid-template-columns:24px minmax(0,1fr) 64px; gap:9px; align-items:center; min-height:64px; padding:8px 0; border-top:1px solid #dddeda; counter-increment:place; }.category-heading + .place { counter-reset:place; }.place::before { content:counter(place, decimal-leading-zero); color:#78838a; font-size:11px; }.place-main { min-width:0; }.place h3 { margin:0; color:var(--ink); font-size:15px; font-weight:700; line-height:1.27; letter-spacing:-.01em; overflow-wrap:anywhere; }.metro-lines,.address,.merged-names { margin:3px 0 0; line-height:1.35; overflow-wrap:anywhere; }.address { color:var(--muted); font-size:11px; }.metro-lines,.merged-names { color:#46685f; font-size:11px; }.distance { text-align:right; }.distance strong { display:block; color:var(--ink); font-size:13px; font-weight:800; line-height:1.2; white-space:nowrap; }.distance span { display:block; margin-top:2px; color:var(--muted); font-size:10px; white-space:nowrap; }
.empty-state { min-height:166px; margin:0 18px; padding:29px 0; border-top:2px solid var(--navy); border-bottom:1px solid var(--line); }.empty-state h3 { margin:0; color:var(--ink); font-size:19px; line-height:1.35; }.empty-state p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }.empty-state.error { border-top-color:#c53830; }.empty-state.error h3 { color:#c53830; }.loading-state { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 18px; padding-top:3px; border-top:2px solid var(--navy); }.loading-state span { height:54px; background:#e6e9e7; animation:scan 1.1s linear infinite; }.loading-state p { grid-column:1 / -1; margin:6px 0 0; color:var(--muted); font-size:13px; }
.share-dialog { width:min(100% - 32px,360px); margin:auto; padding:0; border:0; background:transparent; }.share-dialog::backdrop { background:rgb(16 34 60 / .62); }.share-card { position:relative; padding:26px 20px 20px; color:var(--ink); background:var(--paper); }.dialog-close { position:absolute; top:7px; right:7px; display:grid; width:42px; height:42px; place-items:center; padding:0; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:26px; line-height:1; }.dialog-close:focus-visible,.share-primary:focus-visible,.share-secondary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }.share-kicker { margin:0; color:var(--red); font-size:12px; }.share-card h2 { margin:7px 0 0; color:var(--navy); font-size:23px; line-height:1.2; }.share-address { margin:8px 0 18px; color:var(--muted); font-size:14px; line-height:1.45; }.share-qr { display:block; width:180px; height:180px; margin:0 auto; background:#e6e9e7; }.share-link { display:block; margin-top:12px; overflow:hidden; color:var(--navy); font-size:12px; font-weight:600; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }.share-primary,.share-secondary { min-height:42px; padding:0 10px; cursor:pointer; font-size:13px; font-weight:600; }.share-primary { border:0; color:#fff; background:var(--red); }.share-secondary { border:1px solid var(--navy); color:var(--navy); background:var(--paper); }.share-feedback { min-height:18px; margin:9px 0 0; color:var(--muted); font-size:12px; text-align:center; } footer { width:100%; padding:15px 18px max(15px,env(safe-area-inset-bottom)); color:var(--muted); background:var(--paper); border-top:1px solid var(--line); font-size:11px; line-height:1.45; }
html,body { overflow-x:clip; }
.input-row { margin:0; }
.about-intro h1 { letter-spacing:0; }
@media (prefers-reduced-motion: reduce) { .city-row.is-loading .city-count { animation:none; } }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:10px 12px; color:#fff; background:var(--focus); transform:translateY(-150%); }.skip-link:focus { transform:translateY(0); }.about-main { min-height:calc(100vh - 50px); padding-bottom:36px; }.about-intro { padding:28px 18px 22px; border-bottom:4px solid var(--navy); }.section-code { margin:0 0 9px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.12em; }.about-intro h1 { max-width:13em; font-size:29px; line-height:1.18; }.about-intro > p:last-child { max-width:38em; margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }.network-summary { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }.summary-cell { min-width:0; padding:18px; }.summary-cell + .summary-cell { border-left:1px solid var(--line); }.summary-cell strong { display:block; color:var(--navy); font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; }.summary-cell span { display:block; margin-top:6px; color:var(--muted); font-size:11px; }.about-section { padding:24px 18px 0; }.about-section h2 { margin:0; font-size:19px; line-height:1.3; }.about-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }.about-section-head p { margin:0; color:var(--muted); font-size:11px; }.city-board { margin:0; padding:0; border-top:2px solid var(--navy); list-style:none; }.city-row { display:grid; grid-template-columns:29px minmax(0,1fr) auto; min-height:48px; align-items:center; gap:10px; border-bottom:1px solid var(--line); }.city-index { color:#7a858b; font-size:10px; font-variant-numeric:tabular-nums; }.city-name { font-size:15px; font-weight:800; }.city-count { color:var(--navy); font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }.city-count small { margin-left:4px; color:var(--muted); font-size:10px; font-weight:500; }.city-row.is-loading .city-count { width:72px; height:12px; background:#e2e5e3; animation:scan 1.1s linear infinite; }.feature-list { margin:10px 0 0; padding:0; border-top:2px solid var(--navy); list-style:none; }.feature-list li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.feature-mark { display:grid; width:22px; height:22px; place-items:center; color:#fff; background:var(--teal); font-size:10px; font-weight:800; }.feature-list h3 { margin:0; font-size:14px; line-height:1.35; }.feature-list p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }.data-scope { margin:10px 0 0; padding:13px 0; border-top:2px solid var(--navy); border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.8; }.about-action { display:inline-flex; min-height:44px; align-items:center; margin-top:18px; padding:0 15px; color:#fff; background:var(--red); font-size:13px; font-weight:800; text-decoration:none; }.about-action:active { transform:scale(.96); }.about-action:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@keyframes scan { 50% { opacity:.55; } } @keyframes spin { to { transform:rotate(360deg); } } @media (min-width:720px) { :root { --content-width:680px; }.topbar { padding-left:calc((100% - var(--content-width)) / 2); padding-right:calc((100% - var(--content-width)) / 2); } main,footer { width:var(--content-width); max-width:100%; margin-inline:auto; } main { min-height:calc(100vh - 50px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.loading-state span,.input-row button:disabled svg { animation:none; } }
.share-actions #save-image,.share-actions #save-image-mobile { min-height:46px; }
.share-primary:disabled { cursor:wait; opacity:.62; }
.category-nav button[aria-pressed="true"] { border-color:var(--route, var(--teal)); color:#fff; background:var(--route, var(--teal)); }
.category-nav button[data-filter="all"][aria-pressed="true"] { border-color:var(--navy); background:var(--navy); }
.category-nav button b { display:inline-block; margin-left:3px; color:inherit; font-size:10px; font-weight:800; }
.major-group { scroll-margin-top:108px; margin:0; border-bottom:1px solid var(--line); }
.major-heading { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:8px 18px; border-bottom:1px solid var(--line); background:#eef0ed; }
.major-heading p { margin:0 0 2px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; }
.major-heading h3 { margin:0; color:var(--ink); font-size:19px; line-height:1.2; }
.major-heading strong { color:var(--route); font-size:12px; font-weight:800; }
.major-group .category-group.subgroup { margin:0; padding:0 18px; border-bottom:0; }
.major-group .subgroup + .subgroup { border-top:1px solid #dddeda; }
.subgroup .category-heading { min-height:31px; }
.subgroup .category-heading p { color:var(--muted); font-size:12px; font-weight:700; }
.subgroup .category-heading p::before { width:7px; height:7px; margin-right:6px; }
.subgroup .category-heading span { margin-left:auto; color:var(--muted); font-size:10px; }