[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-dotgui-landing-page":3},"\u003Cgui version=\"0.2\" name=\"DotGuiLandingPage\">\n  \u003Ctokens>\n    \u003C!-- Premium Space Obsidian Color Palette -->\n    \u003Ccolor name=\"bg\" value=\"#050507\" \u002F>\n    \u003Ccolor name=\"surface\" value=\"#0C0C10\" \u002F>\n    \u003Ccolor name=\"surface-2\" value=\"#12121A\" \u002F>\n    \u003Ccolor name=\"border\" value=\"#FFFFFF0D\" \u002F>\n    \u003Ccolor name=\"border-strong\" value=\"#FFFFFF1D\" \u002F>\n    \u003Ccolor name=\"text-primary\" value=\"#FAFAFC\" \u002F>\n    \u003Ccolor name=\"text-secondary\" value=\"#A0A0AB\" \u002F>\n    \u003Ccolor name=\"text-tertiary\" value=\"#52525B\" \u002F>\n    \n    \u003C!-- Accent Color: Ice Cyan (Calibrated Saturation) -->\n    \u003Ccolor name=\"primary\" value=\"#00D2FF\" \u002F>\n    \u003Ccolor name=\"primary-glow\" value=\"#00D2FF1A\" \u002F>\n    \u003Ccolor name=\"accent-purple\" value=\"#7A3DFF\" \u002F>\n    \u003Ccolor name=\"accent-purple-glow\" value=\"#7A3DFF1A\" \u002F>\n    \n    \u003C!-- Sizing & Radii Scales -->\n    \u003Cnumber name=\"radius-sm\" value=\"6\" \u002F>\n    \u003Cnumber name=\"radius-md\" value=\"12\" \u002F>\n    \u003Cnumber name=\"radius-lg\" value=\"20\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003C!-- Typography System -->\n    \u003Ctext-style name=\"Display\u002FHero\" font-family=\"Outfit\" font-size=\"64\" font-weight=\"700\" line-height=\"72\" letter-spacing=\"-1.5\" \u002F>\n    \u003Ctext-style name=\"Display\u002FSection\" font-family=\"Outfit\" font-size=\"44\" font-weight=\"600\" line-height=\"52\" letter-spacing=\"-1.0\" \u002F>\n    \u003Ctext-style name=\"Display\u002FTitle\" font-family=\"Outfit\" font-size=\"22\" font-weight=\"600\" line-height=\"28\" letter-spacing=\"-0.5\" \u002F>\n    \u003Ctext-style name=\"Display\u002FSubtitle\" font-family=\"Inter\" font-size=\"18\" font-weight=\"400\" line-height=\"28\" \u002F>\n    \n    \u003Ctext-style name=\"Body\u002FLarge\" font-family=\"Inter\" font-size=\"16\" font-weight=\"400\" line-height=\"26\" \u002F>\n    \u003Ctext-style name=\"Body\u002FRegular\" font-family=\"Inter\" font-size=\"14\" font-weight=\"400\" line-height=\"22\" \u002F>\n    \u003Ctext-style name=\"Body\u002FStrong\" font-family=\"Inter\" font-size=\"14\" font-weight=\"600\" line-height=\"22\" \u002F>\n    \n    \u003Ctext-style name=\"Caption\" font-family=\"Inter\" font-size=\"12\" font-weight=\"400\" line-height=\"16\" \u002F>\n    \u003Ctext-style name=\"Micro\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"600\" line-height=\"14\" letter-spacing=\"1.5\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"Outfit\" source=\"google\" weights=\"300 400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Inter\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"JetBrains Mono\" source=\"google\" weights=\"400 500\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003Ccomponents>\n    \u003C!-- Navigation Link Component -->\n    \u003Ccomponent name=\"Nav\u002FLink\" id=\"comp-nav-link\">\n      \u003Cprops>\n        \u003Cprop name=\"label\" type=\"text\" target=\"lbl\" \u002F>\n      \u003C\u002Fprops>\n      \u003Crow role=\"hyperlink\" p=\"6 12\" radius=\"$radius-sm\" align=\"middle-center\">\n        \u003Ctext id=\"lbl\" value=\"Link\" font-family=\"Inter\" font-size=\"14\" font-weight=\"500\" color=\"$text-secondary\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Button Primary Component -->\n    \u003Ccomponent name=\"Button\u002FPrimary\" id=\"comp-btn-primary\">\n      \u003Cprops>\n        \u003Cprop name=\"label\" type=\"text\" target=\"lbl\" \u002F>\n      \u003C\u002Fprops>\n      \u003Crow role=\"button\" fill=\"$primary\" radius=\"$radius-pill\" p=\"12 24\" align=\"middle-center\" gap=\"8\">\n        \u003Ctext id=\"lbl\" value=\"Action\" font-family=\"Inter\" font-size=\"14\" font-weight=\"600\" color=\"#050507\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002FHoIRqRkDGmVPwUtwUwj.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fassets\u002Fassets\u002Farrow-right.svg\" w=\"14\" h=\"14\" abs=\"true\" x=\"0\" y=\"0\" \u002F> \u003C!-- Fallback or empty, use Iconify instead -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-right.svg?color=%23050507\" w=\"14\" h=\"14\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Button Secondary Component -->\n    \u003Ccomponent name=\"Button\u002FSecondary\" id=\"comp-btn-secondary\">\n      \u003Cprops>\n        \u003Cprop name=\"label\" type=\"text\" target=\"lbl\" \u002F>\n      \u003C\u002Fprops>\n      \u003Crow role=\"button\" fill=\"none\" border=\"1 $border-strong\" radius=\"$radius-pill\" p=\"12 24\" align=\"middle-center\" gap=\"8\">\n        \u003Ctext id=\"lbl\" value=\"Action\" font-family=\"Inter\" font-size=\"14\" font-weight=\"600\" color=\"$text-primary\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Anatomy Card Component -->\n    \u003Ccomponent name=\"Anatomy\u002FCard\" id=\"comp-anat-card\">\n      \u003Cprops>\n        \u003Cprop name=\"step\" type=\"text\" target=\"step-lbl\" \u002F>\n        \u003Cprop name=\"title\" type=\"text\" target=\"title-lbl\" \u002F>\n        \u003Cprop name=\"desc\" type=\"text\" target=\"desc-lbl\" \u002F>\n        \u003Cprop name=\"icon\" type=\"text\" target=\"icon-img\" \u002F>\n      \u003C\u002Fprops>\n      \u003Ccol role=\"card\" fill=\"linear-gradient(135deg, #ffffff0a 0%, #ffffff02 100%)\" border=\"1 $border\" radius=\"$radius-lg\" p=\"32\" gap=\"20\" align=\"top-left\" w=\"376\">\n        \u003Cappearance>\n          \u003Ceffect type=\"glass\" radius=\"20\" \u002F>\n        \u003C\u002Fappearance>\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003Crow w=\"48\" h=\"48\" fill=\"#ffffff0A\" border=\"1 $border-strong\" radius=\"12\" align=\"middle-center\">\n            \u003Cimg id=\"icon-img\" src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Ffile-text.svg?color=%2300D2FF\" w=\"22\" h=\"22\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext id=\"step-lbl\" value=\"01\" font-family=\"Outfit\" font-size=\"12\" font-weight=\"700\" color=\"$primary\" letter-spacing=\"1\" \u002F>\n        \u003C\u002Frow>\n        \u003Ccol gap=\"8\" align=\"top-left\">\n          \u003Ctext id=\"title-lbl\" value=\"File Name\" text-style=\"Display\u002FTitle\" color=\"$text-primary\" \u002F>\n          \u003Ctext id=\"desc-lbl\" value=\"Description goes here.\" text-style=\"Body\u002FRegular\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n    \u003C\u002Fcomponent>\n\n    \u003C!-- Feature Tile Component -->\n    \u003Ccomponent name=\"Feature\u002FTile\" id=\"comp-feat-tile\">\n      \u003Cprops>\n        \u003Cprop name=\"title\" type=\"text\" target=\"title-lbl\" \u002F>\n        \u003Cprop name=\"desc\" type=\"text\" target=\"desc-lbl\" \u002F>\n        \u003Cprop name=\"icon\" type=\"text\" target=\"icon-img\" \u002F>\n      \u003C\u002Fprops>\n      \u003Ccol role=\"card\" gap=\"16\" align=\"top-left\" w=\"360\">\n        \u003Crow w=\"40\" h=\"40\" fill=\"#ffffff05\" border=\"1 $border\" radius=\"8\" align=\"middle-center\">\n          \u003Cimg id=\"icon-img\" src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2300D2FF\" w=\"18\" h=\"18\" \u002F>\n        \u003C\u002Frow>\n        \u003Ccol gap=\"8\" align=\"top-left\">\n          \u003Ctext id=\"title-lbl\" value=\"Feature Title\" font-family=\"Outfit\" font-size=\"18\" font-weight=\"600\" color=\"$text-primary\" \u002F>\n          \u003Ctext id=\"desc-lbl\" value=\"Feature description text goes here.\" text-style=\"Body\u002FRegular\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n    \u003C\u002Fcomponent>\n  \u003C\u002Fcomponents>\n\n  \u003C!-- Root Canvas (Web Desktop: 1440w, Height hugs children) -->\n  \u003Ccol w=\"1440\" fill=\"$bg\" align=\"top-center\">\n\n    \u003C!-- ==================== HEADER \u002F NAVIGATION ==================== -->\n    \u003Crow role=\"top-navigation-bar\" w=\"fill\" h=\"80\" p=\"0 120\" align=\"middle-left\" gap=\"auto\" fill=\"$bg\">\n      \u003Crow gap=\"8\" align=\"middle-left\">\n        \u003Cellipse fill=\"$primary\" w=\"12\" h=\"12\" \u002F>\n        \u003Ctext value=\".gui\" font-family=\"Outfit\" font-size=\"22\" font-weight=\"700\" color=\"$text-primary\" letter-spacing=\"-0.5\" \u002F>\n      \u003C\u002Frow>\n      \n      \u003Crow gap=\"8\" align=\"middle-center\">\n        \u003Cinstance component=\"comp-nav-link\" label=\"Blueprint\" \u002F>\n        \u003Cinstance component=\"comp-nav-link\" label=\"Anatomy\" \u002F>\n        \u003Cinstance component=\"comp-nav-link\" label=\"Specification\" \u002F>\n        \u003Cinstance component=\"comp-nav-link\" label=\"Design System\" \u002F>\n      \u003C\u002Frow>\n\n      \u003Crow gap=\"16\" align=\"middle-right\">\n        \u003Cinstance component=\"comp-btn-secondary\" label=\"Read the Spec\" \u002F>\n        \u003Cinstance component=\"comp-btn-primary\" label=\"Get Started\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- ==================== HERO SECTION (Frame with ambient glows) ==================== -->\n    \u003Cframe w=\"1440\" h=\"680\" fill=\"$bg\" clip=\"true\">\n      \u003C!-- Glow background layers (Signature Move) -->\n      \u003Cellipse w=\"600\" h=\"600\" fill=\"radial-gradient(circle at 50% 50%, #00D2FF13 0%, #05050700 70%)\" abs=\"true\" x=\"420\" y=\"-150\" \u002F>\n      \u003Cellipse w=\"500\" h=\"500\" fill=\"radial-gradient(circle at 50% 50%, #7A3DFF0D 0%, #05050700 70%)\" abs=\"true\" x=\"720\" y=\"-100\" \u002F>\n      \n      \u003C!-- Grid\u002FColumn Container for Hero Text -->\n      \u003Ccol w=\"1200\" gap=\"32\" align=\"top-center\" abs=\"true\" x=\"120\" y=\"120\">\n        \u003C!-- Badge -->\n        \u003Crow role=\"badge\" fill=\"#ffffff08\" border=\"1 $border-strong\" radius=\"$radius-pill\" p=\"8 16\" align=\"middle-center\" gap=\"8\" w=\"fit\">\n          \u003Ctext value=\"THE INTERFACE ARCHIVE STANDARD\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \u003Cellipse w=\"6\" h=\"6\" fill=\"$primary\" \u002F>\n        \u003C\u002Frow>\n\n        \u003C!-- Main Title -->\n        \u003Ccol gap=\"0\" align=\"top-center\">\n          \u003Ctext value=\"A Renderer-Safe Interface\" text-style=\"Display\u002FHero\" color=\"$text-primary\" align=\"center\" \u002F>\n          \u003Ctext value=\"Packaging Standard\" text-style=\"Display\u002FHero\" color=\"$primary\" align=\"center\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Subtitle -->\n        \u003Ctext value=\"A .gui file is a self-contained, validated interface package designed for agentic coding. It bridges the gap between AI generation and absolute visual fidelity.\" text-style=\"Display\u002FSubtitle\" color=\"$text-secondary\" align=\"center\" w=\"820\" \u002F>\n\n        \u003C!-- Hero CTAs -->\n        \u003Crow gap=\"16\" align=\"middle-center\">\n          \u003Cinstance component=\"comp-btn-primary\" label=\"Explore the Standard\" \u002F>\n          \u003Cinstance component=\"comp-btn-secondary\" label=\"Download SDK\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n\n      \u003C!-- Bottom border line -->\n      \u003Cline fill=\"$border\" abs=\"true\" x=\"120\" y=\"679\" w=\"1200\" h=\"1\" \u002F>\n    \u003C\u002Fframe>\n\n    \u003C!-- ==================== ANATOMY SECTION ==================== -->\n    \u003Ccol w=\"1440\" p=\"96 120\" gap=\"64\" align=\"top-center\">\n      \u003C!-- Section Header -->\n      \u003Ccol gap=\"12\" align=\"top-center\" w=\"1200\">\n        \u003Ctext value=\"STRUCTURED PORATBILITY\" text-style=\"Micro\" color=\"$primary\" \u002F>\n        \u003Ctext value=\"Inside the .gui Package\" text-style=\"Display\u002FSection\" color=\"$text-primary\" \u002F>\n        \u003Ctext value=\"Every interface is compiled into a lightweight ZIP archive. By packaging design tokens, markup, and assets together, layouts remain robust and portable.\" text-style=\"Display\u002FSubtitle\" color=\"$text-secondary\" align=\"center\" w=\"780\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- 3-Column Cards Row -->\n      \u003Crow w=\"1200\" gap=\"36\" align=\"top-center\">\n        \u003Cinstance component=\"comp-anat-card\" step=\"01 \u002F BLUEPRINT\" title=\"design.guix\" desc=\"The core UI blueprint. An XML document utilizing layout flow rules (col, row, grid) and token references. Eliminates complex CSS layouts.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcode-2.svg?color=%2300D2FF\" \u002F>\n        \u003Cinstance component=\"comp-anat-card\" step=\"02 \u002F SNAPSHOT\" title=\"preview.webp\" desc=\"Pre-compiled visual evidence. Built-in thumbnail preview guarantees instant representation and layout verification across renderers.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Feye.svg?color=%2300D2FF\" \u002F>\n        \u003Cinstance component=\"comp-anat-card\" step=\"03 \u002F VAULT\" title=\"assets\u002F\" desc=\"Self-contained local assets. Packs SVGs, icons, and branded images directly into the bundle. Zero external connection breakages.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Ffolder-archive.svg?color=%2300D2FF\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Section separator -->\n      \u003Cline fill=\"$border\" w=\"1200\" h=\"1\" \u002F>\n    \u003C\u002Fcol>\n\n    \u003C!-- ==================== CODE ISLAND SHOWCASE ==================== -->\n    \u003Crow w=\"1440\" p=\"32 120 96 120\" align=\"top-center\" gap=\"80\">\n      \n      \u003C!-- Left Info Column -->\n      \u003Ccol w=\"520\" gap=\"24\" align=\"top-left\">\n        \u003Ctext value=\"MARKUP SANITY\" text-style=\"Micro\" color=\"$primary\" \u002F>\n        \u003Ctext value=\"Flow Layouts Made Deterministic\" text-style=\"Display\u002FSection\" color=\"$text-primary\" \u002F>\n        \u003Ctext value=\"Traditional HTML and CSS are filled with legacy layouts and ambient bugs. The .gui standard replaces this complexity with a constrained layout engine: columns flow vertically, rows flow horizontally, and grids follow track templates.\" text-style=\"Body\u002FLarge\" color=\"$text-secondary\" \u002F>\n        \n        \u003Ccol gap=\"16\" w=\"fill\">\n          \u003Crow gap=\"12\" align=\"top-left\">\n            \u003Crow w=\"24\" h=\"24\" radius=\"12\" fill=\"$primary-glow\" border=\"1 $primary\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2300D2FF\" w=\"12\" h=\"12\" \u002F>\n            \u003C\u002Frow>\n            \u003Ccol gap=\"4\" w=\"480\">\n              \u003Ctext value=\"Tokenized Hierarchy\" text-style=\"Body\u002FStrong\" color=\"$text-primary\" \u002F>\n              \u003Ctext value=\"Spacing, colors, and typography map directly to design system tokens.\" text-style=\"Body\u002FRegular\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n          \u003Crow gap=\"12\" align=\"top-left\">\n            \u003Crow w=\"24\" h=\"24\" radius=\"12\" fill=\"$primary-glow\" border=\"1 $primary\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2300D2FF\" w=\"12\" h=\"12\" \u002F>\n            \u003C\u002Frow>\n            \u003Ccol gap=\"4\" w=\"480\">\n              \u003Ctext value=\"No Spacer Elements\" text-style=\"Body\u002FStrong\" color=\"$text-primary\" \u002F>\n              \u003Ctext value=\"Spacing is governed by gap and padding attributes on parents, keeping markup clean.\" text-style=\"Body\u002FRegular\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n\n      \u003C!-- Right Code Window (Signature Move) -->\n      \u003Ccol w=\"600\" fill=\"#0C0C10\" border=\"1 $border-strong\" radius=\"$radius-md\" p=\"0\" clip=\"true\">\n        \u003C!-- Editor Header -->\n        \u003Crow w=\"fill\" h=\"44\" fill=\"#0A0A0E\" border-bottom=\"1 $border\" p=\"0 16\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Window buttons -->\n          \u003Crow gap=\"8\" align=\"middle-left\">\n            \u003Cellipse w=\"10\" h=\"10\" fill=\"#FF5F56\" \u002F>\n            \u003Cellipse w=\"10\" h=\"10\" fill=\"#FFBD2E\" \u002F>\n            \u003Cellipse w=\"10\" h=\"10\" fill=\"#27C93F\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Active Tab -->\n          \u003Crow fill=\"#12121A\" border=\"1 $border\" radius=\"6 6 0 0\" p=\"8 16\" align=\"middle-center\" h=\"44\">\n            \u003Ctext value=\"design.guix\" font-family=\"JetBrains Mono\" font-size=\"12\" font-weight=\"500\" color=\"$text-primary\" \u002F>\n          \u003C\u002Frow>\n          \u003Crow gap=\"12\" align=\"middle-right\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcopy.svg?color=%23A0A0AB\" w=\"14\" h=\"14\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n        \n        \u003C!-- Editor Content -->\n        \u003Ccol p=\"24\" gap=\"6\" w=\"fill\" align=\"top-left\">\n          \u003C!-- Line 1 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"01  \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"gui\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" version\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"0.2\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" name\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"LandingPage\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 2 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"02    \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"tokens\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 3 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"03      \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"color\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" name\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"primary\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" value\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"#00D2FF\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\" \u002F>\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 4 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"04    \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\u002F\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"tokens\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 5 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"05    \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"col\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" w\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"1440\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" fill\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"#070709\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 6 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"06      \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"row\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" w\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"fill\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" gap\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"auto\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 7 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"07        \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"text\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" value\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"Overview\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" color\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"#FFFFFF\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\" \u002F>\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 8 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"08        \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"rect\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" fill\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"$primary\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" w\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"120\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#D19A66\" value=\" h\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#98C379\" value='=\"40\"' \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\" \u002F>\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 9 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"09      \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\u002F\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"row\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 10 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"10    \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\u002F\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"col\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n          \u003C!-- Line 11 -->\n          \u003Crow gap=\"0\">\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#52525B\" value=\"11  \" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\"<\u002F\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#E06C75\" value=\"gui\" \u002F>\n            \u003Ctext font-family=\"JetBrains Mono\" font-size=\"12\" line-height=\"18\" color=\"#A0A0AB\" value=\">\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n\n    \u003C\u002Frow>\n\n    \u003C!-- ==================== WHY .GUI? SECTION (Grid of features) ==================== -->\n    \u003Ccol w=\"1440\" p=\"96 120\" gap=\"64\" align=\"top-center\" fill=\"$surface\">\n      \u003C!-- Section Header -->\n      \u003Ccol gap=\"12\" align=\"top-center\" w=\"1200\">\n        \u003Ctext value=\"ENGINEERED FOR PROGRESS\" text-style=\"Micro\" color=\"$primary\" \u002F>\n        \u003Ctext value=\"The Interface Engine for AI Workflows\" text-style=\"Display\u002FSection\" color=\"$text-primary\" \u002F>\n        \u003Ctext value=\"Standardized specifications reduce token length and guarantee layout accuracy. Designed from the ground up to prevent visual hallucinations.\" text-style=\"Display\u002FSubtitle\" color=\"$text-secondary\" align=\"center\" w=\"780\" \u002F>\n      \u003C\u002Fcol>\n\n      \u003C!-- 3-Column Features -->\n      \u003Crow w=\"1200\" gap=\"60\" align=\"top-center\">\n        \u003Cinstance component=\"comp-feat-tile\" title=\"Absolute Determinism\" desc=\"Omits fragile CSS sizing algorithms. Everything is laid out using clear vertical columns, horizontal rows, or responsive grids that render consistently.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fshield-check.svg?color=%2300D2FF\" \u002F>\n        \u003Cinstance component=\"comp-feat-tile\" title=\"Cascading Mode Axes\" desc=\"Native design token system supports cascading axes for light and dark themes. Swapping appearances doesn't require rebuilding any code structures.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fsun-moon.svg?color=%2300D2FF\" \u002F>\n        \u003Cinstance component=\"comp-feat-tile\" title=\"AI-Native Authoring\" desc=\"Lightweight, highly structured XML schema is designed to prevent LLM errors. Short tag syntax reduces compile overhead and generation times.\" icon=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fterminal.svg?color=%2300D2FF\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- ==================== CALL TO ACTION BANNER ==================== -->\n    \u003Ccol w=\"1440\" p=\"96 120\" align=\"top-center\">\n      \u003Ccol w=\"1200\" fill=\"linear-gradient(135deg, #00D2FF14 0%, #7A3DFF05 100%)\" border=\"1 $border-strong\" radius=\"$radius-lg\" p=\"64\" gap=\"24\" align=\"top-center\">\n        \u003Ctext value=\"Standardize Your AI-Authored UIs\" font-family=\"Outfit\" font-size=\"36\" font-weight=\"600\" color=\"$text-primary\" align=\"center\" \u002F>\n        \u003Ctext value=\"Ready to compile, package, and deploy portable interfaces? Explore our command-line compiler.\" text-style=\"Display\u002FSubtitle\" color=\"$text-secondary\" align=\"center\" w=\"700\" \u002F>\n        \u003Crow gap=\"16\" align=\"middle-center\" p=\"8 0 0 0\">\n          \u003Cinstance component=\"comp-btn-primary\" label=\"Get Started Now\" \u002F>\n          \u003Cinstance component=\"comp-btn-secondary\" label=\"Read Documentation\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n    \u003C\u002Fcol>\n\n    \u003C!-- ==================== FOOTER ==================== -->\n    \u003Ccol w=\"1440\" p=\"80 120\" gap=\"48\" align=\"top-center\" fill=\"$bg\">\n      \u003Cline fill=\"$border\" w=\"1200\" h=\"1\" \u002F>\n      \n      \u003C!-- Sitemap structure -->\n      \u003Crow w=\"fill\" align=\"top-left\" gap=\"auto\">\n        \u003C!-- Brand Info -->\n        \u003Ccol gap=\"16\" w=\"320\">\n          \u003Crow gap=\"8\" align=\"middle-left\">\n            \u003Cellipse fill=\"$primary\" w=\"10\" h=\"10\" \u002F>\n            \u003Ctext value=\".gui\" font-family=\"Outfit\" font-size=\"20\" font-weight=\"700\" color=\"$text-primary\" letter-spacing=\"-0.5\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext value=\"An open interface archiving standard for agentic coding. Packaged for visual determinism and modular portability.\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" line-height=\"20\" \u002F>\n          \u003Ctext value=\"© 2026 .gui standard • Open-source interface specification.\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"500\" color=\"$text-tertiary\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- Columns -->\n        \u003Ccol gap=\"16\" w=\"180\">\n          \u003Ctext value=\"SPECIFICATION\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"600\" color=\"$primary\" letter-spacing=\"2\" \u002F>\n          \u003Ctext value=\"XML Schema v0.2\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Layout API\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Token Cascades\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Components\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003Ccol gap=\"16\" w=\"180\">\n          \u003Ctext value=\"PLATFORMS\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"600\" color=\"$primary\" letter-spacing=\"2\" \u002F>\n          \u003Ctext value=\"Web Desktop\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Web Mobile\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Native iOS\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Native Android\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003Ccol gap=\"16\" w=\"180\">\n          \u003Ctext value=\"RESOURCES\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"600\" color=\"$primary\" letter-spacing=\"2\" \u002F>\n          \u003Ctext value=\"Compiler SDK\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Figma Exporter\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Validation Guide\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"GitHub Repository\" font-family=\"Inter\" font-size=\"13\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Frow>\n\n      \u003C!-- Bottom border line and socials -->\n      \u003Cline fill=\"$border\" w=\"1200\" h=\"1\" \u002F>\n\n      \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n        \u003Crow gap=\"32\" align=\"middle-left\">\n          \u003Ctext value=\"License Terms\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"500\" color=\"$text-tertiary\" \u002F>\n          \u003Ctext value=\"Privacy Policy\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"500\" color=\"$text-tertiary\" \u002F>\n          \u003Ctext value=\"Security Registry\" font-family=\"Outfit\" font-size=\"11\" font-weight=\"500\" color=\"$text-tertiary\" \u002F>\n        \u003C\u002Frow>\n        \u003Crow gap=\"16\" align=\"middle-right\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fgithub.svg?color=%23A0A0AB\" w=\"16\" h=\"16\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Ftwitter.svg?color=%23A0A0AB\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172954]