/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--font-name), system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-canvas: var(--base-color);
    --color-primary: var(--primary-color);
    --color-dashboard: var(--dashboard-color);
    --color-panel: var(--panel-color);
    --color-panel-2: var(--secondary-panel-color);
    --color-field: var(--form-color);
    --color-accent: var(--accent-color);
    --color-sidebar: var(--sidebar-color);
    --color-topbar: var(--topbar-color);
    --color-disabled: var(--disabled-color);
    --color-fg: var(--text-color);
    --color-muted: var(--muted-color);
    --color-highlight: var(--highlight-color);
    --color-action: var(--action-color);
    --color-success: var(--success-color);
    --color-alarm: var(--failed-color);
    --color-alarm-hover: var(--alarm-hover-color);
    --color-warning: var(--warning-color);
    --color-event: var(--event-color);
    --color-off: var(--off-color);
    --color-hairline: var(--border-color);
    --radius-btn: .5rem;
    --radius-input: .4rem;
    --radius-modal: .65rem;
    --container-page: 120rem;
    --font-name: Rubik;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-px {
    inset: 1px;
  }
  .inset-x-0 {
    inset-inline: 0px;
  }
  .inset-x-2 {
    inset-inline: calc(var(--spacing) * 2);
  }
  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }
  .inset-y-0 {
    inset-block: 0px;
  }
  .inset-y-px {
    inset-block: 1px;
  }
  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }
  .top-0 {
    top: 0px;
  }
  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-2\/3 {
    top: calc(2 / 3 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-full {
    top: 100%;
  }
  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }
  .-right-2\.5 {
    right: calc(var(--spacing) * -2.5);
  }
  .right-0 {
    right: 0px;
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-\[1\.9em\] {
    right: 1.9em;
  }
  .right-px {
    right: 1px;
  }
  .-bottom-1\.5 {
    bottom: calc(var(--spacing) * -1.5);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .-left-1\.5 {
    left: calc(var(--spacing) * -1.5);
  }
  .-left-2\.5 {
    left: calc(var(--spacing) * -2.5);
  }
  .left-0 {
    left: 0px;
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[999\] {
    z-index: 999;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-auto {
    margin: auto;
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mr-auto {
    margin-right: auto;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-88 {
    height: calc(var(--spacing) * 88);
  }
  .h-\[26rem\] {
    height: 26rem;
  }
  .h-\[30rem\] {
    height: 30rem;
  }
  .h-\[38vh\] {
    height: 38vh;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[max\(12rem\,calc\(38vh-8rem\)\)\] {
    height: max(12rem, calc(38vh - 8rem));
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }
  .max-h-\[24rem\] {
    max-height: 24rem;
  }
  .max-h-\[30rem\] {
    max-height: 30rem;
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .min-h-0 {
    min-height: 0px;
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }
  .min-h-\[16rem\] {
    min-height: 16rem;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-\[1\.4em\] {
    width: 1.4em;
  }
  .w-\[3\.5\%\] {
    width: 3.5%;
  }
  .w-\[4\%\] {
    width: 4%;
  }
  .w-\[4\.5rem\] {
    width: 4.5rem;
  }
  .w-\[9\%\] {
    width: 9%;
  }
  .w-\[10\%\] {
    width: 10%;
  }
  .w-\[11\%\] {
    width: 11%;
  }
  .w-\[12\%\] {
    width: 12%;
  }
  .w-\[13\%\] {
    width: 13%;
  }
  .w-\[14\%\] {
    width: 14%;
  }
  .w-\[14\.5\%\] {
    width: 14.5%;
  }
  .w-\[16\%\] {
    width: 16%;
  }
  .w-\[17\.5\%\] {
    width: 17.5%;
  }
  .w-\[20\%\] {
    width: 20%;
  }
  .w-\[22\%\] {
    width: 22%;
  }
  .w-\[23\%\] {
    width: 23%;
  }
  .w-\[23\.5\%\] {
    width: 23.5%;
  }
  .w-\[25\%\] {
    width: 25%;
  }
  .w-\[27\%\] {
    width: 27%;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-0 {
    max-width: 0px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-20 {
    max-width: calc(var(--spacing) * 20);
  }
  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }
  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }
  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }
  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }
  .max-w-\[calc\(100vw-1rem\)\] {
    max-width: calc(100vw - 1rem);
  }
  .max-w-\[min\(20rem\,calc\(100\%_-_27rem\)\)\] {
    max-width: min(20rem, calc(100% - 27rem));
  }
  .max-w-\[min\(92vw\,44rem\)\] {
    max-width: min(92vw, 44rem);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-page {
    max-width: var(--container-page);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-28 {
    min-width: calc(var(--spacing) * 28);
  }
  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }
  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }
  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }
  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }
  .min-w-48 {
    min-width: calc(var(--spacing) * 48);
  }
  .min-w-52 {
    min-width: calc(var(--spacing) * 52);
  }
  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }
  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }
  .min-w-\[52rem\] {
    min-width: 52rem;
  }
  .min-w-\[56rem\] {
    min-width: 56rem;
  }
  .min-w-\[60rem\] {
    min-width: 60rem;
  }
  .min-w-\[64rem\] {
    min-width: 64rem;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }
  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .grid-cols-\[minmax\(0\,1fr\)_13rem\] {
    grid-template-columns: minmax(0,1fr) 13rem;
  }
  .grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .grid-cols-\[minmax\(0\,3fr\)_auto_minmax\(0\,2fr\)\] {
    grid-template-columns: minmax(0,3fr) auto minmax(0,2fr);
  }
  .grid-cols-\[minmax\(5rem\,1fr\)_minmax\(6rem\,8rem\)_minmax\(6rem\,2fr\)_1\.75rem\] {
    grid-template-columns: minmax(5rem,1fr) minmax(6rem,8rem) minmax(6rem,2fr) 1.75rem;
  }
  .grid-cols-\[minmax\(5rem\,1fr\)_minmax\(6rem\,8rem\)_minmax\(6rem\,2fr\)_auto\] {
    grid-template-columns: minmax(5rem,1fr) minmax(6rem,8rem) minmax(6rem,2fr) auto;
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(100\%\,30rem\)\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(min(100%, 30rem),1fr));
  }
  .grid-rows-\[3\.5rem_1fr\] {
    grid-template-rows: 3.5rem 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-btn {
    border-radius: var(--radius-btn);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-input {
    border-radius: var(--radius-input);
  }
  .rounded-modal {
    border-radius: var(--radius-modal);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-b-modal {
    border-bottom-right-radius: var(--radius-modal);
    border-bottom-left-radius: var(--radius-modal);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-alarm {
    border-color: var(--color-alarm);
  }
  .border-alarm\/50 {
    border-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-alarm) 50%, transparent);
    }
  }
  .border-hairline {
    border-color: var(--color-hairline);
  }
  .border-highlight {
    border-color: var(--color-highlight);
  }
  .border-highlight\/45 {
    border-color: var(--color-highlight);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-highlight) 45%, transparent);
    }
  }
  .border-muted {
    border-color: var(--color-muted);
  }
  .border-primary {
    border-color: var(--color-primary);
  }
  .border-warning\/60 {
    border-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
    }
  }
  .border-warning\/70 {
    border-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning) 70%, transparent);
    }
  }
  .bg-\[var\(--warning-surface-color\)\] {
    background-color: var(--warning-surface-color);
  }
  .bg-accent {
    background-color: var(--color-accent);
  }
  .bg-accent\/60 {
    background-color: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-accent) 60%, transparent);
    }
  }
  .bg-alarm {
    background-color: var(--color-alarm);
  }
  .bg-alarm\/5 {
    background-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-alarm) 5%, transparent);
    }
  }
  .bg-alarm\/10 {
    background-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-alarm) 10%, transparent);
    }
  }
  .bg-alarm\/15 {
    background-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-alarm) 15%, transparent);
    }
  }
  .bg-canvas {
    background-color: var(--color-canvas);
  }
  .bg-dashboard {
    background-color: var(--color-dashboard);
  }
  .bg-event {
    background-color: var(--color-event);
  }
  .bg-event\/15 {
    background-color: var(--color-event);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-event) 15%, transparent);
    }
  }
  .bg-fg\/10 {
    background-color: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fg) 10%, transparent);
    }
  }
  .bg-field {
    background-color: var(--color-field);
  }
  .bg-highlight {
    background-color: var(--color-highlight);
  }
  .bg-highlight\/10 {
    background-color: var(--color-highlight);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-highlight) 10%, transparent);
    }
  }
  .bg-highlight\/25 {
    background-color: var(--color-highlight);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-highlight) 25%, transparent);
    }
  }
  .bg-muted {
    background-color: var(--color-muted);
  }
  .bg-muted\/15 {
    background-color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-muted) 15%, transparent);
    }
  }
  .bg-off {
    background-color: var(--color-off);
  }
  .bg-off\/15 {
    background-color: var(--color-off);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-off) 15%, transparent);
    }
  }
  .bg-panel {
    background-color: var(--color-panel);
  }
  .bg-panel-2 {
    background-color: var(--color-panel-2);
  }
  .bg-panel\/90 {
    background-color: var(--color-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-panel) 90%, transparent);
    }
  }
  .bg-panel\/95 {
    background-color: var(--color-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-panel) 95%, transparent);
    }
  }
  .bg-sidebar {
    background-color: var(--color-sidebar);
  }
  .bg-success {
    background-color: var(--color-success);
  }
  .bg-success\/10 {
    background-color: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
    }
  }
  .bg-success\/15 {
    background-color: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-success) 15%, transparent);
    }
  }
  .bg-topbar {
    background-color: var(--color-topbar);
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-warning\/10 {
    background-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
    }
  }
  .bg-warning\/15 {
    background-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning) 15%, transparent);
    }
  }
  .bg-warning\/20 {
    background-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
    }
  }
  .\[background-image\:radial-gradient\(circle\,var\(--canvas-dot\)_1px\,transparent_1px\)\] {
    background-image: radial-gradient(circle,var(--canvas-dot) 1px,transparent 1px);
  }
  .\[background-size\:22px_22px\] {
    background-size: 22px 22px;
  }
  .p-0 {
    padding: 0px;
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pr-1 {
    padding-right: var(--spacing);
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-top {
    vertical-align: top;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.6875rem\] {
    font-size: 0.6875rem;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[var\(--on-status-text-color\)\] {
    color: var(--on-status-text-color);
  }
  .text-\[var\(--warning-text-color\)\] {
    color: var(--warning-text-color);
  }
  .text-alarm {
    color: var(--color-alarm);
  }
  .text-event {
    color: var(--color-event);
  }
  .text-fg {
    color: var(--color-fg);
  }
  .text-highlight {
    color: var(--color-highlight);
  }
  .text-inherit {
    color: inherit;
  }
  .text-muted {
    color: var(--color-muted);
  }
  .text-off {
    color: var(--color-off);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-dotted {
    text-decoration-style: dotted;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-panel {
    --tw-shadow: var(--shadow-size);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-highlight {
    --tw-ring-color: var(--color-highlight);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-2 {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .outline-offset-2 {
    outline-offset: 2px;
  }
  .outline-highlight {
    outline-color: var(--color-highlight);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .group-focus-within\:visible:is(:where(.group):focus-within *) {
    visibility: visible;
  }
  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
    opacity: 100%;
  }
  @media (hover: hover) {
    .group-hover\:visible:is(:where(.group):hover *) {
      visibility: visible;
    }
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\:text-highlight:is(:where(.group):hover *) {
      color: var(--color-highlight);
    }
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 100%;
    }
  }
  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  @media (hover: hover) {
    .hover\:bg-accent:hover {
      background-color: var(--color-accent);
    }
    .hover\:bg-fg\/5:hover {
      background-color: var(--color-fg);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-fg\/5:hover {
        background-color: color-mix(in oklab, var(--color-fg) 5%, transparent);
      }
    }
    .hover\:bg-fg\/10:hover {
      background-color: var(--color-fg);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-fg\/10:hover {
        background-color: color-mix(in oklab, var(--color-fg) 10%, transparent);
      }
    }
    .hover\:bg-field:hover {
      background-color: var(--color-field);
    }
    .hover\:text-fg:hover {
      color: var(--color-fg);
    }
    .hover\:text-highlight:hover {
      color: var(--color-highlight);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:ring-2:hover {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:ring-muted\/50:hover {
      --tw-ring-color: var(--color-muted);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:ring-muted\/50:hover {
        --tw-ring-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
      }
    }
  }
  .focus-visible\:border-muted:focus-visible {
    border-color: var(--color-muted);
  }
  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-muted\/50:focus-visible {
    --tw-ring-color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
    cursor: not-allowed;
  }
  @media (width < 80rem) {
    .max-xl\:hidden {
      display: none;
    }
  }
  @media (width < 40rem) {
    .max-sm\:hidden {
      display: none;
    }
  }
  @media (width >= 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .sm\:flex {
      display: flex;
    }
    .sm\:inline {
      display: inline;
    }
    .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\:grid-cols-\[1fr_9rem_1fr_auto_auto\] {
      grid-template-columns: 1fr 9rem 1fr auto auto;
    }
    .sm\:grid-cols-\[1fr_9rem_auto\] {
      grid-template-columns: 1fr 9rem auto;
    }
    .sm\:grid-cols-\[8rem_1fr\] {
      grid-template-columns: 8rem 1fr;
    }
  }
  @media (width >= 64rem) {
    .lg\:sticky {
      position: sticky;
    }
    .lg\:top-0 {
      top: 0px;
    }
    .lg\:z-10 {
      z-index: 10;
    }
    .lg\:block {
      display: block;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:h-\[max\(12rem\,calc\(var\(--drawer-h\,38vh\)-8rem\)\)\] {
      height: max(12rem, calc(var(--drawer-h,38vh) - 8rem));
    }
    .lg\:h-\[var\(--drawer-h\,38vh\)\] {
      height: var(--drawer-h,38vh);
    }
    .lg\:h-full {
      height: 100%;
    }
    .lg\:h-screen {
      height: 100vh;
    }
    .lg\:max-h-none {
      max-height: none;
    }
    .lg\:min-h-0 {
      min-height: 0px;
    }
    .lg\:w-56 {
      width: calc(var(--spacing) * 56);
    }
    .lg\:flex-1 {
      flex: 1;
    }
    .lg\:grid-cols-\[auto_minmax\(0\,1fr\)\] {
      grid-template-columns: auto minmax(0,1fr);
    }
    .lg\:grid-cols-\[minmax\(0\,1fr\)_22rem\] {
      grid-template-columns: minmax(0,1fr) 22rem;
    }
    .lg\:flex-col {
      flex-direction: column;
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:overflow-auto {
      overflow: auto;
    }
    .lg\:overflow-hidden {
      overflow: hidden;
    }
    .lg\:overflow-x-visible {
      overflow-x: visible;
    }
    .lg\:overflow-y-auto {
      overflow-y: auto;
    }
    .lg\:bg-panel {
      background-color: var(--color-panel);
    }
    .lg\:p-0 {
      padding: 0px;
    }
    .lg\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }
  @media (width >= 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (width >= 96rem) {
    .\32 xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/dist/fonts/rubik-latin.2e37ea48166da534080b.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                   U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/dist/fonts/rubik-latin-ext.fe26ad1611ba401b8d92.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                   U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  color-scheme: light;
  --base-color: #E9EBEE;
  --primary-color: #DBDCDE;
  --secondary-color: #FEFEFE;
  --dashboard-color: #E7E9EC;
  --panel-color: #F4F5F7;
  --secondary-panel-color: #FBFBFC;
  --form-color: #FFFFFF;
  --accent-color: #C6D2E0;
  --hover-color: #CAD7E6;
  --sidebar-color: #2E3944;
  --sidebar-hover-color: #485058;
  --topbar-color: #252E36;
  --disabled-color: #EDEFF2;
  --svg-color: #DBDCDE;
  --text-color: #293F4F;
  --muted-color: #474C62;
  --highlight-color: #EE7A24;
  --action-color: #246BA0;
  --action-hover-color: #237FAD;
  --on-status-text-color: #FEFEFE;
  --success-color: #13CE3A;
  --failed-color: #FF5252;
  --alarm-hover-color: #FF6D6D;
  --warning-color: #A16207;
  --warning-text-color: #1C1C1C;
  --warning-surface-color: #EED85B;
  --event-color: #3373D9;
  --event-text-color: #1B5A9C;
  --off-color: #A8B5C1;
  --error-text-color: #FF0000;
  --error-background-color: #F7B7C4;
  --border-color: rgba(41, 63, 79, .16);
  --shadow-size: 0 1px 2px rgba(41, 63, 79, .05), 0 4px 12px -2px rgba(41, 63, 79, .10);
  --canvas-dot: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-dot: color-mix(in srgb, var(--muted-color) 12%, transparent);
  }
  --canvas-edge: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-edge: color-mix(in srgb, var(--muted-color) 70%, transparent);
  }
  --canvas-arrow: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-arrow: color-mix(in srgb, var(--muted-color) 95%, transparent);
  }
  --canvas-edge-dashed: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-edge-dashed: color-mix(in srgb, var(--muted-color) 45%, transparent);
  }
  --canvas-loop-border: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-loop-border: color-mix(in srgb, var(--muted-color) 32%, transparent);
  }
  --canvas-loop-fill: var(--muted-color);
  @supports (color: color-mix(in lab, red, red)) {
    --canvas-loop-fill: color-mix(in srgb, var(--muted-color) 6%, transparent);
  }
  --frame-text-color: #FEFEFE;
  --frame-muted-color: #9BB7BB;
  --json-key-color: #0E7490;
  --json-string-color: #2E7D32;
  --json-number-color: #B45309;
  --json-keyword-color: #9333EA;
}
[data-theme="dark"] {
  color-scheme: dark;
  --base-color: #1C1C1C;
  --primary-color: #131C23;
  --secondary-color: #242F3B;
  --dashboard-color: #1E2832;
  --panel-color: #26323F;
  --secondary-panel-color: #2B3744;
  --form-color: #3D4D5F;
  --accent-color: #435161;
  --hover-color: #465769;
  --sidebar-color: #131C23;
  --sidebar-hover-color: #28323D;
  --topbar-color: #0E151A;
  --disabled-color: #1E2832;
  --svg-color: #FEFEFE;
  --text-color: #FEFEFE;
  --muted-color: #9BB7BB;
  --off-color: #7F7F7F;
  --error-background-color: #4C2929;
  --warning-color: #EED85B;
  --event-text-color: #7FB8F0;
  --border-color: rgba(255, 255, 255, .10);
  --shadow-size: 0 1px 2px rgba(10, 12, 12, .35), 0 4px 12px -2px rgba(10, 12, 12, .45);
  --json-key-color: #56B6C2;
  --json-string-color: #6FCF97;
  --json-number-color: #E5A458;
  --json-keyword-color: #C678DD;
}
header,
#app-sidebar {
  color: var(--frame-text-color);
  --color-fg: var(--frame-text-color);
  --color-muted: var(--frame-muted-color);
}
#status-panel {
  color: var(--color-fg);
  --color-fg: var(--text-color);
  --color-muted: var(--muted-color);
}
@keyframes modal-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (max-width: 39.99rem) {
  dialog.modal-sheet {
    margin: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: modal-sheet-up 0.26s ease;
  }
}
@media (min-width: 40rem) {
  dialog.modal-sheet.modal-tall {
    margin-block: 6vh auto;
  }
}
@media (max-width: 63.99rem) {
  .tbl-cards,
    .tbl-cards tbody {
    display: block;
  }
  .tbl-cards thead {
    display: none;
  }
  .tbl-cards tbody tr {
    display: block;
    padding: 0.4rem 0;
  }
  .tbl-cards tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--color-hairline);
  }
  .tbl-cards tbody td.tbl-td {
    display: grid;
    grid-template-columns: minmax(5rem, 34%) 1fr;
    gap: 0.75rem;
    align-items: baseline;
    min-width: 0;
    max-width: none;
    width: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding: 0.25rem 0.75rem;
  }
  .tbl-cards tbody td.tbl-td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 500;
  }
  .tbl-cards tbody td.tbl-td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }
  .tbl-cards tbody td.tbl-td[data-label=""]::before {
    content: none;
  }
  .tbl-cards tbody td.tbl-td[data-label=""]:empty {
    display: none;
  }
  .tbl-cards tbody td:not(.tbl-td) {
    display: block;
  }
}
.tbl-row:has(.checkbox:checked) {
  background: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-highlight) 8%, transparent);
  }
}
.monaco-editor .view-line span.host-global {
  color: var(--color-highlight);
  font-weight: 600;
}
@layer base {
  html {
    font-size: clamp(16px, calc(16px + (100vw - 1280px) / 640), 18px);
    background-color: var(--color-primary);
    color: var(--color-fg);
  }
  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }
  ::-webkit-scrollbar {
    width: 0.55rem;
    height: 0.55rem;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 70%, transparent);
    }
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  dialog::backdrop {
    background-color: rgb(8 13 18 / 0.45);
  }
  .backdrop-soft::backdrop {
    background-color: rgb(8 13 18 / 0.2);
  }
}
@layer components {
  .canvas-board {
    background-color: var(--color-canvas);
    background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1px);
    background-size: 22px 22px;
  }
  #app-sidebar {
    --nav-w: 4.25rem;
    --nav-sub-inset: 0.75rem;
    --nav-sub-px: 0.5rem;
    --nav-guide-gap: 0.375rem;
    --nav-label: none;
    --nav-toggle: flex;
    width: var(--nav-w);
  }
  @media (min-width: 40rem) {
    #app-sidebar:not([data-collapsed="true"]) {
      --nav-w: 14rem;
      --nav-sub-inset: 1.75rem;
      --nav-sub-px: 0.75rem;
      --nav-label: inline;
    }
  }
  @media (max-width: 39.99rem) {
    #app-sidebar {
      --nav-toggle: none;
    }
  }
  #app-sidebar [data-sidebar-label] {
    display: var(--nav-label);
  }
  .nav-link {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-btn);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fg);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fg) 5%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .nav-link.on {
    background-color: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fg) 10%, transparent);
    }
    color: var(--color-fg);
  }
  .nav-link > svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .nav-link.on > svg {
    color: var(--color-highlight);
  }
  .nav-toggle {
    margin: calc(var(--spacing) * 3);
    align-items: center;
    border-radius: var(--radius-btn);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fg);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fg) 5%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
    display: var(--nav-toggle);
  }
  .nav-toggle > svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .nav-sub {
    position: relative;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    padding-inline: var(--nav-sub-px);
  }
  .nav-sub > svg {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .nav-sub.on::before {
    content: "";
    position: absolute;
    inset-block: 0.25rem;
    left: calc(-1 * var(--nav-guide-gap));
    width: 2px;
    border-radius: 1px;
    background: var(--color-highlight);
  }
  .nav-group, .nav-subs {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .nav-group {
    margin-block: 0.375rem;
  }
  .nav-subs {
    position: relative;
    margin-left: var(--nav-sub-inset);
  }
  .nav-subs::before {
    content: "";
    position: absolute;
    inset-block: 0.15rem;
    left: calc(-1 * var(--nav-guide-gap));
    width: 1px;
    border-radius: 1px;
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 20%, transparent);
    }
  }
  .modal-shell {
    display: flex;
    max-height: 85vh;
    flex-direction: column;
  }
  .modal-head {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-hairline);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .modal-body {
    min-height: 0px;
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-hairline);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .modal-body, .scroll-fade {
    --fade-bg: var(--color-panel);
    background: linear-gradient(var(--fade-bg) 30%, transparent) top    / 100% 1rem  no-repeat local,
            linear-gradient(transparent, var(--fade-bg) 70%) bottom / 100% 1rem  no-repeat local,
            radial-gradient(farthest-side at 50% 0,    rgb(8 13 18 / .14), transparent) top    / 100% .4rem no-repeat scroll,
            radial-gradient(farthest-side at 50% 100%, rgb(8 13 18 / .14), transparent) bottom / 100% .4rem no-repeat scroll;
    background-color: var(--fade-bg);
  }
  .scroll-fade-raised {
    --fade-bg: var(--color-panel-2);
  }
  .modal-error {
    min-width: 0px;
    flex: 1;
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-alarm);
  }
  .modal-band {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    background-color: var(--color-panel-2);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    margin-inline: -1.25rem;
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
  }
  .seg {
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-field);
    border-color: var(--color-hairline);
  }
  .seg > button {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    align-items: center;
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .seg > button + button {
    border-left: 1px solid var(--color-hairline);
  }
  .seg > button:hover:not(.on):not(:disabled) {
    color: var(--color-fg);
  }
  .seg > button.on {
    background-color: var(--color-highlight);
    color: var(--on-status-text-color);
  }
  .seg > button:disabled {
    cursor: not-allowed;
    opacity: 45%;
  }
  .opt-form {
    display: grid;
    column-gap: calc(var(--spacing) * 5);
    row-gap: calc(var(--spacing) * 2);
  }
  @media (min-width: 48rem) {
    .opt-form {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
    .opt-wide {
      grid-column: 1 / -1;
    }
  }
  .opt-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
  }
  .opt-flow {
    display: contents;
  }
  .opt-msg {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
    min-height: 1rem;
  }
  .opt-msg.bad {
    color: var(--color-alarm);
  }
  .opt-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .opt-inline > * {
    flex: 1 1 12rem;
  }
  .opt-pair {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .opt-pair > .input:first-child {
    flex: 0 1 10rem;
  }
  .opt-free {
    display: grid;
    grid-template-columns: minmax(4.5rem, 8rem) minmax(5.5rem, 7rem) minmax(5rem, 1fr) auto;
    align-items: center;
    gap: .5rem;
  }
  .opt-free > * {
    min-width: 0;
  }
  .opt-free-head {
    font-size: 11px;
    color: var(--color-muted);
  }
  .opt-section {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: .7rem;
    --tw-tracking: .09em;
    letter-spacing: .09em;
    color: var(--color-muted);
    text-transform: uppercase;
  }
  .opt-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-hairline);
  }
  .opt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
  }
  .pal-group {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing);
    padding-inline: var(--spacing);
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-muted);
    text-transform: uppercase;
  }
  .pal-group-fold {
    cursor: pointer;
    border-radius: var(--radius-btn);
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .fx-box {
    height: calc(var(--spacing) * 9);
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
  }
  .fx-box:focus-within {
    border-color: var(--color-muted);
  }
  .btn {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-btn);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      border-color: var(--color-muted);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 40%;
    }
  }
  .btn-primary {
    background-color: var(--color-highlight);
    &:hover {
      @media (hover: hover) {
        --tw-brightness: brightness(95%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
    color: var(--on-status-text-color);
  }
  .btn-secondary,
    .btn-neutral {
    color: var(--color-fg);
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 55%, transparent);
    }
  }
  .btn-secondary:hover,
    .btn-neutral:hover {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 80%, transparent);
    }
  }
  .btn-danger {
    background-color: var(--color-alarm);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-alarm-hover);
      }
    }
    color: var(--on-status-text-color);
  }
  .btn-ghost {
    background-color: transparent;
    color: var(--color-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .btn-ghost:hover {
    background: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-muted) 13%, transparent);
    }
  }
  .btn-sm {
    height: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .btn > svg {
    height: calc(var(--spacing) * 4.5);
    width: calc(var(--spacing) * 4.5);
  }
  .btn-sm > svg {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .btn-action {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      border-color: var(--color-muted);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 40%;
    }
    border-color: var(--color-hairline);
    background: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-muted) 12%, transparent);
    }
  }
  .btn-action:hover {
    color: var(--color-fg);
    background: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-muted) 22%, transparent);
    }
  }
  .btn-action.danger {
    color: var(--color-alarm);
    border-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-alarm) 28%, transparent);
    }
    background: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-alarm) 11%, transparent);
    }
  }
  .btn-action.danger:hover {
    background: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-alarm) 20%, transparent);
    }
  }
  .btn-action.go {
    color: var(--color-success);
    border-color: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
    }
    background: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 11%, transparent);
    }
  }
  .btn-action.go:hover {
    background: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 20%, transparent);
    }
  }
  .btn-action.state-on {
    color: var(--color-success);
  }
  .btn-action.state-off {
    color: var(--color-off);
  }
  .btn-action > svg {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .btn-state {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      border-color: var(--color-muted);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 40%;
    }
    border-color: var(--color-hairline);
    background: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-muted) 12%, transparent);
    }
  }
  .btn-state:hover {
    background: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-muted) 22%, transparent);
    }
  }
  .btn-state > svg {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .btn-state.state-on {
    color: var(--color-success);
  }
  .btn-state.state-off {
    color: var(--color-off);
  }
  .input {
    height: calc(var(--spacing) * 9);
    width: 100%;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fg);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      border-color: var(--color-muted);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  .input::placeholder {
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 60%, transparent);
    }
  }
  .input:disabled {
    background-color: var(--color-disabled);
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 70%, transparent);
    }
  }
  .input.error-input {
    background: var(--error-background-color) !important;
    border-color: var(--error-text-color) !important;
  }
  .input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .input[type="number"]::-webkit-inner-spin-button,
    .input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .input-xs {
    width: 100%;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fg);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      border-color: var(--color-muted);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .input-xs::placeholder {
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 60%, transparent);
    }
  }
  .input-page {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 14);
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-inline: var(--spacing);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fg);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      border-color: var(--color-muted);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .input-page::-webkit-inner-spin-button,
    .input-page::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .input-page:disabled {
    background-color: var(--color-disabled);
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 70%, transparent);
    }
  }
  .input-zoom {
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-block: var(--spacing);
    padding-right: 3em;
    padding-left: calc(var(--spacing) * 2);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fg);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      border-color: var(--color-muted);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    width: 5.75em;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .input-zoom::-webkit-inner-spin-button,
    .input-zoom::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .input-zoom::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    width: 0;
    padding: 0;
    margin: 0;
  }
  .input-zoom-step {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .input-zoom-step::before {
    content: "";
    width: .55em;
    height: .4em;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .input-zoom-step:last-child::before {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .textarea {
    width: 100%;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fg);
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      border-color: var(--color-muted);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    min-height: 4.5rem;
    resize: vertical;
  }
  .textarea::placeholder {
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 60%, transparent);
    }
  }
  .json-edit {
    position: relative;
  }
  .json-edit-layer {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-field);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-family: var(--font-mono);
    font-size: 13px;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    border-color: transparent;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--color-fg);
  }
  .json-edit-input {
    position: relative;
    display: block;
    background-color: transparent;
    color: transparent;
    caret-color: var(--color-fg);
  }
  .json-edit-input::selection {
    background: var(--color-action);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-action) 40%, transparent);
    }
  }
  .json-edit-input::placeholder {
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-muted) 60%, transparent);
    }
  }
  .checkbox {
    position: relative;
    height: calc(var(--spacing) * 4.5);
    width: calc(var(--spacing) * 4.5);
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-field);
    transition-property: background-color,border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      border-color: var(--color-muted);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    border-color: var(--color-hairline);
  }
  .checkbox:checked,
    .checkbox:indeterminate {
    background-color: var(--color-highlight);
    border-color: var(--color-highlight);
  }
  .checkbox::before {
    content: "";
    position: absolute;
    inset: 18%;
    background-color: var(--on-status-text-color);
    clip-path: polygon(10.9% 45.6%, 3.2% 59.4%, 48.4% 91.5%, 95.5% 12.4%, 84.5% 3.6%, 44.6% 70.6%);
    transform: scale(0);
    transition: transform 120ms ease-in-out;
  }
  .checkbox:checked::before {
    transform: scale(1);
  }
  .checkbox:indeterminate::before {
    transform: scale(1);
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  .checkbox:disabled:checked,
    .checkbox:disabled:indeterminate {
    background-color: var(--color-off);
    border-color: var(--color-off);
  }
  .radio {
    position: relative;
    height: calc(var(--spacing) * 4.5);
    width: calc(var(--spacing) * 4.5);
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-field);
    transition-property: background-color,border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      border-color: var(--color-muted);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      cursor: not-allowed;
    }
    border-color: var(--color-hairline);
  }
  .radio:checked {
    background-color: var(--color-highlight);
    border-color: var(--color-highlight);
  }
  .radio::before {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 9999px;
    background-color: var(--on-status-text-color);
    transform: scale(0);
    transition: transform 120ms ease-in-out;
  }
  .radio:checked::before {
    transform: scale(1);
  }
  .radio:disabled:checked {
    background-color: var(--color-off);
    border-color: var(--color-off);
  }
  .field-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
  }
  .chip {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }
  .chip-success {
    background-color: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-success) 15%, transparent);
    }
    color: var(--color-success);
  }
  .chip-alarm {
    background-color: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-alarm) 15%, transparent);
    }
    color: var(--color-alarm);
  }
  .chip-warning {
    background-color: var(--color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning) 15%, transparent);
    }
    color: var(--color-warning);
  }
  .chip-event {
    background-color: var(--color-event);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-event) 15%, transparent);
    }
    color: var(--color-event);
  }
  .chip-muted {
    background-color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-muted) 15%, transparent);
    }
    color: var(--color-muted);
  }
  .chip-off {
    background-color: var(--color-off);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-off) 15%, transparent);
    }
    color: var(--color-off);
  }
  .chip-clear {
    display: inline-flex;
    height: calc(var(--spacing) * 4.5);
    width: calc(var(--spacing) * 4.5);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .chip-link {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--event-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--event-text-color) 18%, transparent);
    }
    color: var(--event-text-color);
  }
  .chip-link:hover {
    background: var(--event-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--event-text-color) 32%, transparent);
    }
  }
  .chip-clear:hover {
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 12%, transparent);
    }
  }
  .chip-clear > svg {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .btn-badge {
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    min-width: calc(var(--spacing) * 5);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--color-highlight);
    color: var(--on-status-text-color);
  }
  .card {
    border-radius: var(--radius-modal);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-panel);
    --tw-shadow: var(--shadow-size);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: var(--color-hairline);
  }
  .card-band {
    border-top-left-radius: var(--radius-modal);
    border-top-right-radius: var(--radius-modal);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-hairline);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 4%, var(--color-panel));
    }
  }
  .figure-stat {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: normal;
  }
  .figure-hero {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: normal;
  }
  .figure-hero[data-fit="xl"] {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .figure-hero[data-fit="base"] {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .figure-hero[data-fit="xs"] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .legend {
    display: grid;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .legend-row {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    grid-column: 1 / -1;
  }
  .legend-row-zero {
    color: var(--color-muted);
  }
  .legend-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .hovercard {
    pointer-events: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 50;
    max-width: calc(var(--spacing) * 64);
    border-radius: var(--radius-btn);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-shadow: var(--shadow-size);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background: var(--secondary-panel-color);
  }
  .hovercard-title {
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg);
  }
  .hovercard-note {
    margin-bottom: calc(var(--spacing) * 1.5);
    color: var(--color-muted);
  }
  .hovercard-note:last-child {
    margin-bottom: 0px;
  }
  .hovercard-rows {
    display: grid;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 0.5);
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .hovercard-row {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    grid-column: 1 / -1;
  }
  .hovercard-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .hovercard-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-muted);
  }
  .hovercard-value {
    justify-self: flex-end;
    color: var(--color-fg);
  }
  .hovercard-strong .hovercard-value,
    .hovercard-strong .hovercard-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg);
  }
  .cols {
    display: grid;
    column-gap: calc(var(--spacing) * 2);
    grid-template-columns: auto minmax(0, 1fr);
  }
  .cols-scale {
    position: relative;
    min-width: calc(var(--spacing) * 11);
    padding-right: var(--spacing);
    grid-column: 1;
    grid-row: 1;
  }
  .cols-value {
    position: absolute;
    right: 0px;
    --tw-translate-y: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    font-size: 0.6875rem;
    color: var(--color-muted);
  }
  .cols-plot {
    position: relative;
    grid-column: 2;
    grid-row: 1;
  }
  .cols-guide {
    position: absolute;
    inset-inline: 0px;
    display: block;
    height: 1px;
    background: var(--color-hairline);
  }
  .cols-track {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing) * 0.5);
  }
  .cols-col {
    position: relative;
    height: 100%;
    min-width: 0px;
    flex: 1;
  }
  .cols-col:hover {
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 5%, transparent);
    }
  }
  .cols-seg {
    position: absolute;
    inset-inline: 0px;
    display: block;
  }
  .cols-axis {
    display: flex;
    gap: calc(var(--spacing) * 0.5);
    padding-top: var(--spacing);
    font-size: 0.6875rem;
    color: var(--color-muted);
    grid-column: 2;
    grid-row: 2;
  }
  .cols-tick {
    min-width: 0px;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
  }
  .stat-list {
    display: grid;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
  .stat-row {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    border-radius: var(--radius-btn);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    grid-column: 1 / -1;
  }
  .stat-row:hover {
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 4%, transparent);
    }
  }
  .stat-run {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    color: var(--color-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
    grid-column: 2 / -1;
  }
  .stat-end {
    justify-self: flex-end;
    grid-column: 2 / -1;
  }
  .stat-when {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
  }
  .stat-span {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
    grid-column: 1 / -1;
  }
  .val-well {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-input);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-hairline);
    background-color: var(--color-field);
    padding-right: calc(var(--spacing) * 11);
  }
  .val-body {
    max-height: calc(var(--spacing) * 64);
    overflow: auto;
    padding: calc(var(--spacing) * 3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 96);
    }
  }
  .val-body-plain {
    word-break: break-all;
    white-space: pre-wrap;
  }
  .val-copy {
    position: absolute;
    top: calc(var(--spacing) * 1.5);
    right: calc(var(--spacing) * 1.5);
  }
  .json-key {
    color: var(--json-key-color);
  }
  .json-str {
    color: var(--json-string-color);
  }
  .json-num {
    color: var(--json-number-color);
  }
  .json-kw {
    color: var(--json-keyword-color);
  }
  .json-punct {
    color: var(--color-muted);
  }
  .code-cmt {
    color: var(--color-muted);
    font-style: italic;
  }
  .code-host {
    color: var(--color-highlight);
    font-weight: 600;
  }
  .tbl {
    width: 100%;
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .tbl-head {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-hairline);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
  }
  .tbl-th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .tbl-td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    vertical-align: middle;
  }
  .tbl-row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-hairline);
  }
  .tbl-fixed {
    table-layout: fixed;
  }
  .tbl-th[data-sort] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .tbl-sort {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing);
    text-align: left;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: inherit;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .tbl-th[data-sort]:hover .tbl-sort,
    .tbl-sort:focus-visible {
    color: var(--color-fg);
  }
  .tbl-sort-arrow {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .tbl-th[aria-sort="ascending"] .tbl-sort-arrow,
    .tbl-th[aria-sort="descending"] .tbl-sort-arrow {
    opacity: 1;
  }
  .tbl-th[aria-sort="descending"] .tbl-sort-arrow {
    rotate: 180deg;
  }
  .tbl[data-col-hover="1"] tbody .tbl-td:nth-child(1),
    .tbl[data-col-hover="2"] tbody .tbl-td:nth-child(2),
    .tbl[data-col-hover="3"] tbody .tbl-td:nth-child(3),
    .tbl[data-col-hover="4"] tbody .tbl-td:nth-child(4),
    .tbl[data-col-hover="5"] tbody .tbl-td:nth-child(5),
    .tbl[data-col-hover="6"] tbody .tbl-td:nth-child(6),
    .tbl[data-col-hover="7"] tbody .tbl-td:nth-child(7),
    .tbl[data-col-hover="8"] tbody .tbl-td:nth-child(8),
    .tbl[data-col-hover="9"] tbody .tbl-td:nth-child(9) {
    background-color: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-fg) 5%, transparent);
    }
  }
  .tab {
    border-top-left-radius: var(--radius-btn);
    border-top-right-radius: var(--radius-btn);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .tab-active {
    background-color: var(--color-panel);
    color: var(--color-fg);
  }
  .nav-tab {
    display: inline-flex;
    align-items: center;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .nav-tab-active {
    border-color: var(--color-highlight);
    color: var(--color-fg);
  }
  .resize-handle-x {
    position: absolute;
    z-index: 10;
    display: flex;
    width: calc(var(--spacing) * 2);
    cursor: col-resize;
    touch-action: none;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
  }
  .resize-handle-y {
    position: absolute;
    z-index: 10;
    display: flex;
    height: calc(var(--spacing) * 2);
    cursor: row-resize;
    touch-action: none;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
  }
  .resize-line {
    pointer-events: none;
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-action);
      }
    }
    &:is(:where(.group):focus-visible *) {
      background-color: var(--color-action);
    }
    &:is(:where(.group)[data-dragging] *) {
      background-color: var(--color-action);
    }
  }
  .pnl {
    position: relative;
    flex-direction: column;
    display: flex;
    width: 100%;
  }
  .pnl-body {
    display: block;
  }
  .pnl-body-col {
    min-height: 0px;
    flex: 1;
    flex-direction: column;
    display: flex;
  }
  .pnl-rail {
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
    display: none;
  }
  .pnl-rail > svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .pnl[data-collapsed] .pnl-body {
    display: none;
  }
  .pnl[data-collapsed] .pnl-rail {
    display: flex;
  }
  .pnl[data-collapsed] > .card-band {
    border-bottom-right-radius: var(--radius-modal);
    border-bottom-left-radius: var(--radius-modal);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  @media (min-width: 64rem) {
    .pnl-cat {
      width: var(--category-tree-w, 15rem);
    }
    .pnl-side {
      width: var(--canvas-side-w, 20rem);
    }
    .pnl-trg {
      width: var(--triggers-list-w, 26rem);
    }
    .pnl[data-axis="x"][data-collapsed] {
      width: auto;
    }
    .pnl[data-axis="x"][data-collapsed] .pnl-rail {
      height: 100%;
      width: calc(var(--spacing) * 11);
      flex-direction: column;
      justify-content: flex-start;
      padding-block: calc(var(--spacing) * 3);
    }
    #editor-triggers-wrap[data-expr="none"] .pnl-trg {
      width: 100%;
    }
  }
  .trg-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  #editor-triggers-wrap[data-expr="none"] .trg-list {
    display: grid;
    align-content: flex-start;
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  }
  .trg-empty {
    grid-column: 1 / -1;
  }
  .cv-entry,
    .cv-entry-fill {
    clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%);
  }
  .cv-entry {
    background: linear-gradient(var(--color-hairline), var(--color-hairline)), var(--color-panel-2);
  }
  .cv-entry-fill {
    background: var(--color-panel-2);
  }
  .cv-exit,
    .cv-exit-fill {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  }
  .cv-cap-left .cv-exit,
    .cv-cap-left .cv-exit-fill {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  }
  .cv-exit {
    background: linear-gradient(var(--color-hairline), var(--color-hairline)), var(--color-panel-2);
  }
  .cv-exit-fill {
    background: var(--color-panel-2);
  }
  .cv-throw {
    background: linear-gradient(var(--color-alarm), var(--color-alarm)), var(--color-panel-2);
  }
  .cat-tree {
    min-height: 0px;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
  }
  @media (max-width: 63.99rem) {
    .cat-tree {
      max-height: 16rem;
    }
  }
  .cat-node {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-input);
    padding-block: var(--spacing);
    padding-right: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    padding-left: calc(0.35rem + var(--cat-depth, 0) * 0.85rem);
  }
  .cat-node + .cat-node {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .cat-node:hover {
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 6%, transparent);
    }
  }
  .cat-node[aria-selected="true"] {
    background: var(--color-highlight);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-highlight) 18%, transparent);
    }
  }
  .cat-node[data-drop="into"] {
    background: var(--color-action);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-action) 22%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--action-color);
  }
  .cat-node[data-drop="deny"] {
    background: var(--color-alarm);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-alarm) 15%, transparent);
    }
    cursor: not-allowed;
  }
  .cat-node[aria-disabled="true"] {
    cursor: default;
    color: var(--color-muted);
  }
  .cat-node[aria-disabled="true"]:hover {
    background: transparent;
  }
  .cat-twisty {
    display: flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .cat-node[aria-expanded="true"] .cat-twisty > svg {
    rotate: 90deg;
  }
  .cat-menu {
    display: flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    opacity: 0%;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg);
      }
    }
  }
  .cat-node:hover .cat-menu,
    .cat-menu:focus-visible {
    opacity: 100%;
  }
  .cat-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-muted);
  }
  .cat-name {
    min-width: 0px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-count {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-muted);
  }
  .cat-group-cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: var(--spacing);
    text-align: left;
  }
  .cat-group-row:first-child .cat-group-cell {
    padding-top: calc(var(--spacing) * 2);
  }
  .cat-group-label {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-muted);
    text-transform: uppercase;
  }
  .cat-group-path {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-group-count {
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .cat-group-sum {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: var(--spacing);
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-muted);
  }
  .cat-group-row:first-child .cat-group-sum {
    padding-top: calc(var(--spacing) * 2);
  }
  .cat-group-pill {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-muted);
    text-transform: uppercase;
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 6%, transparent);
    }
  }
  .cat-group-pill:hover {
    background: var(--color-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-fg) 10%, transparent);
    }
  }
  .cat-group-twisty {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    flex-shrink: 0;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .cat-group-row:not([data-collapsed="true"]) .cat-group-twisty {
    rotate: 90deg;
  }
  .cat-group-row:not([data-collapsed="true"]) .cat-group-sum .pct-track {
    visibility: hidden;
  }
  .pct-cell {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    grid-template-columns: minmax(0, 1fr) 3.25rem;
  }
  .pct-track {
    height: var(--spacing);
    width: 100%;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background: var(--pct);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--pct) 20%, transparent);
    }
  }
  .pct-fill {
    display: block;
    height: 100%;
    border-radius: calc(infinity * 1px);
    background: var(--pct);
  }
  .pct-value {
    text-align: right;
  }
  .loading {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-muted);
  }
  .loading-ring {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    animation: var(--animate-spin);
    border-radius: calc(infinity * 1px);
    @media (prefers-reduced-motion: reduce) {
      animation: var(--animate-pulse);
    }
    border: 2px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    }
    border-top-color: currentColor;
  }
}
@layer utilities {
  #editor-triggers-wrap[data-expr="some"] #triggers-expr-offer {
    display: none;
  }
  #editor-triggers-wrap[data-expr="none"] #expression-panel {
    display: none;
  }
  #editor-triggers-wrap[data-expr="none"] #triggers-list-resize,
    #editor-triggers-wrap[data-expr="none"] #triggers-list-collapse {
    display: none;
  }
  #editor-triggers-wrap[data-expr="none"] .pnl[data-collapsed] .pnl-body-col {
    display: flex;
  }
  #editor-triggers-wrap[data-expr="none"] .pnl[data-collapsed] .pnl-rail {
    display: none;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
    }
  }
}