/*
Please read: https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-compat.md
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /* Will affect the button style of most component libraries, so disable it */
  /* https://github.com/unocss/unocss/issues/2127 */
  /* background-color: transparent; !* 2 *! */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.i-ph-app-window{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM60 92a16 16 0 1 1 16 16a16 16 0 0 1-16-16m48 0a16 16 0 1 1 16 16a16 16 0 0 1-16-16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-archive{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M224 44H32a20 20 0 0 0-20 20v24a20 20 0 0 0 16 19.6V192a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20v-84.4A20 20 0 0 0 244 88V64a20 20 0 0 0-20-20M36 68h184v16H36Zm16 120v-80h152v80Zm112-52a12 12 0 0 1-12 12h-48a12 12 0 0 1 0-24h48a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-bend-down-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m232.49 160.49l-48 48a12 12 0 0 1-17-17L195 164h-67A108.12 108.12 0 0 1 20 56a12 12 0 0 1 24 0a84.09 84.09 0 0 0 84 84h67l-27.52-27.51a12 12 0 0 1 17-17l48 48a12 12 0 0 1 .01 17'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-bend-left-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212 224a12 12 0 0 1-12 12A108.12 108.12 0 0 1 92 128V61L64.49 88.49a12 12 0 0 1-17-17l48-48a12 12 0 0 1 17 0l48 48a12 12 0 0 1-17 17L116 61v67a84.09 84.09 0 0 0 84 84a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-bend-up-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m232.49 112.49l-48 48a12 12 0 0 1-17-17L195 116h-67a84.09 84.09 0 0 0-84 84a12 12 0 0 1-24 0A108.12 108.12 0 0 1 128 92h67l-27.49-27.52a12 12 0 0 1 17-17l48 48a12 12 0 0 1-.02 17.01'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-circle-up-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m37.66 101.66a8 8 0 0 1-11.32 0L136 107.31V168a8 8 0 0 1-16 0v-60.69l-18.34 18.35a8 8 0 0 1-11.32-11.32l32-32a8 8 0 0 1 11.32 0l32 32a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-clockwise,.i-ph-arrow-clockwise-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M244 56v48a12 12 0 0 1-12 12h-48a12 12 0 1 1 0-24h17.1l-19-17.38c-.13-.12-.26-.24-.38-.37A76 76 0 1 0 127 204h1a75.53 75.53 0 0 0 52.15-20.72a12 12 0 0 1 16.49 17.45A99.45 99.45 0 0 1 128 228h-1.37a100 100 0 1 1 71.88-170.94L220 76.72V56a12 12 0 0 1 24 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-counter-clockwise{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a100 100 0 0 1-98.66 100H128a99.4 99.4 0 0 1-68.62-27.29a12 12 0 0 1 16.48-17.45a76 76 0 1 0-1.57-109c-.13.13-.25.25-.39.37L54.89 92H72a12 12 0 0 1 0 24H24a12 12 0 0 1-12-12V56a12 12 0 0 1 24 0v20.72l21.48-19.66A100 100 0 0 1 228 128'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-down,.i-ph-arrow-down-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m208.49 152.49l-72 72a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L116 187V40a12 12 0 0 1 24 0v147l51.51-51.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-elbow-down-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M204 32v144a12 12 0 0 1-12 12H77l27.52 27.51a12 12 0 0 1-17 17l-48-48a12 12 0 0 1 0-17l48-48a12 12 0 1 1 17 17L77 164h103V32a12 12 0 0 1 24 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12H69l51.52 51.51a12 12 0 0 1-17 17l-72-72a12 12 0 0 1 0-17l72-72a12 12 0 0 1 17 17L69 116h147a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m224.49 136.49l-72 72a12 12 0 0 1-17-17L187 140H40a12 12 0 0 1 0-24h147l-51.49-51.52a12 12 0 0 1 17-17l72 72a12 12 0 0 1-.02 17.01'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-square-out{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 104a12 12 0 0 1-24 0V69l-59.51 59.51a12 12 0 0 1-17-17L187 52h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12Zm-44 24a12 12 0 0 0-12 12v64H52V84h64a12 12 0 0 0 0-24H48a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h128a20 20 0 0 0 20-20v-68a12 12 0 0 0-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-u-up-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236 144a68.07 68.07 0 0 1-68 68H80a12 12 0 0 1 0-24h88a44 44 0 0 0 0-88H61l27.52 27.51a12 12 0 0 1-17 17l-48-48a12 12 0 0 1 0-17l48-48a12 12 0 1 1 17 17L61 76h107a68.08 68.08 0 0 1 68 68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-up,.i-ph-arrow-up-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208.49 120.49a12 12 0 0 1-17 0L140 69v147a12 12 0 0 1-24 0V69l-51.51 51.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0l72 72a12 12 0 0 1 0 17'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrow-up-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M204 64v104a12 12 0 0 1-24 0V93L72.49 200.49a12 12 0 0 1-17-17L163 76H88a12 12 0 0 1 0-24h104a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrows-clockwise{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 48v48a12 12 0 0 1-12 12h-48a12 12 0 0 1 0-24h19l-7.8-7.8a75.55 75.55 0 0 0-53.32-22.26h-.43a75.5 75.5 0 0 0-53.06 21.63a12 12 0 1 1-16.78-17.16a99.38 99.38 0 0 1 69.87-28.47h.52a99.42 99.42 0 0 1 70.2 29.29L204 67V48a12 12 0 0 1 24 0m-44.39 132.43a75.5 75.5 0 0 1-53.09 21.63h-.43a75.55 75.55 0 0 1-53.32-22.26L69 172h19a12 12 0 0 0 0-24H40a12 12 0 0 0-12 12v48a12 12 0 0 0 24 0v-19l7.8 7.8a99.42 99.42 0 0 0 70.2 29.26h.56a99.38 99.38 0 0 0 69.87-28.47a12 12 0 0 0-16.78-17.16Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrows-in{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M140 104V64a12 12 0 0 1 24 0v11l35.51-35.52a12 12 0 0 1 17 17L181 92h11a12 12 0 0 1 0 24h-40a12 12 0 0 1-12-12m-36 36H64a12 12 0 0 0 0 24h11l-35.49 35.51a12 12 0 0 0 17 17L92 181v11a12 12 0 0 0 24 0v-40a12 12 0 0 0-12-12m77 24h11a12 12 0 0 0 0-24h-40a12 12 0 0 0-12 12v40a12 12 0 0 0 24 0v-11l35.51 35.52a12 12 0 0 0 17-17ZM104 52a12 12 0 0 0-12 12v11L56.49 39.51a12 12 0 0 0-17 17L75 92H64a12 12 0 0 0 0 24h40a12 12 0 0 0 12-12V64a12 12 0 0 0-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrows-in-line-vertical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12M119.51 96.49a12 12 0 0 0 17 0l32-32a12 12 0 0 0-17-17L140 59V16a12 12 0 0 0-24 0v43l-11.51-11.49a12 12 0 0 0-17 17Zm17 63a12 12 0 0 0-17 0l-32 32a12 12 0 0 0 17 17L116 197v43a12 12 0 0 0 24 0v-43l11.51 11.52a12 12 0 0 0 17-17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-arrows-left-right-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 184.49l-32 32a12 12 0 0 1-17-17L179 188H48a12 12 0 0 1 0-24h131l-11.52-11.51a12 12 0 0 1 17-17l32 32a12 12 0 0 1 .01 17m-145-64a12 12 0 0 0 17-17L77 92h131a12 12 0 0 0 0-24H77l11.49-11.51a12 12 0 0 0-17-17l-32 32a12 12 0 0 0 0 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-atom{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M219.23 159.2a196.7 196.7 0 0 0-18-31.2a196.7 196.7 0 0 0 18-31.2c11.84-26.31 11.69-47.48-.43-59.6s-33.29-12.27-59.6-.43a196.7 196.7 0 0 0-31.2 18a196.7 196.7 0 0 0-31.2-18c-26.31-11.84-47.48-11.69-59.6.43s-12.27 33.29-.43 59.6a196.7 196.7 0 0 0 18 31.2a196.7 196.7 0 0 0-18 31.2c-11.84 26.31-11.69 47.48.43 59.6c6.13 6.13 14.58 9.2 24.8 9.2c10 0 21.77-2.92 34.76-8.77a196.7 196.7 0 0 0 31.2-18a196.7 196.7 0 0 0 31.2 18c13 5.85 24.74 8.77 34.76 8.77c10.26 0 18.71-3.07 24.84-9.2c12.16-12.12 12.31-33.29.47-59.6m-17.41-105c5.25 5.26 1.79 26-16 53.78c-5.61-6.66-11.65-13.25-18.07-19.67S154.7 75.83 148 70.22c27.82-17.83 48.56-21.29 53.82-16.04ZM171.24 128a289 289 0 0 1-20.51 22.73A289 289 0 0 1 128 171.24a289 289 0 0 1-22.73-20.51A289 289 0 0 1 84.76 128A298.6 298.6 0 0 1 128 84.76a287 287 0 0 1 22.73 20.51A287 287 0 0 1 171.24 128M54.18 54.18c1.46-1.45 4.1-2.24 7.75-2.24c9.53 0 25.94 5.39 46 18.28c-6.66 5.61-13.25 11.65-19.67 18.07S75.83 101.3 70.22 108C52.39 80.18 48.93 59.44 54.18 54.18m0 147.64c-5.25-5.26-1.79-26 16-53.78c5.61 6.66 11.65 13.25 18.07 19.67s13 12.46 19.67 18.07c-27.74 17.83-48.48 21.29-53.74 16.04m147.64 0c-5.26 5.25-26 1.79-53.78-16c6.66-5.61 13.25-11.65 19.67-18.07s12.46-13 18.07-19.67c17.83 27.74 21.29 48.48 16.04 53.74M144 128a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-book-bookmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 20H72a36 36 0 0 0-36 36v168a12 12 0 0 0 12 12h144a12 12 0 0 0 0-24H60v-4a12 12 0 0 1 12-12h136a12 12 0 0 0 12-12V32a12 12 0 0 0-12-12m-88 24h36v59l-10.51-8.41a12 12 0 0 0-15 0L120 103Zm76 128H72a35.6 35.6 0 0 0-12 2.06V56a12 12 0 0 1 12-12h24v84a12 12 0 0 0 19.5 9.37l22.49-18l22.51 18A12 12 0 0 0 180 128V44h16Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-book-open{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 44h-72a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H24a12 12 0 0 0-12 12v144a12 12 0 0 0 12 12h72a20 20 0 0 1 20 20a12 12 0 0 0 24 0a20 20 0 0 1 20-20h72a12 12 0 0 0 12-12V56a12 12 0 0 0-12-12M96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.8 43.8 0 0 0 96 188m124 0h-60a43.7 43.7 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-book-open-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 44h-72a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H24a12 12 0 0 0-12 12v144a12 12 0 0 0 12 12h72a20 20 0 0 1 20 20a12 12 0 0 0 24 0a20 20 0 0 1 20-20h72a12 12 0 0 0 12-12V56a12 12 0 0 0-12-12M96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.8 43.8 0 0 0 96 188m124 0h-60a43.7 43.7 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Zm-56-92h32a12 12 0 0 1 0 24h-32a12 12 0 0 1 0-24m44 52a12 12 0 0 1-12 12h-32a12 12 0 0 1 0-24h32a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-brackets-curly{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M54.8 119.49a35 35 0 0 1-5.75 8.51a35 35 0 0 1 5.75 8.51C60 147.24 60 159.83 60 172c0 25.94 1.84 32 20 32a12 12 0 0 1 0 24c-19.14 0-32.2-6.9-38.8-20.51C36 196.76 36 184.17 36 172c0-25.94-1.84-32-20-32a12 12 0 0 1 0-24c18.16 0 20-6.06 20-32c0-12.17 0-24.76 5.2-35.49C47.8 34.9 60.86 28 80 28a12 12 0 0 1 0 24c-18.16 0-20 6.06-20 32c0 12.17 0 24.76-5.2 35.49M240 116c-18.16 0-20-6.06-20-32c0-12.17 0-24.76-5.2-35.49C208.2 34.9 195.14 28 176 28a12 12 0 0 0 0 24c18.16 0 20 6.06 20 32c0 12.17 0 24.76 5.2 35.49A35 35 0 0 0 207 128a35 35 0 0 0-5.75 8.51C196 147.24 196 159.83 196 172c0 25.94-1.84 32-20 32a12 12 0 0 0 0 24c19.14 0 32.2-6.9 38.8-20.51c5.2-10.73 5.2-23.32 5.2-35.49c0-25.94 1.84-32 20-32a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-brain{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M252 124a60.14 60.14 0 0 0-32-53.08a52 52 0 0 0-92-32.11a52 52 0 0 0-92 32.11a60 60 0 0 0 0 106.14a52 52 0 0 0 92 32.13a52 52 0 0 0 92-32.13A60.05 60.05 0 0 0 252 124M88 204a28 28 0 0 1-26.85-20.07c1 0 1.89.07 2.85.07h8a12 12 0 0 0 0-24h-8a36 36 0 0 1-12-69.95a12 12 0 0 0 8-11.32V72a28 28 0 0 1 56 0v60.18a51.6 51.6 0 0 0-7.2-3.85a12 12 0 1 0-9.6 22A28 28 0 0 1 88 204m104-44h-8a12 12 0 0 0 0 24h8c1 0 1.9 0 2.85-.07a28 28 0 1 1-38-33.61a12 12 0 1 0-9.6-22a51.6 51.6 0 0 0-7.2 3.85V72a28 28 0 0 1 56 0v6.73a12 12 0 0 0 8 11.32a36 36 0 0 1-12 70Zm16-44a12 12 0 0 1-12 12a40 40 0 0 1-40-40v-4a12 12 0 0 1 24 0v4a16 16 0 0 0 16 16a12 12 0 0 1 12 12M100 88a40 40 0 0 1-40 40a12 12 0 0 1 0-24a16 16 0 0 0 16-16v-4a12 12 0 0 1 24 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-broom{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M237.24 213.21C216.12 203 204 180.64 204 152v-17.27a19.94 19.94 0 0 0-12.62-18.59l-24.86-9.81a4 4 0 0 1-2.26-5.14l21.33-53A32 32 0 0 0 167.17 6a32.13 32.13 0 0 0-40.92 18.2l-.07.18l-21 53.09a3.94 3.94 0 0 1-2.14 2.2a3.9 3.9 0 0 1-3 .06L74.6 69.43A19.89 19.89 0 0 0 52.87 74C31.06 96.43 20 122.68 20 152a115.46 115.46 0 0 0 32.29 80.3A12 12 0 0 0 61 236h171a12 12 0 0 0 5.24-22.79M68.19 92.73L91.06 102a28 28 0 0 0 36.44-15.69l20.95-53a8.32 8.32 0 0 1 10.33-4.81a8 8 0 0 1 4.61 10.57a1 1 0 0 0 0 .11L142 92.29a28.05 28.05 0 0 0 15.68 36.33l22.32 8.83V152c0 1 0 2.07.05 3.1l-122.44-49a102 102 0 0 1 10.58-13.37M116.74 212a83.73 83.73 0 0 1-22.09-39a12 12 0 0 0-23.25 6a110.3 110.3 0 0 0 14.49 33H66.25A91.53 91.53 0 0 1 44 152a84 84 0 0 1 3.41-24.11l136.67 54.66A86.6 86.6 0 0 0 198.66 212Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-bug{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M140 88a16 16 0 1 1 16 16a16 16 0 0 1-16-16m-40-16a16 16 0 1 0 16 16a16 16 0 0 0-16-16m120 72a91.8 91.8 0 0 1-2.34 20.64l19.15 8.36a12 12 0 0 1-9.62 22l-18-7.85a92 92 0 0 1-162.46 0l-18 7.85a12 12 0 1 1-9.62-22l19.15-8.36A91.8 91.8 0 0 1 36 144v-4H16a12 12 0 0 1 0-24h20v-4a91.8 91.8 0 0 1 2.34-20.64L19.19 83a12 12 0 0 1 9.62-22l18 7.85a92 92 0 0 1 162.46 0l18-7.85a12 12 0 1 1 9.62 22l-19.15 8.36A91.8 91.8 0 0 1 220 112v4h20a12 12 0 0 1 0 24h-20ZM60 116h136v-4a68 68 0 0 0-136 0Zm56 94.92V140H60v4a68.1 68.1 0 0 0 56 66.92M196 144v-4h-56v70.92A68.1 68.1 0 0 0 196 144'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-calendar-blank{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-camera{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 52h-25.58L170 33.34A12 12 0 0 0 160 28H96a12 12 0 0 0-10 5.34L73.57 52H48a28 28 0 0 0-28 28v112a28 28 0 0 0 28 28h160a28 28 0 0 0 28-28V80a28 28 0 0 0-28-28m4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4h32a12 12 0 0 0 10-5.34L102.42 52h51.15L166 70.66A12 12 0 0 0 176 76h32a4 4 0 0 1 4 4ZM128 84a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 72a24 24 0 1 1 24-24a24 24 0 0 1-24 24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-double-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L137 128ZM57 128l71.52-71.51a12 12 0 0 0-17-17l-80 80a12 12 0 0 0 0 17l80 80a12 12 0 0 0 17-17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-double-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m144.49 136.49l-80 80a12 12 0 0 1-17-17L119 128L47.51 56.49a12 12 0 0 1 17-17l80 80a12 12 0 0 1-.02 17m80-17l-80-80a12 12 0 1 0-17 17L199 128l-71.52 71.51a12 12 0 0 0 17 17l80-80a12 12 0 0 0 .01-17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216.49 168.49a12 12 0 0 1-17 0L128 97l-71.51 71.49a12 12 0 0 1-17-17l80-80a12 12 0 0 1 17 0l80 80a12 12 0 0 1 0 17'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-caret-up-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M184.49 167.51a12 12 0 0 1 0 17l-48 48a12 12 0 0 1-17 0l-48-48a12 12 0 0 1 17-17L128 207l39.51-39.52a12 12 0 0 1 16.98.03m-96-79L128 49l39.51 39.52a12 12 0 0 0 17-17l-48-48a12 12 0 0 0-17 0l-48 48a12 12 0 0 0 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chat-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 0 0-96.15 157.23L21 209.66A20 20 0 0 0 46.34 235l32.43-10.81A108 108 0 1 0 128 20m0 192a84 84 0 0 1-42.06-11.27a12 12 0 0 0-6-1.62a12.1 12.1 0 0 0-3.8.62l-29.79 9.93l9.93-29.79a12 12 0 0 0-1-9.81A84 84 0 1 1 128 212'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chat-circle-dots-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 0 0-91.82 152.88l-11.35 34.05a16 16 0 0 0 20.24 20.24l34.05-11.35A104 104 0 1 0 128 24M84 140a12 12 0 1 1 12-12a12 12 0 0 1-12 12m44 0a12 12 0 1 1 12-12a12 12 0 0 1-12 12m44 0a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chat-teardrop-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176 108a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h68a12 12 0 0 1 12 12m-12 28H96a12 12 0 0 0 0 24h68a12 12 0 0 0 0-24m72-12a104.11 104.11 0 0 1-104 104H48a20 20 0 0 1-20-20v-84a104 104 0 0 1 208 0m-24 0a80 80 0 0 0-160 0v80h80a80.09 80.09 0 0 0 80-80'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chat-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 44H40a20 20 0 0 0-20 20v160a19.82 19.82 0 0 0 11.56 18.1a20.1 20.1 0 0 0 8.49 1.9a19.9 19.9 0 0 0 12.82-4.72l.12-.11L84.47 212H216a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20m-4 144H80a11.93 11.93 0 0 0-7.84 2.92L44 215.23V68h168ZM84 108a12 12 0 0 1 12-12h64a12 12 0 1 1 0 24H96a12 12 0 0 1-12-12m0 40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H96a12 12 0 0 1-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chats{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 76h-28V48a20 20 0 0 0-20-20H40a20 20 0 0 0-20 20v128a12 12 0 0 0 19.54 9.33l28.46-23V184a20 20 0 0 0 20 20h92.17l36.29 29.33A12 12 0 0 0 236 224V96a20 20 0 0 0-20-20M44 150.87V52h120v80H71.58a12 12 0 0 0-7.58 2.67Zm168 48l-20-16.2a12 12 0 0 0-7.54-2.67H92v-24h76a20 20 0 0 0 20-20v-36h24Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-chats-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236.34 187.09A84 84 0 0 0 172.29 68.9a84 84 0 0 0-152.63 70.19l-6.84 23.26a20 20 0 0 0 24.83 24.83l23.26-6.84a84 84 0 0 0 22.76 6.74a84.06 84.06 0 0 0 111.42 41.26l23.26 6.84a20 20 0 0 0 24.83-24.83ZM62 155.5a11.9 11.9 0 0 0-3.39.49l-20.72 6.09L44 141.35a12 12 0 0 0-.93-9a60 60 0 1 1 24.63 24.57a12 12 0 0 0-5.7-1.42m150.89 24.8a12 12 0 0 0-.93 9l6.09 20.73l-20.69-6.03a12 12 0 0 0-9.06.93a60 60 0 0 1-77.3-18.3a83.93 83.93 0 0 0 68.55-91.37a60 60 0 0 1 33.38 85Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-check,.i-ph-check-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-check-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-check-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-checkerboard{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 48a20 20 0 0 0-20-20H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20Zm-35 68l-53-53V52h11l53 53v11Zm-53-19l19 19h-19Zm64-26l-19-19h19Zm-88-19v64H52V52Zm-11 152l-53-53v-11h11l53 53v11Zm11-45l-19-19h19Zm-64 26l19 19H52Zm88 19v-64h64v64Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle-dashed{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M92.38 38.05A12 12 0 0 1 101 23.42a108 108 0 0 1 54 0a12 12 0 1 1-6 23.23a84.1 84.1 0 0 0-42 0a12 12 0 0 1-14.62-8.6M50.94 52.34a108.1 108.1 0 0 0-27 46.76a12 12 0 0 0 8.37 14.77a12.2 12.2 0 0 0 3.2.43a12 12 0 0 0 11.56-8.8a84 84 0 0 1 21-36.35a12 12 0 1 0-17.13-16.81m-3.88 98.14a12 12 0 0 0-23.12 6.42a108 108 0 0 0 27 46.78A12 12 0 0 0 68 186.85a84 84 0 0 1-20.94-36.37M149 209.35a84 84 0 0 1-42 0a12 12 0 1 0-6 23.23a108 108 0 0 0 54 0a12 12 0 1 0-6-23.23m74.72-67.22A12 12 0 0 0 209 150.5a84 84 0 0 1-21 36.35a12 12 0 0 0 17.12 16.82a108.2 108.2 0 0 0 27-46.77a12 12 0 0 0-8.41-14.77Zm-14.77-36.61a12 12 0 0 0 23.12-6.42a108 108 0 0 0-27-46.78A12 12 0 1 0 188 69.15a84 84 0 0 1 20.94 36.37Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 128A104 104 0 1 1 128 24a104.13 104.13 0 0 1 104 104'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle-half{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m12 24.87a83.5 83.5 0 0 1 24 7.25v151.76a83.5 83.5 0 0 1-24 7.25ZM44 128a84.12 84.12 0 0 1 72-83.13v166.26A84.12 84.12 0 0 1 44 128m144 58.71V69.29a83.81 83.81 0 0 1 0 117.42'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle-half-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24M40 128a88.1 88.1 0 0 1 88-88v176a88.1 88.1 0 0 1-88-88'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-circle-notch{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236 128a108 108 0 0 1-216 0c0-42.52 24.73-81.34 63-98.9a12 12 0 1 1 10 21.81C63.24 64.57 44 94.83 44 128a84 84 0 0 0 168 0c0-33.17-19.24-63.43-49-77.09a12 12 0 1 1 10-21.81c38.27 17.56 63 56.38 63 98.9'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-clipboard{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M200 28h-34.53a51.88 51.88 0 0 0-74.94 0H56a20 20 0 0 0-20 20v168a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20m-44.29 32h-55.42a28 28 0 0 1 55.42 0M196 212H60V52h17.41A52 52 0 0 0 76 64v8a12 12 0 0 0 12 12h80a12 12 0 0 0 12-12v-8a52 52 0 0 0-1.41-12H196Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-clipboard-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M172 164a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12-52H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-64v168a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h34.53a51.88 51.88 0 0 1 74.94 0H200a20 20 0 0 1 20 20M100.29 60h55.42a28 28 0 0 0-55.42 0M196 52h-17.41A52 52 0 0 1 180 64v8a12 12 0 0 1-12 12H88a12 12 0 0 1-12-12v-8a52 52 0 0 1 1.41-12H60v160h136Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-clock{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m68-84a12 12 0 0 1-12 12h-56a12 12 0 0 1-12-12V72a12 12 0 0 1 24 0v44h44a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-clock-counter-clockwise{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M140 80v41.21l34.17 20.5a12 12 0 1 1-12.34 20.58l-40-24A12 12 0 0 1 116 128V80a12 12 0 0 1 24 0m-12-52a99.38 99.38 0 0 0-70.76 29.34c-4.69 4.74-9 9.37-13.24 14V64a12 12 0 0 0-24 0v40a12 12 0 0 0 12 12h40a12 12 0 0 0 0-24H57.77c5.23-6 10.6-11.78 16.49-17.74a76 76 0 1 1 1.58 109a12 12 0 0 0-16.48 17.46A100 100 0 1 0 128 28'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cloud{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M160 36a92.09 92.09 0 0 0-81 48.36A68 68 0 1 0 72 220h88a92 92 0 0 0 0-184m0 160H72a44 44 0 0 1-1.82-88A92 92 0 0 0 68 128a12 12 0 0 0 24 0a68 68 0 1 1 68 68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cloud-arrow-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M196.49 151.51a12 12 0 0 1-17 17L168 157v51a12 12 0 0 1-24 0v-51l-11.51 11.52a12 12 0 1 1-17-17l32-32a12 12 0 0 1 17 0ZM160 36a92.08 92.08 0 0 0-81 48.37A68 68 0 1 0 72 220h28a12 12 0 0 0 0-24H72a44 44 0 0 1-1.81-87.95A91.7 91.7 0 0 0 68 128a12 12 0 0 0 24 0a68 68 0 1 1 132.6 21.29a12 12 0 1 0 22.8 7.51A92.06 92.06 0 0 0 160 36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-code{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M71.68 97.22L34.74 128l36.94 30.78a12 12 0 1 1-15.36 18.44l-48-40a12 12 0 0 1 0-18.44l48-40a12 12 0 0 1 15.36 18.44m176 21.56l-48-40a12 12 0 1 0-15.36 18.44L221.26 128l-36.94 30.78a12 12 0 1 0 15.36 18.44l48-40a12 12 0 0 0 0-18.44M164.1 28.72a12 12 0 0 0-15.38 7.18l-64 176a12 12 0 0 0 7.18 15.37a11.8 11.8 0 0 0 4.1.73a12 12 0 0 0 11.28-7.9l64-176a12 12 0 0 0-7.18-15.38'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-coffee{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212 76H32a12 12 0 0 0-12 12v48a100.24 100.24 0 0 0 26.73 68H32a12 12 0 0 0 0 24h176a12 12 0 0 0 0-24h-14.73a100.8 100.8 0 0 0 20-32A44 44 0 0 0 256 128v-8a44.05 44.05 0 0 0-44-44m-16 60a76.27 76.27 0 0 1-42 68H86a76.27 76.27 0 0 1-42-68v-36h152Zm36-8a20 20 0 0 1-12.57 18.55A97 97 0 0 0 220 136v-34.32A20 20 0 0 1 232 120ZM68 48V24a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0m40 0V24a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0m40 0V24a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-columns{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M100 28H64a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h36a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20m-4 176H68V52h28Zm96-176h-36a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h36a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20m-4 176h-28V52h28Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-compass-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m51.58 57.79l-32 64a4.08 4.08 0 0 1-1.79 1.79l-64 32a4 4 0 0 1-5.37-5.37l32-64a4.08 4.08 0 0 1 1.79-1.79l64-32a4 4 0 0 1 5.37 5.37'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-copy{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 28H88a12 12 0 0 0-12 12v36H40a12 12 0 0 0-12 12v128a12 12 0 0 0 12 12h128a12 12 0 0 0 12-12v-36h36a12 12 0 0 0 12-12V40a12 12 0 0 0-12-12m-60 176H52V100h104Zm48-48h-24V88a12 12 0 0 0-12-12h-68V52h104Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cpu{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M156 88h-56a12 12 0 0 0-12 12v56a12 12 0 0 0 12 12h56a12 12 0 0 0 12-12v-56a12 12 0 0 0-12-12m-12 56h-32v-32h32Zm88-4h-12v-24h12a12 12 0 0 0 0-24h-12V56a20 20 0 0 0-20-20h-36V24a12 12 0 0 0-24 0v12h-24V24a12 12 0 0 0-24 0v12H56a20 20 0 0 0-20 20v36H24a12 12 0 0 0 0 24h12v24H24a12 12 0 0 0 0 24h12v36a20 20 0 0 0 20 20h36v12a12 12 0 0 0 24 0v-12h24v12a12 12 0 0 0 24 0v-12h36a20 20 0 0 0 20-20v-36h12a12 12 0 0 0 0-24m-36 56H60V60h136Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cube{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m225.6 62.64l-88-48.17a19.91 19.91 0 0 0-19.2 0l-88 48.17A20 20 0 0 0 20 80.19v95.62a20 20 0 0 0 10.4 17.55l88 48.17a19.89 19.89 0 0 0 19.2 0l88-48.17a20 20 0 0 0 10.4-17.55V80.19a20 20 0 0 0-10.4-17.55M128 36.57L200 76l-72 39.4L56 76ZM44 96.79l72 39.4v76.67l-72-39.42Zm96 116.07v-76.67l72-39.4v76.65Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cube-transparent{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m224.5 95.53l-64-64A12 12 0 0 0 152 28H40a12 12 0 0 0-12 12v112a11.94 11.94 0 0 0 3 7.93c.15.18.31.36.5.56l64 64A12 12 0 0 0 104 228h112a12 12 0 0 0 12-12V104a12 12 0 0 0-3.5-8.47M164 69l23 23h-23ZM92 187l-23-23h23Zm0-47H52V69l40 40ZM69 52h71v40h-31Zm71 64v24h-24v-24Zm-24 88v-40h31l40 40Zm88-17l-40-40v-31h40Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cursor-click{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m224.15 179.17l-46.82-46.82l37.92-13.51c.26-.09.51-.19.76-.3a20 20 0 0 0-1.76-37.27L54.16 29A20 20 0 0 0 29 54.16l52.27 160.08a20 20 0 0 0 37.27 1.76c.11-.25.21-.5.3-.76l13.51-37.92l46.83 46.82a20 20 0 0 0 28.28 0l16.69-16.68a20 20 0 0 0 0-28.29m-30.83 25.17l-48.48-48.48A20 20 0 0 0 130.7 150a20.5 20.5 0 0 0-3.73.35A20 20 0 0 0 112.35 162c-.11.25-.2.5-.3.76L100.4 195.5L54.29 54.29L195.5 100.4l-32.71 11.65c-.25.09-.51.19-.76.3a20 20 0 0 0-6.16 32.48l48.48 48.48ZM84 16v-4a12 12 0 0 1 24 0v4a12 12 0 0 1-24 0m-72 92a12 12 0 0 1 0-24h4a12 12 0 0 1 0 24Zm108.62-83.79l4-12a12 12 0 0 1 22.77 7.58l-4 12a12 12 0 0 1-22.77-7.58m-81.23 104a12 12 0 0 1-7.59 15.17l-12 4a12 12 0 1 1-7.59-22.76l12-4a12 12 0 0 1 15.18 7.59'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cursor-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m220.49 207.8l-12.69 12.69a12 12 0 0 1-17 0l-56.57-56.57L115 214.08l-.13.33a15.84 15.84 0 0 1-14.61 9.59h-.78a15.82 15.82 0 0 1-14.41-11L32.8 52.92A15.95 15.95 0 0 1 52.92 32.8L213 85.07a16 16 0 0 1 1.41 29.8l-.33.13l-50.16 19.27l56.57 56.56a12 12 0 0 1 0 16.97'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-cursor-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M188 208a12 12 0 0 1-12 12h-16a43.86 43.86 0 0 1-32-13.85A43.86 43.86 0 0 1 96 220H80a12 12 0 0 1 0-24h16a20 20 0 0 0 20-20v-36h-12a12 12 0 0 1 0-24h12V80a20 20 0 0 0-20-20H80a12 12 0 0 1 0-24h16a43.86 43.86 0 0 1 32 13.85A43.86 43.86 0 0 1 160 36h16a12 12 0 0 1 0 24h-16a20 20 0 0 0-20 20v36h12a12 12 0 0 1 0 24h-12v36a20 20 0 0 0 20 20h16a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-database{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M196 35.52C177.62 25.51 153.48 20 128 20s-49.62 5.51-68 15.52C39.37 46.79 28 62.58 28 80v96c0 17.42 11.37 33.21 32 44.48c18.35 10 42.49 15.52 68 15.52s49.62-5.51 68-15.52c20.66-11.27 32-27.06 32-44.48V80c0-17.42-11.37-33.21-32-44.48m8 92.48c0 17-31.21 36-76 36s-76-19-76-36v-8.46a89 89 0 0 0 8 4.94c18.35 10 42.49 15.52 68 15.52s49.62-5.51 68-15.52a89 89 0 0 0 8-4.94Zm-76-84c44.79 0 76 19 76 36s-31.21 36-76 36s-76-19-76-36s31.21-36 76-36m0 168c-44.79 0-76-19-76-36v-8.46a89 89 0 0 0 8 4.94c18.35 10 42.49 15.52 68 15.52s49.62-5.51 68-15.52a89 89 0 0 0 8-4.94V176c0 17-31.21 36-76 36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-desktop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 36H48a28 28 0 0 0-28 28v108a28 28 0 0 0 28 28h68v12H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24h-20v-12h68a28 28 0 0 0 28-28V64a28 28 0 0 0-28-28M48 60h160a4 4 0 0 1 4 4v72H44V64a4 4 0 0 1 4-4m160 116H48a4 4 0 0 1-4-4v-12h168v12a4 4 0 0 1-4 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-device-mobile{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176 12H80a28 28 0 0 0-28 28v176a28 28 0 0 0 28 28h96a28 28 0 0 0 28-28V40a28 28 0 0 0-28-28M76 76h104v104H76Zm4-40h96a4 4 0 0 1 4 4v12H76V40a4 4 0 0 1 4-4m96 184H80a4 4 0 0 1-4-4v-12h104v12a4 4 0 0 1-4 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-dot-outline{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 96a32 32 0 1 0 32 32a32 32 0 0 0-32-32m0 40a8 8 0 1 1 8-8a8 8 0 0 1-8 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-dots-three{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M144 128a16 16 0 1 1-16-16a16 16 0 0 1 16 16m-84-16a16 16 0 1 0 16 16a16 16 0 0 0-16-16m136 0a16 16 0 1 0 16 16a16 16 0 0 0-16-16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-download-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 144v64a12 12 0 0 1-12 12H40a12 12 0 0 1-12-12v-64a12 12 0 0 1 24 0v52h152v-52a12 12 0 0 1 24 0m-108.49 8.49a12 12 0 0 0 17 0l40-40a12 12 0 0 0-17-17L140 115V32a12 12 0 0 0-24 0v83L96.49 95.51a12 12 0 0 0-17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-envelope-simple-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8m-8 144H40V74.19l82.59 75.71a8 8 0 0 0 10.82 0L216 74.19z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-eye{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M251 123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63 57.67 164 44 128 44S59.37 57.67 33.51 83.52C14.16 102.87 5.4 122.32 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212s68.63-13.66 94.48-39.51c19.36-19.35 28.12-38.79 28.49-39.61a12.08 12.08 0 0 0 .03-9.75m-46.06 33C183.47 177.27 157.59 188 128 188s-55.47-10.73-76.91-31.88A130.4 130.4 0 0 1 29.52 128a130.5 130.5 0 0 1 21.57-28.11C72.54 78.73 98.41 68 128 68s55.46 10.73 76.91 31.89A130.4 130.4 0 0 1 226.48 128a130.5 130.5 0 0 1-21.57 28.12ZM128 84a44 44 0 1 0 44 44a44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20a20 20 0 0 1-20 20'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-eye-slash{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M56.88 31.93a12 12 0 1 0-17.76 16.14l16 17.65C20.67 88.66 5.72 121.58 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212a131.3 131.3 0 0 0 51-10l20.09 22.1a12 12 0 0 0 17.76-16.14ZM128 188c-29.59 0-55.47-10.73-76.91-31.88A130.7 130.7 0 0 1 29.52 128c5.27-9.31 18.79-29.9 42-44.29l90.09 99.11A109.3 109.3 0 0 1 128 188m123-55.12c-.36.81-9 20-28 39.16a12 12 0 1 1-17-16.9A130.5 130.5 0 0 0 226.48 128a130.4 130.4 0 0 0-21.57-28.12C183.46 78.73 157.59 68 128 68c-3.35 0-6.7.14-10 .42a12 12 0 1 1-2-23.91c3.93-.34 8-.51 12-.51c36 0 68.63 13.67 94.49 39.52c19.35 19.35 28.11 38.8 28.48 39.61a12.08 12.08 0 0 1 .03 9.75'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-eyedropper{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 67.24a39.77 39.77 0 0 0-12.51-28.52c-15.58-14.72-40.78-14.22-56.2 1.21l-16.81 16.91a28 28 0 0 0-35.64 3.29l-9 9a20 20 0 0 0-.73 27.49L48.9 144.84A43.76 43.76 0 0 0 37 185.28l-7.5 17.19a17.66 17.66 0 0 0 3.71 19.65a19.9 19.9 0 0 0 22.15 4.19l16.31-7.13a43.88 43.88 0 0 0 39.45-12.09l48.24-48.26a20 20 0 0 0 27.47-.73l9-9a28.06 28.06 0 0 0 3.26-35.72l17.23-17.33A39.7 39.7 0 0 0 228 67.24M94.15 190.11a20 20 0 0 1-20 5a11.93 11.93 0 0 0-8.32.47l-8.83 3.8l3.69-8.38a12 12 0 0 0 .37-8.64a19.92 19.92 0 0 1 4.81-20.55l48.2-48.22l28.28 28.3Zm105.14-111l-25.37 25.52a12 12 0 0 0 0 16.95l4.88 4.89a4 4 0 0 1 0 5.66l-6.14 6.15l-55-55.05l6.14-6.14a4 4 0 0 1 5.65 0l4.9 4.91a12 12 0 0 0 8.49 3.51a12 12 0 0 0 8.5-3.51l24.94-25.08c6.3-6.3 16.48-6.63 22.71-.74a16 16 0 0 1 .3 23Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-faders-horizontal{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176 80a12 12 0 0 1 12-12h28a12 12 0 0 1 0 24h-28a12 12 0 0 1-12-12M40 92h96v12a12 12 0 0 0 24 0V56a12 12 0 0 0-24 0v12H40a12 12 0 0 0 0 24m176 72h-92a12 12 0 0 0 0 24h92a12 12 0 0 0 0-24M84 140a12 12 0 0 0-12 12v12H40a12 12 0 0 0 0 24h32v12a12 12 0 0 0 24 0v-48a12 12 0 0 0-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-arrow-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm100.49-60.49a12 12 0 0 1 0 17l-24 24a12 12 0 0 1-17 0l-24-24a12 12 0 0 1 17-17L116 155v-31a12 12 0 0 1 24 0v31l3.51-3.52a12 12 0 0 1 16.98.03'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-code{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M180.49 143.51a12 12 0 0 1 0 17l-24 24a12 12 0 0 1-17-17L155 152l-15.52-15.51a12 12 0 1 1 17-17Zm-64-24a12 12 0 0 0-17 0l-24 24a12 12 0 0 0 0 17l24 24a12 12 0 0 0 17-17L101 152l15.52-15.51a12 12 0 0 0-.03-16.98M220 88v128a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V40a20 20 0 0 1 20-20h96a12 12 0 0 1 8.49 3.52l56 56A12 12 0 0 1 220 88m-60-31v23h23Zm36 155V104h-48a12 12 0 0 1-12-12V44H60v168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-magnifying-glass{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M183 80h-23V57ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm96.48-48.49a36 36 0 1 0-17 17l12 12a12 12 0 0 0 17-17ZM112 148a12 12 0 1 1 12 12a12 12 0 0 1-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-pdf{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M200 164v8h12a12 12 0 0 1 0 24h-12v12a12 12 0 0 1-24 0v-56a12 12 0 0 1 12-12h32a12 12 0 0 1 0 24Zm-108 8a32 32 0 0 1-32 32h-4v4a12 12 0 0 1-24 0v-56a12 12 0 0 1 12-12h16a32 32 0 0 1 32 32m-24 0a8 8 0 0 0-8-8h-4v16h4a8 8 0 0 0 8-8m100 8a40 40 0 0 1-40 40h-16a12 12 0 0 1-12-12v-56a12 12 0 0 1 12-12h16a40 40 0 0 1 40 40m-24 0a16 16 0 0 0-16-16h-4v32h4a16 16 0 0 0 16-16M36 108V40a20 20 0 0 1 20-20h96a12 12 0 0 1 8.49 3.52l56 56A12 12 0 0 1 220 88v20a12 12 0 0 1-24 0v-4h-48a12 12 0 0 1-12-12V44H60v64a12 12 0 0 1-24 0m124-51v23h23Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.51l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.49M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm104-60a12 12 0 0 1-12 12h-12v12a12 12 0 0 1-24 0v-12h-12a12 12 0 0 1 0-24h12v-12a12 12 0 0 1 24 0v12h12a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-text{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm112-80a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-ts{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.51l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v68a12 12 0 0 0 24 0V44h76v48a12 12 0 0 0 12 12h48v108h-16a12 12 0 0 0 0 24h20a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.49M160 57l23 23h-23Zm-4.22 139.85a24.75 24.75 0 0 1-10.95 18.06c-6 4-13.27 5.15-19.73 5.15a63.8 63.8 0 0 1-16.23-2.21a12 12 0 0 1 6.46-23.12c6.81 1.86 15 1.61 16.39.06a2.5 2.5 0 0 0 .21-.71c-1.94-1.23-6.83-2.64-9.88-3.52c-5.39-1.56-11-3.18-15.75-6.27c-7.62-4.92-11.21-12.45-10.11-21.2a24.45 24.45 0 0 1 10.69-17.75c6.06-4.09 14.17-5.83 24.1-5.18A68.5 68.5 0 0 1 143 142a12 12 0 0 1-6.1 23.21c-6.36-1.63-13.62-1.51-16.07-.33a80 80 0 0 0 7.91 2.59c5.48 1.58 11.68 3.37 16.8 6.82c7.79 5.26 11.46 13.26 10.24 22.53ZM92 152a12 12 0 0 1-12 12h-8v44a12 12 0 0 1-24 0v-44h-8a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-file-x{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M183 80h-23V57ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm100.49-75.51L145 152l15.52 15.51a12 12 0 0 1-17 17L128 169l-15.51 15.52a12 12 0 0 1-17-17L111 152l-15.49-15.51a12 12 0 1 1 17-17L128 135l15.51-15.52a12 12 0 1 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-files{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m220.49 59.51l-40-40A12 12 0 0 0 172 16H92a20 20 0 0 0-20 20v20H56a20 20 0 0 0-20 20v140a20 20 0 0 0 20 20h108a20 20 0 0 0 20-20v-20h20a20 20 0 0 0 20-20V68a12 12 0 0 0-3.51-8.49M160 212H60V80h67l33 33Zm40-40h-16v-64a12 12 0 0 0-3.51-8.49l-40-40A12 12 0 0 0 132 56H96V40h71l33 33Zm-56-28a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h44a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h44a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-film-strip{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20M44 100h72v56H44Zm96-24V60h24v16Zm-24 0H92V60h24Zm0 104v16H92v-16Zm24 0h24v16h-24Zm0-24v-56h72v56Zm72-80h-24V60h24ZM68 60v16H44V60ZM44 180h24v16H44Zm144 16v-16h24v16Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-flag{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M40.14 46.88A12 12 0 0 0 36 56v168a12 12 0 0 0 24 0v-42.28c22.84-17.12 42.1-9.12 70.68 5c16.23 8 34.74 17.2 54.8 17.2c14.72 0 30.28-4.94 46.38-18.88A12 12 0 0 0 236 176V56a12 12 0 0 0-19.86-9.07c-24.71 21.41-44.53 13.31-74.82-1.68c-28.13-13.98-63.15-31.31-101.18 1.63M212 170.26c-22.84 17.13-42.1 9.11-70.68-5C118.16 153.76 90.33 140 60 153.87V61.69c22.84-17.12 42.1-9.12 70.68 5c16.23 8 34.74 17.2 54.8 17.2A63 63 0 0 0 212 78.08Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-flask{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M225.15 197.71L164 95.81V44h4a12 12 0 0 0 0-24H88a12 12 0 0 0 0 24h4v51.81l-61.15 101.9A20 20 0 0 0 48 228h160a20 20 0 0 0 17.15-30.29M140 44v55.14a12 12 0 0 0 1.71 6.17l35.13 58.54c-10.79.86-25.15-1.31-43.42-10.56c-14-7.08-27.46-11.33-40.27-12.76l21.14-35.22a12 12 0 0 0 1.71-6.17V44ZM55.06 204L79 164.19c13-1.11 27.62 2.42 43.62 10.52c19.61 9.92 36.25 13.31 49.85 13.31a75.4 75.4 0 0 0 17.64-2.02l10.83 18Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 68h-82.61l-26-29.29a20 20 0 0 0-15-6.71H40a20 20 0 0 0-20 20v148.62A19.41 19.41 0 0 0 39.38 220h177.51A19.13 19.13 0 0 0 236 200.89V88a20 20 0 0 0-20-20M44 56h46.61l10.67 12H44Zm168 140H44V92h168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder-dashed{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M100 208a12 12 0 0 1-12 12H39.38A19.41 19.41 0 0 1 20 200.62V192a12 12 0 0 1 24 0v4h44a12 12 0 0 1 12 12m60-12h-32a12 12 0 0 0 0 24h32a12 12 0 0 0 0-24m64-56a12 12 0 0 0-12 12v44h-12a12 12 0 0 0 0 24h16.89A19.13 19.13 0 0 0 236 200.89V152a12 12 0 0 0-12-12m-8-72h-48a12 12 0 0 0 0 24h44v20a12 12 0 0 0 24 0V88a20 20 0 0 0-20-20M32 164a12 12 0 0 0 12-12v-32a12 12 0 0 0-24 0v32a12 12 0 0 0 12 12M20 80V52a20 20 0 0 1 20-20h52.41a20 20 0 0 1 14.94 6.71L137 72a12 12 0 0 1-9 20H32a12 12 0 0 1-12-12m24-12h57.28L90.61 56H44Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder-dashed-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z' opacity='.2'/%3E%3Cpath d='M96 208a8 8 0 0 1-8 8H39.38A15.4 15.4 0 0 1 24 200.62V192a8 8 0 0 1 16 0v8h48a8 8 0 0 1 8 8m64-8h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16m64-56a8 8 0 0 0-8 8v48h-16a8 8 0 0 0 0 16h16.89A15.13 15.13 0 0 0 232 200.89V152a8 8 0 0 0-8-8m-8-72h-48a8 8 0 0 0 0 16h48v24a8 8 0 0 0 16 0V88a16 16 0 0 0-16-16M24 80V56a16 16 0 0 1 16-16h52.69A15.86 15.86 0 0 1 104 44.69l29.66 29.65A8 8 0 0 1 128 88H32a8 8 0 0 1-8-8m16-8h68.69l-16-16H40Zm-8 88a8 8 0 0 0 8-8v-32a8 8 0 0 0-16 0v32a8 8 0 0 0 8 8'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder-open{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M248.23 112.31A20 20 0 0 0 232 104h-12V88a20 20 0 0 0-20-20h-68l-26.66-20a20.12 20.12 0 0 0-12-4H40a20 20 0 0 0-20 20v144a12 12 0 0 0 12 12h179.1a12 12 0 0 0 11.33-8l28.49-81.47l.06-.17a20 20 0 0 0-2.75-18.05M92 68l28.8 21.6A12 12 0 0 0 128 92h68v12H69.77a20 20 0 0 0-18.94 13.58L44 137.15V68Zm110.59 128H48.89l23.72-68h153.76Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 68h-84l-26.67-20a20.12 20.12 0 0 0-12-4H40a20 20 0 0 0-20 20v136a20 20 0 0 0 20 20h176.89A19.13 19.13 0 0 0 236 200.89V88a20 20 0 0 0-20-20m-4 128H44V68h48l28.8 21.6A12 12 0 0 0 128 92h84Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-folder-simple-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 88v112.89A15.13 15.13 0 0 1 216.89 216H40a16 16 0 0 1-16-16V64a16 16 0 0 1 16-16h53.33a16.12 16.12 0 0 1 9.6 3.2L130.67 72H216a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-frame-corners{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M140 88a12 12 0 0 1 12-12h32a12 12 0 0 1 12 12v32a12 12 0 0 1-24 0v-20h-20a12 12 0 0 1-12-12m-68 92h32a12 12 0 0 0 0-24H84v-20a12 12 0 0 0-24 0v32a12 12 0 0 0 12 12M236 56v144a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V56a20 20 0 0 1 20-20h176a20 20 0 0 1 20 20m-24 4H44v136h168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-function{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212 40a12 12 0 0 1-12 12h-29.29A20 20 0 0 0 151 68.42L142.38 116H184a12 12 0 0 1 0 24h-46l-9.44 51.87A44 44 0 0 1 85.29 228H56a12 12 0 0 1 0-24h29.29A20 20 0 0 0 105 187.58l8.62-47.58H72a12 12 0 0 1 0-24h46l9.44-51.87A44 44 0 0 1 170.71 28H200a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-funnel-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M204 136a12 12 0 0 1-12 12H64a12 12 0 0 1 0-24h128a12 12 0 0 1 12 12m28-60H24a12 12 0 0 0 0 24h208a12 12 0 0 0 0-24m-80 96h-48a12 12 0 0 0 0 24h48a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-gauge{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M209.88 69.83A115.2 115.2 0 0 0 128 36h-.41C63.85 36.22 12 88.76 12 153.13V176a20 20 0 0 0 20 20h192a20 20 0 0 0 20-20v-24a115.25 115.25 0 0 0-34.12-82.17M220 172h-92.68l46.44-65a12 12 0 1 0-19.52-14l-56.42 79H36v-18.87c0-1.72 0-3.43.14-5.13H56a12 12 0 0 0 0-24H40.62c10.91-33.39 40-58.52 75.38-63.21V80a12 12 0 0 0 24 0V60.8a92 92 0 0 1 75.66 63.2H200a12 12 0 0 0 0 24h19.9c.06 1.33.1 2.66.1 4Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-gear-six{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m113.86-49.57a12 12 0 0 0-5.86-8.09l-27.79-15.85l-.11-31.31a12 12 0 0 0-4.25-9.12a116 116 0 0 0-38-21.41a12 12 0 0 0-9.68.89L128 37.27L99.83 21.53a12 12 0 0 0-9.7-.9a116.1 116.1 0 0 0-38 21.47a12 12 0 0 0-4.24 9.1l-.14 31.34L20 98.35a12 12 0 0 0-5.85 8.11a110.7 110.7 0 0 0 0 43.11a12 12 0 0 0 5.85 8.09l27.82 15.85l.11 31.31a12 12 0 0 0 4.25 9.12a116 116 0 0 0 38 21.41a12 12 0 0 0 9.68-.89L128 218.73l28.14 15.74a12 12 0 0 0 9.7.9a116.1 116.1 0 0 0 38-21.47a12 12 0 0 0 4.24-9.1l.14-31.34l27.81-15.81a12 12 0 0 0 5.85-8.11a110.7 110.7 0 0 0-.02-43.11m-22.63 33.18l-26.88 15.28a11.94 11.94 0 0 0-4.55 4.59c-.54 1-1.11 1.93-1.7 2.88a12 12 0 0 0-1.83 6.31l-.14 30.33a91.8 91.8 0 0 1-21.07 11.87l-27.15-15.19a12 12 0 0 0-5.86-1.53h-3.73a12.1 12.1 0 0 0-6.14 1.51L93 210.82A92.3 92.3 0 0 1 71.88 199l-.11-30.24a12 12 0 0 0-1.83-6.32c-.58-.94-1.16-1.91-1.7-2.88A11.9 11.9 0 0 0 63.7 155l-26.9-15.37a86.5 86.5 0 0 1 0-23.24l26.88-15.28a12 12 0 0 0 4.55-4.58c.54-1 1.11-1.94 1.7-2.89a12 12 0 0 0 1.83-6.31L71.87 57a91.8 91.8 0 0 1 21.07-11.83l27.15 15.19a11.9 11.9 0 0 0 6.15 1.52h3.44a12.1 12.1 0 0 0 6.14-1.51L163 45.18A92.3 92.3 0 0 1 184.12 57l.11 30.24a12 12 0 0 0 1.83 6.32c.58.94 1.16 1.91 1.7 2.88a11.9 11.9 0 0 0 4.54 4.56l26.9 15.33a86.5 86.5 0 0 1 .03 23.28'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-branch{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236 64a36 36 0 1 0-48 33.94V112a4 4 0 0 1-4 4H96a28 28 0 0 0-4 .29V97.94a36 36 0 1 0-24 0v60.12a36 36 0 1 0 24 0V144a4 4 0 0 1 4-4h88a28 28 0 0 0 28-28V97.94A36.07 36.07 0 0 0 236 64M80 52a12 12 0 1 1-12 12a12 12 0 0 1 12-12m0 152a12 12 0 1 1 12-12a12 12 0 0 1-12 12M200 76a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-commit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M244 116h-57.21a60 60 0 0 0-117.58 0H12a12 12 0 0 0 0 24h57.21a60 60 0 0 0 117.58 0H244a12 12 0 0 0 0-24m-116 48a36 36 0 1 1 36-36a36 36 0 0 1-36 36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-diff{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M112 148a12 12 0 0 0-12 12v19l-30.83-30.8a4 4 0 0 1-1.17-2.83V97.94a36 36 0 1 0-24 0v47.43a27.8 27.8 0 0 0 8.2 19.8L83 196H64a12 12 0 0 0 0 24h48a12 12 0 0 0 12-12v-48a12 12 0 0 0-12-12M56 52a12 12 0 1 1-12 12a12 12 0 0 1 12-12m156 106.06v-47.43a27.8 27.8 0 0 0-8.2-19.8L173 60h19a12 12 0 0 0 0-24h-48a12 12 0 0 0-12 12v48a12 12 0 0 0 24 0V77l30.83 30.83a4 4 0 0 1 1.17 2.83v47.43a36 36 0 1 0 24 0ZM200 204a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-fork{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 64a36 36 0 1 0-48 33.94V112a4 4 0 0 1-4 4H80a4 4 0 0 1-4-4V97.94a36 36 0 1 0-24 0V112a28 28 0 0 0 28 28h36v18.06a36 36 0 1 0 24 0V140h36a28 28 0 0 0 28-28V97.94A36.07 36.07 0 0 0 228 64M64 52a12 12 0 1 1-12 12a12 12 0 0 1 12-12m64 152a12 12 0 1 1 12-12a12 12 0 0 1-12 12m64-128a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-merge{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 108a36.05 36.05 0 0 0-33.38 22.54l-39-5.57a4 4 0 0 1-2.47-1.35l-32.6-38.09A36 36 0 1 0 68 89.94v76.12a36 36 0 1 0 24 0v-53.62l23 26.8a28 28 0 0 0 17.3 9.49l41.34 5.91A36 36 0 1 0 208 108M80 44a12 12 0 1 1-12 12a12 12 0 0 1 12-12m0 168a12 12 0 1 1 12-12a12 12 0 0 1-12 12m128-56a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-git-pull-request{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M108 64a36 36 0 1 0-48 33.94v60.12a36 36 0 1 0 24 0V97.94A36.07 36.07 0 0 0 108 64M72 52a12 12 0 1 1-12 12a12 12 0 0 1 12-12m0 152a12 12 0 1 1 12-12a12 12 0 0 1-12 12m140-45.94v-47.43a27.8 27.8 0 0 0-8.2-19.8L173 60h19a12 12 0 0 0 0-24h-48a12 12 0 0 0-12 12v48a12 12 0 0 0 24 0V77l30.83 30.83a4 4 0 0 1 1.17 2.83v47.43a36 36 0 1 0 24 0ZM200 204a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-github-logo{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212.62 75.17A63.7 63.7 0 0 0 206.39 26A12 12 0 0 0 196 20a63.71 63.71 0 0 0-50 24h-20a63.71 63.71 0 0 0-50-24a12 12 0 0 0-10.39 6a63.7 63.7 0 0 0-6.23 49.17A61.5 61.5 0 0 0 52 104v8a60.1 60.1 0 0 0 45.76 58.28A43.66 43.66 0 0 0 92 192v4H76a20 20 0 0 1-20-20a44.05 44.05 0 0 0-44-44a12 12 0 0 0 0 24a20 20 0 0 1 20 20a44.05 44.05 0 0 0 44 44h16v12a12 12 0 0 0 24 0v-40a20 20 0 0 1 40 0v40a12 12 0 0 0 24 0v-40a43.66 43.66 0 0 0-5.76-21.72A60.1 60.1 0 0 0 220 112v-8a61.5 61.5 0 0 0-7.38-28.83M196 112a36 36 0 0 1-36 36h-48a36 36 0 0 1-36-36v-8a37.87 37.87 0 0 1 6.13-20.12a11.65 11.65 0 0 0 1.58-11.49a39.9 39.9 0 0 1-.4-27.72a39.87 39.87 0 0 1 26.41 17.8a12 12 0 0 0 10.1 5.53h32.35a12 12 0 0 0 10.11-5.53a39.84 39.84 0 0 1 26.41-17.8a39.9 39.9 0 0 1-.4 27.72a12 12 0 0 0 1.61 11.53A37.85 37.85 0 0 1 196 104Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-globe{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 187a113.4 113.4 0 0 1-20.39-35h40.82a117 117 0 0 1-10 20.77A108.6 108.6 0 0 1 128 207m-26.49-59a135.4 135.4 0 0 1 0-40h53a135.4 135.4 0 0 1 0 40ZM44 128a83.5 83.5 0 0 1 2.43-20h30.82a160.6 160.6 0 0 0 0 40H46.43A83.5 83.5 0 0 1 44 128m84-79a113.4 113.4 0 0 1 20.39 35h-40.8a117 117 0 0 1 10-20.77A108.6 108.6 0 0 1 128 49m50.73 59h30.82a83.5 83.5 0 0 1 0 40h-30.8a160.6 160.6 0 0 0 0-40Zm20.77-24h-25.79a140.8 140.8 0 0 0-15.5-34.36A84.5 84.5 0 0 1 199.52 84ZM97.79 49.64A140.8 140.8 0 0 0 82.29 84H56.48a84.5 84.5 0 0 1 41.31-34.36M56.48 172h25.81a140.8 140.8 0 0 0 15.5 34.36A84.5 84.5 0 0 1 56.48 172m101.73 34.36a140.8 140.8 0 0 0 15.5-34.36h25.81a84.5 84.5 0 0 1-41.31 34.36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-globe-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m83.13 96h-31.57a144.3 144.3 0 0 0-21.35-66.36A84.22 84.22 0 0 1 211.13 116M128 207c-9.36-10.81-24.46-33.13-27.45-67h54.94a119.74 119.74 0 0 1-17.11 52.77A108.6 108.6 0 0 1 128 207m-27.45-91a119.74 119.74 0 0 1 17.11-52.77A108.6 108.6 0 0 1 128 49c9.36 10.81 24.46 33.13 27.45 67Zm-2.76-66.36A144.3 144.3 0 0 0 76.44 116H44.87a84.22 84.22 0 0 1 52.92-66.36M44.87 140h31.57a144.3 144.3 0 0 0 21.35 66.36A84.22 84.22 0 0 1 44.87 140m113.34 66.36A144.3 144.3 0 0 0 179.56 140h31.57a84.22 84.22 0 0 1-52.92 66.36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-graduation-cap{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m249.8 85.49l-116-64a12 12 0 0 0-11.6 0l-116 64a12 12 0 0 0 0 21l21.8 12v47.76a19.9 19.9 0 0 0 5.09 13.32C46.63 194.7 77 220 128 220a136.9 136.9 0 0 0 40-5.75V240a12 12 0 0 0 24 0v-35.88a119.5 119.5 0 0 0 30.91-24.51a19.9 19.9 0 0 0 5.09-13.32v-47.76l21.8-12a12 12 0 0 0 0-21ZM128 45.71L219.16 96L186 114.3a2 2 0 0 1-.18-.12l-52-28.69a12 12 0 0 0-11.6 21l39 21.49L128 146.3L36.84 96ZM128 196c-40.42 0-64.65-19.07-76-31.27v-33l70.2 38.74a12 12 0 0 0 11.6 0l34.2-18.83v37.23a110.5 110.5 0 0 1-40 7.13m76-31.27a93 93 0 0 1-12 10.81v-37.15l12-6.62Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-hand{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M188 44a32 32 0 0 0-8 1v-1a32 32 0 0 0-60.79-14A32 32 0 0 0 76 60v50.83a32 32 0 0 0-52 36.7C55.82 214.6 75.35 244 128 244a92.1 92.1 0 0 0 92-92V76a32 32 0 0 0-32-32m8 108a68.08 68.08 0 0 1-68 68c-35.83 0-49.71-14-82.48-83.14c-.14-.29-.29-.58-.45-.86a8 8 0 0 1 13.85-8l.21.35l18.68 30A12 12 0 0 0 100 152V60a8 8 0 0 1 16 0v60a12 12 0 0 0 24 0V44a8 8 0 0 1 16 0v76a12 12 0 0 0 24 0V76a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-hand-palm{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M188 84a32 32 0 0 0-8 1V60a32 32 0 0 0-43.21-30A32 32 0 0 0 76 44v1a32 32 0 0 0-40 31v76a92 92 0 0 0 184 0v-36a32 32 0 0 0-32-32m8 68a68 68 0 0 1-136 0V76a8 8 0 0 1 16 0v40a12 12 0 0 0 24 0V44a8 8 0 0 1 16 0v64a12 12 0 0 0 24 0V60a8 8 0 0 1 16 0v65.4a52.09 52.09 0 0 0-40 50.6a12 12 0 0 0 24 0a28 28 0 0 1 28-28a12 12 0 0 0 12-12v-20a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-hard-drives{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 36H48a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 24v56H52V60ZM52 196v-56h152v56ZM160 88a16 16 0 1 1 16 16a16 16 0 0 1-16-16m32 80a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-hash{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M224 84h-43.8l7.61-41.85a12 12 0 0 0-23.62-4.3L155.8 84h-39.6l7.61-41.85a12 12 0 1 0-23.62-4.3L91.8 84H48a12 12 0 0 0 0 24h39.44l-7.27 40H32a12 12 0 0 0 0 24h43.8l-7.61 41.85a12 12 0 0 0 9.66 14A11.4 11.4 0 0 0 80 228a12 12 0 0 0 11.8-9.86l8.4-46.14h39.6l-7.61 41.85a12 12 0 0 0 9.66 14a11.4 11.4 0 0 0 2.16.2a12 12 0 0 0 11.8-9.86L164.2 172H208a12 12 0 0 0 0-24h-39.44l7.27-40H224a12 12 0 0 0 0-24m-79.83 64h-39.61l7.27-40h39.61Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-hourglass-medium{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M204 75.64V40a20 20 0 0 0-20-20H72a20 20 0 0 0-20 20v36a20.1 20.1 0 0 0 8 16l48 36l-48 36a20.1 20.1 0 0 0-8 16v36a20 20 0 0 0 20 20h112a20 20 0 0 0 20-20v-35.64a20.13 20.13 0 0 0-7.94-16L147.9 128l48.16-36.4A20.13 20.13 0 0 0 204 75.64M180 44v28H76V44Zm-52 69l-22.67-17h45.1Zm52 99H76v-30l40-30v16a12 12 0 0 0 24 0v-15.89l40 30.24Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-house{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m222.14 105.85l-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76l76 76Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-house-line{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M240 204h-12v-60a12 12 0 0 0 12.49-19.78l-98.35-98.37a20 20 0 0 0-28.28 0L15.51 124.2A12 12 0 0 0 28 144v60H16a12 12 0 0 0 0 24h224a12 12 0 0 0 0-24M52 121.65l76-76l76 76V204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52ZM140 204h-24v-40h24Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-image{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M144 96a16 16 0 1 1 16 16a16 16 0 0 1-16-16m92-40v144a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V56a20 20 0 0 1 20-20h176a20 20 0 0 1 20 20M44 60v79.72l33.86-33.86a20 20 0 0 1 28.28 0L147.31 147l17.18-17.17a20 20 0 0 1 28.28 0L212 149.09V60Zm0 136h118.34L92 125.66l-48 48Zm168 0v-13l-33.37-33.37L164.28 164l32 32Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-images{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M160 88a16 16 0 1 1 16 16a16 16 0 0 1-16-16m76-32v104a20 20 0 0 1-20 20h-12v20a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V88a20 20 0 0 1 20-20h20V56a20 20 0 0 1 20-20h136a20 20 0 0 1 20 20m-56 124H80a20 20 0 0 1-20-20V92H44v104h136Zm-21.66-24L124 121.66L89.66 156ZM212 60H84v67.72l25.86-25.86a20 20 0 0 1 28.28 0L192.28 156H212Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-info{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M108 84a16 16 0 1 1 16 16a16 16 0 0 1-16-16m128 44A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84m-72 36.68V132a20 20 0 0 0-20-20a12 12 0 0 0-4 23.32V168a20 20 0 0 0 20 20a12 12 0 0 0 4-23.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-kanban{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 44H40a12 12 0 0 0-12 12v152a20 20 0 0 0 20 20h40a20 20 0 0 0 20-20v-44h40v12a20 20 0 0 0 20 20h40a20 20 0 0 0 20-20V56a12 12 0 0 0-12-12m-12 64h-32V68h32ZM84 68v40H52V68Zm0 136H52v-72h32Zm24-64V68h40v72Zm64 32v-40h32v40Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-key{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M196 76a16 16 0 1 1-16-16a16 16 0 0 1 16 16m48 22.74A84.3 84.3 0 0 1 160.11 180H160a83.5 83.5 0 0 1-23.65-3.38l-7.86 7.87A12 12 0 0 1 120 188h-12v12a12 12 0 0 1-12 12H84v12a12 12 0 0 1-12 12H40a20 20 0 0 1-20-20v-28.69a19.86 19.86 0 0 1 5.86-14.14l53.52-53.52A84 84 0 1 1 244 98.74m-41.57-45.17A59.48 59.48 0 0 0 158 36c-32 1-58 27.89-58 59.89a59.7 59.7 0 0 0 4.2 22.19a12 12 0 0 1-2.55 13.21L44 189v23h16v-12a12 12 0 0 1 12-12h12v-12a12 12 0 0 1 12-12h19l9.65-9.65a12 12 0 0 1 13.22-2.55A59.6 59.6 0 0 0 160 156h.08c32 0 58.87-26.07 59.89-58a59.55 59.55 0 0 0-17.54-44.43'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-keyboard{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M224 44H32a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h192a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20m-4 144H36V68h184ZM52 128a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H64a12 12 0 0 1-12-12m0-36a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H64a12 12 0 0 1-12-12m0 72a12 12 0 0 1 12-12h8a12 12 0 0 1 0 24h-8a12 12 0 0 1-12-12m108 0a12 12 0 0 1-12 12h-40a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12m44 0a12 12 0 0 1-12 12h-8a12 12 0 0 1 0-24h8a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-laptop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 156h-4V72a28 28 0 0 0-28-28H56a28 28 0 0 0-28 28v84h-4a12 12 0 0 0-12 12v24a28 28 0 0 0 28 28h176a28 28 0 0 0 28-28v-24a12 12 0 0 0-12-12M52 72a4 4 0 0 1 4-4h144a4 4 0 0 1 4 4v84H52Zm168 120a4 4 0 0 1-4 4H40a4 4 0 0 1-4-4v-12h184Zm-64-96a12 12 0 0 1-12 12h-32a12 12 0 0 1 0-24h32a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-lightbulb{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M180 232a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h80a12 12 0 0 1 12 12m40-128a91.51 91.51 0 0 1-35.17 72.35A12.26 12.26 0 0 0 180 186v2a20 20 0 0 1-20 20H96a20 20 0 0 1-20-20v-2a12 12 0 0 0-4.7-9.51A91.57 91.57 0 0 1 36 104.52C35.73 54.69 76 13.2 125.79 12A92 92 0 0 1 220 104m-24 0a68 68 0 0 0-69.65-68C89.56 36.88 59.8 67.55 60 104.38a67.71 67.71 0 0 0 26.1 53.19A35.87 35.87 0 0 1 100 184h56.1a36.13 36.13 0 0 1 13.9-26.51A67.68 67.68 0 0 0 196 104m-20.07-5.32a48.5 48.5 0 0 0-31.91-40a12 12 0 0 0-8 22.62a24.31 24.31 0 0 1 16.09 20a12 12 0 0 0 23.86-2.64Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-lightning{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M219.71 117.38a12 12 0 0 0-7.25-8.52l-51.18-20.47l10.59-70.61a12 12 0 0 0-20.64-10l-112 120a12 12 0 0 0 4.31 19.33l51.18 20.47l-10.59 70.64a12 12 0 0 0 20.64 10l112-120a12 12 0 0 0 2.94-10.84M113.6 203.55l6.27-41.77a12 12 0 0 0-7.41-12.92l-43.72-17.49l73.66-78.92l-6.27 41.77a12 12 0 0 0 7.41 12.92l43.72 17.49Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-lightning-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m213.85 125.46l-112 120a8 8 0 0 1-13.69-7l14.66-73.33l-57.63-21.64a8 8 0 0 1-3-13l112-120a8 8 0 0 1 13.69 7l-14.7 73.41l57.63 21.61a8 8 0 0 1 3 12.95Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-link{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M117.18 188.74a12 12 0 0 1 0 17l-5.12 5.12A58.26 58.26 0 0 1 70.6 228a58.62 58.62 0 0 1-41.46-100.08l34.75-34.75a58.64 58.64 0 0 1 98.56 28.11a12 12 0 1 1-23.37 5.44a34.65 34.65 0 0 0-58.22-16.58l-34.75 34.75A34.62 34.62 0 0 0 70.57 204a34.4 34.4 0 0 0 24.49-10.14l5.11-5.12a12 12 0 0 1 17.01 0M226.83 45.17a58.65 58.65 0 0 0-82.93 0l-5.11 5.11a12 12 0 0 0 17 17l5.12-5.12a34.63 34.63 0 1 1 49 49l-34.81 34.7A34.4 34.4 0 0 1 150.61 156a34.63 34.63 0 0 1-33.69-26.72a12 12 0 0 0-23.38 5.44A58.64 58.64 0 0 0 150.56 180h.05a58.28 58.28 0 0 0 41.47-17.17l34.75-34.75a58.62 58.62 0 0 0 0-82.91'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-list-bullets{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M76 64a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H88a12 12 0 0 1-12-12m140 52H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24m0 64H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24M44 112a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0-64a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0 128a16 16 0 1 0 16 16a16 16 0 0 0-16-16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-list-checks{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12h-88a12 12 0 0 1 0-24h88a12 12 0 0 1 12 12M128 76h88a12 12 0 0 0 0-24h-88a12 12 0 0 0 0 24m88 104h-88a12 12 0 0 0 0 24h88a12 12 0 0 0 0-24M79.51 39.51L56 63l-7.51-7.52a12 12 0 0 0-17 17l16 16a12 12 0 0 0 17 0l32-32a12 12 0 0 0-17-17Zm0 64L56 127l-7.51-7.52a12 12 0 1 0-17 17l16 16a12 12 0 0 0 17 0l32-32a12 12 0 0 0-17-17Zm0 64L56 191l-7.51-7.52a12 12 0 1 0-17 17l16 16a12 12 0 0 0 17 0l32-32a12 12 0 0 0-17-17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-list-dashes{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M84 64a12 12 0 0 1 12-12h120a12 12 0 0 1 0 24H96a12 12 0 0 1-12-12m132 52H96a12 12 0 0 0 0 24h120a12 12 0 0 0 0-24m0 64H96a12 12 0 0 0 0 24h120a12 12 0 0 0 0-24M56 52H40a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24m0 64H40a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24m0 64H40a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-list-magnifying-glass{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M28 64a12 12 0 0 1 12-12h176a12 12 0 0 1 0 24H40a12 12 0 0 1-12-12m12 76h64a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m80 40H40a12 12 0 0 0 0 24h80a12 12 0 0 0 0-24m120.49 20.49a12 12 0 0 1-17 0l-18.08-18.08a44 44 0 1 1 17-17l18.08 18.07a12 12 0 0 1 0 17.01M184 164a20 20 0 1 0-20-20a20 20 0 0 0 20 20'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-list-numbers{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12H116a12 12 0 0 1 0-24h100a12 12 0 0 1 12 12M116 76h100a12 12 0 0 0 0-24H116a12 12 0 0 0 0 24m100 104H116a12 12 0 0 0 0 24h100a12 12 0 0 0 0-24M44 59.31V104a12 12 0 0 0 24 0V40a12 12 0 0 0-17.36-10.73l-16 8a12 12 0 0 0 9.36 22Zm39.73 96.86a27.7 27.7 0 0 0-11.2-18.63A28.89 28.89 0 0 0 32.9 143a27.7 27.7 0 0 0-4.17 7.54a12 12 0 0 0 22.55 8.21a4 4 0 0 1 .58-1a4.78 4.78 0 0 1 6.5-.82a3.82 3.82 0 0 1 1.61 2.6a3.63 3.63 0 0 1-.77 2.77l-.13.17l-28.68 38.35A12 12 0 0 0 40 220h32a12 12 0 0 0 0-24h-8l14.28-19.11a27.48 27.48 0 0 0 5.45-20.72'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-lock-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 76h-28V56a52 52 0 0 0-104 0v20H48a20 20 0 0 0-20 20v112a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V96a20 20 0 0 0-20-20M100 56a28 28 0 0 1 56 0v20h-56Zm104 148H52V100h152Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-lock-simple-open{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 76H100V56a28 28 0 0 1 28-28c13.51 0 25.65 9.62 28.24 22.39a12 12 0 1 0 23.52-4.78C174.87 21.5 153.1 4 128 4a52.06 52.06 0 0 0-52 52v20H48a20 20 0 0 0-20 20v112a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V96a20 20 0 0 0-20-20m-4 128H52V100h152Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-magnifying-glass{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-magnifying-glass-minus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M156 112a12 12 0 0 1-12 12H80a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m76.49 120.49a12 12 0 0 1-17 0L168 185a92.12 92.12 0 1 1 17-17l47.54 47.53a12 12 0 0 1-.05 16.96M112 180a68 68 0 1 0-68-68a68.08 68.08 0 0 0 68 68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-magnifying-glass-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M156 112a12 12 0 0 1-12 12h-20v20a12 12 0 0 1-24 0v-20H80a12 12 0 0 1 0-24h20V80a12 12 0 0 1 24 0v20h20a12 12 0 0 1 12 12m76.49 120.49a12 12 0 0 1-17 0L168 185a92.12 92.12 0 1 1 17-17l47.54 47.53a12 12 0 0 1-.05 16.96M112 180a68 68 0 1 0-68-68a68.08 68.08 0 0 0 68 68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-map-trifold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M231.38 46.54a12 12 0 0 0-10.29-2.18L161.4 59.28l-60-30a12 12 0 0 0-8.28-.91l-64 16A12 12 0 0 0 20 56v144a12 12 0 0 0 14.91 11.64l59.69-14.92l60 30a12 12 0 0 0 8.28.91l64-16A12 12 0 0 0 236 200V56a12 12 0 0 0-4.62-9.46M108 59.42l40 20v117.16l-40-20Zm-64 6l40-10v119.21l-40 10Zm168 125.21l-40 10V81.37l40-10Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-minus-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M180 128a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h80a12 12 0 0 1 12 12m56 0A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236.37 139.4a12 12 0 0 0-12-3A84.07 84.07 0 0 1 119.6 31.59a12 12 0 0 0-15-15a108.86 108.86 0 0 0-54.91 38.48A108 108 0 0 0 136 228a107.1 107.1 0 0 0 64.93-21.69a108.86 108.86 0 0 0 38.44-54.94a12 12 0 0 0-3-11.97m-49.88 47.74A84 84 0 0 1 68.86 69.51a84.9 84.9 0 0 1 23.41-21.22Q92 52.13 92 56a108.12 108.12 0 0 0 108 108q3.87 0 7.71-.27a84.8 84.8 0 0 1-21.22 23.41'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-music-notes-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212.92 17.71a7.89 7.89 0 0 0-6.86-1.46l-128 32A8 8 0 0 0 72 56v110.1A36 36 0 1 0 88 196v-93.75l112-28v59.85a36 36 0 1 0 16 29.9V24a8 8 0 0 0-3.08-6.29'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-note-blank{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 28H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h108.69a19.86 19.86 0 0 0 14.14-5.86l51.31-51.31a19.86 19.86 0 0 0 5.86-14.14V48a20 20 0 0 0-20-20M52 52h152v92h-48a12 12 0 0 0-12 12v48H52Zm116 139v-23h23Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-note-pencil{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m232.49 55.51l-32-32a12 12 0 0 0-17 0l-96 96A12 12 0 0 0 84 128v32a12 12 0 0 0 12 12h32a12 12 0 0 0 8.49-3.51l96-96a12 12 0 0 0 0-16.98M192 49l15 15l-11 11l-15-15Zm-69 99h-15v-15l56-56l15 15Zm105-7.43V208a20 20 0 0 1-20 20H48a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h67.43a12 12 0 0 1 0 24H52v152h152v-63.43a12 12 0 0 1 24 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-package{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m225.6 62.64l-88-48.17a19.91 19.91 0 0 0-19.2 0l-88 48.17A20 20 0 0 0 20 80.19v95.62a20 20 0 0 0 10.4 17.55l88 48.17a19.89 19.89 0 0 0 19.2 0l88-48.17a20 20 0 0 0 10.4-17.55V80.19a20 20 0 0 0-10.4-17.55M128 36.57L200 76l-21.43 11.73l-72-39.42Zm0 78.83L56 76l25.56-14l72 39.41ZM44 96.79l72 39.4v76.67l-72-39.42Zm96 116.07v-76.67l24-13.13V152a12 12 0 0 0 24 0v-42.08l24-13.13v76.65Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-paint-brush{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236 32a12 12 0 0 0-12-12c-44.78 0-90 48.54-115.9 82a64 64 0 0 0-80 62c0 12-3.1 22.71-9.23 31.76a43 43 0 0 1-9.47 10.29a11.88 11.88 0 0 0-4.91 13.38A12.07 12.07 0 0 0 16.11 228h76A64 64 0 0 0 154 148c33.49-25.95 82-71.2 82-116m-26.38 14.39c-4 12.92-13.15 27.49-26.92 42.91c-3 3.39-6.16 6.7-9.35 9.89a104.3 104.3 0 0 0-16.5-16.51c3.19-3.19 6.49-6.32 9.88-9.35c15.42-13.78 29.98-22.9 42.89-26.94M92.07 204H42a80.17 80.17 0 0 0 10.14-40a40 40 0 1 1 40 40Zm38.18-91.32c3.12-3.93 6.55-8.09 10.23-12.35a80.5 80.5 0 0 1 15.23 15.24a388 388 0 0 1-12.35 10.23a64.4 64.4 0 0 0-13.11-13.12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-palette{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M203.57 51A107.9 107.9 0 0 0 20 128c0 44.72 27.6 82.25 72 97.94A36 36 0 0 0 140 192a12 12 0 0 1 12-12h46.21a35.79 35.79 0 0 0 35.1-28a108.6 108.6 0 0 0 2.69-24.91A107.23 107.23 0 0 0 203.57 51m6.34 95.67a11.91 11.91 0 0 1-11.7 9.3H152a36 36 0 0 0-36 36a12 12 0 0 1-16 11.3c-16.65-5.88-30.65-15.76-40.48-28.56A76 76 0 0 1 44 128a84 84 0 0 1 83.13-84h.87a84.35 84.35 0 0 1 84 83.29a84.7 84.7 0 0 1-2.09 19.42ZM144 76a16 16 0 1 1-16-16a16 16 0 0 1 16 16m-44 24a16 16 0 1 1-16-16a16 16 0 0 1 16 16m0 56a16 16 0 1 1-16-16a16 16 0 0 1 16 16m88-56a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-paperclip{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m212.48 136.49l-82.06 82a60 60 0 0 1-84.85-84.88l98.16-97.89a40 40 0 0 1 56.56 56.59l-.17.16l-95.8 92.22a12 12 0 1 1-16.64-17.3l95.71-92.12a16 16 0 0 0-22.7-22.56l-98.16 97.86a36 36 0 0 0 50.93 50.91l82.06-82a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-path{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M200 164a36.07 36.07 0 0 0-33.94 24H72a28 28 0 0 1 0-56h96a44 44 0 0 0 0-88H72a12 12 0 0 0 0 24h96a20 20 0 0 1 0 40H72a52 52 0 0 0 0 104h94.06A36 36 0 1 0 200 164m0 48a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-pause-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 48v160a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h40a16 16 0 0 1 16 16M96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-pencil-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m230.14 70.54l-44.68-44.69a20 20 0 0 0-28.29 0L33.86 149.17A19.85 19.85 0 0 0 28 163.31V208a20 20 0 0 0 20 20h44.69a19.86 19.86 0 0 0 14.14-5.86L230.14 98.82a20 20 0 0 0 0-28.28M91 204H52v-39l84-84l39 39Zm101-101l-39-39l18.34-18.34l39 39Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-pencil-simple-line{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m230.15 70.54l-44.69-44.68a20 20 0 0 0-28.28 0L33.86 149.17A19.86 19.86 0 0 0 28 163.31V208a20 20 0 0 0 20 20h168a12 12 0 0 0 0-24h-91L230.15 98.83a20 20 0 0 0 0-28.29M91 204H52v-39l84-84l39 39Zm101-101l-39-39l18.34-18.34l39 39Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-play-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M240 128a15.74 15.74 0 0 1-7.6 13.51L88.32 229.65a16 16 0 0 1-16.2.3A15.86 15.86 0 0 1 64 216.13V39.87a15.86 15.86 0 0 1 8.12-13.82a16 16 0 0 1 16.2.3l144.08 88.14A15.74 15.74 0 0 1 240 128'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-plugs{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m137 168l11.52-11.51a12 12 0 0 0-17-17L120 151l-15-15l11.52-11.51a12 12 0 0 0-17-17L88 119l-15.51-15.49a12 12 0 0 0-17 17L59 124l-20.46 20.49a36 36 0 0 0 0 50.91l2.55 2.54l-25.58 25.57a12 12 0 0 0 17 17l25.57-25.58l2.54 2.55a36.06 36.06 0 0 0 50.91 0L132 197l3.51 3.52a12 12 0 0 0 17-17Zm-42.46 32.49a12 12 0 0 1-17 0l-22.03-22.06a12 12 0 0 1 0-17L76 141l39 39Zm146-185a12 12 0 0 0-17 0l-25.6 25.6l-2.54-2.55a36.05 36.05 0 0 0-50.91 0L124 59l-3.51-3.52a12 12 0 0 0-17 17l80 80a12 12 0 0 0 17-17L197 132l20.49-20.49a36 36 0 0 0 0-50.91l-2.55-2.54l25.58-25.57a12 12 0 0 0-.03-16.98Zm-40 79L180 115l-39-39l20.49-20.49a12 12 0 0 1 17 0l22.06 22.06a12 12 0 0 1 0 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-plugs-connected{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M240.49 15.51a12 12 0 0 0-17 0l-49.55 49.58l-2.54-2.55a36.05 36.05 0 0 0-50.91 0L100 83l-3.51-3.52a12 12 0 0 0-17 17L83 100l-20.46 20.49a36 36 0 0 0 0 50.91l2.55 2.54l-49.58 49.57a12 12 0 0 0 17 17l49.57-49.58l2.54 2.55a36.06 36.06 0 0 0 50.91 0L156 173l3.51 3.52a12 12 0 0 0 17-17L173 156l20.49-20.49a36 36 0 0 0 0-50.91l-2.55-2.54l49.58-49.57a12 12 0 0 0-.03-16.98m-121.95 161a12 12 0 0 1-17 0l-22.03-22.08a12 12 0 0 1 0-17L100 117l39 39Zm58-57.95L156 139l-39-39l20.49-20.49a12 12 0 0 1 17 0l22.06 22.06a12 12 0 0 1 0 17ZM85.27 33.37a12 12 0 0 1 21.46-10.74l8 16a12 12 0 1 1-21.46 10.74Zm-68 57.26a12 12 0 0 1 16.1-5.36l16 8a12 12 0 1 1-10.74 21.46l-16-8a12 12 0 0 1-5.36-16.1m221.46 74.74a12 12 0 0 1-16.1 5.36l-16-8a12 12 0 0 1 10.74-21.46l16 8a12 12 0 0 1 5.36 16.1m-68 57.26a12 12 0 1 1-21.46 10.74l-8-16a12 12 0 0 1 21.46-10.74Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-plugs-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='m76 124l56 56l-29 29a24 24 0 0 1-33.94 0L47 186.91A24 24 0 0 1 47 153Zm133-54.91L186.91 47A24 24 0 0 0 153 47l-29 29l56 56l29-29a24 24 0 0 0 0-33.91' opacity='.2'/%3E%3Cpath d='M149.66 138.34a8 8 0 0 0-11.32 0L120 156.69L99.31 136l18.35-18.34a8 8 0 0 0-11.32-11.32L88 124.69l-18.34-18.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-23.32 23.31a32 32 0 0 0 0 45.26l5.38 5.37l-28.41 28.4a8 8 0 0 0 11.32 11.32l28.4-28.41l5.37 5.38a32 32 0 0 0 45.26 0L132 191.31l6.34 6.35a8 8 0 0 0 11.32-11.32L131.31 168l18.35-18.34a8 8 0 0 0 0-11.32m-52.29 65a16 16 0 0 1-22.62 0l-22.06-22.09a16 16 0 0 1 0-22.62L76 135.31L120.69 180Zm140.29-185a8 8 0 0 0-11.32 0l-28.4 28.41l-5.37-5.38a32.05 32.05 0 0 0-45.26 0L124 64.69l-6.34-6.35a8 8 0 0 0-11.32 11.32l80 80a8 8 0 0 0 11.32-11.32l-6.35-6.34l23.32-23.31a32 32 0 0 0 0-45.26l-5.38-5.37l28.41-28.4a8 8 0 0 0 0-11.32m-34.35 79L180 120.69L135.31 76l23.32-23.31a16 16 0 0 1 22.62 0l22.06 22a16 16 0 0 1 0 22.68Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-plus-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m52-84a12 12 0 0 1-12 12h-28v28a12 12 0 0 1-24 0v-28H88a12 12 0 0 1 0-24h28V88a12 12 0 0 1 24 0v28h28a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-prohibit,.i-ph-prohibit-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m84 108a83.6 83.6 0 0 1-16.75 50.28L77.72 60.75A84 84 0 0 1 212 128m-168 0a83.6 83.6 0 0 1 16.75-50.28l117.53 117.53A84 84 0 0 1 44 128'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-push-pin{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m238.15 78.54l-60.69-60.68a20 20 0 0 0-28.3 0L97.2 70c-12.43-3.33-36.68-5.72-61.74 14.5a20 20 0 0 0-1.6 29.73l45.46 45.47l-39.8 39.8a12 12 0 0 0 17 17l39.8-39.81l45.47 45.46a20 20 0 0 0 14.12 5.85c.46 0 .93 0 1.4-.05a20 20 0 0 0 14.56-7.95c4.69-6.23 11-16.13 14.44-28s3.45-22.88.16-33.4l51.7-51.87a20 20 0 0 0-.02-28.19m-74.26 68.79a12 12 0 0 0-2.23 13.84c3.43 6.86 6.9 21-6.28 40.65L54.08 100.53c21.09-14.59 39.53-6.64 41-6a11.67 11.67 0 0 0 13.81-2.29l54.43-54.61l55 55Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-push-pin-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m235.33 104l-53.47 53.65c4.56 12.67 6.45 33.89-13.19 60A15.93 15.93 0 0 1 157 224h-1.13a16 16 0 0 1-11.32-4.69L96.29 171l-42.63 42.66a8 8 0 0 1-11.32-11.32L85 159.71l-48.3-48.3A16 16 0 0 1 38 87.63c25.42-20.51 49.75-16.48 60.4-13.14L152 20.7a16 16 0 0 1 22.63 0l60.69 60.68a16 16 0 0 1 .01 22.62'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-puzzle-piece{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M222.41 155.16a12 12 0 0 0-11.56-.69A16 16 0 0 1 188 139a16.2 16.2 0 0 1 14.8-15a15.83 15.83 0 0 1 8 1.5a12 12 0 0 0 17.2-10.8V72a20 20 0 0 0-20-20h-32a40.15 40.15 0 0 0-12.62-29.16a39.67 39.67 0 0 0-29.94-10.76a40.08 40.08 0 0 0-37.34 37C96 50.07 96 51 96 52H64a20 20 0 0 0-20 20v28a40.15 40.15 0 0 0-29.16 12.62A40 40 0 0 0 41.1 179.9a28 28 0 0 0 2.9.1v28a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20v-42.69a12 12 0 0 0-5.59-10.15M204 204H68v-38.69a12 12 0 0 0-17.15-10.84A15.9 15.9 0 0 1 42.8 156A16.2 16.2 0 0 1 28 141.06a16 16 0 0 1 22.82-15.52A12 12 0 0 0 68 114.7V76h42.7a12 12 0 0 0 10.83-17.15A15.9 15.9 0 0 1 120 50.8A16.19 16.19 0 0 1 134.94 36a16 16 0 0 1 15.53 22.81A12 12 0 0 0 161.31 76H204v24c-1 0-1.93 0-2.9.11A40 40 0 0 0 204 180Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-question{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M144 180a16 16 0 1 1-16-16a16 16 0 0 1 16 16m92-52A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84m-84-64c-24.26 0-44 17.94-44 40v4a12 12 0 0 0 24 0v-4c0-8.82 9-16 20-16s20 7.18 20 16s-9 16-20 16a12 12 0 0 0-12 12v8a12 12 0 0 0 23.73 2.56C158.31 137.88 172 122.37 172 104c0-22.06-19.74-40-44-40'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-queue{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M28 64a12 12 0 0 1 12-12h176a12 12 0 0 1 0 24H40a12 12 0 0 1-12-12m104 52H40a12 12 0 0 0 0 24h92a12 12 0 0 0 0-24m0 64H40a12 12 0 0 0 0 24h92a12 12 0 0 0 0-24m120-20a12 12 0 0 1-5.64 10.18l-64 40A12 12 0 0 1 164 200v-80a12 12 0 0 1 18.36-10.18l64 40A12 12 0 0 1 252 160m-34.64 0L188 141.65v36.7Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-record{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m0-148a64 64 0 1 0 64 64a64.07 64.07 0 0 0-64-64m0 104a40 40 0 1 1 40-40a40 40 0 0 1-40 40'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-robot{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M72 104a16 16 0 1 1 16 16a16 16 0 0 1-16-16m96 16a16 16 0 1 0-16-16a16 16 0 0 0 16 16m68-40v112a36 36 0 0 1-36 36H56a36 36 0 0 1-36-36V80a36 36 0 0 1 36-36h60V16a12 12 0 0 1 24 0v28h60a36 36 0 0 1 36 36m-24 0a12 12 0 0 0-12-12H56a12 12 0 0 0-12 12v112a12 12 0 0 0 12 12h144a12 12 0 0 0 12-12Zm-12 82a30 30 0 0 1-30 30H86a30 30 0 0 1 0-60h84a30 30 0 0 1 30 30m-80-6v12h16v-12Zm-34 12h10v-12H86a6 6 0 0 0 0 12m90-6a6 6 0 0 0-6-6h-10v12h10a6 6 0 0 0 6-6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-rocket-launch{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M227.85 46.89a20 20 0 0 0-18.74-18.74c-13.13-.77-46.65.42-74.48 28.24L131 60H74.36a19.83 19.83 0 0 0-14.14 5.86l-34.35 34.33a20 20 0 0 0 11.35 33.95l37.14 5.18l42.32 42.32l5.19 37.18A19.88 19.88 0 0 0 135.34 235a20.1 20.1 0 0 0 6.37 1a19.9 19.9 0 0 0 14.1-5.87l34.34-34.35a19.85 19.85 0 0 0 5.85-14.14V125l3.6-3.59c27.83-27.87 29.02-61.41 28.25-74.52M76 84h31l-31.25 31.28l-27.23-3.8Zm75.6-10.63A72.27 72.27 0 0 1 204 52a72.17 72.17 0 0 1-21.38 52.41L128 159l-31-31ZM172 180l-27.49 27.49l-3.8-27.23L172 149Zm-72 22c-8.71 11.85-26.19 26-60 26a12 12 0 0 1-12-12c0-33.84 14.12-51.32 26-60a12 12 0 1 1 14.18 19.3C62.3 179.63 55.51 187.8 53 203c15.21-2.51 23.37-9.3 27.7-15.18A12 12 0 1 1 100 202'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-rows{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 136H48a20 20 0 0 0-20 20v36a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20v-36a20 20 0 0 0-20-20m-4 52H52v-28h152Zm4-144H48a20 20 0 0 0-20 20v36a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20m-4 52H52V68h152Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-scales{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m243.14 131.54l-32-80a12 12 0 0 0-13.73-7.25L140 57V40a12 12 0 0 0-24 0v22.37L53.4 76.29a12 12 0 0 0-8.54 7.25l-32 79.92A12 12 0 0 0 12 168c0 12.13 6.2 22.43 17.45 29A55 55 0 0 0 56 204a55 55 0 0 0 26.55-7C93.8 190.43 100 180.13 100 168a12 12 0 0 0-.86-4.46L72.38 96.65L116 87v117h-12a12 12 0 0 0 0 24h48a12 12 0 0 0 0-24h-12V81.63l40.42-9l-23.56 58.9A12 12 0 0 0 156 136c0 12.13 6.2 22.43 17.45 29a53.78 53.78 0 0 0 53.1 0c11.25-6.57 17.45-16.87 17.45-29a12 12 0 0 0-.86-4.46M56 180c-3.71 0-18-1.87-19.81-10.18L56 120.31l19.81 49.51C74 178.13 59.71 180 56 180m144-32c-3.71 0-18-1.87-19.81-10.18L200 88.31l19.81 49.51C218 146.13 203.71 148 200 148'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-seal-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228.75 100.05c-3.52-3.67-7.15-7.46-8.34-10.33c-1.06-2.56-1.14-7.83-1.21-12.47c-.15-10-.34-22.44-9.18-31.27s-21.27-9-31.27-9.18c-4.64-.07-9.91-.15-12.47-1.21c-2.87-1.19-6.66-4.82-10.33-8.34C148.87 20.46 140.05 12 128 12s-20.87 8.46-27.95 15.25c-3.67 3.52-7.46 7.15-10.33 8.34c-2.56 1.06-7.83 1.14-12.47 1.21c-10 .2-22.44.34-31.25 9.2s-9 21.25-9.2 31.25c-.07 4.64-.15 9.91-1.21 12.47c-1.19 2.87-4.82 6.66-8.34 10.33C20.46 107.13 12 116 12 128s8.46 20.87 15.25 28c3.52 3.67 7.15 7.46 8.34 10.33c1.06 2.56 1.14 7.83 1.21 12.47c.15 10 .34 22.44 9.18 31.27s21.27 9 31.27 9.18c4.64.07 9.91.15 12.47 1.21c2.87 1.19 6.66 4.82 10.33 8.34C107.13 235.54 116 244 128 244s20.87-8.46 27.95-15.25c3.67-3.52 7.46-7.15 10.33-8.34c2.56-1.06 7.83-1.14 12.47-1.21c10-.15 22.44-.34 31.27-9.18s9-21.27 9.18-31.27c.07-4.64.15-9.91 1.21-12.47c1.19-2.87 4.82-6.66 8.34-10.33c6.79-7.08 15.25-15.9 15.25-27.95s-8.46-20.87-15.25-27.95m-17.32 39.29c-4.82 5-10.28 10.72-13.19 17.76c-2.82 6.8-2.93 14.16-3 21.29c-.08 5.36-.19 12.71-2.15 14.66s-9.3 2.07-14.66 2.15c-7.13.11-14.49.22-21.29 3c-7 2.91-12.73 8.37-17.76 13.19c-3.6 3.45-8.98 8.61-11.38 8.61s-7.78-5.16-11.34-8.57c-5-4.82-10.72-10.28-17.76-13.19c-6.8-2.82-14.16-2.93-21.29-3c-5.36-.08-12.71-.19-14.66-2.15s-2.07-9.3-2.15-14.66c-.11-7.13-.22-14.49-3-21.29c-2.91-7-8.37-12.73-13.19-17.76C41.16 135.78 36 130.4 36 128s5.16-7.78 8.57-11.34c4.82-5 10.28-10.72 13.19-17.76c2.82-6.8 2.93-14.16 3-21.29C60.88 72.25 61 64.9 63 63s9.3-2.07 14.66-2.15c7.13-.11 14.49-.22 21.29-3c7-2.91 12.73-8.37 17.76-13.19C120.22 41.16 125.6 36 128 36s7.78 5.16 11.34 8.57c5 4.82 10.72 10.28 17.76 13.19c6.8 2.82 14.16 2.93 21.29 3c5.36.08 12.71.19 14.66 2.15s2.07 9.3 2.15 14.66c.11 7.13.22 14.49 3 21.29c2.91 7 8.37 12.73 13.19 17.76c3.41 3.56 8.57 8.94 8.57 11.34s-5.12 7.82-8.53 11.38m-34.94-43.83a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-shield-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 36H48a20 20 0 0 0-20 20v56c0 54.29 26.32 87.22 48.4 105.29c23.71 19.39 47.44 26 48.44 26.29a12.1 12.1 0 0 0 6.32 0c1-.28 24.73-6.9 48.44-26.29c22.08-18.07 48.4-51 48.4-105.29V56a20 20 0 0 0-20-20m-4 76c0 35.71-13.09 64.69-38.91 86.15A126.3 126.3 0 0 1 128 219.38a126.1 126.1 0 0 1-37.09-21.23C65.09 176.69 52 147.71 52 112V60h152ZM79.51 144.49a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 17 17l-56 56a12 12 0 0 1-17 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-shield-check-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8' opacity='.2'/%3E%3Cpath d='M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-shield-warning{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M116 132V96a12 12 0 0 1 24 0v36a12 12 0 0 1-24 0m12 56a16 16 0 1 0-16-16a16 16 0 0 0 16 16M228 56v56c0 54.29-26.32 87.22-48.4 105.29c-23.71 19.39-47.44 26-48.44 26.29a12.1 12.1 0 0 1-6.32 0c-1-.28-24.73-6.9-48.44-26.29C54.32 199.22 28 166.29 28 112V56a20 20 0 0 1 20-20h160a20 20 0 0 1 20 20m-24 4H52v52c0 35.71 13.09 64.69 38.91 86.15A126.1 126.1 0 0 0 128 219.38a126.3 126.3 0 0 0 37.09-21.23C190.91 176.69 204 147.71 204 112Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sidebar{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20M44 104h28v20H44Zm28-44v20H44V60Zm-28 88h28v48H44Zm168 48H96V60h116Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sidebar-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20M44 60h32v136H44Zm168 136H100V60h112Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sidebar-simple-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 160H88V56h128z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sliders-horizontal{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M40 92h30.06a36 36 0 0 0 67.88 0H216a12 12 0 0 0 0-24h-78.06a36 36 0 0 0-67.88 0H40a12 12 0 0 0 0 24m64-24a12 12 0 1 1-12 12a12 12 0 0 1 12-12m112 96h-14.06a36 36 0 0 0-67.88 0H40a12 12 0 0 0 0 24h94.06a36 36 0 0 0 67.88 0H216a12 12 0 0 0 0-24m-48 24a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sparkle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m199 125.31l-49.88-18.39L130.69 57a19.92 19.92 0 0 0-37.38 0l-18.39 49.92L25 125.31a19.92 19.92 0 0 0 0 37.38l49.88 18.39L93.31 231a19.92 19.92 0 0 0 37.38 0l18.39-49.88L199 162.69a19.92 19.92 0 0 0 0-37.38m-63.38 35.16a12 12 0 0 0-7.11 7.11L112 212.28l-16.47-44.7a12 12 0 0 0-7.11-7.11L43.72 144l44.7-16.47a12 12 0 0 0 7.11-7.11L112 75.72l16.47 44.7a12 12 0 0 0 7.11 7.11l44.7 16.47ZM140 40a12 12 0 0 1 12-12h12V16a12 12 0 0 1 24 0v12h12a12 12 0 0 1 0 24h-12v12a12 12 0 0 1-24 0V52h-12a12 12 0 0 1-12-12m112 48a12 12 0 0 1-12 12h-4v4a12 12 0 0 1-24 0v-4h-4a12 12 0 0 1 0-24h4v-4a12 12 0 0 1 24 0v4h4a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-speaker-high{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M157.27 21.22a12 12 0 0 0-12.64 1.31L75.88 76H32a20 20 0 0 0-20 20v64a20 20 0 0 0 20 20h43.88l68.75 53.47A12 12 0 0 0 164 224V32a12 12 0 0 0-6.73-10.78M36 100h32v56H36Zm104 99.46l-48-37.33V93.87l48-37.33ZM212 128a44 44 0 0 1-11 29.11a12 12 0 1 1-18-15.88a20 20 0 0 0 0-26.43a12 12 0 0 1 18-15.86A43.94 43.94 0 0 1 212 128m40 0a83.87 83.87 0 0 1-21.39 56a12 12 0 0 1-17.89-16a60 60 0 0 0 0-80a12 12 0 1 1 17.88-16a83.87 83.87 0 0 1 21.4 56'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-square-split-horizontal{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M200 36H56a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20M60 60h56v136H60Zm136 136h-56V60h56Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-square-split-vertical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M200 36H56a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 24v56H60V60ZM60 196v-56h136v56Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-squares-four{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M100 36H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 60H60V60h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 60h-36V60h36Zm-96 40H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20m-4 60H60v-36h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20m-4 60h-36v-36h36Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-stack{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M234.36 170a12 12 0 0 1-4.36 16.37l-96 56a12 12 0 0 1-12.1 0l-96-56a12 12 0 0 1 12.09-20.74l90 52.48L218 165.63a12 12 0 0 1 16.36 4.37M218 117.63l-90 52.48l-89.95-52.48A12 12 0 0 0 26 138.37l96 56a12 12 0 0 0 12.1 0l96-56a12 12 0 0 0-12.1-20.74M20 80a12 12 0 0 1 6-10.37l96-56a12.06 12.06 0 0 1 12.1 0l96 56a12 12 0 0 1 0 20.74l-96 56a12 12 0 0 1-12.1 0l-96-56A12 12 0 0 1 20 80m35.82 0L128 122.11L200.18 80L128 37.89Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-star{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M243 96a20.33 20.33 0 0 0-17.74-14l-56.59-4.57l-21.84-52.81a20.36 20.36 0 0 0-37.66 0L87.35 77.44L30.76 82a20.45 20.45 0 0 0-11.66 35.88l43.18 37.24l-13.2 55.7A20.37 20.37 0 0 0 79.57 233L128 203.19L176.43 233a20.39 20.39 0 0 0 30.49-22.15l-13.2-55.7l43.18-37.24A20.43 20.43 0 0 0 243 96m-70.47 45.7a12 12 0 0 0-3.84 11.86L181.58 208l-47.29-29.08a12 12 0 0 0-12.58 0L74.42 208l12.89-54.4a12 12 0 0 0-3.84-11.86l-42.27-36.5l55.4-4.47a12 12 0 0 0 10.13-7.38L128 41.89l21.27 51.5a12 12 0 0 0 10.13 7.38l55.4 4.47Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-star-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m234.29 114.85l-45 38.83L203 211.75a16.4 16.4 0 0 1-24.5 17.82L128 198.49l-50.53 31.08A16.4 16.4 0 0 1 53 211.75l13.76-58.07l-45-38.83A16.46 16.46 0 0 1 31.08 86l59-4.76l22.76-55.08a16.36 16.36 0 0 1 30.27 0l22.75 55.08l59 4.76a16.46 16.46 0 0 1 9.37 28.86Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-stethoscope{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M248 160a40 40 0 1 0-52.64 37.94A28 28 0 0 1 168 220h-24a28 28 0 0 1-28-28v-37.1c31.73-5.78 56-34.09 56-67.73V40a12 12 0 0 0-12-12h-24a12 12 0 0 0 0 24h12v35.17c0 24.4-19.47 44.52-43.41 44.83A44 44 0 0 1 60 88V52h12a12 12 0 0 0 0-24H48a12 12 0 0 0-12 12v48a68 68 0 0 0 56 66.93V192a52.06 52.06 0 0 0 52 52h24a52.06 52.06 0 0 0 51.61-45.72A40.08 40.08 0 0 0 248 160m-40 16a16 16 0 1 1 16-16a16 16 0 0 1-16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-stop-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m40-112v56a12 12 0 0 1-12 12h-56a12 12 0 0 1-12-12v-56a12 12 0 0 1 12-12h56a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-stop-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M116 36V20a12 12 0 0 1 24 0v16a12 12 0 0 1-24 0m80 92a68 68 0 1 1-68-68a68.07 68.07 0 0 1 68 68m-24 0a44 44 0 1 0-44 44a44.05 44.05 0 0 0 44-44M51.51 68.49a12 12 0 1 0 17-17l-12-12a12 12 0 0 0-17 17Zm0 119l-12 12a12 12 0 0 0 17 17l12-12a12 12 0 1 0-17-17M196 72a12 12 0 0 0 8.49-3.51l12-12a12 12 0 0 0-17-17l-12 12A12 12 0 0 0 196 72m8.49 115.51a12 12 0 0 0-17 17l12 12a12 12 0 0 0 17-17ZM48 128a12 12 0 0 0-12-12H20a12 12 0 0 0 0 24h16a12 12 0 0 0 12-12m80 80a12 12 0 0 0-12 12v16a12 12 0 0 0 24 0v-16a12 12 0 0 0-12-12m108-92h-16a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-table{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M224 44H32a12 12 0 0 0-12 12v136a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a12 12 0 0 0-12-12M44 116h32v24H44Zm56 0h112v24H100Zm112-48v24H44V68ZM44 164h32v24H44Zm56 24v-24h112v24Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-tag{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m246.15 133.18l-99.32-99.32A19.85 19.85 0 0 0 132.69 28H40a12 12 0 0 0-12 12v92.69a19.85 19.85 0 0 0 5.86 14.14l99.32 99.32a20 20 0 0 0 28.28 0l84.69-84.69a20 20 0 0 0 0-28.28m-98.83 93.17L52 131V52h79l95.32 95.32ZM104 88a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-tag-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m250 121.34l-45.64-68.43A20 20 0 0 0 187.72 44H40a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h147.72a20 20 0 0 0 16.64-8.91L250 134.66a12 12 0 0 0 0-13.32M185.58 188H44V68h141.58l40 60Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-target{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M229.26 90.4a108 108 0 0 1-177.63 114A108 108 0 0 1 195.41 43.63l20.1-20.11a12 12 0 0 1 17 17l-96 96a12 12 0 1 1-17-17l24-24a36 36 0 1 0 19.76 39.65a12 12 0 0 1 23.53 4.74a60 60 0 1 1-25.73-62l17.23-17.17a84 84 0 1 0 28.46 38a12 12 0 1 1 22.5-8.35Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-terminal{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m120 137l-72 64a12 12 0 1 1-16-18l61.91-55L32 73a12 12 0 1 1 16-18l72 64a12 12 0 0 1 0 18m96 43h-96a12 12 0 0 0 0 24h96a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-terminal-window{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M72.5 150.63L100.79 128L72.5 105.37a12 12 0 1 1 15-18.74l40 32a12 12 0 0 1 0 18.74l-40 32a12 12 0 0 1-15-18.74M144 172h32a12 12 0 0 0 0-24h-32a12 12 0 0 0 0 24m92-116v144a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V56a20 20 0 0 1 20-20h176a20 20 0 0 1 20 20m-24 4H44v136h168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-terminal-window-duotone{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='currentColor'%3E%3Cpath d='M224 56v144a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8' opacity='.2'/%3E%3Cpath d='M128 128a8 8 0 0 1-3 6.25l-40 32a8 8 0 1 1-10-12.5L107.19 128L75 102.25a8 8 0 1 1 10-12.5l40 32a8 8 0 0 1 3 6.25m48 24h-40a8 8 0 0 0 0 16h40a8 8 0 0 0 0-16m56-96v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16m-16 144V56H40v144z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-text-aa{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M90.86 50.89a12 12 0 0 0-21.72 0l-64 136a12 12 0 0 0 21.71 10.22L42.44 164h75.12l15.58 33.11a12 12 0 0 0 21.72-10.22ZM53.74 140L80 84.18L106.27 140ZM200 84c-13.85 0-24.77 3.86-32.45 11.48a12 12 0 1 0 16.9 17c3-3 8.26-4.52 15.55-4.52c11 0 20 7.18 20 16v4.39a47.3 47.3 0 0 0-20-4.35c-24.26 0-44 17.94-44 40s19.74 40 44 40a47.2 47.2 0 0 0 22-5.38a12 12 0 0 0 22-6.62v-68c0-22.06-19.74-40-44-40m0 96c-11 0-20-7.18-20-16s9-16 20-16s20 7.18 20 16s-9 16-20 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-text-align-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M28 64a12 12 0 0 1 12-12h176a12 12 0 0 1 0 24H40a12 12 0 0 1-12-12m12 52h128a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m176 16H40a12 12 0 0 0 0 24h176a12 12 0 0 0 0-24m-48 40H40a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-text-t{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M212 56v32a12 12 0 0 1-24 0V68h-48v120h20a12 12 0 0 1 0 24H96a12 12 0 0 1 0-24h20V68H68v20a12 12 0 0 1-24 0V56a12 12 0 0 1 12-12h144a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-ticket{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 108a12 12 0 0 0 12-12V64a20 20 0 0 0-20-20H32a20 20 0 0 0-20 20v32a12 12 0 0 0 12 12a20 20 0 0 1 0 40a12 12 0 0 0-12 12v32a20 20 0 0 0 20 20h192a20 20 0 0 0 20-20v-32a12 12 0 0 0-12-12a20 20 0 0 1 0-40M36 170.34a44 44 0 0 0 0-84.68V68h52v120H36Zm184 0V188H112V68h108v17.66a44 44 0 0 0 0 84.68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-toggle-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176 52H80a76 76 0 0 0 0 152h96a76 76 0 0 0 0-152m0 128H80a52 52 0 0 1 0-104h96a52 52 0 0 1 0 104M80 88a40 40 0 1 0 40 40a40 40 0 0 0-40-40m0 56a16 16 0 1 1 16-16a16 16 0 0 1-16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-toggle-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M176 52H80a76 76 0 0 0 0 152h96a76 76 0 0 0 0-152m0 128H80a52 52 0 0 1 0-104h96a52 52 0 0 1 0 104m0-92a40 40 0 1 0 40 40a40 40 0 0 0-40-40m0 56a16 16 0 1 1 16-16a16 16 0 0 1-16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-trash{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 48h-36V36a28 28 0 0 0-28-28h-48a28 28 0 0 0-28 28v12H40a12 12 0 0 0 0 24h4v136a20 20 0 0 0 20 20h128a20 20 0 0 0 20-20V72h4a12 12 0 0 0 0-24M100 36a4 4 0 0 1 4-4h48a4 4 0 0 1 4 4v12h-56Zm88 168H68V72h120Zm-72-100v64a12 12 0 0 1-24 0v-64a12 12 0 0 1 24 0m48 0v64a12 12 0 0 1-24 0v-64a12 12 0 0 1 24 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-tray{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 28H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20m-4 24v92h-24.69a19.86 19.86 0 0 0-14.14 5.86L147 168h-38l-18.17-18.14A19.86 19.86 0 0 0 76.69 144H52V52ZM52 204v-36h23l18.14 18.14a19.86 19.86 0 0 0 14.17 5.86h41.38a19.86 19.86 0 0 0 14.14-5.86L181 168h23v36Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-tree-structure{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M160 116h48a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20h-48a20 20 0 0 0-20 20v12h-12a28 28 0 0 0-28 28v28H76v-4a20 20 0 0 0-20-20H24a20 20 0 0 0-20 20v32a20 20 0 0 0 20 20h32a20 20 0 0 0 20-20v-4h24v28a28 28 0 0 0 28 28h12v12a20 20 0 0 0 20 20h48a20 20 0 0 0 20-20v-48a20 20 0 0 0-20-20h-48a20 20 0 0 0-20 20v12h-12a4 4 0 0 1-4-4V88a4 4 0 0 1 4-4h12v12a20 20 0 0 0 20 20M52 140H28v-24h24Zm112 24h40v40h-40Zm0-112h40v40h-40Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-user{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M234.38 210a123.36 123.36 0 0 0-60.78-53.23a76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52a52.06 52.06 0 0 1-52-52'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-user-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20M79.57 196.57a60 60 0 0 1 96.86 0a83.72 83.72 0 0 1-96.86 0M100 120a28 28 0 1 1 28 28a28 28 0 0 1-28-28m94 59.94a83.5 83.5 0 0 0-29-23.42a52 52 0 1 0-74 0a83.5 83.5 0 0 0-29 23.42a84 84 0 1 1 131.9 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-users-three{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M164.38 181.1a52 52 0 1 0-72.76 0a75.9 75.9 0 0 0-30 28.89a12 12 0 0 0 20.78 12a53 53 0 0 1 91.22 0a12 12 0 1 0 20.78-12a75.9 75.9 0 0 0-30.02-28.89M100 144a28 28 0 1 1 28 28a28 28 0 0 1-28-28m147.21 9.59a12 12 0 0 1-16.81-2.39c-8.33-11.09-19.85-19.59-29.33-21.64a12 12 0 0 1-1.82-22.91a20 20 0 1 0-24.78-28.3a12 12 0 1 1-21-11.6a44 44 0 1 1 73.28 48.35a92.2 92.2 0 0 1 22.85 21.69a12 12 0 0 1-2.39 16.8m-192.28-24c-9.48 2.05-21 10.55-29.33 21.65a12 12 0 0 1-19.19-14.45a92.4 92.4 0 0 1 22.85-21.69a44 44 0 1 1 73.28-48.35a12 12 0 1 1-21 11.6a20 20 0 1 0-24.78 28.3a12 12 0 0 1-1.82 22.91Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-warning{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-warning-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m-12-80V80a12 12 0 0 1 24 0v52a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-warning-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-warning-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72M120 104a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0Zm8 88a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-wind{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M24 104a12 12 0 0 1 0-24h96a12 12 0 0 0 0-24a15.07 15.07 0 0 0-10.26 4.45a12 12 0 0 1-17-16.9A39.34 39.34 0 0 1 120 32a36 36 0 0 1 0 72Zm184-36a39.34 39.34 0 0 0-27.3 11.55a12 12 0 0 0 17 16.9A15.07 15.07 0 0 1 208 92a12 12 0 0 1 0 24H32a12 12 0 0 0 0 24h176a36 36 0 0 0 0-72m-56 84H40a12 12 0 0 0 0 24h112a12 12 0 0 1 0 24a15.1 15.1 0 0 1-10.27-4.45a12 12 0 1 0-17 16.9A39.34 39.34 0 0 0 152 224a36 36 0 0 0 0-72'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-wrench{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M230.47 67.5a12 12 0 0 0-19.26-4.32L172.43 99l-12.68-2.72L157 83.57l35.79-38.78a12 12 0 0 0-4.32-19.26a76.07 76.07 0 0 0-100.06 96.11l-57.49 52.54a5 5 0 0 0-.39.38a36 36 0 0 0 50.91 50.91l.38-.39l52.54-57.49A76.05 76.05 0 0 0 230.47 67.5M160 148a51.5 51.5 0 0 1-23.35-5.52a12 12 0 0 0-14.26 2.62l-58.08 63.56a12 12 0 0 1-17-17l63.55-58.07a12 12 0 0 0 2.62-14.26A51.5 51.5 0 0 1 108 96a52.06 52.06 0 0 1 52-52h.89l-25.72 27.87a12 12 0 0 0-2.91 10.65l5.66 26.35a12 12 0 0 0 9.21 9.21l26.35 5.66a12 12 0 0 0 10.65-2.91L212 95.12v.89A52.06 52.06 0 0 1 160 148'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-x,.i-ph-x-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-x-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M168.49 104.49L145 128l23.52 23.51a12 12 0 0 1-17 17L128 145l-23.51 23.52a12 12 0 0 1-17-17L111 128l-23.49-23.51a12 12 0 0 1 17-17L128 111l23.51-23.52a12 12 0 0 1 17 17ZM236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.i-ph-x-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m37.66 130.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.before\:i-ph-book-bookmark::before{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 20H72a36 36 0 0 0-36 36v168a12 12 0 0 0 12 12h144a12 12 0 0 0 0-24H60v-4a12 12 0 0 1 12-12h136a12 12 0 0 0 12-12V32a12 12 0 0 0-12-12m-88 24h36v59l-10.51-8.41a12 12 0 0 0-15 0L120 103Zm76 128H72a35.6 35.6 0 0 0-12 2.06V56a12 12 0 0 1 12-12h24v84a12 12 0 0 0 19.5 9.37l22.49-18l22.51 18A12 12 0 0 0 180 128V44h16Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.before\:i-ph-chats::before{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 76h-28V48a20 20 0 0 0-20-20H40a20 20 0 0 0-20 20v128a12 12 0 0 0 19.54 9.33l28.46-23V184a20 20 0 0 0 20 20h92.17l36.29 29.33A12 12 0 0 0 236 224V96a20 20 0 0 0-20-20M44 150.87V52h120v80H71.58a12 12 0 0 0-7.58 2.67Zm168 48l-20-16.2a12 12 0 0 0-7.54-2.67H92v-24h76a20 20 0 0 0 20-20v-36h24Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.before\:i-ph-globe::before{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 187a113.4 113.4 0 0 1-20.39-35h40.82a117 117 0 0 1-10 20.77A108.6 108.6 0 0 1 128 207m-26.49-59a135.4 135.4 0 0 1 0-40h53a135.4 135.4 0 0 1 0 40ZM44 128a83.5 83.5 0 0 1 2.43-20h30.82a160.6 160.6 0 0 0 0 40H46.43A83.5 83.5 0 0 1 44 128m84-79a113.4 113.4 0 0 1 20.39 35h-40.8a117 117 0 0 1 10-20.77A108.6 108.6 0 0 1 128 49m50.73 59h30.82a83.5 83.5 0 0 1 0 40h-30.8a160.6 160.6 0 0 0 0-40Zm20.77-24h-25.79a140.8 140.8 0 0 0-15.5-34.36A84.5 84.5 0 0 1 199.52 84ZM97.79 49.64A140.8 140.8 0 0 0 82.29 84H56.48a84.5 84.5 0 0 1 41.31-34.36M56.48 172h25.81a140.8 140.8 0 0 0 15.5 34.36A84.5 84.5 0 0 1 56.48 172m101.73 34.36a140.8 140.8 0 0 0 15.5-34.36h25.81a84.5 84.5 0 0 1-41.31 34.36'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.before\:i-ph-puzzle-piece::before{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M222.41 155.16a12 12 0 0 0-11.56-.69A16 16 0 0 1 188 139a16.2 16.2 0 0 1 14.8-15a15.83 15.83 0 0 1 8 1.5a12 12 0 0 0 17.2-10.8V72a20 20 0 0 0-20-20h-32a40.15 40.15 0 0 0-12.62-29.16a39.67 39.67 0 0 0-29.94-10.76a40.08 40.08 0 0 0-37.34 37C96 50.07 96 51 96 52H64a20 20 0 0 0-20 20v28a40.15 40.15 0 0 0-29.16 12.62A40 40 0 0 0 41.1 179.9a28 28 0 0 0 2.9.1v28a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20v-42.69a12 12 0 0 0-5.59-10.15M204 204H68v-38.69a12 12 0 0 0-17.15-10.84A15.9 15.9 0 0 1 42.8 156A16.2 16.2 0 0 1 28 141.06a16 16 0 0 1 22.82-15.52A12 12 0 0 0 68 114.7V76h42.7a12 12 0 0 0 10.83-17.15A15.9 15.9 0 0 1 120 50.8A16.19 16.19 0 0 1 134.94 36a16 16 0 0 1 15.53 22.81A12 12 0 0 0 161.31 76H204v24c-1 0-1.93 0-2.9.11A40 40 0 0 0 204 180Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.before\:i-ph-terminal-window::before{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M72.5 150.63L100.79 128L72.5 105.37a12 12 0 1 1 15-18.74l40 32a12 12 0 0 1 0 18.74l-40 32a12 12 0 0 1-15-18.74M144 172h32a12 12 0 0 0 0-24h-32a12 12 0 0 0 0 24m92-116v144a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V56a20 20 0 0 1 20-20h176a20 20 0 0 1 20 20m-24 4H44v136h168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;}.container{width:100%;}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.\[box-shadow\:var\(--zg-shadow-raised\)\]{box-shadow:var(--zg-shadow-raised);}.\[filter\:drop-shadow\(0_1px_2px_rgb\(0_0_0\/0\.22\)\)\]{filter:drop-shadow(0 1px 2px rgb(0 0 0/0.22));}.\[grid-area\:1\/1\]{grid-area:1/1;}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere;}.\[transition\:opacity_var\(--zg-motion-hover\)\,transform_var\(--zg-motion-snap\)\]{transition:opacity var(--zg-motion-hover),transform var(--zg-motion-snap);}.hover\:\[scale\:1\.06\]:hover{scale:1.06;}.data-\[active\=true\]\:before\:\[box-shadow\:var\(--zg-shadow-raised\)\][data-active=true]::before{box-shadow:var(--zg-shadow-raised);}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-none{pointer-events:none;}.disabled\:pointer-events-none:disabled{pointer-events:none;}.\!visible{visibility:visible !important;}.visible{visibility:visible;}.invisible{visibility:hidden;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.static{position:static;}.-inset-\[2px\]{inset:-2px;}.-inset-\[3px\]{inset:-3px;}.-inset-px{inset:-1px;}.inset-0{inset:0;}.-inset-x-1{left:-0.25rem;right:-0.25rem;}.-inset-y-px{top:-1px;bottom:-1px;}.inset-x-0{left:0;right:0;}.inset-y-0{top:0;bottom:0;}.-bottom-1{bottom:-0.25rem;}.-bottom-3{bottom:-0.75rem;}.-left-1{left:-0.25rem;}.-left-2{left:-0.5rem;}.-right-0\.5{right:-0.125rem;}.-right-1{right:-0.25rem;}.-right-1\.5{right:-0.375rem;}.-top-0\.5{top:-0.125rem;}.-top-1{top:-0.25rem;}.-top-1\.5{top:-0.375rem;}.-top-2{top:-0.5rem;}.-top-3{top:-0.75rem;}.bottom-0\.5{bottom:0.125rem;}.bottom-1{bottom:0.25rem;}.bottom-3{bottom:0.75rem;}.bottom-full{bottom:100%;}.left-\[3\.5px\]{left:3.5px;}.left-\[30\%\]{left:30%;}.left-\[50\%\],.left-1\/2{left:50%;}.left-0{left:0;}.left-0\.5{left:0.125rem;}.left-1{left:0.25rem;}.left-1\.5{left:0.375rem;}.left-14{left:3.5rem;}.left-2{left:0.5rem;}.left-2\.5{left:0.625rem;}.left-3\.5{left:0.875rem;}.left-4{left:1rem;}.right-\[30\%\]{right:30%;}.right-0{right:0;}.right-0\.5{right:0.125rem;}.right-1{right:0.25rem;}.right-1\.5{right:0.375rem;}.right-2{right:0.5rem;}.right-2\.5{right:0.625rem;}.right-3{right:0.75rem;}.right-4{right:1rem;}.right-6{right:1.5rem;}.right-8{right:2rem;}.top-\[2px\]{top:2px;}.top-\[3\.5px\]{top:3.5px;}.top-\[38px\]{top:38px;}.top-\[calc\(50\%-32px\)\]{top:calc(50% - 32px);}.top-0{top:0;}.top-0\.5{top:0.125rem;}.top-1{top:0.25rem;}.top-1\.5{top:0.375rem;}.top-1\/2{top:50%;}.top-2{top:0.5rem;}.top-3{top:0.75rem;}.top-3\.5{top:0.875rem;}.top-4{top:1rem;}.top-7{top:1.75rem;}.top-full{top:100%;}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;}.isolate{isolation:isolate;}.z-\[-1\]{z-index:-1;}.z-\[1\]{z-index:1;}.z-\[2\]{z-index:2;}.z-10{z-index:10;}.z-25{z-index:25;}.z-30{z-index:30;}.z-40{z-index:40;}.z-50{z-index:50;}.\!grid{display:grid !important;}.grid{display:grid;}.grid-cols-\[110px_1fr_auto_auto\]{grid-template-columns:110px 1fr auto auto;}.grid-cols-\[88px_1fr\]{grid-template-columns:88px 1fr;}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr;}.grid-cols-\[auto_minmax\(0\,1fr\)_auto_auto_auto\]{grid-template-columns:auto minmax(0,1fr) auto auto auto;}.grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}.grid-cols-\[repeat\(auto-fit\,minmax\(12rem\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr));}.m-0,.m\[0\]{margin:0;}.m-2{margin:0.5rem;}.m\[1\]{margin:1;}.m\[2\]{margin:2;}.m\[2\]\!{margin:2 !important;}.m\[3\]{margin:3;}.m23\.6{margin:5.9rem;}.m4\.7144{margin:1.1786rem;}.ma{margin:auto;}.-mx-0\.5{margin-left:-0.125rem;margin-right:-0.125rem;}.-mx-1{margin-left:-0.25rem;margin-right:-0.25rem;}.-mx-1\.5{margin-left:-0.375rem;margin-right:-0.375rem;}.-mx-2{margin-left:-0.5rem;margin-right:-0.5rem;}.-mx-3{margin-left:-0.75rem;margin-right:-0.75rem;}.-my-0\.5{margin-top:-0.125rem;margin-bottom:-0.125rem;}.-my-px{margin-top:-1px;margin-bottom:-1px;}.mx{margin-left:1rem;margin-right:1rem;}.mx-1{margin-left:0.25rem;margin-right:0.25rem;}.mx-2{margin-left:0.5rem;margin-right:0.5rem;}.mx-3{margin-left:0.75rem;margin-right:0.75rem;}.mx-auto{margin-left:auto;margin-right:auto;}.my{margin-top:1rem;margin-bottom:1rem;}.my-1\.5{margin-top:0.375rem;margin-bottom:0.375rem;}.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.-mb-3{margin-bottom:-0.75rem;}.-ml-\[3px\]{margin-left:-3px;}.-ml-1{margin-left:-0.25rem;}.-ml-2{margin-left:-0.5rem;}.-ml-2\.5{margin-left:-0.625rem;}.-ml-3{margin-left:-0.75rem;}.-ml-4{margin-left:-1rem;}.-mr-0\.5{margin-right:-0.125rem;}.-mr-1{margin-right:-0.25rem;}.-mr-2{margin-right:-0.5rem;}.-mr-2\.5{margin-right:-0.625rem;}.-mr-3{margin-right:-0.75rem;}.-mr-4{margin-right:-1rem;}.-mt-\[3px\]{margin-top:-3px;}.-mt-0\.5{margin-top:-0.125rem;}.-mt-1{margin-top:-0.25rem;}.-mt-1\.5{margin-top:-0.375rem;}.-mt-5{margin-top:-1.25rem;}.\!mb{margin-bottom:1rem !important;}.\!ml-0{margin-left:0 !important;}.mb{margin-bottom:1rem;}.mb-0{margin-bottom:0;}.mb-1{margin-bottom:0.25rem;}.mb-1\.5{margin-bottom:0.375rem;}.mb-2{margin-bottom:0.5rem;}.mb-3{margin-bottom:0.75rem;}.mb-5{margin-bottom:1.25rem;}.mb-6{margin-bottom:1.5rem;}.mb-7{margin-bottom:1.75rem;}.me{margin-inline-end:1rem;}.ml{margin-left:1rem;}.ml-0\.5{margin-left:0.125rem;}.ml-1{margin-left:0.25rem;}.ml-1\.5{margin-left:0.375rem;}.ml-16{margin-left:4rem;}.ml-2{margin-left:0.5rem;}.ml-3\.5{margin-left:0.875rem;}.ml-5{margin-left:1.25rem;}.ml-auto{margin-left:auto;}.mr-0\.5{margin-right:0.125rem;}.mr-1{margin-right:0.25rem;}.mr-1\.5{margin-right:0.375rem;}.mr-2{margin-right:0.5rem;}.mr-auto{margin-right:auto;}.mr-px{margin-right:1px;}.ms{margin-inline-start:1rem;}.mt-\[13vh\]{margin-top:13vh;}.mt-\[2px\]{margin-top:2px;}.mt-\[3px\]{margin-top:3px;}.mt-\[5px\]{margin-top:5px;}.mt-\[6px\]{margin-top:6px;}.mt-\[7px\]{margin-top:7px;}.mt-0\.5{margin-top:0.125rem;}.mt-1{margin-top:0.25rem;}.mt-1\.5{margin-top:0.375rem;}.mt-2{margin-top:0.5rem;}.mt-2\.5{margin-top:0.625rem;}.mt-3{margin-top:0.75rem;}.mt-3\.5{margin-top:0.875rem;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}.mt-auto{margin-top:auto;}.mt-px{margin-top:1px;}.box-border{box-sizing:border-box;}.\[\&\>p\]\:inline>p,.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.contents{display:contents;}.\!hidden{display:none !important;}.hidden{display:none;}.aspect-square{aspect-ratio:1/1;}.\!h-2{height:0.5rem !important;}.\!h-6{height:1.5rem !important;}.\!h-7{height:1.75rem !important;}.\!min-h-0{min-height:0 !important;}.\!w-40{width:10rem !important;}.\!w-64{width:16rem !important;}.\!w-auto{width:auto !important;}.h-\[14px\]{height:14px;}.h-\[18px\]{height:18px;}.h-\[1em\]{height:1em;}.h-\[1lh\]{height:1lh;}.h-\[22\.4px\]{height:22.4px;}.h-\[22px\]{height:22px;}.h-\[25px\]{height:25px;}.h-\[26px\]{height:26px;}.h-\[28rem\]{height:28rem;}.h-\[4px\]{height:4px;}.h-\[52px\]{height:52px;}.h-\[7px\]{height:7px;}.h-\[80px\]{height:80px;}.h-\[88px\]{height:88px;}.h-\[8px\]{height:8px;}.h-\[min\(60vh\,420px\)\]{height:min(60vh,420px);}.h-\[min\(60vh\,440px\)\]{height:min(60vh,440px);}.h-\[min\(60vh\,460px\)\]{height:min(60vh,460px);}.h-1,.h1{height:0.25rem;}.h-1\.5{height:0.375rem;}.h-10{height:2.5rem;}.h-16{height:4rem;}.h-2,.h2{height:0.5rem;}.h-2\.5{height:0.625rem;}.h-20{height:5rem;}.h-3,.h3{height:0.75rem;}.h-3\.5{height:0.875rem;}.h-4,.h4{height:1rem;}.h-5,.h5{height:1.25rem;}.h-6,.h6{height:1.5rem;}.h-7{height:1.75rem;}.h-8{height:2rem;}.h-9{height:2.25rem;}.h-auto{height:auto;}.h-full{height:100%;}.h-px{height:1px;}.h12{height:3rem;}.max-h-\[30\%\]{max-height:30%;}.max-h-\[320px\]{max-height:320px;}.max-h-\[360px\]{max-height:360px;}.max-h-\[45\%\]{max-height:45%;}.max-h-\[480px\]{max-height:480px;}.max-h-\[50vh\]{max-height:50vh;}.max-h-\[60vh\]{max-height:60vh;}.max-h-\[70vh\]{max-height:70vh;}.max-h-\[85vh\]{max-height:85vh;}.max-h-\[88vh\]{max-height:88vh;}.max-h-\[96px\]{max-height:96px;}.max-h-\[min\(20rem\,50vh\)\]{max-height:min(20rem,50vh);}.max-h-\[min\(26rem\,60vh\)\]{max-height:min(26rem,60vh);}.max-h-\[min\(400px\,55vh\)\]{max-height:min(400px,55vh);}.max-h-\[min\(40vh\,280px\)\]{max-height:min(40vh,280px);}.max-h-\[min\(48vh\,420px\)\]{max-height:min(48vh,420px);}.max-h-\[min\(60vh\,460px\)\]{max-height:min(60vh,460px);}.max-h-\[min\(70vh\,560px\)\]{max-height:min(70vh,560px);}.max-h-16{max-height:4rem;}.max-h-28{max-height:7rem;}.max-h-48{max-height:12rem;}.max-h-64{max-height:16rem;}.max-h-72{max-height:18rem;}.max-h-80{max-height:20rem;}.max-h-full{max-height:100%;}.max-w-\[1120px\]{max-width:1120px;}.max-w-\[1160px\]{max-width:1160px;}.max-w-\[11rem\],.max-w-44{max-width:11rem;}.max-w-\[12rem\],.max-w-48{max-width:12rem;}.max-w-\[13rem\]{max-width:13rem;}.max-w-\[140px\]{max-width:140px;}.max-w-\[14rem\]{max-width:14rem;}.max-w-\[150px\]{max-width:150px;}.max-w-\[160px\]{max-width:160px;}.max-w-\[16ch\]{max-width:16ch;}.max-w-\[16rem\]{max-width:16rem;}.max-w-\[180px\]{max-width:180px;}.max-w-\[18rem\],.max-w-72{max-width:18rem;}.max-w-\[200px\]{max-width:200px;}.max-w-\[220px\]{max-width:220px;}.max-w-\[230px\]{max-width:230px;}.max-w-\[260px\]{max-width:260px;}.max-w-\[264px\]{max-width:264px;}.max-w-\[268px\]{max-width:268px;}.max-w-\[272px\]{max-width:272px;}.max-w-\[276px\]{max-width:276px;}.max-w-\[280px\]{max-width:280px;}.max-w-\[28rem\],.max-w-md{max-width:28rem;}.max-w-\[300px\]{max-width:300px;}.max-w-\[320px\]{max-width:320px;}.max-w-\[340px\]{max-width:340px;}.max-w-\[360px\]{max-width:360px;}.max-w-\[36rem\]{max-width:36rem;}.max-w-\[400px\]{max-width:400px;}.max-w-\[420px\]{max-width:420px;}.max-w-\[60\%\]{max-width:60%;}.max-w-\[640px\]{max-width:640px;}.max-w-\[65\%\]{max-width:65%;}.max-w-\[680px\]{max-width:680px;}.max-w-\[7rem\],.max-w-28{max-width:7rem;}.max-w-\[8\.5rem\]{max-width:8.5rem;}.max-w-\[80vw\]{max-width:80vw;}.max-w-\[8rem\]{max-width:8rem;}.max-w-\[92vw\]{max-width:92vw;}.max-w-\[9rem\]{max-width:9rem;}.max-w-\[calc\(100\%-24px\)\]{max-width:calc(100% - 24px);}.max-w-\[calc\(100vw-16px\)\]{max-width:calc(100vw - 16px);}.max-w-\[min\(130px\,14cqi\)\]{max-width:min(130px,14cqi);}.max-w-\[min\(140px\,18cqi\)\]{max-width:min(140px,18cqi);}.max-w-\[min\(92vw\,100\%\)\]{max-width:min(92vw,100%);}.max-w-14{max-width:3.5rem;}.max-w-20{max-width:5rem;}.max-w-full{max-width:100%;}.min-h-\[72px\]{min-height:72px;}.min-h-0{min-height:0;}.min-h-12{min-height:3rem;}.min-h-14{min-height:3.5rem;}.min-h-20{min-height:5rem;}.min-h-4{min-height:1rem;}.min-h-40{min-height:10rem;}.min-h-48{min-height:12rem;}.min-h-5{min-height:1.25rem;}.min-h-6{min-height:1.5rem;}.min-h-7{min-height:1.75rem;}.min-h-8{min-height:2rem;}.min-h-full{min-height:100%;}.min-w-\[10rem\]{min-width:10rem;}.min-w-\[14px\]{min-width:14px;}.min-w-\[14rem\]{min-width:14rem;}.min-w-\[1em\]{min-width:1em;}.min-w-\[240px\]{min-width:240px;}.min-w-\[45\%\]{min-width:45%;}.min-w-\[8rem\]{min-width:8rem;}.min-w-0{min-width:0;}.min-w-4{min-width:1rem;}.min-w-5{min-width:1.25rem;}.min-w-max{min-width:max-content;}.w-\[1040px\]{width:1040px;}.w-\[124px\]{width:124px;}.w-\[14px\]{width:14px;}.w-\[156px\]{width:156px;}.w-\[164px\]{width:164px;}.w-\[18px\]{width:18px;}.w-\[212px\]{width:212px;}.w-\[26rem\]{width:26rem;}.w-\[28rem\]{width:28rem;}.w-\[38px\]{width:38px;}.w-\[3ch\]{width:3ch;}.w-\[40\%\],.w-2\/5{width:40%;}.w-\[400px\]{width:400px;}.w-\[40rem\]{width:40rem;}.w-\[42\%\]{width:42%;}.w-\[43\%\]{width:43%;}.w-\[440px\]{width:440px;}.w-\[460px\]{width:460px;}.w-\[480px\]{width:480px;}.w-\[560px\]{width:560px;}.w-\[62\%\]{width:62%;}.w-\[72px\]{width:72px;}.w-\[74px\]{width:74px;}.w-\[760px\]{width:760px;}.w-\[7px\]{width:7px;}.w-\[8px\]{width:8px;}.w-\[920px\]{width:920px;}.w-\[calc\(50\%-2px\)\]{width:calc(50% - 2px);}.w-0\.5{width:0.125rem;}.w-1,.w1{width:0.25rem;}.w-1\.5{width:0.375rem;}.w-1\/4{width:25%;}.w-10{width:2.5rem;}.w-12{width:3rem;}.w-14{width:3.5rem;}.w-16{width:4rem;}.w-2,.w2{width:0.5rem;}.w-2\.5{width:0.625rem;}.w-2\/3{width:66.6666666667%;}.w-20{width:5rem;}.w-24{width:6rem;}.w-28{width:7rem;}.w-3{width:0.75rem;}.w-3\.5{width:0.875rem;}.w-3\/4{width:75%;}.w-3\/5{width:60%;}.w-36{width:9rem;}.w-4{width:1rem;}.w-4\/5{width:80%;}.w-40{width:10rem;}.w-44{width:11rem;}.w-5{width:1.25rem;}.w-6{width:1.5rem;}.w-60{width:15rem;}.w-64{width:16rem;}.w-7{width:1.75rem;}.w-8{width:2rem;}.w-9{width:2.25rem;}.w-auto{width:auto;}.w-fit{width:fit-content;}.w-full{width:100%;}.w-max{width:max-content;}.w-px{width:1px;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink,.shrink,.shrink-0\.,.shrink-0\${flex-shrink:1;}.shrink-0{flex-shrink:0;}.flex-grow,.grow{flex-grow:1;}.flex-row{flex-direction:row;}.flex-row-reverse{flex-direction:row-reverse;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.border-collapse{border-collapse:collapse;}.origin-bottom-left{transform-origin:bottom left;}.origin-top-left{transform-origin:top left;}.-translate-x-1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y-\[1px\]{--un-translate-y:1px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y-\[2px\]{--un-translate-y:2px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.-rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:-90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-0{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:0deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.-scale-x-100{--un-scale-x:-1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite;}.cursor-default{cursor:default;}.disabled\:cursor-default:disabled{cursor:default;}.cursor-pointer{cursor:pointer;}.enabled\:cursor-pointer:enabled{cursor:pointer;}.disabled\:cursor-progress:disabled{cursor:progress;}.disabled\:cursor-wait:disabled{cursor:wait;}.cursor-text{cursor:text;}.\!cursor-not-allowed{cursor:not-allowed !important;}.cursor-not-allowed{cursor:not-allowed;}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}.cursor-grabbing{cursor:grabbing;}.cursor-col-resize{cursor:col-resize;}.cursor-row-resize{cursor:row-resize;}.cursor-zoom-in{cursor:zoom-in;}.touch-none{touch-action:none;}.select-all{-webkit-user-select:all;user-select:all;}.select-text{-webkit-user-select:text;user-select:text;}.select-none{-webkit-user-select:none;user-select:none;}.resize-y{resize:vertical;}.resize{resize:both;}.resize-none{resize:none;}.list-decimal{list-style-type:decimal;}.list-disc{list-style-type:disc;}.list-none{list-style-type:none;}.place-items-center{place-items:center;}.\!items-start{align-items:flex-start !important;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}.\!items-center{align-items:center !important;}.items-center{align-items:center;}.items-baseline{align-items:baseline;}.items-stretch{align-items:stretch;}.self-start{align-self:flex-start;}.self-center{align-self:center;}.self-stretch{align-self:stretch;}.justify-end{justify-content:flex-end;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.justify-items-center{justify-items:center;}.justify-self-start{justify-self:start;}.\!gap-1{gap:0.25rem !important;}.\!gap-3{gap:0.75rem !important;}.gap-\[3px\]{gap:3px;}.gap-0\.5{gap:0.125rem;}.gap-1{gap:0.25rem;}.gap-1\.5{gap:0.375rem;}.gap-10{gap:2.5rem;}.gap-2{gap:0.5rem;}.gap-2\.5{gap:0.625rem;}.gap-3{gap:0.75rem;}.gap-3\.5{gap:0.875rem;}.gap-4{gap:1rem;}.gap-5{gap:1.25rem;}.gap-6{gap:1.5rem;}.gap-8{gap:2rem;}.gap-px{gap:1px;}.gap-x-2{column-gap:0.5rem;}.gap-x-2\.5{column-gap:0.625rem;}.gap-x-3{column-gap:0.75rem;}.gap-x-4{column-gap:1rem;}.gap-y-0\.5{row-gap:0.125rem;}.gap-y-1{row-gap:0.25rem;}.gap-y-1\.5{row-gap:0.375rem;}.gap-y-2{row-gap:0.5rem;}.gap-y-2\.5{row-gap:0.625rem;}.gap-y-3\.5{row-gap:0.875rem;}.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}.space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}.overflow-auto{overflow:auto;}.overflow-clip{overflow:clip;}.overflow-hidden{overflow:hidden;}.overflow-x-auto{overflow-x:auto;}.overflow-y-auto{overflow-y:auto;}.overflow-y-hidden{overflow-y:hidden;}.overscroll-contain{overscroll-behavior:contain;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.text-ellipsis{text-overflow:ellipsis;}.whitespace-normal{white-space:normal;}.whitespace-nowrap{white-space:nowrap;}.whitespace-pre{white-space:pre;}.whitespace-pre-line{white-space:pre-line;}.whitespace-pre-wrap{white-space:pre-wrap;}.break-words{overflow-wrap:break-word;}.break-all{word-break:break-all;}.\!b,.b\!{border-width:1px !important;}.b,.border{border-width:1px;}.border-0{border-width:0px;}.border-2{border-width:2px;}.border-b{border-bottom-width:1px;}.border-l{border-left-width:1px;}.border-l-2{border-left-width:2px;}.border-r{border-right-width:1px;}.border-s-2{border-inline-start-width:2px;}.border-t{border-top-width:1px;}.border-\[var\(--zg-accent\)\]{border-color:var(--zg-accent);}.border-\[var\(--zg-border-strong\)\]{border-color:var(--zg-border-strong);}.border-\[var\(--zg-border\)\]{border-color:var(--zg-border);}.border-\[var\(--zg-hairline\)\]{border-color:var(--zg-hairline);}.border-\[var\(--zg-text-muted\)\]{border-color:var(--zg-text-muted);}.border-transparent{border-color:transparent;}.hover\:border-\[color-mix\(in_srgb\,var\(--zg-danger\)_40\%\,transparent\)\]:hover{border-color:color-mix(in srgb,var(--zg-danger) 40%,transparent);}.\!rounded-full{border-radius:9999px !important;}.rounded{border-radius:0.25rem;}.rounded-\[1px\]{border-radius:1px;}.rounded-\[28px\]{border-radius:28px;}.rounded-\[2px\]{border-radius:2px;}.rounded-\[3px\]{border-radius:3px;}.rounded-\[4px\]{border-radius:4px;}.rounded-\[5px\]{border-radius:5px;}.rounded-\[var\(--zg-radius-lg\)\],.rounded-zg-lg{border-radius:var(--zg-radius-lg);}.rounded-\[var\(--zg-radius-md\)\],.rounded-zg-md{border-radius:var(--zg-radius-md);}.rounded-\[var\(--zg-radius-sm\)\],.rounded-zg-sm{border-radius:var(--zg-radius-sm);}.rounded-\[var\(--zg-radius-xl\)\],.rounded-zg-xl{border-radius:var(--zg-radius-xl);}.rounded-2xl{border-radius:1rem;}.rounded-3xl{border-radius:1.5rem;}.rounded-full{border-radius:9999px;}.rounded-lg{border-radius:0.5rem;}.rounded-md{border-radius:0.375rem;}.rounded-sm{border-radius:0.125rem;}.rounded-zg-xs{border-radius:var(--zg-radius-xs);}.first\:rounded-l-full:first-child{border-top-left-radius:9999px;border-bottom-left-radius:9999px;}.last\:rounded-r-full:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px;}.border-dashed{border-style:dashed;}.bg-\[color-mix\(in_srgb\,var\(--zg-accent\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--zg-accent) 12%,transparent);}.bg-\[color-mix\(in_srgb\,var\(--zg-accent\)_55\%\,var\(--zg-track\)\)\]{background-color:color-mix(in srgb,var(--zg-accent) 55%,var(--zg-track));}.bg-\[var\(--zg-accent-alt\)\]{background-color:var(--zg-accent-alt);}.bg-\[var\(--zg-accent-dot\)\]{background-color:var(--zg-accent-dot);}.bg-\[var\(--zg-accent-fill\)\],.bg-zg-accent-fill{background-color:var(--zg-accent-fill);}.bg-\[var\(--zg-accent\)\]{background-color:var(--zg-accent);}.bg-\[var\(--zg-bg-elevated\)\]{background-color:var(--zg-bg-elevated);}.bg-\[var\(--zg-bg\)\]{background-color:var(--zg-bg);}.bg-\[var\(--zg-border-strong\)\],.group:hover .group-hover\:bg-\[var\(--zg-border-strong\)\]{background-color:var(--zg-border-strong);}.bg-\[var\(--zg-border\)\]{background-color:var(--zg-border);}.bg-\[var\(--zg-code-bg\)\]{background-color:var(--zg-code-bg);}.bg-\[var\(--zg-danger-dot\)\],.bg-zg-danger-dot{background-color:var(--zg-danger-dot);}.bg-\[var\(--zg-danger\)\],.bg-zg-danger{background-color:var(--zg-danger);}.bg-\[var\(--zg-hairline\)\]{background-color:var(--zg-hairline);}.bg-\[var\(--zg-overlay\)\]{background-color:var(--zg-overlay);}.bg-\[var\(--zg-raised\)\]{background-color:var(--zg-raised);}.bg-\[var\(--zg-row-active\)\],.data-\[highlighted\]\:bg-\[var\(--zg-row-active\)\][data-highlighted],.data-\[state\=open\]\:bg-\[var\(--zg-row-active\)\][data-state=open]{background-color:var(--zg-row-active);}.bg-\[var\(--zg-row-hover\)\]{background-color:var(--zg-row-hover);}.bg-\[var\(--zg-success-dot\)\],.bg-zg-success-dot{background-color:var(--zg-success-dot);}.bg-\[var\(--zg-text-muted\)\],.bg-zg-muted{background-color:var(--zg-text-muted);}.bg-\[var\(--zg-text-subtle\)\]{background-color:var(--zg-text-subtle);}.bg-\[var\(--zg-track\)\],.bg-zg-track{background-color:var(--zg-track);}.bg-\[var\(--zg-tray\)\]{background-color:var(--zg-tray);}.bg-\[var\(--zg-warn-dot\)\],.bg-zg-warn-dot{background-color:var(--zg-warn-dot);}.bg-\[var\(--zg-warn\)\],.bg-zg-warn{background-color:var(--zg-warn);}.bg-amber-500{--un-bg-opacity:1;background-color:rgb(245 158 11 / var(--un-bg-opacity));}.bg-amber-600{--un-bg-opacity:1;background-color:rgb(217 119 6 / var(--un-bg-opacity));}.bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));}.bg-current{background-color:currentColor;}.bg-transparent{background-color:transparent;}.bg-zg-accent-fill-fg{background-color:var(--zg-accent-fill-fg);}.bg-zg-info{background-color:var(--zg-info);}.bg-zg-success{background-color:var(--zg-success);}.bg-zg-warn-soft{background-color:var(--zg-warn-soft);}.focus-within\:bg-\[var\(--zg-row-hover\)\]:focus-within{background-color:var(--zg-row-hover);}.data-\[active\=true\]\:hover\:before\:bg-\[var\(--zg-raised\)\]:hover[data-active=true]::before{background-color:var(--zg-raised);}.data-\[active\=true\]\:hover\:bg-transparent:hover[data-active=true]{background-color:transparent;}.hover\:before\:bg-\[var\(--zg-accent-soft-strong\)\]:hover::before{background-color:var(--zg-accent-soft-strong);}.hover\:before\:bg-\[var\(--zg-bg-hover\)\]:hover::before{background-color:var(--zg-bg-hover);}.hover\:before\:bg-\[var\(--zg-row-hover\)\]:hover::before{background-color:var(--zg-row-hover);}.hover\:before\:bg-zg-danger:hover::before{background-color:var(--zg-danger);}.hover\:bg-\[var\(--zg-row-hover\)\]:hover{background-color:var(--zg-row-hover);}.enabled\:hover\:before\:bg-\[var\(--zg-row-hover\)\]:hover:enabled::before{background-color:var(--zg-row-hover);}.enabled\:hover\:bg-\[var\(--zg-row-hover\)\]:hover:enabled{background-color:var(--zg-row-hover);}.disabled\:hover\:before\:bg-transparent:hover:disabled::before{background-color:transparent;}.before\:bg-\[var\(--zg-accent-soft\)\]::before{background-color:var(--zg-accent-soft);}.before\:bg-\[var\(--zg-code-bg\)\]::before{background-color:var(--zg-code-bg);}.before\:bg-\[var\(--zg-row-active\)\]::before{background-color:var(--zg-row-active);}.data-\[active\=true\]\:before\:bg-\[var\(--zg-raised\)\][data-active=true]::before{background-color:var(--zg-raised);}.fill-\[var\(--zg-text-muted\)\]{fill:var(--zg-text-muted);}.object-cover{object-fit:cover;}.object-contain{object-fit:contain;}.p-0{padding:0;}.p-0\.5{padding:0.125rem;}.p-1{padding:0.25rem;}.p-1\.5{padding:0.375rem;}.p-2{padding:0.5rem;}.p-2\.5{padding:0.625rem;}.p-3,.p3{padding:0.75rem;}.p-4{padding:1rem;}.p-5{padding:1.25rem;}.p-6{padding:1.5rem;}.-px{padding-left:-1rem;padding-right:-1rem;}.\!px-1{padding-left:0.25rem !important;padding-right:0.25rem !important;}.\!px-2\.5{padding-left:0.625rem !important;padding-right:0.625rem !important;}.\!px-3\.5{padding-left:0.875rem !important;padding-right:0.875rem !important;}.\!py-1\.5{padding-top:0.375rem !important;padding-bottom:0.375rem !important;}.px,.px-4{padding-left:1rem;padding-right:1rem;}.px-\[3px\]{padding-left:3px;padding-right:3px;}.px-0{padding-left:0;padding-right:0;}.px-0\.5{padding-left:0.125rem;padding-right:0.125rem;}.px-1{padding-left:0.25rem;padding-right:0.25rem;}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}.px-3{padding-left:0.75rem;padding-right:0.75rem;}.px-3\.5{padding-left:0.875rem;padding-right:0.875rem;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}.py,.py-4{padding-top:1rem;padding-bottom:1rem;}.py-\[3px\]{padding-top:3px;padding-bottom:3px;}.py-\[5px\]{padding-top:5px;padding-bottom:5px;}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem;}.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}.py-8{padding-top:2rem;padding-bottom:2rem;}.\!pl-1{padding-left:0.25rem !important;}.\!pl-2\.5{padding-left:0.625rem !important;}.\!pr-1\.5{padding-right:0.375rem !important;}.\!pr-2{padding-right:0.5rem !important;}.\!pt-0{padding-top:0 !important;}.pb-\[var\(--zg-row-gap\,12px\)\]{padding-bottom:var(--zg-row-gap,12px);}.pb-0{padding-bottom:0;}.pb-0\.5{padding-bottom:0.125rem;}.pb-1{padding-bottom:0.25rem;}.pb-1\.5{padding-bottom:0.375rem;}.pb-2{padding-bottom:0.5rem;}.pb-2\.5{padding-bottom:0.625rem;}.pb-3{padding-bottom:0.75rem;}.pb-4{padding-bottom:1rem;}.pb-6{padding-bottom:1.5rem;}.pb-8{padding-bottom:2rem;}.pl-\[13px\]{padding-left:13px;}.pl-\[19px\]{padding-left:19px;}.pl-\[22px\]{padding-left:22px;}.pl-\[35px\]{padding-left:35px;}.pl-\[3px\]{padding-left:3px;}.pl-\[42px\]{padding-left:42px;}.pl-\[50px\]{padding-left:50px;}.pl-0\.5{padding-left:0.125rem;}.pl-1{padding-left:0.25rem;}.pl-1\.5{padding-left:0.375rem;}.pl-2{padding-left:0.5rem;}.pl-2\.5{padding-left:0.625rem;}.pl-3{padding-left:0.75rem;}.pl-4{padding-left:1rem;}.pl-5{padding-left:1.25rem;}.pl-6{padding-left:1.5rem;}.pl-7{padding-left:1.75rem;}.pl-7\.5{padding-left:1.875rem;}.pl-8{padding-left:2rem;}.pl-9{padding-left:2.25rem;}.pr,.pr-4{padding-right:1rem;}.pr-0\.5{padding-right:0.125rem;}.pr-1{padding-right:0.25rem;}.pr-1\.5{padding-right:0.375rem;}.pr-2{padding-right:0.5rem;}.pr-2\.5{padding-right:0.625rem;}.pr-3{padding-right:0.75rem;}.pr-5{padding-right:1.25rem;}.pr-6{padding-right:1.5rem;}.pr-9{padding-right:2.25rem;}.ps1{padding-inline-start:0.25rem;}.pt-\[5px\]{padding-top:5px;}.pt-\[var\(--zg-fold-gap\)\]{padding-top:var(--zg-fold-gap);}.pt-0{padding-top:0;}.pt-0\.5{padding-top:0.125rem;}.pt-1{padding-top:0.25rem;}.pt-1\.5{padding-top:0.375rem;}.pt-12{padding-top:3rem;}.pt-2{padding-top:0.5rem;}.pt-2\.5{padding-top:0.625rem;}.pt-3{padding-top:0.75rem;}.pt-4{padding-top:1rem;}.pt-6{padding-top:1.5rem;}.text-center{text-align:center;}.text-left{text-align:left;}.first\:text-left:first-child{text-align:left;}.text-right{text-align:right;}.indent{text-indent:1.5rem;}.text-balance{text-wrap:balance;}.text-pretty{text-wrap:pretty;}.align-\[-2px\]{vertical-align:-2px;}.align-\[calc\(0\.625cap_-_0\.5em\)\]{vertical-align:calc(0.625cap - 0.5em);}.align-middle{vertical-align:middle;}.\!text-\[11px\]{font-size:11px !important;}.\!text-sm{font-size:0.875rem !important;line-height:1.25rem !important;}.\!text-xs{font-size:0.75rem !important;line-height:1rem !important;}.text-\[0\.85em\]{font-size:0.85em;}.text-\[0\.8em\]{font-size:0.8em;}.text-\[10px\]{font-size:10px;}.text-\[11px\]{font-size:11px;}.text-\[12px\]{font-size:12px;}.text-\[13px\]{font-size:13px;}.text-\[14px\]{font-size:14px;}.text-\[15px\]{font-size:15px;}.text-\[18px\]{font-size:18px;}.text-\[20px\]{font-size:20px;}.text-\[28px\]{font-size:28px;}.text-\[9px\]{font-size:9px;}.text-\[length\:var\(--zg-font-size-code\)\]{font-size:var(--zg-font-size-code);}.text-\[length\:var\(--zg-font-size-meta\)\],.text-zg-meta{font-size:var(--zg-font-size-meta);}.text-3xl{font-size:1.875rem;line-height:2.25rem;}.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.text-zg-badge{font-size:var(--zg-font-size-badge);}.text-zg-body{font-size:var(--zg-font-size-body);}.text-zg-label{font-size:var(--zg-font-size-label);}.text-zg-title{font-size:var(--zg-font-size-title);}.text-zg-ui{font-size:var(--zg-font-size-ui);}.\!text-\[var\(--zg-accent-hover\)\]{color:var(--zg-accent-hover) !important;}.\!text-\[var\(--zg-accent\)\]{color:var(--zg-accent) !important;}.\!text-\[var\(--zg-text-muted\)\]{color:var(--zg-text-muted) !important;}.\!text-\[var\(--zg-text\)\],.group:hover .group-hover\:\!text-\[var\(--zg-text\)\]{color:var(--zg-text) !important;}.\!text-\[var\(--zg-warn\)\],.\!text-zg-warn{color:var(--zg-warn) !important;}.\!text-current{color:currentColor !important;}.\!text-zg-danger{color:var(--zg-danger) !important;}.\!text-zg-info{color:var(--zg-info) !important;}.\!text-zg-success{color:var(--zg-success) !important;}.group[data-active=true] .group-data-\[active\=true\]\:text-\[var\(--zg-text\)\],.text-\[var\(--zg-text\)\],.group:focus-within .group-focus-within\:text-\[var\(--zg-text\)\]{color:var(--zg-text);}.text-\[var\(--zg-accent-fill-fg\)\],.text-zg-accent-fill-fg{color:var(--zg-accent-fill-fg);}.text-\[var\(--zg-accent-hover\)\]{color:var(--zg-accent-hover);}.text-\[var\(--zg-accent\)\],.text-zg-accent{color:var(--zg-accent);}.text-\[var\(--zg-bg\)\]{color:var(--zg-bg);}.text-\[var\(--zg-code-fg\)\]{color:var(--zg-code-fg);}.text-\[var\(--zg-danger\)\],.text-zg-danger{color:var(--zg-danger);}.text-\[var\(--zg-error\)\]{color:var(--zg-error);}.text-\[var\(--zg-success\)\],.text-zg-success{color:var(--zg-success);}.text-\[var\(--zg-text-muted\)\],.text-zg-muted{color:var(--zg-text-muted);}.text-\[var\(--zg-text-subtle\)\],.text-zg-subtle{color:var(--zg-text-subtle);}.text-\[var\(--zg-warn\)\],.text-zg-warn{color:var(--zg-warn);}.text-\[var\(--zg-warning\,var\(--zg-text-muted\)\)\]{color:var(--zg-warning,var(--zg-text-muted));}.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}.text-zg-info{color:var(--zg-info);}.hover\:\!text-zg-danger:hover{color:var(--zg-danger) !important;}.hover\:text-\[var\(--zg-accent-hover\)\]:hover{color:var(--zg-accent-hover);}.hover\:text-\[var\(--zg-accent\)\]:hover{color:var(--zg-accent);}.hover\:text-\[var\(--zg-danger\)\]:hover{color:var(--zg-danger);}.hover\:text-\[var\(--zg-text\)\]:hover{color:var(--zg-text);}.hover\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}.hover\:text-zg-danger:hover{color:var(--zg-danger);}.enabled\:hover\:text-\[var\(--zg-text\)\]:hover:enabled{color:var(--zg-text);}.disabled\:hover\:text-\[var\(--zg-text-muted\)\]:hover:disabled{color:var(--zg-text-muted);}.disabled\:text-\[var\(--zg-text-muted\)\]:disabled{color:var(--zg-text-muted);}.placeholder\:text-\[var\(--zg-text-muted\)\]::placeholder{color:var(--zg-text-muted);}.placeholder\:text-\[var\(--zg-text-subtle\)\]::placeholder{color:var(--zg-text-subtle);}.text-inherit{color:inherit;}.font-medium{font-weight:500;}.font-normal{font-weight:400;}.font-semibold{font-weight:600;}.leading-\[1\.45\]{line-height:1.45;}.leading-\[1\.5\]{line-height:1.5;}.leading-\[1\.55\]{line-height:1.55;}.leading-\[1\.6\]{line-height:1.6;}.leading-\[14px\]{line-height:14px;}.leading-\[18px\]{line-height:18px;}.leading-\[20px\]{line-height:20px;}.leading-4{line-height:1rem;}.leading-5{line-height:1.25rem;}.leading-6{line-height:1.5rem;}.leading-7{line-height:1.75rem;}.leading-none{line-height:1;}.leading-relaxed{line-height:1.625;}.leading-snug{line-height:1.375;}.leading-tight{line-height:1.25;}.tracking-\[-0\.005em\]{letter-spacing:-0.005em;}.tracking-\[-0\.01em\]{letter-spacing:-0.01em;}.tracking-\[0\.12em\]{letter-spacing:0.12em;}.tracking-normal{letter-spacing:0em;}.tracking-wide{letter-spacing:0.025em;}.font-mono{font-family:var(--zg-font-mono);}.font-sans{font-family:var(--zg-font-ui);}.uppercase{text-transform:uppercase;}.lowercase{text-transform:lowercase;}.capitalize{text-transform:capitalize;}.normal-case{text-transform:none;}.italic{font-style:italic;}.ordinal{--un-ordinal:ordinal;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}.line-through{text-decoration-line:line-through;}.underline{text-decoration-line:underline;}.hover\:underline:hover{text-decoration-line:underline;}.focus-visible\:underline:focus-visible{text-decoration-line:underline;}.decoration-\[var\(--zg-accent\)\]\/40{-webkit-text-decoration-color:var(--zg-accent);text-decoration-color:var(--zg-accent);}.hover\:decoration-\[var\(--zg-accent-hover\)\]:hover{-webkit-text-decoration-color:var(--zg-accent-hover);text-decoration-color:var(--zg-accent-hover);}.hover\:decoration-\[var\(--zg-text-subtle\)\]:hover{-webkit-text-decoration-color:var(--zg-text-subtle);text-decoration-color:var(--zg-text-subtle);}.underline-offset-2{text-underline-offset:2px;}.no-underline{text-decoration:none;}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.accent-\[var\(--zg-accent\)\]{accent-color:var(--zg-accent);}.data-\[active\=true\]\:opacity-100[data-active=true],.opacity-100,.group:focus-within .group-focus-within\:opacity-100,.group\/queued:focus-within .group-focus-within\/queued\:opacity-100,.group:hover .group-hover\:opacity-100,.group\/action:hover .group-hover\/action\:opacity-100,.group\/queued:hover .group-hover\/queued\:opacity-100,.group:focus-visible .group-focus-visible\:opacity-100{opacity:1;}.data-\[stand-in\]\:opacity-55[data-stand-in]{opacity:0.55;}.opacity-0,.group:hover .group-hover\:opacity-0{opacity:0;}.opacity-40{opacity:0.4;}.opacity-45{opacity:0.45;}.opacity-50{opacity:0.5;}.opacity-60{opacity:0.6;}.opacity-70{opacity:0.7;}.opacity-75{opacity:0.75;}.opacity-80{opacity:0.8;}.opacity-90{opacity:0.9;}.hover\:opacity-100:hover{opacity:1;}.focus-visible\:opacity-100:focus-visible{opacity:1;}.disabled\:\!opacity-100:disabled{opacity:1 !important;}.disabled\:opacity-40:disabled{opacity:0.4;}.disabled\:opacity-50:disabled{opacity:0.5;}.disabled\:opacity-60:disabled{opacity:0.6;}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-\[inset_0_-1px_0_var\(--zg-hairline\)\]{--un-shadow:inset 0 -1px 0 var(--un-shadow-color, var(--zg-hairline));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-\[inset_0_0_0_1px_var\(--zg-border-strong\)\]{--un-shadow:inset 0 0 0 1px var(--un-shadow-color, var(--zg-border-strong));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-\[inset_0_0_0_1px_var\(--zg-hairline\)\]{--un-shadow:inset 0 0 0 1px var(--un-shadow-color, var(--zg-hairline));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-\[inset_0_1px_0_var\(--zg-hairline\)\]{--un-shadow:inset 0 1px 0 var(--un-shadow-color, var(--zg-hairline));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-\[var\(--zg-shadow-float\)\]{--un-shadow:var(--zg-shadow-float);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.outline-2{outline-width:2px;}.focus-visible\:outline-2:focus-visible{outline-width:2px;}.outline-\[var\(--zg-text-muted\)\]{outline-color:var(--zg-text-muted);}.focus-within\:outline-\[var\(--zg-ring\)\]:focus-within{outline-color:var(--zg-ring);}.focus-visible\:\!outline-\[var\(--zg-ring\)\]:focus-visible{outline-color:var(--zg-ring) !important;}.focus-visible\:outline-\[var\(--zg-accent\)\]:focus-visible{outline-color:var(--zg-accent);}.focus-visible\:outline-\[var\(--zg-ring\)\]:focus-visible{outline-color:var(--zg-ring);}.outline-offset-2{outline-offset:2px;}.focus-visible\:outline-offset-\[-2px\]:focus-visible{outline-offset:-2px;}.focus-visible\:outline-offset-1:focus-visible{outline-offset:1px;}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px;}.outline{outline-style:solid;}.focus-within\:outline:focus-within{outline-style:solid;}.focus-visible\:outline:focus-visible{outline-style:solid;}.outline-none{outline:2px solid transparent;outline-offset:2px;}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.\!ring-\[color-mix\(in_srgb\,var\(--zg-warn\)_50\%\,transparent\)\]{--un-ring-color:color-mix(in srgb,var(--zg-warn) 50%,transparent) !important;}.ring-\[color-mix\(in_srgb\,var\(--zg-accent\)_45\%\,transparent\)\]{--un-ring-color:color-mix(in srgb,var(--zg-accent) 45%,transparent);}.ring-\[color-mix\(in_srgb\,var\(--zg-accent\)_55\%\,transparent\)\]{--un-ring-color:color-mix(in srgb,var(--zg-accent) 55%,transparent);}.ring-\[var\(--zg-hairline\)\]{--un-ring-color:var(--zg-hairline);}.ring-\[var\(--zg-text-subtle\)\]{--un-ring-color:var(--zg-text-subtle);}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-\[background-color\,box-shadow\]{transition-property:background-color,box-shadow;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-\[background-color\,opacity\]{transition-property:background-color,opacity;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-\[transform\,background-color\]{transition-property:transform,background-color;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-\[width\]{transition-property:width;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-opacity{transition-property:opacity;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.transition-transform{transition-property:transform;transition-timing-function:var(--zg-motion-hover-ease);transition-duration:var(--zg-motion-hover-duration);}.duration-150{transition-duration:150ms;}.duration-settle{transition-duration:var(--zg-motion-settle-duration);}.duration-snap{transition-duration:var(--zg-motion-snap-duration);}.-ease{transition-timing-function:calc(var(--zg-motion-hover-ease) * -1);}.ease{transition-timing-function:var(--zg-motion-hover-ease);}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}.ease-settle{transition-timing-function:var(--zg-motion-settle-ease);}.ease-snap{transition-timing-function:var(--zg-motion-snap-ease);}.disabled\:opacity-zg-disabled:disabled{opacity:var(--zg-disabled-opacity);}.z-zg-float{z-index:var(--zg-z-float);}.z-zg-overlay{z-index:var(--zg-z-overlay);}.z-zg-tooltip{z-index:var(--zg-z-tooltip);}.bg-zg-danger\/10{background-color:color-mix(in srgb, var(--zg-danger) 10%, transparent);}.bg-zg-warn\/10{background-color:color-mix(in srgb, var(--zg-warn) 10%, transparent);}.border-zg-danger\/30{border-color:color-mix(in srgb, var(--zg-danger) 30%, transparent);}.text-zg-accent-fill-fg\/80{color:color-mix(in srgb, var(--zg-accent-fill-fg) 80%, transparent);}.text-zg-success\/80{color:color-mix(in srgb, var(--zg-success) 80%, transparent);}.text-zg-text\/80{color:color-mix(in srgb, var(--zg-text) 80%, transparent);}.hover\:\!bg-zg-danger\/10:hover{background-color:color-mix(in srgb, var(--zg-danger) 10%, transparent) !important;}.hover\:before\:bg-zg-danger\/10:hover::before{background-color:color-mix(in srgb, var(--zg-danger) 10%, transparent);}.before\:bg-zg-danger\/10::before{background-color:color-mix(in srgb, var(--zg-danger) 10%, transparent);}@media (min-width: 640px){.sm\:grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr);}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.sm\:inline{display:inline;}.sm\:w-40{width:10rem;}.sm\:flex-row{flex-direction:row;}.sm\:items-center{align-items:center;}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem;}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.md\:hidden{display:none;}.md\:flex{display:flex;}}@media (min-width: 1024px){.lg\:sticky{position:sticky;}.lg\:top-12{top:3rem;}.lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.lg\:gap-12{gap:3rem;}.lg\:px-14{padding-left:3.5rem;padding-right:3.5rem;}}/* Design system (tokens, primitives, motion, component styles): @zidane/ui. App styles follow. */
/*
 * The design system's stylesheet, in cascade order: tokens, surface
 * primitives, motion, component styles, then the chat layer's (session
 * list, transcript, composer), then the command palette, the setup
 * wizard, then the code editor and the terminal. Apps import this one file at the top of their
 * own stylesheet.
 */
/* ---------------------------------------------------------------------------
 * Design tokens.
 *
 * Three layers, top to bottom:
 *
 *   1. Role tokens: a `ResolvedPalette` (`theme/derive.ts`) as css vars
 *      (`theme/css-vars.ts`). The values below are the first-paint
 *      fallbacks for the default dark theme. The desktop app writes the
 *      user's theme inline on <html> at runtime; a static site renders a
 *      stylesheet per appearance (`theme/stylesheet.ts`).
 *   2. Contrast layer: turns `--zg-text-raw` & co into the `--zg-text`
 *      family every component reads. One user control (`--zg-contrast-*`)
 *      fades text toward the canvas (<100) or pushes it toward pure
 *      white/black (>100) for the whole UI at once.
 *   3. Legacy aliases: the pre-v2 names, kept as `var()` references so the
 *      several hundred existing call sites keep working. New code uses the
 *      new names.
 *
 * Rules: no raw hex in components; no mixing toward white to make a
 * surface "elevated"; the ramp is derived per appearance in `derive.ts`.
 * ------------------------------------------------------------------------- */
:root {
  /* 1. Role tokens (fallbacks for the default dark theme; DEFAULT_THEME through theme/css-vars.ts) */
  --zg-bg: #0d1013;
  --zg-surface-1: #15181b;
  --zg-surface-2: #1d2023;
  --zg-surface-3: #24272a;
  --zg-bg-selected: #202326;
  --zg-hover-wash: rgba(255, 255, 255, 0.05);

  --zg-border-raw: #262a2d;
  --zg-border-strong: #373c3f;
  --zg-ring: #26a9f1;

  --zg-text-raw: #e5e8ec;
  --zg-text-muted-raw: #9499a0;
  --zg-text-subtle-raw: #5f636a;

  --zg-accent: #26a9f1;
  --zg-accent-hover: #5bbfff;
  --zg-accent-soft: rgba(38, 169, 241, 0.12);
  --zg-accent-soft-strong: rgba(38, 169, 241, 0.2);
  --zg-accent-wash: rgba(38, 169, 241, 0.2);
  --zg-accent-fg: #0d1013;
  --zg-accent-fill: #079ce3;
  --zg-accent-fill-hover: #0688c7;
  --zg-accent-fill-fg: #ffffff;
  --zg-accent-alt: #52cd86;
  --zg-model: #85cff3;

  --zg-success: #4ade80;
  --zg-success-soft: rgba(74, 222, 128, 0.14);
  --zg-warn: #f3b94c;
  --zg-warn-soft: rgba(243, 185, 76, 0.14);
  --zg-danger: #f75d59;
  --zg-danger-soft: rgba(247, 93, 89, 0.14);
  --zg-danger-fill: #f75d59;
  --zg-danger-fill-hover: #e54c4a;
  --zg-danger-fill-fg: #ffffff;
  --zg-info: #60a5fa;
  --zg-info-soft: rgba(96, 165, 250, 0.14);

  /* Decorative fills (dots, the orb, window lights): the status tone in dark, a vivid lift in light. */
  --zg-accent-dot: #26a9f1;
  --zg-accent-alt-dot: #52cd86;
  --zg-success-dot: #4ade80;
  --zg-warn-dot: #f3b94c;
  --zg-danger-dot: #f75d59;
  --zg-info-dot: #60a5fa;
  /* The orb's shading (SphereShading in derive.ts). */
  --zg-orb-tone: #000000;
  --zg-orb-shade: 38%;
  --zg-orb-rim: 60%;
  --zg-orb-glow: 1;

  --zg-code-bg: #111417;
  --zg-code-fg: #e5e8ec;
  --zg-selection: rgba(38, 169, 241, 0.28);
  --zg-scrim: rgba(0, 0, 0, 0.6);
  --zg-shadow: rgba(0, 0, 0, 0.55);

  --zg-diff-add-bg: #192b23;
  --zg-diff-remove-bg: #2e1d1e;
  --zg-diff-add-content-bg: #224632;
  --zg-diff-remove-content-bg: #4b2828;
  --zg-diff-add-fg: #4ade80;
  --zg-diff-remove-fg: #f75d59;

  --zg-chip-default-bg: #26a9f1;
  --zg-chip-default-fg: #0d1013;
  --zg-chip-skills-bg: #26a9f1;
  --zg-chip-skills-fg: #0d1013;
  --zg-chip-files-bg: #85cff3;
  --zg-chip-files-fg: #0d1013;

  --zg-throbber-a: #26a9f1;
  --zg-throbber-b: #52cd86;
  --zg-money: var(--zg-text-muted);

  /* 2. Contrast layer. `apply.ts` writes base/boost/target; identity here. */
  --zg-contrast-base: 100%;
  --zg-contrast-boost: 0%;
  --zg-contrast-boost-border: 0%;
  --zg-contrast-target: #ffffff;

  /* Surface ladder (see derive.ts `SurfaceLadder`): compresses toward the
     canvas below contrast 100; past 150 hairlines take the full border and
     shadows are `none` (flat mode, `depthToCssVars` in theme/css-vars.ts). */
  --zg-depth-mix: 100%;
  --zg-depth-hairline-mix: 100%;
  /* Defaults so nothing paints with an undefined shadow before the theme applies. */
  --zg-shadow-raised: none;
  --zg-shadow-live: none;
  --zg-shadow-inset: none;
  --zg-shadow-well: none;
  --zg-shadow-fill: none;
  --zg-fill-sheen: none;
  --zg-shadow-float: 0 12px 32px -8px var(--zg-shadow);
  --zg-row-hover: var(--zg-hover-wash);
  /* Radius scale: surfaces pick from it, never ad hoc. The composer's 24 / 28
     are the one deliberate exception (concentric with the send button). */
  --zg-radius-xs: 4px;
  --zg-radius-sm: 6px;
  --zg-radius-md: 8px;
  --zg-radius-lg: 12px;
  --zg-radius-xl: 16px;

  /* Interface type scale: every size outside the transcript and composer
     bodies comes from it, never ad hoc (scale-guard.test.ts). In Uno:
     `text-zg-badge` … `text-zg-body` (font-size only, line-height untouched).
       badge  count badges and keycap glyphs, nothing that is read as text
       meta   the technical voice (.zg-meta), captions, hints
       label  secondary text: descriptions, small rows and controls
       ui     controls and rows
       body   reading text outside the transcript
       title  the heading of a page-sized view: a wizard step, a welcome screen */
  --zg-font-size-badge: 10px;
  --zg-font-size-meta: 11px;
  --zg-font-size-label: 12px;
  --zg-font-size-ui: 13px;
  --zg-font-size-body: 14px;
  --zg-font-size-title: 20px;

  /* One disabled look for every control (`disabled:opacity-zg-disabled`). */
  --zg-disabled-opacity: 0.5;

  /* Layers. Overlays and floats share a layer: a popover opened from a
     dialog is portalled after it and stacks above by document order. */
  --zg-z-overlay: 50;
  --zg-z-float: 50;
  --zg-z-tooltip: 110;

  /* Typography. Written inline by `theme/fonts.ts` when the user picks a
     font; these are the system-first defaults. `chat` is the transcript
     body, `prompt` the composer, `ui` everything else. */
  --zg-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --zg-font-chat: var(--zg-font-ui);
  --zg-font-prompt: var(--zg-font-chat);
  --zg-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --zg-font-size-chat: 14px;
  --zg-font-size-prompt: 14px;
  --zg-font-size-code: 12px;

  /* Motion. Strong custom easings: bare `ease-out` is too gentle for UI;
     this curve has the punch that makes animations feel intentional. */
  --zg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* iOS-flavored drawer/modal curve. Used on the modal scrim + panel
     pop-in so the entrance feels native rather than CSS-default. */
  --zg-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Motion vocabulary (motion/springs.ts): `--zg-motion-<name>-duration` /
   `-ease` and the shorthand `--zg-motion-<name>` for snap, pop, panel, slide,
   settle, exit (movement), fade, fade-out (opacity / colour, never sprung),
   menu, menu-exit (popups: one tween, an 80ms fade under reduced) and hover
   (colour feedback); `--zg-panel-ms` / `-ease` for the layout
   panels. Static fallbacks equal to `motionVars()` per mode (springs.test.ts
   keeps them in sync), keyed on html[data-springs] / html[data-motion], so a
   consumer without the JS still animates sensibly; `applyMotionVars` /
   `MotionProvider` override them inline with the live values (the panel
   slider). Edit springs.ts first; the test prints the values to paste. */
/* prettier-ignore */
:root {
  --zg-motion-snap-duration: 550ms;
  --zg-motion-snap-ease: linear(0, 0.1312, 0.3755, 0.6068, 0.7811, 0.895, 0.9609, 0.9941, 1.0078, 1.0111, 1.0098, 1.0071, 1.0045, 1.0025, 1.0012, 1.0005, 1, 1);
  --zg-motion-pop-duration: 450ms;
  --zg-motion-pop-ease: linear(0, 0.1874, 0.4853, 0.7206, 0.8675, 0.9464, 0.9833, 0.9981, 1.0025, 1.0029, 1.0021, 1.0012, 1.0006, 1, 1);
  --zg-motion-panel-duration: 550ms;
  --zg-motion-panel-ease: linear(0, 0.1004, 0.2914, 0.4824, 0.6405, 0.7595, 0.8439, 0.9013, 0.9391, 0.9632, 0.9783, 0.9874, 0.9929, 0.9961, 0.998, 0.999, 0.9995, 1);
  --zg-motion-slide-duration: 450ms;
  --zg-motion-slide-ease: linear(0, 0.0912, 0.2731, 0.4632, 0.6265, 0.7529, 0.844, 0.9062, 0.9466, 0.9717, 0.9865, 0.9947, 0.9989, 1.0008, 1);
  --zg-motion-settle-duration: 450ms;
  --zg-motion-settle-ease: linear(0, 0.1406, 0.3835, 0.5998, 0.7576, 0.8611, 0.9243, 0.9607, 0.9807, 0.9912, 0.9963, 0.9987, 0.9997, 1, 1);
  --zg-motion-exit-duration: 140ms;
  --zg-motion-exit-ease: cubic-bezier(0.4, 0, 1, 1);
  --zg-motion-fade-duration: 200ms;
  --zg-motion-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --zg-motion-fade-out-duration: 140ms;
  --zg-motion-fade-out-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --zg-motion-menu-duration: 140ms;
  --zg-motion-menu-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-motion-menu-exit-duration: 90ms;
  --zg-motion-menu-exit-ease: cubic-bezier(0.4, 0, 1, 1);
  --zg-motion-hover-duration: 150ms;
  --zg-motion-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zg-panel-ms: 350ms;
  --zg-panel-ease: linear(0, 0.2065, 0.508, 0.73, 0.8633, 0.935, 0.9707, 0.9875, 0.995, 0.9982, 0.9994, 1);
  --zg-motion-snap: var(--zg-motion-snap-duration) var(--zg-motion-snap-ease);
  --zg-motion-pop: var(--zg-motion-pop-duration) var(--zg-motion-pop-ease);
  --zg-motion-panel: var(--zg-motion-panel-duration) var(--zg-motion-panel-ease);
  --zg-motion-slide: var(--zg-motion-slide-duration) var(--zg-motion-slide-ease);
  --zg-motion-settle: var(--zg-motion-settle-duration) var(--zg-motion-settle-ease);
  --zg-motion-exit: var(--zg-motion-exit-duration) var(--zg-motion-exit-ease);
  --zg-motion-fade: var(--zg-motion-fade-duration) var(--zg-motion-fade-ease);
  --zg-motion-fade-out: var(--zg-motion-fade-out-duration) var(--zg-motion-fade-out-ease);
  --zg-motion-menu: var(--zg-motion-menu-duration) var(--zg-motion-menu-ease);
  --zg-motion-menu-exit: var(--zg-motion-menu-exit-duration) var(--zg-motion-menu-exit-ease);
  --zg-motion-hover: var(--zg-motion-hover-duration) var(--zg-motion-hover-ease);
}
/* prettier-ignore */
html[data-springs='off'] {
  --zg-motion-snap-duration: 240ms;
  --zg-motion-snap-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-motion-pop-duration: 160ms;
  --zg-motion-pop-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-motion-panel-duration: 200ms;
  --zg-motion-panel-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --zg-motion-slide-duration: 220ms;
  --zg-motion-slide-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-motion-settle-duration: 240ms;
  --zg-motion-settle-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --zg-panel-ms: 200ms;
  --zg-panel-ease: cubic-bezier(0.32, 0.72, 0, 1);
}
/* prettier-ignore */
html[data-motion='reduced'] {
  --zg-motion-snap-duration: 0ms;
  --zg-motion-snap-ease: linear;
  --zg-motion-pop-duration: 0ms;
  --zg-motion-pop-ease: linear;
  --zg-motion-panel-duration: 0ms;
  --zg-motion-panel-ease: linear;
  --zg-motion-slide-duration: 0ms;
  --zg-motion-slide-ease: linear;
  --zg-motion-settle-duration: 0ms;
  --zg-motion-settle-ease: linear;
  --zg-motion-exit-duration: 0ms;
  --zg-motion-exit-ease: linear;
  --zg-motion-fade-duration: 140ms;
  --zg-motion-fade-ease: ease-out;
  --zg-motion-fade-out-duration: 140ms;
  --zg-motion-fade-out-ease: ease-out;
  --zg-motion-menu-duration: 80ms;
  --zg-motion-menu-ease: ease-out;
  --zg-motion-menu-exit-duration: 80ms;
  --zg-motion-menu-exit-ease: ease-out;
  --zg-motion-hover-duration: 150ms;
  --zg-motion-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zg-panel-ms: 0ms;
  --zg-panel-ease: linear;
}
/* prettier-ignore */
html[data-motion='off'] {
  --zg-motion-snap-duration: 0ms;
  --zg-motion-snap-ease: linear;
  --zg-motion-pop-duration: 0ms;
  --zg-motion-pop-ease: linear;
  --zg-motion-panel-duration: 0ms;
  --zg-motion-panel-ease: linear;
  --zg-motion-slide-duration: 0ms;
  --zg-motion-slide-ease: linear;
  --zg-motion-settle-duration: 0ms;
  --zg-motion-settle-ease: linear;
  --zg-motion-exit-duration: 0ms;
  --zg-motion-exit-ease: linear;
  --zg-motion-fade-duration: 0ms;
  --zg-motion-fade-ease: linear;
  --zg-motion-fade-out-duration: 0ms;
  --zg-motion-fade-out-ease: linear;
  --zg-motion-menu-duration: 0ms;
  --zg-motion-menu-ease: linear;
  --zg-motion-menu-exit-duration: 0ms;
  --zg-motion-menu-exit-ease: linear;
  --zg-motion-hover-duration: 0ms;
  --zg-motion-hover-ease: linear;
  --zg-panel-ms: 0ms;
  --zg-panel-ease: linear;
}

/* Derived tokens. A custom property that reads others resolves on the element
   that declares it, so these are declared again on `.zg-theme-scope`: a
   subtree that sets its own role tokens (a theme preview, an embedded widget)
   carries the class and its text, borders and surfaces follow those tokens. */
:root,
.zg-theme-scope {
  --zg-text: color-mix(
    in oklab,
    color-mix(in oklab, var(--zg-text-raw) var(--zg-contrast-base), var(--zg-bg)),
    var(--zg-contrast-target) var(--zg-contrast-boost)
  );
  --zg-text-muted: color-mix(
    in oklab,
    color-mix(in oklab, var(--zg-text-muted-raw) var(--zg-contrast-base), var(--zg-bg)),
    var(--zg-contrast-target) var(--zg-contrast-boost)
  );
  --zg-text-subtle: color-mix(
    in oklab,
    color-mix(in oklab, var(--zg-text-subtle-raw) var(--zg-contrast-base), var(--zg-bg)),
    var(--zg-contrast-target) var(--zg-contrast-boost)
  );
  /* Borders only take a quarter of the boost (see apply.ts). */
  --zg-border: color-mix(in oklab, var(--zg-border-raw), var(--zg-contrast-target) var(--zg-contrast-boost-border));

  --zg-tray: color-mix(in oklab, var(--zg-tray-raw, var(--zg-bg)) var(--zg-depth-mix), var(--zg-bg));
  --zg-raised: color-mix(in oklab, var(--zg-raised-raw, var(--zg-surface-1)) var(--zg-depth-mix), var(--zg-bg));
  --zg-track: color-mix(in oklab, var(--zg-track-raw, var(--zg-surface-2)) var(--zg-depth-mix), var(--zg-bg));
  --zg-overlay: color-mix(in oklab, var(--zg-overlay-raw, var(--zg-surface-3)) var(--zg-depth-mix), var(--zg-bg));
  --zg-tray-ring: color-mix(in oklab, var(--zg-tray-ring-raw, var(--zg-tray)) var(--zg-depth-mix), var(--zg-bg));
  /* Past contrast 150 (flat), the raised edge is the full hairline again. */
  --zg-raised-edge: color-mix(
    in oklab,
    var(--zg-raised-edge-raw, var(--zg-hairline)) var(--zg-depth-hairline-mix),
    var(--zg-hairline)
  );
  /* Translucent: a well shades whatever it is carved into. */
  --zg-well: color-mix(in oklab, var(--zg-well-raw, var(--zg-surface-2)) var(--zg-depth-mix), transparent);
  /* The keyboard cursor / current row: a firmer wash of the text color. */
  --zg-row-active: color-mix(in oklab, var(--zg-text) 9%, transparent);
  --zg-hairline: color-mix(
    in oklab,
    var(--zg-hairline-raw, var(--zg-border-raw)) var(--zg-depth-hairline-mix),
    var(--zg-border)
  );

  /* 3. Legacy aliases. Do not add new consumers. */
  --zg-bg-elevated: var(--zg-surface-1);
  --zg-bg-hover: var(--zg-surface-2);
  --zg-error: var(--zg-danger);
  --zg-border-active: var(--zg-ring);
}

/* Appearance. `apply.ts` toggles these classes; index.html sets the initial
   one from persisted state so the first paint is already correct. */
:root,
:root.dark,
.zg-theme-scope.dark {
  color-scheme: dark;
}

:root.light,
.zg-theme-scope.light {
  color-scheme: light;
}
/*
 * Surface primitives and shared component styles: the one depth grammar
 * (ui/README.md "Surfaces"). Classes only; values come from tokens.css.
 */

/* The `hidden` attribute must beat display utilities (`flex`, `grid`, ...)
   on the same element; the UA rule alone loses to any author `display`.
   Parked panels and inactive editor tabs rely on this. */
[hidden] {
  display: none !important;
}

/* Theme swap: kill every transition for one frame so surfaces snap together
   instead of cross-fading at their own speeds (`withoutTransitions`). */
.zg-no-transitions,
.zg-no-transitions * {
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
}

/* Press feedback: the surface gives, the content holds still.
   A pressable paints its fill, edge and shadow on a `::before` layer behind
   its content, and a press scales that layer only (the standalone `scale`, on
   `snap`: a hint of give, instant under reduced motion). The glyph and the
   label are never transformed, so a press never resamples an icon or nudges
   it by a subpixel. Surfaces reach the layer three ways:
   - the kit's surface classes paint it themselves (`.zg-segment-item`,
     `.zg-raised`, `.zg-fill`, `.zg-disclosure`, below);
   - utilities target it: `before:bg-*`, `hover:before:bg-*`, never a bare
     `bg-*` on a pressable (it would stay put while the layer gives);
   - a surface whose press lives on a control inside it (a tab pill, a
     session row) is a `.zg-press-host`: it gives with that control.
   The scales, felt on the surface:
   - `zg-press` (0.97): primary buttons (Send, Save, Choose folder). Smaller
     than 0.95 feels exaggerated, larger feels mushy.
   - `zg-press-soft` (0.94): small icon buttons, where the visual delta at
     16px needs a slightly stronger compression.
   - `zg-press-subtle` (0.985): compound rows and tabs.
   The colour list stays on the element: these classes load after the
   utilities, so a bare transition list would cancel a sibling
   `transition-colors` and make every hover snap. */
:where(.zg-press, .zg-press-soft, .zg-press-subtle, .zg-press-host, .zg-segment-item, .zg-disclosure) {
  position: relative;
  isolation: isolate;
  /* The surface is the ::before layer; the element paints nothing itself. The
     reset keeps a <button>'s native face, which showed grey under a wash.
     Zero specificity: any background a class sets still wins. */
  background-color: transparent;
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle, .zg-press-host, .zg-segment-item, .zg-disclosure)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition:
    scale var(--zg-motion-snap),
    background-color var(--zg-motion-hover),
    border-color var(--zg-motion-hover),
    box-shadow var(--zg-motion-hover);
}
.zg-press,
.zg-press-soft,
.zg-press-subtle {
  transition:
    color var(--zg-motion-hover),
    background-color var(--zg-motion-hover),
    border-color var(--zg-motion-hover),
    box-shadow var(--zg-motion-hover),
    opacity var(--zg-motion-hover);
}

.zg-press:active:not(:disabled)::before {
  scale: 0.97;
}

.zg-press-soft:active:not(:disabled)::before {
  scale: 0.94;
}

.zg-press-subtle:active:not(:disabled)::before,
.zg-press-host:has(.zg-press-subtle:active:not(:disabled))::before {
  scale: 0.985;
}

/* Tooltip (`Tooltip.tsx`): visibility, the fade + 2px rise and the show
   delay are driven inline by the component (one timing model for inline and
   portalled bubbles). This is the hidden state before it renders. */
.zg-tooltip {
  opacity: 0;
}

/*
 * Surface primitives: the one depth grammar (gui/CLAUDE.md "Surfaces").
 *   .zg-tray     the bed a surface sits in (pressed in from the top)
 *   .zg-raised   a surface or control lifted off its tray (light from above)
 *   .zg-segment  one track for grouped controls; the open / pressed / active
 *                item is the only raised chip in it
 *   .zg-meta     the technical voice: mono, tabular, small, muted
 *   .zg-keycap   a key, drawn as a key
 * `data-live` on a .zg-raised lifts it one step while it is live.
 */
.zg-tray {
  background: var(--zg-tray);
  box-shadow: var(--zg-shadow-inset);
}
.zg-raised {
  background: var(--zg-raised);
  border-color: var(--zg-raised-edge);
  box-shadow: var(--zg-shadow-raised);
  transition:
    box-shadow var(--zg-motion-fade),
    background-color var(--zg-motion-fade),
    border-color var(--zg-motion-fade);
}
.zg-raised[data-live] {
  box-shadow: var(--zg-shadow-live);
}
/* A raised pressable: the chip is the press layer. Its edge moves there too:
   a transparent border image hides the element's own (the colour stays
   computed, for the layer to inherit, a `border-transparent` included). */
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-raised {
  background: transparent;
  box-shadow: none;
  border-image: linear-gradient(transparent, transparent) 1;
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-raised::before {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
}
/* Over a 1px border the layer covers the border box, as a background would. */
:where(.zg-press, .zg-press-soft, .zg-press-subtle).border::before {
  inset: -1px;
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-raised.border::before {
  border: 1px solid;
  border-color: inherit;
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-raised[data-live]::before {
  box-shadow: var(--zg-shadow-live);
}
.zg-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--zg-track);
  box-shadow: var(--zg-shadow-inset);
}
.zg-segment-item {
  transition: color var(--zg-motion-hover);
}
.zg-segment-item:hover:not(:disabled)::before,
[aria-expanded='true'] > .zg-segment-item::before,
.zg-segment-item[aria-expanded='true']::before,
.zg-segment-item[data-active]::before {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
}
.zg-segment-item:hover:not(:disabled),
[aria-expanded='true'] > .zg-segment-item,
.zg-segment-item[aria-expanded='true'],
.zg-segment-item[data-active] {
  color: var(--zg-text);
}
.zg-meta {
  font-family: var(--zg-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--zg-font-size-meta);
  letter-spacing: 0.01em;
  color: var(--zg-text-muted);
}
.zg-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--zg-radius-xs);
  font-family: var(--zg-font-mono);
  font-size: var(--zg-font-size-badge);
  line-height: 1;
  color: var(--zg-text-muted);
  background: var(--zg-raised);
  box-shadow:
    inset 0 -1px 0 var(--zg-hairline),
    0 0 0 1px var(--zg-hairline);
}
/* Floating surfaces (menus, popovers, palette, modals, hover cards): the
   overlay tone, one radius, the float shadow. Enter / exit motion belongs to
   the component that floats it (FloatingSurface: motion springs). */
.zg-float {
  background: var(--zg-overlay);
  border-radius: var(--zg-radius-lg);
  box-shadow: var(--zg-shadow-float);
  color: var(--zg-text);
}
/* The keyboard focus ring for controls (buttons, icon buttons, segments, tabs). */
.zg-focus-ring:focus-visible {
  outline: 2px solid var(--zg-ring);
  outline-offset: 1px;
}
/* A layer that focused itself (nothing focusable inside) draws no ring round the viewport. */
[data-zg-overlay]:focus {
  outline: none;
}
/* Not yet placed: the pointer belongs to what is underneath. */
.zg-float[data-state='closed'] {
  pointer-events: none;
}
/* Rows in any list or menu: one height scale, one hover, one "cursor". */
.zg-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* In a scrolling list the rows keep their height; the list scrolls. */
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--zg-radius-md);
  background: transparent;
  color: var(--zg-text);
  font-size: var(--zg-font-size-ui);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--zg-motion-hover),
    color var(--zg-motion-hover);
}
.zg-menu-row[data-size='sm'] {
  min-height: 26px;
  font-size: var(--zg-font-size-label);
  gap: 8px;
}
.zg-menu-row[data-size='lg'] {
  min-height: 40px;
  padding: 6px 10px;
  align-items: flex-start;
}
.zg-menu-row:hover:not(:disabled) {
  background: var(--zg-row-hover);
}
.zg-menu-row[data-active],
.zg-menu-row[data-highlighted],
.zg-menu-row[data-state='open'],
.zg-menu-row:focus-visible {
  background: var(--zg-row-active);
  outline: none;
}
/* A list whose active rows come in runs (the Diffs files on screen): each run
   reads as one block, rounded only at its ends. */
.zg-run-list li:has(+ li > .zg-menu-row[data-active]) > .zg-menu-row[data-active] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.zg-run-list li:has(> .zg-menu-row[data-active]) + li > .zg-menu-row[data-active] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* A match in search results (the GUI's code/find/SearchPanel.tsx): the find highlight's tone. */
.zg-search-hit {
  background: color-mix(in srgb, var(--zg-accent) 30%, transparent);
  color: var(--zg-text);
  border-radius: 2px;
}
/* Hover would punch a second tone into the block. */
.zg-run-list .zg-menu-row[data-active]:hover:not(:disabled) {
  background: var(--zg-row-active);
}
/* A selected nav item (settings rail, tabs rendered as rows) is the raised chip. */
.zg-menu-row[aria-selected='true']:not([role='option']) {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
}
/* Radix radio items mark the current choice with `data-state`; MenuRow does it with its `checked` prop. */
.zg-menu-row[role='menuitemradio'][data-state='checked'] {
  font-weight: 500;
}
.zg-menu-row[data-destructive] {
  color: var(--zg-danger);
}
.zg-menu-row[data-destructive]:hover:not(:disabled) {
  background: var(--zg-danger-soft);
}
.zg-menu-row:disabled,
.zg-menu-row[aria-disabled='true'] {
  opacity: var(--zg-disabled-opacity);
  cursor: default;
}
.zg-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--zg-hairline);
}
/* A header that opens / closes what follows (thinking, tool calls, workers,
   folds): quiet text that washes on hover. Layout stays with the caller. */
.zg-disclosure {
  margin-inline: -6px;
  padding-inline: 6px;
  border: 0;
  border-radius: var(--zg-radius-sm);
  background: transparent;
  color: var(--zg-text-muted);
  cursor: pointer;
  max-width: 100%;
  transition: color var(--zg-motion-hover);
}
.zg-disclosure:hover {
  color: var(--zg-text);
}
.zg-disclosure:hover::before {
  background: var(--zg-row-hover);
}

/* The one uppercase section label. */
.zg-section-label {
  font-size: var(--zg-font-size-badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* A real label, read like any text: the muted tone (subtle is for decoration). */
  color: var(--zg-text-muted);
}
/* Inputs are wells: set into their surface, lit edge on focus. */
/* Inputs: carved into their host surface, never a tone of their own. The fill
   is a translucent shade and the edges follow the light from above (shade
   under the top edge, a lip of light on the bottom), so a field reads the
   same on the canvas, the sidebar tray and a raised card. */
.zg-well {
  background: var(--zg-well);
  border: 1px solid transparent;
  border-radius: var(--zg-radius-md);
  box-shadow: var(--zg-shadow-well);
  color: var(--zg-text);
  transition:
    border-color var(--zg-motion-hover),
    box-shadow var(--zg-motion-hover);
}
.zg-well:focus,
.zg-well:focus-within {
  outline: none;
  border-color: color-mix(in oklab, var(--zg-ring) 60%, transparent);
  box-shadow:
    var(--zg-shadow-well),
    0 0 0 3px color-mix(in oklab, var(--zg-ring) 18%, transparent);
}
/* A file dragged over a well that takes it (focused or not). */
.zg-well[data-drop] {
  border-color: var(--zg-accent);
}

/* The solid fill (dialog commits, Send): the same light as a raised chip,
   in the accent. A sheen from above, a bright top edge, a darker bottom one
   and a drop tinted by the fill. Hover only changes the base colour, so the
   sheen stays put. `.zg-fill-danger` is the same fill in danger, for a
   destructive commit (Delete, Deny). */
.zg-fill {
  --fill: var(--zg-accent-fill);
  --fill-hover: var(--zg-accent-fill-hover);
  --fill-fg: var(--zg-accent-fill-fg);
  background-color: var(--fill);
  background-image: var(--zg-fill-sheen);
  color: var(--fill-fg);
  box-shadow: var(--zg-shadow-fill);
}
.zg-fill.zg-fill-danger {
  --fill: var(--zg-danger-fill);
  --fill-hover: var(--zg-danger-fill-hover);
  --fill-fg: var(--zg-danger-fill-fg);
}
.zg-fill:hover:not(:disabled) {
  background-color: var(--fill-hover);
}
/* A filled pressable: the fill is the press layer. */
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-fill,
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-fill:hover:not(:disabled) {
  background: none;
  box-shadow: none;
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-fill::before {
  background-color: var(--fill);
  background-image: var(--zg-fill-sheen);
  box-shadow: var(--zg-shadow-fill);
}
:where(.zg-press, .zg-press-soft, .zg-press-subtle).zg-fill:hover:not(:disabled)::before {
  background-color: var(--fill-hover);
}
/* Status set into a surface (the run chip, usage, counts). */
.zg-track-chip {
  background: var(--zg-track);
  box-shadow: var(--zg-shadow-inset);
  border-radius: 9999px;
}

/* CodeFrame (CodeFrame.tsx): the caption icon and the copy glyph sit on the
   code's own side padding, the copy centred on the caption row or on the
   first line (a 24px button round a 12px glyph: 6px either side). */
.zg-code-frame {
  --zg-code-pad-x: 12px;
}
.zg-code-caption {
  padding-inline: var(--zg-code-pad-x) calc(var(--zg-code-pad-x) - 6px);
}
/* The uncaptioned frame's controls (wrap, copy), over its top-right corner. */
.zg-code-actions {
  position: absolute;
  z-index: 10;
  top: 5px;
  right: calc(var(--zg-code-pad-x) - 6px);
}
/* Revealed controls (CopyButton `reveal`, CodeFrame's Wrap toggle): shown on
   hover of their group, focused, or just copied. */
.zg-reveal {
  opacity: 0;
  transition:
    opacity var(--zg-motion-hover),
    color var(--zg-motion-hover);
}
.group:hover .zg-reveal,
.zg-reveal:focus-visible,
.zg-reveal[data-copied='true'] {
  opacity: 1;
}
@media (hover: none) {
  .zg-reveal {
    opacity: 1;
  }
}

/* CodeFrame's horizontal scroller (focusable while it scrolls). */
.zg-code-scroll {
  overflow-x: auto;
}
/* Its Wrap toggle on: long lines wrap at the frame's edge instead of scrolling. */
.zg-code-scroll[data-wrap] pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.zg-code-scroll:focus-visible {
  outline: 2px solid var(--zg-ring);
  outline-offset: -2px;
  border-radius: inherit;
}

/* Code set into its surface: the code tone, a whisper of inset. */
.zg-code-panel {
  background: var(--zg-code-bg);
  color: var(--zg-code-fg);
  border-radius: var(--zg-radius-md);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
}

.zg-keycap-sm {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--zg-radius-xs);
  font-size: var(--zg-font-size-badge);
}

/* --- Nav rows -------------------------------------------------------------------
 * The current page in a nav list (`aria-current="page"`, set by a router
 * link) is the raised chip, like a selected nav row. */
.zg-menu-row[aria-current='page'] {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
  color: var(--zg-text);
  font-weight: 500;
}

/* --- Overlays (`Overlay`) ------------------------------------------------------
 * The scrim fades on motion (`fade` / `fade-out`). The caller's surface flips
 * `data-state` open / closed and transitions here: movement on `pop` /
 * `panel`, opacity on `fade`; the closed state carries the closing curves
 * (`exit` / `fade-out`), so each direction plays its own. */
.zg-scrim {
  background: var(--zg-scrim);
}
/* A dialog surface in an Overlay pops from a hair under full size (only there:
   FloatingSurface's `.zg-float` is animated by motion). */
[data-zg-overlay] .zg-float[data-state] {
  transition:
    opacity var(--zg-motion-fade),
    transform var(--zg-motion-pop);
}
[data-zg-overlay] .zg-float[data-state='closed'] {
  opacity: 0;
  transform: scale(0.97) translateY(var(--zg-float-nudge, -4px));
  transition:
    opacity var(--zg-motion-fade-out),
    transform var(--zg-motion-exit);
}
/* A sheet hanging from the top edge (mobile menus): slides and unclips down. */
.zg-sheet {
  clip-path: inset(0 0 0 0);
  transition:
    opacity var(--zg-motion-fade),
    transform var(--zg-motion-panel),
    clip-path var(--zg-motion-panel);
}
.zg-sheet[data-state='closed'] {
  opacity: 0;
  transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--zg-motion-fade-out),
    transform var(--zg-motion-exit),
    clip-path var(--zg-motion-exit);
}

/* Horizontal scroller edge fade: a side fades only while content is hidden
   past it, so an overflowing tab strip reads as "more this way" instead of a
   hard cut through a label. Driven by the element's own scroll timeline;
   without overflow the timeline is inactive and nothing is masked. */
@property --zg-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --zg-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
/* Wrapped in @supports: without scroll timelines the animations would jump to
   their end state and fade the start edge for good, over the first glyphs. */
@supports (animation-timeline: scroll()) {
  .zg-scroll-fade-x {
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 var(--zg-fade-start),
      #000 calc(100% - var(--zg-fade-end)),
      transparent
    );
    animation:
      zg-fade-start linear both,
      zg-fade-end linear both;
    animation-timeline: scroll(self inline);
  }
  /* The same, top to bottom: a long box fades only on the edge with more to scroll. */
  .zg-scroll-fade-y {
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 var(--zg-fade-start),
      #000 calc(100% - var(--zg-fade-end)),
      transparent
    );
    animation:
      zg-fade-start linear both,
      zg-fade-end linear both;
    animation-timeline: scroll(self block);
  }
}
/* Code fades only across its own inline padding, so the edge never dims a glyph
   in view (the 24px default ate the first characters of a scrolled line). */
.zg-code-scroll {
  --zg-fade-size: 0.75rem;
}
@keyframes zg-fade-start {
  from {
    --zg-fade-start: 0px;
  }
  8%,
  to {
    --zg-fade-start: var(--zg-fade-size, 24px);
  }
}
@keyframes zg-fade-end {
  from,
  92% {
    --zg-fade-end: var(--zg-fade-size, 24px);
  }
  to {
    --zg-fade-end: 0px;
  }
}
/*
 * Motion: the shared animations behind @zidane/ui/motion (Presence, Crossfade,
 * RollingText, SmoothWidth / HeldWidth, Grow, collapsibles, shimmer), the
 * icon swap, the status glyphs and the shared keyframes (`zg-fade-in` /
 * `zg-fade-out`, `zg-unblur` / `zg-blur-out`).
 *
 * One vocabulary (motion/springs.ts), consumed through the `--zg-motion-<name>`
 * vars (tokens.css fallbacks, `MotionProvider` / `applyMotionVars` live
 * values). The vars do the mode work (springs on / off, reduced, off), so no
 * rule here zeroes its own duration:
 *   - movement (transform, size, position) on a movement name: `snap`, `pop`,
 *     `panel`, `slide`, `settle`, leaving on `exit`;
 *   - opacity, colour and blur on `fade` / `fade-out`, never a spring: a
 *     keyframe that moved and faded is split into a transform-only keyframe
 *     plus the shared fade;
 *   - hover / press colour feedback on `hover`;
 *   - loops (shimmer, orbit, dots, breathe, spinners) keep their fixed loop
 *     timing and are stilled under reduced / off (`.zg-loop` for inline ones).
 * JS timers waiting on a CSS exit read the vars (`readExitMs`, presence.ts).
 */

/* --- Icon swap (`SwapIcon`) -------------------------------------------------
 *
 * Glyphs stacked in one box; `data-on` marks the one that shows (copy's
 * clipboard → check, a menu's list → close, appearance modes). Scale
 * 0.25 → 1 on `snap`, opacity and blur 4px → 0 on `fade`; the glyph
 * leaving takes `exit` / `fade-out`. Compositor-only properties: smooth
 * during a stream. */
.zg-swap {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
/* An opacity cross-fade only: the glyphs never scale, blur or move, so the
   one landing is as crisp as the one at rest. */
.zg-swap > * {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--zg-motion-fade-out);
}
.zg-swap > [data-on] {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}

.zg-shimmer {
  color: transparent;
  background: linear-gradient(
      100deg,
      var(--zg-text-muted) 0%,
      var(--zg-text-muted) 40%,
      var(--zg-text) 50%,
      var(--zg-text-muted) 60%,
      var(--zg-text-muted) 100%
    )
    0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: zg-shimmer 1.8s linear infinite;
}

html[data-motion='off'] .zg-shimmer,
html[data-motion='reduced'] .zg-shimmer {
  animation: none;
  color: inherit;
  background: none;
}
/* Rolling numbers (`RollingText` in motion/roll.tsx): each changed character slides
   through its own clipped cell, up when the value grows, down when it
   shrinks; unchanged characters never move. */
.zg-roll {
  display: inline-flex;
  white-space: pre;
}

.zg-roll-cell {
  display: inline-grid;
  overflow: hidden;
}

.zg-roll-cell > * {
  grid-area: 1 / 1;
}
/* The outgoing character is decoration: never selected or copied. */
.zg-roll-out {
  user-select: none;
}

/* In: the slide on `settle`, the fade on `fade`. Out: `exit` / `fade-out`.
   RollingText drops the outgoing layer once both have played (roll.tsx) and
   renders no roll at all under reduced / off motion. */
.zg-roll[data-dir='up'] .zg-roll-in {
  animation:
    zg-roll-in-up var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-roll[data-dir='up'] .zg-roll-out {
  animation:
    zg-roll-out-up var(--zg-motion-exit) both,
    zg-fade-out var(--zg-motion-fade-out) both;
}

.zg-roll[data-dir='down'] .zg-roll-in {
  animation:
    zg-roll-in-down var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-roll[data-dir='down'] .zg-roll-out {
  animation:
    zg-roll-out-down var(--zg-motion-exit) both,
    zg-fade-out var(--zg-motion-fade-out) both;
}
/* SmoothWidth: the outer box eases to the measured width of its content. */
.zg-smooth-width {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Size: `settle` (no visible bounce, so reflowing text never overshoots). */
  transition: width var(--zg-motion-settle);
}

.zg-smooth-width-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* HeldWidth: a trailing slot held to its widest content; content sits on
   the right edge and is revealed from the left as the slot grows. */
.zg-held-width {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
  /* Size: `settle`, like SmoothWidth. */
  transition: width var(--zg-motion-settle);
}

.zg-held-width-inner {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

/* State-flip motion (motion/swap.tsx). One motion for every loader / status
   swap in the app: incoming content scales in from 0.6 on `snap` and fades
   in on `fade`; outgoing scales out to 0.6 on `exit` and fades on
   `fade-out`. `Crossfade` stacks both in one grid cell so the slot never
   reflows; `Presence` keeps an exiting node mounted for the exit
   (`readExitMs`: 0 under off, so the swap is instant). The exit's transform
   has no fill: under reduced motion its 0ms leaves the glyph unscaled (a
   pure fade), and in full motion it ends with the fade, at opacity 0. */
.zg-crossfade {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}

.zg-crossfade-item {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
}

.zg-crossfade-item[data-state='enter'],
.zg-presence[data-state='enter'] {
  animation:
    zg-swap-in var(--zg-motion-snap) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-crossfade-item[data-state='exit'],
.zg-presence[data-state='exit'] {
  animation:
    zg-swap-out var(--zg-motion-exit),
    zg-fade-out var(--zg-motion-fade-out) both;
  pointer-events: none;
}
/* Text variant: a line of words, anchored left, never scaled. The outgoing
   line blurs and lifts away while the incoming one sharpens into place: the
   3px rise on `settle` (lift on `exit`), opacity and 5px blur on `fade`
   (`fade-out`). */
.zg-crossfade[data-variant='text'] {
  justify-items: start;
  max-width: 100%;
}

.zg-crossfade[data-variant='text'][data-align='end'] {
  justify-items: end;
}

.zg-crossfade[data-variant='text'] > .zg-crossfade-item {
  min-width: 0;
  max-width: 100%;
}

.zg-crossfade[data-variant='text'] > .zg-crossfade-item[data-state='enter'],
.zg-presence[data-variant='text'][data-state='enter'] {
  --zg-blur-from: 5px;
  animation:
    zg-text-rise var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
}

.zg-crossfade[data-variant='text'] > .zg-crossfade-item[data-state='exit'],
.zg-presence[data-variant='text'][data-state='exit'] {
  --zg-blur-to: 5px;
  animation:
    zg-text-lift var(--zg-motion-exit),
    zg-fade-out var(--zg-motion-fade-out) both,
    zg-blur-out var(--zg-motion-fade-out) both;
}

.zg-collapsible {
  display: grid;
  /* One column that always fits its container: an `auto` track grows to its
     content's min-content, so one long unbreakable line (a code block)
     widened the whole block past its column. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  opacity: 0;
  /* Closing (this state's curves): the rows on `exit`, opacity on `fade-out`;
     `useStaysMounted` (motion/collapse.ts) holds the content for
     `readExitMs()`. Opening: `settle` / `fade`. */
  transition:
    grid-template-rows var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out);
}

.zg-collapsible[data-open='true'] {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade);
}
/*
 * A block growing in from nothing and shrinking out (`Grow` in
 * motion/grow.tsx: a compact fold's steps, the earlier-messages
 * stack): the same grid-rows motion, run by the style engine every frame,
 * so a re-render never stalls it and an open block follows its content as
 * it streams. Its inset and gaps ease when it moves (a compact message going
 * from current into the earlier list). The clip
 * is vertical only: hover pills and the caret bleed sideways. Opening:
 * rows on `settle`, opacity on `fade`; shrinking out: `exit` / `fade-out`
 * (GrowPresence removes it after `readExitMs()`); the inset and gaps
 * always move on `settle`.
 */
.zg-grow {
  display: grid;
  /* Fits its container, whatever the content's longest line (see .zg-collapsible). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out),
    margin-left var(--zg-motion-settle);
}
.zg-grow[data-shown] {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade),
    margin-left var(--zg-motion-settle);
}
.zg-grow-clip {
  min-height: 0;
  overflow-x: visible;
  overflow-y: clip;
}
.zg-grow-gaps {
  transition: padding var(--zg-motion-settle);
}
.zg-grow-dot {
  opacity: 0;
  transition: opacity var(--zg-motion-fade-out);
}
.zg-grow-dot[data-shown] {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}

.zg-collapsible > .zg-collapsible-inner {
  overflow: hidden;
  min-height: 0;

  /*
   * Rows inside bleed their hover/selection background 6px past the text
   * column (`-mx-1.5 px-1.5`). `overflow: hidden` is required for the
   * expand animation, but it was cropping that bleed's left edge (rounded
   * corner cut flush). Widen the clip box by the bleed and pull it back,
   * so the animation still clips vertically while the background survives.
   */
  padding-inline: 6px;
  margin-inline: -6px;
}

@keyframes zg-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}

/* Movement keyframes are transform-only: each pairs with a shared fade. */
@keyframes zg-roll-in-up {
  from {
    transform: translateY(70%);
  }
}

@keyframes zg-roll-out-up {
  to {
    transform: translateY(-70%);
  }
}

@keyframes zg-roll-in-down {
  from {
    transform: translateY(-70%);
  }
}

@keyframes zg-roll-out-down {
  to {
    transform: translateY(70%);
  }
}

@keyframes zg-text-rise {
  from {
    transform: translateY(3px);
  }
  to {
    transform: none;
  }
}

@keyframes zg-text-lift {
  from {
    transform: none;
  }
  to {
    transform: translateY(-3px);
  }
}

@keyframes zg-swap-in {
  from {
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zg-swap-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.6);
  }
}

/* The shared fades: pair them with a movement keyframe on its own curve,
   `animation: zg-x var(--zg-motion-pop) both, zg-fade-in var(--zg-motion-fade) both`,
   so opacity never rides a spring. */
@keyframes zg-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes zg-fade-out {
  to {
    opacity: 0;
  }
}

/* --- Menu motion (`menu` / `menu-exit`) -------------------------------------
 * The CSS twin of FloatingSurface's open / close, for popups that float
 * themselves (Radix menus, hover cards): keyed on `data-state` (open /
 * closed) and `data-side` (where the surface sits relative to its anchor).
 * Enter: scale 0.96 → 1 plus a 4px slide out of the anchor on `menu`, the
 * opacity landing first (70% of it). Exit: fade and scale to 0.98 on
 * `menu-exit`, no slide. Reduced: the fade only; off: nothing (the 0ms vars
 * plus `animation: none`, so a Radix Presence unmounts at once). Set the
 * transform-origin on the element (the anchor side). Transform and opacity
 * only, no will-change: the animation promotes the layer while it runs. */
.zg-menu-motion[data-state='open'] {
  animation:
    zg-menu-in var(--zg-motion-menu) both,
    zg-fade-in calc(var(--zg-motion-menu-duration) * 0.7) var(--zg-motion-menu-ease) both;
}
.zg-menu-motion[data-state='closed'] {
  pointer-events: none;
  animation:
    zg-menu-out var(--zg-motion-menu-exit) both,
    zg-fade-out var(--zg-motion-menu-exit) both;
}
.zg-menu-motion[data-side='top'] {
  --zg-menu-y: 4px;
}
.zg-menu-motion[data-side='bottom'] {
  --zg-menu-y: -4px;
}
.zg-menu-motion[data-side='left'] {
  --zg-menu-x: 4px;
}
.zg-menu-motion[data-side='right'] {
  --zg-menu-x: -4px;
}
html[data-motion='reduced'] .zg-menu-motion[data-state='open'] {
  animation: zg-fade-in var(--zg-motion-menu) both;
}
html[data-motion='reduced'] .zg-menu-motion[data-state='closed'] {
  animation: zg-fade-out var(--zg-motion-menu-exit) both;
}
html[data-motion='off'] .zg-menu-motion[data-state] {
  animation: none;
}

@keyframes zg-menu-in {
  from {
    transform: translate(var(--zg-menu-x, 0), var(--zg-menu-y, 0)) scale(0.96);
  }
}

@keyframes zg-menu-out {
  to {
    transform: scale(0.98);
  }
}

/* The shared blurs, fade-side like opacity (run them on `fade` / `fade-out`):
   `--zg-blur-from` / `--zg-blur-to` on the element set the radius. */
@keyframes zg-unblur {
  from {
    filter: blur(var(--zg-blur-from, 4px));
  }
  to {
    filter: none;
  }
}

@keyframes zg-blur-out {
  from {
    filter: none;
  }
  to {
    filter: blur(var(--zg-blur-to, 4px));
  }
}

/* --- Status glyphs (StatusDot: state tween, orbit, ripple, breathe, pop) ---
 * The loops run on their own fixed timing (set inline). Inline animations
 * beat a stylesheet, so a loop's element carries `.zg-loop` and is stilled
 * here under reduced / off motion (every one of them moves). */
html[data-motion='off'] .zg-loop,
html[data-motion='reduced'] .zg-loop {
  animation: none !important;
}

/* Ping (`zg-dot`) — used as a radiating-ring OVERLAY (Timeline streaming spine,
   Throbber's trailing dot). The element itself stays in place; this
   keyframe is applied to a positioned-absolute sibling that scales
   outward and fades to 0. Don't use directly on a load-bearing dot —
   it'll disappear. Use `zg-breathe` for that. */

@keyframes zg-dot {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Breathing pulse — for status dots that need to STAY visible while
   indicating activity (sidebar running dot). Opacity oscillates between
   full and a still-readable floor; a tiny scale tween adds life without
   shifting layout. */

@keyframes zg-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.55;
  }
}

/* Orbit — a thin conic arc circling a steady core dot (status dot
   `running`, Timeline `tool-running`). Applied to an absolutely positioned
   ring sibling, never to the dot itself. */

@keyframes zg-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* Pop — one-shot scale-in for a dot that just landed in a terminal state
   (`completed`): transform only, on `snap` (its spring is the overshoot),
   paired with `zg-fade-in`. */

@keyframes zg-pop {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}

/* A title that changed (`TitleText`, motion/title-text.tsx): each word
   sharpens out of a soft blur, a beat after the one before. Opacity and
   blur only (`fade`), on inline text: no word moves, and a truncating
   parent keeps its ellipsis. TitleText renders plain text under reduced /
   off motion. */
.zg-title-word {
  animation:
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
  animation-delay: var(--zg-title-delay, 0ms);
}

/* Status-dot surfaces (`ChatStatusDot`, Timeline `Dot`) morph between
   states instead of snapping: colour, halo and opacity on `fade`, size on
   `snap` (an indicator). */

.zg-state-tween {
  transition:
    background-color var(--zg-motion-fade),
    border-color var(--zg-motion-fade),
    box-shadow var(--zg-motion-fade),
    opacity var(--zg-motion-fade),
    transform var(--zg-motion-snap);
}

/* --- Spin ring ---------------------------------------------------------------
 * A small ring whose top arc carries the color, for an inline wait such as a
 * sign-in in progress (BrowserSignIn). The rest of the ring sits at 25% so it
 * reads as a quiet loader, not a broken border. The desktop app's send and
 * stop button turns on the same keyframe. Under reduced or no motion it
 * stands still, like every loop (`.zg-loop`). */
.zg-spin-ring {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: zg-sendstop-rotate 800ms linear infinite;
}

@keyframes zg-sendstop-rotate {
  to {
    transform: rotate(360deg);
  }
}
/*
 * Component styles: the classes @zidane/ui components carry (Lightbox,
 * SegmentSpinner, the Rows slider, resize handles, count badges) and the
 * text-wrap helpers. Values come from tokens.css.
 */

/* Attention badge on a panel tab: the agent is waiting on the user. A slow,
   shallow pulse, never a flash; off under reduced / no motion. */
.zg-attention {
  animation: zg-attention-pulse 2.4s ease-in-out infinite;
}
html[data-motion='off'] .zg-attention,
html[data-motion='reduced'] .zg-attention {
  animation: none;
}
/* Range slider for the Appearance panel's contrast / size controls. Track
   is a hairline on the border color; the thumb is the accent. */
.zg-range {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
  cursor: pointer;
}

.zg-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: var(--zg-border-strong);
}

.zg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 999px;
  background: var(--zg-accent);
  border: 2px solid var(--zg-bg);
  box-shadow: 0 0 0 1px var(--zg-border-strong);
  transition: transform var(--zg-motion-snap);
}

.zg-range:hover::-webkit-slider-thumb,
.zg-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
}

.zg-range:focus-visible {
  outline: none;
}
/* `text-wrap: balance` keeps short headings on roughly equal-width lines
   (no orphan words). Applied via class to opt-in surfaces — modals,
   session titles — so body copy keeps its default flow. */
.zg-balance {
  text-wrap: balance;
}
/* `text-wrap: pretty` avoids single-word orphan lines in body copy. */
.zg-pretty {
  text-wrap: pretty;
}
/* Segment spinner (`SegmentSpinner.tsx`) — GUI twin of the TUI `▀▁▁▁▁` bar.
   Each pill is lit for the first half of an 800 ms cycle and dim for the
   rest; per-pill `animation-delay` (i × 80 ms) produces the fill → drain
   sweep. `steps(1, end)` keeps the hard on/off edges of the terminal glyphs. */
.zg-seg > span {
  animation: zg-seg 800ms steps(1, end) infinite;
}
/* Reduced / off motion: a static half-lit row (the loop stops). */
html[data-motion='off'] .zg-seg > span,
html[data-motion='reduced'] .zg-seg > span {
  animation: none;
  opacity: 0.22;
}
html[data-motion='off'] .zg-seg > span:nth-child(-n + 3),
html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
  opacity: 1;
}
/* --- Resize handle ----------------------------------------------------------
 *
 * An 8px hit strip straddling a panel's border. Visually it is only a 1px
 * line that tints on hover and takes the accent while dragging; the strip
 * itself is invisible so the panel border stays the single edge. Sits on
 * top of the panel content (absolute, positioned by the host: `right:-4px`
 * for a start-anchored panel, `left:-4px` for an end-anchored one). */
.zg-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 25;
  cursor: col-resize;
  touch-action: none;
}

.zg-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3.5px;
  width: 1px;
  background: transparent;
  transition: background-color var(--zg-motion-hover);
}

.zg-resize-handle:hover::after {
  background: var(--zg-border-strong);
}

.zg-resize-handle[data-active='true']::after {
  background: var(--zg-accent);
}

.zg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--zg-scrim), black 20%);
  backdrop-filter: blur(8px);
  /* The backdrop only fades: on `fade` / `fade-out`, never a spring (a
     sprung opacity clamps at 1 and stops dead). */
  animation: zg-fade-in var(--zg-motion-fade) both;
  cursor: zoom-out;
}

.zg-lightbox[data-state='closing'] {
  animation: zg-fade-out var(--zg-motion-fade-out) both;
}
/* One item at a time; a step replaces it (keyed) and the new one slides in
   from the side it comes from. `data-grow`: the first image grows out of
   its thumbnail (Lightbox.tsx), so the stage itself stays still. */
.zg-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  animation:
    zg-lightbox-image-in var(--zg-motion-pop) both,
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
}
.zg-lightbox-stage[data-grow] {
  animation: none;
}
.zg-lightbox-stage[data-dir='1'] {
  animation:
    zg-lightbox-step-next var(--zg-motion-slide) both,
    zg-fade-in var(--zg-motion-fade) both;
}
.zg-lightbox-stage[data-dir='-1'] {
  animation:
    zg-lightbox-step-prev var(--zg-motion-slide) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-lightbox-media {
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 140px);
  border-radius: var(--zg-radius-md);
  box-shadow: var(--zg-shadow-float);
  cursor: default;
  user-select: none;
}
.zg-lightbox-media-box {
  display: flex;
  cursor: default;
}

.zg-lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  max-width: min(560px, 80vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--zg-overlay);
  box-shadow: var(--zg-shadow-float);
  font-size: var(--zg-font-size-label);
  color: var(--zg-text);
  cursor: default;
}

.zg-lightbox-text {
  width: min(900px, 90vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--zg-radius-lg);
  cursor: default;
  overflow: hidden;
}

/* A PDF in the browser's own viewer (chat/PdfPreview.tsx): the text preview's box, its height fixed. */
.zg-lightbox-pdf {
  width: min(960px, 90vw);
  height: 85vh;
  border-radius: var(--zg-radius-lg);
  cursor: default;
  overflow: hidden;
}

.zg-lightbox-text-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--zg-hairline);
  flex-shrink: 0;
}

.zg-lightbox-text-body {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-family: var(--zg-font-mono);
  font-size: var(--zg-font-size-code);
  line-height: 1.55;
  color: var(--zg-text);
  white-space: pre;
  tab-size: 2;
  -moz-tab-size: 2;
}

.zg-lightbox-text-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.zg-lightbox-text-body pre.shiki {
  padding: 16px 18px;
  font-size: var(--zg-font-size-code);
  line-height: 1.55;
  white-space: pre;
  overflow: visible;
  width: max-content;
  min-width: 100%;
}

.zg-lightbox-text-body pre.shiki code,
.zg-lightbox-text-body pre.shiki .line {
  white-space: pre;
}

/* A highlighted code block (`code/HighlightedCode.tsx`): shiki's <pre> on
   the code tone, with the plain fallback's metrics. After the lightbox
   rules: a lightbox body that is also `.zg-shiki` takes these. */
.zg-shiki pre.shiki {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: var(--zg-font-size-code);
  line-height: 1.5;
  font-family: var(--zg-font-mono);
  background: var(--zg-code-bg) !important;
}

/* In its frame (`CodeFrame`), the frame is the code's surface: its tone, and its
   hairline, an inset shadow painted under the code. A <pre> with a background
   (shiki's, inline) covers that line, and being only as wide as the view while
   its lines run on, slides off it as the code scrolls sideways: no border at
   rest, a piece of it once scrolled. After the rule above. */
.zg-code-frame pre.shiki {
  background: transparent !important;
}

.zg-shiki pre.shiki code {
  background: transparent;
}

/* Two-line clamp for excerpts (attachment names, notices, tool detail).
   UnoCSS's `presetUno` (unlike Tailwind's `preset-wind`) ships no
   `line-clamp-*` rule, so this class supplies it. */
.zg-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes zg-attention-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--zg-warn) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--zg-warn) 0%, transparent);
  }
}

@keyframes zg-seg {
  0%,
  49.9% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.22;
  }
}

/* Transform only: the opacity is the shared `zg-fade-in` on its own curve. */
@keyframes zg-lightbox-step-next {
  from {
    transform: translateX(36px);
  }
}

@keyframes zg-lightbox-step-prev {
  from {
    transform: translateX(-36px);
  }
}

@keyframes zg-lightbox-image-in {
  from {
    transform: scale(0.92);
  }
  to {
    transform: scale(1);
  }
}

/* Browser address field (components/BrowserChrome.tsx): an input refused shakes (a motion spring) and turns red. */
.zg-browser-address[data-invalid] {
  border-color: var(--zg-danger);
}

/* Card choices (components/ChoiceCards.tsx): the number keys show only while
   the keyboard is in the group, the one time they help. */
.zg-choice-key {
  opacity: 0;
  transition: opacity var(--zg-motion-hover);
}
[role='radiogroup']:has(:focus-visible) .zg-choice-key {
  opacity: 1;
}

/*
 * BrandMark: a service's logo on a tile tinted with its brand color
 * (--zg-brand, set per mark and readable on both appearances).
 */
.zg-brand-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--zg-radius-md);
  color: var(--zg-brand, var(--zg-text-muted));
  background: color-mix(in oklab, var(--zg-brand, var(--zg-text-muted)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--zg-brand, var(--zg-text-muted)) 20%, transparent);
}
.zg-brand-mark > svg,
.zg-brand-mark > [class*='i-'] {
  width: 16px;
  height: 16px;
}
.zg-brand-mark[data-size='sm'] {
  width: 18px;
  height: 18px;
  border-radius: var(--zg-radius-xs);
}
.zg-brand-mark[data-size='sm'] > svg,
.zg-brand-mark[data-size='sm'] > [class*='i-'] {
  width: 11px;
  height: 11px;
}
.zg-brand-mark[data-size='lg'] {
  width: 40px;
  height: 40px;
  border-radius: var(--zg-radius-lg);
}
.zg-brand-mark[data-size='lg'] > svg,
.zg-brand-mark[data-size='lg'] > [class*='i-'] {
  width: 22px;
  height: 22px;
}
.zg-brand-letter {
  font-size: var(--zg-font-size-ui);
  font-weight: 600;
  line-height: 1;
}
.zg-brand-mark[data-size='sm'] .zg-brand-letter {
  font-size: var(--zg-font-size-badge);
}
.zg-brand-mark[data-size='lg'] .zg-brand-letter {
  font-size: var(--zg-font-size-title);
}

/*
 * Stepper: a dot widens on snap and takes its color on fade. A rail step's
 * glyph lands when the step becomes current or done.
 */
.zg-stepper-dot {
  transition:
    width var(--zg-motion-snap),
    background-color var(--zg-motion-fade);
}
.zg-stepper-glyph:not([data-state='todo']) {
  animation:
    zg-pop var(--zg-motion-pop) both,
    zg-fade-in var(--zg-motion-fade) both;
}

/*
 * HowItWorks: a scene beside numbered steps, or above them under 600px of
 * width (a container query). A hairline joins the step numbers, like the
 * steps of a timeline. In a tour (a scene that follows the step), each step
 * is a button that shows its step. The step on show lights its number, and a
 * ring round that number fills while the step plays. Each turn of the ring
 * moves the tour on (HowItWorks listens for it). So the pointer or focus in
 * the block pauses the tour, and reduced or off motion stills it (.zg-loop):
 * the steps then change on a click only.
 */
.zg-how {
  --zg-how-step-time: 5.5s;
  container: zg-how / inline-size;
}
.zg-how-split {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zg-how-media {
  display: grid;
}
.zg-how-body {
  padding: 2px 10px 12px;
}
@container zg-how (min-width: 600px) {
  .zg-how-split {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 24px;
  }
  .zg-how-body {
    padding: 14px 10px 14px 0;
  }
}
.zg-how-step {
  position: relative;
}
.zg-how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 25px;
  bottom: -9px;
  width: 1px;
  background: var(--zg-hairline);
}
.zg-how-step-title {
  color: var(--zg-text);
}
.zg-how-number {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 9999px;
  font-size: var(--zg-font-size-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--zg-accent);
  background: color-mix(in oklab, var(--zg-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--zg-accent) 24%, transparent);
  transition:
    color var(--zg-motion-hover),
    background-color var(--zg-motion-hover),
    box-shadow var(--zg-motion-hover);
}
/* A step of a tour: the button covers the step, its edges past the text. It
   draws nothing of a native button, with or without a reset stylesheet. */
.zg-how-step-button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: calc(100% + 16px);
  min-width: 0;
  margin: -6px -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--zg-radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color var(--zg-motion-hover);
}
.zg-how-step-button:hover {
  background: color-mix(in oklab, var(--zg-text) 5%, transparent);
}
.zg-how-step-button .zg-how-step-title {
  color: var(--zg-text-muted);
  transition: color var(--zg-motion-hover);
}
.zg-how-step-button:hover .zg-how-step-title,
.zg-how-step-button[aria-current] .zg-how-step-title {
  color: var(--zg-text);
}
.zg-how-step-button .zg-how-number {
  color: var(--zg-text-muted);
  background: color-mix(in oklab, var(--zg-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
}
.zg-how-step-button[aria-current] .zg-how-number {
  color: var(--zg-accent-fill-fg);
  background: var(--zg-accent-fill);
  box-shadow: none;
}
/* The ring round the number of the step on show. It starts at the top. */
.zg-how-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}
.zg-how-ring circle {
  fill: none;
  stroke: var(--zg-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: zg-how-ring var(--zg-how-step-time) linear infinite;
}
.zg-how:is(:hover, :focus-within) .zg-how-ring circle {
  animation-play-state: paused;
}
@keyframes zg-how-ring {
  to {
    stroke-dashoffset: 0;
  }
}

/*
 * ToggleCard with media: the illustration over the text, or beside it once
 * the card is 600px wide. A container query, so a card in a narrow column
 * stacks even on a wide window. In a row, the illustration column has one
 * width, so the titles of a list of cards line up.
 */
.zg-toggle-card {
  --zg-toggle-card-media: 18rem;
  container: zg-toggle-card / inline-size;
}
.zg-toggle-card-split {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 8px 20px;
}
.zg-toggle-card-split > .zg-toggle-card-body {
  padding-inline: 10px;
}
/* A grid, so the illustration stretches to the height of the text beside it. */
.zg-toggle-card-media {
  display: grid;
}
.zg-toggle-card-children {
  padding-left: 24px;
}
@container zg-toggle-card (min-width: 600px) {
  .zg-toggle-card-split {
    display: grid;
    grid-template-columns: var(--zg-toggle-card-media) minmax(0, 1fr);
    gap: 24px;
    padding: 8px;
  }
  .zg-toggle-card-split > .zg-toggle-card-body {
    padding: 12px 10px 12px 0;
  }
  .zg-toggle-card-children {
    padding-left: calc(var(--zg-toggle-card-media) + 32px);
  }
}
/*
 * Chat layer styles: the session list (rows, titles, the row actions
 * trigger, meta), their shared helpers and the daemon orb. Values come
 * from tokens.css.
 */

/* --- Hit-area extender ---------------------------------------------------
 *
 * Expands the effective click target to a guaranteed 40×40 around the
 * visible element via a pseudo-element. The host must be `position:
 * relative` (it already is on every consumer). Pointer events route to
 * the host because the pseudo overlays it and the host owns the handler.
 * `max(100%, 40px)` keeps the extender from shrinking BELOW the visible
 * element when the host happens to already exceed 40×40 (e.g. the
 * expanded "New chat" pill). */
.zg-hit-extend::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 40px);
  height: max(100%, 40px);
  transform: translate(-50%, -50%);
}

/* --- Sidebar session rows ------------------------------------------------
 *
 * Row selection state is driven by data attributes on the `<li>`, NOT by
 * a JS-toggled className. Two attributes can paint the row:
 *
 *   - `data-active="true"`            — the committed `activeSessionId`.
 *                                       Set via React render (rare).
 *   - `data-tentative-active="true"`  — the keyboard cursor position
 *                                       mid-burst. Set via direct DOM
 *                                       (no React render, no reconcile).
 *
 * Both paint the row identically — to the user, the cursor IS the
 * selection. The split lives entirely internal so that the heavy
 * `Center` / `Timeline` mount cascade only fires once at the end of an
 * arrow-key burst (`NAV_COMMIT_MS = 20` ms in the GUI's `Sidebar.tsx`).
 *
 * Inactive hover: the row wash. Active / tentative: the raised chip, the
 * same "current" language as segment items. The `:hover:not([data-active])`
 * rule must come AFTER selected rules. */

/* Cheap virtualization — off-screen rows skip layout/paint entirely.
   28px = a one-line row's real height in both modes: expanded is py-1 (8px)
   + one text-sm line (20px line-height); collapsed is the h-7 tile. A row
   with commits or pull requests is taller; `auto` keeps its measured size.
   The mb-1 margin sits outside the intrinsic-size contract. */
/* The row's tone is its press layer (`.zg-press-host`, primitives.css). */
.zg-session-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}

.zg-session-row[data-active='true']::before,
.zg-session-row[data-tentative-active='true']::before,
.zg-session-row[data-active='true']:hover::before,
.zg-session-row[data-tentative-active='true']:hover::before {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
}

.zg-session-row:hover:not([data-active='true']):not([data-tentative-active='true'])::before {
  background: var(--zg-row-hover);
}

/* Renaming: the row becomes a well (two attribute selectors beat the
   active rules above). */
.zg-session-row[data-renaming='true'][data-renaming='true']::before,
.zg-session-row[data-renaming='true']:hover::before {
  background: var(--zg-well);
  box-shadow: var(--zg-shadow-well);
}

.zg-session-row[data-active='true'] .zg-session-title,
.zg-session-row[data-tentative-active='true'] .zg-session-title {
  font-weight: 500;
}

/* The title's color; its fade lives on the clip around it (`.zg-title-clip`). */
.zg-session-title {
  color: var(--zg-text-muted);
}

/* Right-edge gradient mask on long session titles. The title fades into
   the row background instead of getting a hard ellipsis. On hover the
   fade only clears the space under the 3-dots menu trigger (see below).
   The fade hints there is more content past the visible edge.

   `mask-image` only affects the alpha channel of the element itself,
   so the underlying row background paints normally (no need to match
   colour against `--zg-bg-hover` / `--zg-bg-selected`). */
/* Resting: narrow 30px fade. Gradient stops are inlined (not via a
   custom property) — some Chromium builds skip re-evaluating `var()`
   inside `mask-image: linear-gradient(...)` on selector match, so the
   hover state failed to widen the fade. Spelling each rule out
   sidesteps that whole question. */
.zg-title-clip {
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, black 0, black calc(100% - 30px), transparent 100%);
}

/* Hover: the fade clears only the 3-dots trigger (the meta folds away
   below, so the title has the line). Fully visible up to 32px from the end
   (`TITLE_HOVER_FADE` in SessionListRow.tsx), gone under the trigger. A
   sliding title also softens its left edge, where its start leaves. */
.zg-session-row:hover .zg-title-clip {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--zg-title-lead),
    black calc(100% - 32px),
    transparent calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--zg-title-lead),
    black calc(100% - 32px),
    transparent calc(100% - 14px),
    transparent 100%
  );
}
@property --zg-title-lead {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.zg-title-clip {
  transition: --zg-title-lead var(--zg-motion-hover);
}
.zg-session-row:hover .zg-title-clip:has(> [data-slide]) {
  --zg-title-lead: 12px;
  transition: --zg-title-lead var(--zg-motion-hover) 450ms;
}

/* A long title slides on hover (or keyboard focus) to show its end, at a
   reading pace after a beat of hover intent (`--zg-title-shift` and
   `--zg-title-slide` are measured on arrival, SessionListRow.tsx), and
   eases back on leave from wherever it got to. Reduced motion: it jumps
   after the same beat; motion off: it jumps at once. */
.zg-title-slide {
  transition: transform var(--zg-motion-settle);
}
.zg-session-row:hover .zg-title-slide[data-slide],
.zg-session-row:has([data-row-select]:focus-visible) .zg-title-slide[data-slide] {
  transform: translateX(var(--zg-title-shift));
  transition: transform var(--zg-title-slide) cubic-bezier(0.37, 0, 0.63, 1) 450ms;
}
html[data-motion='reduced'] .zg-session-row:hover .zg-title-slide[data-slide] {
  transition-duration: 0ms;
}
html[data-motion='off'] .zg-session-row:hover .zg-title-slide[data-slide] {
  transition: none;
}

.zg-session-row[data-active='true'] .zg-session-title,
.zg-session-row[data-tentative-active='true'] .zg-session-title {
  color: var(--zg-text);
}

/* Archived rows render dim. Selection / hover backgrounds still paint
   normally — the wash signals "you're on this row"; the row's CONTENT
   is what reads archived. Opacity targets the fade wrapper (title +
   folder label) so the leading icon stays full contrast and the user
   can still parse the archive indicator without leaning in. */
.zg-session-row[data-archived='true'] .zg-session-title,
.zg-session-row[data-archived='true'] .zg-sidebar-fade > div,
.zg-session-row[data-archived='true'] .zg-session-sub {
  /* Quieter than a live row, still readable: the archive glyph carries the state. */
  opacity: 0.8;
}

/* --- 3-dots row trigger --------------------------------------------------
 *
 * Sits at the row's top-right corner (absolute, in SessionListRow.tsx), over
 * the trailing meta slot that folds away on hover. At rest:
 * opacity 0 + pointer-events: none so it doesn't intercept stray clicks
 * past the title. On hover/focus-within of the row `.group`, fades in on
 * the hover tween (`--zg-motion-hover`) — gated behind `(hover: hover) and
 * (pointer: fine)` so touch devices don't sticky-reveal it on tap. Stays
 * visible while the popover is open via `data-open`. */
.zg-row-dots {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--zg-motion-hover),
    background-color var(--zg-motion-hover),
    color var(--zg-motion-hover);
}

.zg-row-dots.zg-segment-item {
  transition:
    opacity var(--zg-motion-hover),
    color var(--zg-motion-hover);
}

@media (hover: hover) and (pointer: fine) {
  .group:hover .zg-row-dots,
  .group:focus-within .zg-row-dots {
    opacity: 1;
    pointer-events: auto;
  }
}

.zg-row-dots[data-open] {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar row, line 1's trailing slot: on hover it folds away (fades and
   gives its width to the title) for the 3-dots trigger and a full read of
   the title. Clipped across, never down. */
.zg-session-row {
  interpolate-size: allow-keywords;
}
.zg-row-meta {
  /* One line while it folds away: "Oct 2" would wrap as its width shrinks. */
  white-space: nowrap;
  overflow-x: clip;
  transition:
    opacity var(--zg-motion-hover),
    width var(--zg-motion-hover);
}
.zg-session-row:hover .zg-row-meta,
.zg-session-row:focus-within .zg-row-meta {
  opacity: 0;
  width: 0;
}
html[data-motion='full'] .zg-session-row[data-arrived]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in oklab, var(--zg-accent) 16%, transparent) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  /* A one-shot sweep on its own fixed timing (a moving band, not a
     transition); full motion only. */
  animation: zg-row-sweep 1100ms var(--zg-ease-out) both;
}

@keyframes zg-row-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -50% 0;
    opacity: 0;
  }
}

/* --- Daemon orb (DaemonOrb.tsx) ---------------------------------------------
   A small lit sphere: highlight up-left, shade down-right, a soft halo in its
   own colour. `data-state` picks the colour and the motion. The ripple is a
   ring that leaves the orb once when something changes. The colours are the
   decorative `-dot` tones and the shading is the appearance's
   (`--zg-orb-tone/-shade/-rim/-glow`, SphereShading in theme/derive.ts): deep
   toward black in dark, shallow toward a cool slate in light. */
.zg-orb {
  --orb: var(--zg-accent-alt-dot);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 9999px;
  background: radial-gradient(
    circle at 34% 30%,
    color-mix(in oklab, var(--orb) 30%, white) 0%,
    var(--orb) 48%,
    color-mix(in oklab, var(--orb), var(--zg-orb-tone) var(--zg-orb-shade)) 100%
  );
  box-shadow:
    inset 0 -1px 1px color-mix(in oklab, var(--orb), var(--zg-orb-tone) var(--zg-orb-rim)),
    0 0 0 1px color-mix(in oklab, var(--orb) 30%, transparent),
    0 0 7px -1px color-mix(in oklab, var(--orb) calc(75% * var(--zg-orb-glow)), transparent);
  /* A state change recolours the orb: colour, so the `fade` curve. */
  transition:
    --orb var(--zg-motion-fade),
    box-shadow var(--zg-motion-fade),
    filter var(--zg-motion-fade);
}
/* The idle breathe is the halo's opacity on its own layer (`::before`), not a
   box-shadow keyframe: the orb is always on screen, and an animated shadow
   repainted it every frame for the life of the window. */
html[data-motion='full'] .zg-orb:not([data-state='down']) {
  box-shadow:
    inset 0 -1px 1px color-mix(in oklab, var(--orb), var(--zg-orb-tone) var(--zg-orb-rim)),
    0 0 0 1px color-mix(in oklab, var(--orb) 30%, transparent),
    0 0 5px -2px color-mix(in oklab, var(--orb) calc(60% * var(--zg-orb-glow)), transparent);
}
.zg-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 9px 0 color-mix(in oklab, var(--orb) calc(80% * var(--zg-orb-glow)), transparent);
  opacity: 0;
  animation: zg-orb-breathe 3.6s ease-in-out infinite;
}
.zg-orb[data-state='attention']::before,
.zg-orb[data-state='down']::before {
  animation: none;
}
.zg-orb[data-state='running'] {
  --orb: var(--zg-accent-dot);
}
.zg-orb[data-state='attention'],
.zg-orb[data-state='connecting'] {
  --orb: var(--zg-warn-dot);
}
.zg-orb[data-state='down'] {
  --orb: var(--zg-danger-dot);
  filter: saturate(0.55) brightness(0.9);
  box-shadow:
    inset 0 -1px 1px color-mix(in oklab, var(--orb), var(--zg-orb-tone) var(--zg-orb-rim)),
    0 0 0 1px color-mix(in oklab, var(--orb) 25%, transparent);
}
@property --orb {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* Running: a sheen turns inside the sphere. Connecting: an arc chases the rim. */
.zg-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--zg-motion-fade);
}
.zg-orb[data-state='running']::after {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 55%, rgb(255 255 255 / 0.55) 75%, transparent 90%);
  mix-blend-mode: overlay;
  animation: zg-orb-spin 1.4s linear infinite;
}
.zg-orb[data-state='connecting']::after {
  opacity: 1;
  inset: -3px;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--orb) 100%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: zg-orb-spin 0.9s linear infinite;
}
.zg-orb[data-state='attention'] {
  animation: zg-orb-pulse 1.6s ease-in-out infinite;
}

.zg-orb-ripple {
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  border: 1.5px solid var(--orb);
  pointer-events: none;
  animation: zg-orb-ripple 900ms var(--zg-ease-out) forwards;
}

@keyframes zg-orb-breathe {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes zg-orb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes zg-orb-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.18;
  }
}
@keyframes zg-orb-ripple {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

html[data-motion='off'] .zg-orb,
html[data-motion='off'] .zg-orb::before,
html[data-motion='off'] .zg-orb::after,
html[data-motion='reduced'] .zg-orb,
html[data-motion='reduced'] .zg-orb::before,
html[data-motion='reduced'] .zg-orb::after {
  animation: none;
}
html[data-motion='off'] .zg-orb-ripple,
html[data-motion='reduced'] .zg-orb-ripple {
  display: none;
}

/* Radix dropdown menus (the session filter menu): grow from the trigger edge Radix computes. */
.zg-radix-menu {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
/* The transcript: row frame, carets, lazy rows (content-visibility), row
   entrances, fold rhythm, the running arc, the select-turn cursor and the
   markdown prose (`.zg-md`). */

/* A small inline running indicator (a fold step, the host transcript's
   load button) for places with no timeline Dot: a thin arc sweeping round a
   faint ring, the same drawing as the Dot's running orbit. Reduced / off
   motion: a still arc. */
.zg-arc {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zg-text-muted) 28%, transparent);
}

.zg-arc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--zg-accent) 0 28%, transparent 28% 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  animation: zg-orbit 0.9s linear infinite;
}

html[data-motion='off'] .zg-arc::after,
html[data-motion='reduced'] .zg-arc::after {
  animation: none;
  transform: rotate(-30deg);
}

/* A sent prompt (`UserPromptRow`, chat/transcript/prompt.tsx) reads as it
   was typed: the composer's face, size and rhythm. Each typed line is a block
   (`PromptLines`) trimmed to its text, 0.15em apart, 1.5rem between wrapped
   lines: the composer's paragraphs (`.ProseMirror p`), so a blank line is one
   short step, not a full empty line. The bubble is the accent's soft tint
   with a hairline of the accent, on the kit's largest radius (`--zg-accent-wash`:
   half the tint in light, where an alpha wash over white reads far stronger). */
.zg-prompt-bubble {
  padding: 10px 14px;
  border-radius: var(--zg-radius-xl);
  background: var(--zg-accent-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zg-accent) 12%, transparent);
  font-family: var(--zg-font-prompt);
  font-size: var(--zg-font-size-prompt);
  line-height: 1.5rem;
}
.zg-prompt-line {
  margin: 0;
  text-box: trim-both;
}
.zg-prompt-line + .zg-prompt-line {
  margin-top: 0.15em;
}
/* A blank line keeps its line box: trimmed to nothing it would be 0px. */
.zg-prompt-line:empty::after {
  content: '\200b';
}

/* Select-turn highlight (Timeline SelectCursor): one tint behind the
   transcript that fades in, then slides and resizes between selections.
   The timeline isolates so it can sit behind the rows (z-index -1) and
   above nothing else. */
.zg-timeline {
  isolation: isolate;
}

.zg-select-cursor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: -1;
  border-radius: var(--zg-radius-lg);
  background: var(--zg-accent-soft-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade-out);
}

.zg-select-cursor[data-on='true'] {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}

.zg-select-cursor[data-on='true'][data-slide='true'] {
  transition:
    opacity var(--zg-motion-fade),
    transform var(--zg-motion-snap),
    height var(--zg-motion-snap);
}

/* In select mode (the only time rows carry `data-stop`) a row is clickable. */
[data-stop] {
  cursor: pointer;
}

/* A collapsible header's caret (`Caret` in chat/transcript/frame.tsx,
   trailing every disclosure label and the session list's group headers): it
   turns on `snap` (an indicator); its hover / focus reveal is colour
   feedback (`hover`). */
.zg-caret {
  transition:
    transform var(--zg-motion-snap),
    opacity var(--zg-motion-hover);
}
.zg-caret[data-open] {
  transform: rotate(90deg);
}

/* A settled fold's call counts (`FoldOutcomes`): a 16px hairline chip that
   sits inside the header's hover wash, its glyphs soft-tinted (below). */
.zg-fold-outcomes {
  display: inline-flex;
  align-items: center;
  height: 16px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
  white-space: nowrap;
  line-height: 1;
}
/* A meaning tint (`--zg-tint`) blended halfway into the muted text, so
   transcript detail (fold outcomes, the run receipt) reads as detail, not
   as an alert. Recolors with the theme like the tint it starts from. */
.zg-soft-tint {
  color: color-mix(in oklab, var(--zg-tint) 55%, var(--zg-text-muted));
}
.zg-tint-success {
  --zg-tint: var(--zg-success);
}
.zg-tint-danger {
  --zg-tint: var(--zg-danger);
}
.zg-tint-model {
  --zg-tint: var(--zg-model);
}
.zg-tint-accent {
  --zg-tint: var(--zg-accent);
}
.zg-tint-accent-alt {
  --zg-tint: var(--zg-accent-alt);
}
.zg-tint-money {
  --zg-tint: var(--zg-money);
}
.zg-tint-warn {
  --zg-tint: var(--zg-warn);
}

/* A meta chip (run receipt cells, a worker report's directory and "click
   to answer"; a notice's headline draws the same ring but wraps): a hairline ring on the row's own
   background. A filled track sank below the page in dark themes and
   muddied the small mono; the ring separates chips without lowering
   contrast. 20px tall (`h-5`) so 11px `.zg-meta` text has room. Colour
   comes from the markup (a tint, or the inherited `.zg-meta` tone). */
.zg-meta-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 8px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
  white-space: nowrap;
  line-height: 1;
}

/* Transcript rows (Timeline). Offscreen rows skip layout and paint
   (content-visibility); each row's contain-intrinsic-size rides its inline
   style (a content-aware estimate, `rowCvStyle`), keeping the scrollbar
   honest without measuring. Text selection and find-in-page still work. */
.zg-cv-row {
  content-visibility: auto;
}
/* A row inside a row (an open fold's, a message group's, a worker's) renders
   with its parent. Skipped on its own, it lagged a frame behind the parent
   coming into view: still at its estimate as it scrolled in, then snapping
   to its real height in view, shifting every row below it. */
.zg-cv-row .zg-cv-row {
  content-visibility: visible;
  contain-intrinsic-size: none !important;
}

/*
 * Inside a fold (the exchange's steps, an exchange's earlier messages) every
 * item sits this far below the one above it, the header included, so both
 * folds keep one rhythm. Each item carries the gap on its top; a timeline
 * row inside a fold drops its own 12px row gap (`--zg-row-gap`), and the
 * fold as a whole ends on that row gap before the next row.
 */
:root {
  --zg-fold-gap: 8px;
}
.zg-fold-messages {
  --zg-row-gap: 0px;
}
.zg-fold-messages .zg-fold-body > .zg-cv-row {
  padding-top: var(--zg-fold-gap);
}

/* A new row rises on `settle` and fades in on `fade` (never the spring). */
.zg-row-enter {
  animation:
    zg-row-rise var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}

/* History mounting as it scrolls in (`LazyRow`) is not a new row: it must
   read as already there, never fade in under the user's eye. */
.zg-cv-row[data-quiet] .zg-row-enter {
  animation: none;
}

/* Inside an exchange fold (compact transcript) the first rows stagger and
   sharpen out of a blur, so a burst of tool calls reads as a sequence,
   not a slab. The blur is capped to the rows the eye lands on (the top of
   an opening fold, the row a live fold just appended) and kept small:
   blurring sixty wide rows at once is a frame budget, not a flourish. */
.zg-fold-body > .zg-cv-row:nth-child(-n + 4) .zg-row-enter,
.zg-fold-body > .zg-cv-row:last-child .zg-row-enter {
  /* The blur is fade-side: it sharpens on `fade`, never the spring. */
  --zg-blur-from: 2px;
  animation:
    zg-row-rise var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
}

.zg-fold-body > .zg-cv-row:nth-child(2) .zg-row-enter {
  animation-delay: 30ms;
}
.zg-fold-body > .zg-cv-row:nth-child(3) .zg-row-enter {
  animation-delay: 60ms;
}
.zg-fold-body > .zg-cv-row:nth-child(4) .zg-row-enter {
  animation-delay: 90ms;
}
.zg-fold-body > .zg-cv-row:nth-child(n + 5) .zg-row-enter {
  animation-delay: 120ms;
}

/* Transform only; the opacity is the shared `zg-fade-in`. Reduced motion
   zeroes the rise and keeps the brief fade; off is instant (the vars). */
@keyframes zg-row-rise {
  from {
    transform: translateY(4px);
  }
  to {
    transform: translateY(0);
  }
}

/* Transcript prose. Family + size come from the Appearance tokens so the
   user's chat font applies to every rendered message. */
.zg-md {
  font-family: var(--zg-font-chat);
  font-size: var(--zg-font-size-chat);
  line-height: 1.6;
  color: var(--zg-text);
}

.zg-md > *:first-child {
  margin-top: 0;
}

.zg-md > *:last-child {
  margin-bottom: 0;
}

.zg-md p {
  margin: 0 0 0.75em;
}

/*
 * The Markdown component strips headings, bold, italic and strike from a
 * chat reply (heading tags become <p>, the mark tags fragments) so the
 * chat surface matches the editor's structural-only construct set. A
 * document keeps bold and italic and draws headings as `.zg-md-heading`
 * paragraphs (below). No `.zg-md h*`, `.zg-md strong` or `.zg-md em`
 * rules exist.
 */
.zg-md ul,
.zg-md ol {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
}

.zg-md ul {
  list-style: disc;
}
.zg-md ol {
  list-style: decimal;
}

.zg-md li {
  margin: 0.2em 0;
}

.zg-md li > p {
  margin: 0;
}

.zg-md blockquote {
  margin: 0 0 0.75em;
  padding: 0.25em 0 0.25em 0.9em;
  border-left: 2px solid var(--zg-hairline);
  color: var(--zg-text-muted);
}

.zg-md .zg-md-heading {
  font-weight: 600;
  color: var(--zg-text);
  margin-top: 1em;
}
.zg-md > .zg-md-heading:first-child {
  margin-top: 0;
}

.zg-md hr {
  border: none;
  border-top: 1px solid var(--zg-hairline);
  margin: 1em 0;
}

/* Tables sit in a tray: tone for the frame, hairlines between rows only. */
.zg-md table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 0.75em;
  font-size: 0.9em;
  background: var(--zg-tray);
  border-radius: var(--zg-radius-md);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
  overflow: hidden;
}

.zg-md th,
.zg-md td {
  padding: 0.4em 0.75em;
  text-align: left;
}

.zg-md tr + tr > td,
.zg-md thead + tbody > tr:first-child > td {
  border-top: 1px solid var(--zg-hairline);
}

.zg-md th {
  font-weight: 600;
  font-size: 0.92em;
  color: var(--zg-text-muted);
}

/* Inline code in a cell: the code tone matches the tray, which left the chip
   invisible and its padding reading as a stray indent against the header. The
   track tone sets it into the tray like every other chip, and a cell that is
   only code bleeds the chip padding into the cell's so its text lines up. */
.zg-md table code {
  background: var(--zg-track);
}
.zg-md td > code:only-child {
  margin-inline-start: -0.25rem;
}

/* Image generation (`ImageGenerationBlock`). The frame takes the requested
   aspect ratio before the image exists, so the swap from loader to image never
   changes the row's height. While the call runs, a soft band sweeps across the
   tray (a loop: stilled under reduced / off motion). The image decodes off
   screen, then fades in and unblurs on `fade`. */
.zg-image-frame {
  position: relative;
  overflow: hidden;
  width: min(100%, 22rem);
  max-height: 20rem;
  border-radius: var(--zg-radius-md);
  background: var(--zg-tray);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
}

.zg-image-frame[data-pending]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      transparent 30%,
      color-mix(in srgb, var(--zg-text) 7%, transparent) 50%,
      transparent 70%
    )
    0 0 / 250% 100%;
  animation: zg-shimmer 1.8s linear infinite;
}

html[data-motion='off'] .zg-image-frame[data-pending]::after,
html[data-motion='reduced'] .zg-image-frame[data-pending]::after {
  animation: none;
}

.zg-image-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.zg-image-frame > img[data-ready] {
  --zg-blur-from: 8px;
  opacity: 1;
  animation:
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
}
/*
 * The composer (chat/composer/): the desktop app's look, under the kit's own
 * names. A raised card set in a tray ring, the editor's text column, staged
 * attachment tiles, the one Send / Stop button, the mention and command
 * badges, and the picker pills of the controls row.
 */

/* The ring frames the card without banding: the ring tone, pressed-in edges from .zg-tray.
   Same container name as the desktop app's composer, so the collapsible pills
   below answer to the width of either. */
.zg-composer {
  container: zg-chatbox / inline-size;
}
.zg-composer.zg-tray {
  background: var(--zg-tray-ring);
}

/*
 * The badge strip (ComposerBadges): a band at the top of the tray ring, above
 * the card, the git bar's mirror. Pills sit on the ring, quiet at rest; the
 * hovered one and the one whose panel is shown lift as the raised chip
 * (`.zg-segment-item`). A highlighted one is raised in the warn tone and
 * breathes. The band opens and closes as a collapsible, on a conversation
 * switch too, like the git bar (the badges then show as they are). The ring's
 * 4px sits above the pills and 4px more under them, down to the card. They
 * start 12px in from the tray's edge: past the 28px corner by about the
 * ring's own 4px (at 9px, flush with the + button, the first pill's end
 * crowded the curve to 2px).
 */
.zg-composer-badges {
  transition:
    grid-template-rows var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out),
    margin-top var(--zg-motion-exit);
}
/* Open, the band reaches 3px into the tray's top padding while its pills stay
   4px from the edge: room for a focused pill's ring inside the strip's scroll
   box, which clips. */
.zg-composer-badges[data-open='true'] {
  margin-top: -3px;
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade),
    margin-top var(--zg-motion-settle);
}
/* Its own clip: no row-hover bleed past the band (the strip insets itself). */
.zg-composer-badges > .zg-collapsible-inner {
  padding-inline: 0;
  margin-inline: 0;
}
.zg-composer-badges-track {
  /* A leaving badge (`popLayout`) is placed against the track. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px 4px;
  /* The band's height whatever is in it: the last badge leaving (out of the flow) never drops it before it closes. */
  min-height: 31px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.zg-composer-badge-slot {
  position: relative;
  /* Flex, not a line box: the pill (or its tooltip host) sits on no baseline, the band stays 28px. */
  display: flex;
  flex-shrink: 0;
  border-radius: 9999px;
}
.zg-composer-badge-slot[data-dragging] {
  z-index: 1;
}
.zg-composer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  max-width: 240px;
  padding: 0 8px;
  border: 0;
  border-radius: 9999px;
  font-size: var(--zg-font-size-label);
  line-height: 16px;
  color: var(--zg-text-muted);
  white-space: nowrap;
  user-select: none;
}
/* The surface layer, as the press classes draw it (zero specificity: theirs stay in charge where both apply). */
:where(.zg-composer-badge) {
  position: relative;
  isolation: isolate;
}
:where(.zg-composer-badge)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
button.zg-composer-badge {
  cursor: pointer;
}
.zg-composer-badge-slot[data-dragging] .zg-composer-badge {
  cursor: grabbing;
  color: var(--zg-text);
}
.zg-composer-badge-slot[data-dragging] .zg-composer-badge::before {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-float);
}
.zg-composer-badge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Highlight: raised in the warn tone at rest, as on hover and while open. */
.zg-composer-badge[data-highlight] {
  color: var(--zg-text);
}
.zg-composer-badge[data-highlight]::before,
.zg-composer-badge[data-highlight]:hover::before {
  background: color-mix(in srgb, var(--zg-warn) 12%, var(--zg-raised));
  box-shadow:
    var(--zg-shadow-raised),
    inset 0 0 0 1px color-mix(in srgb, var(--zg-warn) 45%, var(--zg-hairline));
}
/* It breathes: a soft warn glow from its edge, inside the pill (nothing to clip). */
.zg-composer-badge[data-highlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: zg-composer-badge-breathe 2.4s ease-in-out infinite;
}
@keyframes zg-composer-badge-breathe {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--zg-warn) 0%, transparent);
  }
  50% {
    box-shadow: inset 0 0 6px 1px color-mix(in srgb, var(--zg-warn) 32%, transparent);
  }
}
html[data-motion='off'] .zg-composer-badge[data-highlight]::after,
html[data-motion='reduced'] .zg-composer-badge[data-highlight]::after {
  animation: none;
}
/* One pulse per badge: the chip breathes, its count keeps the warn fill without a ripple of its own. */
.zg-composer-badge[data-highlight] .zg-attention {
  animation: none;
}

/* Height-capped: the editor grows with its text, then scrolls inside the card. An
   ancestor's `--zg-composer-max-h` sets the cap (a panel's share: `30cqh` in a size
   container); 40% of the window by default. */
.zg-composer-scroll {
  max-height: var(--zg-composer-max-h, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: 8px;
}

.zg-composer-editor {
  min-height: 1lh;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--zg-font-prompt);
  font-size: var(--zg-font-size-prompt);
  color: var(--zg-text);
}
.zg-composer-editor p {
  margin: 0;
  text-box: trim-both;
}
.zg-composer-editor p + p {
  margin-top: 0.15em;
}
/* An emptied paragraph keeps its line (trimmed to no text it would be 0px tall). */
.zg-composer-editor p:empty::after {
  content: '\200b';
}
.zg-composer-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: var(--zg-text-muted);
  pointer-events: none;
}
.zg-composer-editor[contenteditable='false'] {
  cursor: not-allowed;
}

/* A picked mention or command, inline in the draft. */
.zg-composer-mention {
  padding: 1px 0.4em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--zg-text) 8%, transparent);
  color: var(--zg-text);
  white-space: nowrap;
}
/* The caret after a trailing badge takes the text's height, not the badge's padding. */
.zg-composer-mention::after {
  content: '\200b';
}

/* Staged attachments: tray-toned tiles, a remove button on hover or focus. */
.zg-composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0.25rem;
  padding-bottom: 0.25rem;
}
.zg-composer-attachment {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  /* Rises on `pop`; opacity and blur on `fade` (never the spring). */
  --zg-blur-from: 2px;
  animation:
    zg-composer-attachment-in var(--zg-motion-pop) both,
    zg-fade-in var(--zg-motion-fade) both,
    zg-unblur var(--zg-motion-fade) both;
}
.zg-composer-attachment-remove {
  opacity: 0;
  transition: opacity var(--zg-motion-hover);
}
.zg-composer-attachment:hover .zg-composer-attachment-remove,
.zg-composer-attachment-remove:focus-visible {
  opacity: 1;
}
@keyframes zg-composer-attachment-in {
  from {
    transform: scale(0.85) translateY(6px);
  }
  to {
    transform: none;
  }
}

/* Send / Stop: one 32px circle, three states crossfading in place.
     send  the accent fill and the send glyph
     run   the same fill, the glyph turned into a thin spinner ring: the button
           that was pressed keeps working, nothing about it jumps
     run + hover / focus-visible  the stop affordance: the fill eases to danger
   Focus draws the kit's `.zg-focus-ring` in every state, like any other control. */
/* The circle is its press layer (`zg-press`, primitives.css): the glyphs hold still. */
.zg-composer-send {
  color: var(--zg-accent-fill-fg);
  transition: color var(--zg-motion-hover);
}
.zg-composer-send::before {
  background-color: var(--zg-accent-fill);
  background-image: var(--zg-fill-sheen);
  box-shadow: var(--zg-shadow-fill);
}
.zg-composer-send:disabled::before {
  box-shadow: none;
}
.zg-composer-send[data-state='send']:hover:not(:disabled)::before {
  background-color: var(--zg-accent-fill-hover);
}
.zg-composer-send[data-state='run']:hover::before,
.zg-composer-send[data-state='run']:focus-visible::before {
  background-color: var(--zg-danger);
}
.zg-composer-send-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* The glyphs cross-fade in place, never scaled: leaving on `fade-out`, showing on `fade`. */
  transition: opacity var(--zg-motion-fade-out);
}
.zg-composer-send[data-state='send'] .zg-composer-send-glyph,
.zg-composer-send[data-state='run']:not(:hover):not(:focus-visible) .zg-composer-send-spin,
.zg-composer-send[data-state='run']:hover .zg-composer-send-stop,
.zg-composer-send[data-state='run']:focus-visible .zg-composer-send-stop {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}
.zg-composer-send-ring {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: zg-composer-spin 800ms linear infinite;
}
@keyframes zg-composer-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A picker pill that collapses to its icon on a narrow composer. */
.zg-pill-collapsible .zg-pill-icon {
  display: none;
}
@container zg-chatbox (max-width: 479px) {
  .zg-pill-collapsible .zg-pill-label {
    display: none;
  }
  .zg-pill-collapsible .zg-pill-icon {
    display: inline-block;
  }
}

/* The spinner settles (a still ring still reads as "working"). */
html[data-motion='off'] .zg-composer-send-ring,
html[data-motion='reduced'] .zg-composer-send-ring {
  animation: none;
}

/* Model picker: rows that appear after the
   first paint (the Older switch, a search) rise on `settle` and fade in on
   `fade` (no blur: a filter on every row repaints the whole list each
   frame); the provider pill row scrolls sideways without a scrollbar. The
   active provider pill's highlight (`.zg-pill-indicator`) is animated by
   motion in ModelProviderPills (the `snap` spring). */
.zg-model-row-in {
  animation:
    zg-model-row-rise var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}
@keyframes zg-model-row-rise {
  from {
    transform: translateY(3px);
  }
}

.zg-no-scrollbar {
  scrollbar-width: none;
}

.zg-no-scrollbar::-webkit-scrollbar {
  display: none;
}
/*
 * The command palette (components/palette) and the modal surface it opens
 * on: the scrim of an app's modal slot and the panel's pop in and out. The
 * desktop app's ModalProvider sets the scrim's `data-scrim` and
 * `data-state`; in an Overlay the panel pops in on mount.
 */
.zg-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zg-scrim);
  backdrop-filter: blur(6px);
  animation: zg-fade-in var(--zg-motion-fade) both;
}

/* Command palette. The cursor is one block under the rows that glides to
   the marked row (a transform: no layout, no repaint of the rows); a new list
   puts it in place at once (`data-snap`). The rows draw no background of their
   own, so hover and keyboard mark the same way. */
.zg-palette-cursor {
  position: absolute;
  top: 0;
  border-radius: var(--zg-radius-md);
  background: color-mix(in oklab, var(--zg-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--zg-accent) 16%, transparent);
  pointer-events: none;
}
.zg-palette-row,
.zg-palette-row:hover:not(:disabled),
.zg-palette-row[data-active] {
  background: transparent;
  padding: 0 10px;
}
.zg-palette-icon {
  color: var(--zg-text-subtle);
  transition: color var(--zg-motion-hover);
}
.zg-palette-row[data-active] .zg-palette-icon {
  color: var(--zg-accent);
}
.zg-palette-file .zg-badge-icon {
  margin: 0;
}
.zg-palette-match {
  background: transparent;
  color: var(--zg-text);
  font-weight: 600;
}
/* The list follows its rows' height (`pop`, the palette's own motion) and
   fades in when the panel opens; the cursor glides between rows on `snap`. */
.zg-palette-list {
  transition: height var(--zg-motion-pop);
  animation: zg-fade-in var(--zg-motion-fade) both;
}
/* `snap`'s curve, quicker: the cursor follows a held arrow key, so it must
   land before the next repeat. Scaling the duration keeps every motion mode
   (springs off: the tween; reduced, off: 0ms). */
.zg-palette-cursor:not([data-snap]) {
  transition: transform calc(var(--zg-motion-snap-duration) * 0.6) var(--zg-motion-snap-ease);
}

/* A quick surface (the palette) only darkens the window: a full-window blur
   is redrawn on every frame of the fade, and the app behind stays legible. */
.zg-modal-scrim[data-scrim='dim'] {
  background: color-mix(in srgb, var(--zg-scrim) 55%, transparent);
  backdrop-filter: none;
}

/* Exit: the scrim fades out on motion (ModalProvider, `withFade('exit')`)
   while the panel shrinks on `exit` and fades on `fade-out`, faster than it
   came in. */
.zg-modal-scrim[data-state='closing'] {
  pointer-events: none;
}

.zg-modal-scrim[data-state='closing'] .zg-modal-panel {
  animation:
    zg-modal-pop-out var(--zg-motion-exit) both,
    zg-fade-out var(--zg-motion-fade-out) both;
}

@keyframes zg-modal-pop-out {
  to {
    transform: scale(0.97) translateY(4px);
  }
}

/* Modals are screen-centered (no trigger anchor) so `transform-origin:
   center` is correct here — `scale(0.96)` is the starting size per Emil's
   "never animate from `scale(0)`" rule. The slight `translateY` gives a
   subtle settling feel without making the modal feel like it falls.
   No `will-change` here — the animation is short and the panel is rarely
   torn down; permanent GPU promotion costs memory for no measurable gain. */
.zg-modal-panel {
  /* The `pop` spring (a CSS `linear()` easing, MotionProvider) for the
     scale, the `fade` tween for the opacity. */
  animation:
    zg-modal-pop-in var(--zg-motion-pop) both,
    zg-fade-in var(--zg-motion-fade) both;
}

@keyframes zg-modal-pop-in {
  from {
    transform: scale(0.96) translateY(4px);
  }
}
/*
 * The setup wizard (onboarding/): a step rises in as it replaces the one
 * before (it comes down from above when the user goes back), then its
 * sections arrive a beat apart. Its footer stays in view at the bottom of the
 * scrolling page, over a fade so the content slides under it, and the top
 * edge fades the same way once the page scrolls.
 */
.zg-onboarding-step {
  --zg-onboarding-from: 8px;
  --zg-onboarding-beat: 40ms;
  animation:
    zg-onboarding-rise var(--zg-motion-slide) both,
    zg-fade-in var(--zg-motion-fade) both;
}
.zg-onboarding-step[data-direction='back'] {
  --zg-onboarding-from: -8px;
}
/* Reduced and off motion set no beat, so nothing waits. */
html[data-motion='reduced'] .zg-onboarding-step,
html[data-motion='off'] .zg-onboarding-step {
  --zg-onboarding-beat: 0ms;
}

/* A step's sections and Ready's recap rows: one beat per place, up to five. */
.zg-onboarding-section,
.zg-onboarding-recap-row {
  animation:
    zg-onboarding-rise var(--zg-motion-slide) both,
    zg-fade-in var(--zg-motion-fade) both;
  animation-delay: calc(var(--zg-onboarding-beat) * var(--zg-onboarding-place, 1));
}
:is(.zg-onboarding-section, .zg-onboarding-recap-row):nth-child(2) {
  --zg-onboarding-place: 2;
}
:is(.zg-onboarding-section, .zg-onboarding-recap-row):nth-child(3) {
  --zg-onboarding-place: 3;
}
:is(.zg-onboarding-section, .zg-onboarding-recap-row):nth-child(4) {
  --zg-onboarding-place: 4;
}
:is(.zg-onboarding-section, .zg-onboarding-recap-row):nth-child(n + 5) {
  --zg-onboarding-place: 5;
}

/* The top edge of the scroller (`data-scrolled`, set by the flow). */
.zg-onboarding-top-fade {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 32px;
  margin-bottom: -32px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--zg-bg), transparent);
  opacity: 0;
  transition: opacity var(--zg-motion-fade);
}
[data-scrolled] > .zg-onboarding-top-fade {
  opacity: 1;
}

/* A task's chip lands when its status changes. */
.zg-onboarding-chip {
  animation:
    zg-onboarding-land var(--zg-motion-pop) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-onboarding-page {
  flex: 1;
}

.zg-onboarding-page > footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  padding-block: 28px 32px;
  background: linear-gradient(to bottom, transparent, var(--zg-bg) 24px);
}

/* Transform only: the opacity is the shared `zg-fade-in` on its own curve. */
@keyframes zg-onboarding-rise {
  from {
    transform: translateY(var(--zg-onboarding-from, 8px));
  }
}
@keyframes zg-onboarding-land {
  from {
    transform: scale(0.85);
  }
}

/*
 * Skill sources (onboarding/skills/). A preview image sits in a fixed 2:1
 * box and fades in once loaded, so nothing moves when it arrives. Under
 * 480px of width the previews step aside. Skeleton blocks pulse while a
 * source loads (a loop: still under reduced motion).
 */
.zg-source {
  container: zg-source / inline-size;
}
.zg-source-preview {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--zg-radius-md);
  background: color-mix(in oklab, var(--zg-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
}
.zg-source-preview[data-size='lg'] {
  width: 160px;
}
.zg-source-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--zg-motion-fade);
}
.zg-source-preview > img[data-loaded] {
  opacity: 1;
}
@container zg-source (max-width: 479px) {
  .zg-source-preview {
    display: none;
  }
}
.zg-source-chevron {
  transition: transform var(--zg-motion-snap);
}
.zg-source-row button:hover .zg-source-chevron {
  transform: translateX(2px);
}
.zg-source-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-right: -6px;
  padding: 0 4px;
  border-radius: 9999px;
  font-size: var(--zg-font-size-meta);
  font-variant-numeric: tabular-nums;
  color: var(--zg-accent-fill-fg);
  background: var(--zg-accent-fill);
}
.zg-skill-row[data-picked]::before {
  background-color: color-mix(in oklab, var(--zg-accent) 7%, transparent);
}
.zg-skeleton {
  display: block;
  border-radius: var(--zg-radius-xs);
  background: color-mix(in oklab, var(--zg-text) 9%, transparent);
  animation: zg-skeleton 1.2s ease-in-out infinite alternate;
}
@keyframes zg-skeleton {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* Ready's recap: each row's Change shows on hover or keyboard focus, so eight
   rows read as a list, not as eight buttons. Touch screens show it always. */
.zg-onboarding-recap-row .zg-onboarding-change {
  opacity: 0;
  transition: opacity var(--zg-motion-hover);
}
.zg-onboarding-recap-row:hover .zg-onboarding-change,
.zg-onboarding-recap-row:focus-within .zg-onboarding-change {
  opacity: 1;
}
@media (hover: none) {
  .zg-onboarding-recap-row .zg-onboarding-change {
    opacity: 1;
  }
}

/*
 * Mini demos (onboarding/demos/): a small decorative scene per feature,
 * extension and approval mode. The stage takes the canvas tone inside its
 * tray, with a faint dot grid that fades out at the edges. The scenes are
 * built from the kit's surfaces (.zg-raised windows, .zg-tray wells).
 *
 * Each loop runs on one fixed cycle and carries .zg-loop, so reduced and off
 * motion still it. A stilled scene shows its rest state, the moment the
 * scene is about (the typed title, the open banner, the bar at 43%). So
 * every keyframe below animates toward a rest state that the element holds
 * without it. A scene whose switch is off dims and stills the same way.
 */
.zg-demo {
  --zg-demo-cycle: 6s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: var(--zg-radius-lg);
  background-color: var(--zg-bg);
  color: var(--zg-text);
  text-align: left;
  pointer-events: none;
  user-select: none;
}
.zg-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--zg-hairline) 1px, transparent 1.2px);
  background-size: 12px 12px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  transition: mask-size var(--zg-motion-settle);
}
/* The dot grid spreads while the pointer is on the card. */
:is(button, [role='radio']):hover .zg-demo::before {
  mask-size: 150% 150%;
}
.zg-demo-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-width: 0;
  transition:
    opacity var(--zg-motion-fade),
    filter var(--zg-motion-fade),
    transform var(--zg-motion-settle);
}
/* Off, the scene sits back a little. Switched on, it settles forward. */
.zg-demo[data-on='false'] .zg-demo-scene {
  opacity: 0.5;
  filter: saturate(0);
  transform: scale(0.97);
}
.zg-demo[data-on='false'] * {
  animation: none !important;
}

/* The lights of a small window's title bar. */
.zg-demo-light-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--zg-text) 22%, transparent);
}
/* A placeholder for a line of text. */
.zg-demo-line {
  display: block;
  height: 5px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--zg-text) 13%, transparent);
}
/* The empty part of a bar. */
.zg-demo-track {
  background: color-mix(in oklab, var(--zg-text) 12%, transparent);
}
/* The line that the agent reads. */
.zg-demo-read {
  border-radius: var(--zg-radius-xs);
  background: color-mix(in oklab, var(--zg-accent) 16%, transparent);
}
/* A list that fades out at its top and bottom edges. */
.zg-demo-fade-y {
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* Two states of one scene in the same cell: the before state, then the
   after state (the rest state). */
.zg-demo-stack {
  display: inline-grid;
  min-width: 0;
}
.zg-demo-stack > * {
  grid-area: 1 / 1;
  min-width: 0;
}
.zg-demo-before {
  opacity: 0;
  animation: zg-demo-before var(--zg-demo-cycle) ease-in-out infinite;
}
.zg-demo-after {
  animation: zg-demo-after var(--zg-demo-cycle) ease-in-out infinite;
}
/* Arrives at the start of the cycle and leaves at its end. */
.zg-demo-arrive {
  animation: zg-demo-arrive var(--zg-demo-cycle) ease-in-out infinite;
}
/* Text typed into place during the after state. */
.zg-demo-type {
  animation:
    zg-demo-type var(--zg-demo-cycle) steps(18, end) infinite,
    zg-demo-after var(--zg-demo-cycle) ease-in-out infinite;
}
.zg-demo-type-early {
  animation: zg-demo-type-early var(--zg-demo-cycle) steps(14, end) infinite;
}
/* A bar that fills to its width. */
.zg-demo-grow {
  transform-origin: left center;
  animation: zg-demo-grow var(--zg-demo-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
/* A banner that drops in from above. */
.zg-demo-drop {
  animation:
    zg-demo-drop var(--zg-demo-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite,
    zg-demo-arrive var(--zg-demo-cycle) ease-in-out infinite;
}
/* A key or a button pressed once, after the pointer reaches it. */
.zg-demo-press {
  animation: zg-demo-press var(--zg-demo-cycle) ease-out infinite;
}
/* The pointer: from --zg-demo-dx / --zg-demo-dy to its rest spot. */
.zg-demo-point {
  animation: zg-demo-point var(--zg-demo-cycle) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* A list that scrolls up without end: the list is written twice. */
.zg-demo-flow {
  animation: zg-demo-flow 5s linear infinite;
}
/* A dot that travels along a link, from one end to the other and back. */
.zg-demo-travel {
  animation: zg-demo-travel 2.4s ease-in-out infinite alternate;
}
/* The bars of a sound wave. */
.zg-demo-wave {
  transform-origin: center;
  animation: zg-demo-wave 0.9s ease-in-out infinite alternate;
}
/* A highlight that the agent reads. */
.zg-demo-pulse {
  animation: zg-demo-pulse 1.6s ease-in-out infinite alternate;
}
/* A chip that moves from the first tab to the second. */
.zg-demo-toggle {
  transform: translateX(100%);
  animation: zg-demo-toggle var(--zg-demo-cycle) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* A step of a run that lights up in turn (the delay sets the turn). */
.zg-demo-light {
  animation: zg-demo-light var(--zg-demo-cycle) ease-in-out infinite both;
}
/* A probe that hits a wall and bounces back. */
.zg-demo-shake {
  animation: zg-demo-shake var(--zg-demo-cycle) ease-in-out infinite;
}

@keyframes zg-demo-before {
  0% {
    opacity: 0;
  }
  6%,
  45% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes zg-demo-after {
  0%,
  45% {
    opacity: 0;
  }
  52%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes zg-demo-arrive {
  0%,
  8% {
    opacity: 0;
  }
  16%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes zg-demo-type {
  0%,
  50% {
    clip-path: inset(0 100% 0 0);
  }
  80%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes zg-demo-type-early {
  0%,
  8% {
    clip-path: inset(0 100% 0 0);
  }
  32%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes zg-demo-grow {
  0%,
  12% {
    transform: scaleX(0);
  }
  55%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes zg-demo-drop {
  0%,
  8% {
    transform: translateY(-24px);
  }
  24%,
  100% {
    transform: none;
  }
}
@keyframes zg-demo-press {
  0%,
  58% {
    transform: none;
  }
  62% {
    transform: scale(0.9);
  }
  68%,
  100% {
    transform: none;
  }
}
@keyframes zg-demo-point {
  0%,
  14% {
    transform: translate(var(--zg-demo-dx, 48px), var(--zg-demo-dy, 28px));
  }
  52%,
  100% {
    transform: none;
  }
}
@keyframes zg-demo-flow {
  to {
    transform: translateY(-50%);
  }
}
@keyframes zg-demo-travel {
  from {
    transform: translateX(calc(var(--zg-demo-span, 24px) * -1));
  }
  to {
    transform: translateX(var(--zg-demo-span, 24px));
  }
}
@keyframes zg-demo-wave {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: none;
  }
}
@keyframes zg-demo-pulse {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@keyframes zg-demo-toggle {
  0%,
  45% {
    transform: none;
  }
  52%,
  92% {
    transform: translateX(100%);
  }
  100% {
    transform: none;
  }
}
@keyframes zg-demo-light {
  0%,
  10% {
    opacity: 0.25;
  }
  18%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes zg-demo-shake {
  0%,
  40% {
    transform: translateX(-10px);
  }
  50% {
    transform: none;
  }
  54% {
    transform: translateX(-4px);
  }
  58%,
  100% {
    transform: translateX(-2px);
  }
}

/*
 * Tutorial scenes (demos/tour.tsx, demos/how-it-works.tsx): a stage that
 * shows one step at a time. A part shows while one of its steps is on show
 * (data-active). It fades and rises in once the parts of the last step have
 * left, after its own delay (--zg-tour-delay), and fades out when its steps
 * end. A part that shows from the first step on replays its entrance there
 * (.zg-tour-enter), so the scene starts over each time round. What plays
 * once in a step (typed text, the pointer, a press, a pop, a shake, the swap
 * of a step's two halves, a switch) starts when its part comes, after its
 * own offset (--zg-tour-at). Those set the animation longhands, so one rule
 * gives them all their delay. They carry .zg-loop: reduced and off motion
 * show their end state, like every demo.
 */
.zg-tour {
  min-height: 188px;
}
.zg-tour-part {
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition:
    opacity var(--zg-motion-fade),
    transform var(--zg-motion-settle);
}
.zg-tour-part[data-active] {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--zg-motion-fade-duration) + var(--zg-tour-delay, 0ms));
}
html[data-motion='off'] .zg-tour-part[data-active] {
  transition-delay: 0ms;
}
.zg-demo[data-step='0'] .zg-tour-enter {
  animation-name: zg-tour-enter;
  animation-duration: var(--zg-motion-settle-duration);
  animation-timing-function: var(--zg-motion-settle-ease);
  animation-delay: var(--zg-tour-delay, 0ms);
  animation-fill-mode: both;
}
/* The part a step is about: an accent ring round it. */
.zg-tour-lit {
  transition: box-shadow var(--zg-motion-settle);
}
.zg-tour-lit[data-lit] {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--zg-accent) 60%, transparent),
    0 0 0 4px var(--zg-accent-soft);
}
/* A link between two nodes: dashed, solid once it carries something. */
.zg-tour-wire {
  height: 0;
  border-top: 1px dashed color-mix(in oklab, var(--zg-text-muted) 60%, transparent);
  transition: border-color var(--zg-motion-settle);
}
.zg-tour-wire[data-lit] {
  border-top-style: solid;
  border-top-color: color-mix(in oklab, var(--zg-accent) 70%, transparent);
}
/* The first half of a step, then the second (the rest state). */
.zg-tour-first {
  --zg-tour-at: 1800ms;
  opacity: 0;
}
.zg-tour-then {
  --zg-tour-at: 1800ms;
}
/* A switch that turns on once its part comes; data-off keeps it off. */
.zg-tour-switch {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 12px;
  border-radius: 9999px;
  background: var(--zg-accent-fill);
}
.zg-tour-switch[data-off] {
  background: color-mix(in oklab, var(--zg-text) 18%, transparent);
}
.zg-tour-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--zg-accent-fill-fg);
  transform: translateX(10px);
}
.zg-tour-switch[data-off] .zg-tour-knob {
  transform: none;
}

.zg-tour-part[data-active] .zg-tour-type {
  animation-name: zg-tour-type;
  animation-duration: 900ms;
  animation-timing-function: steps(20, end);
}
.zg-tour-part[data-active] .zg-tour-point {
  animation-name: zg-tour-point;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.zg-tour-part[data-active] .zg-tour-press {
  animation-name: zg-tour-press;
  animation-duration: 1100ms;
  animation-timing-function: ease-out;
}
.zg-tour-part[data-active] .zg-tour-pop {
  animation-name: zg-tour-pop;
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zg-tour-part[data-active] .zg-tour-shake {
  animation-name: zg-tour-shake;
  animation-duration: 480ms;
  animation-timing-function: ease-in-out;
}
.zg-tour-part[data-active] .zg-tour-first {
  animation-name: zg-tour-out;
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}
.zg-tour-part[data-active] .zg-tour-then {
  animation-name: zg-tour-in;
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.zg-tour-part[data-active] .zg-tour-switch:not([data-off]) {
  animation-name: zg-tour-switch;
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}
.zg-tour-part[data-active] .zg-tour-switch:not([data-off]) .zg-tour-knob {
  animation-name: zg-tour-knob;
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.zg-tour-part[data-active]
  :is(
    .zg-tour-type,
    .zg-tour-point,
    .zg-tour-press,
    .zg-tour-pop,
    .zg-tour-shake,
    .zg-tour-first,
    .zg-tour-then,
    .zg-tour-switch,
    .zg-tour-knob
  ) {
  animation-delay: calc(var(--zg-motion-fade-duration) + var(--zg-tour-delay, 0ms) + var(--zg-tour-at, 0ms));
  animation-fill-mode: both;
}

@keyframes zg-tour-enter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
}
@keyframes zg-tour-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes zg-tour-point {
  from {
    opacity: 0;
    transform: translate(var(--zg-demo-dx, 40px), var(--zg-demo-dy, 24px));
  }
  30% {
    opacity: 1;
  }
}
@keyframes zg-tour-press {
  0%,
  70% {
    transform: none;
  }
  82% {
    transform: scale(0.9);
  }
  100% {
    transform: none;
  }
}
@keyframes zg-tour-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes zg-tour-shake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes zg-tour-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes zg-tour-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@keyframes zg-tour-switch {
  from {
    background: color-mix(in oklab, var(--zg-text) 18%, transparent);
  }
}
@keyframes zg-tour-knob {
  from {
    transform: none;
  }
}

/* Look's Dock: a few neutral apps and the picked icon, with the dot of a
   running app under it. */
.zg-dock {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px 6px;
  border-radius: var(--zg-radius-xl);
}
.zg-dock-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.zg-dock-tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zg-radius-lg);
  color: var(--zg-text-muted);
  background: color-mix(in oklab, var(--zg-text) 7%, transparent);
  font-size: var(--zg-font-size-title);
}
.zg-dock-icon {
  width: 44px;
  height: 44px;
  margin-bottom: -2px;
  object-fit: contain;
}
/* A new pick bounces once, like an app that opens from the Dock. */
.zg-dock-launch {
  animation: zg-dock-launch calc(var(--zg-motion-settle-duration) * 1.6) cubic-bezier(0.33, 1, 0.68, 1) both;
}
@keyframes zg-dock-launch {
  0%,
  50%,
  85%,
  100% {
    transform: none;
  }
  25% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-4px);
  }
}
.zg-dock-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--zg-text-muted);
}
.zg-dock-dot[data-off] {
  visibility: hidden;
}
/*
 * The code editor (code/editor/) and the terminal (terminal/).
 */

/* The editor's surface (pierre's host, painted in the code theme's
   background) stretches to the bottom of the column, so a file shorter
   than the panel stays one surface instead of stopping on the tray. */
.zg-code-scroller > * {
  display: flex;
  flex-direction: column;
}
.zg-code-scroller diffs-container {
  flex: 1 0 auto;
}

/* Code hover card (code/editor/CodeHover.tsx): its open / close is the shared `.zg-menu-motion`. */
.zg-hover-section {
  padding: 5px 8px;
}
.zg-hover-section + .zg-hover-section {
  border-top: 1px solid var(--zg-hairline);
}
.zg-hover-code {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--zg-font-mono);
  font-size: var(--zg-font-size-meta);
  line-height: 16px;
  white-space: pre;
  overflow-x: auto;
}
.zg-hover-card code {
  font-family: var(--zg-font-mono);
  font-size: var(--zg-font-size-meta);
  color: var(--zg-text);
}
.zg-hover-card p {
  color: var(--zg-text-muted);
}
.zg-hover-card p strong {
  color: var(--zg-text);
  font-weight: 500;
}

/* macOS renders text heavier by default — `antialiased` at the root keeps
   small UI text legible without bleeding. Pair with the `optimizeLegibility`
   hint for kerning/ligatures on chat surfaces. */
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A sidebar row's badges: one line, scrolled sideways when they outgrow it;
   badges keep their width (a scroller, not a squeeze). */
.zg-badge-strip {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.zg-badge-strip > * {
  flex-shrink: 0;
}

/* Inbox card resolved: lifts away on `exit` and fades on `fade-out`, then
   unmounts (InboxTab waits `readExitMs`). */
.zg-inbox-card[data-state='leaving'] {
  animation:
    zg-inbox-leave var(--zg-motion-exit) both,
    zg-fade-out var(--zg-motion-fade-out) both;
  pointer-events: none;
}
@keyframes zg-inbox-leave {
  to {
    transform: translateY(-4px) scale(0.98);
  }
}

/* Thin, neutral scrollbars across every overflow surface. `scrollbar-width`
   + `scrollbar-color` are the standardised properties (Chromium ≥ 121,
   matching the bundled Electron). The transparent track lets the
   container's own bg show through so the gutter doesn't punch a hole in
   the elevated sidebar / chatbox surfaces. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--zg-border-strong) transparent;
}

/* Native form controls inherit the accent (range thumbs, checkboxes,
   the color picker's ring); one property covers them in both schemes. */
:root {
  accent-color: var(--zg-accent);
}

/* Tabular numerics globally on numeric-bearing classes. Avoids layout
   shift when token counts, timestamps, or stats animate. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Window drag regions — paired with `titleBarStyle: 'hiddenInset' | 'hidden'`
   so the user can move the window via the empty parts of our top chrome.
   Interactive descendants (buttons, links, inputs) must opt out via .zg-no-drag. */
.zg-drag {
  -webkit-app-region: drag;
}

.zg-no-drag,
.zg-drag button,
.zg-drag a,
.zg-drag input,
.zg-drag textarea,
.zg-drag select {
  -webkit-app-region: no-drag;
}

/* --- Side panels (artifacts) ---------------------------------------------
 *
 * Slide open on mount (`@starting-style` width 0 → panel width) and slide
 * closed via `data-collapsed` while `usePresence` (@zidane/ui) keeps the element
 * mounted for `--zg-panel-ms`. Same mechanics as the sidebar. */
.zg-side-panel {
  width: var(--zg-side-panel-w);
  /* Same idea as .zg-sidebar: clip everything except the handle on the inner (left) edge. */
  clip-path: inset(0 0 0 -8px);
  transition: width var(--zg-panel-ms) var(--zg-panel-ease);

  @starting-style {
    width: 0;
  }
}

.zg-side-panel[data-collapsed='true'] {
  width: 0;
}

/* The chat column's inset under a floating panel moves with the panel's slide. */
.zg-chat-column {
  transition: padding-right var(--zg-panel-ms) var(--zg-panel-ease);
}

/* Content sheet: full panel width, pinned to the inner edge so it travels
   with the aside. Light opacity fade (`fade` in, `fade-out` out: opacity
   never rides the panel spring); no re-layout inside. */
.zg-side-panel-sheet {
  width: var(--zg-side-panel-w);
  transition: opacity var(--zg-motion-fade);
}

.zg-side-panel[data-collapsed='true'] .zg-side-panel-sheet {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade-out);
}

/* Terminal drawer: the same slide on the vertical axis. The section's height
   animates; the sheet keeps the full height, pinned to the top edge, so it
   travels with that edge and the terminal never refits mid-slide.
   The sheet is clipped by `.zg-terminal-drawer-clip` with `overflow: clip`,
   not a `clip-path` on the drawer: mid-slide the sheet hangs below the
   window, and the terminal focuses its input as it mounts. Painted-only
   clipping left that overflow scrollable, so the focus scrolled the app's
   root and the whole window jumped. A clipped overflow cannot be scrolled
   to. The resize handle stays on the drawer, outside the clip. */
.zg-terminal-drawer {
  height: var(--zg-terminal-h);
  transition: height var(--zg-panel-ms) var(--zg-panel-ease);

  @starting-style {
    height: 0;
  }
}

.zg-terminal-drawer[data-collapsed='true'] {
  height: 0;
}

.zg-terminal-drawer-clip {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.zg-terminal-drawer-sheet {
  /* Less the section's 1px top border (border-box). */
  height: calc(var(--zg-terminal-h) - 1px);
  transition: opacity var(--zg-motion-fade);
}

.zg-terminal-drawer[data-collapsed='true'] .zg-terminal-drawer-sheet {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade-out);
}

/* While dragging, the resized panel must follow the pointer 1:1: kill its
   width transition (the open/close slide still animates otherwise). */
[data-resizing='true'] {
  transition-duration: 0ms !important;
}

/* --- Sidebar collapse ----------------------------------------------------
 *
 * Width animates on the panel clock (`--zg-panel-ms` / `--zg-panel-ease`:
 * the Appearance slider, the `panel` spring or its tween); the sheet's
 * opacity fades on `fade` / `fade-out`. Property list is explicit — never
 * `transition: all`. */
.zg-sidebar {
  /* Clip vertically and on the outer edge, but let the resize handle (8px,
     straddling the right border) protrude: clip-path, not overflow. The sheet
     slides out through the window's left edge, which the viewport clips. */
  clip-path: inset(0 -8px 0 0);
  width: var(--zg-sidebar-w);
  transition: width var(--zg-panel-ms) var(--zg-panel-ease);

  /* Mount-time open: first frame at width 0, transition carries it to
     the inline width. Pairs with `usePresence` (@zidane/ui), which keeps the
     aside mounted while the width transitions back to 0 on collapse. */
  @starting-style {
    width: 0;
  }
}

.zg-sidebar[data-collapsed='true'] {
  width: 0;
}

/* Content sheet: full panel width, pinned to the aside's right edge so it
   travels with it. A light opacity fade rides along (no blur, no
   re-layout: nothing inside changes position relative to the sheet). */
.zg-sidebar-sheet {
  width: var(--zg-sidebar-w);
  transition: opacity var(--zg-motion-fade);
}

.zg-sidebar[data-collapsed='true'] .zg-sidebar-sheet {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade-out);
}

/* --- Sidebar list: sticky section headers ---------------------------------
 *
 * Each group is its own <ul> (Sidebar.tsx `renderNode`), the containing block
 * of its header: the header sticks while its rows scroll under it, and the
 * next group pushes it out.
 *
 * Chromium sticks at the scroller's content edge, below the list's 4px top
 * padding (`pt-1`). The shadow paints that strip, so no row shows above a
 * stuck header and its title keeps the gap to the search row that the first
 * header has at rest. Opaque on the sidebar's tray, and above the rows, each
 * its own stacking context (`content-visibility` on `.zg-session-row`).
 *
 * Stuck (and only then: a scroll-state query), a header fades the rows
 * sliding under its bottom edge instead of cutting their glyphs. A header
 * pushed out dissolves in the list's top fade (Sidebar.tsx), never cut
 * against the search row.
 *
 * Per host, a host header holds the top and its folder headers stick under
 * it, so its height is pinned (both kinds are 36px: 12 + 20 + 4, 16 + 18 + 2).
 * Arrow-key navigation scrolls a row in below whatever is stuck. */
.zg-sidebar-list {
  --zg-sticky-head-h: 36px;
  scroll-padding-top: calc(var(--zg-sticky-head-h) + 4px);
}

.zg-sidebar-list:has(.zg-host-section) {
  scroll-padding-top: calc(2 * var(--zg-sticky-head-h) + 4px);
}

.zg-sticky-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--zg-tray);
  box-shadow: 0 -4px 0 var(--zg-tray);
  container-type: scroll-state;
}

.zg-sticky-head::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 8px;
  background: linear-gradient(var(--zg-tray), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade);
}

@container scroll-state(stuck: top) {
  .zg-sticky-head::after {
    opacity: 1;
  }
}

.zg-sticky-head[data-host-id] {
  z-index: 2;
  height: var(--zg-sticky-head-h);
}

.zg-host-section .zg-sticky-head:not([data-host-id]) {
  top: var(--zg-sticky-head-h);
}

/*
 * Soft fade above the chat footer — signals that the transcript above
 * is being scrolled "under" the chatbox cluster (chatbox + queue + approval
 * bar). Implemented as a `::before` pseudo on the footer with `bottom: 100%`
 * so it sits in the scroll section's lower edge without affecting layout.
 *
 * The gradient runs from fully transparent at the top to the page bg at
 * the bottom, so timeline content visually melts into the footer rather
 * than being clipped sharply. Only visible when the scroll position has
 * left the top (`data-scrolled='true'`) so the empty/just-opened state
 * stays clean.
 */
.zg-chat-footer::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent 0%, var(--zg-bg) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--zg-motion-fade-out);
}

.zg-chat-footer[data-scrolled='true']::before {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}

/*
 * The side chat's transcript (SideTab) fades at its edges as the conversation's
 * does: 16px under its top while rows sit above it (its scroll mask), and
 * 32px into its composer while the view is up from the bottom (the footer's
 * fade above: `data-scrolled`, on the footer's curves). A mask, not a
 * gradient to the bg: the panel sits on its own surface. Each edge also needs
 * rows under it: the scroller's own scroll timeline ramps it over its fade
 * height, and without overflow there is no timeline, so nothing fades.
 */
@property --zg-scrolled {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --zg-rows-above {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --zg-rows-below {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.zg-side-transcript {
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / calc(1 - var(--zg-rows-above))),
    #000 16px,
    #000 calc(100% - 32px),
    rgb(0 0 0 / calc(1 - var(--zg-scrolled) * var(--zg-rows-below)))
  );
  animation:
    zg-rows-above linear both,
    zg-rows-below linear both;
  animation-timeline: scroll(self block), scroll(self block);
  animation-range:
    0 16px,
    calc(100% - 32px) 100%;
  transition: --zg-scrolled var(--zg-motion-fade-out);
}
.zg-side-transcript[data-scrolled='true'] {
  --zg-scrolled: 1;
  transition: --zg-scrolled var(--zg-motion-fade);
}
@keyframes zg-rows-above {
  from {
    --zg-rows-above: 0;
  }
  to {
    --zg-rows-above: 1;
  }
}
@keyframes zg-rows-below {
  from {
    --zg-rows-below: 1;
  }
  to {
    --zg-rows-below: 0;
  }
}

/* --- Welcome / empty-session surface -------------------------------------
 *
 * One subtle rise (`settle`) and fade (`fade`) on mount: a brief fade
 * under reduced motion, nothing with motion off.
 */
.zg-welcome-in {
  animation:
    zg-welcome-rise var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}
@keyframes zg-welcome-rise {
  from {
    transform: translateY(4px);
  }
}

/*
 * A value still loading: its sample text holds the box (same line height,
 * near the same width), shown as a soft track-toned bar that breathes.
 * Still under reduced motion and with motion off.
 */
.zg-skeleton {
  color: transparent;
  background: var(--zg-track);
  border-radius: var(--zg-radius-sm);
  user-select: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: zg-skeleton-breathe 1.6s ease-in-out infinite;
}
@keyframes zg-skeleton-breathe {
  50% {
    opacity: 0.55;
  }
}
html[data-motion='off'] .zg-skeleton,
html[data-motion='reduced'] .zg-skeleton {
  animation: none;
}

/*
 * Composer dock (an approval, the select-turn hint). When
 * every child renders null the element is genuinely empty, so `:empty`
 * matches and the wrapper stops claiming a gap in the footer's flex column.
 */
.zg-composer-dock:empty {
  display: none;
}

/*
 * Dock cards (an approval, the select-turn hint). A plain
 * opacity fade on mount and nothing else: no scale, blur, translate or
 * margins of their own. The dock's `gap-2` is the only spacing, so every
 * card sits flush with the composer's left edge. They do not borrow
 * `.zg-attachment-row`: its grid layout, 4px left margin and 8px bottom
 * margin are made for the attachment strip and would read as a misaligned,
 * jittery card here.
 */
.zg-dock-card {
  animation: zg-fade-in var(--zg-motion-fade) both;
}

/* A conversation switch is not a state change: nothing in the column eases
   into the new conversation's look (Center.tsx, `data-still`). */
main[data-still],
main[data-still] * {
  transition: none !important;
}

.zg-chatbox-surface {
  container: zg-chatbox / inline-size;
}
/* The composer's ring frames the card without banding: the ring tone (a half
   tray step in light), pressed-in edges from `.zg-tray`. */
.zg-chatbox-surface.zg-tray {
  background: var(--zg-tray-ring);
}

/*
 * Composer controls. The row never wraps and no text spills out of its pill:
 * only the agent and model names shrink (they truncate). Everything else
 * keeps its size, and these tiers of the card's width hand space back in the
 * order that loses least:
 *   < 800  a draft's server name (its icon stays)
 *   < 680  the run chip's rate; a draft's environment name or branch
 *   < 560  the run chip's cost; a draft's "Chat"
 *   < 480  the options pill's words (`.zg-pill-collapsible`, @zidane/ui
 *          styles/composer.css)
 *   < 420  the run chip's tokens; a draft's server and environment pickers
 *   < 280  the pickers and status: attach and send stay
 * A draft's folder name never folds: it takes at most a share of the card
 * (ScopeToggle, RemoteFolderPicker). The send button never moves.
 */
.zg-chatbox-status .zg-run-rate,
.zg-chatbox-status .zg-run-cost,
.zg-chatbox-status .zg-run-tokens {
  display: none;
}
/* A chat squeezed beside a wide side panel (down to 10% of the window):
   only attach and send stay; the pickers and status come back with room. */
@container zg-chatbox (max-width: 279px) {
  .zg-chatbox-pickers,
  .zg-chatbox-status {
    display: none;
  }
}
@container zg-chatbox (min-width: 420px) {
  .zg-chatbox-status .zg-run-tokens {
    display: inline-flex;
  }
}
@container zg-chatbox (min-width: 560px) {
  .zg-chatbox-status .zg-run-cost {
    display: inline-flex;
  }
}
@container zg-chatbox (min-width: 680px) {
  .zg-chatbox-status .zg-run-rate {
    display: inline-flex;
  }
}
/* A draft's pickers (ConversationComposer) sit with Send and never shrink:
   their words (`.zg-pill-label`) fold first, so the agent and model names
   keep their room. */
@container zg-chatbox (max-width: 799px) {
  .zg-chatbox-server .zg-pill-label {
    display: none;
  }
}
@container zg-chatbox (max-width: 679px) {
  .zg-chatbox-environment .zg-pill-label {
    display: none;
  }
}
@container zg-chatbox (max-width: 559px) {
  .zg-chatbox-target .zg-pill-label {
    display: none;
  }
}
@container zg-chatbox (max-width: 419px) {
  .zg-chatbox-server,
  .zg-chatbox-environment {
    display: none;
  }
}

.zg-attachment-item {
  --zg-attachment-size: 64px;
  width: var(--zg-attachment-size);
  margin-right: 0.5rem;
  flex-shrink: 0;
  /* Only a removal changes these: the tile folds away on `exit`. */
  transition:
    width var(--zg-motion-exit),
    margin-right var(--zg-motion-exit);
}

.zg-attachment-item[data-exiting='true'] {
  width: 0;
  margin-right: 0;
  pointer-events: none;
}

.zg-attachment-content {
  width: var(--zg-attachment-size, 64px);
  /* Enter: grows on `pop`, sharpens in on `fade`. Exit (the transition): shrinks on `exit`, fades on `fade-out`. */
  animation:
    zg-attachment-enter var(--zg-motion-pop) both,
    zg-attachment-sharpen var(--zg-motion-fade) both;
  transform-origin: center;
  transition:
    transform var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out),
    filter var(--zg-motion-fade-out);
}

.zg-attachment-item[data-exiting='true'] .zg-attachment-content {
  opacity: 0;
  transform: scale(0.5);
  filter: blur(3px);
  animation: none;
}

/*
 * The row owns its outer bottom margin (12px = the chatbox's gap-3)
 * rather than relying on the parent's flex `gap`. Folding the margin
 * into the same collapse animation as `grid-template-rows` is what
 * makes removing the LAST attachment smooth — otherwise the gap
 * disappears instantly when the row unmounts and the chatbox visibly
 * jumps up by 12px at the end of the otherwise-clean collapse.
 *
 * The component stays mounted at all times; `data-collapsing='true'`
 * doubles for "no visible attachments yet" and "last attachment is
 * exiting", so the initial state already collapses to zero height
 * with no spacing.
 */
.zg-attachment-row {
  display: grid;
  grid-template-rows: 1fr;
  margin-bottom: 0.5rem;
  margin-left: 0.25rem;
  transition:
    grid-template-rows var(--zg-motion-settle),
    margin-bottom var(--zg-motion-settle);
}

.zg-attachment-row[data-collapsing='true'] {
  grid-template-rows: 0fr;
  margin-bottom: 0;
  transition:
    grid-template-rows var(--zg-motion-exit),
    margin-bottom var(--zg-motion-exit);
}

.zg-attachment-row > .zg-attachment-row-inner {
  min-height: 0;
}

@keyframes zg-attachment-enter {
  from {
    transform: scale(0.85) translateY(6px);
  }
}
@keyframes zg-attachment-sharpen {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}

/* Diffs tab: files edge to edge, a hairline under each, and between several
   edits of one file (Session). No overflow clipping here: each file's header
   sticks to the top of the pane while its diff scrolls by. */
.zg-diff-file {
  border-bottom: 1px solid var(--zg-hairline);
}
.zg-diff-edit + .zg-diff-edit {
  border-top: 1px solid var(--zg-hairline);
}

/* Sidebar row, line 2: a session's commits and pull requests as quiet badges.
   A new one makes its badge pop (`snap`, its ring and tint on the fade curve)
   and sweeps the row once; the line grows open (`settle` + `fade`) the first
   time a badge arrives. The vars drop the movement below full motion. */
.zg-row-badge {
  background: color-mix(in oklab, var(--zg-text) 6%, transparent);
  color: var(--zg-text-muted);
  transition: background-color var(--zg-motion-hover);
}
.zg-row-badge:hover {
  background: color-mix(in oklab, var(--zg-text) 11%, transparent);
}
.zg-row-extra {
  display: grid;
  grid-template-rows: 1fr;
}
.zg-row-extra[data-grow] {
  animation:
    zg-row-extra-grow var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}
@keyframes zg-row-extra-grow {
  from {
    grid-template-rows: 0fr;
  }
}
/* The ring and tint keep the pop's length on a smooth curve: never sprung. */
.zg-row-badge[data-fresh] {
  animation:
    zg-row-badge-pop var(--zg-motion-snap),
    zg-row-badge-flash var(--zg-motion-snap-duration) var(--zg-motion-fade-ease);
}
@keyframes zg-row-badge-pop {
  30% {
    transform: scale(1.12);
  }
}
@keyframes zg-row-badge-flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--zg-accent) 55%, transparent);
  }
  30% {
    color: var(--zg-text);
  }
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

/* Second row of both screen columns: search on the left, section title on
   the right, one shared bottom rule. Fixed height keeps them on one line. */
.zg-screen-toprow {
  height: 56px;
}

/* Scroll regions that sit directly under a header rule: content fades out
   over the first/last 20px instead of being cut off mid-line. Mask, not an
   overlay, so it never paints over the scrollbar or catches clicks. */
.zg-scroll-fade {
  mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  /* Overlay-style scrollbar: hidden at rest so a bar hugging the column edge
     doesn't compete with the content; revealed while the pointer is over the
     region. The gutter stays reserved so nothing shifts on reveal. */
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--zg-motion-hover);
}

.zg-scroll-fade:hover,
.zg-scroll-fade:focus-within {
  scrollbar-color: var(--zg-border-strong) transparent;
}

/* A wheel scroll in flight: the rows take no pointer events, so nothing
   restyles under a still pointer while they slide (useWheelHoverPause). The
   scrollbar belongs to the scroller and keeps working. */
[data-wheeling] > * {
  pointer-events: none;
}

/* Reading measure for full-screen surfaces: body content sits in a centred
   720px column so a wide window doesn't stretch rows into ribbons; the
   header stays full width. The scroll container stays full width too
   (scrollbar at the edge). */
.zg-screen-column {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.zg-screen-aside {
  width: 260px; /* fallback; ScreenShell sets the live sidebar width inline */
}

/* Full-window layer (`ModalProvider` screen variant, used by Settings).
   Sits on the canvas colour like the app shell; it settles in on `panel` +
   `fade` (CSS) and leaves on motion's `withFade('exit')` (ModalProvider).
   Same z-index as the scrim: it IS the modal slot. */
.zg-modal-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  background: var(--zg-bg);
  animation:
    zg-screen-in var(--zg-motion-panel) both,
    zg-fade-in var(--zg-motion-fade) both;
}

/* Menus and popovers portal to <body> (`--zg-z-float`, 50): while a screen is up
   they open over it instead of behind it. Tooltips stay above (110). */
:root:has(.zg-modal-screen) {
  --zg-z-float: 100;
}

@keyframes zg-screen-in {
  from {
    transform: scale(0.99);
  }
}

.zg-modal-screen[data-state='closing'] {
  pointer-events: none;
}

/* Settings modal header — the title/description crossfade when the active
   tab changes. Incoming text remounts with the enter animation (`settle` +
   `fade`) while a copy of the outgoing text plays the exit (`exit` +
   `fade-out`) from an absolute overlay until `readExitMs` (see
   AnimatedHeaderText in SettingsModal). Reduced motion keeps only the fades;
   the outgoing copy still fades, so the two never show stacked. */
.zg-settings-heading-enter {
  animation:
    zg-settings-heading-enter var(--zg-motion-settle) both,
    zg-fade-in var(--zg-motion-fade) both;
}

.zg-settings-heading-exit {
  animation:
    zg-settings-heading-exit var(--zg-motion-exit) both,
    zg-fade-out var(--zg-motion-fade-out) both;
}

/* Settings row picked from search: an accent wash + ring that holds until the
   user presses inside the row, with a soft pulse on arrival. */
.zg-setting-focus {
  border-radius: var(--zg-radius-md, 8px);
  background: var(--zg-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zg-accent) 55%, transparent);
  animation: zg-setting-focus-pulse 1.1s ease-out 2;
}
html[data-motion='off'] .zg-setting-focus,
html[data-motion='reduced'] .zg-setting-focus {
  animation: none;
}

@keyframes zg-setting-focus-pulse {
  0% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--zg-accent) 55%, transparent),
      0 0 0 0 color-mix(in srgb, var(--zg-accent) 45%, transparent);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--zg-accent) 55%, transparent),
      0 0 0 6px color-mix(in srgb, var(--zg-accent) 0%, transparent);
  }
}

@keyframes zg-settings-heading-enter {
  from {
    transform: translateY(3px);
  }
}

@keyframes zg-settings-heading-exit {
  to {
    transform: translateY(-3px);
  }
}

/* When Shiki has rendered, its <pre.shiki> child owns padding + sizing
   so the body becomes a transparent scroll viewport. Larger type than
   the inline code-block default (.zg-shiki pre.shiki) — the lightbox is
   a reading surface, not a side-by-side reference. */
.zg-lightbox-text-body.zg-shiki {
  padding: 0;
}

/* `zg-sendstop` — unified Send / Stop button in the composer. One element,
   three visual states driven by `data-state` + hover/focus-visible, so every
   transition is a crossfade in place (constant 32px circle, no layout jump):

     send  — a lit accent sphere, drawn like the daemon orb (`.zg-orb`):
             highlight up-left, shade down-right, a soft halo in its colour.
             Empty prompt (disabled): asleep, smaller, desaturated, no halo;
             filling the prompt wakes it (scale on `snap`, light on `fade`).
             Hover: the light drifts toward the pointer side, the halo grows
             and a sheen turns slowly inside the sphere.
     run   — the same sphere, still lit: the send glyph turns into a thin
             spinner ring and the sheen keeps turning inside, the daemon
             orb's running light. Deliberately NOT red: streaming is a
             working state, not an alarm.
     run + hover/focus-visible — the stop affordance: the sphere's colour
             eases to danger (`--send` is a registered colour, so it
             transitions) and the spinner gives way to a square stop glyph.

   Layers stack absolutely: the shown glyph scales in on `snap` and fades on
   `fade`, the hidden one leaves on `exit` / `fade-out` (reduced motion keeps
   the crossfade, drops the scale). The spinner is a loop: it stops with
   motion off (the clamp below). */
@property --send {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}
@property --send-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 34%;
}
@property --send-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 28%;
}
@property --send-halo {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.zg-sendstop {
  --send: var(--zg-accent-fill);
  --send-halo: 10px;
  isolation: isolate;
  /* The sphere is ::after; the button paints nothing (the reset keeps a <button>'s native face). */
  background: transparent;
  color: var(--zg-accent-fill-fg);
  transition:
    --send var(--zg-motion-fade),
    scale var(--zg-motion-snap),
    --send-x var(--zg-motion-fade),
    --send-y var(--zg-motion-fade),
    --send-halo var(--zg-motion-fade),
    opacity var(--zg-motion-fade),
    filter var(--zg-motion-fade),
    color var(--zg-motion-hover);
}
/* The sphere is its own layer, under the sheen and the glyphs, so a press
   gives the sphere only (below): the glyph never scales under the pointer. */
.zg-sendstop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  --send-x: inherit;
  --send-y: inherit;
  --send-halo: inherit;
  background: radial-gradient(
    circle at var(--send-x) var(--send-y),
    color-mix(in oklab, var(--send) 58%, white) 0%,
    var(--send) 52%,
    color-mix(in oklab, var(--send) 70%, black) 100%
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 1px color-mix(in oklab, var(--send) 45%, black),
    0 0 0 1px color-mix(in oklab, var(--send) 32%, transparent),
    0 0 var(--send-halo) -3px color-mix(in oklab, var(--send) 75%, transparent);
  transition:
    scale var(--zg-motion-snap),
    background-color var(--zg-motion-hover);
}

/* Asleep while there is nothing to send. */
.zg-sendstop:disabled {
  --send-halo: 0px;
  opacity: 0.45;
  filter: saturate(0.35);
  scale: 0.92;
}

.zg-sendstop[data-state='send']:hover:not(:disabled),
.zg-sendstop[data-state='send']:focus-visible {
  --send-x: 44%;
  --send-y: 20%;
  --send-halo: 18px;
  scale: 1.06;
}
/* Pressed, in every state: the sphere and its sheen give (0.97 overall, so
   0.97 / 1.06 under the hover lift); the glyph holds still. */
.zg-sendstop[data-state]:active:not(:disabled)::before,
.zg-sendstop[data-state]:active:not(:disabled)::after {
  scale: 0.97;
}
.zg-sendstop[data-state='send']:is(:hover, :focus-visible):active:not(:disabled)::before,
.zg-sendstop[data-state='send']:is(:hover, :focus-visible):active:not(:disabled)::after {
  scale: 0.915;
}

/* The sheen that turns inside the sphere on hover: the orb's running light.
   Always attached, paused until hovered: on leave it stops where it is and
   fades out, instead of snapping back to its start while still visible, and
   the next hover picks it up from there. Paused, it costs no frames. */
.zg-sendstop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, rgb(255 255 255 / 0.5) 75%, transparent 90%);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: zg-sendstop-rotate 2.4s linear infinite paused;
  transition:
    opacity var(--zg-motion-fade),
    scale var(--zg-motion-snap);
}
.zg-sendstop[data-state='send']:hover:not(:disabled)::before,
.zg-sendstop[data-state='run']::before {
  opacity: 1;
  animation-play-state: running;
}
html[data-motion='off'] .zg-sendstop::before,
html[data-motion='reduced'] .zg-sendstop::before {
  animation: none;
}

/* The glyph leans the way it points, a touch, while hovered. */
.zg-sendstop-send > span {
  transition: translate var(--zg-motion-snap);
}
.zg-sendstop[data-state='send']:hover:not(:disabled) .zg-sendstop-send > span {
  translate: -1px 0;
}

.zg-sendstop[data-state='run']:hover,
.zg-sendstop[data-state='run']:focus-visible {
  --send: var(--zg-danger);
  outline-color: var(--zg-danger);
}

.zg-sendstop-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition:
    transform var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out);
}

.zg-sendstop[data-state='send'] .zg-sendstop-send,
.zg-sendstop[data-state='run']:not(:hover):not(:focus-visible) .zg-sendstop-spin,
.zg-sendstop[data-state='run']:hover .zg-sendstop-stop,
.zg-sendstop[data-state='run']:focus-visible .zg-sendstop-stop {
  opacity: 1;
  transform: scale(1);
  transition:
    transform var(--zg-motion-snap),
    opacity var(--zg-motion-fade);
}

/* Thin spinner ring — a 16px circle whose top arc carries the accent;
   the rest sits at ~25% so the ring reads as a quiet loader rather than
   a broken border. Rotation lives on the ring itself so the layer's
   scale crossfade doesn't fight the transform. */
.zg-sendstop-ring {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: zg-sendstop-rotate 800ms linear infinite;
}

/* The same ring, small, for inline waits, is the kit's `.zg-spin-ring` (styles/motion.css), on
   the kit's `zg-sendstop-rotate` keyframe that the ring above turns on too. */

/* --- Motion preference -----------------------------------------------------
 *
 * `MotionProvider` (main.tsx) resolves the Appearance "motion" setting
 * (system / off / reduced / full) against the OS `prefers-reduced-motion`
 * query, writes `html[data-motion]` / `[data-springs]` and the
 * `--zg-motion-<name>` / `--zg-panel-*` vars. Rules above read the vars, so
 * the mode needs no per-element override:
 *
 *   full     everything plays (springs or their tween twins).
 *   reduced  movement vars are 0ms (no translate/scale, panels snap); the
 *            fades stay, brief. Loops settle.
 *   off      every var 0ms; the clamp below also stops loops and keeps
 *            transitionend firing.
 *
 * Looping keyframes under the clamp land on their final frame, which every
 * loop here is designed to make a resting state.
 * ------------------------------------------------------------------------- */
html[data-motion='off'] {
  /* Clamp every transition to ~0ms instead of `none` so transitionend
     listeners still fire (animation-tied state machines rely on them).
     0.01ms is the WebAIM recommendation — visually instant, behaviorally
     intact. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion='off'],
html[data-motion='reduced'] {
  /* Infinite loops settle on their resting frame. */
  * {
    animation-iteration-count: 1 !important;
  }

  /* Dev browser: the click ripple and the loading bar's sweep are loops of
     their own timing, not transitions: no ripple, the bar holds still. */
  .zg-browser-ripple {
    display: none;
  }

  .zg-browser-progress::after {
    width: 100%;
    opacity: 0.6;
    animation: none;
  }
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  /* Fixed-viewport app: nothing at the document level may ever scroll. Every
     scroll region is an explicit overflow-y-auto box; a stray pseudo element
     or animating sheet poking 2px past the viewport must not turn the whole
     window into a scroller. `clip`, not `hidden`: a hidden box still scrolls
     when something inside takes focus (a terminal mounting), which shifted
     the whole app up. A clipped one cannot scroll at all. */
  overflow: clip;
  font-family: var(--zg-font-ui);
  color: var(--zg-text);
  background: var(--zg-bg);
}

* {
  box-sizing: border-box;
}

button {
  font-family: inherit;
}

/*
 * Inline badges (components/ui/Badge.tsx): files, skills, commands, links and
 * references, in the composer, sent prompts and replies alike. Every badge is
 * the same box: a plain inline box (text that does not wrap) in the
 * surrounding text's own face and size. Its 1px vertical padding only paints:
 * an inline box's padding never changes the line, so a line is the same height
 * with badges as without, and a descender (the g of `origin/main`) keeps a
 * pixel of background under it instead of touching the edge. In the composer
 * the caret beside or inside a badge is the caret anywhere else: Chrome draws
 * a misplaced, line-tall caret next to a non-editable inline-block, never
 * next to an inline box. A file name's code face is an inner
 * `.zg-badge-code`, so it never changes the box.
 */
.zg-badge {
  margin: 0 0.05em;
  padding: 1px 0.4em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--zg-text) 8%, transparent);
  color: var(--zg-text);
  font: inherit;
  white-space: nowrap;
  text-decoration: none;
}
/*
 * A badge node in the composer ends in a zero-width space in its own face.
 * Chrome measures a caret right after a non-editable inline from its last
 * text: without this, at the end of a line that was the file name's code
 * face (a shorter caret) drawn inside the badge's padding; with it the caret
 * is the one before the badge and after any text.
 */
.ProseMirror .zg-mention::after {
  content: '\200b';
}
/*
 * A badge's toned-down second part (a ticket's title): its own clipped box
 * so a long one ends in an ellipsis. `overflow: hidden` moves an
 * inline-block's baseline to its bottom edge; top-aligned, it sits on the
 * label's line.
 */
.zg-badge-detail {
  display: inline-block;
  max-width: var(--zg-badge-detail-max, 24ch);
  margin-left: 0.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: var(--zg-text-subtle);
}
.zg-badge-code {
  font-family: var(--zg-font-mono);
  font-size: 0.9em;
  /* Inside the box's own line: the code face's taller metrics never stretch it. */
  line-height: 1;
}
/*
 * Typed text (a link, a command's `/name`, decorated in the composer) keeps
 * the editor's whitespace handling: under `nowrap` the browser types a space
 * at its edge as a non-breaking one, which would reach the prompt. A link may
 * break where text can, so a long one never runs out of the box.
 */
.zg-badge[data-typed] {
  white-space: pre;
}
.zg-badge[data-typed][data-kind='link'] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
}
a.zg-badge,
.zg-badge[role='button'] {
  cursor: pointer;
  transition:
    background-color var(--zg-motion-hover),
    box-shadow var(--zg-motion-hover);
}
a.zg-badge:hover,
.zg-badge[role='button']:hover {
  background: var(--zg-raised);
  box-shadow: var(--zg-shadow-raised);
}
.zg-badge-icon,
.zg-badge-glyph::before {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-inline-end: 0.35em;
  vertical-align: -0.1em;
}
/*
 * The default icon color, at zero specificity: a tone class on the icon (a
 * reference's state, `text-zg-warn`) wins over it. As a plain class rule it
 * outranked them, and chip icons read gray whatever their state.
 */
:where(.zg-badge-icon) {
  color: var(--zg-text-muted);
}
.zg-badge-glyph::before {
  color: var(--zg-text-muted);
}
.zg-badge-glyph::before {
  content: '';
}
/* A language's two letters (`TS`, `PY`) in place of a type icon: drawn by CSS,
   so the badge's text is the name alone (what a copy or a screen reader gets). */
.zg-badge-letters::before {
  content: attr(data-letters);
}
/*
 * In its own smaller face, sized back to the icon box: as tall, the same gap,
 * the same bottom edge. `overflow: hidden` makes its bottom edge, not its
 * letters' baseline, what `vertical-align` places, as for the empty icon box;
 * the offset is the icon's -0.1em in this face.
 */
.zg-badge-letters {
  overflow: hidden;
  width: auto;
  min-width: calc(1.45em / 0.56);
  height: calc(0.9em / 0.56);
  margin-inline-end: calc(0.35em / 0.56);
  padding: 0 0.2em;
  border-radius: 0.25em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-family: var(--zg-font-ui);
  font-size: 0.56em;
  font-weight: 600;
  line-height: calc(0.9em / 0.56);
  letter-spacing: 0.02em;
  text-align: center;
  vertical-align: calc(-0.1em / 0.56);
}
.zg-badge-site::before {
  background: var(--zg-site-icon) center / contain no-repeat;
  border-radius: 2px;
}
/* The kinds' hues, on the glyph only: the badges stay one family. */
.zg-badge[data-kind='skill']::before {
  color: color-mix(in oklab, var(--zg-chip-skills-bg) 70%, var(--zg-text));
}
.zg-badge[data-kind='command']::before {
  color: color-mix(in oklab, var(--zg-chip-default-bg) 70%, var(--zg-text));
}
/* A link in prose (a reply) keeps its link styling, led by the site's icon. */
.zg-link-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.3em;
  vertical-align: -0.14em;
  border-radius: 2px;
  background: var(--zg-site-icon) center / contain no-repeat;
}

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--zg-text-muted);
  pointer-events: none;
  height: 0;
}

.ProseMirror p {
  text-box: trim-both;
}

/*
 * A paragraph left with nothing in it (deleting its last character, before
 * the editor puts its line break back) keeps its line: trimmed to its text,
 * it would be 0px tall for that layout, the composer one line shorter, and
 * the transcript above, taller for an instant, would clamp its scroll and
 * stay moved.
 */
.ProseMirror p:empty::after {
  content: '\200b';
}

.ProseMirror {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--zg-font-prompt);
  font-size: var(--zg-font-size-prompt);
}

/*
 * Inline-autocomplete ghost suffix — the dim continuation painted right
 * after the caret (TUI: COLOR.dim overlay, `renderGhostOverlay` in
 * src/tui/prompt/composer-parts.tsx). Same font
 * as the surrounding text (inherits), muted tone at reduced opacity so
 * it reads as "not yet typed". It participates in normal inline flow —
 * the tail of the line is PUSHED right as if accepted (TUI parity) and
 * a long suggestion wraps inside the height-capped .zg-editor-scroll
 * instead of disturbing the controls/send row. Non-interactive: no
 * caret target, no selection, invisible to the a11y tree.
 */
.zg-ghost-suffix {
  color: var(--zg-text-muted);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  white-space: pre-wrap;
}

/* The git bar's slot slides in and out even across a conversation switch
   (`main[data-still]` holds everything else still): the composer growing or
   shrinking by a bar is a change of shape, and a jump there reads as a blink. */
main[data-still] .zg-git-bar-slot {
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade) !important;
}
/* Its mirror at the top of the tray, the badge band (composer/ConversationBadges.tsx
   over the kit's ComposerBadges), eases the same way. Its badges never animate on a
   switch: another conversation's strip is shown as it is. */
main[data-still] .zg-composer-badges {
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade),
    margin-top var(--zg-motion-settle) !important;
}
/* While a folder it hasn't seen is read, the bar holds its place, faded: no
   collapse and re-open, and never the last folder's branch on the new one. */
.zg-git-bar-content {
  transition: opacity var(--zg-motion-fade);
}
.zg-git-bar-content[data-faded] {
  opacity: 0;
}
main[data-still] .zg-git-bar-content {
  transition: opacity var(--zg-motion-fade) !important;
}

/* Composer git bar (composer/GitBar.tsx): in a narrow composer the extras
   step aside in order (the PR, then ahead/behind, then the file count), and
   the branch name truncates last. The bar is its own size container. */
.zg-git-bar {
  container-type: inline-size;
}
@container (max-width: 480px) {
  .zg-git-pr {
    display: none !important;
  }
}
@container (max-width: 380px) {
  .zg-git-drift {
    display: none !important;
  }
}
@container (max-width: 300px) {
  .zg-git-files {
    display: none;
  }
}

/* Switcher rows (composer/BranchMenu.tsx): a keyboard scroll stops a row
   below its section's pinned header, never under it. */
.zg-git-row {
  scroll-margin-top: 30px;
}

/* A row's facts: small track chips with a mini icon. Muted by default; only
   verdicts (checks, review, the default branch) take a tone. */
.zg-git-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 0;
  height: 18px;
  padding: 0 6px 0 5px;
  border-radius: 9999px;
  background: var(--zg-track);
  box-shadow: var(--zg-shadow-inset);
  font-size: 10.5px;
  line-height: 1;
  color: var(--zg-text-muted);
}
.zg-git-chip-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.zg-git-chip[data-chip='branch'] {
  flex-shrink: 1;
  max-width: 50%;
}
.zg-git-chip[data-tone='success'] {
  color: var(--zg-success);
}
.zg-git-chip[data-tone='danger'] {
  color: var(--zg-danger);
}
.zg-git-chip[data-tone='warn'] {
  color: var(--zg-warn);
}
.zg-git-chip[data-tone='accent'] {
  color: var(--zg-accent);
}

/* A row's chips wrap onto a hidden second line, so a narrow row drops the
   last (least important) whole. In a very narrow menu the diff size goes too. */
.zg-git-row-body {
  container-type: inline-size;
}
@container (max-width: 240px) {
  .zg-git-row-size {
    display: none;
  }
}

/* Switcher rows (composer/BranchMenu.tsx): their actions (open on GitHub,
   copy the branch) show on the row under the pointer or the keyboard. */
.zg-git-row .zg-git-row-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zg-motion-hover);
}
.zg-git-row:hover .zg-git-row-actions,
.zg-git-row[data-active] .zg-git-row-actions,
.zg-git-row:focus-within .zg-git-row-actions {
  opacity: 1;
  pointer-events: auto;
}
/* Under the shown actions the meta text fades out instead of running beneath them. */
.zg-git-row:is(:hover, [data-active], :focus-within) .zg-git-row-meta {
  mask-image: linear-gradient(to left, transparent 56px, #000 88px);
}

/*
 * Composer height cap. The editor wrapper grows with content, then
 * scrolls internally so a long draft can never push the controls row,
 * send button, or transcript out of the window (the card keeps its
 * bottom-band geometry regardless of content height). 40vh mirrors the
 * TUI's grow-to-a-cap-then-scroll behavior (MAX_CONTENT_LINES) scaled
 * to a GUI viewport — roughly 15 lines on a default 800px window.
 * `overscroll-behavior: contain` stops a wheel at the cap's edge from
 * chaining into the transcript scroll behind the composer.
 */
.zg-editor-scroll {
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;

  /*
   * Shared composer text inset — declared as --zg-composer-inset on the
   * card element (Chatbox.tsx) so the editor text column and anything
   * else that must sit on the + glyph column consume ONE knob. 8px was
   * measured: card px-1 (4px, corner-nesting-dictated) + 8px lands the
   * text x exactly on the w-7 attach button's glyph left (Δ ≤ 1px). The
   * card sets 12px, 4px inside that column, for a roomier prompt.
   */
  padding-inline: var(--zg-composer-inset, 8px);
}

/*
 * Rich-text formatting inside the chatbox editor. Styling is intentionally
 * light — the chat input is a composer, not a reading surface, so we
 * lean on the same scale as `text-sm` body copy and only differentiate
 * what would otherwise read as noise (code chrome, list markers, quote
 * gutter). The actual rendering happens here in TipTap and again in
 * `.zg-md` on the assistant side; the two stay visually consistent so
 * the user sees what they're about to send.
 */
.ProseMirror p + p,
.ProseMirror p + ul,
.ProseMirror p + ol,
.ProseMirror p + pre,
.ProseMirror p + blockquote,
.ProseMirror ul + p,
.ProseMirror ol + p,
.ProseMirror pre + p,
.ProseMirror blockquote + p {
  margin-top: 0.15em;
}

.ProseMirror code {
  padding: 0 0.25em;
  border-radius: 5px;
  background: var(--zg-code-bg);
  font-family: var(--zg-font-mono);
  font-size: 0.9em;
}

.ProseMirror pre {
  margin: 0.25em 0;
  padding: 0.5em 0.75em;
  border-radius: var(--zg-radius-md);
  background: var(--zg-code-bg);
  box-shadow: inset 0 0 0 1px var(--zg-hairline);
  font-family: var(--zg-font-mono);
  font-size: 0.85em;
  overflow-x: auto;
  white-space: pre;
}

.ProseMirror pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: inherit;
}

.ProseMirror ul,
.ProseMirror ol {
  margin: 0;
  padding-left: 1.4em;
}

.ProseMirror ul {
  list-style: disc;
}

.ProseMirror ol {
  list-style: decimal;
}

.ProseMirror li > p {
  margin: 0;
}

.ProseMirror blockquote {
  margin: 0.25em 0;
  padding: 0 0.75em;
  border-left: 2px solid var(--zg-hairline);
  color: var(--zg-text-muted);
}

.tippy-box[data-theme~='zg-mention'] {
  background: transparent;
  box-shadow: none;
}

.tippy-box[data-theme~='zg-mention'] .tippy-content {
  padding: 0;
}

/* Custom tippy animation, paired with `animation: 'zg-mention'` on the
   tippy instance: the shared menu motion (`menu` / `menu-exit`, like
   FloatingSurface) as transitions, since tippy flips `data-state`
   hidden → visible a frame after mounting. Hidden before it ever showed:
   scale 0.96 plus a 4px slide out of the caret's side. Hidden after showing
   (`data-leaving`, set by Chatbox's `onHide`): fade and scale to 0.98, no
   slide. Tippy writes one `transition-duration` inline from its `duration`
   option; the per-property curves here override it (`!important`), and
   Chatbox passes tippy the same lengths so it unmounts when the hide ends. */
.tippy-box[data-animation='zg-mention'] {
  transition:
    transform var(--zg-motion-menu),
    opacity calc(var(--zg-motion-menu-duration) * 0.7) var(--zg-motion-menu-ease) !important;
}

.tippy-box[data-animation='zg-mention'][data-state='hidden'] {
  opacity: 0;
  transform: translate(var(--zg-menu-x, 0), var(--zg-menu-y, 0)) scale(0.96);
}

.tippy-box[data-animation='zg-mention'][data-state='hidden'][data-leaving] {
  transition:
    transform var(--zg-motion-menu-exit),
    opacity var(--zg-motion-menu-exit) !important;
  transform: scale(0.98);
}

/* Reduced: the fade only. */
html[data-motion='reduced'] .tippy-box[data-animation='zg-mention'][data-state] {
  transform: none;
}

/* Anchor the scale to the trigger edge so the popover grows out of the
   `@` / `/` caret rather than the popover's geometric center, and slide
   from that side. `top-start` placement puts the popover above the trigger
   flush-left → origin bottom-left; a flip (no room above) follows. */
.tippy-box[data-animation='zg-mention'][data-placement^='top'] {
  transform-origin: 0 100%;
  --zg-menu-y: 4px;
}
.tippy-box[data-animation='zg-mention'][data-placement^='bottom'] {
  transform-origin: 0 0;
  --zg-menu-y: -4px;
}
.tippy-box[data-animation='zg-mention'][data-placement^='right'] {
  transform-origin: 0 50%;
  --zg-menu-x: -4px;
}
.tippy-box[data-animation='zg-mention'][data-placement^='left'] {
  transform-origin: 100% 50%;
  --zg-menu-x: 4px;
}

/* --- Files tab tree column ----------------------------------------------
 *
 * Same pattern as .zg-side-panel: the column animates its width while the
 * sheet inside keeps its full width anchored to the inner edge, so rows
 * never reflow while sliding. */
.zg-files-tree {
  width: var(--zg-files-tree-w);
  clip-path: inset(0 -8px 0 0);
}

.zg-files-tree[data-side='right'] {
  clip-path: inset(0 0 0 -8px);
}

.zg-files-tree {
  transition: width var(--zg-panel-ms) var(--zg-panel-ease);

  @starting-style {
    width: 0;
  }
}

.zg-files-tree[data-collapsed='true'] {
  width: 0;
}

.zg-files-tree-sheet {
  width: var(--zg-files-tree-w);
  transition: opacity var(--zg-motion-fade);
}

.zg-files-tree[data-collapsed='true'] .zg-files-tree-sheet {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--zg-motion-fade-out);
}

/* --- Collapsible block ----------------------------------------------------
 *
 * Height tween without measuring: a one-row grid going 1fr -> 0fr on
 * `settle` (closing on `exit`), its opacity on `fade` / `fade-out`. The child
 * needs `min-height: 0` (and its own overflow) so it can shrink. */
.zg-collapse {
  display: grid;
  /* Fits its container, whatever the content's longest line (see .zg-collapsible). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows var(--zg-motion-settle),
    opacity var(--zg-motion-fade);
}

.zg-collapse[data-open='false'] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows var(--zg-motion-exit),
    opacity var(--zg-motion-fade-out);
}

/*
 * Dev browser. The page is a root-level element drawn over the Browser
 * tab's slot (browser/BrowserHost.tsx); while any column is being resized
 * it must not swallow the drag, so it ignores the pointer until release.
 */
html:has(.zg-resize-handle[data-active='true']) .zg-browser-page,
html:has(.zg-split-handle[data-active='true']) .zg-browser-page {
  pointer-events: none;
}
.zg-browser-progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--zg-accent) 18%, transparent);
}
.zg-browser-progress::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: var(--zg-accent);
  animation: zg-browser-progress 1.1s var(--zg-ease-out) infinite;
}
@keyframes zg-browser-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}
/* Resizing the docked DevTools: the page and DevTools views let the pointer through to the divider. */
.zg-resizing-browser webview {
  pointer-events: none;
}
/* The agent driving the dev browser: pill and cursor over the page (BrowserHost). */
.zg-browser-agent {
  opacity: 0;
  transition: opacity var(--zg-motion-fade-out);
}
.zg-browser-agent[data-driving] {
  opacity: 1;
  transition: opacity var(--zg-motion-fade);
}
.zg-browser-agent-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 9999px;
  font-size: 11px;
  color: var(--zg-text);
  background: color-mix(in srgb, var(--zg-overlay) 92%, transparent);
  box-shadow: var(--zg-shadow-float);
}
.zg-browser-cursor {
  position: absolute;
  left: -3px;
  top: -2px;
  color: var(--zg-accent);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  /* Glides to each point the agent acts on; jumps below full motion. */
  transition: transform var(--zg-motion-slide);
}
.zg-browser-ripple {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 2px solid var(--zg-accent);
  animation: zg-browser-ripple 520ms var(--zg-ease-out) forwards;
}
@keyframes zg-browser-ripple {
  from {
    transform: scale(0.3);
    opacity: 0.9;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Behind an image in Files and Diffs (code/MediaView.tsx): a quiet checker,
   so transparent pixels read as transparent on either theme. */
.zg-media-checker {
  background-color: var(--zg-tray);
  background-image:
    linear-gradient(45deg, var(--zg-hairline) 25%, transparent 25%),
    linear-gradient(-45deg, var(--zg-hairline) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--zg-hairline) 75%),
    linear-gradient(-45deg, transparent 75%, var(--zg-hairline) 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
}