@flux-ui/components 3.0.0 → 3.1.2

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 (45) hide show
  1. package/dist/component/FluxBreadcrumb.vue.d.ts +15 -0
  2. package/dist/component/FluxBreadcrumbItem.vue.d.ts +23 -0
  3. package/dist/component/{FluxCheckbox.vue.d.ts → FluxFormCheckbox.vue.d.ts} +3 -0
  4. package/dist/component/FluxFormCheckboxGroup.vue.d.ts +26 -0
  5. package/dist/component/FluxFormField.vue.d.ts +1 -0
  6. package/dist/component/FluxFormNumberInput.vue.d.ts +26 -0
  7. package/dist/component/FluxFormRadio.vue.d.ts +18 -0
  8. package/dist/component/FluxFormRadioGroup.vue.d.ts +27 -0
  9. package/dist/component/FluxSkeleton.vue.d.ts +9 -0
  10. package/dist/component/index.d.ts +8 -1
  11. package/dist/composable/index.d.ts +2 -0
  12. package/dist/composable/useFormCheckboxGroupInjection.d.ts +2 -0
  13. package/dist/composable/useFormFieldInjection.d.ts +3 -2
  14. package/dist/composable/useFormRadioGroupInjection.d.ts +2 -0
  15. package/dist/data/di.d.ts +23 -0
  16. package/dist/index.css +1374 -1012
  17. package/dist/index.js +893 -399
  18. package/dist/index.js.map +1 -1
  19. package/package.json +9 -9
  20. package/src/component/FluxBreadcrumb.vue +24 -0
  21. package/src/component/FluxBreadcrumbItem.vue +72 -0
  22. package/src/component/FluxDataTable.vue +3 -3
  23. package/src/component/FluxFormCheckbox.vue +123 -0
  24. package/src/component/FluxFormCheckboxGroup.vue +57 -0
  25. package/src/component/FluxFormField.vue +23 -7
  26. package/src/component/FluxFormNumberInput.vue +180 -0
  27. package/src/component/FluxFormPinInput.vue +2 -2
  28. package/src/component/FluxFormRadio.vue +76 -0
  29. package/src/component/FluxFormRadioGroup.vue +53 -0
  30. package/src/component/FluxQuantitySelector.vue +4 -4
  31. package/src/component/FluxSkeleton.vue +46 -0
  32. package/src/component/FluxToggle.vue +4 -4
  33. package/src/component/index.ts +8 -1
  34. package/src/composable/index.ts +2 -0
  35. package/src/composable/useFormCheckboxGroupInjection.ts +6 -0
  36. package/src/composable/useFormFieldInjection.ts +7 -3
  37. package/src/composable/useFormRadioGroupInjection.ts +13 -0
  38. package/src/css/component/BorderBeam.module.scss +51 -22
  39. package/src/css/component/Breadcrumb.module.scss +86 -0
  40. package/src/css/component/Divider.module.scss +1 -0
  41. package/src/css/component/Form.module.scss +251 -45
  42. package/src/css/component/SegmentedControl.module.scss +18 -18
  43. package/src/css/component/Skeleton.module.scss +67 -0
  44. package/src/data/di.ts +30 -0
  45. package/src/component/FluxCheckbox.vue +0 -87
package/dist/index.css CHANGED
@@ -2200,18 +2200,26 @@
2200
2200
  --beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
2201
2201
  --beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(50, 200, 80), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(30, 185, 170), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 120, 40), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(100, 70, 255), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(240, 50, 180), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(180, 40, 240), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(40, 140, 255), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 50, 100), transparent);
2202
2202
  --beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(50, 200, 80, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(30, 185, 170, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 120, 40, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(100, 70, 255, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(240, 50, 180, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(180, 40, 240, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(40, 140, 255, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 50, 100, 0.3), transparent);
2203
- --beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(30, 185, 170), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(255, 120, 40), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(240, 50, 180), transparent);
2204
- --beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 50, 100, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(50, 200, 80, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
2205
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 30, 60), rgba(200, 30, 60, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(20, 150, 140), rgba(20, 150, 140, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(80, 50, 200), rgba(80, 50, 200, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(210, 130, 0, 0.7), rgba(210, 130, 0, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 160, 70), rgba(30, 160, 70, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(160, 30, 190), rgba(160, 30, 190, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(30, 100, 200), rgba(30, 100, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2206
2203
  --beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(40, 140, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(30, 185, 170, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(180, 40, 240, var(--beam-bop-tr)), transparent);
2207
2204
  --beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(40, 140, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(30, 185, 170, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(180, 40, 240, var(--beam-bop-tr)), transparent);
2208
2205
  --beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(255, 50, 100, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(50, 200, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(100, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(255, 120, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(180, 40, 240, var(--beam-pulse-frozen)), transparent);
2209
2206
  --beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(180, 40, 240, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(30, 185, 170, var(--beam-bop-tl)), transparent);
2210
2207
  --beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(255, 50, 100, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(255, 120, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(240, 50, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(180, 40, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(100, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(50, 200, 80, var(--beam-pulse-frozen)), transparent);
2211
2208
  }
2212
- [dark] .colorful {
2213
- --beam-line-blobs: radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(40, 180, 220), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 160, 30), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(240, 50, 180), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(30, 185, 170), transparent);
2214
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 60, 80), rgb(255, 60, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(40, 190, 180, 0.98), rgba(40, 190, 180, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 70, 255), rgb(100, 70, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 170, 40, 0.59), rgba(255, 170, 40, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(50, 200, 100), rgb(50, 200, 100) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(200, 50, 240, 0.91), rgba(200, 50, 240, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(40, 140, 255), rgb(40, 140, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2209
+ .colorful.line::after {
2210
+ background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(30, 185, 170), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(255, 120, 40), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(240, 50, 180), transparent);
2211
+ }
2212
+ .colorful.line::before {
2213
+ background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 50, 100, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(50, 200, 80, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
2214
+ }
2215
+ .colorful.line > .bloom {
2216
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 30, 60), rgba(200, 30, 60, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(20, 150, 140), rgba(20, 150, 140, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(80, 50, 200), rgba(80, 50, 200, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(210, 130, 0, 0.7), rgba(210, 130, 0, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 160, 70), rgba(30, 160, 70, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(160, 30, 190), rgba(160, 30, 190, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(30, 100, 200), rgba(30, 100, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2217
+ }
2218
+ [dark] .colorful.line::after {
2219
+ background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(40, 180, 220), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 160, 30), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(240, 50, 180), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(30, 185, 170), transparent);
2220
+ }
2221
+ [dark] .colorful.line > .bloom {
2222
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 60, 80), rgb(255, 60, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(40, 190, 180, 0.98), rgba(40, 190, 180, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 70, 255), rgb(100, 70, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 170, 40, 0.59), rgba(255, 170, 40, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(50, 200, 100), rgb(50, 200, 100) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(200, 50, 240, 0.91), rgba(200, 50, 240, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(40, 140, 255), rgb(40, 140, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2215
2223
  }
2216
2224
 
2217
2225
  .mono {
@@ -2219,18 +2227,26 @@
2219
2227
  --beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(180, 180, 180, 0.225), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(140, 140, 140, 0.225), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(160, 160, 160, 0.225), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(130, 130, 130, 0.225), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(170, 170, 170, 0.225), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(150, 150, 150, 0.225), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(190, 190, 190, 0.225), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(145, 145, 145, 0.225), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(165, 165, 165, 0.225), transparent);
2220
2228
  --beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(160, 160, 160), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(140, 140, 140), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(180, 180, 180), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(150, 150, 150), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(170, 170, 170), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(155, 155, 155), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(145, 145, 145), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(165, 165, 165), transparent);
2221
2229
  --beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(160, 160, 160, 0.25), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(140, 140, 140, 0.22), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(180, 180, 180, 0.17), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(150, 150, 150, 0.17), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(170, 170, 170, 0.15), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(155, 155, 155, 0.2), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(145, 145, 145, 0.15), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(165, 165, 165, 0.15), transparent);
2222
- --beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 100, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(80, 80, 80), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(90, 90, 90), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(70, 70, 70), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(85, 85, 85), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(95, 95, 95), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(75, 75, 75), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(105, 105, 105), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(65, 65, 65), transparent);
2223
- --beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(200, 200, 200, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(170, 170, 170, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(155, 155, 155, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(185, 185, 185, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(165, 165, 165, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(180, 180, 180, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(160, 160, 160, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(175, 175, 175, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(190, 190, 190, 0.52), transparent);
2224
- --beam-line-bloom: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.11) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(120, 120, 120, 0.12), rgba(120, 120, 120, 0.09) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.08) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(100, 100, 100, 0.1), rgba(100, 100, 100, 0.05) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(70, 70, 70, 0.14), rgba(70, 70, 70, 0.08) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 90, 90, 0.14), rgba(90, 90, 90, 0.07) 48%, transparent 94%), radial-gradient(ellipse calc(10px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(85, 85, 85, 0.14), rgba(85, 85, 85, 0.08) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2225
2230
  --beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(140, 140, 140, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(130, 130, 130, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(150, 150, 150, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(165, 165, 165, var(--beam-bop-tr)), transparent);
2226
2231
  --beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(140, 140, 140, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(130, 130, 130, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(150, 150, 150, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(165, 165, 165, var(--beam-bop-tr)), transparent);
2227
2232
  --beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(180, 180, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(140, 140, 140, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(160, 160, 160, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(170, 170, 170, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(150, 150, 150, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(190, 190, 190, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(165, 165, 165, var(--beam-pulse-frozen)), transparent);
2228
2233
  --beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(165, 165, 165, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(140, 140, 140, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(130, 130, 130, var(--beam-bop-tl)), transparent);
2229
2234
  --beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(180, 180, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(190, 190, 190, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(145, 145, 145, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(165, 165, 165, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(170, 170, 170, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(140, 140, 140, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(160, 160, 160, var(--beam-pulse-frozen)), transparent);
2230
2235
  }
2231
- [dark] .mono {
2232
- --beam-line-blobs: radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(200, 200, 200), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(170, 170, 170), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(155, 155, 155), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(185, 185, 185), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(165, 165, 165), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(180, 180, 180), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(160, 160, 160), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(175, 175, 175), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(190, 190, 190), transparent);
2233
- --beam-line-bloom: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.09) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.12), rgba(170, 170, 170, 0.06) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.1) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.08), rgba(180, 180, 180, 0.03) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(190, 190, 190, 0.14), rgba(190, 190, 190, 0.1) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(170, 170, 170, 0.13), rgba(170, 170, 170, 0.04) 48%, transparent 94%), radial-gradient(ellipse calc(10px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(185, 185, 185, 0.14), rgba(185, 185, 185, 0.1) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.45) 20%, rgba(255, 255, 255, 0.25) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.015) 55%, transparent 80%);
2236
+ .mono.line::after {
2237
+ background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 100, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(80, 80, 80), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(90, 90, 90), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(70, 70, 70), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(85, 85, 85), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(95, 95, 95), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(75, 75, 75), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(105, 105, 105), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(65, 65, 65), transparent);
2238
+ }
2239
+ .mono.line::before {
2240
+ background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(200, 200, 200, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(170, 170, 170, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(155, 155, 155, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(185, 185, 185, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(165, 165, 165, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(180, 180, 180, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(160, 160, 160, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(175, 175, 175, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(190, 190, 190, 0.52), transparent);
2241
+ }
2242
+ .mono.line > .bloom {
2243
+ background: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.11) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(120, 120, 120, 0.12), rgba(120, 120, 120, 0.09) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.08) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(100, 100, 100, 0.1), rgba(100, 100, 100, 0.05) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(70, 70, 70, 0.14), rgba(70, 70, 70, 0.08) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 90, 90, 0.14), rgba(90, 90, 90, 0.07) 48%, transparent 94%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(85, 85, 85, 0.14), rgba(85, 85, 85, 0.08) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2244
+ }
2245
+ [dark] .mono.line::after {
2246
+ background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(200, 200, 200), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(170, 170, 170), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(155, 155, 155), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(185, 185, 185), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(165, 165, 165), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(180, 180, 180), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(160, 160, 160), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(175, 175, 175), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(190, 190, 190), transparent);
2247
+ }
2248
+ [dark] .mono.line > .bloom {
2249
+ background: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.09) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.12), rgba(170, 170, 170, 0.06) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.1) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.08), rgba(180, 180, 180, 0.03) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(190, 190, 190, 0.14), rgba(190, 190, 190, 0.1) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(170, 170, 170, 0.13), rgba(170, 170, 170, 0.04) 48%, transparent 94%), radial-gradient(ellipse calc(10px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(185, 185, 185, 0.14), rgba(185, 185, 185, 0.1) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.45) 20%, rgba(255, 255, 255, 0.25) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.015) 55%, transparent 80%);
2234
2250
  }
2235
2251
 
2236
2252
  .ocean {
@@ -2238,18 +2254,26 @@
2238
2254
  --beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(100, 80, 220, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(60, 120, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(80, 100, 200, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(50, 140, 220, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(70, 130, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(140, 100, 240, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(90, 110, 230, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(130, 70, 255, 0.45), transparent);
2239
2255
  --beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(60, 140, 200), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(50, 120, 180), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(100, 80, 220), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(80, 100, 255), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(120, 70, 240), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(90, 80, 220), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(70, 110, 255), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(110, 90, 230), transparent);
2240
2256
  --beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(60, 140, 200, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(50, 120, 180, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(100, 80, 220, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(80, 100, 255, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(120, 70, 240, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(90, 80, 220, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(70, 110, 255, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(110, 90, 230, 0.3), transparent);
2241
- --beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(80, 60, 200), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(50, 100, 220), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(70, 90, 190), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(110, 60, 220), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(60, 110, 230), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 240), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(80, 100, 210), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(90, 80, 225), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(120, 90, 245), transparent);
2242
- --beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(100, 80, 220, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(60, 120, 255, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(80, 100, 200, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(130, 70, 255, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(70, 130, 255, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(90, 110, 230, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(110, 90, 240, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(140, 100, 255, 0.52), transparent);
2243
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(60, 60, 180), rgba(60, 60, 180, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(80, 100, 200), rgba(80, 100, 200, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(50, 40, 180), rgba(50, 40, 180, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(40, 80, 200, 0.7), rgba(40, 80, 200, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 50, 190), rgba(30, 50, 190, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(60, 90, 180), rgba(60, 90, 180, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(70, 60, 200), rgba(70, 60, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2244
2257
  --beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(60, 120, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(50, 140, 220, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(70, 130, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(130, 70, 255, var(--beam-bop-tr)), transparent);
2245
2258
  --beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(60, 120, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(50, 140, 220, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(70, 130, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(130, 70, 255, var(--beam-bop-tr)), transparent);
2246
2259
  --beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(100, 80, 220, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(60, 120, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(80, 100, 200, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(120, 80, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(70, 130, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(140, 100, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(130, 70, 255, var(--beam-pulse-frozen)), transparent);
2247
2260
  --beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(130, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(60, 120, 255, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(50, 140, 220, var(--beam-bop-tl)), transparent);
2248
2261
  --beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(100, 80, 220, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(140, 100, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(90, 110, 230, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(130, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(120, 80, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(60, 120, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(80, 100, 200, var(--beam-pulse-frozen)), transparent);
2249
2262
  }
2250
- [dark] .ocean {
2251
- --beam-line-blobs: radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 80, 220), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(60, 120, 255), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(80, 100, 200), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(130, 70, 255), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(70, 130, 255), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(120, 80, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(90, 110, 230), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(110, 90, 240), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(140, 100, 255), transparent);
2252
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(100, 120, 255), rgb(100, 120, 255) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(130, 100, 220, 0.98), rgba(130, 100, 220, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 80, 255), rgb(100, 80, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(80, 130, 220, 0.59), rgba(80, 130, 220, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(60, 100, 255), rgb(60, 100, 255) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 120, 200, 0.91), rgba(90, 120, 200, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(120, 90, 255), rgb(120, 90, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2263
+ .ocean.line::after {
2264
+ background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(80, 60, 200), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(50, 100, 220), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(70, 90, 190), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(110, 60, 220), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(60, 110, 230), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 240), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(80, 100, 210), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(90, 80, 225), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(120, 90, 245), transparent);
2265
+ }
2266
+ .ocean.line::before {
2267
+ background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(100, 80, 220, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(60, 120, 255, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(80, 100, 200, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(130, 70, 255, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(70, 130, 255, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(90, 110, 230, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(110, 90, 240, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(140, 100, 255, 0.52), transparent);
2268
+ }
2269
+ .ocean.line > .bloom {
2270
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(60, 60, 180), rgba(60, 60, 180, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(80, 100, 200), rgba(80, 100, 200, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(50, 40, 180), rgba(50, 40, 180, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(40, 80, 200, 0.7), rgba(40, 80, 200, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 50, 190), rgba(30, 50, 190, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(60, 90, 180), rgba(60, 90, 180, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(70, 60, 200), rgba(70, 60, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2271
+ }
2272
+ [dark] .ocean.line::after {
2273
+ background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 80, 220), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(60, 120, 255), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(80, 100, 200), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(130, 70, 255), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(70, 130, 255), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(120, 80, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(90, 110, 230), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(110, 90, 240), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(140, 100, 255), transparent);
2274
+ }
2275
+ [dark] .ocean.line > .bloom {
2276
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(100, 120, 255), rgb(100, 120, 255) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(130, 100, 220, 0.98), rgba(130, 100, 220, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 80, 255), rgb(100, 80, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(80, 130, 220, 0.59), rgba(80, 130, 220, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(60, 100, 255), rgb(60, 100, 255) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 120, 200, 0.91), rgba(90, 120, 200, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(120, 90, 255), rgb(120, 90, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2253
2277
  }
2254
2278
 
2255
2279
  .sunset {
@@ -2257,18 +2281,26 @@
2257
2281
  --beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent);
2258
2282
  --beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(255, 180, 50), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(255, 150, 40), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 80, 60), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(255, 60, 80), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 90, 70), transparent);
2259
2283
  --beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(255, 180, 50, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(255, 150, 40, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 80, 60, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(255, 100, 80, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(255, 60, 80, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(255, 120, 60, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(255, 200, 50, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 90, 70, 0.3), transparent);
2260
- --beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(220, 80, 40), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(230, 150, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(210, 110, 50), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(200, 60, 60), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(220, 170, 40), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(210, 100, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(230, 130, 60), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(190, 70, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(180, 50, 50), transparent);
2261
- --beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 100, 60, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(255, 180, 50, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(255, 140, 70, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(255, 80, 80, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 200, 60, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(255, 120, 50, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(255, 160, 80, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(255, 90, 60, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(255, 70, 70, 0.52), transparent);
2262
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 80, 40), rgba(200, 80, 40, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(220, 120, 30), rgba(220, 120, 30, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(200, 60, 30), rgba(200, 60, 30, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(220, 100, 20, 0.7), rgba(220, 100, 20, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(180, 40, 20), rgba(180, 40, 20, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(210, 80, 10), rgba(210, 80, 10, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(190, 70, 30), rgba(190, 70, 30, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2263
2284
  --beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(255, 160, 40, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(255, 200, 50, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(255, 180, 60, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(255, 90, 70, var(--beam-bop-tr)), transparent);
2264
2285
  --beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(255, 160, 40, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(255, 200, 50, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(255, 180, 60, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(255, 90, 70, var(--beam-bop-tr)), transparent);
2265
2286
  --beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(255, 80, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(255, 160, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(255, 120, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(255, 100, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(255, 180, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(255, 60, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(255, 90, 70, var(--beam-pulse-frozen)), transparent);
2266
2287
  --beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(255, 90, 70, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(255, 160, 40, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(255, 200, 50, var(--beam-bop-tl)), transparent);
2267
2288
  --beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(255, 80, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(255, 60, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(255, 140, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(255, 90, 70, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(255, 100, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(255, 160, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(255, 120, 60, var(--beam-pulse-frozen)), transparent);
2268
2289
  }
2269
- [dark] .sunset {
2270
- --beam-line-blobs: radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 100, 60), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(255, 180, 50), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(255, 140, 70), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(255, 80, 80), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 200, 60), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(255, 120, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(255, 160, 80), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(255, 90, 60), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(255, 70, 70), transparent);
2271
- --beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 140, 80), rgb(255, 140, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(255, 100, 60, 0.98), rgba(255, 100, 60, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(255, 100, 80), rgb(255, 100, 80) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 150, 80, 0.59), rgba(255, 150, 80, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(255, 80, 60), rgb(255, 80, 60) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(255, 120, 50, 0.91), rgba(255, 120, 50, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(255, 140, 70), rgb(255, 140, 70) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2290
+ .sunset.line::after {
2291
+ background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(220, 80, 40), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(230, 150, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(210, 110, 50), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(200, 60, 60), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(220, 170, 40), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(210, 100, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(230, 130, 60), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(190, 70, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(180, 50, 50), transparent);
2292
+ }
2293
+ .sunset.line::before {
2294
+ background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 100, 60, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(255, 180, 50, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(255, 140, 70, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(255, 80, 80, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 200, 60, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(255, 120, 50, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(255, 160, 80, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(255, 90, 60, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(255, 70, 70, 0.52), transparent);
2295
+ }
2296
+ .sunset.line > .bloom {
2297
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 80, 40), rgba(200, 80, 40, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(220, 120, 30), rgba(220, 120, 30, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(200, 60, 30), rgba(200, 60, 30, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(220, 100, 20, 0.7), rgba(220, 100, 20, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(180, 40, 20), rgba(180, 40, 20, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(210, 80, 10), rgba(210, 80, 10, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(190, 70, 30), rgba(190, 70, 30, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
2298
+ }
2299
+ [dark] .sunset.line::after {
2300
+ background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 100, 60), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(255, 180, 50), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(255, 140, 70), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(255, 80, 80), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 200, 60), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(255, 120, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(255, 160, 80), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(255, 90, 60), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(255, 70, 70), transparent);
2301
+ }
2302
+ [dark] .sunset.line > .bloom {
2303
+ background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 140, 80), rgb(255, 140, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(255, 100, 60, 0.98), rgba(255, 100, 60, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(255, 100, 80), rgb(255, 100, 80) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 150, 80, 0.59), rgba(255, 150, 80, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(255, 80, 60), rgb(255, 80, 60) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(255, 120, 50, 0.91), rgba(255, 120, 50, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(255, 140, 70), rgb(255, 140, 70) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
2272
2304
  }
2273
2305
 
2274
2306
  /*
@@ -2278,13 +2310,6 @@
2278
2310
  .md,
2279
2311
  .sm {
2280
2312
  overflow: hidden;
2281
- --beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%);
2282
- --beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%);
2283
- }
2284
- [dark] .md,
2285
- [dark] .sm {
2286
- --beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%);
2287
- --beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%);
2288
2313
  }
2289
2314
  .md.is-active,
2290
2315
  .sm.is-active {
@@ -2328,7 +2353,7 @@
2328
2353
  z-index: 3;
2329
2354
  inset: 0;
2330
2355
  padding: 1px;
2331
- background: var(--beam-rotate-bloom);
2356
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%);
2332
2357
  border-radius: calc(var(--beam-radius) - 1px);
2333
2358
  opacity: 0;
2334
2359
  filter: blur(8px) brightness(var(--beam-brightness)) saturate(var(--beam-saturation));
@@ -2336,6 +2361,10 @@
2336
2361
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
2337
2362
  mask-composite: exclude;
2338
2363
  }
2364
+ [dark] .md > .bloom,
2365
+ [dark] .sm > .bloom {
2366
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%);
2367
+ }
2339
2368
  .md.is-active > .bloom, .md.is-fading > .bloom,
2340
2369
  .sm.is-active > .bloom,
2341
2370
  .sm.is-fading > .bloom {
@@ -2359,10 +2388,13 @@
2359
2388
  --beam-stroke-opacity: .26;
2360
2389
  }
2361
2390
  .md.is-active::after, .md.is-fading::after {
2362
- background: var(--beam-rotate-highlight), var(--beam-rotate-blobs);
2391
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%), var(--beam-rotate-blobs);
2363
2392
  mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
2364
2393
  mask-composite: intersect, exclude;
2365
2394
  }
2395
+ [dark] .md.is-active::after, [dark] .md.is-fading::after {
2396
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%), var(--beam-rotate-blobs);
2397
+ }
2366
2398
  .md.is-active::before, .md.is-fading::before {
2367
2399
  background: var(--beam-rotate-inner);
2368
2400
  border-radius: var(--beam-radius);
@@ -2387,10 +2419,13 @@
2387
2419
  --beam-stroke-opacity: .46;
2388
2420
  }
2389
2421
  .sm.is-active::after, .sm.is-fading::after {
2390
- background: var(--beam-rotate-highlight), var(--beam-sm-blobs);
2422
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%), var(--beam-sm-blobs);
2391
2423
  mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 22%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%, white 46%, white 82%, rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%, transparent 97%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
2392
2424
  mask-composite: intersect, exclude;
2393
2425
  }
2426
+ [dark] .sm.is-active::after, [dark] .sm.is-fading::after {
2427
+ background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%), var(--beam-sm-blobs);
2428
+ }
2394
2429
  .sm.is-active::before, .sm.is-fading::before {
2395
2430
  background: var(--beam-sm-inner);
2396
2431
  border-radius: var(--beam-radius);
@@ -2409,7 +2444,6 @@
2409
2444
  --beam-brightness: 1.3;
2410
2445
  --beam-inner-opacity: .32;
2411
2446
  --beam-inner-shadow: rgba(0, 0, 0, .14);
2412
- --beam-line-highlight: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%);
2413
2447
  --beam-saturation: 1.95;
2414
2448
  --beam-stroke-opacity: .16;
2415
2449
  }
@@ -2417,7 +2451,6 @@
2417
2451
  --beam-bloom-opacity: .8;
2418
2452
  --beam-inner-opacity: .7;
2419
2453
  --beam-inner-shadow: rgba(255, 255, 255, .1);
2420
- --beam-line-highlight: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%);
2421
2454
  --beam-saturation: 1.2;
2422
2455
  --beam-stroke-opacity: 1.14;
2423
2456
  }
@@ -2433,7 +2466,6 @@
2433
2466
  inset: 0;
2434
2467
  padding: 1px;
2435
2468
  content: "";
2436
- background: var(--beam-line-highlight), var(--beam-line-blobs);
2437
2469
  border-radius: calc(var(--beam-radius) - 1px);
2438
2470
  opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-stroke-opacity) * var(--beam-strength));
2439
2471
  animation: border-beam-hue-shift 12s ease-in-out infinite;
@@ -2446,7 +2478,6 @@
2446
2478
  z-index: 1;
2447
2479
  inset: 0;
2448
2480
  content: "";
2449
- background: var(--beam-line-inner);
2450
2481
  border-radius: var(--beam-radius);
2451
2482
  box-shadow: inset 0 0 9px 1px var(--beam-inner-shadow);
2452
2483
  opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-inner-opacity) * var(--beam-strength));
@@ -2461,7 +2492,6 @@
2461
2492
  .line > .bloom {
2462
2493
  z-index: 3;
2463
2494
  inset: 0;
2464
- background: var(--beam-line-bloom);
2465
2495
  border-radius: calc(var(--beam-radius) - 1px);
2466
2496
  opacity: 0;
2467
2497
  clip-path: inset(0 round var(--beam-radius));
@@ -2782,6 +2812,89 @@
2782
2812
  75% {
2783
2813
  --beam-spike2: .8;
2784
2814
  }
2815
+ }.breadcrumb {
2816
+ display: block;
2817
+ max-width: 100%;
2818
+ }
2819
+
2820
+ .breadcrumb-list {
2821
+ display: flex;
2822
+ flex-wrap: wrap;
2823
+ margin: 0;
2824
+ padding: 0;
2825
+ align-items: center;
2826
+ gap: 3px;
2827
+ list-style: none;
2828
+ }
2829
+ .breadcrumb-list .breadcrumb-item {
2830
+ margin: 0;
2831
+ }
2832
+
2833
+ .breadcrumb-item {
2834
+ display: inline-flex;
2835
+ min-width: 0;
2836
+ align-items: center;
2837
+ gap: 3px;
2838
+ }
2839
+ .breadcrumb-item:last-child .breadcrumb-separator {
2840
+ display: none;
2841
+ }
2842
+
2843
+ .breadcrumb-link {
2844
+ display: inline-flex;
2845
+ height: 30px;
2846
+ max-width: 100%;
2847
+ padding: 0 9px;
2848
+ align-items: center;
2849
+ gap: 9px;
2850
+ background: transparent;
2851
+ border: 0;
2852
+ border-radius: var(--radius);
2853
+ color: var(--foreground-secondary);
2854
+ font-size: 14px;
2855
+ line-height: 1;
2856
+ text-decoration: none;
2857
+ white-space: nowrap;
2858
+ cursor: pointer;
2859
+ transition: var(--transition-default);
2860
+ transition-property: background, color, outline-color, outline-offset;
2861
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
2862
+ outline-offset: 0;
2863
+ }
2864
+ .breadcrumb-link:focus-visible, .breadcrumb-link:focus-within {
2865
+ outline-color: var(--primary-600);
2866
+ outline-offset: 2px;
2867
+ }
2868
+ @media (hover: hover) {
2869
+ .breadcrumb-link:not(.is-current):hover {
2870
+ background: var(--surface-hover);
2871
+ color: var(--foreground);
2872
+ }
2873
+ }
2874
+ .breadcrumb-link.is-current {
2875
+ color: var(--foreground-prominent);
2876
+ font-weight: 600;
2877
+ cursor: default;
2878
+ pointer-events: none;
2879
+ }
2880
+
2881
+ .breadcrumb-icon {
2882
+ margin-top: -1px;
2883
+ margin-bottom: -1px;
2884
+ flex-shrink: 0;
2885
+ }
2886
+
2887
+ .breadcrumb-label {
2888
+ overflow: hidden;
2889
+ text-overflow: ellipsis;
2890
+ white-space: nowrap;
2891
+ }
2892
+
2893
+ .breadcrumb-separator {
2894
+ flex-shrink: 0;
2895
+ color: var(--foreground-secondary);
2896
+ opacity: 0.5;
2897
+ pointer-events: none;
2785
2898
  }.calendar {
2786
2899
  flex-grow: 1;
2787
2900
  }
@@ -3392,1277 +3505,1464 @@
3392
3505
  gap: 9px;
3393
3506
  padding: 12px 18px;
3394
3507
  color: var(--foreground-prominent);
3395
- }.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
3396
- height: 100%;
3397
- min-height: unset;
3398
- border: 0;
3399
- border-radius: 0;
3400
- outline: 0 !important;
3401
- }
3402
- .form-input-group > .button-group > .button:first-child, .form-input-group > :first-child:is(.form-input, .form-select, .button) {
3403
- border-top-left-radius: calc(var(--radius) - 1px);
3404
- border-bottom-left-radius: calc(var(--radius) - 1px);
3508
+ }.chip {
3509
+ display: flex;
3510
+ height: 36px;
3511
+ padding: 0 12px;
3512
+ align-items: center;
3513
+ flex-grow: 0;
3514
+ gap: 9px;
3515
+ background: var(--gray-50);
3516
+ border: 1px solid var(--gray-200);
3517
+ border-radius: var(--radius-full);
3518
+ color: var(--foreground);
3519
+ transition: var(--transition-default);
3520
+ transition-property: background, border, color, outline-color, outline-offset;
3405
3521
  }
3406
- .form-input-group > .button-group > .button:last-child, .form-input-group > :last-child:is(.form-input, .form-select, .button) {
3407
- border-top-right-radius: calc(var(--radius) - 1px);
3408
- border-bottom-right-radius: calc(var(--radius) - 1px);
3522
+ .chip.is-selectable {
3523
+ cursor: pointer;
3524
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
3525
+ outline-offset: 0;
3409
3526
  }
3410
-
3411
- .form-structure-element {
3412
- display: flex;
3413
- flex-flow: column;
3527
+ .chip.is-selectable:focus-visible {
3528
+ outline-color: var(--primary-600);
3529
+ outline-offset: 2px;
3414
3530
  }
3415
-
3416
- .form {
3417
- gap: 42px;
3531
+ @media (hover: hover) {
3532
+ .chip.is-selectable:hover {
3533
+ background: var(--gray-100);
3534
+ }
3418
3535
  }
3419
-
3420
- .pane > .form {
3421
- display: contents;
3422
- gap: 0;
3536
+ .chip.is-selected {
3537
+ background: var(--primary-50);
3538
+ border-color: var(--primary-200);
3539
+ color: var(--primary-600);
3423
3540
  }
3424
-
3425
- .form-column,
3426
- .form-section {
3427
- gap: 18px;
3541
+ @media (hover: hover) {
3542
+ .chip.is-selected:hover {
3543
+ background: var(--primary-100);
3544
+ }
3428
3545
  }
3429
-
3430
- .form > .button,
3431
- .form-column > .button,
3432
- .form-section > .button {
3433
- align-self: flex-start;
3546
+ .chip :is(span) {
3547
+ font-size: 14px;
3548
+ font-weight: 500;
3549
+ white-space: nowrap;
3550
+ }.command-palette-backdrop {
3551
+ position: fixed;
3552
+ inset: 0;
3553
+ background: var(--overlay);
3554
+ backdrop-filter: blur(3px) saturate(180%);
3555
+ animation: command-palette-backdrop-in 300ms var(--swift-out) both;
3556
+ z-index: 99000;
3434
3557
  }
3435
-
3436
- .form-grid {
3437
- --columns: 2;
3438
- display: grid;
3439
- gap: 18px;
3440
- grid-template-columns: repeat(var(--columns), 1fr);
3558
+ .command-palette-backdrop.is-closing {
3559
+ animation: command-palette-backdrop-out 210ms var(--swift-out) both;
3441
3560
  }
3442
3561
 
3443
- .form-row {
3562
+ .command-palette-dialog {
3563
+ position: fixed;
3564
+ inset: 0;
3444
3565
  display: flex;
3445
- flex-grow: 1;
3446
- gap: 18px;
3566
+ padding-top: clamp(60px, 15vh, 160px);
3567
+ align-items: flex-start;
3568
+ justify-content: center;
3569
+ animation: command-palette-in 300ms var(--swift-out) both;
3570
+ z-index: 99001;
3447
3571
  }
3448
-
3449
- .form-section-title {
3450
- color: var(--foreground-prominent);
3451
- font-size: 18px;
3452
- font-weight: 800;
3572
+ .command-palette-dialog.is-closing {
3573
+ animation: command-palette-out 210ms var(--swift-out) both;
3574
+ pointer-events: none;
3453
3575
  }
3454
3576
 
3455
- @media (max-width: 767.98px) {
3456
- .form-grid {
3457
- grid-template-columns: 1fr;
3458
- }
3459
- .form-row {
3460
- flex-flow: column;
3461
- gap: 18px;
3462
- }
3463
- }
3464
- .form-field {
3577
+ .command-palette {
3465
3578
  display: flex;
3466
- flex: 1 1 0;
3467
- flex-flow: column;
3468
- gap: 6px;
3579
+ overflow: hidden;
3580
+ width: min(600px, 100dvw - 48px);
3581
+ max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
3582
+ flex-flow: column nowrap;
3583
+ background: var(--surface);
3584
+ background-clip: padding-box;
3585
+ border: 1px solid var(--surface-stroke-out);
3586
+ border-radius: var(--radius);
3587
+ box-shadow: var(--shadow-lg);
3588
+ transition: height 120ms var(--deceleration-curve);
3469
3589
  }
3470
3590
 
3471
- .form-field-header {
3591
+ .command-palette-search {
3472
3592
  display: flex;
3473
- width: 100%;
3474
- margin-bottom: 0;
3593
+ height: 54px;
3594
+ padding: 0 18px;
3475
3595
  align-items: center;
3476
- align-self: flex-start;
3477
- gap: 6px;
3478
- font-size: unset;
3479
- }
3480
-
3481
- .form-field-label {
3482
- min-height: 1.6em;
3483
- color: var(--foreground-prominent);
3484
- font-weight: 600;
3596
+ flex-shrink: 0;
3597
+ gap: 12px;
3598
+ border-bottom: 1px solid var(--gray-100);
3485
3599
  }
3486
3600
 
3487
- .form-field-optional {
3601
+ .command-palette-search-icon {
3602
+ flex-shrink: 0;
3488
3603
  color: var(--foreground-secondary);
3489
- font-size: 0.85em;
3604
+ font-size: 16px;
3490
3605
  }
3491
3606
 
3492
- .form-field-value {
3493
- margin-left: auto;
3607
+ .command-palette-search-input {
3608
+ height: 100%;
3609
+ flex-grow: 1;
3610
+ background: transparent;
3611
+ border: 0;
3612
+ color: var(--foreground);
3613
+ font: inherit;
3614
+ font-size: 16px;
3615
+ outline: 0;
3616
+ }
3617
+ .command-palette-search-input::placeholder {
3494
3618
  color: var(--foreground-secondary);
3495
- font-size: 0.85em;
3496
3619
  }
3497
3620
 
3498
- .form-field-counter {
3499
- margin-left: auto;
3500
- color: var(--foreground-secondary);
3501
- font-size: 0.85em;
3621
+ .command-palette-breadcrumb {
3622
+ padding: 0;
3623
+ flex-shrink: 0;
3624
+ background: transparent;
3625
+ border: 0;
3626
+ cursor: pointer;
3627
+ color: var(--foreground-secondary);
3628
+ font: inherit;
3629
+ font-size: 15px;
3630
+ font-weight: 500;
3502
3631
  white-space: nowrap;
3632
+ transition: color 150ms;
3633
+ }
3634
+ @media (hover: hover) {
3635
+ .command-palette-breadcrumb:hover {
3636
+ color: var(--foreground);
3637
+ }
3503
3638
  }
3504
3639
 
3505
- .form-field-addition {
3506
- display: flex;
3507
- margin-top: 3px;
3508
- margin-bottom: 3px;
3509
- gap: 9px;
3640
+ .command-palette-breadcrumb-separator {
3641
+ flex-shrink: 0;
3642
+ opacity: 0.5;
3643
+ color: var(--foreground-secondary);
3510
3644
  font-size: 14px;
3511
- line-height: 24px;
3512
3645
  }
3513
3646
 
3514
- .form-field-addition-icon {
3515
- margin-top: 4px;
3647
+ .command-palette-tabs {
3648
+ display: flex;
3649
+ overflow-x: auto;
3650
+ scrollbar-width: none;
3651
+ padding: 6px 15px;
3652
+ flex-shrink: 0;
3653
+ gap: 3px;
3654
+ border-bottom: 1px solid var(--gray-100);
3516
3655
  }
3517
-
3518
- .form-field-addition-error {
3519
- color: var(--danger-600);
3656
+ .command-palette-tabs::-webkit-scrollbar {
3657
+ display: none;
3520
3658
  }
3521
3659
 
3522
- .form-field-addition-hint {
3660
+ .command-palette-tab {
3661
+ display: flex;
3662
+ height: 30px;
3663
+ padding: 0 10px;
3664
+ align-items: center;
3665
+ gap: 6px;
3666
+ background: transparent;
3667
+ border: 0;
3668
+ border-radius: var(--radius-half);
3669
+ cursor: pointer;
3523
3670
  color: var(--foreground-secondary);
3671
+ font: inherit;
3672
+ font-size: 13px;
3673
+ font-weight: 500;
3674
+ white-space: nowrap;
3675
+ transition: background 150ms, color 150ms;
3524
3676
  }
3525
-
3526
- .form-field-addition + .form-field-addition {
3527
- margin-top: 0;
3677
+ @media (hover: hover) {
3678
+ .command-palette-tab:hover {
3679
+ background: var(--gray-100);
3680
+ color: var(--foreground);
3681
+ }
3528
3682
  }
3529
3683
 
3530
- .form-input {
3531
- position: relative;
3532
- display: block;
3533
- height: 42px;
3534
- width: 100%;
3535
- padding: 0 12px;
3536
- background: var(--surface);
3537
- background-clip: padding-box;
3538
- border: 1px solid var(--surface-stroke);
3539
- border-radius: var(--radius);
3540
- box-shadow: var(--shadow-px);
3541
- color: var(--foreground);
3542
- outline: 0 solid transparent;
3543
- transition: var(--transition-default);
3544
- transition-property: background, border-color, outline-color, outline-offset;
3545
- }
3546
- .form-input::placeholder {
3547
- color: var(--foreground-secondary);
3548
- }
3549
- .form-input.is-secondary {
3550
- background: var(--gray-100);
3551
- border-color: transparent;
3552
- box-shadow: none;
3553
- }
3554
- .form-input.is-condensed {
3555
- height: 34px;
3684
+ .command-palette-tab-active {
3685
+ background: var(--primary-100);
3686
+ color: var(--primary-700);
3556
3687
  }
3557
- .form-input.is-invalid {
3558
- border-color: var(--danger-500);
3688
+ @media (hover: hover) {
3689
+ .command-palette-tab-active:hover {
3690
+ background: var(--primary-100);
3691
+ color: var(--primary-700);
3692
+ }
3559
3693
  }
3560
3694
 
3561
- .form .form-input {
3562
- align-self: start;
3695
+ .command-palette-tab-icon {
3696
+ font-size: 13px;
3563
3697
  }
3564
3698
 
3565
- .form-input-disabled {
3566
- background: var(--surface-disabled);
3567
- color: var(--foreground-secondary);
3568
- cursor: not-allowed;
3569
- }
3570
- .form-input-disabled input {
3571
- cursor: inherit;
3699
+ .command-palette-results {
3700
+ overflow-y: auto;
3701
+ overscroll-behavior: contain;
3702
+ scroll-padding-block: 42px 6px;
3703
+ scrollbar-width: thin;
3704
+ padding: 6px;
3705
+ flex-grow: 1;
3572
3706
  }
3573
3707
 
3574
- .form-input-enabled {
3575
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
3576
- outline-offset: 0;
3577
- }
3578
- .form-input-enabled:focus-visible, .form-input-enabled:focus-within {
3579
- outline-color: var(--primary-600);
3580
- outline-offset: -1px;
3581
- }
3582
- @media (hover: hover) {
3583
- .form-input-enabled:hover {
3584
- border-color: var(--surface-stroke-hover);
3585
- }
3708
+ .command-palette-loading {
3709
+ display: flex;
3710
+ padding: 24px;
3711
+ align-items: center;
3712
+ justify-content: center;
3586
3713
  }
3587
3714
 
3588
- .form-input-icon {
3589
- position: absolute;
3590
- margin-top: 11px;
3591
- margin-bottom: 11px;
3715
+ .command-palette-empty {
3716
+ display: flex;
3717
+ padding: 24px;
3718
+ align-items: center;
3719
+ justify-content: center;
3592
3720
  color: var(--foreground-secondary);
3593
- pointer-events: none;
3594
- }
3595
-
3596
- .form-input-icon-trailing {
3597
- right: 12px;
3721
+ font-size: 14px;
3598
3722
  }
3599
3723
 
3600
- .form-input-icon-leading {
3601
- left: 12px;
3724
+ .command-palette-group {
3725
+ display: flex;
3726
+ padding: 9px 10px 3px;
3727
+ align-items: center;
3728
+ gap: 6px;
3729
+ color: var(--foreground-secondary);
3730
+ font-size: 12px;
3731
+ font-weight: 600;
3732
+ text-transform: uppercase;
3733
+ letter-spacing: 0.05em;
3734
+ pointer-events: none;
3602
3735
  }
3603
3736
 
3604
- .form-input-icon-password-toggle {
3605
- pointer-events: unset;
3606
- cursor: pointer;
3607
- }
3608
- @media (hover: hover) {
3609
- .form-input-icon-password-toggle:hover {
3610
- color: var(--foreground);
3611
- }
3737
+ .command-palette-group-icon {
3738
+ font-size: 12px;
3612
3739
  }
3613
3740
 
3614
- .form-input-native {
3615
- position: absolute;
3616
- inset: 0;
3617
- height: 100%;
3741
+ .command-palette-item {
3742
+ display: flex;
3618
3743
  width: 100%;
3619
- padding: 0 12px;
3620
- background: unset;
3744
+ padding: 8px 10px;
3745
+ align-items: center;
3746
+ gap: 10px;
3747
+ background: transparent;
3621
3748
  border: 0;
3622
- border-radius: inherit;
3623
- color: inherit;
3749
+ border-radius: var(--radius-half);
3750
+ cursor: pointer;
3751
+ color: var(--foreground);
3624
3752
  font: inherit;
3625
- outline: 0;
3753
+ font-size: 14px;
3626
3754
  text-align: left;
3755
+ transition: background 100ms;
3627
3756
  }
3628
- .form-input-native::placeholder {
3629
- color: var(--foreground-secondary);
3630
- }
3631
- .form-input-native::-webkit-search-decoration, .form-input-native::-webkit-search-cancel-button, .form-input-native::-webkit-search-results-button, .form-input-native::-webkit-search-results-decoration {
3632
- -webkit-appearance: none;
3633
- }
3634
- .form-input-native::-webkit-color-swatch {
3635
- border: 0;
3636
- border-radius: var(--radius-half);
3757
+ @media (hover: hover) {
3758
+ .command-palette-item:hover {
3759
+ background: var(--gray-100);
3760
+ }
3637
3761
  }
3638
- .form-input-native::-webkit-color-swatch-wrapper {
3639
- width: calc(100% + 24px);
3640
- margin: 0 -12px;
3641
- padding: 3px;
3762
+ .command-palette-item:active {
3763
+ background: var(--gray-200);
3642
3764
  }
3643
3765
 
3644
- .form-input-native-has-icon-leading {
3645
- padding-left: 42px;
3766
+ .command-palette-item-highlighted {
3767
+ background: var(--gray-100);
3646
3768
  }
3647
-
3648
- .form-input-native-has-icon-trailing {
3649
- padding-right: 42px;
3769
+ @media (hover: hover) {
3770
+ .command-palette-item-highlighted:hover {
3771
+ background: var(--gray-100);
3772
+ }
3650
3773
  }
3651
3774
 
3652
- .form-input-addition {
3775
+ .command-palette-item-icon {
3653
3776
  display: flex;
3654
- width: unset;
3777
+ width: 30px;
3778
+ height: 30px;
3655
3779
  align-items: center;
3656
- flex-grow: 0;
3780
+ align-self: flex-start;
3781
+ flex-shrink: 0;
3657
3782
  justify-content: center;
3658
- background: var(--surface-disabled);
3659
- color: var(--foreground-secondary);
3660
- pointer-events: none;
3783
+ background: var(--gray-100);
3784
+ border-radius: var(--radius-half);
3785
+ color: var(--foreground);
3786
+ transition: background 100ms, color 100ms;
3661
3787
  }
3662
- .form-input-addition:has(+ .form-input .form-input-native) {
3663
- border-right: 1px solid var(--surface-stroke);
3788
+ .command-palette-item-icon .icon {
3789
+ font-size: 16px;
3664
3790
  }
3665
- .form-input-addition + .form-input-addition {
3666
- border-left: 1px solid var(--surface-stroke);
3791
+
3792
+ .command-palette-item-highlighted .command-palette-item-icon {
3793
+ background: var(--gray-200);
3667
3794
  }
3668
- .form-input:has(.form-input-native) + .form-input-addition {
3669
- border-left: 1px solid var(--surface-stroke);
3795
+
3796
+ .command-palette-item-content {
3797
+ overflow: hidden;
3798
+ flex-grow: 1;
3670
3799
  }
3671
3800
 
3672
- .form-input-group {
3673
- display: flex;
3674
- padding: 0;
3675
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
3676
- outline-offset: 0;
3801
+ .command-palette-item-label {
3802
+ overflow: hidden;
3803
+ white-space: nowrap;
3804
+ text-overflow: ellipsis;
3677
3805
  }
3678
- .form-input-group:focus-visible, .form-input-group:focus-within {
3679
- outline-color: var(--primary-600);
3680
- outline-offset: -1px;
3806
+
3807
+ .command-palette-item-sub-label {
3808
+ overflow: hidden;
3809
+ margin-top: 1px;
3810
+ color: var(--foreground-secondary);
3811
+ font-size: 12px;
3812
+ white-space: nowrap;
3813
+ text-overflow: ellipsis;
3814
+ transition: color 100ms;
3681
3815
  }
3682
- .form-input-group > :is(.form-input, .form-select, .button) + :is(.button, .button-group) {
3683
- margin: 0;
3684
- border-left: 1px solid var(--surface-stroke);
3816
+
3817
+ .command-palette-item-highlighted .command-palette-item-sub-label {
3818
+ color: var(--primary-500);
3685
3819
  }
3686
- .form-input-group > .button-group > .button + .button {
3687
- margin: 0;
3688
- border-left: 1px solid var(--surface-stroke);
3820
+
3821
+ .command-palette-item-sub-action-indicator {
3822
+ flex-shrink: 0;
3823
+ color: var(--foreground-secondary);
3824
+ font-size: 12px;
3825
+ transition: color 100ms;
3689
3826
  }
3690
- .form-input-group > .button-group:not(:first-child) > .button:first-child {
3691
- border-top-left-radius: 0;
3692
- border-bottom-left-radius: 0;
3827
+
3828
+ .command-palette-item-highlighted .command-palette-item-sub-action-indicator {
3829
+ color: var(--primary-500);
3693
3830
  }
3694
- .form-input-group.is-condensed .form-input-addition:not(:last-child), .form-input-group.is-secondary .form-input-addition:not(:last-child) {
3695
- padding-right: 0;
3696
- background: unset;
3697
- border-color: transparent;
3831
+
3832
+ @keyframes command-palette-in {
3833
+ from {
3834
+ opacity: 0;
3835
+ scale: 1.05;
3836
+ }
3837
+ to {
3838
+ opacity: 1;
3839
+ scale: 1;
3840
+ }
3698
3841
  }
3699
- .form-input-group.is-secondary .form-input {
3700
- background: transparent;
3701
- border-color: transparent;
3702
- box-shadow: none;
3842
+ @keyframes command-palette-out {
3843
+ from {
3844
+ opacity: 1;
3845
+ }
3846
+ to {
3847
+ opacity: 0;
3848
+ }
3703
3849
  }
3704
- .form-input-group.is-secondary .secondary-button {
3705
- background: transparent;
3706
- border-color: var(--surface-stroke);
3707
- box-shadow: none;
3850
+ @keyframes command-palette-backdrop-in {
3851
+ from {
3852
+ opacity: 0;
3853
+ }
3854
+ to {
3855
+ opacity: 1;
3856
+ }
3708
3857
  }
3709
- @media (hover: hover) {
3710
- .form-input-group.is-secondary .secondary-button:hover {
3711
- background: var(--surface-stroke-hover);
3858
+ @keyframes command-palette-backdrop-out {
3859
+ from {
3860
+ opacity: 1;
3861
+ }
3862
+ to {
3863
+ opacity: 0;
3712
3864
  }
3865
+ }.comment {
3866
+ display: grid;
3867
+ max-width: 100%;
3868
+ gap: 3px 15px;
3869
+ grid-template-columns: 1fr auto;
3870
+ grid-template-rows: repeat(2, auto);
3713
3871
  }
3714
- .form-input-group:has(*:disabled) {
3715
- cursor: not-allowed;
3872
+ .comment .avatar {
3873
+ align-self: end;
3874
+ grid-column: 2;
3875
+ grid-row: 1;
3716
3876
  }
3717
- .form-input-group:has(*:disabled) > * {
3718
- pointer-events: none;
3877
+ .comment .comment-content {
3878
+ grid-column: 1;
3879
+ grid-row: 1;
3719
3880
  }
3720
- .form-input-group :is(.button[disabled]),
3721
- .form-input-group :is(.button[aria-disabled=true]) {
3722
- background: var(--surface-disabled);
3723
- opacity: 1;
3881
+ .comment .comment-footer {
3882
+ grid-column: 1;
3883
+ grid-row: 2;
3724
3884
  }
3725
- .form-input-group :is(.button[disabled]),
3726
- .form-input-group :is(.button[disabled]) .button-icon,
3727
- .form-input-group :is(.button[aria-disabled=true]),
3728
- .form-input-group :is(.button[aria-disabled=true]) .button-icon {
3885
+ .comment.is-received {
3886
+ grid-template-columns: auto 1fr;
3887
+ }
3888
+ .comment.is-received .avatar {
3889
+ grid-column: 1;
3890
+ }
3891
+ .comment.is-received .comment-content {
3892
+ grid-column: 2;
3893
+ }
3894
+ .comment.is-received .comment-footer {
3895
+ grid-column: 2;
3896
+ }
3897
+
3898
+ .comment-content {
3899
+ min-width: 0;
3900
+ padding: 12px 18px;
3901
+ background: var(--primary-50);
3902
+ border: 1px solid var(--primary-200);
3903
+ border-radius: calc(var(--radius) * 2);
3904
+ box-shadow: var(--shadow-xs);
3905
+ }
3906
+
3907
+ .comment:not(.is-received) .comment-content {
3908
+ border-bottom-right-radius: var(--radius);
3909
+ }
3910
+
3911
+ .comment.is-received .comment-content {
3912
+ background: var(--gray-50);
3913
+ border-color: var(--gray-200);
3914
+ border-bottom-left-radius: var(--radius);
3915
+ }
3916
+
3917
+ .comment.is-typing .comment-content {
3918
+ width: min-content;
3919
+ }
3920
+
3921
+ .comment-typing {
3922
+ display: block;
3923
+ margin: 6px;
3924
+ height: 6px;
3925
+ width: 6px;
3926
+ border-radius: 6px;
3927
+ animation: comment-typing 1s linear infinite both;
3928
+ }
3929
+
3930
+ .comment-footer {
3931
+ display: flex;
3932
+ align-items: center;
3933
+ gap: 12px;
3934
+ justify-content: flex-end;
3935
+ font-size: 12px;
3936
+ font-weight: 500;
3937
+ }
3938
+ .comment-footer span {
3939
+ margin-right: auto;
3940
+ }
3941
+ .comment-footer time {
3729
3942
  color: var(--foreground-secondary);
3730
3943
  }
3731
3944
 
3732
- .form-date-input {
3733
- cursor: default;
3945
+ @keyframes comment-typing {
3946
+ 0%, 80%, 100% {
3947
+ background: var(--gray-200);
3948
+ box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
3949
+ translate: 0 0;
3950
+ }
3951
+ 20% {
3952
+ background: var(--gray-200);
3953
+ box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
3954
+ translate: 0 0;
3955
+ }
3956
+ 40% {
3957
+ background: var(--gray-300);
3958
+ box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
3959
+ translate: 0 -4px;
3960
+ }
3961
+ 60% {
3962
+ background: var(--gray-200);
3963
+ box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
3964
+ translate: 0 0;
3965
+ }
3966
+ }.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
3967
+ height: 100%;
3968
+ min-height: unset;
3969
+ border: 0;
3970
+ border-radius: 0;
3971
+ outline: 0 !important;
3734
3972
  }
3735
- .form-date-input :is(input) {
3736
- text-align: left;
3973
+ .form-input-group > .button-group > .button:first-child, .form-input-group > :first-child:is(.form-input, .form-select, .button) {
3974
+ border-top-left-radius: calc(var(--radius) - 1px);
3975
+ border-bottom-left-radius: calc(var(--radius) - 1px);
3737
3976
  }
3738
- .form-date-input :is(input)::-webkit-input-placeholder {
3739
- visibility: hidden;
3977
+ .form-input-group > .button-group > .button:last-child, .form-input-group > :last-child:is(.form-input, .form-select, .button) {
3978
+ border-top-right-radius: calc(var(--radius) - 1px);
3979
+ border-bottom-right-radius: calc(var(--radius) - 1px);
3740
3980
  }
3741
- .form-date-input :is(input)::-webkit-calendar-picker-indicator {
3742
- display: none;
3743
- -webkit-appearance: none;
3981
+
3982
+ .form-structure-element {
3983
+ display: flex;
3984
+ flex-flow: column;
3985
+ }
3986
+
3987
+ .form {
3988
+ gap: 42px;
3989
+ }
3990
+
3991
+ .pane > .form {
3992
+ display: contents;
3993
+ gap: 0;
3994
+ }
3995
+
3996
+ .form-column,
3997
+ .form-section {
3998
+ gap: 18px;
3999
+ }
4000
+
4001
+ .form > .button,
4002
+ .form-column > .button,
4003
+ .form-section > .button {
4004
+ align-self: flex-start;
4005
+ }
4006
+
4007
+ .form-grid {
4008
+ --columns: 2;
4009
+ display: grid;
4010
+ gap: 18px;
4011
+ grid-template-columns: repeat(var(--columns), 1fr);
4012
+ }
4013
+
4014
+ .form-row {
4015
+ display: flex;
4016
+ flex-grow: 1;
4017
+ gap: 18px;
4018
+ }
4019
+
4020
+ .form-section-title {
4021
+ color: var(--foreground-prominent);
4022
+ font-size: 18px;
4023
+ font-weight: 800;
4024
+ }
4025
+
4026
+ @media (max-width: 767.98px) {
4027
+ .form-grid {
4028
+ grid-template-columns: 1fr;
4029
+ }
4030
+ .form-row {
4031
+ flex-flow: column;
4032
+ gap: 18px;
4033
+ }
4034
+ }
4035
+ .form-field {
4036
+ display: flex;
4037
+ flex: 1 1 0;
4038
+ flex-flow: column;
4039
+ gap: 6px;
4040
+ }
4041
+
4042
+ .form-field-header {
4043
+ display: flex;
4044
+ width: 100%;
4045
+ margin-bottom: 0;
4046
+ align-items: center;
4047
+ align-self: flex-start;
4048
+ gap: 6px;
4049
+ font-size: unset;
4050
+ }
4051
+
4052
+ .form-field-label {
4053
+ min-height: 1.6em;
4054
+ color: var(--foreground-prominent);
4055
+ font-weight: 600;
4056
+ }
4057
+
4058
+ .form-field-optional {
4059
+ color: var(--foreground-secondary);
4060
+ font-size: 0.85em;
4061
+ }
4062
+
4063
+ .form-field-value {
4064
+ margin-left: auto;
4065
+ color: var(--foreground-secondary);
4066
+ font-size: 0.85em;
4067
+ }
4068
+
4069
+ .form-field-counter {
4070
+ margin-left: auto;
4071
+ color: var(--foreground-secondary);
4072
+ font-size: 0.85em;
4073
+ white-space: nowrap;
3744
4074
  }
3745
4075
 
3746
- .form-date-range-input {
4076
+ .form-field-addition {
3747
4077
  display: flex;
3748
- align-items: center;
3749
- cursor: default;
4078
+ margin-top: 3px;
4079
+ margin-bottom: 3px;
4080
+ gap: 9px;
4081
+ font-size: 14px;
4082
+ line-height: 24px;
3750
4083
  }
3751
4084
 
3752
- .form-date-time-input .form-input:last-child {
3753
- max-width: 99px;
3754
- }
3755
- .form-date-time-input .input-group {
3756
- flex-grow: 1;
4085
+ .form-field-addition-icon {
4086
+ margin-top: 4px;
3757
4087
  }
3758
4088
 
3759
- .form-time-input {
4089
+ .form-field-addition-error {
4090
+ color: var(--danger-600);
3760
4091
  }
3761
4092
 
3762
- .form-select {
3763
- position: relative;
3764
- display: flex;
3765
- height: unset;
3766
- min-height: 42px;
3767
- padding: 0 39px 0 6px;
3768
- align-items: center;
3769
- flex-wrap: wrap;
3770
- gap: 0 6px;
3771
- cursor: pointer;
3772
- }
3773
- .form-select:not(.is-disabled) {
3774
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
3775
- outline-offset: 0;
4093
+ .form-field-addition-hint {
4094
+ color: var(--foreground-secondary);
3776
4095
  }
3777
- .form-select:not(.is-disabled):focus-visible, .form-select:not(.is-disabled):focus-within {
3778
- outline-color: var(--primary-600);
3779
- outline-offset: -1px;
4096
+
4097
+ .form-field-addition + .form-field-addition {
4098
+ margin-top: 0;
3780
4099
  }
3781
- @media (hover: hover) {
3782
- .form-select:not(.is-disabled):hover {
3783
- border-color: var(--surface-stroke-hover);
3784
- }
4100
+
4101
+ .form-input {
4102
+ position: relative;
4103
+ display: block;
4104
+ height: 42px;
4105
+ width: 100%;
4106
+ padding: 0 12px;
4107
+ background: var(--surface);
4108
+ background-clip: padding-box;
4109
+ border: 1px solid var(--surface-stroke);
4110
+ border-radius: var(--radius);
4111
+ box-shadow: var(--shadow-px);
4112
+ color: var(--foreground);
4113
+ outline: 0 solid transparent;
4114
+ transition: var(--transition-default);
4115
+ transition-property: background, border-color, outline-color, outline-offset;
3785
4116
  }
3786
- .form-select.is-disabled {
3787
- cursor: not-allowed;
4117
+ .form-input::placeholder {
4118
+ color: var(--foreground-secondary);
3788
4119
  }
3789
- .form-select.is-focused {
3790
- outline-color: var(--primary-600);
3791
- outline-offset: -1px;
4120
+ .form-input.is-secondary {
4121
+ background: var(--gray-100);
4122
+ border-color: transparent;
4123
+ box-shadow: none;
3792
4124
  }
3793
- .form-select .badge {
3794
- margin-top: 6px;
3795
- margin-bottom: 6px;
3796
- max-width: 100%;
3797
- flex: 0 0 auto;
4125
+ .form-input.is-condensed {
4126
+ height: 34px;
3798
4127
  }
3799
-
3800
- .form-select-icon {
3801
- position: absolute;
3802
- top: 50%;
3803
- right: 12px;
3804
- translate: 0 -50%;
4128
+ .form-input.is-invalid {
4129
+ border-color: var(--danger-500);
3805
4130
  }
3806
4131
 
3807
- .form-select-input {
3808
- position: sticky;
3809
- top: 0;
3810
- height: 48px;
3811
- margin-bottom: 9px;
3812
- background: var(--surface);
3813
- border-top: 0;
3814
- border-left: 0;
3815
- border-right: 0;
3816
- border-radius: 0;
3817
- outline: 0;
3818
- z-index: 2;
3819
- outline: 0 !important;
3820
- }
3821
- .form-select-input .form-input-icon {
3822
- right: 0;
3823
- margin: 15px;
3824
- font-size: 18px;
3825
- }
3826
- .form-select-input .form-input-native {
3827
- padding-left: 18px;
3828
- padding-right: 18px;
4132
+ .form .form-input {
4133
+ align-self: start;
3829
4134
  }
3830
4135
 
3831
- .form-select-placeholder {
3832
- margin-left: 6px;
3833
- margin-right: 6px;
4136
+ .form-input-disabled {
4137
+ background: var(--surface-disabled);
3834
4138
  color: var(--foreground-secondary);
3835
- user-select: none;
4139
+ cursor: not-allowed;
3836
4140
  }
3837
-
3838
- .form-select-popup {
3839
- position: fixed;
3840
- display: block;
3841
- top: 0;
3842
- left: 0;
3843
- width: var(--width, auto);
3844
- max-height: max(330px, 50dvh);
3845
- min-width: 120px;
3846
- box-shadow: var(--shadow-md);
3847
- overflow: auto;
3848
- translate: var(--x) var(--y);
3849
- z-index: 10000;
4141
+ .form-input-disabled input {
4142
+ cursor: inherit;
3850
4143
  }
3851
- .form-select-popup .menu-item {
3852
- contain-intrinsic-size: auto 42px;
3853
- content-visibility: auto;
4144
+
4145
+ .form-input-enabled {
4146
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4147
+ outline-offset: 0;
3854
4148
  }
3855
- .form-select-popup.is-keyboard-action .menu-item {
3856
- transition: 0s;
4149
+ .form-input-enabled:focus-visible, .form-input-enabled:focus-within {
4150
+ outline-color: var(--primary-600);
4151
+ outline-offset: -1px;
3857
4152
  }
3858
- .form-select-popup.is-searchable .menu-sub-header {
3859
- top: 48px;
4153
+ @media (hover: hover) {
4154
+ .form-input-enabled:hover {
4155
+ border-color: var(--surface-stroke-hover);
4156
+ }
3860
4157
  }
3861
4158
 
3862
- .form-select-selected {
4159
+ .form-input-icon {
3863
4160
  position: absolute;
3864
- height: 100%;
3865
- padding-left: 12px;
3866
- padding-right: 42px;
3867
- inset: -1px;
4161
+ margin-top: 11px;
4162
+ margin-bottom: 11px;
4163
+ color: var(--foreground-secondary);
3868
4164
  pointer-events: none;
3869
4165
  }
3870
- .form-select-selected .button-label {
3871
- overflow: hidden;
3872
- text-overflow: ellipsis;
3873
- white-space: nowrap;
3874
- }
3875
-
3876
- .is-disabled .form-select-icon {
3877
- opacity: 0.5;
3878
- }
3879
4166
 
3880
- .is-disabled .form-select-selected {
3881
- background: var(--surface-disabled);
3882
- border: 1px solid var(--surface-stroke);
3883
- color: var(--foreground-secondary);
3884
- opacity: 1;
4167
+ .form-input-icon-trailing {
4168
+ right: 12px;
3885
4169
  }
3886
4170
 
3887
- .form-text-area {
3888
- height: unset;
3889
- min-height: calc(20px + var(--rows, 1) * 1lh);
3890
- padding-top: 9px;
3891
- padding-bottom: 9px;
3892
- flex-shrink: 0;
3893
- field-sizing: content;
3894
- resize: vertical;
4171
+ .form-input-icon-leading {
4172
+ left: 12px;
3895
4173
  }
3896
4174
 
3897
- .form-text-area-disabled {
4175
+ .form-input-icon-password-toggle {
4176
+ pointer-events: unset;
4177
+ cursor: pointer;
3898
4178
  }
3899
-
3900
- .form-text-area-enabled {
4179
+ @media (hover: hover) {
4180
+ .form-input-icon-password-toggle:hover {
4181
+ color: var(--foreground);
4182
+ }
3901
4183
  }
3902
4184
 
3903
- .checkbox {
3904
- display: inline-flex;
3905
- flex-shrink: 0;
3906
- gap: 12px;
3907
- line-height: 20px;
4185
+ .form-input-native {
4186
+ position: absolute;
4187
+ inset: 0;
4188
+ height: 100%;
4189
+ width: 100%;
4190
+ padding: 0 12px;
4191
+ background: unset;
4192
+ border: 0;
4193
+ border-radius: inherit;
4194
+ color: inherit;
4195
+ font: inherit;
3908
4196
  outline: 0;
4197
+ text-align: left;
3909
4198
  }
3910
- .checkbox.is-disabled {
3911
- cursor: not-allowed;
3912
- }
3913
- .checkbox.is-disabled .checkbox-element {
3914
- background: var(--surface-disabled);
3915
- border-color: var(--surface-stroke);
3916
- color: var(--foreground-secondary);
3917
- }
3918
- .checkbox.is-disabled .checkbox-label {
4199
+ .form-input-native::placeholder {
3919
4200
  color: var(--foreground-secondary);
3920
4201
  }
3921
- .checkbox.is-readonly {
3922
- cursor: default;
3923
- }
3924
- .checkbox.is-readonly .checkbox-native {
3925
- pointer-events: none;
3926
- }
3927
- .checkbox.is-invalid .checkbox-element {
3928
- border-color: var(--danger-500);
3929
- }
3930
-
3931
- .checkbox-element,
3932
- .checkbox-native {
3933
- margin: 1px 0 0;
3934
- height: 20px;
3935
- width: 20px;
4202
+ .form-input-native::-webkit-search-decoration, .form-input-native::-webkit-search-cancel-button, .form-input-native::-webkit-search-results-button, .form-input-native::-webkit-search-results-decoration {
4203
+ -webkit-appearance: none;
3936
4204
  }
3937
-
3938
- .checkbox-element {
3939
- position: relative;
3940
- display: inline-flex;
3941
- height: 20px;
3942
- width: 20px;
3943
- padding: 0;
3944
- align-items: center;
3945
- justify-content: center;
3946
- background: var(--gray-50);
3947
- border: 1px solid var(--gray-200);
4205
+ .form-input-native::-webkit-color-swatch {
4206
+ border: 0;
3948
4207
  border-radius: var(--radius-half);
3949
- color: var(--primary-25);
3950
- cursor: pointer;
3951
- pointer-events: none;
3952
- transition: 210ms var(--swift-out);
3953
- transition-property: background, border-color, color, outline-color, outline-offset;
3954
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
3955
- outline-offset: 0;
3956
4208
  }
3957
- .checkbox-element .icon {
3958
- opacity: 0;
3959
- scale: 0.85;
3960
- transition: inherit;
3961
- transition-property: opacity;
4209
+ .form-input-native::-webkit-color-swatch-wrapper {
4210
+ width: calc(100% + 24px);
4211
+ margin: 0 -12px;
4212
+ padding: 3px;
4213
+ }
4214
+
4215
+ .form-input-native-has-icon-leading {
4216
+ padding-left: 42px;
3962
4217
  }
3963
- .checkbox-element .icon :is(path) {
3964
- stroke: currentColor;
3965
- stroke-width: 54px;
4218
+
4219
+ .form-input-native-has-icon-trailing {
4220
+ padding-right: 42px;
3966
4221
  }
3967
4222
 
3968
- .checkbox-label {
3969
- align-self: center;
4223
+ .form-number-input-native {
4224
+ padding-right: 38px;
4225
+ appearance: textfield;
4226
+ -moz-appearance: textfield;
4227
+ font-variant-numeric: tabular-nums;
4228
+ }
4229
+ .form-number-input-native::-webkit-outer-spin-button, .form-number-input-native::-webkit-inner-spin-button {
4230
+ margin: 0;
4231
+ -webkit-appearance: none;
3970
4232
  }
3971
4233
 
3972
- .checkbox-native {
4234
+ .form-number-input-buttons {
3973
4235
  position: absolute;
4236
+ top: 0;
4237
+ right: 0;
4238
+ bottom: 0;
4239
+ display: flex;
4240
+ flex-direction: column;
4241
+ width: 33px;
4242
+ border-left: 1px solid var(--surface-stroke);
4243
+ border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
4244
+ overflow: hidden;
4245
+ }
4246
+
4247
+ .form-number-input-button {
4248
+ display: flex;
4249
+ flex: 1 1 0;
4250
+ margin: 0;
4251
+ padding: 0;
4252
+ align-items: center;
4253
+ justify-content: center;
4254
+ background: var(--surface);
4255
+ border: 0;
4256
+ color: var(--foreground-secondary);
3974
4257
  cursor: pointer;
3975
- opacity: 0;
4258
+ transition: var(--transition-default);
4259
+ transition-property: background, color;
4260
+ }
4261
+ .form-number-input-button + .form-number-input-button {
4262
+ border-top: 1px solid var(--surface-stroke);
3976
4263
  }
3977
4264
  @media (hover: hover) {
3978
- .checkbox-native:hover + .checkbox-element {
3979
- background: var(--gray-100);
4265
+ .form-number-input-button:hover {
4266
+ background: var(--surface-hover);
4267
+ color: var(--foreground);
3980
4268
  }
3981
4269
  }
3982
- .checkbox-native:is(:checked, :indeterminate) + .checkbox-element {
3983
- background: var(--primary-600);
3984
- border-color: var(--primary-600);
4270
+ .form-number-input-button:disabled {
4271
+ color: var(--surface-stroke);
4272
+ cursor: not-allowed;
3985
4273
  }
3986
- .checkbox-native:is(:checked, :indeterminate) + .checkbox-element .icon {
3987
- opacity: 1;
4274
+
4275
+ .form-input-addition {
4276
+ display: flex;
4277
+ width: unset;
4278
+ align-items: center;
4279
+ flex-grow: 0;
4280
+ justify-content: center;
4281
+ background: var(--surface-disabled);
4282
+ color: var(--foreground-secondary);
4283
+ pointer-events: none;
3988
4284
  }
3989
- .checkbox-native:focus-visible + .checkbox-element {
3990
- outline-color: var(--primary-600);
3991
- outline-offset: 2px;
4285
+ .form-input-addition:has(+ .form-input .form-input-native) {
4286
+ border-right: 1px solid var(--surface-stroke);
3992
4287
  }
3993
- .checkbox-native:disabled {
3994
- cursor: not-allowed;
4288
+ .form-input-addition + .form-input-addition {
4289
+ border-left: 1px solid var(--surface-stroke);
3995
4290
  }
3996
- .checkbox-native:disabled + .checkbox-element {
3997
- background: var(--gray-100);
3998
- border-color: var(--gray-200);
3999
- color: var(--foreground-secondary);
4291
+ .form-input:has(.form-input-native) + .form-input-addition {
4292
+ border-left: 1px solid var(--surface-stroke);
4000
4293
  }
4001
4294
 
4002
- .quantity-selector {
4003
- min-width: max-content;
4004
- align-self: center;
4005
- justify-self: center;
4006
- border: 1px solid var(--surface-stroke);
4007
- border-radius: var(--radius);
4008
- box-shadow: var(--shadow-px);
4009
- overflow: hidden;
4010
- transition: var(--transition-default);
4011
- transition-property: border-color, outline-color, outline-offset;
4295
+ .form-input-group {
4296
+ display: flex;
4297
+ padding: 0;
4012
4298
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
4013
4299
  outline-offset: 0;
4014
4300
  }
4015
- .quantity-selector:focus-visible, .quantity-selector:focus-within {
4301
+ .form-input-group:focus-visible, .form-input-group:focus-within {
4016
4302
  outline-color: var(--primary-600);
4017
- outline-offset: 2px;
4303
+ outline-offset: -1px;
4304
+ }
4305
+ .form-input-group > :is(.form-input, .form-select, .button) + :is(.button, .button-group) {
4306
+ margin: 0;
4307
+ border-left: 1px solid var(--surface-stroke);
4308
+ }
4309
+ .form-input-group > .button-group > .button + .button {
4310
+ margin: 0;
4311
+ border-left: 1px solid var(--surface-stroke);
4312
+ }
4313
+ .form-input-group > .button-group:not(:first-child) > .button:first-child {
4314
+ border-top-left-radius: 0;
4315
+ border-bottom-left-radius: 0;
4316
+ }
4317
+ .form-input-group.is-condensed .form-input-addition:not(:last-child), .form-input-group.is-secondary .form-input-addition:not(:last-child) {
4318
+ padding-right: 0;
4319
+ background: unset;
4320
+ border-color: transparent;
4321
+ }
4322
+ .form-input-group.is-secondary .form-input {
4323
+ background: transparent;
4324
+ border-color: transparent;
4325
+ box-shadow: none;
4326
+ }
4327
+ .form-input-group.is-secondary .secondary-button {
4328
+ background: transparent;
4329
+ border-color: var(--surface-stroke);
4330
+ box-shadow: none;
4018
4331
  }
4019
4332
  @media (hover: hover) {
4020
- .quantity-selector:hover {
4021
- border-color: var(--surface-stroke-hover);
4333
+ .form-input-group.is-secondary .secondary-button:hover {
4334
+ background: var(--surface-stroke-hover);
4022
4335
  }
4023
4336
  }
4024
-
4025
- .quantity-selector-button {
4026
- margin: -1px;
4027
- border: 0;
4337
+ .form-input-group:has(*:disabled) {
4338
+ cursor: not-allowed;
4028
4339
  }
4029
- .quantity-selector-button:first-child {
4030
- margin-right: 0;
4340
+ .form-input-group:has(*:disabled) > * {
4341
+ pointer-events: none;
4031
4342
  }
4032
- .quantity-selector-button:last-child {
4033
- margin-left: 0;
4343
+ .form-input-group :is(.button[disabled]),
4344
+ .form-input-group :is(.button[aria-disabled=true]) {
4345
+ background: var(--surface-disabled);
4346
+ opacity: 1;
4034
4347
  }
4035
- .quantity-selector-button, .quantity-selector-button:focus-visible, .quantity-selector-button:focus-within {
4036
- outline: 0;
4348
+ .form-input-group :is(.button[disabled]),
4349
+ .form-input-group :is(.button[disabled]) .button-icon,
4350
+ .form-input-group :is(.button[aria-disabled=true]),
4351
+ .form-input-group :is(.button[aria-disabled=true]) .button-icon {
4352
+ color: var(--foreground-secondary);
4037
4353
  }
4038
4354
 
4039
- .quantity-selector-input {
4040
- margin: -1px 0;
4041
- padding-left: 0;
4042
- padding-right: 0;
4043
- border-radius: 0;
4044
- font-variant-numeric: tabular-nums;
4045
- font-weight: 700;
4046
- text-align: center;
4047
- }
4048
- .quantity-selector-input:hover {
4049
- border-color: var(--surface-stroke-hover);
4355
+ .form-date-input {
4356
+ cursor: default;
4050
4357
  }
4051
- .quantity-selector-input, .quantity-selector-input:focus-visible, .quantity-selector-input:focus-within {
4052
- outline: 0 !important;
4358
+ .form-date-input :is(input) {
4359
+ text-align: left;
4053
4360
  }
4054
- .quantity-selector-input {
4055
- -moz-appearance: textfield;
4361
+ .form-date-input :is(input)::-webkit-input-placeholder {
4362
+ visibility: hidden;
4056
4363
  }
4057
- .quantity-selector-input::-webkit-outer-spin-button, .quantity-selector-input::-webkit-inner-spin-button {
4364
+ .form-date-input :is(input)::-webkit-calendar-picker-indicator {
4365
+ display: none;
4058
4366
  -webkit-appearance: none;
4059
- margin: 0;
4060
4367
  }
4061
4368
 
4062
- .pin-input {
4063
- display: grid;
4064
- width: min-content;
4065
- gap: 0.4ch;
4066
- grid-template-columns: repeat(var(--max-length, 0), 1fr);
4067
- margin: 0;
4068
- padding: 0;
4069
- border: 0;
4070
- font-size: 24px;
4071
- font-weight: 700;
4369
+ .form-date-range-input {
4370
+ display: flex;
4371
+ align-items: center;
4372
+ cursor: default;
4072
4373
  }
4073
4374
 
4074
- .pin-input-field {
4075
- padding: 0;
4076
- width: 2.7ch;
4077
- border: 1px solid var(--surface-stroke);
4078
- border-radius: var(--radius);
4079
- box-shadow: var(--shadow-px);
4080
- font: inherit;
4081
- line-height: 3.3ch;
4082
- outline: 0;
4083
- text-align: center;
4084
- transition: var(--transition-default);
4085
- transition-property: border-color, outline-color, outline-offset;
4375
+ .form-date-time-input .form-input:last-child {
4376
+ max-width: 99px;
4377
+ }
4378
+ .form-date-time-input .input-group {
4379
+ flex-grow: 1;
4086
4380
  }
4087
4381
 
4088
- .pin-input-enabled {
4382
+ .form-time-input {
4089
4383
  }
4090
- .pin-input-enabled .pin-input-field {
4091
- background-color: var(--surface);
4092
- color: var(--foreground-prominent);
4384
+
4385
+ .form-select {
4386
+ position: relative;
4387
+ display: flex;
4388
+ height: unset;
4389
+ min-height: 42px;
4390
+ padding: 0 39px 0 6px;
4391
+ align-items: center;
4392
+ flex-wrap: wrap;
4393
+ gap: 0 6px;
4394
+ cursor: pointer;
4395
+ }
4396
+ .form-select:not(.is-disabled) {
4093
4397
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
4094
4398
  outline-offset: 0;
4095
4399
  }
4096
- .pin-input-enabled .pin-input-field:focus-visible, .pin-input-enabled .pin-input-field:focus-within {
4400
+ .form-select:not(.is-disabled):focus-visible, .form-select:not(.is-disabled):focus-within {
4097
4401
  outline-color: var(--primary-600);
4098
4402
  outline-offset: -1px;
4099
4403
  }
4100
-
4101
- .pin-input-disabled {
4404
+ @media (hover: hover) {
4405
+ .form-select:not(.is-disabled):hover {
4406
+ border-color: var(--surface-stroke-hover);
4407
+ }
4102
4408
  }
4103
- .pin-input-disabled .pin-input-field {
4104
- background-color: var(--surface-disabled);
4105
- color: var(--foreground-secondary);
4409
+ .form-select.is-disabled {
4106
4410
  cursor: not-allowed;
4107
4411
  }
4108
-
4109
- .toggle {
4110
- position: relative;
4111
- display: block;
4112
- width: 54px;
4113
- height: 30px;
4114
- flex: 0 0 auto;
4115
- background: var(--gray-50);
4116
- border: 1px solid var(--gray-200);
4117
- border-radius: var(--radius-full);
4118
- contain: paint;
4119
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
4120
- outline-offset: 0;
4121
- }
4122
- .toggle:has(.toggle-input:focus-visible) {
4412
+ .form-select.is-focused {
4123
4413
  outline-color: var(--primary-600);
4124
- outline-offset: 2px;
4414
+ outline-offset: -1px;
4125
4415
  }
4126
- .toggle.is-checked {
4127
- border-color: transparent;
4416
+ .form-select .badge {
4417
+ margin-top: 6px;
4418
+ margin-bottom: 6px;
4419
+ max-width: 100%;
4420
+ flex: 0 0 auto;
4128
4421
  }
4129
- .toggle.is-checked .toggle-input::after {
4130
- translate: 24px 0;
4422
+
4423
+ .form-select-icon {
4424
+ position: absolute;
4425
+ top: 50%;
4426
+ right: 12px;
4427
+ translate: 0 -50%;
4131
4428
  }
4132
- .toggle.is-checked:not(.is-switch) {
4133
- background: var(--primary-600);
4429
+
4430
+ .form-select-input {
4431
+ position: sticky;
4432
+ top: 0;
4433
+ height: 48px;
4434
+ margin-bottom: 9px;
4435
+ background: var(--surface);
4436
+ border-top: 0;
4437
+ border-left: 0;
4438
+ border-right: 0;
4439
+ border-radius: 0;
4440
+ outline: 0;
4441
+ z-index: 2;
4442
+ outline: 0 !important;
4134
4443
  }
4135
- .toggle.is-checked:not(.is-switch) .toggle-icon {
4136
- color: var(--primary-25);
4444
+ .form-select-input .form-input-icon {
4445
+ right: 0;
4446
+ margin: 15px;
4447
+ font-size: 18px;
4137
4448
  }
4138
- .toggle.is-checked:not(.is-switch) .toggle-input::after {
4139
- border-color: transparent;
4449
+ .form-select-input .form-input-native {
4450
+ padding-left: 18px;
4451
+ padding-right: 18px;
4140
4452
  }
4141
- .toggle.is-checked .toggle-icon-on {
4142
- translate: calc(-50% + 24px) -50%;
4453
+
4454
+ .form-select-placeholder {
4455
+ margin-left: 6px;
4456
+ margin-right: 6px;
4457
+ color: var(--foreground-secondary);
4458
+ user-select: none;
4143
4459
  }
4144
- .toggle:not(.is-checked) .toggle-icon-off {
4145
- translate: calc(-50% - 24px) -50%;
4460
+
4461
+ .form-select-popup {
4462
+ position: fixed;
4463
+ display: block;
4464
+ top: 0;
4465
+ left: 0;
4466
+ width: var(--width, auto);
4467
+ max-height: max(330px, 50dvh);
4468
+ min-width: 120px;
4469
+ box-shadow: var(--shadow-md);
4470
+ overflow: auto;
4471
+ translate: var(--x) var(--y);
4472
+ z-index: 10000;
4146
4473
  }
4147
- .toggle.is-disabled {
4148
- cursor: not-allowed;
4149
- opacity: 0.6;
4474
+ .form-select-popup .menu-item {
4475
+ contain-intrinsic-size: auto 42px;
4476
+ content-visibility: auto;
4150
4477
  }
4151
- .toggle.is-readonly .toggle-input {
4152
- pointer-events: none;
4478
+ .form-select-popup.is-keyboard-action .menu-item {
4479
+ transition: 0s;
4153
4480
  }
4154
- .toggle.is-invalid {
4155
- border-color: var(--danger-500);
4481
+ .form-select-popup.is-searchable .menu-sub-header {
4482
+ top: 48px;
4156
4483
  }
4157
4484
 
4158
- .toggle-icon {
4485
+ .form-select-selected {
4159
4486
  position: absolute;
4160
- top: 50%;
4161
- color: var(--foreground-secondary);
4487
+ height: 100%;
4488
+ padding-left: 12px;
4489
+ padding-right: 42px;
4490
+ inset: -1px;
4162
4491
  pointer-events: none;
4163
- translate: -50% -50%;
4164
4492
  }
4165
-
4166
- .toggle-icon-off {
4167
- left: 15px;
4493
+ .form-select-selected .button-label {
4494
+ overflow: hidden;
4495
+ text-overflow: ellipsis;
4496
+ white-space: nowrap;
4168
4497
  }
4169
4498
 
4170
- .toggle-icon-on {
4171
- left: 39px;
4499
+ .is-disabled .form-select-icon {
4500
+ opacity: 0.5;
4172
4501
  }
4173
4502
 
4174
- .toggle-input {
4175
- -webkit-appearance: none;
4176
- appearance: none;
4177
- position: relative;
4178
- display: block;
4179
- margin: 0;
4180
- height: inherit;
4181
- width: inherit;
4182
- background: unset;
4183
- border: 0;
4184
- border-radius: inherit;
4185
- cursor: pointer;
4186
- outline: 0;
4187
- }
4188
- .toggle-input::after {
4189
- position: absolute;
4190
- display: block;
4191
- top: 2px;
4192
- left: 2px;
4193
- height: 24px;
4194
- width: 24px;
4195
- content: "";
4196
- background: var(--surface);
4503
+ .is-disabled .form-select-selected {
4504
+ background: var(--surface-disabled);
4197
4505
  border: 1px solid var(--surface-stroke);
4198
- border-radius: var(--radius-full);
4199
- box-shadow: var(--shadow-sm);
4506
+ color: var(--foreground-secondary);
4507
+ opacity: 1;
4200
4508
  }
4201
4509
 
4202
- .toggle,
4203
- .toggle-icon,
4204
- .toggle-input,
4205
- .toggle-input::after {
4206
- transition: 210ms var(--swift-out);
4207
- transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
4208
- }.chip {
4209
- display: flex;
4210
- height: 36px;
4211
- padding: 0 12px;
4212
- align-items: center;
4213
- flex-grow: 0;
4214
- gap: 9px;
4215
- background: var(--gray-50);
4216
- border: 1px solid var(--gray-200);
4217
- border-radius: var(--radius-full);
4218
- color: var(--foreground);
4219
- transition: var(--transition-default);
4220
- transition-property: background, border, color, outline-color, outline-offset;
4221
- }
4222
- .chip.is-selectable {
4223
- cursor: pointer;
4224
- outline: 2px solid rgb(from var(--primary-600) r g b/0);
4225
- outline-offset: 0;
4226
- }
4227
- .chip.is-selectable:focus-visible {
4228
- outline-color: var(--primary-600);
4229
- outline-offset: 2px;
4230
- }
4231
- @media (hover: hover) {
4232
- .chip.is-selectable:hover {
4233
- background: var(--gray-100);
4234
- }
4235
- }
4236
- .chip.is-selected {
4237
- background: var(--primary-50);
4238
- border-color: var(--primary-200);
4239
- color: var(--primary-600);
4240
- }
4241
- @media (hover: hover) {
4242
- .chip.is-selected:hover {
4243
- background: var(--primary-100);
4244
- }
4510
+ .form-text-area {
4511
+ height: unset;
4512
+ min-height: calc(20px + var(--rows, 1) * 1lh);
4513
+ padding-top: 9px;
4514
+ padding-bottom: 9px;
4515
+ flex-shrink: 0;
4516
+ field-sizing: content;
4517
+ resize: vertical;
4245
4518
  }
4246
- .chip :is(span) {
4247
- font-size: 14px;
4248
- font-weight: 500;
4249
- white-space: nowrap;
4250
- }.command-palette-backdrop {
4251
- position: fixed;
4252
- inset: 0;
4253
- background: var(--overlay);
4254
- backdrop-filter: blur(3px) saturate(180%);
4255
- animation: command-palette-backdrop-in 300ms var(--swift-out) both;
4256
- z-index: 99000;
4519
+
4520
+ .form-text-area-disabled {
4257
4521
  }
4258
- .command-palette-backdrop.is-closing {
4259
- animation: command-palette-backdrop-out 210ms var(--swift-out) both;
4522
+
4523
+ .form-text-area-enabled {
4260
4524
  }
4261
4525
 
4262
- .command-palette-dialog {
4263
- position: fixed;
4264
- inset: 0;
4526
+ .form-checkbox-group {
4265
4527
  display: flex;
4266
- padding-top: clamp(60px, 15vh, 160px);
4528
+ flex-direction: column;
4267
4529
  align-items: flex-start;
4268
- justify-content: center;
4269
- animation: command-palette-in 300ms var(--swift-out) both;
4270
- z-index: 99001;
4271
- }
4272
- .command-palette-dialog.is-closing {
4273
- animation: command-palette-out 210ms var(--swift-out) both;
4274
- pointer-events: none;
4530
+ gap: 12px;
4275
4531
  }
4276
-
4277
- .command-palette {
4278
- display: flex;
4279
- overflow: hidden;
4280
- width: min(600px, 100dvw - 48px);
4281
- max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
4282
- flex-flow: column nowrap;
4283
- background: var(--surface);
4284
- background-clip: padding-box;
4285
- border: 1px solid var(--surface-stroke-out);
4286
- border-radius: var(--radius);
4287
- box-shadow: var(--shadow-lg);
4288
- transition: height 120ms var(--deceleration-curve);
4532
+ .form-checkbox-group.is-inline {
4533
+ flex-direction: row;
4534
+ flex-wrap: wrap;
4535
+ gap: 8px 20px;
4289
4536
  }
4290
4537
 
4291
- .command-palette-search {
4292
- display: flex;
4293
- height: 54px;
4294
- padding: 0 18px;
4295
- align-items: center;
4538
+ .form-checkbox {
4539
+ display: inline-flex;
4296
4540
  flex-shrink: 0;
4541
+ align-items: flex-start;
4297
4542
  gap: 12px;
4298
- border-bottom: 1px solid var(--gray-100);
4543
+ line-height: 21px;
4544
+ outline: 0;
4299
4545
  }
4300
-
4301
- .command-palette-search-icon {
4302
- flex-shrink: 0;
4303
- color: var(--foreground-secondary);
4304
- font-size: 16px;
4546
+ .form-checkbox.is-disabled {
4547
+ cursor: not-allowed;
4305
4548
  }
4306
-
4307
- .command-palette-search-input {
4308
- height: 100%;
4309
- flex-grow: 1;
4310
- background: transparent;
4311
- border: 0;
4312
- color: var(--foreground);
4313
- font: inherit;
4314
- font-size: 16px;
4315
- outline: 0;
4549
+ .form-checkbox.is-disabled .form-checkbox-element {
4550
+ background: var(--surface-disabled);
4551
+ border-color: var(--surface-stroke);
4552
+ color: var(--foreground-secondary);
4316
4553
  }
4317
- .command-palette-search-input::placeholder {
4554
+ .form-checkbox.is-disabled .form-checkbox-label {
4318
4555
  color: var(--foreground-secondary);
4319
4556
  }
4557
+ .form-checkbox.is-readonly {
4558
+ cursor: default;
4559
+ }
4560
+ .form-checkbox.is-readonly .form-checkbox-native {
4561
+ pointer-events: none;
4562
+ }
4563
+ .form-checkbox.is-invalid .form-checkbox-element {
4564
+ border-color: var(--danger-500);
4565
+ }
4320
4566
 
4321
- .command-palette-breadcrumb {
4567
+ .form-checkbox-element,
4568
+ .form-checkbox-native {
4569
+ margin: 1px 0 0;
4570
+ height: 20px;
4571
+ width: 20px;
4572
+ }
4573
+
4574
+ .form-checkbox-element {
4575
+ position: relative;
4576
+ display: inline-flex;
4577
+ height: 20px;
4578
+ width: 20px;
4322
4579
  padding: 0;
4580
+ align-items: center;
4323
4581
  flex-shrink: 0;
4324
- background: transparent;
4325
- border: 0;
4582
+ justify-content: center;
4583
+ background: var(--gray-50);
4584
+ border: 1px solid var(--gray-200);
4585
+ border-radius: var(--radius-half);
4586
+ color: var(--primary-25);
4326
4587
  cursor: pointer;
4327
- color: var(--foreground-secondary);
4328
- font: inherit;
4329
- font-size: 15px;
4330
- font-weight: 500;
4331
- white-space: nowrap;
4332
- transition: color 150ms;
4588
+ pointer-events: none;
4589
+ transition: 210ms var(--swift-out);
4590
+ transition-property: background, border-color, color, outline-color, outline-offset;
4591
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4592
+ outline-offset: 0;
4333
4593
  }
4334
- @media (hover: hover) {
4335
- .command-palette-breadcrumb:hover {
4336
- color: var(--foreground);
4337
- }
4594
+ .form-checkbox-element .icon {
4595
+ opacity: 0;
4596
+ scale: 0.85;
4597
+ transition: inherit;
4598
+ transition-property: opacity;
4338
4599
  }
4339
-
4340
- .command-palette-breadcrumb-separator {
4341
- flex-shrink: 0;
4342
- opacity: 0.5;
4343
- color: var(--foreground-secondary);
4344
- font-size: 14px;
4600
+ .form-checkbox-element .icon :is(path) {
4601
+ stroke: currentColor;
4602
+ stroke-width: 54px;
4345
4603
  }
4346
4604
 
4347
- .command-palette-tabs {
4605
+ .form-checkbox-text {
4348
4606
  display: flex;
4349
- overflow-x: auto;
4350
- scrollbar-width: none;
4351
- padding: 6px 15px;
4352
- flex-shrink: 0;
4607
+ min-width: 0;
4608
+ flex-direction: column;
4353
4609
  gap: 3px;
4354
- border-bottom: 1px solid var(--gray-100);
4355
4610
  }
4356
- .command-palette-tabs::-webkit-scrollbar {
4357
- display: none;
4611
+
4612
+ .form-checkbox-label {
4613
+ line-height: 21px;
4358
4614
  }
4359
4615
 
4360
- .command-palette-tab {
4361
- display: flex;
4362
- height: 30px;
4363
- padding: 0 10px;
4364
- align-items: center;
4365
- gap: 6px;
4366
- background: transparent;
4367
- border: 0;
4368
- border-radius: var(--radius-half);
4369
- cursor: pointer;
4616
+ .form-checkbox-sub-label {
4370
4617
  color: var(--foreground-secondary);
4371
- font: inherit;
4372
- font-size: 13px;
4373
- font-weight: 500;
4374
- white-space: nowrap;
4375
- transition: background 150ms, color 150ms;
4618
+ font-size: 14px;
4619
+ }
4620
+
4621
+ .form-checkbox-native {
4622
+ position: absolute;
4623
+ cursor: pointer;
4624
+ opacity: 0;
4376
4625
  }
4377
4626
  @media (hover: hover) {
4378
- .command-palette-tab:hover {
4627
+ .form-checkbox-native:hover + .form-checkbox-element {
4379
4628
  background: var(--gray-100);
4380
- color: var(--foreground);
4381
4629
  }
4382
4630
  }
4383
-
4384
- .command-palette-tab-active {
4385
- background: var(--primary-100);
4386
- color: var(--primary-700);
4631
+ .form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element {
4632
+ background: var(--primary-600);
4633
+ border-color: var(--primary-600);
4387
4634
  }
4388
- @media (hover: hover) {
4389
- .command-palette-tab-active:hover {
4390
- background: var(--primary-100);
4391
- color: var(--primary-700);
4392
- }
4635
+ .form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element .icon {
4636
+ opacity: 1;
4393
4637
  }
4394
-
4395
- .command-palette-tab-icon {
4396
- font-size: 13px;
4638
+ .form-checkbox-native:focus-visible + .form-checkbox-element {
4639
+ outline-color: var(--primary-600);
4640
+ outline-offset: 2px;
4397
4641
  }
4398
-
4399
- .command-palette-results {
4400
- overflow-y: auto;
4401
- overscroll-behavior: contain;
4402
- scroll-padding-block: 42px 6px;
4403
- scrollbar-width: thin;
4404
- padding: 6px;
4405
- flex-grow: 1;
4642
+ .form-checkbox-native:disabled {
4643
+ cursor: not-allowed;
4644
+ }
4645
+ .form-checkbox-native:disabled + .form-checkbox-element {
4646
+ background: var(--gray-100);
4647
+ border-color: var(--gray-200);
4648
+ color: var(--foreground-secondary);
4406
4649
  }
4407
4650
 
4408
- .command-palette-loading {
4651
+ .form-radio-group {
4409
4652
  display: flex;
4410
- padding: 24px;
4411
- align-items: center;
4412
- justify-content: center;
4653
+ flex-direction: column;
4654
+ align-items: flex-start;
4655
+ gap: 12px;
4656
+ }
4657
+ .form-radio-group.is-inline {
4658
+ flex-direction: row;
4659
+ flex-wrap: wrap;
4660
+ gap: 9px 21px;
4413
4661
  }
4414
4662
 
4415
- .command-palette-empty {
4416
- display: flex;
4417
- padding: 24px;
4418
- align-items: center;
4419
- justify-content: center;
4663
+ .form-radio {
4664
+ display: inline-flex;
4665
+ flex-shrink: 0;
4666
+ gap: 12px;
4667
+ line-height: 21px;
4668
+ outline: 0;
4669
+ cursor: pointer;
4670
+ }
4671
+ .form-radio.is-disabled {
4672
+ cursor: not-allowed;
4673
+ }
4674
+ .form-radio.is-disabled .form-radio-element {
4675
+ background: var(--surface-disabled);
4676
+ border-color: var(--surface-stroke);
4677
+ }
4678
+ .form-radio.is-disabled .form-radio-label {
4420
4679
  color: var(--foreground-secondary);
4421
- font-size: 14px;
4680
+ }
4681
+ .form-radio.is-readonly {
4682
+ cursor: default;
4683
+ }
4684
+ .form-radio.is-readonly .form-radio-native {
4685
+ pointer-events: none;
4686
+ }
4687
+ .form-radio.is-invalid .form-radio-element {
4688
+ border-color: var(--danger-500);
4422
4689
  }
4423
4690
 
4424
- .command-palette-group {
4425
- display: flex;
4426
- padding: 9px 10px 3px;
4691
+ .form-radio-element,
4692
+ .form-radio-native {
4693
+ margin: 1px 0 0;
4694
+ height: 20px;
4695
+ width: 20px;
4696
+ }
4697
+
4698
+ .form-radio-element {
4699
+ position: relative;
4700
+ display: inline-flex;
4701
+ flex-shrink: 0;
4702
+ height: 20px;
4703
+ width: 20px;
4427
4704
  align-items: center;
4428
- gap: 6px;
4429
- color: var(--foreground-secondary);
4430
- font-size: 12px;
4431
- font-weight: 600;
4432
- text-transform: uppercase;
4433
- letter-spacing: 0.05em;
4705
+ justify-content: center;
4706
+ background: var(--gray-50);
4707
+ border: 1px solid var(--gray-200);
4708
+ border-radius: 50%;
4709
+ cursor: pointer;
4434
4710
  pointer-events: none;
4711
+ transition: 210ms var(--swift-out);
4712
+ transition-property: background, border-color, outline-color, outline-offset;
4713
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4714
+ outline-offset: 0;
4715
+ }
4716
+ .form-radio-element::after {
4717
+ content: "";
4718
+ height: 8px;
4719
+ width: 8px;
4720
+ background: var(--primary-25);
4721
+ border-radius: 50%;
4722
+ scale: 0;
4723
+ transition: inherit;
4724
+ transition-property: scale;
4435
4725
  }
4436
4726
 
4437
- .command-palette-group-icon {
4438
- font-size: 12px;
4727
+ .form-radio-label {
4728
+ align-self: center;
4439
4729
  }
4440
4730
 
4441
- .command-palette-item {
4442
- display: flex;
4443
- width: 100%;
4444
- padding: 8px 10px;
4445
- align-items: center;
4446
- gap: 10px;
4447
- background: transparent;
4448
- border: 0;
4449
- border-radius: var(--radius-half);
4731
+ .form-radio-native {
4732
+ position: absolute;
4450
4733
  cursor: pointer;
4451
- color: var(--foreground);
4452
- font: inherit;
4453
- font-size: 14px;
4454
- text-align: left;
4455
- transition: background 100ms;
4734
+ opacity: 0;
4456
4735
  }
4457
4736
  @media (hover: hover) {
4458
- .command-palette-item:hover {
4737
+ .form-radio-native:hover + .form-radio-element {
4459
4738
  background: var(--gray-100);
4460
4739
  }
4461
4740
  }
4462
- .command-palette-item:active {
4463
- background: var(--gray-200);
4741
+ .form-radio-native:checked + .form-radio-element {
4742
+ background: var(--primary-600);
4743
+ border-color: var(--primary-600);
4464
4744
  }
4465
-
4466
- .command-palette-item-highlighted {
4745
+ .form-radio-native:checked + .form-radio-element::after {
4746
+ scale: 1;
4747
+ }
4748
+ .form-radio-native:focus-visible + .form-radio-element {
4749
+ outline-color: var(--primary-600);
4750
+ outline-offset: 2px;
4751
+ }
4752
+ .form-radio-native:disabled {
4753
+ cursor: not-allowed;
4754
+ }
4755
+ .form-radio-native:disabled + .form-radio-element {
4467
4756
  background: var(--gray-100);
4757
+ border-color: var(--gray-200);
4758
+ }
4759
+
4760
+ .form-quantity-selector {
4761
+ min-width: max-content;
4762
+ align-self: center;
4763
+ justify-self: center;
4764
+ border: 1px solid var(--surface-stroke);
4765
+ border-radius: var(--radius);
4766
+ box-shadow: var(--shadow-px);
4767
+ overflow: hidden;
4768
+ transition: var(--transition-default);
4769
+ transition-property: border-color, outline-color, outline-offset;
4770
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4771
+ outline-offset: 0;
4772
+ }
4773
+ .form-quantity-selector:focus-visible, .form-quantity-selector:focus-within {
4774
+ outline-color: var(--primary-600);
4775
+ outline-offset: 2px;
4468
4776
  }
4469
4777
  @media (hover: hover) {
4470
- .command-palette-item-highlighted:hover {
4471
- background: var(--gray-100);
4778
+ .form-quantity-selector:hover {
4779
+ border-color: var(--surface-stroke-hover);
4472
4780
  }
4473
4781
  }
4474
4782
 
4475
- .command-palette-item-icon {
4476
- display: flex;
4477
- width: 30px;
4478
- height: 30px;
4479
- align-items: center;
4480
- align-self: flex-start;
4481
- flex-shrink: 0;
4482
- justify-content: center;
4483
- background: var(--gray-100);
4484
- border-radius: var(--radius-half);
4485
- color: var(--foreground);
4486
- transition: background 100ms, color 100ms;
4783
+ .form-quantity-selector-button {
4784
+ margin: -1px;
4785
+ border: 0;
4487
4786
  }
4488
- .command-palette-item-icon .icon {
4489
- font-size: 16px;
4787
+ .form-quantity-selector-button:first-child {
4788
+ margin-right: 0;
4490
4789
  }
4491
-
4492
- .command-palette-item-highlighted .command-palette-item-icon {
4493
- background: var(--gray-200);
4790
+ .form-quantity-selector-button:last-child {
4791
+ margin-left: 0;
4792
+ }
4793
+ .form-quantity-selector-button, .form-quantity-selector-button:focus-visible, .form-quantity-selector-button:focus-within {
4794
+ outline: 0;
4494
4795
  }
4495
4796
 
4496
- .command-palette-item-content {
4497
- overflow: hidden;
4498
- flex-grow: 1;
4797
+ .form-quantity-selector-input {
4798
+ margin: -1px 0;
4799
+ padding-left: 0;
4800
+ padding-right: 0;
4801
+ border-radius: 0;
4802
+ font-variant-numeric: tabular-nums;
4803
+ font-weight: 700;
4804
+ text-align: center;
4805
+ }
4806
+ .form-quantity-selector-input:hover {
4807
+ border-color: var(--surface-stroke-hover);
4808
+ }
4809
+ .form-quantity-selector-input, .form-quantity-selector-input:focus-visible, .form-quantity-selector-input:focus-within {
4810
+ outline: 0 !important;
4811
+ }
4812
+ .form-quantity-selector-input {
4813
+ -moz-appearance: textfield;
4814
+ }
4815
+ .form-quantity-selector-input::-webkit-outer-spin-button, .form-quantity-selector-input::-webkit-inner-spin-button {
4816
+ -webkit-appearance: none;
4817
+ margin: 0;
4499
4818
  }
4500
4819
 
4501
- .command-palette-item-label {
4502
- overflow: hidden;
4503
- white-space: nowrap;
4504
- text-overflow: ellipsis;
4820
+ .form-pin-input {
4821
+ display: grid;
4822
+ width: min-content;
4823
+ gap: 0.4ch;
4824
+ grid-template-columns: repeat(var(--max-length, 0), 1fr);
4825
+ margin: 0;
4826
+ padding: 0;
4827
+ border: 0;
4828
+ font-size: 24px;
4829
+ font-weight: 700;
4505
4830
  }
4506
4831
 
4507
- .command-palette-item-sub-label {
4508
- overflow: hidden;
4509
- margin-top: 1px;
4510
- color: var(--foreground-secondary);
4511
- font-size: 12px;
4512
- white-space: nowrap;
4513
- text-overflow: ellipsis;
4514
- transition: color 100ms;
4832
+ .form-pin-input-field {
4833
+ padding: 0;
4834
+ width: 2.7ch;
4835
+ border: 1px solid var(--surface-stroke);
4836
+ border-radius: var(--radius);
4837
+ box-shadow: var(--shadow-px);
4838
+ font: inherit;
4839
+ line-height: 3.3ch;
4840
+ outline: 0;
4841
+ text-align: center;
4842
+ transition: var(--transition-default);
4843
+ transition-property: border-color, outline-color, outline-offset;
4515
4844
  }
4516
4845
 
4517
- .command-palette-item-highlighted .command-palette-item-sub-label {
4518
- color: var(--primary-500);
4846
+ .form-pin-input-enabled {
4519
4847
  }
4520
-
4521
- .command-palette-item-sub-action-indicator {
4522
- flex-shrink: 0;
4523
- color: var(--foreground-secondary);
4524
- font-size: 12px;
4525
- transition: color 100ms;
4848
+ .form-pin-input-enabled .form-pin-input-field {
4849
+ background-color: var(--surface);
4850
+ color: var(--foreground-prominent);
4851
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4852
+ outline-offset: 0;
4853
+ }
4854
+ .form-pin-input-enabled .form-pin-input-field:focus-visible, .form-pin-input-enabled .form-pin-input-field:focus-within {
4855
+ outline-color: var(--primary-600);
4856
+ outline-offset: -1px;
4526
4857
  }
4527
4858
 
4528
- .command-palette-item-highlighted .command-palette-item-sub-action-indicator {
4529
- color: var(--primary-500);
4859
+ .form-pin-input-disabled {
4860
+ }
4861
+ .form-pin-input-disabled .form-pin-input-field {
4862
+ background-color: var(--surface-disabled);
4863
+ color: var(--foreground-secondary);
4864
+ cursor: not-allowed;
4530
4865
  }
4531
4866
 
4532
- @keyframes command-palette-in {
4533
- from {
4534
- opacity: 0;
4535
- scale: 1.05;
4536
- }
4537
- to {
4538
- opacity: 1;
4539
- scale: 1;
4540
- }
4867
+ .form-toggle {
4868
+ position: relative;
4869
+ display: block;
4870
+ width: 54px;
4871
+ height: 30px;
4872
+ flex: 0 0 auto;
4873
+ background: var(--gray-50);
4874
+ border: 1px solid var(--gray-200);
4875
+ border-radius: var(--radius-full);
4876
+ contain: paint;
4877
+ outline: 2px solid rgb(from var(--primary-600) r g b/0);
4878
+ outline-offset: 0;
4541
4879
  }
4542
- @keyframes command-palette-out {
4543
- from {
4544
- opacity: 1;
4545
- }
4546
- to {
4547
- opacity: 0;
4548
- }
4880
+ .form-toggle:has(.form-toggle-input:focus-visible) {
4881
+ outline-color: var(--primary-600);
4882
+ outline-offset: 2px;
4549
4883
  }
4550
- @keyframes command-palette-backdrop-in {
4551
- from {
4552
- opacity: 0;
4553
- }
4554
- to {
4555
- opacity: 1;
4556
- }
4884
+ .form-toggle.is-checked {
4885
+ border-color: transparent;
4557
4886
  }
4558
- @keyframes command-palette-backdrop-out {
4559
- from {
4560
- opacity: 1;
4561
- }
4562
- to {
4563
- opacity: 0;
4564
- }
4565
- }.comment {
4566
- display: grid;
4567
- max-width: 100%;
4568
- gap: 3px 15px;
4569
- grid-template-columns: 1fr auto;
4570
- grid-template-rows: repeat(2, auto);
4887
+ .form-toggle.is-checked .form-toggle-input::after {
4888
+ translate: 24px 0;
4571
4889
  }
4572
- .comment .avatar {
4573
- align-self: end;
4574
- grid-column: 2;
4575
- grid-row: 1;
4890
+ .form-toggle.is-checked:not(.is-switch) {
4891
+ background: var(--primary-600);
4576
4892
  }
4577
- .comment .comment-content {
4578
- grid-column: 1;
4579
- grid-row: 1;
4893
+ .form-toggle.is-checked:not(.is-switch) .form-toggle-icon {
4894
+ color: var(--primary-25);
4580
4895
  }
4581
- .comment .comment-footer {
4582
- grid-column: 1;
4583
- grid-row: 2;
4896
+ .form-toggle.is-checked:not(.is-switch) .form-toggle-input::after {
4897
+ border-color: transparent;
4584
4898
  }
4585
- .comment.is-received {
4586
- grid-template-columns: auto 1fr;
4899
+ .form-toggle.is-checked .form-toggle-icon-on {
4900
+ translate: calc(-50% + 24px) -50%;
4587
4901
  }
4588
- .comment.is-received .avatar {
4589
- grid-column: 1;
4902
+ .form-toggle:not(.is-checked) .form-toggle-icon-off {
4903
+ translate: calc(-50% - 24px) -50%;
4590
4904
  }
4591
- .comment.is-received .comment-content {
4592
- grid-column: 2;
4905
+ .form-toggle.is-disabled {
4906
+ cursor: not-allowed;
4907
+ opacity: 0.6;
4593
4908
  }
4594
- .comment.is-received .comment-footer {
4595
- grid-column: 2;
4909
+ .form-toggle.is-readonly .form-toggle-input {
4910
+ pointer-events: none;
4596
4911
  }
4597
-
4598
- .comment-content {
4599
- min-width: 0;
4600
- padding: 12px 18px;
4601
- background: var(--primary-50);
4602
- border: 1px solid var(--primary-200);
4603
- border-radius: calc(var(--radius) * 2);
4604
- box-shadow: var(--shadow-xs);
4912
+ .form-toggle.is-invalid {
4913
+ border-color: var(--danger-500);
4605
4914
  }
4606
4915
 
4607
- .comment:not(.is-received) .comment-content {
4608
- border-bottom-right-radius: var(--radius);
4916
+ .form-toggle-icon {
4917
+ position: absolute;
4918
+ top: 50%;
4919
+ color: var(--foreground-secondary);
4920
+ pointer-events: none;
4921
+ translate: -50% -50%;
4609
4922
  }
4610
4923
 
4611
- .comment.is-received .comment-content {
4612
- background: var(--gray-50);
4613
- border-color: var(--gray-200);
4614
- border-bottom-left-radius: var(--radius);
4924
+ .form-toggle-icon-off {
4925
+ left: 15px;
4615
4926
  }
4616
4927
 
4617
- .comment.is-typing .comment-content {
4618
- width: min-content;
4928
+ .form-toggle-icon-on {
4929
+ left: 39px;
4619
4930
  }
4620
4931
 
4621
- .comment-typing {
4932
+ .form-toggle-input {
4933
+ -webkit-appearance: none;
4934
+ appearance: none;
4935
+ position: relative;
4622
4936
  display: block;
4623
- margin: 6px;
4624
- height: 6px;
4625
- width: 6px;
4626
- border-radius: 6px;
4627
- animation: comment-typing 1s linear infinite both;
4628
- }
4629
-
4630
- .comment-footer {
4631
- display: flex;
4632
- align-items: center;
4633
- gap: 12px;
4634
- justify-content: flex-end;
4635
- font-size: 12px;
4636
- font-weight: 500;
4637
- }
4638
- .comment-footer span {
4639
- margin-right: auto;
4937
+ margin: 0;
4938
+ height: inherit;
4939
+ width: inherit;
4940
+ background: unset;
4941
+ border: 0;
4942
+ border-radius: inherit;
4943
+ cursor: pointer;
4944
+ outline: 0;
4640
4945
  }
4641
- .comment-footer time {
4642
- color: var(--foreground-secondary);
4946
+ .form-toggle-input::after {
4947
+ position: absolute;
4948
+ display: block;
4949
+ top: 2px;
4950
+ left: 2px;
4951
+ height: 24px;
4952
+ width: 24px;
4953
+ content: "";
4954
+ background: var(--surface);
4955
+ border: 1px solid var(--surface-stroke);
4956
+ border-radius: var(--radius-full);
4957
+ box-shadow: var(--shadow-sm);
4643
4958
  }
4644
4959
 
4645
- @keyframes comment-typing {
4646
- 0%, 80%, 100% {
4647
- background: var(--gray-200);
4648
- box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
4649
- translate: 0 0;
4650
- }
4651
- 20% {
4652
- background: var(--gray-200);
4653
- box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
4654
- translate: 0 0;
4655
- }
4656
- 40% {
4657
- background: var(--gray-300);
4658
- box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
4659
- translate: 0 -4px;
4660
- }
4661
- 60% {
4662
- background: var(--gray-200);
4663
- box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
4664
- translate: 0 0;
4665
- }
4960
+ .form-toggle,
4961
+ .form-toggle-icon,
4962
+ .form-toggle-input,
4963
+ .form-toggle-input::after {
4964
+ transition: 210ms var(--swift-out);
4965
+ transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
4666
4966
  }.filter {
4667
4967
  max-height: 50dvh;
4668
4968
  max-width: 100%;
@@ -5337,6 +5637,7 @@
5337
5637
  }
5338
5638
 
5339
5639
  .separator {
5640
+ flex-shrink: 0;
5340
5641
  background: var(--gray-200);
5341
5642
  }
5342
5643
 
@@ -7342,21 +7643,6 @@ tfoot .table-cell {
7342
7643
  border: 1px solid var(--surface-stroke);
7343
7644
  border-radius: var(--radius);
7344
7645
  }
7345
- .segmented-control.is-small {
7346
- height: 30px;
7347
- padding: 0 12px;
7348
- gap: 9px;
7349
- }
7350
- .segmented-control.is-medium {
7351
- height: 36px;
7352
- padding: 0 15px;
7353
- gap: 9px;
7354
- }
7355
- .segmented-control.is-large {
7356
- height: 48px;
7357
- padding: 0 21px;
7358
- gap: 12px;
7359
- }
7360
7646
 
7361
7647
  .segmented-control-fill {
7362
7648
  display: flex;
@@ -7413,6 +7699,21 @@ tfoot .table-cell {
7413
7699
  color: var(--foreground-prominent);
7414
7700
  cursor: default;
7415
7701
  }
7702
+ .segmented-control-item.is-small {
7703
+ height: 30px;
7704
+ padding: 0 12px;
7705
+ gap: 9px;
7706
+ }
7707
+ .segmented-control-item.is-medium {
7708
+ height: 36px;
7709
+ padding: 0 15px;
7710
+ gap: 9px;
7711
+ }
7712
+ .segmented-control-item.is-large {
7713
+ height: 48px;
7714
+ padding: 0 21px;
7715
+ gap: 12px;
7716
+ }
7416
7717
  .segmented-control-item:disabled {
7417
7718
  opacity: 0.5;
7418
7719
  pointer-events: none;
@@ -7435,6 +7736,67 @@ tfoot .table-cell {
7435
7736
  }
7436
7737
  .segmented-control-item.is-active::before, .segmented-control-item.is-active + .segmented-control-item::before {
7437
7738
  opacity: 0;
7739
+ }.skeleton {
7740
+ position: relative;
7741
+ display: block;
7742
+ height: 1em;
7743
+ width: 100%;
7744
+ background: var(--gray-100);
7745
+ border-radius: var(--radius);
7746
+ overflow: hidden;
7747
+ }
7748
+ .skeleton::after {
7749
+ content: "";
7750
+ position: absolute;
7751
+ inset: 0;
7752
+ background: linear-gradient(90deg, transparent 0%, var(--surface) 50%, transparent 100%);
7753
+ translate: -100% 0;
7754
+ animation: skeleton-shimmer 1.6s ease-in-out infinite;
7755
+ }
7756
+ @media (prefers-reduced-motion: reduce) {
7757
+ .skeleton {
7758
+ animation: skeleton-pulse 1.6s ease-in-out infinite;
7759
+ }
7760
+ .skeleton::after {
7761
+ display: none;
7762
+ }
7763
+ }
7764
+
7765
+ .is-text {
7766
+ height: 1em;
7767
+ border-radius: var(--radius-half);
7768
+ vertical-align: middle;
7769
+ }
7770
+
7771
+ .is-circle {
7772
+ height: 40px;
7773
+ width: 40px;
7774
+ flex-shrink: 0;
7775
+ border-radius: 50%;
7776
+ }
7777
+
7778
+ .is-rectangle {
7779
+ height: 120px;
7780
+ border-radius: 0;
7781
+ }
7782
+
7783
+ .is-rounded {
7784
+ height: 120px;
7785
+ border-radius: calc(var(--radius) * 2);
7786
+ }
7787
+
7788
+ @keyframes skeleton-shimmer {
7789
+ from {
7790
+ translate: -100% 0;
7791
+ }
7792
+ to {
7793
+ translate: 100% 0;
7794
+ }
7795
+ }
7796
+ @keyframes skeleton-pulse {
7797
+ 50% {
7798
+ opacity: 0.5;
7799
+ }
7438
7800
  }.split-view {
7439
7801
  display: grid;
7440
7802
  width: 100%;