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/capsule/frame-showcase.html ADDED
@@ -0,0 +1,1465 @@
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>Capsule</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=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <style id="ds-tokens">
14
+ :root {
15
+ --cream: #f5f5f0;
16
+ --ink: #1a1a1a;
17
+ --outline: #1e1e1e;
18
+ --white: #ffffff;
19
+ --coral: #e85d4e;
20
+ --lime: #c4d94e;
21
+ --lavender: #c5b5e0;
22
+ --sky: #8bb4f7;
23
+ --violet: #a06ce8;
24
+ --yellow: #f2d160;
25
+ --peach: #f5b895;
26
+ --mint: #a8e6cf;
27
+ --shadow: rgba(26, 26, 26, 0.08);
28
+ --serif: "Bodoni Moda", serif;
29
+ --sans: "Space Grotesk", sans-serif;
30
+ }
31
+ * {
32
+ margin: 0;
33
+ padding: 0;
34
+ box-sizing: border-box;
35
+ }
36
+ html {
37
+ background: #0e0e0c;
38
+ }
39
+ body {
40
+ background: var(--cream);
41
+ background-image:
42
+ radial-gradient(ellipse at 12% 8%, rgba(229, 93, 78, 0.1), transparent 45%),
43
+ radial-gradient(ellipse at 88% 22%, rgba(139, 180, 247, 0.12), transparent 42%),
44
+ radial-gradient(ellipse at 70% 95%, rgba(196, 217, 78, 0.1), transparent 45%);
45
+ color: var(--ink);
46
+ font-family: var(--sans);
47
+ -webkit-font-smoothing: antialiased;
48
+ }
49
+ .serif {
50
+ font-family: var(--serif);
51
+ color: var(--ink);
52
+ }
53
+ .eyebrow {
54
+ font-family: var(--sans);
55
+ font-weight: 600;
56
+ text-transform: uppercase;
57
+ letter-spacing: 0.12em;
58
+ font-size: 12px;
59
+ }
60
+ .pill {
61
+ border-radius: 9999px;
62
+ border: 2px solid var(--outline);
63
+ font-family: var(--sans);
64
+ font-weight: 600;
65
+ white-space: nowrap;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ }
69
+
70
+ section {
71
+ padding: 120px 100px;
72
+ position: relative;
73
+ }
74
+ .sec-head {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 20px;
78
+ margin-bottom: 64px;
79
+ }
80
+ .sec-head .tagpill {
81
+ background: var(--lavender);
82
+ padding: 0.5rem 1.4rem;
83
+ font-size: 13px;
84
+ text-transform: uppercase;
85
+ letter-spacing: 0.1em;
86
+ font-weight: 600;
87
+ }
88
+ .sec-head h2 {
89
+ font-family: var(--serif);
90
+ font-weight: 700;
91
+ font-size: 52px;
92
+ line-height: 1;
93
+ letter-spacing: -0.02em;
94
+ }
95
+ .sec-head .sp {
96
+ flex: 1;
97
+ height: 2px;
98
+ background: var(--outline);
99
+ border-radius: 9999px;
100
+ opacity: 0.15;
101
+ }
102
+
103
+ /* COVER */
104
+ .cover {
105
+ min-height: 100vh;
106
+ padding: 0;
107
+ display: flex;
108
+ flex-direction: column;
109
+ justify-content: center;
110
+ align-items: center;
111
+ text-align: center;
112
+ position: relative;
113
+ overflow: hidden;
114
+ }
115
+ .cover .titlepill {
116
+ background: var(--yellow);
117
+ border: 2px solid var(--outline);
118
+ border-radius: 9999px;
119
+ padding: 1rem 2.6rem;
120
+ font-family: var(--sans);
121
+ font-weight: 600;
122
+ text-transform: uppercase;
123
+ letter-spacing: 0.14em;
124
+ font-size: 15px;
125
+ box-shadow: 6px 6px 0 var(--shadow);
126
+ margin-bottom: 40px;
127
+ position: relative;
128
+ z-index: 3;
129
+ white-space: nowrap;
130
+ }
131
+ .cover h1 {
132
+ font-family: var(--serif);
133
+ font-weight: 800;
134
+ font-size: clamp(72px, 13vw, 200px);
135
+ line-height: 0.88;
136
+ letter-spacing: -0.03em;
137
+ position: relative;
138
+ z-index: 3;
139
+ }
140
+ .cover h1 em {
141
+ font-style: italic;
142
+ color: var(--coral);
143
+ }
144
+ .cover .sub {
145
+ font-family: var(--sans);
146
+ font-weight: 400;
147
+ text-transform: uppercase;
148
+ letter-spacing: 0.18em;
149
+ font-size: 15px;
150
+ color: rgba(26, 26, 26, 0.6);
151
+ margin-top: 32px;
152
+ position: relative;
153
+ z-index: 3;
154
+ }
155
+ .cover .accent-line {
156
+ width: 80px;
157
+ height: 4px;
158
+ background: var(--coral);
159
+ border-radius: 9999px;
160
+ margin: 36px auto 0;
161
+ position: relative;
162
+ z-index: 3;
163
+ }
164
+ /* floating pills */
165
+ .fp {
166
+ position: absolute;
167
+ border: 2px solid var(--outline);
168
+ border-radius: 9999px;
169
+ font-family: var(--sans);
170
+ font-weight: 600;
171
+ text-transform: uppercase;
172
+ letter-spacing: 0.08em;
173
+ font-size: 13px;
174
+ padding: 0.5rem 1.2rem;
175
+ z-index: 1;
176
+ }
177
+ .fp.circ {
178
+ border-radius: 50%;
179
+ width: 84px;
180
+ height: 84px;
181
+ display: grid;
182
+ place-items: center;
183
+ padding: 0;
184
+ }
185
+
186
+ /* PALETTE */
187
+ .swatches {
188
+ display: grid;
189
+ grid-template-columns: repeat(4, 1fr);
190
+ gap: 24px;
191
+ }
192
+ .sw {
193
+ background: var(--white);
194
+ border: 2px solid var(--outline);
195
+ border-radius: 1.5rem;
196
+ overflow: hidden;
197
+ box-shadow: 6px 6px 0 var(--shadow);
198
+ }
199
+ .sw .chip {
200
+ height: 96px;
201
+ margin: 0;
202
+ }
203
+ .sw .meta {
204
+ padding: 16px 20px;
205
+ }
206
+ .sw .name {
207
+ font-family: var(--serif);
208
+ font-weight: 700;
209
+ font-size: 20px;
210
+ }
211
+ .sw .hex {
212
+ font-family: var(--sans);
213
+ font-size: 12px;
214
+ letter-spacing: 0.04em;
215
+ color: rgba(26, 26, 26, 0.55);
216
+ margin-top: 4px;
217
+ }
218
+
219
+ /* TYPE */
220
+ .type-row {
221
+ display: grid;
222
+ grid-template-columns: 240px 1fr;
223
+ align-items: center;
224
+ padding: 24px 0;
225
+ border-bottom: 2px solid rgba(30, 30, 30, 0.1);
226
+ }
227
+ .type-row .tok {
228
+ font-family: var(--sans);
229
+ font-weight: 600;
230
+ text-transform: uppercase;
231
+ letter-spacing: 0.1em;
232
+ font-size: 12px;
233
+ }
234
+ .type-row .m {
235
+ font-size: 12px;
236
+ color: rgba(26, 26, 26, 0.55);
237
+ margin-top: 8px;
238
+ line-height: 1.5;
239
+ }
240
+ .type-row .spec {
241
+ overflow: hidden;
242
+ }
243
+
244
+ /* COMPONENTS */
245
+ .cnote {
246
+ font-family: var(--sans);
247
+ font-weight: 600;
248
+ text-transform: uppercase;
249
+ letter-spacing: 0.1em;
250
+ font-size: 12px;
251
+ color: rgba(26, 26, 26, 0.55);
252
+ margin-bottom: 22px;
253
+ }
254
+ .cgrid {
255
+ display: grid;
256
+ grid-template-columns: repeat(12, 1fr);
257
+ gap: 32px;
258
+ margin-bottom: 56px;
259
+ }
260
+ .s3 {
261
+ grid-column: span 3;
262
+ }
263
+ .s4 {
264
+ grid-column: span 4;
265
+ }
266
+ .s6 {
267
+ grid-column: span 6;
268
+ }
269
+ .p-card {
270
+ background: var(--white);
271
+ border: 2px solid var(--outline);
272
+ border-radius: 2rem;
273
+ padding: 2.2rem 1.8rem;
274
+ box-shadow: 8px 8px 0 var(--shadow);
275
+ height: 100%;
276
+ }
277
+ .p-card .ic {
278
+ width: 60px;
279
+ height: 60px;
280
+ border-radius: 50%;
281
+ border: 2px solid var(--outline);
282
+ display: grid;
283
+ place-items: center;
284
+ font-family: var(--serif);
285
+ font-weight: 700;
286
+ font-size: 24px;
287
+ margin-bottom: 22px;
288
+ }
289
+ .p-card .t {
290
+ font-family: var(--serif);
291
+ font-weight: 700;
292
+ font-size: 24px;
293
+ line-height: 1.1;
294
+ }
295
+ .p-card .x {
296
+ font-size: 14px;
297
+ line-height: 1.6;
298
+ color: rgba(26, 26, 26, 0.65);
299
+ margin-top: 12px;
300
+ }
301
+ .stat-pill {
302
+ background: var(--white);
303
+ border: 2px solid var(--outline);
304
+ border-radius: 2rem;
305
+ padding: 2rem 1.5rem;
306
+ box-shadow: 6px 6px 0 var(--shadow);
307
+ text-align: left;
308
+ }
309
+ .stat-pill .n {
310
+ font-family: var(--serif);
311
+ font-weight: 800;
312
+ font-size: 48px;
313
+ line-height: 1;
314
+ letter-spacing: -0.03em;
315
+ }
316
+ .stat-pill .l {
317
+ font-family: var(--sans);
318
+ font-weight: 600;
319
+ text-transform: uppercase;
320
+ letter-spacing: 0.1em;
321
+ font-size: 11px;
322
+ color: rgba(26, 26, 26, 0.6);
323
+ margin-top: 12px;
324
+ }
325
+ .stat-pill .bar {
326
+ width: 40px;
327
+ height: 4px;
328
+ border-radius: 9999px;
329
+ margin-top: 16px;
330
+ }
331
+ .bartrack {
332
+ height: 36px;
333
+ background: var(--cream);
334
+ border: 2px solid var(--outline);
335
+ border-radius: 9999px;
336
+ overflow: hidden;
337
+ display: flex;
338
+ align-items: center;
339
+ margin-bottom: 16px;
340
+ }
341
+ .barfill {
342
+ height: 100%;
343
+ border-radius: 9999px;
344
+ border-right: 2px solid var(--outline);
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: flex-end;
348
+ padding-right: 14px;
349
+ font-family: var(--sans);
350
+ font-weight: 600;
351
+ font-size: 12px;
352
+ }
353
+ .chips {
354
+ display: flex;
355
+ gap: 12px;
356
+ flex-wrap: wrap;
357
+ }
358
+ .chip-pill {
359
+ border: 2px solid var(--outline);
360
+ border-radius: 9999px;
361
+ padding: 0.4rem 1.1rem;
362
+ font-family: var(--sans);
363
+ font-weight: 600;
364
+ text-transform: uppercase;
365
+ letter-spacing: 0.08em;
366
+ font-size: 12px;
367
+ }
368
+ .orbit {
369
+ position: relative;
370
+ height: 280px;
371
+ display: grid;
372
+ place-items: center;
373
+ }
374
+ .orbit .center {
375
+ width: 140px;
376
+ height: 140px;
377
+ border-radius: 50%;
378
+ background: var(--lime);
379
+ border: 2px solid var(--outline);
380
+ display: grid;
381
+ place-items: center;
382
+ font-family: var(--serif);
383
+ font-weight: 700;
384
+ font-size: 40px;
385
+ }
386
+ .orbit .sat {
387
+ position: absolute;
388
+ border: 2px solid var(--outline);
389
+ border-radius: 9999px;
390
+ font-family: var(--sans);
391
+ font-weight: 600;
392
+ text-transform: uppercase;
393
+ letter-spacing: 0.08em;
394
+ font-size: 12px;
395
+ padding: 0.4rem 1rem;
396
+ box-shadow: 6px 6px 0 var(--shadow);
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(--sans);
411
+ font-weight: 600;
412
+ text-transform: uppercase;
413
+ letter-spacing: 0.1em;
414
+ font-size: 12px;
415
+ color: rgba(26, 26, 26, 0.55);
416
+ }
417
+ .fw .flabel b {
418
+ color: var(--ink);
419
+ }
420
+ .frame {
421
+ aspect-ratio: 16/9;
422
+ container-type: size;
423
+ position: relative;
424
+ overflow: hidden;
425
+ background: var(--cream);
426
+ background-image:
427
+ radial-gradient(ellipse at 15% 12%, rgba(229, 93, 78, 0.1), transparent 46%),
428
+ radial-gradient(ellipse at 85% 85%, rgba(139, 180, 247, 0.12), transparent 46%);
429
+ border: 2px solid var(--outline);
430
+ border-radius: 1.4rem;
431
+ }
432
+ .frame > .body {
433
+ position: absolute;
434
+ inset: 0;
435
+ z-index: 3;
436
+ }
437
+ .frame .ffp {
438
+ position: absolute;
439
+ border: 0.25cqw solid var(--outline);
440
+ border-radius: 9999px;
441
+ font-family: var(--sans);
442
+ font-weight: 600;
443
+ text-transform: uppercase;
444
+ letter-spacing: 0.05cqw;
445
+ font-size: 1cqw;
446
+ padding: 0.4cqw 1.1cqw;
447
+ z-index: 1;
448
+ }
449
+ .frame .ffp.circ {
450
+ border-radius: 50%;
451
+ width: 6cqw;
452
+ height: 6cqw;
453
+ display: grid;
454
+ place-items: center;
455
+ padding: 0;
456
+ }
457
+
458
+ /* f1 cover */
459
+ .qf1 .body {
460
+ display: flex;
461
+ flex-direction: column;
462
+ justify-content: center;
463
+ align-items: center;
464
+ text-align: center;
465
+ }
466
+ .qf1 .tp {
467
+ background: var(--yellow);
468
+ border: 0.25cqw solid var(--outline);
469
+ border-radius: 9999px;
470
+ padding: 0.8cqw 2.2cqw;
471
+ font-family: var(--sans);
472
+ font-weight: 600;
473
+ text-transform: uppercase;
474
+ letter-spacing: 0.2cqw;
475
+ font-size: 1.1cqw;
476
+ box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
477
+ margin-bottom: 3cqw;
478
+ z-index: 3;
479
+ }
480
+ .qf1 h3 {
481
+ font-family: var(--serif);
482
+ font-weight: 800;
483
+ font-size: 12cqw;
484
+ line-height: 0.88;
485
+ letter-spacing: -0.3cqw;
486
+ z-index: 3;
487
+ }
488
+ .qf1 h3 em {
489
+ font-style: italic;
490
+ color: var(--coral);
491
+ }
492
+ .qf1 .al {
493
+ width: 6cqw;
494
+ height: 0.3cqw;
495
+ background: var(--coral);
496
+ border-radius: 9999px;
497
+ margin-top: 2.4cqw;
498
+ z-index: 3;
499
+ }
500
+
501
+ /* f2 pillar cards (catalog) */
502
+ .qf2 .body {
503
+ display: flex;
504
+ flex-direction: column;
505
+ justify-content: center;
506
+ padding: 0 5cqw;
507
+ }
508
+ .qf2 .tp {
509
+ align-self: flex-start;
510
+ background: var(--lavender);
511
+ border: 0.2cqw solid var(--outline);
512
+ border-radius: 9999px;
513
+ padding: 0.5cqw 1.4cqw;
514
+ font-family: var(--sans);
515
+ font-weight: 600;
516
+ text-transform: uppercase;
517
+ letter-spacing: 0.15cqw;
518
+ font-size: 0.9cqw;
519
+ margin-bottom: 1.6cqw;
520
+ }
521
+ .qf2 h3 {
522
+ font-family: var(--serif);
523
+ font-weight: 700;
524
+ font-size: 4cqw;
525
+ line-height: 1;
526
+ letter-spacing: -0.05cqw;
527
+ margin-bottom: 2.4cqw;
528
+ }
529
+ .qf2 .row {
530
+ display: grid;
531
+ grid-template-columns: repeat(3, 1fr);
532
+ gap: 2cqw;
533
+ }
534
+ .qf2 .c {
535
+ background: var(--white);
536
+ border: 0.2cqw solid var(--outline);
537
+ border-radius: 1.6cqw;
538
+ padding: 2cqw 1.6cqw;
539
+ box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
540
+ }
541
+ .qf2 .c .ic {
542
+ width: 4cqw;
543
+ height: 4cqw;
544
+ border-radius: 50%;
545
+ border: 0.2cqw solid var(--outline);
546
+ display: grid;
547
+ place-items: center;
548
+ font-family: var(--serif);
549
+ font-weight: 700;
550
+ font-size: 1.6cqw;
551
+ margin-bottom: 1.4cqw;
552
+ }
553
+ .qf2 .c .t {
554
+ font-family: var(--serif);
555
+ font-weight: 700;
556
+ font-size: 1.9cqw;
557
+ line-height: 1.1;
558
+ }
559
+ .qf2 .c .x {
560
+ font-size: 1cqw;
561
+ line-height: 1.5;
562
+ color: rgba(26, 26, 26, 0.65);
563
+ margin-top: 0.8cqw;
564
+ }
565
+
566
+ /* f3 quote */
567
+ .qf3 .body {
568
+ display: flex;
569
+ flex-direction: column;
570
+ justify-content: center;
571
+ padding: 0 8cqw;
572
+ }
573
+ .qf3 .q {
574
+ font-family: var(--serif);
575
+ font-weight: 600;
576
+ font-size: 4.2cqw;
577
+ line-height: 1.3;
578
+ letter-spacing: -0.03cqw;
579
+ }
580
+ .qf3 .q .hl {
581
+ display: inline-flex;
582
+ align-items: center;
583
+ background: var(--lime);
584
+ border: 0.2cqw solid var(--outline);
585
+ border-radius: 9999px;
586
+ padding: 0 1.2cqw;
587
+ font-family: var(--sans);
588
+ font-weight: 600;
589
+ font-size: 3cqw;
590
+ text-transform: none;
591
+ }
592
+ .qf3 .at {
593
+ font-family: var(--sans);
594
+ font-weight: 600;
595
+ text-transform: uppercase;
596
+ letter-spacing: 0.2cqw;
597
+ font-size: 1cqw;
598
+ color: rgba(26, 26, 26, 0.6);
599
+ margin-top: 2.4cqw;
600
+ }
601
+
602
+ /* f4 closing */
603
+ .qf4 .body {
604
+ display: flex;
605
+ flex-direction: column;
606
+ justify-content: center;
607
+ align-items: center;
608
+ text-align: center;
609
+ }
610
+ .qf4 .tp {
611
+ background: var(--yellow);
612
+ border: 0.25cqw solid var(--outline);
613
+ border-radius: 9999px;
614
+ padding: 0.7cqw 2cqw;
615
+ font-family: var(--sans);
616
+ font-weight: 600;
617
+ text-transform: uppercase;
618
+ letter-spacing: 0.2cqw;
619
+ font-size: 1cqw;
620
+ box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
621
+ margin-bottom: 2.6cqw;
622
+ z-index: 3;
623
+ }
624
+ .qf4 h3 {
625
+ font-family: var(--serif);
626
+ font-weight: 800;
627
+ font-size: 8.5cqw;
628
+ line-height: 0.92;
629
+ letter-spacing: -0.2cqw;
630
+ z-index: 3;
631
+ }
632
+ .qf4 h3 em {
633
+ font-style: italic;
634
+ color: var(--violet);
635
+ }
636
+ .qf4 .al {
637
+ width: 5cqw;
638
+ height: 0.3cqw;
639
+ background: var(--coral);
640
+ border-radius: 9999px;
641
+ margin-top: 2.4cqw;
642
+ z-index: 3;
643
+ }
644
+
645
+ /* PRINCIPLES */
646
+ .dos {
647
+ display: grid;
648
+ grid-template-columns: 1fr 1fr;
649
+ gap: 32px;
650
+ }
651
+ .do-card {
652
+ background: var(--white);
653
+ border: 2px solid var(--outline);
654
+ border-radius: 2rem;
655
+ padding: 36px;
656
+ box-shadow: 8px 8px 0 var(--shadow);
657
+ }
658
+ .do-card h4 {
659
+ font-family: var(--serif);
660
+ font-weight: 700;
661
+ font-size: 30px;
662
+ margin-bottom: 22px;
663
+ }
664
+ .do-card .hpill {
665
+ display: inline-block;
666
+ border-radius: 9999px;
667
+ border: 2px solid var(--outline);
668
+ padding: 0.3rem 1rem;
669
+ font-family: var(--sans);
670
+ font-weight: 600;
671
+ text-transform: uppercase;
672
+ letter-spacing: 0.1em;
673
+ font-size: 11px;
674
+ margin-bottom: 20px;
675
+ }
676
+ .do-card ul {
677
+ list-style: none;
678
+ }
679
+ .do-card li {
680
+ font-size: 14px;
681
+ line-height: 1.6;
682
+ padding-left: 24px;
683
+ position: relative;
684
+ margin-bottom: 13px;
685
+ color: rgba(26, 26, 26, 0.75);
686
+ }
687
+ .do-card li::before {
688
+ position: absolute;
689
+ left: 0;
690
+ font-family: var(--serif);
691
+ font-weight: 700;
692
+ }
693
+ .do-card.do li::before {
694
+ content: "+";
695
+ color: var(--coral);
696
+ }
697
+ .do-card.dont li::before {
698
+ content: "\00d7";
699
+ color: var(--violet);
700
+ }
701
+
702
+ .foot {
703
+ padding: 56px 100px;
704
+ display: flex;
705
+ justify-content: space-between;
706
+ align-items: center;
707
+ border-top: 2px solid rgba(30, 30, 30, 0.12);
708
+ }
709
+ .foot .l {
710
+ font-family: var(--serif);
711
+ font-weight: 800;
712
+ font-size: 28px;
713
+ }
714
+ .foot .r {
715
+ font-family: var(--sans);
716
+ font-weight: 600;
717
+ text-transform: uppercase;
718
+ letter-spacing: 0.12em;
719
+ font-size: 11px;
720
+ color: rgba(26, 26, 26, 0.5);
721
+ }
722
+ @media (max-width: 1100px) {
723
+ .gallery {
724
+ grid-template-columns: 1fr;
725
+ }
726
+ .swatches {
727
+ grid-template-columns: 1fr 1fr;
728
+ }
729
+ }
730
+ </style>
731
+ <link
732
+ rel="stylesheet"
733
+ href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;0,800;1,400&display=swap"
734
+ />
735
+ <link
736
+ rel="stylesheet"
737
+ href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap"
738
+ />
739
+ <style id="ft-override">
740
+ :root {
741
+ --primary: #f5f5f0 !important;
742
+ --secondary: #1a1a1a !important;
743
+ --tertiary: #c4d94e !important;
744
+ --accent: #e85d4e !important;
745
+ --f-disp: "Bodoni Moda", sans-serif !important;
746
+ --f-body: "Space Grotesk", sans-serif !important;
747
+ --cream: #f5f5f0 !important;
748
+ --ink: #1a1a1a !important;
749
+ --coral: #e85d4e !important;
750
+ --lime: #c4d94e !important;
751
+ --serif: "Bodoni Moda", sans-serif !important;
752
+ --sans: "Space Grotesk", sans-serif !important;
753
+ --outline: #1e1e1e !important;
754
+ --white: #ffffff !important;
755
+ --lavender: #c5b5e0 !important;
756
+ --sky: #8bb4f7 !important;
757
+ --violet: #a06ce8 !important;
758
+ --yellow: #f2d160 !important;
759
+ --peach: #f5b895 !important;
760
+ --mint: #a8e6cf !important;
761
+ --shadow: rgba(26, 26, 26, 0.08) !important;
762
+ }
763
+ </style>
764
+ </head>
765
+ <body>
766
+ <!-- COVER -->
767
+ <section class="cover">
768
+ <span
769
+ class="fp"
770
+ style="background: var(--coral); top: 14%; left: 8%; transform: rotate(-12deg)"
771
+ >Editorial</span
772
+ >
773
+ <span class="fp" style="background: var(--sky); top: 24%; right: 10%; transform: rotate(9deg)"
774
+ >Playful</span
775
+ >
776
+ <span
777
+ class="fp circ"
778
+ style="background: var(--peach); top: 60%; left: 6%; transform: rotate(-6deg)"
779
+ >★</span
780
+ >
781
+ <span
782
+ class="fp"
783
+ style="background: var(--mint); bottom: 16%; right: 8%; transform: rotate(-14deg)"
784
+ >Memphis</span
785
+ >
786
+ <span
787
+ class="fp"
788
+ style="background: var(--lavender); bottom: 24%; left: 13%; transform: rotate(7deg)"
789
+ >Candy</span
790
+ >
791
+ <span
792
+ class="fp circ"
793
+ style="background: var(--lime); top: 18%; right: 24%; transform: rotate(10deg)"
794
+ >+</span
795
+ >
796
+ <div class="titlepill">Frame System · Vol. 01</div>
797
+ <h1>Everything's<br />a <em>capsule.</em></h1>
798
+ <div class="sub">Bodoni Moda · Space Grotesk · Nine Candy Accents</div>
799
+ <div class="accent-line"></div>
800
+ </section>
801
+
802
+ <!-- PALETTE -->
803
+ <section>
804
+ <div class="sec-head">
805
+ <span class="tagpill">Palette</span>
806
+ <h2>Nine Candy Accents</h2>
807
+ <span class="sp"></span>
808
+ </div>
809
+ <div class="swatches">
810
+ <div class="sw">
811
+ <div class="chip" style="background: var(--coral)"></div>
812
+ <div class="meta">
813
+ <div class="name">Coral</div>
814
+ <div class="hex">#E85D4E</div>
815
+ </div>
816
+ </div>
817
+ <div class="sw">
818
+ <div class="chip" style="background: var(--lime)"></div>
819
+ <div class="meta">
820
+ <div class="name">Lime</div>
821
+ <div class="hex">#C4D94E</div>
822
+ </div>
823
+ </div>
824
+ <div class="sw">
825
+ <div class="chip" style="background: var(--lavender)"></div>
826
+ <div class="meta">
827
+ <div class="name">Lavender</div>
828
+ <div class="hex">#C5B5E0</div>
829
+ </div>
830
+ </div>
831
+ <div class="sw">
832
+ <div class="chip" style="background: var(--sky)"></div>
833
+ <div class="meta">
834
+ <div class="name">Sky</div>
835
+ <div class="hex">#8BB4F7</div>
836
+ </div>
837
+ </div>
838
+ <div class="sw">
839
+ <div class="chip" style="background: var(--violet)"></div>
840
+ <div class="meta">
841
+ <div class="name">Violet</div>
842
+ <div class="hex">#A06CE8</div>
843
+ </div>
844
+ </div>
845
+ <div class="sw">
846
+ <div class="chip" style="background: var(--yellow)"></div>
847
+ <div class="meta">
848
+ <div class="name">Yellow</div>
849
+ <div class="hex">#F2D160</div>
850
+ </div>
851
+ </div>
852
+ <div class="sw">
853
+ <div class="chip" style="background: var(--peach)"></div>
854
+ <div class="meta">
855
+ <div class="name">Peach</div>
856
+ <div class="hex">#F5B895</div>
857
+ </div>
858
+ </div>
859
+ <div class="sw">
860
+ <div class="chip" style="background: var(--mint)"></div>
861
+ <div class="meta">
862
+ <div class="name">Mint</div>
863
+ <div class="hex">#A8E6CF</div>
864
+ </div>
865
+ </div>
866
+ <div class="sw">
867
+ <div
868
+ class="chip"
869
+ style="background: var(--cream); border-bottom: 2px solid var(--outline)"
870
+ ></div>
871
+ <div class="meta">
872
+ <div class="name">Cream</div>
873
+ <div class="hex">#F5F5F0 · canvas</div>
874
+ </div>
875
+ </div>
876
+ <div class="sw">
877
+ <div class="chip" style="background: var(--ink)"></div>
878
+ <div class="meta">
879
+ <div class="name">Ink / Outline</div>
880
+ <div class="hex">#1A1A1A · #1E1E1E</div>
881
+ </div>
882
+ </div>
883
+ </div>
884
+ </section>
885
+
886
+ <!-- TYPOGRAPHY -->
887
+ <section>
888
+ <div class="sec-head">
889
+ <span class="tagpill" style="background: var(--mint)">Type</span>
890
+ <h2>Bodoni × Grotesk</h2>
891
+ <span class="sp"></span>
892
+ </div>
893
+ <div class="type-row">
894
+ <div>
895
+ <div class="tok">display</div>
896
+ <div class="m">Bodoni Moda 800 · sentence case · −0.02em</div>
897
+ </div>
898
+ <div class="spec">
899
+ <span
900
+ class="serif"
901
+ style="font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -0.02em"
902
+ >Inflated.</span
903
+ >
904
+ </div>
905
+ </div>
906
+ <div class="type-row">
907
+ <div>
908
+ <div class="tok">headline</div>
909
+ <div class="m">Bodoni Moda 700 · ink, never colored</div>
910
+ </div>
911
+ <div class="spec">
912
+ <span class="serif" style="font-weight: 700; font-size: 54px">A friendly pill</span>
913
+ </div>
914
+ </div>
915
+ <div class="type-row">
916
+ <div>
917
+ <div class="tok">stat-number</div>
918
+ <div class="m">Bodoni Moda 800 · color allowed here</div>
919
+ </div>
920
+ <div class="spec">
921
+ <span
922
+ class="serif"
923
+ style="font-weight: 800; font-size: 64px; color: var(--coral); letter-spacing: -0.03em"
924
+ >240%</span
925
+ >
926
+ </div>
927
+ </div>
928
+ <div class="type-row">
929
+ <div>
930
+ <div class="tok">body</div>
931
+ <div class="m">Space Grotesk 400 · ink 65%</div>
932
+ </div>
933
+ <div class="spec">
934
+ <p
935
+ style="
936
+ font-size: 17px;
937
+ line-height: 1.6;
938
+ max-width: 680px;
939
+ color: rgba(26, 26, 26, 0.7);
940
+ "
941
+ >
942
+ Space Grotesk carries every paragraph and label — the clean grotesque against Bodoni's
943
+ glamour.
944
+ </p>
945
+ </div>
946
+ </div>
947
+ <div class="type-row" style="border-bottom: 0">
948
+ <div>
949
+ <div class="tok">pill-text</div>
950
+ <div class="m">Space Grotesk 600 · uppercase · 0.12em</div>
951
+ </div>
952
+ <div class="spec">
953
+ <span
954
+ class="pill"
955
+ style="
956
+ background: var(--yellow);
957
+ padding: 0.5rem 1.4rem;
958
+ text-transform: uppercase;
959
+ letter-spacing: 0.12em;
960
+ font-size: 14px;
961
+ "
962
+ >Featured</span
963
+ >
964
+ </div>
965
+ </div>
966
+ </section>
967
+
968
+ <!-- COMPONENTS -->
969
+ <section>
970
+ <div class="sec-head">
971
+ <span class="tagpill" style="background: var(--sky)">Components</span>
972
+ <h2>Pills, All the Way Down</h2>
973
+ <span class="sp"></span>
974
+ </div>
975
+
976
+ <div class="cgrid">
977
+ <div class="s4">
978
+ <div class="cnote">Pillar card</div>
979
+ <div class="p-card">
980
+ <div class="ic" style="background: var(--coral)">I</div>
981
+ <div class="t">Pill Geometry</div>
982
+ <div class="x">Every container is a pill — 9999px small, 2rem for cards.</div>
983
+ </div>
984
+ </div>
985
+ <div class="s4">
986
+ <div class="cnote">Stat pills</div>
987
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px">
988
+ <div class="stat-pill">
989
+ <div class="n" style="color: var(--coral)">9</div>
990
+ <div class="l">Accents</div>
991
+ <div class="bar" style="background: var(--coral)"></div>
992
+ </div>
993
+ <div class="stat-pill">
994
+ <div class="n" style="color: var(--sky)">2px</div>
995
+ <div class="l">Outline</div>
996
+ <div class="bar" style="background: var(--sky)"></div>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+ <div class="s4">
1001
+ <div class="cnote">Bar tracks + chips</div>
1002
+ <div class="bartrack">
1003
+ <div class="barfill" style="width: 78%; background: var(--lime)">78</div>
1004
+ </div>
1005
+ <div class="bartrack">
1006
+ <div class="barfill" style="width: 54%; background: var(--violet); color: var(--white)">
1007
+ 54
1008
+ </div>
1009
+ </div>
1010
+ <div class="chips">
1011
+ <span class="chip-pill" style="background: var(--peach)">Soft</span
1012
+ ><span class="chip-pill" style="background: var(--lavender)">Lifted</span
1013
+ ><span class="chip-pill" style="background: var(--mint)">Friendly</span>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+
1018
+ <div class="cgrid" style="margin-bottom: 0">
1019
+ <div class="s6">
1020
+ <div class="cnote">Orbit composition</div>
1021
+ <div class="orbit">
1022
+ <div class="center">01</div>
1023
+ <span
1024
+ class="sat"
1025
+ style="background: var(--coral); top: 14%; left: 18%; transform: rotate(-10deg)"
1026
+ >Vision</span
1027
+ >
1028
+ <span
1029
+ class="sat"
1030
+ style="background: var(--sky); top: 20%; right: 16%; transform: rotate(8deg)"
1031
+ >Future</span
1032
+ >
1033
+ <span
1034
+ class="sat"
1035
+ style="background: var(--yellow); bottom: 16%; left: 24%; transform: rotate(6deg)"
1036
+ >Next</span
1037
+ >
1038
+ <span
1039
+ class="sat"
1040
+ style="background: var(--mint); bottom: 20%; right: 20%; transform: rotate(-7deg)"
1041
+ >Now</span
1042
+ >
1043
+ </div>
1044
+ </div>
1045
+ <div class="s6">
1046
+ <div class="cnote">Diagram nodes + connectors</div>
1047
+ <div
1048
+ style="display: flex; align-items: center; gap: 0; margin-top: 40px; flex-wrap: wrap"
1049
+ >
1050
+ <span
1051
+ class="pill"
1052
+ style="
1053
+ background: var(--white);
1054
+ padding: 1rem 2rem;
1055
+ box-shadow: 6px 6px 0 var(--shadow);
1056
+ font-family: var(--serif);
1057
+ font-weight: 700;
1058
+ "
1059
+ >Draft</span
1060
+ >
1061
+ <span
1062
+ style="
1063
+ width: 50px;
1064
+ height: 4px;
1065
+ background: var(--outline);
1066
+ position: relative;
1067
+ display: inline-block;
1068
+ "
1069
+ ></span>
1070
+ <span
1071
+ class="pill"
1072
+ style="
1073
+ background: var(--lavender);
1074
+ padding: 1rem 2rem;
1075
+ box-shadow: 6px 6px 0 var(--shadow);
1076
+ font-family: var(--serif);
1077
+ font-weight: 700;
1078
+ "
1079
+ >Shape</span
1080
+ >
1081
+ <span
1082
+ style="
1083
+ width: 50px;
1084
+ height: 4px;
1085
+ background: var(--outline);
1086
+ position: relative;
1087
+ display: inline-block;
1088
+ "
1089
+ ></span>
1090
+ <span
1091
+ class="pill"
1092
+ style="
1093
+ background: var(--lime);
1094
+ padding: 1rem 2rem;
1095
+ box-shadow: 6px 6px 0 var(--shadow);
1096
+ font-family: var(--serif);
1097
+ font-weight: 700;
1098
+ "
1099
+ >Ship</span
1100
+ >
1101
+ </div>
1102
+ <div style="margin-top: 40px" class="cnote">Card icons</div>
1103
+ <div style="display: flex; gap: 18px">
1104
+ <span
1105
+ style="
1106
+ width: 60px;
1107
+ height: 60px;
1108
+ border-radius: 50%;
1109
+ border: 2px solid var(--outline);
1110
+ background: var(--yellow);
1111
+ display: grid;
1112
+ place-items: center;
1113
+ font-family: var(--serif);
1114
+ font-weight: 700;
1115
+ font-size: 22px;
1116
+ "
1117
+ >II</span
1118
+ >
1119
+ <span
1120
+ style="
1121
+ width: 60px;
1122
+ height: 60px;
1123
+ border-radius: 50%;
1124
+ border: 2px solid var(--outline);
1125
+ background: var(--peach);
1126
+ display: grid;
1127
+ place-items: center;
1128
+ font-family: var(--serif);
1129
+ font-weight: 700;
1130
+ font-size: 22px;
1131
+ "
1132
+ >III</span
1133
+ >
1134
+ <span
1135
+ style="
1136
+ width: 60px;
1137
+ height: 60px;
1138
+ border-radius: 50%;
1139
+ border: 2px solid var(--outline);
1140
+ background: var(--violet);
1141
+ color: var(--white);
1142
+ display: grid;
1143
+ place-items: center;
1144
+ font-family: var(--serif);
1145
+ font-weight: 700;
1146
+ font-size: 22px;
1147
+ "
1148
+ >IV</span
1149
+ >
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ </section>
1154
+
1155
+ <!-- COMPOSITIONS -->
1156
+ <section>
1157
+ <div class="sec-head">
1158
+ <span class="tagpill" style="background: var(--coral)">Frames</span>
1159
+ <h2>Frame Compositions</h2>
1160
+ <span class="sp"></span>
1161
+ </div>
1162
+ <div class="gallery">
1163
+ <div class="fw">
1164
+ <div class="flabel"><b>Cover</b><span>· identity · pill wallpaper · centered</span></div>
1165
+ <div class="frame qf1">
1166
+ <span
1167
+ class="ffp"
1168
+ style="background: var(--coral); top: 12%; left: 8%; transform: rotate(-12deg)"
1169
+ >Editorial</span
1170
+ >
1171
+ <span
1172
+ class="ffp"
1173
+ style="background: var(--sky); top: 18%; right: 10%; transform: rotate(9deg)"
1174
+ >Playful</span
1175
+ >
1176
+ <span
1177
+ class="ffp circ"
1178
+ style="background: var(--lime); bottom: 16%; left: 9%; transform: rotate(-8deg)"
1179
+ >+</span
1180
+ >
1181
+ <span
1182
+ class="ffp"
1183
+ style="background: var(--mint); bottom: 14%; right: 11%; transform: rotate(-12deg)"
1184
+ >Memphis</span
1185
+ >
1186
+ <div class="body">
1187
+ <div class="tp">Frame System</div>
1188
+ <h3>Everything's a <em>capsule.</em></h3>
1189
+ <div class="al"></div>
1190
+ </div>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ <div class="fw">
1195
+ <div class="flabel"><b>Pillar Cards</b><span>· catalog · 3-up · left</span></div>
1196
+ <div class="frame qf2">
1197
+ <div class="body">
1198
+ <div class="tp">Three Pillars</div>
1199
+ <h3>The capsule rules.</h3>
1200
+ <div class="row">
1201
+ <div class="c">
1202
+ <div class="ic" style="background: var(--coral)">I</div>
1203
+ <div class="t">Pill</div>
1204
+ <div class="x">Every container is a pill.</div>
1205
+ </div>
1206
+ <div class="c">
1207
+ <div class="ic" style="background: var(--sky)">II</div>
1208
+ <div class="t">Outline</div>
1209
+ <div class="x">2px ink stroke on all.</div>
1210
+ </div>
1211
+ <div class="c">
1212
+ <div class="ic" style="background: var(--lime)">III</div>
1213
+ <div class="t">Lift</div>
1214
+ <div class="x">Soft offset shadow.</div>
1215
+ </div>
1216
+ </div>
1217
+ </div>
1218
+ </div>
1219
+ </div>
1220
+
1221
+ <div class="fw">
1222
+ <div class="flabel"><b>Pull Quote</b><span>· quote · highlight pill · left</span></div>
1223
+ <div class="frame qf3">
1224
+ <span
1225
+ class="ffp"
1226
+ style="background: var(--peach); top: 14%; right: 9%; transform: rotate(8deg)"
1227
+ >Voice</span
1228
+ >
1229
+ <div class="body">
1230
+ <div class="q">
1231
+ Wrap emphasis in a <span class="hl">candy pill</span>, never in bold.
1232
+ </div>
1233
+ <div class="at">— The System Voice</div>
1234
+ </div>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <div class="fw">
1239
+ <div class="flabel">
1240
+ <b>Closing Plate</b><span>· closer · pill wallpaper · centered</span>
1241
+ </div>
1242
+ <div class="frame qf4">
1243
+ <span
1244
+ class="ffp"
1245
+ style="background: var(--lavender); top: 16%; left: 10%; transform: rotate(-10deg)"
1246
+ >Thanks</span
1247
+ >
1248
+ <span
1249
+ class="ffp circ"
1250
+ style="background: var(--yellow); bottom: 18%; right: 12%; transform: rotate(9deg)"
1251
+ >★</span
1252
+ >
1253
+ <div class="body">
1254
+ <div class="tp">The End</div>
1255
+ <h3>Stay <em>inflated.</em></h3>
1256
+ <div class="al"></div>
1257
+ </div>
1258
+ </div>
1259
+ </div>
1260
+ </div>
1261
+ </section>
1262
+
1263
+ <!-- PRINCIPLES -->
1264
+ <section>
1265
+ <div class="sec-head">
1266
+ <span class="tagpill" style="background: var(--yellow)">Rules</span>
1267
+ <h2>Frame Rules</h2>
1268
+ <span class="sp"></span>
1269
+ </div>
1270
+ <div class="dos">
1271
+ <div class="do-card do">
1272
+ <span class="hpill" style="background: var(--lime)">Do</span>
1273
+ <ul>
1274
+ <li>Make every text container a pill — 9999px small, 2rem for cards.</li>
1275
+ <li>Wrap every pill, card, and icon in the 2px ink outline.</li>
1276
+ <li>Set Bodoni headlines in ink, sentence case; color lives on stats + pill fills.</li>
1277
+ <li>Use soft offset shadows (4/6/8/12px) in 8% ink — never blur.</li>
1278
+ <li>Float 5–8 candy pills as wallpaper on declarative frames.</li>
1279
+ </ul>
1280
+ </div>
1281
+ <div class="do-card dont">
1282
+ <span class="hpill" style="background: var(--coral)">Don't</span>
1283
+ <ul>
1284
+ <li>No sharp-cornered text containers; no unstroked pills.</li>
1285
+ <li>No colored Bodoni headlines; no uppercase Bodoni.</li>
1286
+ <li>No blurred shadows; no tenth accent color.</li>
1287
+ <li>No shadows on decorative floating pills (atmosphere is flat).</li>
1288
+ <li>Don't blow a headline edge-to-edge — fit to measure.</li>
1289
+ </ul>
1290
+ </div>
1291
+ </div>
1292
+ </section>
1293
+
1294
+ <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1295
+ <style>
1296
+ /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1297
+ .capdemo {
1298
+ --cap-ink: var(--ink);
1299
+ --cap-canvas: var(--cream);
1300
+ --cap-accent: var(--coral);
1301
+ --cap-accent-2: var(--yellow);
1302
+ }
1303
+ .capdemo .stage {
1304
+ position: absolute;
1305
+ left: 0;
1306
+ right: 0;
1307
+ bottom: 0;
1308
+ height: 16.67cqh;
1309
+ display: flex;
1310
+ align-items: center;
1311
+ justify-content: center;
1312
+ z-index: 4;
1313
+ }
1314
+ .capdemo .pill {
1315
+ max-width: 82cqw;
1316
+ padding: 1.3cqw 3.4cqw 1.5cqw;
1317
+ background: var(--cap-canvas);
1318
+ border: 0.2cqw solid var(--cap-ink);
1319
+ border-radius: 9999px;
1320
+ box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
1321
+ }
1322
+ .capdemo .line {
1323
+ display: flex;
1324
+ flex-wrap: wrap;
1325
+ justify-content: center;
1326
+ gap: 0.12em 0.36em;
1327
+ font-family: var(--serif);
1328
+ font-weight: 700;
1329
+ font-size: 3.2cqw;
1330
+ line-height: 1.16;
1331
+ letter-spacing: -0.02em;
1332
+ }
1333
+ .capdemo .w {
1334
+ display: inline-block;
1335
+ padding: 0 0.1em;
1336
+ border-radius: 9999px;
1337
+ color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
1338
+ }
1339
+ .capdemo .w.spoken {
1340
+ color: var(--cap-ink);
1341
+ }
1342
+ .capdemo .w.active {
1343
+ color: var(--cap-ink);
1344
+ background: var(--cap-accent);
1345
+ box-shadow: 0 0 0 0.14em var(--cap-accent);
1346
+ }
1347
+ .capdemo .bandline {
1348
+ position: absolute;
1349
+ left: 0;
1350
+ right: 0;
1351
+ bottom: 16.67cqh;
1352
+ border-top: 0.12cqw dashed rgba(30, 30, 30, 0.3);
1353
+ z-index: 3;
1354
+ }
1355
+ .capdemo .bandtag {
1356
+ position: absolute;
1357
+ right: 3cqw;
1358
+ bottom: calc(16.67cqh + 0.7cqw);
1359
+ font-family: var(--sans);
1360
+ font-weight: 600;
1361
+ text-transform: uppercase;
1362
+ font-size: 0.85cqw;
1363
+ letter-spacing: 0.08em;
1364
+ color: rgba(26, 26, 26, 0.5);
1365
+ z-index: 4;
1366
+ }
1367
+ </style>
1368
+ <section>
1369
+ <div class="sec-head">
1370
+ <span class="tagpill" style="background: var(--peach)">Captions</span>
1371
+ <h2>Captions</h2>
1372
+ <span class="sp"></span>
1373
+ </div>
1374
+ <div class="gallery">
1375
+ <div class="fw">
1376
+ <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1377
+ <div class="frame capdemo">
1378
+ <span
1379
+ class="ffp"
1380
+ style="background: var(--lavender); top: 12%; left: 8%; transform: rotate(-11deg)"
1381
+ >Live</span
1382
+ >
1383
+ <span
1384
+ class="ffp circ"
1385
+ style="background: var(--lime); top: 16%; right: 10%; transform: rotate(8deg)"
1386
+ >+</span
1387
+ >
1388
+ <div class="bandline"></div>
1389
+ <div class="bandtag">caption band · 16.7%</div>
1390
+ <div class="stage">
1391
+ <div class="pill">
1392
+ <div class="line">
1393
+ <span class="w spoken">Built</span>
1394
+ <span class="w spoken">for</span>
1395
+ <span class="w active">teams</span>
1396
+ <span class="w">who</span>
1397
+ <span class="w">ship.</span>
1398
+ </div>
1399
+ </div>
1400
+ </div>
1401
+ </div>
1402
+ </div>
1403
+
1404
+ <div class="fw">
1405
+ <div class="flabel"><b>Settled line</b><span>· all spoken · highlight cleared</span></div>
1406
+ <div class="frame capdemo">
1407
+ <span
1408
+ class="ffp"
1409
+ style="
1410
+ background: var(--sky);
1411
+ bottom: auto;
1412
+ top: 14%;
1413
+ right: 11%;
1414
+ transform: rotate(9deg);
1415
+ "
1416
+ >Promo</span
1417
+ >
1418
+ <div class="stage">
1419
+ <div class="pill">
1420
+ <div class="line">
1421
+ <span class="w spoken">Ship</span>
1422
+ <span class="w spoken">faster</span>
1423
+ <span class="w spoken">today.</span>
1424
+ </div>
1425
+ </div>
1426
+ </div>
1427
+ </div>
1428
+ </div>
1429
+ </div>
1430
+ </section>
1431
+
1432
+ <div class="foot">
1433
+ <span class="l">Capsule</span>
1434
+ <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1435
+ </div>
1436
+
1437
+ <template id="__bundler_thumbnail">
1438
+ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1439
+ <rect width="100" height="100" fill="#F5F5F0" />
1440
+ <rect
1441
+ x="22"
1442
+ y="38"
1443
+ width="56"
1444
+ height="24"
1445
+ rx="12"
1446
+ fill="#F2D160"
1447
+ stroke="#1E1E1E"
1448
+ stroke-width="2"
1449
+ />
1450
+ <rect
1451
+ x="14"
1452
+ y="20"
1453
+ width="26"
1454
+ height="13"
1455
+ rx="6.5"
1456
+ fill="#E85D4E"
1457
+ stroke="#1E1E1E"
1458
+ stroke-width="2"
1459
+ transform="rotate(-10 27 26)"
1460
+ />
1461
+ <circle cx="76" cy="72" r="8" fill="#C4D94E" stroke="#1E1E1E" stroke-width="2" />
1462
+ </svg>
1463
+ </template>
1464
+ </body>
1465
+ </html>