hyperframes 0.8.184 → 0.8.186

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-5ZTD3MUZ.js → add-UGK7AZI6.js} +14 -14
  2. package/dist/{agentPromptGenerator-VIIPZCJ3.js → agentPromptGenerator-KYO5MKTW.js} +1 -1
  3. package/dist/{animatedGifPrep-AGASIWVA.js → animatedGifPrep-HPZPSB43.js} +9 -9
  4. package/dist/api.js +18 -18
  5. package/dist/{asset-LSTEMPIB.js → asset-X2GTFWOY.js} +2 -2
  6. package/dist/{assetCataloger-BKBMNL3A.js → assetCataloger-5NWEG4IU.js} +9 -9
  7. package/dist/audio-7PBM5F3H.js +2317 -0
  8. package/dist/{auth-MJWKYK77.js → auth-WABSMO46.js} +1 -1
  9. package/dist/{autoUpdate-2GGDKYR2.js → autoUpdate-6SCMLTSC.js} +2 -2
  10. package/dist/{backgroundChecks-7GRX5VQY.js → backgroundChecks-XOGPAAR3.js} +3 -3
  11. package/dist/backgroundChecksWorker.js +3 -3
  12. package/dist/{batchRender-BCV2LELR.js → batchRender-VR6IA77K.js} +5 -5
  13. package/dist/{beats-7BCFRBAL.js → beats-3IWXLMSC.js} +7 -7
  14. package/dist/{benchmark-2R6CN5MQ.js → benchmark-2SSYATCX.js} +10 -10
  15. package/dist/{browser-6AFGOI7G.js → browser-PMRN345D.js} +3 -3
  16. package/dist/{bundleWithLocalizedFonts-2EGPA5ZO.js → bundleWithLocalizedFonts-TT32MZBO.js} +2 -2
  17. package/dist/{capture-HOIAW6MO.js → capture-4VD6AKUJ.js} +13 -13
  18. package/dist/{capture-HA2UHLIU.js → capture-BDGYTE57.js} +2 -2
  19. package/dist/{captureCompositionFrame-4236FVWJ.js → captureCompositionFrame-5FVLAETA.js} +17 -13
  20. package/dist/{catalog-A6CZAWW4.js → catalog-HUYZO5D7.js} +14 -14
  21. package/dist/{catch-up-TNA4DJOA.js → catch-up-SSGTR2ZT.js} +4 -4
  22. package/dist/{check-5E5U2EQZ.js → check-JWUWHGM2.js} +34 -34
  23. package/dist/{checkBrowser-FNINXBMZ.js → checkBrowser-X7G6YNR7.js} +31 -31
  24. package/dist/{chunk-UJKUB2LH.js → chunk-22QKQDEE.js} +11 -11
  25. package/dist/{chunk-2PVE4WS2.js → chunk-27H2363S.js} +33 -6
  26. package/dist/{chunk-2ULXZ4PG.js → chunk-2II34JPM.js} +154 -21
  27. package/dist/{chunk-3QVMJ7GX.js → chunk-2PZZMAME.js} +11 -10
  28. package/dist/{chunk-X3CG5YQA.js → chunk-3YHGQJI6.js} +3 -3
  29. package/dist/{chunk-EEP5Y5IE.js → chunk-46HEFGXJ.js} +1 -1
  30. package/dist/{chunk-DWUGKEHR.js → chunk-4AFNEKU7.js} +1 -1
  31. package/dist/{chunk-R2BFTECP.js → chunk-4NTW45W5.js} +3 -3
  32. package/dist/{chunk-7HJALUIO.js → chunk-4XFFJAWS.js} +1 -1
  33. package/dist/{chunk-SN7KI5JA.js → chunk-5ZMIVTHN.js} +2 -2
  34. package/dist/{chunk-QL2PNIXC.js → chunk-5ZMXGNGC.js} +24 -16
  35. package/dist/{chunk-UKOTVJFV.js → chunk-6IOBAOU7.js} +1 -1
  36. package/dist/{chunk-JIUTXKWA.js → chunk-77QM6YRQ.js} +2 -1
  37. package/dist/{chunk-ES426XRJ.js → chunk-7AUMTARQ.js} +3 -3
  38. package/dist/{chunk-5CS4T6C6.js → chunk-7L37AB57.js} +1 -1
  39. package/dist/{chunk-RGXVEYHI.js → chunk-7M7TMM4S.js} +81 -10
  40. package/dist/{chunk-3TXNNBI2.js → chunk-7MLFYMFB.js} +2 -2
  41. package/dist/{chunk-MFAETWIF.js → chunk-7MVODWQF.js} +1 -1
  42. package/dist/{chunk-WHPN2TIT.js → chunk-ACLABKEF.js} +6 -6
  43. package/dist/{chunk-YMS5FOMC.js → chunk-B2A56S5C.js} +1 -1
  44. package/dist/{chunk-YALM6XN4.js → chunk-BRTDLVK3.js} +3 -3
  45. package/dist/{chunk-VDM3FEDP.js → chunk-DQZMJS2P.js} +1 -1
  46. package/dist/{chunk-PSKEKWVU.js → chunk-DTXDQ6OP.js} +1 -1
  47. package/dist/{chunk-Q33P4EAC.js → chunk-EZINX6HH.js} +3 -3
  48. package/dist/{chunk-3MDJIWOV.js → chunk-FCWFV4P7.js} +75 -35
  49. package/dist/{chunk-ABZYYUUH.js → chunk-FRLTKTOR.js} +1 -1
  50. package/dist/{chunk-E32ZQ2WO.js → chunk-GTMBII7X.js} +1 -1
  51. package/dist/{chunk-YOZPQCSR.js → chunk-HOFX63F2.js} +3 -3
  52. package/dist/{chunk-LRGYPXHF.js → chunk-HZ7M2MZA.js} +1 -1
  53. package/dist/{chunk-TYXH3EKP.js → chunk-I5JRXMCV.js} +16 -1
  54. package/dist/{chunk-LLC4CS6I.js → chunk-ID5AJ4L3.js} +3 -3
  55. package/dist/{chunk-FGJEUV4S.js → chunk-K6KBOORN.js} +48 -4
  56. package/dist/{chunk-EM7C7H7S.js → chunk-KNLSYCI5.js} +7 -7
  57. package/dist/{chunk-4N4P3ZWL.js → chunk-LDW3KVGK.js} +2 -2
  58. package/dist/{chunk-OLZENUPI.js → chunk-LLFQA7XF.js} +1 -1
  59. package/dist/chunk-LLMSX6V6.js +17 -0
  60. package/dist/{chunk-5UDRPPN2.js → chunk-MY6CVBDD.js} +7 -4
  61. package/dist/{chunk-7NRI7HYX.js → chunk-NPDPDEPP.js} +1 -1
  62. package/dist/{chunk-BCHSTE7U.js → chunk-PEIV2SOG.js} +1 -1
  63. package/dist/{chunk-ADDHW2FS.js → chunk-Q447CX26.js} +82 -12
  64. package/dist/{chunk-YWNJTZGN.js → chunk-R6IGQ5NO.js} +2 -2
  65. package/dist/{chunk-YWHCXIMD.js → chunk-RFJ6SX4U.js} +5 -5
  66. package/dist/{chunk-J3QM7AHP.js → chunk-RNZEQTWZ.js} +2 -2
  67. package/dist/{chunk-SAX7HQ5E.js → chunk-ROWEDRVX.js} +1 -1
  68. package/dist/{chunk-PFYWVUHA.js → chunk-RPUIMFHF.js} +1 -1
  69. package/dist/{chunk-OYLO6TYK.js → chunk-RUOG4VB7.js} +1 -1
  70. package/dist/{chunk-UNNXFKVG.js → chunk-RVZNSKRH.js} +2 -2
  71. package/dist/{chunk-VNVQGDPC.js → chunk-T4RP55P2.js} +1 -1
  72. package/dist/{chunk-GDEV42FA.js → chunk-TH7J3JZ5.js} +524 -42
  73. package/dist/{chunk-VHZ6DL3M.js → chunk-TMK4Q7JA.js} +10 -7
  74. package/dist/{chunk-74JMKLVU.js → chunk-TQ2RRB5V.js} +1 -1
  75. package/dist/{chunk-ICJEAFPD.js → chunk-U4BMRIE6.js} +16 -7
  76. package/dist/{chunk-HR23IKLZ.js → chunk-U7QTMRLW.js} +2 -2
  77. package/dist/{chunk-KN46TGHV.js → chunk-UAJCTEK2.js} +1 -1
  78. package/dist/{chunk-CXABAXB3.js → chunk-UJZT6HNN.js} +1 -1
  79. package/dist/chunk-UOZX5W5T.js +3852 -0
  80. package/dist/{chunk-FFJ5TDRD.js → chunk-VHBBV5DH.js} +10 -3
  81. package/dist/{chunk-ZRHO6YMM.js → chunk-WHMFW5ET.js} +4 -4
  82. package/dist/{chunk-WTFUDNW2.js → chunk-WLHNIIXU.js} +3 -3
  83. package/dist/{chunk-ZOCHDXDG.js → chunk-Y2M6XSNK.js} +1 -1
  84. package/dist/{chunk-2XA7KXQO.js → chunk-YNH6ERDL.js} +2 -2
  85. package/dist/{chunk-JB6ARMQS.js → chunk-YQICCAVA.js} +1 -1
  86. package/dist/{chunk-7MB2ZAQF.js → chunk-YRAJDFIN.js} +1 -1
  87. package/dist/{chunk-IWTNTUPQ.js → chunk-Z5233OAN.js} +11 -13
  88. package/dist/{chunk-TE427YID.js → chunk-ZKBW7NU2.js} +2 -2
  89. package/dist/{chunk-4KKKBEP3.js → chunk-ZVBEGBII.js} +3 -3
  90. package/dist/{clean-HGASSMWI.js → clean-IM2JIAUT.js} +18 -18
  91. package/dist/cli.js +53 -53
  92. package/dist/{cloud-JPDVNXHN.js → cloud-6IPBCJSX.js} +4 -4
  93. package/dist/{cloudrun-AMMGSDRP.js → cloudrun-MWZ6S2I2.js} +7 -7
  94. package/dist/commands/contrast-audit.browser.js +1 -2
  95. package/dist/commands/layout-audit.browser.js +196 -0
  96. package/dist/{compare-LHHVHUN3.js → compare-WD7A2TV5.js} +28 -28
  97. package/dist/{compiler-Q3N6QXMT.js → compiler-2EKSMC3I.js} +6 -6
  98. package/dist/{component-D72J32Q7.js → component-JKALWH36.js} +3 -3
  99. package/dist/{compositions-UQRJ5ROG.js → compositions-643NAG4A.js} +13 -13
  100. package/dist/{delete-P42VIDDA.js → delete-EASPXKHQ.js} +2 -2
  101. package/dist/{deploy-WZTH57O4.js → deploy-CDKCQ5MX.js} +1 -1
  102. package/dist/{deterministicFonts-VQ5UBMXY.js → deterministicFonts-EGAAE7QL.js} +3 -3
  103. package/dist/{dist-DYS24AMA.js → dist-F6FOKRSU.js} +10 -4
  104. package/dist/{dist-SENYPQGW.js → dist-LM7AVHOU.js} +3 -3
  105. package/dist/docs/data-attributes.md +1 -1
  106. package/dist/{doctor-KEJIG2SK.js → doctor-7XUVYDJQ.js} +13 -13
  107. package/dist/{events-CYKSNR7N.js → events-5TTPYBKG.js} +3 -3
  108. package/dist/{events-UZXFQPMT.js → events-TULV6D3G.js} +3 -3
  109. package/dist/{feedback-LXNQF7CA.js → feedback-4FTPWM6P.js} +8 -8
  110. package/dist/{ffmpeg-BYHON577.js → ffmpeg-MP7ZVYLZ.js} +9 -9
  111. package/dist/{figma-EIQ35PS6.js → figma-B7LFWYKO.js} +3 -3
  112. package/dist/fontLocalizeCli.js +12 -12
  113. package/dist/{get-CC2YL7QO.js → get-F7W4AQ2V.js} +2 -2
  114. package/dist/{gpuPolicy-VFSACUQV.js → gpuPolicy-NSNVDFXC.js} +9 -9
  115. package/dist/{grade-compare-TUQL7IV2.js → grade-compare-6QXDTLS2.js} +29 -29
  116. package/dist/{gsapParserAcorn-7NCK2LVT.js → gsapParserAcorn-SKODXC2N.js} +2 -2
  117. package/dist/{help-ROROO5K6.js → help-RJAA4O74.js} +1 -1
  118. package/dist/{history-PNELYLXX.js → history-OOQBDVV5.js} +6 -6
  119. package/dist/hyperframe.manifest.json +1 -1
  120. package/dist/hyperframe.runtime.iife.js +67 -67
  121. package/dist/hyperframes-player.global.js +1 -1
  122. package/dist/{info-4FZTH6AS.js → info-5OGGYYLO.js} +9 -9
  123. package/dist/{init-I43GHHVP.js → init-DM3TJKW2.js} +68 -50
  124. package/dist/{inspect-IT4TYIZ3.js → inspect-FECQCLS5.js} +29 -29
  125. package/dist/{installer-CWOJVK5K.js → installer-WOG4VORV.js} +7 -7
  126. package/dist/{keyframes-3FBOGVD4.js → keyframes-SZHWUF5Y.js} +7 -7
  127. package/dist/{lambda-H3V32I7M.js → lambda-JG2ZRGMC.js} +9 -9
  128. package/dist/{layout-BZ5LYJ5C.js → layout-7ACF7ZKC.js} +29 -29
  129. package/dist/{lint-ZTNSGP2S.js → lint-ZCQGMILV.js} +9 -9
  130. package/dist/{lintProject-C2ONSH2U.js → lintProject-JATQKR64.js} +3 -3
  131. package/dist/{list-XM4GWJYY.js → list-MH2X3Y2T.js} +2 -2
  132. package/dist/{login-H6HYKMWX.js → login-CK46WX5U.js} +4 -4
  133. package/dist/{manager-TWVDSJXO.js → manager-GXTPNJVW.js} +10 -10
  134. package/dist/{media-treatment-N7MY5NXB.js → media-treatment-EH2AT34Z.js} +15 -15
  135. package/dist/{models-WEMIMYBD.js → models-D5XP2UK6.js} +13 -13
  136. package/dist/{motionShot-RHICTVPU.js → motionShot-UR7D3SRQ.js} +16 -16
  137. package/dist/{normalize-4UDISLPL.js → normalize-3AYFSN2F.js} +1 -1
  138. package/dist/{normalize-audio-ZFUZCJE3.js → normalize-audio-635JOR5W.js} +4 -4
  139. package/dist/{open-IBJ4FL3G.js → open-6WE5WFVM.js} +14 -14
  140. package/dist/{parakeetRunner-XXO4WSLR.js → parakeetRunner-STHZPG32.js} +14 -14
  141. package/dist/{pipeline-6ML3LUVK.js → pipeline-LVEKRETU.js} +10 -10
  142. package/dist/{play-RV4NAVF5.js → play-W6TDW4FE.js} +21 -21
  143. package/dist/{preflight-R3DEFMLA.js → preflight-LIMQXLR7.js} +10 -10
  144. package/dist/{present-5TBJGE6B.js → present-RX5QX6UR.js} +17 -17
  145. package/dist/{preview-FLKZ5CXJ.js → preview-KIWTWK63.js} +20 -20
  146. package/dist/{producer-7XYSPVKH.js → producer-TSNKSCUM.js} +1 -1
  147. package/dist/{projectConfig-TBU2VWZX.js → projectConfig-NCP7JRH4.js} +9 -9
  148. package/dist/{publication-CWWUJYJ5.js → publication-5W5UZWGC.js} +4 -4
  149. package/dist/{publish-FSNE4FEB.js → publish-7WR4XJ6I.js} +11 -11
  150. package/dist/{remove-background-MDFWRWCT.js → remove-background-43JGBRWQ.js} +11 -11
  151. package/dist/{render-F4JQ553X.js → render-456HCO6O.js} +31 -31
  152. package/dist/{render-LWZKXCLY.js → render-7T44HIM6.js} +5 -5
  153. package/dist/{render-DBGQZAZT.js → render-WHMLYIOI.js} +18 -30
  154. package/dist/{render-batch-PU7NMLIJ.js → render-batch-LURBJTBV.js} +5 -5
  155. package/dist/renderSetupWorker.js +3 -3
  156. package/dist/{resolver-RUBGFXPC.js → resolver-MBIW4VC4.js} +6 -6
  157. package/dist/{sherpa-X2TBNO6P.js → sherpa-5J2AALED.js} +13 -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-WHKMWO2D.js → skills-UHOXOGGF.js} +20 -13
  262. package/dist/{skillsUpdateCheck-XQGZGJJG.js → skillsUpdateCheck-PDZIFUJE.js} +3 -3
  263. package/dist/{snapshot-M4NUUSNU.js → snapshot-PFV7ALLH.js} +462 -100
  264. package/dist/{src-4UYM2K3S.js → src-DCVSEODX.js} +8 -8
  265. package/dist/{src-6MSC62U2.js → src-XK5YIR6L.js} +11 -11
  266. package/dist/{staticProjectServer-ERDTFP45.js → staticProjectServer-4IE4G4JO.js} +17 -17
  267. package/dist/studio/assets/{hyperframes-player-DEncBxR7.js → hyperframes-player-B_skzvYC.js} +1 -1
  268. package/dist/studio/assets/{index-Cc22mgvY.js → index-CgLbvCUo.js} +1 -1
  269. package/dist/studio/assets/{index-BABXr78Q.js → index-Dn5FAk2e.js} +99 -99
  270. package/dist/studio/index.html +1 -1
  271. package/dist/{studio-api-SAKD3VKC.js → studio-api-JMWYU7KF.js} +11 -11
  272. package/dist/{studioServer-IRI7EVOM.js → studioServer-BWLSTGIG.js} +50 -49
  273. package/dist/{telemetry-F4XADVAF.js → telemetry-JCU3AV7W.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-5I444RRE.js → timeline-BCIFQYOM.js} +20 -19
  278. package/dist/{tokens-LRRYM35A.js → tokens-7IXKALMQ.js} +2 -2
  279. package/dist/{transcribe-44XDFNVU.js → transcribe-HW7HGJ4V.js} +19 -19
  280. package/dist/{transcribe-WHYHWAB2.js → transcribe-ZUQD3B32.js} +12 -12
  281. package/dist/{updateCheck-7CPH3CAZ.js → updateCheck-Z6LNEK7B.js} +2 -2
  282. package/dist/{upgrade-WW4GQ2RI.js → upgrade-JYH72JGL.js} +2 -2
  283. package/dist/{urlDownloader-OHLLP45A.js → urlDownloader-WKLFHSUH.js} +8 -8
  284. package/dist/{validate-VNCDH2LW.js → validate-QCC27YYI.js} +23 -23
  285. package/dist/{video-5OHTLL2D.js → video-EZ7ONY6L.js} +9 -9
  286. package/dist/warmCheck.js +36 -36
  287. package/package.json +1 -1
  288. package/dist/audio-KGK44XE4.js +0 -1153
  289. package/dist/chunk-R2SQBPMH.js +0 -3805
  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>