{"version":3,"file":"script_main.BdPD41Qp.mjs","names":["_Fragment","useState","startTransition","c","useRef","useMemo","useCallback","FramerAPI.useLocaleInfo","useRef","React.useId","React.createElement","MainLayout","Framer.PageRoot","Framer.lazy","Framer.useCurrentRoute","Framer.useLocaleInfo","Framer.useRouter","React.Fragment","React.memo","React.useCallback","React.useEffect","React.useRef","React.useState","React.useLayoutEffect","Framer.LazyValue","Framer.GracefullyDegradingErrorBoundary","Framer.PageEffectsProvider","Framer.patchRoutesForABTesting","Framer.inferInitialRouteFromPath","Framer.yieldToMain","React.startTransition","Framer.ErrorPlaceholder"],"sources":["https:/framerusercontent.com/modules/2dDVqS3SIQMrqwaq0x5q/x8pBElweyibIcdnqUgSc/Navigation_1.js","https:/framerusercontent.com/modules/yNGZXd3n49IUM1JNuPd0/pbSgT347ctZ6BEcDjDFe/L1JZKYXFv.js","framer:toplevel/main"],"sourcesContent":["// Needl site header.\n//\n// User request: redo the navigation bar — logo, Needl, Pricing, Help Center and\n// Download. Move Pricing and Help Center to the left, add a cool animation with a\n// little dropdown when you press Download, and add a language option (flag emoji,\n// then the language) for the site's nine languages. English (US) is the default.\n//\n// Layout: brand, then the links right beside it, then — on the right — the language\n// menu and the Download button. Under 720px the links move into the menu sheet and\n// the language button shows just the flag.\n//\n// Download: on a desktop (a real pointer), pressing it springs open a small panel —\n// the app, a QR code that \"scans in\", and a button to the App Store. On touch\n// devices it goes straight to the App Store: that's where you want to be on a phone.\n//\n// Languages: this uses Framer's own localization (Site Settings → Localization).\n// The menu lists the locales added there — each shown with its flag and native name\n// from LANGS — and switching calls Framer's setLocale, which moves to that locale's\n// URL. With only one locale set up, the menu stays hidden on the live site (it's\n// shown on the canvas so it can be designed around). Nav labels are translated here.\n//\n// Then: add a Features popover, most distinctive first — there are a lot of record\n// apps. Live Lyrics leads as a featured card (its lines roll like the real thing),\n// then Visualizers in Now Spinning, Ask AI, Siri & Shortcuts, and Apple Music &\n// Spotify. No page per feature: each item scrolls to its homepage section (/#listen,\n// /#ask-ai, /#more, /#discover — FeatureSpotlight and NeedlCarousel set those ids).\n// Desktop opens it on hover or click; phones get the same list in the menu sheet.\n// And make the header actually stay put while scrolling (see \"Pinning\" below).\n//\n// Then: Live Lyrics in Needl's colours (black and deep blues, not pink and purple);\n// Apple Music & Spotify as a plain item like the others, the two logos where the\n// icon goes; Visualizers described as what's spinning, synced with Live Lyrics; and\n// an \"Ideas\" link after Help Center, to Featurebase, for feature requests.\n//\n// Then: the Live Lyrics card moves, and picks up blue's complement — orange (Needl\n// blue sits at ~211° on the colour wheel, so its opposite is ~31°), with a touch of\n// red. Soft light drifts across near-black, like the lyrics screen over artwork.\n//\n// Two things used to go wrong here and both are fixed by construction:\n//\n// 1. Theme was SNIFFED — it walked up for data-framer-theme, then fell back to\n// reading document.body's background colour, then to prefers-color-scheme.\n// On the canvas and in some preview contexts that resolved to \"light\", which\n// painted the wordmark black on a near-black hero. The theme is now an\n// explicit property. No guessing.\n//\n// 2. The mobile switch read window.innerWidth. Framer draws every breakpoint as\n// its own frame on one canvas, so the 390px phone frame reported the full\n// browser width and rendered the desktop bar inside it. Layout now switches\n// on CONTAINER width, in CSS, which is the only measurement that tracks the\n// frame instead of the window.\n//\n// Structure note: the outer wrapper takes Framer's `style` prop (that's where\n// the layout system puts sizing and positioning) and the