body { padding-top: 48px !important; } .noscript-banner { display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 48px; padding: 0 24px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-bottom: 1px solid #f59e0b; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .noscript-banner__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #f59e0b; border-radius: 50%; flex-shrink: 0; } .noscript-banner__icon::before { content: '!'; color: white; font-weight: bold; font-size: 14px; } .noscript-banner__content { display: flex; align-items: center; gap: 8px; } .noscript-banner__title { font-size: 13px; font-weight: 600; color: #92400e; margin: 0; line-height: 1; } .noscript-banner__message { font-size: 12px; color: #78350f; margin: 0; line-height: 1; } @media (max-width: 640px) { .noscript-banner { height: 44px; padding: 0 16px; gap: 8px; } .noscript-banner__icon { width: 18px; height: 18px; } .noscript-banner__icon::before { font-size: 12px; } .noscript-banner__title { font-size: 12px; } .noscript-banner__message { font-size: 11px; } body { padding-top: 44px !important; } } header { top: 48px !important; } @media (max-width: 640px) { header { top: 44px !important; } } /* Force all framer-motion elements to be visible when JS is disabled */ * { opacity: 1 !important; transform: none !important; }

JavaScript is Disabled

Please enable JavaScript in your browser to use this application

Loading demo editor...

Bead Pattern Designer Demo