/* Shared by the tiny HTML bootstrap and React's demo entry states. */
.demo-opening {
  --opening-bg: var(--show-bg, #101218);
  --opening-panel: var(--show-stage, #151821);
  --opening-ink: var(--show-text, #f4f3eb);
  --opening-muted: var(--show-muted, #a5a9ba);
  --opening-accent: var(--show-highlight, #c2f970);
  --opening-second: var(--show-secondary, #b8a3ff);
  box-sizing: border-box; color-scheme: dark; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 32px 18px;
  background: radial-gradient(ellipse at 65% 20%, #b8a3ff18, transparent 55%), var(--opening-bg);
  color: var(--opening-ink); font-family: 'Inter Variable', 'Avenir Next', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-align: center;
}
.demo-opening *, .demo-opening *::before, .demo-opening *::after { box-sizing: border-box; }
.demo-opening[hidden], .demo-opening [hidden] { display: none !important; }
html[data-demo-boot] body { margin: 0; background: #101218; }
.demo-opening[data-embedded="true"] { min-height: 480px; }
.demo-opening[data-inline="true"] { min-height: 360px; padding: 20px 0; background: none; }
.demo-opening__card { width: min(100%, 620px); padding: clamp(28px, 5vw, 54px) 24px; border: 1px solid #ffffff14; border-radius: 24px; background: var(--opening-panel); box-shadow: 0 20px 80px #0003; }
.demo-opening[data-inline="true"] .demo-opening__card { border: 0; padding: 12px 0; background: none; box-shadow: none; }
.demo-opening__eyebrow { margin: 0 0 22px; color: var(--opening-accent); font-size: 10px; line-height: 1.5; font-weight: 750; letter-spacing: 2px; text-transform: uppercase; }
.demo-opening__art { width: 180px; height: 180px; position: relative; display: grid; place-items: center; margin: 0 auto 28px; }
.demo-opening__orbit { position: absolute; inset: 5px; border: 1px solid #ffffff14; border-radius: 50%; transform: rotate(-18deg); }
.demo-opening__orbit::before { content: ''; position: absolute; inset: 18px; border: 1px dashed #ffffff20; border-radius: 50%; }
.demo-opening__orbit::after { content: ''; position: absolute; right: 5px; top: 37px; width: 7px; height: 7px; border-radius: 50%; background: var(--opening-accent); box-shadow: 0 0 16px #c2f97044; }
.demo-opening__ball { position: relative; width: 100px; height: 100px; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 11px, #17132c88 11px 13px), repeating-linear-gradient(90deg, transparent 0 11px, #17132c88 11px 13px), linear-gradient(135deg, #f3ebff, var(--opening-second) 45%, #554077); box-shadow: inset -12px -8px 20px #241a3e88, 0 12px 35px #b8a3ff18; transform: rotate(-13deg); animation: demo-opening-float 5s ease-in-out infinite; }
.demo-opening__ball::before { content: ''; position: absolute; width: 2px; height: 22px; left: calc(50% - 1px); top: -22px; background: #e8e0f5; }
.demo-opening__star { position: absolute; top: 16px; right: 12px; color: var(--opening-accent); font-size: 34px; line-height: 1; }
.demo-opening__title { font-size: clamp(27px, 4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -1.3px; margin: 0 0 15px; overflow-wrap: anywhere; }
.demo-opening__description { max-width: 380px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: var(--opening-muted); }
.demo-opening__dots { display: flex; justify-content: center; align-items: center; gap: 7px; height: 16px; margin: 28px 0 0; }
.demo-opening__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--opening-accent); animation: demo-opening-beat 1.2s ease-in-out infinite; }
.demo-opening__dots i:nth-child(2) { animation-delay: .15s; }.demo-opening__dots i:nth-child(3) { animation-delay: .3s; }
.demo-opening__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.demo-opening__actions:empty { display: none; }
.demo-opening__button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 11px; border: 1px solid var(--show-accent, #c2f970); background: var(--show-accent, #c2f970); color: var(--show-accent-ink, #15200b); font: 750 13px/1.5 'Inter Variable', 'Segoe UI', sans-serif; cursor: pointer; text-decoration: none; }
.demo-opening__button:disabled { opacity: .55; cursor: default; }.demo-opening__button:focus-visible, .demo-opening a:focus-visible { outline: 3px solid var(--opening-second); outline-offset: 4px; }
.demo-opening__footer { margin: 24px auto 0; max-width: 420px; color: var(--opening-muted); font-size: 11px; line-height: 1.7; }
.demo-opening__footer a { color: inherit; text-decoration: underline; }
.demo-opening[data-error="true"] .demo-opening__ball, .demo-opening[data-error="true"] .demo-opening__dots { animation: none; }
.demo-opening[data-error="true"] .demo-opening__dots { display: none; }
.demo-entry-reveal { animation: demo-entry-reveal .18s ease-out; }
.demo-connection-error { padding: 16px; border: 1px solid #ffaaa455; border-radius: 12px; background: #ffaaa40a; font-size: 13px; line-height: 1.7; }
.demo-connection-error button { margin-top: 8px; min-height: 44px; text-decoration: underline; }
.demo-opening[data-motion="off"] *, .demo-opening[data-motion="off"] *::before, .show-root[data-motion="off"] .demo-entry-reveal { animation: none !important; }
@keyframes demo-opening-float { 0%, 100% { transform: translateY(0) rotate(-13deg); } 50% { transform: translateY(-7px) rotate(-9deg); } }
@keyframes demo-opening-beat { 0%, 70%, 100% { opacity: .35; transform: scale(.85); } 35% { opacity: 1; transform: scale(1.15); } }
@keyframes demo-entry-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .demo-opening { padding: 24px 14px; }.demo-opening__card { padding: 32px 20px; }.demo-opening__title { font-size: 28px; }.demo-opening__art { width: 160px; height: 160px; }.demo-opening__description { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .demo-opening *, .demo-opening *::before, .demo-entry-reveal { animation: none !important; } }