mosaic-headless 1.4.0 → 1.5.1

package/README.ja.md

@@ -62,6 +62,7 @@ URL に対応するテンプレなし   HTTP 406、未ログインには空の b
 | **レスポンシブ** | 2 サイト計 576 件の `_t`/`_m` 宣言を、サイトが実際に配信したスタイルシートに対して 1 件ずつ断言 — 全件検証済み |
 | **スタイル状態** | 53 状態のうち 52 を実ページに書き、テーブルが約束するセレクタと照合：**36 件が完全一致**、12 件 NO_HOST、3 件 SKIPPED、1 件 BROKE_PAGE。どの要素にも使えるグローバル 7 状態はすべて検証済み |
 | **インタラクション** | JS アニメーション経路を、ネガティブコントロール付きで保存行を読み戻しながら検証：`propertyMetas` は**受理され保存される**。プロパティ値は依然としてバインドされないが、その境界は厳密になった |
+| **入場アニメーション** | ページ読み込み後の 10 時点をサンプリングし 7 項目を断言 — 再生されること、アニメーションする `@property` カウンタが 100 に達すること、ベールがヒットテストから外れること、ビューポート内に opacity 0 のまま取り残された要素がないこと、実際のクリックが文書に届くこと、そして `prefers-reduced-motion` ではベールがそもそも存在しないこと |
 | **ブラウザ** | 配信されたページを Chromium の 3 つのビューポートで計算スタイル 2,282 件読み取り：1,676 件が一致、606 件は比較不能として明示、**上書き 0 件** |
 | **デザイン監査** | コントラスト、フォントフォールバック、CJK の字送り、横溢れ、テキストの切れ、1 行の文字数 — ブラウザ上で実行、**指摘 0 件** |
 | **テーマの書き出し／読み込み** | 往復検証済み：テーマ全体を書き出し、コピーとして読み込み、そのコピーがバイト単位で同一のページを配信 |

package/README.ko.md

@@ -62,6 +62,7 @@ URL에 맞는 템플릿 없음      HTTP 406, 로그인하지 않은 사용자
 | **반응형** | 두 사이트 합쳐 576개의 `_t`/`_m` 선언을, 사이트가 실제로 내보낸 스타일시트에 대해 하나씩 단언 — 전부 검증됨 |
 | **스타일 상태** | 53개 상태 중 52개를 실제 페이지에 쓰고 표가 약속한 셀렉터와 대조: **36개가 정확히 일치**, 12개 NO_HOST, 3개 SKIPPED, 1개 BROKE_PAGE. 어떤 요소에나 쓸 수 있는 전역 7개 상태는 전부 검증됨 |
 | **인터랙션** | JS 애니메이션 경로를 음성 대조군과 함께, 저장된 행을 되읽으며 검증: `propertyMetas`는 **수용되고 저장된다**. 속성 값은 여전히 바인딩되지 않지만 그 경계는 이제 정확하다 |
+| **인트로 애니메이션** | 페이지 로드 후 10개 시점을 샘플링해 7가지를 단언 — 재생될 것, 애니메이션되는 `@property` 카운터가 100에 도달할 것, 베일이 히트 테스트에서 빠질 것, 뷰포트 안에 opacity 0으로 갇힌 요소가 없을 것, 실제 클릭이 문서에 닿을 것, 그리고 `prefers-reduced-motion`에서는 베일이 아예 존재하지 않을 것 |
 | **브라우저** | 전달된 페이지를 Chromium의 세 가지 뷰포트에서 계산 스타일 2,282건 판독: 1,676건 일치, 606건은 비교 불가로 명시, **덮어쓰기 0건** |
 | **디자인 감사** | 명암비, 폰트 폴백, CJK 자간, 가로 넘침, 텍스트 잘림, 한 줄 글자 수 — 브라우저에서 실행, **지적 0건** |
 | **테마 내보내기/가져오기** | 왕복 검증: 테마 전체를 내보내 사본으로 가져왔고, 사본이 바이트 단위로 동일한 페이지를 제공 |

package/README.md

@@ -63,6 +63,7 @@ factories, so Pro types register and render regardless.
 | **responsive** | 576 `_t`/`_m` declarations across two sites asserted against the stylesheet the site actually served — all verified |
 | **style states** | 52 of the 53 states written to a live page and matched against the selector the table promises: **36 compiled exactly**, 12 NO_HOST, 3 SKIPPED, 1 BROKE_PAGE. All seven globally usable states verified |
 | **interactions** | the JS animation path probed with negative controls and the row read back: `propertyMetas` **is** accepted and stored; the property values still do not bind, and the boundary is now exact |
+| **entrance animation** | the page-load sequence sampled at ten timestamps and asserted on seven counts — it plays, its animated `@property` counter reaches 100, the veil leaves hit-testing, nothing in the viewport is stranded at opacity 0, a real click reaches the document, and under `prefers-reduced-motion` the veil never exists at all |
 | **browser** | 2,282 computed-style readings on the delivered page in Chromium at three viewports: 1,676 compared and agreed, 606 not-comparable and labelled, **0 overridden** |
 | **design audit** | contrast, font fallback, CJK tracking, overflow, clipped text, line measure — run in the browser, **0 findings** |
 | **theme export/import** | round-tripped: a full theme exported, re-imported as a copy, and the copy served byte-identical pages |

package/README.zh-TW.md

@@ -55,6 +55,7 @@ commit 時 PHP fatal   HTTP 500  （122 種型別裡有 15 種，光放在 div
 | **響應式** | 兩個站共 576 條 `_t`/`_m` 宣告，對照網站實際送出的樣式表逐條斷言——全數通過 |
 | **樣式狀態** | 53 個狀態中的 52 個寫進真實頁面，對照表格承諾的選擇器逐一比對：**36 個完全吻合**、12 個 NO_HOST、3 個 SKIPPED、1 個 BROKE_PAGE。七個可用於任何元素的狀態全數驗證 |
 | **互動動畫** | 帶負對照組並讀回儲存列來探測 JS 動畫路徑：`propertyMetas` **確實**會被接受並儲存；屬性值仍然無法綁定，但界線現在很精確 |
+| **入口動畫** | 在載入後十個時間點取樣並做七項斷言——它有播、被動畫的 `@property` 計數器跑到 100、遮罩退出點擊判定、視窗內沒有任何內容卡在 opacity 0、真實點擊落在文件上，而在 `prefers-reduced-motion` 下遮罩根本不存在 |
 | **瀏覽器** | 在 Chromium 三個視窗寬度上對交付頁面做 2,282 次計算樣式讀取：1,676 條比對相符、606 條標為無法比對、**0 條被覆蓋** |
 | **設計稽核** | 對比度、字體回退、CJK 字距、水平溢出、文字裁切、每行字數——在瀏覽器裡跑，**0 項發現** |
 | **主題匯出／匯入** | 完整來回驗證：匯出整個主題、以副本身分匯入，副本送出的頁面逐位元組相同 |

package/SKILL.md

@@ -4,7 +4,7 @@ description: |
   Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface with `mo.py`, which joins every source table to the live sweeps so a lookup leads with the measured verdict rather than the declaration (122 node types, 181 properties, 98 style properties with 20 structured value shapes pinned down, 53 style states, 151 element classes, 74 dynamic variables, 12 interaction triggers, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, the design-token and element-class layers verified against compiled CSS, the @VAR() dynamic language verified against rendered output, nine designed pages built through the tables themselves, and the delivered page re-read in Chromium at three viewports so a rule that is present, correct and still wrong cannot pass.
 license: "MIT"
 author: "moksa (https://moksaweb.com)"
-version: "1.4.0"
+version: "1.5.1"
 ---
 
 # Headless Mosaic
@@ -155,6 +155,13 @@ INTERACTION  the JS animation path, probed with negative controls and the row re
              written straight into the table with caches flushed.
              data/interaction-verification.csv
 
+INTRO        the page-load sequence sampled at ten timestamps across its life and
+             asserted on seven counts - it plays, the animated `@property` counter
+             reaches 100, the veil leaves hit-testing, no in-viewport content is
+             stranded at opacity 0, a real click reaches the document, and under
+             `prefers-reduced-motion` the veil never exists at all. All pass.
+             data/intro-verification.csv
+
 BROWSER      2,282 computed-style readings on the delivered page in Chromium, at
              three viewports: every declared property vs `getComputedStyle` on the
              node it targets. 1,676 compared and agreed, 606 not-comparable and
@@ -309,6 +316,7 @@ so the pattern is in the data, not just in this paragraph.
 | `data/data-class-hierarchy.csv` | 121 | source - every data class and its parent, so a type's inherited properties can be resolved |
 | `data/style-state-verification.csv` | 52 | **swept live** - each state written on a host of its own type and matched against its promised selector |
 | `data/interaction-verification.csv` | 7 | **probed live** - interaction animation shapes, with negative controls and the stored row beside the payload |
+| `data/intro-verification.csv` | 7 + 10 | **sampled live** - the entrance sequence over ten timestamps, plus the seven assertions about it |
 | `data/element-classes.csv` | 151 | **live** — the built-in class metas; their IDs are what an `elementClass` record must use |
 | `data/dynamic-variables.csv` | 74 | source — every `@VAR('ns/name')` expression, by namespace |
 | `data/evaluator-functions.csv` | 19 | source — the `@` functions with their arity |
@@ -409,6 +417,7 @@ post — `build_all.py` resets first for that reason.
 | `build_site.py` | a whole site: one master with the shell, one document per page |
 | `verify_rwd.py` | does every `_t`/`_m` declaration reach the served stylesheet? |
 | `verify_browser.py` | does the **browser** compute what the stylesheet promised - and does the result pass a design audit? |
+| `verify_intro.py` | does the page-load animation play, and - the part that matters - does it END and hand the page back? |
 | `sweep_node_types.py` | commit every node type one per document and assert the delivered HTML |
 | `sweep_style_properties.py` | write every style property and check the compiled CSS |
 | `sweep_node_properties.py` | probe every node property with a value from its own validator chain |
@@ -438,7 +447,10 @@ python tools/sweep_node_types.py --config sweep.json --setup
 python tools/sweep_node_types.py --config sweep.json --sweep --edition all
 python tools/sweep_properties.py --config sweep.json
 python tools/verify_rwd.py --config sweep.json --site sites/moksa.json --csv data/rwd-verification.csv
-python tools/verify_browser.py --config sweep.json --site sites/moksa.json     --csv data/browser-verification.csv --audit data/design-audit.csv
+python tools/verify_browser.py --config sweep.json --site sites/moksa.json \
+    --csv data/browser-verification.csv --audit data/design-audit.csv
+python tools/verify_intro.py --config sweep.json --site sites/moksa.json \
+    --csv data/intro-verification.csv --frames shots/intro/
 python tools/sweep_style_properties.py --config sweep.json --page moksa --csv data/style-verification.csv
 python tools/sweep_node_properties.py  --config sweep.json --page moksa --csv data/node-property-verification.csv
 python tools/sweep_style_states.py --config sweep.json --post 20 --slug probe-lab     --csv data/style-state-verification.csv

package/assets/templates/platforms/claude-ai.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.4.0"
+    "version": "1.5.1"
   },
   "loaderBehaviour": "Upload via Settings -> Skills -> Upload. Claude.ai parses SKILL.md frontmatter and surfaces the skill in your library. The extraction tool (extract-block-schema.php) needs a live WP-CLI connection and won't run in the sandbox; use it from a local terminal against your own site instead.",
   "uploadSteps": [

package/assets/templates/platforms/claude-code.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.4.0"
+    "version": "1.5.1"
   },
   "loaderBehaviour": "Auto-loads on session start when SKILL.md frontmatter parses successfully.",
   "verified": true,

package/assets/templates/platforms/codex-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.4.0"
+    "version": "1.5.1"
   },
   "loaderBehaviour": "Confirmed (2026-07-11): Codex CLI natively supports the SKILL.md spec. Place SKILL.md under .codex/skills/<name>/ (project) or ~/.codex/skills/<name>/ (personal) and Codex loads the name+description at session start, then the full body on demand. A parallel, broader convention .agents/skills/ (searched from cwd up to repo root, then ~/.agents/skills/) also exists across multiple tools - if your Codex CLI version prioritizes that path instead, mirror the same SKILL.md there.",
   "verified": true,

package/assets/templates/platforms/copilot.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.4.0"
+    "version": "1.5.1"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: GitHub Copilot added a proper '.github/skills/' Agent Skills directory (December 2025), alongside the older single-file .github/copilot-instructions.md convention. This config targets the new skills-directory form. If your Copilot version predates this (pre Dec 2025), use the instructions-append fallback instead (see fallback below).",
   "fallback": {

package/assets/templates/platforms/gemini-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.4.0"
+    "version": "1.5.1"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: Gemini CLI now natively supports the same SKILL.md standard as Claude Code and Codex CLI - the same directory-based skill works unmodified. Gemini CLI discovers skills in this precedence order: built-in, extension skills, ~/.gemini/skills/ (personal), .gemini/skills/ (project, shared via version control). At session start Gemini injects each discovered skill's name+description into the system prompt and calls activate_skill when a task matches.",
   "verified": true,

package/bin/check-release.mjs

@@ -110,6 +110,18 @@ if (browser.includes("OVERRIDDEN"))
 
 // The design audit ships even when it is empty, and empty has to mean "ran and found
 // nothing" rather than "was never run", so the header alone is the proof.
+// The intro table is two tables in one file - the checks and the timeline readings -
+// so a row count says nothing useful about it. What matters is that every check
+// passed, because a shipped example whose entrance animation never lifts is a blank
+// page for every visitor.
+const intro = read("data/intro-verification.csv");
+if (!intro.startsWith("check,result,detail"))
+  fail("data/intro-verification.csv is not the table verify_intro.py writes");
+for (const need of ["PLAYS", "ENDS", "NO_TRAP", "CLEARS", "DEGRADES"])
+  if (!new RegExp(`^${need},PASS`, "m").test(intro))
+    fail(`intro-verification.csv: ${need} did not pass`);
+if (/,FAIL,/.test(intro)) fail("data/intro-verification.csv carries a failed check");
+
 const audit = read("data/design-audit.csv");
 if (!audit.startsWith("url,breakpoints,check,level"))
   fail("data/design-audit.csv is not the audit table verify_browser.py writes");

package/data/intro-verification.csv

@@ -0,0 +1,20 @@
+check,result,detail
+PLAYS,PASS,17 of 17 intro elements changed state
+COUNTS,PASS,--mk-n reached 100
+ENDS,PASS,veil is out of hit-testing from 3200ms
+NO_TRAP,PASS,"0 content elements still at opacity 0 in the viewport (34 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
+
+t_ms,counter,veil_visibility,veil_clip,veil_covers_centre,hit_centre,invisible_content
+120,,,,False,html.no-js,0
+350,0,visible,none,True,mk-boot,7
+700,56,visible,none,True,mk-boot,7
+1100,94,visible,none,True,mk-boot,7
+1500,100,visible,none,True,mk-boot,4
+1750,100,visible,inset(0px 0px 2.37106%),True,mk-boot,2
+2050,100,visible,inset(0px 0px 99.6708%),False,mk-caret-row,2
+2400,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0
+3200,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0
+4500,100,hidden,inset(0px 0px 100%),False,mk-caret-row,0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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/references/failure-modes.md

@@ -188,6 +188,21 @@ wrappers were sitting correctly in the database and in the committed JSON.
 The tell is the byte count: if the size the builder reports and the size you fetch
 disagree, you are not looking at what you wrote.
 
+**And the cache cuts the other way too, which is worse.** Once every tool in the
+toolchain cache-busts, nothing is left looking at the page a visitor receives. A
+build finishes, every check reports green - responsive verified, computed values
+agreed, design audit clean, the entrance animation asserted on seven counts - and
+the site is still serving the previous document to everybody. Measured here: a
+visitor got 141,134 bytes with none of the new work in it while a cache-busted fetch
+of the same URL gave 148,457. Nothing was wrong except that nobody had looked.
+
+`build_site.py` now fetches each page twice at the end of the build, plain and
+cache-busted, and says so when they disagree. It cannot purge the cache - that needs
+credentials a build script has no business holding - but it must not be silent. Two
+fetches of the same live page differ by a few hundred bytes anyway, since nonces and
+ids regenerate per request, so the tolerance is proportional: natural variance
+measured at 0.25%, a stale document at 5%.
+
 `tools/verify_rwd.py` now appends a unique `_v=<ms>` query string and sends
 `Cache-Control: no-cache` on every fetch, so the assertion is always made against the
 document that was actually committed. Do the same in anything else that checks a page

package/sites/_moksa.py

@@ -376,6 +376,10 @@ 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 boot list lights one clause at a time
+    boot_stagger = "\n".join(
+        "  #mk-boot-c%d{animation-delay:%dms}" % (i, 260 + i * 120)
+        for i in range(len(CLAUSES)))
     # a named view timeline per section, declared on the section and consumed by its
     # index entry - `timeline-scope` on #mk-doc is what lets the name cross between
     # two elements that are not ancestor and descendant
@@ -528,21 +532,94 @@ def motion_css():
         "@media (max-width:1079px){#mk-cue{right:28px}}",
         "@media (max-width:767px){#mk-cue{right:18px;bottom:16px}}",
 
+        # ── the entrance sequence ────────────────────────────────────────────
+        # A page-load animation has one catastrophic failure mode: an overlay that
+        # covers the document and never leaves. So the veil is `display:none` in the
+        # BASE rule and is only switched on inside the motion query, alongside the
+        # animation that removes it. If motion is reduced, or the query never matches,
+        # or the stylesheet is truncated, the overlay does not exist at all - the
+        # failure direction is "no intro", never "no page".
+        "#mk-boot{display:none}",
+        # An integer that can be animated, and read back out of the element - which
+        # is what makes the counter verifiable rather than merely visible.
+        # `inherits:true` is load-bearing, and the reason is not obvious. The
+        # animation runs on #mk-boot-num, but the digits are drawn by its ::after
+        # through `counter(n)`. With `inherits:false` the pseudo-element never sees
+        # the animated value: measured mid-run, --mk-n was 18 on the element and 0
+        # on its ::after, so the counter sat at 0 for the whole sequence while the
+        # property underneath it animated perfectly.
+        "@property --mk-n{syntax:'<integer>';initial-value:0;inherits:true}",
+        "@keyframes mk-count{to{--mk-n:100}}",
+        "@keyframes mk-boot-out{"
+        "0%{clip-path:inset(0 0 0 0)}"
+        "100%{clip-path:inset(0 0 100% 0);visibility:hidden}}",
+        "@keyframes mk-boot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}",
+        "@keyframes mk-boot-line{from{opacity:.14}"
+        "60%{opacity:1;color:rgb(255,90,54)}to{opacity:.55;color:rgb(107,109,113)}}",
+        "@keyframes mk-boot-scan{from{transform:translateY(0)}"
+        "to{transform:translateY(100vh)}}",
+        "@keyframes mk-boot-fade{from{opacity:0}to{opacity:1}}",
+
         # ── motion, all of it opt-out-able ───────────────────────────────────
         "@media (prefers-reduced-motion:no-preference){",
+        "  #mk-boot{display:grid;position:fixed;inset:0;z-index:999;"
+        "background:rgb(250,250,247);align-content:center;justify-items:center;"
+        "row-gap:22px;overflow:hidden;"
+        "animation:mk-boot-out .5s cubic-bezier(.7,0,.3,1) 1.55s forwards}",
+        "  #mk-boot-head,#mk-boot-foot{position:absolute;left:40px;right:40px;"
+        "display:flex;justify-content:space-between;font-family:" + MONO + ";"
+        "font-size:10px;letter-spacing:.2em;color:rgb(107,109,113);"
+        "animation:mk-boot-fade .4s ease both}",
+        "  #mk-boot-head{top:34px}",
+        "  #mk-boot-foot{bottom:30px;animation-delay:.1s}",
+        "  #mk-boot-num{font-family:" + MONO + ";font-size:96px;font-weight:500;"
+        "line-height:1;letter-spacing:-.04em;color:rgb(22,24,28);"
+        "font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;"
+        "animation:mk-count 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        '  #mk-boot-num::after{counter-reset:n var(--mk-n);content:counter(n)}',
+        "  #mk-boot-row{display:flex;align-items:flex-end;column-gap:8px;"
+        "line-height:1}",
+        # the darkened cut, not the fill orange: 18px of rgb(255,90,54) on paper is
+        # 2.97:1 and the design audit refuses it. The progress rule beside it keeps
+        # the bright colour, because a 1px hairline is not text.
+        "  #mk-boot-pct{font-family:" + MONO + ";font-size:18px;"
+        "color:rgb(191,68,40);padding-bottom:12px}",
+        "  #mk-boot-track{width:min(420px,62vw);height:1px;"
+        "background:rgba(22,24,28,.14);position:relative}",
+        "  #mk-boot-fill{position:absolute;inset:0;background:rgb(255,90,54);"
+        "transform-origin:0 50%;"
+        "animation:mk-boot-fill 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        "  #mk-boot-list{display:flex;column-gap:18px;row-gap:8px;"
+        "flex-wrap:wrap;justify-content:center;font-family:" + MONO + ";"
+        "font-size:10px;letter-spacing:.18em}",
+        "  #mk-boot-list>*{opacity:.14;"
+        "animation:mk-boot-line .5s ease both}",
+        boot_stagger,
+        "  #mk-boot::before{content:\"\";position:absolute;inset:0;"
+        "background:"
+        "repeating-linear-gradient(90deg,rgba(22,24,28,.045) 0 1px,"
+        "transparent 1px 72px),"
+        "repeating-linear-gradient(0deg,rgba(22,24,28,.045) 0 1px,"
+        "transparent 1px 72px);"
+        "animation:mk-boot-fade .5s ease both}",
+        "  #mk-boot-scan{position:absolute;left:0;right:0;top:0;height:1px;"
+        "background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.55),"
+        "rgba(255,90,54,0));animation:mk-boot-scan 1.6s linear .1s both}",
+        "  @media (max-width:767px){#mk-boot-num{font-size:62px}"
+        "#mk-boot-head,#mk-boot-foot{left:18px;right:18px}}",
         "  #mk-hl1-mask>*,#mk-hl2-mask>*{transform:translateY(112%);"
         "animation:mk-linein .95s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-hl1-mask>*{animation-delay:.2s}",
-        "  #mk-hl2-mask>*{animation-delay:.32s}",
+        "  #mk-hl1-mask>*{animation-delay:1.72s}",
+        "  #mk-hl2-mask>*{animation-delay:1.84s}",
         "  #mk-mast-meta,#mk-mast-lede,#mk-mast-cta{opacity:0;"
         "animation:mk-softin .8s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-mast-meta{animation-delay:.06s}",
-        "  #mk-mast-lede{animation-delay:.66s}",
-        "  #mk-mast-cta{animation-delay:.78s}",
+        "  #mk-mast-meta{animation-delay:1.62s}",
+        "  #mk-mast-lede{animation-delay:2.10s}",
+        "  #mk-mast-cta{animation-delay:2.22s}",
         "  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;"
-        "animation-delay:.95s}",
+        "animation-delay:2.4s}",
         "  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
-        "animation-delay:.44s}",
+        "animation-delay:1.96s}",
         "  #mk-spec-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
         "animation-delay:.9s}",
         "  #mk-cue{opacity:0;animation:mk-softin .8s ease forwards;"
@@ -1184,6 +1261,40 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
         ]),
 ])])
 
+# ── the entrance sequence ─────────────────────────────────────────────────────
+# A boot screen, because the page is a specification document and this is what one
+# looks like while it is being read off a machine. It is CSS only: a counter that is
+# a real animated integer (`@property --mk-n`), a rule that fills with it, the seven
+# clauses reporting in one at a time, and a scan line. Then the whole panel clips
+# upward and is gone.
+#
+# Every id here is deliberate. `verify_intro.py` samples them over the first seconds
+# of the page's life, which is the only window in which any of this exists.
+BOOT = box("mk-boot", {}, [
+    box("mk-boot-scan", {}, []),
+    box("mk-boot-head", {}, [
+        mono("MOKSA WEB — STUDIO PROFILE", size="10px", color="--mk-faint",
+             track="0.2em"),
+        mono("REV. 2026.09", size="10px", color="--mk-faint", track="0.2em"),
+    ]),
+    box("mk-boot-row", {}, [
+        box("mk-boot-num", {}, []),
+        box("mk-boot-pct", {}, [T("p", "%")]),
+    ]),
+    box("mk-boot-track", {}, [box("mk-boot-fill", {}, [])]),
+    box("mk-boot-list", {},
+        # each clause gets its own box because the id is what the stagger
+        # targets, and `mono()` puts everything it is given into the style
+        [box("mk-boot-c%d" % i, {},
+             [mono("§" + num + " " + name, size="10px", color="--mk-faint",
+                   track="0.18em")])
+         for i, (num, name, _h, _t) in enumerate(CLAUSES)]),
+    box("mk-boot-foot", {}, [
+        mono("INITIALISING", size="10px", color="--mk-faint", track="0.2em"),
+        mono("TAICHUNG, TW", size="10px", color="--mk-faint", track="0.2em"),
+    ]),
+])
+
 # Registration marks. A spec sheet is a printed object and these are how one is
 # trimmed; here they simply say the page has edges that were decided.
 MARKS = box("mk-marks", {}, [box("mk-mark-%d" % i, {}, []) for i in range(4)])
@@ -1211,7 +1322,7 @@ CUE = box("mk-cue", {}, [
 ])
 
 HOME_TREE = {"type": "div", "data": {"attrID": "mk-home"},
-             "children": [box("mk-doc", {}, [
+             "children": [BOOT, box("mk-doc", {}, [
                  MARKS, INDEX, CUE,
                  MASTHEAD, TICKER_BAND, SERVICE_SEC, PROCESS_SEC, WORK_SEC,
                  STACK_SEC, PRODUCT_SEC, VOICE_SEC, CONTACT,

package/sites/moksa.json

@@ -54,7 +54,7 @@
      "data": {
       "attrID": "mk-motion-css",
       "insertLocation": "head",
-      "content": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&family=Noto+Sans+TC:wght@300;400;500&display=swap\">\n<style id=\"mk-motion\">\n@keyframes mk-linein{from{transform:translateY(110%)}to{transform:translateY(0)}}\n@keyframes mk-softin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\n@keyframes mk-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}\n@keyframes mk-drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n@keyframes mk-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n@keyframes mk-progress{from{width:0%}to{width:100%}}\n@keyframes mk-headrule{from{opacity:0}to{opacity:1}}\n@keyframes mk-headbg{from{background:rgba(250,250,247,0)}to{background:rgba(250,250,247,.9)}}\n@keyframes mk-caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}\n@keyframes mk-cuearrow{0%{transform:translateY(-3px) rotate(45deg);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(20px) rotate(45deg);opacity:0}}\n@keyframes mk-cuefade{0%,25%{opacity:1}100%{opacity:0}}\n@keyframes mk-digit{from{transform:translateY(105%)}to{transform:translateY(0)}}\n@keyframes mk-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n@keyframes mk-markin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}\n@keyframes mk-idxon{from,to{color:rgb(255,90,54);letter-spacing:.2em}}\n@keyframes mk-dotin{from{transform:scale(0)}to{transform:scale(1)}}\n#mk-doc{position:relative}\n#mk-doc::before,#mk-doc::after{content:\"\";position:fixed;top:0;bottom:0;width:1px;background:rgba(22,24,28,.16);z-index:1;pointer-events:none}\n#mk-doc::before{left:40px}\n#mk-doc::after{right:40px}\n@media (max-width:1079px){#mk-doc::before{left:28px}#mk-doc::after{right:28px}}\n@media (max-width:767px){#mk-doc::before,#mk-doc::after{display:none}}\n#mk-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,247,0);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}\n#mk-header::after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(22,24,28,.16);opacity:0}\n#mk-nav>*{position:relative}\n#mk-nav>*::after{content:\"\";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:rgb(255,90,54);transition:right .28s cubic-bezier(.2,.7,.3,1)}\n#mk-nav>*:hover::after{right:0}\n@media (hover:none){#mk-nav>*::after{right:0;opacity:.45}}\n#mk-progress-track{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;pointer-events:none;background:rgba(255,90,54,.16)}\n#mk-progress{position:absolute;left:0;top:0;width:0;height:100%;background:rgb(255,90,54)}\n#mk-mast-in{padding-top:128px}\n@media (max-width:1079px){#mk-mast-in{padding-top:104px}}\n@media (max-width:767px){#mk-mast-in{padding-top:88px}}\n#mk-caret{width:13px;height:19px;background:rgb(255,90,54)}\n#mk-mast-rule,#mk-spec-rule{height:1px;background:rgba(22,24,28,.16);transform:scaleX(0);transform-origin:0 50%}\n#mk-fig-0>div>*,#mk-fig-1>div>*,#mk-fig-2>div>*,#mk-fig-3>div>*{display:block;transform:translateY(105%)}\n#mk-work-0,#mk-work-1,#mk-work-2,#mk-work-3,#mk-work-4,#mk-work-5,#mk-work-6,#mk-work-7,#mk-work-8{position:relative;transition:background-color .2s ease,padding-left .28s cubic-bezier(.2,.7,.3,1)}\n#mk-work-0::after,#mk-work-1::after,#mk-work-2::after,#mk-work-3::after,#mk-work-4::after,#mk-work-5::after,#mk-work-6::after,#mk-work-7::after,#mk-work-8::after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgb(255,90,54);transform:scaleX(0);transform-origin:0 50%}\n#mk-work-0:hover,#mk-work-1:hover,#mk-work-2:hover,#mk-work-3:hover,#mk-work-4:hover,#mk-work-5:hover,#mk-work-6:hover,#mk-work-7:hover,#mk-work-8:hover{background-color:rgba(255,90,54,.06);padding-left:14px}\n#mk-work-0:hover #mk-work-idx-0,#mk-work-1:hover #mk-work-idx-1,#mk-work-2:hover #mk-work-idx-2,#mk-work-3:hover #mk-work-idx-3,#mk-work-4:hover #mk-work-idx-4,#mk-work-5:hover #mk-work-idx-5,#mk-work-6:hover #mk-work-idx-6,#mk-work-7:hover #mk-work-idx-7,#mk-work-8:hover #mk-work-idx-8{color:rgb(255,90,54)}\n#mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{position:fixed;width:13px;height:13px;z-index:2;pointer-events:none;opacity:0}\n#mk-mark-0{top:66px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42)}\n#mk-mark-1{top:66px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42)}\n#mk-mark-2{bottom:20px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42)}\n#mk-mark-3{bottom:20px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42)}\n@media (max-width:1279px){#mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{display:none}}\n#mk-index{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:3;display:grid;row-gap:11px;pointer-events:auto}\n@media (max-width:1439px){#mk-index{display:none}}\n#mk-proc-dot-0,#mk-proc-dot-1,#mk-proc-dot-2,#mk-proc-dot-3{width:7px;height:7px;background:rgb(255,90,54);border-radius:50%;transform:scale(0);margin-top:-4px}\n#mk-tag-0-0:hover,#mk-tag-0-1:hover,#mk-tag-0-2:hover,#mk-tag-0-3:hover,#mk-tag-0-4:hover,#mk-tag-1-0:hover,#mk-tag-1-1:hover,#mk-tag-1-2:hover,#mk-tag-1-3:hover,#mk-tag-1-4:hover,#mk-tag-2-0:hover,#mk-tag-2-1:hover,#mk-tag-2-2:hover,#mk-tag-2-3:hover,#mk-tag-2-4:hover,#mk-tag-3-0:hover,#mk-tag-3-1:hover,#mk-tag-3-2:hover,#mk-tag-3-3:hover,#mk-tag-3-4:hover,#mk-tag-4-0:hover,#mk-tag-4-1:hover,#mk-tag-4-2:hover,#mk-tag-4-3:hover,#mk-tag-4-4:hover{border-color:rgb(255,90,54)}\n#mk-ticker-track{display:flex;width:max-content;will-change:transform}\n#mk-ticker:hover #mk-ticker-track{animation-play-state:paused}\nhtml{scroll-behavior:smooth}\n#services,#works,#products,#contact{scroll-margin-top:82px}\n#mk-home{scroll-margin-top:0}\n@media (max-width:767px){#services,#works,#products,#contact{scroll-margin-top:68px}}\n#mk-cue{position:fixed;right:40px;bottom:24px;z-index:90;display:flex;align-items:center;column-gap:10px;pointer-events:none}\n#mk-cue-rail{position:relative;width:9px;height:24px}\n#mk-cue-rail::after{content:\"\";position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-4px;opacity:0;border-right:1px solid rgb(255,90,54);border-bottom:1px solid rgb(255,90,54)}\n@media (max-width:1079px){#mk-cue{right:28px}}\n@media (max-width:767px){#mk-cue{right:18px;bottom:16px}}\n@media (prefers-reduced-motion:no-preference){\n  #mk-hl1-mask>*,#mk-hl2-mask>*{transform:translateY(112%);animation:mk-linein .95s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-hl1-mask>*{animation-delay:.2s}\n  #mk-hl2-mask>*{animation-delay:.32s}\n  #mk-mast-meta,#mk-mast-lede,#mk-mast-cta{opacity:0;animation:mk-softin .8s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-mast-meta{animation-delay:.06s}\n  #mk-mast-lede{animation-delay:.66s}\n  #mk-mast-cta{animation-delay:.78s}\n  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;animation-delay:.95s}\n  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.44s}\n  #mk-spec-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.9s}\n  #mk-cue{opacity:0;animation:mk-softin .8s ease forwards;animation-delay:1.1s}\n  #mk-cue-rail::after{animation:mk-cuearrow 1.9s cubic-bezier(.4,0,.5,1) infinite}\n  #mk-ticker-track{animation:mk-ticker 40s linear infinite}\n  #mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{animation:mk-markin .5s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-mark-0{animation-delay:1.15s}\n  #mk-mark-1{animation-delay:1.24s}\n  #mk-mark-2{animation-delay:1.33s}\n  #mk-mark-3{animation-delay:1.42s}\n  @supports (animation-timeline:view()){\n    #mk-spec,#mk-svc-head,#mk-svc-0,#mk-svc-1,#mk-svc-2,#mk-svc-3,#mk-proc-head,#mk-proc-0,#mk-proc-1,#mk-proc-2,#mk-proc-3,#mk-works-head,#mk-work-0,#mk-work-1,#mk-work-2,#mk-work-3,#mk-work-4,#mk-work-5,#mk-work-6,#mk-work-7,#mk-work-8,#mk-stack-head,#mk-stack-0,#mk-stack-1,#mk-stack-2,#mk-stack-3,#mk-stack-4,#mk-prod-head,#mk-prod-0,#mk-prod-1,#mk-voice-head,#mk-voice-0,#mk-voice-1,#mk-voice-2,#mk-contact-head{animation:mk-rise .01s linear both;animation-timeline:view();animation-range:entry 2% cover 36%}\n    #mk-svc-0{animation-range:entry 6% cover 40%}\n    #mk-svc-1{animation-range:entry 10% cover 44%}\n    #mk-svc-2{animation-range:entry 14% cover 48%}\n    #mk-svc-3{animation-range:entry 18% cover 52%}\n    #mk-proc-0{animation-range:entry 6% cover 40%}\n    #mk-proc-1{animation-range:entry 10% cover 44%}\n    #mk-proc-2{animation-range:entry 14% cover 48%}\n    #mk-proc-3{animation-range:entry 18% cover 52%}\n    #mk-work-0{animation-range:entry 6% cover 40%}\n    #mk-work-1{animation-range:entry 6% cover 40%}\n    #mk-work-2{animation-range:entry 10% cover 44%}\n    #mk-work-3{animation-range:entry 10% cover 44%}\n    #mk-work-4{animation-range:entry 14% cover 48%}\n    #mk-work-5{animation-range:entry 14% cover 48%}\n    #mk-work-6{animation-range:entry 18% cover 52%}\n    #mk-work-7{animation-range:entry 18% cover 52%}\n    #mk-work-8{animation-range:entry 22% cover 56%}\n    #mk-stack-0{animation-range:entry 6% cover 40%}\n    #mk-stack-1{animation-range:entry 10% cover 44%}\n    #mk-stack-2{animation-range:entry 14% cover 48%}\n    #mk-stack-3{animation-range:entry 18% cover 52%}\n    #mk-stack-4{animation-range:entry 22% cover 56%}\n    #mk-prod-0{animation-range:entry 6% cover 40%}\n    #mk-prod-1{animation-range:entry 10% cover 44%}\n    #mk-voice-0{animation-range:entry 6% cover 40%}\n    #mk-voice-1{animation-range:entry 10% cover 44%}\n    #mk-voice-2{animation-range:entry 14% cover 48%}\n    #mk-fig-0>div>*,#mk-fig-1>div>*,#mk-fig-2>div>*,#mk-fig-3>div>*{animation:mk-digit .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}\n    #mk-fig-0>div,#mk-fig-1>div,#mk-fig-2>div,#mk-fig-3>div{animation:mk-rise .01s linear both;animation-timeline:view();animation-range:entry 0% entry 1%}\n    #mk-work-0::after,#mk-work-1::after,#mk-work-2::after,#mk-work-3::after,#mk-work-4::after,#mk-work-5::after,#mk-work-6::after,#mk-work-7::after,#mk-work-8::after{animation:mk-sweep .01s linear both;animation-timeline:view();animation-range:entry 12% cover 24%}\n    #mk-proc-dot-0,#mk-proc-dot-1,#mk-proc-dot-2,#mk-proc-dot-3{animation:mk-dotin .01s linear both;animation-timeline:view();animation-range:entry 14% cover 26%}\n  }\n  @supports (timeline-scope:--x){\n    #mk-doc{timeline-scope:--mk-s1,--mk-s2,--mk-s3,--mk-s4,--mk-s5,--mk-s6,--mk-s7}\n#services{view-timeline-name:--mk-s1;view-timeline-inset:45% 45%}\n#process{view-timeline-name:--mk-s2;view-timeline-inset:45% 45%}\n#works{view-timeline-name:--mk-s3;view-timeline-inset:45% 45%}\n#stack{view-timeline-name:--mk-s4;view-timeline-inset:45% 45%}\n#products{view-timeline-name:--mk-s5;view-timeline-inset:45% 45%}\n#mk-voices{view-timeline-name:--mk-s6;view-timeline-inset:45% 45%}\n#contact{view-timeline-name:--mk-s7;view-timeline-inset:45% 45%}\n  #mk-idx-0{animation:mk-idxon linear;animation-timeline:--mk-s1;animation-range:cover 0% cover 100%}\n  #mk-idx-1{animation:mk-idxon linear;animation-timeline:--mk-s2;animation-range:cover 0% cover 100%}\n  #mk-idx-2{animation:mk-idxon linear;animation-timeline:--mk-s3;animation-range:cover 0% cover 100%}\n  #mk-idx-3{animation:mk-idxon linear;animation-timeline:--mk-s4;animation-range:cover 0% cover 100%}\n  #mk-idx-4{animation:mk-idxon linear;animation-timeline:--mk-s5;animation-range:cover 0% cover 100%}\n  #mk-idx-5{animation:mk-idxon linear;animation-timeline:--mk-s6;animation-range:cover 0% cover 100%}\n  #mk-idx-6{animation:mk-idxon linear;animation-timeline:--mk-s7;animation-range:cover 0% cover 100%}\n  }\n  @supports (animation-timeline:scroll()){\n    #mk-progress{animation:mk-progress linear both;animation-timeline:scroll(root)}\n    #mk-cue{animation:mk-cuefade linear both;animation-timeline:scroll(root);animation-range:0px 260px}\n    #mk-header{animation:mk-headbg linear both;animation-timeline:scroll(root);animation-range:20px 120px}\n    #mk-header::after{animation:mk-headrule linear both;animation-timeline:scroll(root);animation-range:20px 120px}\n  }\n}\n</style>",
+      "content": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&family=Noto+Sans+TC:wght@300;400;500&display=swap\">\n<style id=\"mk-motion\">\n@keyframes mk-linein{from{transform:translateY(110%)}to{transform:translateY(0)}}\n@keyframes mk-softin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\n@keyframes mk-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}\n@keyframes mk-drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n@keyframes mk-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n@keyframes mk-progress{from{width:0%}to{width:100%}}\n@keyframes mk-headrule{from{opacity:0}to{opacity:1}}\n@keyframes mk-headbg{from{background:rgba(250,250,247,0)}to{background:rgba(250,250,247,.9)}}\n@keyframes mk-caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}\n@keyframes mk-cuearrow{0%{transform:translateY(-3px) rotate(45deg);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(20px) rotate(45deg);opacity:0}}\n@keyframes mk-cuefade{0%,25%{opacity:1}100%{opacity:0}}\n@keyframes mk-digit{from{transform:translateY(105%)}to{transform:translateY(0)}}\n@keyframes mk-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n@keyframes mk-markin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}\n@keyframes mk-idxon{from,to{color:rgb(255,90,54);letter-spacing:.2em}}\n@keyframes mk-dotin{from{transform:scale(0)}to{transform:scale(1)}}\n#mk-doc{position:relative}\n#mk-doc::before,#mk-doc::after{content:\"\";position:fixed;top:0;bottom:0;width:1px;background:rgba(22,24,28,.16);z-index:1;pointer-events:none}\n#mk-doc::before{left:40px}\n#mk-doc::after{right:40px}\n@media (max-width:1079px){#mk-doc::before{left:28px}#mk-doc::after{right:28px}}\n@media (max-width:767px){#mk-doc::before,#mk-doc::after{display:none}}\n#mk-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,247,0);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}\n#mk-header::after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(22,24,28,.16);opacity:0}\n#mk-nav>*{position:relative}\n#mk-nav>*::after{content:\"\";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:rgb(255,90,54);transition:right .28s cubic-bezier(.2,.7,.3,1)}\n#mk-nav>*:hover::after{right:0}\n@media (hover:none){#mk-nav>*::after{right:0;opacity:.45}}\n#mk-progress-track{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;pointer-events:none;background:rgba(255,90,54,.16)}\n#mk-progress{position:absolute;left:0;top:0;width:0;height:100%;background:rgb(255,90,54)}\n#mk-mast-in{padding-top:128px}\n@media (max-width:1079px){#mk-mast-in{padding-top:104px}}\n@media (max-width:767px){#mk-mast-in{padding-top:88px}}\n#mk-caret{width:13px;height:19px;background:rgb(255,90,54)}\n#mk-mast-rule,#mk-spec-rule{height:1px;background:rgba(22,24,28,.16);transform:scaleX(0);transform-origin:0 50%}\n#mk-fig-0>div>*,#mk-fig-1>div>*,#mk-fig-2>div>*,#mk-fig-3>div>*{display:block;transform:translateY(105%)}\n#mk-work-0,#mk-work-1,#mk-work-2,#mk-work-3,#mk-work-4,#mk-work-5,#mk-work-6,#mk-work-7,#mk-work-8{position:relative;transition:background-color .2s ease,padding-left .28s cubic-bezier(.2,.7,.3,1)}\n#mk-work-0::after,#mk-work-1::after,#mk-work-2::after,#mk-work-3::after,#mk-work-4::after,#mk-work-5::after,#mk-work-6::after,#mk-work-7::after,#mk-work-8::after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgb(255,90,54);transform:scaleX(0);transform-origin:0 50%}\n#mk-work-0:hover,#mk-work-1:hover,#mk-work-2:hover,#mk-work-3:hover,#mk-work-4:hover,#mk-work-5:hover,#mk-work-6:hover,#mk-work-7:hover,#mk-work-8:hover{background-color:rgba(255,90,54,.06);padding-left:14px}\n#mk-work-0:hover #mk-work-idx-0,#mk-work-1:hover #mk-work-idx-1,#mk-work-2:hover #mk-work-idx-2,#mk-work-3:hover #mk-work-idx-3,#mk-work-4:hover #mk-work-idx-4,#mk-work-5:hover #mk-work-idx-5,#mk-work-6:hover #mk-work-idx-6,#mk-work-7:hover #mk-work-idx-7,#mk-work-8:hover #mk-work-idx-8{color:rgb(255,90,54)}\n#mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{position:fixed;width:13px;height:13px;z-index:2;pointer-events:none;opacity:0}\n#mk-mark-0{top:66px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42)}\n#mk-mark-1{top:66px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42)}\n#mk-mark-2{bottom:20px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42)}\n#mk-mark-3{bottom:20px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42)}\n@media (max-width:1279px){#mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{display:none}}\n#mk-index{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:3;display:grid;row-gap:11px;pointer-events:auto}\n@media (max-width:1439px){#mk-index{display:none}}\n#mk-proc-dot-0,#mk-proc-dot-1,#mk-proc-dot-2,#mk-proc-dot-3{width:7px;height:7px;background:rgb(255,90,54);border-radius:50%;transform:scale(0);margin-top:-4px}\n#mk-tag-0-0:hover,#mk-tag-0-1:hover,#mk-tag-0-2:hover,#mk-tag-0-3:hover,#mk-tag-0-4:hover,#mk-tag-1-0:hover,#mk-tag-1-1:hover,#mk-tag-1-2:hover,#mk-tag-1-3:hover,#mk-tag-1-4:hover,#mk-tag-2-0:hover,#mk-tag-2-1:hover,#mk-tag-2-2:hover,#mk-tag-2-3:hover,#mk-tag-2-4:hover,#mk-tag-3-0:hover,#mk-tag-3-1:hover,#mk-tag-3-2:hover,#mk-tag-3-3:hover,#mk-tag-3-4:hover,#mk-tag-4-0:hover,#mk-tag-4-1:hover,#mk-tag-4-2:hover,#mk-tag-4-3:hover,#mk-tag-4-4:hover{border-color:rgb(255,90,54)}\n#mk-ticker-track{display:flex;width:max-content;will-change:transform}\n#mk-ticker:hover #mk-ticker-track{animation-play-state:paused}\nhtml{scroll-behavior:smooth}\n#services,#works,#products,#contact{scroll-margin-top:82px}\n#mk-home{scroll-margin-top:0}\n@media (max-width:767px){#services,#works,#products,#contact{scroll-margin-top:68px}}\n#mk-cue{position:fixed;right:40px;bottom:24px;z-index:90;display:flex;align-items:center;column-gap:10px;pointer-events:none}\n#mk-cue-rail{position:relative;width:9px;height:24px}\n#mk-cue-rail::after{content:\"\";position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-4px;opacity:0;border-right:1px solid rgb(255,90,54);border-bottom:1px solid rgb(255,90,54)}\n@media (max-width:1079px){#mk-cue{right:28px}}\n@media (max-width:767px){#mk-cue{right:18px;bottom:16px}}\n#mk-boot{display:none}\n@property --mk-n{syntax:'<integer>';initial-value:0;inherits:true}\n@keyframes mk-count{to{--mk-n:100}}\n@keyframes mk-boot-out{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}\n@keyframes mk-boot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}\n@keyframes mk-boot-line{from{opacity:.14}60%{opacity:1;color:rgb(255,90,54)}to{opacity:.55;color:rgb(107,109,113)}}\n@keyframes mk-boot-scan{from{transform:translateY(0)}to{transform:translateY(100vh)}}\n@keyframes mk-boot-fade{from{opacity:0}to{opacity:1}}\n@media (prefers-reduced-motion:no-preference){\n  #mk-boot{display:grid;position:fixed;inset:0;z-index:999;background:rgb(250,250,247);align-content:center;justify-items:center;row-gap:22px;overflow:hidden;animation:mk-boot-out .5s cubic-bezier(.7,0,.3,1) 1.55s forwards}\n  #mk-boot-head,#mk-boot-foot{position:absolute;left:40px;right:40px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;color:rgb(107,109,113);animation:mk-boot-fade .4s ease both}\n  #mk-boot-head{top:34px}\n  #mk-boot-foot{bottom:30px;animation-delay:.1s}\n  #mk-boot-num{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:96px;font-weight:500;line-height:1;letter-spacing:-.04em;color:rgb(22,24,28);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;animation:mk-count 1.2s cubic-bezier(.3,0,0,1) .12s both}\n  #mk-boot-num::after{counter-reset:n var(--mk-n);content:counter(n)}\n  #mk-boot-row{display:flex;align-items:flex-end;column-gap:8px;line-height:1}\n  #mk-boot-pct{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;color:rgb(191,68,40);padding-bottom:12px}\n  #mk-boot-track{width:min(420px,62vw);height:1px;background:rgba(22,24,28,.14);position:relative}\n  #mk-boot-fill{position:absolute;inset:0;background:rgb(255,90,54);transform-origin:0 50%;animation:mk-boot-fill 1.2s cubic-bezier(.3,0,0,1) .12s both}\n  #mk-boot-list{display:flex;column-gap:18px;row-gap:8px;flex-wrap:wrap;justify-content:center;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.18em}\n  #mk-boot-list>*{opacity:.14;animation:mk-boot-line .5s ease both}\n  #mk-boot-c0{animation-delay:260ms}\n  #mk-boot-c1{animation-delay:380ms}\n  #mk-boot-c2{animation-delay:500ms}\n  #mk-boot-c3{animation-delay:620ms}\n  #mk-boot-c4{animation-delay:740ms}\n  #mk-boot-c5{animation-delay:860ms}\n  #mk-boot-c6{animation-delay:980ms}\n  #mk-boot::before{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(22,24,28,.045) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(22,24,28,.045) 0 1px,transparent 1px 72px);animation:mk-boot-fade .5s ease both}\n  #mk-boot-scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.55),rgba(255,90,54,0));animation:mk-boot-scan 1.6s linear .1s both}\n  @media (max-width:767px){#mk-boot-num{font-size:62px}#mk-boot-head,#mk-boot-foot{left:18px;right:18px}}\n  #mk-hl1-mask>*,#mk-hl2-mask>*{transform:translateY(112%);animation:mk-linein .95s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-hl1-mask>*{animation-delay:1.72s}\n  #mk-hl2-mask>*{animation-delay:1.84s}\n  #mk-mast-meta,#mk-mast-lede,#mk-mast-cta{opacity:0;animation:mk-softin .8s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-mast-meta{animation-delay:1.62s}\n  #mk-mast-lede{animation-delay:2.10s}\n  #mk-mast-cta{animation-delay:2.22s}\n  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;animation-delay:2.4s}\n  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:1.96s}\n  #mk-spec-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.9s}\n  #mk-cue{opacity:0;animation:mk-softin .8s ease forwards;animation-delay:1.1s}\n  #mk-cue-rail::after{animation:mk-cuearrow 1.9s cubic-bezier(.4,0,.5,1) infinite}\n  #mk-ticker-track{animation:mk-ticker 40s linear infinite}\n  #mk-mark-0,#mk-mark-1,#mk-mark-2,#mk-mark-3{animation:mk-markin .5s cubic-bezier(.16,1,.3,1) forwards}\n  #mk-mark-0{animation-delay:1.15s}\n  #mk-mark-1{animation-delay:1.24s}\n  #mk-mark-2{animation-delay:1.33s}\n  #mk-mark-3{animation-delay:1.42s}\n  @supports (animation-timeline:view()){\n    #mk-spec,#mk-svc-head,#mk-svc-0,#mk-svc-1,#mk-svc-2,#mk-svc-3,#mk-proc-head,#mk-proc-0,#mk-proc-1,#mk-proc-2,#mk-proc-3,#mk-works-head,#mk-work-0,#mk-work-1,#mk-work-2,#mk-work-3,#mk-work-4,#mk-work-5,#mk-work-6,#mk-work-7,#mk-work-8,#mk-stack-head,#mk-stack-0,#mk-stack-1,#mk-stack-2,#mk-stack-3,#mk-stack-4,#mk-prod-head,#mk-prod-0,#mk-prod-1,#mk-voice-head,#mk-voice-0,#mk-voice-1,#mk-voice-2,#mk-contact-head{animation:mk-rise .01s linear both;animation-timeline:view();animation-range:entry 2% cover 36%}\n    #mk-svc-0{animation-range:entry 6% cover 40%}\n    #mk-svc-1{animation-range:entry 10% cover 44%}\n    #mk-svc-2{animation-range:entry 14% cover 48%}\n    #mk-svc-3{animation-range:entry 18% cover 52%}\n    #mk-proc-0{animation-range:entry 6% cover 40%}\n    #mk-proc-1{animation-range:entry 10% cover 44%}\n    #mk-proc-2{animation-range:entry 14% cover 48%}\n    #mk-proc-3{animation-range:entry 18% cover 52%}\n    #mk-work-0{animation-range:entry 6% cover 40%}\n    #mk-work-1{animation-range:entry 6% cover 40%}\n    #mk-work-2{animation-range:entry 10% cover 44%}\n    #mk-work-3{animation-range:entry 10% cover 44%}\n    #mk-work-4{animation-range:entry 14% cover 48%}\n    #mk-work-5{animation-range:entry 14% cover 48%}\n    #mk-work-6{animation-range:entry 18% cover 52%}\n    #mk-work-7{animation-range:entry 18% cover 52%}\n    #mk-work-8{animation-range:entry 22% cover 56%}\n    #mk-stack-0{animation-range:entry 6% cover 40%}\n    #mk-stack-1{animation-range:entry 10% cover 44%}\n    #mk-stack-2{animation-range:entry 14% cover 48%}\n    #mk-stack-3{animation-range:entry 18% cover 52%}\n    #mk-stack-4{animation-range:entry 22% cover 56%}\n    #mk-prod-0{animation-range:entry 6% cover 40%}\n    #mk-prod-1{animation-range:entry 10% cover 44%}\n    #mk-voice-0{animation-range:entry 6% cover 40%}\n    #mk-voice-1{animation-range:entry 10% cover 44%}\n    #mk-voice-2{animation-range:entry 14% cover 48%}\n    #mk-fig-0>div>*,#mk-fig-1>div>*,#mk-fig-2>div>*,#mk-fig-3>div>*{animation:mk-digit .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}\n    #mk-fig-0>div,#mk-fig-1>div,#mk-fig-2>div,#mk-fig-3>div{animation:mk-rise .01s linear both;animation-timeline:view();animation-range:entry 0% entry 1%}\n    #mk-work-0::after,#mk-work-1::after,#mk-work-2::after,#mk-work-3::after,#mk-work-4::after,#mk-work-5::after,#mk-work-6::after,#mk-work-7::after,#mk-work-8::after{animation:mk-sweep .01s linear both;animation-timeline:view();animation-range:entry 12% cover 24%}\n    #mk-proc-dot-0,#mk-proc-dot-1,#mk-proc-dot-2,#mk-proc-dot-3{animation:mk-dotin .01s linear both;animation-timeline:view();animation-range:entry 14% cover 26%}\n  }\n  @supports (timeline-scope:--x){\n    #mk-doc{timeline-scope:--mk-s1,--mk-s2,--mk-s3,--mk-s4,--mk-s5,--mk-s6,--mk-s7}\n#services{view-timeline-name:--mk-s1;view-timeline-inset:45% 45%}\n#process{view-timeline-name:--mk-s2;view-timeline-inset:45% 45%}\n#works{view-timeline-name:--mk-s3;view-timeline-inset:45% 45%}\n#stack{view-timeline-name:--mk-s4;view-timeline-inset:45% 45%}\n#products{view-timeline-name:--mk-s5;view-timeline-inset:45% 45%}\n#mk-voices{view-timeline-name:--mk-s6;view-timeline-inset:45% 45%}\n#contact{view-timeline-name:--mk-s7;view-timeline-inset:45% 45%}\n  #mk-idx-0{animation:mk-idxon linear;animation-timeline:--mk-s1;animation-range:cover 0% cover 100%}\n  #mk-idx-1{animation:mk-idxon linear;animation-timeline:--mk-s2;animation-range:cover 0% cover 100%}\n  #mk-idx-2{animation:mk-idxon linear;animation-timeline:--mk-s3;animation-range:cover 0% cover 100%}\n  #mk-idx-3{animation:mk-idxon linear;animation-timeline:--mk-s4;animation-range:cover 0% cover 100%}\n  #mk-idx-4{animation:mk-idxon linear;animation-timeline:--mk-s5;animation-range:cover 0% cover 100%}\n  #mk-idx-5{animation:mk-idxon linear;animation-timeline:--mk-s6;animation-range:cover 0% cover 100%}\n  #mk-idx-6{animation:mk-idxon linear;animation-timeline:--mk-s7;animation-range:cover 0% cover 100%}\n  }\n  @supports (animation-timeline:scroll()){\n    #mk-progress{animation:mk-progress linear both;animation-timeline:scroll(root)}\n    #mk-cue{animation:mk-cuefade linear both;animation-timeline:scroll(root);animation-range:0px 260px}\n    #mk-header{animation:mk-headbg linear both;animation-timeline:scroll(root);animation-range:20px 120px}\n    #mk-header::after{animation:mk-headrule linear both;animation-timeline:scroll(root);animation-range:20px 120px}\n  }\n}\n</style>",
       "processShortcodes": "0"
      }
     },
@@ -995,6 +995,458 @@
      "attrID": "mk-home"
     },
     "children": [
+     {
+      "type": "div",
+      "data": {
+       "attrID": "mk-boot"
+      },
+      "style": {
+       "&": {
+        "_": {}
+       }
+      },
+      "children": [
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-scan"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": []
+       },
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-head"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": [
+         {
+          "type": "text",
+          "data": {
+           "tagName": "p"
+          },
+          "text": "MOKSA WEB — STUDIO PROFILE",
+          "style": {
+           "&": {
+            "_": {
+             "color": {
+              "token": "--mk-faint"
+             },
+             "fontSize": "10px",
+             "letterSpacing": "0.2em",
+             "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+             "fontWeight": "400"
+            }
+           }
+          }
+         },
+         {
+          "type": "text",
+          "data": {
+           "tagName": "p"
+          },
+          "text": "REV. 2026.09",
+          "style": {
+           "&": {
+            "_": {
+             "color": {
+              "token": "--mk-faint"
+             },
+             "fontSize": "10px",
+             "letterSpacing": "0.2em",
+             "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+             "fontWeight": "400"
+            }
+           }
+          }
+         }
+        ]
+       },
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-row"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": [
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-num"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": []
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-pct"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "%",
+            "style": {
+             "&": {
+              "_": {
+               "fontFamily": "'Noto Sans TC','PingFang TC','Hiragino Sans TC','Microsoft JhengHei',sans-serif"
+              }
+             }
+            }
+           }
+          ]
+         }
+        ]
+       },
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-track"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": [
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-fill"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": []
+         }
+        ]
+       },
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-list"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": [
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c0"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§01 SERVICES",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c1"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§02 PROCESS",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c2"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§03 WORKS",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c3"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§04 STACK",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c4"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§05 PRODUCTS",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c5"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§06 VOICES",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         },
+         {
+          "type": "div",
+          "data": {
+           "attrID": "mk-boot-c6"
+          },
+          "style": {
+           "&": {
+            "_": {}
+           }
+          },
+          "children": [
+           {
+            "type": "text",
+            "data": {
+             "tagName": "p"
+            },
+            "text": "§07 CONTACT",
+            "style": {
+             "&": {
+              "_": {
+               "color": {
+                "token": "--mk-faint"
+               },
+               "fontSize": "10px",
+               "letterSpacing": "0.18em",
+               "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+               "fontWeight": "400"
+              }
+             }
+            }
+           }
+          ]
+         }
+        ]
+       },
+       {
+        "type": "div",
+        "data": {
+         "attrID": "mk-boot-foot"
+        },
+        "style": {
+         "&": {
+          "_": {}
+         }
+        },
+        "children": [
+         {
+          "type": "text",
+          "data": {
+           "tagName": "p"
+          },
+          "text": "INITIALISING",
+          "style": {
+           "&": {
+            "_": {
+             "color": {
+              "token": "--mk-faint"
+             },
+             "fontSize": "10px",
+             "letterSpacing": "0.2em",
+             "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+             "fontWeight": "400"
+            }
+           }
+          }
+         },
+         {
+          "type": "text",
+          "data": {
+           "tagName": "p"
+          },
+          "text": "TAICHUNG, TW",
+          "style": {
+           "&": {
+            "_": {
+             "color": {
+              "token": "--mk-faint"
+             },
+             "fontSize": "10px",
+             "letterSpacing": "0.2em",
+             "fontFamily": "'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+             "fontWeight": "400"
+            }
+           }
+          }
+         }
+        ]
+       }
+      ]
+     },
      {
       "type": "div",
       "data": {

package/tools/build_site.py

@@ -32,6 +32,7 @@ import argparse
 import json
 import os
 import sys
+import urllib.request
 import urllib.parse
 import uuid
 
@@ -148,6 +149,45 @@ def build_page_document(client, cfg, master_id, template_id, tree, surface):
     return len(records)
 
 
+def cache_check(url, _fresh_bytes=None):
+    """Fetch the URL twice - once as a visitor, once cache-busted - and compare.
+
+    Every check in this repo cache-busts, for good reason: a verifier that reads a
+    stale copy reports the previous build. But that means nothing here had ever
+    looked at the page an actual VISITOR receives. A full-page cache in front of
+    WordPress - Varnish on Cloudways, any CDN - keeps serving the old document after
+    a perfectly successful build, and the whole toolchain reports green while the
+    site shows yesterday's page. Measured here: 141,134 bytes to a visitor while the
+    build had just produced 148,457.
+
+    Both fetches happen here, at the same moment, because comparing against a size
+    measured earlier in the build folds in every byte that changed in between. Two
+    fetches of the same live page still differ by a few hundred bytes - nonces and
+    ids are regenerated per request - so the tolerance is proportional: natural
+    variance measured at 0.25%, a stale document at 5%.
+
+    This cannot purge the cache; that needs credentials this tool has no business
+    holding. Silence is the one thing it must not do.
+    """
+    def get(u):
+        req = urllib.request.Request(u, headers={"User-Agent": "Mozilla/5.0"})
+        with urllib.request.urlopen(req, timeout=60) as r:
+            return r.read(), (r.headers.get("Age") or r.headers.get("X-Cache") or "")
+
+    try:
+        sep = "&" if "?" in url else "?"
+        fresh, _ = get("%s%s_v=%d" % (url, sep, uuid.uuid4().int % 10 ** 9))
+        plain, age = get(url)
+    except Exception as exc:                              # noqa: BLE001
+        return "could not compare the cached page: %s" % exc
+
+    if abs(len(plain) - len(fresh)) <= max(512, len(fresh) // 100):
+        return ""
+    return ("STALE CACHE: a visitor gets %d bytes, a fresh fetch gives %d%s"
+            " - purge the page cache or the site keeps serving the old document"
+            % (len(plain), len(fresh), ("  (Age %s)" % age) if age else ""))
+
+
 def main():
     ap = argparse.ArgumentParser()
     ap.add_argument("--config", required=True)
@@ -168,6 +208,9 @@ def main():
         ok = len(body) >= MIN_HEALTHY_BYTES
         print("  %-16s %-7s %6d bytes  %3d nodes  %s" % (
             page["slug"], "OK" if ok else "BROKEN", len(body), n, url))
+        stale = cache_check(url, len(body))
+        if stale:
+            print("  %-16s %s" % ("", stale))
 
 
 if __name__ == "__main__":

package/tools/verify_intro.py

@@ -0,0 +1,324 @@
+#!/usr/bin/env python3
+"""Assert a page-load animation PLAYS, and - the part that matters - that it ENDS.
+
+    pip install playwright && playwright install chromium
+    python tools/verify_intro.py --config c.json --site sites/moksa.json
+    python tools/verify_intro.py --config c.json --site sites/moksa.json \
+        --csv data/intro-verification.csv --frames shots/intro/
+
+An entrance animation is invisible to every other check in this skill, and not by
+oversight - by construction. `verify_rwd.py` reads the stylesheet the site served.
+`sweep_style_properties.py` reads the compiled CSS. Even `verify_browser.py`, which
+does open a real browser, waits for the page to settle before it reads anything,
+because a computed value taken mid-transition is noise. An intro sequence exists only
+in the first two seconds of a document's life, and then never again.
+
+That window is also where the worst failure on this whole list lives:
+
+    an overlay that covers the document and never leaves
+
+It fails silently and completely. The commit succeeds, the stylesheet is correct,
+every declaration is present, the responsive pass is green, and a visitor gets a
+blank screen forever. No check that reads text can see it, and a browser check that
+waits for the page to settle will wait for a page that never does.
+
+So this one samples. It opens the URL, takes readings at a series of timestamps
+across the intro's life, and then asserts four things:
+
+    PLAYS       something actually changed between the first and last sample -
+                otherwise the sequence is dead code and the delay is just a stall
+    ENDS        by the deadline the overlay is gone from hit-testing, and every
+                element that started hidden is fully opaque
+    CLEARS      a real click at the centre of the viewport reaches the document,
+                not the veil: `visibility:hidden` and `pointer-events:none` are
+                different promises and only one of them is usually kept
+    DEGRADES    with `prefers-reduced-motion: reduce` the content is readable
+                immediately, and the veil never appears at all
+
+The fourth is the one worth designing for rather than merely testing. The overlay in
+`sites/_moksa.py` is `display:none` in its base rule and is switched on only inside
+the motion query that also carries the animation removing it - so if the animation
+cannot run, the overlay does not exist. The failure direction is "no intro", never
+"no page".
+"""
+from __future__ import annotations
+
+import argparse
+import csv
+import json
+import os
+import sys
+import time
+
+# When to read. Dense through the sequence, then two well past its end - the last
+# two are what turn "it looked right" into "it finished".
+SAMPLES_MS = [120, 350, 700, 1100, 1500, 1750, 2050, 2400, 3200, 4500]
+
+# What to read at each sample. Anything whose id starts with the veil prefix is
+# treated as part of the intro; everything else is content that must end up visible.
+PROBE = r"""
+(ids) => {
+  const out = {t: performance.now(), nodes: {}};
+  for (const id of ids) {
+    const el = document.getElementById(id);
+    if (!el) { out.nodes[id] = null; continue; }
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    out.nodes[id] = {
+      opacity: cs.opacity,
+      visibility: cs.visibility,
+      display: cs.display,
+      pointerEvents: cs.pointerEvents,
+      clipPath: cs.clipPath,
+      transform: cs.transform,
+      counter: cs.getPropertyValue('--mk-n').trim(),
+      text: (el.textContent || '').trim().slice(0, 24),
+      w: Math.round(r.width), h: Math.round(r.height),
+    };
+  }
+  // What is actually under the middle of the screen? This is the question a visitor
+  // asks by clicking, and no declared value answers it.
+  const mid = document.elementFromPoint(innerWidth / 2, innerHeight / 2);
+  out.hitCentre = mid ? (mid.id || mid.tagName.toLowerCase() + '.' +
+                         (mid.className || '').toString().split(' ')[0]) : null;
+  out.veilCoversCentre = !!(mid && mid.closest('#mk-boot'));
+  // Anything left invisible after the intro should be deliberate, so count it -
+  // but ONLY inside the viewport. Below the fold this page is full of elements
+  // deliberately at opacity 0, waiting for a view() timeline to bring them in as
+  // you scroll, and counting those as trapped content reports 34 failures on a
+  // page that is working exactly as designed.
+  let hidden = [], offscreen = 0, blinking = 0;
+  for (const el of document.querySelectorAll('#mk-doc *')) {
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden') continue;
+    if (parseFloat(cs.opacity) >= 0.02) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 || r.height === 0) continue;
+    if (r.top >= innerHeight || r.bottom <= 0) { offscreen++; continue; }
+    // An element in the middle of an INFINITE animation is not trapped, it is
+    // blinking. A caret sampled on its off beat reads exactly like content that
+    // never arrived, and the difference is `animation-iteration-count`.
+    if (cs.animationIterationCount.split(',').some(v => v.trim() === 'infinite')) {
+      blinking++; continue;
+    }
+    hidden.push(el.id || el.tagName.toLowerCase() + '.' +
+                (el.className || '').toString().split(' ')[0]);
+  }
+  out.invisibleContent = hidden.length;
+  out.invisibleIds = hidden.slice(0, 8);
+  out.invisibleBelowFold = offscreen;
+  out.blinking = blinking;
+  return out;
+}
+"""
+
+
+def read_ids(spec, slug):
+    """Every attrID on the page, split into veil and content."""
+    ids = []
+
+    def walk(node):
+        if isinstance(node, dict):
+            data = node.get("data")
+            if isinstance(data, dict) and data.get("attrID"):
+                ids.append(data["attrID"])
+            for v in node.values():
+                walk(v)
+        elif isinstance(node, list):
+            for v in node:
+                walk(v)
+
+    for page in spec["pages"]:
+        if page["slug"] == slug:
+            walk(page.get("tree"))
+    return ids
+
+
+def run(url, ids, reduced, frames_dir):
+    try:
+        from playwright.sync_api import sync_playwright
+    except ImportError:
+        sys.exit("verify_intro.py needs Playwright:\n"
+                 "  pip install playwright && playwright install chromium")
+
+    shots = []
+    with sync_playwright() as pw:
+        browser = pw.chromium.launch()
+        ctx = browser.new_context(
+            viewport={"width": 1440, "height": 900},
+            reduced_motion="reduce" if reduced else "no-preference")
+        page = ctx.new_page()
+        # `commit` rather than `load`: the clock has to start when the document
+        # starts, not when it has finished settling, or the whole sequence is over
+        # before the first reading is taken.
+        # Cache-busted, like every other check here. Without it this tool read a
+        # Varnish copy of the page from before the intro existed and reported, with
+        # complete confidence, that the sequence did not play. Third time this
+        # failure has been made in this repo; the query string is not optional.
+        sep = "&" if "?" in url else "?"
+        page.goto("%s%s_v=%d" % (url, sep, int(time.time() * 1000)),
+                  wait_until="commit", timeout=60000)
+        readings = []
+        for ms in SAMPLES_MS:
+            page.wait_for_timeout(max(0, ms - (readings[-1]["t_ms"]
+                                               if readings else 0)))
+            rec = page.evaluate(PROBE, ids)
+            rec["t_ms"] = ms
+            readings.append(rec)
+            if frames_dir:
+                os.makedirs(frames_dir, exist_ok=True)
+                path = os.path.join(frames_dir, "t%04d.png" % ms)
+                page.screenshot(path=path)
+                shots.append(path)
+        # One real click, at the end, at the centre of the page.
+        try:
+            page.mouse.click(720, 450)
+            clicked = page.evaluate(
+                "() => { const e = document.elementFromPoint(720, 450);"
+                "return e ? (e.id || e.tagName) : null; }")
+        except Exception as exc:                      # noqa: BLE001
+            clicked = "click failed: %s" % exc
+        ctx.close()
+        browser.close()
+    return readings, clicked, shots
+
+
+def changed(readings, ids):
+    """Which probes moved at all across the sequence."""
+    moved = set()
+    for i in ids:
+        seen = set()
+        for r in readings:
+            n = r["nodes"].get(i)
+            if n:
+                seen.add((n["opacity"], n["visibility"], n["clipPath"],
+                          n["transform"], n["counter"]))
+        if len(seen) > 1:
+            moved.add(i)
+    return moved
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--config", required=True)
+    ap.add_argument("--site", required=True)
+    ap.add_argument("--page")
+    ap.add_argument("--veil-prefix", default="mk-boot",
+                    help="ids under this prefix are the intro, not the content")
+    ap.add_argument("--deadline-ms", type=int, default=3200,
+                    help="by this point the intro must be over")
+    ap.add_argument("--csv")
+    ap.add_argument("--frames")
+    a = ap.parse_args()
+
+    cfg = json.load(open(a.config, encoding="utf-8"))
+    spec = json.load(open(a.site, encoding="utf-8"))
+    slug = a.page or spec["pages"][0]["slug"]
+    url = "%s/%s/" % (cfg["base"].rstrip("/"), slug)
+
+    ids = read_ids(spec, slug)
+    veil = [i for i in ids if i.startswith(a.veil_prefix)]
+    if not veil:
+        sys.exit("no ids under %r - nothing here is an intro" % a.veil_prefix)
+
+    print("%s\n  %d ids, %d of them the intro, %d samples\n"
+          % (url, len(ids), len(veil), len(SAMPLES_MS)))
+
+    readings, clicked, shots = run(url, ids, False, a.frames)
+    moved = changed(readings, ids)
+
+    print("  %-7s %-11s %-9s %-8s %-7s %s"
+          % ("t", "counter", "veil vis", "clip", "covers", "under the centre"))
+    for r in readings:
+        v = r["nodes"].get(a.veil_prefix) or {}
+        num = (r["nodes"].get(a.veil_prefix + "-num") or {}).get("counter", "")
+        print("  %-7s %-11s %-9s %-8s %-7s %s"
+              % ("%dms" % r["t_ms"], num or "-", v.get("visibility", "-"),
+                 (v.get("clipPath") or "-")[:8],
+                 "YES" if r["veilCoversCentre"] else "no", r["hitCentre"]))
+
+    last = readings[-1]
+    at_deadline = [r for r in readings if r["t_ms"] >= a.deadline_ms]
+    checks = []
+
+    # PLAYS
+    veil_moved = moved & set(veil)
+    checks.append(("PLAYS", bool(veil_moved),
+                   "%d of %d intro elements changed state" % (len(veil_moved),
+                                                              len(veil))))
+    # the counter is an animated integer, so it can be read rather than admired
+    counters = [(r["t_ms"], (r["nodes"].get(a.veil_prefix + "-num") or {})
+                 .get("counter", "")) for r in readings]
+    nums = [int(c) for _t, c in counters if c.isdigit()]
+    checks.append(("COUNTS", bool(nums) and max(nums) >= 99,
+                   "--mk-n reached %s" % (max(nums) if nums else "nothing")))
+
+    # ENDS
+    ended = all(not r["veilCoversCentre"] for r in at_deadline)
+    checks.append(("ENDS", ended,
+                   "veil is out of hit-testing from %dms" % a.deadline_ms))
+    checks.append(("NO_TRAP", last["invisibleContent"] == 0,
+                   "%d content elements still at opacity 0 in the viewport%s "
+                   "(%d below the fold awaiting their own scroll timeline, "
+                   "%d mid-blink)"
+                   % (last["invisibleContent"],
+                      (": " + ", ".join(last["invisibleIds"]))
+                      if last["invisibleIds"] else "",
+                      last["invisibleBelowFold"], last["blinking"])))
+
+    # CLEARS
+    cleared = bool(clicked) and not str(clicked).startswith(a.veil_prefix)
+    checks.append(("CLEARS", cleared, "a real click landed on %r" % clicked))
+
+    # DEGRADES
+    red, red_click, _ = run(url, ids, True, None)
+    first = red[0]
+    # A node that has not been parsed yet reads as absent, which is not a failure -
+    # the requirement is that wherever the veil EXISTS under reduced motion, it is
+    # display:none. Treating "not in the DOM at 120ms" as a broken veil is the tool
+    # marking its own sampling as a defect in the page.
+    seen_veil = [r["nodes"].get(a.veil_prefix) for r in red
+                 if r["nodes"].get(a.veil_prefix)]
+    veil_absent = bool(seen_veil) and all(v.get("display") == "none"
+                                          for v in seen_veil)
+    checks.append(("DEGRADES", veil_absent and not first["veilCoversCentre"],
+                   "with reduced motion the veil is display:none throughout"))
+    checks.append(("READABLE", red[0]["invisibleContent"] == 0,
+                   "%d elements invisible at %dms with reduced motion"
+                   % (red[0]["invisibleContent"], red[0]["t_ms"])))
+
+    print()
+    for name, ok, note in checks:
+        print("  %-9s %-4s %s" % (name, "PASS" if ok else "FAIL", note))
+    failed = [c for c in checks if not c[1]]
+
+    if a.csv:
+        with open(a.csv, "w", newline="", encoding="utf-8") as fh:
+            w = csv.writer(fh)
+            w.writerow(["check", "result", "detail"])
+            for name, ok, note in checks:
+                w.writerow([name, "PASS" if ok else "FAIL", note])
+            w.writerow([])
+            w.writerow(["t_ms", "counter", "veil_visibility", "veil_clip",
+                        "veil_covers_centre", "hit_centre", "invisible_content"])
+            for r in readings:
+                v = r["nodes"].get(a.veil_prefix) or {}
+                w.writerow([r["t_ms"],
+                            (r["nodes"].get(a.veil_prefix + "-num") or {})
+                            .get("counter", ""),
+                            v.get("visibility", ""), v.get("clipPath", ""),
+                            r["veilCoversCentre"], r["hitCentre"],
+                            r["invisibleContent"]])
+        print("\nwrote", a.csv)
+    if shots:
+        print("wrote %d frames to %s" % (len(shots), a.frames))
+
+    print("\n%s" % ("PASS - the sequence plays, finishes, hands the page back, and "
+                    "does not exist at all when motion is reduced"
+                    if not failed else
+                    "FAIL - %s" % ", ".join(c[0] for c in failed)))
+    sys.exit(1 if failed else 0)
+
+
+if __name__ == "__main__":
+    main()