/* A self-contained, illustrative walkthrough of the current platform. */
.z-demo { --demo-chat-width: 36%; --demo-drawer-width: 29%; --demo-pan-x: -19%; --demo-pan-y: 0%; --demo-tools-right: 49%; --demo-location-left: 26%; --demo-location-bottom: 5%; --demo-drawer-x: 100%; --demo-drawer-y: 0%; position: relative; margin: 0; container-type: inline-size; }
.z-demo-screen { position: relative; display: flex; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #ffffff0b; border-radius: 10px; background: #121314; isolation: isolate; font-size: clamp(7px, 1.18cqw, 13px); line-height: 1.6; letter-spacing: 0; }
.z-demo svg { width: 1.25em; height: 1.25em; stroke-width: 1.5; flex-shrink: 0; }
.z-demo-workspace { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.z-demo-map { position: absolute; inset: 0 0 0 var(--demo-chat-width); overflow: hidden; background: #07090b; }
.z-demo-globe { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform-origin: 47% 45.9%; }
.z-demo-globe img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.65); }
.z-demo-local-map { position: absolute; inset: -13%; transform: scale(1); }
.z-demo-map-content { position: absolute; inset: 0; transform: translate(var(--demo-pan-x), var(--demo-pan-y)); }
.z-demo-map-content > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.7); }
.z-demo-pins { position: absolute; inset: 0; }
.z-demo-pin { position: absolute; display: block; font-size: clamp(7px, 1.1cqw, 12px); font-weight: 500; line-height: 1.5; transform: translate(-50%, -50%); white-space: nowrap; }
.z-demo-pin > span { position: relative; display: block; padding: .15em .5em; background: var(--z-blue); color: #fff; border: 1px solid #ffffff2a; border-radius: .5em; box-shadow: 0 2px 8px #0006; }
.z-demo-pin > .z-demo-pin-excluded { opacity: 0; }
.z-demo-pin:nth-child(1) { left: 44%; top: 57%; }
.z-demo-pin:nth-child(2) { left: 46%; top: 32%; }
.z-demo-pin:nth-child(3) { left: 67%; top: 46%; }
.z-demo-pin:nth-child(4) { left: 33%; top: 44%; }
.z-demo-pin:nth-child(5) { left: 58%; top: 65%; }
.z-demo-pin:nth-child(6) { left: 59%; top: 35%; }
.z-demo-pin:nth-child(7) { left: 53%; top: 49%; }
.z-demo-pin:nth-child(8) { left: 35%; top: 68%; }
.z-demo-pin-selected::before { content: ''; position: absolute; inset: -.5em; border: 1px solid #2f8cffb3; border-radius: .85em; }
.z-demo-map-info { position: absolute; left: 3%; top: 3%; display: grid; gap: .1em; padding: .6em .85em; border-radius: .7em; background: #191b23ed; color: #b6bdc9; font-size: .8em; box-shadow: 0 3px 12px #0002; }
.z-demo-map-info strong { font-weight: 500; }
.z-demo-map-tools { position: absolute; right: var(--demo-tools-right); top: 3%; display: flex; flex-direction: column; align-items: flex-end; gap: .8em; color: #949aa4; }
.z-demo-map-tools > span:first-child { display: flex; gap: .5em; align-items: center; padding: .3em .6em; background: #252629; border-radius: 999px; font-size: .8em; }
.z-demo-map-tools b { color: #7aaaff; background: #ffffff08; border-radius: 999px; padding: .1em .35em; font-weight: 400; }
.z-demo-zoom { display: grid; justify-items: center; width: 1.75em; padding: .3em; background: #252629; border-radius: 999px; line-height: 1.5; font-size: 1.2em; }
.z-demo-zoom i { width: .8em; height: 1px; background: #ffffff0a; margin-block: .25em; }
.z-demo-map-location { position: absolute; left: var(--demo-location-left); bottom: var(--demo-location-bottom); transform: translateX(-50%); display: flex; align-items: center; gap: .5em; color: #a9b3c2; padding: .5em .9em; background: #171a20e0; border-radius: 999px; font-size: .8em; white-space: nowrap; }
.z-demo-map-location > span { width: .5em; height: .5em; border-radius: 50%; background: var(--z-blue); }
.z-demo-intro { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5cqw; padding-bottom: 5%; opacity: 0; pointer-events: none; }
.z-demo-intro h3 { font-size: clamp(13px, 2.65cqw, 29px); font-weight: 450; letter-spacing: -.04em; line-height: 1.3; text-shadow: 0 2px 16px #0009; }
.z-demo-input { width: 81%; min-height: 8.6cqw; border-radius: 2.1cqw; padding: 1.4cqw 1cqw .9cqw 1.5cqw; background: linear-gradient(120deg, #2c2d31, #28292c); box-shadow: 0 8px 32px #0002; }
.z-demo-input > span:first-child { font-size: clamp(8px, 1.25cqw, 14px); color: #eeeef0; }
.z-demo-input > div { display: flex; align-items: center; justify-content: space-between; margin-top: 1.15cqw; color: #b4b7bf; }
.z-demo-caret { display: inline-block; height: 1.05em; width: 1px; margin-left: 2px; background: #c3c5cc; vertical-align: -.12em; }
.z-demo-send { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--z-blue); color: #fff; }
.z-demo-send svg { width: 1.35cqw; height: 1.35cqw; }
.z-demo-chat { position: absolute; inset: 0 auto 0 0; width: var(--demo-chat-width); padding: 3.5% 2.2% 13%; background: #121314; border-right: 1px solid #ffffff0c; }
.z-demo-chat-scroll { position: absolute; inset: max(6%, 48px) 6% 17%; overflow: hidden; }
.z-demo-first-exchange, .z-demo-next-exchange { position: absolute; inset: 0; }
.z-demo-first-exchange { opacity: 0; }
.z-demo-question { width: 94%; margin-left: auto; padding: 1em 1.15em; border-radius: 1.7em; background: #2a2b2f; font-size: .9em; line-height: 1.6; }
.z-demo-answer { padding-top: 1.8em; font-size: .9em; }
.z-demo-answer > p:first-child { margin-bottom: .8em; color: #eeeef0; font-size: 1.1em; font-weight: 500; }
.z-demo-answer > p:nth-child(2) { color: #a3a6ae; line-height: 1.8; }
.z-demo-results-heading { display: flex; justify-content: space-between; align-items: center; margin: 1.65em 0 .8em; font-size: .85em; color: #a4a8b0; }
.z-demo-results-heading > span:last-child { padding: .2em .5em; background: #252629; border-radius: 999px; }
.z-demo-results-heading b { font-weight: 400; color: #eeeef0; padding-left: .4em; }
.z-demo-results { border-top: 1px solid #ffffff0c; }
.z-demo-results > div { display: flex; align-items: center; justify-content: space-between; gap: .7em; border-bottom: 1px solid #ffffff0c; padding: .85em 0; font-size: .9em; }
.z-demo-results > div:first-child { padding-block: .6em; font-size: .8em; color: #777d89; }
.z-demo-results b { font-weight: 500; white-space: nowrap; }
.z-demo-results small { display: block; margin-top: .25em; color: #878e9a; font-size: .8em; }
.z-demo-results .z-demo-selected-row { background: #2f8cff12; box-shadow: inset 2px 0 var(--z-blue); padding-inline: .6em; }
.z-demo-followup { display: block; width: fit-content; margin-top: 1.3em; padding: .5em .8em; border-radius: 999px; background: #252629; color: #c0c4ce; font-size: .8em; }
.z-demo-chat-input { position: absolute; inset: auto 6% 4%; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1em; border-radius: 1.6em; background: linear-gradient(120deg, #2c2d31, #28292c); font-size: .85em; color: #81838b; }
.z-demo-chat-input .z-demo-send { width: 2cqw; height: 2cqw; background: #2f8cff4d; }
.z-demo-chat-input > span:first-child { min-height: 1.6em; }
.z-demo-drawer { --demo-section-space: 1.95cqw; --demo-heading-space: 1.3cqw; position: absolute; z-index: 3; inset: 0 0 0 auto; display: flex; flex-direction: column; width: var(--demo-drawer-width); overflow: hidden; background: #121314; border-left: 1px solid #ffffff0f; box-shadow: -8px 0 30px #0002; color: #eeeff2; }
.z-demo-drawer-header { flex: none; height: 4.2cqw; display: flex; align-items: center; justify-content: space-between; padding-inline: 1cqw; border-bottom: 1px solid #ffffff0f; }
.z-demo-drawer-header > span { display: flex; align-items: center; gap: .55em; padding: .4em .55em; border-radius: 999px; background: #252629; color: #abb0ba; }
.z-demo-drawer-header > span:first-child { border-radius: .6em; }
.z-demo-drawer-header svg { width: 1.1em; height: 1.1em; }
.z-demo-drawer-scroll { flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ffffff29 transparent; pointer-events: none; }
.z-demo-drawer-content { position: relative; }
.z-demo-drawer-photo { position: relative; aspect-ratio: 8 / 5; overflow: hidden; }
.z-demo-drawer-photo img { width: 100%; height: 100%; object-fit: cover; }
.z-demo-drawer-photo > span { position: absolute; right: .8em; bottom: .7em; padding: .2em .6em; background: #121314c7; color: #f4f4f5; border-radius: 999px; font-size: .75em; }
.z-demo-drawer-body { padding: 1.85cqw 1.6cqw 2.6cqw; }
.z-demo-drawer-price { display: flex; align-items: center; gap: 1em; }
.z-demo-drawer-price > strong { font-size: 2.42cqw; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.z-demo-drawer-price > span { display: flex; align-items: center; gap: .4em; font-size: .7em; color: #b9bdc6; white-space: nowrap; }
.z-demo-drawer-price i { width: .5em; height: .5em; background: #6dc799; border-radius: 50%; }
.z-demo-drawer-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; margin-top: 1em; color: #d4d7de; font-size: .78em; }
.z-demo-drawer-facts > span { display: flex; align-items: center; gap: .4em; white-space: nowrap; }
.z-demo-drawer-facts svg { color: #828996; }
.z-demo-drawer-type { margin-top: .7em; font-size: .78em; color: #969daa; }
.z-demo-drawer-address { margin-top: 1.4em; color: #c2c6cf; font-size: .9em; }
.z-demo-drawer-address > span { color: #8e96a5; }
.z-demo-data-section { margin-top: var(--demo-section-space); padding-top: var(--demo-section-space); border-top: 1px solid #ffffff0f; font-size: .82em; }
.z-demo-data-section h4 { margin: 0 0 var(--demo-heading-space); color: #eeeff2; font-size: inherit; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.z-demo-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3cqw 1.45cqw; margin: 0; }
.z-demo-data-grid dt { margin-bottom: .4em; color: #94969e; font-size: .833em; line-height: 1.55; }
.z-demo-data-grid dd { margin: 0; color: #eeeff2; font-size: 1em; line-height: 1.6; overflow-wrap: anywhere; }
.z-demo-data-subsection { margin-top: var(--demo-section-space); padding-top: var(--demo-section-space); border-top: 1px solid #ffffff0f; }
.z-demo-data-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7em; margin-bottom: var(--demo-heading-space); }
.z-demo-data-heading h4 { margin: 0; }
.z-demo-data-heading > span { color: #94969e; font-size: .833em; }
.z-demo-data-heading > .z-demo-data-action { border: 1px solid #ffffff18; border-radius: .55em; padding: .35em .65em; }
.z-demo .z-demo-chart, .z-demo .z-demo-chart > svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; }
.z-demo-chart-grid { stroke: #ffffff0f; stroke-width: 1; stroke-dasharray: 2 5; stroke-opacity: .6; }
.z-demo-chart-axis { fill: #94969e; stroke: none; font-family: inherit; font-size: 9px; letter-spacing: .1px; }
.z-demo-chart-line, .z-demo-chart-dashed, .z-demo-chart-land, .z-demo-chart-improvements { fill: none; stroke: #2f8cff; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.z-demo-chart-dashed { stroke-dasharray: 2 5; stroke-opacity: .7; stroke-width: 1.6; }
.z-demo-chart-land { stroke: #2564a8; }
.z-demo-chart-improvements { stroke: #94969e; }
.z-demo-chart-dot { fill: #2f8cff; stroke: #121314; stroke-width: 1.7; }
.z-demo-chart-dot.is-open { fill: #121314; stroke: #2f8cff; }
.z-demo-chart-dot.is-land { fill: #2564a8; }
.z-demo-chart-dot.is-improvements { fill: #94969e; }
.z-demo-chart-glow { fill: none; stroke: #2f8cff; stroke-width: 6; stroke-opacity: .19; }
.z-demo-chart-area { stroke: none; }
.z-demo-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em .8em; font-size: .75em; color: #94969e; }
.z-demo-chart-legend > span { display: inline-flex; align-items: center; gap: .4em; }
.z-demo-chart-legend > span::before { content: ''; width: .4em; height: .4em; border-radius: 50%; background: #2f8cff; }
.z-demo-chart-legend > .z-demo-key-land::before { background: #2564a8; }
.z-demo-chart-legend > .z-demo-key-improvements::before { background: #94969e; }
.z-demo-chart-switch { display: flex; gap: .2em; padding: .2em; border-radius: .6em; background: #94969e14; color: #94969e; font-size: .833em; }
.z-demo-chart-switch > span { padding: .3em .7em; border-radius: .4em; }
.z-demo-chart-switch > [data-active=true] { background: #94969e26; color: #eeeff2; }
.z-demo-chart-readout { display: grid; gap: .4em; margin-bottom: 1em; }
.z-demo-chart-readout > span, .z-demo-chart-readout > small { font-size: .833em; color: #94969e; }
.z-demo-chart-readout > strong { font-size: 1.67em; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.z-demo-comparable-list { display: grid; gap: .8em; list-style: none; margin: 0; padding: 0; }
.z-demo-comparable-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 4.5em; padding: .8em; border: 1px solid #ffffff0f; border-radius: .8em; }
.z-demo-comparable-main, .z-demo-comparable-sale { display: grid; gap: .4em; min-width: 0; }
.z-demo-comparable-row strong { font-size: 1em; font-weight: 500; }
.z-demo-comparable-sale { text-align: right; white-space: nowrap; }
.z-demo-comparable-facts, .z-demo-comparable-sale > span { font-size: .75em; color: #94969e; }
.z-demo-equity-value { display: grid; gap: .3em; text-align: right; font-size: .833em; color: #94969e; }
.z-demo-equity-value strong { color: #eeeff2; font-size: 1.2em; font-weight: 450; }
.z-demo-equity-track { display: flex; height: 1.95cqw; margin: .5em 0 1.6em; border-radius: .5em; }
.z-demo-equity-debt { width: 57.3%; border-radius: .5em 0 0 .5em; background: linear-gradient(105deg, #162233, #245eaa); }
.z-demo-equity-share { position: relative; flex: 1; border-radius: 0 .5em .5em 0; background: #2f8cff; box-shadow: 0 4px 15px #2f8cff21; }
.z-demo-equity-share::before { content: ''; position: absolute; left: -1px; top: -2px; bottom: -2px; width: 2px; border-radius: 2px; background: #77b4ff; box-shadow: 0 0 10px #2f8cff8c; }
.z-demo-equity-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin: 0; }
.z-demo-equity-readouts > div:last-child { text-align: right; }
.z-demo-equity-readouts dt { color: #94969e; font-size: .917em; }
.z-demo-equity-readouts dd { margin: .45em 0 .25em; font-size: 1.55em; font-weight: 450; line-height: 1.25; letter-spacing: -.025em; }
.z-demo-equity-readouts small { color: #94969e; font-size: .833em; }
.z-demo-equity-readouts .z-demo-equity-percent { margin: 0; color: #94969e; font-size: .833em; font-weight: 400; letter-spacing: 0; }
.z-demo-rent-comparison { display: grid; gap: 1.5em; list-style: none; margin: 0; padding: 0; }
.z-demo-rent-row > div:first-child { display: flex; justify-content: space-between; gap: 1em; }
.z-demo-rent-row strong { font-weight: 450; }
.z-demo-rent-row small { color: #94969e; font-size: .75em; }
.z-demo-rent-row p { color: #94969e; font-size: .75em; margin-top: .6em; }
.z-demo svg.z-demo-rent-track { display: block; width: 100%; height: .6em; border-radius: .25em; margin-top: .65em; stroke: none; }
.z-demo-record-row + .z-demo-record-row { margin-top: var(--demo-section-space); padding-top: var(--demo-section-space); border-top: 1px solid #ffffff0f; }
.z-demo-record-row > strong { display: block; font-weight: 500; margin-bottom: var(--demo-heading-space); }
.z-demo-record-row > p { color: #94969e; font-size: .833em; margin-bottom: 1em; }
.z-demo-data-empty { color: #94969e; line-height: 1.75; margin: 0; }
.z-demo-pause { position: absolute; z-index: 4; top: 12px; left: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #ffffff0b; border-radius: 50%; color: #a4a8b0; background: #ffffff03; opacity: .5; transition: opacity .2s; }
.z-demo-pause:hover, .z-demo-pause:focus-visible { opacity: 1; }
.z-demo-pause[hidden] { display: none; }
.z-demo-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.z-demo-play-icon, .z-demo-pause[data-paused=true] .z-demo-pause-icon { display: none; }
.z-demo-pause[data-paused=true] .z-demo-play-icon { display: block; }

/* The JS clock holds this 32-second scene during the extended drawer tour. */
.z-demo.is-animated .z-demo-intro { animation-name: demo-intro; }
.z-demo.is-animated .z-demo-globe { animation-name: demo-globe; }
.z-demo.is-animated .z-demo-map { animation-name: demo-map-split; }
.z-demo.is-animated .z-demo-local-map { animation-name: demo-map-zoom; }
.z-demo.is-animated .z-demo-map-content { animation-name: demo-map-pan; }
.z-demo.is-animated .z-demo-map-tools { animation-name: demo-map-tools; }
.z-demo.is-animated .z-demo-chat { animation-name: demo-chat; }
.z-demo.is-animated .z-demo-first-exchange { animation-name: demo-first-exchange; }
.z-demo.is-animated .z-demo-first-exchange .z-demo-answer { animation-name: demo-answer; }
.z-demo.is-animated .z-demo-next-exchange { animation-name: demo-next-exchange; }
.z-demo.is-animated .z-demo-refined-answer { animation-name: demo-refined-answer; }
.z-demo.is-animated .z-demo-selected-row { animation-name: demo-selected-row; }
.z-demo.is-animated .z-demo-map-info { animation-name: demo-map-label; }
.z-demo.is-animated .z-demo-map-location { animation-name: demo-map-location; }
.z-demo.is-animated .z-demo-pin { animation-name: demo-pin; }
.z-demo.is-animated .z-demo-pin:nth-child(2) { animation-delay: 180ms; }
.z-demo.is-animated .z-demo-pin:nth-child(3) { animation-delay: 360ms; }
.z-demo.is-animated .z-demo-pin:nth-child(4) { animation-delay: 540ms; }
.z-demo.is-animated .z-demo-pin:nth-child(5) { animation-delay: 720ms; }
.z-demo.is-animated .z-demo-pin:nth-child(6) { animation-delay: 900ms; }
.z-demo.is-animated .z-demo-pin:nth-child(7) { animation-delay: 1080ms; }
.z-demo.is-animated .z-demo-pin:nth-child(8) { animation-delay: 1260ms; }
.z-demo.is-animated .z-demo-pin-excluded { animation-name: demo-pin-filter; }
.z-demo.is-animated .z-demo-pin-selected::before { animation-name: demo-pin-selection; }
.z-demo.is-animated .z-demo-drawer { animation-name: demo-drawer; }
.z-demo.is-animated .z-demo-caret { animation-name: demo-caret; }
.z-demo.is-animated .z-demo-chat-input { animation-name: demo-followup-input; }
.z-demo.is-animated .z-demo-chat-input .z-demo-send { animation-name: demo-followup-send; }
.z-demo.is-animated .z-demo-screen *, .z-demo.is-animated .z-demo-pin-selected::before { animation-duration: 32000ms; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes demo-intro { 0%, 12.5% { opacity: 1; transform: translateY(0) scale(1); } 15.625%, 95.3125% { opacity: 0; transform: translateY(-10px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes demo-globe { 0%, 14.375% { opacity: .65; transform: scale(1); } 18.125% { opacity: 1; transform: scale(1); } 26.875% { opacity: 1; transform: scale(3.2); } 30%, 95.3125% { opacity: 0; transform: scale(5); } 96.875% { opacity: 0; transform: scale(1); } 100% { opacity: .65; transform: scale(1); } }
@keyframes demo-map-split { 0%, 33.125% { left: 0; } 40%, 95.3125% { left: var(--demo-chat-width); } 100% { left: 0; } }
@keyframes demo-map-zoom { 0%, 23.75% { opacity: 0; transform: scale(.72); } 30% { opacity: 1; transform: scale(1.08); } 38.75%, 94% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes demo-map-pan { 0%, 75% { transform: translateX(0); } 79%, 100% { transform: translate(var(--demo-pan-x), var(--demo-pan-y)); } }
@keyframes demo-map-tools { 0%, 75% { right: 3%; } 79%, 95.3125% { right: var(--demo-tools-right); } 100% { right: 3%; } }
@keyframes demo-chat { 0%, 33.125% { opacity: 0; transform: translateX(-100%); } 40%, 95.3125% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-100%); } }
@keyframes demo-answer { 0%, 38.125% { opacity: 0; transform: translateY(6px); } 43.125%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes demo-first-exchange { 0%, 57.8% { opacity: 1; transform: translateY(0); } 60%, 100% { opacity: 0; transform: translateY(-35%); } }
@keyframes demo-next-exchange { 0%, 57.8% { opacity: 0; transform: translateY(35%); } 60.625%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes demo-refined-answer { 0%, 61% { opacity: 0; transform: translateY(6px); } 64%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes demo-selected-row { 0%, 74% { background: transparent; box-shadow: inset 2px 0 transparent; } 76%, 100% { background: #2f8cff12; box-shadow: inset 2px 0 var(--z-blue); } }
@keyframes demo-map-label { 0%, 30% { opacity: 0; } 34.375%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes demo-map-location { 0%, 30% { opacity: 0; left: 50%; bottom: 5%; } 34.375% { opacity: 1; } 75% { left: 50%; bottom: 5%; } 79%, 94% { opacity: 1; left: var(--demo-location-left); bottom: var(--demo-location-bottom); } 97%, 100% { opacity: 0; left: var(--demo-location-left); bottom: var(--demo-location-bottom); } }
@keyframes demo-pin { 0%, 29.375% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 31.875%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes demo-pin-filter { 0%, 61% { opacity: 1; transform: scale(1); } 62.5%, 100% { opacity: 0; transform: scale(.65); } }
@keyframes demo-pin-selection { 0%, 74% { opacity: 0; transform: scale(.9); } 76%, 100% { opacity: 1; transform: scale(1); } }
@keyframes demo-drawer { 0%, 75% { opacity: 0; transform: translate(var(--demo-drawer-x), var(--demo-drawer-y)); } 79%, 94% { opacity: 1; transform: translate(0, 0); } 97%, 100% { opacity: 0; transform: translate(var(--demo-drawer-x), var(--demo-drawer-y)); } }
@keyframes demo-followup-input { 0%, 46% { color: #81838b; } 47%, 57.8% { color: #eeeef0; } 58%, 100% { color: #81838b; } }
@keyframes demo-followup-send { 0%, 46% { background: #2f8cff4d; transform: scale(1); } 47%, 57% { background: var(--z-blue); transform: scale(1); } 57.8% { background: var(--z-blue); transform: scale(.85); } 58.5%, 100% { background: #2f8cff4d; transform: scale(1); } }
@keyframes demo-caret { 0%, 1.25%, 3.125%, 5%, 6.875%, 8.75%, 10.625%, 12.5% { opacity: 1; } 1.875%, 3.75%, 5.625%, 7.5%, 9.375%, 11.25%, 13.75%, 100% { opacity: 0; } }
@media (max-width: 767px) {
  .z-demo { --demo-chat-width: 44%; --demo-pan-x: 0%; --demo-pan-y: -14%; --demo-tools-right: 3%; --demo-location-left: 50%; --demo-location-bottom: 43%; --demo-drawer-x: 0%; --demo-drawer-y: 105%; }
  .z-demo-screen { aspect-ratio: 4 / 5; font-size: 2.5cqw; }
  .z-demo-intro { gap: 5cqw; }
  .z-demo-intro h3 { font-size: 4.7cqw; }
  .z-demo-input { width: 88%; border-radius: 4cqw; padding: 3cqw 2cqw 2cqw 3cqw; }
  .z-demo-input > span:first-child { font-size: 2.9cqw; }
  .z-demo-input > div { margin-top: 3cqw; }
  .z-demo-send { width: 5cqw; height: 5cqw; }
  .z-demo-send svg { width: 2.6cqw; height: 2.6cqw; }
  .z-demo-chat { padding-top: 5%; }
  .z-demo-chat-input .z-demo-send { width: 4cqw; height: 4cqw; }
  .z-demo-pin { font-size: 2cqw; }
  .z-demo-followup { font-size: .75em; line-height: 1.5; border-radius: 1em; }
  .z-demo-drawer { --demo-section-space: 3.5cqw; --demo-heading-space: 2.4cqw; inset: auto 2% 2% auto; width: 52%; height: 47%; border: 1px solid #ffffff10; border-radius: 2cqw; }
  .z-demo-drawer-header { height: 6.5cqw; padding-inline: 2cqw; }
  .z-demo-drawer-photo { aspect-ratio: 2 / 1; }
  .z-demo-drawer-body { padding: 2.5cqw; }
  .z-demo-drawer-price > strong { font-size: 4cqw; }
  .z-demo-drawer-facts { gap: .65em; margin-top: .6em; }
  .z-demo-drawer-type { font-size: .78em; }
  .z-demo-data-grid { gap: 2.4cqw 2.6cqw; }
  .z-demo-equity-track { height: 3.5cqw; }
  .z-demo-drawer-address { margin-top: .7em; }
}
@media (prefers-reduced-motion: reduce) { .z-demo.is-animated .z-demo-screen * { animation: none; } }