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/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>