[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-flight-results":3},"\u003Cgui version=\"0.2\" name=\"FlightResults\">\n  \u003Ctokens>\n    \u003C!-- Background & Surface (Cosmic Obsidian Dark Mode) -->\n    \u003Ccolor name=\"bg\" value=\"#07070A\" \u002F>\n    \u003Ccolor name=\"surface\" value=\"#12121A\" \u002F>\n    \u003Ccolor name=\"surface-elevated\" value=\"#1A1A26\" \u002F>\n    \u003Ccolor name=\"border\" value=\"#22222F\" \u002F>\n    \n    \u003C!-- Premium Brand Colors (Lavender) -->\n    \u003Ccolor name=\"primary\" value=\"#A78BFA\" \u002F>\n    \u003Ccolor name=\"primary-light\" value=\"#F5F3FF\" \u002F>\n    \n    \u003C!-- Functional Status Colors -->\n    \u003Ccolor name=\"success-green\" value=\"#10B981\" \u002F>\n    \n    \u003C!-- Text Colors -->\n    \u003Ccolor name=\"text-primary\" value=\"#F3F4F6\" \u002F>\n    \u003Ccolor name=\"text-muted\" value=\"#9CA3AF\" \u002F>\n    \u003Ccolor name=\"text-dark\" value=\"#111115\" \u002F>\n    \n    \u003C!-- Spacing Scale -->\n    \u003Cnumber name=\"space-xs\" value=\"4\" \u002F>\n    \u003Cnumber name=\"space-sm\" value=\"8\" \u002F>\n    \u003Cnumber name=\"space-md\" value=\"12\" \u002F>\n    \u003Cnumber name=\"space-lg\" value=\"16\" \u002F>\n    \u003Cnumber name=\"space-xl\" value=\"24\" \u002F>\n    \u003Cnumber name=\"space-xxl\" value=\"32\" \u002F>\n    \n    \u003C!-- Radius Scale -->\n    \u003Cnumber name=\"radius-sm\" value=\"6\" \u002F>\n    \u003Cnumber name=\"radius-md\" value=\"16\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"Display\" font-family=\"Bricolage Grotesque\" font-size=\"30\" font-weight=\"500\" line-height=\"36\" \u002F>\n    \u003Ctext-style name=\"Title2\" font-family=\"Bricolage Grotesque\" font-size=\"18\" font-weight=\"500\" line-height=\"24\" \u002F>\n    \u003Ctext-style name=\"Headline\" font-family=\"Inter\" font-size=\"14\" font-weight=\"400\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Body\" font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"BodyStrong\" font-family=\"Inter\" font-size=\"13\" font-weight=\"400\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Caption\" font-family=\"Inter\" font-size=\"11\" font-weight=\"300\" line-height=\"14\" \u002F>\n    \u003Ctext-style name=\"Mono\" font-family=\"JetBrains Mono\" font-size=\"12\" font-weight=\"400\" line-height=\"16\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"Playfair Display\" source=\"google\" weights=\"400 500 600\" styles=\"italic normal\" \u002F>\n    \u003Cfont family=\"SF Pro\" source=\"system\" weights=\"300 400 500\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Inter\" source=\"google\" weights=\"300 400 500\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"JetBrains Mono\" source=\"google\" weights=\"400 500\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003Ccomponents>\n    \u003C!-- Reusable Calendar Carousel Date Cell -->\n    \u003Ccomponent name=\"CarouselDate\" id=\"comp-date\">\n      \u003Cprops>\n        \u003Cprop name=\"date\" type=\"text\" target=\"date-lbl\" \u002F>\n        \u003Cprop name=\"price\" type=\"text\" target=\"price-lbl\" \u002F>\n      \u003C\u002Fprops>\n      \u003Ccol w=\"100\" h=\"58\" fill=\"$surface\" border=\"1 $border\" radius=\"$radius-sm\" p=\"10 8\" gap=\"4\" align=\"middle-center\">\n        \u003Ctext id=\"date-lbl\" value=\"Mon, Oct 12\" font-family=\"Inter\" font-size=\"11\" font-weight=\"300\" color=\"$text-muted\" \u002F>\n        \u003Ctext id=\"price-lbl\" value=\"$3,420\" font-family=\"Inter\" font-size=\"13\" font-weight=\"400\" color=\"$text-primary\" \u002F>\n      \u003C\u002Fcol>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Reusable Compact Thinner Flight Result Card -->\n    \u003Ccomponent name=\"FlightResult\" id=\"comp-flight\">\n      \u003Cprops>\n        \u003Cprop name=\"airline\" type=\"text\" target=\"lbl-airline\" \u002F>\n        \u003Cprop name=\"dep-time\" type=\"text\" target=\"lbl-dep-time\" \u002F>\n        \u003Cprop name=\"arr-time\" type=\"text\" target=\"lbl-arr-time\" \u002F>\n        \u003Cprop name=\"duration\" type=\"text\" target=\"lbl-duration\" \u002F>\n        \u003Cprop name=\"price\" type=\"text\" target=\"lbl-price\" \u002F>\n        \u003Cprop name=\"craft\" type=\"text\" target=\"lbl-craft\" \u002F>\n      \u003C\u002Fprops>\n      \u003C!-- Perfectly balanced 84px card height with mathematically budgeted column widths -->\n      \u003Crow role=\"card\" w=\"768\" h=\"84\" fill=\"$surface\" border=\"1 $border\" radius=\"$radius-md\" p=\"0 20\" align=\"middle-left\" gap=\"16\">\n        \u003C!-- 1. Airline Branding (Width: 160px - Playfair Display Serif Header!) -->\n        \u003Crow gap=\"10\" align=\"middle-left\" w=\"160\">\n          \u003Crow w=\"32\" h=\"32\" radius=\"16\" fill=\"$surface-elevated\" border=\"1 $border\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Forbit.svg?color=%23A78BFA\" w=\"18\" h=\"18\" \u002F>\n          \u003C\u002Frow>\n          \u003Ccol gap=\"2\">\n            \u003Ctext id=\"lbl-airline\" value=\"Singapore Airlines\" font-family=\"Playfair Display\" font-size=\"14\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n            \u003Ctext id=\"lbl-craft\" value=\"Business • Boeing 787\" font-family=\"Inter\" font-size=\"11\" font-weight=\"300\" color=\"$text-muted\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n\n        \u003C!-- 2. Connection Timeline (Width: 290px - Regular light weights) -->\n        \u003Crow w=\"290\" align=\"middle-center\" gap=\"16\">\n          \u003Ctext id=\"lbl-dep-time\" value=\"13:15\" font-family=\"Inter\" font-size=\"16\" font-weight=\"400\" color=\"$text-primary\" \u002F>\n          \u003Ccol w=\"150\" align=\"top-center\" gap=\"2\">\n            \u003Ctext id=\"lbl-duration\" value=\"11h 45m\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$primary\" \u002F>\n            \u003Cline fill=\"$border\" thickness=\"2\" \u002F>\n            \u003Ctext value=\"Non-stop\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$success-green\" \u002F>\n          \u003C\u002Fcol>\n          \u003Ctext id=\"lbl-arr-time\" value=\"08:00\" font-family=\"Inter\" font-size=\"16\" font-weight=\"400\" color=\"$text-primary\" \u002F>\n        \u003C\u002Frow>\n\n        \u003C!-- 3. Key Amenities Quick Icons (Width: 70px) -->\n        \u003Crow gap=\"8\" align=\"middle-center\" w=\"70\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fwifi.svg?color=%23757575\" w=\"14\" h=\"14\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Futensils.svg?color=%23757575\" w=\"14\" h=\"14\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbed-double.svg?color=%23757575\" w=\"14\" h=\"14\" \u002F>\n        \u003C\u002Frow>\n\n        \u003C!-- 4. Price & Selector CTA (Width: 160px - Flat Lighter Lavender Tint Fill, No Shadows!) -->\n        \u003Crow gap=\"14\" align=\"middle-right\" w=\"160\">\n          \u003Ccol align=\"top-right\" gap=\"2\">\n            \u003Ctext id=\"lbl-price\" value=\"$3,420\" font-family=\"Inter\" font-size=\"18\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n            \u003Ctext value=\"incl. tax\" font-family=\"Inter\" font-size=\"11\" font-weight=\"300\" color=\"$text-muted\" \u002F>\n          \u003C\u002Fcol>\n          \n          \u003C!-- Translucent flat lavender tint fill button, no drop shadow -->\n          \u003Crow w=\"64\" h=\"30\" radius=\"15\" fill=\"#A78BFA1F\" align=\"middle-center\">\n            \u003Ctext value=\"Select\" font-family=\"Inter\" font-size=\"11\" font-weight=\"500\" color=\"$primary\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n  \u003C\u002Fcomponents>\n\n  \u003C!-- Cosmic Split-Screen Web Artboard (1440 x 900) -->\n  \u003Cframe w=\"1440\" h=\"900\" fill=\"$bg\" clip=\"true\">\n\n    \u003C!-- LEFT PANEL: 40% Width (576px) Immersive Globe Visual -->\n    \u003Cframe w=\"576\" h=\"900\" abs=\"true\" x=\"0\" y=\"0\" fill=\"$bg\" border=\"1 $border\" clip=\"true\">\n      \n      \u003C!-- Logo Branding Header -->\n      \u003Crow abs=\"true\" x=\"32\" y=\"32\" align=\"middle-left\" gap=\"8\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Forbit.svg?color=%23A78BFA\" w=\"24\" h=\"24\" \u002F>\n        \u003Ctext value=\"aether\" font-family=\"Playfair Display\" font-size=\"24\" font-weight=\"500\" font-style=\"italic\" color=\"$primary\" letter-spacing=\"-0.5\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Glassmorphic Search Summary Box (Top Half) -->\n      \u003Ccol role=\"card\" w=\"512\" fill=\"$surface\" border=\"1 $border\" radius=\"$radius-md\" p=\"24\" gap=\"20\" abs=\"true\" x=\"32\" y=\"96\">\n        \u003Cappearance>\n          \u003Cfill type=\"color\" value=\"$surface\" \u002F>\n          \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"8\" radius=\"24\" spread=\"0\" color=\"#00000033\" \u002F>\n        \u003C\u002Fappearance>\n\n        \u003C!-- Header Playfair Display title -->\n        \u003Ctext value=\"Your Search Details\" font-family=\"Playfair Display\" font-size=\"16\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n\n        \u003C!-- From -> To locations query -->\n        \u003Crow w=\"464\" align=\"middle-center\" gap=\"auto\">\n          \u003Ccol gap=\"4\">\n            \u003Ctext value=\"SFO\" font-family=\"Playfair Display\" font-size=\"32\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n            \u003Ctext value=\"San Francisco\" font-family=\"Inter\" font-size=\"12\" font-weight=\"300\" color=\"$text-muted\" \u002F>\n          \u003C\u002Fcol>\n          \n          \u003Crow w=\"36\" h=\"36\" radius=\"18\" fill=\"$surface-elevated\" border=\"1 $border\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-right-left.svg?color=%23A78BFA\" w=\"16\" h=\"16\" \u002F>\n          \u003C\u002Frow>\n\n          \u003Ccol gap=\"4\" align=\"top-right\">\n            \u003Ctext value=\"CDG\" font-family=\"Playfair Display\" font-size=\"32\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n            \u003Ctext value=\"Paris, France\" font-family=\"Inter\" font-size=\"12\" font-weight=\"300\" color=\"$text-muted\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n\n        \u003C!-- Divider Line -->\n        \u003Cline fill=\"$border\" thickness=\"1\" \u002F>\n\n        \u003C!-- Search Metadata (Date, Class, Guest) -->\n        \u003Crow w=\"464\" align=\"middle-left\" gap=\"auto\">\n          \u003Ccol gap=\"4\">\n            \u003Ctext value=\"DEPARTURE DATE\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-muted\" letter-spacing=\"0.5\" \u002F>\n            \u003Ctext value=\"Mon, Oct 12, 2026\" font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" color=\"$text-primary\" \u002F>\n          \u003C\u002Fcol>\n          \u003Ccol gap=\"4\">\n            \u003Ctext value=\"CABIN CLASS\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-muted\" letter-spacing=\"0.5\" \u002F>\n            \u003Ctext value=\"Business Class\" font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" color=\"$primary\" \u002F>\n          \u003C\u002Fcol>\n          \u003Ccol gap=\"4\" align=\"top-right\">\n            \u003Ctext value=\"PASSENGERS\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-muted\" letter-spacing=\"0.5\" \u002F>\n            \u003Ctext value=\"1 Adult, 0 Children\" font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" color=\"$text-primary\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003C!-- Atmospheric Satellite Globe (Unsplash Earth space portrait) -->\n      \u003C!-- Globe is positioned ~50% down (Y=400 to Y=900) -->\n      \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1451187580459-43490279c0fa?auto=format&fit=crop&w=576&h=500&q=80\" w=\"576\" h=\"500\" fit=\"cover\" abs=\"true\" x=\"0\" y=\"400\" \u002F>\n      \n      \u003C!-- Top cosmic fade banner to blend space image with obsidian page -->\n      \u003Crect w=\"576\" h=\"160\" abs=\"true\" x=\"0\" y=\"400\" fill=\"linear-gradient(180deg, #07070AFF 0%, #07070A00 100%)\" \u002F>\n\n      \u003C!-- Holographic Coordinates & Route Visual Pin Layer -->\n      \n      \u003C!-- Pin SFO (West) -->\n      \u003Cframe w=\"40\" h=\"40\" abs=\"true\" x=\"120\" y=\"660\">\n        \u003C!-- Glowing concentric rings -->\n        \u003Cellipse w=\"32\" h=\"32\" fill=\"#A78BFA1A\" border=\"1 #A78BFA4D\" abs=\"true\" x=\"4\" y=\"4\" \u002F>\n        \u003Cellipse w=\"8\" h=\"8\" fill=\"$primary\" abs=\"true\" x=\"16\" y=\"16\" \u002F>\n        \u003C!-- Pin label -->\n        \u003Ctext value=\"SFO\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-primary\" abs=\"true\" x=\"9\" y=\"38\" \u002F>\n      \u003C\u002Fframe>\n\n      \u003C!-- Curved dash route indicator (Holographic track points) -->\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.4\" abs=\"true\" x=\"170\" y=\"655\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.5\" abs=\"true\" x=\"205\" y=\"635\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.6\" abs=\"true\" x=\"240\" y=\"620\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.8\" abs=\"true\" x=\"275\" y=\"610\" \u002F>\n      \n      \u003C!-- Flying glowing airplane icon in center of route -->\n      \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplane.svg?color=%23A78BFA\" w=\"18\" h=\"18\" rotation=\"45\" abs=\"true\" x=\"282\" y=\"601\" \u002F>\n\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.8\" abs=\"true\" x=\"310\" y=\"605\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.6\" abs=\"true\" x=\"345\" y=\"605\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.5\" abs=\"true\" x=\"380\" y=\"610\" \u002F>\n      \u003Cellipse w=\"4\" h=\"4\" fill=\"$primary\" opacity=\"0.4\" abs=\"true\" x=\"415\" y=\"620\" \u002F>\n\n      \u003C!-- Pin CDG (East) -->\n      \u003Cframe w=\"40\" h=\"40\" abs=\"true\" x=\"430\" y=\"615\">\n        \u003C!-- Glowing concentric rings -->\n        \u003Cellipse w=\"32\" h=\"32\" fill=\"#A78BFA1A\" border=\"1 #A78BFA4D\" abs=\"true\" x=\"4\" y=\"4\" \u002F>\n        \u003Cellipse w=\"8\" h=\"8\" fill=\"$primary\" abs=\"true\" x=\"16\" y=\"16\" \u002F>\n        \u003C!-- Pin label -->\n        \u003Ctext value=\"CDG\" font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-primary\" abs=\"true\" x=\"8\" y=\"38\" \u002F>\n      \u003C\u002Fframe>\n\n    \u003C\u002Fframe>\n\n    \u003C!-- RIGHT PANEL: 60% Width (864px) Flight Search Results List -->\n    \u003C!-- Beautiful spacious layout with increased gap=\"20\" -->\n    \u003Ccol w=\"864\" h=\"900\" abs=\"true\" x=\"576\" y=\"0\" p=\"32 48\" gap=\"20\" align=\"top-left\">\n      \n      \u003C!-- 1. Top Section: Header Titles and Sort selection -->\n      \u003Crow w=\"768\" align=\"middle-left\" gap=\"auto\">\n        \u003Ccol gap=\"4\" align=\"top-left\">\n          \u003C!-- Playfair Display editorial title -->\n          \u003Ctext text-style=\"Display\" value=\"Select Outbound Flight\" color=\"$text-primary\" \u002F>\n          \u003Ctext font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" value=\"5 Premium Business direct flights found SFO → CDG\" color=\"$text-muted\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Crow gap=\"8\" align=\"middle-right\">\n          \u003Ctext font-family=\"Inter\" font-size=\"13\" font-weight=\"300\" value=\"Sort by:\" color=\"$text-muted\" \u002F>\n          \u003Crow fill=\"$surface\" border=\"1 $border\" radius=\"$radius-sm\" p=\"6 12\" align=\"middle-center\" gap=\"6\">\n            \u003Ctext text-style=\"BodyStrong\" value=\"Best Option\" color=\"$primary\" \u002F>\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fchevron-down.svg?color=%23A78BFA\" w=\"14\" h=\"14\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- Luxurious spacing -->\n      \u003Ccol h=\"4\" \u002F>\n\n      \u003C!-- 2. DATE FARE CAROUSEL (Top of Results) -->\n      \u003Crow role=\"carousel\" w=\"768\" gap=\"10\" align=\"middle-center\">\n        \u003Cinstance component=\"comp-date\" date=\"Sat, Oct 10\" price=\"$3,520\" \u002F>\n        \u003Cinstance component=\"comp-date\" date=\"Sun, Oct 11\" price=\"$3,480\" \u002F>\n        \n        \u003C!-- Active Date (Mon, Oct 12) - High-end flat lavender border visual, no bold -->\n        \u003Ccol w=\"100\" h=\"58\" fill=\"$surface-elevated\" border=\"1 $primary\" radius=\"$radius-sm\" p=\"10 8\" gap=\"4\" align=\"middle-center\">\n          \u003Ctext value=\"Mon, Oct 12\" font-family=\"Inter\" font-size=\"11\" font-weight=\"500\" color=\"$primary\" \u002F>\n          \u003Ctext value=\"$3,420\" font-family=\"Inter\" font-size=\"13\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Cinstance component=\"comp-date\" date=\"Tue, Oct 13\" price=\"$2,850\" \u002F>\n        \u003Cinstance component=\"comp-date\" date=\"Wed, Oct 14\" price=\"$3,100\" \u002F>\n        \u003Cinstance component=\"comp-date\" date=\"Thu, Oct 15\" price=\"$3,350\" \u002F>\n        \u003Cinstance component=\"comp-date\" date=\"Fri, Oct 16\" price=\"$3,890\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Luxurious spacing -->\n      \u003Ccol h=\"4\" \u002F>\n\n      \u003C!-- 3. Sort Options Comparison Row Tabs (Unified Playfair Display pricing, no bold) -->\n      \u003Crow w=\"768\" gap=\"16\" align=\"middle-left\">\n        \u003C!-- Tab 1: Recommended Best Choice (Active) -->\n        \u003Ccol role=\"chip\" w=\"245\" fill=\"$surface-elevated\" border=\"1 $primary\" radius=\"$radius-md\" p=\"12 16\" gap=\"2\" align=\"top-left\">\n          \u003Ctext font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$primary\" letter-spacing=\"0.5\" value=\"RECOMMENDED\" \u002F>\n          \u003Ctext text-style=\"BodyStrong\" value=\"Best Choice • 11h 45m\" color=\"$text-primary\" \u002F>\n          \u003Ctext font-family=\"Playfair Display\" font-size=\"18\" font-weight=\"500\" color=\"$primary\" value=\"$3,420\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Tab 2: Budget Choice -->\n        \u003Ccol role=\"chip\" w=\"245\" fill=\"$surface\" border=\"1 $border\" radius=\"$radius-md\" p=\"12 16\" gap=\"2\" align=\"top-left\">\n          \u003Ctext font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-muted\" letter-spacing=\"0.5\" value=\"BUDGET\" \u002F>\n          \u003Ctext text-style=\"BodyStrong\" value=\"Cheapest • 13h 10m\" color=\"$text-muted\" \u002F>\n          \u003Ctext font-family=\"Playfair Display\" font-size=\"18\" font-weight=\"500\" color=\"$text-primary\" value=\"$1,890\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Tab 3: Speedy Choice -->\n        \u003Ccol role=\"chip\" w=\"245\" fill=\"$surface\" border=\"1 $border\" radius=\"$radius-md\" p=\"12 16\" gap=\"2\" align=\"top-left\">\n          \u003Ctext font-family=\"Inter\" font-size=\"11\" font-weight=\"400\" color=\"$text-muted\" letter-spacing=\"0.5\" value=\"SPEEDY\" \u002F>\n          \u003Ctext text-style=\"BodyStrong\" value=\"Fastest • 11h 40m\" color=\"$text-muted\" \u002F>\n          \u003Ctext font-family=\"Playfair Display\" font-size=\"18\" font-weight=\"500\" color=\"$text-primary\" value=\"$3,850\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Frow>\n\n      \u003C!-- Luxurious spacing -->\n      \u003Ccol h=\"8\" \u002F>\n\n      \u003C!-- 4. Sleek compact horizontal Results Flight Card List -->\n      \u003Ccol w=\"768\" gap=\"12\" align=\"top-left\">\n        \n        \u003C!-- Flight 1: Singapore Airlines -->\n        \u003Cinstance component=\"comp-flight\" airline=\"Singapore Airlines\" dep-time=\"13:15\" arr-time=\"08:00\" duration=\"11h 45m\" price=\"$3,420\" craft=\"Business • Boeing 787\" \u002F>\n        \n        \u003C!-- Flight 2: Qatar Airways -->\n        \u003Cinstance component=\"comp-flight\" airline=\"Qatar Airways\" dep-time=\"16:40\" arr-time=\"11:25\" duration=\"11h 45m\" price=\"$3,980\" craft=\"QSuite • Airbus A350\" \u002F>\n        \n        \u003C!-- Flight 3: Air France -->\n        \u003Cinstance component=\"comp-flight\" airline=\"Air France\" dep-time=\"19:20\" arr-time=\"14:00\" duration=\"11h 40m\" price=\"$2,850\" craft=\"Business • Boeing 777\" \u002F>\n        \n        \u003C!-- Flight 4: British Airways -->\n        \u003Cinstance component=\"comp-flight\" airline=\"British Airways\" dep-time=\"08:30\" arr-time=\"03:15\" duration=\"11h 45m\" price=\"$3,120\" craft=\"Club Suite • Airbus A350\" \u002F>\n        \n        \u003C!-- Flight 5: Delta Air Lines -->\n        \u003Cinstance component=\"comp-flight\" airline=\"Delta Air Lines\" dep-time=\"22:00\" arr-time=\"16:45\" duration=\"11h 45m\" price=\"$2,950\" craft=\"Delta One • Airbus A330\" \u002F>\n        \n      \u003C\u002Fcol>\n\n      \u003C!-- Luxurious spacing -->\n      \u003Ccol h=\"8\" \u002F>\n\n      \u003C!-- 5. Bottom Nav Details -->\n      \u003Crow w=\"768\" align=\"middle-left\" gap=\"auto\">\n        \u003Ctext text-style=\"Caption\" value=\"Prices include all mandatory taxes, carrier charges, and booking fees.\" color=\"$text-muted\" \u002F>\n        \u003Crow gap=\"6\" align=\"middle-right\">\n          \u003Ctext text-style=\"Caption\" value=\"Need help?\" color=\"$text-muted\" \u002F>\n          \u003Ctext text-style=\"Caption\" value=\"Contact Desk\" color=\"$primary\" font-weight=\"400\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n    \u003C\u002Fcol>\n\n  \u003C\u002Fframe>\n\u003C\u002Fgui>\n",1784753172973]