.real-data-demo {
  --estate-ink: #232621;
  --estate-muted: #666b63;
  --estate-line: #e6e8e2;
  --estate-accent: #485829;
  --estate-accent-soft: #edf5d5;
  --estate-highlight: #d5f45a;
  --estate-support: #635179;
  --estate-support-soft: #eeeaf6;
  position: absolute;
  top: 102px;
  left: calc((100% - 135px - 368px - 604px) / 2);
  width: 604px;
  height: 572px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #fff;
  color: var(--estate-ink);
  font: 12px/1.4 Arial, sans-serif;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  isolation: isolate;
  pointer-events: none;
}
.real-data-demo[hidden] { display: none; }
.real-data-demo * { box-sizing: border-box; }
.estate-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.estate-rail { position: absolute; inset: 0 auto 0 0; width: 44px; background: #f1f2ef; display: flex; align-items: center; flex-direction: column; gap: 14px; padding-top: 20px; color: #74796e; }
.estate-logo { width: 24px; height: 24px; background: transparent; color: var(--estate-ink); display: grid; place-items: center; margin-bottom: 24px; }
.estate-logomark { display: block; width: 22px; height: 22px; }
.estate-rail > .estate-nav { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; }
.estate-rail > .is-active { background: var(--estate-ink); color: var(--estate-highlight); }
.estate-avatar { position: absolute; bottom: 20px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--estate-ink); background: var(--estate-highlight); font-size: 8px; }
.estate-main { position: absolute; inset: 0 0 0 44px; }
.estate-header { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
.estate-header h2 { font-size: 18px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; margin: 0 0 5px; }
.estate-header p { margin: 0; font-size: 9px; color: var(--estate-muted); }
.estate-action { display: flex; align-items: center; gap: 4px; height: 24px; border-radius: 100px; background: var(--estate-highlight); color: var(--estate-ink); padding: 0 9px; font-size: 9px; white-space: nowrap; }
.estate-action .estate-icon { width: 11px; height: 11px; }
.estate-stats { position: absolute; top: 82px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.estate-stat { height: 70px; background: #f0f1ec; border-radius: 8px; }
.estate-stat:first-child { background: var(--estate-highlight); color: var(--estate-ink); }
.estate-stat:nth-child(2) { background: var(--estate-support-soft); }
.estate-stat:first-child .estate-stat-label { color: #48532e; }
.estate-stat:first-child .estate-trend { color: #48532e; }
.estate-stat:nth-child(2) .estate-trend { color: var(--estate-support); }
.estate-stat-content { padding: 10px 12px; }
.estate-stat-label { color: var(--estate-muted); font-size: 10px; margin-bottom: 3px; }
.estate-stat-value { font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.estate-trend { font-size: 8px; font-weight: 400; letter-spacing: 0; color: var(--estate-accent); margin-left: 6px; }
.estate-chart { position: absolute; top: 169px; left: 20px; right: 20px; height: 135px; }
.estate-chart-heading { display: flex; justify-content: space-between; align-items: center; height: 23px; }
.estate-chart-heading strong { font-size: 12px; font-weight: 600; }
.estate-chart-heading span { color: var(--estate-muted); font-size: 10px; display: flex; align-items: center; gap: 4px; }
.estate-chart-heading .estate-icon { width: 12px; height: 12px; }
.estate-chart-content { height: 95px; }
.estate-graph { display: block; width: 100%; height: 95px; overflow: visible; }
.estate-graph-grid { stroke: var(--estate-line); }
.estate-graph-placeholder { stroke: #a8afa0; }
.estate-graph-line { stroke: var(--estate-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.estate-graph-point { fill: var(--estate-ink); stroke: #fff; stroke-width: 1.5; }
.estate-graph stop:first-child { stop-color: var(--estate-highlight); stop-opacity: .42; }
.estate-graph stop:last-child { stop-color: var(--estate-highlight); stop-opacity: .02; }
.estate-months { display: flex; justify-content: space-between; padding: 1px 8px; font-size: 9px; color: var(--estate-muted); }
.estate-list-heading { position: absolute; top: 325px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; }
.estate-list-heading strong { font-weight: 600; font-size: 12px; }
.estate-list-heading span { color: var(--estate-muted); display: flex; align-items: center; gap: 5px; font-size: 10px; }
.estate-list-heading .estate-icon { width: 13px; height: 13px; }
.estate-columns { position: absolute; top: 360px; left: 20px; right: 20px; display: grid; grid-template-columns: 1fr 88px 70px; font-size: 10px; color: var(--estate-muted); padding: 0 10px; }
.estate-properties { position: absolute; top: 383px; left: 20px; right: 20px; }
.estate-property { height: 52px; border-top: 1px solid var(--estate-line); }
.estate-property-content { display: grid; grid-template-columns: 1fr 88px 70px; align-items: center; padding: 7px 10px; height: 52px; }
.estate-property-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.estate-property-name strong { display: block; font-size: 11px; font-weight: 500; }
.estate-property-name small { display: block; font-size: 10px; color: var(--estate-muted); margin-top: 2px; }
.estate-building { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #eef0e9; color: #737b68; flex: none; }
.estate-filled .estate-building { color: var(--estate-accent); background: var(--estate-accent-soft); }
.estate-property:nth-child(2) .estate-filled .estate-building { color: var(--estate-support); background: var(--estate-support-soft); }
.estate-property:nth-child(3) .estate-filled .estate-building { color: #2a2a2a; background: #eaeaea; }
.estate-rent { font-size: 11px; }
.estate-rent small { color: var(--estate-muted); font-size: 9px; }
.estate-badge { display: inline-flex; align-items: center; gap: 4px; width: max-content; padding: 3px 6px; background: #f0f1ec; color: var(--estate-muted); border-radius: 100px; font-size: 8px; }
.estate-badge i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.estate-filled .estate-badge { background: var(--estate-accent-soft); color: var(--estate-accent); }
.estate-filled .estate-badge.is-listed { background: var(--estate-support-soft); color: var(--estate-support); }
.estate-footnote { position: absolute; bottom: 12px; left: 30px; right: 30px; font-size: 9px; color: var(--estate-muted); display: flex; justify-content: space-between; }
.estate-target { position: relative; isolation: isolate; }
.estate-state { position: absolute; inset: 0; }
.estate-filled { opacity: 0; }
.estate-outline { position: absolute; inset: 0; z-index: 5; border: 1px solid #1681f4; opacity: 0; pointer-events: none; }
.estate-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 3; }
.real-data-demo.is-filled .estate-placeholder { opacity: 0; }
.real-data-demo.is-filled .estate-filled { opacity: 1; }