/* Galaxy Yin Yang — Cosmic Background Demo */
html, body { min-height: 100%; }
body { margin: 0; background: #050312; color: #f3efff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#galaxy-bg-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 20% 30%, #180b38 0%, #0c0824 50%, #050312 100%); }
.nebula-layer { position: absolute; inset: -8%; background: radial-gradient(ellipse at 70% 20%, rgba(138,43,226,.20) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(65,105,225,.17) 0%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(75,0,130,.14) 0%, transparent 70%); filter: blur(34px); animation: nebulaPulse 18s ease-in-out infinite alternate; }
#galaxy-stars-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.demo-content { position: relative; z-index: 1; box-sizing: border-box; width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: clamp(28px, 7vw, 76px) 0 64px; }
.demo-card { padding: clamp(20px, 4vw, 36px); border: 1px solid rgba(191,164,255,.22); border-radius: 24px; background: rgba(13,10,35,.64); box-shadow: 0 18px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.eyebrow { color: #bda5ff; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 12px 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1.03; }
p { color: #d2cbe8; line-height: 1.7; }
.demo-pill { display: inline-block; margin: 6px 6px 0 0; padding: 8px 12px; border: 1px solid rgba(171,145,255,.32); border-radius: 999px; color: #e9e1ff; background: rgba(105,67,190,.15); font-size: .88rem; }
.demo-button { margin-top: 18px; padding: 11px 16px; border: 1px solid #9476ef; border-radius: 12px; color: white; background: linear-gradient(120deg,#5736a4,#294d9b); font: inherit; cursor: pointer; }
.demo-button:focus-visible { outline: 3px solid #c5b6ff; outline-offset: 3px; }
.demo-status { font-size: .9rem; color: #c8b9f4; }
@keyframes nebulaPulse { 0% { transform: scale(1) translate3d(0,0,0); opacity: .72; } 50% { transform: scale(1.06) translate3d(1%,-1%,0); opacity: 1; } 100% { transform: scale(1.02) translate3d(-1%,1%,0); opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .nebula-layer { animation: none !important; } }
@media (max-width: 600px) { .demo-card { border-radius: 18px; } }