@supersoniks/concorde 5.0.5 → 5.1.1

package/.taste-skill/before/report.json

@@ -0,0 +1,2556 @@
+{
+ "url": "http://localhost:3010/",
+ "at": "2026-10-25T15:52:24.371Z",
+ "allow": [],
+ "viewports": [
+  {
+   "width": 1440,
+   "height": 900,
+   "load": "load",
+   "screens": 5,
+   "filled": [
+    0.38,
+    0.13,
+    0.11,
+    0.13,
+    0.04
+   ],
+   "motion": {
+    "elements": 33,
+    "css": 19,
+    "transitions": 14,
+    "scripted": 0,
+    "videos": 0,
+    "playingVideos": 0
+   },
+   "metrics": {
+    "viewport": {
+     "w": 1440,
+     "h": 900
+    },
+    "page": {
+     "height": 4570,
+     "screens": 5.1,
+     "words": 366,
+     "img": 0,
+     "video": 0,
+     "canvas": 0,
+     "svg": 0,
+     "sections": 6,
+     "horizontalOverflow": 0,
+     "overflowCulprits": [],
+     "uiFragments": 0,
+     "uiAbuse": false,
+     "realPictures": 0,
+     "videoCount": 0,
+     "uiPictures": 0,
+     "pictureSamples": [],
+     "blendText": 0,
+     "sideScrollers": 0,
+     "brokenImages": [],
+     "emoji": [
+      "✓"
+     ],
+     "videosNoPoster": 0
+    },
+    "hero": {
+     "text": "2.04",
+     "words": 1,
+     "chars": 4,
+     "lines": 1,
+     "size": 120,
+     "vw": 8.3,
+     "font": "ClashGrotesk-Variable",
+     "weight": 500,
+     "tracking": -0.04,
+     "leading": 0.8,
+     "upper": false,
+     "italic": false,
+     "mono": false,
+     "align": "left",
+     "position": "right",
+     "widthRatio": 0.16,
+     "top": 607,
+     "tag": "div",
+     "kind": "heading"
+    },
+    "h1": {
+     "text": "webcomponents for scoped consistent shareable user interfaces",
+     "words": 7,
+     "lines": 3,
+     "size": 72,
+     "font": "ClashGrotesk-Variable"
+    },
+    "headings": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "words": 7,
+      "chars": 61,
+      "lines": 3,
+      "size": 72,
+      "vw": 5,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.02,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.49,
+      "top": 208,
+      "tag": "h1",
+      "kind": "heading"
+     },
+     {
+      "text": "2.04",
+      "words": 1,
+      "chars": 4,
+      "lines": 1,
+      "size": 120,
+      "vw": 8.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 500,
+      "tracking": -0.04,
+      "leading": 0.8,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "right",
+      "widthRatio": 0.16,
+      "top": 607,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Write HTML. Get an app.",
+      "words": 5,
+      "chars": 23,
+      "lines": 1,
+      "size": 60,
+      "vw": 4.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.53,
+      "top": 1026,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "State that flows through markup",
+      "words": 5,
+      "chars": 31,
+      "lines": 2,
+      "size": 48,
+      "vw": 3.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.4,
+      "top": 2570,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "Built for 100 ticketing sites at once",
+      "words": 7,
+      "chars": 37,
+      "lines": 2,
+      "size": 48,
+      "vw": 3.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.46,
+      "top": 3266,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "100",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 60,
+      "vw": 4.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "right",
+      "widthRatio": 0.11,
+      "top": 3318,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "35+",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 60,
+      "vw": 4.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "right",
+      "widthRatio": 0.11,
+      "top": 3318,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "0",
+      "words": 1,
+      "chars": 1,
+      "lines": 1,
+      "size": 60,
+      "vw": 4.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "right",
+      "widthRatio": 0.11,
+      "top": 3318,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Ready for take-off?",
+      "words": 3,
+      "chars": 19,
+      "lines": 1,
+      "size": 60,
+      "vw": 4.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "center",
+      "widthRatio": 0.94,
+      "top": 3628,
+      "tag": "h2",
+      "kind": "heading"
+     }
+    ],
+    "headingSummary": {
+     "count": 9,
+     "maxLines": 3,
+     "over2Lines": 1,
+     "statements": 0,
+     "centered": 4,
+     "medianWords": 5,
+     "mixedFontHeadings": 0
+    },
+    "type": {
+     "families": [
+      {
+       "family": "Arial",
+       "share": 0.48,
+       "mono": false
+      },
+      {
+       "family": "ClashGrotesk-Variable",
+       "share": 0.43,
+       "mono": false
+      },
+      {
+       "family": "ui-monospace",
+       "share": 0.09,
+       "mono": false
+      }
+     ],
+     "familyCount": 3,
+     "sizes": [
+      11,
+      13,
+      14,
+      16,
+      18,
+      20,
+      24,
+      48,
+      60,
+      72,
+      120
+     ],
+     "sizeCount": 11,
+     "notLoaded": [],
+     "body": {
+      "font": "Arial",
+      "size": 18,
+      "leading": 1.5,
+      "weight": 400,
+      "tracking": 0,
+      "contrast": 6.8
+     },
+     "measureChars": 71,
+     "max": {
+      "size": 120,
+      "vw": 8.3,
+      "font": "ClashGrotesk-Variable",
+      "text": "2.04"
+     },
+     "monoShare": 0.09,
+     "monoProseShare": 0.09,
+     "monoFamilies": [
+      "ui-monospace"
+     ],
+     "monoSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30",
+      "> add a newsletter signup",
+      "+ <div formDataProvider=\"newsletter\">"
+     ],
+     "microLabels": 4,
+     "microLabelShare": 0.011,
+     "microSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30"
+     ],
+     "upperShare": 0.02,
+     "centerShare": 0.06,
+     "smallText": 5
+    },
+    "eyebrows": [
+     {
+      "text": "v5.1",
+      "above": "webcomponents for scoped consistent shar",
+      "upper": false,
+      "tracked": false,
+      "mono": false,
+      "pill": true,
+      "size": 14,
+      "top": 156
+     },
+     {
+      "text": "FL 600",
+      "above": "2.04",
+      "upper": true,
+      "tracked": true,
+      "mono": true,
+      "pill": false,
+      "size": 11.2,
+      "top": 528
+     }
+    ],
+    "numbered": [],
+    "color": {
+     "bodyBg": "#fffcf0",
+     "bodyBgHsl": {
+      "h": 48,
+      "s": 1,
+      "l": 0.97
+     },
+     "dark": false,
+     "sectionBgs": [],
+     "textColors": [
+      {
+       "color": "#111111",
+       "share": 0.49
+      },
+      {
+       "color": "#fffcf0",
+       "share": 0.28
+      },
+      {
+       "color": "#5a5956",
+       "share": 0.21
+      },
+      {
+       "color": "#10b981",
+       "share": 0.01
+      },
+      {
+       "color": "#ffffff",
+       "share": 0
+      }
+     ],
+     "button": null,
+     "lowContrast": [
+      {
+       "text": "AI-agent ready",
+       "ratio": 1,
+       "need": 3,
+       "size": 24,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "Skills and AGENTS.md teach coding agents",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 16,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "> add a newsletter signup",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <div formDataProvider=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-input name=\"email\" type=\"email\"",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-submit endPoint=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      }
+     ]
+    },
+    "buttons": {
+     "count": 0,
+     "inHero": 0,
+     "withShadow": 0,
+     "withGradient": 0,
+     "mono": 0,
+     "upper": 0,
+     "heroLabels": []
+    },
+    "surfaces": {
+     "shadowStatic": 0,
+     "shadowOverlay": 0,
+     "shadowSamples": [],
+     "gradients": 1,
+     "scrims": 2,
+     "gradientSamples": [
+      "div.hero-glow → radial-gradient(closest-side, rgb(251, 146, 60), rgba(0, 0, 0, 0)), radial-gradient(closest-side, rgb(59, 130,"
+     ],
+     "gradientText": 0,
+     "hairlines": 0,
+     "hairlineSamples": [],
+     "outlinedBoxes": 1,
+     "dashed": 0,
+     "blurred": 0,
+     "roundedBoxes": 2,
+     "boxRadius": 50,
+     "squareMedia": 0,
+     "roundedMedia": 0,
+     "mediaRadius": 0,
+     "textShadow": 0,
+     "cardRows": []
+    },
+    "heroMedia": [],
+    "nav": null,
+    "fontsLoaded": [
+     "clashgrotesk-variable"
+    ]
+   },
+   "layout": {
+    "viewport": {
+     "w": 1440,
+     "h": 900
+    },
+    "pageH": 4570,
+    "margins": {
+     "left": 40,
+     "right": 91
+    },
+    "sections": [
+     {
+      "sel": "section.relative.grid",
+      "tag": "section",
+      "top": 66,
+      "height": 760,
+      "words": 52,
+      "media": 0,
+      "middle": 217,
+      "heading": {
+       "text": "webcomponents for",
+       "size": 72,
+       "tag": "h1"
+      },
+      "left": 40,
+      "right": 132,
+      "textLeft": 40,
+      "textRight": 132,
+      "fullBleed": false,
+      "footer": false,
+      "hero": true,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-20.md:py-28",
+      "tag": "section",
+      "top": 914,
+      "height": 1540,
+      "words": 158,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Write HTML. Get an app.",
+       "size": 60,
+       "tag": "h2"
+      },
+      "left": 40,
+      "right": 86,
+      "textLeft": 40,
+      "textRight": 86,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-16.md:py-24",
+      "tag": "section",
+      "top": 2454,
+      "height": 682,
+      "words": 36,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "State that flows through markup",
+       "size": 48,
+       "tag": "h2"
+      },
+      "left": 40,
+      "right": 818,
+      "textLeft": 40,
+      "textRight": 818,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-12.md:py-20",
+      "tag": "section",
+      "top": 3137,
+      "height": 451,
+      "words": 47,
+      "media": 0,
+      "middle": 106,
+      "heading": {
+       "text": "100",
+       "size": 60,
+       "tag": "span"
+      },
+      "left": 89,
+      "right": 114,
+      "textLeft": 89,
+      "textRight": 114,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.relative.pt-10",
+      "tag": "section",
+      "top": 3588,
+      "height": 982,
+      "words": 11,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Ready for take-off?",
+       "size": 60,
+       "tag": "h2"
+      },
+      "left": 479,
+      "right": 479,
+      "textLeft": 479,
+      "textRight": 479,
+      "fullBleed": false,
+      "footer": true,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     }
+    ],
+    "gaps": [],
+    "h1s": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "size": 72,
+      "top": 208,
+      "firstScreen": true
+     }
+    ],
+    "edgeText": [],
+    "edges": [
+     {
+      "x": 40,
+      "n": 8
+     },
+     {
+      "x": 67,
+      "n": 6
+     },
+     {
+      "x": 89,
+      "n": 2
+     },
+     {
+      "x": 520,
+      "n": 2
+     },
+     {
+      "x": 746,
+      "n": 1
+     },
+     {
+      "x": 972,
+      "n": 1
+     }
+    ],
+    "leftBlocks": 20,
+    "bodySize": 18,
+    "stage": false,
+    "explains": true,
+    "slivers": [],
+    "voidShare": 0.17,
+    "voidBox": {
+     "x": 720,
+     "y": 180,
+     "w": 720,
+     "h": 300
+    }
+   },
+   "app": null,
+   "consoleErrors": []
+  },
+  {
+   "width": 768,
+   "height": 1024,
+   "load": "load",
+   "screens": 6,
+   "filled": [
+    0.38,
+    0.21,
+    0.21,
+    0.18,
+    0.24,
+    0.14
+   ],
+   "motion": {
+    "elements": 33,
+    "css": 19,
+    "transitions": 14,
+    "scripted": 0,
+    "videos": 0,
+    "playingVideos": 0
+   },
+   "metrics": {
+    "viewport": {
+     "w": 768,
+     "h": 1024
+    },
+    "page": {
+     "height": 5720,
+     "screens": 5.6,
+     "words": 366,
+     "img": 0,
+     "video": 0,
+     "canvas": 0,
+     "svg": 0,
+     "sections": 6,
+     "horizontalOverflow": 0,
+     "overflowCulprits": [],
+     "uiFragments": 0,
+     "uiAbuse": false,
+     "realPictures": 0,
+     "videoCount": 0,
+     "uiPictures": 0,
+     "pictureSamples": [],
+     "blendText": 0,
+     "sideScrollers": 0,
+     "brokenImages": [],
+     "emoji": [
+      "✓"
+     ],
+     "videosNoPoster": 0
+    },
+    "hero": {
+     "text": "webcomponents for scoped consistent shareable user interfaces",
+     "words": 7,
+     "chars": 61,
+     "lines": 3,
+     "size": 60,
+     "vw": 7.8,
+     "font": "ClashGrotesk-Variable",
+     "weight": 400,
+     "tracking": 0,
+     "leading": 1.02,
+     "upper": false,
+     "italic": false,
+     "mono": false,
+     "align": "left",
+     "position": "center",
+     "widthRatio": 0.94,
+     "top": 182,
+     "tag": "h1",
+     "kind": "heading"
+    },
+    "h1": {
+     "text": "webcomponents for scoped consistent shareable user interfaces",
+     "words": 7,
+     "lines": 3,
+     "size": 60,
+     "font": "ClashGrotesk-Variable"
+    },
+    "headings": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "words": 7,
+      "chars": 61,
+      "lines": 3,
+      "size": 60,
+      "vw": 7.8,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.02,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.94,
+      "top": 182,
+      "tag": "h1",
+      "kind": "heading"
+     },
+     {
+      "text": "2.04",
+      "words": 1,
+      "chars": 4,
+      "lines": 1,
+      "size": 84.5,
+      "vw": 11,
+      "font": "ClashGrotesk-Variable",
+      "weight": 500,
+      "tracking": -0.04,
+      "leading": 0.8,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.22,
+      "top": 1194,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Write HTML. Get an app.",
+      "words": 5,
+      "chars": 23,
+      "lines": 1,
+      "size": 48,
+      "vw": 6.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.94,
+      "top": 1553,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "State that flows through markup",
+      "words": 5,
+      "chars": 31,
+      "lines": 1,
+      "size": 48,
+      "vw": 6.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.94,
+      "top": 3431,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "Built for 100 ticketing sites at once",
+      "words": 7,
+      "chars": 37,
+      "lines": 2,
+      "size": 48,
+      "vw": 6.3,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.81,
+      "top": 4561,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "100",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 60,
+      "vw": 7.8,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "left",
+      "widthRatio": 0.24,
+      "top": 4794,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "35+",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 60,
+      "vw": 7.8,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "center",
+      "widthRatio": 0.24,
+      "top": 4794,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "0",
+      "words": 1,
+      "chars": 1,
+      "lines": 1,
+      "size": 60,
+      "vw": 7.8,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "right",
+      "widthRatio": 0.24,
+      "top": 4794,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Ready for take-off?",
+      "words": 3,
+      "chars": 19,
+      "lines": 1,
+      "size": 60,
+      "vw": 7.8,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "center",
+      "widthRatio": 0.94,
+      "top": 5052,
+      "tag": "h2",
+      "kind": "heading"
+     }
+    ],
+    "headingSummary": {
+     "count": 9,
+     "maxLines": 3,
+     "over2Lines": 1,
+     "statements": 0,
+     "centered": 4,
+     "medianWords": 3,
+     "mixedFontHeadings": 0
+    },
+    "type": {
+     "families": [
+      {
+       "family": "Arial",
+       "share": 0.48,
+       "mono": false
+      },
+      {
+       "family": "ClashGrotesk-Variable",
+       "share": 0.43,
+       "mono": false
+      },
+      {
+       "family": "ui-monospace",
+       "share": 0.09,
+       "mono": false
+      }
+     ],
+     "familyCount": 3,
+     "sizes": [
+      11,
+      13,
+      14,
+      16,
+      18,
+      20,
+      24,
+      48,
+      60,
+      85
+     ],
+     "sizeCount": 10,
+     "notLoaded": [],
+     "body": {
+      "font": "Arial",
+      "size": 18,
+      "leading": 1.5,
+      "weight": 400,
+      "tracking": 0,
+      "contrast": 6.8
+     },
+     "measureChars": 69,
+     "max": {
+      "size": 84.5,
+      "vw": 11,
+      "font": "ClashGrotesk-Variable",
+      "text": "2.04"
+     },
+     "monoShare": 0.09,
+     "monoProseShare": 0.09,
+     "monoFamilies": [
+      "ui-monospace"
+     ],
+     "monoSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30",
+      "> add a newsletter signup",
+      "+ <div formDataProvider=\"newsletter\">"
+     ],
+     "microLabels": 4,
+     "microLabelShare": 0.011,
+     "microSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30"
+     ],
+     "upperShare": 0.02,
+     "centerShare": 0.06,
+     "smallText": 5
+    },
+    "eyebrows": [
+     {
+      "text": "v5.1",
+      "above": "webcomponents for scoped consistent shar",
+      "upper": false,
+      "tracked": false,
+      "mono": false,
+      "pill": true,
+      "size": 14,
+      "top": 130
+     },
+     {
+      "text": "FL 600",
+      "above": "2.04",
+      "upper": true,
+      "tracked": true,
+      "mono": true,
+      "pill": false,
+      "size": 11.2,
+      "top": 1086
+     }
+    ],
+    "numbered": [],
+    "color": {
+     "bodyBg": "#fffcf0",
+     "bodyBgHsl": {
+      "h": 48,
+      "s": 1,
+      "l": 0.97
+     },
+     "dark": false,
+     "sectionBgs": [
+      {
+       "color": "#fffcf0",
+       "top": 689,
+       "hsl": {
+        "h": 48,
+        "s": 1,
+        "l": 0.97
+       }
+      }
+     ],
+     "textColors": [
+      {
+       "color": "#111111",
+       "share": 0.49
+      },
+      {
+       "color": "#fffcf0",
+       "share": 0.28
+      },
+      {
+       "color": "#5a5956",
+       "share": 0.21
+      },
+      {
+       "color": "#10b981",
+       "share": 0.01
+      },
+      {
+       "color": "#ffffff",
+       "share": 0
+      }
+     ],
+     "button": null,
+     "lowContrast": [
+      {
+       "text": "AI-agent ready",
+       "ratio": 1,
+       "need": 3,
+       "size": 24,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "Skills and AGENTS.md teach coding agents",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 16,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "> add a newsletter signup",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <div formDataProvider=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-input name=\"email\" type=\"email\"",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-submit endPoint=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      }
+     ]
+    },
+    "buttons": {
+     "count": 0,
+     "inHero": 0,
+     "withShadow": 0,
+     "withGradient": 0,
+     "mono": 0,
+     "upper": 0,
+     "heroLabels": []
+    },
+    "surfaces": {
+     "shadowStatic": 0,
+     "shadowOverlay": 0,
+     "shadowSamples": [],
+     "gradients": 1,
+     "scrims": 2,
+     "gradientSamples": [
+      "div.hero-glow → radial-gradient(closest-side, rgb(251, 146, 60), rgba(0, 0, 0, 0)), radial-gradient(closest-side, rgb(59, 130,"
+     ],
+     "gradientText": 0,
+     "hairlines": 0,
+     "hairlineSamples": [],
+     "outlinedBoxes": 1,
+     "dashed": 0,
+     "blurred": 0,
+     "roundedBoxes": 2,
+     "boxRadius": 50,
+     "squareMedia": 0,
+     "roundedMedia": 0,
+     "mediaRadius": 0,
+     "textShadow": 0,
+     "cardRows": []
+    },
+    "heroMedia": [],
+    "nav": null,
+    "fontsLoaded": [
+     "clashgrotesk-variable"
+    ]
+   },
+   "layout": {
+    "viewport": {
+     "w": 768,
+     "h": 1024
+    },
+    "pageH": 5720,
+    "margins": {
+     "left": 24,
+     "right": 34
+    },
+    "sections": [
+     {
+      "sel": "section.relative.grid",
+      "tag": "section",
+      "top": 66,
+      "height": 1287,
+      "words": 52,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "webcomponents for",
+       "size": 60,
+       "tag": "h1"
+      },
+      "left": 24,
+      "right": 147,
+      "textLeft": 24,
+      "textRight": 147,
+      "fullBleed": false,
+      "footer": false,
+      "hero": true,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-20.md:py-28",
+      "tag": "section",
+      "top": 1441,
+      "height": 1894,
+      "words": 158,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Write HTML. Get an app.",
+       "size": 48,
+       "tag": "h2"
+      },
+      "left": 24,
+      "right": 51,
+      "textLeft": 24,
+      "textRight": 51,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-16.md:py-24",
+      "tag": "section",
+      "top": 3335,
+      "height": 1097,
+      "words": 36,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "State that flows through markup",
+       "size": 48,
+       "tag": "h2"
+      },
+      "left": 24,
+      "right": 26,
+      "textLeft": 24,
+      "textRight": 26,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-12.md:py-20",
+      "tag": "section",
+      "top": 4432,
+      "height": 580,
+      "words": 47,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "100",
+       "size": 60,
+       "tag": "span"
+      },
+      "left": 73,
+      "right": 108,
+      "textLeft": 73,
+      "textRight": 108,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.relative.pt-10",
+      "tag": "section",
+      "top": 5012,
+      "height": 707,
+      "words": 11,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Ready for take-off?",
+       "size": 60,
+       "tag": "h2"
+      },
+      "left": 143,
+      "right": 143,
+      "textLeft": 143,
+      "textRight": 143,
+      "fullBleed": false,
+      "footer": true,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     }
+    ],
+    "gaps": [
+     {
+      "top": 732,
+      "height": 352
+     },
+     {
+      "top": 3796,
+      "height": 760
+     }
+    ],
+    "h1s": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "size": 60,
+      "top": 182,
+      "firstScreen": true
+     }
+    ],
+    "edgeText": [],
+    "edges": [
+     {
+      "x": 24,
+      "n": 8
+     },
+     {
+      "x": 51,
+      "n": 7
+     },
+     {
+      "x": 410,
+      "n": 3
+     },
+     {
+      "x": 73,
+      "n": 2
+     }
+    ],
+    "leftBlocks": 20,
+    "bodySize": 18,
+    "stage": false,
+    "explains": true,
+    "slivers": [],
+    "voidShare": 0,
+    "voidBox": null
+   },
+   "app": null,
+   "consoleErrors": []
+  },
+  {
+   "width": 390,
+   "height": 844,
+   "load": "load",
+   "screens": 8,
+   "filled": [
+    0.4,
+    0.48,
+    0.19,
+    0.2,
+    0.16,
+    0.19,
+    0.21,
+    0.26
+   ],
+   "motion": {
+    "elements": 35,
+    "css": 20,
+    "transitions": 15,
+    "scripted": 0,
+    "videos": 0,
+    "playingVideos": 0
+   },
+   "metrics": {
+    "viewport": {
+     "w": 390,
+     "h": 844
+    },
+    "page": {
+     "height": 6435,
+     "screens": 7.6,
+     "words": 366,
+     "img": 0,
+     "video": 0,
+     "canvas": 0,
+     "svg": 0,
+     "sections": 6,
+     "horizontalOverflow": 0,
+     "overflowCulprits": [],
+     "uiFragments": 0,
+     "uiAbuse": false,
+     "realPictures": 0,
+     "videoCount": 0,
+     "uiPictures": 0,
+     "pictureSamples": [],
+     "blendText": 0,
+     "sideScrollers": 0,
+     "brokenImages": [],
+     "emoji": [
+      "✓"
+     ],
+     "videosNoPoster": 0
+    },
+    "hero": {
+     "text": "webcomponents for scoped consistent shareable user interfaces",
+     "words": 7,
+     "chars": 61,
+     "lines": 4,
+     "size": 41.6,
+     "vw": 10.7,
+     "font": "ClashGrotesk-Variable",
+     "weight": 400,
+     "tracking": 0,
+     "leading": 1.02,
+     "upper": false,
+     "italic": false,
+     "mono": false,
+     "align": "left",
+     "position": "center",
+     "widthRatio": 0.92,
+     "top": 158,
+     "tag": "h1",
+     "kind": "heading"
+    },
+    "h1": {
+     "text": "webcomponents for scoped consistent shareable user interfaces",
+     "words": 7,
+     "lines": 4,
+     "size": 41.6,
+     "font": "ClashGrotesk-Variable"
+    },
+    "headings": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "words": 7,
+      "chars": 61,
+      "lines": 4,
+      "size": 41.6,
+      "vw": 10.7,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.02,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.92,
+      "top": 158,
+      "tag": "h1",
+      "kind": "heading"
+     },
+     {
+      "text": "2.04",
+      "words": 1,
+      "chars": 4,
+      "lines": 1,
+      "size": 56,
+      "vw": 14.4,
+      "font": "ClashGrotesk-Variable",
+      "weight": 500,
+      "tracking": -0.04,
+      "leading": 0.8,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "left",
+      "widthRatio": 0.28,
+      "top": 1113,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Write HTML. Get an app.",
+      "words": 5,
+      "chars": 23,
+      "lines": 2,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.92,
+      "top": 1410,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "Data binding, zero glue",
+      "words": 4,
+      "chars": 23,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 1681,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "Framework-agnostic",
+      "words": 1,
+      "chars": 18,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 2000,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "Themed by a few variables",
+      "words": 5,
+      "chars": 25,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 2462,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "Server-driven UI",
+      "words": 2,
+      "chars": 16,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 2923,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "Declarative APIs",
+      "words": 2,
+      "chars": 16,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 3513,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "AI-agent ready",
+      "words": 2,
+      "chars": 14,
+      "lines": 1,
+      "size": 24,
+      "vw": 6.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1.1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.78,
+      "top": 3793,
+      "tag": "h3",
+      "kind": "heading"
+     },
+     {
+      "text": "State that flows through markup",
+      "words": 5,
+      "chars": 31,
+      "lines": 2,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.92,
+      "top": 4212,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "Built for 100 ticketing sites at once",
+      "words": 7,
+      "chars": 37,
+      "lines": 2,
+      "size": 30,
+      "vw": 7.7,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "left",
+      "position": "center",
+      "widthRatio": 0.75,
+      "top": 5455,
+      "tag": "h2",
+      "kind": "heading"
+     },
+     {
+      "text": "100",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "left",
+      "widthRatio": 0.21,
+      "top": 5733,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "35+",
+      "words": 1,
+      "chars": 3,
+      "lines": 1,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "center",
+      "widthRatio": 0.21,
+      "top": 5733,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "0",
+      "words": 1,
+      "chars": 1,
+      "lines": 1,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "right",
+      "widthRatio": 0.21,
+      "top": 5733,
+      "tag": "div",
+      "kind": "heading"
+     },
+     {
+      "text": "Ready for take-off?",
+      "words": 3,
+      "chars": 19,
+      "lines": 1,
+      "size": 36,
+      "vw": 9.2,
+      "font": "ClashGrotesk-Variable",
+      "weight": 400,
+      "tracking": 0,
+      "leading": 1,
+      "upper": false,
+      "italic": false,
+      "mono": false,
+      "align": "center",
+      "position": "center",
+      "widthRatio": 0.92,
+      "top": 5934,
+      "tag": "h2",
+      "kind": "heading"
+     }
+    ],
+    "headingSummary": {
+     "count": 15,
+     "maxLines": 4,
+     "over2Lines": 1,
+     "statements": 0,
+     "centered": 4,
+     "medianWords": 2,
+     "mixedFontHeadings": 0
+    },
+    "type": {
+     "families": [
+      {
+       "family": "Arial",
+       "share": 0.48,
+       "mono": false
+      },
+      {
+       "family": "ClashGrotesk-Variable",
+       "share": 0.43,
+       "mono": false
+      },
+      {
+       "family": "ui-monospace",
+       "share": 0.09,
+       "mono": false
+      }
+     ],
+     "familyCount": 3,
+     "sizes": [
+      11,
+      12,
+      13,
+      14,
+      16,
+      18,
+      20,
+      24,
+      30,
+      36,
+      42,
+      56
+     ],
+     "sizeCount": 12,
+     "notLoaded": [],
+     "body": {
+      "font": "Arial",
+      "size": 18,
+      "leading": 1.5,
+      "weight": 400,
+      "tracking": 0,
+      "contrast": 6.8
+     },
+     "measureChars": 32,
+     "max": {
+      "size": 56,
+      "vw": 14.4,
+      "font": "ClashGrotesk-Variable",
+      "text": "2.04"
+     },
+     "monoShare": 0.09,
+     "monoProseShare": 0.09,
+     "monoFamilies": [
+      "ui-monospace"
+     ],
+     "monoSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30",
+      "> add a newsletter signup",
+      "+ <div formDataProvider=\"newsletter\">"
+     ],
+     "microLabels": 4,
+     "microLabelShare": 0.011,
+     "microSamples": [
+      "Mach",
+      "CDG — JFK",
+      "FL 600",
+      "3 h 30"
+     ],
+     "upperShare": 0.02,
+     "centerShare": 0.06,
+     "smallText": 8
+    },
+    "eyebrows": [
+     {
+      "text": "v5.1",
+      "above": "webcomponents for scoped consistent shar",
+      "upper": false,
+      "tracked": false,
+      "mono": false,
+      "pill": true,
+      "size": 14,
+      "top": 106
+     },
+     {
+      "text": "FL 600",
+      "above": "2.04",
+      "upper": true,
+      "tracked": true,
+      "mono": true,
+      "pill": false,
+      "size": 11.2,
+      "top": 1031
+     }
+    ],
+    "numbered": [],
+    "color": {
+     "bodyBg": "#fffcf0",
+     "bodyBgHsl": {
+      "h": 48,
+      "s": 1,
+      "l": 0.97
+     },
+     "dark": false,
+     "sectionBgs": [
+      {
+       "color": "#fffcf0",
+       "top": 731,
+       "hsl": {
+        "h": 48,
+        "s": 1,
+        "l": 0.97
+       }
+      }
+     ],
+     "textColors": [
+      {
+       "color": "#111111",
+       "share": 0.49
+      },
+      {
+       "color": "#fffcf0",
+       "share": 0.28
+      },
+      {
+       "color": "#5a5956",
+       "share": 0.21
+      },
+      {
+       "color": "#10b981",
+       "share": 0.01
+      },
+      {
+       "color": "#ffffff",
+       "share": 0
+      }
+     ],
+     "button": null,
+     "lowContrast": [
+      {
+       "text": "AI-agent ready",
+       "ratio": 1,
+       "need": 3,
+       "size": 24,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "Skills and AGENTS.md teach coding agents",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 16,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "> add a newsletter signup",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <div formDataProvider=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-input name=\"email\" type=\"email\"",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      },
+      {
+       "text": "+ <sonic-submit endPoint=\"newsletter\">",
+       "ratio": 1,
+       "need": 4.5,
+       "size": 12.8,
+       "fg": "#fffcf0",
+       "bg": "#fffcf0"
+      }
+     ]
+    },
+    "buttons": {
+     "count": 0,
+     "inHero": 0,
+     "withShadow": 0,
+     "withGradient": 0,
+     "mono": 0,
+     "upper": 0,
+     "heroLabels": []
+    },
+    "surfaces": {
+     "shadowStatic": 0,
+     "shadowOverlay": 0,
+     "shadowSamples": [],
+     "gradients": 1,
+     "scrims": 2,
+     "gradientSamples": [
+      "div.hero-glow → radial-gradient(closest-side, rgb(251, 146, 60), rgba(0, 0, 0, 0)), radial-gradient(closest-side, rgb(59, 130,"
+     ],
+     "gradientText": 0,
+     "hairlines": 0,
+     "hairlineSamples": [],
+     "outlinedBoxes": 1,
+     "dashed": 0,
+     "blurred": 0,
+     "roundedBoxes": 2,
+     "boxRadius": 50,
+     "squareMedia": 0,
+     "roundedMedia": 0,
+     "mediaRadius": 0,
+     "textShadow": 0,
+     "cardRows": []
+    },
+    "heroMedia": [],
+    "nav": null,
+    "fontsLoaded": [
+     "clashgrotesk-variable"
+    ]
+   },
+   "layout": {
+    "viewport": {
+     "w": 390,
+     "h": 844
+    },
+    "pageH": 6435,
+    "margins": {
+     "left": 16,
+     "right": 16
+    },
+    "sections": [
+     {
+      "sel": "section.relative.grid",
+      "tag": "section",
+      "top": 66,
+      "height": 1176,
+      "words": 52,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "webcomponents for",
+       "size": 42,
+       "tag": "h1"
+      },
+      "left": 16,
+      "right": 24,
+      "textLeft": 16,
+      "textRight": 24,
+      "fullBleed": false,
+      "footer": false,
+      "hero": true,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "div.max-w-3xl.mb-12",
+      "tag": "div",
+      "top": 1410,
+      "height": 196,
+      "words": 26,
+      "media": 0,
+      "middle": 0,
+      "heading": null,
+      "left": 16,
+      "right": 18,
+      "textLeft": 16,
+      "textRight": 18,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-a",
+      "tag": "sonic-card",
+      "top": 1656,
+      "height": 318,
+      "words": 16,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Data binding, zero glue",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 67,
+      "textLeft": 43,
+      "textRight": 67,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-b",
+      "tag": "sonic-card",
+      "top": 1975,
+      "height": 463,
+      "words": 18,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Framework-agnostic",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 62,
+      "textLeft": 43,
+      "textRight": 62,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-c",
+      "tag": "sonic-card",
+      "top": 2437,
+      "height": 460,
+      "words": 26,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Themed by a few variables",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 71,
+      "textLeft": 43,
+      "textRight": 71,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-d",
+      "tag": "sonic-card",
+      "top": 2898,
+      "height": 590,
+      "words": 21,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Server-driven UI",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 48,
+      "textLeft": 43,
+      "textRight": 48,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-e",
+      "tag": "sonic-card",
+      "top": 3488,
+      "height": 280,
+      "words": 15,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Declarative APIs",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 89,
+      "textLeft": 43,
+      "textRight": 89,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "sonic-card.grid.bento-f",
+      "tag": "sonic-card",
+      "top": 3768,
+      "height": 300,
+      "words": 31,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "AI-agent ready",
+       "size": 24,
+       "tag": "h3"
+      },
+      "left": 43,
+      "right": 43,
+      "textLeft": 43,
+      "textRight": 43,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": true,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-16.md:py-24",
+      "tag": "section",
+      "top": 4148,
+      "height": 1225,
+      "words": 36,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "State that flows through markup",
+       "size": 36,
+       "tag": "h2"
+      },
+      "left": 16,
+      "right": 16,
+      "textLeft": 16,
+      "textRight": 16,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.py-12.md:py-20",
+      "tag": "section",
+      "top": 5374,
+      "height": 520,
+      "words": 47,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "100",
+       "size": 36,
+       "tag": "span"
+      },
+      "left": 49,
+      "right": 58,
+      "textLeft": 49,
+      "textRight": 58,
+      "fullBleed": false,
+      "footer": false,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     },
+     {
+      "sel": "section.relative.pt-10",
+      "tag": "section",
+      "top": 5894,
+      "height": 542,
+      "words": 11,
+      "media": 0,
+      "middle": 0,
+      "heading": {
+       "text": "Ready for take-off?",
+       "size": 36,
+       "tag": "h2"
+      },
+      "left": 50,
+      "right": 50,
+      "textLeft": 50,
+      "textRight": 50,
+      "fullBleed": false,
+      "footer": true,
+      "hero": false,
+      "continues": false,
+      "pinned": false
+     }
+    ],
+    "gaps": [
+     {
+      "top": 768,
+      "height": 260
+     },
+     {
+      "top": 3060,
+      "height": 372
+     },
+     {
+      "top": 4656,
+      "height": 792
+     }
+    ],
+    "h1s": [
+     {
+      "text": "webcomponents for scoped consistent shareable user interfaces",
+      "size": 42,
+      "top": 158,
+      "firstScreen": true
+     }
+    ],
+    "edgeText": [],
+    "edges": [
+     {
+      "x": 43,
+      "n": 12
+     },
+     {
+      "x": 16,
+      "n": 8
+     }
+    ],
+    "leftBlocks": 20,
+    "bodySize": 18,
+    "stage": false,
+    "explains": true,
+    "slivers": [],
+    "voidShare": 0,
+    "voidBox": null
+   },
+   "app": null,
+   "consoleErrors": []
+  }
+ ],
+ "findings": [
+  {
+   "level": "FAIL",
+   "id": "headline-lines",
+   "width": 1440,
+   "message": "1 headline(s) wrap past two lines at 1440px: \"webcomponents for scoped consistent shareable us\" → 3 lines (7 words, 72px)",
+   "fix": "Cut words first (a headline is a title, not a sentence). Then give it a wider measure. Lower the size only as a last resort and never below the scale you chose. A real statement paragraph belongs in a <p> or <blockquote> at 36px or less."
+  },
+  {
+   "level": "FAIL",
+   "id": "eyebrow",
+   "width": 1440,
+   "message": "2 eyebrow/kicker label(s) above headings: \"v5.1\" (pill) above \"webcomponents for scoped consistent shar\"; \"FL 600\" above \"2.04\"",
+   "fix": "Delete them. If the label carried real information, fold it into the headline or the supporting sentence.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "mono",
+   "width": 1440,
+   "message": "Monospace type outside code: ui-monospace — e.g. \"Mach\", \"CDG — JFK\", \"FL 600\", \"3 h 30\"",
+   "fix": "Set it in the text face. Monospace is for literal code inside <pre>/<code> only.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "micro-label",
+   "width": 1440,
+   "message": "4 tiny uppercase letter-spaced labels (e.g. \"Mach\", \"CDG — JFK\", \"FL 600\", \"3 h 30\").",
+   "fix": "Use sentence-case text at a readable size, or delete the label.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "emoji",
+   "width": 1440,
+   "message": "Emoji in the page: ✓",
+   "fix": "Remove. Use words or real imagery.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "gradient",
+   "width": 1440,
+   "message": "1 gradient fill(s): div.hero-glow → radial-gradient(closest-side, rgb(251, 146, 60), rgba(0, 0, 0, 0)), radial-gradient(closest-side, rgb(59, 130,",
+   "fix": "Use a flat colour or a real image. The only gradient allowed by default is a neutral scrim over a photo for legibility.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "outlined-box",
+   "width": 1440,
+   "message": "1 box(es) drawn with a 1px outline.",
+   "fix": "Prefer a filled surface or no box.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "palette-cream",
+   "width": 1440,
+   "message": "Yellow-cream background (page background #fffcf0, text #fffcf0).",
+   "fix": "Use the drawn palette. If you want warmth, take a low-chroma stone or bone, not a yellow cream.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "contrast",
+   "width": 1440,
+   "message": "Unreadable text: \"AI-agent ready\" 1:1 (#fffcf0 on #fffcf0); \"Skills and AGENTS.md teach coding agents\" 1:1 (#fffcf0 on #fffcf0); \"> add a newsletter signup\" 1:1 (#fffcf0 on #fffcf0); \"+ <div formDataProvider=\"newsletter\">\" 1:1 (#fffcf0 on #fffcf0)",
+   "fix": "Raise contrast to at least 4.5:1 for text, 3:1 for large display.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "font-count",
+   "width": 1440,
+   "message": "3 typefaces in use (Arial, ClashGrotesk-Variable, ui-monospace).",
+   "fix": "Two at most.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "size-count",
+   "width": 1440,
+   "message": "11 different font sizes (11, 13, 14, 16, 18, 20, 24, 48, 60, 72, 120).",
+   "fix": "A page needs about five: display, heading, lead, body, small.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "grey-body",
+   "width": 1440,
+   "message": "The running text is a soft grey on its ground (6.8:1).",
+   "fix": "Set body copy in the full ink (7:1 or more). Keep the muted ink for secondary notes; pages read thin and unfinished when everything is grey.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "first-action",
+   "width": 1440,
+   "message": "No visible button in the first screen.",
+   "fix": "Give the one primary action a real button in the first screen (a filled or solid-bordered control, 44px or taller), not only a link in the navigation.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "few-pictures",
+   "width": 1440,
+   "message": "Only 0 picture(s) on the page (0 photographs, footage or raster images, 0 interface fragments). Drawings in SVG do not count.",
+   "fix": "Find real pictures of the subject's world with scripts/assets.mjs (photographs, archival images, maps, engravings, footage), download them to assets/ and give them room: a hero picture, one per section that has a subject, a full-width band. At least four, usually six to twelve."
+  },
+  {
+   "level": "WARN",
+   "id": "no-footage",
+   "width": 1440,
+   "message": "No video anywhere on the page.",
+   "fix": "Look for one honest clip with scripts/assets.mjs --video (the place, the material, the process) and use it as a muted loop with a poster frame. Defend its absence only if no clip fits the subject."
+  },
+  {
+   "level": "FAIL",
+   "id": "small-text",
+   "width": 1440,
+   "message": "5 text blocks under 13px.",
+   "fix": "Nothing meant to be read goes below 13px.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "dev-server",
+   "width": 1440,
+   "message": "This page is served by a development server (Vite, webpack or Next in dev mode).",
+   "fix": "Run the last gate on the production build too (vite build && vite preview, next build && next start, or the built index.html): minifiers and bundlers change the CSS a visitor receives.",
+   "alsoAt": [
+    768,
+    390
+   ]
+  },
+  {
+   "level": "WARN",
+   "id": "off-centre",
+   "width": 1440,
+   "message": "The margins differ: 40px on the left, 91px on the right, at 1440px.",
+   "fix": "Put the navigation and the content on one pair of margins; check for padding on one side only, a scrollbar gutter, or a header on another inset than the page."
+  },
+  {
+   "level": "WARN",
+   "id": "lopsided",
+   "width": 1440,
+   "message": "A section keeps its content on one side and leaves 818px of the width empty: \"State that flows through markup\".",
+   "fix": "Fill the other side with what the section has (its picture, a second column, the figure), or defend the void in one sentence."
+  },
+  {
+   "level": "FAIL",
+   "id": "empty-screens",
+   "width": 1440,
+   "message": "4 of 5 desktop screens are almost empty ground (under 20% of the screen holds text, a picture or a colour field): screens 2, 3, 4, 5.",
+   "fix": "An empty screen is a rest only once per page. Elsewhere it means the section is underbuilt: set its content larger, give it the full information, put it on a colour field, or cut it."
+  },
+  {
+   "level": "FAIL",
+   "id": "headline-lines",
+   "width": 768,
+   "message": "1 headline(s) wrap past two lines at 768px: \"webcomponents for scoped consistent shareable us\" → 3 lines (7 words, 60px)",
+   "fix": "Cut words first (a headline is a title, not a sentence). Then give it a wider measure. Lower the size only as a last resort and never below the scale you chose. A real statement paragraph belongs in a <p> or <blockquote> at 32px or less."
+  },
+  {
+   "level": "FAIL",
+   "id": "blank-gap",
+   "width": 768,
+   "message": "1 stretch(es) of the page hold nothing at all: 760px at 3796px (the screen is 1024px tall).",
+   "fix": "Close the gap: a section gap is 120–240px on desktop and 72–112px on a phone. Look for a min-height: 100vh on a short section, an empty grid row, a hidden element still holding its space, or a reveal that never fired. A deliberate rest is a placed picture or colour field, not nothing.",
+   "alsoAt": [
+    390
+   ]
+  },
+  {
+   "level": "FAIL",
+   "id": "headline-lines",
+   "width": 390,
+   "message": "1 headline(s) wrap past two lines at 390px: \"webcomponents for scoped consistent shareable us\" → 4 lines (7 words, 41.6px)",
+   "fix": "Cut words first (a headline is a title, not a sentence). Then give it a wider measure. Lower the size only as a last resort and never below the scale you chose. A real statement paragraph belongs in a <p> or <blockquote> at 24px or less."
+  }
+ ],
+ "images": [
+  {
+   "viewport": "desktop",
+   "width": 1440,
+   "fold": "/usr2/sites/concorde/.taste-skill/before/desktop-fold.jpg",
+   "pages": [
+    "/usr2/sites/concorde/.taste-skill/before/desktop-page-01.jpg",
+    "/usr2/sites/concorde/.taste-skill/before/desktop-page-02.jpg"
+   ],
+   "film": []
+  },
+  {
+   "viewport": "tablet",
+   "width": 768,
+   "fold": "/usr2/sites/concorde/.taste-skill/before/tablet-fold.jpg",
+   "pages": [
+    "/usr2/sites/concorde/.taste-skill/before/tablet-page-01.jpg"
+   ],
+   "film": []
+  },
+  {
+   "viewport": "mobile",
+   "width": 390,
+   "fold": "/usr2/sites/concorde/.taste-skill/before/mobile-fold.jpg",
+   "pages": [
+    "/usr2/sites/concorde/.taste-skill/before/mobile-page-01.jpg"
+   ],
+   "film": []
+  }
+ ]
+}