.demo-hero { padding: 80px 24px 40px; text-align: center; }
.demo-hero-ct { max-width: 840px; margin: auto; }
.demo-hero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 650; line-height: 1.1; margin-bottom: 24px; text-wrap: balance; }
.ja .demo-hero h1 { line-height: 1.3; }
.lead { font-size: 19px; font-weight: 300; max-width: 700px; margin: auto; color: var(--tx2); line-height: 1.7; text-wrap: pretty; }
.demo-jumps { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.demo-jumps a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 9999px; background: var(--bg2); font-size: 14px; font-weight: 500; text-decoration: none; }
.demo-jumps a:hover { background: var(--bg3); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 24px 20px 16px; min-width: 0; overflow: hidden; }
.chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; min-height: 48px; }
.chart-title { font-size: 15px; font-weight: 600; }
.chart-card > .chart-title { margin: 0 4px 16px; min-height: 48px; display: flex; align-items: center; }
.toggle-group { display: inline-flex; border-radius: 9999px; background: var(--bg2); padding: 4px; }
.toggle-btn { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 9999px; color: var(--tx3); background: transparent; font-size: 12px; font-weight: 600; }
.toggle-btn.active { background: var(--card); color: var(--tx); }
.toggle-btn:hover { color: var(--tx); }
.select-wrap { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--tx2); }
.v-select { border: 0; border-radius: 9999px; background: var(--bg2); color: var(--tx); min-height: 44px; padding: 8px 12px; font-size: 13px; }
.chart-plot { min-height: 320px; }
.chart-error { padding: 64px 24px; color: var(--tx3); text-align: center; font-size: 14px; }
.code-card { margin-top: 24px; border-radius: 24px; border: 1px solid var(--border); overflow: hidden; }
.code-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg2); padding: 18px 24px; }
.code-lang { font-size: 13px; font-weight: 600; }
.code-file { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--tx3); }
.code-block { padding: 28px; background: var(--bg2); overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; white-space: pre; }
.code-block code { padding: 0; font: inherit; background: transparent; }
.hl-kw, .hl-fn, .hl-bi { color: var(--tx); font-weight: 600; }
.hl-str, .hl-num, .hl-dec, .hl-karg { color: var(--tx2); }
.hl-cmt { color: var(--tx3); }
@media (max-width: 960px) { .chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .demo-hero { padding: 56px 20px 24px; }
  .lead { font-size: 16px; }
  .chart-grid { gap: 16px; margin-top: 28px; }
  .chart-card { padding: 20px 8px 12px; }
  .chart-header, .chart-card > .chart-title { margin-left: 12px; margin-right: 12px; }
  .chart-title { font-size: 14px; }
  .code-block { padding: 20px; font-size: 11px; }
  .code-header { padding: 16px 20px; }
}

/* Source examples are secondary to the scientific results. */
.code-card summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 18px 24px; color: var(--tx2); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.code-card summary::-webkit-details-marker { display: none; }
.code-card summary::after { content: '+'; font-size: 22px; margin-left: 16px; }
.code-card[open] summary::after { content: '−'; }
.code-card summary:hover { background: var(--bg2); }
.code-note { padding: 0 24px 20px; color: var(--tx3); font-size: 13px; line-height: 1.7; }
.chart-plot { min-height: 420px; }

.chart-note { padding: 12px 4px 4px; color: var(--tx3); font-size: 12px; line-height: 1.6; }