[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-instagram-clone":3},"\u003Cgui version=\"0.2\" name=\"Instagram\">\n  \u003Ctokens>\n    \u003C!-- Background & Surface Colors -->\n    \u003Ccolor name=\"bg\" value=\"#000000\" \u002F>\n    \u003Ccolor name=\"surface\" value=\"#121212\" \u002F>\n    \u003Ccolor name=\"surface-2\" value=\"#1F1F1F\" \u002F>\n    \u003Ccolor name=\"border\" value=\"#262626\" \u002F>\n    \n    \u003C!-- Text Colors -->\n    \u003Ccolor name=\"text-primary\" value=\"#FFFFFF\" \u002F>\n    \u003Ccolor name=\"text-secondary\" value=\"#A8A8A8\" \u002F>\n    \u003Ccolor name=\"text-tertiary\" value=\"#737373\" \u002F>\n    \u003Ccolor name=\"text-highlight\" value=\"#E5E5E5\" \u002F>\n    \n    \u003C!-- Accent Colors -->\n    \u003Ccolor name=\"primary\" value=\"#0095F6\" \u002F>\n    \u003Ccolor name=\"danger\" value=\"#FF3040\" \u002F>\n    \n    \u003C!-- Sizing & Radii -->\n    \u003Cnumber name=\"radius-sm\" value=\"4\" \u002F>\n    \u003Cnumber name=\"radius-md\" value=\"8\" \u002F>\n    \u003Cnumber name=\"radius-lg\" value=\"12\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"999\" \u002F>\n    \n    \u003C!-- Spacing -->\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  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"BrandLogo\" font-family=\"SF Pro\" font-size=\"22\" font-weight=\"700\" line-height=\"28\" letter-spacing=\"-0.5\" \u002F>\n    \u003Ctext-style name=\"Headline\" font-family=\"SF Pro\" font-size=\"14\" font-weight=\"600\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Headline\u002FSmall\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" line-height=\"17\" \u002F>\n    \u003Ctext-style name=\"Body\" font-family=\"SF Pro\" font-size=\"14\" font-weight=\"400\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Body\u002FSmall\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" line-height=\"17\" \u002F>\n    \u003Ctext-style name=\"Caption\" font-family=\"SF Pro\" font-size=\"12\" font-weight=\"400\" line-height=\"16\" \u002F>\n    \u003Ctext-style name=\"Tiny\" font-family=\"SF Pro\" font-size=\"10\" font-weight=\"500\" line-height=\"14\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"SF Pro\" source=\"system\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Inter\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003Ccomponents>\n    \u003C!-- Reusable Follow Button Component -->\n    \u003Ccomponent name=\"FollowButton\" id=\"comp-follow-btn\">\n      \u003Cprops>\n        \u003Cprop name=\"label\" type=\"text\" target=\"btn-label\" \u002F>\n      \u003C\u002Fprops>\n      \u003Crow role=\"button\" p=\"6 12\" fill=\"$primary\" radius=\"$radius-md\" align=\"middle-center\">\n        \u003Ctext id=\"btn-label\" value=\"Follow\" font-family=\"SF Pro\" font-size=\"12\" font-weight=\"600\" color=\"#FFFFFF\" line-height=\"14\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Reusable Comment Row Component -->\n    \u003Ccomponent name=\"CommentRow\" id=\"comp-comment-row\">\n      \u003Cprops>\n        \u003Cprop name=\"username\" type=\"text\" target=\"comm-user\" \u002F>\n        \u003Cprop name=\"text\" type=\"text\" target=\"comm-text\" \u002F>\n      \u003C\u002Fprops>\n      \u003Crow w=\"390\" p=\"2 16\" gap=\"6\" align=\"top-left\">\n        \u003Ctext id=\"comm-user\" value=\"username\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" color=\"$text-primary\" line-height=\"17\" \u002F>\n        \u003Ctext id=\"comm-text\" value=\"comment content\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" color=\"$text-highlight\" line-height=\"17\" w=\"290\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n  \u003C\u002Fcomponents>\n\n  \u003C!-- Root Canvas: Mobile iOS layout hugging height -->\n  \u003Ccol w=\"390\" fill=\"$bg\">\n    \n    \u003C!-- 1. iPhone 14\u002F15 Status Bar -->\n    \u003Crow w=\"390\" h=\"47\" p=\"0 20\" align=\"middle-left\" gap=\"auto\">\n      \u003Ctext value=\"9:41\" font-family=\"SF Pro\" font-size=\"15\" font-weight=\"600\" color=\"$text-primary\" line-height=\"18\" \u002F>\n      \u003Crow gap=\"6\" align=\"middle-right\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsignal.svg?color=%23ffffff\" w=\"17\" h=\"11\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fwifi.svg?color=%23ffffff\" w=\"17\" h=\"11\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbattery.svg?color=%23ffffff\" w=\"20\" h=\"11\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- 2. Brand Header Navigation Bar -->\n    \u003Crow role=\"top-navigation-bar\" w=\"390\" h=\"52\" p=\"0 16\" align=\"middle-left\" gap=\"auto\" fill=\"$bg\">\n      \u003Ctext value=\"Instagram\" text-style=\"BrandLogo\" color=\"$text-primary\" \u002F>\n      \u003Crow gap=\"20\" align=\"middle-right\">\n        \u003C!-- New Post Icon -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplus-square.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C!-- Notification Heart Icon -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fheart.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C!-- Direct Message Icon -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsend.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- 3. Stories Tray (Horizontal Row Container) -->\n    \u003Crow role=\"carousel\" w=\"390\" p=\"8 8 12 8\" gap=\"14\" align=\"middle-left\" fill=\"$bg\">\n      \n      \u003C!-- Story 1: Your Story -->\n      \u003Ccol gap=\"6\" align=\"top-center\">\n        \u003Cframe w=\"64\" h=\"64\">\n          \u003C!-- Avatar image -->\n          \u003Cframe role=\"avatar\" w=\"56\" h=\"56\" x=\"4\" y=\"4\" radius=\"28\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1534528741775-53994a69daeb?auto=format&fit=crop&w=56&h=56&q=80\" w=\"56\" h=\"56\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n          \u003C!-- Blue Plus Badge -->\n          \u003Crow role=\"badge\" abs=\"true\" x=\"44\" y=\"44\" w=\"18\" h=\"18\" radius=\"9\" fill=\"$primary\" stroke=\"$bg\" stroke-width=\"2\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplus.svg?color=%23ffffff\" w=\"10\" h=\"10\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Fframe>\n        \u003Ctext value=\"Your Story\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Story 2: nature.hub (Active story) -->\n      \u003Ccol gap=\"6\" align=\"top-center\">\n        \u003Cframe w=\"64\" h=\"64\">\n          \u003C!-- IG Gradient Ring -->\n          \u003Cellipse fill=\"linear-gradient(135deg, #F91A00 0%, #E20078 30%, #FF8A00 70%, #FFD600 100%)\" w=\"64\" h=\"64\" \u002F>\n          \u003C!-- Black Inner Gap -->\n          \u003Cellipse fill=\"$bg\" w=\"60\" h=\"60\" abs=\"true\" x=\"2\" y=\"2\" \u002F>\n          \u003C!-- Story Avatar -->\n          \u003Cframe role=\"avatar\" w=\"54\" h=\"54\" abs=\"true\" x=\"5\" y=\"5\" radius=\"27\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1502082553048-f009c37129b9?auto=format&fit=crop&w=54&h=54&q=80\" w=\"54\" h=\"54\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n        \u003C\u002Fframe>\n        \u003Ctext value=\"nature.hub\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-primary\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Story 3: traveler (Active story) -->\n      \u003Ccol gap=\"6\" align=\"top-center\">\n        \u003Cframe w=\"64\" h=\"64\">\n          \u003C!-- IG Gradient Ring -->\n          \u003Cellipse fill=\"linear-gradient(135deg, #F91A00 0%, #E20078 30%, #FF8A00 70%, #FFD600 100%)\" w=\"64\" h=\"64\" \u002F>\n          \u003Cellipse fill=\"$bg\" w=\"60\" h=\"60\" abs=\"true\" x=\"2\" y=\"2\" \u002F>\n          \u003C!-- Story Avatar -->\n          \u003Cframe role=\"avatar\" w=\"54\" h=\"54\" abs=\"true\" x=\"5\" y=\"5\" radius=\"27\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=54&h=54&q=80\" w=\"54\" h=\"54\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n        \u003C\u002Fframe>\n        \u003Ctext value=\"traveler\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-primary\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Story 4: chef_lucas (Active story) -->\n      \u003Ccol gap=\"6\" align=\"top-center\">\n        \u003Cframe w=\"64\" h=\"64\">\n          \u003C!-- IG Gradient Ring -->\n          \u003Cellipse fill=\"linear-gradient(135deg, #F91A00 0%, #E20078 30%, #FF8A00 70%, #FFD600 100%)\" w=\"64\" h=\"64\" \u002F>\n          \u003Cellipse fill=\"$bg\" w=\"60\" h=\"60\" abs=\"true\" x=\"2\" y=\"2\" \u002F>\n          \u003C!-- Story Avatar -->\n          \u003Cframe role=\"avatar\" w=\"54\" h=\"54\" abs=\"true\" x=\"5\" y=\"5\" radius=\"27\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1577219491135-ce391730fb2c?auto=format&fit=crop&w=54&h=54&q=80\" w=\"54\" h=\"54\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n        \u003C\u002Fframe>\n        \u003Ctext value=\"chef_lucas\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-primary\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Story 5: art.gallery (Viewed\u002FInactive story) -->\n      \u003Ccol gap=\"6\" align=\"top-center\">\n        \u003Cframe w=\"64\" h=\"64\">\n          \u003C!-- Grey Inactive Ring -->\n          \u003Cellipse fill=\"$border\" w=\"64\" h=\"64\" \u002F>\n          \u003Cellipse fill=\"$bg\" w=\"60\" h=\"60\" abs=\"true\" x=\"2\" y=\"2\" \u002F>\n          \u003C!-- Story Avatar -->\n          \u003Cframe role=\"avatar\" w=\"54\" h=\"54\" abs=\"true\" x=\"5\" y=\"5\" radius=\"27\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494790108377-be9c29b29330?auto=format&fit=crop&w=54&h=54&q=80\" w=\"54\" h=\"54\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n        \u003C\u002Fframe>\n        \u003Ctext value=\"art.gallery\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n    \u003C\u002Frow>\n\n    \u003C!-- Thin Divider Line -->\n    \u003Crect fill=\"$border\" w=\"390\" h=\"1\" \u002F>\n\n    \u003C!-- 4. FEED POSTS -->\n\n    \u003C!-- POST 1: traveler (Amalfi Coast) -->\n    \u003Ccol role=\"card\" w=\"390\" fill=\"$bg\">\n      \n      \u003C!-- Post Header -->\n      \u003Crow w=\"390\" p=\"12 16\" align=\"middle-left\" gap=\"auto\">\n        \u003Crow gap=\"10\" align=\"middle-left\">\n          \u003C!-- Round Poster Avatar -->\n          \u003Cframe role=\"avatar\" w=\"32\" h=\"32\" radius=\"16\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=32&h=32&q=80\" w=\"32\" h=\"32\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n          \u003Ccol gap=\"2\">\n            \u003Crow gap=\"4\" align=\"middle-left\">\n              \u003Ctext value=\"traveler\" text-style=\"Headline\u002FSmall\" color=\"$text-primary\" \u002F>\n              \u003C!-- Verification Blue Badge -->\n              \u003Cimg role=\"badge\" src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbadge-check.svg?color=%230095f6&fill=%23ffffff\" w=\"12\" h=\"12\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Amalfi Coast, Italy\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"14\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n        \u003C!-- Options Button -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-horizontal.svg?color=%23ffffff\" w=\"20\" h=\"20\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Post Main Photo (Amalfi Coast) -->\n      \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1533900298318-6b8da08a523e?auto=format&fit=crop&w=390&h=390&q=80\" w=\"390\" h=\"390\" fit=\"cover\" \u002F>\n\n      \u003C!-- Post Action Buttons Area -->\n      \u003Crow w=\"390\" p=\"12 14\" align=\"middle-left\" gap=\"auto\">\n        \u003Crow gap=\"16\" align=\"middle-left\">\n          \u003C!-- Red Filled Heart (Liked State) -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fheart.svg?color=%23FF3040&fill=%23FF3040\" w=\"24\" h=\"24\" \u002F>\n          \u003C!-- Comment Icon -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmessage-circle.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n          \u003C!-- Share \u002F Direct Send Icon -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsend.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Bookmark Icon (Unsaved State) -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbookmark.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Likes Section -->\n      \u003Crow w=\"390\" p=\"0 16 6 16\" align=\"middle-left\">\n        \u003Ctext value=\"Liked by nature.hub and 4,892 others\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" color=\"$text-primary\" line-height=\"17\" w=\"358\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Caption Section -->\n      \u003Crow w=\"390\" p=\"2 16\" gap=\"6\" align=\"top-left\">\n        \u003Ctext w=\"358\">\n          \u003Csegment value=\"traveler \" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" color=\"$text-primary\" \u002F>\n          \u003Csegment value=\"Unbelievable golden hour in Amalfi. Can't wait to come back! 🇮🇹✨\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" color=\"$text-highlight\" \u002F>\n        \u003C\u002Ftext>\n      \u003C\u002Frow>\n\n      \u003C!-- Comments Preview -->\n      \u003Ccol w=\"390\" p=\"4 0\" gap=\"4\">\n        \u003C!-- View All Link -->\n        \u003Crow role=\"hyperlink\" w=\"390\" p=\"2 16\">\n          \u003Ctext value=\"View all 84 comments\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"17\" \u002F>\n        \u003C\u002Frow>\n        \n        \u003C!-- Highlight Comments Using Reusable Component -->\n        \u003Cinstance component=\"comp-comment-row\" username=\"nature.hub\" text=\"Stunner! Adding to my bucket list immediately. 🌅\" \u002F>\n        \u003Cinstance component=\"comp-comment-row\" username=\"chef_lucas\" text=\"Amazing colors! Need to eat there!\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Timestamp -->\n      \u003Crow w=\"390\" p=\"6 16 16 16\">\n        \u003Ctext value=\"42 minutes ago\" font-family=\"SF Pro\" font-size=\"10\" font-weight=\"400\" color=\"$text-tertiary\" line-height=\"14\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003Crect fill=\"$border\" w=\"390\" h=\"1\" \u002F>\n\n    \u003C!-- POST 2: creative.studio (Tokyo Street) -->\n    \u003Ccol role=\"card\" w=\"390\" fill=\"$bg\">\n      \n      \u003C!-- Post Header -->\n      \u003Crow w=\"390\" p=\"12 16\" align=\"middle-left\" gap=\"auto\">\n        \u003Crow gap=\"10\" align=\"middle-left\">\n          \u003C!-- Round Poster Avatar -->\n          \u003Cframe role=\"avatar\" w=\"32\" h=\"32\" radius=\"16\" clip=\"true\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494790108377-be9c29b29330?auto=format&fit=crop&w=32&h=32&q=80\" w=\"32\" h=\"32\" fit=\"cover\" \u002F>\n          \u003C\u002Fframe>\n          \u003Ccol gap=\"2\">\n            \u003Crow gap=\"4\" align=\"middle-left\">\n              \u003Ctext value=\"creative.studio\" text-style=\"Headline\u002FSmall\" color=\"$text-primary\" \u002F>\n              \u003Cimg role=\"badge\" src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbadge-check.svg?color=%230095f6&fill=%23ffffff\" w=\"12\" h=\"12\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext value=\"Tokyo, Japan\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"14\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n        \u003C!-- Options Button -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-horizontal.svg?color=%23ffffff\" w=\"20\" h=\"20\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Post Main Photo (Tokyo Neon) -->\n      \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1503899036084-c55cdd92da26?auto=format&fit=crop&w=390&h=390&q=80\" w=\"390\" h=\"390\" fit=\"cover\" \u002F>\n\n      \u003C!-- Post Action Buttons Area -->\n      \u003Crow w=\"390\" p=\"12 14\" align=\"middle-left\" gap=\"auto\">\n        \u003Crow gap=\"16\" align=\"middle-left\">\n          \u003C!-- Stroke Heart (Unliked State) -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fheart.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n          \u003C!-- Comment Icon -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmessage-circle.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n          \u003C!-- Share \u002F Direct Send Icon -->\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsend.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Bookmark Icon (Saved\u002FFilled State) -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbookmark.svg?color=%23ffffff&fill=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Likes Section -->\n      \u003Crow w=\"390\" p=\"0 16 6 16\" align=\"middle-left\">\n        \u003Ctext value=\"Liked by traveler and 1,204 others\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" color=\"$text-primary\" line-height=\"17\" w=\"358\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Caption Section -->\n      \u003Crow w=\"390\" p=\"2 16\" gap=\"6\" align=\"top-left\">\n        \u003Ctext w=\"358\">\n          \u003Csegment value=\"creative.studio \" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" color=\"$text-primary\" \u002F>\n          \u003Csegment value=\"Tokyo neon vibes at 2 AM. 🇯🇵🏮 #tokyo #neondreams\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" color=\"$text-highlight\" \u002F>\n        \u003C\u002Ftext>\n      \u003C\u002Frow>\n\n      \u003C!-- Comments Preview -->\n      \u003Ccol w=\"390\" p=\"4 0\" gap=\"4\">\n        \u003C!-- View All Link -->\n        \u003Crow role=\"hyperlink\" w=\"390\" p=\"2 16\">\n          \u003Ctext value=\"View all 12 comments\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" color=\"$text-secondary\" line-height=\"17\" \u002F>\n        \u003C\u002Frow>\n        \n        \u003C!-- Highlight Comments Using Reusable Component -->\n        \u003Cinstance component=\"comp-comment-row\" username=\"neon_dreamer\" text=\"The reflection on the wet asphalt is perfect! 🤩\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Timestamp -->\n      \u003Crow w=\"390\" p=\"6 16 16 16\">\n        \u003Ctext value=\"3 hours ago\" font-family=\"SF Pro\" font-size=\"10\" font-weight=\"400\" color=\"$text-tertiary\" line-height=\"14\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003Crect fill=\"$border\" w=\"390\" h=\"1\" \u002F>\n\n    \u003C!-- 5. Fixed Bottom Navigation Bar (Glassmorphic look) -->\n    \u003Ccol w=\"390\" fill=\"$surface\">\n      \n      \u003C!-- Icons Container -->\n      \u003Crow role=\"tab-bar\" w=\"390\" h=\"50\" align=\"middle-left\" border-top=\"1 $border\">\n        \u003C!-- Tab 1: Home (Selected\u002FFilled) -->\n        \u003Crow w=\"78\" h=\"50\" align=\"middle-center\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fhome.svg?color=%23ffffff&fill=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Tab 2: Search -->\n        \u003Crow w=\"78\" h=\"50\" align=\"middle-center\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsearch.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Tab 3: Create -->\n        \u003Crow w=\"78\" h=\"50\" align=\"middle-center\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplus-square.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Tab 4: Reels -->\n        \u003Crow w=\"78\" h=\"50\" align=\"middle-center\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Ffilm.svg?color=%23ffffff\" w=\"24\" h=\"24\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Tab 5: Profile (Small Circular User Profile Avatar) -->\n        \u003Crow w=\"78\" h=\"50\" align=\"middle-center\">\n          \u003Cellipse fill=\"$text-primary\" w=\"24\" h=\"24\" align=\"middle-center\">\n            \u003Cframe role=\"avatar\" w=\"22\" h=\"22\" radius=\"11\" clip=\"true\">\n              \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1534528741775-53994a69daeb?auto=format&fit=crop&w=22&h=22&q=80\" w=\"22\" h=\"22\" fit=\"cover\" \u002F>\n            \u003C\u002Fframe>\n          \u003C\u002Fellipse>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- iPhone Home Indicator Safe Area Bottom Spacer -->\n      \u003Cframe w=\"390\" h=\"34\" clip=\"true\">\n        \u003C!-- Home Indicator Bar -->\n        \u003Crect fill=\"#FFFFFF\" w=\"140\" h=\"5\" radius=\"3\" abs=\"true\" x=\"125\" y=\"15\" \u002F>\n      \u003C\u002Fframe>\n\n    \u003C\u002Fcol>\n\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172864]