/* Keep demo navigation consistent with existing invitation templates. */
@import url('../../fonts/lexend.css');
/* Hide imported guest-facing colour controls and their swatch panels. */
#sv-palette, #sc-palette, #sw-palette,
#sv-swatches, #sc-swatches, #sw-swatches { display:none !important; }
.sp-demobar { position:fixed; z-index:70; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); width:100%; max-width:448px; box-sizing:border-box; padding:0 64px 0 16px; transform:translateX(-50%); display:flex; gap:8px; pointer-events:none; }
.sp-demobar a { pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:36px; padding:0 14px; border-radius:999px; font:500 12.5px/1 'Lexend',system-ui,sans-serif; text-decoration:none; box-shadow:0 6px 18px #0002; }
.sp-demobar .iv-demobar__back { background:rgba(255,255,255,.92); color:#222; backdrop-filter:blur(8px); }
.sp-demobar .iv-demobar__back > [aria-hidden] { font:22px/1 Arial,sans-serif; }
.sp-demobar .iv-demobar__use { background:#4550e6; color:white; }
body:has(.sp-demobar) :is(.sv-tools,.sc-tools,.sw-tools) { bottom:68px; }
body:has(.sp-demobar) :is(.sv-scroll-hint,.sc-scroll-hint,.sw-scroll-hint) { bottom:68px; }
.iv-preview :is(.sv-tools,.sc-tools,.sw-tools,.sv-scroll-hint,.sc-scroll-hint,.sw-scroll-hint,.sp-demobar) { display:none !important; }
@media (max-width:360px) { .sp-demobar { padding-left:12px; gap:6px; } .sp-demobar a { padding:0 12px; } }