mosaic-headless 1.15.0 → 1.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/SKILL.md +1 -1
  2. package/assets/templates/platforms/claude-ai.json +1 -1
  3. package/assets/templates/platforms/claude-code.json +1 -1
  4. package/assets/templates/platforms/codex-cli.json +1 -1
  5. package/assets/templates/platforms/copilot.json +1 -1
  6. package/assets/templates/platforms/gemini-cli.json +1 -1
  7. package/data/intro-verification.csv +4 -4
  8. package/package.json +1 -1
  9. package/sites/_moksa.py +122 -57
  10. package/sites/moksa.json +7 -70
package/SKILL.md CHANGED
@@ -4,7 +4,7 @@ description: |
4
4
  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.
5
5
  license: "MIT"
6
6
  author: "moksa (https://moksaweb.com)"
7
- version: "1.15.0"
7
+ version: "1.15.1"
8
8
  ---
9
9
 
10
10
  # Headless Mosaic
package/assets/templates/platforms/claude-ai.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "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.",
21
21
  "license": "MIT",
22
22
  "author": "moksa (https://moksaweb.com)",
23
- "version": "1.15.0"
23
+ "version": "1.15.1"
24
24
  },
25
25
  "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.",
26
26
  "uploadSteps": [
package/assets/templates/platforms/claude-code.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "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.",
21
21
  "license": "MIT",
22
22
  "author": "moksa (https://moksaweb.com)",
23
- "version": "1.15.0"
23
+ "version": "1.15.1"
24
24
  },
25
25
  "loaderBehaviour": "Auto-loads on session start when SKILL.md frontmatter parses successfully.",
26
26
  "verified": true,
package/assets/templates/platforms/codex-cli.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "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.",
21
21
  "license": "MIT",
22
22
  "author": "moksa (https://moksaweb.com)",
23
- "version": "1.15.0"
23
+ "version": "1.15.1"
24
24
  },
25
25
  "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.",
26
26
  "verified": true,
package/assets/templates/platforms/copilot.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "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.",
21
21
  "license": "MIT",
22
22
  "author": "moksa (https://moksaweb.com)",
23
- "version": "1.15.0"
23
+ "version": "1.15.1"
24
24
  },
25
25
  "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).",
26
26
  "fallback": {
package/assets/templates/platforms/gemini-cli.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "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.",
21
21
  "license": "MIT",
22
22
  "author": "moksa (https://moksaweb.com)",
23
- "version": "1.15.0"
23
+ "version": "1.15.1"
24
24
  },
25
25
  "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.",
26
26
  "verified": true,
package/data/intro-verification.csv CHANGED
@@ -11,14 +11,14 @@ READABLE,PASS,0 elements invisible at 120ms with reduced motion
11
11
  t_ms,counter,veil_visibility,veil_clip,veil_covers_centre,hit_centre,invisible_content
12
12
  120,,,,False,html.no-js,0
13
13
  400,--mk-n=0;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,7
14
- 800,--mk-n=3;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,7
14
+ 800,--mk-n=2;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,7
15
15
  1300,--mk-n=26;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,7
16
16
  1800,--mk-n=50;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,4
17
- 2300,--mk-n=76;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,3
17
+ 2300,--mk-n=75;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,3
18
18
  2700,--mk-n=94;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,3
19
19
  3000,--mk-n=100;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,3
20
- 3300,--mk-n=100;--mk-s=0;--mk-m=0,visible,none,True,mk-boot,3
21
- 3700,--mk-n=100;--mk-s=0;--mk-m=0,visible,inset(0px 0px 44.6013%),True,mk-boot,2
20
+ 3300,--mk-n=100;--mk-s=0;--mk-m=0,visible,inset(0px 0px 2.19873%),True,mk-boot,3
21
+ 3700,--mk-n=100;--mk-s=0;--mk-m=0,visible,inset(0px 0px 96.6413%),False,mk-caret-row,2
22
22
  4200,--mk-n=100;--mk-s=0;--mk-m=0,hidden,inset(0px 0px 100%),False,mk-caret-row,0
23
23
  5200,--mk-n=100;--mk-s=0;--mk-m=0,hidden,inset(0px 0px 100%),False,mk-caret-row,0
24
24
  6500,--mk-n=100;--mk-s=0;--mk-m=0,hidden,inset(0px 0px 100%),False,mk-caret-row,0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mosaic-headless",
3
- "version": "1.15.0",
3
+ "version": "1.15.1",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "wordpress",
package/sites/_moksa.py CHANGED
@@ -839,11 +839,20 @@ def motion_css():
839
839
  "72%{opacity:1;transform:translate(7px,-5px)}"
840
840
  "73%,100%{opacity:1;transform:none}}",
841
841
  # bokashi: the gradation a printer wipes by hand, never a hard edge
842
+ # bokashi on an SVG group is an opacity wipe, not a background slide -
843
+ # a <g> has no background to move.
842
844
  "@keyframes mk-bokashi{"
843
- "0%{opacity:0;background-position:0 -100%}"
844
- "40%{opacity:1}"
845
- "100%{opacity:1;background-position:0 0}}",
845
+ "0%{opacity:0}60%{opacity:.7}100%{opacity:1}}",
846
846
  # the seal is pressed, not drawn
847
+ # the swell, once the sheet is printed - small, slow, and never still
848
+ "@keyframes mk-swell{"
849
+ "0%{transform:translate3d(0,0,0)}"
850
+ "50%{transform:translate3d(-2.2%,-1.4%,0)}"
851
+ "100%{transform:translate3d(0,0,0)}}",
852
+ "@keyframes mk-swell2{"
853
+ "0%{transform:translate3d(0,0,0)}"
854
+ "50%{transform:translate3d(2.6%,1.1%,0)}"
855
+ "100%{transform:translate3d(0,0,0)}}",
847
856
  "@keyframes mk-seal{"
848
857
  "0%{opacity:0;transform:rotate(-9deg) scale(1.5)}"
849
858
  "60%{opacity:.92;transform:rotate(-9deg) scale(.94)}"
@@ -869,54 +878,33 @@ def motion_css():
869
878
  "animation:mk-boot-out .62s cubic-bezier(.7,0,.3,1) 2.95s forwards}",
870
879
  # ── the sheet, and the blocks carved for it ──────────────────────────
871
880
  " #mk-uki{position:relative;width:min(430px,64vw);aspect-ratio:3/2;"
872
- "background:rgb(250,250,247);overflow:hidden;"
873
- "box-shadow:0 0 0 1px rgba(22,24,28,.10)}",
874
- " #mk-uki>*{position:absolute;inset:0;"
875
- "animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both}",
876
-
877
- # 1. the sky, wiped from the top - the one block that is a gradation
878
- " #mk-uki-sky{background:linear-gradient(180deg,rgb(31,58,95) 0%,"
879
- "rgba(31,58,95,.72) 34%,rgba(31,58,95,.30) 58%,rgba(31,58,95,.10) 70%);"
880
- "background-size:100% 200%;"
881
- "animation:mk-bokashi 1.1s cubic-bezier(.3,0,.2,1) .35s both}",
882
-
883
- # 2. the disc
884
- " #mk-uki-sun{background:radial-gradient(circle at 71% 31%,"
885
- "rgb(255,90,54) 0 8.5%,rgba(255,90,54,0) 8.6%);animation-delay:.75s}",
886
-
887
- # 3. the mountain, printed in paper so the sky is what shapes it
888
- " #mk-uki-fuji{background:rgb(250,250,247);"
889
- "clip-path:polygon(50% 34%,88% 100%,12% 100%);animation-delay:1.05s}",
890
- # The mountain is polygon(50% 34%, 88% 100%, 12% 100%), so at y=55% its
891
- # slopes are at x=37.9% and x=62.1%. The cap's lower corners are those two
892
- # points; the zigzag between them is the snow line. Guessed corners left a
893
- # rhombus floating clear of the peak.
894
- " #mk-uki-snow{background:rgb(252,252,250);"
895
- "clip-path:polygon(50% 34%,62.1% 55%,57% 48%,52% 55%,47% 47%,"
896
- "42% 54%,37.9% 55%);animation-delay:1.3s}",
897
-
898
- # 4. 青海波 - the sea-wave scale, two offset rings of the same carve
899
- " #mk-uki-sea{top:auto;height:34%;"
900
- "background:"
901
- "radial-gradient(circle at 50% 100%,rgba(0,0,0,0) 41%,"
902
- "rgb(31,58,95) 42% 47%,rgba(0,0,0,0) 48%) 0 0/34px 17px,"
903
- "radial-gradient(circle at 50% 100%,rgba(0,0,0,0) 41%,"
904
- "rgba(31,58,95,.55) 42% 47%,rgba(0,0,0,0) 48%) 17px 8.5px/34px 17px;"
905
- "animation-delay:1.55s}",
906
-
907
- # 5. 主版 the key block - the line work, and the last impression pulled
908
- # 主版: the line work. Four stacked gradients drew one edge and lost the
909
- # rest; a border is a border. The horizon is the other line the key block
910
- # would actually carry.
911
- " #mk-uki-key{border:1px solid rgb(22,24,28);"
912
- "animation-delay:1.85s}",
913
- ' #mk-uki-key::after{content:"";position:absolute;left:0;right:0;'
914
- "top:66%;height:1px;background:rgba(22,24,28,.55)}",
915
-
916
- # 6. 落款 the seal, pressed once the run is finished
917
- " #mk-uki-seal{inset:auto 16px 14px auto;width:34px;height:34px;"
918
- "background:rgb(191,68,40);opacity:0;"
919
- 'clip-path:polygon(0 0,100% 0,100% 100%,0 100%);'
881
+ "background:rgb(250,250,247);overflow:hidden}",
882
+ " #mk-uki svg{position:absolute;inset:0;width:100%;height:100%;"
883
+ "display:block}",
884
+ # one <g> per block: each lands out of register and snaps true
885
+ " #uk-sun,#uk-fuji,#uk-sea,#uk-wave,#uk-claw,#uk-swell,#uk-key{"
886
+ "animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both;"
887
+ "transform-box:fill-box;transform-origin:50% 50%}",
888
+ " #uk-sky{animation:mk-bokashi 1.1s cubic-bezier(.3,0,.2,1) .35s both}",
889
+ " #uk-sun{animation-delay:.75s}",
890
+ " #uk-fuji{animation-delay:1.0s}",
891
+ " #uk-sea{animation-delay:1.25s}",
892
+ " #uk-swell{animation-delay:1.45s}",
893
+ " #uk-wave{animation-delay:1.65s}",
894
+ " #uk-claw{animation-delay:1.8s}",
895
+ " #uk-key{animation-delay:2.0s}",
896
+ # once the impression has landed, the sea keeps moving
897
+ " #uk-wave,#uk-claw{animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both,"
898
+ "mk-swell 6s ease-in-out 2.7s infinite}",
899
+ " #uk-swell{animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both,"
900
+ "mk-swell2 8s ease-in-out 2.9s infinite}",
901
+ " #uk-wave{animation-delay:1.65s,2.7s}",
902
+ " #uk-claw{animation-delay:1.8s,2.8s}",
903
+ " #uk-swell{animation-delay:1.45s,2.9s}",
904
+
905
+ # 落款 the seal, pressed once the run is finished
906
+ " #mk-uki-seal{position:absolute;inset:auto 16px 14px auto;"
907
+ "width:34px;height:34px;background:rgb(191,68,40);opacity:0;"
920
908
  "animation:mk-seal .45s cubic-bezier(.16,1,.3,1) 2.15s both}",
921
909
  ' #mk-uki-seal::after{content:"摺";position:absolute;inset:0;'
922
910
  "display:grid;place-items:center;color:rgb(250,250,247);"
@@ -2152,13 +2140,90 @@ SPECIMEN = section("specimen", [wrap("mk-spec2-in", [
2152
2140
  # One node per block, printed in order, each arriving slightly out of register and
2153
2141
  # then SNAPPING true - a misprint correcting itself is the thing that reads as
2154
2142
  # printing rather than as fading in.
2143
+ # The sheet is drawn as SVG, not as clip-path polygons. A polygon has only straight
2144
+ # edges, and a breaking wave is entirely curve - the first attempt read as a dark
2145
+ # hill that swallowed the mountain, with the foam floating clear of it as loose
2146
+ # triangles. Bezier paths are the right tool and a `code` node with
2147
+ # `insertLocation: "inPlace"` is how one gets into the tree.
2148
+ #
2149
+ # One <g> per carved block, printed in order, each landing out of register and then
2150
+ # snapping true against the kento marks.
2151
+ PRINT_SVG = """
2152
+ <svg id="uk" viewBox="0 0 420 280" preserveAspectRatio="xMidYMid slice"
2153
+ xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
2154
+ <defs>
2155
+ <linearGradient id="uk-bokashi" x1="0" y1="0" x2="0" y2="1">
2156
+ <stop offset="0%" stop-color="#1f3a5f"/>
2157
+ <stop offset="34%" stop-color="#1f3a5f" stop-opacity=".72"/>
2158
+ <stop offset="62%" stop-color="#1f3a5f" stop-opacity=".24"/>
2159
+ <stop offset="100%" stop-color="#1f3a5f" stop-opacity=".10"/>
2160
+ </linearGradient>
2161
+ <linearGradient id="uk-water" x1="0" y1="0" x2="0" y2="1">
2162
+ <stop offset="0%" stop-color="#1f3a5f"/>
2163
+ <stop offset="100%" stop-color="#162d4e"/>
2164
+ </linearGradient>
2165
+ </defs>
2166
+
2167
+ <g id="uk-sky"><rect x="0" y="0" width="420" height="280" fill="url(#uk-bokashi)"/></g>
2168
+ <g id="uk-sun"><circle cx="300" cy="86" r="26" fill="#ff5a36"/></g>
2169
+
2170
+ <g id="uk-fuji">
2171
+ <path d="M244,206 L300,146 L356,206 Z" fill="#fcfcfa"/>
2172
+ <path d="M300,146 L314,161 L307,157 L300,166 L293,155 L286,161 Z" fill="#fff"/>
2173
+ <path d="M244,206 L300,146 L356,206" fill="none" stroke="#16181c"
2174
+ stroke-width="1.1"/>
2175
+ </g>
2176
+
2177
+ <g id="uk-sea">
2178
+ <path d="M0,206 H420 V280 H0 Z" fill="url(#uk-water)" opacity=".34"/>
2179
+ <path d="M0,206 H420" stroke="#16181c" stroke-width="1" opacity=".55"/>
2180
+ </g>
2181
+
2182
+ <g id="uk-wave">
2183
+ <path d="M0,280 L0,198
2184
+ C30,158 72,120 122,101
2185
+ C162,86 202,95 224,121
2186
+ C206,106 176,101 152,112
2187
+ C127,123 111,145 107,169
2188
+ C129,199 180,217 250,227
2189
+ C320,235 380,239 420,241
2190
+ L420,280 Z" fill="url(#uk-water)"/>
2191
+ <path d="M0,198 C30,158 72,120 122,101 C162,86 202,95 224,121"
2192
+ fill="none" stroke="#16181c" stroke-width="1.3"/>
2193
+ </g>
2194
+
2195
+ <g id="uk-claw">
2196
+ <path d="M152,112
2197
+ C160,96 170,92 173,106
2198
+ C178,92 188,90 191,104
2199
+ C196,91 206,92 209,105
2200
+ C214,95 221,99 224,121
2201
+ C206,107 176,101 152,112 Z" fill="#fcfcfa" stroke="#16181c"
2202
+ stroke-width="1"/>
2203
+ <path d="M107,169 C118,152 132,148 138,160 C143,150 152,150 155,160
2204
+ C147,168 124,174 107,169 Z" fill="#fcfcfa" stroke="#16181c"
2205
+ stroke-width="1"/>
2206
+ </g>
2207
+
2208
+ <g id="uk-swell">
2209
+ <path d="M0,280 L0,250
2210
+ C58,238 118,247 178,240
2211
+ C238,233 300,244 360,237
2212
+ C390,234 406,238 420,236
2213
+ L420,280 Z" fill="#162d4e"/>
2214
+ <path d="M0,250 C58,238 118,247 178,240 C238,233 300,244 360,237
2215
+ C390,234 406,238 420,236" fill="none" stroke="#16181c"
2216
+ stroke-width="1.1" opacity=".7"/>
2217
+ </g>
2218
+
2219
+ <g id="uk-key"><rect x=".5" y=".5" width="419" height="279" fill="none"
2220
+ stroke="#16181c" stroke-width="1"/></g>
2221
+ </svg>
2222
+ """
2223
+
2155
2224
  PRINT = box("mk-uki", {}, [
2156
- box("mk-uki-sky", {}, []), # 藍 bokashi sky, pulled from the top
2157
- box("mk-uki-sun", {}, []), # 朱 the disc
2158
- box("mk-uki-fuji", {}, []), # the mountain, in paper
2159
- box("mk-uki-snow", {}, []), # its cap
2160
- box("mk-uki-sea", {}, []), # 青海波 seigaiha, the sea-wave scale pattern
2161
- box("mk-uki-key", {}, []), # 主版 the key block: the line work, last
2225
+ {"type": "code", "data": {"attrID": "mk-uki-svg", "insertLocation": "inPlace",
2226
+ "content": PRINT_SVG, "processShortcodes": "0"}},
2162
2227
  box("mk-uki-seal", {}, []), # 落款 the seal, stamped when the run is done
2163
2228
  ])
2164
2229
 
package/sites/moksa.json CHANGED
@@ -217,7 +217,7 @@
217
217
  "data": {
218
218
  "attrID": "mk-motion-css",
219
219
  "insertLocation": "head",
220
- "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@keyframes mk-pan{from{transform:translateX(2%)}to{transform:translateX(-34%)}}\n@keyframes mk-panloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n@keyframes mk-flap{from{transform:translateY(0)}to{transform:translateY(-87.5000%)}}\n#mk-board-code>*{position:relative}\n#mk-board-code>*::after{content:\"\";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);z-index:2;pointer-events:none}\n#mk-board-row{font-variant-numeric:tabular-nums}\n@keyframes mk-fillscrub{from{background-position:100% 0}to{background-position:0 0}}\n@keyframes mk-flow{0%{transform:translateX(-7px);opacity:.2}45%{opacity:1}100%{transform:translateX(7px);opacity:.2}}\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-plate-dash{width:34px;height:1px;background:rgb(191,68,40)}\n@keyframes mk-typeline{0%{clip-path:inset(0 100% 0 0)}14%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}\n#mk-mast-in{position:relative}\n#mk-code{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;align-content:center;padding:70px 0;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.78;letter-spacing:0.01em;color:rgba(22,24,28,.18);white-space:pre;text-align:left;-webkit-mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%)}\n#mk-code>*{align-self:start;overflow:hidden}\n#mk-mast-lede{background:rgb(250,250,247);padding:6px 18px 6px 0;margin-left:-2px}\n#mk-mast-side{background:rgb(250,250,247);padding:0 0 0 14px;margin-left:-14px}\n#mk-code-c0-h::after{content:\"PY\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c1-h::after{content:\"TSX\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c2-h::after{content:\"VITE\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c3-h::after{content:\"JS\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c0-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c1-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c2-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c3-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-mast-in>*:not(#mk-code){position:relative;z-index:1}\n#mk-code-c0-l0::after{content:\"@app.post(\\\"/orders/{id}/paid\\\")\";display:block;min-height:1.78em}\n#mk-code-c0-l1::after{content:\"async def paid(id: str):\";display:block;min-height:1.78em}\n#mk-code-c0-l2::after{content:\" o = await repo.get(id)\";display:block;min-height:1.78em}\n#mk-code-c0-l3::after{content:\" await tasks(\\\"invoice\\\", o)\";display:block;min-height:1.78em}\n#mk-code-c0-l4::after{content:\" return {\\\"ok\\\": True}\";display:block;min-height:1.78em}\n#mk-code-c1-l0::after{content:\"<section\";display:block;min-height:1.78em}\n#mk-code-c1-l1::after{content:\" className=\\\"grid gap-6\";display:block;min-height:1.78em}\n#mk-code-c1-l2::after{content:\" md:grid-cols-3\\\">\";display:block;min-height:1.78em}\n#mk-code-c1-l3::after{content:\" <Card {...order} />\";display:block;min-height:1.78em}\n#mk-code-c1-l4::after{content:\"</section>\";display:block;min-height:1.78em}\n#mk-code-c2-l0::after{content:\"export default defineConfig({\";display:block;min-height:1.78em}\n#mk-code-c2-l1::after{content:\" plugins: [react()],\";display:block;min-height:1.78em}\n#mk-code-c2-l2::after{content:\" build: { target: 'es2022' },\";display:block;min-height:1.78em}\n#mk-code-c2-l3::after{content:\" server: { port: 5173 },\";display:block;min-height:1.78em}\n#mk-code-c2-l4::after{content:\"})\";display:block;min-height:1.78em}\n#mk-code-c3-l0::after{content:\"const o = await prisma.order\";display:block;min-height:1.78em}\n#mk-code-c3-l1::after{content:\" .findUnique({ where: { id } })\";display:block;min-height:1.78em}\n#mk-code-c3-l2::after{content:\"await n8n.trigger('order.paid')\";display:block;min-height:1.78em}\n#mk-code-c3-l3::after{content:\"await line.push(o.customerId)\";display:block;min-height:1.78em}\n#mk-code-c3-l4::after{content:\"await ecpay.issue(o)\";display:block;min-height:1.78em}\n#mk-code-cur{width:7px;height:13px;background:rgba(255,90,54,.30)}\n@media (max-width:1279px){#mk-code{grid-template-columns:repeat(2,minmax(0,1fr));font-size:10.5px}}\n@media (max-width:767px){#mk-code{display:none}}\n@property --mk-s{syntax:'<integer>';initial-value:0;inherits:true}\n@property --mk-m{syntax:'<integer>';initial-value:0;inherits:true}\n@keyframes mk-secs{to{--mk-s:60}}\n@keyframes mk-mins{to{--mk-m:60}}\n@keyframes mk-livedot{0%,55%{opacity:1}56%,100%{opacity:.15}}\n#mk-clock{display:flex;align-items:baseline;column-gap:5px;margin-left:18px;padding-left:18px;border-left:1px solid rgba(22,24,28,.16)}\n#mk-clock-dot{width:5px;height:5px;background:rgb(255,90,54);align-self:center;margin-right:3px}\n#mk-clock-m,#mk-clock-s{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgb(22,24,28);font-variant-numeric:tabular-nums;letter-spacing:0.02em}\n#mk-clock-s::after{counter-reset:s var(--mk-s);content:counter(s,decimal-leading-zero)}\n#mk-clock-m::after{counter-reset:m var(--mk-m);content:counter(m,decimal-leading-zero)}\n@media (max-width:1023px){#mk-clock{display:none}}\n@keyframes mk-sweepdown{from{transform:translateY(-10vh)}to{transform:translateY(110vh)}}\n#mk-sweep{content:\"\";position:fixed;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.30) 22%,rgba(255,90,54,.30) 78%,rgba(255,90,54,0))}\n@keyframes mk-railrun{from{background-position:0 -40vh}to{background-position:0 140vh}}\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: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 rgba(22,24,28,.16)}\n#mk-index>*{display:flex;column-gap:8px;align-items:baseline}\n@media (max-width:1679px){#mk-idx-w-0,#mk-idx-w-1,#mk-idx-w-2,#mk-idx-w-3,#mk-idx-w-4,#mk-idx-w-5,#mk-idx-w-6{display:none}#mk-index{padding:12px 7px;left:4px}}\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-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-4-0:hover,#mk-tag-4-1:hover,#mk-tag-4-2:hover,#mk-tag-4-3:hover,#mk-tag-5-0:hover,#mk-tag-5-1:hover,#mk-tag-5-2:hover,#mk-tag-5-3:hover,#mk-tag-5-4:hover,#mk-tag-6-0:hover,#mk-tag-6-1:hover,#mk-tag-6-2:hover,#mk-tag-6-3:hover,#mk-tag-6-4:hover,#mk-tag-7-0:hover,#mk-tag-7-1:hover,#mk-tag-7-2:hover,#mk-tag-7-3:hover,#mk-tag-7-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@keyframes mk-ink{0%{opacity:0;transform:translate(7px,-5px)}34%{opacity:.5;transform:translate(7px,-5px)}72%{opacity:1;transform:translate(7px,-5px)}73%,100%{opacity:1;transform:none}}\n@keyframes mk-bokashi{0%{opacity:0;background-position:0 -100%}40%{opacity:1}100%{opacity:1;background-position:0 0}}\n@keyframes mk-seal{0%{opacity:0;transform:rotate(-9deg) scale(1.5)}60%{opacity:.92;transform:rotate(-9deg) scale(.94)}100%{opacity:.92;transform:rotate(-9deg) scale(1)}}\n@keyframes mk-boot-type{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}\n@keyframes mk-boot-caret{0%,49%{opacity:1}50%,99%{opacity:0}}\n@keyframes mk-boot-cross{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}\n@keyframes mk-boot-tick{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:scaleX(1)}}\n@keyframes mk-boot-stamp{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(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:20px;overflow:hidden;animation:mk-boot-out .62s cubic-bezier(.7,0,.3,1) 2.95s forwards}\n #mk-uki{position:relative;width:min(430px,64vw);aspect-ratio:3/2;background:rgb(250,250,247);overflow:hidden;box-shadow:0 0 0 1px rgba(22,24,28,.10)}\n #mk-uki>*{position:absolute;inset:0;animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both}\n #mk-uki-sky{background:linear-gradient(180deg,rgb(31,58,95) 0%,rgba(31,58,95,.72) 34%,rgba(31,58,95,.30) 58%,rgba(31,58,95,.10) 70%);background-size:100% 200%;animation:mk-bokashi 1.1s cubic-bezier(.3,0,.2,1) .35s both}\n #mk-uki-sun{background:radial-gradient(circle at 71% 31%,rgb(255,90,54) 0 8.5%,rgba(255,90,54,0) 8.6%);animation-delay:.75s}\n #mk-uki-fuji{background:rgb(250,250,247);clip-path:polygon(50% 34%,88% 100%,12% 100%);animation-delay:1.05s}\n #mk-uki-snow{background:rgb(252,252,250);clip-path:polygon(50% 34%,62.1% 55%,57% 48%,52% 55%,47% 47%,42% 54%,37.9% 55%);animation-delay:1.3s}\n #mk-uki-sea{top:auto;height:34%;background:radial-gradient(circle at 50% 100%,rgba(0,0,0,0) 41%,rgb(31,58,95) 42% 47%,rgba(0,0,0,0) 48%) 0 0/34px 17px,radial-gradient(circle at 50% 100%,rgba(0,0,0,0) 41%,rgba(31,58,95,.55) 42% 47%,rgba(0,0,0,0) 48%) 17px 8.5px/34px 17px;animation-delay:1.55s}\n #mk-uki-key{border:1px solid rgb(22,24,28);animation-delay:1.85s}\n #mk-uki-key::after{content:\"\";position:absolute;left:0;right:0;top:66%;height:1px;background:rgba(22,24,28,.55)}\n #mk-uki-seal{inset:auto 16px 14px auto;width:34px;height:34px;background:rgb(191,68,40);opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:mk-seal .45s cubic-bezier(.16,1,.3,1) 2.15s both}\n #mk-uki-seal::after{content:\"摺\";position:absolute;inset:0;display:grid;place-items:center;color:rgb(250,250,247);font-family:'Noto Sans TC','PingFang TC','Hiragino Sans TC','Microsoft JhengHei',sans-serif;font-size:19px;line-height:1}\n @media (max-width:767px){#mk-uki{width:74vw}}\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:58px;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 2.05s linear .3s 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 2.05s linear .3s both}\n #mk-boot-track::after{content:\"\";position:absolute;left:0;right:0;top:-3px;height:3px;background:repeating-linear-gradient(90deg,rgba(22,24,28,.22) 0 1px,transparent 1px 42px);animation:mk-boot-fade .5s ease .15s 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 .62s ease both}\n #mk-boot-c0{animation-delay:700ms}\n #mk-boot-c1{animation-delay:900ms}\n #mk-boot-c2{animation-delay:1100ms}\n #mk-boot-c3{animation-delay:1300ms}\n #mk-boot-c4{animation-delay:1500ms}\n #mk-boot-c5{animation-delay:1700ms}\n #mk-boot-c6{animation-delay:1900ms}\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.45s linear .15s 2 both}\n #mk-boot .mk-x,#mk-boot-x0,#mk-boot-x1,#mk-boot-x2,#mk-boot-x3{position:absolute;width:14px;height:14px;animation:mk-boot-cross .5s cubic-bezier(.16,1,.3,1) both}\n #mk-boot-x0{top:64px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42);animation-delay:.08s}\n #mk-boot-x1{top:64px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42);animation-delay:.16s}\n #mk-boot-x2{bottom:56px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42);animation-delay:.24s}\n #mk-boot-x3{bottom:56px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42);animation-delay:.32s}\n #mk-boot-ruler{position:absolute;left:40px;top:50%;transform:translateY(-50%);display:grid;row-gap:9px}\n #mk-boot-ruler>*{width:9px;height:1px;background:rgba(22,24,28,.42);transform-origin:0 50%;animation:mk-boot-tick .3s ease both}\n #mk-boot-t0{animation-delay:120ms}\n #mk-boot-t1{animation-delay:146ms}\n #mk-boot-t2{animation-delay:172ms}\n #mk-boot-t3{animation-delay:198ms}\n #mk-boot-t4{animation-delay:224ms}\n #mk-boot-t5{animation-delay:250ms}\n #mk-boot-t6{animation-delay:276ms}\n #mk-boot-t7{animation-delay:302ms}\n #mk-boot-t8{animation-delay:328ms}\n #mk-boot-t9{animation-delay:354ms}\n #mk-boot-t10{animation-delay:380ms}\n #mk-boot-t11{animation-delay:406ms}\n #mk-boot-t12{animation-delay:432ms}\n @media (max-width:1023px){#mk-boot-ruler{display:none}}\n #mk-boot-log{display:grid;row-gap:7px;justify-items:start;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;color:rgb(107,109,113);min-height:64px}\n #mk-boot-log>*{animation:mk-boot-type .42s steps(24,end) both}\n #mk-boot-l0{animation-delay:550ms}\n #mk-boot-l1{animation-delay:930ms}\n #mk-boot-l2{animation-delay:1310ms}\n #mk-boot-l3{animation-delay:1690ms}\n #mk-boot-cursor{width:7px;height:11px;background:rgb(255,90,54);animation:mk-boot-caret .62s steps(1,end) .5s infinite}\n #mk-boot-ready{border:1px solid rgb(191,68,40);padding:5px 12px;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.24em;color:rgb(191,68,40);opacity:0;animation:mk-boot-stamp .42s cubic-bezier(.16,1,.3,1) 2.42s both}\n @media (max-width:767px){#mk-boot-num{font-size:40px}#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:3.16s}\n #mk-hl2-mask>*{animation-delay:3.28s}\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:3.06s}\n #mk-mast-lede{animation-delay:3.54s}\n #mk-mast-cta{animation-delay:3.66s}\n #mk-ar-a-0>*,#mk-ar-b-0>*,#mk-ar-a-1>*,#mk-ar-b-1>*,#mk-ar-a-2>*,#mk-ar-b-2>*{animation:mk-flow 1.9s ease-in-out infinite}\n #mk-clock-s{animation:mk-secs 60s steps(60,end) infinite}\n #mk-clock-m{animation:mk-mins 3600s steps(60,end) infinite}\n #mk-clock-dot{animation:mk-livedot 2s steps(1,end) infinite}\n #mk-sweep{animation:mk-sweepdown 11s linear infinite}\n #mk-pan-loop{animation:mk-panloop 26s linear infinite}\n #mk-code-c0-l0{animation:mk-typeline 15s steps(30,end) 240ms infinite}\n #mk-code-c0-l1{animation:mk-typeline 15s steps(24,end) 540ms infinite}\n #mk-code-c0-l2{animation:mk-typeline 15s steps(26,end) 840ms infinite}\n #mk-code-c0-l3{animation:mk-typeline 15s steps(29,end) 1140ms infinite}\n #mk-code-c0-l4{animation:mk-typeline 15s steps(23,end) 1440ms infinite}\n #mk-code-c1-l0{animation:mk-typeline 15s steps(8,end) 670ms infinite}\n #mk-code-c1-l1{animation:mk-typeline 15s steps(23,end) 970ms infinite}\n #mk-code-c1-l2{animation:mk-typeline 15s steps(29,end) 1270ms infinite}\n #mk-code-c1-l3{animation:mk-typeline 15s steps(21,end) 1570ms infinite}\n #mk-code-c1-l4{animation:mk-typeline 15s steps(10,end) 1870ms infinite}\n #mk-code-c2-l0{animation:mk-typeline 15s steps(29,end) 1100ms infinite}\n #mk-code-c2-l1{animation:mk-typeline 15s steps(21,end) 1400ms infinite}\n #mk-code-c2-l2{animation:mk-typeline 15s steps(30,end) 1700ms infinite}\n #mk-code-c2-l3{animation:mk-typeline 15s steps(25,end) 2000ms infinite}\n #mk-code-c2-l4{animation:mk-typeline 15s steps(2,end) 2300ms infinite}\n #mk-code-c3-l0{animation:mk-typeline 15s steps(28,end) 1530ms infinite}\n #mk-code-c3-l1{animation:mk-typeline 15s steps(32,end) 1830ms infinite}\n #mk-code-c3-l2{animation:mk-typeline 15s steps(31,end) 2130ms infinite}\n #mk-code-c3-l3{animation:mk-typeline 15s steps(29,end) 2430ms infinite}\n #mk-code-c3-l4{animation:mk-typeline 15s steps(20,end) 2730ms infinite}\n #mk-code-cur{animation:mk-boot-caret .62s steps(1,end) infinite}\n #mk-flap-0-s,#mk-flap-1-s,#mk-flap-2-s,#mk-board-city-s,#mk-board-utc-s{animation:mk-flap 14s steps(7,end) infinite}\n #mk-flap-1-s{animation-delay:80ms}\n #mk-flap-2-s{animation-delay:160ms}\n #mk-doc::before,#mk-doc::after{background-image:linear-gradient(180deg,rgba(255,90,54,0),rgba(255,90,54,.55) 45%,rgba(255,90,54,.55) 55%,rgba(255,90,54,0));background-size:1px 34vh;background-repeat:no-repeat;animation:mk-railrun 9s linear infinite}\n #mk-ar-a-0>*{animation-delay:0ms}\n #mk-ar-b-0>*{animation-delay:130ms}\n #mk-ar-a-1>*{animation-delay:260ms}\n #mk-ar-b-1>*{animation-delay:390ms}\n #mk-ar-a-2>*{animation-delay:520ms}\n #mk-ar-b-2>*{animation-delay:650ms}\n #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;animation-delay:3.84s}\n #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:3.40s}\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-plate-num,#mk-plate-t,#mk-mx-head,#mk-mx-cols,#mk-mx-r-0,#mk-mx-r-1,#mk-mx-r-2,#mk-mx-r-3,#mk-mx-r-4,#mk-mx-r-5,#mk-mx-r-6,#mk-mx-r-7,#mk-fig2-head,#mk-fl-a-0,#mk-fl-b-0,#mk-fl-c-0,#mk-fl-a-1,#mk-fl-b-1,#mk-fl-c-1,#mk-fl-a-2,#mk-fl-b-2,#mk-fl-c-2,#mk-spec2-head,#mk-spec2-r-0,#mk-spec2-r-1,#mk-spec2-r-2,#mk-spec2-r-3,#mk-stack-head,#mk-stack-0,#mk-stack-1,#mk-stack-2,#mk-stack-3,#mk-stack-4,#mk-stack-5,#mk-stack-6,#mk-stack-7,#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-plate-t{animation-range:entry 6% cover 40%}\n #mk-mx-cols{animation-range:entry 6% cover 40%}\n #mk-mx-r-0{animation-range:entry 6% cover 40%}\n #mk-mx-r-1{animation-range:entry 10% cover 44%}\n #mk-mx-r-2{animation-range:entry 10% cover 44%}\n #mk-mx-r-3{animation-range:entry 14% cover 48%}\n #mk-mx-r-4{animation-range:entry 14% cover 48%}\n #mk-mx-r-5{animation-range:entry 18% cover 52%}\n #mk-mx-r-6{animation-range:entry 18% cover 52%}\n #mk-mx-r-7{animation-range:entry 22% cover 56%}\n #mk-fl-a-0{animation-range:entry 6% cover 40%}\n #mk-fl-b-0{animation-range:entry 10% cover 44%}\n #mk-fl-c-0{animation-range:entry 14% cover 48%}\n #mk-fl-a-1{animation-range:entry 10% cover 44%}\n #mk-fl-b-1{animation-range:entry 14% cover 48%}\n #mk-fl-c-1{animation-range:entry 18% cover 52%}\n #mk-fl-a-2{animation-range:entry 14% cover 48%}\n #mk-fl-b-2{animation-range:entry 18% cover 52%}\n #mk-fl-c-2{animation-range:entry 22% cover 56%}\n #mk-spec2-r-0{animation-range:entry 6% cover 40%}\n #mk-spec2-r-1{animation-range:entry 10% cover 44%}\n #mk-spec2-r-2{animation-range:entry 14% cover 48%}\n #mk-spec2-r-3{animation-range:entry 18% cover 52%}\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-stack-5{animation-range:entry 22% cover 56%}\n #mk-stack-6{animation-range:entry 22% cover 56%}\n #mk-stack-7{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 #mk-pan-track{animation:mk-pan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}\n #mk-plate-t h2{background-image:linear-gradient(90deg,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%}\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>",
220
+ "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@keyframes mk-pan{from{transform:translateX(2%)}to{transform:translateX(-34%)}}\n@keyframes mk-panloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n@keyframes mk-flap{from{transform:translateY(0)}to{transform:translateY(-87.5000%)}}\n#mk-board-code>*{position:relative}\n#mk-board-code>*::after{content:\"\";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);z-index:2;pointer-events:none}\n#mk-board-row{font-variant-numeric:tabular-nums}\n@keyframes mk-fillscrub{from{background-position:100% 0}to{background-position:0 0}}\n@keyframes mk-flow{0%{transform:translateX(-7px);opacity:.2}45%{opacity:1}100%{transform:translateX(7px);opacity:.2}}\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-plate-dash{width:34px;height:1px;background:rgb(191,68,40)}\n@keyframes mk-typeline{0%{clip-path:inset(0 100% 0 0)}14%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}\n#mk-mast-in{position:relative}\n#mk-code{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;align-content:center;padding:70px 0;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.78;letter-spacing:0.01em;color:rgba(22,24,28,.18);white-space:pre;text-align:left;-webkit-mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%)}\n#mk-code>*{align-self:start;overflow:hidden}\n#mk-mast-lede{background:rgb(250,250,247);padding:6px 18px 6px 0;margin-left:-2px}\n#mk-mast-side{background:rgb(250,250,247);padding:0 0 0 14px;margin-left:-14px}\n#mk-code-c0-h::after{content:\"PY\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c1-h::after{content:\"TSX\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c2-h::after{content:\"VITE\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c3-h::after{content:\"JS\";display:block;font-size:9px;letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}\n#mk-code-c0-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c1-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c2-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-code-c3-cur{width:6px;height:11px;margin-top:4px;background:rgba(255,90,54,.7)}\n#mk-mast-in>*:not(#mk-code){position:relative;z-index:1}\n#mk-code-c0-l0::after{content:\"@app.post(\\\"/orders/{id}/paid\\\")\";display:block;min-height:1.78em}\n#mk-code-c0-l1::after{content:\"async def paid(id: str):\";display:block;min-height:1.78em}\n#mk-code-c0-l2::after{content:\" o = await repo.get(id)\";display:block;min-height:1.78em}\n#mk-code-c0-l3::after{content:\" await tasks(\\\"invoice\\\", o)\";display:block;min-height:1.78em}\n#mk-code-c0-l4::after{content:\" return {\\\"ok\\\": True}\";display:block;min-height:1.78em}\n#mk-code-c1-l0::after{content:\"<section\";display:block;min-height:1.78em}\n#mk-code-c1-l1::after{content:\" className=\\\"grid gap-6\";display:block;min-height:1.78em}\n#mk-code-c1-l2::after{content:\" md:grid-cols-3\\\">\";display:block;min-height:1.78em}\n#mk-code-c1-l3::after{content:\" <Card {...order} />\";display:block;min-height:1.78em}\n#mk-code-c1-l4::after{content:\"</section>\";display:block;min-height:1.78em}\n#mk-code-c2-l0::after{content:\"export default defineConfig({\";display:block;min-height:1.78em}\n#mk-code-c2-l1::after{content:\" plugins: [react()],\";display:block;min-height:1.78em}\n#mk-code-c2-l2::after{content:\" build: { target: 'es2022' },\";display:block;min-height:1.78em}\n#mk-code-c2-l3::after{content:\" server: { port: 5173 },\";display:block;min-height:1.78em}\n#mk-code-c2-l4::after{content:\"})\";display:block;min-height:1.78em}\n#mk-code-c3-l0::after{content:\"const o = await prisma.order\";display:block;min-height:1.78em}\n#mk-code-c3-l1::after{content:\" .findUnique({ where: { id } })\";display:block;min-height:1.78em}\n#mk-code-c3-l2::after{content:\"await n8n.trigger('order.paid')\";display:block;min-height:1.78em}\n#mk-code-c3-l3::after{content:\"await line.push(o.customerId)\";display:block;min-height:1.78em}\n#mk-code-c3-l4::after{content:\"await ecpay.issue(o)\";display:block;min-height:1.78em}\n#mk-code-cur{width:7px;height:13px;background:rgba(255,90,54,.30)}\n@media (max-width:1279px){#mk-code{grid-template-columns:repeat(2,minmax(0,1fr));font-size:10.5px}}\n@media (max-width:767px){#mk-code{display:none}}\n@property --mk-s{syntax:'<integer>';initial-value:0;inherits:true}\n@property --mk-m{syntax:'<integer>';initial-value:0;inherits:true}\n@keyframes mk-secs{to{--mk-s:60}}\n@keyframes mk-mins{to{--mk-m:60}}\n@keyframes mk-livedot{0%,55%{opacity:1}56%,100%{opacity:.15}}\n#mk-clock{display:flex;align-items:baseline;column-gap:5px;margin-left:18px;padding-left:18px;border-left:1px solid rgba(22,24,28,.16)}\n#mk-clock-dot{width:5px;height:5px;background:rgb(255,90,54);align-self:center;margin-right:3px}\n#mk-clock-m,#mk-clock-s{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgb(22,24,28);font-variant-numeric:tabular-nums;letter-spacing:0.02em}\n#mk-clock-s::after{counter-reset:s var(--mk-s);content:counter(s,decimal-leading-zero)}\n#mk-clock-m::after{counter-reset:m var(--mk-m);content:counter(m,decimal-leading-zero)}\n@media (max-width:1023px){#mk-clock{display:none}}\n@keyframes mk-sweepdown{from{transform:translateY(-10vh)}to{transform:translateY(110vh)}}\n#mk-sweep{content:\"\";position:fixed;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.30) 22%,rgba(255,90,54,.30) 78%,rgba(255,90,54,0))}\n@keyframes mk-railrun{from{background-position:0 -40vh}to{background-position:0 140vh}}\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: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 rgba(22,24,28,.16)}\n#mk-index>*{display:flex;column-gap:8px;align-items:baseline}\n@media (max-width:1679px){#mk-idx-w-0,#mk-idx-w-1,#mk-idx-w-2,#mk-idx-w-3,#mk-idx-w-4,#mk-idx-w-5,#mk-idx-w-6{display:none}#mk-index{padding:12px 7px;left:4px}}\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-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-4-0:hover,#mk-tag-4-1:hover,#mk-tag-4-2:hover,#mk-tag-4-3:hover,#mk-tag-5-0:hover,#mk-tag-5-1:hover,#mk-tag-5-2:hover,#mk-tag-5-3:hover,#mk-tag-5-4:hover,#mk-tag-6-0:hover,#mk-tag-6-1:hover,#mk-tag-6-2:hover,#mk-tag-6-3:hover,#mk-tag-6-4:hover,#mk-tag-7-0:hover,#mk-tag-7-1:hover,#mk-tag-7-2:hover,#mk-tag-7-3:hover,#mk-tag-7-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@keyframes mk-ink{0%{opacity:0;transform:translate(7px,-5px)}34%{opacity:.5;transform:translate(7px,-5px)}72%{opacity:1;transform:translate(7px,-5px)}73%,100%{opacity:1;transform:none}}\n@keyframes mk-bokashi{0%{opacity:0}60%{opacity:.7}100%{opacity:1}}\n@keyframes mk-swell{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2.2%,-1.4%,0)}100%{transform:translate3d(0,0,0)}}\n@keyframes mk-swell2{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2.6%,1.1%,0)}100%{transform:translate3d(0,0,0)}}\n@keyframes mk-seal{0%{opacity:0;transform:rotate(-9deg) scale(1.5)}60%{opacity:.92;transform:rotate(-9deg) scale(.94)}100%{opacity:.92;transform:rotate(-9deg) scale(1)}}\n@keyframes mk-boot-type{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}\n@keyframes mk-boot-caret{0%,49%{opacity:1}50%,99%{opacity:0}}\n@keyframes mk-boot-cross{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}\n@keyframes mk-boot-tick{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:scaleX(1)}}\n@keyframes mk-boot-stamp{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(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:20px;overflow:hidden;animation:mk-boot-out .62s cubic-bezier(.7,0,.3,1) 2.95s forwards}\n #mk-uki{position:relative;width:min(430px,64vw);aspect-ratio:3/2;background:rgb(250,250,247);overflow:hidden}\n #mk-uki svg{position:absolute;inset:0;width:100%;height:100%;display:block}\n #uk-sun,#uk-fuji,#uk-sea,#uk-wave,#uk-claw,#uk-swell,#uk-key{animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both;transform-box:fill-box;transform-origin:50% 50%}\n #uk-sky{animation:mk-bokashi 1.1s cubic-bezier(.3,0,.2,1) .35s both}\n #uk-sun{animation-delay:.75s}\n #uk-fuji{animation-delay:1.0s}\n #uk-sea{animation-delay:1.25s}\n #uk-swell{animation-delay:1.45s}\n #uk-wave{animation-delay:1.65s}\n #uk-claw{animation-delay:1.8s}\n #uk-key{animation-delay:2.0s}\n #uk-wave,#uk-claw{animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both,mk-swell 6s ease-in-out 2.7s infinite}\n #uk-swell{animation:mk-ink .8s cubic-bezier(.2,.7,.3,1) both,mk-swell2 8s ease-in-out 2.9s infinite}\n #uk-wave{animation-delay:1.65s,2.7s}\n #uk-claw{animation-delay:1.8s,2.8s}\n #uk-swell{animation-delay:1.45s,2.9s}\n #mk-uki-seal{position:absolute;inset:auto 16px 14px auto;width:34px;height:34px;background:rgb(191,68,40);opacity:0;animation:mk-seal .45s cubic-bezier(.16,1,.3,1) 2.15s both}\n #mk-uki-seal::after{content:\"摺\";position:absolute;inset:0;display:grid;place-items:center;color:rgb(250,250,247);font-family:'Noto Sans TC','PingFang TC','Hiragino Sans TC','Microsoft JhengHei',sans-serif;font-size:19px;line-height:1}\n @media (max-width:767px){#mk-uki{width:74vw}}\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:58px;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 2.05s linear .3s 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 2.05s linear .3s both}\n #mk-boot-track::after{content:\"\";position:absolute;left:0;right:0;top:-3px;height:3px;background:repeating-linear-gradient(90deg,rgba(22,24,28,.22) 0 1px,transparent 1px 42px);animation:mk-boot-fade .5s ease .15s 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 .62s ease both}\n #mk-boot-c0{animation-delay:700ms}\n #mk-boot-c1{animation-delay:900ms}\n #mk-boot-c2{animation-delay:1100ms}\n #mk-boot-c3{animation-delay:1300ms}\n #mk-boot-c4{animation-delay:1500ms}\n #mk-boot-c5{animation-delay:1700ms}\n #mk-boot-c6{animation-delay:1900ms}\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.45s linear .15s 2 both}\n #mk-boot .mk-x,#mk-boot-x0,#mk-boot-x1,#mk-boot-x2,#mk-boot-x3{position:absolute;width:14px;height:14px;animation:mk-boot-cross .5s cubic-bezier(.16,1,.3,1) both}\n #mk-boot-x0{top:64px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42);animation-delay:.08s}\n #mk-boot-x1{top:64px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-top:1px solid rgba(22,24,28,.42);animation-delay:.16s}\n #mk-boot-x2{bottom:56px;left:40px;border-left:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42);animation-delay:.24s}\n #mk-boot-x3{bottom:56px;right:40px;border-right:1px solid rgba(22,24,28,.42);border-bottom:1px solid rgba(22,24,28,.42);animation-delay:.32s}\n #mk-boot-ruler{position:absolute;left:40px;top:50%;transform:translateY(-50%);display:grid;row-gap:9px}\n #mk-boot-ruler>*{width:9px;height:1px;background:rgba(22,24,28,.42);transform-origin:0 50%;animation:mk-boot-tick .3s ease both}\n #mk-boot-t0{animation-delay:120ms}\n #mk-boot-t1{animation-delay:146ms}\n #mk-boot-t2{animation-delay:172ms}\n #mk-boot-t3{animation-delay:198ms}\n #mk-boot-t4{animation-delay:224ms}\n #mk-boot-t5{animation-delay:250ms}\n #mk-boot-t6{animation-delay:276ms}\n #mk-boot-t7{animation-delay:302ms}\n #mk-boot-t8{animation-delay:328ms}\n #mk-boot-t9{animation-delay:354ms}\n #mk-boot-t10{animation-delay:380ms}\n #mk-boot-t11{animation-delay:406ms}\n #mk-boot-t12{animation-delay:432ms}\n @media (max-width:1023px){#mk-boot-ruler{display:none}}\n #mk-boot-log{display:grid;row-gap:7px;justify-items:start;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;color:rgb(107,109,113);min-height:64px}\n #mk-boot-log>*{animation:mk-boot-type .42s steps(24,end) both}\n #mk-boot-l0{animation-delay:550ms}\n #mk-boot-l1{animation-delay:930ms}\n #mk-boot-l2{animation-delay:1310ms}\n #mk-boot-l3{animation-delay:1690ms}\n #mk-boot-cursor{width:7px;height:11px;background:rgb(255,90,54);animation:mk-boot-caret .62s steps(1,end) .5s infinite}\n #mk-boot-ready{border:1px solid rgb(191,68,40);padding:5px 12px;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.24em;color:rgb(191,68,40);opacity:0;animation:mk-boot-stamp .42s cubic-bezier(.16,1,.3,1) 2.42s both}\n @media (max-width:767px){#mk-boot-num{font-size:40px}#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:3.16s}\n #mk-hl2-mask>*{animation-delay:3.28s}\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:3.06s}\n #mk-mast-lede{animation-delay:3.54s}\n #mk-mast-cta{animation-delay:3.66s}\n #mk-ar-a-0>*,#mk-ar-b-0>*,#mk-ar-a-1>*,#mk-ar-b-1>*,#mk-ar-a-2>*,#mk-ar-b-2>*{animation:mk-flow 1.9s ease-in-out infinite}\n #mk-clock-s{animation:mk-secs 60s steps(60,end) infinite}\n #mk-clock-m{animation:mk-mins 3600s steps(60,end) infinite}\n #mk-clock-dot{animation:mk-livedot 2s steps(1,end) infinite}\n #mk-sweep{animation:mk-sweepdown 11s linear infinite}\n #mk-pan-loop{animation:mk-panloop 26s linear infinite}\n #mk-code-c0-l0{animation:mk-typeline 15s steps(30,end) 240ms infinite}\n #mk-code-c0-l1{animation:mk-typeline 15s steps(24,end) 540ms infinite}\n #mk-code-c0-l2{animation:mk-typeline 15s steps(26,end) 840ms infinite}\n #mk-code-c0-l3{animation:mk-typeline 15s steps(29,end) 1140ms infinite}\n #mk-code-c0-l4{animation:mk-typeline 15s steps(23,end) 1440ms infinite}\n #mk-code-c1-l0{animation:mk-typeline 15s steps(8,end) 670ms infinite}\n #mk-code-c1-l1{animation:mk-typeline 15s steps(23,end) 970ms infinite}\n #mk-code-c1-l2{animation:mk-typeline 15s steps(29,end) 1270ms infinite}\n #mk-code-c1-l3{animation:mk-typeline 15s steps(21,end) 1570ms infinite}\n #mk-code-c1-l4{animation:mk-typeline 15s steps(10,end) 1870ms infinite}\n #mk-code-c2-l0{animation:mk-typeline 15s steps(29,end) 1100ms infinite}\n #mk-code-c2-l1{animation:mk-typeline 15s steps(21,end) 1400ms infinite}\n #mk-code-c2-l2{animation:mk-typeline 15s steps(30,end) 1700ms infinite}\n #mk-code-c2-l3{animation:mk-typeline 15s steps(25,end) 2000ms infinite}\n #mk-code-c2-l4{animation:mk-typeline 15s steps(2,end) 2300ms infinite}\n #mk-code-c3-l0{animation:mk-typeline 15s steps(28,end) 1530ms infinite}\n #mk-code-c3-l1{animation:mk-typeline 15s steps(32,end) 1830ms infinite}\n #mk-code-c3-l2{animation:mk-typeline 15s steps(31,end) 2130ms infinite}\n #mk-code-c3-l3{animation:mk-typeline 15s steps(29,end) 2430ms infinite}\n #mk-code-c3-l4{animation:mk-typeline 15s steps(20,end) 2730ms infinite}\n #mk-code-cur{animation:mk-boot-caret .62s steps(1,end) infinite}\n #mk-flap-0-s,#mk-flap-1-s,#mk-flap-2-s,#mk-board-city-s,#mk-board-utc-s{animation:mk-flap 14s steps(7,end) infinite}\n #mk-flap-1-s{animation-delay:80ms}\n #mk-flap-2-s{animation-delay:160ms}\n #mk-doc::before,#mk-doc::after{background-image:linear-gradient(180deg,rgba(255,90,54,0),rgba(255,90,54,.55) 45%,rgba(255,90,54,.55) 55%,rgba(255,90,54,0));background-size:1px 34vh;background-repeat:no-repeat;animation:mk-railrun 9s linear infinite}\n #mk-ar-a-0>*{animation-delay:0ms}\n #mk-ar-b-0>*{animation-delay:130ms}\n #mk-ar-a-1>*{animation-delay:260ms}\n #mk-ar-b-1>*{animation-delay:390ms}\n #mk-ar-a-2>*{animation-delay:520ms}\n #mk-ar-b-2>*{animation-delay:650ms}\n #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;animation-delay:3.84s}\n #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:3.40s}\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-plate-num,#mk-plate-t,#mk-mx-head,#mk-mx-cols,#mk-mx-r-0,#mk-mx-r-1,#mk-mx-r-2,#mk-mx-r-3,#mk-mx-r-4,#mk-mx-r-5,#mk-mx-r-6,#mk-mx-r-7,#mk-fig2-head,#mk-fl-a-0,#mk-fl-b-0,#mk-fl-c-0,#mk-fl-a-1,#mk-fl-b-1,#mk-fl-c-1,#mk-fl-a-2,#mk-fl-b-2,#mk-fl-c-2,#mk-spec2-head,#mk-spec2-r-0,#mk-spec2-r-1,#mk-spec2-r-2,#mk-spec2-r-3,#mk-stack-head,#mk-stack-0,#mk-stack-1,#mk-stack-2,#mk-stack-3,#mk-stack-4,#mk-stack-5,#mk-stack-6,#mk-stack-7,#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-plate-t{animation-range:entry 6% cover 40%}\n #mk-mx-cols{animation-range:entry 6% cover 40%}\n #mk-mx-r-0{animation-range:entry 6% cover 40%}\n #mk-mx-r-1{animation-range:entry 10% cover 44%}\n #mk-mx-r-2{animation-range:entry 10% cover 44%}\n #mk-mx-r-3{animation-range:entry 14% cover 48%}\n #mk-mx-r-4{animation-range:entry 14% cover 48%}\n #mk-mx-r-5{animation-range:entry 18% cover 52%}\n #mk-mx-r-6{animation-range:entry 18% cover 52%}\n #mk-mx-r-7{animation-range:entry 22% cover 56%}\n #mk-fl-a-0{animation-range:entry 6% cover 40%}\n #mk-fl-b-0{animation-range:entry 10% cover 44%}\n #mk-fl-c-0{animation-range:entry 14% cover 48%}\n #mk-fl-a-1{animation-range:entry 10% cover 44%}\n #mk-fl-b-1{animation-range:entry 14% cover 48%}\n #mk-fl-c-1{animation-range:entry 18% cover 52%}\n #mk-fl-a-2{animation-range:entry 14% cover 48%}\n #mk-fl-b-2{animation-range:entry 18% cover 52%}\n #mk-fl-c-2{animation-range:entry 22% cover 56%}\n #mk-spec2-r-0{animation-range:entry 6% cover 40%}\n #mk-spec2-r-1{animation-range:entry 10% cover 44%}\n #mk-spec2-r-2{animation-range:entry 14% cover 48%}\n #mk-spec2-r-3{animation-range:entry 18% cover 52%}\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-stack-5{animation-range:entry 22% cover 56%}\n #mk-stack-6{animation-range:entry 22% cover 56%}\n #mk-stack-7{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 #mk-pan-track{animation:mk-pan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}\n #mk-plate-t h2{background-image:linear-gradient(90deg,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%}\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>",
221
221
  "processShortcodes": "0"
222
222
  }
223
223
  },
@@ -1549,76 +1549,13 @@
1549
1549
  },
1550
1550
  "children": [
1551
1551
  {
1552
- "type": "div",
1553
- "data": {
1554
- "attrID": "mk-uki-sky"
1555
- },
1556
- "style": {
1557
- "&": {
1558
- "_": {}
1559
- }
1560
- },
1561
- "children": []
1562
- },
1563
- {
1564
- "type": "div",
1565
- "data": {
1566
- "attrID": "mk-uki-sun"
1567
- },
1568
- "style": {
1569
- "&": {
1570
- "_": {}
1571
- }
1572
- },
1573
- "children": []
1574
- },
1575
- {
1576
- "type": "div",
1577
- "data": {
1578
- "attrID": "mk-uki-fuji"
1579
- },
1580
- "style": {
1581
- "&": {
1582
- "_": {}
1583
- }
1584
- },
1585
- "children": []
1586
- },
1587
- {
1588
- "type": "div",
1589
- "data": {
1590
- "attrID": "mk-uki-snow"
1591
- },
1592
- "style": {
1593
- "&": {
1594
- "_": {}
1595
- }
1596
- },
1597
- "children": []
1598
- },
1599
- {
1600
- "type": "div",
1601
- "data": {
1602
- "attrID": "mk-uki-sea"
1603
- },
1604
- "style": {
1605
- "&": {
1606
- "_": {}
1607
- }
1608
- },
1609
- "children": []
1610
- },
1611
- {
1612
- "type": "div",
1552
+ "type": "code",
1613
1553
  "data": {
1614
- "attrID": "mk-uki-key"
1615
- },
1616
- "style": {
1617
- "&": {
1618
- "_": {}
1619
- }
1620
- },
1621
- "children": []
1554
+ "attrID": "mk-uki-svg",
1555
+ "insertLocation": "inPlace",
1556
+ "content": "\n<svg id=\"uk\" viewBox=\"0 0 420 280\" preserveAspectRatio=\"xMidYMid slice\"\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n <defs>\n <linearGradient id=\"uk-bokashi\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"#1f3a5f\"/>\n <stop offset=\"34%\" stop-color=\"#1f3a5f\" stop-opacity=\".72\"/>\n <stop offset=\"62%\" stop-color=\"#1f3a5f\" stop-opacity=\".24\"/>\n <stop offset=\"100%\" stop-color=\"#1f3a5f\" stop-opacity=\".10\"/>\n </linearGradient>\n <linearGradient id=\"uk-water\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"#1f3a5f\"/>\n <stop offset=\"100%\" stop-color=\"#162d4e\"/>\n </linearGradient>\n </defs>\n\n <g id=\"uk-sky\"><rect x=\"0\" y=\"0\" width=\"420\" height=\"280\" fill=\"url(#uk-bokashi)\"/></g>\n <g id=\"uk-sun\"><circle cx=\"300\" cy=\"86\" r=\"26\" fill=\"#ff5a36\"/></g>\n\n <g id=\"uk-fuji\">\n <path d=\"M244,206 L300,146 L356,206 Z\" fill=\"#fcfcfa\"/>\n <path d=\"M300,146 L314,161 L307,157 L300,166 L293,155 L286,161 Z\" fill=\"#fff\"/>\n <path d=\"M244,206 L300,146 L356,206\" fill=\"none\" stroke=\"#16181c\"\n stroke-width=\"1.1\"/>\n </g>\n\n <g id=\"uk-sea\">\n <path d=\"M0,206 H420 V280 H0 Z\" fill=\"url(#uk-water)\" opacity=\".34\"/>\n <path d=\"M0,206 H420\" stroke=\"#16181c\" stroke-width=\"1\" opacity=\".55\"/>\n </g>\n\n <g id=\"uk-wave\">\n <path d=\"M0,280 L0,198\n C30,158 72,120 122,101\n C162,86 202,95 224,121\n C206,106 176,101 152,112\n C127,123 111,145 107,169\n C129,199 180,217 250,227\n C320,235 380,239 420,241\n L420,280 Z\" fill=\"url(#uk-water)\"/>\n <path d=\"M0,198 C30,158 72,120 122,101 C162,86 202,95 224,121\"\n fill=\"none\" stroke=\"#16181c\" stroke-width=\"1.3\"/>\n </g>\n\n <g id=\"uk-claw\">\n <path d=\"M152,112\n C160,96 170,92 173,106\n C178,92 188,90 191,104\n C196,91 206,92 209,105\n C214,95 221,99 224,121\n C206,107 176,101 152,112 Z\" fill=\"#fcfcfa\" stroke=\"#16181c\"\n stroke-width=\"1\"/>\n <path d=\"M107,169 C118,152 132,148 138,160 C143,150 152,150 155,160\n C147,168 124,174 107,169 Z\" fill=\"#fcfcfa\" stroke=\"#16181c\"\n stroke-width=\"1\"/>\n </g>\n\n <g id=\"uk-swell\">\n <path d=\"M0,280 L0,250\n C58,238 118,247 178,240\n C238,233 300,244 360,237\n C390,234 406,238 420,236\n L420,280 Z\" fill=\"#162d4e\"/>\n <path d=\"M0,250 C58,238 118,247 178,240 C238,233 300,244 360,237\n C390,234 406,238 420,236\" fill=\"none\" stroke=\"#16181c\"\n stroke-width=\"1.1\" opacity=\".7\"/>\n </g>\n\n <g id=\"uk-key\"><rect x=\".5\" y=\".5\" width=\"419\" height=\"279\" fill=\"none\"\n stroke=\"#16181c\" stroke-width=\"1\"/></g>\n</svg>\n",
1557
+ "processShortcodes": "0"
1558
+ }
1622
1559
  },
1623
1560
  {
1624
1561
  "type": "div",