@cyberskill/design 1.1.1 → 1.3.8

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 (481) hide show
  1. package/DESIGN.md +28 -5
  2. package/README.md +23 -22
  3. package/SKILL.md +7 -7
  4. package/THIRD-PARTY-NOTICES.md +35 -0
  5. package/VERSION +1 -1
  6. package/_ds_bundle.js +1495 -1733
  7. package/_ds_manifest.json +1 -1
  8. package/_esm/cs.mjs +18 -4
  9. package/_esm/react.d.ts +2 -0
  10. package/_esm/react.mjs +7 -1
  11. package/_vendor/NOTICE.md +16 -0
  12. package/_vendor/babel/README.md +7 -0
  13. package/_vendor/babel/babel.min.js +4 -0
  14. package/_vendor/react/README.md +3 -0
  15. package/_vendor/react/react-dom.production.min.js +1 -0
  16. package/_vendor/react/react.production.min.js +1 -0
  17. package/assets/aurora-hoa.webp +0 -0
  18. package/assets/aurora-kim.webp +0 -0
  19. package/assets/aurora-moc.webp +0 -0
  20. package/assets/aurora-tho.webp +0 -0
  21. package/assets/aurora-thuy.webp +0 -0
  22. package/base/a11y.css +18 -0
  23. package/base/ai.css +9 -4
  24. package/base/collections.css +18 -7
  25. package/base/components.css +16 -4
  26. package/base/controls.css +116 -66
  27. package/base/data.css +4 -4
  28. package/base/feedback.css +14 -2
  29. package/base/forms.css +10 -4
  30. package/base/glass.css +7 -1
  31. package/base/interaction.css +6 -2
  32. package/base/navigation.css +9 -3
  33. package/base/reset.css +7 -1
  34. package/base/responsive.css +38 -12
  35. package/base/shell.css +15 -3
  36. package/components/_i18n/i18n.js +41 -4
  37. package/components/_i18n/strings.js +89 -22
  38. package/components/ai/ChatMessage.d.ts +2 -0
  39. package/components/ai/ChatMessage.jsx +8 -4
  40. package/components/ai/ConfidenceMeter.d.ts +2 -0
  41. package/components/ai/ConfidenceMeter.jsx +8 -6
  42. package/components/ai/HumanReviewGate.d.ts +2 -0
  43. package/components/ai/PromptInput.d.ts +2 -0
  44. package/components/ai/TypingIndicator.d.ts +2 -0
  45. package/components/ai/ai-conversation.card.html +3 -3
  46. package/components/ai/ai-lumi.card.html +3 -3
  47. package/components/ai/ai.card.html +3 -3
  48. package/components/brand/brand.card.html +3 -3
  49. package/components/button/buttons.card.html +3 -3
  50. package/components/data/Image.jsx +18 -2
  51. package/components/data/Sortable.d.ts +5 -1
  52. package/components/data/Sortable.jsx +42 -9
  53. package/components/data/Sortable.prompt.md +4 -2
  54. package/components/data/Terminal.jsx +3 -2
  55. package/components/data/Tooltip.d.ts +2 -0
  56. package/components/data/Tooltip.jsx +6 -3
  57. package/components/data/Tree.d.ts +2 -1
  58. package/components/data/Tree.jsx +137 -16
  59. package/components/data/Tree.prompt.md +1 -1
  60. package/components/data/Watermark.jsx +11 -3
  61. package/components/data/collections.card.html +3 -3
  62. package/components/data/data.card.html +3 -3
  63. package/components/datatable/DataGrid.jsx +10 -1
  64. package/components/datatable/DataTable.d.ts +24 -1
  65. package/components/datatable/DataTable.jsx +78 -5
  66. package/components/datatable/DataTable.prompt.md +2 -1
  67. package/components/datatable/datatable.card.html +20 -16
  68. package/components/dialog/Dialog.jsx +13 -45
  69. package/components/dialog/dialog.card.html +3 -3
  70. package/components/feedback/Alert.d.ts +2 -0
  71. package/components/feedback/Alert.jsx +8 -2
  72. package/components/feedback/EmptyState.d.ts +2 -0
  73. package/components/feedback/EmptyState.jsx +6 -3
  74. package/components/feedback/ProgressBar.d.ts +2 -0
  75. package/components/feedback/ProgressBar.jsx +9 -4
  76. package/components/feedback/Toast.jsx +15 -1
  77. package/components/feedback/Toast.prompt.md +2 -1
  78. package/components/feedback/feedback-2.card.html +3 -3
  79. package/components/feedback/feedback.card.html +3 -3
  80. package/components/forms/Cascader.jsx +76 -8
  81. package/components/forms/Editor.jsx +37 -2
  82. package/components/forms/FileUpload.d.ts +2 -0
  83. package/components/forms/FileUpload.jsx +22 -8
  84. package/components/forms/Form.d.ts +3 -1
  85. package/components/forms/Form.jsx +9 -1
  86. package/components/forms/Form.prompt.md +1 -1
  87. package/components/forms/Mentions.d.ts +1 -1
  88. package/components/forms/Mentions.jsx +59 -7
  89. package/components/forms/Mentions.prompt.md +3 -1
  90. package/components/forms/Rating.d.ts +3 -2
  91. package/components/forms/Rating.jsx +34 -3
  92. package/components/forms/Rating.prompt.md +1 -1
  93. package/components/forms/Select.d.ts +2 -0
  94. package/components/forms/Select.jsx +6 -2
  95. package/components/forms/Slider.d.ts +2 -0
  96. package/components/forms/Slider.jsx +5 -2
  97. package/components/forms/Switch.d.ts +2 -0
  98. package/components/forms/Switch.jsx +15 -3
  99. package/components/forms/TimePicker.jsx +3 -1
  100. package/components/forms/Toggle.d.ts +2 -0
  101. package/components/forms/Toggle.jsx +14 -2
  102. package/components/forms/forms-2.card.html +3 -3
  103. package/components/forms/forms.card.html +3 -3
  104. package/components/icon/Icon.d.ts +1 -1
  105. package/components/icon/Icon.jsx +1 -0
  106. package/components/icon/Icon.prompt.md +1 -1
  107. package/components/icon/icon.card.html +3 -3
  108. package/components/logo/logo.card.html +3 -3
  109. package/components/navigation/CommandPalette.d.ts +2 -0
  110. package/components/navigation/CommandPalette.jsx +22 -7
  111. package/components/navigation/Menu.d.ts +2 -0
  112. package/components/navigation/Menu.jsx +60 -6
  113. package/components/navigation/Steps.d.ts +2 -0
  114. package/components/navigation/Steps.jsx +6 -3
  115. package/components/navigation/Tabs.d.ts +2 -0
  116. package/components/navigation/Tabs.jsx +6 -3
  117. package/components/navigation/Toolbar.d.ts +3 -2
  118. package/components/navigation/Toolbar.jsx +119 -12
  119. package/components/navigation/Toolbar.prompt.md +1 -1
  120. package/components/navigation/navigation.card.html +3 -3
  121. package/components/navigation/shell.card.html +3 -3
  122. package/components/overlays/AlertDialog.jsx +19 -49
  123. package/components/overlays/ContextMenu.d.ts +2 -0
  124. package/components/overlays/ContextMenu.jsx +6 -3
  125. package/components/overlays/Drawer.d.ts +2 -0
  126. package/components/overlays/Drawer.jsx +24 -20
  127. package/components/overlays/OverlayManager.d.ts +40 -0
  128. package/components/overlays/OverlayManager.jsx +214 -0
  129. package/components/overlays/OverlayManager.prompt.md +12 -0
  130. package/components/overlays/Tour.jsx +14 -7
  131. package/components/overlays/alertdialog.card.html +3 -3
  132. package/components/overlays/overlays.card.html +3 -3
  133. package/components/textfield/textfield.card.html +3 -3
  134. package/dist/styles.min.css +2252 -0
  135. package/docs/benchmark-rubric.md +1 -1
  136. package/docs/ci-cd.md +19 -12
  137. package/docs/consumer-grant.md +3 -0
  138. package/docs/consuming.md +13 -13
  139. package/docs/contrast-report.md +79 -1
  140. package/docs/conventions.md +21 -8
  141. package/docs/decisions.md +45 -7
  142. package/docs/deploy.md +17 -6
  143. package/docs/design-styles.md +2 -2
  144. package/docs/quality-gates.md +35 -15
  145. package/docs/release-notes.md +2 -2
  146. package/docs/release-runbook.md +78 -0
  147. package/docs/sync.md +2 -2
  148. package/docs/vi/benchmark-rubric.md +1 -1
  149. package/docs/vi/ci-cd.md +17 -12
  150. package/docs/vi/consumer-grant.md +3 -0
  151. package/docs/vi/consuming.md +13 -13
  152. package/docs/vi/contrast-report.md +79 -1
  153. package/docs/vi/conventions.md +20 -7
  154. package/docs/vi/decisions.md +43 -6
  155. package/docs/vi/deploy.md +17 -6
  156. package/docs/vi/quality-gates.md +34 -15
  157. package/docs/vi/release-notes.md +2 -2
  158. package/docs/vi/release-runbook.md +78 -0
  159. package/docs/vi/sync.md +2 -2
  160. package/docs/viewer.html +2 -2
  161. package/fonts/OFL.txt +98 -0
  162. package/guidelines/atomic-view.html +13 -9
  163. package/guidelines/brand-imagery.html +1 -1
  164. package/guidelines/elements-variants.html +5 -5
  165. package/guidelines/spacing-breakpoints.html +2 -1
  166. package/guidelines/surfaces-glass.html +1 -1
  167. package/llms.txt +5 -5
  168. package/package.json +38 -10
  169. package/templates/_ds-base.canonical.js +55 -0
  170. package/templates/ai-cluster-demo.html +2 -2
  171. package/templates/app-shell/AppShell.dc.html +7 -5
  172. package/templates/app-shell/content-schema.json +7 -0
  173. package/templates/app-shell/ds-base.js +33 -1
  174. package/templates/app-shell/support.js +13 -20
  175. package/templates/article/Article.dc.html +7 -3
  176. package/templates/article/content-schema.json +7 -0
  177. package/templates/article/ds-base.js +33 -1
  178. package/templates/article/support.js +13 -20
  179. package/templates/auth/Auth.dc.html +33 -12
  180. package/templates/auth/content-schema.json +37 -0
  181. package/templates/auth/ds-base.js +33 -1
  182. package/templates/auth/support.js +13 -20
  183. package/templates/bod-deck/BodDeck.dc.html +11 -10
  184. package/templates/bod-deck/ds-base.js +33 -1
  185. package/templates/bod-deck/support.js +13 -20
  186. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +4 -3
  187. package/templates/bod-investor-update/ds-base.js +33 -1
  188. package/templates/bod-investor-update/support.js +13 -20
  189. package/templates/bod-memo/BodMemo.dc.html +6 -5
  190. package/templates/bod-memo/ds-base.js +33 -1
  191. package/templates/bod-memo/support.js +13 -20
  192. package/templates/bod-minutes/BodMinutes.dc.html +2 -1
  193. package/templates/bod-minutes/ds-base.js +33 -1
  194. package/templates/bod-minutes/support.js +13 -20
  195. package/templates/bod-report/BodReport.dc.html +3 -2
  196. package/templates/bod-report/ds-base.js +33 -1
  197. package/templates/bod-report/support.js +13 -20
  198. package/templates/bod-resolution/BodResolution.dc.html +5 -4
  199. package/templates/bod-resolution/ds-base.js +33 -1
  200. package/templates/bod-resolution/support.js +13 -20
  201. package/templates/culture-event-invite/CultureEventInvite.dc.html +3 -2
  202. package/templates/culture-event-invite/ds-base.js +33 -1
  203. package/templates/culture-event-invite/support.js +13 -20
  204. package/templates/dashboard/Dashboard.dc.html +10 -6
  205. package/templates/dashboard/content-schema.json +7 -0
  206. package/templates/dashboard/ds-base.js +33 -1
  207. package/templates/dashboard/support.js +13 -20
  208. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +4 -3
  209. package/templates/delivery-change-note/ds-base.js +33 -1
  210. package/templates/delivery-change-note/support.js +13 -20
  211. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +3 -2
  212. package/templates/delivery-kickoff/ds-base.js +33 -1
  213. package/templates/delivery-kickoff/support.js +13 -20
  214. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +6 -5
  215. package/templates/delivery-qbr-deck/ds-base.js +33 -1
  216. package/templates/delivery-qbr-deck/support.js +13 -20
  217. package/templates/delivery-runbook/DeliveryRunbook.dc.html +5 -4
  218. package/templates/delivery-runbook/ds-base.js +33 -1
  219. package/templates/delivery-runbook/support.js +13 -20
  220. package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +3 -2
  221. package/templates/delivery-status-email/ds-base.js +33 -1
  222. package/templates/delivery-status-email/support.js +13 -20
  223. package/templates/doc-style-guide/DocStyleGuide.dc.html +67 -64
  224. package/templates/doc-style-guide/ds-base.js +33 -1
  225. package/templates/doc-style-guide/support.js +13 -20
  226. package/templates/doc-suite-index/DocSuiteIndex.dc.html +46 -45
  227. package/templates/doc-suite-index/ds-base.js +33 -1
  228. package/templates/doc-suite-index/support.js +13 -20
  229. package/templates/doc-templates/DocTemplates.dc.html +42 -41
  230. package/templates/doc-templates/ds-base.js +33 -1
  231. package/templates/doc-templates/support.js +13 -20
  232. package/templates/email/Email.dc.html +3 -2
  233. package/templates/email/ds-base.js +33 -1
  234. package/templates/email/support.js +13 -20
  235. package/templates/email-safe/email-announcement.html +2 -2
  236. package/templates/email-safe/email-dunning.html +2 -2
  237. package/templates/email-safe/email-investor.html +2 -2
  238. package/templates/email-safe/email-launch.html +2 -2
  239. package/templates/email-safe/email-newsletter.html +2 -2
  240. package/templates/email-safe/email-status.html +2 -2
  241. package/templates/email-safe/email-transactional.html +2 -2
  242. package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +6 -5
  243. package/templates/finance-dunning-email/ds-base.js +33 -1
  244. package/templates/finance-dunning-email/support.js +13 -20
  245. package/templates/finance-expense-report/FinanceExpenseReport.dc.html +4 -3
  246. package/templates/finance-expense-report/ds-base.js +33 -1
  247. package/templates/finance-expense-report/support.js +13 -20
  248. package/templates/finance-invoice/FinanceInvoice.dc.html +6 -5
  249. package/templates/finance-invoice/ds-base.js +33 -1
  250. package/templates/finance-invoice/support.js +13 -20
  251. package/templates/finance-quote/FinanceQuote.dc.html +6 -5
  252. package/templates/finance-quote/ds-base.js +33 -1
  253. package/templates/finance-quote/support.js +13 -20
  254. package/templates/hr-announcement/HrAnnouncement.dc.html +5 -4
  255. package/templates/hr-announcement/ds-base.js +33 -1
  256. package/templates/hr-announcement/support.js +13 -20
  257. package/templates/hr-interview-kit/HrInterviewKit.dc.html +5 -4
  258. package/templates/hr-interview-kit/ds-base.js +33 -1
  259. package/templates/hr-interview-kit/support.js +13 -20
  260. package/templates/hr-offboarding/HrOffboarding.dc.html +2 -1
  261. package/templates/hr-offboarding/ds-base.js +33 -1
  262. package/templates/hr-offboarding/support.js +13 -20
  263. package/templates/hr-performance-review/HrPerformanceReview.dc.html +2 -1
  264. package/templates/hr-performance-review/ds-base.js +33 -1
  265. package/templates/hr-performance-review/support.js +13 -20
  266. package/templates/hr-pip/HrPip.dc.html +2 -1
  267. package/templates/hr-pip/ds-base.js +33 -1
  268. package/templates/hr-pip/support.js +13 -20
  269. package/templates/kitchen-sink.html +9 -4
  270. package/templates/legal-msa/LegalMsa.dc.html +2 -1
  271. package/templates/legal-msa/ds-base.js +33 -1
  272. package/templates/legal-msa/support.js +13 -20
  273. package/templates/legal-sow/LegalSow.dc.html +2 -1
  274. package/templates/legal-sow/ds-base.js +33 -1
  275. package/templates/legal-sow/support.js +13 -20
  276. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +3 -2
  277. package/templates/marketing-campaign-brief/ds-base.js +33 -1
  278. package/templates/marketing-campaign-brief/support.js +13 -20
  279. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +6 -5
  280. package/templates/marketing-case-study/ds-base.js +33 -1
  281. package/templates/marketing-case-study/support.js +13 -20
  282. package/templates/marketing-launch/MarketingLaunch.dc.html +6 -5
  283. package/templates/marketing-launch/ds-base.js +33 -1
  284. package/templates/marketing-launch/support.js +13 -20
  285. package/templates/marketing-newsletter/MarketingNewsletter.dc.html +13 -12
  286. package/templates/marketing-newsletter/ds-base.js +33 -1
  287. package/templates/marketing-newsletter/support.js +13 -20
  288. package/templates/marketing-page/MarketingPage.dc.html +19 -14
  289. package/templates/marketing-page/content-schema.json +1 -0
  290. package/templates/marketing-page/ds-base.js +33 -1
  291. package/templates/marketing-page/support.js +13 -20
  292. package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
  293. package/templates/marketing-press-release/ds-base.js +33 -1
  294. package/templates/marketing-press-release/support.js +13 -20
  295. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +5 -4
  296. package/templates/marketing-social-kit/ds-base.js +33 -1
  297. package/templates/marketing-social-kit/support.js +13 -20
  298. package/templates/sales-one-pager/SalesOnePager.dc.html +5 -4
  299. package/templates/sales-one-pager/ds-base.js +33 -1
  300. package/templates/sales-one-pager/support.js +13 -20
  301. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +7 -6
  302. package/templates/sales-proposal-deck/ds-base.js +33 -1
  303. package/templates/sales-proposal-deck/support.js +13 -20
  304. package/templates/settings/Settings.dc.html +7 -3
  305. package/templates/settings/content-schema.json +7 -0
  306. package/templates/settings/ds-base.js +33 -1
  307. package/templates/settings/support.js +13 -20
  308. package/templates/slide-deck/SlideDeck.dc.html +5 -4
  309. package/templates/slide-deck/ds-base.js +33 -1
  310. package/templates/slide-deck/support.js +13 -20
  311. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +2 -1
  312. package/templates/team-meeting-agenda/ds-base.js +33 -1
  313. package/templates/team-meeting-agenda/support.js +13 -20
  314. package/templates/tech-incident-report/TechIncidentReport.dc.html +3 -2
  315. package/templates/tech-incident-report/ds-base.js +33 -1
  316. package/templates/tech-incident-report/support.js +13 -20
  317. package/templates/tech-release-notes/TechReleaseNotes.dc.html +6 -5
  318. package/templates/tech-release-notes/ds-base.js +33 -1
  319. package/templates/tech-release-notes/support.js +13 -20
  320. package/templates/tech-retro/TechRetro.dc.html +4 -3
  321. package/templates/tech-retro/ds-base.js +33 -1
  322. package/templates/tech-retro/support.js +13 -20
  323. package/templates/tech-rfc/TechRfc.dc.html +3 -2
  324. package/templates/tech-rfc/ds-base.js +33 -1
  325. package/templates/tech-rfc/support.js +13 -20
  326. package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +36 -35
  327. package/templates/vn-appointment-transfer/ds-base.js +33 -1
  328. package/templates/vn-appointment-transfer/support.js +13 -20
  329. package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +27 -26
  330. package/templates/vn-certificate-of-employment/ds-base.js +33 -1
  331. package/templates/vn-certificate-of-employment/support.js +13 -20
  332. package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +44 -43
  333. package/templates/vn-code-of-conduct/ds-base.js +33 -1
  334. package/templates/vn-code-of-conduct/support.js +13 -20
  335. package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +53 -52
  336. package/templates/vn-compensation-regulation/ds-base.js +33 -1
  337. package/templates/vn-compensation-regulation/support.js +13 -20
  338. package/templates/vn-contract-amendment/VnContractAmendment.dc.html +41 -40
  339. package/templates/vn-contract-amendment/ds-base.js +33 -1
  340. package/templates/vn-contract-amendment/support.js +13 -20
  341. package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +50 -49
  342. package/templates/vn-contractor-agreement/ds-base.js +33 -1
  343. package/templates/vn-contractor-agreement/support.js +13 -20
  344. package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +54 -53
  345. package/templates/vn-data-protection-policy/ds-base.js +33 -1
  346. package/templates/vn-data-protection-policy/support.js +13 -20
  347. package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +72 -71
  348. package/templates/vn-disciplinary-case-file/ds-base.js +33 -1
  349. package/templates/vn-disciplinary-case-file/support.js +13 -20
  350. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +21 -20
  351. package/templates/vn-disciplinary-schedule/ds-base.js +33 -1
  352. package/templates/vn-disciplinary-schedule/support.js +13 -20
  353. package/templates/vn-employee-request/VnEmployeeRequest.dc.html +54 -53
  354. package/templates/vn-employee-request/ds-base.js +33 -1
  355. package/templates/vn-employee-request/support.js +13 -20
  356. package/templates/vn-exit-handover/VnExitHandover.dc.html +122 -121
  357. package/templates/vn-exit-handover/ds-base.js +33 -1
  358. package/templates/vn-exit-handover/support.js +13 -20
  359. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +31 -30
  360. package/templates/vn-foreign-employee-pack/ds-base.js +33 -1
  361. package/templates/vn-foreign-employee-pack/support.js +13 -20
  362. package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +54 -53
  363. package/templates/vn-grassroots-democracy/ds-base.js +33 -1
  364. package/templates/vn-grassroots-democracy/support.js +13 -20
  365. package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +50 -49
  366. package/templates/vn-infosec-policy/ds-base.js +33 -1
  367. package/templates/vn-infosec-policy/support.js +13 -20
  368. package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +84 -83
  369. package/templates/vn-internal-labor-regulations/ds-base.js +33 -1
  370. package/templates/vn-internal-labor-regulations/support.js +13 -20
  371. package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +44 -43
  372. package/templates/vn-internship-agreement/ds-base.js +33 -1
  373. package/templates/vn-internship-agreement/support.js +13 -20
  374. package/templates/vn-job-description/VnJobDescription.dc.html +28 -27
  375. package/templates/vn-job-description/ds-base.js +33 -1
  376. package/templates/vn-job-description/support.js +13 -20
  377. package/templates/vn-labor-contract/VnLaborContract.dc.html +109 -108
  378. package/templates/vn-labor-contract/ds-base.js +33 -1
  379. package/templates/vn-labor-contract/support.js +13 -20
  380. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +32 -31
  381. package/templates/vn-labour-management-book/ds-base.js +33 -1
  382. package/templates/vn-labour-management-book/support.js +13 -20
  383. package/templates/vn-mutual-nda/VnMutualNda.dc.html +45 -44
  384. package/templates/vn-mutual-nda/ds-base.js +33 -1
  385. package/templates/vn-mutual-nda/support.js +13 -20
  386. package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +73 -72
  387. package/templates/vn-ndnca-ip/ds-base.js +33 -1
  388. package/templates/vn-ndnca-ip/support.js +13 -20
  389. package/templates/vn-offer-letter/VnOfferLetter.dc.html +32 -31
  390. package/templates/vn-offer-letter/ds-base.js +33 -1
  391. package/templates/vn-offer-letter/support.js +13 -20
  392. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +16 -15
  393. package/templates/vn-onboarding-checklist/ds-base.js +33 -1
  394. package/templates/vn-onboarding-checklist/support.js +13 -20
  395. package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +43 -42
  396. package/templates/vn-pdpl-consent/ds-base.js +33 -1
  397. package/templates/vn-pdpl-consent/support.js +13 -20
  398. package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +65 -64
  399. package/templates/vn-performance-evaluation-regulation/ds-base.js +33 -1
  400. package/templates/vn-performance-evaluation-regulation/support.js +13 -20
  401. package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +49 -48
  402. package/templates/vn-performance-review-form/ds-base.js +33 -1
  403. package/templates/vn-performance-review-form/support.js +13 -20
  404. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +41 -40
  405. package/templates/vn-phantom-stock/ds-base.js +33 -1
  406. package/templates/vn-phantom-stock/support.js +13 -20
  407. package/templates/vn-probation-contract/VnProbationContract.dc.html +56 -55
  408. package/templates/vn-probation-contract/ds-base.js +33 -1
  409. package/templates/vn-probation-contract/support.js +13 -20
  410. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +28 -27
  411. package/templates/vn-receipt-acknowledgement/ds-base.js +33 -1
  412. package/templates/vn-receipt-acknowledgement/support.js +13 -20
  413. package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +44 -43
  414. package/templates/vn-remote-work-policy/ds-base.js +33 -1
  415. package/templates/vn-remote-work-policy/support.js +13 -20
  416. package/templates/vn-resignation-letter/VnResignationLetter.dc.html +20 -19
  417. package/templates/vn-resignation-letter/ds-base.js +33 -1
  418. package/templates/vn-resignation-letter/support.js +13 -20
  419. package/templates/vn-salary-scale/VnSalaryScale.dc.html +39 -38
  420. package/templates/vn-salary-scale/ds-base.js +33 -1
  421. package/templates/vn-salary-scale/support.js +13 -20
  422. package/templates/vn-sow-appendix/VnSowAppendix.dc.html +21 -20
  423. package/templates/vn-sow-appendix/ds-base.js +33 -1
  424. package/templates/vn-sow-appendix/support.js +13 -20
  425. package/templates/vn-termination-decision/VnTerminationDecision.dc.html +25 -24
  426. package/templates/vn-termination-decision/ds-base.js +33 -1
  427. package/templates/vn-termination-decision/support.js +13 -20
  428. package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +63 -62
  429. package/templates/vn-total-rewards-appendix/ds-base.js +33 -1
  430. package/templates/vn-total-rewards-appendix/support.js +13 -20
  431. package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +39 -38
  432. package/templates/vn-training-commitment/ds-base.js +33 -1
  433. package/templates/vn-training-commitment/support.js +13 -20
  434. package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +50 -49
  435. package/templates/vn-travel-expense-policy/ds-base.js +33 -1
  436. package/templates/vn-travel-expense-policy/support.js +13 -20
  437. package/tokens/colors.css +19 -1
  438. package/tokens/component-tokens.css +1 -0
  439. package/tokens/element-seeds.json +2 -2
  440. package/tokens/elements.css +228 -21
  441. package/tokens/elevation.css +8 -2
  442. package/tokens/native/CSTokens.kt +37 -2
  443. package/tokens/native/CSTokens.swift +37 -2
  444. package/tokens/native/cs_tokens.dart +37 -2
  445. package/tokens/provenance.json +12 -12
  446. package/tokens/spacing.css +4 -1
  447. package/tokens/tokens.dtcg.json +129 -16
  448. package/tokens/tokens.js +59 -18
  449. package/tokens/tokens.json +58 -17
  450. package/tokens/typography.css +2 -0
  451. package/ui_kits/deck/index.html +4 -0
  452. package/ui_kits/status-hub/StatusHub.jsx +30 -4
  453. package/ui_kits/status-hub/index.html +3 -3
  454. package/ui_kits/status-hub/login.html +55 -9
  455. package/ui_kits/status-hub/project.html +4 -0
  456. package/ui_kits/status-hub/settings.html +35 -13
  457. package/ui_kits/status-hub/status.css +5 -1
  458. package/ui_kits/website/Website.jsx +25 -3
  459. package/ui_kits/website/careers.html +5 -1
  460. package/ui_kits/website/chat.html +5 -3
  461. package/ui_kits/website/index.html +3 -3
  462. package/ui_kits/website/site.css +3 -3
  463. package/ui_kits/website/work.html +5 -1
  464. package/assets/aurora-hoa.png +0 -0
  465. package/assets/aurora-kim.png +0 -0
  466. package/assets/aurora-moc.png +0 -0
  467. package/assets/aurora-thuy.png +0 -0
  468. package/docs/status/assets/favicon.svg +0 -5
  469. package/docs/status/assets/status-legacy.css +0 -399
  470. package/docs/status/assets/status-legacy.js +0 -505
  471. package/docs/status/assets/status.css +0 -644
  472. package/docs/status/assets/status.js +0 -1308
  473. package/docs/status/data/status-feed.json +0 -1
  474. package/docs/status/data/task/TASK-REL-001.js +0 -1
  475. package/docs/status/data/task/TASK-REL-002.js +0 -1
  476. package/docs/status/index.html +0 -42
  477. package/docs/status/roadmap.html +0 -4
  478. package/docs/status/status-legacy.html +0 -117
  479. package/docs/tasks/BACKLOG.md +0 -26
  480. package/docs/tasks/release/TASK-REL-001-launch-1-1-0/spec.md +0 -55
  481. package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +0 -54
package/dist/styles.min.css ADDED
@@ -0,0 +1,2252 @@
1
+ /* CyberSkill Design System — flattened styles (generated by scripts/flatten-styles.mjs). Source: styles.css + tokens/ + base/. */
2
+
3
+
4
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
5
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
6
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
7
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
8
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
9
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
10
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
11
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
12
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
13
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
14
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
15
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
16
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
17
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
18
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
19
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
20
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
21
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
22
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
23
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
24
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
25
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
26
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
27
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
28
+
29
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
30
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
31
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
32
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
33
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
34
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
35
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
36
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
37
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
38
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
39
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
40
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
41
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
42
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
43
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
44
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
45
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
46
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
47
+
48
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
49
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
50
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
51
+
52
+ :root {
53
+ color-scheme: light;
54
+
55
+
56
+ --cs-color-brand-umber: #45210E;
57
+ --cs-color-brand-ochre: #F4BA17;
58
+
59
+
60
+ --cs-color-surface-page: #FFFDF8;
61
+ --cs-color-surface-panel: #FFFFFF;
62
+ --cs-color-surface-raised: #FBF4E9;
63
+
64
+
65
+ --cs-color-text-primary: #45210E;
66
+ --cs-color-text-inverse: #FFFFFF;
67
+ --cs-color-text-accent: #6E3B0E;
68
+ --cs-color-text-muted: #6E5A4C;
69
+
70
+
71
+ --cs-color-semantic-success: #166534;
72
+ --cs-color-semantic-danger: #B42318;
73
+ --cs-color-semantic-warning: #92400E;
74
+ --cs-color-semantic-info: #1D4ED8;
75
+ --cs-color-semantic-success-fg: #FFFFFF;
76
+ --cs-color-semantic-danger-fg: #FFFFFF;
77
+ --cs-color-semantic-warning-fg: #FFFFFF;
78
+ --cs-color-semantic-info-fg: #FFFFFF;
79
+
80
+
81
+ --cs-doc-ink: #1A1614;
82
+ --cs-doc-slate: #3F4C55;
83
+ --cs-doc-fill: #FDE68A;
84
+ --cs-doc-fill-ink: #1A1614;
85
+
86
+
87
+ --cs-color-accent-ochre: #F4BA17;
88
+ --cs-color-border-default: #E7D9C6;
89
+
90
+
91
+ --cs-color-link: #6E3B0E;
92
+ --cs-color-link-hover: #45210E;
93
+ }
94
+
95
+ a { color: var(--cs-color-link); text-underline-offset: 0.15em; }
96
+ a:hover { color: var(--cs-color-link-hover); }
97
+
98
+ [data-theme="dark"] {
99
+ color-scheme: dark;
100
+ --cs-color-surface-page: #1a1108;
101
+ --cs-color-surface-panel: #221710;
102
+ --cs-color-surface-raised: #2b1e14;
103
+ --cs-color-text-primary: #f5ead9;
104
+ --cs-color-text-inverse: #1a1108;
105
+ --cs-color-text-accent: #f4ba17;
106
+ --cs-color-text-muted: #c9b7a3;
107
+ --cs-color-semantic-success: #4ADE80;
108
+ --cs-color-semantic-danger: #F87171;
109
+ --cs-color-semantic-warning: #FBBF24;
110
+ --cs-color-semantic-info: #7CB2FB;
111
+ --cs-color-semantic-success-fg: #1a1108;
112
+ --cs-color-semantic-danger-fg: #1a1108;
113
+ --cs-color-semantic-warning-fg: #1a1108;
114
+ --cs-color-semantic-info-fg: #1a1108;
115
+ --cs-color-border-default: #4a3a2c;
116
+ --cs-color-link: #f4ba17;
117
+ --cs-color-link-hover: #f5ead9;
118
+ }
119
+ @media (prefers-color-scheme: dark) {
120
+ [data-theme="system"] {
121
+ color-scheme: dark;
122
+ --cs-color-surface-page: #1a1108;
123
+ --cs-color-surface-panel: #221710;
124
+ --cs-color-surface-raised: #2b1e14;
125
+ --cs-color-text-primary: #f5ead9;
126
+ --cs-color-text-inverse: #1a1108;
127
+ --cs-color-text-accent: #f4ba17;
128
+ --cs-color-text-muted: #c9b7a3;
129
+ --cs-color-semantic-success: #4ADE80;
130
+ --cs-color-semantic-danger: #F87171;
131
+ --cs-color-semantic-warning: #FBBF24;
132
+ --cs-color-semantic-info: #7CB2FB;
133
+ --cs-color-semantic-success-fg: #1a1108;
134
+ --cs-color-semantic-danger-fg: #1a1108;
135
+ --cs-color-semantic-warning-fg: #1a1108;
136
+ --cs-color-semantic-info-fg: #1a1108;
137
+ --cs-color-border-default: #4a3a2c;
138
+ --cs-color-link: #f4ba17;
139
+ --cs-color-link-hover: #f5ead9;
140
+ }
141
+ }
142
+
143
+ :root {
144
+
145
+ --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
146
+ --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
147
+ --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
148
+
149
+
150
+ --cs-font-weight-regular: 400;
151
+ --cs-font-weight-medium: 500;
152
+ --cs-font-weight-semibold: 600;
153
+ --cs-font-weight-bold: 700;
154
+ --cs-font-weight-extrabold: 800;
155
+
156
+
157
+ --cs-font-lineHeight-body: 1.5;
158
+ --cs-font-lineHeight-heading: 1.35;
159
+ --cs-font-lineHeight-tight: 1.15;
160
+
161
+
162
+ --cs-font-size-2xs: 0.6875rem;
163
+ --cs-font-size-xs: 0.75rem;
164
+ --cs-font-size-sm: 0.875rem;
165
+ --cs-font-size-base: 1rem;
166
+ --cs-font-size-md: 1.125rem;
167
+ --cs-font-size-lg: 1.25rem;
168
+ --cs-font-size-xl: 1.5rem;
169
+ --cs-font-size-2xl: 1.875rem;
170
+ --cs-font-size-3xl: 2.25rem;
171
+ --cs-font-size-4xl: 3rem;
172
+ --cs-font-size-5xl: 3.75rem;
173
+
174
+
175
+ --cs-text-display: var(--cs-font-size-5xl);
176
+ --cs-text-h1: var(--cs-font-size-3xl);
177
+ --cs-text-h2: var(--cs-font-size-2xl);
178
+ --cs-text-h3: var(--cs-font-size-xl);
179
+ --cs-text-h4: var(--cs-font-size-lg);
180
+ --cs-text-body-lg: var(--cs-font-size-md);
181
+ --cs-text-body: var(--cs-font-size-base);
182
+ --cs-text-secondary: var(--cs-font-size-sm);
183
+ --cs-text-micro: var(--cs-font-size-2xs);
184
+ --cs-text-caption: var(--cs-font-size-xs);
185
+ --cs-text-eyebrow: var(--cs-font-size-xs);
186
+
187
+
188
+ --cs-letter-spacing-tight: -0.01em;
189
+ --cs-letter-spacing-normal: 0;
190
+ --cs-letter-spacing-caps: 0.08em;
191
+
192
+
193
+ --cs-heading-family: var(--cs-font-family-ui);
194
+ --cs-heading-weight-strong: var(--cs-font-weight-extrabold);
195
+ --cs-heading-weight: var(--cs-font-weight-bold);
196
+ --cs-heading-tracking: var(--cs-letter-spacing-tight);
197
+
198
+
199
+ --cs-icon-sm: 16px;
200
+ --cs-icon-md: 20px;
201
+ --cs-icon-lg: 24px;
202
+ }
203
+
204
+ :root {
205
+ --cs-space-0: 0px;
206
+ --cs-space-1: 4px;
207
+ --cs-space-2: 8px;
208
+ --cs-space-3: 12px;
209
+ --cs-space-4: 16px;
210
+ --cs-space-5: 20px;
211
+ --cs-space-6: 24px;
212
+ --cs-space-8: 32px;
213
+ --cs-space-10: 40px;
214
+ --cs-space-12: 48px;
215
+ --cs-space-16: 64px;
216
+ --cs-space-20: 80px;
217
+ --cs-space-24: 96px;
218
+
219
+
220
+ --cs-radius-sm: 4px;
221
+ --cs-radius-md: 8px;
222
+ --cs-radius-lg: 14px;
223
+ --cs-radius-full: 999px;
224
+
225
+
226
+ --cs-breakpoint-xs: 0px;
227
+ --cs-breakpoint-phone: 360px;
228
+ --cs-breakpoint-sm: 640px;
229
+ --cs-breakpoint-md: 768px;
230
+ --cs-breakpoint-lg: 1024px;
231
+ --cs-breakpoint-xl: 1280px;
232
+ --cs-breakpoint-2xl: 1536px;
233
+
234
+
235
+ --cs-container-max: 1320px;
236
+
237
+ --cs-prose-measure: 45rem;
238
+ }
239
+
240
+ :root {
241
+
242
+ --cs-depth-bg: 0;
243
+ --cs-depth-section: 5;
244
+ --cs-depth-card: 10;
245
+ --cs-depth-nav: 50;
246
+ --cs-depth-dropdown: 60;
247
+ --cs-depth-overlay: 80;
248
+ --cs-depth-modal: 100;
249
+ --cs-depth-toast: 200;
250
+
251
+
252
+ --cs-glass-whisper-blur: 8px; --cs-glass-whisper-saturate: 110%; --cs-glass-whisper-opacity: 60%;
253
+ --cs-glass-light-blur: 12px; --cs-glass-light-saturate: 130%; --cs-glass-light-opacity: 70%;
254
+ --cs-glass-standard-blur: 16px; --cs-glass-standard-saturate: 150%; --cs-glass-standard-opacity: 80%;
255
+ --cs-glass-heavy-blur: 24px; --cs-glass-heavy-saturate: 180%; --cs-glass-heavy-opacity: 90%;
256
+
257
+
258
+ --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06);
259
+ --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06);
260
+ --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18);
261
+ --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18);
262
+ --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26);
263
+ }
264
+
265
+ [data-theme="dark"] {
266
+ --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
267
+ --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
268
+ --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
269
+ --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
270
+ --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
271
+ }
272
+ @media (prefers-color-scheme: dark) {
273
+ [data-theme="system"] {
274
+ --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
275
+ --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
276
+ --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
277
+ --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
278
+ --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
279
+ }
280
+ }
281
+
282
+ :root {
283
+ --cs-duration-instant: 80ms;
284
+ --cs-duration-fast: 120ms;
285
+ --cs-duration-base: 200ms;
286
+ --cs-duration-slow: 320ms;
287
+
288
+ --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
289
+ --cs-ease-entrance: cubic-bezier(0, 0, 0, 1);
290
+ --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1);
291
+ --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
292
+ }
293
+
294
+ @media (prefers-reduced-motion: reduce) {
295
+ :root {
296
+ --cs-duration-instant: 0ms;
297
+ --cs-duration-fast: 0ms;
298
+ --cs-duration-base: 0ms;
299
+ --cs-duration-slow: 0ms;
300
+ }
301
+ }
302
+
303
+ :root {
304
+ --cs-focus-ring: 3px;
305
+
306
+ --cs-component-button-primary-bg: #45210E;
307
+ --cs-component-button-primary-fg: #FFFFFF;
308
+ --cs-component-button-gap: 8px;
309
+ --cs-component-button-radius: 8px;
310
+ --cs-component-button-xs-paddingY: 4px;
311
+ --cs-component-button-xs-paddingX: 10px;
312
+ --cs-component-button-xs-minHeight: 28px;
313
+ --cs-component-button-xs-minWidth: 28px;
314
+ --cs-component-button-xs-minHeight-coarse: 36px;
315
+ --cs-component-button-sm-paddingY: 8px;
316
+ --cs-component-button-sm-paddingX: 14px;
317
+ --cs-component-button-sm-minHeight: 36px;
318
+ --cs-component-button-sm-minHeight-coarse: 40px;
319
+ --cs-component-button-md-paddingY: 12px;
320
+ --cs-component-button-md-paddingX: 20px;
321
+ --cs-component-button-md-minHeight: 44px;
322
+ --cs-component-button-md-minHeight-coarse: 44px;
323
+ --cs-component-button-lg-paddingY: 16px;
324
+ --cs-component-button-lg-paddingX: 28px;
325
+ --cs-component-button-lg-minHeight: 52px;
326
+
327
+
328
+ --cs-component-textfield-border-default: #BFA58F;
329
+ --cs-component-textfield-paddingY: 10px;
330
+ --cs-component-textfield-paddingX: 12px;
331
+ --cs-component-textfield-minHeight: 44px;
332
+ }
333
+
334
+ [data-theme="dark"] {
335
+ --cs-component-button-primary-bg: #f4ba17;
336
+ --cs-component-button-primary-fg: #1a1108;
337
+ --cs-component-textfield-border-default: #5a4636;
338
+ }
339
+ @media (prefers-color-scheme: dark) {
340
+ [data-theme="system"] {
341
+ --cs-component-button-primary-bg: #f4ba17;
342
+ --cs-component-button-primary-fg: #1a1108;
343
+ --cs-component-textfield-border-default: #5a4636;
344
+ }
345
+ }
346
+
347
+ :root {
348
+ --cs-accent: #F4BA17;
349
+ --cs-accent-strong: #A47D17;
350
+ --cs-accent-bright: #F4BA17;
351
+ --cs-accent-on: #45210E;
352
+ --cs-accent-on-strong: #1A1108;
353
+ --cs-accent-tint: #FBF4E9;
354
+ --cs-accent-ink: #45210E;
355
+ --cs-accent-glow: rgba(244, 186, 23, 0.48);
356
+ --cs-accent-grad-a: #F4BA17;
357
+ --cs-accent-grad-b: #F3B958;
358
+ }
359
+
360
+ [data-cs-element] {
361
+ --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 4%, #FFFFFF);
362
+ --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #FFFDF8);
363
+ --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 15%, #FBF4E9);
364
+ --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #E7D9C6);
365
+ }
366
+ [data-theme="dark"] [data-cs-element], [data-cs-element][data-theme="dark"] {
367
+ --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 10%, #221710);
368
+ --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #1a1108);
369
+ --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 14%, #2b1e14);
370
+ --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #4a3a2c);
371
+ }
372
+ @media (prefers-color-scheme: dark) {
373
+ [data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
374
+ --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 10%, #221710);
375
+ --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #1a1108);
376
+ --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 14%, #2b1e14);
377
+ --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #4a3a2c);
378
+ }
379
+ }
380
+
381
+ [data-cs-element="tho"] {
382
+ --cs-accent: #F4BA17;
383
+ --cs-accent-strong: #A47D17;
384
+ --cs-accent-bright: #F4BA17;
385
+ --cs-accent-on: #45210E;
386
+ --cs-accent-on-strong: #1A1108;
387
+ --cs-accent-tint: #FBF4E9;
388
+ --cs-accent-ink: #45210E;
389
+ --cs-accent-glow: rgba(244, 186, 23, 0.48);
390
+ --cs-accent-grad-a: #F4BA17;
391
+ --cs-accent-grad-b: #F3B958;
392
+ }
393
+ [data-cs-element="tho"][data-cs-variant="sand"] {
394
+ --cs-accent: #F8E9C0;
395
+ --cs-accent-strong: #90825E;
396
+ --cs-accent-bright: #F6EBCC;
397
+ --cs-accent-on: #292414;
398
+ --cs-accent-on-strong: #1A1108;
399
+ --cs-accent-tint: #FBF7EA;
400
+ --cs-accent-ink: #292414;
401
+ --cs-accent-glow: rgba(248, 233, 192, 0.48);
402
+ --cs-accent-grad-a: #F8E9C0;
403
+ --cs-accent-grad-b: #F3B958;
404
+ --cs-color-text-accent: #90825E;
405
+ --cs-color-link: #7B6D4A;
406
+ }
407
+ [data-cs-element="tho"][data-cs-variant="clay"] {
408
+ --cs-accent: #513801;
409
+ --cs-accent-strong: #201300;
410
+ --cs-accent-bright: #DEC7A2;
411
+ --cs-accent-on: #2D220E;
412
+ --cs-accent-on-strong: #FFFFFF;
413
+ --cs-accent-tint: #FFF6E7;
414
+ --cs-accent-ink: #2D220E;
415
+ --cs-accent-glow: rgba(81, 56, 1, 0.48);
416
+ --cs-accent-grad-a: #513801;
417
+ --cs-accent-grad-b: #F3B958;
418
+ --cs-color-text-accent: #201300;
419
+ --cs-color-link: #201300;
420
+ }
421
+
422
+ [data-cs-element="hoa"] {
423
+ --cs-accent: #FCAF91;
424
+ --cs-accent-strong: #B47054;
425
+ --cs-accent-bright: #FED3C3;
426
+ --cs-accent-on: #381B10;
427
+ --cs-accent-on-strong: #1A1108;
428
+ --cs-accent-tint: #FFF4F0;
429
+ --cs-accent-ink: #381B10;
430
+ --cs-accent-glow: rgba(252, 175, 145, 0.48);
431
+ --cs-accent-grad-a: #FCAF91;
432
+ --cs-accent-grad-b: #F4BA17;
433
+ --cs-color-text-accent: #B47054;
434
+ --cs-color-link: #A15E43;
435
+ }
436
+ [data-cs-element="hoa"][data-cs-variant="plasma"] {
437
+ --cs-accent: #FFE1D8;
438
+ --cs-accent-strong: #967C75;
439
+ --cs-accent-bright: #FCE6DF;
440
+ --cs-accent-on: #2C211E;
441
+ --cs-accent-on-strong: #1A1108;
442
+ --cs-accent-tint: #FEF4F2;
443
+ --cs-accent-ink: #2C211E;
444
+ --cs-accent-glow: rgba(255, 225, 216, 0.48);
445
+ --cs-accent-grad-a: #FFE1D8;
446
+ --cs-accent-grad-b: #F4BA17;
447
+ --cs-color-text-accent: #967C75;
448
+ --cs-color-link: #846B64;
449
+ }
450
+ [data-cs-element="hoa"][data-cs-variant="lava"] {
451
+ --cs-accent: #622B06;
452
+ --cs-accent-strong: #280D00;
453
+ --cs-accent-bright: #F1BEA4;
454
+ --cs-accent-on: #361D0F;
455
+ --cs-accent-on-strong: #FFFFFF;
456
+ --cs-accent-tint: #FFF4EF;
457
+ --cs-accent-ink: #361D0F;
458
+ --cs-accent-glow: rgba(98, 43, 6, 0.48);
459
+ --cs-accent-grad-a: #622B06;
460
+ --cs-accent-grad-b: #F4BA17;
461
+ --cs-color-text-accent: #280D00;
462
+ --cs-color-link: #280D00;
463
+ }
464
+
465
+ [data-cs-element="thuy"] {
466
+ --cs-accent: #2EDBF7;
467
+ --cs-accent-strong: #108EA0;
468
+ --cs-accent-bright: #99EEFF;
469
+ --cs-accent-on: #012A30;
470
+ --cs-accent-on-strong: #1A1108;
471
+ --cs-accent-tint: #E7FBFF;
472
+ --cs-accent-ink: #012A30;
473
+ --cs-accent-glow: rgba(46, 219, 247, 0.48);
474
+ --cs-accent-grad-a: #2EDBF7;
475
+ --cs-accent-grad-b: #A3D768;
476
+ --cs-color-text-accent: #108EA0;
477
+ --cs-color-link: #027B8B;
478
+ }
479
+ [data-cs-element="thuy"][data-cs-variant="mist"] {
480
+ --cs-accent: #C0F5FC;
481
+ --cs-accent-strong: #5A8A90;
482
+ --cs-accent-bright: #CDF4F9;
483
+ --cs-accent-on: #13282B;
484
+ --cs-accent-on-strong: #1A1108;
485
+ --cs-accent-tint: #EBFAFC;
486
+ --cs-accent-ink: #13282B;
487
+ --cs-accent-glow: rgba(192, 245, 252, 0.48);
488
+ --cs-accent-grad-a: #C0F5FC;
489
+ --cs-accent-grad-b: #A3D768;
490
+ --cs-color-text-accent: #5A8A90;
491
+ --cs-color-link: #48787E;
492
+ }
493
+ [data-cs-element="thuy"][data-cs-variant="ocean"] {
494
+ --cs-accent: #004554;
495
+ --cs-accent-strong: #011A21;
496
+ --cs-accent-bright: #A8D3E0;
497
+ --cs-accent-on: #10282F;
498
+ --cs-accent-on-strong: #FFFFFF;
499
+ --cs-accent-tint: #EAFAFF;
500
+ --cs-accent-ink: #10282F;
501
+ --cs-accent-glow: rgba(0, 69, 84, 0.48);
502
+ --cs-accent-grad-a: #004554;
503
+ --cs-accent-grad-b: #A3D768;
504
+ --cs-color-text-accent: #011A21;
505
+ --cs-color-link: #011A21;
506
+ }
507
+
508
+ [data-cs-element="moc"] {
509
+ --cs-accent: #A3D768;
510
+ --cs-accent-strong: #629122;
511
+ --cs-accent-bright: #C5ED9C;
512
+ --cs-accent-on: #182A00;
513
+ --cs-accent-on-strong: #1A1108;
514
+ --cs-accent-tint: #EFFCE3;
515
+ --cs-accent-ink: #182A00;
516
+ --cs-accent-glow: rgba(163, 215, 104, 0.48);
517
+ --cs-accent-grad-a: #A3D768;
518
+ --cs-accent-grad-b: #FCAF91;
519
+ --cs-color-text-accent: #629122;
520
+ --cs-color-link: #517B13;
521
+ }
522
+ [data-cs-element="moc"][data-cs-variant="bamboo"] {
523
+ --cs-accent: #E1F1C8;
524
+ --cs-accent-strong: #7C8965;
525
+ --cs-accent-bright: #E5F1D2;
526
+ --cs-accent-on: #212617;
527
+ --cs-accent-on-strong: #1A1108;
528
+ --cs-accent-tint: #F4F9ED;
529
+ --cs-accent-ink: #212617;
530
+ --cs-accent-glow: rgba(225, 241, 200, 0.48);
531
+ --cs-accent-grad-a: #E1F1C8;
532
+ --cs-accent-grad-b: #FCAF91;
533
+ --cs-color-text-accent: #7C8965;
534
+ --cs-color-link: #687451;
535
+ }
536
+ [data-cs-element="moc"][data-cs-variant="forest"] {
537
+ --cs-accent: #1A4A01;
538
+ --cs-accent-strong: #051D00;
539
+ --cs-accent-bright: #B0D8A3;
540
+ --cs-accent-on: #162A0E;
541
+ --cs-accent-on-strong: #FFFFFF;
542
+ --cs-accent-tint: #ECFDE7;
543
+ --cs-accent-ink: #162A0E;
544
+ --cs-accent-glow: rgba(26, 74, 1, 0.48);
545
+ --cs-accent-grad-a: #1A4A01;
546
+ --cs-accent-grad-b: #FCAF91;
547
+ --cs-color-text-accent: #051D00;
548
+ --cs-color-link: #051D00;
549
+ }
550
+
551
+ [data-cs-element="kim"] {
552
+ --cs-accent: #F3B958;
553
+ --cs-accent-strong: #AC780B;
554
+ --cs-accent-bright: #FDD89F;
555
+ --cs-accent-on: #312002;
556
+ --cs-accent-on-strong: #1A1108;
557
+ --cs-accent-tint: #FFF5E7;
558
+ --cs-accent-ink: #312002;
559
+ --cs-accent-glow: rgba(243, 185, 88, 0.48);
560
+ --cs-accent-grad-a: #F3B958;
561
+ --cs-accent-grad-b: #2EDBF7;
562
+ --cs-color-text-accent: #AC780B;
563
+ --cs-color-link: #966700;
564
+ }
565
+ [data-cs-element="kim"][data-cs-variant="titanium"] {
566
+ --cs-accent: #FEE5C7;
567
+ --cs-accent-strong: #947F65;
568
+ --cs-accent-bright: #FBE8D2;
569
+ --cs-accent-on: #2B2217;
570
+ --cs-accent-on-strong: #1A1108;
571
+ --cs-accent-tint: #FDF5ED;
572
+ --cs-accent-ink: #2B2217;
573
+ --cs-accent-glow: rgba(254, 229, 199, 0.48);
574
+ --cs-accent-grad-a: #FEE5C7;
575
+ --cs-accent-grad-b: #2EDBF7;
576
+ --cs-color-text-accent: #947F65;
577
+ --cs-color-link: #826D54;
578
+ }
579
+ [data-cs-element="kim"][data-cs-variant="steel"] {
580
+ --cs-accent: #503901;
581
+ --cs-accent-strong: #1F1400;
582
+ --cs-accent-bright: #DCC8A2;
583
+ --cs-accent-on: #2D220E;
584
+ --cs-accent-on-strong: #FFFFFF;
585
+ --cs-accent-tint: #FEF6E7;
586
+ --cs-accent-ink: #2D220E;
587
+ --cs-accent-glow: rgba(80, 57, 1, 0.48);
588
+ --cs-accent-grad-a: #503901;
589
+ --cs-accent-grad-b: #2EDBF7;
590
+ --cs-color-text-accent: #1F1400;
591
+ --cs-color-link: #1F1400;
592
+ }
593
+
594
+ [data-theme="dark"] [data-cs-element], [data-cs-element][data-theme="dark"] {
595
+ --cs-component-button-primary-bg: var(--cs-accent-strong);
596
+ --cs-component-button-primary-fg: var(--cs-accent-on);
597
+ --cs-color-text-accent: var(--cs-accent-bright);
598
+ --cs-color-link: var(--cs-accent-bright);
599
+ --cs-color-link-hover: var(--cs-color-text-primary);
600
+ }
601
+ @media (prefers-color-scheme: dark) {
602
+ [data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
603
+ --cs-component-button-primary-bg: var(--cs-accent-strong);
604
+ --cs-component-button-primary-fg: var(--cs-accent-on);
605
+ --cs-color-text-accent: var(--cs-accent-bright);
606
+ --cs-color-link: var(--cs-accent-bright);
607
+ --cs-color-link-hover: var(--cs-color-text-primary);
608
+ }
609
+ }
610
+
611
+ .cs-aurora-wash { background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; }
612
+ [data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.webp"); }
613
+ [data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.webp"); }
614
+ [data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.webp"); }
615
+ [data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.webp"); }
616
+
617
+ [data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
618
+ --cs-accent: #F8E9C0;
619
+ --cs-accent-bright: #F6EBCC;
620
+ --cs-accent-strong: #665A37;
621
+ --cs-accent-on: #f5ead9;
622
+ --cs-accent-on-strong: #FFFDF8;
623
+ --cs-accent-tint: #332701;
624
+ --cs-accent-ink: #F6EBCC;
625
+ }
626
+ @media (prefers-color-scheme: dark) {
627
+ [data-theme="system"][data-cs-element="tho"][data-cs-variant="sand"] {
628
+ --cs-accent: #F8E9C0;
629
+ --cs-accent-bright: #F6EBCC;
630
+ --cs-accent-strong: #665A37;
631
+ --cs-accent-on: #f5ead9;
632
+ --cs-accent-on-strong: #FFFDF8;
633
+ --cs-accent-tint: #332701;
634
+ --cs-accent-ink: #F6EBCC;
635
+ }
636
+ }
637
+ [data-theme="dark"][data-cs-element="tho"] {
638
+ --cs-accent: #F4BA17;
639
+ --cs-accent-bright: #FEC42C;
640
+ --cs-accent-strong: #73560B;
641
+ --cs-accent-on: #f5ead9;
642
+ --cs-accent-on-strong: #FFFDF8;
643
+ --cs-accent-tint: #352602;
644
+ --cs-accent-ink: #FECD5E;
645
+ }
646
+ @media (prefers-color-scheme: dark) {
647
+ [data-theme="system"][data-cs-element="tho"] {
648
+ --cs-accent: #F4BA17;
649
+ --cs-accent-bright: #FEC42C;
650
+ --cs-accent-strong: #73560B;
651
+ --cs-accent-on: #f5ead9;
652
+ --cs-accent-on-strong: #FFFDF8;
653
+ --cs-accent-tint: #352602;
654
+ --cs-accent-ink: #FECD5E;
655
+ }
656
+ }
657
+ [data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
658
+ --cs-accent: #CDB07E;
659
+ --cs-accent-bright: #E4CDA8;
660
+ --cs-accent-strong: #1F1300;
661
+ --cs-accent-on: #f5ead9;
662
+ --cs-accent-on-strong: #FFFDF8;
663
+ --cs-accent-tint: #372502;
664
+ --cs-accent-ink: #E7D0AB;
665
+ }
666
+ @media (prefers-color-scheme: dark) {
667
+ [data-theme="system"][data-cs-element="tho"][data-cs-variant="clay"] {
668
+ --cs-accent: #CDB07E;
669
+ --cs-accent-bright: #E4CDA8;
670
+ --cs-accent-strong: #1F1300;
671
+ --cs-accent-on: #f5ead9;
672
+ --cs-accent-on-strong: #FFFDF8;
673
+ --cs-accent-tint: #372502;
674
+ --cs-accent-ink: #E7D0AB;
675
+ }
676
+ }
677
+ [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
678
+ --cs-accent: #FFE1D8;
679
+ --cs-accent-bright: #FCE6DF;
680
+ --cs-accent-strong: #6F5750;
681
+ --cs-accent-on: #f5ead9;
682
+ --cs-accent-on-strong: #FFFDF8;
683
+ --cs-accent-tint: #38231C;
684
+ --cs-accent-ink: #FCE6DF;
685
+ }
686
+ @media (prefers-color-scheme: dark) {
687
+ [data-theme="system"][data-cs-element="hoa"][data-cs-variant="plasma"] {
688
+ --cs-accent: #FFE1D8;
689
+ --cs-accent-bright: #FCE6DF;
690
+ --cs-accent-strong: #6F5750;
691
+ --cs-accent-on: #f5ead9;
692
+ --cs-accent-on-strong: #FFFDF8;
693
+ --cs-accent-tint: #38231C;
694
+ --cs-accent-ink: #FCE6DF;
695
+ }
696
+ }
697
+ [data-theme="dark"][data-cs-element="hoa"] {
698
+ --cs-accent: #FCAF91;
699
+ --cs-accent-bright: #FED3C3;
700
+ --cs-accent-strong: #8A4A30;
701
+ --cs-accent-on: #f5ead9;
702
+ --cs-accent-on-strong: #FFFDF8;
703
+ --cs-accent-tint: #411E0F;
704
+ --cs-accent-ink: #FED3C3;
705
+ }
706
+ @media (prefers-color-scheme: dark) {
707
+ [data-theme="system"][data-cs-element="hoa"] {
708
+ --cs-accent: #FCAF91;
709
+ --cs-accent-bright: #FED3C3;
710
+ --cs-accent-strong: #8A4A30;
711
+ --cs-accent-on: #f5ead9;
712
+ --cs-accent-on-strong: #FFFDF8;
713
+ --cs-accent-tint: #411E0F;
714
+ --cs-accent-ink: #FED3C3;
715
+ }
716
+ }
717
+ [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
718
+ --cs-accent: #E8A683;
719
+ --cs-accent-bright: #F8C4AA;
720
+ --cs-accent-strong: #280D00;
721
+ --cs-accent-on: #f5ead9;
722
+ --cs-accent-on-strong: #FFFDF8;
723
+ --cs-accent-tint: #401F0B;
724
+ --cs-accent-ink: #FBC7AD;
725
+ }
726
+ @media (prefers-color-scheme: dark) {
727
+ [data-theme="system"][data-cs-element="hoa"][data-cs-variant="lava"] {
728
+ --cs-accent: #E8A683;
729
+ --cs-accent-bright: #F8C4AA;
730
+ --cs-accent-strong: #280D00;
731
+ --cs-accent-on: #f5ead9;
732
+ --cs-accent-on-strong: #FFFDF8;
733
+ --cs-accent-tint: #401F0B;
734
+ --cs-accent-ink: #FBC7AD;
735
+ }
736
+ }
737
+ [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
738
+ --cs-accent: #C0F5FC;
739
+ --cs-accent-bright: #CDF4F9;
740
+ --cs-accent-strong: #316167;
741
+ --cs-accent-on: #f5ead9;
742
+ --cs-accent-on-strong: #FFFDF8;
743
+ --cs-accent-tint: #022F34;
744
+ --cs-accent-ink: #CDF4F9;
745
+ }
746
+ @media (prefers-color-scheme: dark) {
747
+ [data-theme="system"][data-cs-element="thuy"][data-cs-variant="mist"] {
748
+ --cs-accent: #C0F5FC;
749
+ --cs-accent-bright: #CDF4F9;
750
+ --cs-accent-strong: #316167;
751
+ --cs-accent-on: #f5ead9;
752
+ --cs-accent-on-strong: #FFFDF8;
753
+ --cs-accent-tint: #022F34;
754
+ --cs-accent-ink: #CDF4F9;
755
+ }
756
+ }
757
+ [data-theme="dark"][data-cs-element="thuy"] {
758
+ --cs-accent: #2EDBF7;
759
+ --cs-accent-bright: #99EEFF;
760
+ --cs-accent-strong: #046270;
761
+ --cs-accent-on: #f5ead9;
762
+ --cs-accent-on-strong: #FFFDF8;
763
+ --cs-accent-tint: #032F36;
764
+ --cs-accent-ink: #99EEFF;
765
+ }
766
+ @media (prefers-color-scheme: dark) {
767
+ [data-theme="system"][data-cs-element="thuy"] {
768
+ --cs-accent: #2EDBF7;
769
+ --cs-accent-bright: #99EEFF;
770
+ --cs-accent-strong: #046270;
771
+ --cs-accent-on: #f5ead9;
772
+ --cs-accent-on-strong: #FFFDF8;
773
+ --cs-accent-tint: #032F36;
774
+ --cs-accent-ink: #99EEFF;
775
+ }
776
+ }
777
+ [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
778
+ --cs-accent: #82BCCD;
779
+ --cs-accent-bright: #ABD6E3;
780
+ --cs-accent-strong: #011A21;
781
+ --cs-accent-on: #f5ead9;
782
+ --cs-accent-on-strong: #FFFDF8;
783
+ --cs-accent-tint: #002F3A;
784
+ --cs-accent-ink: #AED9E6;
785
+ }
786
+ @media (prefers-color-scheme: dark) {
787
+ [data-theme="system"][data-cs-element="thuy"][data-cs-variant="ocean"] {
788
+ --cs-accent: #82BCCD;
789
+ --cs-accent-bright: #ABD6E3;
790
+ --cs-accent-strong: #011A21;
791
+ --cs-accent-on: #f5ead9;
792
+ --cs-accent-on-strong: #FFFDF8;
793
+ --cs-accent-tint: #002F3A;
794
+ --cs-accent-ink: #AED9E6;
795
+ }
796
+ }
797
+ [data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
798
+ --cs-accent: #E1F1C8;
799
+ --cs-accent-bright: #E5F1D2;
800
+ --cs-accent-strong: #54603E;
801
+ --cs-accent-on: #f5ead9;
802
+ --cs-accent-on-strong: #FFFDF8;
803
+ --cs-accent-tint: #232D0B;
804
+ --cs-accent-ink: #E5F1D2;
805
+ }
806
+ @media (prefers-color-scheme: dark) {
807
+ [data-theme="system"][data-cs-element="moc"][data-cs-variant="bamboo"] {
808
+ --cs-accent: #E1F1C8;
809
+ --cs-accent-bright: #E5F1D2;
810
+ --cs-accent-strong: #54603E;
811
+ --cs-accent-on: #f5ead9;
812
+ --cs-accent-on-strong: #FFFDF8;
813
+ --cs-accent-tint: #232D0B;
814
+ --cs-accent-ink: #E5F1D2;
815
+ }
816
+ }
817
+ [data-theme="dark"][data-cs-element="moc"] {
818
+ --cs-accent: #A3D768;
819
+ --cs-accent-bright: #C5ED9C;
820
+ --cs-accent-strong: #416501;
821
+ --cs-accent-on: #f5ead9;
822
+ --cs-accent-on-strong: #FFFDF8;
823
+ --cs-accent-tint: #1F2E0B;
824
+ --cs-accent-ink: #C5ED9C;
825
+ }
826
+ @media (prefers-color-scheme: dark) {
827
+ [data-theme="system"][data-cs-element="moc"] {
828
+ --cs-accent: #A3D768;
829
+ --cs-accent-bright: #C5ED9C;
830
+ --cs-accent-strong: #416501;
831
+ --cs-accent-on: #f5ead9;
832
+ --cs-accent-on-strong: #FFFDF8;
833
+ --cs-accent-tint: #1F2E0B;
834
+ --cs-accent-ink: #C5ED9C;
835
+ }
836
+ }
837
+ [data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
838
+ --cs-accent: #8EC27D;
839
+ --cs-accent-bright: #B0D8A3;
840
+ --cs-accent-strong: #061D00;
841
+ --cs-accent-on: #f5ead9;
842
+ --cs-accent-on-strong: #FFFDF8;
843
+ --cs-accent-tint: #193011;
844
+ --cs-accent-ink: #B6DFA9;
845
+ }
846
+ @media (prefers-color-scheme: dark) {
847
+ [data-theme="system"][data-cs-element="moc"][data-cs-variant="forest"] {
848
+ --cs-accent: #8EC27D;
849
+ --cs-accent-bright: #B0D8A3;
850
+ --cs-accent-strong: #061D00;
851
+ --cs-accent-on: #f5ead9;
852
+ --cs-accent-on-strong: #FFFDF8;
853
+ --cs-accent-tint: #193011;
854
+ --cs-accent-ink: #B6DFA9;
855
+ }
856
+ }
857
+ [data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
858
+ --cs-accent: #FEE5C7;
859
+ --cs-accent-bright: #FBE8D2;
860
+ --cs-accent-strong: #6B573E;
861
+ --cs-accent-on: #f5ead9;
862
+ --cs-accent-on-strong: #FFFDF8;
863
+ --cs-accent-tint: #37250B;
864
+ --cs-accent-ink: #FBE8D2;
865
+ }
866
+ @media (prefers-color-scheme: dark) {
867
+ [data-theme="system"][data-cs-element="kim"][data-cs-variant="titanium"] {
868
+ --cs-accent: #FEE5C7;
869
+ --cs-accent-bright: #FBE8D2;
870
+ --cs-accent-strong: #6B573E;
871
+ --cs-accent-on: #f5ead9;
872
+ --cs-accent-on-strong: #FFFDF8;
873
+ --cs-accent-tint: #37250B;
874
+ --cs-accent-ink: #FBE8D2;
875
+ }
876
+ }
877
+ [data-theme="dark"][data-cs-element="kim"] {
878
+ --cs-accent: #F3B958;
879
+ --cs-accent-bright: #FDD89F;
880
+ --cs-accent-strong: #795303;
881
+ --cs-accent-on: #f5ead9;
882
+ --cs-accent-on-strong: #FFFDF8;
883
+ --cs-accent-tint: #382503;
884
+ --cs-accent-ink: #FDD89F;
885
+ }
886
+ @media (prefers-color-scheme: dark) {
887
+ [data-theme="system"][data-cs-element="kim"] {
888
+ --cs-accent: #F3B958;
889
+ --cs-accent-bright: #FDD89F;
890
+ --cs-accent-strong: #795303;
891
+ --cs-accent-on: #f5ead9;
892
+ --cs-accent-on-strong: #FFFDF8;
893
+ --cs-accent-tint: #382503;
894
+ --cs-accent-ink: #FDD89F;
895
+ }
896
+ }
897
+ [data-theme="dark"][data-cs-element="kim"][data-cs-variant="steel"] {
898
+ --cs-accent: #CCB17E;
899
+ --cs-accent-bright: #DFCBA5;
900
+ --cs-accent-strong: #1F1400;
901
+ --cs-accent-on: #f5ead9;
902
+ --cs-accent-on-strong: #FFFDF8;
903
+ --cs-accent-tint: #362602;
904
+ --cs-accent-ink: #E6D1AB;
905
+ }
906
+ @media (prefers-color-scheme: dark) {
907
+ [data-theme="system"][data-cs-element="kim"][data-cs-variant="steel"] {
908
+ --cs-accent: #CCB17E;
909
+ --cs-accent-bright: #DFCBA5;
910
+ --cs-accent-strong: #1F1400;
911
+ --cs-accent-on: #f5ead9;
912
+ --cs-accent-on-strong: #FFFDF8;
913
+ --cs-accent-tint: #362602;
914
+ --cs-accent-ink: #E6D1AB;
915
+ }
916
+ }
917
+
918
+ :root {
919
+ --cs-style-pack: liquid-glass;
920
+ }
921
+
922
+ [data-cs-style="liquid-glass"] {
923
+ --cs-style-pack: liquid-glass;
924
+ }
925
+
926
+ *, *::before, *::after { box-sizing: border-box; }
927
+ html { -webkit-text-size-adjust: 100%; }
928
+ body {
929
+ margin: 0;
930
+ background: var(--cs-color-surface-page, #fffdf8);
931
+ color: var(--cs-color-text-primary, #45210e);
932
+ font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
933
+ font-size: var(--cs-font-size-base, 1rem);
934
+ line-height: var(--cs-font-lineHeight-body, 1.5);
935
+ -webkit-font-smoothing: antialiased;
936
+ text-rendering: optimizeLegibility;
937
+ }
938
+ :where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
939
+ :where(p) { text-wrap: pretty; }
940
+ :where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
941
+
942
+ :where(:focus-visible) {
943
+ outline: 2px solid var(--cs-color-text-primary, #45210e);
944
+ outline-offset: 2px;
945
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre, #f4ba17);
946
+ }
947
+
948
+ .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
949
+ .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
950
+ .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
951
+ .cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); }
952
+ .cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
953
+ .cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
954
+ .cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
955
+ .cs-secondary { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-secondary); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
956
+ .cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
957
+ .cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
958
+ .cs-mono { font-family: var(--cs-font-family-mono); }
959
+
960
+ .cs-display-face { --cs-heading-family: var(--cs-font-family-display); }
961
+
962
+ .cs-button {
963
+ align-items: center;
964
+ background: var(--cs-component-button-primary-bg, #45210e);
965
+ border: 1px solid transparent;
966
+ border-radius: var(--cs-component-button-radius, var(--cs-radius-md, 8px));
967
+ color: var(--cs-component-button-primary-fg, #ffffff);
968
+ cursor: pointer;
969
+ display: inline-flex;
970
+ font: inherit;
971
+ font-weight: 700;
972
+ gap: var(--cs-component-button-gap, 0.5rem);
973
+ justify-content: center;
974
+ line-height: 1.2;
975
+ min-height: var(--cs-component-button-md-minHeight, 44px);
976
+ min-width: var(--cs-component-button-md-minHeight, 44px);
977
+ padding-block: var(--cs-component-button-md-paddingY, 12px);
978
+ padding-inline: var(--cs-component-button-md-paddingX, 20px);
979
+ transition: background var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease),
980
+ border-color var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease),
981
+ filter var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease);
982
+ }
983
+ .cs-button:hover { filter: brightness(1.08); }
984
+ .cs-button:active { transform: translateY(0.5px); }
985
+
986
+ .cs-button:focus-visible,
987
+ .cs-field__control:focus-visible,
988
+ .cs-ai-disclosure__badge:focus-visible {
989
+ outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre, #f4ba17);
990
+ outline-offset: 2px;
991
+ }
992
+
993
+ .cs-button--secondary {
994
+ background: var(--cs-color-surface-panel, #ffffff);
995
+ border-color: var(--cs-color-brand-umber, #45210e);
996
+ color: var(--cs-color-brand-umber, #45210e);
997
+ }
998
+ .cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
999
+
1000
+ .cs-button--tertiary {
1001
+ background: var(--cs-color-surface-raised, #fbf4e9);
1002
+ border-color: transparent;
1003
+ color: var(--cs-color-brand-umber, #45210e);
1004
+ }
1005
+ .cs-button--tertiary:hover { filter: none; border-color: var(--cs-color-border-default, #e7d9c6); }
1006
+
1007
+ .cs-button--ghost {
1008
+ background: transparent;
1009
+ color: var(--cs-color-brand-umber, #45210e);
1010
+ }
1011
+ .cs-button--ghost:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
1012
+
1013
+ [data-theme="dark"] .cs-button--secondary { color: var(--cs-color-brand-ochre); border-color: var(--cs-color-brand-ochre); }
1014
+ [data-theme="dark"] .cs-button--tertiary { color: var(--cs-color-text-primary); }
1015
+ [data-theme="dark"] .cs-button--ghost { color: var(--cs-color-text-primary); }
1016
+
1017
+ .cs-button--danger {
1018
+ background: var(--cs-color-semantic-danger, #b42318);
1019
+ color: var(--cs-color-text-inverse, #ffffff);
1020
+ }
1021
+
1022
+ .cs-button--danger-ghost {
1023
+ background: transparent;
1024
+ color: var(--cs-color-semantic-danger, #b42318);
1025
+ }
1026
+ .cs-button--danger-ghost:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger, #b42318) 10%, transparent); filter: none; }
1027
+
1028
+ .cs-button--xs {
1029
+ min-height: var(--cs-component-button-xs-minHeight, 28px);
1030
+ min-width: var(--cs-component-button-xs-minWidth, 28px);
1031
+ padding-block: var(--cs-component-button-xs-paddingY, 4px);
1032
+ padding-inline: var(--cs-component-button-xs-paddingX, 10px);
1033
+ font-size: var(--cs-font-size-sm, 0.875rem);
1034
+ }
1035
+ .cs-button--sm {
1036
+ min-height: var(--cs-component-button-sm-minHeight, 36px);
1037
+ min-width: var(--cs-component-button-sm-minHeight, 36px);
1038
+ padding-block: var(--cs-component-button-sm-paddingY, 8px);
1039
+ padding-inline: var(--cs-component-button-sm-paddingX, 14px);
1040
+ }
1041
+ .cs-button--lg {
1042
+ min-height: var(--cs-component-button-lg-minHeight, 52px);
1043
+ padding-block: var(--cs-component-button-lg-paddingY, 16px);
1044
+ padding-inline: var(--cs-component-button-lg-paddingX, 28px);
1045
+ }
1046
+ .cs-button--full { inline-size: 100%; }
1047
+
1048
+ .cs-button.is-disabled,
1049
+ .cs-button.is-loading,
1050
+ .cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
1051
+
1052
+ .cs-button__spinner {
1053
+ inline-size: 1em; block-size: 1em; border-radius: 999px;
1054
+ border: 2px solid currentColor; border-right-color: transparent;
1055
+ animation: cs-spin 0.6s linear infinite;
1056
+ }
1057
+ @keyframes cs-spin { to { transform: rotate(360deg); } }
1058
+ @media (prefers-reduced-motion: reduce) { .cs-button__spinner { animation-duration: 1.4s; } }
1059
+
1060
+ @media (pointer: coarse) {
1061
+ .cs-button { min-height: var(--cs-component-button-md-minHeight-coarse, var(--cs-component-button-md-minHeight, 44px)); }
1062
+ .cs-button--sm { min-height: var(--cs-component-button-sm-minHeight-coarse, 40px); }
1063
+ .cs-button--xs { min-height: var(--cs-component-button-xs-minHeight-coarse, 36px); }
1064
+ }
1065
+
1066
+ .cs-field { color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }
1067
+ .cs-field__label { font-weight: 700; }
1068
+ .cs-field__description { color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.875rem; }
1069
+ .cs-field__control {
1070
+ border: 1px solid var(--cs-component-textfield-border-default, #bfa58f);
1071
+ border-radius: var(--cs-radius-md, 8px);
1072
+ background: var(--cs-color-surface-panel, #fff);
1073
+ color: var(--cs-color-text-primary, #45210e);
1074
+ font: inherit;
1075
+ min-height: var(--cs-component-textfield-minHeight, 44px);
1076
+ padding-block: var(--cs-component-textfield-paddingY, 10px);
1077
+ padding-inline: var(--cs-component-textfield-paddingX, 12px);
1078
+ }
1079
+ .cs-field__control::placeholder { color: var(--cs-color-text-muted, #6e5a4c); opacity: 0.7; }
1080
+ .cs-field.is-invalid .cs-field__control { border-color: var(--cs-color-semantic-danger, #b42318); }
1081
+ .cs-field__error { color: var(--cs-color-semantic-danger, #b42318); font-size: 0.875rem; }
1082
+
1083
+ .cs-dialog-layer { inset: 0; position: fixed; z-index: var(--cs-depth-modal); }
1084
+ .cs-dialog__overlay { background: rgba(31, 19, 11, 0.42); inset: 0; position: absolute; }
1085
+ .cs-dialog {
1086
+ background: var(--cs-color-surface-panel, #ffffff);
1087
+ border-radius: var(--cs-radius-md, 8px);
1088
+ box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
1089
+ color: var(--cs-color-text-primary, #45210e);
1090
+ left: 50%;
1091
+ max-inline-size: min(42rem, calc(100vw - 2rem));
1092
+ max-block-size: min(80vh, calc(100vh - 4rem));
1093
+ overflow: auto;
1094
+ padding: var(--cs-space-6, 24px);
1095
+ position: absolute;
1096
+ top: 12vh;
1097
+ transform: translateX(-50%);
1098
+ width: 100%;
1099
+ }
1100
+ .cs-dialog__header,
1101
+ .cs-dialog__actions,
1102
+ .cs-review-gate__actions {
1103
+ align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
1104
+ }
1105
+ .cs-dialog__actions { justify-content: flex-end; }
1106
+ .cs-dialog__title { font-size: 1.25rem; line-height: 1.35; margin: 0; }
1107
+ .cs-dialog__body { margin-block: 1rem; }
1108
+
1109
+ .cs-alert-dialog { max-inline-size: min(28rem, calc(100vw - 2rem)); }
1110
+ .cs-alert-dialog--destructive .cs-dialog__title { color: var(--cs-color-semantic-danger, #b42318); }
1111
+ @media (max-width: 640px) {
1112
+ .cs-dialog { max-inline-size: calc(100vw - 1rem); top: 4vh; padding: var(--cs-space-4, 16px); }
1113
+ .cs-dialog__actions .cs-button, .cs-review-gate__actions .cs-button { flex: 1 1 auto; }
1114
+ }
1115
+
1116
+ .cs-table-wrap { overflow: auto; }
1117
+ .cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
1118
+ .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
1119
+ .cs-table th, .cs-table td {
1120
+ border-block-end: 1px solid rgba(69, 33, 14, 0.18);
1121
+ padding: 0.625rem 0.75rem; text-align: start;
1122
+ }
1123
+ .cs-table thead th {
1124
+ font-size: var(--cs-font-size-xs, 0.75rem); text-transform: uppercase;
1125
+ letter-spacing: var(--cs-letter-spacing-caps, 0.08em); color: var(--cs-color-text-muted, #6e5a4c);
1126
+ }
1127
+ .cs-table caption { font-weight: 700; margin-block-end: 0.5rem; text-align: start; }
1128
+ .cs-table__empty { color: var(--cs-color-text-muted, #6e5a4c); }
1129
+
1130
+ .cs-ai-disclosure { display: inline-block; position: relative; }
1131
+ .cs-ai-disclosure__badge {
1132
+ background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
1133
+ color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
1134
+ padding: 0.25rem 0.625rem; cursor: pointer;
1135
+ }
1136
+ .cs-ai-disclosure__panel {
1137
+ background: var(--cs-color-surface-panel, #ffffff);
1138
+ border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
1139
+ box-shadow: var(--cs-shadow-md, 0 12px 30px rgba(31, 19, 11, 0.18));
1140
+ display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
1141
+ min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
1142
+ }
1143
+ .cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.8125rem; }
1144
+
1145
+ .cs-review-gate {
1146
+ border: 1px solid var(--cs-color-semantic-warning, #92400e);
1147
+ border-radius: var(--cs-radius-md, 8px); color: var(--cs-color-text-primary, #45210e);
1148
+ display: grid; gap: 0.75rem; padding: var(--cs-space-4, 16px);
1149
+ background: color-mix(in oklab, var(--cs-color-semantic-warning, #92400e) 5%, var(--cs-color-surface-panel, #fff));
1150
+ }
1151
+ .cs-review-gate__risk {
1152
+ color: var(--cs-color-semantic-warning, #92400e); font-weight: 700;
1153
+ text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem;
1154
+ }
1155
+ .cs-review-gate__summary { margin: 0; }
1156
+ .cs-review-gate__reviewer { margin: 0; color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.875rem; }
1157
+
1158
+ .cs-logo { block-size: auto; display: inline-block; vertical-align: middle; }
1159
+
1160
+ .cs-button, .cs-field, .cs-field__control, .cs-dialog, .cs-table,
1161
+ .cs-ai-disclosure, .cs-review-gate, .cs-logo {
1162
+ font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
1163
+ }
1164
+
1165
+ @media (prefers-color-scheme: dark) {
1166
+
1167
+ [data-theme="system"] .cs-button--secondary { color: var(--cs-color-brand-ochre); border-color: var(--cs-color-brand-ochre); }
1168
+ [data-theme="system"] .cs-button--tertiary { color: var(--cs-color-text-primary); }
1169
+ [data-theme="system"] .cs-button--ghost { color: var(--cs-color-text-primary); }
1170
+ }
1171
+
1172
+ .cs-select { position: relative; display: block; }
1173
+ .cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
1174
+ .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
1175
+ .cs-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
1176
+
1177
+ .cs-native-select { position: relative; display: block; }
1178
+ .cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
1179
+ .cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
1180
+ .cs-native-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
1181
+ .cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }
1182
+ .cs-native-select--md select.cs-field__control { min-block-size: 44px; }
1183
+
1184
+ .cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }
1185
+ .cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--cs-color-brand-umber); cursor: pointer; }
1186
+ .cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }
1187
+ .cs-check__text, .cs-radio__text { display: grid; gap: 2px; }
1188
+ .cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
1189
+ [data-theme="dark"] .cs-check input, [data-theme="dark"] .cs-radio input { accent-color: var(--cs-color-brand-ochre); }
1190
+ .cs-radio-group { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
1191
+ .cs-radio-group > legend { font-weight: 700; padding: 0; margin-block-end: 6px; }
1192
+
1193
+ .cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
1194
+ .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
1195
+ .cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
1196
+ .cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
1197
+ .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-umber); }
1198
+ [data-theme="dark"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
1199
+ .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
1200
+ .cs-switch input:focus-visible + .cs-switch__track { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
1201
+ .cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
1202
+
1203
+ textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }
1204
+
1205
+ @media (prefers-color-scheme: dark) {
1206
+ [data-theme="system"] .cs-check input, [data-theme="system"] .cs-radio input { accent-color: var(--cs-color-brand-ochre); }
1207
+ [data-theme="system"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
1208
+ }
1209
+
1210
+ .cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
1211
+ .cs-badge--solid { border-color: transparent; color: #fff; background: var(--cs-color-brand-umber); }
1212
+ .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
1213
+ .cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-text-inverse); border-color: transparent; }
1214
+ .cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-text-inverse); border-color: transparent; }
1215
+ .cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-text-inverse); border-color: transparent; }
1216
+ .cs-badge--info { background: var(--cs-color-semantic-info); color: var(--cs-color-text-inverse); border-color: transparent; }
1217
+ .cs-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
1218
+
1219
+ .cs-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; padding: 5px 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
1220
+ .cs-tag__close { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }
1221
+ .cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }
1222
+
1223
+ .cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }
1224
+ .cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }
1225
+ .cs-alert__title { font-weight: 700; margin: 0 0 2px; }
1226
+ .cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1227
+ .cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }
1228
+ .cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }
1229
+ .cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-focus-ring, var(--cs-accent-bright)); outline-offset: 2px; }
1230
+ .cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }
1231
+ .cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info); }
1232
+ .cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
1233
+ .cs-alert--success .cs-alert__icon { color: var(--cs-color-semantic-success); }
1234
+ .cs-alert--warning { border-inline-start: 4px solid var(--cs-color-semantic-warning); }
1235
+ .cs-alert--warning .cs-alert__icon { color: var(--cs-color-semantic-warning); }
1236
+ .cs-alert--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
1237
+ .cs-alert--danger .cs-alert__icon { color: var(--cs-color-semantic-danger); }
1238
+
1239
+ .cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100vw - 40px)); }
1240
+ .cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }
1241
+ .cs-toast__icon { color: var(--cs-color-text-accent); }
1242
+ .cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }
1243
+ .cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info); }
1244
+ .cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
1245
+ .cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success); }
1246
+ .cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
1247
+ .cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger); }
1248
+ .cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
1249
+ .cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }
1250
+ .cs-toast__close { border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); padding: 0; display: grid; place-items: center; }
1251
+ @keyframes cs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
1252
+ @media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }
1253
+
1254
+ .cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-top-color: var(--cs-color-brand-umber); animation: cs-spin 0.62s linear infinite; }
1255
+ [data-theme="dark"] .cs-spinner { border-color: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent); border-top-color: var(--cs-color-brand-ochre); }
1256
+ @media (prefers-reduced-motion: reduce) { .cs-spinner { animation-duration: 1.5s; } }
1257
+
1258
+ .cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
1259
+ .cs-progress__fill { block-size: 100%; border-radius: inherit; background: var(--cs-color-brand-ochre); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
1260
+ .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }
1261
+ .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }
1262
+
1263
+ .cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }
1264
+ .cs-skeleton--text { block-size: 0.75em; margin-block: 0.25em; }
1265
+ .cs-skeleton--circle { border-radius: 50%; }
1266
+ @keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
1267
+ @media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }
1268
+
1269
+ @media (prefers-color-scheme: dark) {
1270
+ [data-theme="system"] .cs-spinner { border-color: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent); border-top-color: var(--cs-color-brand-ochre); }
1271
+ }
1272
+
1273
+ .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
1274
+ .cs-card--flat { box-shadow: none; }
1275
+ .cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), box-shadow var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
1276
+ .cs-card--interactive:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-md); }
1277
+ .cs-card--interactive:active { transform: translateY(1px); }
1278
+ .cs-card__media { display: block; inline-size: 100%; }
1279
+ .cs-card__header { padding: 18px 20px 0; }
1280
+ .cs-card__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; line-height: var(--cs-font-lineHeight-heading); }
1281
+ .cs-card__subtitle { margin: 4px 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1282
+ .cs-card__body { padding: 16px 20px; }
1283
+ .cs-card__body > :first-child { margin-block-start: 0; }
1284
+ .cs-card__body > :last-child { margin-block-end: 0; }
1285
+ .cs-card__footer { padding: 12px 20px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
1286
+
1287
+ .cs-stat { display: grid; gap: 3px; }
1288
+ .cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
1289
+ .cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); }
1290
+ .cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }
1291
+ .cs-stat__delta--up { color: var(--cs-color-semantic-success); }
1292
+ .cs-stat__delta--down { color: var(--cs-color-semantic-danger); }
1293
+ .cs-stat__delta--flat { color: var(--cs-color-text-muted); }
1294
+
1295
+ .cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
1296
+ .cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
1297
+ .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }
1298
+ .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }
1299
+ .cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }
1300
+ .cs-avatar--square { border-radius: var(--cs-radius-md); }
1301
+ .cs-avatar-group { display: inline-flex; }
1302
+ .cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }
1303
+ .cs-avatar-group > .cs-avatar + .cs-avatar { margin-inline-start: -10px; }
1304
+
1305
+ .cs-tooltip { position: relative; display: inline-flex; }
1306
+ .cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
1307
+ .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
1308
+ .cs-tooltip:hover .cs-tooltip__bubble, .cs-tooltip:focus-within .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
1309
+
1310
+ .cs-divider { border: 0; block-size: 1px; background: var(--cs-color-border-default); margin-block: var(--cs-space-4); }
1311
+ .cs-divider--label { display: flex; align-items: center; gap: 12px; background: none; block-size: auto; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1312
+ .cs-divider--label::before, .cs-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--cs-color-border-default); }
1313
+ .cs-divider--vertical { inline-size: 1px; block-size: auto; align-self: stretch; margin-inline: var(--cs-space-4); margin-block: 0; }
1314
+
1315
+ .cs-scroll-area {
1316
+ overflow: auto;
1317
+ overscroll-behavior: contain;
1318
+ outline: none;
1319
+ border-radius: var(--cs-radius-md);
1320
+ scrollbar-color: color-mix(in oklab, var(--cs-color-brand-umber) 35%, transparent) transparent;
1321
+ scrollbar-width: thin;
1322
+ }
1323
+ .cs-scroll-area:focus-visible {
1324
+ box-shadow: 0 0 0 3px var(--cs-color-brand-ochre);
1325
+ }
1326
+
1327
+ .cs-aspect-ratio {
1328
+ position: relative;
1329
+ display: block;
1330
+ inline-size: 100%;
1331
+ overflow: hidden;
1332
+ border-radius: var(--cs-radius-md);
1333
+ }
1334
+ .cs-aspect-ratio > * {
1335
+ position: absolute;
1336
+ inset: 0;
1337
+ inline-size: 100%;
1338
+ block-size: 100%;
1339
+ }
1340
+ .cs-aspect-ratio > img,
1341
+ .cs-aspect-ratio > video {
1342
+ object-fit: cover;
1343
+ display: block;
1344
+ }
1345
+
1346
+ .cs-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--cs-color-border-default); }
1347
+ .cs-tab { appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: -1px; display: inline-flex; align-items: center; gap: 7px; }
1348
+ .cs-tab:hover { color: var(--cs-color-text-primary); }
1349
+ .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-umber); border-block-end-color: var(--cs-color-brand-ochre); }
1350
+ [data-theme="dark"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
1351
+ .cs-tab:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
1352
+ .cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }
1353
+
1354
+ .cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
1355
+ .cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
1356
+ .cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }
1357
+ .cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }
1358
+ .cs-breadcrumb__sep { color: var(--cs-color-border-default); }
1359
+ .cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
1360
+
1361
+ .cs-pagination { display: inline-flex; align-items: center; gap: 4px; }
1362
+ .cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }
1363
+ .cs-pagination button:hover:not(:disabled) { border-color: var(--cs-color-brand-ochre); }
1364
+ .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); border-color: transparent; }
1365
+ [data-theme="dark"] .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1366
+ .cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
1367
+ .cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
1368
+
1369
+ .cs-menu { position: relative; display: inline-block; }
1370
+ .cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }
1371
+ .cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
1372
+ .cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1373
+ .cs-menu__item:hover { background: var(--cs-color-surface-raised); }
1374
+ .cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; }
1375
+ .cs-menu__item--danger { color: var(--cs-color-semantic-danger); }
1376
+ .cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
1377
+ .cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
1378
+ .cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }
1379
+
1380
+ @media (prefers-color-scheme: dark) {
1381
+ [data-theme="system"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
1382
+ [data-theme="system"] .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1383
+ }
1384
+
1385
+ .cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
1386
+ .cs-prompt:focus-within {
1387
+ border-color: var(--cs-color-text-primary);
1388
+ outline: 2px solid var(--cs-color-text-primary);
1389
+ outline-offset: 2px;
1390
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1391
+ }
1392
+ .cs-prompt__field { border: 0; background: transparent; resize: none; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); min-height: 44px; outline: 0; inline-size: 100%; line-height: var(--cs-font-lineHeight-body); }
1393
+ .cs-prompt__field::placeholder { color: var(--cs-color-text-muted); }
1394
+ .cs-prompt__bar { display: flex; align-items: center; gap: 10px; }
1395
+ .cs-prompt__hint { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
1396
+ .cs-prompt__hint svg { color: var(--cs-color-brand-ochre); }
1397
+
1398
+ .cs-chat { display: grid; gap: 14px; }
1399
+ .cs-chat-msg { display: flex; gap: 10px; align-items: flex-start; }
1400
+ .cs-chat-msg--user { flex-direction: row-reverse; }
1401
+ .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
1402
+ .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1403
+ .cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
1404
+ .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
1405
+ .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
1406
+ .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
1407
+ .cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
1408
+ .cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
1409
+ .cs-chat-msg--lumi .cs-chat-msg__bubble { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-end-start-radius: 4px; color: var(--cs-color-text-primary); }
1410
+ .cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; border-end-end-radius: 4px; }
1411
+
1412
+ .cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }
1413
+ .cs-confidence__head { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); }
1414
+ .cs-confidence__level { font-weight: 700; letter-spacing: 0; text-transform: none; font-size: var(--cs-font-size-sm); }
1415
+ .cs-confidence__track { display: flex; gap: 3px; }
1416
+ .cs-confidence__seg { block-size: 8px; flex: 1; border-radius: 2px; background: var(--cs-color-surface-raised); }
1417
+
1418
+ .cs-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
1419
+ .cs-suggest button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: var(--cs-radius-full); padding: 8px 14px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
1420
+ .cs-suggest button:hover { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }
1421
+ .cs-suggest button svg { color: var(--cs-color-brand-ochre); }
1422
+
1423
+ .cs-typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: 14px; border-end-start-radius: 4px; }
1424
+ .cs-typing span { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cs-color-text-muted); animation: cs-typing 1.2s var(--cs-ease-standard) infinite; }
1425
+ .cs-typing span:nth-child(2) { animation-delay: 0.18s; }
1426
+ .cs-typing span:nth-child(3) { animation-delay: 0.36s; }
1427
+ @keyframes cs-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
1428
+ @media (prefers-reduced-motion: reduce) { .cs-typing span { animation: none; opacity: 0.7; } }
1429
+
1430
+ .cs-citations { display: grid; gap: 8px; }
1431
+ .cs-citations__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
1432
+ .cs-citation { display: flex; align-items: flex-start; gap: 9px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); text-decoration: none; }
1433
+ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
1434
+ .cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-2xs); font-weight: 700; display: grid; place-items: center; }
1435
+ .cs-citation__text { line-height: 1.4; }
1436
+ .cs-citation__src { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
1437
+
1438
+ .cs-lumi { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffd873, var(--cs-color-brand-ochre)); color: var(--cs-color-brand-umber); flex: none; }
1439
+ .cs-lumi img { inline-size: 100%; block-size: 100%; object-fit: cover; }
1440
+ .cs-lumi--sm { inline-size: 32px; block-size: 32px; }
1441
+ .cs-lumi--md { inline-size: 44px; block-size: 44px; }
1442
+ .cs-lumi--lg { inline-size: 64px; block-size: 64px; }
1443
+ .cs-lumi--ring { box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 34%, transparent); }
1444
+
1445
+ .cs-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
1446
+ .cs-search:focus-within {
1447
+ border-color: var(--cs-color-text-primary);
1448
+ outline: 2px solid var(--cs-color-text-primary);
1449
+ outline-offset: 2px;
1450
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1451
+ }
1452
+ .cs-search svg { color: var(--cs-color-text-muted); flex: none; }
1453
+ .cs-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
1454
+ .cs-search input::placeholder { color: var(--cs-color-text-muted); }
1455
+ .cs-search__clear { border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; }
1456
+ .cs-search__clear:hover { color: var(--cs-color-text-primary); }
1457
+
1458
+ .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
1459
+ .cs-stepper:focus-within {
1460
+ border-color: var(--cs-color-text-primary);
1461
+ outline: 2px solid var(--cs-color-text-primary);
1462
+ outline-offset: 2px;
1463
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1464
+ }
1465
+ .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
1466
+ .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
1467
+ .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
1468
+ .cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }
1469
+ .cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
1470
+
1471
+ .cs-slider { inline-size: 100%; accent-color: var(--cs-color-brand-umber); block-size: 22px; cursor: pointer; }
1472
+ [data-theme="dark"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
1473
+ .cs-slider:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 4px; border-radius: var(--cs-radius-full); }
1474
+
1475
+ .cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }
1476
+ .cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }
1477
+ .cs-dropzone__icon { color: var(--cs-color-text-accent); }
1478
+ .cs-dropzone__title { font-weight: 700; }
1479
+ .cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
1480
+
1481
+ .cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
1482
+ .cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
1483
+ .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); }
1484
+ [data-theme="dark"] .cs-segmented button[aria-pressed="true"], [data-theme="dark"] .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1485
+
1486
+ .cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }
1487
+ .cs-status__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cs-color-text-muted); flex: none; }
1488
+ .cs-status--online .cs-status__dot { background: var(--cs-color-semantic-success); }
1489
+ .cs-status--busy .cs-status__dot { background: var(--cs-color-brand-ochre); }
1490
+ .cs-status--offline .cs-status__dot { background: var(--cs-color-text-muted); }
1491
+ .cs-status--error .cs-status__dot { background: var(--cs-color-semantic-danger); }
1492
+ .cs-status--pulse .cs-status__dot { box-shadow: 0 0 0 0 currentColor; animation: cs-pulse 1.8s var(--cs-ease-standard) infinite; color: var(--cs-color-semantic-success); }
1493
+ @keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cs-color-semantic-success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
1494
+ @media (prefers-reduced-motion: reduce) { .cs-status--pulse .cs-status__dot { animation: none; } }
1495
+
1496
+ .cs-kbd { display: inline-block; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); line-height: 1; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-block-end-width: 2px; border-radius: 6px; padding: 3px 7px; box-shadow: var(--cs-shadow-xs); }
1497
+
1498
+ .cs-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 14px; min-block-size: 40px; cursor: pointer; transition: background var(--cs-duration-fast, 120ms), border-color var(--cs-duration-fast, 120ms); }
1499
+ .cs-toggle:hover { background: var(--cs-color-surface-raised); }
1500
+ .cs-toggle[aria-pressed="true"] { background: var(--cs-accent-tint); border-color: var(--cs-accent); color: var(--cs-accent-strong); }
1501
+ [data-theme="dark"] .cs-toggle[aria-pressed="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1502
+ .cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
1503
+ .cs-rating { display: inline-flex; gap: 4px; }
1504
+ .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
1505
+ .cs-rating button.on { color: var(--cs-color-brand-ochre); }
1506
+ .cs-rating[data-readonly="true"] button { cursor: default; }
1507
+ .cs-rating button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-radius: 4px; }
1508
+ .cs-otp { display: inline-flex; gap: 8px; }
1509
+ .cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }
1510
+ .cs-otp input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; border-color: var(--cs-accent); }
1511
+ .cs-otp input:disabled { opacity: .5; }
1512
+ .cs-btngroup { display: inline-flex; }
1513
+ .cs-btngroup .cs-button { border-radius: 0; }
1514
+ .cs-btngroup .cs-button:first-child { border-start-start-radius: var(--cs-component-button-radius, 10px); border-end-start-radius: var(--cs-component-button-radius, 10px); }
1515
+ .cs-btngroup .cs-button:last-child { border-start-end-radius: var(--cs-component-button-radius, 10px); border-end-end-radius: var(--cs-component-button-radius, 10px); }
1516
+ .cs-btngroup .cs-button + .cs-button { margin-inline-start: -1px; }
1517
+
1518
+ .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
1519
+ .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px 12px; min-block-size: 44px; }
1520
+ .cs-combobox input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1521
+ .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
1522
+ .cs-combobox__list { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; list-style: none; }
1523
+ .cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }
1524
+ .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
1525
+ [data-theme="dark"] .cs-combobox__opt[aria-selected="true"], [data-theme="dark"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1526
+ .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1527
+ .cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
1528
+ .cs-igroup:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1529
+ .cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
1530
+ .cs-igroup > input:focus { outline: none; }
1531
+ .cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }
1532
+ .cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }
1533
+ .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
1534
+ .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
1535
+ .cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px 8px; min-block-size: 44px; box-sizing: border-box; }
1536
+ .cs-taginput:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1537
+ .cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px 4px; }
1538
+ .cs-taginput > input:focus { outline: none; }
1539
+
1540
+ .cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 12px; min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }
1541
+ .cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
1542
+ .cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }
1543
+ .cs-cal__head button:hover { background: var(--cs-color-surface-raised); }
1544
+ .cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
1545
+ .cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
1546
+ .cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1547
+ .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
1548
+ .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
1549
+ .cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }
1550
+ .cs-cal__grid button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1551
+ .cs-datepicker { position: relative; display: inline-block; }
1552
+ .cs-datepicker__field { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
1553
+ .cs-datepicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1554
+ .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
1555
+ .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
1556
+ .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
1557
+ .cs-timepicker:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1558
+ .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
1559
+ .cs-timepicker select:focus { outline: none; }
1560
+
1561
+ .cs-hovercard { position: relative; display: inline-block; }
1562
+ .cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
1563
+ .cs-popconfirm { position: relative; display: inline-block; }
1564
+ .cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
1565
+ .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
1566
+ .cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
1567
+ .cs-ctxmenu-zone { position: relative; }
1568
+ .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
1569
+ .cs-fab--static { position: static; align-items: flex-start; }
1570
+ .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
1571
+ .cs-fab__main:hover { filter: brightness(1.05); }
1572
+ .cs-fab__main:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
1573
+ .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
1574
+ .cs-fab--static .cs-fab__dial { flex-direction: row; }
1575
+ .cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
1576
+ .cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }
1577
+ .cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
1578
+ .cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success); }
1579
+ .cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger); }
1580
+ .cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning); }
1581
+ .cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }
1582
+ .cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }
1583
+ .cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }
1584
+ .cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1585
+ .cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }
1586
+ .cs-inline-edit__view svg { color: var(--cs-color-text-muted); }
1587
+ .cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }
1588
+ .cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }
1589
+ .cs-inline-edit input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1590
+
1591
+ .cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }
1592
+ .cs-link:hover { color: var(--cs-color-link-hover); }
1593
+ .cs-link--muted { color: var(--cs-color-text-muted); }
1594
+ .cs-link--standalone { font-weight: 700; text-decoration: none; }
1595
+ .cs-link--standalone:hover { text-decoration: underline; }
1596
+ .cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }
1597
+ .cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }
1598
+ .cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
1599
+ .cs-anchor__item:hover { color: var(--cs-color-text-primary); }
1600
+ .cs-anchor__item.is-active { color: var(--cs-accent-strong); border-inline-start-color: var(--cs-accent); font-weight: 600; }
1601
+ [data-theme="dark"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
1602
+ .cs-image { position: relative; display: inline-block; overflow: hidden; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); max-inline-size: 100%; }
1603
+ .cs-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
1604
+ .cs-image.is-loading { min-inline-size: 120px; min-block-size: 80px; animation: cs-img-shimmer 1.2s ease-in-out infinite alternate; }
1605
+ @keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }
1606
+ .cs-image.is-zoomable { cursor: zoom-in; }
1607
+ .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
1608
+ .cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
1609
+ .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
1610
+ .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--cs-font-size-base); cursor: pointer; }
1611
+ .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
1612
+ .cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }
1613
+ .cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }
1614
+ .cs-toolbar__btn:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1615
+ .cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }
1616
+ .cs-toolbar__more { position: relative; }
1617
+ .cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }
1618
+
1619
+ .cs-menubar { display: inline-flex; gap: 2px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 3px; }
1620
+ .cs-menubar__wrap { position: relative; }
1621
+ .cs-menubar__top { border: 0; background: none; font: 600 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 7px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1622
+ .cs-menubar__top:hover, .cs-menubar__top.is-open { background: var(--cs-color-surface-raised); }
1623
+ .cs-menubar__wrap .cs-menu__list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 5px); }
1624
+ .cs-navmenu { display: inline-flex; gap: 4px; align-items: center; }
1625
+ .cs-navmenu__wrap { position: relative; }
1626
+ .cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1627
+ .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
1628
+ .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
1629
+ .cs-navmenu__card { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
1630
+ .cs-navmenu__card:hover { background: var(--cs-accent-tint); }
1631
+ .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
1632
+ .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
1633
+ .cs-carousel { display: grid; gap: 10px; }
1634
+ .cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
1635
+ .cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }
1636
+ .cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }
1637
+ .cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }
1638
+ .cs-carousel__nav.prev { inset-inline-start: 10px; }
1639
+ .cs-carousel__nav.next { inset-inline-end: 10px; }
1640
+ .cs-carousel__dots { display: flex; gap: 6px; justify-content: center; }
1641
+ .cs-carousel__dots button { inline-size: 9px; block-size: 9px; border-radius: 999px; border: 0; background: var(--cs-color-border-default); cursor: pointer; padding: 0; position: relative; }
1642
+ .cs-carousel__dots button::before { content: ""; position: absolute; inset: -7.5px; }
1643
+ .cs-carousel__dots button[aria-current="true"] { background: var(--cs-accent); }
1644
+ @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
1645
+ .cs-comment { display: flex; gap: 10px; }
1646
+ .cs-comment__main { flex: 1; min-inline-size: 0; }
1647
+ .cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
1648
+ .cs-comment__meta { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
1649
+ .cs-comment__body { font-size: var(--cs-font-size-sm); line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
1650
+ .cs-comment__actions { display: flex; gap: 12px; }
1651
+ .cs-comment__actions button { border: 0; background: none; padding: 0; font: 600 12.5px var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }
1652
+ .cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }
1653
+
1654
+ .cs-form { display: grid; gap: 16px; }
1655
+
1656
+ .cs-form.is-pending { opacity: 0.72; }
1657
+ .cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
1658
+ pointer-events: none;
1659
+ cursor: wait;
1660
+ }
1661
+ .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: var(--cs-font-size-sm); }
1662
+ .cs-form__summary b { color: var(--cs-color-semantic-danger); }
1663
+ .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
1664
+ .cs-formfield { display: grid; gap: 6px; }
1665
+ .cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
1666
+ .cs-formfield__label em { color: var(--cs-color-semantic-danger); font-style: normal; }
1667
+ .cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
1668
+ .cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger); font-weight: 600; }
1669
+ .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
1670
+ .cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
1671
+ .cs-tree ul { list-style: none; margin: 0; padding: 0; }
1672
+ .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
1673
+ .cs-tree__row:hover { background: var(--cs-color-surface-raised); }
1674
+ .cs-tree__row.is-selected { background: var(--cs-accent-tint); }
1675
+ .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-strong); font-weight: 600; }
1676
+ [data-theme="dark"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
1677
+ .cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
1678
+ .cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }
1679
+ .cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
1680
+ .cs-backtop:hover { border-color: var(--cs-accent); }
1681
+
1682
+ .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
1683
+ .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
1684
+ .cs-treeselect__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1685
+ .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
1686
+ .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
1687
+ .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
1688
+ .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
1689
+ .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
1690
+ .cs-cascader__opt { display: flex; justify-content: space-between; gap: 8px; inline-size: 100%; border: 0; background: none; text-align: start; font: 500 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1691
+ .cs-cascader__opt:hover { background: var(--cs-color-surface-raised); }
1692
+ .cs-cascader__opt.on { background: var(--cs-accent-tint); color: var(--cs-accent-strong); font-weight: 600; }
1693
+ [data-theme="dark"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1694
+ .cs-transfer { display: flex; align-items: stretch; gap: 10px; }
1695
+ .cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 180px; }
1696
+ .cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
1697
+ .cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }
1698
+ .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
1699
+ .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
1700
+ .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
1701
+ .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
1702
+ .cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1703
+ .cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
1704
+ [data-theme="dark"] .cs-mentions__pop button:hover, [data-theme="dark"] .cs-mentions__pop button.hl, [data-theme="dark"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1705
+
1706
+ .cs-colorpicker { position: relative; display: inline-block; }
1707
+ .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
1708
+ .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
1709
+ .cs-colorpicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1710
+ .cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
1711
+ .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
1712
+ .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
1713
+ .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
1714
+ .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
1715
+ .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
1716
+ .cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
1717
+ .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
1718
+ .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
1719
+ .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
1720
+ .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
1721
+ .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
1722
+ .cs-tour__btns { display: flex; gap: 6px; }
1723
+ .cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
1724
+
1725
+ .cs-masonry__item { break-inside: avoid; }
1726
+ .cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
1727
+ .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
1728
+ .cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
1729
+ .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
1730
+ .cs-splitter__bar:focus-visible { background: var(--cs-accent-tint); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -2px; }
1731
+ .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
1732
+ .cs-hotkeys__card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
1733
+ .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
1734
+ .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
1735
+ .cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
1736
+ .cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
1737
+ .cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
1738
+ .cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }
1739
+ @media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }
1740
+
1741
+ .cs-datagrid { overflow: auto; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); }
1742
+ .cs-datagrid .cs-table { margin: 0; }
1743
+ .cs-datagrid thead th { position: sticky; inset-block-start: 0; background: var(--cs-color-surface-raised); z-index: 1; }
1744
+ .cs-datagrid__selcol { inline-size: 36px; text-align: center; }
1745
+ .cs-datagrid__sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
1746
+ .cs-datagrid tr.is-selected td { background: var(--cs-accent-tint); }
1747
+ [data-theme="dark"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
1748
+ .cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }
1749
+ .cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }
1750
+ .cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }
1751
+ .cs-sortable__item.is-dragging { opacity: .5; }
1752
+ .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
1753
+ .cs-sortable__grip { color: var(--cs-color-text-muted); }
1754
+ .cs-sortable__label { flex: 1; min-inline-size: 0; }
1755
+ .cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }
1756
+ .cs-sortable__ops .cs-button { cursor: pointer; }
1757
+ .cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }
1758
+
1759
+ .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
1760
+ .cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
1761
+ .cs-chart__legend b { color: var(--cs-color-text-primary); }
1762
+ .cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }
1763
+ .cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
1764
+ .cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }
1765
+ .cs-editor__area:focus-visible { box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }
1766
+
1767
+ .cs-terminal {
1768
+ --cs-term-border: #3a2a1c;
1769
+ --cs-term-bar: #2a1a0d;
1770
+ --cs-term-dot: #5b4331;
1771
+ --cs-term-bg: #1a1108;
1772
+ --cs-term-fg: #f5ead9;
1773
+ --cs-term-muted: #c9b7a3;
1774
+ max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-term-border); box-shadow: var(--cs-shadow-md);
1775
+ }
1776
+ .cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: var(--cs-term-bar); color: var(--cs-term-muted); font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
1777
+ .cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--cs-term-dot); }
1778
+ .cs-terminal__bar span { margin-inline-start: 8px; }
1779
+ .cs-terminal__body { background: var(--cs-term-bg); color: var(--cs-term-fg); font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
1780
+ .cs-terminal__line { display: flex; gap: 8px; align-items: center; }
1781
+ .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
1782
+ .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
1783
+
1784
+ .cs-terminal:focus-within {
1785
+ outline: 2px solid var(--cs-color-accent-ochre);
1786
+ outline-offset: 2px;
1787
+ box-shadow: 0 0 0 5px var(--cs-color-brand-umber);
1788
+ }
1789
+ .cs-terminal__out { color: var(--cs-term-muted); white-space: pre-wrap; }
1790
+
1791
+ @media (prefers-color-scheme: dark) {
1792
+ [data-theme="system"] .cs-segmented button[aria-pressed="true"], [data-theme="system"] .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1793
+ [data-theme="system"] .cs-combobox__opt[aria-selected="true"], [data-theme="system"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1794
+ [data-theme="system"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
1795
+ [data-theme="system"] .cs-toggle[aria-pressed="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1796
+ [data-theme="system"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
1797
+ [data-theme="system"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
1798
+ [data-theme="system"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1799
+ [data-theme="system"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
1800
+ [data-theme="system"] .cs-mentions__pop button:hover, [data-theme="system"] .cs-mentions__pop button.hl, [data-theme="system"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
1801
+ }
1802
+
1803
+ .cs-list { display: grid; gap: 2px; }
1804
+ .cs-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); text-align: start; }
1805
+ .cs-list__item--button { border: 0; background: transparent; font: inherit; inline-size: 100%; cursor: pointer; }
1806
+ .cs-list__item--button:hover { background: var(--cs-color-surface-raised); }
1807
+ .cs-list__lead { flex: none; color: var(--cs-color-text-accent); display: grid; place-items: center; }
1808
+ .cs-list__main { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
1809
+ .cs-list__title { font-weight: 600; font-size: var(--cs-font-size-sm); }
1810
+ .cs-list__sub { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
1811
+ .cs-list__trail { flex: none; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1812
+
1813
+ .cs-item {
1814
+ display: flex; align-items: center; gap: 14px;
1815
+ padding: 12px 14px; border-radius: var(--cs-radius-md);
1816
+ color: var(--cs-color-text-primary); text-align: start;
1817
+ text-decoration: none; border: 1px solid transparent;
1818
+ background: var(--cs-color-surface-panel);
1819
+ }
1820
+ .cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }
1821
+ button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }
1822
+ .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
1823
+ .cs-item--interactive:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
1824
+ .cs-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
1825
+ .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
1826
+ .cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }
1827
+ .cs-item__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
1828
+ .cs-item__title { font-weight: 600; font-size: var(--cs-font-size-sm); line-height: 1.35; }
1829
+ .cs-item__description { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); line-height: 1.4; }
1830
+ .cs-item__trailing { flex: none; display: grid; place-items: center; color: var(--cs-color-text-muted); }
1831
+
1832
+ .cs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 24px; margin: 0; }
1833
+ .cs-dl dt { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
1834
+ .cs-dl dd { margin: 2px 0 0; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
1835
+
1836
+ .cs-timeline { display: grid; }
1837
+ .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: 20px; position: relative; }
1838
+ .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
1839
+ .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
1840
+ .cs-timeline__item--now .cs-timeline__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
1841
+ .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
1842
+ .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
1843
+ .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
1844
+ .cs-timeline__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 4px; }
1845
+
1846
+ .cs-accordion { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); }
1847
+ .cs-accordion__item + .cs-accordion__item { border-block-start: 1px solid var(--cs-color-border-default); }
1848
+ .cs-accordion__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }
1849
+ .cs-accordion__trigger:hover { background: var(--cs-color-surface-raised); }
1850
+ .cs-accordion__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
1851
+ .cs-accordion__trigger[aria-expanded="true"] .cs-accordion__chevron { transform: rotate(180deg); }
1852
+ .cs-accordion__panel { padding: 0 18px 16px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
1853
+
1854
+ .cs-collapsible { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); overflow: hidden; }
1855
+ .cs-collapsible__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }
1856
+ .cs-collapsible__trigger:hover { background: var(--cs-color-surface-raised); }
1857
+ .cs-collapsible__label { flex: 1; min-inline-size: 0; }
1858
+ .cs-collapsible__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
1859
+ .cs-collapsible__trigger[aria-expanded="true"] .cs-collapsible__chevron { transform: rotate(180deg); }
1860
+ .cs-collapsible__panel { padding: 0 16px 14px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
1861
+ .cs-collapsible__panel > :first-child { margin-block-start: 0; }
1862
+ .cs-collapsible__panel > :last-child { margin-block-end: 0; }
1863
+
1864
+ .cs-code {
1865
+ --cs-code-bg: #2b1e14;
1866
+ --cs-code-fg: #f5ead9;
1867
+ --cs-code-border: #4a3a2c;
1868
+ --cs-code-muted: #c9b7a3;
1869
+ position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
1870
+ }
1871
+ .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }
1872
+ .cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
1873
+ .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
1874
+ .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
1875
+ .cs-code code { font-family: inherit; }
1876
+
1877
+ .cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }
1878
+ .cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--cs-color-brand-umber); margin-block-end: 6px; }
1879
+ [data-theme="dark"] .cs-empty__icon { color: var(--cs-color-brand-ochre); }
1880
+ .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
1881
+ .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
1882
+ .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }
1883
+
1884
+ @media (prefers-color-scheme: dark) {
1885
+ [data-theme="system"] .cs-empty__icon { color: var(--cs-color-brand-ochre); }
1886
+ }
1887
+
1888
+ .cs-sidebar { inline-size: 248px; background: var(--cs-color-surface-panel); border-inline-end: 1px solid var(--cs-color-border-default); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
1889
+ .cs-sidebar__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 12px 12px 4px; }
1890
+ .cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
1891
+ .cs-nav-item:hover { background: var(--cs-color-surface-raised); }
1892
+ .cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
1893
+ .cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--cs-color-brand-umber); }
1894
+ .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-umber); }
1895
+ [data-theme="dark"] .cs-nav-item.is-active { color: var(--cs-color-brand-ochre); }
1896
+ [data-theme="dark"] .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-ochre); }
1897
+ .cs-nav-item__trail { margin-inline-start: auto; }
1898
+
1899
+ .cs-steps { display: flex; gap: 0; }
1900
+ .cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
1901
+ .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
1902
+ .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
1903
+ .cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; border-color: transparent; }
1904
+ .cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }
1905
+ .cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }
1906
+ .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
1907
+ .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
1908
+
1909
+ .cs-popover { position: relative; display: inline-block; }
1910
+ .cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }
1911
+ .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
1912
+
1913
+ .cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }
1914
+ .cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
1915
+ .cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }
1916
+ .cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
1917
+ .cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
1918
+ .cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }
1919
+ .cs-drawer__close:hover { color: var(--cs-color-semantic-danger); }
1920
+ .cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }
1921
+ .cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }
1922
+ @keyframes cs-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
1923
+ @keyframes cs-drawer-in-left { from { transform: translateX(-100%); } to { transform: none; } }
1924
+ @media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
1925
+
1926
+ .cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
1927
+ .cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }
1928
+ .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
1929
+ .cs-cmdk__search svg { color: var(--cs-color-text-muted); }
1930
+ .cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }
1931
+
1932
+ .cs-cmdk__search:focus-within {
1933
+ outline: 2px solid var(--cs-color-text-primary);
1934
+ outline-offset: -2px;
1935
+ box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre);
1936
+ }
1937
+ .cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }
1938
+ .cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }
1939
+ .cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }
1940
+ .cs-cmdk__item:hover, .cs-cmdk__item[aria-selected="true"] { background: var(--cs-color-surface-raised); }
1941
+ .cs-cmdk__item .cs-kbd { margin-inline-start: auto; }
1942
+
1943
+ @media (prefers-color-scheme: dark) {
1944
+ [data-theme="system"] .cs-nav-item.is-active { color: var(--cs-color-brand-ochre); }
1945
+ [data-theme="system"] .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-ochre); }
1946
+ }
1947
+
1948
+ :root {
1949
+ --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
1950
+ --cs-glass-whisper-border: transparent;
1951
+ --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);
1952
+ --cs-glass-light-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent);
1953
+ --cs-glass-standard-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent);
1954
+ --cs-glass-standard-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent);
1955
+ --cs-glass-heavy-bg: color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent);
1956
+ --cs-glass-heavy-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent);
1957
+ }
1958
+
1959
+ .cs-surface-whisper {
1960
+ background: var(--cs-glass-whisper-bg);
1961
+ -webkit-backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
1962
+ backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
1963
+ }
1964
+ .cs-surface-light {
1965
+ background: var(--cs-glass-light-bg);
1966
+ -webkit-backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
1967
+ backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
1968
+ border: 1px solid var(--cs-glass-light-border);
1969
+ }
1970
+ .cs-surface-standard, .cs-glass-card {
1971
+ background: var(--cs-glass-standard-bg);
1972
+ -webkit-backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
1973
+ backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
1974
+ border: 1px solid var(--cs-glass-standard-border);
1975
+ box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06));
1976
+ }
1977
+ .cs-surface-heavy {
1978
+ background: var(--cs-glass-heavy-bg);
1979
+ -webkit-backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
1980
+ backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
1981
+ border: 1px solid var(--cs-glass-heavy-border);
1982
+ box-shadow: var(--cs-shadow-lg, 0 20px 60px rgba(69, 33, 14, 0.18));
1983
+ }
1984
+ .cs-surface-solid, .cs-surface-matte {
1985
+ background: var(--cs-color-surface-panel, #fff);
1986
+ -webkit-backdrop-filter: none; backdrop-filter: none;
1987
+ border: 1px solid var(--cs-color-border-default, #e7d9c6);
1988
+ }
1989
+
1990
+ .cs-surface-standard, .cs-surface-heavy, .cs-glass-card { position: relative; }
1991
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before {
1992
+ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
1993
+ background: linear-gradient(135deg,
1994
+ color-mix(in oklab, #fff 30%, transparent) 0%, transparent 30%, transparent 70%,
1995
+ color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 15%, transparent) 100%);
1996
+ -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
1997
+ -webkit-mask-composite: xor;
1998
+ mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
1999
+ mask-composite: exclude;
2000
+ }
2001
+
2002
+ .cs-depth-bg { z-index: var(--cs-depth-bg, 0); }
2003
+ .cs-depth-section { z-index: var(--cs-depth-section, 5); }
2004
+ .cs-depth-card { z-index: var(--cs-depth-card, 10); }
2005
+ .cs-depth-nav { position: sticky; z-index: var(--cs-depth-nav, 50); }
2006
+ .cs-depth-modal { z-index: var(--cs-depth-modal, 100); }
2007
+ .cs-depth-toast { z-index: var(--cs-depth-toast, 200); }
2008
+
2009
+ [data-theme="dark"] { --cs-color-border-default: #4a3a2c; }
2010
+ @media (prefers-color-scheme: dark) { [data-theme="system"] { --cs-color-border-default: #4a3a2c; } }
2011
+
2012
+ @media (prefers-reduced-transparency: reduce) {
2013
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
2014
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2015
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2016
+ background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default, #e7d9c6);
2017
+ }
2018
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
2019
+ }
2020
+ @media (forced-colors: active) {
2021
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy, .cs-surface-solid,
2022
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2023
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2024
+ background: Canvas; border: 1px solid CanvasText; color: CanvasText;
2025
+ }
2026
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
2027
+ }
2028
+ @media print {
2029
+ [class*="cs-surface-"], .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2030
+ -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
2031
+ background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important;
2032
+ }
2033
+ }
2034
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
2035
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
2036
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); }
2037
+ }
2038
+
2039
+ .cs-aurora {
2040
+ background-color: var(--cs-color-brand-umber);
2041
+ background-image:
2042
+ radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
2043
+ radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
2044
+ radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
2045
+ color: #fff;
2046
+ }
2047
+ .cs-aurora--photo { background-size: cover; background-position: center; }
2048
+
2049
+ @media (prefers-color-scheme: dark) {
2050
+
2051
+ [data-theme="system"] { --cs-color-border-default: #4a3a2c; }
2052
+ }
2053
+
2054
+ .cs-button--primary, .cs-button--secondary, .cs-button--tertiary, .cs-button--danger {
2055
+ transition: background var(--cs-duration-fast) var(--cs-ease-standard),
2056
+ border-color var(--cs-duration-fast) var(--cs-ease-standard),
2057
+ filter var(--cs-duration-fast) var(--cs-ease-standard),
2058
+ box-shadow var(--cs-duration-base) var(--cs-ease-standard),
2059
+ transform var(--cs-duration-fast) var(--cs-ease-standard);
2060
+ }
2061
+ .cs-button--primary:hover:not(.is-disabled),
2062
+ .cs-button--danger:hover:not(.is-disabled) {
2063
+ box-shadow: 0 8px 20px rgba(69, 33, 14, 0.24);
2064
+ transform: translateY(-1px);
2065
+ }
2066
+ .cs-button--primary:active:not(.is-disabled),
2067
+ .cs-button--danger:active:not(.is-disabled) {
2068
+ transform: translateY(0);
2069
+ box-shadow: var(--cs-shadow-xs);
2070
+ }
2071
+
2072
+ .cs-button:focus-visible,
2073
+ .cs-field__control:focus-visible,
2074
+ .cs-select select.cs-field__control:focus-visible,
2075
+ .cs-native-select select.cs-field__control:focus-visible,
2076
+ .cs-search:focus-within,
2077
+ .cs-stepper:focus-within,
2078
+ .cs-prompt:focus-within,
2079
+ .cs-cmdk__search:focus-within,
2080
+ .cs-terminal:focus-within,
2081
+ .cs-ai-disclosure__badge:focus-visible,
2082
+ .cs-switch input:focus-visible + .cs-switch__track {
2083
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2084
+ }
2085
+
2086
+ @keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
2087
+ @keyframes cs-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
2088
+ @keyframes cs-pop-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
2089
+ .cs-fade-in { animation: cs-fade-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
2090
+ .cs-rise-in { animation: cs-rise-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
2091
+ .cs-rise-in--2 { animation-delay: 80ms; }
2092
+ .cs-rise-in--3 { animation-delay: 160ms; }
2093
+ .cs-rise-in--4 { animation-delay: 240ms; }
2094
+ .cs-dialog { animation: cs-pop-in var(--cs-duration-base) var(--cs-ease-entrance) both; }
2095
+ .cs-dialog__overlay { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-standard) both; }
2096
+
2097
+ @media (prefers-reduced-motion: reduce) {
2098
+ .cs-button--primary:hover, .cs-button--danger:hover { transform: none; }
2099
+ .cs-fade-in, .cs-rise-in, .cs-dialog, .cs-dialog__overlay { animation: none; }
2100
+ }
2101
+
2102
+ .cs-sr-only {
2103
+ position: absolute !important;
2104
+ inline-size: 1px !important;
2105
+ block-size: 1px !important;
2106
+ padding: 0 !important;
2107
+ margin: -1px !important;
2108
+ overflow: hidden !important;
2109
+ clip: rect(0, 0, 0, 0) !important;
2110
+ white-space: nowrap !important;
2111
+ border: 0 !important;
2112
+ }
2113
+
2114
+ @media (pointer: coarse) {
2115
+
2116
+ .cs-tab { min-height: 44px; }
2117
+ .cs-pagination button { block-size: 44px; min-inline-size: 44px; }
2118
+ .cs-menu__item { min-height: 44px; }
2119
+ .cs-stepper button { min-block-size: 44px; }
2120
+ .cs-stepper input { min-height: 44px; }
2121
+ .cs-breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; }
2122
+
2123
+
2124
+ .cs-segmented button { min-height: 40px; }
2125
+
2126
+
2127
+ .cs-check input, .cs-radio input { inline-size: 24px; block-size: 24px; }
2128
+ .cs-check, .cs-radio { min-height: 44px; align-items: center; }
2129
+ .cs-switch { min-height: 44px; }
2130
+
2131
+
2132
+ .cs-search__clear { min-inline-size: 32px; min-block-size: 32px; }
2133
+ .cs-ai-disclosure__badge { min-height: 32px; }
2134
+
2135
+
2136
+ .cs-slider { block-size: 32px !important; }
2137
+ }
2138
+
2139
+ @media (prefers-reduced-motion: reduce) {
2140
+ *, *::before, *::after {
2141
+ animation-duration: 0.01ms !important;
2142
+ animation-iteration-count: 1 !important;
2143
+ transition-duration: 0.01ms !important;
2144
+ scroll-behavior: auto !important;
2145
+ }
2146
+ }
2147
+
2148
+ @media (prefers-contrast: more) {
2149
+ :root { --cs-color-border-default: #9a8060; --cs-color-text-muted: #5a4638; }
2150
+ [data-theme="dark"] { --cs-color-border-default: #7a6450; --cs-color-text-muted: #d8c9b6; }
2151
+ }
2152
+
2153
+ @media (prefers-color-scheme: dark) {
2154
+ [data-theme="system"] { --cs-color-border-default: #7a6450; --cs-color-text-muted: #d8c9b6; }
2155
+ }
2156
+
2157
+ img, svg, video, canvas { max-width: 100%; height: auto; }
2158
+
2159
+ .cs-cq { container-type: inline-size; container-name: cs; }
2160
+ @container cs (max-width: 640px) {
2161
+ .cs-cq-stack { display: flex !important; flex-direction: column !important; }
2162
+ .cs-cq-stack > * { min-inline-size: 0; max-inline-size: 100%; }
2163
+ }
2164
+
2165
+ @media screen and (max-width: 768px) {
2166
+ .cs-desk { padding: 24px 10px !important; }
2167
+ .cs-sheet { padding: 40px 40px !important; }
2168
+ }
2169
+ @media screen and (max-width: 640px) {
2170
+ .cs-desk { padding: 12px 6px !important; }
2171
+ .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
2172
+ }
2173
+ @media screen and (max-width: 360px) {
2174
+ .cs-sheet { padding: 20px 15px !important; }
2175
+ }
2176
+
2177
+ @media screen and (max-width: 768px) {
2178
+ .cs-sheet table, .cs-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
2179
+ }
2180
+
2181
+ @media screen and (max-width: 768px) {
2182
+ .cs-sidebar { position: static !important; width: auto !important; height: auto !important;
2183
+ display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important;
2184
+ align-items: center !important; border-inline-end: 0 !important;
2185
+ border-block-end: 1px solid var(--cs-color-border-default) !important; }
2186
+ .cs-sidebar__label { width: 100% !important; }
2187
+ }
2188
+
2189
+ .cs-canvas-desk { overflow-x: auto; -webkit-overflow-scrolling: touch; }
2190
+ @media screen and (max-width: 1280px) {
2191
+ .cs-canvas-desk > * { min-width: 960px; }
2192
+ }
2193
+
2194
+ @media screen and (max-width: 640px) {
2195
+ section[style*="padding: 84px"], section[style*="padding: 80px"],
2196
+ section[style*="padding: 72px"] { padding-inline: 22px !important; }
2197
+ }
2198
+
2199
+ @media screen and (max-width: 768px) {
2200
+ [style*="grid-template-columns: repeat(3"],
2201
+ [style*="grid-template-columns: repeat(4"],
2202
+ [style*="grid-template-columns: repeat(5"],
2203
+ [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
2204
+ }
2205
+ @media screen and (max-width: 640px) {
2206
+ [style*="grid-template-columns: repeat(2"],
2207
+ [style*="grid-template-columns: repeat(3"],
2208
+ [style*="grid-template-columns: repeat(4"],
2209
+ [style*="grid-template-columns: repeat(5"],
2210
+ [style*="grid-template-columns: repeat(6"],
2211
+ [style*="grid-template-columns: 1fr 1fr"],
2212
+ [style*="grid-template-columns: 1.15fr 1fr"],
2213
+ [style*="grid-template-columns: 1fr 1.15fr"],
2214
+ [style*="grid-template-columns: 2fr 1fr"],
2215
+ [style*="grid-template-columns: 1fr 2fr"],
2216
+ [style*="grid-template-columns: auto 1fr"] { grid-template-columns: 1fr !important; }
2217
+ }
2218
+
2219
+ .cs-canvas-desk [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
2220
+ .cs-canvas-desk [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
2221
+
2222
+ @media screen and (max-width: 768px) {
2223
+ .cs-sidebar .cs-nav-item, .cs-nav-item { min-height: 44px; }
2224
+ .cs-search { display: flex; align-items: center; min-height: 44px; }
2225
+ .cs-search input, .cs-search select { min-height: 44px; }
2226
+ }
2227
+
2228
+ @media screen and (max-width: 768px) {
2229
+ .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
2230
+ }
2231
+
2232
+ @media screen and (max-width: 768px) {
2233
+ [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
2234
+ main { min-width: 0; }
2235
+ main > * { min-width: 0; }
2236
+ .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
2237
+ }
2238
+
2239
+ @media (max-width: 360px) {
2240
+ .cs-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
2241
+ .cs-pagination { flex-wrap: wrap; max-inline-size: 100%; }
2242
+ .cs-pagination button { min-inline-size: 32px; }
2243
+ .cs-otp { gap: 4px; }
2244
+ .cs-otp__box { inline-size: 36px; block-size: 40px; font-size: var(--cs-font-size-base); }
2245
+ .cs-dl { grid-template-columns: 1fr; }
2246
+ .cs-field { min-inline-size: 0; }
2247
+ .cs-field__control { min-inline-size: 0; }
2248
+ .card, button.card, article.case { min-width: 0 !important; }
2249
+ [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
2250
+ [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
2251
+ }
2252
+