
:root{--blue:#a8d8f3;--paper:#f1eee8;--ink:#373632;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;color:var(--ink);background:var(--blue)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#app{max-width:580px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--blue);position:relative;overflow:hidden}.chrome{background-color:var(--blue);background-image:url('blue-grain.png')}
header{padding:calc(11px + env(safe-area-inset-top)) 14px 11px;flex:none;z-index:5}.searchrow{display:flex;gap:8px;align-items:center}.search{height:44px;background:var(--paper);background-image:url('paper-grain.png');border:1px solid #393937;border-radius:28px;display:flex;align-items:center;gap:9px;flex:1;padding:0 12px}.search-symbol{font-family:sans-serif;font-size:24px;line-height:1}.search input{border:0;outline:none;background:transparent;width:100%;min-width:0;font-size:16px;color:var(--ink)}.search input::placeholder{color:#77756e}#searchBtn{height:44px;width:44px;border:1px solid var(--ink);border-radius:50%;background:var(--paper) url('paper-grain.png');font-size:23px;color:var(--ink)}
nav{display:flex;border:1.5px solid #393938;border-radius:8px;overflow:hidden;height:42px;margin-top:9px;background:var(--paper) url('paper-grain.png')}nav button{width:33.333%;border:0;border-right:1px solid #54534f;background:transparent;display:flex;gap:10px;align-items:center;justify-content:center;font-weight:700;color:#282a29;font-size:12px}nav button span{font-size:16px}nav button:last-child{border-right:0}nav button.active{background-color:#353431;background-image:url('paper-grain.png');color:#fffaf1}
#mapwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#f1eee8;border-top:1px solid #99938d;border-bottom:1px solid #99938d;touch-action:none}#map{height:100%;width:100%;display:block}#world{transition:none}.route-halo{stroke:#fffdf8;stroke-width:10.5;stroke-opacity:1}.route-ink{stroke-width:7.5}.route-ink.orange{stroke:#ff5014}.route-ink.fuchsia{stroke:#ff008f}.route-ink.cyan{stroke:#06b9fb}.route-ink.coral{stroke:#ff503c}.route-ink.blue{stroke:#098cfa}.route-ink.teal{stroke:#00ab9b}.route-ink.pink{stroke:#fc2c91}.route-ink.gold{stroke:#f7b227}
#labels text{font:600 10px 'IBM Plex Mono',monospace;paint-order:stroke;stroke:#f1eee8;stroke-width:1.6px;stroke-linejoin:round}#labels .loc{font-size:9px;letter-spacing:.25px;fill:#74716c}#labels .street{font-size:10px}#labels .landmark{font-size:10.5px;font-weight:700}#labels .parklabel{font-size:11px;font-weight:600}#markers .poi{cursor:pointer;outline:none}#markers .poi:focus circle:first-child{stroke:#f23f26;stroke-width:2}.maptexture{position:absolute;inset:0;pointer-events:none;background-image:url('paper-grain.png');opacity:.8;mix-blend-mode:multiply}
.zoom{position:absolute;bottom:11px;right:10px;display:grid;gap:5px}.zoom button,.legend-toggle{border:1px solid #77736c;background:var(--paper) url('paper-grain.png');border-radius:50%;color:var(--ink);font-size:22px;width:32px;height:32px;box-shadow:1px 1px 0 #d9d5cc}.legend-toggle{position:absolute;top:10px;right:10px;font-size:19px}.legend{position:absolute;top:47px;right:9px;background:#f1eee8 url('paper-grain.png');border:1px solid #99938d;border-radius:5px;padding:9px;box-shadow:2px 3px 0 #5555;display:grid;gap:8px;font-size:10px;z-index:4}.legend[hidden]{display:none}.legend div{display:flex;align-items:center;gap:8px}.legend i{display:block;width:27px;height:6px;border-top:1.5px solid #fff;border-bottom:1.5px solid #fff}.legend i.fuchsia{background:#ff008f}.legend i.orange{background:#ff5014}.legend i.cyan{background:#06b9fb}
#sheet{flex:none;padding:8px 17px calc(12px + env(safe-area-inset-bottom));max-height:37dvh;overflow:auto}.handle{width:44px;height:4px;border-radius:6px;background:#7faabe;margin:1px auto 13px}.detailtop{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}.detailtop h1{margin:0;font-size:18px;letter-spacing:-.6px;line-height:1.3}.detailtop p{font-size:12px;margin:7px 0 0;line-height:1.5}#clearBtn{background:transparent;border:0;font-size:25px;margin-top:-8px}.rowend{margin-top:12px}.speak{display:flex;width:100%;padding:11px 13px;border:0;border-radius:20px;background:rgba(240,245,245,.6);align-items:center;text-align:left;gap:12px;color:var(--ink);font-size:12px}.speak .sound{font-size:18px;font-weight:800;letter-spacing:1px;color:#42413e}.speak .play{margin-left:auto;font-size:13px}#detail{font-size:11px;line-height:1.6;margin:9px 0 0}#notice{font-size:9px;font-weight:700;color:#647d86;letter-spacing:.7px;margin:11px 0 0}
@media (min-width:600px){#app{border-left:1px solid #6d8e9c;border-right:1px solid #6d8e9c}}@media(max-height:670px){header{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:5px}.search,#searchBtn{height:37px}nav{height:37px}.handle{margin-bottom:8px}#sheet{padding-top:5px}.rowend{margin-top:8px}.speak{padding:8px 13px}}

nav button svg{height:19px;width:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.search-symbol svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}
@media(min-width:601px){html,body{background-color:var(--blue);background-image:url('blue-grain.png')}#app{height:min(100dvh,980px);margin-top:max(0px,calc((100dvh - 980px)/2));border:1px solid #7398aa}}

/* Map annotations: miniature monochrome engraved icons, not route/station dots. */
#markers .poi .poi-plate{fill:#f1eee8;stroke:#43413c;stroke-width:1.1;vector-effect:non-scaling-stroke}
#markers .poi .poi-glyph{stroke:#343632;stroke-width:1.5;fill:none;pointer-events:none}
#markers .poi .poi-hit{pointer-events:all;cursor:pointer}
#markers .poi:focus-visible .poi-plate,#markers .poi:hover .poi-plate{stroke:#f03c28;stroke-width:2}
#markers .poi:focus{outline:none}
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
#headline{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:23px;letter-spacing:0}
.geo-parks{fill:#c1c0bb;stroke:#aaa9a3;stroke-width:.25;fill-rule:evenodd;opacity:.75}
.geo-buildings{fill:#aaa9a5;opacity:.38;stroke:none;fill-rule:evenodd}
.geo-roads{fill:none;stroke:#777770;stroke-width:.45;opacity:.75;vector-effect:non-scaling-stroke}
.bike-outline{fill:none;stroke:#fffaf3;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bike-data{fill:none;stroke-width:3.15;stroke-linecap:round;stroke-linejoin:round}
.bike-fuchsia{stroke:#ff009f}.bike-orange{stroke:#ff4c08}.bike-cyan{stroke:#00bfff}.bike-violet{stroke:#8c8983;stroke-width:1.5;stroke-dasharray:1 3;opacity:.55}
#real-geography.subway .bike-data,#real-geography.subway .bike-outline,#real-geography.walk .bike-data,#real-geography.walk .bike-outline{display:none}
#real-geography.subway .geo-roads{opacity:.28}
#real-geography .geo-buildings{pointer-events:none}
