[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-posthog-flights":3},"\u003Cgui version=\"0.2\" name=\"PostHogFlightSearchResults\">\n  \u003Ctokens>\n    \u003C!-- PostHog Core Palette -->\n    \u003Ccolor name=\"bg\" value=\"#eeefe9\" \u002F> \u003C!-- Warm Cream continuous canvas background -->\n    \u003Ccolor name=\"surface\" value=\"#ffffff\" \u002F> \u003C!-- Flat white card surface -->\n    \u003Ccolor name=\"surface-soft\" value=\"#e5e7e0\" \u002F> \u003C!-- Button secondary \u002F sub-nav gray -->\n    \u003Ccolor name=\"border\" value=\"#bfc1b7\" \u002F> \u003C!-- Hairline card border -->\n    \u003Ccolor name=\"border-soft\" value=\"#dcdfd2\" \u002F> \u003C!-- Hairline soft row divider -->\n    \n    \u003C!-- Chromatic Focus Accent (scarce yellow CTA) -->\n    \u003Ccolor name=\"primary\" value=\"#f7a501\" \u002F> \u003C!-- Saturated PostHog Yellow-Orange -->\n    \u003Ccolor name=\"primary-pressed\" value=\"#dd9001\" \u002F>\n    \u003Ccolor name=\"on-primary\" value=\"#23251d\" \u002F> \u003C!-- Deep olive text on yellow -->\n    \n    \u003C!-- Text Colors -->\n    \u003Ccolor name=\"ink\" value=\"#23251d\" \u002F> \u003C!-- Deep olive-charcoal near-black -->\n    \u003Ccolor name=\"body\" value=\"#4d4f46\" \u002F> \u003C!-- Olive-gray default paragraph text -->\n    \u003Ccolor name=\"text-secondary\" value=\"#6c6e63\" \u002F> \u003C!-- Muted labels -->\n    \n    \u003C!-- Semantic & Docs Banners -->\n    \u003Ccolor name=\"accent-blue\" value=\"#2c84e0\" \u002F>\n    \u003Ccolor name=\"accent-blue-soft\" value=\"#dceaf6\" \u002F> \u003C!-- Docs Blue tip banner fill -->\n    \u003Ccolor name=\"accent-green\" value=\"#2c8c66\" \u002F>\n    \u003Ccolor name=\"accent-green-soft\" value=\"#d9eddf\" \u002F>\n    \u003Ccolor name=\"accent-purple\" value=\"#7c44a6\" \u002F>\n    \u003Ccolor name=\"accent-purple-soft\" value=\"#e7d8ee\" \u002F>\n    \n    \u003C!-- Sizing & Radii -->\n    \u003Cnumber name=\"radius-xs\" value=\"2\" \u002F>\n    \u003Cnumber name=\"radius-sm\" value=\"4\" \u002F>\n    \u003Cnumber name=\"radius-md\" value=\"6\" \u002F> \u003C!-- PostHog's signature 6px card\u002Finput radius -->\n    \u003Cnumber name=\"radius-lg\" value=\"8\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"9999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"Nav\u002FTitle\" font-family=\"IBM Plex Sans\" font-size=\"17\" font-weight=\"700\" line-height=\"22\" letter-spacing=\"-0.4\" \u002F>\n    \u003Ctext-style name=\"Nav\u002FSub\" font-family=\"IBM Plex Sans\" font-size=\"13\" font-weight=\"400\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Title\u002FCard\" font-family=\"IBM Plex Sans\" font-size=\"18\" font-weight=\"700\" line-height=\"24\" \u002F>\n    \u003Ctext-style name=\"Body\u002FLarge\" font-family=\"IBM Plex Sans\" font-size=\"17\" font-weight=\"700\" line-height=\"22\" \u002F>\n    \u003Ctext-style name=\"Body\u002FMedium\" font-family=\"IBM Plex Sans\" font-size=\"15\" font-weight=\"600\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Body\u002FRegular\" font-family=\"IBM Plex Sans\" font-size=\"15\" font-weight=\"400\" line-height=\"22\" \u002F>\n    \u003Ctext-style name=\"Caption\" font-family=\"IBM Plex Sans\" font-size=\"13\" font-weight=\"500\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Caption\u002FSemibold\" font-family=\"IBM Plex Sans\" font-size=\"13\" font-weight=\"600\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Micro\" font-family=\"IBM Plex Sans\" font-size=\"11\" font-weight=\"700\" line-height=\"14\" letter-spacing=\"0.5\" \u002F>\n    \u003Ctext-style name=\"Code\u002FXs\" font-family=\"Source Code Pro\" font-size=\"12\" font-weight=\"500\" line-height=\"14\" \u002F>\n    \u003Ctext-style name=\"Time\" font-family=\"IBM Plex Sans\" font-size=\"15\" font-weight=\"600\" line-height=\"18\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"IBM Plex Sans\" source=\"google\" weights=\"400 500 600 700 800\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Source Code Pro\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003C!-- Root Canvas: Scrollable mobile canvas on warm cream background -->\n  \u003Ccol w=\"390\" fill=\"$bg\">\n    \u003C!-- Status Bar Spacer (Safe Area Top) -->\n    \u003Crow w=\"390\" h=\"47\" p=\"0 24\" align=\"middle-left\" gap=\"auto\" fill=\"$bg\">\n      \u003Ctext value=\"9:41\" text-style=\"Time\" color=\"$ink\" \u002F>\n      \u003Crow gap=\"6\" align=\"middle-right\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsignal.svg?color=%2323251d\" w=\"17\" h=\"11\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fwifi.svg?color=%2323251d\" w=\"17\" h=\"11\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbattery.svg?color=%2323251d\" w=\"20\" h=\"11\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Navigation Header -->\n    \u003Crow role=\"top-navigation-bar\" p=\"12 16\" align=\"middle-left\" gap=\"auto\" w=\"fill\">\n      \u003C!-- Left aligned segment (back button + search query info) -->\n      \u003Crow gap=\"12\" align=\"middle-left\">\n        \u003C!-- Back circular button with outline -->\n        \u003Crow role=\"button\" p=\"10\" fill=\"$surface\" radius=\"$radius-pill\" align=\"middle-center\" w=\"40\" h=\"40\" stroke=\"$border\" stroke-width=\"1\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-left.svg?color=%2323251d\" w=\"18\" h=\"18\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Search query texts -->\n        \u003Ccol gap=\"2\">\n          \u003Crow gap=\"6\" align=\"middle-left\">\n            \u003Ctext value=\"🦔\" font-family=\"IBM Plex Sans\" font-size=\"16\" line-height=\"18\" \u002F>\n            \u003Ctext value=\"Paris to Florence\" text-style=\"Nav\u002FTitle\" color=\"$ink\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext value=\"May 28 • 1 Traveler • Economy\" text-style=\"Nav\u002FSub\" color=\"$body\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Frow>\n\n      \u003C!-- Right aligned segment (Edit\u002FFilter button) -->\n      \u003Crow role=\"button\" p=\"10\" fill=\"$surface\" radius=\"$radius-pill\" align=\"middle-center\" w=\"40\" h=\"40\" stroke=\"$border\" stroke-width=\"1\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsliders-horizontal.svg?color=%2323251d\" w=\"18\" h=\"18\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Horizontal Date Carousel (Quick Select Cards) -->\n    \u003Crow role=\"carousel\" gap=\"8\" p=\"8 16\" w=\"fill\" align=\"middle-left\">\n      \u003C!-- Wednesday, May 27 -->\n      \u003Ccol p=\"10 12\" radius=\"$radius-md\" fill=\"$surface\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"82\" h=\"64\" gap=\"4\">\n        \u003Ctext value=\"Wed, May 27\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n        \u003Ctext value=\"€240\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Thursday, May 28 (Selected - Premium Yellow-Orange Highlight) -->\n      \u003Ccol p=\"10 12\" radius=\"$radius-md\" fill=\"$primary\" align=\"middle-center\" w=\"88\" h=\"68\" gap=\"4\">\n        \u003Ctext value=\"Thu, May 28\" text-style=\"Micro\" color=\"$on-primary\" \u002F>\n        \u003Ctext value=\"€185\" text-style=\"Caption\u002FSemibold\" color=\"$on-primary\" \u002F>\n        \u003C!-- Accent indicator line inside the card -->\n        \u003Cshape type=\"rect\" w=\"12\" h=\"2\" fill=\"$on-primary\" radius=\"$radius-pill\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Friday, May 29 -->\n      \u003Ccol p=\"10 12\" radius=\"$radius-md\" fill=\"$surface\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"82\" h=\"64\" gap=\"4\">\n        \u003Ctext value=\"Fri, May 29\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n        \u003Ctext value=\"€210\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Saturday, May 30 -->\n      \u003Ccol p=\"10 12\" radius=\"$radius-md\" fill=\"$surface\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"82\" h=\"64\" gap=\"4\">\n        \u003Ctext value=\"Sat, May 30\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n        \u003Ctext value=\"€320\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n      \u003C\u002Fcol>\n    \u003C\u002Frow>\n\n    \u003C!-- Filter Pills Selection -->\n    \u003Crow gap=\"8\" p=\"12 16 4 16\" w=\"fill\">\n      \u003C!-- Cheaper option pill (Active - PostHog fully inverted on selection) -->\n      \u003Crow role=\"chip\" p=\"6 12\" fill=\"$ink\" radius=\"$radius-pill\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" gap=\"4\">\n        \u003Ctext value=\"Cheapest\" text-style=\"Micro\" color=\"#ffffff\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%23ffffff\" w=\"12\" h=\"12\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Direct only pill -->\n      \u003Crow role=\"chip\" p=\"6 12\" fill=\"$surface-soft\" radius=\"$radius-pill\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" gap=\"4\">\n        \u003Ctext value=\"Direct only\" text-style=\"Micro\" color=\"$body\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Fastest flight pill -->\n      \u003Crow role=\"chip\" p=\"6 12\" fill=\"$surface-soft\" radius=\"$radius-pill\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" gap=\"4\">\n        \u003Ctext value=\"⏱️ Fastest\" text-style=\"Micro\" color=\"$body\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Airlines filter pill -->\n      \u003Crow role=\"chip\" p=\"6 12\" fill=\"$surface-soft\" radius=\"$radius-pill\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" gap=\"4\">\n        \u003Ctext value=\"Airlines\" text-style=\"Micro\" color=\"$body\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fchevron-down.svg?color=%236c6e63\" w=\"12\" h=\"12\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Search Results Header count -->\n    \u003Crow p=\"12 16 4 16\" align=\"middle-left\" gap=\"auto\" w=\"fill\">\n      \u003Ctext value=\"3 flights found\" text-style=\"Caption\u002FSemibold\" color=\"$text-secondary\" \u002F>\n      \u003Crow gap=\"4\" align=\"middle-right\">\n        \u003Ctext value=\"Sorted by price\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-down-narrow-wide.svg?color=%236c6e63\" w=\"12\" h=\"12\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Flight Results Card List -->\n    \u003Ccol p=\"8 16 32 16\" gap=\"16\" w=\"fill\">\n\n      \u003C!-- ================= CARD 1 (Air France - Best Value \u002F Direct) ================= -->\n      \u003Ccol role=\"card\" fill=\"$surface\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" p=\"16\" gap=\"12\" w=\"fill\">\n        \u003C!-- Badges row (Using soft pastels with outline-eyebrow caps) -->\n        \u003Crow gap=\"6\" w=\"fill\" align=\"middle-left\">\n          \u003Crow p=\"4 8\" fill=\"$accent-green-soft\" radius=\"$radius-pill\" align=\"middle-center\" gap=\"4\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck-circle-2.svg?color=%232c8c66\" w=\"12\" h=\"12\" \u002F>\n            \u003Ctext value=\"Direct • On Time\" text-style=\"Micro\" color=\"$accent-green\" \u002F>\n          \u003C\u002Frow>\n          \u003Crow p=\"4 8\" fill=\"$accent-blue-soft\" radius=\"$radius-pill\" align=\"middle-center\">\n            \u003Ctext value=\"Best Value\" text-style=\"Micro\" color=\"$accent-blue\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n\n        \u003C!-- Flight details timeline -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Origin -->\n          \u003Ccol gap=\"4\" w=\"60\">\n            \u003Ctext value=\"08:15\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"CDG\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Paris\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Middle timeline path -->\n          \u003Ccol align=\"middle-center\" gap=\"2\" w=\"180\">\n            \u003Ctext value=\"1h 45m\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003Crow align=\"middle-center\" w=\"120\" h=\"16\" gap=\"4\">\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$accent-green\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplane.svg?color=%23f7a501\" w=\"14\" h=\"14\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$accent-green\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Direct\" text-style=\"Micro\" color=\"$accent-green\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Destination -->\n          \u003Ccol gap=\"4\" w=\"60\" align=\"top-right\">\n            \u003Ctext value=\"10:00\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"FLR\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Florence\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n\n        \u003C!-- Hairline Divider -->\n        \u003Crow h=\"1\" fill=\"$border-soft\" w=\"fill\" \u002F>\n\n        \u003C!-- Footer: Airline Info, Price & Select -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Airline logo + name -->\n          \u003Crow gap=\"8\" align=\"middle-left\">\n            \u003Crow w=\"28\" h=\"28\" fill=\"$surface-soft\" stroke=\"$border\" stroke-width=\"1\" radius=\"$radius-sm\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fglobe.svg?color=%23f7a501\" w=\"16\" h=\"16\" \u002F>\n            \u003C\u002Frow>\n            \u003Ccol gap=\"1\">\n              \u003Ctext value=\"Air France\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"AF 1062 • Airbus A320\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n\n          \u003C!-- Price & CTA -->\n          \u003Crow gap=\"12\" align=\"middle-right\">\n            \u003Ccol gap=\"1\" align=\"top-right\">\n              \u003Ctext value=\"€185\" text-style=\"Title\u002FCard\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"one way\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n            \u003C!-- Primary Saturated Yellow CTA Pill -->\n            \u003Crow role=\"button\" p=\"8 16\" fill=\"$primary\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"72\" h=\"36\">\n              \u003Ctext value=\"Select\" text-style=\"Caption\u002FSemibold\" color=\"$on-primary\" \u002F>\n            \u003C\u002Frow>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003C!-- ================= POSTHOG MASCOT TIP BANNER ================= -->\n      \u003Crow role=\"banner\" fill=\"$accent-blue-soft\" radius=\"$radius-md\" stroke=\"$accent-blue\" stroke-width=\"1\" p=\"12 16\" gap=\"12\" w=\"fill\" align=\"top-left\">\n        \u003Ctext value=\"🦔\" font-family=\"IBM Plex Sans\" font-size=\"20\" line-height=\"24\" \u002F>\n        \u003Ccol gap=\"4\" w=\"284\">\n          \u003Ctext value=\"💡 HEDGY'S PRO TIP\" text-style=\"Micro\" color=\"$accent-blue\" \u002F>\n          \u003Ctext value=\"Coding on board? Direct flights to Florence have 90% seat power outlets so your terminal never dies. Safe travels!\" text-style=\"Caption\" color=\"$ink\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Frow>\n\n      \u003C!-- ================= CARD 2 (Lufthansa - Cheapest \u002F 1 Stop) ================= -->\n      \u003Ccol role=\"card\" fill=\"$surface\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" p=\"16\" gap=\"12\" w=\"fill\">\n        \u003C!-- Badges row -->\n        \u003Crow gap=\"6\" w=\"fill\" align=\"middle-left\">\n          \u003Crow p=\"4 8\" fill=\"$surface-soft\" radius=\"$radius-pill\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" gap=\"4\">\n            \u003Ctext value=\"1 Stop • MUC\" text-style=\"Micro\" color=\"$body\" \u002F>\n          \u003C\u002Frow>\n          \u003Crow p=\"4 8\" fill=\"$accent-green-soft\" radius=\"$radius-pill\" align=\"middle-center\">\n            \u003Ctext value=\"Cheapest\" text-style=\"Micro\" color=\"$accent-green\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n\n        \u003C!-- Flight details timeline -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Origin -->\n          \u003Ccol gap=\"4\" w=\"60\">\n            \u003Ctext value=\"14:30\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"CDG\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Paris\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Middle timeline path -->\n          \u003Ccol align=\"middle-center\" gap=\"2\" w=\"180\">\n            \u003Ctext value=\"3h 15m\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003Crow align=\"middle-center\" w=\"120\" h=\"16\" gap=\"4\">\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$text-secondary\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cshape type=\"ellipse\" w=\"8\" h=\"8\" fill=\"$primary\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$text-secondary\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Layover 55m in Munich\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Destination -->\n          \u003Ccol gap=\"4\" w=\"60\" align=\"top-right\">\n            \u003Ctext value=\"17:45\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"FLR\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Florence\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n\n        \u003C!-- Hairline Divider -->\n        \u003Crow h=\"1\" fill=\"$border-soft\" w=\"fill\" \u002F>\n\n        \u003C!-- Footer: Airline Info, Price & Select -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Airline logo + name -->\n          \u003Crow gap=\"8\" align=\"middle-left\">\n            \u003Crow w=\"28\" h=\"28\" fill=\"$surface-soft\" stroke=\"$border\" stroke-width=\"1\" radius=\"$radius-sm\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcompass.svg?color=%2323251d\" w=\"16\" h=\"16\" \u002F>\n            \u003C\u002Frow>\n            \u003Ccol gap=\"1\">\n              \u003Ctext value=\"Lufthansa\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"LH 2229 • Embraer 190\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n\n          \u003C!-- Price & CTA -->\n          \u003Crow gap=\"12\" align=\"middle-right\">\n            \u003Ccol gap=\"1\" align=\"top-right\">\n              \u003Ctext value=\"€142\" text-style=\"Title\u002FCard\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"one way\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n            \u003C!-- Secondary Gray CTA button -->\n            \u003Crow role=\"button\" p=\"8 16\" fill=\"$surface-soft\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"72\" h=\"36\">\n              \u003Ctext value=\"Select\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003C!-- ================= CARD 3 (ITA Airways - Fastest \u002F Business Class) ================= -->\n      \u003Ccol role=\"card\" fill=\"$surface\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" p=\"16\" gap=\"12\" w=\"fill\">\n        \u003C!-- Badges row -->\n        \u003Crow gap=\"6\" w=\"fill\" align=\"middle-left\">\n          \u003Crow p=\"4 8\" fill=\"$accent-green-soft\" radius=\"$radius-pill\" align=\"middle-center\" gap=\"4\">\n            \u003Ctext value=\"⏱️ 1h 40m (Fastest)\" text-style=\"Micro\" color=\"$accent-green\" \u002F>\n          \u003C\u002Frow>\n          \u003Crow p=\"4 8\" fill=\"$accent-purple-soft\" radius=\"$radius-pill\" align=\"middle-center\">\n            \u003Ctext value=\"Business Class\" text-style=\"Micro\" color=\"$accent-purple\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n\n        \u003C!-- Flight details timeline -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Origin -->\n          \u003Ccol gap=\"4\" w=\"60\">\n            \u003Ctext value=\"19:05\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"CDG\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Paris\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Middle timeline path -->\n          \u003Ccol align=\"middle-center\" gap=\"2\" w=\"180\">\n            \u003Ctext value=\"1h 40m\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003Crow align=\"middle-center\" w=\"120\" h=\"16\" gap=\"4\">\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$accent-green\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplane.svg?color=%23f7a501\" w=\"14\" h=\"14\" \u002F>\n              \u003Cshape type=\"line\" w=\"36\" h=\"1\" stroke=\"$border\" stroke-width=\"1.5\" \u002F>\n              \u003Cshape type=\"ellipse\" w=\"6\" h=\"6\" fill=\"$accent-green\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Direct\" text-style=\"Micro\" color=\"$accent-green\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Destination -->\n          \u003Ccol gap=\"4\" w=\"60\" align=\"top-right\">\n            \u003Ctext value=\"20:45\" text-style=\"Body\u002FLarge\" color=\"$ink\" \u002F>\n            \u003C!-- Code Chip -->\n            \u003Crow p=\"2 6\" fill=\"$surface-soft\" radius=\"$radius-xs\" align=\"middle-center\">\n              \u003Ctext value=\"FLR\" text-style=\"Code\u002FXs\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Florence\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n\n        \u003C!-- Hairline Divider -->\n        \u003Crow h=\"1\" fill=\"$border-soft\" w=\"fill\" \u002F>\n\n        \u003C!-- Footer: Airline Info, Price & Select -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Airline logo + name -->\n          \u003Crow gap=\"8\" align=\"middle-left\">\n            \u003Crow w=\"28\" h=\"28\" fill=\"$surface-soft\" stroke=\"$border\" stroke-width=\"1\" radius=\"$radius-sm\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fnavigation.svg?color=%2323251d\" w=\"16\" h=\"16\" \u002F>\n            \u003C\u002Frow>\n            \u003Ccol gap=\"1\">\n              \u003Ctext value=\"ITA Airways\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"AZ 356 • Airbus A319\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n\n          \u003C!-- Price & CTA -->\n          \u003Crow gap=\"12\" align=\"middle-right\">\n            \u003Ccol gap=\"1\" align=\"top-right\">\n              \u003Ctext value=\"€260\" text-style=\"Title\u002FCard\" color=\"$ink\" \u002F>\n              \u003Ctext value=\"one way\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n            \u003C!-- Secondary Gray CTA button -->\n            \u003Crow role=\"button\" p=\"8 16\" fill=\"$surface-soft\" radius=\"$radius-md\" stroke=\"$border\" stroke-width=\"1\" align=\"middle-center\" w=\"72\" h=\"36\">\n              \u003Ctext value=\"Select\" text-style=\"Caption\u002FSemibold\" color=\"$ink\" \u002F>\n            \u003C\u002Frow>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n    \u003C\u002Fcol>\n\n    \u003C!-- iOS Home Indicator Safe Area Bottom (resembles flat PostHog mobile chrome) -->\n    \u003Ccol h=\"34\" w=\"fill\" align=\"middle-center\" p=\"0 0 10 0\">\n      \u003Cshape type=\"rect\" w=\"134\" h=\"5\" fill=\"$border\" radius=\"$radius-pill\" \u002F>\n    \u003C\u002Fcol>\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172889]