:root {
  --ink: #173630;
  --muted: #58726b;
  --paper: #fff9ec;
  --panel: #ffffff;
  --line: #d5e3d8;
  --leaf: #18745d;
  --leaf-dark: #104e40;
  --sun: #f7bd3c;
  --coral: #ec735e;
  --sky: #bce5df;
  --shadow: 0 14px 34px rgba(25, 77, 62, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: repeating-linear-gradient(90deg, transparent 0, transparent 29px, rgba(24,116,93,.035) 30px), var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.map-page { max-width: 1340px; margin: 0 auto; padding: 22px 5vw 62px; }.map-page #map { width: 100%; height: 100%; }

.site-header { min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 0 5vw; background: rgba(255,249,236,.88); border-bottom: 2px solid #d9e7d5; backdrop-filter: blur(10px); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--sun); background: var(--leaf); border: 3px solid #e4f0dd; border-radius: 50%; box-shadow: 3px 3px 0 var(--coral); }.brand-mark svg { width: 23px; height: 23px; stroke-width: 2; }
.brand { color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none; }.brand strong { display: inline; color: var(--coral); font-size: 1rem; font-weight: 700; }.demo-badge { margin-left: auto; padding: 5px 9px; color: var(--leaf-dark); background: #eff6e6; border: 1px solid #b9d8b9; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.site-footer { display: flex; justify-content: center; gap: 16px; max-width: 1340px; margin: 0 auto; padding: 0 5vw 32px; text-align: center; }.site-footer a { color: var(--muted); font-size: .78rem; font-weight: 600; text-decoration: none; }.site-footer a:hover { color: var(--coral); text-decoration: underline; }

.app-shell { max-width: 1340px; margin: 0 auto; padding: 34px 5vw 56px; }
.intro { max-width: 670px; }.eyebrow { margin: 0 0 5px; color: var(--leaf); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; }h1 { font-size: clamp(2.25rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: 0; } .intro > p:last-child { max-width: 570px; margin: 16px 0 0; color: var(--muted); line-height: 1.55; }
.controls { display: grid; gap: 12px; margin: 28px 0 20px; }.search-field { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 3px 10px rgba(24,52,45,.03); }.search-field:focus-within { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(35,115,94,.12); }.search-field svg { color: var(--muted); }.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }.search-field input::placeholder { color: #87948f; }
.filter-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }.filter-list::-webkit-scrollbar { display: none; }.filter-chip { flex: none; padding: 8px 12px; color: #3f564d; background: transparent; border: 1px solid var(--line); border-radius: 4px; font-size: .83rem; font-weight: 600; }.filter-chip[aria-pressed="true"] { color: white; background: var(--leaf); border-color: var(--leaf); }
.explorer { display: grid; gap: 18px; }.map-panel { position: relative; overflow: hidden; min-height: 370px; border: 5px solid var(--panel); border-radius: 20px 7px 20px 7px; box-shadow: var(--shadow); }.map-panel #map { position: absolute; inset: 0; }.map-hint { position: absolute; z-index: 500; bottom: 11px; left: 11px; max-width: 200px; padding: 7px 9px; color: #455a52; background: rgba(255,255,255,.92); border: 1px solid rgba(220,227,217,.9); border-radius: 4px; font-size: .72rem; pointer-events: none; }
.results-panel { min-height: 200px; }.results-heading { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 13px; }.results-heading h2 { color: var(--leaf-dark); font-size: 1.65rem; font-weight: 700; }.results-heading h2 span { display: inline-grid; width: 28px; height: 28px; place-items: center; margin-right: 3px; color: white; background: var(--coral); border-radius: 50%; font-family: "DM Sans", sans-serif; font-size: .73rem; vertical-align: 3px; }.icon-button { width: 37px; height: 37px; display: grid; place-items: center; color: var(--leaf-dark); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }.icon-button:hover { color: white; background: var(--leaf); border-color: var(--leaf); }
.result-list { display: grid; gap: 12px; }.playground-card { width: 100%; display: grid; grid-template-columns: 98px 1fr; overflow: hidden; padding: 0; color: inherit; text-align: left; background: var(--panel); border: 2px solid transparent; border-radius: 15px 5px 15px 5px; box-shadow: 0 4px 0 #d9e7d5; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }.playground-card:hover, .playground-card:focus-visible { border-color: var(--leaf); box-shadow: 0 7px 0 #b8d6b9; outline: 0; transform: translateY(-3px); }.playground-image, .image-placeholder { position: relative; min-height: 100%; overflow: hidden; background: #e5e7d5; }.playground-image img { width: 100%; height: 100%; display: block; object-fit: cover; }.image-placeholder::before, .image-placeholder::after { position: absolute; display: block; content: ""; }.image-placeholder::before { width: 65px; height: 65px; right: -21px; bottom: -18px; border: 9px solid rgba(255,255,255,.74); border-radius: 50%; }.image-placeholder::after { width: 36px; height: 36px; top: 14px; left: 20px; background: rgba(255,255,255,.7); border-radius: 50% 50% 45% 45%; }.accent-sun { background: #f4cd6c; }.accent-green { background: #9fc993; }.accent-rose { background: #f4b0a2; }.accent-blue { background: #a4d9dc; }.card-body { container-type: inline-size; min-width: 0; padding: 14px; }.card-body h3 { overflow: hidden; font-size: 1.03rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.address { margin: 5px 0 3px; overflow: hidden; color: var(--muted); font-family: ui-monospace, monospace; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.area { margin: 0 0 10px; color: var(--leaf); font-size: .7rem; font-weight: 700; }.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }.tag { padding: 4px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; }.tag-green { color: #355d51; background: #eaf5e5; }.tag-mint { color: #176369; background: #dff5ef; }.tag-sun { color: #8a4a22; background: #fff0c7; }.tag-amber { color: #765a10; background: #f8edaa; }.tag-coral { color: #9a3f38; background: #f9ddd6; }.tag-rose { color: #8d3e5f; background: #f7dfe8; }.tag-violet { color: #65478a; background: #e9e0f5; }.tag-blue { color: #246073; background: #dff3f5; }.tag-azure { color: #1f5685; background: #dceaf8; }.tag-slate { color: #475b63; background: #e5ecec; }.empty-state { padding: 26px 16px; text-align: center; border: 1px dashed #c6d1c9; border-radius: 6px; }.empty-state > div { color: var(--leaf); font-size: 2rem; }.empty-state h3 { font-size: 1rem; }.empty-state p { margin: 7px 0 0; color: var(--muted); font-size: .86rem; }

@container (max-width: 240px) { .tag-list { display: none; } }
.leaflet-popup-content-wrapper { border-radius: 5px; font-family: "DM Sans", sans-serif; }.map-popup h3 { font-size: .9rem; }.map-popup p { margin: 4px 0 8px; color: var(--muted); font-size: .76rem; }.map-popup button { padding: 5px 0; color: var(--leaf-dark); background: none; border: 0; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 700; }
.playground-dialog { width: min(92vw, 540px); max-height: min(88vh, 680px); padding: 0; color: var(--ink); background: var(--panel); border: 4px solid #fff; border-radius: 20px 7px 20px 7px; box-shadow: 0 20px 60px rgba(13,39,32,.32); }.playground-dialog::backdrop, .image-dialog::backdrop { background: rgba(13,39,32,.45); }.dialog-close { position: absolute; z-index: 1; top: 12px; right: 12px; }.detail-image { height: 180px; overflow: hidden; border-radius: 16px 3px 0 0; }.detail-image-button { width: 100%; height: 100%; display: block; padding: 0; background: none; border: 0; }.detail-image-button:hover img, .detail-image-button:focus-visible img { transform: scale(1.03); }.detail-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .18s ease; }.detail-content { padding: 24px; }.detail-content h2 { font-size: 1.75rem; font-weight: 700; }.detail-address { margin: 7px 0 2px; color: var(--muted); font-family: ui-monospace, monospace; font-size: .8rem; }.detail-area { margin: 0 0 18px; color: var(--leaf); font-size: .76rem; font-weight: 700; }.detail-description { margin: 18px 0; color: #40554c; line-height: 1.55; }.additional-note { margin: 16px 0; padding: 11px 12px; color: #40554c; background: #f1f7ea; border-left: 4px solid var(--sun); border-radius: 0 5px 5px 0; font-size: .84rem; line-height: 1.45; }.additional-note strong { display: block; margin-bottom: 3px; color: var(--leaf-dark); }.detail-content h3 { margin: 20px 0 9px; font-size: .87rem; }.route-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 11px 14px; color: white; background: var(--leaf); border-radius: 5px; font-size: .9rem; font-weight: 700; text-decoration: none; }.route-link:hover { background: var(--leaf-dark); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.device-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.device-card { overflow: hidden; color: inherit; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }.device-card-button:hover, .device-card-button:focus-visible { border-color: var(--coral); box-shadow: 0 3px 0 #f8c5bb; outline: 0; transform: translateY(-1px); }.device-image { height: 88px; background: #edf1e6; }.device-image img { width: 100%; height: 100%; display: block; object-fit: cover; }.device-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #dfead6, #f1e0ad); }.device-card-body { padding: 8px; }.device-card h4 { margin: 0; font-size: .78rem; }.device-card p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }.image-dialog { width: min(94vw, 1040px); max-height: 94dvh; padding: 0; overflow: visible; background: transparent; border: 0; }.image-dialog figure { margin: 0; }.image-dialog img { display: block; width: 100%; max-height: 84dvh; object-fit: contain; background: #122d27; border-radius: 8px; }.image-dialog figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; color: white; background: #122d27; border-radius: 0 0 8px 8px; font-size: .84rem; }.image-dialog-close, .gallery-button { position: absolute; z-index: 1; }.image-dialog-close { top: 10px; right: 10px; }.gallery-button { top: 50%; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--ink); background: rgba(255,255,255,.94); border: 0; border-radius: 50%; transform: translateY(-50%); }.gallery-button:hover { color: white; background: var(--leaf); }.gallery-previous { left: 10px; }.gallery-next { right: 10px; }
.route-dialog { width: min(92vw, 420px); padding: 0; color: var(--ink); background: var(--panel); border: 4px solid #fff; border-radius: 16px 6px 16px 6px; box-shadow: 0 20px 60px rgba(13,39,32,.32); }.route-dialog::backdrop { background: rgba(13,39,32,.45); }.route-dialog-close { position: absolute; z-index: 1; top: 12px; right: 12px; }.route-dialog-content { padding: 26px; }.route-dialog-content h2 { margin: 0 38px 19px 0; font-size: 1.45rem; }.route-options { display: grid; gap: 9px; }.route-option { display: grid; gap: 2px; padding: 13px 14px; color: var(--ink); background: #f3f8ef; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }.route-option:hover, .route-option:focus-visible { color: var(--leaf-dark); background: #e4f1dc; border-color: var(--leaf); outline: 0; }.route-option strong { font-size: .95rem; }.route-option span { color: var(--muted); font-size: .77rem; }
.legal-page { max-width: 720px; margin: 0 auto; padding: 48px 5vw 72px; }.legal-page h1 { margin: 0 0 22px; font-size: clamp(2.1rem, 7vw, 3.3rem); }.legal-page h2 { margin: 30px 0 8px; color: var(--leaf-dark); font-size: 1.05rem; }.legal-page p { margin: 0; color: #40554c; line-height: 1.65; }.legal-page p a { color: var(--leaf-dark); font-weight: 700; }.legal-notice { margin-bottom: 28px; padding: 12px 14px; color: #77451b; background: #fff0c7; border: 1px solid #edcf7e; border-radius: 6px; font-size: .86rem; line-height: 1.45; }.back-link { display: inline-block; margin-bottom: 34px; color: var(--leaf-dark); font-size: .88rem; font-weight: 700; text-decoration: none; }.back-link::before { content: "← "; }.back-link:hover { color: var(--coral); }
@media (min-width: 760px) { .site-header { padding: 0 max(5vw, calc((100vw - 1240px) / 2)); }.app-shell { padding-top: 58px; }.controls { grid-template-columns: minmax(280px, 390px) 1fr; align-items: center; }.map-page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 24px; align-items: start; padding-top: 32px; }.map-panel { position: sticky; top: 22px; height: min(610px, 66vh); }.result-list { max-height: min(552px, 60vh); padding: 1px 8px 8px 1px; overflow-y: auto; }.playground-card { grid-template-columns: 110px 1fr; min-height: 118px; } }