:root {
  color-scheme: light;
  --demo-page-bg: #f3efe4;
}

@font-face {
  font-family: "EGG GT Super Local";
  src: local("GT Super Ds Trial"), local("GT Super Display Trial"), local("GT Super"), local("GT Super Display");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--demo-page-bg);
  overflow: hidden;
}

.demo-story {
  --demo-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --demo-font-serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  --demo-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --demo-bg: #eef0e9;
  --demo-panel: #f8f5ed;
  --demo-panel-strong: #fffdf7;
  --demo-ink: #17251f;
  --demo-muted: #657168;
  --demo-line: #cbd1c8;
  --demo-line-strong: #9ca79e;
  --demo-accent: #c95f36;
  --demo-accent-dark: #8b3d22;
  --demo-observed: #527b5f;
  --demo-prior: #2f7f8b;
  --demo-good: #4f765b;
  --demo-acceptable: #c7932d;
  --demo-poor: #c66435;
  --demo-critical: #a63e31;
  --demo-neutral-3d: #c3b8a3;
  --demo-opening: #bcd5d3;
  --demo-roof: #70584b;
  --demo-ground: #8e9488;
  --demo-zone-heated: #ce6841;
  --demo-zone-reduced: #d7a33c;
  --demo-zone-unheated: #4c8290;
  --demo-env-moisture: #367d7a;
  --demo-env-solar: #d29a35;
  --demo-env-rain: #426b8d;
  --demo-condition-high: #4b7959;
  --demo-condition-watch: #a8a84e;
  --demo-condition-mid: #d49a37;
  --demo-condition-poor: #c66435;
  --demo-condition-low: #b34532;
  --demo-delta-low: #d5ddd6;
  --demo-delta-high: #287a68;
  --demo-on-accent: #fffaf1;
  --demo-black: #000000;
  --demo-light-sky: #faf8ef;
  --demo-light-ground: #6c756b;
  --demo-light-sun: #fff3db;
  --demo-light-fill: #bed0d6;
  --demo-opening-emissive: #13221f;
  --demo-edge-stroke: #26332d;
  --demo-stage-a: #dae2d9;
  --demo-stage-b: #eef0e9;
  --demo-stage-c: #d0d8d0;
  --demo-stage-glow: rgba(255, 255, 255, 0.82);
  --demo-glass-panel: rgba(248, 245, 237, 0.82);
  --demo-glass-panel-light: rgba(248, 245, 237, 0.74);
  --demo-glass-panel-strong: rgba(248, 245, 237, 0.96);
  --demo-tooltip-bg: rgba(255, 253, 247, 0.96);
  --demo-border-quiet: rgba(23, 37, 31, 0.15);
  --demo-border-soft: rgba(23, 37, 31, 0.14);
  --demo-border-medium: rgba(23, 37, 31, 0.24);
  --demo-border-swatch: rgba(23, 37, 31, 0.22);
  --demo-white-wash: rgba(255, 255, 255, 0.34);
  --demo-shadow-color: rgba(28, 39, 32, 0.14);
  --demo-shadow-quiet: rgba(23, 37, 31, 0.08);
  --demo-transparent: transparent;
  --demo-solution-before: #7d8980;
  --demo-solution-after: #c95f36;
  --demo-series-walls: #c95f36;
  --demo-warning-bg: rgba(201, 95, 54, 0.09);
  --demo-shadow: 0 22px 60px var(--demo-shadow-color);
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: var(--demo-bg);
  color: var(--demo-ink);
  font-family: var(--demo-font-sans);
  outline: none;
}

.demo-story[data-skin="egg"] {
  --demo-font-serif: "EGG GT Super Local", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --demo-bg: #f3efe4;
  --demo-panel: #f3efe4;
  --demo-panel-strong: #fbf8f0;
  --demo-ink: #17150f;
  --demo-muted: #8a8578;
  --demo-line: #ddd6c6;
  --demo-line-strong: #d8d2c2;
  --demo-accent: #e8502a;
  --demo-accent-dark: #b83a1c;
  --demo-on-accent: #fffaf2;
  --demo-opening: #d9d2c3;
  --demo-light-sky: #fff9ef;
  --demo-light-ground: #cfc6b2;
  --demo-light-sun: #fff7e7;
  --demo-light-fill: #e6d7c2;
  --demo-opening-emissive: #2b2821;
  --demo-edge-stroke: #342f26;
  --demo-stage-a: #faf7ef;
  --demo-stage-b: #f8f4ea;
  --demo-stage-c: #f5f0e5;
  --demo-stage-glow: rgba(255, 253, 247, 0.9);
  --demo-glass-panel: rgba(248, 244, 234, 0.86);
  --demo-glass-panel-light: rgba(248, 244, 234, 0.78);
  --demo-glass-panel-strong: rgba(251, 248, 240, 0.97);
  --demo-tooltip-bg: rgba(251, 248, 240, 0.98);
  --demo-border-quiet: rgba(23, 21, 15, 0.14);
  --demo-border-soft: rgba(23, 21, 15, 0.13);
  --demo-border-medium: rgba(23, 21, 15, 0.22);
  --demo-border-swatch: rgba(23, 21, 15, 0.2);
  --demo-white-wash: rgba(255, 253, 247, 0.48);
  --demo-shadow-color: rgba(55, 46, 31, 0.13);
  --demo-shadow-quiet: rgba(55, 46, 31, 0.08);
  --demo-warning-bg: rgba(232, 80, 42, 0.08);
}

.demo-story button,
.demo-story select,
.demo-story input { font: inherit; }

.demo-shell {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
  height: 100%;
}

.demo-viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 74% 15%, var(--demo-stage-glow), var(--demo-transparent) 26%),
    linear-gradient(150deg, var(--demo-stage-a) 0%, var(--demo-stage-b) 50%, var(--demo-stage-c) 100%);
}

.demo-viewport.is-dragging { cursor: grabbing; }
.demo-canvas-wrap, .demo-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-canvas-wrap canvas { display: block; }

.demo-brand {
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 5;
  width: min(430px, calc(100% - 64px));
  pointer-events: none;
}

.demo-kicker,
.demo-scene-eyebrow,
.demo-panel-label,
.demo-card-kicker {
  margin: 0;
  color: var(--demo-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.demo-story[data-skin="egg"] .demo-kicker,
.demo-story[data-skin="egg"] .demo-scene-eyebrow,
.demo-story[data-skin="egg"] .demo-panel-label,
.demo-story[data-skin="egg"] .demo-card-kicker { color: var(--demo-accent); }

.demo-brand h1 {
  margin: 8px 0 0;
  font-family: var(--demo-font-serif);
  font-size: clamp(28px, 3.1vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.demo-entry-status {
  position: absolute;
  left: 32px;
  bottom: 30px;
  z-index: 7;
  width: min(360px, calc(100% - 64px));
  padding: 12px 14px;
  border: 1px solid var(--demo-border-quiet);
  border-radius: 3px;
  background: var(--demo-glass-panel);
  box-shadow: 0 7px 20px var(--demo-shadow-quiet);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(12px);
}

.demo-entry-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.demo-entry-track {
  height: 3px;
  overflow: hidden;
  background: var(--demo-border-quiet);
}

.demo-entry-fill {
  width: 0;
  height: 100%;
  background: var(--demo-accent);
  transition: width 520ms ease;
}

.demo-entry-status.is-complete .demo-entry-fill {
  background: var(--demo-observed);
}

.demo-entry-copy {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--demo-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-mode-strip {
  position: absolute;
  top: 28px;
  right: 26px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--demo-border-quiet);
  border-radius: 3px;
  background: var(--demo-glass-panel);
  box-shadow: 0 7px 20px var(--demo-shadow-quiet);
  color: var(--demo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.demo-mode-strip::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--demo-observed);
  content: "";
}

.demo-story[data-skin="egg"] .demo-mode-strip {
  border-color: var(--demo-line-strong);
  color: var(--demo-accent);
}

.demo-story[data-skin="egg"] .demo-mode-strip::before { background: var(--demo-accent); }

.demo-view-legend {
  position: absolute;
  top: 116px;
  right: 26px;
  z-index: 7;
  display: none;
  width: min(310px, calc(100% - 52px));
  padding: 11px 12px;
  border: 1px solid var(--demo-border-soft);
  border-radius: 3px;
  background: var(--demo-glass-panel-strong);
  box-shadow: 0 7px 20px var(--demo-shadow-quiet);
  color: var(--demo-ink);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.demo-view-legend.is-visible { display: block; }
.demo-view-legend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10px; text-transform: uppercase; }
.demo-view-legend-head b { letter-spacing: 0.08em; }
.demo-view-legend-head span { color: var(--demo-muted); font-size: 9px; letter-spacing: 0.04em; }
.demo-condition-ramp, .demo-delta-ramp { position: relative; height: 9px; margin-top: 8px; border: 1px solid var(--demo-border-soft); }
.demo-condition-ramp { background: linear-gradient(90deg, var(--demo-condition-low) 0 30%, var(--demo-condition-poor) 30% 45%, var(--demo-condition-mid) 45% 65%, var(--demo-condition-watch) 65% 80%, var(--demo-condition-high) 80% 100%); }
.demo-delta-ramp { background: linear-gradient(90deg, var(--demo-delta-low), var(--demo-delta-high)); }
.demo-delta-ramp i { position: absolute; top: -4px; width: 2px; height: 15px; transform: translateX(-1px); background: var(--demo-ink); }
.demo-ramp-ticks, .demo-ramp-range { display: flex; justify-content: space-between; margin-top: 3px; color: var(--demo-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.demo-ramp-bands { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 7px; color: var(--demo-muted); font-size: 8px; }
.demo-ramp-note { margin-top: 7px; color: var(--demo-muted); font-size: 9px; line-height: 1.35; }
.demo-focus-ramp { display: grid; grid-template-columns: repeat(3, 1fr); height: 9px; margin-top: 8px; border: 1px solid var(--demo-border-soft); }
.demo-focus-ramp i:nth-child(1) { background: var(--demo-critical); }
.demo-focus-ramp i:nth-child(2) { background: var(--demo-poor); }
.demo-focus-ramp i:nth-child(3) { background: var(--demo-neutral-3d); }

.demo-ab-chip {
  position: absolute;
  top: 76px;
  right: 26px;
  z-index: 8;
  display: none;
  padding: 7px 10px;
  border: 1px solid var(--demo-line-strong);
  border-left: 4px solid var(--demo-solution-before);
  background: var(--demo-glass-panel-strong);
  color: var(--demo-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.demo-ab-chip.is-visible { display: block; }
.demo-ab-chip.is-after { border-left-color: var(--demo-delta-high); }
.demo-element-badges { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.demo-element-badge { position: absolute; display: grid; gap: 1px; min-width: 122px; padding: 6px 8px; transform: translate(-50%, -50%); border: 1px solid var(--demo-border-medium); border-left: 3px solid var(--demo-delta-high); background: var(--demo-glass-panel-strong); box-shadow: 0 5px 14px var(--demo-shadow-quiet); color: var(--demo-ink); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.25; backdrop-filter: blur(8px); }
.demo-element-badge b { font-size: 9px; letter-spacing: 0.06em; }
.demo-element-badge span { color: var(--demo-muted); }

@keyframes demo-state-pop {
  from { opacity: 0.15; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes demo-overlay-slide {
  from { opacity: 0.2; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.demo-viewport.is-state-transitioning .demo-element-badge { animation: demo-state-pop 480ms ease-out both; }
.demo-viewport.is-state-transitioning .demo-view-legend,
.demo-viewport.is-state-transitioning .demo-ab-chip { animation: demo-overlay-slide 420ms ease-out both; }

.demo-stage-prompt {
  position: absolute;
  right: 24px;
  bottom: 92px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--demo-border-soft);
  border-radius: 3px;
  background: var(--demo-glass-panel);
  color: var(--demo-muted);
  font-size: 11px;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.demo-stage-prompt b { color: var(--demo-ink); }

.demo-tooltip {
  position: absolute;
  z-index: 12;
  display: none;
  width: min(350px, calc(100% - 32px));
  max-height: min(510px, calc(100% - 180px));
  overflow: auto;
  padding: 15px;
  border: 1px solid var(--demo-line-strong);
  border-radius: 3px;
  background: var(--demo-tooltip-bg);
  box-shadow: var(--demo-shadow);
  color: var(--demo-ink);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.demo-tooltip.is-visible { display: block; }
.demo-tooltip h3 { margin: 0 0 2px; font-family: var(--demo-font-serif); font-size: 20px; font-weight: 550; }
.demo-tooltip-meta { color: var(--demo-muted); font-size: 12px; }
.demo-moisture-badge { display: grid; gap: 3px; margin-top: 11px; padding: 8px 9px; border-left: 3px solid var(--demo-env-moisture); background: var(--demo-white-wash); }
.demo-moisture-badge b { color: var(--demo-env-moisture); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.demo-moisture-badge span { color: var(--demo-muted); font-size: 10px; line-height: 1.4; }

.demo-layer-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 11px;
}

.demo-layer-table th,
.demo-layer-table td { padding: 6px 4px; border-top: 1px solid var(--demo-line); text-align: left; vertical-align: top; }
.demo-layer-table th { color: var(--demo-muted); font-weight: 700; }
.demo-layer-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.demo-variant-summary { display: grid; grid-template-columns: 105px 1fr; gap: 7px 10px; margin: 13px 0 0; font-size: 11px; line-height: 1.35; }
.demo-variant-summary dt { color: var(--demo-muted); }
.demo-variant-summary dd { margin: 0; }

.demo-nav {
  position: absolute;
  z-index: 7;
  bottom: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.demo-nav button {
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--demo-border-medium);
  border-radius: 2px;
  background: var(--demo-glass-panel-light);
  color: var(--demo-muted);
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.demo-nav button:hover,
.demo-nav button:focus-visible { background: var(--demo-panel-strong); color: var(--demo-ink); transform: translateY(-2px); outline: 2px solid var(--demo-accent); outline-offset: 2px; }
.demo-nav button[aria-current="step"] { border-color: var(--demo-ink); background: var(--demo-ink); color: var(--demo-panel-strong); }

.demo-nav-note { margin-left: 8px; color: var(--demo-muted); font-size: 11px; }

.demo-panel {
  position: relative;
  z-index: 4;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--demo-line-strong);
  background: var(--demo-panel);
}

.demo-panel-inner {
  height: calc(100% - 54px);
  overflow-y: auto;
  padding: clamp(28px, 4vh, 48px) clamp(26px, 3vw, 48px) 40px;
  scrollbar-color: var(--demo-line-strong) var(--demo-transparent);
}

.demo-panel-head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--demo-line);
}

.demo-scene-title {
  margin: 8px 0 10px;
  font-family: var(--demo-font-serif);
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.demo-scene-title em {
  color: var(--demo-accent);
  font-style: normal;
}

.demo-story[data-skin="egg"] .demo-scene-title em {
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.demo-lede { margin: 0; max-width: 47ch; color: var(--demo-muted); font-size: 14px; line-height: 1.55; }
.demo-section { padding: 24px 0; border-bottom: 1px solid var(--demo-line); }
.demo-section:last-child { border-bottom: 0; }
.demo-section h3 { margin: 7px 0 10px; font-family: var(--demo-font-serif); font-size: 24px; font-weight: 550; letter-spacing: -0.02em; }
.demo-section p { margin: 8px 0 0; color: var(--demo-muted); font-size: 13px; line-height: 1.52; }

.demo-legend { display: grid; gap: 10px; margin-top: 14px; }
.demo-legend-row { display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.demo-swatch { width: 11px; height: 11px; border: 1px solid var(--demo-border-swatch); background: var(--swatch); }
.demo-legend-row small { color: var(--demo-muted); font-variant-numeric: tabular-nums; }

.demo-inspector {
  min-height: 118px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--demo-line);
  background: var(--demo-panel-strong);
}

.demo-inspector h4 { margin: 0 0 6px; font-size: 14px; }
.demo-inspector dl { display: grid; grid-template-columns: 94px 1fr; gap: 5px 10px; margin: 0; font-size: 11px; }
.demo-inspector dt { color: var(--demo-muted); }
.demo-inspector dd { margin: 0; }

.demo-source-list { display: grid; gap: 0; margin-top: 12px; }
.demo-source-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--demo-line); font-size: 11px; }
.demo-source-row span:last-child { color: var(--demo-muted); text-align: right; }

.demo-segmented { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.demo-segmented button,
.demo-action,
.demo-small-button {
  border: 1px solid var(--demo-line-strong);
  border-radius: 2px;
  background: var(--demo-transparent);
  color: var(--demo-ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  transition: background 150ms ease, color 150ms ease;
}

.demo-segmented button { padding: 8px 10px; }
.demo-segmented button:hover,
.demo-segmented button:focus-visible,
.demo-segmented button[aria-pressed="true"] { background: var(--demo-ink); color: var(--demo-panel-strong); outline: none; }

.demo-player { margin-top: 15px; }
.demo-current-date { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.demo-current-date b { color: var(--demo-ink); font-family: var(--demo-font-serif); font-size: 25px; font-weight: 550; font-variant-numeric: tabular-nums; }
.demo-current-date span { color: var(--demo-muted); font-size: 9px; text-align: right; }
.demo-player-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.demo-small-button { min-width: 42px; padding: 7px 9px; }
.demo-small-button:hover, .demo-small-button:focus-visible { background: var(--demo-ink); color: var(--demo-panel-strong); outline: none; }
.demo-player input[type="range"], .demo-timeline input[type="range"] { width: 100%; accent-color: var(--demo-accent); }
.demo-year-ticks { position: relative; height: 21px; margin: 3px 2px 0 54px; border-top: 1px solid var(--demo-line); }
.demo-year-ticks span { position: absolute; top: 3px; transform: translateX(-50%); color: var(--demo-muted); font-size: 7px; font-variant-numeric: tabular-nums; }
.demo-year-ticks span:first-child { transform: none; }
.demo-year-ticks span:last-child { transform: translateX(-100%); }
.demo-weather-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.demo-weather-stat { padding: 8px; border-left: 2px solid var(--demo-line-strong); background: var(--demo-white-wash); }
.demo-weather-stat b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.demo-weather-stat span { color: var(--demo-muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }

.demo-zone-list { display: grid; gap: 8px; margin-top: 12px; }
.demo-zone-row { display: grid; grid-template-columns: 1fr minmax(128px, auto); align-items: center; gap: 12px; font-size: 12px; }
.demo-zone-row select { width: 100%; padding: 7px 28px 7px 8px; border: 1px solid var(--demo-line-strong); border-radius: 2px; background: var(--demo-panel-strong); color: var(--demo-ink); }
.demo-assumption-note { padding-left: 11px; border-left: 2px solid var(--demo-prior); }

.demo-action {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border-color: var(--demo-accent-dark);
  background: var(--demo-accent);
  color: var(--demo-on-accent);
  font-size: 12px;
  text-transform: uppercase;
}

.demo-action:hover, .demo-action:focus-visible { background: var(--demo-accent-dark); outline: 2px solid var(--demo-accent-dark); outline-offset: 2px; }
.demo-action:disabled { cursor: default; opacity: 0.65; }
.demo-run-status { margin-top: 12px; }
.demo-progress-track { height: 5px; overflow: hidden; background: var(--demo-line); }
.demo-progress-fill { width: 0; height: 100%; background: var(--demo-observed); transition: width 480ms ease; }
.demo-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--demo-muted); font-size: 11px; }
.demo-result-ready { display: none; margin-top: 12px; padding: 10px; border: 1px solid var(--demo-observed); color: var(--demo-observed); font-size: 11px; font-weight: 750; }
.demo-result-ready.is-visible { display: block; }

.demo-timeline { margin-top: 13px; }
.demo-timeline-head { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.demo-year-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.demo-event-rail { position: relative; height: 18px; margin: 4px 3px 0; border-top: 1px solid var(--demo-line-strong); }
.demo-event-mark { position: absolute; top: -3px; width: 2px; height: 8px; background: var(--demo-critical); }
.demo-event-note { color: var(--demo-muted); font-size: 10px; }

.demo-chart { margin-top: 15px; }
.demo-chart svg { display: block; width: 100%; height: 170px; overflow: visible; }
.demo-chart-grid { stroke: var(--demo-line); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.demo-chart-grid.is-threshold { stroke: var(--demo-muted); stroke-dasharray: 5 4; stroke-width: 1; }
.demo-chart-label { fill: var(--demo-muted); font-family: var(--demo-font-sans); font-size: 9px; }
.demo-chart-line { fill: none; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.demo-chart-line--walls { stroke: var(--demo-series-walls); }
.demo-chart-line--roof { stroke: var(--demo-observed); }
.demo-chart-line--ground { stroke: var(--demo-prior); }
.demo-chart-line--garage { stroke: var(--demo-muted); }
.demo-chart-range { fill: var(--demo-muted); opacity: 0.12; }
.demo-chart-annotation { font-family: var(--demo-font-sans); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.demo-chart-annotation--neutral { fill: var(--demo-muted); }
.demo-chart-annotation--walls { fill: var(--demo-series-walls); }
.demo-chart-annotation--roof { fill: var(--demo-observed); }
.demo-chart-annotation--ground { fill: var(--demo-prior); }
.demo-chart-annotation--garage { fill: var(--demo-muted); }
.demo-chart-annotation--before { fill: var(--demo-solution-before); }
.demo-chart-annotation--after { fill: var(--demo-solution-after); }
.demo-chart-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; color: var(--demo-muted); font-size: 10px; }
.demo-chart-legend span::before { display: inline-block; width: 13px; height: 2px; margin: 0 5px 3px 0; background: var(--line); content: ""; }

.demo-u-callout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
  padding: 17px;
  border: 1px solid var(--demo-line-strong);
  background: var(--demo-panel-strong);
}

.demo-u-value b { display: block; font-family: var(--demo-font-serif); font-size: 30px; font-weight: 550; line-height: 1; }
.demo-u-value span { color: var(--demo-muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-u-arrow { padding-bottom: 6px; color: var(--demo-accent); font-size: 22px; }
.demo-u-detail { margin-top: 9px; color: var(--demo-muted); font-size: 10px; line-height: 1.45; }

.demo-comfort-list { display: grid; gap: 6px; margin-top: 13px; }
.demo-comfort-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; width: 100%; padding: 9px; border: 1px solid var(--demo-line); background: var(--demo-panel-strong); color: var(--demo-ink); text-align: left; cursor: help; }
.demo-comfort-row:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }
.demo-comfort-row small { color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-class { min-width: 68px; padding: 4px 6px; border: 1px solid currentColor; color: var(--class-color); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.demo-rule-detail { min-height: 54px; margin-top: 8px; padding: 10px; border-left: 2px solid var(--demo-accent); background: var(--demo-white-wash); color: var(--demo-muted); font-size: 10px; line-height: 1.5; }

.demo-solution-chart { margin-top: 15px; }
.demo-solution-chart svg { display: block; width: 100%; height: 145px; }
.demo-solution-line { fill: none; vector-effect: non-scaling-stroke; }
.demo-solution-line--before { stroke: var(--demo-solution-before); stroke-width: 2.2; stroke-dasharray: 6 4; }
.demo-solution-line--after { stroke: var(--demo-solution-after); stroke-width: 3.4; opacity: 1; }
.demo-solution-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--demo-muted); font-size: 10px; }
.demo-solution-chart-legend span::before { display: inline-block; width: 14px; height: 2px; margin: 0 5px 3px 0; content: ""; }
.demo-before-mark::before { background: var(--demo-solution-before); }
.demo-after-mark::before { background: var(--demo-solution-after); }
.demo-solution-chart p { margin-top: 7px; font-size: 10px; }
.demo-thermal-headline { display: grid; gap: 3px; margin: 12px 0; padding: 12px; border-left: 4px solid var(--demo-good); background: var(--demo-white-wash); }
.demo-thermal-headline span { color: var(--demo-muted); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-thermal-headline b { font-family: var(--demo-font-serif); font-size: 20px; font-weight: 550; }
.demo-thermal-headline small { color: var(--demo-muted); font-size: 9px; }
.demo-slope-note { display: grid; gap: 3px; margin-top: 9px; padding: 8px 10px; border-left: 2px solid var(--demo-solution-before); background: var(--demo-white-wash); font-size: 9px; line-height: 1.4; }
.demo-slope-note span { color: var(--demo-muted); }
.demo-wear-honesty { padding-top: 7px; border-top: 1px solid var(--demo-line); color: var(--demo-muted); line-height: 1.45; }

.demo-ranking-note { margin: 12px 0 14px; padding: 11px; border-left: 3px solid var(--demo-critical); background: var(--demo-warning-bg); color: var(--demo-muted); font-size: 11px; line-height: 1.45; }
.demo-ranking-note.is-target { border-left-color: var(--demo-good); }
.demo-solution-list { display: grid; gap: 9px; }
.demo-solution-card { border: 1px solid var(--demo-line); background: var(--demo-panel-strong); }
.demo-solution-card.is-selected { border-color: var(--demo-ink); box-shadow: inset 3px 0 0 var(--demo-accent); }
.demo-solution-select { display: grid; grid-template-columns: 32px 1fr auto; align-items: start; gap: 9px; width: 100%; padding: 12px; border: 0; background: var(--demo-transparent); color: var(--demo-ink); text-align: left; cursor: pointer; }
.demo-solution-select:hover, .demo-solution-select:focus-visible { background: var(--demo-white-wash); outline: 2px solid var(--demo-accent); outline-offset: 1px; }
.demo-solution-select b { display: block; font-size: 12px; }
.demo-solution-select small { display: block; margin-top: 4px; color: var(--demo-muted); font-size: 10px; line-height: 1.4; }
.demo-solution-rank { color: var(--demo-muted); font-size: 11px; font-weight: 800; }
.demo-solution-body { display: none; padding: 0 12px 13px 53px; }
.demo-solution-card.is-selected .demo-solution-body { display: block; }
.demo-solution-body dl { display: grid; grid-template-columns: 70px 1fr; gap: 5px 9px; margin: 0; font-size: 10px; line-height: 1.4; }
.demo-solution-body dt { color: var(--demo-muted); }
.demo-solution-body dd { margin: 0; }
.demo-solution-body dd small { display: block; margin-top: 2px; color: var(--demo-muted); font-size: 9px; }
.demo-solution-body p { margin-top: 8px; font-size: 10px; }
.demo-solution-source { padding-top: 8px; border-top: 1px solid var(--demo-line); }
.demo-solution-material { color: var(--demo-ink) !important; }
.demo-solution-material-delta { padding: 8px; border-left: 2px solid var(--demo-env-moisture); background: var(--demo-white-wash); color: var(--demo-ink) !important; }
.demo-solution-warning { padding: 7px; border-left: 2px solid var(--demo-poor); background: var(--demo-warning-bg); color: var(--demo-ink) !important; }
.demo-target-note { margin-bottom: 9px; color: var(--demo-good); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-fine-print p { font-size: 10px; }

.demo-portfolio-formula { display: grid; gap: 5px; margin-top: 12px; padding: 10px; border-left: 3px solid var(--demo-accent); background: var(--demo-white-wash); }
.demo-portfolio-formula code { color: var(--demo-ink); font-size: 10px; line-height: 1.4; white-space: normal; }
.demo-portfolio-formula span { color: var(--demo-muted); font-size: 9px; line-height: 1.4; }
.demo-axis-explainer { margin-top: 9px; color: var(--demo-muted); font-size: 10px; line-height: 1.45; }
.demo-portfolio-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.demo-portfolio-controls label { display: grid; gap: 4px; color: var(--demo-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.demo-portfolio-controls select { width: 100%; padding: 7px 26px 7px 8px; border: 1px solid var(--demo-line-strong); background: var(--demo-panel-strong); color: var(--demo-ink); font-size: 10px; text-transform: none; }
.demo-portfolio-selected { display: grid; gap: 3px; margin-top: 10px; padding: 10px; border: 1px solid var(--demo-line); background: var(--demo-panel-strong); font-size: 10px; }
.demo-portfolio-selected span { color: var(--demo-muted); line-height: 1.4; }
.demo-portfolio-axis-legends { display: grid; gap: 9px; margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--demo-line-strong); background: var(--demo-white-wash); color: var(--demo-muted); font-size: 9px; }
.demo-portfolio-axis-legends > div > b { color: var(--demo-ink); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }
.demo-portfolio-wear-legend .demo-condition-ramp { margin-top: 6px; }
.demo-portfolio-class-legend { display: flex; flex-wrap: wrap; gap: 7px 11px; margin-top: 6px; color: var(--demo-muted); font-size: 9px; }
.demo-portfolio-class-legend span { display: inline-flex; align-items: center; gap: 5px; }
.demo-portfolio-class-legend i { width: 9px; height: 9px; background: var(--portfolio-color); }
.demo-portfolio-class-legend small { color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.demo-portfolio-card { display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto; align-items: center; gap: 5px 7px; min-width: 0; padding: 9px; border: 1px solid var(--demo-line); background: var(--demo-panel-strong); color: var(--demo-ink); text-align: left; cursor: pointer; }
.demo-portfolio-card:hover, .demo-portfolio-card:focus-visible { border-color: var(--demo-ink); outline: 2px solid var(--demo-accent); outline-offset: 1px; }
.demo-portfolio-card.is-selected { border-color: var(--demo-ink); box-shadow: inset 3px 0 0 var(--portfolio-color); }
.demo-portfolio-card.is-focus-need { border-left: 4px solid var(--portfolio-color); }
.demo-portfolio-card.is-focus-muted { opacity: 0.48; filter: grayscale(1); }
.demo-portfolio-rank { color: var(--demo-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.demo-house-glyph { position: relative; width: 18px; height: 13px; margin-top: 5px; background: var(--portfolio-color); }
.demo-house-glyph::before { position: absolute; right: -1px; bottom: 100%; left: -1px; width: 0; height: 0; border-right: 10px solid var(--demo-transparent); border-bottom: 7px solid var(--portfolio-color); border-left: 10px solid var(--demo-transparent); content: ""; }
.demo-house-glyph i { position: absolute; right: 3px; bottom: 0; width: 4px; height: 7px; background: var(--demo-panel-strong); }
.demo-portfolio-card b { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.demo-thermal-chip { display: grid; justify-items: end; padding: 4px 6px; border-left: 3px solid var(--portfolio-color); background: var(--demo-white-wash); color: var(--demo-muted); font-size: 7px; line-height: 1.2; text-align: right; }
.demo-thermal-chip b { color: var(--demo-ink); font-size: 10px; }
.demo-wear-block { grid-column: 3 / -1; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 7px; padding: 5px 0 3px; }
.demo-wear-block > b { color: var(--wear-color); font-family: var(--demo-font-serif); font-size: 23px; font-variant-numeric: tabular-nums; line-height: 1; }
.demo-axis-label { position: relative; color: var(--demo-muted); font-size: 8px; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; }
.demo-axis-label::after { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; display: none; width: max-content; max-width: 245px; padding: 5px 7px; border: 1px solid var(--demo-line-strong); background: var(--demo-tooltip-bg); box-shadow: var(--demo-shadow-quiet); color: var(--demo-ink); content: attr(data-axis-tip); font-size: 9px; font-weight: 500; letter-spacing: normal; line-height: 1.3; text-transform: none; }
.demo-axis-label:hover::after { display: block; }
.demo-card-condition-ramp { position: relative; grid-column: 1 / -1; height: 5px; background: linear-gradient(90deg, var(--demo-condition-low) 0 30%, var(--demo-condition-poor) 30% 45%, var(--demo-condition-mid) 45% 65%, var(--demo-condition-watch) 65% 80%, var(--demo-condition-high) 80% 100%); }
.demo-card-condition-ramp em { position: absolute; top: -2px; left: var(--wear-position); width: 2px; height: 9px; transform: translateX(-1px); background: var(--demo-ink); }
.demo-portfolio-card small { grid-column: 3 / -1; min-width: 0; overflow: hidden; color: var(--demo-muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.demo-owner-steps { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: owner-step; }
.demo-owner-steps li { display: grid; grid-template-columns: 32px 95px 1fr; gap: 10px; align-items: start; padding: 13px 0; border-top: 1px solid var(--demo-line); counter-increment: owner-step; }
.demo-owner-steps li::before { color: var(--demo-accent); font-family: var(--demo-font-serif); font-size: 22px; content: "0" counter(owner-step); }
.demo-owner-steps b { font-size: 12px; }
.demo-owner-steps span { color: var(--demo-muted); font-size: 11px; line-height: 1.45; }
.demo-owner-offer { padding-left: 14px; border-left: 4px solid var(--demo-accent); }
.demo-contact-placeholder { margin-top: 12px; padding: 17px; border: 1px dashed var(--demo-line-strong); color: var(--demo-muted); font-size: 12px; text-align: center; }
.demo-beat-switch { margin: 12px 0 3px; }
.demo-focus-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; padding: 10px; border-left: 3px solid var(--demo-critical); background: var(--demo-white-wash); color: var(--demo-muted); font-size: 9px; }
.demo-focus-legend span { display: inline-flex; align-items: center; gap: 5px; }
.demo-focus-legend i { width: 10px; height: 10px; }
.demo-focus-legend i.is-critical { background: var(--demo-critical); }
.demo-focus-legend i.is-poor { background: var(--demo-poor); }
.demo-focus-legend i.is-neutral { background: var(--demo-neutral-3d); }
.demo-focus-legend small { flex-basis: 100%; color: var(--demo-muted); }
.demo-finance-models { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.demo-finance-models article { padding: 10px; border-top: 3px solid var(--demo-observed); background: var(--demo-white-wash); }
.demo-finance-models b { font-size: 10px; }
.demo-finance-models p { margin: 6px 0 0; color: var(--demo-muted); font-size: 10px; line-height: 1.45; }
.demo-ambition-block { padding-left: 14px; border-left: 4px solid var(--demo-prior); }
.demo-ambition-block > b { display: block; margin-top: 9px; font-size: 11px; }
.demo-optimizer-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.demo-optimizer-strip span { display: grid; min-height: 54px; place-items: center; padding: 7px 4px; border-top: 3px solid var(--demo-good); background: var(--demo-white-wash); font-size: 8px; line-height: 1.3; text-align: center; text-transform: uppercase; }
.demo-placeholder { display: inline-block; padding: 3px 6px; border: 1px dashed var(--demo-critical); background: var(--demo-warning-bg); color: var(--demo-critical); font-weight: 800; letter-spacing: 0.05em; }

.demo-preparation { display: grid; min-height: 52vh; align-content: center; }
.demo-preparation-mark { width: 44px; height: 4px; margin-bottom: 18px; background: var(--demo-accent); }
.demo-preparation p { max-width: 30ch; font-family: var(--demo-font-serif); font-size: 26px; line-height: 1.15; color: var(--demo-ink); }

.demo-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  display: flex;
  min-height: 54px;
  align-items: center;
  padding: 9px 24px;
  border-top: 1px solid var(--demo-line-strong);
  background: var(--demo-glass-panel-strong);
  justify-content: space-between;
  gap: 16px;
}

.demo-honesty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--demo-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.demo-honesty-chip::before { width: 7px; height: 7px; border: 1px solid var(--demo-accent-dark); background: var(--demo-accent); content: ""; }

.demo-page-marker {
  margin-left: auto;
  color: var(--demo-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 980px) {
  body { overflow: auto; }
  .demo-story { height: auto; min-height: 100vh; overflow: visible; }
  .demo-shell { grid-template-columns: 1fr; grid-template-rows: minmax(560px, 64vh) auto; }
  .demo-panel { min-height: 620px; border-top: 1px solid var(--demo-line-strong); border-left: 0; }
  .demo-panel-inner { height: auto; padding-bottom: 92px; }
  .demo-footer { position: fixed; }
}

@media (max-width: 620px) {
  .demo-story { min-height: 620px; }
  .demo-shell { grid-template-rows: 540px auto; }
  .demo-brand { top: 20px; left: 20px; width: calc(100% - 40px); }
  .demo-entry-status { display: none; }
  .demo-mode-strip { top: 118px; right: auto; left: 20px; }
  .demo-nav { bottom: 22px; left: 20px; }
  .demo-nav-note, .demo-stage-prompt { display: none; }
  .demo-panel-inner { padding: 28px 20px 96px; }
  .demo-footer { padding: 9px 14px; }
  .demo-honesty-chip { font-size: 9px; }
  .demo-page-marker { font-size: 8px; }
  .demo-portfolio-grid, .demo-portfolio-controls { grid-template-columns: 1fr; }
  .demo-owner-steps li { grid-template-columns: 28px 1fr; }
  .demo-owner-steps span { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-story *, .demo-story *::before, .demo-story *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}