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

:root { font-family: 'Montserrat', sans-serif; color: #e9edff; background: #00072f; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; }
button, a { font: inherit; }
.scene { height: 100svh; min-height: 620px; position: relative; overflow: hidden; isolation: isolate; background: #00072f; }
.map { position: absolute; inset: -1%; width: 102%; height: 102%; z-index:0; background:#000a43; font-family:'Montserrat',sans-serif; }
.map .leaflet-tile-pane { filter: grayscale(1) invert(.9) sepia(.85) hue-rotate(178deg) saturate(4.8) brightness(.76) contrast(1.42); opacity:.98; }
.map .leaflet-control-attribution { margin:0 18px 16px 0; padding:3px 6px; border-radius:4px; background:rgba(0,7,40,.76); color:#8298d1; font:9px 'Montserrat',sans-serif; }
.map .leaflet-control-attribution a { color:#8eb9ff; }
.map .leaflet-control-zoom { border:0; box-shadow:0 2px 12px rgba(27,75,117,.13); }
.map .leaflet-control-zoom a { color:#a9c9ff; background:rgba(0,12,61,.92); border-color:rgba(93,142,218,.3); }
.map .leaflet-control-zoom a:hover { color:#D10B1A; border-color:#D10B1A; background:#101541; }
.bar-star-marker { border:0; background:transparent; }
.bar-star { display:block; color:#D10B1A; font-size:25px; line-height:30px; text-align:center; mix-blend-mode:hard-light; text-shadow:0 0 8px rgba(209,11,26,.24); transition:transform .18s; }
.bar-star-marker:hover .bar-star { transform:scale(1.4); }
.map .leaflet-popup-content-wrapper,.map .leaflet-popup-tip { background:#000b3d; color:#f0f3ff; box-shadow:0 8px 30px rgba(0,0,0,.42); }
.map .leaflet-popup-content-wrapper { border:1px solid rgba(94,143,255,.48); border-radius:12px; }
.map .leaflet-popup-content { margin:13px 15px; font:12px/1.5 'Montserrat',sans-serif; }
.place-popup strong { display:block; color:#f1f4ff; font-size:13px; font-weight:700; }
.popup-meta { display:flex; align-items:center; gap:9px; margin-top:5px; color:#a9b8d9; font-size:10px; }
.popup-rating { color:#D10B1A; font-weight:800; }
.popup-price { margin-top:4px; color:#d3ddf2; font-size:11px; font-weight:600; }
.popup-map-link { display:inline-block; margin-top:8px; color:#D10B1A; font-size:10px; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.popup-map-link:hover { color:#D10B1A; }
.map-wash { position: absolute; inset: 0; z-index:1; pointer-events: none; background:radial-gradient(ellipse at 50% 49%,rgba(28,71,235,.12),rgba(0,7,47,.28) 57%,rgba(0,5,33,.66) 100%),linear-gradient(180deg,rgba(0,7,43,.12),rgba(0,8,49,.06) 65%,rgba(0,5,34,.42)); mix-blend-mode:multiply; }
.map-grain { position: absolute; inset: 0; z-index:1; pointer-events: none; opacity: .19; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
.finder { position: absolute; width: min(590px, calc(100vw - 36px)); left: 50%; top: calc(43% + 26px); transform: translate(-50%,-50%); z-index: 2; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; color:#e4eaff; font-size:13px; letter-spacing:.045em; font-weight:700; text-shadow:0 2px 20px #050918; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(101,157,255,.68); border-radius:50%; background:rgba(14,38,83,.8); color:#9fc5ff; font-size:13px; letter-spacing:-.06em; box-shadow:0 0 24px rgba(31,111,255,.25); }
.search-wrap { position:relative; }
.searchbar { position:relative; box-sizing:border-box; min-width:0; width:100%; height:70px; display:flex; align-items:center; gap:16px; padding:0 23px; border:1px solid rgba(209,11,26,.55); border-radius:18px; background:rgba(7,12,27,.84); color:#edf3ff; box-shadow:0 15px 55px rgba(0,0,0,.42),0 0 32px rgba(31,99,222,.14),inset 0 1px rgba(255,255,255,.05); text-align:left; cursor:pointer; backdrop-filter:blur(18px); transition:transform .2s, box-shadow .2s, opacity .2s; isolation:isolate; }
.searchbar::before { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:#D10B1A; opacity:.6; mix-blend-mode:hard-light; pointer-events:none; }
.searchbar > * { position:relative; z-index:1; }
.searchbar:hover { transform:translateY(-2px); border-color:rgba(209,11,26,.92); box-shadow:0 19px 60px rgba(0,0,0,.5),0 0 38px rgba(209,11,26,.2); }
.searchbar:hover .search-icon { border-color:#D10B1A; }
.searchbar:hover .search-icon::after { background:#D10B1A; }
.search-icon { width:18px; height:18px; border:2px solid #fff; border-radius:50%; position:relative; opacity:.95; flex:none; }
.search-icon::after { content:""; position:absolute; width:7px; height:2px; background:#fff; right:-5px; bottom:-2px; transform:rotate(48deg); border-radius:2px; }
.typewriter { min-height:1.25em; flex:1; color:#f0f4ff; font-size:15px; font-weight:500; }
.typewriter::after { content:""; display:inline-block; width:1px; height:1em; margin-left:3px; vertical-align:-.15em; background:#D10B1A; animation:caret .8s steps(2,end) infinite; }
.searchbar.is-active .typewriter::after { display:none; }
.searchbar.is-active .typewriter { display:none; }
.search-input { flex:1 1 auto; min-width:0; max-width:100%; width:0; border:0; outline:0; background:transparent; color:#f0f4ff; font:500 15px 'Montserrat',sans-serif; }
.search-input::placeholder { color:#95a8cf; }
.searchbar.is-active .search-input::placeholder { opacity:.5; }
.searchbar.is-active { cursor:text; border-color:rgba(209,11,26,.72); }
.scene.bar-selected #searchTrigger { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); }
.search-city,.menu-kicker,.menu-footer,.map-caption,.source-link,.coordinates { font-family:'Montserrat',sans-serif; letter-spacing:.1em; font-size:9px; }
.search-city { color:#7695c2; border-left:1px solid rgba(125,162,219,.25); padding-left:17px; }
.category-menu,.selection { position:absolute; top:calc(100% + 10px); left:0; width:100%; border:1px solid rgba(95,139,220,.4); border-radius:18px; background:rgba(0,12,61,.8); color:#e5edff; backdrop-filter:blur(24px); box-shadow:0 18px 60px rgba(0,0,0,.48),0 0 38px rgba(31,99,222,.14); overflow:hidden; animation:appear .18s ease-out; isolation:isolate; }
.selection > * { position:relative; z-index:1; }
.menu-kicker { padding:19px 22px 12px; margin:0; color:#7890b8; }
.category-grid { display:grid; grid-template-columns:1fr; gap:0; padding:0 20px 12px; }
.category { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 3px; border:0; border-bottom:1px solid rgba(113,153,218,.2); border-radius:0; background:transparent; text-align:left; color:#dbe7ff; font-size:13px; font-weight:600; cursor:pointer; transition:color .15s,border-color .15s,background .15s,padding .15s; }
.category:last-child { border-bottom:0; }
.category:hover,.category.active { padding-left:10px; color:#D10B1A; border-color:rgba(209,11,26,.58); background:linear-gradient(90deg,rgba(209,11,26,.09),transparent 72%); }
.category-count { margin-left:auto; color:#7990b4; font:10px 'Montserrat',sans-serif; }
.category:hover .category-count,.category.active .category-count { color:#D10B1A; }
.menu-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 19px 15px; border-top:1px solid rgba(113,153,218,.2); color:#7789a7; font-size:8px; }
.menu-footer a,.source-link { color:#8bb8ff; text-decoration:none; }
.menu-footer a:hover,.source-link:hover { color:#c4dcff; }
.selection { top:calc(100% + 12px); padding:16px; max-height:45svh; overflow:auto; }
.selection-head { display:flex; justify-content:space-between; align-items:center; margin:0 1px 10px; }
.selection-label { color:#7e94b9; font:9px 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.clear { border:0; background:transparent; color:#a3b7d8; font-size:23px; line-height:1; cursor:pointer; }
.place { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; border:0; border-top:1px solid rgba(113,153,218,.2); background:transparent; color:#e1eaff; font-size:12px; font-weight:700; text-align:left; cursor:pointer; }
.place:hover,.place.selected-place { color:#D10B1A; }
.place:hover .result-name,.place.selected-place .result-name { color:#D10B1A; }
.result-star { color:#D10B1A; font-size:15px; mix-blend-mode:hard-light; }
.result-name { flex:1; }
.result-rating { color:#D10B1A; font-size:10px; font-weight:600; }
.empty { padding:13px 2px; border-top:1px solid rgba(113,153,218,.2); color:#91a5c6; font-size:12px; line-height:1.6; }
.map-caption { position:absolute; bottom:27px; left:30px; z-index:2; color:#9fc4ff; font-size:9px; font-weight:500; text-shadow:0 1px 8px #040817; }
.caption-dot { display:inline-block; width:6px; height:6px; margin:0 8px 1px 0; border-radius:50%; background:#3c91ff; box-shadow:0 0 0 4px rgba(47,116,255,.18),0 0 14px #398fff; }
.source-link { position:absolute; bottom:27px; right:30px; z-index:2; font-size:9px; text-shadow:0 1px 8px #040817; }
.coordinates { position:absolute; top:26px; right:30px; z-index:2; color:#8eacd9; font-size:9px; text-shadow:0 1px 8px #040817; }
.site-title { position:absolute; z-index:2; left:50%; bottom:-.035em; width:max-content; margin:0; transform:translateX(-50%); color:#D10B1A; opacity:.8; mix-blend-mode:hard-light; font-size:clamp(58px,18.5vw,420px); font-weight:800; line-height:.84; letter-spacing:-.075em; text-align:center; white-space:nowrap; pointer-events:none; text-shadow:0 0 34px rgba(209,11,26,.08); transition:opacity .22s ease,transform .22s ease; }
.scene.is-searching .site-title { opacity:0; transform:translate(-50%,10px); }
@keyframes caret { 50% { opacity:0; } }
@keyframes appear { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:560px) { .scene { min-height:580px; }.finder { top:calc(42% + 26px); }.searchbar { height:64px; padding:0 17px; gap:12px; }.searchbar:hover,.searchbar:focus-within { transform:none; }.typewriter {font-size:14px}.search-input {font-size:16px} }