.demo-page .page { max-width: 720px; padding: calc(24px + env(safe-area-inset-top)) 20px 32px; }
.demo-back { color: var(--accent); font-size: 14px; text-decoration: none; }
.demo-eyebrow { margin: 28px 0 12px; color: var(--text-muted); font-size: 12px; }
.demo-page h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; letter-spacing: -.03em; }
.demo-lead { margin: 16px 0 24px; color: var(--text-muted); line-height: 1.6; }
.demo-card { margin: 18px 0; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.demo-card h2 { font-size: 20px; margin: 0 0 14px; }
.demo-card p { font-size: 14px; line-height: 1.5; }
.demo-note { margin-top: 16px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.demo-card .btn-primary { margin-top: 16px; }
.demo-card pre { margin-top: 16px; overflow: auto; padding: 14px; border-radius: 12px; background: var(--bg); font-size: 11px; line-height: 1.7; white-space: pre; }
.demo-cta { display: block; text-align: center; text-decoration: none; margin-top: 24px; }

.demo-workspace { margin: 28px 0; }
.demo-workspace > .demo-note { margin-bottom: 20px; }
.demo-workspace #detail-view { padding-top: 0; }
#demo-reset { display: block; margin: 16px auto 0; }