/* Generated by tools/build_projects.py from zameen-price-map/site/index.html: scoped under .ds. Do not edit. */
.ds a {color: var(--s1);}
.ds button, .ds select, .ds input {font: inherit; color: inherit;}
.ds .hero h1 {font-size: clamp(36px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 16px;}
.ds .byline {font-size: 14px; color: var(--muted); margin: 14px 0 0;}
.ds .tiles {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 32px 0 0;}
.ds .tile {background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 16px 18px;}
.ds .tile .k {font-size: 13px; color: var(--ink-2);}
.ds .tile .v {font-size: 30px; font-weight: 650; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums;}
.ds .tile .s {font-size: 13px; color: var(--muted);}
.ds section {margin-top: 72px;}
.ds .answer {color: var(--ink-2); margin: 0 0 18px; max-width: 72ch; font-size: 17px;}
.ds .answer strong {color: var(--ink);}
.ds .note {font-size: 14px; color: var(--muted); margin: 10px 0 0; max-width: 80ch;}
.ds .card {background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 18px; margin-top: 14px; min-width: 0;}
.ds .card h3 {font-size: 15px; margin: 0; line-height: 1.35;}
.ds .card .sub {font-size: 13px; color: var(--muted); margin: 3px 0 10px;}
.ds .card.explain p {font-size: 15px; color: var(--ink-2); margin: 8px 0 0;}
.ds .row2 {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.ds .row2 > .card {margin-top: 0;}
.ds .row2 {margin-top: 14px;}
@media (max-width: 760px) {
.ds .row2 {grid-template-columns: 1fr;}
}
.ds .legend {display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin: 2px 0 6px;}
.ds .legend span {display: inline-flex; align-items: center; gap: 6px;}
.ds .sw {width: 10px; height: 10px; border-radius: 50%; display: inline-block;}
.ds .sw.s1 {background: var(--s1);}
.ds .sw.s2 {background: var(--s2);}
.ds .chart {width: 100%; overflow: hidden;}
.ds .chart svg {display: block; max-width: 100%; height: auto; overflow: visible;}
.ds .chart figure {margin: 0;}
.ds .chart [aria-label="tip"] path {fill: var(--surface); stroke: var(--axis);}
.ds .chart [aria-label="tip"] text {fill: var(--ink);}
.ds .map-frame {border: 1px solid var(--ring); border-radius: 12px; overflow: hidden; height: min(680px, 78vh); background: var(--surface);}
.ds .map-frame iframe {width: 100%; height: 100%; border: 0; display: block;}
.ds .controls {display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; font-size: 14px;}
.ds .controls label {display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2);}
.ds select {background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 5px 8px;}
.ds .seg {display: inline-flex; background: var(--page); border: 1px solid var(--ring); border-radius: 10px; padding: 3px; gap: 2px;}
.ds .seg button {border: 0; background: transparent; border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2);}
.ds .seg button[aria-checked="true"] {background: var(--seg-on); color: var(--seg-on-text);}
.ds .seg button:focus-visible, .ds select:focus-visible, .ds input:focus-visible {outline: 2px solid var(--s1); outline-offset: 2px;}
.ds .budget-label {flex: 1 1 320px; display: flex !important; flex-wrap: wrap;}
.ds .budget-label strong {color: var(--ink); font-size: 18px; min-width: 90px; font-variant-numeric: tabular-nums;}
.ds .budget-label input {flex: 1 1 200px; accent-color: var(--s1);}
.ds .budget-cities {display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 18px;}
.ds .bc {border: 1px solid var(--ring); border-radius: 10px; padding: 10px 12px;}
.ds .bc .k {font-size: 13px; color: var(--ink-2);}
.ds .bc .v {font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums;}
.ds .bc .s {font-size: 12px; color: var(--muted);}
.ds .bc .meter {height: 6px; background: var(--grid); border-radius: 3px; margin-top: 6px; overflow: hidden;}
.ds .bc .meter i {display: block; height: 100%; background: var(--s1); border-radius: 3px;}
.ds .budget-lists {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 760px) {
.ds .budget-lists {grid-template-columns: 1fr;}
}
.ds .hood-list {list-style: none; padding: 0; margin: 8px 0 12px;}
.ds .hood-list li {display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 14px;}
.ds .hood-list li:last-child {border-bottom: 0;}
.ds .hood-list .nm {font-weight: 600;}
.ds .hood-list .pt {display: block; font-size: 12px; color: var(--muted); font-weight: 400;}
.ds .hood-list .pr {text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;}
.ds .hood-list .pr small {display: block; font-size: 12px; color: var(--muted); font-weight: 400;}
.ds .hood-list .empty {display: block; color: var(--muted);}
.ds .prose {max-width: 72ch;}
.ds .prose p {color: var(--ink-2); margin: 0 0 14px;}
.ds .prose strong {color: var(--ink);}
.ds .prose .stack {font-size: 14px; color: var(--muted);}
.ds .caveats {max-width: 72ch; padding-left: 20px; color: var(--ink-2);}
.ds .caveats li {margin-bottom: 10px;}
.ds .caveats strong {color: var(--ink);}
.ds .foot {margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--muted);}