mosaic-headless 1.6.0 → 1.8.0

package/data/design-audit.csv

@@ -1 +1,4 @@
 url,breakpoints,check,level,node,detail,sample
+https://mosaic.moksaweb.com/moksa/,"_,_t,_m",TEXT_CLIP,warn,p.M_EL206,"color is rgba(0, 0, 0, 0); painted by something else - contrast NOT checked here",01
+https://mosaic.moksaweb.com/moksa/,"_,_t,_m",TEXT_CLIP,warn,h2.M_EL209,"color is rgba(0, 0, 0, 0); painted by background-clip:text - contrast NOT checked here","技術是拿來解決問題的，
+不是拿來炫耀的。"

package/data/intro-verification.csv

@@ -2,7 +2,7 @@ check,result,detail
 PLAYS,PASS,43 of 43 intro elements changed state
 COUNTS,PASS,--mk-n reached 100
 ENDS,PASS,veil is out of hit-testing from 4200ms
-NO_TRAP,PASS,"0 content elements still at opacity 0 in the viewport (41 below the fold awaiting their own scroll timeline, 1 mid-blink)"
+NO_TRAP,PASS,"0 content elements still at opacity 0 in the viewport (61 below the fold awaiting their own scroll timeline, 1 mid-blink)"
 CLEARS,PASS,a real click landed on 'mk-caret-row'
 DEGRADES,PASS,with reduced motion the veil is display:none throughout
 READABLE,PASS,0 elements invisible at 120ms with reduced motion
@@ -10,13 +10,13 @@ READABLE,PASS,0 elements invisible at 120ms with reduced motion
 t_ms,counter,veil_visibility,veil_clip,veil_covers_centre,hit_centre,invisible_content
 120,,,,False,html.no-js,0
 400,0,visible,none,True,mk-boot,7
-800,15,visible,none,True,mk-boot,7
-1300,42,visible,none,True,mk-boot,6
-1800,69,visible,none,True,p.M_EL56,3
-2300,97,visible,none,True,p.M_EL56,3
+800,11,visible,none,True,mk-boot,7
+1300,38,visible,none,True,mk-boot,7
+1800,66,visible,none,True,p.M_EL56,3
+2300,93,visible,none,True,p.M_EL56,3
 2700,100,visible,none,True,p.M_EL56,3
-3000,100,visible,inset(0px 0px 3.1269%),True,p.M_EL56,2
-3300,100,visible,inset(0px 0px 93.9568%),False,mk-caret-row,2
+3000,100,visible,inset(0px 0px 0.209424%),True,p.M_EL56,3
+3300,100,visible,inset(0px 0px 80.1684%),False,mk-caret-row,2
 3700,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0
 4200,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0
 5200,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0

package/data/rwd-verification.csv

@@ -87,6 +87,46 @@ https://mosaic.moksaweb.com/moksa/,mk-svc-3,_m,grid-template-columns,"repeat(1,
 https://mosaic.moksaweb.com/moksa/,mk-svc-3,_m,row-gap,10px,10px,verified
 https://mosaic.moksaweb.com/moksa/,mk-svc-3,_m,padding-top,20px,20px,verified
 https://mosaic.moksaweb.com/moksa/,mk-svc-3,_m,padding-bottom,20px,20px,verified
+https://mosaic.moksaweb.com/moksa/,matrix,_t,padding-left,28px,28px,verified
+https://mosaic.moksaweb.com/moksa/,matrix,_t,padding-right,28px,28px,verified
+https://mosaic.moksaweb.com/moksa/,matrix,_m,padding-left,18px,18px,verified
+https://mosaic.moksaweb.com/moksa/,matrix,_m,padding-right,18px,18px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-pad,_m,padding-top,52px,52px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-pad,_m,padding-bottom,52px,52px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-cols,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-cols,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-0,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-0,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-0,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-0,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-1,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-1,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-1,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-1,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-2,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-2,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-2,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-2,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-3,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-3,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-3,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-3,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-4,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-4,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-4,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-4,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-5,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-5,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-5,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-5,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-6,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-6,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-6,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-6,_m,padding-bottom,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-7,_m,grid-template-columns,"1fr repeat(3, 46px)","1fr repeat(3, 46px)",verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-7,_m,column-gap,6px,6px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-7,_m,padding-top,11px,11px,verified
+https://mosaic.moksaweb.com/moksa/,mk-mx-r-7,_m,padding-bottom,11px,11px,verified
 https://mosaic.moksaweb.com/moksa/,process,_t,padding-left,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,process,_t,padding-right,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,process,_m,padding-left,18px,18px,verified
@@ -104,6 +144,22 @@ https://mosaic.moksaweb.com/moksa/,mk-proc-2,_m,padding-top,20px,20px,verified
 https://mosaic.moksaweb.com/moksa/,mk-proc-2,_m,padding-right,0px,0px,verified
 https://mosaic.moksaweb.com/moksa/,mk-proc-3,_m,padding-top,20px,20px,verified
 https://mosaic.moksaweb.com/moksa/,mk-proc-3,_m,padding-right,0px,0px,verified
+https://mosaic.moksaweb.com/moksa/,figure,_t,padding-left,28px,28px,verified
+https://mosaic.moksaweb.com/moksa/,figure,_t,padding-right,28px,28px,verified
+https://mosaic.moksaweb.com/moksa/,figure,_m,padding-left,18px,18px,verified
+https://mosaic.moksaweb.com/moksa/,figure,_m,padding-right,18px,18px,verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-pad,_m,padding-top,54px,54px,verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-pad,_m,padding-bottom,54px,54px,verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-grid,_t,grid-template-columns,1fr 34px 1fr 34px 1fr,1fr 34px 1fr 34px 1fr,verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-grid,_m,grid-template-columns,"repeat(1, 1fr)","repeat(1, 1fr)",verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-grid,_m,row-gap,8px,8px,verified
+https://mosaic.moksaweb.com/moksa/,mk-fig2-grid,_m,margin-top,24px,24px,verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-a-0,_m,transform,rotate(90deg),rotate(90deg),verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-b-0,_m,transform,rotate(90deg),rotate(90deg),verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-a-1,_m,transform,rotate(90deg),rotate(90deg),verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-b-1,_m,transform,rotate(90deg),rotate(90deg),verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-a-2,_m,transform,rotate(90deg),rotate(90deg),verified
+https://mosaic.moksaweb.com/moksa/,mk-ar-b-2,_m,transform,rotate(90deg),rotate(90deg),verified
 https://mosaic.moksaweb.com/moksa/,works,_t,padding-left,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,works,_t,padding-right,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,works,_m,padding-left,18px,18px,verified
@@ -148,6 +204,9 @@ https://mosaic.moksaweb.com/moksa/,mk-work-8,_m,grid-template-columns,1fr,1fr,ve
 https://mosaic.moksaweb.com/moksa/,mk-work-8,_m,row-gap,5px,5px,verified
 https://mosaic.moksaweb.com/moksa/,mk-work-8,_m,padding-top,15px,15px,verified
 https://mosaic.moksaweb.com/moksa/,mk-work-8,_m,padding-bottom,15px,15px,verified
+https://mosaic.moksaweb.com/moksa/,mk-pan,_m,padding-top,22px,22px,verified
+https://mosaic.moksaweb.com/moksa/,mk-pan,_m,padding-bottom,22px,22px,verified
+https://mosaic.moksaweb.com/moksa/,mk-pan-track,_m,column-gap,30px,30px,verified
 https://mosaic.moksaweb.com/moksa/,specimen,_t,padding-left,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,specimen,_t,padding-right,28px,28px,verified
 https://mosaic.moksaweb.com/moksa/,specimen,_m,padding-left,18px,18px,verified

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
   "keywords": [
     "wordpress",

package/sites/_moksa.py

@@ -334,6 +334,15 @@ BOOT_LOG = [
 ]
 RULER_TICKS = 13
 
+# FIGURE 01's rows. Up here with the other tables rather than beside the section
+# that draws it, because motion_css() reads it to build the arrow stagger and is
+# defined long before the figure is.
+FLOW = [
+    ("網站表單", "FORM", "n8n 節點", "WORKFLOW", "ERP 建單", "ERP"),
+    ("電商訂單", "ORDER", "Claude 判讀", "REASONING", "通知／報表", "NOTIFY"),
+    ("客服訊息", "INBOX", "分類與派工", "TRIAGE", "CRM 紀錄", "CRM"),
+]
+
 CLAUSES = [
     ("01", "SERVICES", "#services", "--mk-s1"),
     ("02", "PROCESS", "#process", "--mk-s2"),
@@ -358,6 +367,12 @@ REVEALS = [
     ("mk-work-4", 3), ("mk-work-5", 3), ("mk-work-6", 4), ("mk-work-7", 4),
     ("mk-work-8", 5),
     ("mk-plate-num", 0), ("mk-plate-t", 1),
+    ("mk-mx-head", 0), ("mk-mx-cols", 1),
+    ("mk-mx-r-0", 1), ("mk-mx-r-1", 2), ("mk-mx-r-2", 2), ("mk-mx-r-3", 3),
+    ("mk-mx-r-4", 3), ("mk-mx-r-5", 4), ("mk-mx-r-6", 4), ("mk-mx-r-7", 5),
+    ("mk-fig2-head", 0), ("mk-fl-a-0", 1), ("mk-fl-b-0", 2), ("mk-fl-c-0", 3),
+    ("mk-fl-a-1", 2), ("mk-fl-b-1", 3), ("mk-fl-c-1", 4),
+    ("mk-fl-a-2", 3), ("mk-fl-b-2", 4), ("mk-fl-c-2", 5),
     ("mk-spec2-head", 0), ("mk-spec2-r-0", 1), ("mk-spec2-r-1", 2),
     ("mk-spec2-r-2", 3), ("mk-spec2-r-3", 4),
     ("mk-stack-head", 0), ("mk-stack-0", 1), ("mk-stack-1", 2), ("mk-stack-2", 3),
@@ -390,6 +405,12 @@ def motion_css():
                           for i, (_g, items) in enumerate(STACK)
                           for j in range(len(items)))
     marks = ",".join("#mk-mark-%d" % i for i in range(4))
+    # the diagram's arrows, and the delay that makes the pulse travel down it
+    flow_arrows = ",".join("#mk-ar-%s-%d>*" % (c, i)
+                           for i in range(len(FLOW)) for c in ("a", "b"))
+    flow_stagger = "\n".join(
+        "  #mk-ar-%s-%d>*{animation-delay:%dms}" % (c, i, i * 260 + j * 130)
+        for i in range(len(FLOW)) for j, c in enumerate(("a", "b")))
     # the boot sequence, phase by phase: the clauses report in, the log writes
     # itself out a line at a time, and the ruler ticks up the left margin
     boot_stagger = "\n".join(
@@ -455,6 +476,15 @@ def motion_css():
         "@keyframes mk-idxon{from,to{color:rgb(255,90,54);"
         "letter-spacing:.2em}}",
         "@keyframes mk-dotin{from{transform:scale(0)}to{transform:scale(1)}}",
+        # the accent band pans sideways while it crosses the viewport
+        "@keyframes mk-pan{from{transform:translateX(2%)}"
+        "to{transform:translateX(-34%)}}",
+        # a headline that fills with ink as it is read past
+        "@keyframes mk-fillscrub{from{background-position:100% 0}"
+        "to{background-position:0 0}}",
+        # a pulse travelling down the diagram's arrows
+        "@keyframes mk-flow{0%{transform:translateX(-7px);opacity:.2}"
+        "45%{opacity:1}100%{transform:translateX(7px);opacity:.2}}",
 
         # ── the document frame ───────────────────────────────────────────────
         # A spec sheet has margins. These two fixed rules are what say the content
@@ -522,8 +552,14 @@ def motion_css():
 
         # the clause index. It needs room outside the document margin, so it only
         # appears once the viewport is wide enough to have that room.
-        "#mk-index{position:fixed;left:14px;top:50%;transform:translateY(-50%);"
-        "z-index:3;display:grid;row-gap:11px;pointer-events:auto}",
+        # The index is FIXED, so it does not sit on the ground it was declared
+        # against - it sits on whatever has scrolled underneath. Over the accent
+        # band its faint grey became unreadable. Giving it its own paper ground
+        # means it carries its background with it instead of borrowing one.
+        "#mk-index{position:fixed;left:8px;top:50%;transform:translateY(-50%);"
+        "z-index:3;display:grid;row-gap:11px;pointer-events:auto;"
+        "background:rgb(250,250,247);padding:14px 10px;"
+        "border:1px solid " + RULE + "}",
         "@media (max-width:1439px){#mk-index{display:none}}",
 
         # process: the sequence marker on each step, and the line it sits on
@@ -692,6 +728,8 @@ def motion_css():
         "  #mk-mast-meta{animation-delay:3.06s}",
         "  #mk-mast-lede{animation-delay:3.54s}",
         "  #mk-mast-cta{animation-delay:3.66s}",
+        "  " + flow_arrows + "{animation:mk-flow 1.9s ease-in-out infinite}",
+        flow_stagger,
         "  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;"
         "animation-delay:3.84s}",
         "  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
@@ -725,6 +763,28 @@ def motion_css():
         # the sequence markers pop as each step arrives
         "    " + proc_dots + "{animation:mk-dotin .01s linear both;"
         "animation-timeline:view();animation-range:entry 14% cover 26%}",
+        # the band pans across the whole time it is on screen
+        "    #mk-pan-track{animation:mk-pan linear both;"
+        "animation-timeline:view();animation-range:cover 0% cover 100%}",
+        # The statement fills with ink as it passes. The gradient is built so the
+        # UNANIMATED state shows the faint half - `color:transparent` plus
+        # `background-clip:text` is one of the few ways to make text that is
+        # genuinely invisible if its animation never runs, and the page must never
+        # depend on that. At `from` the visible half is the faint colour, so the
+        # worst case is a paler headline, not a missing one.
+        "    #mk-plate-t h2{background-image:linear-gradient(90deg,"
+        # The unfilled half is `--mk-faint`, not a decorative pale grey. At
+        # rgb(168,170,176) the tail of the line measured 2.3:1 against the panel
+        # while the scrub had not reached it - readable only once you had scrolled
+        # far enough, which is not a thing to ask of a sentence. This value clears
+        # 4.66:1 on its own, so the effect is a change in weight rather than a
+        # change between legible and not.
+        "rgb(22,24,28) 0 50%,rgb(107,109,113) 50% 100%);"
+        "background-size:220% 100%;background-position:100% 0;"
+        "-webkit-background-clip:text;background-clip:text;"
+        "color:rgba(0,0,0,0);"
+        "animation:mk-fillscrub linear both;animation-timeline:view();"
+        "animation-range:entry 24% cover 58%}",
         "  }",
         "  @supports (timeline-scope:--x){",
         # the index entry lights while its own section is on screen. No fill mode, so
@@ -1337,6 +1397,178 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
         ]),
 ])])
 
+# ── the pan strip ─────────────────────────────────────────────────────────────
+# The page has no field of colour anywhere - the accent has only ever been a rule, a
+# mark or a small block. A band of it, with the whole line panning sideways as you
+# scroll down, is the one moment here that is purely about being looked at. Ink on
+# the accent measures 5.73:1, which is why the type is dark rather than light.
+PAN_WORDS = ["WEB", "COMMERCE", "AUTOMATION", "AI", "ERP", "SEO", "SOFTWARE"]
+
+PAN = box("mk-pan",
+          {"backgroundColor": {"token": "--mk-accent"},
+           "paddingTop": "34px", "paddingBottom": "34px",
+           "customStyles": "overflow:hidden;"},
+          _m={"paddingTop": "22px", "paddingBottom": "22px"},
+          children=[
+              box("mk-pan-track",
+                  {"display": "flex", "columnGap": "56px", "alignItems": "baseline",
+                   "customStyles": "white-space:nowrap;width:max-content;"},
+                  _m={"columnGap": "30px"},
+                  children=[
+                      node for i, w in enumerate(PAN_WORDS) for node in (
+                          box("mk-pan-n-%d" % i, {},
+                              [mono("%02d" % (i + 1), size="11px",
+                                    color="rgb(22,24,28)", track="0.18em")]),
+                          box("mk-pan-w-%d" % i, {},
+                              [T("p", w, color={"token": "--mk-ink"},
+                                 fontSize="58px", fontWeight="600",
+                                 fontFamily=DISPLAY, letterSpacing="-0.02em",
+                                 lineHeight="1",
+                                 _t={"fontSize": "44px"},
+                                 _m={"fontSize": "31px"})]),
+                      )
+                  ]),
+          ])
+
+
+# ── the capability matrix ─────────────────────────────────────────────────────
+# The page could tell you what the studio does; a specification SHOWS you, in a form
+# you can read across. Filled, half and hollow marks carry the whole answer without
+# a sentence, and the density is the point - this is the one block on the page that
+# rewards being read as a grid rather than as a line.
+MATRIX_COLS = ["網站", "電商", "自動化"]
+MATRIX = [
+    ("客製化設計", "BESPOKE DESIGN", "●", "●", "◐"),
+    ("RWD 三段點", "RESPONSIVE", "●", "●", "○"),
+    ("SEO 結構化資料", "STRUCTURED DATA", "●", "●", "○"),
+    ("金流／物流串接", "PAYMENT / LOGISTICS", "○", "●", "◐"),
+    ("會員與訂單系統", "ACCOUNTS / ORDERS", "○", "●", "◐"),
+    ("n8n 流程自動化", "WORKFLOW AUTOMATION", "◐", "◐", "●"),
+    ("AI 內容與判讀", "AI CONTENT / REASONING", "◐", "◐", "●"),
+    ("上線後維運", "MAINTENANCE", "●", "●", "●"),
+]
+
+
+def mark(sym, i, j):
+    """One cell of the matrix. The symbol carries the meaning; the colour only
+    reinforces it, so it still reads if the colour is gone."""
+    colour = "--mk-ink" if sym == "●" else (
+        "--mk-accent-ink" if sym == "◐" else "--mk-faint")
+    return box("mk-mx-c-%d-%d" % (i, j),
+               {"display": "flex", "justifyContent": "center"},
+               [T("p", sym, color={"token": colour}, fontSize="13px",
+                  fontFamily=MONO, lineHeight="1")])
+
+
+MATRIX_SEC = section("matrix", [wrap("mk-mx-in", [
+    box("mk-mx-pad", {"paddingTop": "78px", "paddingBottom": "78px"},
+        _m={"paddingTop": "52px", "paddingBottom": "52px"},
+        children=[
+            box("mk-mx-head",
+                {"display": "flex", "justifyContent": "space-between",
+                 "columnGap": "20px", "rowGap": "8px", "alignItems": "baseline",
+                 "customStyles": "flex-wrap:wrap;"},
+                [mono("TABLE 01 — CAPABILITY", size="10px",
+                      color="--mk-accent-ink", track="0.22em"),
+                 mono("● 標準   ◐ 選配   ○ 不含", size="10px",
+                      color="--mk-faint", track="0.12em")]),
+            # the column header, then one row per capability
+            box("mk-mx-cols",
+                {"display": "grid", "gridCols": "1fr repeat(3, 78px)",
+                 "columnGap": "10px", "alignItems": "end", "marginTop": "26px",
+                 "paddingBottom": "10px",
+                 "customStyles": "border-bottom:1px solid " + RULE_INK + ";"},
+                _m={"gridCols": "1fr repeat(3, 46px)", "columnGap": "6px"},
+                children=[mono("CAPABILITY", size="10px", color="--mk-faint",
+                               track="0.18em")]
+                + [box("mk-mx-h-%d" % j,
+                       {"display": "flex", "justifyContent": "center"},
+                       [mono(c, size="11px", color="--mk-ink", track="0.06em")])
+                   for j, c in enumerate(MATRIX_COLS)]),
+            box("mk-mx-rows", {}, [
+                box("mk-mx-r-%d" % i,
+                    {"display": "grid", "gridCols": "1fr repeat(3, 78px)",
+                     "columnGap": "10px", "alignItems": "center",
+                     "paddingTop": "13px", "paddingBottom": "13px",
+                     "customStyles": "border-bottom:1px solid " + RULE + ";"},
+                    _m={"gridCols": "1fr repeat(3, 46px)", "columnGap": "6px",
+                        "paddingTop": "11px", "paddingBottom": "11px"},
+                    children=[
+                        box("mk-mx-n-%d" % i,
+                            {"display": "flex", "columnGap": "12px",
+                             "alignItems": "baseline", "rowGap": "2px",
+                             "customStyles": "flex-wrap:wrap;"},
+                            [T("p", zh, color={"token": "--mk-ink"},
+                               fontSize="14px", _m={"fontSize": "12.5px"}),
+                             mono(en, size="9px", color="--mk-faint",
+                                  track="0.16em", _m={"display": "none"})]),
+                    ] + [mark(sym, i, j) for j, sym in enumerate(marks)])
+                for i, (zh, en, *marks) in enumerate(MATRIX)
+            ]),
+        ]),
+])], bg="--mk-panel")
+
+
+# ── FIGURE 01: what a workflow actually looks like ────────────────────────────
+# The page had no graphic on it at all - every section was type and rules, which is
+# austere for eleven screens. A diagram is the one element that says something no
+# sentence here can, and drawn in hairline boxes it belongs to the same document
+# rather than arriving from a different one.
+
+
+def flow_cell(attr, zh, en):
+    return box(attr,
+               {"paddingTop": "14px", "paddingBottom": "14px",
+                "paddingLeft": "16px", "paddingRight": "16px",
+                "customStyles": "border:1px solid " + RULE + ";"},
+               [mono(en, size="9px", color="--mk-faint", track="0.18em"),
+                T("p", zh, color={"token": "--mk-ink"}, fontSize="14px",
+                  marginTop="6px", _m={"fontSize": "13px"})])
+
+
+def arrow(attr):
+    return box(attr, {"display": "flex", "justifyContent": "center",
+                      "alignItems": "center"},
+               [T("p", "→", color={"token": "--mk-accent-ink"}, fontSize="15px",
+                  fontFamily=MONO)],
+               _m={"customStyles": "transform:rotate(90deg);"})
+
+
+FIGURE_SEC = section("figure", [wrap("mk-fig2-in", [
+    box("mk-fig2-pad", {"paddingTop": "82px", "paddingBottom": "82px"},
+        _m={"paddingTop": "54px", "paddingBottom": "54px"},
+        children=[
+            box("mk-fig2-head",
+                {"display": "flex", "justifyContent": "space-between",
+                 "columnGap": "20px", "rowGap": "8px",
+                 "customStyles": "flex-wrap:wrap;"},
+                [mono("FIGURE 01 — A WORKFLOW", size="10px",
+                      color="--mk-accent-ink", track="0.22em"),
+                 mono("INPUT → PROCESS → OUTPUT", size="10px",
+                      color="--mk-faint", track="0.18em")]),
+            box("mk-fig2-grid",
+                {"display": "grid", "gridCols": "1fr 44px 1fr 44px 1fr",
+                 "columnGap": "0px", "rowGap": "16px", "marginTop": "34px"},
+                _t={"gridCols": "1fr 34px 1fr 34px 1fr"},
+                _m={"gridCols": "repeat(1, 1fr)", "rowGap": "8px",
+                    "marginTop": "24px"},
+                children=[
+                    node for i, row in enumerate(FLOW) for node in (
+                        flow_cell("mk-fl-a-%d" % i, row[0], row[1]),
+                        arrow("mk-ar-a-%d" % i),
+                        flow_cell("mk-fl-b-%d" % i, row[2], row[3]),
+                        arrow("mk-ar-b-%d" % i),
+                        flow_cell("mk-fl-c-%d" % i, row[4], row[5]),
+                    )
+                ]),
+            T("p", "同一條線可以接任何一端：表單、訂單、訊息進來，"
+                   "判斷與轉換在中間，結果送到你本來就在用的系統裡。",
+              color={"token": "--mk-muted"}, fontSize="13px", lineHeight="1.95",
+              marginTop="26px", maxWidth="42em", _m={"fontSize": "12.5px"}),
+        ]),
+])])
+
+
 # ── PLATE 01: a statement ─────────────────────────────────────────────────────
 # Every clause on this page has the same rhythm - a numbered head, then hairline
 # rows. That is correct for a specification and monotonous for a page. A document
@@ -1511,8 +1743,9 @@ HOME_TREE = {"type": "div", "data": {"attrID": "mk-home"},
                  MARKS, INDEX, CUE,
                  # paper, panel, paper, ink, paper, ink, paper - the page
                  # changes ground five times so it reads as chapters
-                 MASTHEAD, TICKER_BAND, PLATE, SERVICE_SEC, PROCESS_SEC,
-                 WORK_SEC, SPECIMEN, STACK_SEC, PRODUCT_SEC, VOICE_SEC, CONTACT,
+                 MASTHEAD, TICKER_BAND, PLATE, SERVICE_SEC, MATRIX_SEC,
+                 PROCESS_SEC, FIGURE_SEC, WORK_SEC, PAN, SPECIMEN, STACK_SEC,
+                 PRODUCT_SEC, VOICE_SEC, CONTACT,
              ])]}
 
 SITE = {