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/blue-professional/frame-showcase.html ADDED
@@ -0,0 +1,1372 @@
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>Blue Professional</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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <style id="ds-tokens">
14
+ :root {
15
+ --bg: #fdfae7;
16
+ --primary: #1e2bfa;
17
+ --text: #111111;
18
+ --muted: #6b6b6b;
19
+ --light: #9a9a9a;
20
+ --accent-light: rgba(30, 43, 250, 0.08);
21
+ --accent-medium: rgba(30, 43, 250, 0.15);
22
+ --border: rgba(30, 43, 250, 0.2);
23
+ --card-bg: rgba(30, 43, 250, 0.04);
24
+ --positive: #059669;
25
+ --negative: #dc2626;
26
+ --disp: "Space Grotesk", sans-serif;
27
+ --body: "Inter", sans-serif;
28
+ }
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+ html {
35
+ background: #0b0b16;
36
+ }
37
+ body {
38
+ background: var(--bg);
39
+ color: var(--muted);
40
+ font-family: var(--body);
41
+ -webkit-font-smoothing: antialiased;
42
+ }
43
+ .disp {
44
+ font-family: var(--disp);
45
+ }
46
+ .eyebrow {
47
+ font-family: var(--disp);
48
+ font-weight: 600;
49
+ text-transform: uppercase;
50
+ letter-spacing: 0.08em;
51
+ font-size: 14px;
52
+ color: var(--primary);
53
+ }
54
+
55
+ section {
56
+ padding: 108px 76px;
57
+ position: relative;
58
+ }
59
+ .sec-head {
60
+ display: flex;
61
+ align-items: flex-start;
62
+ gap: 20px;
63
+ margin-bottom: 60px;
64
+ }
65
+ .sec-head .ey {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: 14px;
69
+ }
70
+ .sec-head .aline {
71
+ width: 60px;
72
+ height: 4px;
73
+ background: var(--primary);
74
+ border-radius: 2px;
75
+ }
76
+ .sec-head h2 {
77
+ font-family: var(--disp);
78
+ font-weight: 600;
79
+ font-size: 42px;
80
+ line-height: 1.1;
81
+ letter-spacing: -0.02em;
82
+ color: var(--text);
83
+ }
84
+ .sec-head .sp {
85
+ flex: 1;
86
+ }
87
+ .sec-head .tagpill {
88
+ background: var(--accent-light);
89
+ color: var(--primary);
90
+ padding: 0.4rem 1rem;
91
+ border-radius: 100px;
92
+ font-family: var(--disp);
93
+ font-weight: 500;
94
+ font-size: 12px;
95
+ align-self: center;
96
+ }
97
+
98
+ /* COVER */
99
+ .cover {
100
+ min-height: 100vh;
101
+ padding: 0 7vw;
102
+ display: flex;
103
+ flex-direction: column;
104
+ justify-content: center;
105
+ position: relative;
106
+ overflow: hidden;
107
+ }
108
+ .cover .deco {
109
+ position: absolute;
110
+ top: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ width: 36%;
114
+ background: var(--accent-light);
115
+ clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
116
+ }
117
+ .cover .dots {
118
+ position: absolute;
119
+ top: 14%;
120
+ right: 10%;
121
+ display: grid;
122
+ grid-template-columns: repeat(3, 1fr);
123
+ gap: 12px;
124
+ opacity: 0.25;
125
+ z-index: 2;
126
+ }
127
+ .cover .dots i {
128
+ width: 8px;
129
+ height: 8px;
130
+ border-radius: 50%;
131
+ background: var(--primary);
132
+ }
133
+ .cover .inner {
134
+ position: relative;
135
+ z-index: 3;
136
+ max-width: 64%;
137
+ }
138
+ .cover .aline {
139
+ width: 60px;
140
+ height: 4px;
141
+ background: var(--primary);
142
+ border-radius: 2px;
143
+ margin-bottom: 28px;
144
+ }
145
+ .cover .meta {
146
+ font-family: var(--disp);
147
+ font-weight: 400;
148
+ font-size: 13px;
149
+ letter-spacing: 0.05em;
150
+ color: var(--light);
151
+ margin-bottom: 20px;
152
+ }
153
+ .cover h1 {
154
+ font-family: var(--disp);
155
+ font-weight: 700;
156
+ font-size: clamp(46px, 5.4vw, 76px);
157
+ line-height: 1.08;
158
+ letter-spacing: -0.02em;
159
+ color: var(--text);
160
+ }
161
+ .cover .sub {
162
+ font-family: var(--body);
163
+ font-weight: 400;
164
+ font-size: clamp(16px, 1.4vw, 20px);
165
+ line-height: 1.6;
166
+ color: var(--muted);
167
+ margin-top: 26px;
168
+ max-width: 560px;
169
+ }
170
+ .cover .pbar {
171
+ position: absolute;
172
+ bottom: 0;
173
+ left: 0;
174
+ height: 3px;
175
+ width: 16%;
176
+ background: var(--primary);
177
+ }
178
+ .cover .counter {
179
+ position: absolute;
180
+ bottom: 24px;
181
+ left: 7vw;
182
+ font-family: var(--disp);
183
+ font-weight: 500;
184
+ font-size: 13px;
185
+ letter-spacing: 0.05em;
186
+ color: var(--muted);
187
+ }
188
+
189
+ /* PALETTE */
190
+ .swatches {
191
+ display: grid;
192
+ grid-template-columns: repeat(4, 1fr);
193
+ gap: 20px;
194
+ }
195
+ .sw {
196
+ background: var(--card-bg);
197
+ border: 1.5px solid var(--border);
198
+ border-radius: 14px;
199
+ overflow: hidden;
200
+ }
201
+ .sw .chip {
202
+ height: 92px;
203
+ border-radius: 10px;
204
+ margin: 14px 14px 0;
205
+ }
206
+ .sw .meta {
207
+ padding: 14px 18px 18px;
208
+ }
209
+ .sw .name {
210
+ font-family: var(--disp);
211
+ font-weight: 600;
212
+ font-size: 17px;
213
+ color: var(--text);
214
+ letter-spacing: -0.01em;
215
+ }
216
+ .sw .hex {
217
+ font-family: var(--disp);
218
+ font-size: 12px;
219
+ color: var(--muted);
220
+ margin-top: 4px;
221
+ }
222
+
223
+ /* TYPE */
224
+ .type-row {
225
+ display: grid;
226
+ grid-template-columns: 220px 1fr;
227
+ align-items: center;
228
+ padding: 24px 0;
229
+ border-bottom: 1px solid var(--border);
230
+ }
231
+ .type-row .tok {
232
+ font-family: var(--disp);
233
+ font-weight: 600;
234
+ text-transform: uppercase;
235
+ letter-spacing: 0.06em;
236
+ font-size: 12px;
237
+ color: var(--primary);
238
+ }
239
+ .type-row .m {
240
+ font-size: 12px;
241
+ color: var(--muted);
242
+ margin-top: 8px;
243
+ line-height: 1.5;
244
+ }
245
+ .type-row .spec {
246
+ overflow: hidden;
247
+ }
248
+
249
+ /* COMPONENTS */
250
+ .cnote {
251
+ font-family: var(--disp);
252
+ font-weight: 600;
253
+ text-transform: uppercase;
254
+ letter-spacing: 0.06em;
255
+ font-size: 12px;
256
+ color: var(--primary);
257
+ margin-bottom: 20px;
258
+ }
259
+ .cgrid {
260
+ display: grid;
261
+ grid-template-columns: repeat(12, 1fr);
262
+ gap: 1.2rem;
263
+ margin-bottom: 48px;
264
+ }
265
+ .s3 {
266
+ grid-column: span 3;
267
+ }
268
+ .s4 {
269
+ grid-column: span 4;
270
+ }
271
+ .s6 {
272
+ grid-column: span 6;
273
+ }
274
+ .s8 {
275
+ grid-column: span 8;
276
+ }
277
+ .card {
278
+ background: var(--card-bg);
279
+ border: 1.5px solid var(--border);
280
+ border-radius: 14px;
281
+ padding: 1.5rem 1.6rem;
282
+ height: 100%;
283
+ }
284
+ .card .mv {
285
+ font-family: var(--disp);
286
+ font-weight: 700;
287
+ font-size: 46px;
288
+ line-height: 1;
289
+ color: var(--primary);
290
+ }
291
+ .card .ml {
292
+ font-family: var(--body);
293
+ font-weight: 600;
294
+ font-size: 16px;
295
+ color: var(--text);
296
+ margin-top: 10px;
297
+ }
298
+ .card .md {
299
+ font-size: 13px;
300
+ line-height: 1.5;
301
+ color: var(--muted);
302
+ margin-top: 8px;
303
+ }
304
+ .card .chg {
305
+ font-family: var(--disp);
306
+ font-weight: 600;
307
+ font-size: 12.5px;
308
+ margin-top: 10px;
309
+ }
310
+ .card .chg.pos {
311
+ color: var(--positive);
312
+ }
313
+ .card .chg.neg {
314
+ color: var(--negative);
315
+ }
316
+ .statcell {
317
+ background: var(--card-bg);
318
+ border: 1px solid var(--border);
319
+ border-radius: 12px;
320
+ padding: 1.4rem 1.5rem;
321
+ }
322
+ .statcell .n {
323
+ font-family: var(--disp);
324
+ font-weight: 700;
325
+ font-size: 32px;
326
+ color: var(--primary);
327
+ line-height: 1;
328
+ }
329
+ .statcell .nm {
330
+ font-family: var(--body);
331
+ font-weight: 500;
332
+ font-size: 14px;
333
+ color: var(--text);
334
+ margin-top: 8px;
335
+ }
336
+ .statcell .ctx {
337
+ font-size: 12px;
338
+ color: var(--light);
339
+ margin-top: 8px;
340
+ padding-top: 8px;
341
+ border-top: 1px solid var(--border);
342
+ }
343
+ .bars .row {
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 14px;
347
+ margin-bottom: 14px;
348
+ }
349
+ .bars .bl {
350
+ font-family: var(--body);
351
+ font-weight: 500;
352
+ font-size: 14px;
353
+ color: var(--text);
354
+ width: 90px;
355
+ }
356
+ .bars .track {
357
+ flex: 1;
358
+ height: 28px;
359
+ background: var(--accent-light);
360
+ border-radius: 6px;
361
+ overflow: hidden;
362
+ }
363
+ .bars .fill {
364
+ height: 100%;
365
+ display: block;
366
+ background: var(--primary);
367
+ border-radius: 6px;
368
+ }
369
+ .bars .pct {
370
+ font-family: var(--disp);
371
+ font-weight: 600;
372
+ font-size: 15px;
373
+ color: var(--primary);
374
+ width: 48px;
375
+ text-align: right;
376
+ }
377
+ .steps {
378
+ display: flex;
379
+ gap: 20px;
380
+ }
381
+ .step {
382
+ flex: 1;
383
+ }
384
+ .step .circ {
385
+ width: 56px;
386
+ height: 56px;
387
+ border-radius: 50%;
388
+ background: var(--primary);
389
+ color: var(--bg);
390
+ display: grid;
391
+ place-items: center;
392
+ font-family: var(--disp);
393
+ font-weight: 700;
394
+ font-size: 21px;
395
+ }
396
+ .step .t {
397
+ font-family: var(--disp);
398
+ font-weight: 600;
399
+ font-size: 17px;
400
+ color: var(--text);
401
+ margin-top: 14px;
402
+ }
403
+ .step .d {
404
+ font-size: 13px;
405
+ line-height: 1.5;
406
+ color: var(--muted);
407
+ margin-top: 6px;
408
+ }
409
+ .hilite {
410
+ background: var(--accent-light);
411
+ border-left: 4px solid var(--primary);
412
+ border-radius: 12px;
413
+ padding: 1.3rem 1.5rem;
414
+ }
415
+ .hilite .q {
416
+ font-family: var(--disp);
417
+ font-weight: 500;
418
+ font-size: 22px;
419
+ line-height: 1.4;
420
+ color: var(--text);
421
+ }
422
+ .hilite .c {
423
+ font-family: var(--disp);
424
+ font-weight: 500;
425
+ text-transform: uppercase;
426
+ letter-spacing: 0.04em;
427
+ font-size: 12px;
428
+ color: var(--muted);
429
+ margin-top: 14px;
430
+ }
431
+ .cta {
432
+ display: inline-block;
433
+ background: var(--primary);
434
+ color: var(--bg);
435
+ padding: 0.9rem 2.2rem;
436
+ border-radius: 100px;
437
+ font-family: var(--disp);
438
+ font-weight: 600;
439
+ font-size: 15px;
440
+ }
441
+
442
+ /* COMPOSITIONS */
443
+ .gallery {
444
+ display: grid;
445
+ grid-template-columns: 1fr 1fr;
446
+ gap: 48px;
447
+ }
448
+ .fw .flabel {
449
+ display: flex;
450
+ gap: 14px;
451
+ align-items: baseline;
452
+ margin-bottom: 16px;
453
+ font-family: var(--disp);
454
+ font-weight: 600;
455
+ text-transform: uppercase;
456
+ letter-spacing: 0.06em;
457
+ font-size: 12px;
458
+ color: var(--muted);
459
+ }
460
+ .fw .flabel b {
461
+ color: var(--text);
462
+ }
463
+ .frame {
464
+ aspect-ratio: 16/9;
465
+ container-type: size;
466
+ position: relative;
467
+ overflow: hidden;
468
+ background: var(--bg);
469
+ border: 1px solid var(--border);
470
+ border-radius: 10px;
471
+ }
472
+ .frame > .body {
473
+ position: absolute;
474
+ inset: 0;
475
+ z-index: 3;
476
+ }
477
+ .frame .pbar {
478
+ position: absolute;
479
+ bottom: 0;
480
+ left: 0;
481
+ height: 0.3cqw;
482
+ background: var(--primary);
483
+ z-index: 5;
484
+ }
485
+
486
+ /* f1 cover */
487
+ .gf1 .deco {
488
+ position: absolute;
489
+ top: 0;
490
+ right: 0;
491
+ bottom: 0;
492
+ width: 36%;
493
+ background: var(--accent-light);
494
+ clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
495
+ z-index: 1;
496
+ }
497
+ .gf1 .dots {
498
+ position: absolute;
499
+ top: 14%;
500
+ right: 9%;
501
+ display: grid;
502
+ grid-template-columns: repeat(3, 1fr);
503
+ gap: 1cqw;
504
+ opacity: 0.25;
505
+ z-index: 2;
506
+ }
507
+ .gf1 .dots i {
508
+ width: 0.7cqw;
509
+ height: 0.7cqw;
510
+ border-radius: 50%;
511
+ background: var(--primary);
512
+ }
513
+ .gf1 .body {
514
+ display: flex;
515
+ flex-direction: column;
516
+ justify-content: center;
517
+ padding: 0 5cqw;
518
+ }
519
+ .gf1 .aline {
520
+ width: 5cqw;
521
+ height: 0.3cqw;
522
+ background: var(--primary);
523
+ border-radius: 0.2cqw;
524
+ margin-bottom: 2cqw;
525
+ }
526
+ .gf1 .ey {
527
+ font-family: var(--disp);
528
+ font-weight: 400;
529
+ font-size: 1cqw;
530
+ letter-spacing: 0.05em;
531
+ color: var(--light);
532
+ margin-bottom: 1.4cqw;
533
+ }
534
+ .gf1 h3 {
535
+ font-family: var(--disp);
536
+ font-weight: 700;
537
+ font-size: 5.6cqw;
538
+ line-height: 1.06;
539
+ letter-spacing: -0.02em;
540
+ color: var(--text);
541
+ max-width: 58cqw;
542
+ }
543
+ .gf1 .sub {
544
+ font-size: 1.4cqw;
545
+ line-height: 1.5;
546
+ color: var(--muted);
547
+ margin-top: 1.8cqw;
548
+ max-width: 48cqw;
549
+ }
550
+
551
+ /* f2 dashboard */
552
+ .gf2 .body {
553
+ padding: 5.5cqw 5cqw;
554
+ display: flex;
555
+ flex-direction: column;
556
+ }
557
+ .gf2 .hdr {
558
+ display: flex;
559
+ justify-content: space-between;
560
+ align-items: flex-start;
561
+ margin-bottom: 2.4cqw;
562
+ }
563
+ .gf2 .ey {
564
+ font-family: var(--disp);
565
+ font-weight: 600;
566
+ text-transform: uppercase;
567
+ letter-spacing: 0.08em;
568
+ font-size: 0.95cqw;
569
+ color: var(--primary);
570
+ }
571
+ .gf2 h3 {
572
+ font-family: var(--disp);
573
+ font-weight: 600;
574
+ font-size: 3.2cqw;
575
+ letter-spacing: -0.02em;
576
+ color: var(--text);
577
+ margin-top: 0.6cqw;
578
+ }
579
+ .gf2 .tp {
580
+ background: var(--accent-light);
581
+ color: var(--primary);
582
+ padding: 0.4cqw 1cqw;
583
+ border-radius: 100px;
584
+ font-family: var(--disp);
585
+ font-weight: 500;
586
+ font-size: 0.9cqw;
587
+ }
588
+ .gf2 .grid {
589
+ display: grid;
590
+ grid-template-columns: repeat(3, 1fr);
591
+ gap: 1.4cqw;
592
+ flex: 1;
593
+ }
594
+ .gf2 .c {
595
+ background: var(--card-bg);
596
+ border: 0.1cqw solid var(--border);
597
+ border-radius: 1cqw;
598
+ padding: 1.6cqw;
599
+ }
600
+ .gf2 .c .n {
601
+ font-family: var(--disp);
602
+ font-weight: 700;
603
+ font-size: 3.4cqw;
604
+ color: var(--primary);
605
+ line-height: 1;
606
+ }
607
+ .gf2 .c .nm {
608
+ font-family: var(--body);
609
+ font-weight: 600;
610
+ font-size: 1.1cqw;
611
+ color: var(--text);
612
+ margin-top: 0.6cqw;
613
+ }
614
+ .gf2 .c .d {
615
+ font-size: 0.92cqw;
616
+ line-height: 1.45;
617
+ color: var(--muted);
618
+ margin-top: 0.5cqw;
619
+ }
620
+
621
+ /* f3 bars */
622
+ .gf3 .body {
623
+ padding: 5.5cqw 5cqw;
624
+ display: flex;
625
+ flex-direction: column;
626
+ }
627
+ .gf3 .ey {
628
+ font-family: var(--disp);
629
+ font-weight: 600;
630
+ text-transform: uppercase;
631
+ letter-spacing: 0.08em;
632
+ font-size: 0.95cqw;
633
+ color: var(--primary);
634
+ margin-bottom: 0.6cqw;
635
+ }
636
+ .gf3 h3 {
637
+ font-family: var(--disp);
638
+ font-weight: 600;
639
+ font-size: 3cqw;
640
+ letter-spacing: -0.02em;
641
+ color: var(--text);
642
+ margin-bottom: 2.4cqw;
643
+ }
644
+ .gf3 .row {
645
+ display: flex;
646
+ align-items: center;
647
+ gap: 1.4cqw;
648
+ margin-bottom: 1.4cqw;
649
+ }
650
+ .gf3 .bl {
651
+ font-family: var(--body);
652
+ font-weight: 500;
653
+ font-size: 1.2cqw;
654
+ color: var(--text);
655
+ width: 14cqw;
656
+ }
657
+ .gf3 .track {
658
+ flex: 1;
659
+ height: 2.6cqw;
660
+ background: var(--accent-light);
661
+ border-radius: 0.6cqw;
662
+ overflow: hidden;
663
+ }
664
+ .gf3 .fill {
665
+ height: 100%;
666
+ display: block;
667
+ background: var(--primary);
668
+ border-radius: 0.6cqw;
669
+ }
670
+ .gf3 .pct {
671
+ font-family: var(--disp);
672
+ font-weight: 600;
673
+ font-size: 1.4cqw;
674
+ color: var(--primary);
675
+ width: 5cqw;
676
+ text-align: right;
677
+ }
678
+
679
+ /* f4 quote/closing */
680
+ .gf4 {
681
+ position: relative;
682
+ }
683
+ .gf4 .rings {
684
+ position: absolute;
685
+ left: 50%;
686
+ top: 50%;
687
+ transform: translate(-50%, -50%);
688
+ width: 34cqw;
689
+ height: 34cqw;
690
+ border: 0.1cqw solid var(--border);
691
+ border-radius: 50%;
692
+ opacity: 0.4;
693
+ z-index: 1;
694
+ }
695
+ .gf4 .rings::before {
696
+ content: "";
697
+ position: absolute;
698
+ inset: 20%;
699
+ border: 0.1cqw solid var(--border);
700
+ border-radius: 50%;
701
+ }
702
+ .gf4 .body {
703
+ display: flex;
704
+ flex-direction: column;
705
+ justify-content: center;
706
+ align-items: center;
707
+ text-align: center;
708
+ padding: 0 9cqw;
709
+ }
710
+ .gf4 .qm {
711
+ font-family: var(--disp);
712
+ font-weight: 700;
713
+ font-size: 9cqw;
714
+ line-height: 0.5;
715
+ color: var(--primary);
716
+ opacity: 0.15;
717
+ height: 4cqw;
718
+ }
719
+ .gf4 .q {
720
+ font-family: var(--disp);
721
+ font-weight: 500;
722
+ font-size: 3.4cqw;
723
+ line-height: 1.35;
724
+ color: var(--text);
725
+ margin-top: 1cqw;
726
+ }
727
+ .gf4 .c {
728
+ font-family: var(--disp);
729
+ font-weight: 500;
730
+ text-transform: uppercase;
731
+ letter-spacing: 0.04em;
732
+ font-size: 1cqw;
733
+ color: var(--muted);
734
+ margin-top: 2cqw;
735
+ }
736
+
737
+ /* PRINCIPLES */
738
+ .dos {
739
+ display: grid;
740
+ grid-template-columns: 1fr 1fr;
741
+ gap: 24px;
742
+ }
743
+ .do-card {
744
+ background: var(--card-bg);
745
+ border: 1.5px solid var(--border);
746
+ border-radius: 14px;
747
+ padding: 36px;
748
+ }
749
+ .do-card h4 {
750
+ font-family: var(--disp);
751
+ font-weight: 600;
752
+ font-size: 24px;
753
+ color: var(--text);
754
+ margin-bottom: 8px;
755
+ letter-spacing: -0.01em;
756
+ }
757
+ .do-card .aline {
758
+ width: 48px;
759
+ height: 4px;
760
+ background: var(--primary);
761
+ border-radius: 2px;
762
+ margin-bottom: 22px;
763
+ }
764
+ .do-card ul {
765
+ list-style: none;
766
+ }
767
+ .do-card li {
768
+ font-size: 14px;
769
+ line-height: 1.6;
770
+ padding-left: 24px;
771
+ position: relative;
772
+ margin-bottom: 13px;
773
+ color: var(--muted);
774
+ }
775
+ .do-card li::before {
776
+ position: absolute;
777
+ left: 0;
778
+ font-family: var(--disp);
779
+ font-weight: 700;
780
+ color: var(--primary);
781
+ }
782
+ .do-card.do li::before {
783
+ content: "+";
784
+ }
785
+ .do-card.dont li::before {
786
+ content: "\00d7";
787
+ color: var(--light);
788
+ }
789
+
790
+ .foot {
791
+ padding: 52px 76px;
792
+ border-top: 1px solid var(--border);
793
+ display: flex;
794
+ justify-content: space-between;
795
+ align-items: center;
796
+ }
797
+ .foot .l {
798
+ font-family: var(--disp);
799
+ font-weight: 700;
800
+ font-size: 26px;
801
+ color: var(--text);
802
+ letter-spacing: -0.02em;
803
+ }
804
+ .foot .r {
805
+ font-family: var(--disp);
806
+ font-weight: 500;
807
+ text-transform: uppercase;
808
+ letter-spacing: 0.06em;
809
+ font-size: 11px;
810
+ color: var(--muted);
811
+ }
812
+ @media (max-width: 1100px) {
813
+ .gallery {
814
+ grid-template-columns: 1fr;
815
+ }
816
+ .swatches {
817
+ grid-template-columns: 1fr 1fr;
818
+ }
819
+ }
820
+ </style>
821
+ <link
822
+ rel="stylesheet"
823
+ href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
824
+ />
825
+ <link
826
+ rel="stylesheet"
827
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
828
+ />
829
+ <style id="ft-override">
830
+ :root {
831
+ --primary: #fdfae7 !important;
832
+ --secondary: #111111 !important;
833
+ --tertiary: #6b6b6b !important;
834
+ --accent: #1e2bfa !important;
835
+ --f-disp: "Space Grotesk", sans-serif !important;
836
+ --f-body: "Inter", sans-serif !important;
837
+ --bg: #fdfae7 !important;
838
+ --primary: #1e2bfa !important;
839
+ --text: #111111 !important;
840
+ --muted: #6b6b6b !important;
841
+ --disp: "Space Grotesk", sans-serif !important;
842
+ --body: "Inter", sans-serif !important;
843
+ --light: #9a9a9a !important;
844
+ --positive: #059669 !important;
845
+ --negative: #dc2626 !important;
846
+ --accent-light: rgba(30, 43, 250, 0.08) !important;
847
+ --accent-medium: rgba(30, 43, 250, 0.15) !important;
848
+ --border: rgba(30, 43, 250, 0.2) !important;
849
+ --card-bg: rgba(30, 43, 250, 0.04) !important;
850
+ }
851
+ </style>
852
+ </head>
853
+ <body>
854
+ <!-- COVER -->
855
+ <section class="cover">
856
+ <div class="deco"></div>
857
+ <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
858
+ <div class="inner">
859
+ <div class="aline"></div>
860
+ <div class="meta">FRAME SYSTEM · VOL. 01 · CONFIDENTIAL</div>
861
+ <h1>Restraint, with one strong commitment.</h1>
862
+ <div class="sub">
863
+ A consulting-grade frame system — warm cream, a single saturated cobalt carrying every
864
+ accent, and soft tinted cards that never shout.
865
+ </div>
866
+ </div>
867
+ <div class="counter">01 / 06</div>
868
+ <div class="pbar"></div>
869
+ </section>
870
+
871
+ <!-- PALETTE -->
872
+ <section>
873
+ <div class="sec-head">
874
+ <div class="ey">
875
+ <div class="aline"></div>
876
+ <h2>Palette</h2>
877
+ </div>
878
+ <span class="sp"></span><span class="tagpill">One Accent, Three Grays</span>
879
+ </div>
880
+ <div class="swatches">
881
+ <div class="sw">
882
+ <div
883
+ class="chip"
884
+ style="background: var(--bg); box-shadow: inset 0 0 0 1px var(--border)"
885
+ ></div>
886
+ <div class="meta">
887
+ <div class="name">Canvas</div>
888
+ <div class="hex">#fdfae7</div>
889
+ </div>
890
+ </div>
891
+ <div class="sw">
892
+ <div class="chip" style="background: var(--primary)"></div>
893
+ <div class="meta">
894
+ <div class="name">Cobalt</div>
895
+ <div class="hex">#1e2bfa · the only accent</div>
896
+ </div>
897
+ </div>
898
+ <div class="sw">
899
+ <div class="chip" style="background: var(--text)"></div>
900
+ <div class="meta">
901
+ <div class="name">Text</div>
902
+ <div class="hex">#111111</div>
903
+ </div>
904
+ </div>
905
+ <div class="sw">
906
+ <div class="chip" style="background: var(--muted)"></div>
907
+ <div class="meta">
908
+ <div class="name">Muted</div>
909
+ <div class="hex">#6b6b6b · body</div>
910
+ </div>
911
+ </div>
912
+ <div class="sw">
913
+ <div class="chip" style="background: var(--card-bg)"></div>
914
+ <div class="meta">
915
+ <div class="name">Card Tint</div>
916
+ <div class="hex">cobalt · 4%</div>
917
+ </div>
918
+ </div>
919
+ <div class="sw">
920
+ <div class="chip" style="background: var(--border)"></div>
921
+ <div class="meta">
922
+ <div class="name">Border</div>
923
+ <div class="hex">cobalt · 20%</div>
924
+ </div>
925
+ </div>
926
+ <div class="sw">
927
+ <div class="chip" style="background: var(--positive)"></div>
928
+ <div class="meta">
929
+ <div class="name">Positive</div>
930
+ <div class="hex">#059669 · inline only</div>
931
+ </div>
932
+ </div>
933
+ <div class="sw">
934
+ <div class="chip" style="background: var(--negative)"></div>
935
+ <div class="meta">
936
+ <div class="name">Negative</div>
937
+ <div class="hex">#dc2626 · inline only</div>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </section>
942
+
943
+ <!-- TYPOGRAPHY -->
944
+ <section>
945
+ <div class="sec-head">
946
+ <div class="ey">
947
+ <div class="aline"></div>
948
+ <h2>Typography</h2>
949
+ </div>
950
+ <span class="sp"></span><span class="tagpill">Space Grotesk + Inter</span>
951
+ </div>
952
+ <div class="type-row">
953
+ <div>
954
+ <div class="tok">h1</div>
955
+ <div class="m">Space Grotesk 700 · −0.02em · near-black</div>
956
+ </div>
957
+ <div class="spec">
958
+ <span
959
+ class="disp"
960
+ style="font-weight: 700; font-size: 66px; letter-spacing: -0.02em; color: var(--text)"
961
+ >Measured.</span
962
+ >
963
+ </div>
964
+ </div>
965
+ <div class="type-row">
966
+ <div>
967
+ <div class="tok">h4-eyebrow</div>
968
+ <div class="m">Space Grotesk 600 · uppercase · 0.08em · cobalt</div>
969
+ </div>
970
+ <div class="spec"><span class="eyebrow">Executive Summary</span></div>
971
+ </div>
972
+ <div class="type-row">
973
+ <div>
974
+ <div class="tok">metric-value</div>
975
+ <div class="m">Space Grotesk 700 · cobalt</div>
976
+ </div>
977
+ <div class="spec">
978
+ <span class="disp" style="font-weight: 700; font-size: 54px; color: var(--primary)"
979
+ >$24.3M</span
980
+ >
981
+ </div>
982
+ </div>
983
+ <div class="type-row">
984
+ <div>
985
+ <div class="tok">body</div>
986
+ <div class="m">Inter 400 · line 1.6 · muted gray</div>
987
+ </div>
988
+ <div class="spec">
989
+ <p style="font-size: 17px; line-height: 1.6; max-width: 660px">
990
+ Inter carries every paragraph in muted gray — readable, premium, never competing with
991
+ the cobalt accent or the near-black headline.
992
+ </p>
993
+ </div>
994
+ </div>
995
+ <div class="type-row" style="border-bottom: 0">
996
+ <div>
997
+ <div class="tok">cta</div>
998
+ <div class="m">Space Grotesk 600 · cobalt pill · cream text</div>
999
+ </div>
1000
+ <div class="spec"><span class="cta">Book a Briefing</span></div>
1001
+ </div>
1002
+ </section>
1003
+
1004
+ <!-- COMPONENTS -->
1005
+ <section>
1006
+ <div class="sec-head">
1007
+ <div class="ey">
1008
+ <div class="aline"></div>
1009
+ <h2>Components</h2>
1010
+ </div>
1011
+ <span class="sp"></span><span class="tagpill">Soft Tints, No Shadows</span>
1012
+ </div>
1013
+
1014
+ <div class="cgrid">
1015
+ <div class="s4">
1016
+ <div class="cnote">Metric card</div>
1017
+ <div class="card">
1018
+ <div class="mv">$24.3M</div>
1019
+ <div class="ml">Annual Revenue</div>
1020
+ <div class="md">Recurring, across every region.</div>
1021
+ <div class="chg pos">↑ +18% YoY</div>
1022
+ </div>
1023
+ </div>
1024
+ <div class="s4">
1025
+ <div class="cnote">Stat cells</div>
1026
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem">
1027
+ <div class="statcell">
1028
+ <div class="n">94%</div>
1029
+ <div class="nm">Retention</div>
1030
+ <div class="ctx">Net revenue</div>
1031
+ </div>
1032
+ <div class="statcell">
1033
+ <div class="n">3.4×</div>
1034
+ <div class="nm">Multiple</div>
1035
+ <div class="ctx">On capital</div>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ <div class="s4">
1040
+ <div class="cnote">Bar ranking</div>
1041
+ <div class="bars">
1042
+ <div class="row">
1043
+ <span class="bl">Cobalt</span
1044
+ ><span class="track"><span class="fill" style="width: 88%"></span></span
1045
+ ><span class="pct">88</span>
1046
+ </div>
1047
+ <div class="row">
1048
+ <span class="bl">Restraint</span
1049
+ ><span class="track"><span class="fill" style="width: 64%"></span></span
1050
+ ><span class="pct">64</span>
1051
+ </div>
1052
+ <div class="row">
1053
+ <span class="bl">Density</span
1054
+ ><span class="track"><span class="fill" style="width: 46%"></span></span
1055
+ ><span class="pct">46</span>
1056
+ </div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <div class="cgrid" style="margin-bottom: 0">
1062
+ <div class="s8">
1063
+ <div class="cnote">Step timeline — fade into future</div>
1064
+ <div class="steps">
1065
+ <div class="step">
1066
+ <div class="circ" style="opacity: 1">1</div>
1067
+ <div class="t">Survey</div>
1068
+ <div class="d">Establish the cream baseline.</div>
1069
+ </div>
1070
+ <div class="step">
1071
+ <div class="circ" style="opacity: 0.85">2</div>
1072
+ <div class="t">Tint</div>
1073
+ <div class="d">Lift cards with 4% cobalt.</div>
1074
+ </div>
1075
+ <div class="step">
1076
+ <div class="circ" style="opacity: 0.7">3</div>
1077
+ <div class="t">Accent</div>
1078
+ <div class="d">One cobalt carries emphasis.</div>
1079
+ </div>
1080
+ <div class="step">
1081
+ <div class="circ" style="opacity: 0.55">4</div>
1082
+ <div class="t">Deliver</div>
1083
+ <div class="d">Executive-ready briefing.</div>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ <div class="s4">
1088
+ <div class="cnote">Highlight callout</div>
1089
+ <div class="hilite">
1090
+ <div class="q">One accent does all the emphasis work.</div>
1091
+ <div class="c">— The System Principle</div>
1092
+ </div>
1093
+ </div>
1094
+ </div>
1095
+ </section>
1096
+
1097
+ <!-- COMPOSITIONS -->
1098
+ <section>
1099
+ <div class="sec-head">
1100
+ <div class="ey">
1101
+ <div class="aline"></div>
1102
+ <h2>Frame Compositions</h2>
1103
+ </div>
1104
+ <span class="sp"></span><span class="tagpill">True 16:9 · cqw</span>
1105
+ </div>
1106
+ <div class="gallery">
1107
+ <div class="fw">
1108
+ <div class="flabel"><b>Cover</b><span>· identity · diagonal accent · left</span></div>
1109
+ <div class="frame gf1">
1110
+ <div class="deco"></div>
1111
+ <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
1112
+ <div class="body">
1113
+ <div class="aline"></div>
1114
+ <div class="ey">FRAME SYSTEM · VOL. 01</div>
1115
+ <h3>Restraint, with one commitment.</h3>
1116
+ <div class="sub">Cream, cobalt, and soft tinted cards.</div>
1117
+ </div>
1118
+ <div class="pbar" style="width: 16%"></div>
1119
+ </div>
1120
+ </div>
1121
+
1122
+ <div class="fw">
1123
+ <div class="flabel">
1124
+ <b>Dashboard</b><span>· data · 3-up metrics · the dense frame</span>
1125
+ </div>
1126
+ <div class="frame gf2">
1127
+ <div class="body">
1128
+ <div class="hdr">
1129
+ <div>
1130
+ <div class="ey">Performance</div>
1131
+ <h3>Q3 At a Glance</h3>
1132
+ </div>
1133
+ <span class="tp">FY2026</span>
1134
+ </div>
1135
+ <div class="grid">
1136
+ <div class="c">
1137
+ <div class="n">$24M</div>
1138
+ <div class="nm">Revenue</div>
1139
+ <div class="d">Up across every region.</div>
1140
+ </div>
1141
+ <div class="c">
1142
+ <div class="n">94%</div>
1143
+ <div class="nm">Retention</div>
1144
+ <div class="d">Net revenue, trailing 12mo.</div>
1145
+ </div>
1146
+ <div class="c">
1147
+ <div class="n">+18%</div>
1148
+ <div class="nm">Growth</div>
1149
+ <div class="d">Year over year, compounding.</div>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ <div class="pbar" style="width: 34%"></div>
1154
+ </div>
1155
+ </div>
1156
+
1157
+ <div class="fw">
1158
+ <div class="flabel"><b>Bar Ranking</b><span>· data · cobalt fills · left</span></div>
1159
+ <div class="frame gf3">
1160
+ <div class="body">
1161
+ <div class="ey">Drivers</div>
1162
+ <h3>What Moves the Number</h3>
1163
+ <div class="row">
1164
+ <span class="bl">Expansion</span
1165
+ ><span class="track"><span class="fill" style="width: 88%"></span></span
1166
+ ><span class="pct">88</span>
1167
+ </div>
1168
+ <div class="row">
1169
+ <span class="bl">New Logos</span
1170
+ ><span class="track"><span class="fill" style="width: 62%"></span></span
1171
+ ><span class="pct">62</span>
1172
+ </div>
1173
+ <div class="row">
1174
+ <span class="bl">Pricing</span
1175
+ ><span class="track"><span class="fill" style="width: 41%"></span></span
1176
+ ><span class="pct">41</span>
1177
+ </div>
1178
+ </div>
1179
+ <div class="pbar" style="width: 58%"></div>
1180
+ </div>
1181
+ </div>
1182
+
1183
+ <div class="fw">
1184
+ <div class="flabel">
1185
+ <b>Pull Quote</b><span>· quote · concentric rings · centered</span>
1186
+ </div>
1187
+ <div class="frame gf4">
1188
+ <div class="rings"></div>
1189
+ <div class="body">
1190
+ <div class="qm">&ldquo;</div>
1191
+ <div class="q">Quiet is the most expensive thing on the page.</div>
1192
+ <div class="c">— Managing Partner</div>
1193
+ </div>
1194
+ <div class="pbar" style="width: 82%"></div>
1195
+ </div>
1196
+ </div>
1197
+ </div>
1198
+ </section>
1199
+
1200
+ <!-- PRINCIPLES -->
1201
+ <section>
1202
+ <div class="sec-head">
1203
+ <div class="ey">
1204
+ <div class="aline"></div>
1205
+ <h2>Frame Rules</h2>
1206
+ </div>
1207
+ <span class="sp"></span><span class="tagpill">Single Accent</span>
1208
+ </div>
1209
+ <div class="dos">
1210
+ <div class="do-card do">
1211
+ <h4>Do</h4>
1212
+ <div class="aline"></div>
1213
+ <ul>
1214
+ <li>Start every frame on warm cream; cobalt carries every accent.</li>
1215
+ <li>
1216
+ Set headlines near-black with −0.02em tracking; eyebrows cobalt, uppercase, 0.08em.
1217
+ </li>
1218
+ <li>Render every numeral in cobalt Space Grotesk 600–700.</li>
1219
+ <li>Use tinted cards — 4% fill, 20% border, 10–14px radius; soft, never outlined.</li>
1220
+ <li>Pill chrome at 100px; body in Inter 400, muted gray, line 1.6.</li>
1221
+ </ul>
1222
+ </div>
1223
+ <div class="do-card dont">
1224
+ <h4>Don't</h4>
1225
+ <div class="aline"></div>
1226
+ <ul>
1227
+ <li>No second accent color; no cobalt headlines.</li>
1228
+ <li>No drop shadows (save the one soft cobalt CTA hover).</li>
1229
+ <li>No square corners; no opaque cobalt borders.</li>
1230
+ <li>No font substitutes; no uppercase body.</li>
1231
+ <li>Don't fill space with heavier borders — add substance, not noise.</li>
1232
+ </ul>
1233
+ </div>
1234
+ </div>
1235
+ </section>
1236
+
1237
+ <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
1238
+ <style>
1239
+ /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
1240
+ .capdemo {
1241
+ --cap-ink: var(--text);
1242
+ --cap-canvas: var(--bg);
1243
+ --cap-accent: var(--primary);
1244
+ --cap-accent-2: var(--negative);
1245
+ }
1246
+ .capdemo .stage {
1247
+ position: absolute;
1248
+ left: 0;
1249
+ right: 0;
1250
+ bottom: 0;
1251
+ height: 16.67cqh;
1252
+ display: flex;
1253
+ align-items: center;
1254
+ justify-content: center;
1255
+ z-index: 4;
1256
+ }
1257
+ .capdemo .pill {
1258
+ max-width: 80cqw;
1259
+ padding: 1.4cqw 3cqw 1.7cqw;
1260
+ background: color-mix(in srgb, var(--cap-accent) 4%, var(--cap-canvas));
1261
+ border: 0.16cqw solid color-mix(in srgb, var(--cap-accent) 20%, transparent);
1262
+ border-radius: 1cqw;
1263
+ }
1264
+ .capdemo .line {
1265
+ display: flex;
1266
+ flex-wrap: wrap;
1267
+ justify-content: center;
1268
+ gap: 0.1em 0.34em;
1269
+ font-family: var(--disp);
1270
+ font-weight: 600;
1271
+ font-size: 3.4cqw;
1272
+ line-height: 1.16;
1273
+ letter-spacing: -0.02em;
1274
+ }
1275
+ .capdemo .w {
1276
+ display: inline-block;
1277
+ padding: 0 0.18em;
1278
+ border-radius: 0.32em;
1279
+ color: color-mix(in srgb, var(--cap-ink) 52%, var(--cap-canvas));
1280
+ }
1281
+ .capdemo .w.spoken {
1282
+ color: var(--cap-ink);
1283
+ }
1284
+ .capdemo .w.active {
1285
+ color: var(--cap-canvas);
1286
+ background: var(--cap-accent);
1287
+ }
1288
+ .capdemo .bandline {
1289
+ position: absolute;
1290
+ left: 0;
1291
+ right: 0;
1292
+ bottom: 16.67cqh;
1293
+ border-top: 1px dashed var(--border);
1294
+ z-index: 3;
1295
+ }
1296
+ .capdemo .bandtag {
1297
+ position: absolute;
1298
+ right: 3cqw;
1299
+ bottom: calc(16.67cqh + 0.7cqw);
1300
+ font-family: var(--disp);
1301
+ font-weight: 500;
1302
+ font-size: 0.95cqw;
1303
+ letter-spacing: 0.04em;
1304
+ color: var(--muted);
1305
+ opacity: 0.7;
1306
+ z-index: 4;
1307
+ }
1308
+ </style>
1309
+ <section>
1310
+ <div class="sec-head">
1311
+ <div class="ey">
1312
+ <div class="aline"></div>
1313
+ <h2>Captions</h2>
1314
+ </div>
1315
+ <span class="sp"></span><span class="tagpill">Lower-third · Karaoke</span>
1316
+ </div>
1317
+ <div class="gallery">
1318
+ <div class="fw">
1319
+ <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
1320
+ <div class="frame capdemo">
1321
+ <div class="deco"></div>
1322
+ <div class="bandline"></div>
1323
+ <div class="bandtag">caption band · 16.7%</div>
1324
+ <div class="stage">
1325
+ <div class="pill">
1326
+ <div class="line">
1327
+ <span class="w spoken">Built</span>
1328
+ <span class="w spoken">for</span>
1329
+ <span class="w active">teams</span>
1330
+ <span class="w">who</span>
1331
+ <span class="w">ship.</span>
1332
+ </div>
1333
+ </div>
1334
+ </div>
1335
+ <div class="pbar" style="width: 50%"></div>
1336
+ </div>
1337
+ </div>
1338
+
1339
+ <div class="fw">
1340
+ <div class="flabel"><b>Settled line</b><span>· all spoken · chip cleared</span></div>
1341
+ <div class="frame capdemo">
1342
+ <div class="stage">
1343
+ <div class="pill">
1344
+ <div class="line">
1345
+ <span class="w spoken">Ship</span>
1346
+ <span class="w spoken">faster</span>
1347
+ <span class="w spoken">today.</span>
1348
+ </div>
1349
+ </div>
1350
+ </div>
1351
+ <div class="pbar" style="width: 100%"></div>
1352
+ </div>
1353
+ </div>
1354
+ </div>
1355
+ </section>
1356
+
1357
+ <div class="foot">
1358
+ <span class="l">Blue Professional</span>
1359
+ <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
1360
+ </div>
1361
+
1362
+ <template id="__bundler_thumbnail">
1363
+ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
1364
+ <rect width="100" height="100" fill="#fdfae7" />
1365
+ <rect x="58" y="0" width="42" height="100" fill="#1e2bfa" opacity="0.08" />
1366
+ <rect x="14" y="40" width="6" height="20" fill="#1e2bfa" />
1367
+ <rect x="26" y="44" width="44" height="6" rx="3" fill="#111111" />
1368
+ <rect x="26" y="56" width="30" height="4" rx="2" fill="#1e2bfa" />
1369
+ </svg>
1370
+ </template>
1371
+ </body>
1372
+ </html>