@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Pixelify+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#eeeade;--ink:#f4f1e8;--muted:#b1b6bd;--line:#59616c;--accent:#b9cf8f;--surface:#1d2433;--font:'DM Sans',sans-serif;--display:'Pixelify Sans',monospace;--edge:3px solid var(--paper)}
*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--ink);background:#819461;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:default;opacity:.4}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--accent)}a{color:inherit}button:hover{background-color:#343e4d}button:active{transform:translateY(1px)}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}svg.pixel-icon{fill:currentColor;stroke:none;shape-rendering:crispEdges}#app{width:100%;height:100dvh;position:relative;overflow:hidden}#map{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}#map.dragging{cursor:grabbing}#map,#markers{touch-action:none;user-select:none;-webkit-user-select:none}.vignette,.brand,.area-caption,.gesture-hint{display:none}
/* Quiet map canvas; the search and three actions share one pixel-style baseline. */
.bottom-actions{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:10px;z-index:7}.pixel-button{height:54px;min-width:54px;background:var(--surface);border:var(--edge);box-shadow:0 0 0 1px #18202780;color:var(--paper);font-family:var(--display);display:grid;place-items:center;border-radius:0}.share-button{padding:0 17px;font-size:21px;letter-spacing:3px}.icon-button{width:54px}.icon-button .pixel-icon{width:30px;height:30px}.help-button{font-size:47px;line-height:1;font-weight:600;padding:0 0 3px}
.explore{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:min(520px,calc(100% - 256px));background:var(--surface);border:var(--edge);z-index:8;box-shadow:0 0 0 1px #18202780}.search-wrap{display:flex;height:48px;gap:14px;align-items:center;padding:0 14px}.search-wrap>svg{width:25px;height:25px;flex-shrink:0}.search-wrap input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--paper);font-family:var(--display);font-size:21px;height:100%}.search-wrap input::placeholder{color:#a2a6ae;opacity:1}.search-wrap kbd{display:none}.search-wrap>button{background:transparent;color:var(--paper);font-size:27px;padding:0 3px}.explore:focus-within{border-color:var(--accent)}.discover-head,.place-chips,.explore-foot{display:none}#results{position:absolute;left:-3px;bottom:calc(100% + 10px);width:calc(100% + 6px);max-height:min(430px,calc(100dvh - 130px));overflow:auto;background:var(--surface);border:var(--edge);padding:5px;box-shadow:0 4px 20px #0004;scrollbar-color:#626c79 var(--surface)}#results button{width:100%;padding:12px 10px;background:transparent;color:var(--paper);text-align:left;display:flex;gap:12px;align-items:center}#results button:hover,#results button.active{background:#354250}#results .result-icon{background:#3b4652;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;font-size:18px}#results strong{font-size:13px;font-weight:500;display:block}#results small{font-size:10px;color:var(--muted);display:block;margin-top:3px}#results .result-arrow{margin-left:auto;color:var(--accent)}.no-results{font-size:12px;line-height:1.8;padding:14px;color:var(--muted)}
.minimap{position:absolute;right:18px;top:18px;width:235px;z-index:3;filter:drop-shadow(2px 3px 0 #1d243366)}.minimap canvas{width:100%;height:auto;display:block;cursor:crosshair;touch-action:none;image-rendering:pixelated;background:transparent}
#markers{position:absolute;inset:0;pointer-events:none}.map-marker{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;background:transparent;padding:0;will-change:transform;white-space:nowrap}.map-marker:hover,.map-marker:active{background:transparent}.marker-label{font-size:10px;font-weight:500;background:#1d2433ed;border:1px solid #eeeadeb0;box-shadow:2px 2px 0 #15202150;padding:6px 9px;margin-bottom:7px;color:var(--paper)}.marker-pin{width:17px;height:17px;background:#d77d54;border:3px solid var(--paper);box-shadow:2px 2px 0 #15202150;transform:rotate(-45deg)}.map-marker.selected .marker-label,.map-marker:hover .marker-label{background:var(--paper);color:var(--surface)}.map-marker.selected .marker-pin{background:var(--accent);width:23px;height:23px}.labels-hidden .marker-label{display:none}.district-marker .marker-label{font-family:var(--display);font-size:15px;letter-spacing:.3px}.district-marker .marker-label::after{content:' ↗';color:var(--accent)}.metro-pin{width:23px;height:23px;display:grid;place-items:center;font-family:var(--display);font-size:17px;font-weight:600;background:#41685c;border:2px solid var(--paper);color:var(--paper)}
.place-card{position:absolute;left:8px;bottom:76px;width:315px;z-index:6;overflow:hidden;background:var(--surface);border:var(--edge);box-shadow:4px 4px 0 #17213044}.close-button{position:absolute;right:10px;top:10px;background:var(--surface);border:1px solid var(--paper);color:var(--paper);z-index:2;width:30px;height:30px;font-size:24px;line-height:1;display:grid;place-items:center}.place-illustration{height:150px;background:#819461;position:relative;overflow:hidden}.place-illustration canvas{width:100%;height:100%;object-fit:cover}.place-illustration>span{position:absolute;bottom:10px;left:12px;padding:5px 7px;background:var(--surface);color:var(--paper);font-family:var(--display);font-size:12px;text-transform:uppercase}.place-content{padding:18px}.eyebrow{font-family:var(--display);font-size:13px;color:var(--accent);letter-spacing:1.2px}.place-content h2{font-family:var(--display);font-size:28px;font-weight:500;margin:8px 0 11px;line-height:1.1}.place-content p{font-size:12px;color:var(--muted);line-height:1.75;margin:0}.place-card-footer{display:flex;justify-content:space-between;gap:8px;margin-top:18px;padding-top:13px;border-top:1px solid var(--line);font-size:9px}.place-card-footer>span{color:var(--muted)}.place-card-footer a{text-decoration:none}
#toast{position:absolute;left:50%;top:20px;transform:translate(-50%,-10px);opacity:0;pointer-events:none;background:var(--surface);border:2px solid var(--paper);color:var(--paper);padding:12px 20px;font-size:12px;transition:.2s;z-index:25}#toast.visible{opacity:1;transform:translate(-50%,0)}
#loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--surface);transition:opacity .5s}#loading.loaded{opacity:0;pointer-events:none}.loading-mark{font-family:var(--display);font-size:42px;display:flex;gap:10px;align-items:center}.loading-mark i{width:8px;height:8px;background:var(--accent);margin:14px 0 0 3px}.loading-bar{width:150px;height:3px;background:#3f4955;margin-top:30px;overflow:hidden}.loading-bar b{display:block;width:40%;height:100%;background:var(--accent);animation:loading 1.2s infinite ease-in-out}#loading p{font-size:11px;color:var(--muted);margin-top:14px}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
dialog{color:var(--paper);background:var(--surface);border:var(--edge);box-shadow:7px 7px 0 #11192380;width:490px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:34px;overflow:auto;border-radius:0}dialog::backdrop{background:#151e2c8c}dialog h2{font-family:var(--display);font-size:40px;font-weight:500;line-height:1.05;margin:15px 0 22px}dialog p{font-size:12px;line-height:1.8;color:var(--muted)}dialog h3{font-family:var(--display);font-size:21px;font-weight:500;margin:25px 0 7px}.about-facts{display:flex;justify-content:space-between;padding:20px 0;margin:22px 0;border-block:1px solid var(--line);gap:10px}.about-facts strong{font-family:var(--display);font-weight:500;font-size:24px;display:block}.about-facts span{display:block;font-size:9px;color:var(--muted);margin-top:5px}.keyboard-help{display:flex;flex-wrap:wrap;gap:10px 15px;margin-top:20px;font-size:10px;color:var(--muted)}.keyboard-help kbd{display:inline-block;border:1px solid var(--line);padding:4px;margin-right:4px;color:var(--paper)}.credits{font-size:10px!important;margin-top:20px}.wide-button{width:100%;background:#303c49;border:1px solid var(--paper);color:var(--paper);padding:13px 14px;font-family:var(--display);font-size:18px;display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:10px}.wide-button span{font-size:21px}#share-dialog label{font-family:var(--display);font-size:13px;letter-spacing:1px;display:block;margin:25px 0 9px}.copy-row{display:flex;border:1px solid var(--line)}.copy-row input{width:0;flex:1;min-width:0;border:0;background:#151d2a;padding:13px;font-size:11px;color:var(--paper)}.copy-row button{padding:0 14px;font-family:var(--display);font-size:17px;background:#364554;color:var(--paper)}.settings-list{border-top:1px solid var(--line)}.setting-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border-bottom:1px solid var(--line);padding:18px 0;font-size:13px}.toggle-track{display:block;width:38px;height:20px;border:2px solid #89929c;padding:3px}.toggle-track::after{content:'';display:block;width:10px;height:10px;background:#89929c;transition:transform .15s}.setting-toggle[aria-pressed=true] .toggle-track{border-color:var(--accent)}.setting-toggle[aria-pressed=true] .toggle-track::after{background:var(--accent);transform:translateX(18px)}.settings-zoom{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-top:22px}.zoom-controls{display:flex;align-items:center;border:1px solid var(--line)}.zoom-controls button{width:42px;height:38px;font-family:var(--display);font-size:28px;background:transparent}.zoom-controls button:hover{background:#354250}.zoom-controls output{font-family:var(--display);font-size:18px;min-width:60px;text-align:center}.settings-navigation{display:flex;gap:10px}.settings-navigation .wide-button{font-size:16px}.settings-note{font-size:11px;margin:18px 0 0}
@media(min-width:1600px){.explore{width:650px}.search-wrap{height:58px}.search-wrap input{font-size:25px}.bottom-actions{gap:12px}.pixel-button{height:64px;min-width:64px}.icon-button{width:64px}.share-button{padding:0 20px;font-size:23px}.help-button{font-size:52px}.minimap{width:290px;top:24px;right:24px}}
@media(max-width:1100px){.minimap{width:185px}.search-wrap input{font-size:19px}.place-card{bottom:98px}}
@media(max-width:600px){.explore{width:calc(100% - 16px);bottom:max(80px,calc(env(safe-area-inset-bottom) + 80px))}.search-wrap{height:48px;padding:0 12px;gap:10px}.search-wrap input{font-size:20px}.bottom-actions{gap:10px}.pixel-button{height:54px;min-width:54px}.share-button{font-size:20px}.minimap{width:145px;top:12px;right:12px}.place-card{left:8px;right:8px;width:auto;bottom:165px;max-height:calc(100dvh - 185px);overflow:auto;display:grid;grid-template-columns:100px 1fr}.place-illustration{height:100%;min-height:170px}.place-illustration canvas{height:100%;object-fit:cover}.place-illustration>span{left:5px;bottom:7px;font-size:10px;max-width:92px}.place-content{padding:18px 14px 12px}.place-content h2{font-size:25px;margin:7px 0}.place-content p{font-size:10px;line-height:1.6}.place-content .eyebrow{font-size:10px}.place-card-footer{margin-top:10px;padding-top:9px;font-size:8px;flex-wrap:wrap}.marker-label{font-size:8px;padding:5px 7px}.marker-pin{width:14px;height:14px;border-width:2px}.district-marker .marker-label{font-size:12px}#results{max-height:calc(100dvh - 175px)}dialog{padding:28px 22px}dialog h2{font-size:36px}.about-facts strong{font-size:20px}.about-facts span{font-size:8px}.settings-navigation{flex-direction:column;gap:8px}.settings-navigation .wide-button{margin-top:14px}.settings-navigation .wide-button+.wide-button{margin-top:0}#toast{max-width:calc(100% - 24px);width:max-content;font-size:11px;top:12px}}
@media(max-width:480px){.minimap{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* A compact author signature replaces the map's lower attribution badge.
   Source and license details remain in the help dialog and exported artwork. */
.creator-credit{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));z-index:4;display:flex;align-items:center;gap:13px;background:#1d2433ed;border:1px solid #eeeade99;color:var(--paper);padding:7px 10px 7px 12px;box-shadow:2px 2px 0 #16202a30}
.creator-credit>span{font-family:var(--display);font-size:18px;white-space:nowrap}.creator-credit strong{font-weight:600}.creator-credit nav{display:flex;gap:5px;border-left:1px solid #eeeade55;padding-left:9px}.creator-credit a{width:28px;height:28px;display:grid;place-items:center;color:var(--paper)}.creator-credit a:hover{background:#43515f;color:#caddac}.creator-credit svg{width:20px;height:20px;fill:currentColor;stroke:none}.creator-credit .instagram-icon{fill:none;stroke:currentColor;stroke-width:1.8}.creator-credit .instagram-dot{fill:currentColor;stroke:none}
@media(max-width:600px){.creator-credit{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));gap:9px;padding:6px 7px 6px 10px}.creator-credit>span{font-size:16px}.creator-credit nav{padding-left:7px;gap:3px}.creator-credit a{width:27px;height:27px}}

#results .result-copy{min-width:0;flex:1}#results strong{overflow-wrap:anywhere}.marker-label{max-width:min(280px,calc(100vw - 32px));overflow:hidden;text-overflow:ellipsis}

.visitor-badge{position:absolute;top:66px;left:max(12px,env(safe-area-inset-left));z-index:4;display:flex;align-items:center;gap:7px;padding:6px 9px;background:#1d2433ed;border:1px solid #eeeade75;box-shadow:2px 2px 0 #16202a30;font-family:var(--display);font-size:15px;max-width:calc(100% - 24px);color:var(--paper)}.visitor-badge svg{width:17px;height:17px;fill:var(--accent);stroke:none;flex-shrink:0}.visitor-badge strong{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.visitor-badge button{background:transparent;border:1px solid var(--line);font-size:17px;line-height:1;padding:1px 4px}.visitor-badge[data-state="error"]{font-size:12px;color:var(--muted)}
@media(max-width:600px){.visitor-badge{top:59px;left:max(8px,env(safe-area-inset-left));font-size:14px;padding:5px 8px}}