hyperframes 0.8.183 → 0.8.185

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 (314) hide show
  1. package/dist/{add-HW3ZGR36.js → add-ODTNPRGG.js} +14 -14
  2. package/dist/{agentPromptGenerator-VIIPZCJ3.js → agentPromptGenerator-KYO5MKTW.js} +1 -1
  3. package/dist/{animatedGifPrep-EPLN37ZN.js → animatedGifPrep-PEP5GWOJ.js} +10 -9
  4. package/dist/api.js +18 -17
  5. package/dist/{asset-TOASKL3Z.js → asset-EZG42XPA.js} +2 -2
  6. package/dist/{assetCataloger-PZN5HYG2.js → assetCataloger-OHAJFCA7.js} +10 -9
  7. package/dist/{audio-F5OIQVJO.js → audio-65R4T74I.js} +18 -16
  8. package/dist/{auth-YVQLRS3T.js → auth-VP2SIZFN.js} +1 -1
  9. package/dist/{autoUpdate-EG4ZFW4D.js → autoUpdate-RVSUX4SS.js} +2 -2
  10. package/dist/{backgroundChecks-WINNQVR2.js → backgroundChecks-LEHK74NS.js} +3 -3
  11. package/dist/backgroundChecksWorker.js +3 -3
  12. package/dist/{batchRender-PASZTMEE.js → batchRender-3X6CL7PK.js} +5 -5
  13. package/dist/{beats-KGIOEBLW.js → beats-66VPQLSC.js} +6 -6
  14. package/dist/{benchmark-ZNY2L7HN.js → benchmark-PBJVTOJP.js} +10 -10
  15. package/dist/{browser-REAO7RU4.js → browser-TPL5MWGC.js} +3 -3
  16. package/dist/{bundleWithLocalizedFonts-OAYLYC4W.js → bundleWithLocalizedFonts-67MLTHKM.js} +2 -2
  17. package/dist/{capture-WOSF276U.js → capture-F3GNMRZM.js} +14 -13
  18. package/dist/{capture-IK6GWQDD.js → capture-YYRE7EV3.js} +2 -2
  19. package/dist/{captureCompositionFrame-DDZNKYRE.js → captureCompositionFrame-PXV2ISHD.js} +14 -13
  20. package/dist/{catalog-AKTXS7OJ.js → catalog-6SDD3OHF.js} +14 -14
  21. package/dist/{catch-up-O3VZMPVE.js → catch-up-CWIVA5VG.js} +4 -4
  22. package/dist/{check-6E46NIWI.js → check-YQ6REK2S.js} +35 -34
  23. package/dist/{checkBrowser-UNZHQFNH.js → checkBrowser-5XZCBRXM.js} +32 -31
  24. package/dist/{chunk-TOHA5NAU.js → chunk-2TAS5O4P.js} +56 -11
  25. package/dist/{chunk-3Q47QC46.js → chunk-37CNYTQQ.js} +2 -2
  26. package/dist/chunk-3NPOFC43.js +3805 -0
  27. package/dist/{chunk-EEP5Y5IE.js → chunk-46HEFGXJ.js} +1 -1
  28. package/dist/{chunk-GAGMLVCV.js → chunk-4CTNDBE3.js} +2 -2
  29. package/dist/{chunk-CGK4XZ2J.js → chunk-55YELV7B.js} +1 -1
  30. package/dist/{chunk-TJB4GAV6.js → chunk-5GUKZRQN.js} +1 -1
  31. package/dist/{chunk-J4L5TPLS.js → chunk-5UDRPPN2.js} +48 -6
  32. package/dist/{chunk-SAQYJLI6.js → chunk-6ASIXMFP.js} +1 -1
  33. package/dist/{chunk-GPE3WWTO.js → chunk-6GPR3G3C.js} +14 -11
  34. package/dist/{chunk-MIZDJVPZ.js → chunk-6RIZY7OP.js} +1 -1
  35. package/dist/{chunk-5CS4T6C6.js → chunk-7L37AB57.js} +1 -1
  36. package/dist/{chunk-VH5KESLX.js → chunk-7PS6RVWD.js} +1 -1
  37. package/dist/{chunk-U5YVWG5W.js → chunk-7RAY4WZP.js} +3 -3
  38. package/dist/{chunk-COTLNID2.js → chunk-A6QCO474.js} +5 -5
  39. package/dist/{chunk-YMS5FOMC.js → chunk-B2A56S5C.js} +1 -1
  40. package/dist/{chunk-4FQKS7BJ.js → chunk-BH7TTIPN.js} +11 -13
  41. package/dist/{chunk-LBWRQ4XA.js → chunk-BRAPBUPQ.js} +1 -1
  42. package/dist/{chunk-IC2WYONA.js → chunk-CX3USX23.js} +3 -3
  43. package/dist/{chunk-ITSLKUQM.js → chunk-D42NU3DZ.js} +1 -1
  44. package/dist/{chunk-Q6UYKWBG.js → chunk-EMAWIZ54.js} +481 -36
  45. package/dist/{chunk-ZFO3A3QL.js → chunk-EMSDWBG3.js} +2 -2
  46. package/dist/{chunk-KRFAX5JK.js → chunk-ESBMUZXZ.js} +1 -1
  47. package/dist/{chunk-CAHTO62O.js → chunk-F3OPUWQX.js} +7 -7
  48. package/dist/{chunk-R6OV4J4K.js → chunk-FX6RUJUY.js} +3 -3
  49. package/dist/{chunk-F6WHPHLF.js → chunk-G2UANIDX.js} +1 -1
  50. package/dist/{chunk-DEORFAWP.js → chunk-H5SM5PJI.js} +1 -1
  51. package/dist/{chunk-5OGDBU4G.js → chunk-H6UY725W.js} +2 -2
  52. package/dist/{chunk-K2Z5DZBS.js → chunk-HDIRZGK4.js} +1 -1
  53. package/dist/{chunk-TXGZZKDF.js → chunk-HHSJJFVM.js} +2 -2
  54. package/dist/{chunk-VDJO4DJ7.js → chunk-HXUTX5GR.js} +3 -3
  55. package/dist/{chunk-73LTCCZI.js → chunk-I3IH5MV5.js} +19 -23
  56. package/dist/{chunk-3OLIGYWN.js → chunk-I45HL3VP.js} +3 -3
  57. package/dist/{chunk-TYXH3EKP.js → chunk-I5JRXMCV.js} +16 -1
  58. package/dist/{chunk-RZXUQR42.js → chunk-I7QMXZSB.js} +2 -2
  59. package/dist/{chunk-XOVHO3TT.js → chunk-IDFNKFPL.js} +7 -7
  60. package/dist/{chunk-QX4GGPMY.js → chunk-IDGLGXPA.js} +1 -1
  61. package/dist/{chunk-5MBLWFLM.js → chunk-IPDKZ5IN.js} +33 -6
  62. package/dist/{chunk-ANR6WOC3.js → chunk-ISTRDGIX.js} +1 -1
  63. package/dist/{chunk-4UFJWRHG.js → chunk-IVEFOUZI.js} +211 -83
  64. package/dist/chunk-IZCW2NKT.js +29 -0
  65. package/dist/{chunk-X3IA5RYH.js → chunk-J36JVBLR.js} +9 -2
  66. package/dist/{chunk-Z4R35NJS.js → chunk-J5XEZ24I.js} +3 -3
  67. package/dist/{chunk-OH56PXFH.js → chunk-K2ZKXTVL.js} +1 -1
  68. package/dist/{chunk-ATMDOUNN.js → chunk-K73RJB23.js} +2 -2
  69. package/dist/{chunk-NZ3BE2QE.js → chunk-KQ4JEJLF.js} +10 -10
  70. package/dist/{chunk-VFBAKPRC.js → chunk-KROXPHXX.js} +9 -3
  71. package/dist/{chunk-QGOYNPQT.js → chunk-LLFQA7XF.js} +48 -5
  72. package/dist/chunk-LLMSX6V6.js +17 -0
  73. package/dist/{chunk-XR5BSEUF.js → chunk-LYKSTRAY.js} +3 -3
  74. package/dist/{chunk-UNOSCGBG.js → chunk-OAG47RE6.js} +1 -1
  75. package/dist/{chunk-O7N3A7PE.js → chunk-PHMBMOXF.js} +1 -1
  76. package/dist/{chunk-BP4VNTZL.js → chunk-PMMQRJDE.js} +1 -1
  77. package/dist/{chunk-ADDHW2FS.js → chunk-Q447CX26.js} +82 -12
  78. package/dist/{chunk-WT4PYV2J.js → chunk-Q47FAYYK.js} +202 -55
  79. package/dist/{chunk-AKFADCMS.js → chunk-RTBSA3EA.js} +1 -1
  80. package/dist/{chunk-VAK7A2N6.js → chunk-RUEGYANA.js} +11 -11
  81. package/dist/{chunk-OYLO6TYK.js → chunk-RUOG4VB7.js} +1 -1
  82. package/dist/{chunk-EVAQPW6O.js → chunk-SKYPMHQC.js} +4 -4
  83. package/dist/{chunk-B2SZZFWW.js → chunk-SQVRXHOW.js} +3 -3
  84. package/dist/{chunk-CJYAJ3QM.js → chunk-TAX2ZJAP.js} +24 -16
  85. package/dist/{chunk-GTE5WZAM.js → chunk-TOI35GN2.js} +1 -1
  86. package/dist/{chunk-XJHKJXT4.js → chunk-UPR3MU6Z.js} +1 -1
  87. package/dist/{chunk-DLC2FICN.js → chunk-WQLKDL35.js} +2 -1
  88. package/dist/{chunk-3BA2GP4H.js → chunk-X6L6MD5B.js} +5 -5
  89. package/dist/{chunk-XAQDR5Y5.js → chunk-XGHHVYC7.js} +94 -32
  90. package/dist/{chunk-HLBODNGW.js → chunk-XWC7CNPY.js} +1 -1
  91. package/dist/{clean-WNEIVBF3.js → clean-7J6ZCCGV.js} +19 -18
  92. package/dist/cli.js +53 -53
  93. package/dist/{cloud-6GSSDCJL.js → cloud-7IJCJCDD.js} +4 -4
  94. package/dist/{cloudrun-4NEJRE4T.js → cloudrun-UNZRIIDB.js} +7 -7
  95. package/dist/commands/contrast-audit.browser.js +1 -2
  96. package/dist/commands/layout-audit.browser.js +196 -0
  97. package/dist/{compare-2JWQ5ABA.js → compare-Q7VW5JZT.js} +29 -28
  98. package/dist/{compiler-27KQD7KW.js → compiler-KPHYGFXL.js} +6 -6
  99. package/dist/{component-HCRET3MH.js → component-UUBREJKN.js} +3 -3
  100. package/dist/{compositions-HTSQ6SUJ.js → compositions-T4FTKIDP.js} +14 -13
  101. package/dist/{delete-GHQ5UYM7.js → delete-WZQF2IIA.js} +3 -3
  102. package/dist/{deploy-I3Z3NAVA.js → deploy-JU7A3XNC.js} +1 -1
  103. package/dist/{deterministicFonts-JFLSSKRB.js → deterministicFonts-EGAAE7QL.js} +3 -3
  104. package/dist/{dist-SENYPQGW.js → dist-LM7AVHOU.js} +3 -3
  105. package/dist/{dist-WRDLWRMS.js → dist-ULGTPSU4.js} +8 -4
  106. package/dist/docs/data-attributes.md +1 -1
  107. package/dist/{doctor-UGFVQZHI.js → doctor-VSNGRKXJ.js} +14 -13
  108. package/dist/{events-YS4OVX3I.js → events-CRW2DYUT.js} +3 -3
  109. package/dist/{events-BLJGWMNP.js → events-E63YBUL2.js} +3 -3
  110. package/dist/{feedback-AZ3SJ5HF.js → feedback-OSZWVR6N.js} +9 -9
  111. package/dist/{ffmpeg-2AECXG7V.js → ffmpeg-JLH3Z7G7.js} +10 -9
  112. package/dist/{figma-DRYIJQHV.js → figma-2BQNNR53.js} +3 -3
  113. package/dist/fontLocalizeCli.js +13 -12
  114. package/dist/{get-DDEAOFPB.js → get-P2XI53QW.js} +3 -3
  115. package/dist/{gpuPolicy-UDJT2MQK.js → gpuPolicy-NTKQJY75.js} +10 -9
  116. package/dist/{grade-compare-LJKK5NSY.js → grade-compare-OYASIHIB.js} +30 -29
  117. package/dist/{gsapParserAcorn-7NCK2LVT.js → gsapParserAcorn-SKODXC2N.js} +2 -2
  118. package/dist/{help-TQBGYOID.js → help-HK6K2N4G.js} +1 -1
  119. package/dist/{history-5TOOCF2Y.js → history-JMTYKLXW.js} +6 -6
  120. package/dist/hyperframe.manifest.json +1 -1
  121. package/dist/hyperframe.runtime.iife.js +65 -65
  122. package/dist/hyperframes-player.global.js +1 -1
  123. package/dist/{info-ENI5MP4W.js → info-AW7CIVRE.js} +9 -9
  124. package/dist/{init-JXPXWV3G.js → init-6KIDG4LB.js} +31 -30
  125. package/dist/{inspect-WZNYQ5AB.js → inspect-B7BLYMRZ.js} +30 -29
  126. package/dist/{installer-3SGRBLJW.js → installer-ZP2LQZUQ.js} +7 -7
  127. package/dist/{keyframes-HEOC4CT4.js → keyframes-EQ36A5JE.js} +7 -7
  128. package/dist/{lambda-2VHQ4AL2.js → lambda-E6VURLIS.js} +9 -9
  129. package/dist/{layout-7WEUNO6T.js → layout-XYC64QQQ.js} +30 -29
  130. package/dist/{lint-5YMAF3L7.js → lint-V5DJYWBX.js} +9 -9
  131. package/dist/{lintProject-C2ONSH2U.js → lintProject-JATQKR64.js} +3 -3
  132. package/dist/{list-BIE3X7CO.js → list-RUGVRTVD.js} +3 -3
  133. package/dist/{login-YDIGJWCG.js → login-ZTKGKXGS.js} +4 -4
  134. package/dist/{manager-D2UV6RDQ.js → manager-JUP7PM6N.js} +11 -10
  135. package/dist/{media-treatment-FSKHPMWA.js → media-treatment-VIUPK4OR.js} +16 -15
  136. package/dist/{models-COEK6LXG.js → models-LJS2HBOZ.js} +14 -13
  137. package/dist/{motionShot-HYZ2ZGJQ.js → motionShot-3UAXZ7SN.js} +17 -16
  138. package/dist/{normalize-audio-UXR6WQ7Q.js → normalize-audio-SBYI4YIH.js} +4 -4
  139. package/dist/{open-OFT2GIDG.js → open-S27TUD3A.js} +14 -14
  140. package/dist/{parakeetRunner-4NZ3QXS3.js → parakeetRunner-ETLMLJ4L.js} +15 -14
  141. package/dist/{pipeline-ZKE54JMG.js → pipeline-I2M22M24.js} +11 -10
  142. package/dist/{play-2VG77FT6.js → play-COJU6VJK.js} +22 -21
  143. package/dist/{preflight-QTWDIM5C.js → preflight-FZ24NCHH.js} +11 -10
  144. package/dist/{present-OONXQLJG.js → present-YAHKLC5D.js} +18 -17
  145. package/dist/{preview-6RZJFU76.js → preview-KQOEU5YE.js} +27 -26
  146. package/dist/{producer-6YM3UH3B.js → producer-DTNNG4T6.js} +1 -1
  147. package/dist/{projectConfig-YMW4P2X6.js → projectConfig-4A76VYUP.js} +9 -9
  148. package/dist/{publication-SEINUAPZ.js → publication-SQPMC2W3.js} +4 -4
  149. package/dist/{publish-KZBTBWFO.js → publish-QUEJBGGT.js} +13 -12
  150. package/dist/{remove-background-BIQNMIR7.js → remove-background-FP2ETAQH.js} +12 -11
  151. package/dist/{render-FIH37HJA.js → render-BIFIL4U6.js} +32 -31
  152. package/dist/render-GQFXJWLV.js +1504 -0
  153. package/dist/{render-LW76HOMJ.js → render-P664SMC7.js} +5 -5
  154. package/dist/{render-batch-POLEEYD4.js → render-batch-ZCPMYH6Z.js} +5 -5
  155. package/dist/renderSetupWorker.js +3 -3
  156. package/dist/{resolver-O2SED3XB.js → resolver-BUC2GFZQ.js} +6 -6
  157. package/dist/{sherpa-HTFFFTVQ.js → sherpa-HFT6XEP6.js} +14 -13
  158. package/dist/skills/hyperframes/SKILL.md +52 -174
  159. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/FRAME.md +289 -0
  160. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/caption-skin.html +220 -0
  161. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/frame-showcase.html +1214 -0
  162. package/dist/skills/hyperframes/assets/frame-presets/blockframe/FRAME.md +275 -0
  163. package/dist/skills/hyperframes/assets/frame-presets/blockframe/caption-skin.html +223 -0
  164. package/dist/skills/hyperframes/assets/frame-presets/blockframe/frame-showcase.html +1347 -0
  165. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/FRAME.md +307 -0
  166. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/caption-skin.html +222 -0
  167. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/frame-showcase.html +1372 -0
  168. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/FRAME.md +275 -0
  169. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/caption-skin.html +229 -0
  170. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/frame-showcase.html +1140 -0
  171. package/dist/skills/hyperframes/assets/frame-presets/broadside/FRAME.md +284 -0
  172. package/dist/skills/hyperframes/assets/frame-presets/broadside/caption-skin.html +224 -0
  173. package/dist/skills/hyperframes/assets/frame-presets/broadside/frame-showcase.html +1166 -0
  174. package/dist/skills/hyperframes/assets/frame-presets/capsule/FRAME.md +284 -0
  175. package/dist/skills/hyperframes/assets/frame-presets/capsule/caption-skin.html +223 -0
  176. package/dist/skills/hyperframes/assets/frame-presets/capsule/frame-showcase.html +1465 -0
  177. package/dist/skills/hyperframes/assets/frame-presets/cartesian/FRAME.md +278 -0
  178. package/dist/skills/hyperframes/assets/frame-presets/cartesian/caption-skin.html +221 -0
  179. package/dist/skills/hyperframes/assets/frame-presets/cartesian/frame-showcase.html +1263 -0
  180. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/FRAME.md +265 -0
  181. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/caption-skin.html +237 -0
  182. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/frame-showcase.html +1468 -0
  183. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/FRAME.md +277 -0
  184. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/caption-skin.html +223 -0
  185. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-400.woff2 +0 -0
  186. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-700.woff2 +0 -0
  187. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-400.woff2 +0 -0
  188. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-700.woff2 +0 -0
  189. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 +0 -0
  190. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 +0 -0
  191. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt +93 -0
  192. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-inter.txt +93 -0
  193. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt +93 -0
  194. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/frame-showcase.html +1438 -0
  195. package/dist/skills/hyperframes/assets/frame-presets/coral/FRAME.md +314 -0
  196. package/dist/skills/hyperframes/assets/frame-presets/coral/caption-skin.html +225 -0
  197. package/dist/skills/hyperframes/assets/frame-presets/coral/frame-showcase.html +1268 -0
  198. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/FRAME.md +333 -0
  199. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/caption-skin.html +226 -0
  200. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/frame-showcase.html +1330 -0
  201. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/FRAME.md +274 -0
  202. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/caption-skin.html +229 -0
  203. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/frame-showcase.html +1444 -0
  204. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/FRAME.md +265 -0
  205. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/caption-skin.html +222 -0
  206. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html +1273 -0
  207. package/dist/skills/hyperframes/references/captions.md +46 -0
  208. package/dist/skills/hyperframes/references/film.md +47 -0
  209. package/dist/skills/hyperframes/references/format.md +157 -0
  210. package/dist/skills/hyperframes/references/look.md +69 -0
  211. package/dist/skills/hyperframes/references/motion.md +94 -0
  212. package/dist/skills/hyperframes/references/overlays.md +39 -0
  213. package/dist/skills/hyperframes/references/plugin-installation.md +3 -3
  214. package/dist/skills/hyperframes/references/review.md +51 -0
  215. package/dist/skills/hyperframes/references/runtimes.md +43 -0
  216. package/dist/skills/hyperframes/references/skill-lifecycle.md +21 -13
  217. package/dist/skills/hyperframes/references/sound.md +43 -0
  218. package/dist/skills/hyperframes/references/spec.md +76 -0
  219. package/dist/skills/hyperframes/references/story.md +103 -0
  220. package/dist/skills/hyperframes/references/storyboard-format.md +30 -22
  221. package/dist/skills/hyperframes/references/storyboard.md +36 -0
  222. package/dist/skills/hyperframes/references/types/3d.md +25 -0
  223. package/dist/skills/hyperframes/references/types/character.md +20 -0
  224. package/dist/skills/hyperframes/references/types/data.md +19 -0
  225. package/dist/skills/hyperframes/references/types/explainer.md +34 -0
  226. package/dist/skills/hyperframes/references/types/launch.md +31 -0
  227. package/dist/skills/hyperframes/references/types/music.md +24 -0
  228. package/dist/skills/hyperframes/references/types/vertical.md +23 -0
  229. package/dist/skills/hyperframes/scripts/bake-basemap.mjs +324 -0
  230. package/dist/skills/hyperframes/scripts/lib/main-module.test.mjs +1 -6
  231. package/dist/skills/hyperframes/scripts/locate.mjs +228 -0
  232. package/dist/skills/hyperframes-cli/SKILL.md +76 -179
  233. package/dist/skills/hyperframes-cli/references/beats.md +1 -1
  234. package/dist/skills/hyperframes-cli/references/cloud.md +2 -2
  235. package/dist/skills/hyperframes-cli/references/cloudrun.md +1 -1
  236. package/dist/skills/hyperframes-cli/references/conventions.md +17 -0
  237. package/dist/skills/hyperframes-cli/references/feedback.md +14 -0
  238. package/dist/skills/hyperframes-cli/references/init-and-scaffold.md +11 -7
  239. package/dist/skills/hyperframes-cli/references/lambda.md +1 -1
  240. package/dist/skills/hyperframes-cli/references/lint-validate-inspect.md +19 -8
  241. package/dist/skills/hyperframes-cli/references/preview-render.md +8 -2
  242. package/dist/skills/hyperframes-cli/references/upgrade-info-misc.md +8 -0
  243. package/dist/skills/media-use/SKILL.md +47 -91
  244. package/dist/skills/media-use/audio/references/bgm.md +1 -1
  245. package/dist/skills/media-use/audio/references/captions/authoring.md +1 -2
  246. package/dist/skills/media-use/audio/references/captions/motion.md +5 -5
  247. package/dist/skills/media-use/audio/references/tts.md +0 -3
  248. package/dist/skills/media-use/audio/scripts/audio.mjs +5 -6
  249. package/dist/skills/media-use/audio/scripts/carve.mjs +560 -0
  250. package/dist/skills/media-use/audio/scripts/carve.test.mjs +254 -0
  251. package/dist/skills/media-use/audio/scripts/extract-audio-data.py +199 -0
  252. package/dist/skills/media-use/references/local.md +24 -0
  253. package/dist/skills/media-use/references/memory.md +4 -4
  254. package/dist/skills/media-use/references/mixing.md +71 -0
  255. package/dist/skills/media-use/references/operations.md +1 -1
  256. package/dist/skills/media-use/scripts/compatibility.test.mjs +1 -56
  257. package/dist/skills/media-use/scripts/lib/prefs-store.mjs +1 -1
  258. package/dist/skills/media-use/scripts/lib/recipe-store.mjs +1 -1
  259. package/dist/skills/media-use/scripts/prefs.mjs +2 -3
  260. package/dist/skills/media-use/scripts/recipe.mjs +1 -3
  261. package/dist/{skills-J6MBGS5O.js → skills-3WEVO3NU.js} +20 -13
  262. package/dist/{skillsUpdateCheck-ZAXNLBF3.js → skillsUpdateCheck-BFPWFOK5.js} +3 -3
  263. package/dist/{snapshot-TL7TTFS6.js → snapshot-WDQ6S7CJ.js} +458 -98
  264. package/dist/{src-Z5H5N5T4.js → src-NPR2JZOJ.js} +15 -11
  265. package/dist/{src-EL6HGIS4.js → src-RZ574OKP.js} +9 -8
  266. package/dist/{staticProjectServer-EO7X7RAY.js → staticProjectServer-FTGTEZI4.js} +18 -17
  267. package/dist/studio/assets/{hyperframes-player-hz_VqxBZ.js → hyperframes-player-CoOdf435.js} +1 -1
  268. package/dist/studio/assets/{index-CV_ojgp5.js → index-CR85xg2x.js} +1 -1
  269. package/dist/studio/assets/{index-S1ceEagc.js → index-C_6rTpaB.js} +5 -5
  270. package/dist/studio/index.html +1 -1
  271. package/dist/{studio-api-CUZDC5B3.js → studio-api-TAWB7B23.js} +12 -11
  272. package/dist/{studioServer-EZPRV43Y.js → studioServer-HRQGJTBU.js} +49 -48
  273. package/dist/{telemetry-LFUVHARP.js → telemetry-QZ6HJF4W.js} +3 -3
  274. package/dist/templates/_shared/AGENTS.md +14 -19
  275. package/dist/templates/_shared/CLAUDE.md +14 -19
  276. package/dist/templates/blank/index.html +10 -4
  277. package/dist/{timeline-GSH743JE.js → timeline-IKUEW42T.js} +21 -19
  278. package/dist/{tokens-3ZMPSH7B.js → tokens-AUGUEWHS.js} +2 -2
  279. package/dist/{transcribe-4SHNDPWW.js → transcribe-7734CG3N.js} +19 -18
  280. package/dist/{transcribe-TV7JBZQS.js → transcribe-FWU6EMEO.js} +13 -12
  281. package/dist/{updateCheck-W7FTFOQF.js → updateCheck-VIPQ3FPW.js} +2 -2
  282. package/dist/{upgrade-7YYYNAPF.js → upgrade-4VNDQTVO.js} +2 -2
  283. package/dist/{urlDownloader-PQSUS2CP.js → urlDownloader-6CXL4CL7.js} +9 -8
  284. package/dist/{validate-GCHAEVXM.js → validate-QWCMVWID.js} +24 -23
  285. package/dist/{video-KGN7NJS5.js → video-245Q5WN4.js} +10 -9
  286. package/dist/warmCheck.js +37 -36
  287. package/package.json +1 -1
  288. package/dist/chunk-GMNHAOMJ.js +0 -3805
  289. package/dist/render-65K3K6SD.js +0 -719
  290. package/dist/skills/hyperframes/references/brief-contract.md +0 -108
  291. package/dist/skills/hyperframes/references/brief-format.md +0 -72
  292. package/dist/skills/hyperframes/references/capability-menu.md +0 -47
  293. package/dist/skills/hyperframes/references/frame-worker-core.md +0 -82
  294. package/dist/skills/hyperframes/references/intent-interview.md +0 -73
  295. package/dist/skills/hyperframes/references/pitch-round.md +0 -40
  296. package/dist/skills/hyperframes/references/production-loop.md +0 -26
  297. package/dist/skills/hyperframes/references/review-loop.md +0 -37
  298. package/dist/skills/hyperframes/references/route-briefs.md +0 -11
  299. package/dist/skills/hyperframes/references/routes/embedded-captions.md +0 -11
  300. package/dist/skills/hyperframes/references/routes/faceless-explainer.md +0 -12
  301. package/dist/skills/hyperframes/references/routes/general-video.md +0 -12
  302. package/dist/skills/hyperframes/references/routes/motion-graphics.md +0 -11
  303. package/dist/skills/hyperframes/references/routes/music-to-video.md +0 -12
  304. package/dist/skills/hyperframes/references/routes/pr-to-video.md +0 -28
  305. package/dist/skills/hyperframes/references/routes/product-launch-video.md +0 -13
  306. package/dist/skills/hyperframes/references/routes/remotion-to-hyperframes.md +0 -9
  307. package/dist/skills/hyperframes/references/routes/slideshow.md +0 -11
  308. package/dist/skills/hyperframes/references/routes/talking-head-recut.md +0 -11
  309. package/dist/skills/hyperframes/references/script-format.md +0 -52
  310. package/dist/skills/hyperframes/references/subagent-dispatch.md +0 -35
  311. package/dist/skills/hyperframes/references/workflow-catalog.md +0 -10
  312. package/dist/skills/hyperframes/scripts/lib/frame-packets-core.mjs +0 -176
  313. package/dist/skills/media-use/audio/scripts/lib/host-audio.mjs +0 -28
  314. package/dist/skills/media-use/audio/scripts/lib/host-audio.test.mjs +0 -106
package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html ADDED
@@ -0,0 +1,1273 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
6
+ <title>Editorial Forest</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link
10
+ href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <style id="ds-tokens">
14
+ :root {
15
+ --green: #2e4a2a;
16
+ --green-deep: #243a21;
17
+ --green-lite: #3a5a36;
18
+ --pink: #e89cb1;
19
+ --pink-deep: #d27e96;
20
+ --cream: #efe7d4;
21
+ --cream-2: #e6dcc4;
22
+ --ink: #1a1a17;
23
+ --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
24
+ --mono: "JetBrains Mono", ui-monospace, monospace;
25
+ }
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+ html {
32
+ background: #14140f;
33
+ }
34
+ body {
35
+ background: var(--cream);
36
+ color: var(--ink);
37
+ font-family: var(--serif);
38
+ -webkit-font-smoothing: antialiased;
39
+ }
40
+ .serif {
41
+ font-family: var(--serif);
42
+ font-weight: 500;
43
+ letter-spacing: -0.02em;
44
+ line-height: 0.96;
45
+ }
46
+ .mono {
47
+ font-family: var(--mono);
48
+ font-weight: 500;
49
+ text-transform: uppercase;
50
+ letter-spacing: 0.16em;
51
+ }
52
+
53
+ section {
54
+ padding: 110px 120px;
55
+ position: relative;
56
+ }
57
+ .topbar {
58
+ display: flex;
59
+ justify-content: space-between;
60
+ align-items: center;
61
+ border-bottom: 2px solid var(--green);
62
+ padding-bottom: 18px;
63
+ margin-bottom: 56px;
64
+ }
65
+ .topbar .lbl {
66
+ font-family: var(--mono);
67
+ font-weight: 500;
68
+ text-transform: uppercase;
69
+ letter-spacing: 0.18em;
70
+ font-size: 15px;
71
+ color: var(--green);
72
+ }
73
+ .topbar h2 {
74
+ font-family: var(--serif);
75
+ font-weight: 500;
76
+ font-size: 48px;
77
+ letter-spacing: -0.02em;
78
+ line-height: 1;
79
+ }
80
+
81
+ /* COVER */
82
+ .cover {
83
+ min-height: 100vh;
84
+ background: var(--green);
85
+ color: var(--cream);
86
+ padding: 100px 140px;
87
+ display: flex;
88
+ flex-direction: column;
89
+ justify-content: center;
90
+ position: relative;
91
+ }
92
+ .cover .top {
93
+ position: absolute;
94
+ top: 64px;
95
+ left: 140px;
96
+ right: 140px;
97
+ display: flex;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+ }
101
+ .cover .top .lbl {
102
+ font-family: var(--mono);
103
+ font-weight: 500;
104
+ text-transform: uppercase;
105
+ letter-spacing: 0.18em;
106
+ font-size: 15px;
107
+ color: var(--pink);
108
+ }
109
+ .cover .mono-circle {
110
+ width: 120px;
111
+ height: 120px;
112
+ border-radius: 50%;
113
+ border: 2px solid var(--pink);
114
+ display: grid;
115
+ place-items: center;
116
+ font-family: var(--mono);
117
+ font-weight: 500;
118
+ letter-spacing: 0.1em;
119
+ font-size: 24px;
120
+ color: var(--pink);
121
+ }
122
+ .cover h1 {
123
+ font-family: var(--serif);
124
+ font-weight: 500;
125
+ font-size: clamp(96px, 15vw, 210px);
126
+ line-height: 0.92;
127
+ letter-spacing: -0.02em;
128
+ color: var(--pink);
129
+ }
130
+ .cover h1 .cr {
131
+ color: var(--cream);
132
+ }
133
+ .cover .lede {
134
+ font-family: var(--serif);
135
+ font-weight: 400;
136
+ font-size: 28px;
137
+ line-height: 1.4;
138
+ color: var(--cream);
139
+ max-width: 760px;
140
+ margin-top: 36px;
141
+ }
142
+ .cover .footline {
143
+ position: absolute;
144
+ bottom: 64px;
145
+ left: 140px;
146
+ right: 140px;
147
+ display: flex;
148
+ justify-content: space-between;
149
+ font-family: var(--mono);
150
+ font-weight: 500;
151
+ text-transform: uppercase;
152
+ letter-spacing: 0.14em;
153
+ font-size: 14px;
154
+ color: var(--pink);
155
+ }
156
+
157
+ /* PALETTE */
158
+ .swatches {
159
+ display: grid;
160
+ grid-template-columns: repeat(4, 1fr);
161
+ gap: 0;
162
+ border: 2px solid var(--green);
163
+ }
164
+ .sw {
165
+ border-right: 2px solid var(--green);
166
+ border-bottom: 2px solid var(--green);
167
+ }
168
+ .sw:nth-child(4n) {
169
+ border-right: 0;
170
+ }
171
+ .sw:nth-child(n + 5) {
172
+ border-bottom: 0;
173
+ }
174
+ .sw .chip {
175
+ height: 130px;
176
+ border-bottom: 2px solid var(--green);
177
+ }
178
+ .sw .meta {
179
+ padding: 18px 20px;
180
+ background: var(--cream);
181
+ }
182
+ .sw .name {
183
+ font-family: var(--serif);
184
+ font-weight: 500;
185
+ font-size: 24px;
186
+ }
187
+ .sw .hex {
188
+ font-family: var(--mono);
189
+ font-size: 12px;
190
+ letter-spacing: 0.04em;
191
+ color: var(--ink);
192
+ opacity: 0.65;
193
+ margin-top: 6px;
194
+ }
195
+ .sw .role {
196
+ font-family: var(--serif);
197
+ font-weight: 400;
198
+ font-size: 14px;
199
+ line-height: 1.4;
200
+ color: var(--ink);
201
+ margin-top: 10px;
202
+ }
203
+
204
+ /* TYPE */
205
+ .type-row {
206
+ display: grid;
207
+ grid-template-columns: 240px 1fr;
208
+ align-items: center;
209
+ padding: 26px 0;
210
+ border-bottom: 2px solid rgba(46, 74, 42, 0.25);
211
+ }
212
+ .type-row .tok {
213
+ font-family: var(--mono);
214
+ font-weight: 500;
215
+ text-transform: uppercase;
216
+ letter-spacing: 0.14em;
217
+ font-size: 13px;
218
+ color: var(--green);
219
+ }
220
+ .type-row .m {
221
+ font-family: var(--mono);
222
+ font-size: 11px;
223
+ color: var(--ink);
224
+ opacity: 0.6;
225
+ margin-top: 8px;
226
+ line-height: 1.5;
227
+ letter-spacing: 0.02em;
228
+ }
229
+ .type-row .spec {
230
+ overflow: hidden;
231
+ }
232
+
233
+ /* COMPONENTS */
234
+ .cnote {
235
+ font-family: var(--mono);
236
+ font-weight: 500;
237
+ text-transform: uppercase;
238
+ letter-spacing: 0.16em;
239
+ font-size: 12px;
240
+ color: var(--green);
241
+ margin-bottom: 22px;
242
+ }
243
+ .cgrid {
244
+ display: grid;
245
+ grid-template-columns: repeat(12, 1fr);
246
+ gap: 28px;
247
+ margin-bottom: 52px;
248
+ }
249
+ .s3 {
250
+ grid-column: span 3;
251
+ }
252
+ .s4 {
253
+ grid-column: span 4;
254
+ }
255
+ .s5 {
256
+ grid-column: span 5;
257
+ }
258
+ .s6 {
259
+ grid-column: span 6;
260
+ }
261
+ .s7 {
262
+ grid-column: span 7;
263
+ }
264
+ .s8 {
265
+ grid-column: span 8;
266
+ }
267
+ .tile {
268
+ border-radius: 6px;
269
+ padding: 34px 32px;
270
+ min-height: 240px;
271
+ display: flex;
272
+ flex-direction: column;
273
+ }
274
+ .tile .ord {
275
+ font-family: var(--mono);
276
+ font-weight: 500;
277
+ text-transform: uppercase;
278
+ letter-spacing: 0.12em;
279
+ font-size: 14px;
280
+ }
281
+ .tile .ti {
282
+ font-family: var(--serif);
283
+ font-weight: 500;
284
+ font-size: 40px;
285
+ line-height: 0.98;
286
+ letter-spacing: -0.01em;
287
+ margin-top: auto;
288
+ }
289
+ .tile .ft {
290
+ font-family: var(--mono);
291
+ font-weight: 500;
292
+ text-transform: uppercase;
293
+ letter-spacing: 0.12em;
294
+ font-size: 12px;
295
+ margin-top: 14px;
296
+ }
297
+ .tile.green {
298
+ background: var(--green);
299
+ color: var(--cream);
300
+ }
301
+ .tile.green .ord,
302
+ .tile.green .ft {
303
+ color: var(--pink);
304
+ }
305
+ .tile.pink {
306
+ background: var(--pink);
307
+ color: var(--green-deep);
308
+ }
309
+ .tile.pink .ord,
310
+ .tile.pink .ft {
311
+ color: var(--green-deep);
312
+ }
313
+ .tile.lite {
314
+ background: var(--green-lite);
315
+ color: var(--pink);
316
+ }
317
+ .tile.lite .ti {
318
+ color: var(--cream);
319
+ }
320
+ .tile.cream2 {
321
+ background: var(--cream-2);
322
+ border: 2px solid var(--green);
323
+ color: var(--green);
324
+ }
325
+ .tile.cream2 .ord,
326
+ .tile.cream2 .ft {
327
+ color: var(--green);
328
+ }
329
+ .kpi {
330
+ border-top: 2px solid var(--green);
331
+ padding-top: 22px;
332
+ }
333
+ .kpi .tag {
334
+ font-family: var(--mono);
335
+ font-weight: 500;
336
+ text-transform: uppercase;
337
+ letter-spacing: 0.14em;
338
+ font-size: 13px;
339
+ color: var(--green);
340
+ }
341
+ .kpi .fig {
342
+ font-family: var(--serif);
343
+ font-weight: 500;
344
+ font-size: 128px;
345
+ line-height: 0.92;
346
+ letter-spacing: -0.03em;
347
+ color: var(--ink);
348
+ }
349
+ .kpi .fig .u {
350
+ font-size: 64px;
351
+ }
352
+ .kpi .d {
353
+ font-family: var(--serif);
354
+ font-weight: 400;
355
+ font-size: 18px;
356
+ line-height: 1.35;
357
+ color: var(--ink);
358
+ margin-top: 10px;
359
+ max-width: 280px;
360
+ }
361
+ .monobig {
362
+ width: 130px;
363
+ height: 130px;
364
+ border-radius: 50%;
365
+ border: 2px solid var(--pink);
366
+ display: grid;
367
+ place-items: center;
368
+ font-family: var(--mono);
369
+ font-weight: 500;
370
+ letter-spacing: 0.1em;
371
+ font-size: 26px;
372
+ color: var(--green);
373
+ }
374
+ .bars {
375
+ display: flex;
376
+ align-items: flex-end;
377
+ gap: 24px;
378
+ height: 200px;
379
+ border-bottom: 2px solid var(--green);
380
+ border-left: 2px solid var(--green);
381
+ padding: 0 8px;
382
+ }
383
+ .bars .bar {
384
+ width: 56px;
385
+ border-radius: 3px 3px 0 0;
386
+ position: relative;
387
+ }
388
+ .bars .bar .v {
389
+ position: absolute;
390
+ top: -30px;
391
+ left: 50%;
392
+ transform: translateX(-50%);
393
+ font-family: var(--mono);
394
+ font-weight: 500;
395
+ font-size: 14px;
396
+ color: var(--ink);
397
+ }
398
+
399
+ /* COMPOSITIONS */
400
+ .gallery {
401
+ display: grid;
402
+ grid-template-columns: 1fr 1fr;
403
+ gap: 48px;
404
+ }
405
+ .fw .flabel {
406
+ display: flex;
407
+ gap: 14px;
408
+ align-items: baseline;
409
+ margin-bottom: 16px;
410
+ font-family: var(--mono);
411
+ font-weight: 500;
412
+ text-transform: uppercase;
413
+ letter-spacing: 0.14em;
414
+ font-size: 12px;
415
+ color: var(--ink);
416
+ opacity: 0.55;
417
+ }
418
+ .fw .flabel b {
419
+ color: var(--green);
420
+ opacity: 1;
421
+ }
422
+ .frame {
423
+ aspect-ratio: 16/9;
424
+ container-type: size;
425
+ position: relative;
426
+ overflow: hidden;
427
+ background: var(--cream);
428
+ box-shadow: 0 0 0 1px rgba(46, 74, 42, 0.2);
429
+ }
430
+ .frame > .body {
431
+ position: absolute;
432
+ inset: 0;
433
+ z-index: 3;
434
+ }
435
+ .frame .tb {
436
+ position: absolute;
437
+ left: 5cqw;
438
+ right: 5cqw;
439
+ top: 3cqw;
440
+ display: flex;
441
+ justify-content: space-between;
442
+ align-items: center;
443
+ z-index: 4;
444
+ }
445
+ .frame .tb .l {
446
+ font-family: var(--mono);
447
+ font-weight: 500;
448
+ text-transform: uppercase;
449
+ letter-spacing: 0.16em;
450
+ font-size: 0.95cqw;
451
+ }
452
+ .frame .fl {
453
+ position: absolute;
454
+ left: 5cqw;
455
+ right: 5cqw;
456
+ bottom: 2.8cqw;
457
+ display: flex;
458
+ justify-content: space-between;
459
+ font-family: var(--mono);
460
+ font-weight: 500;
461
+ text-transform: uppercase;
462
+ letter-spacing: 0.14em;
463
+ font-size: 0.85cqw;
464
+ z-index: 4;
465
+ }
466
+
467
+ /* f1 cover green */
468
+ .ef1 {
469
+ background: var(--green);
470
+ }
471
+ .ef1 .tb .l {
472
+ color: var(--pink);
473
+ }
474
+ .ef1 .mc {
475
+ width: 7cqw;
476
+ height: 7cqw;
477
+ border-radius: 50%;
478
+ border: 0.13cqw solid var(--pink);
479
+ display: grid;
480
+ place-items: center;
481
+ font-family: var(--mono);
482
+ font-weight: 500;
483
+ letter-spacing: 0.1em;
484
+ font-size: 1.3cqw;
485
+ color: var(--pink);
486
+ }
487
+ .ef1 .body {
488
+ display: flex;
489
+ flex-direction: column;
490
+ justify-content: center;
491
+ padding: 0 5cqw;
492
+ }
493
+ .ef1 h3 {
494
+ font-family: var(--serif);
495
+ font-weight: 500;
496
+ font-size: 13cqw;
497
+ line-height: 0.9;
498
+ letter-spacing: -0.02em;
499
+ color: var(--pink);
500
+ }
501
+ .ef1 h3 .cr {
502
+ color: var(--cream);
503
+ }
504
+ .ef1 .fl .l {
505
+ color: var(--pink);
506
+ }
507
+
508
+ /* f2 topic tiles */
509
+ .ef2 .body {
510
+ padding: 7cqw 5cqw 6cqw;
511
+ display: flex;
512
+ flex-direction: column;
513
+ }
514
+ .ef2 h3 {
515
+ font-family: var(--serif);
516
+ font-weight: 500;
517
+ font-size: 5cqw;
518
+ line-height: 0.96;
519
+ letter-spacing: -0.02em;
520
+ color: var(--green);
521
+ margin-bottom: 2.4cqw;
522
+ }
523
+ .ef2 .row {
524
+ display: grid;
525
+ grid-template-columns: repeat(3, 1fr);
526
+ gap: 1.5cqw;
527
+ flex: 1;
528
+ }
529
+ .ef2 .t {
530
+ border-radius: 0.6cqw;
531
+ padding: 1.8cqw;
532
+ display: flex;
533
+ flex-direction: column;
534
+ }
535
+ .ef2 .t .o {
536
+ font-family: var(--mono);
537
+ font-weight: 500;
538
+ text-transform: uppercase;
539
+ letter-spacing: 0.12em;
540
+ font-size: 0.85cqw;
541
+ }
542
+ .ef2 .t .ti {
543
+ font-family: var(--serif);
544
+ font-weight: 500;
545
+ font-size: 2.6cqw;
546
+ line-height: 0.98;
547
+ letter-spacing: -0.01em;
548
+ margin-top: auto;
549
+ }
550
+ .ef2 .green {
551
+ background: var(--green);
552
+ color: var(--cream);
553
+ }
554
+ .ef2 .green .o {
555
+ color: var(--pink);
556
+ }
557
+ .ef2 .pink {
558
+ background: var(--pink);
559
+ color: var(--green-deep);
560
+ }
561
+ .ef2 .pink .o {
562
+ color: var(--green-deep);
563
+ }
564
+ .ef2 .cream2 {
565
+ background: var(--cream-2);
566
+ border: 0.13cqw solid var(--green);
567
+ color: var(--green);
568
+ }
569
+ .ef2 .cream2 .o {
570
+ color: var(--green);
571
+ }
572
+
573
+ /* f3 KPI green */
574
+ .ef3 {
575
+ background: var(--green);
576
+ }
577
+ .ef3 .tb .l {
578
+ color: var(--pink);
579
+ }
580
+ .ef3 .body {
581
+ display: flex;
582
+ flex-direction: column;
583
+ justify-content: center;
584
+ padding: 0 5cqw;
585
+ }
586
+ .ef3 .tag {
587
+ font-family: var(--mono);
588
+ font-weight: 500;
589
+ text-transform: uppercase;
590
+ letter-spacing: 0.16em;
591
+ font-size: 1cqw;
592
+ color: var(--pink);
593
+ border-top: 0.12cqw solid var(--pink);
594
+ padding-top: 1.2cqw;
595
+ display: inline-block;
596
+ }
597
+ .ef3 .fig {
598
+ font-family: var(--serif);
599
+ font-weight: 500;
600
+ font-size: 18cqw;
601
+ line-height: 0.9;
602
+ letter-spacing: -0.03em;
603
+ color: var(--pink);
604
+ }
605
+ .ef3 .fig .u {
606
+ font-size: 9cqw;
607
+ }
608
+ .ef3 .d {
609
+ font-family: var(--serif);
610
+ font-weight: 400;
611
+ font-size: 1.7cqw;
612
+ line-height: 1.35;
613
+ color: var(--cream);
614
+ max-width: 40cqw;
615
+ margin-top: 1cqw;
616
+ }
617
+ .ef3 .fl .l {
618
+ color: var(--pink);
619
+ }
620
+
621
+ /* f4 statement quote */
622
+ .ef4 .body {
623
+ display: flex;
624
+ flex-direction: column;
625
+ justify-content: center;
626
+ padding: 0 8cqw;
627
+ }
628
+ .ef4 h3 {
629
+ font-family: var(--serif);
630
+ font-weight: 500;
631
+ font-size: 6.4cqw;
632
+ line-height: 1.02;
633
+ letter-spacing: -0.02em;
634
+ color: var(--green);
635
+ }
636
+ .ef4 .at {
637
+ font-family: var(--serif);
638
+ font-weight: 600;
639
+ font-size: 1.9cqw;
640
+ color: var(--ink);
641
+ margin-top: 2cqw;
642
+ }
643
+ .ef4 .ro {
644
+ font-family: var(--mono);
645
+ font-weight: 500;
646
+ text-transform: uppercase;
647
+ letter-spacing: 0.16em;
648
+ font-size: 0.95cqw;
649
+ color: var(--green);
650
+ margin-top: 0.5cqw;
651
+ }
652
+
653
+ /* PRINCIPLES */
654
+ .dos {
655
+ display: grid;
656
+ grid-template-columns: 1fr 1fr;
657
+ gap: 48px;
658
+ }
659
+ .do-card h4 {
660
+ font-family: var(--serif);
661
+ font-weight: 500;
662
+ font-size: 34px;
663
+ color: var(--green);
664
+ margin-bottom: 6px;
665
+ letter-spacing: -0.02em;
666
+ }
667
+ .do-card .rule {
668
+ height: 2px;
669
+ background: var(--green);
670
+ margin-bottom: 22px;
671
+ }
672
+ .do-card ul {
673
+ list-style: none;
674
+ }
675
+ .do-card li {
676
+ font-family: var(--serif);
677
+ font-weight: 400;
678
+ font-size: 17px;
679
+ line-height: 1.5;
680
+ padding-left: 24px;
681
+ position: relative;
682
+ margin-bottom: 13px;
683
+ }
684
+ .do-card li::before {
685
+ position: absolute;
686
+ left: 0;
687
+ font-family: var(--mono);
688
+ }
689
+ .do-card.do li::before {
690
+ content: "+";
691
+ color: var(--green);
692
+ }
693
+ .do-card.dont li::before {
694
+ content: "\00d7";
695
+ color: var(--pink-deep);
696
+ }
697
+
698
+ .foot {
699
+ padding: 60px 120px;
700
+ border-top: 2px solid var(--green);
701
+ display: flex;
702
+ justify-content: space-between;
703
+ align-items: center;
704
+ }
705
+ .foot .l {
706
+ font-family: var(--serif);
707
+ font-weight: 500;
708
+ font-size: 30px;
709
+ color: var(--green);
710
+ }
711
+ .foot .r {
712
+ font-family: var(--mono);
713
+ font-weight: 500;
714
+ text-transform: uppercase;
715
+ letter-spacing: 0.16em;
716
+ font-size: 11px;
717
+ color: var(--ink);
718
+ opacity: 0.55;
719
+ }
720
+ @media (max-width: 1100px) {
721
+ .gallery {
722
+ grid-template-columns: 1fr;
723
+ }
724
+ .swatches {
725
+ grid-template-columns: 1fr 1fr;
726
+ }
727
+ }
728
+ </style>
729
+ <link
730
+ rel="stylesheet"
731
+ href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap"
732
+ />
733
+ <link
734
+ rel="stylesheet"
735
+ href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
736
+ />
737
+ <style id="ft-override">
738
+ :root {
739
+ --primary: #efe7d4 !important;
740
+ --secondary: #2e4a2a !important;
741
+ --tertiary: #e6dcc4 !important;
742
+ --accent: #e89cb1 !important;
743
+ --f-disp: "Source Serif 4", sans-serif !important;
744
+ --f-body: "JetBrains Mono", sans-serif !important;
745
+ --green: #2e4a2a !important;
746
+ --pink: #e89cb1 !important;
747
+ --cream: #efe7d4 !important;
748
+ --cream-2: #e6dcc4 !important;
749
+ --serif: "Source Serif 4", sans-serif !important;
750
+ --mono: "JetBrains Mono", sans-serif !important;
751
+ --green-deep: #243a21 !important;
752
+ --green-lite: #3a5a36 !important;
753
+ --pink-deep: #d27e96 !important;
754
+ --ink: #1a1a17 !important;
755
+ }
756
+ </style>
757
+ </head>
758
+ <body>
759
+ <!-- COVER -->
760
+ <section class="cover">
761
+ <div class="top">
762
+ <span class="lbl">Frame System · Vol. 01</span>
763
+ <div class="mono-circle">EF</div>
764
+ </div>
765
+ <h1>Paper,<br />ink &amp; <span class="cr">leaf.</span></h1>
766
+ <div class="lede">
767
+ A serif-led editorial frame system — Source Serif 4 at weight 500, a forest-green /
768
+ dusty-rose / oat-cream triad, and JetBrains Mono as the editorial chrome.
769
+ </div>
770
+ <div class="footline">
771
+ <span>Source Serif 4 · JetBrains Mono</span><span>1920 × 1080</span>
772
+ </div>
773
+ </section>
774
+
775
+ <!-- PALETTE -->
776
+ <section>
777
+ <div class="topbar">
778
+ <span class="lbl">01 — Palette</span>
779
+ <h2>Three Surfaces</h2>
780
+ </div>
781
+ <div class="swatches">
782
+ <div class="sw">
783
+ <div class="chip" style="background: var(--green)"></div>
784
+ <div class="meta">
785
+ <div class="name">Green</div>
786
+ <div class="hex">#2e4a2a</div>
787
+ <div class="role">Forest primary — surface, fill, rule.</div>
788
+ </div>
789
+ </div>
790
+ <div class="sw">
791
+ <div class="chip" style="background: var(--pink)"></div>
792
+ <div class="meta">
793
+ <div class="name">Pink</div>
794
+ <div class="hex">#e89cb1</div>
795
+ <div class="role">Dusty rose — the accent + on-green text.</div>
796
+ </div>
797
+ </div>
798
+ <div class="sw">
799
+ <div class="chip" style="background: var(--cream)"></div>
800
+ <div class="meta">
801
+ <div class="name">Cream</div>
802
+ <div class="hex">#efe7d4</div>
803
+ <div class="role">Oat paper — the default ground.</div>
804
+ </div>
805
+ </div>
806
+ <div class="sw">
807
+ <div class="chip" style="background: var(--ink)"></div>
808
+ <div class="meta">
809
+ <div class="name">Ink</div>
810
+ <div class="hex">#1a1a17</div>
811
+ <div class="role">Warm near-black body on cream.</div>
812
+ </div>
813
+ </div>
814
+ <div class="sw">
815
+ <div class="chip" style="background: var(--green-deep)"></div>
816
+ <div class="meta">
817
+ <div class="name">Green Deep</div>
818
+ <div class="hex">#243a21</div>
819
+ <div class="role">Text on pink surfaces.</div>
820
+ </div>
821
+ </div>
822
+ <div class="sw">
823
+ <div class="chip" style="background: var(--green-lite)"></div>
824
+ <div class="meta">
825
+ <div class="name">Green Lite</div>
826
+ <div class="hex">#3a5a36</div>
827
+ <div class="role">Second green for tile pairs.</div>
828
+ </div>
829
+ </div>
830
+ <div class="sw">
831
+ <div class="chip" style="background: var(--pink-deep)"></div>
832
+ <div class="meta">
833
+ <div class="name">Pink Deep</div>
834
+ <div class="hex">#d27e96</div>
835
+ <div class="role">Pink-on-pink borders.</div>
836
+ </div>
837
+ </div>
838
+ <div class="sw">
839
+ <div class="chip" style="background: var(--cream-2)"></div>
840
+ <div class="meta">
841
+ <div class="name">Cream 2</div>
842
+ <div class="hex">#e6dcc4</div>
843
+ <div class="role">Tiles on the cream ground.</div>
844
+ </div>
845
+ </div>
846
+ </div>
847
+ </section>
848
+
849
+ <!-- TYPOGRAPHY -->
850
+ <section>
851
+ <div class="topbar">
852
+ <span class="lbl">02 — Typography</span>
853
+ <h2>Serif 500 · Mono Chrome</h2>
854
+ </div>
855
+ <div class="type-row">
856
+ <div>
857
+ <div class="tok">display-hero</div>
858
+ <div class="m">Source Serif 4 · 500 · 220px · −0.02em · opsz</div>
859
+ </div>
860
+ <div class="spec">
861
+ <span class="serif" style="font-size: 120px; line-height: 0.92">Quarterly</span>
862
+ </div>
863
+ </div>
864
+ <div class="type-row">
865
+ <div>
866
+ <div class="tok">headline-xl</div>
867
+ <div class="m">Source Serif 4 · 500 · 96px</div>
868
+ </div>
869
+ <div class="spec"><span class="serif" style="font-size: 76px">A Quiet Annual</span></div>
870
+ </div>
871
+ <div class="type-row">
872
+ <div>
873
+ <div class="tok">stat-figure</div>
874
+ <div class="m">Source Serif 4 · 500 · 220px · −0.03em</div>
875
+ </div>
876
+ <div class="spec">
877
+ <span class="serif" style="font-size: 108px; color: var(--green)"
878
+ >94<span style="font-size: 54px">%</span></span
879
+ >
880
+ </div>
881
+ </div>
882
+ <div class="type-row">
883
+ <div>
884
+ <div class="tok">body</div>
885
+ <div class="m">Source Serif 4 · 400 · line 1.38</div>
886
+ </div>
887
+ <div class="spec">
888
+ <p
889
+ style="
890
+ font-family: var(--serif);
891
+ font-weight: 400;
892
+ font-size: 24px;
893
+ line-height: 1.38;
894
+ max-width: 680px;
895
+ "
896
+ >
897
+ Body runs the serif at weight 400 — the drop from 500 display to 400 body is the
898
+ system's reading rhythm.
899
+ </p>
900
+ </div>
901
+ </div>
902
+ <div class="type-row" style="border-bottom: 0">
903
+ <div>
904
+ <div class="tok">label</div>
905
+ <div class="m">JetBrains Mono · 500 · uppercase · 0.18em</div>
906
+ </div>
907
+ <div class="spec">
908
+ <span class="mono" style="font-size: 16px; color: var(--green)"
909
+ >Editorial Chrome · Section</span
910
+ >
911
+ </div>
912
+ </div>
913
+ </section>
914
+
915
+ <!-- COMPONENTS -->
916
+ <section>
917
+ <div class="topbar">
918
+ <span class="lbl">03 — Components</span>
919
+ <h2>Flat · Paper-Based</h2>
920
+ </div>
921
+
922
+ <div class="cgrid">
923
+ <div class="s8">
924
+ <div class="cnote">Topic tiles — fills rotate green / pink / green-lite / cream-2</div>
925
+ <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px">
926
+ <div class="tile green">
927
+ <span class="ord">01</span>
928
+ <div class="ti">Paper</div>
929
+ <span class="ft">Ground</span>
930
+ </div>
931
+ <div class="tile pink">
932
+ <span class="ord">02</span>
933
+ <div class="ti">Ink</div>
934
+ <span class="ft">Type</span>
935
+ </div>
936
+ <div class="tile lite">
937
+ <span class="ord">03</span>
938
+ <div class="ti">Leaf</div>
939
+ <span class="ft">Surface</span>
940
+ </div>
941
+ <div class="tile cream2">
942
+ <span class="ord">04</span>
943
+ <div class="ti">Rose</div>
944
+ <span class="ft">Accent</span>
945
+ </div>
946
+ </div>
947
+ </div>
948
+ <div class="s4">
949
+ <div class="cnote">Monogram circle + KPI</div>
950
+ <div class="monobig">EF</div>
951
+ <div class="kpi" style="margin-top: 28px">
952
+ <div class="tag">Retention</div>
953
+ <div class="fig">94<span class="u">%</span></div>
954
+ <div class="d">Net revenue, trailing twelve months.</div>
955
+ </div>
956
+ </div>
957
+ </div>
958
+
959
+ <div class="cgrid" style="margin-bottom: 0">
960
+ <div class="s6">
961
+ <div class="cnote">Bar chart — pink / cream / green, mono ticks</div>
962
+ <div class="bars">
963
+ <div class="bar" style="height: 55%; background: var(--pink)">
964
+ <span class="v">55</span>
965
+ </div>
966
+ <div class="bar" style="height: 72%; background: var(--cream-2)">
967
+ <span class="v">72</span>
968
+ </div>
969
+ <div class="bar" style="height: 90%; background: var(--green)">
970
+ <span class="v">90</span>
971
+ </div>
972
+ <div class="bar" style="height: 64%; background: var(--pink)">
973
+ <span class="v">64</span>
974
+ </div>
975
+ </div>
976
+ </div>
977
+ <div class="s6">
978
+ <div class="cnote">Meta definition list — 2px green top rule</div>
979
+ <div
980
+ style="
981
+ border-top: 2px solid var(--green);
982
+ display: grid;
983
+ grid-template-columns: repeat(3, 1fr);
984
+ gap: 36px;
985
+ padding-top: 20px;
986
+ "
987
+ >
988
+ <div>
989
+ <div class="mono" style="font-size: 13px; color: var(--green)">Editor</div>
990
+ <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
991
+ A. Wren
992
+ </div>
993
+ </div>
994
+ <div>
995
+ <div class="mono" style="font-size: 13px; color: var(--green)">Issue</div>
996
+ <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
997
+ No. 12
998
+ </div>
999
+ </div>
1000
+ <div>
1001
+ <div class="mono" style="font-size: 13px; color: var(--green)">Season</div>
1002
+ <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
1003
+ Spring
1004
+ </div>
1005
+ </div>
1006
+ </div>
1007
+ </div>
1008
+ </div>
1009
+ </section>
1010
+
1011
+ <!-- COMPOSITIONS -->
1012
+ <section style="background: var(--cream-2)">
1013
+ <div class="topbar">
1014
+ <span class="lbl">04 — Frames</span>
1015
+ <h2>Frame Compositions</h2>
1016
+ </div>
1017
+ <div class="gallery">
1018
+ <div class="fw">
1019
+ <div class="flabel">
1020
+ <b>Cover</b><span>· identity · green · monogram · centered-left</span>
1021
+ </div>
1022
+ <div class="frame ef1">
1023
+ <div class="tb">
1024
+ <span class="l">Frame System · Vol. 01</span>
1025
+ <div class="mc">EF</div>
1026
+ </div>
1027
+ <div class="body">
1028
+ <h3>Paper, ink<br />&amp; <span class="cr">leaf.</span></h3>
1029
+ </div>
1030
+ <div class="fl">
1031
+ <span class="l">Source Serif 4 · Mono</span><span class="l">01 / 06</span>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <div class="fw">
1037
+ <div class="flabel">
1038
+ <b>Topic Tiles</b><span>· catalog · rotating fills · the dense frame</span>
1039
+ </div>
1040
+ <div class="frame ef2">
1041
+ <div class="tb">
1042
+ <span class="l" style="color: var(--green)">Contents</span
1043
+ ><span class="l" style="color: var(--green)">02 / 06</span>
1044
+ </div>
1045
+ <div class="body">
1046
+ <h3>Four Strands</h3>
1047
+ <div class="row">
1048
+ <div class="t green">
1049
+ <span class="o">01</span>
1050
+ <div class="ti">On Paper</div>
1051
+ </div>
1052
+ <div class="t pink">
1053
+ <span class="o">02</span>
1054
+ <div class="ti">On Ink</div>
1055
+ </div>
1056
+ <div class="t cream2">
1057
+ <span class="o">03</span>
1058
+ <div class="ti">On Measure</div>
1059
+ </div>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <div class="fw">
1066
+ <div class="flabel"><b>KPI Stat</b><span>· data · green · oversized figure</span></div>
1067
+ <div class="frame ef3">
1068
+ <div class="tb">
1069
+ <span class="l">By The Numbers</span><span class="l">03 / 06</span>
1070
+ </div>
1071
+ <div class="body">
1072
+ <span class="tag">Retention</span>
1073
+ <div class="fig">94<span class="u">%</span></div>
1074
+ <div class="d">
1075
+ Net revenue retention across the year — the figure carries the frame.
1076
+ </div>
1077
+ </div>
1078
+ <div class="fl"><span class="l">Annual Report</span><span class="l">03 / 06</span></div>
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <div class="fw">
1083
+ <div class="flabel"><b>Statement</b><span>· quote · cream · centered-left</span></div>
1084
+ <div class="frame ef4">
1085
+ <div class="tb">
1086
+ <span class="l" style="color: var(--green)">In Their Words</span
1087
+ ><span class="l" style="color: var(--green)">04 / 06</span>
1088
+ </div>
1089
+ <div class="body">
1090
+ <h3>Set it slowly,<br />and let it breathe.</h3>
1091
+ <div class="at">Avery Wren</div>
1092
+ <div class="ro">Editor-in-Chief</div>
1093
+ </div>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ </section>
1098
+
1099
+ <!-- PRINCIPLES -->
1100
+ <section>
1101
+ <div class="topbar">
1102
+ <span class="lbl">05 — Rules</span>
1103
+ <h2>Frame Rules</h2>
1104
+ </div>
1105
+ <div class="dos">
1106
+ <div class="do-card do">
1107
+ <h4>Do</h4>
1108
+ <div class="rule"></div>
1109
+ <ul>
1110
+ <li>
1111
+ Run every display in Source Serif 4 weight 500, negative-tracked, tight line-height.
1112
+ </li>
1113
+ <li>Set every label/caption in JetBrains Mono 500 uppercase, 0.14–0.18em.</li>
1114
+ <li>Give every frame a topbar (mono label + monogram or counter).</li>
1115
+ <li>Pick one dominant surface per frame; rotate tile fills, don't repeat one.</li>
1116
+ <li>Separate sections with 2px hairlines in the region's accent.</li>
1117
+ </ul>
1118
+ </div>
1119
+ <div class="do-card dont">
1120
+ <h4>Don't</h4>
1121
+ <div class="rule"></div>
1122
+ <ul>
1123
+ <li>No drop shadows, gradients, or glows — flat, paper-based depth only.</li>
1124
+ <li>No third typeface; no italic or underline; no serif body at 500.</li>
1125
+ <li>No fourth color family; no 1px or 4px rules (2px / 2.5px only).</li>
1126
+ <li>No two competing content blocks — one subject per frame.</li>
1127
+ <li>Don't blow a headline edge-to-edge — fit to measure.</li>
1128
+ </ul>
1129
+ </div>
1130
+ </div>
1131
+ </section>
1132
+
1133
+ <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1134
+ <style>
1135
+ /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1136
+ .capdemo {
1137
+ --cap-ink: var(--ink);
1138
+ --cap-canvas: var(--cream);
1139
+ --cap-accent: var(--pink-deep);
1140
+ --cap-accent-2: var(--pink);
1141
+ }
1142
+ .capdemo .stage {
1143
+ position: absolute;
1144
+ left: 0;
1145
+ right: 0;
1146
+ bottom: 0;
1147
+ height: 16.67cqh;
1148
+ display: flex;
1149
+ align-items: center;
1150
+ justify-content: center;
1151
+ z-index: 4;
1152
+ }
1153
+ .capdemo .pill {
1154
+ max-width: 80cqw;
1155
+ padding: 1.4cqw 3cqw 1.7cqw;
1156
+ background: var(--cap-canvas);
1157
+ border: 0.21cqw solid var(--cap-accent);
1158
+ border-radius: 0.6cqw;
1159
+ }
1160
+ .capdemo .line {
1161
+ display: flex;
1162
+ flex-wrap: wrap;
1163
+ justify-content: center;
1164
+ gap: 0.1em 0.34em;
1165
+ font-family: var(--serif);
1166
+ font-weight: 500;
1167
+ font-size: 3.4cqw;
1168
+ line-height: 1.16;
1169
+ letter-spacing: -0.02em;
1170
+ }
1171
+ .capdemo .w {
1172
+ display: inline-block;
1173
+ padding: 0 0.06em;
1174
+ color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1175
+ }
1176
+ .capdemo .w.spoken {
1177
+ color: var(--cap-ink);
1178
+ }
1179
+ .capdemo .w.active {
1180
+ color: var(--cap-ink);
1181
+ background: var(--cap-accent);
1182
+ box-shadow: 0 0 0 0.05em var(--cap-accent);
1183
+ border-radius: 0.6cqw;
1184
+ }
1185
+ .capdemo .bandline {
1186
+ position: absolute;
1187
+ left: 0;
1188
+ right: 0;
1189
+ bottom: 16.67cqh;
1190
+ border-top: 2px dashed rgba(46, 74, 42, 0.32);
1191
+ z-index: 3;
1192
+ }
1193
+ .capdemo .bandtag {
1194
+ position: absolute;
1195
+ right: 5cqw;
1196
+ bottom: calc(16.67cqh + 0.7cqw);
1197
+ font-family: var(--mono);
1198
+ font-weight: 500;
1199
+ text-transform: uppercase;
1200
+ letter-spacing: 0.12em;
1201
+ font-size: 0.85cqw;
1202
+ color: var(--green);
1203
+ opacity: 0.6;
1204
+ z-index: 4;
1205
+ }
1206
+ </style>
1207
+ <section style="background: var(--cream-2)">
1208
+ <div class="topbar">
1209
+ <span class="lbl">06 — Captions</span>
1210
+ <h2>Lower-Third Karaoke</h2>
1211
+ </div>
1212
+ <div class="gallery">
1213
+ <div class="fw">
1214
+ <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1215
+ <div class="frame capdemo">
1216
+ <div class="tb">
1217
+ <span class="l" style="color: var(--green)">Captions</span
1218
+ ><span class="l" style="color: var(--green)">05 / 06</span>
1219
+ </div>
1220
+ <div class="bandline"></div>
1221
+ <div class="bandtag">caption band · 16.7%</div>
1222
+ <div class="stage">
1223
+ <div class="pill">
1224
+ <div class="line">
1225
+ <span class="w spoken">Built</span>
1226
+ <span class="w spoken">for</span>
1227
+ <span class="w active">teams</span>
1228
+ <span class="w">who</span>
1229
+ <span class="w">ship.</span>
1230
+ </div>
1231
+ </div>
1232
+ </div>
1233
+ </div>
1234
+ </div>
1235
+
1236
+ <div class="fw">
1237
+ <div class="flabel"><b>Settled line</b><span>· all spoken · panel cleared</span></div>
1238
+ <div class="frame capdemo">
1239
+ <div class="tb">
1240
+ <span class="l" style="color: var(--green)">Captions</span
1241
+ ><span class="l" style="color: var(--green)">06 / 06</span>
1242
+ </div>
1243
+ <div class="stage">
1244
+ <div class="pill">
1245
+ <div class="line">
1246
+ <span class="w spoken">Ship</span>
1247
+ <span class="w spoken">faster</span>
1248
+ <span class="w spoken">today.</span>
1249
+ </div>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+ </section>
1256
+
1257
+ <div class="foot">
1258
+ <span class="l">Editorial Forest</span>
1259
+ <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1260
+ </div>
1261
+
1262
+ <template id="__bundler_thumbnail">
1263
+ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1264
+ <rect width="100" height="100" fill="#2e4a2a" />
1265
+ <text x="12" y="46" font-family="Georgia" font-weight="500" font-size="30" fill="#e89cb1">
1266
+ Aa
1267
+ </text>
1268
+ <circle cx="80" cy="26" r="13" fill="none" stroke="#e89cb1" stroke-width="2" />
1269
+ <rect x="12" y="60" width="60" height="2" fill="#e89cb1" />
1270
+ </svg>
1271
+ </template>
1272
+ </body>
1273
+ </html>