hyperframes 0.8.183 → 0.8.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (314) hide show
  1. package/dist/{add-HW3ZGR36.js → add-ODTNPRGG.js} +14 -14
  2. package/dist/{agentPromptGenerator-VIIPZCJ3.js → agentPromptGenerator-KYO5MKTW.js} +1 -1
  3. package/dist/{animatedGifPrep-EPLN37ZN.js → animatedGifPrep-PEP5GWOJ.js} +10 -9
  4. package/dist/api.js +18 -17
  5. package/dist/{asset-TOASKL3Z.js → asset-EZG42XPA.js} +2 -2
  6. package/dist/{assetCataloger-PZN5HYG2.js → assetCataloger-OHAJFCA7.js} +10 -9
  7. package/dist/{audio-F5OIQVJO.js → audio-65R4T74I.js} +18 -16
  8. package/dist/{auth-YVQLRS3T.js → auth-VP2SIZFN.js} +1 -1
  9. package/dist/{autoUpdate-EG4ZFW4D.js → autoUpdate-RVSUX4SS.js} +2 -2
  10. package/dist/{backgroundChecks-WINNQVR2.js → backgroundChecks-LEHK74NS.js} +3 -3
  11. package/dist/backgroundChecksWorker.js +3 -3
  12. package/dist/{batchRender-PASZTMEE.js → batchRender-3X6CL7PK.js} +5 -5
  13. package/dist/{beats-KGIOEBLW.js → beats-66VPQLSC.js} +6 -6
  14. package/dist/{benchmark-ZNY2L7HN.js → benchmark-PBJVTOJP.js} +10 -10
  15. package/dist/{browser-REAO7RU4.js → browser-TPL5MWGC.js} +3 -3
  16. package/dist/{bundleWithLocalizedFonts-OAYLYC4W.js → bundleWithLocalizedFonts-67MLTHKM.js} +2 -2
  17. package/dist/{capture-WOSF276U.js → capture-F3GNMRZM.js} +14 -13
  18. package/dist/{capture-IK6GWQDD.js → capture-YYRE7EV3.js} +2 -2
  19. package/dist/{captureCompositionFrame-DDZNKYRE.js → captureCompositionFrame-PXV2ISHD.js} +14 -13
  20. package/dist/{catalog-AKTXS7OJ.js → catalog-6SDD3OHF.js} +14 -14
  21. package/dist/{catch-up-O3VZMPVE.js → catch-up-CWIVA5VG.js} +4 -4
  22. package/dist/{check-6E46NIWI.js → check-YQ6REK2S.js} +35 -34
  23. package/dist/{checkBrowser-UNZHQFNH.js → checkBrowser-5XZCBRXM.js} +32 -31
  24. package/dist/{chunk-TOHA5NAU.js → chunk-2TAS5O4P.js} +56 -11
  25. package/dist/{chunk-3Q47QC46.js → chunk-37CNYTQQ.js} +2 -2
  26. package/dist/chunk-3NPOFC43.js +3805 -0
  27. package/dist/{chunk-EEP5Y5IE.js → chunk-46HEFGXJ.js} +1 -1
  28. package/dist/{chunk-GAGMLVCV.js → chunk-4CTNDBE3.js} +2 -2
  29. package/dist/{chunk-CGK4XZ2J.js → chunk-55YELV7B.js} +1 -1
  30. package/dist/{chunk-TJB4GAV6.js → chunk-5GUKZRQN.js} +1 -1
  31. package/dist/{chunk-J4L5TPLS.js → chunk-5UDRPPN2.js} +48 -6
  32. package/dist/{chunk-SAQYJLI6.js → chunk-6ASIXMFP.js} +1 -1
  33. package/dist/{chunk-GPE3WWTO.js → chunk-6GPR3G3C.js} +14 -11
  34. package/dist/{chunk-MIZDJVPZ.js → chunk-6RIZY7OP.js} +1 -1
  35. package/dist/{chunk-5CS4T6C6.js → chunk-7L37AB57.js} +1 -1
  36. package/dist/{chunk-VH5KESLX.js → chunk-7PS6RVWD.js} +1 -1
  37. package/dist/{chunk-U5YVWG5W.js → chunk-7RAY4WZP.js} +3 -3
  38. package/dist/{chunk-COTLNID2.js → chunk-A6QCO474.js} +5 -5
  39. package/dist/{chunk-YMS5FOMC.js → chunk-B2A56S5C.js} +1 -1
  40. package/dist/{chunk-4FQKS7BJ.js → chunk-BH7TTIPN.js} +11 -13
  41. package/dist/{chunk-LBWRQ4XA.js → chunk-BRAPBUPQ.js} +1 -1
  42. package/dist/{chunk-IC2WYONA.js → chunk-CX3USX23.js} +3 -3
  43. package/dist/{chunk-ITSLKUQM.js → chunk-D42NU3DZ.js} +1 -1
  44. package/dist/{chunk-Q6UYKWBG.js → chunk-EMAWIZ54.js} +481 -36
  45. package/dist/{chunk-ZFO3A3QL.js → chunk-EMSDWBG3.js} +2 -2
  46. package/dist/{chunk-KRFAX5JK.js → chunk-ESBMUZXZ.js} +1 -1
  47. package/dist/{chunk-CAHTO62O.js → chunk-F3OPUWQX.js} +7 -7
  48. package/dist/{chunk-R6OV4J4K.js → chunk-FX6RUJUY.js} +3 -3
  49. package/dist/{chunk-F6WHPHLF.js → chunk-G2UANIDX.js} +1 -1
  50. package/dist/{chunk-DEORFAWP.js → chunk-H5SM5PJI.js} +1 -1
  51. package/dist/{chunk-5OGDBU4G.js → chunk-H6UY725W.js} +2 -2
  52. package/dist/{chunk-K2Z5DZBS.js → chunk-HDIRZGK4.js} +1 -1
  53. package/dist/{chunk-TXGZZKDF.js → chunk-HHSJJFVM.js} +2 -2
  54. package/dist/{chunk-VDJO4DJ7.js → chunk-HXUTX5GR.js} +3 -3
  55. package/dist/{chunk-73LTCCZI.js → chunk-I3IH5MV5.js} +19 -23
  56. package/dist/{chunk-3OLIGYWN.js → chunk-I45HL3VP.js} +3 -3
  57. package/dist/{chunk-TYXH3EKP.js → chunk-I5JRXMCV.js} +16 -1
  58. package/dist/{chunk-RZXUQR42.js → chunk-I7QMXZSB.js} +2 -2
  59. package/dist/{chunk-XOVHO3TT.js → chunk-IDFNKFPL.js} +7 -7
  60. package/dist/{chunk-QX4GGPMY.js → chunk-IDGLGXPA.js} +1 -1
  61. package/dist/{chunk-5MBLWFLM.js → chunk-IPDKZ5IN.js} +33 -6
  62. package/dist/{chunk-ANR6WOC3.js → chunk-ISTRDGIX.js} +1 -1
  63. package/dist/{chunk-4UFJWRHG.js → chunk-IVEFOUZI.js} +211 -83
  64. package/dist/chunk-IZCW2NKT.js +29 -0
  65. package/dist/{chunk-X3IA5RYH.js → chunk-J36JVBLR.js} +9 -2
  66. package/dist/{chunk-Z4R35NJS.js → chunk-J5XEZ24I.js} +3 -3
  67. package/dist/{chunk-OH56PXFH.js → chunk-K2ZKXTVL.js} +1 -1
  68. package/dist/{chunk-ATMDOUNN.js → chunk-K73RJB23.js} +2 -2
  69. package/dist/{chunk-NZ3BE2QE.js → chunk-KQ4JEJLF.js} +10 -10
  70. package/dist/{chunk-VFBAKPRC.js → chunk-KROXPHXX.js} +9 -3
  71. package/dist/{chunk-QGOYNPQT.js → chunk-LLFQA7XF.js} +48 -5
  72. package/dist/chunk-LLMSX6V6.js +17 -0
  73. package/dist/{chunk-XR5BSEUF.js → chunk-LYKSTRAY.js} +3 -3
  74. package/dist/{chunk-UNOSCGBG.js → chunk-OAG47RE6.js} +1 -1
  75. package/dist/{chunk-O7N3A7PE.js → chunk-PHMBMOXF.js} +1 -1
  76. package/dist/{chunk-BP4VNTZL.js → chunk-PMMQRJDE.js} +1 -1
  77. package/dist/{chunk-ADDHW2FS.js → chunk-Q447CX26.js} +82 -12
  78. package/dist/{chunk-WT4PYV2J.js → chunk-Q47FAYYK.js} +202 -55
  79. package/dist/{chunk-AKFADCMS.js → chunk-RTBSA3EA.js} +1 -1
  80. package/dist/{chunk-VAK7A2N6.js → chunk-RUEGYANA.js} +11 -11
  81. package/dist/{chunk-OYLO6TYK.js → chunk-RUOG4VB7.js} +1 -1
  82. package/dist/{chunk-EVAQPW6O.js → chunk-SKYPMHQC.js} +4 -4
  83. package/dist/{chunk-B2SZZFWW.js → chunk-SQVRXHOW.js} +3 -3
  84. package/dist/{chunk-CJYAJ3QM.js → chunk-TAX2ZJAP.js} +24 -16
  85. package/dist/{chunk-GTE5WZAM.js → chunk-TOI35GN2.js} +1 -1
  86. package/dist/{chunk-XJHKJXT4.js → chunk-UPR3MU6Z.js} +1 -1
  87. package/dist/{chunk-DLC2FICN.js → chunk-WQLKDL35.js} +2 -1
  88. package/dist/{chunk-3BA2GP4H.js → chunk-X6L6MD5B.js} +5 -5
  89. package/dist/{chunk-XAQDR5Y5.js → chunk-XGHHVYC7.js} +94 -32
  90. package/dist/{chunk-HLBODNGW.js → chunk-XWC7CNPY.js} +1 -1
  91. package/dist/{clean-WNEIVBF3.js → clean-7J6ZCCGV.js} +19 -18
  92. package/dist/cli.js +53 -53
  93. package/dist/{cloud-6GSSDCJL.js → cloud-7IJCJCDD.js} +4 -4
  94. package/dist/{cloudrun-4NEJRE4T.js → cloudrun-UNZRIIDB.js} +7 -7
  95. package/dist/commands/contrast-audit.browser.js +1 -2
  96. package/dist/commands/layout-audit.browser.js +196 -0
  97. package/dist/{compare-2JWQ5ABA.js → compare-Q7VW5JZT.js} +29 -28
  98. package/dist/{compiler-27KQD7KW.js → compiler-KPHYGFXL.js} +6 -6
  99. package/dist/{component-HCRET3MH.js → component-UUBREJKN.js} +3 -3
  100. package/dist/{compositions-HTSQ6SUJ.js → compositions-T4FTKIDP.js} +14 -13
  101. package/dist/{delete-GHQ5UYM7.js → delete-WZQF2IIA.js} +3 -3
  102. package/dist/{deploy-I3Z3NAVA.js → deploy-JU7A3XNC.js} +1 -1
  103. package/dist/{deterministicFonts-JFLSSKRB.js → deterministicFonts-EGAAE7QL.js} +3 -3
  104. package/dist/{dist-SENYPQGW.js → dist-LM7AVHOU.js} +3 -3
  105. package/dist/{dist-WRDLWRMS.js → dist-ULGTPSU4.js} +8 -4
  106. package/dist/docs/data-attributes.md +1 -1
  107. package/dist/{doctor-UGFVQZHI.js → doctor-VSNGRKXJ.js} +14 -13
  108. package/dist/{events-YS4OVX3I.js → events-CRW2DYUT.js} +3 -3
  109. package/dist/{events-BLJGWMNP.js → events-E63YBUL2.js} +3 -3
  110. package/dist/{feedback-AZ3SJ5HF.js → feedback-OSZWVR6N.js} +9 -9
  111. package/dist/{ffmpeg-2AECXG7V.js → ffmpeg-JLH3Z7G7.js} +10 -9
  112. package/dist/{figma-DRYIJQHV.js → figma-2BQNNR53.js} +3 -3
  113. package/dist/fontLocalizeCli.js +13 -12
  114. package/dist/{get-DDEAOFPB.js → get-P2XI53QW.js} +3 -3
  115. package/dist/{gpuPolicy-UDJT2MQK.js → gpuPolicy-NTKQJY75.js} +10 -9
  116. package/dist/{grade-compare-LJKK5NSY.js → grade-compare-OYASIHIB.js} +30 -29
  117. package/dist/{gsapParserAcorn-7NCK2LVT.js → gsapParserAcorn-SKODXC2N.js} +2 -2
  118. package/dist/{help-TQBGYOID.js → help-HK6K2N4G.js} +1 -1
  119. package/dist/{history-5TOOCF2Y.js → history-JMTYKLXW.js} +6 -6
  120. package/dist/hyperframe.manifest.json +1 -1
  121. package/dist/hyperframe.runtime.iife.js +65 -65
  122. package/dist/hyperframes-player.global.js +1 -1
  123. package/dist/{info-ENI5MP4W.js → info-AW7CIVRE.js} +9 -9
  124. package/dist/{init-JXPXWV3G.js → init-6KIDG4LB.js} +31 -30
  125. package/dist/{inspect-WZNYQ5AB.js → inspect-B7BLYMRZ.js} +30 -29
  126. package/dist/{installer-3SGRBLJW.js → installer-ZP2LQZUQ.js} +7 -7
  127. package/dist/{keyframes-HEOC4CT4.js → keyframes-EQ36A5JE.js} +7 -7
  128. package/dist/{lambda-2VHQ4AL2.js → lambda-E6VURLIS.js} +9 -9
  129. package/dist/{layout-7WEUNO6T.js → layout-XYC64QQQ.js} +30 -29
  130. package/dist/{lint-5YMAF3L7.js → lint-V5DJYWBX.js} +9 -9
  131. package/dist/{lintProject-C2ONSH2U.js → lintProject-JATQKR64.js} +3 -3
  132. package/dist/{list-BIE3X7CO.js → list-RUGVRTVD.js} +3 -3
  133. package/dist/{login-YDIGJWCG.js → login-ZTKGKXGS.js} +4 -4
  134. package/dist/{manager-D2UV6RDQ.js → manager-JUP7PM6N.js} +11 -10
  135. package/dist/{media-treatment-FSKHPMWA.js → media-treatment-VIUPK4OR.js} +16 -15
  136. package/dist/{models-COEK6LXG.js → models-LJS2HBOZ.js} +14 -13
  137. package/dist/{motionShot-HYZ2ZGJQ.js → motionShot-3UAXZ7SN.js} +17 -16
  138. package/dist/{normalize-audio-UXR6WQ7Q.js → normalize-audio-SBYI4YIH.js} +4 -4
  139. package/dist/{open-OFT2GIDG.js → open-S27TUD3A.js} +14 -14
  140. package/dist/{parakeetRunner-4NZ3QXS3.js → parakeetRunner-ETLMLJ4L.js} +15 -14
  141. package/dist/{pipeline-ZKE54JMG.js → pipeline-I2M22M24.js} +11 -10
  142. package/dist/{play-2VG77FT6.js → play-COJU6VJK.js} +22 -21
  143. package/dist/{preflight-QTWDIM5C.js → preflight-FZ24NCHH.js} +11 -10
  144. package/dist/{present-OONXQLJG.js → present-YAHKLC5D.js} +18 -17
  145. package/dist/{preview-6RZJFU76.js → preview-KQOEU5YE.js} +27 -26
  146. package/dist/{producer-6YM3UH3B.js → producer-DTNNG4T6.js} +1 -1
  147. package/dist/{projectConfig-YMW4P2X6.js → projectConfig-4A76VYUP.js} +9 -9
  148. package/dist/{publication-SEINUAPZ.js → publication-SQPMC2W3.js} +4 -4
  149. package/dist/{publish-KZBTBWFO.js → publish-QUEJBGGT.js} +13 -12
  150. package/dist/{remove-background-BIQNMIR7.js → remove-background-FP2ETAQH.js} +12 -11
  151. package/dist/{render-FIH37HJA.js → render-BIFIL4U6.js} +32 -31
  152. package/dist/render-GQFXJWLV.js +1504 -0
  153. package/dist/{render-LW76HOMJ.js → render-P664SMC7.js} +5 -5
  154. package/dist/{render-batch-POLEEYD4.js → render-batch-ZCPMYH6Z.js} +5 -5
  155. package/dist/renderSetupWorker.js +3 -3
  156. package/dist/{resolver-O2SED3XB.js → resolver-BUC2GFZQ.js} +6 -6
  157. package/dist/{sherpa-HTFFFTVQ.js → sherpa-HFT6XEP6.js} +14 -13
  158. package/dist/skills/hyperframes/SKILL.md +52 -174
  159. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/FRAME.md +289 -0
  160. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/caption-skin.html +220 -0
  161. package/dist/skills/hyperframes/assets/frame-presets/biennale-yellow/frame-showcase.html +1214 -0
  162. package/dist/skills/hyperframes/assets/frame-presets/blockframe/FRAME.md +275 -0
  163. package/dist/skills/hyperframes/assets/frame-presets/blockframe/caption-skin.html +223 -0
  164. package/dist/skills/hyperframes/assets/frame-presets/blockframe/frame-showcase.html +1347 -0
  165. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/FRAME.md +307 -0
  166. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/caption-skin.html +222 -0
  167. package/dist/skills/hyperframes/assets/frame-presets/blue-professional/frame-showcase.html +1372 -0
  168. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/FRAME.md +275 -0
  169. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/caption-skin.html +229 -0
  170. package/dist/skills/hyperframes/assets/frame-presets/bold-poster/frame-showcase.html +1140 -0
  171. package/dist/skills/hyperframes/assets/frame-presets/broadside/FRAME.md +284 -0
  172. package/dist/skills/hyperframes/assets/frame-presets/broadside/caption-skin.html +224 -0
  173. package/dist/skills/hyperframes/assets/frame-presets/broadside/frame-showcase.html +1166 -0
  174. package/dist/skills/hyperframes/assets/frame-presets/capsule/FRAME.md +284 -0
  175. package/dist/skills/hyperframes/assets/frame-presets/capsule/caption-skin.html +223 -0
  176. package/dist/skills/hyperframes/assets/frame-presets/capsule/frame-showcase.html +1465 -0
  177. package/dist/skills/hyperframes/assets/frame-presets/cartesian/FRAME.md +278 -0
  178. package/dist/skills/hyperframes/assets/frame-presets/cartesian/caption-skin.html +221 -0
  179. package/dist/skills/hyperframes/assets/frame-presets/cartesian/frame-showcase.html +1263 -0
  180. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/FRAME.md +265 -0
  181. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/caption-skin.html +237 -0
  182. package/dist/skills/hyperframes/assets/frame-presets/cobalt-grid/frame-showcase.html +1468 -0
  183. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/FRAME.md +277 -0
  184. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/caption-skin.html +223 -0
  185. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-400.woff2 +0 -0
  186. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-700.woff2 +0 -0
  187. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-400.woff2 +0 -0
  188. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-700.woff2 +0 -0
  189. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 +0 -0
  190. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 +0 -0
  191. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt +93 -0
  192. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-inter.txt +93 -0
  193. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt +93 -0
  194. package/dist/skills/hyperframes/assets/frame-presets/code-editorial/frame-showcase.html +1438 -0
  195. package/dist/skills/hyperframes/assets/frame-presets/coral/FRAME.md +314 -0
  196. package/dist/skills/hyperframes/assets/frame-presets/coral/caption-skin.html +225 -0
  197. package/dist/skills/hyperframes/assets/frame-presets/coral/frame-showcase.html +1268 -0
  198. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/FRAME.md +333 -0
  199. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/caption-skin.html +226 -0
  200. package/dist/skills/hyperframes/assets/frame-presets/creative-mode/frame-showcase.html +1330 -0
  201. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/FRAME.md +274 -0
  202. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/caption-skin.html +229 -0
  203. package/dist/skills/hyperframes/assets/frame-presets/daisy-days/frame-showcase.html +1444 -0
  204. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/FRAME.md +265 -0
  205. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/caption-skin.html +222 -0
  206. package/dist/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html +1273 -0
  207. package/dist/skills/hyperframes/references/captions.md +46 -0
  208. package/dist/skills/hyperframes/references/film.md +47 -0
  209. package/dist/skills/hyperframes/references/format.md +157 -0
  210. package/dist/skills/hyperframes/references/look.md +69 -0
  211. package/dist/skills/hyperframes/references/motion.md +94 -0
  212. package/dist/skills/hyperframes/references/overlays.md +39 -0
  213. package/dist/skills/hyperframes/references/plugin-installation.md +3 -3
  214. package/dist/skills/hyperframes/references/review.md +51 -0
  215. package/dist/skills/hyperframes/references/runtimes.md +43 -0
  216. package/dist/skills/hyperframes/references/skill-lifecycle.md +21 -13
  217. package/dist/skills/hyperframes/references/sound.md +43 -0
  218. package/dist/skills/hyperframes/references/spec.md +76 -0
  219. package/dist/skills/hyperframes/references/story.md +103 -0
  220. package/dist/skills/hyperframes/references/storyboard-format.md +30 -22
  221. package/dist/skills/hyperframes/references/storyboard.md +36 -0
  222. package/dist/skills/hyperframes/references/types/3d.md +25 -0
  223. package/dist/skills/hyperframes/references/types/character.md +20 -0
  224. package/dist/skills/hyperframes/references/types/data.md +19 -0
  225. package/dist/skills/hyperframes/references/types/explainer.md +34 -0
  226. package/dist/skills/hyperframes/references/types/launch.md +31 -0
  227. package/dist/skills/hyperframes/references/types/music.md +24 -0
  228. package/dist/skills/hyperframes/references/types/vertical.md +23 -0
  229. package/dist/skills/hyperframes/scripts/bake-basemap.mjs +324 -0
  230. package/dist/skills/hyperframes/scripts/lib/main-module.test.mjs +1 -6
  231. package/dist/skills/hyperframes/scripts/locate.mjs +228 -0
  232. package/dist/skills/hyperframes-cli/SKILL.md +76 -179
  233. package/dist/skills/hyperframes-cli/references/beats.md +1 -1
  234. package/dist/skills/hyperframes-cli/references/cloud.md +2 -2
  235. package/dist/skills/hyperframes-cli/references/cloudrun.md +1 -1
  236. package/dist/skills/hyperframes-cli/references/conventions.md +17 -0
  237. package/dist/skills/hyperframes-cli/references/feedback.md +14 -0
  238. package/dist/skills/hyperframes-cli/references/init-and-scaffold.md +11 -7
  239. package/dist/skills/hyperframes-cli/references/lambda.md +1 -1
  240. package/dist/skills/hyperframes-cli/references/lint-validate-inspect.md +19 -8
  241. package/dist/skills/hyperframes-cli/references/preview-render.md +8 -2
  242. package/dist/skills/hyperframes-cli/references/upgrade-info-misc.md +8 -0
  243. package/dist/skills/media-use/SKILL.md +47 -91
  244. package/dist/skills/media-use/audio/references/bgm.md +1 -1
  245. package/dist/skills/media-use/audio/references/captions/authoring.md +1 -2
  246. package/dist/skills/media-use/audio/references/captions/motion.md +5 -5
  247. package/dist/skills/media-use/audio/references/tts.md +0 -3
  248. package/dist/skills/media-use/audio/scripts/audio.mjs +5 -6
  249. package/dist/skills/media-use/audio/scripts/carve.mjs +560 -0
  250. package/dist/skills/media-use/audio/scripts/carve.test.mjs +254 -0
  251. package/dist/skills/media-use/audio/scripts/extract-audio-data.py +199 -0
  252. package/dist/skills/media-use/references/local.md +24 -0
  253. package/dist/skills/media-use/references/memory.md +4 -4
  254. package/dist/skills/media-use/references/mixing.md +71 -0
  255. package/dist/skills/media-use/references/operations.md +1 -1
  256. package/dist/skills/media-use/scripts/compatibility.test.mjs +1 -56
  257. package/dist/skills/media-use/scripts/lib/prefs-store.mjs +1 -1
  258. package/dist/skills/media-use/scripts/lib/recipe-store.mjs +1 -1
  259. package/dist/skills/media-use/scripts/prefs.mjs +2 -3
  260. package/dist/skills/media-use/scripts/recipe.mjs +1 -3
  261. package/dist/{skills-J6MBGS5O.js → skills-3WEVO3NU.js} +20 -13
  262. package/dist/{skillsUpdateCheck-ZAXNLBF3.js → skillsUpdateCheck-BFPWFOK5.js} +3 -3
  263. package/dist/{snapshot-TL7TTFS6.js → snapshot-WDQ6S7CJ.js} +458 -98
  264. package/dist/{src-Z5H5N5T4.js → src-NPR2JZOJ.js} +15 -11
  265. package/dist/{src-EL6HGIS4.js → src-RZ574OKP.js} +9 -8
  266. package/dist/{staticProjectServer-EO7X7RAY.js → staticProjectServer-FTGTEZI4.js} +18 -17
  267. package/dist/studio/assets/{hyperframes-player-hz_VqxBZ.js → hyperframes-player-CoOdf435.js} +1 -1
  268. package/dist/studio/assets/{index-CV_ojgp5.js → index-CR85xg2x.js} +1 -1
  269. package/dist/studio/assets/{index-S1ceEagc.js → index-C_6rTpaB.js} +5 -5
  270. package/dist/studio/index.html +1 -1
  271. package/dist/{studio-api-CUZDC5B3.js → studio-api-TAWB7B23.js} +12 -11
  272. package/dist/{studioServer-EZPRV43Y.js → studioServer-HRQGJTBU.js} +49 -48
  273. package/dist/{telemetry-LFUVHARP.js → telemetry-QZ6HJF4W.js} +3 -3
  274. package/dist/templates/_shared/AGENTS.md +14 -19
  275. package/dist/templates/_shared/CLAUDE.md +14 -19
  276. package/dist/templates/blank/index.html +10 -4
  277. package/dist/{timeline-GSH743JE.js → timeline-IKUEW42T.js} +21 -19
  278. package/dist/{tokens-3ZMPSH7B.js → tokens-AUGUEWHS.js} +2 -2
  279. package/dist/{transcribe-4SHNDPWW.js → transcribe-7734CG3N.js} +19 -18
  280. package/dist/{transcribe-TV7JBZQS.js → transcribe-FWU6EMEO.js} +13 -12
  281. package/dist/{updateCheck-W7FTFOQF.js → updateCheck-VIPQ3FPW.js} +2 -2
  282. package/dist/{upgrade-7YYYNAPF.js → upgrade-4VNDQTVO.js} +2 -2
  283. package/dist/{urlDownloader-PQSUS2CP.js → urlDownloader-6CXL4CL7.js} +9 -8
  284. package/dist/{validate-GCHAEVXM.js → validate-QWCMVWID.js} +24 -23
  285. package/dist/{video-KGN7NJS5.js → video-245Q5WN4.js} +10 -9
  286. package/dist/warmCheck.js +37 -36
  287. package/package.json +1 -1
  288. package/dist/chunk-GMNHAOMJ.js +0 -3805
  289. package/dist/render-65K3K6SD.js +0 -719
  290. package/dist/skills/hyperframes/references/brief-contract.md +0 -108
  291. package/dist/skills/hyperframes/references/brief-format.md +0 -72
  292. package/dist/skills/hyperframes/references/capability-menu.md +0 -47
  293. package/dist/skills/hyperframes/references/frame-worker-core.md +0 -82
  294. package/dist/skills/hyperframes/references/intent-interview.md +0 -73
  295. package/dist/skills/hyperframes/references/pitch-round.md +0 -40
  296. package/dist/skills/hyperframes/references/production-loop.md +0 -26
  297. package/dist/skills/hyperframes/references/review-loop.md +0 -37
  298. package/dist/skills/hyperframes/references/route-briefs.md +0 -11
  299. package/dist/skills/hyperframes/references/routes/embedded-captions.md +0 -11
  300. package/dist/skills/hyperframes/references/routes/faceless-explainer.md +0 -12
  301. package/dist/skills/hyperframes/references/routes/general-video.md +0 -12
  302. package/dist/skills/hyperframes/references/routes/motion-graphics.md +0 -11
  303. package/dist/skills/hyperframes/references/routes/music-to-video.md +0 -12
  304. package/dist/skills/hyperframes/references/routes/pr-to-video.md +0 -28
  305. package/dist/skills/hyperframes/references/routes/product-launch-video.md +0 -13
  306. package/dist/skills/hyperframes/references/routes/remotion-to-hyperframes.md +0 -9
  307. package/dist/skills/hyperframes/references/routes/slideshow.md +0 -11
  308. package/dist/skills/hyperframes/references/routes/talking-head-recut.md +0 -11
  309. package/dist/skills/hyperframes/references/script-format.md +0 -52
  310. package/dist/skills/hyperframes/references/subagent-dispatch.md +0 -35
  311. package/dist/skills/hyperframes/references/workflow-catalog.md +0 -10
  312. package/dist/skills/hyperframes/scripts/lib/frame-packets-core.mjs +0 -176
  313. package/dist/skills/media-use/audio/scripts/lib/host-audio.mjs +0 -28
  314. package/dist/skills/media-use/audio/scripts/lib/host-audio.test.mjs +0 -106
package/dist/skills/hyperframes/assets/frame-presets/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>