.demo-scroll-area { min-height: 180vh; padding: calc(var(--jaroni-header-height) + clamp(86px,10vw,150px)) 0 120px; color: white; background: radial-gradient(circle at 72% 8%,rgba(0,166,81,.28),transparent 28%),radial-gradient(circle at 25% 12%,rgba(227,30,36,.2),transparent 25%),linear-gradient(145deg,#101b24 0%,#06100b 45%,#111 100%); }
.demo-scroll-area::after { display: block; width: min(calc(100% - 40px),var(--container-width)); height: 1px; margin: 70vh auto 0; background: linear-gradient(90deg,var(--jaroni-yellow),var(--jaroni-red),var(--jaroni-green)); content: ""; opacity: .6; }
.demo-scroll-area span { color: var(--jaroni-yellow); font-size: var(--text-72); font-weight: var(--font-extrabold); letter-spacing: .18em; }
.demo-scroll-area h1 { max-width: 900px; margin: var(--space-20) 0; font-size: clamp(2.8rem,7vw,6.5rem); font-weight: var(--font-weight-850); letter-spacing: -.06em; line-height: .93; }
.demo-scroll-area p { color: rgba(255,255,255,.64); }
[data-component-status="loading"] { min-height: 20px; }
.component-error { margin: var(--space-8); padding: var(--space-10); color: var(--jaroni-red); background: white; border: 1px solid currentColor; }