[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-headspace-clone":3},"\u003Cgui version=\"0.2\" name=\"HeadspaceClone\">\n  \u003Ctokens>\n    \u003C!-- Color Palette -->\n    \u003Ccolor name=\"bg\" value=\"#FAF5EF\" \u002F>\n    \u003Ccolor name=\"surface\" value=\"#FFFFFF\" \u002F>\n    \u003Ccolor name=\"surface-elevated\" value=\"#FFFDF9\" \u002F>\n    \u003Ccolor name=\"border\" value=\"#EBE5DC\" \u002F>\n    \u003Ccolor name=\"text-primary\" value=\"#37322D\" \u002F>\n    \u003Ccolor name=\"text-secondary\" value=\"#7A7065\" \u002F>\n    \u003Ccolor name=\"text-tertiary\" value=\"#B8AEA2\" \u002F>\n    \n    \u003C!-- Accent Colors -->\n    \u003Ccolor name=\"primary-orange\" value=\"#FE7B47\" \u002F>\n    \u003Ccolor name=\"primary-orange-bg\" value=\"#FE7B471F\" \u002F>\n    \u003Ccolor name=\"sleep-blue\" value=\"#396A93\" \u002F>\n    \u003Ccolor name=\"sleep-blue-bg\" value=\"#396A931F\" \u002F>\n    \u003Ccolor name=\"focus-yellow\" value=\"#D97706\" \u002F>\n    \u003Ccolor name=\"focus-yellow-bg\" value=\"#FFFBEB\" \u002F>\n    \u003Ccolor name=\"move-green\" value=\"#10B981\" \u002F>\n    \u003Ccolor name=\"move-green-bg\" value=\"#F0FDF4\" \u002F>\n    \n    \u003C!-- Night Mode -->\n    \u003Ccolor name=\"night-bg\" value=\"#1C2D42\" \u002F>\n    \u003Ccolor name=\"white\" value=\"#FFFFFF\" \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!-- Corner Radius Scale -->\n    \u003Cnumber name=\"radius-subtle\" value=\"8\" \u002F>\n    \u003Cnumber name=\"radius-card\" value=\"24\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003C!-- Typography Scales (Optimized line-heights for spacious breathing room) -->\n    \u003Ctext-style name=\"Display\" font-family=\"SF Pro\" font-size=\"40\" font-weight=\"700\" line-height=\"52\" \u002F>\n    \u003Ctext-style name=\"LargeTitle\" font-family=\"SF Pro\" font-size=\"28\" font-weight=\"700\" line-height=\"34\" \u002F>\n    \u003Ctext-style name=\"Headline\" font-family=\"SF Pro\" font-size=\"17\" font-weight=\"600\" line-height=\"24\" \u002F>\n    \u003Ctext-style name=\"Body\" font-family=\"SF Pro\" font-size=\"17\" font-weight=\"400\" line-height=\"24\" \u002F>\n    \u003Ctext-style name=\"Subheadline\" font-family=\"SF Pro\" font-size=\"15\" font-weight=\"400\" line-height=\"22\" \u002F>\n    \u003Ctext-style name=\"Footnote\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Caption\" font-family=\"SF Pro\" font-size=\"12\" font-weight=\"500\" line-height=\"18\" letter-spacing=\"0.4\" \u002F>\n    \u003Ctext-style name=\"Tiny\" font-family=\"SF Pro\" font-size=\"10\" font-weight=\"600\" line-height=\"16\" letter-spacing=\"0.8\" \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  \u003C!-- iOS Root Layout Canvas (Width strictly 390px, height scrollable) -->\n  \u003Ccol w=\"390\" fill=\"$bg\">\n    \n    \u003C!-- iOS Top Safe Area Spacer -->\n    \u003Ccol h=\"47\" \u002F>\n\n    \u003C!-- Section 1: Navigation Header Bar (Title left, Smiling Mascot right) -->\n    \u003Crow role=\"top-navigation-bar\" w=\"fill\" p=\"16 20 8 20\" align=\"middle-left\" gap=\"12\">\n      \u003Ccol gap=\"4\">\n        \u003Ctext font-family=\"SF Pro\" font-size=\"20\" font-weight=\"700\" value=\"Good morning, Jinson\" color=\"$text-primary\" line-height=\"26\" \u002F>\n        \u003Ctext text-style=\"Footnote\" value=\"Let's find some space today.\" color=\"$text-secondary\" \u002F>\n      \u003C\u002Fcol>\n      \n      \u003Ccol w=\"fill\" \u002F>\n\n      \u003C!-- Headspace happy smiling mascot circle on the right -->\n      \u003Cframe w=\"40\" h=\"40\">\n        \u003Cellipse fill=\"$primary-orange\" w=\"40\" h=\"40\" x=\"0\" y=\"0\" \u002F>\n        \u003C!-- Eyes -->\n        \u003Cellipse fill=\"$white\" w=\"4\" h=\"4\" x=\"12\" y=\"13\" \u002F>\n        \u003Cellipse fill=\"$white\" w=\"4\" h=\"4\" x=\"24\" y=\"13\" \u002F>\n        \u003C!-- Smile -->\n        \u003Crect fill=\"$white\" w=\"14\" h=\"4\" radius=\"2\" x=\"13\" y=\"21\" \u002F>\n      \u003C\u002Fframe>\n    \u003C\u002Frow>\n\n    \u003C!-- Main Content Stream (Enforced w=\"fill\" stretching to prevent jamming) -->\n    \u003Ccol w=\"fill\" p=\"8 16 12 16\" gap=\"16\">\n\n      \u003C!-- Playful Streak Banner (Mindfulness Streak) -->\n      \u003Crow role=\"banner\" w=\"fill\" fill=\"$surface\" radius=\"16\" p=\"10 16\" gap=\"12\" align=\"middle-left\" border=\"1 $border\">\n        \u003Crow fill=\"$primary-orange-bg\" p=\"4 8\" radius=\"10\" align=\"middle-center\" gap=\"4\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fflame.svg?color=%23FE7B47\" w=\"14\" h=\"14\" \u002F>\n          \u003Ctext font-family=\"SF Pro\" font-size=\"12\" font-weight=\"700\" value=\"6\" color=\"$primary-orange\" line-height=\"16\" \u002F>\n        \u003C\u002Frow>\n        \u003Ccol gap=\"2\" w=\"fill\">\n          \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" value=\"6 Day Meditation Streak\" color=\"$text-primary\" line-height=\"18\" \u002F>\n          \u003Ctext font-family=\"SF Pro\" font-size=\"10\" font-weight=\"600\" value=\"YOUR HIGHEST STREAK YET! KEEP GOING.\" color=\"$text-secondary\" line-height=\"14\" letter-spacing=\"0.4\" \u002F>\n        \u003C\u002Fcol>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fchevron-right.svg?color=%237A7065\" w=\"16\" h=\"16\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Hero \"Today's Meditation\" Card -->\n      \u003Ccol role=\"card\" w=\"fill\" fill=\"$surface\" radius=\"$radius-card\" p=\"16\" gap=\"14\" border=\"1 $border\">\n        \u003C!-- Beautiful Cozy Headspace Meditation Mascot Illustration -->\n        \u003Cimg src=\"assets\u002Fmeditation_illustration.png\" w=\"326\" h=\"240\" radius=\"16\" fit=\"cover\" \u002F>\n        \n        \u003Ccol gap=\"4\" w=\"fill\">\n          \u003Crow fill=\"$primary-orange-bg\" p=\"2 8\" radius=\"6\" w=\"150\" align=\"middle-center\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"11\" font-weight=\"700\" value=\"DAILY FOCUS • 5-10 MIN\" color=\"$primary-orange\" line-height=\"14\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext text-style=\"LargeTitle\" value=\"Managing Daily Stress\" color=\"$text-primary\" \u002F>\n          \u003Ctext text-style=\"Footnote\" value=\"Find a comfortable seat, settle in, and let go of tension with today's guided session.\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Play Button -->\n        \u003Crow role=\"button\" fill=\"$primary-orange\" p=\"12 24\" radius=\"$radius-pill\" gap=\"8\" align=\"middle-center\" w=\"180\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplay.svg?color=%23FFFFFF\" w=\"16\" h=\"16\" \u002F>\n          \u003Ctext font-family=\"SF Pro\" font-size=\"14\" font-weight=\"700\" value=\"Play Session\" color=\"$white\" line-height=\"18\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003C!-- 2x2 Mindfulness Pillars Grid -->\n      \u003Cgrid columns=\"2\" gap=\"12\" w=\"fill\">\n        \n        \u003C!-- Pillar 1: Meditate -->\n        \u003Ccol role=\"card\" w=\"fill\" fill=\"#FFF4F0\" radius=\"20\" p=\"14\" gap=\"10\" border=\"1 #FE7B471F\">\n          \u003Crow w=\"36\" h=\"36\" radius=\"18\" fill=\"$white\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbrain.svg?color=%23FE7B47\" w=\"18\" h=\"18\" \u002F>\n          \u003C\u002Frow>\n          \u003Ccol gap=\"2\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"16\" font-weight=\"700\" value=\"Meditate\" color=\"$text-primary\" line-height=\"20\" \u002F>\n            \u003Ctext font-family=\"SF Pro\" font-size=\"12\" font-weight=\"500\" value=\"Find peace\" color=\"#FE7B47\" line-height=\"16\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Fcol>\n\n        \u003C!-- Pillar 2: Sleep -->\n        \u003Ccol role=\"card\" w=\"fill\" fill=\"#F0F5FA\" radius=\"20\" p=\"14\" gap=\"10\" border=\"1 #396A931F\">\n          \u003Crow w=\"36\" h=\"36\" radius=\"18\" fill=\"$white\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmoon.svg?color=%23396A93\" w=\"18\" h=\"18\" \u002F>\n          \u003C\u002Frow>\n          \u003Ccol gap=\"2\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"16\" font-weight=\"700\" value=\"Sleep\" color=\"$text-primary\" line-height=\"20\" \u002F>\n            \u003Ctext font-family=\"SF Pro\" font-size=\"12\" font-weight=\"500\" value=\"Drift off\" color=\"#396A93\" line-height=\"16\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Fcol>\n\n        \u003C!-- Pillar 3: Focus -->\n        \u003Ccol role=\"card\" w=\"fill\" fill=\"#FFFBEB\" radius=\"20\" p=\"14\" gap=\"10\" border=\"1 #D977061F\">\n          \u003Crow w=\"36\" h=\"36\" radius=\"18\" fill=\"$white\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsparkles.svg?color=%23D97706\" w=\"18\" h=\"18\" \u002F>\n          \u003C\u002Frow>\n          \u003Ccol gap=\"2\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"16\" font-weight=\"700\" value=\"Focus\" color=\"$text-primary\" line-height=\"20\" \u002F>\n            \u003Ctext font-family=\"SF Pro\" font-size=\"12\" font-weight=\"500\" value=\"Get clarity\" color=\"#D97706\" line-height=\"16\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Fcol>\n\n        \u003C!-- Pillar 4: Move -->\n        \u003Ccol role=\"card\" w=\"fill\" fill=\"#F0FDF4\" radius=\"20\" p=\"14\" gap=\"10\" border=\"1 #10B9811F\">\n          \u003Crow w=\"36\" h=\"36\" radius=\"18\" fill=\"$white\" align=\"middle-center\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbike.svg?color=%2310B981\" w=\"18\" h=\"18\" \u002F>\n          \u003C\u002Frow>\n          \u003Ccol gap=\"2\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"16\" font-weight=\"700\" value=\"Move\" color=\"$text-primary\" line-height=\"20\" \u002F>\n            \u003Ctext font-family=\"SF Pro\" font-size=\"12\" font-weight=\"500\" value=\"Active mind\" color=\"#10B981\" line-height=\"16\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Fcol>\n\n      \u003C\u002Fgrid>\n\n      \u003C!-- Cozy Night \"Sleepcast\" Card (Deep Indigo theme) -->\n      \u003Ccol role=\"card\" w=\"fill\" fill=\"$night-bg\" radius=\"$radius-card\" p=\"16\" gap=\"14\">\n        \u003C!-- Beautiful Cozy Headspace Sleepcast Illustration -->\n        \u003Cimg src=\"assets\u002Fsleepcast_illustration.png\" w=\"326\" h=\"240\" radius=\"16\"  \u002F>\n        \n        \u003Ccol gap=\"4\" w=\"fill\">\n          \u003Crow fill=\"#FFFFFF20\" p=\"2 8\" radius=\"6\" w=\"120\" align=\"middle-center\">\n            \u003Ctext font-family=\"SF Pro\" font-size=\"11\" font-weight=\"700\" value=\"SLEEPCAST • 45 MIN\" color=\"$white\" line-height=\"14\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext font-family=\"SF Pro\" font-size=\"24\" font-weight=\"700\" value=\"Rainday Antiques\" color=\"$white\" line-height=\"30\" \u002F>\n          \u003Ctext text-style=\"Footnote\" value=\"A warm, drafty antique shop on a rainy night. Settle in and let the gentle rain soothe your mind.\" color=\"#A3C7E8\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Drift Away Button -->\n        \u003Crow role=\"button\" fill=\"$white\" p=\"12 24\" radius=\"$radius-pill\" gap=\"8\" align=\"middle-center\" w=\"160\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmoon.svg?color=%231C2D42\" w=\"16\" h=\"16\" \u002F>\n          \u003Ctext font-family=\"SF Pro\" font-size=\"14\" font-weight=\"700\" value=\"Drift Away\" color=\"#1C2D42\" line-height=\"18\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003Ccol h=\"12\" \u002F>\n\n    \u003C\u002Fcol>\n\n    \u003C!-- Section 5: iOS Fixed-Style Bottom Tab Bar Spacer -->\n    \u003Crow role=\"tab-bar\" w=\"390\" h=\"83\" fill=\"$surface\" p=\"10 24 34 24\" gap=\"auto\" align=\"middle-center\" border=\"1 $border\">\n      \n      \u003C!-- Tab 1: Today (Active) -->\n      \u003Ccol gap=\"4\" align=\"middle-center\" w=\"50\">\n        \u003C!-- Headspace Smiling Mascot circle as Active Home button! -->\n        \u003Cframe w=\"20\" h=\"20\">\n          \u003Cellipse fill=\"$primary-orange\" w=\"20\" h=\"20\" x=\"0\" y=\"0\" \u002F>\n          \u003C!-- Eyes -->\n          \u003Cellipse fill=\"$white\" w=\"2\" h=\"2\" x=\"6\" y=\"6\" \u002F>\n          \u003Cellipse fill=\"$white\" w=\"2\" h=\"2\" x=\"12\" y=\"6\" \u002F>\n          \u003C!-- Smile -->\n          \u003Crect fill=\"$white\" w=\"8\" h=\"2\" radius=\"1\" x=\"6\" y=\"11\" \u002F>\n        \u003C\u002Fframe>\n        \u003Ctext font-family=\"SF Pro\" font-size=\"10\" font-weight=\"700\" value=\"Today\" color=\"$primary-orange\" line-height=\"14\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Tab 2: Meditate (Inactive) -->\n      \u003Ccol gap=\"4\" align=\"middle-center\" w=\"50\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbrain.svg?color=%2364748B\" w=\"20\" h=\"20\" \u002F>\n        \u003Ctext text-style=\"Tiny\" value=\"Meditate\" color=\"$text-tertiary\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Tab 3: Sleep (Inactive) -->\n      \u003Ccol gap=\"4\" align=\"middle-center\" w=\"50\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmoon.svg?color=%2364748B\" w=\"20\" h=\"20\" \u002F>\n        \u003Ctext text-style=\"Tiny\" value=\"Sleep\" color=\"$text-tertiary\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Tab 4: Focus (Inactive) -->\n      \u003Ccol gap=\"4\" align=\"middle-center\" w=\"50\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsparkles.svg?color=%2364748B\" w=\"20\" h=\"20\" \u002F>\n        \u003Ctext text-style=\"Tiny\" value=\"Focus\" color=\"$text-tertiary\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- Tab 5: Profile (Inactive) -->\n      \u003Ccol gap=\"4\" align=\"middle-center\" w=\"50\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fuser.svg?color=%2364748B\" w=\"20\" h=\"20\" \u002F>\n        \u003Ctext text-style=\"Tiny\" value=\"Profile\" color=\"$text-tertiary\" \u002F>\n      \u003C\u002Fcol>\n      \n    \u003C\u002Frow>\n\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172858]