.demo-wrap {
  --text: #0b1322; --muted: #5b6678; --rule: rgba(11, 19, 34, 0.18); --bg: #fff; --hover: rgba(11, 19, 34, 0.05);
  --accent: #253b29; --radius: 10px; --step-lead: 1.2rem; --step-small: 0.9rem; --display: inherit;
  width: min(72rem, 100% - 48px); margin-inline: auto; padding: clamp(120px, 12vw, 168px) 0 clamp(56px, 7vw, 96px);
  color: var(--text);
}
.demo-wrap .crumbs { margin-bottom: 18px; }
.demo-wrap .art-title { max-width: 18ch; margin: 0 0 18px; }
.demo-intro { max-width: 62ch; margin: 0 0 28px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); }
.demo-wrap #demo { margin-top: 8px; }
.demo-key { max-width: 70ch; margin-top: 28px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.demo-back { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); }
.demo-back a { color: var(--text); text-underline-offset: 4px; }
.demo-wrap .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-wrap .btn, .demo-wrap .wn-btn { text-decoration: none; }
.demo-wrap .crumbs ol { color: rgba(11, 19, 34, 0.7); }
.demo-wrap .crumbs li + li::before { color: rgba(11, 19, 34, 0.35); }
.demo-wrap .crumbs a:hover { color: #0b1322; }
.demo-wrap .crumbs [aria-current] { color: #0b1322; }