@supersoniks/concorde 5.1.2 → 5.1.3-immutable.2

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

@@ -1,2556 +0,0 @@
-{
- "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": []
-  }
- ]
-}