@cyberskill/design 1.1.1 → 1.2.0

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