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