/* ---- Color-adjust slider (native input[type=range]) ---- *
 * Tailwind utility classes can't reach the cross-browser thumb
 * pseudo-elements, so the thumb styling lives here.
 * Track + thumb colors map to the canvas/shadcn semantic tokens. */

.hilo-color-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 0;
  background: color-mix(in srgb, var(--foreground) 18%, transparent);
  outline: none;
  cursor: default;
  transition: background-color 120ms ease;
}

.hilo-color-slider:hover {
  background: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.hilo-color-slider:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring, var(--foreground)) 40%, transparent);
}

.hilo-color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--background);
  border: 2px solid var(--foreground);
  cursor: default;
  transition: transform 120ms ease;
}

.hilo-color-slider::-webkit-slider-thumb:active {
  cursor: default;
  transform: scale(1.1);
}

.hilo-color-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--background);
  border: 2px solid var(--foreground);
  cursor: default;
  transition: transform 120ms ease;
}

.hilo-color-slider::-moz-range-thumb:active {
  cursor: default;
  transform: scale(1.1);
}

.hilo-color-slider:disabled {
  opacity: 0.5;
  cursor: default;
}
/*
 * compat.css — Hub design-token 兼容层（多角度）
 * --------------------------------------------------------------------------
 * 源页面 packages/pages/src/ToolAppPage/components/MultiAngleLeftPanel 使用
 * MiniMax 设计系统的 `--hl_*` 颜色变量与 `bg-hl_* / text-hl_* / border-hl_*`
 * 工具类。插件的 Tailwind v4 + hub.css 环境里并不存在这些类，为了 1:1 还原
 * 左侧面板，这里把用到的 token 补齐为手写 CSS（模式沿用 n-storyboard 的
 * compat.css，token 值逐字对齐 @hl/tailwindcss-plugin color-scheme）。
 *
 * 插件宿主通过 <html>.dark 切换深浅色，这里同样提供 .dark 覆盖。
 */

.multi-angle-theme {
  /* 背景层 */
  --hl_bg_01: #ffffff;
  --hl_bg_03: #ffffff;
  --hl_bg_04: #fcfcfd;
  --hl_bg_05: rgba(200, 206, 218, 0.2);
  --hl_bg_07: #ffffff;
  --hl_bg_08: rgba(200, 206, 218, 0.3);
  /* Relight 左侧控制卡与 Portal 浮层共用实色，避免底图透色造成视觉色差。 */
  --hl_relight_surface: #f5f6f8;

  /* 文本层（浅色主题：深字） */
  --hl_text_00: #15171f;
  --hl_text_01: rgba(20, 22, 31, 0.9);
  --hl_text_02: rgba(20, 22, 31, 0.7);
  --hl_text_03: rgba(18, 20, 31, 0.45);
  --hl_text_04: rgba(18, 20, 31, 0.25);
  --hl_text_05: #f5f6ff;
  --hl_text_06: #f5f6ff;
  --hl_text_08: #ffffff;

  /* 描边 / 分割线 */
  --hl_line_00: rgba(24, 22, 31, 0.2);
  --hl_line_01: rgba(24, 22, 31, 0.12);
  --hl_line_04: rgba(24, 22, 31, 0.45);
  --hl_slider_thumb_border: rgba(24, 22, 31, 0.4);
  /* bg_08 在白色轨道上的等效实色，避免透明层漏出零点。 */
  --hl_slider_thumb_fill: #eff0f4;
  --hl_color_temp_gradient: linear-gradient(
    90deg,
    #cb7a3a 0%,
    #b8a06d 35%,
    #85a6aa 58%,
    #4b98a8 100%
  );

  /* 白色透明叠加（浅色主题下取黑色系等价） */
  --hl_white_20: rgba(0, 0, 0, 0.2);
  --hl_white_30: rgba(0, 0, 0, 0.3);
  --hl_white_48: rgba(255, 255, 255, 0.48);

  /* 品牌色 / 错误色 */
  --hl_brand_00: #7657ff;
  --hl_alpha_75: rgba(118, 87, 255, 0.75);
  --hl_error_fill: #f4526a;

  /* 球体线框（源 LightBall/constants FALLBACK_WIRE_COLOR / EQUATOR_COLOR） */
  --hl_wire_color: rgba(192, 192, 208, 0.6);
  --hl_equator_color: rgba(192, 192, 208, 0.8);
  /* 浅色背景会吞掉高色温光柱，预览时保留色相并压低亮度、增强不透明度。 */
  --hl_relight_cone_brightness: 0.58;
  --hl_relight_cone_opacity_multiplier: 1.35;

  /* 3D 相机模型（浅色） */
  --hl_camera_body: #9ba7b8;
  --hl_camera_back: #8894a4;
  --hl_camera_side: #a7b2c1;
  --hl_camera_side_dark: #7b8797;
  --hl_camera_top: #a7b2c1;
  --hl_camera_top_light: #b9c3d0;
  --hl_camera_bottom: #7b8797;
  --hl_camera_edge: #969ea9;
  --hl_camera_top_edge: #9ca6b3;
  --hl_camera_handle: #9aa8bc;
  --hl_camera_lens_base: #e5e7eb;
  --hl_camera_lens_dark: #7b848f;
  --hl_camera_lens_core: #646d78;
  --hl_camera_ring_1: #e5e7eb;
  --hl_camera_ring_2: #d1d5db;
  --hl_camera_screen: #566170;
  --hl_camera_screen_edge: #aeb8c5;
}

.dark .multi-angle-theme {
  --hl_bg_01: #1a1a1a;
  --hl_bg_03: #1a1a1a;
  --hl_bg_04: #202128;
  --hl_bg_05: #242424;
  --hl_bg_07: #333333;
  --hl_bg_08: rgba(102, 105, 122, 0.3);
  --hl_relight_surface: #242424;

  --hl_text_00: #f5f6ff;
  --hl_text_01: rgba(235, 238, 255, 0.85);
  --hl_text_02: rgba(235, 238, 255, 0.65);
  --hl_text_03: rgba(224, 229, 255, 0.35);
  --hl_text_04: rgba(224, 229, 255, 0.2);
  --hl_text_05: #15171f;
  --hl_text_06: #f5f6ff;
  --hl_text_08: #ffffff;

  --hl_line_00: rgba(255, 255, 255, 0.12);
  --hl_line_01: rgba(255, 255, 255, 0.08);
  --hl_line_04: rgba(255, 255, 255, 0.45);
  --hl_slider_thumb_border: rgba(255, 255, 255, 0.12);
  --hl_slider_thumb_fill: var(--hl_text_08);
  --hl_color_temp_gradient: linear-gradient(
    90deg,
    #56351f 0%,
    #61513a 35%,
    #596062 58%,
    #2c5d69 100%
  );

  --hl_white_20: rgba(255, 255, 255, 0.16);
  --hl_white_30: rgba(255, 255, 255, 0.3);
  --hl_white_48: rgba(255, 255, 255, 0.48);

  --hl_brand_00: #7657ff;
  --hl_alpha_75: rgba(118, 87, 255, 0.75);
  --hl_error_fill: #f4526a;

  --hl_wire_color: rgba(255, 255, 255, 0.45);
  --hl_equator_color: rgba(255, 255, 255, 0.65);
  --hl_relight_cone_brightness: 1;
  --hl_relight_cone_opacity_multiplier: 1;

  /* 3D 相机模型（暗色） */
  --hl_camera_body: #3b4654;
  --hl_camera_back: #303946;
  --hl_camera_side: #465261;
  --hl_camera_side_dark: #2c3544;
  --hl_camera_top: #5a6676;
  --hl_camera_top_light: #6b7788;
  --hl_camera_bottom: #27313f;
  --hl_camera_edge: #8b939d;
  --hl_camera_top_edge: #9ca3af;
  --hl_camera_handle: #8f96a0;
  --hl_camera_lens_base: #d1d5db;
  --hl_camera_lens_dark: #4b5563;
  --hl_camera_lens_core: #374151;
  --hl_camera_ring_1: #d1d5db;
  --hl_camera_ring_2: #9ca3af;
  --hl_camera_screen: #161d28;
  --hl_camera_screen_edge: #667284;
}

/* ============ 颜色工具类 ============ */
.bg-hl_bg_01 {
  background-color: var(--hl_bg_01);
}
.bg-hl_bg_03 {
  background-color: var(--hl_bg_03);
}
.bg-hl_bg_04 {
  background-color: var(--hl_bg_04);
}
.bg-hl_bg_05 {
  background-color: var(--hl_bg_05);
}
.bg-hl_bg_07 {
  background-color: var(--hl_bg_07);
}
.bg-hl_bg_08 {
  background-color: var(--hl_bg_08);
}
.bg-hl_brand_00 {
  background-color: var(--hl_brand_00);
}
.bg-hl_text_00 {
  background-color: var(--hl_text_00);
}
.bg-hl_text_01 {
  background-color: var(--hl_text_01);
}
.bg-hl_text_03 {
  background-color: var(--hl_text_03);
}
.bg-hl_text_06 {
  background-color: var(--hl_text_06);
}
.bg-hl_text_08 {
  background-color: var(--hl_text_08);
}
.bg-hl_slider_thumb {
  background-color: var(--hl_slider_thumb_fill);
}
.bg-hl_line_01 {
  background-color: var(--hl_line_01);
}

.text-hl_brand_00 {
  color: var(--hl_brand_00);
}
.text-hl_text_00 {
  color: var(--hl_text_00);
}
.text-hl_text_01 {
  color: var(--hl_text_01);
}
.text-hl_text_02 {
  color: var(--hl_text_02);
}
.text-hl_text_03 {
  color: var(--hl_text_03);
}
.text-hl_text_04 {
  color: var(--hl_text_04);
}
.text-hl_text_05 {
  color: var(--hl_text_05);
}
.text-hl_white_30 {
  color: var(--hl_white_30);
}
.text-hl_white_48 {
  color: var(--hl_white_48);
}

.border-hl_brand_00 {
  border-color: var(--hl_brand_00);
}
.border-hl_line_00 {
  border-color: var(--hl_line_00);
}
.border-hl_line_01 {
  border-color: var(--hl_line_01);
}
.border-hl_line_04 {
  border-color: var(--hl_line_04);
}
.border-hl_slider_thumb {
  border-color: var(--hl_slider_thumb_border);
}

.ring-hl_brand_00 {
  --tw-ring-color: var(--hl_brand_00);
}
.ring-hl_text_00 {
  --tw-ring-color: var(--hl_text_00);
}

.placeholder\:text-hl_text_03::placeholder {
  color: var(--hl_text_03);
}

/* hover: 变体（Tailwind v4 无法为任意手写类生成，这里补用到的几个） */
.hover\:bg-hl_bg_05:hover {
  background-color: var(--hl_bg_05);
}
.hover\:bg-hl_text_01:hover {
  background-color: var(--hl_text_01);
}
.hover\:text-hl_text_00:hover {
  color: var(--hl_text_00);
}
.hover\:text-hl_text_02:hover {
  color: var(--hl_text_02);
}
.hover\:text-hl_brand_00:hover {
  color: var(--hl_brand_00);
}
.hover\:text-hl_error_fill:hover {
  color: var(--hl_error_fill);
}
.hover\:border-hl_line_04:hover {
  border-color: var(--hl_line_04);
}
.hover\:border-hl_brand_00:hover {
  border-color: var(--hl_brand_00);
}
.disabled\:bg-hl_text_03:disabled {
  background-color: var(--hl_text_03);
}

/* 隐藏滚动条（对齐源 LeftPanel 的 no-scrollbar）。 */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */

.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
}

.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
}

.react-flow {
  background-color: var(--xy-background-color, var(--xy-background-color-default));
}

.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
}

.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.react-flow__pane {
  z-index: 1;
}

.react-flow__pane.draggable {
    cursor: grab;
  }

.react-flow__pane.dragging {
    cursor: grabbing;
  }

.react-flow__pane.selection {
    cursor: pointer;
  }

.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}

.react-flow__renderer {
  z-index: 4;
}

.react-flow__selection {
  z-index: 6;
}

.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}

.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}

.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}

.react-flow .react-flow__edges {
  position: absolute;
}

.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }

.react-flow__edge {
  pointer-events: visibleStroke;
}

.react-flow__edge.selectable {
    cursor: pointer;
  }

.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }

.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }

.react-flow__edge.inactive {
    pointer-events: none;
  }

.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }

.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }

.react-flow__edge-textwrapper {
    pointer-events: all;
  }

.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    user-select: none;
  }

/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__connection {
  pointer-events: none;
}

.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }

svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}

.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}

.react-flow__node {
  position: absolute;
  user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}

.react-flow__node.selectable {
    cursor: pointer;
  }

.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }

.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }

.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}

.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }

.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
}

.react-flow__handle.connectingfrom {
    pointer-events: all;
  }

.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }

.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }

.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }

.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }

.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}

.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}

.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}

.react-flow__panel.top {
    top: 0;
  }

.react-flow__panel.bottom {
    bottom: 0;
  }

.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }

.react-flow__panel.left {
    left: 0;
  }

.react-flow__panel.right {
    right: 0;
  }

.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }

.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}

.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}

.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  left: 0;
  top: 0;
}

.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  user-select: none;
}

.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}

.react-flow__minimap-svg {
    display: block;
  }

.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }

.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }

.react-flow__background {
  pointer-events: none;
  z-index: -1;
}

.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }

.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }

.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }

.react-flow__controls {
  display: flex;
  flex-direction: column;
}

.react-flow__controls.horizontal {
    flex-direction: row;
  }

.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
  }

.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow {
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
}

.react-flow.dark {
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}

.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }

.react-flow__edge-text {
    font-size: 10px;
  }

.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }

.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}

.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }

.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }

.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}

.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}

.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }

.react-flow__handle {
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}

.react-flow__controls {
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}

.react-flow__controls-button {
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    user-select: none;
  }

.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }

.react-flow__controls-button:disabled {
      pointer-events: none;
    }

.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }

.react-flow__controls-button:last-child {
    border-bottom: none;
  }

.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }

.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow {
  --xy-resize-background-color-default: #3367d9;
}

.react-flow__resize-control {
  position: absolute;
}

.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}

.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}

.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}

.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}

/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}

.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}

/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}

.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}

.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}

.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}

.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}

.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}

.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}

.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}

/*
 * Single-SVG edge container: hint to the compositor that the entire edge
 * layer should sit on its own raster layer. With one shared <svg> for all
 * edges, pan/zoom only needs to translate the SVG transform — never repaint
 * the edge contents — so promoting it explicitly avoids paint storms on
 * graphs with hundreds of connections.
 */
svg.react-flow__edges {
  will-change: transform;
  contain: layout style;
}
/* ---- Live viewport zoom, broadcast per element (NOT inherited) ----
 *
 * `--canvas-zoom` is the live ReactFlow viewport zoom (transform[2]),
 * pushed onto each consumer element by CanvasShell via the zoom counter
 * registry (see hooks/use-zoom-counter.ts). Consumers read it through
 * `calc(... var(--canvas-zoom))` to counter-scale UI chrome (selection
 * outlines, group label chip, header strip) so they stay at constant
 * physical pixel size regardless of viewport zoom.
 *
 * `inherits: false` is the WHOLE POINT of the registered property:
 *   - With the default (inherits: true), setting --canvas-zoom on the
 *     canvas root forces the browser to invalidate style on the entire
 *     subtree on every wheel tick. On a 500+ node canvas that's ~5000
 *     candidate elements per frame — recalc-style alone can blow the
 *     16ms budget and tank pan/zoom to single-digit fps.
 *   - With inherits: false, each setProperty only invalidates the
 *     element it was written to. CanvasShell broadcasts to a small
 *     registry (mounted frames + visible headers) so
 *     wheel-tick cost stays O(registered elements) instead of O(tree).
 *
 * Trade-off: the value no longer flows through inheritance, so every
 * frame that reads it registers with `useRegisterZoomCounter`. Its single
 * leaf paint layer explicitly opts into inheritance; other descendants do
 * not inherit the property, keeping invalidation scoped to frame chrome.
 */
@property --canvas-zoom {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* ---- Canvas sub-system token palette ---- */
:root {
  --canvas-prompt-panel-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
  --canvas-bg-warm: #f3f0ea;
  --canvas-bg-cool: #eef2f5;
  --canvas-bg-paper: #f6f2e9;
  --canvas-bg-sage: #eef3ed;
  --canvas-bg-mist-blue: #edf3f7;
  --canvas-bg-lavender: #f3eff8;
  --canvas-bg-blush: #f7f0f0;
  --canvas-bg-sand: #f3ebdd;
  /* Canvas-only default cursor: 32px transparent asset with a native-sized visual body. */
  --canvas-cursor-default-url: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(1.7%202.6)%20scale(1.15)'%20filter='url(%23cursor-compass-shadow)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.6026%201.25887C2.14769%201.57925%201.92202%202.13594%202.02544%202.68264L4.0909%2013.6015C4.20634%2014.2118%204.70531%2014.6761%205.32233%2014.7473C5.93936%2014.8185%206.53098%2014.4801%206.78242%2013.9122L8.60873%209.78712L13.1079%209.45735C13.7274%209.41195%2014.2453%208.96892%2014.3861%208.36398C14.527%207.75903%2014.258%207.13282%2013.7222%206.81851L4.13758%201.19514C3.65768%200.913581%203.0575%200.938501%202.6026%201.25887Z'%20fill='white'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.95509%202.50587C2.92062%202.32363%202.99585%202.13807%203.14748%202.03128C3.29912%201.92449%203.49917%201.91618%203.65914%202.01003L13.2438%207.6334C13.4224%207.73817%2013.512%207.94691%2013.4651%208.14856C13.4182%208.35021%2013.2455%208.49788%2013.039%208.51302L7.9738%208.88427L5.91773%2013.5283C5.83391%2013.7176%205.6367%2013.8304%205.43103%2013.8067C5.22536%2013.7829%205.05903%2013.6282%205.02055%2013.4247L2.95509%202.50587Z'%20fill='black'%20/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='cursor-compass-shadow'%20x='1.00061'%20y='0'%20width='14.4226'%20height='15.7568'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'%20/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'%20/%3e%3cfeOffset%20dy='0.270222'%20/%3e%3cfeGaussianBlur%20stdDeviation='0.225185'%20/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'%20/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.2%200'%20/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow'%20/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'%20/%3e%3cfeOffset%20/%3e%3cfeGaussianBlur%20stdDeviation='0.5'%20/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'%20/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.32%200'%20/%3e%3cfeBlend%20mode='normal'%20in2='effect1_dropShadow'%20result='effect2_dropShadow'%20/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect2_dropShadow'%20result='shape'%20/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");
  --canvas-cursor-default: var(--canvas-cursor-default-url) 4 4, default;
  --canvas-node-highlight: #3b82f6;
  --canvas-recent-marker: #6D6CFF;
  /* Text-assistant emphasis: selection, caret, annotation, and local CTA share
   * one purple semantic accent instead of inheriting the generic canvas blue. */
  --canvas-alignment-guide: #A78BFA;
  --canvas-text-accent: #6D6CFF;
  --canvas-text-accent-foreground: #ffffff;
  --canvas-text-accent-soft: color-mix(in srgb, var(--canvas-text-accent) 16%, transparent);
  --canvas-minimap-viewport-accent: #7352a9;
  --canvas-minimap-viewport-fill: rgba(255, 255, 255, 0.42);
  /* Moving source-to-target pulse painted over selected edge base strokes. */
  --canvas-edge-flow: #8B72FF;
  --canvas-edge-flow-glow: #C996FF;
  --canvas-param-selected-bg: #0000000a;
  --canvas-param-selected-border: #0000002e;
  --canvas-media-play-icon: #ffffff;
  /* Empty-node roles share the existing video starter palette. */
  --canvas-empty-placeholder-fg: color-mix(in srgb, var(--canvas-controls-text) 18%, var(--canvas-node-bg));
  --canvas-empty-guidance-fg: var(--canvas-controls-text-muted);
  --canvas-empty-action-fg: var(--canvas-controls-text);
  --canvas-empty-action-icon-fg: var(--canvas-empty-action-fg);
  --canvas-empty-action-bg: color-mix(in srgb, var(--canvas-empty-video-action-bg, var(--canvas-controls-hover)) 50%, var(--canvas-node-bg));
  --canvas-empty-action-bg-hover: var(--canvas-empty-video-action-bg-hover, var(--canvas-controls-active));
  --canvas-media-node-radius: 10px;
  --canvas-media-node-inner-radius: 8px;
  --canvas-media-control-bg: rgba(0, 0, 0, 0.55);
  --canvas-media-control-bg-hover: rgba(0, 0, 0, 0.7);
  --canvas-media-control-fg: #ffffff;
  --canvas-media-icon-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  --canvas-reference-thumbnail-gradient: rgba(0, 0, 0, 0.08);
  --canvas-media-stack-fill: color-mix(in srgb, var(--canvas-node-border) 64%, transparent);
  --canvas-media-stack-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 220' preserveAspectRatio='none'%3E%3Cpath d='M0%200C6.62742%200%2012%205.37258%2012%2012V208C12%20214.627%206.62742%20220%200%20220V0Z' fill='black'/%3E%3C/svg%3E");
  --canvas-video-control-fg: #ffffff;
  --canvas-video-control-label: rgba(255, 255, 255, 0.92);
  --canvas-video-control-hover: rgba(255, 255, 255, 0.14);
  --canvas-video-control-progress: #ffffff;
  --canvas-video-control-track: rgba(255, 255, 255, 0.35);
  --canvas-video-control-shadow: rgba(0, 0, 0, 0.9);
}

/* Rich-prompt chip representing a completed canvas rectangle selection. */
.canvas-redraw-region-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--canvas-text-accent) 48%, transparent);
  border-radius: var(--radius-sm, 4px);
  background: var(--canvas-text-accent-soft);
  color: var(--canvas-text-accent);
  padding: 2px 6px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.dark {
  --canvas-bg-warm: #211f1b;
  --canvas-bg-cool: #1b2024;
  --canvas-bg-paper: #262219;
  --canvas-bg-sage: #1d251f;
  --canvas-bg-mist-blue: #1b242a;
  --canvas-bg-lavender: #241f2b;
  --canvas-bg-blush: #291f21;
  --canvas-bg-sand: #282116;
  --canvas-cursor-default: var(--canvas-cursor-default-url) 4 4, default;
  --canvas-node-highlight: #60a5fa;
  --canvas-recent-marker: #8B8AFF;
  --canvas-alignment-guide: #A78BFA;
  --canvas-text-accent: #8B8AFF;
  --canvas-text-accent-foreground: #ffffff;
  --canvas-text-accent-soft: color-mix(in srgb, var(--canvas-text-accent) 24%, transparent);
  --canvas-minimap-viewport-accent: #ceb8f7;
  --canvas-minimap-viewport-fill: color-mix(in srgb, var(--background) 52%, transparent);
  --canvas-edge-flow: #c4b5fd;
  --canvas-edge-flow-glow: rgba(167, 139, 250, 0.24);
  --canvas-param-selected-bg: #ffffff1a;
  --canvas-param-selected-border: #ffffff52;
  /* Empty-node roles share the existing video starter palette. */
  --canvas-empty-placeholder-fg: color-mix(in srgb, var(--canvas-controls-text) 18%, var(--canvas-node-bg));
  --canvas-empty-guidance-fg: var(--canvas-controls-text-muted);
  --canvas-empty-action-fg: var(--canvas-controls-text);
  --canvas-empty-action-icon-fg: var(--canvas-empty-action-fg);
  --canvas-empty-action-bg: color-mix(in srgb, var(--canvas-empty-video-action-bg, var(--canvas-controls-hover)) 50%, var(--canvas-node-bg));
  --canvas-empty-action-bg-hover: var(--canvas-empty-video-action-bg-hover, var(--canvas-controls-active));
  --canvas-media-play-icon: #ffffff;
  --canvas-media-control-bg: rgba(0, 0, 0, 0.55);
  --canvas-media-control-bg-hover: rgba(0, 0, 0, 0.7);
  --canvas-media-control-fg: #ffffff;
  --canvas-media-icon-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  --canvas-reference-thumbnail-gradient: rgba(0, 0, 0, 0.08);
  --canvas-media-stack-fill: color-mix(in srgb, var(--canvas-node-border) 64%, transparent);
  --canvas-media-stack-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 220' preserveAspectRatio='none'%3E%3Cpath d='M0%200C6.62742%200%2012%205.37258%2012%2012V208C12%20214.627%206.62742%20220%200%20220V0Z' fill='black'/%3E%3C/svg%3E");
  --canvas-video-control-fg: #ffffff;
  --canvas-video-control-label: rgba(255, 255, 255, 0.92);
  --canvas-video-control-hover: rgba(255, 255, 255, 0.14);
  --canvas-video-control-progress: #ffffff;
  --canvas-video-control-track: rgba(255, 255, 255, 0.35);
  --canvas-video-control-shadow: rgba(0, 0, 0, 0.9);
}

/* ---- ReactFlow overrides ---- */
[data-hilo-canvas-root="true"]:focus,
[data-hilo-canvas-root="true"]:focus-visible {
  outline: none;
}

/* Token-backed thumbnails used by the canvas appearance picker. */
.canvas-appearance-preview[data-canvas-tone='default'] {
  background-color: var(--canvas-bg, var(--background));
}

.canvas-appearance-preview[data-canvas-tone='warm-gray'] {
  background-color: var(--canvas-bg-warm);
}

.canvas-appearance-preview[data-canvas-tone='cool-gray'] {
  background-color: var(--canvas-bg-cool);
}

.canvas-appearance-preview[data-canvas-tone='paper'] {
  background-color: var(--canvas-bg-paper);
}

.canvas-appearance-preview[data-canvas-tone='sage'] {
  background-color: var(--canvas-bg-sage);
}

.canvas-appearance-preview[data-canvas-tone='mist-blue'] {
  background-color: var(--canvas-bg-mist-blue);
}

.canvas-appearance-preview[data-canvas-tone='lavender'] {
  background-color: var(--canvas-bg-lavender);
}

.canvas-appearance-preview[data-canvas-tone='blush'] {
  background-color: var(--canvas-bg-blush);
}

.canvas-appearance-preview[data-canvas-tone='sand'] {
  background-color: var(--canvas-bg-sand);
}

.canvas-appearance-preview[data-background-pattern='dots'] {
  background-image: radial-gradient(
    circle,
    var(--canvas-bg-dot, var(--canvas-controls-border)) 1px,
    transparent 1px
  );
  background-size: 10px 10px;
}

.canvas-appearance-preview[data-background-pattern='grid'] {
  background-image:
    linear-gradient(var(--canvas-bg-dot, var(--canvas-controls-border)) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--canvas-bg-dot, var(--canvas-controls-border)) 1px,
      transparent 1px
    );
  background-size: 12px 12px;
}

/* Ordinary headers hide below the 15% visibility boundary. Tagged headers
 * retain only their color landmark; their icon and asset name disappear with
 * ordinary headers so overview mode has one consistent information level.
 * CanvasShell toggles one ancestor class, avoiding a synchronous React
 * mount/unmount of every visible header inside the wheel event. */
.canvas-node-headers-hidden .node-floating-ui:not([data-has-color-tag='true']) {
  display: none;
}

.canvas-node-headers-hidden
  .node-floating-ui[data-has-color-tag='true']
  [data-node-header-title] {
  display: none;
}

/* ---- Pan-perf: promote the viewport into its own compositor layer ----
 *
 * ReactFlow updates `.react-flow__viewport`'s `transform` on every wheel /
 * drag event. Without an explicit `will-change`, Chromium reassesses layer
 * promotion of the entire subtree on each transform change — with hundreds
 * of <canvas>-bearing nodes (each a candidate GPU texture), this Layerize
 * step routinely hits 300+ ms per frame on dense graphs (measured: 327 ms
 * Layerize self-time on a 539-node / 856-edge canvas at 5% zoom).
 *
 * `will-change: transform` tells the compositor "this element's transform
 * will change; keep its subtree promoted as a stable layer" — so a pan
 * just translates the existing layer instead of rebuilding the layer
 * tree. Layerize drops to single-digit ms; pan goes from ~3 fps back to
 * 60 fps on the same graph.
 *
/* ---- Pan-perf: promote only the heavy media nodes, NOT the whole viewport ----
 *
 * History: we used to promote `.react-flow__viewport` itself
 * (`.canvas-panning .react-flow__viewport { will-change: transform }`). That
 * gave a buttery 60 fps pan because the whole subtree became one stable
 * compositor layer the GPU just translates. But the layer is rasterized at the
 * *un-scaled* layout resolution of the union of EVERY rendered node's bbox,
 * times dpr² — and `onlyRenderVisibleElements` keeps almost every node mounted
 * at low zoom (a 1512px viewport at zoom 0.18 spans ~8000 layout px). Measured:
 * a 65-node markdown canvas at zoom 0.187 pinned a 3672×2572 union → 144 MB for
 * a single window, scaling with node count × spread and stacking across
 * windows. Text / file nodes that would otherwise never touch the GPU got
 * dragged onto that giant parent texture.
 *
 * Fix: don't promote the parent. During a pan, promote only the *media* nodes
 * (image / video / audio / placeholder) individually. Each such layer's
 * texture is bounded by that one card's own size (≈ its real pixel content,
 * which for images is already GPU-resident), so a dense text canvas mints zero
 * giant textures. Media nodes still pan as cached layers (no per-frame
 * re-raster); text / table / file / group nodes repaint each frame instead —
 * cheap, because their content is plain DOM shrunk toward screen-pixel density
 * at the low zooms where this matters. HTML file nodes render via <iframe>,
 * which the browser already composites on its own layer regardless.
 *
 * Promotion is still gated on `.canvas-panning` (added on `onMoveStart`,
 * removed debounced on `onMoveEnd`, and torn down immediately if the gesture
 * turns out to be a zoom — see CanvasShell), so idle canvases pay nothing.
 */
.canvas-panning .react-flow__node-image,
.canvas-panning .react-flow__node-video,
.canvas-panning .react-flow__node-audio,
.canvas-panning .react-flow__node-placeholder {
  will-change: transform;
}

/* ---- Drag-perf: promote the dragged node(s) onto their own layer ----
 *
 * Same Layerize failure mode as the pan case above, but triggered by NODE
 * drag instead of viewport pan: XYDrag rewrites the dragged wrapper's inline
 * `transform` every pointermove frame, and without a compositor hint each
 * rewrite forces Chromium to re-run layer assignment across the entire
 * document — with ~500 <canvas>-bearing image nodes each being a promotion
 * candidate, Layerize alone measured 8.9s over a 2s drag (62 runs × ~143 ms;
 * drag fps ≈ 6). `.canvas-panning` doesn't apply here because the viewport
 * itself never moves during a node drag.
 *
 * ReactFlow tags every wrapper in the active drag selection with `.dragging`
 * (NodeWrapper/index.tsx), so promoting exactly those nodes keeps the texture
 * cost bounded by the drag selection size (usually 1 node), while the
 * per-frame transform update takes the direct compositor path — no
 * re-Layerize, no repaint of neighbours. The hint drops off the moment the
 * drag ends, so idle canvases pay nothing.
 */
.react-flow__node.dragging {
  will-change: transform;
}

/* ---- Box-select preview: live border without React selection commits ----
 *
 * Pane updates this class imperatively while the selection rectangle moves.
 * Keeping it on the ReactFlow wrapper avoids mounting each node's toolbar /
 * resize chrome mid-gesture. Recolor each node's existing frame so the preview
 * uses the same stroke position and width as a committed selection.
 */
.react-flow__node.box-select-preview {
  outline: none;
}

/* No layout border: background and paint layer share the same outer box. */
.canvas-node-frame {
  --canvas-node-frame-color: var(--canvas-node-border);
}

/* A single inset stroke, painted above media without taking layout space.
   Shadow spread retains fractional precision that CSS borders/outlines round
   to device pixels before the viewport transform (notably at 400% zoom). */
.canvas-node-frame > .canvas-node-stroke {
  position: absolute;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  border-radius: inherit;
  /* This property is non-inheriting; only this paint layer opts into it. */
  --canvas-zoom: inherit;
  box-shadow: inset 0 0 0 calc(1px / var(--canvas-zoom, 1)) var(--canvas-node-frame-color);
}

.canvas-node-frame[data-node-frame-hidden="true"] > .canvas-node-stroke {
  display: none;
}

.canvas-node-frame[data-node-selected="true"],
.canvas-node-frame:focus-within,
.react-flow__node:focus-visible .canvas-node-frame,
.react-flow__node.box-select-preview .canvas-node-frame {
  --canvas-node-frame-color: var(--canvas-node-border-selected);
}

/* ---- Edges & connection line render below nodes ----
 *
 * React Flow defaults: connectionline z-index 1001 (above everything).
 * We want both committed edges and the in-flight drag line to sit beneath
 * cards, so when the user drags a connection across other nodes the line
 * passes under them and the cards stay visually dominant. The
 * cursor-following + mouseup-to-commit behavior is React Flow's default —
 * only the layer order changes here.
 */
.react-flow .react-flow__edges,
.react-flow .react-flow__edgelabel-renderer {
  z-index: 0;
}

.react-flow svg.react-flow__connectionline {
  z-index: 0;
}

/* ---- Edge SVG layer: drop the always-on GPU promotion ----
 *
 * @xyflow/react ships `.react-flow__edges { will-change: transform }` so its
 * SVG edge layer pans as a stable compositor layer. But once `<EdgesCanvas>`
 * took over the *visible* bezier strokes, this SVG layer carries only the
 * transparent hit-area `<path>` per edge — nothing that benefits from a GPU
 * texture. Meanwhile the hint forces the compositor to rasterize the whole
 * layer, whose bounds span the union of every edge's bbox (the entire graph,
 * not the visible window). On a dense canvas (measured: 760 edges) that
 * texture's footprint scales with zoom² and balloons VRAM when zoomed —
 * exactly the failure mode we removed for `.canvas-panning`. Since the layer
 * is invisible geometry now, drop the promotion entirely: pan still moves it
 * via the parent viewport transform, and the visible edges (on the canvas)
 * are unaffected. Same reasoning applies to the per-edge interaction paths.
 */
.react-flow .react-flow__edges,
.react-flow .react-flow__edge-interaction {
  will-change: auto;
}

/* Dragging connection line: match the default edge stroke from EdgesCanvas
 * (1.5 flow units, scales with viewport zoom) and the canvas edge color so
 * the in-flight drag preview reads as "the line you're about to create".
 * No `vector-effect: non-scaling-stroke` here — we want the preview line
 * to scale alongside the edges and nodes when the user zooms. */
.react-flow__connection-path {
  stroke: var(--canvas-edge);
  stroke-width: 1.5;
}

.react-flow .react-flow__nodes {
  position: relative;
  z-index: 1;
}

.react-flow__pane {
  cursor: var(--canvas-cursor-default) !important;
}

.react-flow__pane.dragging {
  cursor: var(--canvas-cursor-default) !important;
}

.react-flow__node {
  cursor: var(--canvas-cursor-default) !important;
}

/* Sticker mode replaces the compass cursor with the selected Sticker preview. */
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__pane,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__node {
  cursor: none !important;
}

.sticker-cursor-preview-art {
  display: inline-flex;
  height: 100%;
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 90ms ease-out;
  width: 100%;
}

.sticker-cursor-preview-art.is-pressed {
  transform: scale(0.82) rotate(-8deg);
}

.sticker-cursor-preview-image,
.sticker-cursor-preview-emoji {
  display: block;
  height: 100%;
  opacity: 0.48;
  width: 100%;
}

.sticker-cursor-preview-image {
  object-fit: contain;
}

.sticker-cursor-preview-emoji {
  font-size: 2.5rem;
  line-height: 42px;
  text-align: center;
}

.sticker-cursor-preview-stamp {
  bottom: -3px;
  height: 22px;
  object-fit: contain;
  position: absolute;
  right: -5px;
  width: 22px;
}

/* Stickers are the top visual layer inside the canvas world. Keep them below
 * chrome/popovers while ensuring they remain visible above selected nodes and
 * image overlays. The inner StickerArt owns transient animation transforms so
 * ReactFlow's world-coordinate transform remains untouched. */
.react-flow__node.react-flow__node-sticker {
  z-index: 1002 !important;
}

.sticker-art {
  display: inline-flex;
  position: relative;
  transform: rotate(var(--sticker-rotation, 0deg));
  transform-origin: center;
}

[data-sticker-fresh] .sticker-art {
  animation: sticker-stamp-contact 480ms cubic-bezier(0.2, 0.86, 0.28, 1) both;
}

.sticker-burst {
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 0;
}

.sticker-spark {
  height: 0.45rem;
  left: -0.225rem;
  position: absolute;
  top: -0.225rem;
  transform: rotate(var(--sticker-spark-angle));
  width: 0.45rem;
}

.sticker-spark::before {
  animation: sticker-spark-burst 360ms cubic-bezier(0.16, 0.72, 0.28, 1) 92ms both;
  background: var(--canvas-controls-text);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
}

@keyframes sticker-stamp-contact {
  0% {
    opacity: 0.72;
    transform: translateY(-0.375rem) rotate(var(--sticker-rotation, 0deg)) scale(0.76);
  }
  17% {
    opacity: 1;
    transform: translateY(0.2rem) rotate(var(--sticker-rotation, 0deg)) scaleX(1.08)
      scaleY(0.56);
  }
  46% {
    transform: translateY(-0.1rem) rotate(var(--sticker-rotation, 0deg)) scale(1.12);
  }
  72% {
    transform: translateY(0.03rem) rotate(var(--sticker-rotation, 0deg)) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--sticker-rotation, 0deg)) scale(1);
  }
}

@keyframes sticker-spark-burst {
  0% {
    opacity: 0;
    transform: translateY(-0.85rem) scale(0.18);
  }
  34% {
    opacity: 0.84;
    transform: translateY(-1.9rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2.7rem) scale(0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sticker-fresh] .sticker-art {
    animation: none;
  }

  [data-sticker-fresh] .sticker-burst {
    display: none;
  }
}

/* Canvas default-arrow normalization.
 *
 * The custom cursor is the canvas' replacement for the native arrow. ReactFlow
 * and several node internals still set `cursor: default` / `cursor: auto` on
 * wrappers, disabled controls, read-only sub cards, and overlay surfaces. Those
 * declarations override the pane/node cursor and make the pointer flicker back
 * to the OS arrow while moving across a node.
 *
 * Keep this rule intentionally narrow: only arrow-equivalent cursors are mapped
 * to the custom cursor. Semantic cursors such as pointer, text, grab/grabbing,
 * move, resize, zoom, and not-allowed keep their own declarations. Tailwind
 * disabled variants are included because their resolved cursor is still the OS
 * arrow; menus portaled outside the canvas root intentionally keep host cursors. */
[data-hilo-canvas-root="true"] :where(
  .cursor-default,
  .cursor-auto,
  .disabled\:cursor-default:disabled,
  .disabled\:cursor-auto:disabled,
  .aria-disabled\:cursor-default[aria-disabled='true'],
  .aria-disabled\:cursor-auto[aria-disabled='true'],
  .hilo-color-slider,
  [style*="cursor: default"],
  [style*="cursor: auto"]
) {
  cursor: var(--canvas-cursor-default) !important;
}

[data-hilo-canvas-root="true"] .hilo-color-slider::-webkit-slider-thumb,
[data-hilo-canvas-root="true"] .hilo-color-slider::-moz-range-thumb {
  cursor: var(--canvas-cursor-default) !important;
}

/* ---- Multi-image overlay host: lift above neighbours ----
 *
 * A multi-image node whose floating overlay is open paints sub-cards OUTSIDE
 * its own bounding box (negative left/top offsets in multi-image-overlay.tsx).
 * Without an elevated stacking context those cards render BEHIND adjacent
 * nodes that come later in DOM order. `:has()` (already used below for the
 * connecting-handle rule) targets exactly the node wrapper that currently
 * contains an open overlay and lifts it.
 *
 * z-index 1001: above selected nodes (ReactFlow's elevateNodesOnSelect ≈ 1000)
 * so the overlay covers neighbours, but below the model-picker popover
 * (NodeToolbar portal, z-index 1100 in popover-shell.tsx) which renders in a
 * separate stacking context anyway. `!important` overrides the inline z-index
 * ReactFlow writes onto the wrapper.
 */
.react-flow__node:has([data-action-ui-id="canvas.image-node.multi-image-overlay"]),
.react-flow__node:has([data-action-ui-id="canvas.video-node.multi-video-overlay"]) {
  z-index: 1001 !important;
}

/* Collapsed multi-media affordance. The two right-side masked strips mirror
   the Figma stack marker while keeping ReactFlow's measured node size stable. */
.canvas-media-stack {
  --canvas-media-stack-gap: 8px;
  --canvas-media-stack-width: 12px;

  overflow: visible;
  isolation: isolate;
}

.canvas-media-stack::before,
.canvas-media-stack::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--canvas-media-stack-fill);
  -webkit-mask-image: var(--canvas-media-stack-mask);
  mask-image: var(--canvas-media-stack-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: -1;
}

.canvas-media-stack::before {
  top: max(8px, 6%);
  right: calc(0px - var(--canvas-media-stack-gap) - var(--canvas-media-stack-width));
  bottom: max(8px, 5%);
  width: var(--canvas-media-stack-width);
}

.canvas-media-stack::after {
  top: max(18px, 16%);
  right: calc(
    0px - var(--canvas-media-stack-gap) - var(--canvas-media-stack-gap) -
      var(--canvas-media-stack-width) - var(--canvas-media-stack-width)
  );
  bottom: max(18px, 13%);
  width: var(--canvas-media-stack-width);
}

.canvas-media-stack > :first-child:not(.canvas-node-stroke),
.canvas-media-stack > .canvas-node-stroke + * {
  overflow: hidden;
  border-radius: inherit;
}

.canvas-video-player-controls {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 100%
  );
}

.canvas-media-primary-actions > [data-action-ui-id="canvas.image-node.count-badge"] {
  position: static !important;
}

.canvas-media-expanded-frame {
  box-sizing: border-box;
  border: 4px solid color-mix(in srgb, var(--canvas-node-border) 64%, transparent);
  border-radius: calc(var(--canvas-media-node-radius) + 10px);
  transform-origin: center;
  animation: canvas-media-expanded-frame-in 160ms ease-out both;
}

.canvas-media-expanded-card {
  transform-origin: center;
  animation: canvas-media-expanded-card-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-state='closing'] .canvas-media-expanded-frame {
  animation: canvas-media-expanded-frame-out 140ms ease-in both;
}

[data-state='closing'] .canvas-media-expanded-card {
  pointer-events: none;
  animation: canvas-media-expanded-card-out 140ms ease-in both;
  animation-delay: 0ms !important;
}

@keyframes canvas-media-expanded-card-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes canvas-media-expanded-card-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
}

@keyframes canvas-media-expanded-frame-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes canvas-media-expanded-frame-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-media-expanded-card,
  .canvas-media-expanded-frame {
    animation: none;
  }
}

.react-flow__node.selectable:hover {
  cursor: var(--canvas-cursor-default) !important;
}

/* Sticker placement owns the pointer while the mode is active.  Keep this
 * block after the default-arrow and hover normalization above: those rules
 * intentionally restore the compass cursor for ordinary canvas work, but
 * their later/similar-specificity selectors used to win when the pointer
 * crossed a node (or one of ReactFlow's cursor-default internals).  The
 * floating StickerCursorPreview is the only visual cursor in this state, so
 * every element in the ReactFlow surface must suppress the native/compass
 * cursor.  Toolbar controls live outside `.react-flow` and retain their
 * normal pointer affordances.
 */
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__pane,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__node,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__node.selectable:hover,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow__nodesselection-rect,
[data-hilo-canvas-root='true'][data-sticker-mode='true'] .react-flow * {
  cursor: none !important;
}

/* Sticker mode's preview must yield to selected-node chrome. The toolbar is
 * mounted inside ReactFlow's renderer, so the broad `.react-flow *` rule
 * above would otherwise hide the native cursor over it and leave the stamp
 * preview visually parked underneath. Restore the normal canvas arrow on the
 * chrome surface and the hand cursor on its actionable controls. */
[data-hilo-canvas-root='true'][data-sticker-mode='true']
  .react-flow
  .react-flow__node-toolbar:has([data-canvas-chrome='true']),
[data-hilo-canvas-root='true'][data-sticker-mode='true']
  .react-flow
  .react-flow__node-toolbar:has([data-canvas-chrome='true']) * {
  cursor: var(--canvas-cursor-default) !important;
}

[data-hilo-canvas-root='true'][data-sticker-mode='true']
  .react-flow
  .react-flow__node-toolbar:has([data-canvas-chrome='true'])
  button,
[data-hilo-canvas-root='true'][data-sticker-mode='true']
  .react-flow
  .react-flow__node-toolbar:has([data-canvas-chrome='true'])
  [role='button'] {
  cursor: pointer !important;
}

/* ReactFlow ships a built-in `.react-flow__node-group` rule with
 * `padding: 10px; border: 1px solid #1a192b; border-radius: 5px` to make
 * stock React Flow groups look like grouping containers.
 * Our GroupNode draws its own border/background/radius (square corners,
 * tokenized colors), so the wrapper's padding and border push the inner
 * <div> 11px down-right and create the off-center "background offset".
 * Strip both — the inner element handles all visual chrome. */
.react-flow__node.react-flow__node-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* xyflow-system also applies a hover/selected box-shadow exclusively to
 * `.react-flow__node-group` (see @xyflow/system/styles/style.css:84-94) —
 * a soft drop shadow on hover and a 0.5px selection ring. Our other node
 * types use custom registered names and never hit that rule, so the
 * shadow looks inconsistent on group nodes alone. The outline drawn by
 * GroupNode itself is the canonical selection feedback; suppress the
 * stock shadows in both states. */
.react-flow__node.react-flow__node-group.selectable:hover,
.react-flow__node.react-flow__node-group.selectable.selected,
.react-flow__node.react-flow__node-group.selectable:focus,
.react-flow__node.react-flow__node-group.selectable:focus-visible {
  box-shadow: none;
}

/* Collapsed group: the visible frame is suppressed by GroupNode's frameStyle
 * (transparent + outline:none), but the ReactFlow node wrapper still occupies
 * the original `width × height` and would otherwise intercept clicks across
 * the now-invisible region — making it look like clicking empty canvas
 * mysteriously selects something. Disable pointer events on the wrapper so
 * the area is fully passthrough. The chip itself opts back in via its inline
 * `pointer-events: auto`, so the toggle / rename interactions still work. */
.react-flow__node.react-flow__node-group.canvas-group-collapsed {
  pointer-events: none;
}

/* ---- Space-pan mode: hold Space to grab-hand pan ---- */
.canvas-space-pan .react-flow__pane {
  cursor: grab !important;
}

.canvas-space-pan .react-flow__pane.dragging {
  cursor: grabbing !important;
}

.canvas-space-pan .react-flow__node {
  pointer-events: none !important;
  cursor: grab !important;
}

.canvas-space-pan .react-flow__nodesselection-rect {
  pointer-events: none !important;
}

.react-flow__nodesselection-rect {
  cursor: var(--canvas-cursor-default) !important;
  border-color: var(--canvas-node-border-selected) !important;
  background: var(--canvas-selection-bg) !important;
}

/* 拖拽框选时的 marquee selection rect — ReactFlow 默认蓝色,覆盖为品牌紫,
   跟其他品牌强调场景(首页登录、skill chip)同款 token。
   `.react-flow__selection` 是 ReactFlow 拖框选时的临时矩形,
   跟已选节点外框(.react-flow__nodesselection-rect)是两个 class。 */
.react-flow__selection {
  background: color-mix(in srgb, var(--brand-accent) 12%, transparent) !important;
  border: 1px solid var(--brand-accent) !important;
}

/* Drag alignment lives above world nodes/selection, below popovers. The SVG
   is in screen space, so its rules and distance labels never scale with zoom. */
.canvas-alignment-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1003;
  overflow: hidden;
  pointer-events: none;
  color: var(--canvas-alignment-guide);
}

.canvas-alignment-guides line,
.canvas-alignment-guides path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.canvas-alignment-guides [data-guide-kind='alignment'] line {
  stroke-dasharray: 2 3;
}

.canvas-alignment-guides text {
  fill: currentColor;
  stroke: var(--canvas-bg);
  stroke-width: 3;
  paint-order: stroke;
  font-size: 11px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Hide the multi-selection bounding box when only 0 or 1 nodes are selected */
[data-selection-count="0"] .react-flow__nodesselection,
[data-selection-count="1"] .react-flow__nodesselection {
  display: none !important;
}

/* A host-rendered node context menu is the only relevant chrome while it is
   open. Keep the underlying selection for action targeting, but hide both the
   top NodeToolbar and bottom PopoverShell (both use XYFlow's toolbar root).
   The canvas context-menu hook owns the suppression lifecycle so a popover
   staged by right-click selection cannot flash open as the menu dismisses. */
[data-hilo-canvas-root='true'][data-selection-chrome-suppressed='true']
  .react-flow__node-toolbar {
  display: none !important;
}

/* NodeToolbar portals mount directly under `.react-flow__renderer`, outside
 * the viewport stacking context. The world viewport sits at z-index 2 and
 * Sticker nodes are intentionally elevated to 1002, so the toolbar must opt
 * into the canvas chrome tier explicitly or its hit area can fall through to
 * the pane while Sticker mode is armed. Only the shared toolbar palette marks
 * itself as canvas chrome; node popovers keep their dedicated 1100 tier. */
.react-flow__node-toolbar:has([data-canvas-chrome='true']) {
  pointer-events: auto;
  z-index: 10100 !important;
}

/* ---- Node handle "+" slide-in on hover ---- */
.node-handle-plus {
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.node-handle-plus-right {
  transform: translate(-15px);
}

.node-handle-plus-left {
  transform: translate(15px);
}

/* Show on group hover or explicit visible class (selected) */
.node-handle-plus-visible,
.group:hover .node-handle-plus:not(.node-handle-plus-force-hidden) {
  opacity: 1;
  transform: translate(0);
  pointer-events: auto;
}

/* Force hidden (dragging / multi-select) */
.node-handle-plus-force-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.node-handle-plus-right.node-handle-plus-force-hidden {
  transform: translate(-15px) !important;
}

.node-handle-plus-left.node-handle-plus-force-hidden {
  transform: translate(15px) !important;
}

/* Icon hover feedback */
.node-handle-plus:hover .node-handle-icon circle,
.node-handle-plus:hover .node-handle-icon path {
  stroke: var(--canvas-handle-icon, #000000b3);
}

/* ---- Edge-visibility toggle icon ---- */
/* Two stacked glyphs cross-fade; the "off" glyph adds a diagonal slash that
   draws in when hiding edges and erases when showing them. `data-edge-state`
   sets the resting glyph (also the reduced-motion end state); the JS-applied
   `is-opening` / `is-closing` classes run the transition keyframes. */
.edge-toggle-stack {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.edge-toggle-stack svg {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
}

.edge-icon-off {
  opacity: 1;
}

.edge-icon-on {
  opacity: 0;
}

.edge-toggle-stack[data-edge-state='on'] .edge-icon-off {
  opacity: 0;
}

.edge-toggle-stack[data-edge-state='on'] .edge-icon-on {
  opacity: 1;
}

.edge-slash-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* opening = edges becoming visible: fade to the un-slashed "on" glyph and
   erase the slash. */
.edge-toggle-stack.is-opening .edge-icon-off {
  animation: edge-toggle-off-out 320ms ease both;
}

.edge-toggle-stack.is-opening .edge-icon-on {
  animation: edge-toggle-on-in 320ms ease both;
}

.edge-toggle-stack.is-opening .edge-slash-line {
  animation: edge-toggle-slash-erase 260ms ease both;
}

/* closing = edges becoming hidden: fade the "on" glyph out and draw the slash. */
.edge-toggle-stack.is-closing .edge-icon-on {
  animation: edge-toggle-on-out 180ms ease both;
}

.edge-toggle-stack.is-closing .edge-icon-off {
  opacity: 1;
}

.edge-toggle-stack.is-closing .edge-slash-line {
  animation: edge-toggle-slash-draw 280ms ease 60ms both;
}

@keyframes edge-toggle-off-out {
  0%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes edge-toggle-on-in {
  0%,
  64% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes edge-toggle-on-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes edge-toggle-slash-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes edge-toggle-slash-erase {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1;
  }
}

/* Reduced motion: JS already skips the class toggles, but guard here too so
   the target glyph (via data-edge-state) is presented with no animation even
   if a class lingers. */
@media (prefers-reduced-motion: reduce) {
  .edge-toggle-stack.is-opening .edge-icon-off,
  .edge-toggle-stack.is-opening .edge-icon-on,
  .edge-toggle-stack.is-opening .edge-slash-line,
  .edge-toggle-stack.is-closing .edge-icon-on,
  .edge-toggle-stack.is-closing .edge-slash-line {
    animation: none;
  }
}

/* ---- Keyframes ---- */
@keyframes canvas-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes canvas-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tidy confirm: countdown ring sweeping from full to empty over its duration.
   Circle r=7 → circumference 2*pi*7 ≈ 43.98. */
@keyframes canvas-countdown-ring {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 43.98;
  }
}

@keyframes i2v-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* First/last-frame swap uses two equivalent animation-name pairs so repeated
   clicks restart the motion without remounting the attachment slots. */
@keyframes canvas-frame-slot-swap-from-right-a {
  0% {
    z-index: 2;
    transform: translateX(calc(100% + 32px)) translateY(0) rotate(0deg) scale(1);
  }
  18% {
    z-index: 2;
    transform: translateX(calc(94% + 30px)) translateY(-2px) rotate(-1deg) scale(1);
  }
  35% {
    z-index: 2;
    transform: translateX(calc(76% + 24px)) translateY(-7px) rotate(-2deg) scale(0.995);
  }
  50% {
    z-index: 2;
    transform: translateX(calc(50% + 16px)) translateY(-10px) rotate(0deg) scale(0.99);
  }
  65% {
    z-index: 2;
    transform: translateX(calc(24% + 8px)) translateY(-7px) rotate(2deg) scale(0.995);
  }
  82% {
    z-index: 2;
    transform: translateX(calc(6% + 2px)) translateY(-2px) rotate(1deg) scale(1);
  }
  100% {
    z-index: 2;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes canvas-frame-slot-swap-from-left-a {
  0% {
    z-index: 1;
    transform: translateX(calc(-100% - 32px)) translateY(0) rotate(0deg) scale(1);
  }
  18% {
    z-index: 1;
    transform: translateX(calc(-94% - 30px)) translateY(2px) rotate(1deg) scale(1);
  }
  35% {
    z-index: 1;
    transform: translateX(calc(-76% - 24px)) translateY(7px) rotate(2deg) scale(0.995);
  }
  50% {
    z-index: 1;
    transform: translateX(calc(-50% - 16px)) translateY(10px) rotate(0deg) scale(0.99);
  }
  65% {
    z-index: 1;
    transform: translateX(calc(-24% - 8px)) translateY(7px) rotate(-2deg) scale(0.995);
  }
  82% {
    z-index: 1;
    transform: translateX(calc(-6% - 2px)) translateY(2px) rotate(-1deg) scale(1);
  }
  100% {
    z-index: 1;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes canvas-frame-slot-swap-from-right-b {
  0% {
    z-index: 2;
    transform: translateX(calc(100% + 32px)) translateY(0) rotate(0deg) scale(1);
  }
  18% {
    z-index: 2;
    transform: translateX(calc(94% + 30px)) translateY(-2px) rotate(-1deg) scale(1);
  }
  35% {
    z-index: 2;
    transform: translateX(calc(76% + 24px)) translateY(-7px) rotate(-2deg) scale(0.995);
  }
  50% {
    z-index: 2;
    transform: translateX(calc(50% + 16px)) translateY(-10px) rotate(0deg) scale(0.99);
  }
  65% {
    z-index: 2;
    transform: translateX(calc(24% + 8px)) translateY(-7px) rotate(2deg) scale(0.995);
  }
  82% {
    z-index: 2;
    transform: translateX(calc(6% + 2px)) translateY(-2px) rotate(1deg) scale(1);
  }
  100% {
    z-index: 2;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes canvas-frame-slot-swap-from-left-b {
  0% {
    z-index: 1;
    transform: translateX(calc(-100% - 32px)) translateY(0) rotate(0deg) scale(1);
  }
  18% {
    z-index: 1;
    transform: translateX(calc(-94% - 30px)) translateY(2px) rotate(1deg) scale(1);
  }
  35% {
    z-index: 1;
    transform: translateX(calc(-76% - 24px)) translateY(7px) rotate(2deg) scale(0.995);
  }
  50% {
    z-index: 1;
    transform: translateX(calc(-50% - 16px)) translateY(10px) rotate(0deg) scale(0.99);
  }
  65% {
    z-index: 1;
    transform: translateX(calc(-24% - 8px)) translateY(7px) rotate(-2deg) scale(0.995);
  }
  82% {
    z-index: 1;
    transform: translateX(calc(-6% - 2px)) translateY(2px) rotate(-1deg) scale(1);
  }
  100% {
    z-index: 1;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

:is(
  .canvas-frame-slot-swap-from-right-a,
  .canvas-frame-slot-swap-from-right-b,
  .canvas-frame-slot-swap-from-left-a,
  .canvas-frame-slot-swap-from-left-b
) {
  animation-duration: 260ms;
  animation-timing-function: linear;
}

.canvas-frame-slot-swap-from-right-a {
  animation-name: canvas-frame-slot-swap-from-right-a;
}

.canvas-frame-slot-swap-from-left-a {
  animation-name: canvas-frame-slot-swap-from-left-a;
}

.canvas-frame-slot-swap-from-right-b {
  animation-name: canvas-frame-slot-swap-from-right-b;
}

.canvas-frame-slot-swap-from-left-b {
  animation-name: canvas-frame-slot-swap-from-left-b;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .canvas-frame-slot-swap-from-right-a,
    .canvas-frame-slot-swap-from-right-b,
    .canvas-frame-slot-swap-from-left-a,
    .canvas-frame-slot-swap-from-left-b
  ) {
    animation: none;
  }
}

@keyframes canvas-portal-popover-in-top {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes canvas-portal-popover-in-bottom {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.canvas-portal-popover-in[data-side='top'] {
  animation: canvas-portal-popover-in-top 0.12s ease-out;
}

.canvas-portal-popover-in[data-side='bottom'] {
  animation: canvas-portal-popover-in-bottom 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-portal-popover-in {
    animation: none;
  }
}

@keyframes i2v-pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Selection toolbar enter: 浮入 (Y 下→上 + fade-in,缓出曲线 ease-out).
   配合 NodeToolbar 用 React mount 触发,只在元素首次出现时跑一次. */
@keyframes toolbar-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selection toolbar exit: 浮出 (Y 上→下 + fade-out,缓入曲线 ease-in).
   配合 React 延迟 unmount 组件 (data-state="exiting") 触发 -- 卸载前先跑这段
   再实际从 DOM 移除. 关键帧反过来 + 起点不写 from(继承当前 to 状态)避免抖. */
@keyframes toolbar-fade-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Frame 内 overlay enter -- 顶部元素(下载按钮/静音键): 从上方滑入 + fade-in. */
@keyframes media-overlay-top-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Frame 内 overlay enter -- 底部元素(progress/控件): 从下方滑入 + fade-in. */
@keyframes media-overlay-bottom-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes context-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes crop-panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes eq-bar-1 {
  0% { height: 15%; }
  20% { height: 85%; }
  45% { height: 35%; }
  70% { height: 95%; }
  100% { height: 15%; }
}
@keyframes eq-bar-2 {
  0% { height: 40%; }
  15% { height: 90%; }
  40% { height: 20%; }
  65% { height: 75%; }
  85% { height: 50%; }
  100% { height: 40%; }
}
@keyframes eq-bar-3 {
  0% { height: 25%; }
  30% { height: 100%; }
  50% { height: 45%; }
  75% { height: 80%; }
  100% { height: 25%; }
}
@keyframes eq-bar-4 {
  0% { height: 60%; }
  25% { height: 20%; }
  50% { height: 90%; }
  80% { height: 30%; }
  100% { height: 60%; }
}
@keyframes eq-bar-5 {
  0% { height: 30%; }
  20% { height: 70%; }
  40% { height: 100%; }
  60% { height: 25%; }
  80% { height: 65%; }
  100% { height: 30%; }
}

/* ---- Generating-state progress bar ---- */

.generating-wash {
  position: relative;
  overflow: hidden;
  background: var(--canvas-node-bg, #f5f5f5);
}
.generating-wash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--gen-progress, 0%);
  background: oklch(0.95 0 0);
  transition: width 300ms ease-out;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.dark .generating-wash::before {
  background: oklch(0.35 0 0);
}
.generating-wash::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--gen-progress, 0%);
  background: linear-gradient(
    90deg,
    transparent,
    oklch(0.82 0 0 / 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: generating-shimmer 2.6s linear infinite;
  transition: width 300ms ease-out;
  pointer-events: none;
  z-index: 2;
}
.dark .generating-wash::after {
  background: linear-gradient(
    90deg,
    transparent,
    oklch(0.55 0 0 / 0.25),
    transparent
  );
  background-size: 200% 100%;
}

.generating-wash--queued::before {
  width: 100%;
  background: color-mix(
    in oklch,
    var(--canvas-controls-bg, var(--canvas-node-bg)) 78%,
    var(--canvas-node-bg)
  );
}

.generating-wash--queued::after {
  inset: 12px;
  width: auto;
  border: 1.5px dashed color-mix(in oklch, var(--foreground) 18%, transparent);
  border-radius: calc(var(--canvas-media-node-inner-radius) - 2px);
  background: none;
  animation: queued-outline-pulse 2.4s ease-in-out infinite;
  z-index: 1;
}

@keyframes queued-outline-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes generating-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}


/* ---- Connection-drag flowing-border highlight ----
 *
 * While the user drags a connection from a source handle, every node the
 * cursor hovers next gets a "flowing light" border + outer glow. The wrapper
 * gets the `is-connecting` class via `useConnection()` in canvas-shell so the
 * effect cleanly turns off the moment the gesture ends. Source node never
 * triggers this because the cursor has already left it by the time the drag
 * starts.
 *
 * Single layer:
 *   ::before — tight 2px halo right against the node edge (the "border"),
 *   a horizontally-flowing linear-gradient animated by sliding
 *   background-position from 100% → -100% (`flowing-light` keyframes).
 * (The former ::after blurred outer glow was removed — filter: blur is
 * banned on canvas elements for compositing/perf reasons.)
 *
 * Project visual rules:
 *   - Square corners (border-radius: 0) — Hub design system mandates global
 *     square corners.
 *   - z-index: -1 sits behind the NodeBody so the inner content stays clean;
 *     only the inset overflow (-2px / -6px) shows up as the visible band.
 *   - Light source uses `var(--foreground)` + alpha so it reads as a dark
 *     band on light canvas and a bright band on dark canvas (adapts to
 *     both light and dark themes).
 */
.is-connecting .canvas-node-shell::before {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: -1;
  inset: -2px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 20%,
      color-mix(in oklch, var(--foreground) 35%, transparent) 40%,
      color-mix(in oklch, var(--foreground) 90%, transparent) 50%,
      color-mix(in oklch, var(--foreground) 35%, transparent) 60%,
      transparent 80%,
      transparent 100%
    )
    0 0 / 200% 200%;
}

/* Hover-only on the prospective TARGET node — source node never lights up.
 * `:not(:has(.connectingfrom))` excludes the node whose source handle is
 * currently dispatching the drag, in case the user wiggles back over it. */
.is-connecting
  .react-flow__node:not(:has(.react-flow__handle.connectingfrom))
  .canvas-node-shell:hover::before {
  opacity: 1;
  animation: flowing-light 2s linear infinite;
}

@keyframes flowing-light {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}

/* ---- Newly-added node highlight ----
 *
 * Scale-in animation + persistent outline when a node arrives via WS
 * incremental update (generation result, MCP add, etc.). The
 * `is-newly-added` class is toggled by NodeShell when the node id is
 * present in `recentlyAddedStore` (30s TTL, matching minimap red pin
 * marker duration).
 *
 * Brand-accent outline + pulsing box-shadow glow for the full 30s.
 */
.canvas-node-shell.is-newly-added {
  outline: 2px solid var(--canvas-node-highlight);
  outline-offset: 2px;
  box-shadow: 0 0 20px 6px color-mix(in oklch, var(--canvas-node-highlight) 50%, transparent);
  animation: newly-added-pop 800ms ease-out 1 both, newly-added-glow 2s ease-in-out infinite;
}

@keyframes newly-added-pop {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes newly-added-glow {
  0%,
  100% {
    box-shadow: 0 0 10px 3px color-mix(in oklch, var(--canvas-node-highlight) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 18px 6px color-mix(in oklch, var(--canvas-node-highlight) 60%, transparent);
  }
}

/* ---- Generating-state breathing stroke ---- */
@keyframes generating-breathe {
  0%, 100% { box-shadow: inset 0 0 0 calc(1px / var(--canvas-zoom, 1)) color-mix(in oklch, var(--foreground) 12%, transparent); }
  50% { box-shadow: inset 0 0 0 calc(1px / var(--canvas-zoom, 1)) color-mix(in oklch, var(--foreground) 35%, transparent); }
}

.is-generating.canvas-node-shell {
  outline: none;
}

.is-generating.canvas-node-shell .canvas-node-frame:not([data-node-selected="true"]):not(:focus-within) > .canvas-node-stroke {
  animation: generating-breathe 3s ease-in-out infinite;
}

.react-flow__node:focus-visible .canvas-node-frame > .canvas-node-stroke,
.react-flow__node.box-select-preview .canvas-node-frame > .canvas-node-stroke {
  animation: none !important;
}

/* Loading sub-cards reuse the same stroke without shifting layout. */
[data-generating-sub] > .canvas-node-stroke {
  animation: generating-breathe 3s ease-in-out infinite;
}

[data-generating-sub]:focus-within > .canvas-node-stroke {
  animation: none;
}

@keyframes generating-text-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 生成态节点 / 多图子卡内的 wash 强制媒体卡片圆角裁剪，
   避免 progress fill / shimmer 在节点 stroke 外溢出。
   也覆盖旧调用点传入的 inline `border-radius`。 */
.is-generating.canvas-node-shell .generating-wash,
[data-generating-sub] .generating-wash {
  border-radius: var(--canvas-media-node-inner-radius) !important;
  overflow: hidden;
}

/* ---- Connection-drag disabled target ----
 *
 * Mid-drag, every node the source already has a direct edge to is marked
 * with `node-conn-disabled` by `ConnectingDisabledMarker`. The card visibly
 * dims and we suppress the flowing-light hover so the user gets immediate
 * feedback that this target won't accept another connection. Cursor flips
 * to `not-allowed` for the same reason.
 *
 * Scoped under `.is-connecting` so the disabled look only appears during the
 * actual drag — the card returns to normal the instant the gesture ends.
 */
.is-connecting .react-flow__node.node-conn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  transition: opacity 0.15s ease;
}

.is-connecting .react-flow__node.node-conn-disabled .canvas-node-shell {
  cursor: not-allowed !important;
}

/* Suppress the flowing-light hover halo for disabled targets — the dimmed
 * card already communicates the state, the halo would contradict it. */
.is-connecting
  .react-flow__node.node-conn-disabled
  .canvas-node-shell:hover::before,
.is-connecting
  .react-flow__node.node-conn-disabled
  .canvas-node-shell:hover::after {
  opacity: 0 !important;
  animation: none !important;
}

/* ---- Auto-hide scrollbar (visible only while scrolling) ---- */
.autohide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s;
}
.autohide-scrollbar:hover {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.autohide-scrollbar::-webkit-scrollbar { width: 4px; }
.autohide-scrollbar::-webkit-scrollbar-track { background: transparent; }
.autohide-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.3s;
}
.autohide-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
.autohide-scrollbar.scrollbar-2::-webkit-scrollbar { width: 2px; }
.autohide-scrollbar.scrollbar-2::-webkit-scrollbar-thumb { border-radius: 0; }

.dark .autohide-scrollbar:hover { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.dark .autohide-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }

/* ---- Fullscreen table custom overlay scrollbar ---- */
/* Hide the native scrollbar — the overlay-thumb component renders a
   visible substitute via React portals / absolute positioning. */
.native-scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
}
.native-scrollbar-hidden::-webkit-scrollbar { display: none; }

.hilo-overlay-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  transition: background 0.15s;
}
.hilo-overlay-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}
.hilo-overlay-scrollbar-thumb.dragging {
  background: rgba(0, 0, 0, 0.42);
}
.dark .hilo-overlay-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
.dark .hilo-overlay-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
.dark .hilo-overlay-scrollbar-thumb.dragging {
  background: rgba(255, 255, 255, 0.42);
}

/* ---- MiniMap theme ---- */
.react-flow__minimap {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.react-flow__minimap-canvas-panel {
  padding: 0;
}
.react-flow__minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.react-flow__minimap-mask {
  fill: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}
.react-flow__minimap-viewport-indicator {
  fill: var(--canvas-minimap-viewport-fill);
  stroke: var(--canvas-minimap-viewport-accent);
  stroke-width: var(--xy-minimap-viewport-dispersed-stroke-width);
  stroke-opacity: 1;
  opacity: 0;
  transition-property: opacity, stroke-width;
  transition-duration: 240ms, 260ms;
  transition-timing-function:
    cubic-bezier(0.4, 0, 0.7, 0.2),
    cubic-bezier(0.4, 0, 0.7, 0.2);
}
.react-flow__minimap-viewport-indicator[data-visible='true'] {
  stroke-width: var(--xy-minimap-viewport-stroke-width);
  opacity: 1;
  transition-duration: 280ms, 320ms;
  transition-timing-function:
    cubic-bezier(0.16, 1, 0.3, 1),
    cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .react-flow__minimap-viewport-indicator {
    transition-duration: 0.01ms, 0.01ms;
  }
}
.react-flow__minimap-node {
  fill: var(--muted-foreground) !important;
  opacity: 0.5;
  stroke: none !important;
}

/* Keep prompt content inset separate from the panel and its toolbars. */
[data-action-ui-id='popover.shell'] [data-action-ui-id='popover.prompt-input'] {
  padding: 6px;
}
[data-action-ui-id='popover.shell'] .canvas-prompt-empty-state {
  inset: 6px;
}

/* ---- Tiptap text editor styles ---- */
.canvas-prompt-font-size-editor .ProseMirror,
.canvas-prompt-font-size-textarea {
  font-size: calc(var(--canvas-prompt-font-size, 16) * 1px);
  line-height: 1.5;
}

/* Inline reference chips use fixed pixel geometry at the 16px baseline.
 * Scale the whole NodeView (text, thumbnail, icons, padding and hit targets)
 * with the prompt preference so references stay proportional to surrounding
 * text while preserving every existing chip interaction. Chromium's `zoom`
 * participates in inline layout, unlike transform: scale(), so adjacent text
 * and chips do not overlap at either end of the font-size range. */
.canvas-prompt-font-size-editor .canvas-prompt-reference-chip-wrapper {
  zoom: var(--canvas-prompt-font-scale, 1);
  /* `zoom` scales margins too. Divide before layout so the visible distance
   * from adjacent prompt text stays exactly 2px at every font-size setting. */
  margin-inline: calc(2px / var(--canvas-prompt-font-scale, 1));
  /* Keep the wrapper's baseline metrics at the same fixed geometry as the
   * chip itself. Inheriting the prompt font size here and then applying zoom
   * makes Chromium count the font-size change twice at the upper end of the
   * 8–36px range, which pushes the chip below the surrounding text. */
  font-size: 16px;
  line-height: 24px;
  /* The chip is exactly one prompt line tall after zoom. Bottom alignment
   * avoids inline-flex baseline descent from adding extra pixels to the line. */
  vertical-align: bottom;
}

.tiptap-editor-wrapper .ProseMirror:focus { outline: none; }
.tiptap-editor-wrapper .ProseMirror p { margin: 0 0 0.25em; }
.tiptap-editor-wrapper .ProseMirror h1 { font-size: 1.5em; font-weight: 700; margin: 0 0 0.5em; }
.tiptap-editor-wrapper .ProseMirror h2 { font-size: 1.25em; font-weight: 600; margin: 0 0 0.5em; }
.tiptap-editor-wrapper .ProseMirror h3 { font-size: 1.1em; font-weight: 600; margin: 0 0 0.5em; }
.tiptap-editor-wrapper .ProseMirror ul { padding-left: 1.5em; margin: 0 0 0.5em; list-style-type: disc; }
.tiptap-editor-wrapper .ProseMirror ol { padding-left: 1.5em; margin: 0 0 0.5em; list-style-type: decimal; }
.tiptap-editor-wrapper .ProseMirror li { margin: 0.15em 0; }
.tiptap-editor-wrapper .ProseMirror li p { margin: 0; }
.tiptap-editor-wrapper .ProseMirror hr { border: none; border-top: var(--divider-width) solid var(--border-muted, #f2f3f5); margin: 0.75em 0; }
.tiptap-editor-wrapper .ProseMirror strong { font-weight: 700; }
.tiptap-editor-wrapper .ProseMirror em { font-style: italic; }
.tiptap-editor-wrapper .ProseMirror code { background: var(--bg-surface-secondary, #f7f7f7); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace; }
.tiptap-editor-wrapper .ProseMirror pre { background: var(--bg-surface-secondary, #f7f7f7); padding: 0.75em 1em; border-radius: 6px; margin: 0.5em 0; overflow-x: auto; }
.tiptap-editor-wrapper .ProseMirror pre code { background: none; padding: 0; }
.tiptap-editor-wrapper .ProseMirror blockquote { border-left: 3px solid var(--border-muted, #f2f3f5); padding-left: 1em; margin: 0.5em 0; color: var(--fg-muted, #525252); }
.tiptap-editor-wrapper .ProseMirror a { color: var(--primary, #2563eb); text-decoration: underline; text-underline-offset: 2px; }
/* Compact preview (`.cv-skip`) is non-interactive — keep the link styling but
 * swallow all mouse interaction (no pointer cursor, no hover, no click). The
 * fullscreen editor (plain `.ProseMirror`) keeps the interactive cursor +
 * hover emphasis and routes clicks to the system browser. */
.tiptap-editor-wrapper .ProseMirror.cv-skip a { pointer-events: none; cursor: default; }
.tiptap-editor-wrapper .ProseMirror:not(.cv-skip) a { cursor: pointer; }
.tiptap-editor-wrapper .ProseMirror:not(.cv-skip) a:hover { text-decoration-thickness: 2px; }
.tiptap-editor-wrapper .ProseMirror .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--fg-disabled, #919191);
  pointer-events: none;
  height: 0;
}

.tiptap-editor-wrapper .ProseMirror::selection,
.tiptap-editor-wrapper .ProseMirror ::selection {
  background: color-mix(in srgb, var(--canvas-text-accent) 28%, transparent);
}
/* prosemirror-view adds `ProseMirror-hideselection` while a non-visible
   selection (table CellSelection / NodeSelection) is active and expects the
   native highlight to disappear. The accent ::selection rule above outranks
   tiptap's injected `.ProseMirror-hideselection *::selection` reset, which
   left a stale text highlight on the head cell stacked over the grey
   `selectedCell` overlays while dragging across table cells. */
.tiptap-editor-wrapper .ProseMirror.ProseMirror-hideselection::selection,
.tiptap-editor-wrapper .ProseMirror.ProseMirror-hideselection ::selection {
  background: transparent;
}

/* Keep the selected passage visibly highlighted while focus sits in the
   sibling chat/agent input — the native ::selection follows DOM focus, so a
   ProseMirror decoration re-paints the stored selection on blur
   (blur-selection-extension.ts). */
.tiptap-editor-wrapper .canvas-blur-selection {
  background: color-mix(in srgb, var(--canvas-text-accent) 28%, transparent);
  border-radius: 2px;
}

/* ---- Fullscreen find widget match highlights ---- */
.tiptap-editor-wrapper .canvas-find-match {
  background: color-mix(in srgb, var(--canvas-text-accent) 22%, transparent);
  border-radius: 2px;
}
.tiptap-editor-wrapper .canvas-find-match-active {
  background: color-mix(in srgb, var(--canvas-text-accent) 45%, transparent);
  outline: 1px solid var(--canvas-text-accent);
}

/* ---- Document annotation highlights ----
   `--canvas-text-accent-soft` / `--canvas-diff-*-bg` are declared per theme in the
   host's canvas-theme.css; the inline values here are the standalone-package
   fallback only, and use the same accent as the find-highlight rules above so
   a canvas mounted without the desktop theme stays self-consistent. */
.tiptap-editor-wrapper .canvas-annotation-mark {
  background: var(--canvas-text-accent-soft);
  border-radius: 2px;
  cursor: pointer;
}
.tiptap-editor-wrapper .canvas-annotation-mark-active {
  background: color-mix(in srgb, var(--canvas-text-accent) 34%, transparent);
  box-shadow: inset 0 -2px 0 var(--canvas-text-accent);
}

/* ---- Diff review (Cursor / VSCode-style agent-edit review) ----
   Red block = replaced/deleted original text rendered WITH its original
   formatting (background alone marks deletion — no strike-through, exactly
   like VSCode inline diffs); green run = the agent's new text (background
   only); chip bar = per-hunk 撤销 / 接受 on its own right-aligned row below
   the new content (Cursor's Undo / Keep). Colors ride on CSS vars with
   oklch fallbacks so themes can override without touching this file. */
.tiptap-editor-wrapper .canvas-diff-add {
  background: var(--canvas-diff-add-bg, oklch(0.72 0.19 145 / 0.18));
  border-radius: 2px;
}
/* Table hunks keep the old value inside the affected cell. This avoids
   hoisting every deleted cell above the table and preserves row/column
   context while still making old vs new distinguishable without color. */
.tiptap-editor-wrapper .canvas-diff-del-inline {
  display: inline;
  margin-inline-end: 0.3em;
  padding-inline: 0.2em;
  background: var(--canvas-diff-del-bg, oklch(0.63 0.21 25 / 0.12));
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  user-select: none;
}
.tiptap-editor-wrapper .canvas-diff-del {
  background: var(--canvas-diff-del-bg, oklch(0.63 0.21 25 / 0.12));
  border-radius: 4px;
  padding: 8px 10px;
  margin: 4px 0 8px;
  user-select: none;
  /* Defensive reset — the widget sits between top-level blocks, but if a
     mapped position ever lands it inside a heading/strong context the
     original typography must not leak into the whole block. */
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}
/* The deleted content keeps the document's own typography (the widget sits
   inside .ProseMirror, so heading/list/table rules above apply). Tighten
   trailing margins so the red block hugs its content. */
.tiptap-editor-wrapper .canvas-diff-del-content > :last-child {
  margin-bottom: 0;
}
.tiptap-editor-wrapper .canvas-diff-del-plain {
  white-space: pre-wrap;
}
/* Right-aligned control row below the hunk's new content. */
.tiptap-editor-wrapper .canvas-diff-controls-row {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 10px;
  user-select: none;
}
/* Joined chip bar, Cursor-style: quiet Undo + solid-green Keep. */
.tiptap-editor-wrapper .canvas-diff-controls {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid var(--canvas-node-border, #e0e0e0);
  background: var(--canvas-node-bg, #fff);
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.08);
  white-space: nowrap;
}
.tiptap-editor-wrapper .canvas-diff-controls-btn {
  font-size: 11px;
  line-height: 1;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--fg-muted, #666);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.tiptap-editor-wrapper .canvas-diff-controls-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.tiptap-editor-wrapper .canvas-diff-controls-btn-undo {
  border-right: 1px solid var(--canvas-node-border, #e0e0e0);
}
.tiptap-editor-wrapper .canvas-diff-controls-btn-undo:not(:disabled):hover {
  background: var(--bg-subtle, #f5f5f5);
  color: var(--fg-default, #141414);
}
.tiptap-editor-wrapper .canvas-diff-controls-btn-accept {
  background: var(--canvas-primary-btn-bg, #000000d9);
  color: var(--canvas-primary-btn-icon, #fff);
  font-weight: 500;
}
.tiptap-editor-wrapper .canvas-diff-controls-btn-accept:not(:disabled):hover {
  background: var(--canvas-primary-btn-bg-hover, #000000b3);
}

/* ---- Tiptap table styles ---- */
.tiptap-editor-wrapper .ProseMirror table { border-collapse: collapse; width: 100%; margin: 0.5em 0; table-layout: auto; }
/* Fullscreen editing keeps each wide Markdown table in its own horizontal
   viewport. The native bar stays hidden so macOS cannot auto-hide it; the
   shared OverlayScrollbar supplies a persistent thumb only while overflow
   exists. Preview tables do not receive this NodeView or these classes. */
.canvas-text-fullscreen-editor .canvas-markdown-table-scroll-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0.5em 0;
}
.canvas-text-fullscreen-editor .canvas-markdown-table-scroll-viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.canvas-text-fullscreen-editor .canvas-markdown-table-scroll-viewport > table {
  width: max-content;
  min-width: 100%;
  margin: 0;
}
.canvas-text-fullscreen-editor .canvas-markdown-table-scroll-viewport th,
.canvas-text-fullscreen-editor .canvas-markdown-table-scroll-viewport td {
  max-width: var(--canvas-markdown-table-cell-max-width, 200px);
  overflow-wrap: anywhere;
}
.tiptap-editor-wrapper .ProseMirror th,
.tiptap-editor-wrapper .ProseMirror td { border: 1px solid var(--border-muted, #e5e5e5); padding: 0.35em 0.6em; text-align: left; vertical-align: top; min-width: 60px; position: relative; }
.tiptap-editor-wrapper .ProseMirror th { font-weight: 600; background: var(--bg-surface-secondary, #f7f7f7); }
.tiptap-editor-wrapper .ProseMirror th p,
.tiptap-editor-wrapper .ProseMirror td p { margin: 0; }
/* Cross-cell selection (prosemirror-tables CellSelection): once a drag
   crosses a cell boundary the selection is upgraded to a CellSelection and
   the browser's native text highlight disappears — prosemirror-tables marks
   the covered cells with a `selectedCell` class and expects host CSS to
   paint the highlight. Without this rule the selection works (copy/merge
   still apply) but is completely invisible.
   Scoped to `.ProseMirror-focused` (prosemirror-view toggles it with DOM
   focus): while focus sits in the sibling chat/agent input the blur
   decoration (blur-selection-extension.ts) already repaints the selected
   cell text, and stacking the grey cell overlays on top of it reads as a
   double highlight. */
.tiptap-editor-wrapper .ProseMirror.ProseMirror-focused .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(from var(--primary, #2563eb) l c h / 0.12);
  pointer-events: none;
}

/* ---- Off-viewport paint skipping for read-only markdown previews ---- */
/* When the node card is outside the browser viewport (zoom/pan), skip
   layout/paint for the whole markdown subtree. `contain-intrinsic-size`
   reserves a placeholder height close to the actual card body so layout
   doesn't thrash when content is materialized — using a value larger than
   the card causes a transient scrollbar flash on first paint. */
.tiptap-editor-wrapper .ProseMirror.cv-skip {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
  /* prosemirror-view injects `white-space: break-spaces` on .ProseMirror,
     which makes the formatting newlines react-markdown emits between block
     elements (e.g. `</p>\n<p>`) render as visible blank lines. The preview
     is not an editable surface, so fall back to normal whitespace handling. */
  white-space: normal;
}
.tiptap-editor-wrapper .canvas-text-preview {
  font-size: 11px;
  line-height: 1.4;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview p {
  margin-bottom: 0.2em;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview h1 {
  font-size: 1.4em;
  margin-bottom: 0.45em;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview h2 {
  font-size: 1.18em;
  margin-bottom: 0.4em;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview h3 {
  font-size: 1.06em;
  margin-bottom: 0.35em;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview ul,
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview ol {
  margin-bottom: 0.4em;
  padding-left: 1.35em;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview li {
  margin: 0.1em 0;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview table {
  margin: 0.35em 0;
}
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview th,
.tiptap-editor-wrapper .ProseMirror.canvas-text-preview td {
  min-width: 56px;
  padding: 0.28em 0.5em;
}

/* ---- Plain text editor styles ---- */
.plain-text-editor {
  color: var(--fg-default, #141414);
  caret-color: var(--canvas-text-accent);
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 2;
}

.canvas-text-fullscreen-plain-editor {
  caret-color: var(--canvas-text-accent);
}

.canvas-text-fullscreen-plain-editor::selection {
  background: color-mix(in srgb, var(--canvas-text-accent) 28%, transparent);
}

/* ============================================================
   NodeResizer (8-direction) — corner handles + edge lines
   ------------------------------------------------------------
   The default ReactFlow handles are 5x5 squares + visible
   borders. Override to:
     - hide handles entirely unless a single node is selected
       (CanvasShell tags the wrapper with `data-selection-count`)
     - on the 4 corners: 12x12 invisible hit-area (cursor switches
       to nwse / nesw-resize) with a visible 8x8 square chrome
       drawn via ::after — Figma-style "white fill + foreground
       stroke" handle, sized to leave 2px of hit-area padding so
       the cursor still lands cleanly on the corner
     - on the 4 edges: 8px invisible hit-area (cursor switches to
       ns / ew-resize), no visible chrome — each node draws its
       own selection outline, and an extra stroke here would
       collide with it.
   Multi-select intentionally does NOT enable any of these — the
   user's intent there is "move the group", and per-node resize
   chrome / hit areas would conflict with that gesture.
   ============================================================ */

/* By default no chrome — selecting the node opts in. */
.react-flow__resize-control.handle {
  width: 0;
  height: 0;
  border: 0;
  background: transparent;
}

/* xyflow's NodeResizer renders each edge line with an inline
 * `border: 1px solid #3367d9` (blue). That inline style outranks a plain
 * rule, so zeroing border-width here is not enough — we must force the
 * color transparent with !important. Each node draws its own selection
 * outline; these lines are invisible hit-areas only (width set below).
 * Without this, the blue edge leaks out in MULTI-select, where the
 * `[data-selection-count="1"]` overrides below don't apply. */
.react-flow__resize-control.line {
  border-width: 0;
  border-style: solid;
  border-color: transparent !important;
}

/* Single-selection only: enlarge the corner hit area. Slightly
   larger than the 8px edge so the diagonal cursor wins on the
   corner overlap without being so big it covers node content. */
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.handle {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

/* Visible 8x8 square chrome at each corner, Figma-style. The handle
   div is `position: absolute` and centered on the corner point via
   ReactFlow's `translate(-50%, -50%)`, so the ::after pin uses the
   same translate trick to sit dead-center inside the 12x12 hit-area.
   Foreground stroke + background fill follows the project's
   "contrast over color" rule — same chrome in light & dark, just
   token-swapped. Square corners are mandatory (design-spec). */
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: var(--background);
  border: 1px solid var(--foreground);
  border-radius: 0;
  pointer-events: none;
}

/* Edge lines: thicken hit area to 8px so the cursor change is easy
   to land. ReactFlow's `transform: translate(-50%)` already centers
   the strip on the node edge, so widening keeps it visually centered.
   Single-selection only — see header comment. */
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.line {
  border-width: 0;
}
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.line.left,
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.line.right {
  width: 8px;
}
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.line.top,
[data-selection-count="1"] .react-flow__node.selected .react-flow__resize-control.line.bottom {
  height: 8px;
}

/* While a resize gesture is in flight (NodeResizeFrame toggles these
   classes on <body>), pin the cursor on every element so the pointer
   doesn't flicker when it slips off the small handle / line hit area
   into a child element with its own cursor rule. */
body.canvas-resizing-nwse,
body.canvas-resizing-nwse *,
body.canvas-resizing-nwse *::before,
body.canvas-resizing-nwse *::after {
  cursor: nwse-resize !important;
}
body.canvas-resizing-nesw,
body.canvas-resizing-nesw *,
body.canvas-resizing-nesw *::before,
body.canvas-resizing-nesw *::after {
  cursor: nesw-resize !important;
}
body.canvas-resizing-ns,
body.canvas-resizing-ns *,
body.canvas-resizing-ns *::before,
body.canvas-resizing-ns *::after {
  cursor: ns-resize !important;
}
body.canvas-resizing-ew,
body.canvas-resizing-ew *,
body.canvas-resizing-ew *::before,
body.canvas-resizing-ew *::after {
  cursor: ew-resize !important;
}

/* While a resize gesture is in flight, force iframes (HTML file-node
   preview is the only one in the canvas) to be transparent to mouse
   input. An iframe is its own browsing context and captures every
   pointer event before it reaches the outer window — once the cursor
   slips from the resize handle into the iframe, the NodeResizer's
   window-level pointermove / pointerup never fires and the gesture
   silently dies mid-drag. Mirrors the same pointer-events: none flip
   that html-viewer.tsx already does for the unselected and
   connection-in-progress states; this catches the third case the
   React-side gating can't see (resize is a body-class signal). */
body.canvas-resizing-nwse iframe,
body.canvas-resizing-nesw iframe,
body.canvas-resizing-ns iframe,
body.canvas-resizing-ew iframe {
  pointer-events: none !important;
}

/* ---- HTML viewer fullscreen container ---------------------------------
 * The HtmlViewer wraps its iframe in a [popover="manual"] div so it can
 * be promoted to the top layer via Popover API on demand. The browser's
 * UA stylesheet sets [popover] { display: none } by default, which would
 * hide the iframe in normal in-canvas mode — so we override `display`
 * back to `block` and lay it out fluidly. The `:popover-open` selector
 * fires when `showPopover()` has been called: the container then leaves
 * the canvas's transformed ancestor chain (top layer is rooted at the
 * viewport) and we pin it inset:0.
 *
 * Why Popover API and not requestFullscreen():
 *   - Top layer is stack-based, so plugin host dialogs (which we route
 *     into the same popover via Base UI's <DialogPortal container={…}>)
 *     stack above the iframe correctly. requestFullscreen() hides every
 *     non-descendant element, breaking that.
 *   - DOM doesn't move — the iframe element keeps its identity, so its
 *     contentWindow / postMessage channel / plugin handshake all survive.
 *
 * Browser support: Popover API ships in Chromium 114+ and the desktop
 * app runs Electron 43+ (Chromium 150+), so it's always available. */
.html-viewer-popover {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--background);
  /* Override UA default that would otherwise sit at the corner of the
     viewport when popover-closed (display: none means we never see it,
     but explicit inset reset future-proofs against UA changes). */
  inset: auto;
  overflow: hidden;
}

.html-viewer-popover:popover-open {
  position: fixed;
  /* Asymmetric gutter — top is wider (56px) to host the close button
     in its own band so it never overlaps popover content; the other
     three sides keep a tighter 32px frame for the modal feel. The
     close button sits at top:12px in the viewport, 32px tall, so it
     ends at 44px — leaves a 12px breath strip above the popover. */
  top: 3.5rem;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  width: auto;
  height: auto;
  background: var(--background);
  /* Subtle ring + shadow gives the popover a defined edge against the
     blurred backdrop. Matches the resting elevation of other modals. */
  box-shadow: 0 10px 40px oklch(0 0 0 / 0.35);
}

/* Launcher editors can occupy only the Canvas pane while the existing Chat
 * pane remains visible. The top layer preserves the live iframe and plugin
 * bridge; bounds are measured from the owning workspace viewport. */
.html-viewer-popover[data-presentation='canvas']:popover-open {
  box-sizing: border-box;
  top: var(--html-viewer-canvas-top);
  left: var(--html-viewer-canvas-left);
  width: var(--html-viewer-canvas-width);
  height: var(--html-viewer-canvas-height);
  right: auto;
  bottom: auto;
  padding-top: 2.5rem;
  box-shadow: none;
}

.html-viewer-popover[data-presentation='canvas']:popover-open > iframe {
  border-top: var(--divider-width) solid var(--border);
}

/* Top-layer backdrop. Popover elements ship with a `::backdrop` pseudo
 * just like `<dialog>`; styling it gives the same dimmed-canvas treatment
 * the MediaLightbox already does for image / video / audio previews.
 * The blur is a soft cue that the rest of the app is paused — not a
 * full blackout, so the user keeps spatial context. Backdrop blur is
 * acceptable here: while the popover is open the canvas is not being
 * panned/zoomed, so the compositing cost doesn't hit interactive frames. */
.html-viewer-popover:popover-open::backdrop {
  background: oklch(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.html-viewer-popover[data-presentation='canvas']:popover-open::backdrop {
  pointer-events: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Installed plugin cards need a host-owned delete target above the iframe.
 * An unselected iframe intentionally has pointer-events disabled so the first
 * click normally selects/opens it; keeping this control in the host layer lets
 * the top-right × delete the node immediately even in thumbnail state. */
.html-viewer-inline-remove {
  position: absolute;
  /* Match the plugin bootstrap's own top-right close footprint exactly. The
   * opaque host control covers that iframe button instead of rendering a
   * second × above/right of it, while remaining clickable when the iframe is
   * intentionally pointer-disabled in thumbnail mode. */
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.html-viewer-inline-remove:hover {
  background: transparent;
  color: var(--foreground);
}

.html-viewer-inline-remove:focus-visible {
  outline: 1px solid var(--ring);
  outline-offset: 1px;
}

/* Floating exit-fullscreen affordance painted on top of the iframe.
 * Hidden in non-popover mode and only the .html-viewer-popover:popover-open
 * descendant variant is shown — keeps the in-canvas card clean. */
.html-viewer-popover-actions {
  display: none;
}

.html-viewer-popover:popover-open > .html-viewer-popover-actions {
  display: flex;
  /* Anchor to the viewport, not the popover box — the button visually
     sits in the backdrop gutter outside the popover's top-right
     corner. `position: fixed` works even though the parent is in the
     top layer; the button is rendered in the same top-layer subtree,
     so it paints above the backdrop. Top:12 / right:12 lands the
     32×32 footprint at (top:12, bottom:44) and (right:12, left:viewport-44),
     entirely inside the 56px top gutter and clear of the popover box. */
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  gap: 0.25rem;
}

.html-viewer-popover-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  /* Square corners stay on-brand; the chrome is a thin "glass" pad —
     low-opacity black base + faint white hairline frames the icon
     against the dimmed backdrop without competing with surrounding
     UI. */
  border-radius: 0;
  background: oklch(0 0 0 / 0.1);
  color: oklch(1 0 0 / 0.85);
  border: 1px solid oklch(1 0 0 / 0.1);
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

.html-viewer-popover-action:hover {
  background: oklch(0 0 0 / 0.6);
  color: oklch(1 0 0 / 1);
  border-color: oklch(1 0 0 / 0.2);
}

.html-viewer-popover-action:focus-visible {
  outline: 1px solid oklch(1 0 0 / 0.6);
  outline-offset: 1px;
}

.html-viewer-popover[data-presentation='canvas']:popover-open > .html-viewer-popover-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}

.html-viewer-popover[data-presentation='canvas'] .html-viewer-popover-action {
  background: var(--popover);
  color: var(--popover-foreground);
  border-color: var(--border);
  box-shadow: var(--canvas-shadow-menu);
}

/* ComfyUI's inline template action stays just below the node surface in both
 * themes. Relative OKLCH lightness keeps the same subtle contrast in light
 * and dark mode without introducing a separate hard-coded color pair. */
.comfyui-template-action,
.comfyui-template-action:hover {
  background: oklch(from var(--card) calc(l - 0.03) c h);
  color: var(--foreground);
}

/* ---- File preview: speed-highlight-backed code viewer ----
 *
 * Speed-Highlight emits `<div><div class="shj-numbers">…</div><div>…</div></div>`
 * in multiline mode and uses CSS counters for the line numbers — the
 * library ships its own theme stylesheet, but it bakes a 10px border
 * radius, 30px padding, 18px Consolas, and a hardcoded white background
 * into `[class*=shj-lang-]`, all of which clash with the canvas design
 * tokens (rounded-none, text-xs, dark mode). We skip the upstream theme
 * and define just the bits we need: flex layout for the numbers + code
 * column, the line-number counter, and the token colour palette.
 *
 * Token palette is GitHub Light / Dark, applied via the `.dark` class
 * the rest of the canvas already uses. `contain: layout paint` keeps the
 * browser from style-recalc'ing the whole tree when an unrelated canvas
 * interaction (toolbar hover, node selection, ReactFlow transform churn)
 * tries to invalidate the subtree. We deliberately do NOT use
 * `content-visibility: auto` on the line-number divs — the spec is
 * ambiguous about whether `counter-increment` runs inside skipped
 * subtrees, and Chromium currently treats off-screen counters as
 * un-incremented, which breaks line numbering for files larger than the
 * viewport.
 */
.hilo-code-viewer {
  contain: layout paint;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}
.hilo-code-viewer > div {
  display: flex;
}
.hilo-code-viewer .shj-numbers {
  counter-reset: line;
  flex: 0 0 auto;
  padding-right: 12px;
  user-select: none;
}
.hilo-code-viewer .shj-numbers div::before {
  counter-increment: line;
  content: counter(line);
  display: block;
  text-align: right;
  color: oklch(from var(--muted-foreground) l c h / 0.7);
}
.hilo-code-viewer > div > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre;
  outline: none;
}

/* GitHub Light token palette (matches the previous shiki theme). */
.hilo-code-viewer .shj-syn-cmnt {
  color: #6e7781;
  font-style: italic;
}
.hilo-code-viewer .shj-syn-kwd,
.hilo-code-viewer .shj-syn-err,
.hilo-code-viewer .shj-syn-deleted {
  color: #cf222e;
}
.hilo-code-viewer .shj-syn-class {
  color: #953800;
}
.hilo-code-viewer .shj-syn-num,
.hilo-code-viewer .shj-syn-bool,
.hilo-code-viewer .shj-syn-var,
.hilo-code-viewer .shj-syn-type,
.hilo-code-viewer .shj-syn-oper,
.hilo-code-viewer .shj-syn-section {
  color: #0550ae;
}
.hilo-code-viewer .shj-syn-str,
.hilo-code-viewer .shj-syn-insert {
  color: #0a3069;
}
.hilo-code-viewer .shj-syn-esc {
  color: #0a3069;
  opacity: 0.7;
}
.hilo-code-viewer .shj-syn-func {
  color: #8250df;
}

/* GitHub Dark token palette. */
.dark .hilo-code-viewer .shj-syn-cmnt {
  color: #8b949e;
}
.dark .hilo-code-viewer .shj-syn-kwd,
.dark .hilo-code-viewer .shj-syn-err,
.dark .hilo-code-viewer .shj-syn-deleted {
  color: #ff7b72;
}
.dark .hilo-code-viewer .shj-syn-class {
  color: #ffa657;
}
.dark .hilo-code-viewer .shj-syn-num,
.dark .hilo-code-viewer .shj-syn-bool,
.dark .hilo-code-viewer .shj-syn-var,
.dark .hilo-code-viewer .shj-syn-type,
.dark .hilo-code-viewer .shj-syn-oper,
.dark .hilo-code-viewer .shj-syn-section {
  color: #79c0ff;
}
.dark .hilo-code-viewer .shj-syn-str,
.dark .hilo-code-viewer .shj-syn-insert {
  color: #a5d6ff;
}
.dark .hilo-code-viewer .shj-syn-esc {
  color: #a5d6ff;
  opacity: 0.7;
}
.dark .hilo-code-viewer .shj-syn-func {
  color: #d2a8ff;
}

/* ---- Empty canvas onboarding -------------------------------------------
 *
 * Compact foreground guidance for an empty Canvas. It intentionally has no
 * card or chip background. The parent Panel stays pointer-transparent so the
 * real canvas gestures continue to work underneath the visual guide.
 */
.react-flow__panel.canvas-onboarding-panel {
  top: 50% !important;
  left: 50% !important;
  width: min(640px, calc(100% - 48px));
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.canvas-onboarding-ui-layer,
.canvas-onboarding-ui-layer * {
  box-sizing: border-box;
}

.canvas-onboarding-ui-layer {
  width: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 0 24px;
  --canvas-onboarding-cursor-rays: var(--brand-accent);
  --canvas-onboarding-cursor-shell: var(--card);
  --canvas-onboarding-cursor-stroke: color-mix(in srgb, var(--foreground) 20%, transparent);
  --canvas-onboarding-cursor-shadow: color-mix(in srgb, var(--foreground) 16%, transparent);
  color: var(--foreground);
  font-family: var(--font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.dark .canvas-onboarding-ui-layer {
  --canvas-onboarding-cursor-rays: color-mix(in srgb, var(--brand-accent) 82%, var(--foreground));
  --canvas-onboarding-cursor-shell: var(--brand-accent-foreground);
  --canvas-onboarding-cursor-stroke: color-mix(in srgb, var(--brand-accent-foreground) 58%, transparent);
  --canvas-onboarding-cursor-shadow: rgb(0 0 0 / 55%);
}

.canvas-onboarding-primary-anchor {
  position: relative;
  width: max-content;
}

.canvas-onboarding-primary-line,
.canvas-onboarding-secondary-line {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  user-select: none;
}

.canvas-onboarding-primary-line {
  gap: 8px;
}

.canvas-onboarding-primary-action,
.canvas-onboarding-primary-result {
  color: var(--foreground);
  font-size: var(--text-title-16, 16px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.canvas-onboarding-primary-action {
  font-weight: 600;
}

.canvas-onboarding-primary-result {
  margin-inline-start: 8px;
  font-weight: 400;
}

.canvas-onboarding-cursor-icon,
.canvas-onboarding-mouse-icon {
  display: block;
  flex: 0 0 auto;
}

.canvas-onboarding-cursor-icon {
  position: relative;
  width: 32px;
  height: 32px;
  color: var(--canvas-onboarding-cursor-rays);
  filter: drop-shadow(0 2px 2px var(--canvas-onboarding-cursor-shadow));
  animation: canvas-onboarding-cursor-double-click 3.8s linear infinite;
  transform-origin: 50% 62%;
}

.canvas-onboarding-cursor-rays {
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: canvas-onboarding-cursor-rays 3.8s linear infinite;
}

.canvas-onboarding-cursor-rays path {
  stroke-width: 1.45;
  stroke-linejoin: round;
}

.canvas-onboarding-cursor-shell {
  fill: var(--canvas-onboarding-cursor-shell);
  stroke: var(--canvas-onboarding-cursor-stroke);
  stroke-width: 0.7;
}

.canvas-onboarding-cursor-accent {
  fill: var(--brand-accent);
}

.canvas-onboarding-secondary-line {
  position: absolute;
  top: calc(100% + 36px);
  left: 50%;
  gap: 13px;
  transform: translateX(-50%);
  color: var(--muted-foreground);
  font-size: var(--text-body-14, 14px);
  line-height: 1;
}

.canvas-onboarding-secondary-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.canvas-onboarding-space-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  border-radius: 8px;
  color: var(--muted-foreground);
  background: transparent;
  font-size: var(--text-body-14, 14px);
  line-height: 1;
}

.canvas-onboarding-mouse-icon {
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--muted-foreground) 83%, transparent);
}

.canvas-onboarding-mouse-wheel {
  stroke: var(--brand-accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: canvas-onboarding-wheel-stretch 2.6s ease-in-out infinite;
}

@keyframes canvas-onboarding-cursor-double-click {
  0%,
  18%,
  100% {
    transform: scale(1);
  }
  3%,
  11% {
    transform: scale(0.88);
  }
  6%,
  14% {
    transform: scale(1);
  }
}

@keyframes canvas-onboarding-cursor-rays {
  0%,
  1%,
  7%,
  8%,
  9%,
  15%,
  16%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
  3%,
  11% {
    opacity: 1;
    transform: scale(1);
  }
  5%,
  12% {
    opacity: 0.18;
    transform: scale(0.84);
  }
}

@keyframes canvas-onboarding-wheel-stretch {
  0%,
  100% {
    transform: scaleY(0.78);
  }
  18% {
    transform: scaleY(1);
  }
  36% {
    transform: scaleY(1.6);
  }
  53% {
    transform: scaleY(0.76);
  }
  70% {
    transform: scaleY(1.28);
  }
  86% {
    transform: scaleY(0.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-onboarding-ui-layer *,
  .canvas-onboarding-ui-layer *::before,
  .canvas-onboarding-ui-layer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.canvas-bottom-toast[data-state='open'] {
  animation: canvas-bottom-toast-enter 180ms ease-out both;
}

.canvas-bottom-toast[data-state='closed'] {
  animation: canvas-bottom-toast-exit 160ms ease-in both;
}

@keyframes canvas-bottom-toast-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes canvas-bottom-toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-bottom-toast {
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}


/* Prompt controls share the panel's nested corner treatment. */
.canvas-prompt-control {
  border-radius: 8px;
  transition: background-color 150ms, opacity 150ms, color 150ms;
}

.canvas-prompt-control:hover:enabled {
  background-color: var(--canvas-controls-hover);
}

/* Reference selection owns the next canvas click without opening a node editor. */
.is-selecting-upstream .canvas-node-shell,
.is-selecting-upstream .canvas-node-frame,
.is-selecting-upstream .react-flow__pane {
  cursor: crosshair;
}

.is-selecting-upstream [data-upstream-candidate='unavailable'] .canvas-node-shell {
  opacity: 0.4;
  cursor: not-allowed;
}
.is-selecting-upstream [data-upstream-candidate='unavailable'] .canvas-node-frame,
.is-selecting-upstream [data-upstream-candidate='current'] .canvas-node-shell,
.is-selecting-upstream [data-upstream-candidate='current'] .canvas-node-frame {
  cursor: not-allowed;
}
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root, :host {
      --chat-history-sweep-x: -280px;
    }

    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --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-space-x-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-contain-size: initial;
      --tw-contain-layout: initial;
      --tw-contain-paint: initial;
      --tw-contain-style: initial;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --question-shimmer-angle: 0deg;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter Variable", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-500: oklch(63.7% .237 25.331);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: calc(var(--radius) * .6);
    --radius-md: calc(var(--radius) * .8);
    --radius-xl: calc(var(--radius) * 1.4);
    --drop-shadow-sm: 0 1px 2px #00000026;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Inter Variable", sans-serif;
    --default-mono-font-family: var(--font-mono);
    --font-heading: "Outfit", sans-serif;
    --font-pixel: "Pixelify Sans", "Outfit", sans-serif;
    --text-caption-11: 11px;
    --text-caption-11--line-height: 16px;
    --text-body-12: 12px;
    --text-body-12--line-height: 18px;
    --text-body-13: 13px;
    --text-body-14: 14px;
    --text-body-14--line-height: 22px;
    --text-body-15: 15px;
    --text-body-15--line-height: 23px;
    --text-prose-h1: 1.43em;
    --text-prose-h2: 1.21em;
    --text-prose-h3: 1.07em;
    --text-prose-code: .93em;
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-muted-foreground: var(--muted-foreground);
    --color-border: var(--border);
    --color-ring: var(--ring);
    --color-project-assets-row-checkbox-bg: var(--project-assets-row-checkbox-bg);
    --color-project-assets-row-checkbox-border: var(--project-assets-row-checkbox-border);
    --shadow-soft-card: 0 0 0 1px #0000000f, 0 1px 2px #0000000a;
    --shadow-soft-popover: 0 0 0 1px #00000014, 0 4px 8px #0000000a,
    0 8px 16px #0000000a;
    --workflow-selected-shadow: 0 8px 24px -14px var(--foreground),
    0 2px 8px -4px var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --workflow-selected-shadow: 0 8px 24px -14px color-mix(in srgb, var(--foreground) 24%, transparent),
    0 2px 8px -4px color-mix(in srgb, var(--foreground) 14%, transparent);
    }
  }

  :root, :host {
    --workflow-selected-border: transparent;
    --border-soft: #0000000d;
    --border-strong: #0000001f;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, 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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-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"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  * {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  html {
    font-family: Inter Variable, sans-serif;
  }

  input, textarea, [contenteditable="true"], [contenteditable="plaintext-only"], .ProseMirror {
    caret-color: var(--brand-accent);
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), textarea):focus:not([aria-invalid="true"]) {
    outline: none;
    border-color: var(--foreground) !important;
    box-shadow: none !important;
  }

  :root[data-auto-hide-scrollbars], :root[data-auto-hide-scrollbars] * {
    scrollbar-color: transparent transparent !important;
  }

  :root[data-auto-hide-scrollbars][data-scroll-active], :root[data-auto-hide-scrollbars] [data-scroll-active] {
    scrollbar-color: var(--foreground) transparent !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-auto-hide-scrollbars][data-scroll-active], :root[data-auto-hide-scrollbars] [data-scroll-active] {
      scrollbar-color: color-mix(in srgb, var(--foreground) 20%, transparent) transparent !important;
    }
  }

  :root[data-auto-hide-scrollbars]:not([data-scroll-active])::-webkit-scrollbar-thumb {
    background-color: #0000 !important;
  }

  :root[data-auto-hide-scrollbars] :not([data-scroll-active])::-webkit-scrollbar-thumb {
    background-color: #0000 !important;
  }

  :root[data-auto-hide-scrollbars][data-scroll-active]::-webkit-scrollbar-thumb {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-auto-hide-scrollbars][data-scroll-active]::-webkit-scrollbar-thumb {
      background-color: color-mix(in srgb, var(--foreground) 20%, transparent) !important;
    }
  }

  :root[data-auto-hide-scrollbars] [data-scroll-active]::-webkit-scrollbar-thumb {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-auto-hide-scrollbars] [data-scroll-active]::-webkit-scrollbar-thumb {
      background-color: color-mix(in srgb, var(--foreground) 20%, transparent) !important;
    }
  }

  :root[data-auto-hide-scrollbars] [data-slot="scroll-area-scrollbar"] {
    opacity: 0;
    transition: opacity .15s;
  }

  :root[data-auto-hide-scrollbars] [data-slot="scroll-area"]:has( > [data-slot="scroll-area-viewport"][data-scroll-active]) > [data-slot="scroll-area-scrollbar"] {
    opacity: 1;
  }
}

@layer components;

@layer utilities {
  .\@container\/canvas-area {
    container: canvas-area / inline-size;
  }

  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .\@container\/composer {
    container: composer / inline-size;
  }

  .\@container\/empty-recommendations {
    container: empty-recommendations / inline-size;
  }

  .\@container\/mode-menu {
    container: mode-menu / inline-size;
  }

  .\@container\/recommendations {
    container: recommendations / inline-size;
  }

  .\@container\/turn-artifacts {
    container: turn-artifacts / inline-size;
  }

  .\@container\/workflow-detail {
    container: workflow-detail / inline-size;
  }

  .\!pointer-events-auto {
    pointer-events: auto !important;
  }

  .\!pointer-events-none {
    pointer-events: none !important;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .-inset-1 {
    inset: calc(var(--spacing) * -1);
  }

  .-inset-2 {
    inset: calc(var(--spacing) * -2);
  }

  .-inset-px {
    inset: -1px;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .-inset-x-0\.5 {
    inset-inline: calc(var(--spacing) * -.5);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-1\.5 {
    inset-inline: calc(var(--spacing) * 1.5);
  }

  .inset-x-2 {
    inset-inline: calc(var(--spacing) * 2);
  }

  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }

  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .inset-x-5 {
    inset-inline: calc(var(--spacing) * 5);
  }

  .inset-x-\[2px\] {
    inset-inline: 2px;
  }

  .inset-x-px {
    inset-inline: 1px;
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .inset-y-1 {
    inset-block: calc(var(--spacing) * 1);
  }

  .inset-y-1\.5 {
    inset-block: calc(var(--spacing) * 1.5);
  }

  .inset-y-3 {
    inset-block: calc(var(--spacing) * 3);
  }

  .inset-y-6 {
    inset-block: calc(var(--spacing) * 6);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .start-1 {
    inset-inline-start: calc(var(--spacing) * 1);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .\!top-\[15\%\] {
    top: 15% !important;
  }

  .-top-0\.5 {
    top: calc(var(--spacing) * -.5);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-7 {
    top: calc(var(--spacing) * -7);
  }

  .-top-10 {
    top: calc(var(--spacing) * -10);
  }

  .-top-12 {
    top: calc(var(--spacing) * -12);
  }

  .-top-\[2px\] {
    top: -2px;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-1\/3 {
    top: 33.3333%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-2\/3 {
    top: 66.6667%;
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-8 {
    top: calc(var(--spacing) * 8);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-\[6px\] {
    top: 6px;
  }

  .top-\[10px\] {
    top: 10px;
  }

  .top-\[40\%\] {
    top: 40%;
  }

  .top-\[calc\(--spacing\(1\.25\)\)\] {
    top: calc(calc(var(--spacing) * 1.25));
  }

  .top-\[calc\(40\%\+20px\)\] {
    top: calc(40% + 20px);
  }

  .top-\[calc\(100\%\+4px\)\] {
    top: calc(100% + 4px);
  }

  .top-\[calc\(100\%\+18px\)\] {
    top: calc(100% + 18px);
  }

  .top-full {
    top: 100%;
  }

  .top-px {
    top: 1px;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }

  .-right-\[2px\] {
    right: -2px;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-32 {
    right: calc(var(--spacing) * 32);
  }

  .right-\[2px\] {
    right: 2px;
  }

  .right-\[23px\] {
    right: 23px;
  }

  .right-\[calc\(--spacing\(1\.25\)\)\] {
    right: calc(calc(var(--spacing) * 1.25));
  }

  .right-\[calc\(100\%\+8px\)\] {
    right: calc(100% + 8px);
  }

  .right-auto {
    right: auto;
  }

  .right-full {
    right: 100%;
  }

  .right-px {
    right: 1px;
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .-bottom-1\.5 {
    bottom: calc(var(--spacing) * -1.5);
  }

  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .-bottom-\[2px\] {
    bottom: -2px;
  }

  .-bottom-\[5px\] {
    bottom: -5px;
  }

  .-bottom-px {
    bottom: -1px;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-0\.5 {
    bottom: calc(var(--spacing) * .5);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-3\.5 {
    bottom: calc(var(--spacing) * 3.5);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .bottom-\[2px\] {
    bottom: 2px;
  }

  .bottom-\[4px\] {
    bottom: 4px;
  }

  .bottom-\[10px\] {
    bottom: 10px;
  }

  .bottom-\[22px\] {
    bottom: 22px;
  }

  .bottom-\[75px\] {
    bottom: 75px;
  }

  .bottom-\[calc\(100\%\+1\.5rem\)\] {
    bottom: calc(100% + 1.5rem);
  }

  .bottom-\[calc\(100\%\+6px\)\] {
    bottom: calc(100% + 6px);
  }

  .bottom-\[calc\(100\%\+8px\)\] {
    bottom: calc(100% + 8px);
  }

  .bottom-full {
    bottom: 100%;
  }

  .-left-0\.5 {
    left: calc(var(--spacing) * -.5);
  }

  .-left-1 {
    left: calc(var(--spacing) * -1);
  }

  .-left-1\.5 {
    left: calc(var(--spacing) * -1.5);
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .-left-6 {
    left: calc(var(--spacing) * -6);
  }

  .-left-\[2px\] {
    left: -2px;
  }

  .-left-\[9999px\] {
    left: -9999px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-1\/3 {
    left: 33.3333%;
  }

  .left-1\/4 {
    left: 25%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .left-2\/3 {
    left: 66.6667%;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-6 {
    left: calc(var(--spacing) * 6);
  }

  .left-8 {
    left: calc(var(--spacing) * 8);
  }

  .left-\[3px\] {
    left: 3px;
  }

  .left-\[7px\] {
    left: 7px;
  }

  .left-\[10px\] {
    left: 10px;
  }

  .left-\[14px\] {
    left: 14px;
  }

  .left-\[calc\(100\%\+8px\)\] {
    left: calc(100% + 8px);
  }

  .left-full {
    left: 100%;
  }

  .isolate {
    isolation: isolate;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-2 {
    z-index: 2;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-9999 {
    z-index: 9999;
  }

  .z-10000 {
    z-index: 10000;
  }

  .z-10001 {
    z-index: 10001;
  }

  .z-10002 {
    z-index: 10002;
  }

  .z-10003 {
    z-index: 10003;
  }

  .z-10100 {
    z-index: 10100;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[3\] {
    z-index: 3;
  }

  .z-\[4\] {
    z-index: 4;
  }

  .z-\[5\] {
    z-index: 5;
  }

  .z-\[6\] {
    z-index: 6;
  }

  .z-\[8\] {
    z-index: 8;
  }

  .z-\[15\] {
    z-index: 15;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[69\] {
    z-index: 69;
  }

  .z-\[70\] {
    z-index: 70;
  }

  .z-\[79\] {
    z-index: 79;
  }

  .z-\[80\] {
    z-index: 80;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[101\] {
    z-index: 101;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .z-\[2000\] {
    z-index: 2000;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .z-\[10001\] {
    z-index: 10001;
  }

  .z-\[10002\] {
    z-index: 10002;
  }

  .z-\[10020\] {
    z-index: 10020;
  }

  .z-\[10030\] {
    z-index: 10030;
  }

  .z-\[10100\] {
    z-index: 10100;
  }

  .z-\[10110\] {
    z-index: 10110;
  }

  .z-\[10150\] {
    z-index: 10150;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-m-px {
    margin: -1px;
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-1 {
    margin: calc(var(--spacing) * 1);
  }

  .m-auto {
    margin: auto;
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }

  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }

  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .-mx-\[4\.5px\] {
    margin-inline: -4.5px;
  }

  .mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }

  .mx-10 {
    margin-inline: calc(var(--spacing) * 10);
  }

  .mx-\[2px\] {
    margin-inline: 2px;
  }

  .mx-\[5px\] {
    margin-inline: 5px;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mx-px {
    margin-inline: 1px;
  }

  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-auto {
    margin-block: auto;
  }

  .ms-0\.5 {
    margin-inline-start: calc(var(--spacing) * .5);
  }

  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -.5);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .-mt-10 {
    margin-top: calc(var(--spacing) * -10);
  }

  .-mt-\[5px\] {
    margin-top: -5px;
  }

  .-mt-\[6px\] {
    margin-top: -6px;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .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-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-11 {
    margin-top: calc(var(--spacing) * 11);
  }

  .mt-\[3px\] {
    margin-top: 3px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-px {
    margin-top: 1px;
  }

  .-mr-1 {
    margin-right: calc(var(--spacing) * -1);
  }

  .-mr-4 {
    margin-right: calc(var(--spacing) * -4);
  }

  .-mr-10 {
    margin-right: calc(var(--spacing) * -10);
  }

  .-mr-\[5px\] {
    margin-right: -5px;
  }

  .mr-0\.5 {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-9 {
    margin-right: calc(var(--spacing) * 9);
  }

  .mr-\[5px\] {
    margin-right: 5px;
  }

  .mr-\[70px\] {
    margin-right: 70px;
  }

  .mr-auto {
    margin-right: auto;
  }

  .mr-px {
    margin-right: 1px;
  }

  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }

  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }

  .-mb-5 {
    margin-bottom: calc(var(--spacing) * -5);
  }

  .-mb-\[5px\] {
    margin-bottom: -5px;
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-1\.5 {
    margin-left: calc(var(--spacing) * -1.5);
  }

  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }

  .-ml-3 {
    margin-left: calc(var(--spacing) * -3);
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }

  .-ml-7 {
    margin-left: calc(var(--spacing) * -7);
  }

  .-ml-\[3px\] {
    margin-left: -3px;
  }

  .-ml-\[5px\] {
    margin-left: -5px;
  }

  .-ml-px {
    margin-left: -1px;
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-14 {
    margin-left: calc(var(--spacing) * 14);
  }

  .ml-\[3px\] {
    margin-left: 3px;
  }

  .ml-\[9px\] {
    margin-left: 9px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .ml-px {
    margin-left: 1px;
  }

  .box-border {
    box-sizing: border-box;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-10 {
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\!flex {
    display: flex !important;
  }

  .\!grid {
    display: grid !important;
  }

  .\!hidden {
    display: none !important;
  }

  .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;
  }

  .inline-grid {
    display: inline-grid;
  }

  .table {
    display: table;
  }

  .table-caption {
    display: table-caption;
  }

  .table-cell {
    display: table-cell;
  }

  .table-row {
    display: table-row;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[16\/8\] {
    aspect-ratio: 16 / 8;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size);
  }

  .size-0 {
    width: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 0);
  }

  .size-0\.5 {
    width: calc(var(--spacing) * .5);
    height: calc(var(--spacing) * .5);
  }

  .size-1 {
    width: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 1);
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-15 {
    width: calc(var(--spacing) * 15);
    height: calc(var(--spacing) * 15);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
  }

  .size-40 {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
  }

  .size-60 {
    width: calc(var(--spacing) * 60);
    height: calc(var(--spacing) * 60);
  }

  .size-\[5px\] {
    width: 5px;
    height: 5px;
  }

  .size-\[6px\] {
    width: 6px;
    height: 6px;
  }

  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }

  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .size-\[22px\] {
    width: 22px;
    height: 22px;
  }

  .size-\[88px\] {
    width: 88px;
    height: 88px;
  }

  .size-\[90px\] {
    width: 90px;
    height: 90px;
  }

  .size-\[148px\] {
    width: 148px;
    height: 148px;
  }

  .size-\[var\(--btn-height-sm\)\] {
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
  }

  .size-auto {
    width: auto;
    height: auto;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .size-px {
    width: 1px;
    height: 1px;
  }

  .\!h-8 {
    height: calc(var(--spacing) * 8) !important;
  }

  .\!h-\[480px\] {
    height: 480px !important;
  }

  .h-\(--accordion-panel-height\) {
    height: var(--accordion-panel-height);
  }

  .h-\(--cell-size\) {
    height: var(--cell-size);
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-1\/3 {
    height: 33.3333%;
  }

  .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-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-10\! {
    height: calc(var(--spacing) * 10) !important;
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-13 {
    height: calc(var(--spacing) * 13);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-\[1\.5px\] {
    height: 1.5px;
  }

  .h-\[2\.5px\] {
    height: 2.5px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[10px\] {
    height: 10px;
  }

  .h-\[12px\] {
    height: 12px;
  }

  .h-\[13px\] {
    height: 13px;
  }

  .h-\[14px\] {
    height: 14px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[19px\] {
    height: 19px;
  }

  .h-\[21px\] {
    height: 21px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[22rem\] {
    height: 22rem;
  }

  .h-\[26px\] {
    height: 26px;
  }

  .h-\[30px\] {
    height: 30px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[35px\] {
    height: 35px;
  }

  .h-\[38px\] {
    height: 38px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[52px\] {
    height: 52px;
  }

  .h-\[56px\] {
    height: 56px;
  }

  .h-\[64\%\] {
    height: 64%;
  }

  .h-\[64px\] {
    height: 64px;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[84px\] {
    height: 84px;
  }

  .h-\[85vh\] {
    height: 85vh;
  }

  .h-\[88\%\] {
    height: 88%;
  }

  .h-\[88vh\] {
    height: 88vh;
  }

  .h-\[100dvh\] {
    height: 100dvh;
  }

  .h-\[140px\] {
    height: 140px;
  }

  .h-\[148px\] {
    height: 148px;
  }

  .h-\[200px\] {
    height: 200px;
  }

  .h-\[212px\] {
    height: 212px;
  }

  .h-\[320px\] {
    height: 320px;
  }

  .h-\[324px\] {
    height: 324px;
  }

  .h-\[340px\] {
    height: 340px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[464px\] {
    height: 464px;
  }

  .h-\[480px\] {
    height: 480px;
  }

  .h-\[calc\(100\%_-_3rem\)\] {
    height: calc(100% - 3rem);
  }

  .h-\[calc\(100vh-2rem\)\] {
    height: calc(100vh - 2rem);
  }

  .h-\[calc\(100vh-19rem\)\] {
    height: calc(100vh - 19rem);
  }

  .h-\[clamp\(58px\,32\%\,92px\)\] {
    height: clamp(58px, 32%, 92px);
  }

  .h-\[min\(55vh\,420px\)\] {
    height: min(55vh, 420px);
  }

  .h-\[min\(68vh\,620px\)\] {
    height: min(68vh, 620px);
  }

  .h-\[min\(320px\,calc\(100vh-96px\)\)\] {
    height: min(320px, 100vh - 96px);
  }

  .h-\[min\(480px\,calc\(100vh-10rem\)\)\] {
    height: min(480px, 100vh - 10rem);
  }

  .h-\[min\(520px\,calc\(100\%-72px\)\)\] {
    height: min(520px, 100% - 72px);
  }

  .h-\[min\(540px\,calc\(100vh-4rem\)\)\] {
    height: min(540px, 100vh - 4rem);
  }

  .h-\[min\(600px\,calc\(100vh-4rem\)\)\] {
    height: min(600px, 100vh - 4rem);
  }

  .h-\[min\(620px\,80vh\)\] {
    height: min(620px, 80vh);
  }

  .h-\[min\(760px\,86vh\)\] {
    height: min(760px, 86vh);
  }

  .h-\[min\(760px\,calc\(100dvh-2rem\)\)\] {
    height: min(760px, 100dvh - 2rem);
  }

  .h-\[min\(820px\,calc\(100vh-2rem\)\)\] {
    height: min(820px, 100vh - 2rem);
  }

  .h-\[var\(--btn-height-sm\)\] {
    height: var(--btn-height-sm);
  }

  .h-\[var\(--home-scene-tag-height\)\] {
    height: var(--home-scene-tag-height);
  }

  .h-\[var\(--workspace-chat-composer-default-height\)\] {
    height: var(--workspace-chat-composer-default-height);
  }

  .h-auto {
    height: auto;
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-\(--available-height\) {
    max-height: var(--available-height);
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-44 {
    max-height: calc(var(--spacing) * 44);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-52 {
    max-height: calc(var(--spacing) * 52);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[4\.5rem\] {
    max-height: 4.5rem;
  }

  .max-h-\[12rem\] {
    max-height: 12rem;
  }

  .max-h-\[40vh\] {
    max-height: 40vh;
  }

  .max-h-\[50vh\] {
    max-height: 50vh;
  }

  .max-h-\[56vh\] {
    max-height: 56vh;
  }

  .max-h-\[58vh\] {
    max-height: 58vh;
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[82vh\] {
    max-height: 82vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[120px\] {
    max-height: 120px;
  }

  .max-h-\[176px\] {
    max-height: 176px;
  }

  .max-h-\[200px\] {
    max-height: 200px;
  }

  .max-h-\[320px\] {
    max-height: 320px;
  }

  .max-h-\[328px\] {
    max-height: 328px;
  }

  .max-h-\[360px\] {
    max-height: 360px;
  }

  .max-h-\[400px\] {
    max-height: 400px;
  }

  .max-h-\[480px\] {
    max-height: 480px;
  }

  .max-h-\[500px\] {
    max-height: 500px;
  }

  .max-h-\[700px\] {
    max-height: 700px;
  }

  .max-h-\[calc\(3\*1\.625em\)\] {
    max-height: 4.875em;
  }

  .max-h-\[calc\(60vh-8rem\)\] {
    max-height: calc(60vh - 8rem);
  }

  .max-h-\[calc\(80vh-5\.5rem\)\] {
    max-height: calc(80vh - 5.5rem);
  }

  .max-h-\[calc\(100dvh-2rem\)\] {
    max-height: calc(100dvh - 2rem);
  }

  .max-h-\[calc\(100dvh-3rem\)\] {
    max-height: calc(100dvh - 3rem);
  }

  .max-h-\[calc\(100dvh-4rem\)\] {
    max-height: calc(100dvh - 4rem);
  }

  .max-h-\[calc\(100vh-2rem\)\] {
    max-height: calc(100vh - 2rem);
  }

  .max-h-\[calc\(100vh-3rem\)\] {
    max-height: calc(100vh - 3rem);
  }

  .max-h-\[calc\(100vh-4rem\)\] {
    max-height: calc(100vh - 4rem);
  }

  .max-h-\[calc\(100vh-8rem\)\] {
    max-height: calc(100vh - 8rem);
  }

  .max-h-\[calc\(100vh-48px\)\] {
    max-height: calc(100vh - 48px);
  }

  .max-h-\[calc\(min\(640px\,72vh\)-9rem\)\] {
    max-height: calc(min(640px, 72vh) - 9rem);
  }

  .max-h-\[min\(9rem\,calc\(24vh-1\.25rem-2px\)\)\] {
    max-height: min(9rem, 24vh - 1.25rem - 2px);
  }

  .max-h-\[min\(20rem\,var\(--available-height\,20rem\)\)\] {
    max-height: min(20rem, var(--available-height, 20rem));
  }

  .max-h-\[min\(32rem\,var\(--available-height\,32rem\)\)\] {
    max-height: min(32rem, var(--available-height, 32rem));
  }

  .max-h-\[min\(32rem\,var\(--user-menu-available-height\)\)\] {
    max-height: min(32rem, var(--user-menu-available-height));
  }

  .max-h-\[min\(36vh\,18rem\)\] {
    max-height: min(36vh, 18rem);
  }

  .max-h-\[min\(42rem\,calc\(var\(--available-height\,42rem\)-0\.75rem\)\)\] {
    max-height: min(42rem, calc(var(--available-height, 42rem) - .75rem));
  }

  .max-h-\[min\(55vh\,32rem\)\] {
    max-height: min(55vh, 32rem);
  }

  .max-h-\[min\(70vh\,640px\)\] {
    max-height: min(70vh, 640px);
  }

  .max-h-\[min\(80vh\,720px\)\] {
    max-height: min(80vh, 720px);
  }

  .max-h-\[min\(480px\,60vh\)\] {
    max-height: min(480px, 60vh);
  }

  .max-h-\[min\(520px\,calc\(100vh-24px\)\)\] {
    max-height: min(520px, 100vh - 24px);
  }

  .max-h-\[min\(640px\,72vh\)\] {
    max-height: min(640px, 72vh);
  }

  .max-h-\[min\(760px\,86dvh\)\] {
    max-height: min(760px, 86dvh);
  }

  .max-h-\[min\(860px\,88dvh\)\] {
    max-height: min(860px, 88dvh);
  }

  .max-h-full {
    max-height: 100%;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-1 {
    min-height: calc(var(--spacing) * 1);
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }

  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-44 {
    min-height: calc(var(--spacing) * 44);
  }

  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }

  .min-h-52 {
    min-height: calc(var(--spacing) * 52);
  }

  .min-h-72 {
    min-height: calc(var(--spacing) * 72);
  }

  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }

  .min-h-96 {
    min-height: calc(var(--spacing) * 96);
  }

  .min-h-\[3rem\] {
    min-height: 3rem;
  }

  .min-h-\[30rem\] {
    min-height: 30rem;
  }

  .min-h-\[32rem\] {
    min-height: 32rem;
  }

  .min-h-\[35px\] {
    min-height: 35px;
  }

  .min-h-\[35rem\] {
    min-height: 35rem;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[52px\] {
    min-height: 52px;
  }

  .min-h-\[68px\] {
    min-height: 68px;
  }

  .min-h-\[76px\] {
    min-height: 76px;
  }

  .min-h-\[84px\] {
    min-height: 84px;
  }

  .min-h-\[88px\] {
    min-height: 88px;
  }

  .min-h-\[108px\] {
    min-height: 108px;
  }

  .min-h-\[110px\] {
    min-height: 110px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[128px\] {
    min-height: 128px;
  }

  .min-h-\[160px\] {
    min-height: 160px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[216px\] {
    min-height: 216px;
  }

  .min-h-\[260px\] {
    min-height: 260px;
  }

  .min-h-\[280px\] {
    min-height: 280px;
  }

  .min-h-\[460px\] {
    min-height: 460px;
  }

  .min-h-\[calc\(2lh\+0\.75rem\+var\(--divider-width\)\*2\)\] {
    min-height: calc(2lh + .75rem + var(--divider-width) * 2);
  }

  .min-h-\[calc\(min\(620px\,80vh\)-5\.5rem\)\] {
    min-height: calc(min(620px, 80vh) - 5.5rem);
  }

  .min-h-\[var\(--global-search-dialog-min-height\)\] {
    min-height: var(--global-search-dialog-min-height);
  }

  .min-h-\[var\(--input-card-height\)\] {
    min-height: var(--input-card-height);
  }

  .min-h-\[var\(--workspace-chat-composer-default-height\)\] {
    min-height: var(--workspace-chat-composer-default-height);
  }

  .min-h-full {
    min-height: 100%;
  }

  .\!w-8 {
    width: calc(var(--spacing) * 8) !important;
  }

  .\!w-\[640px\] {
    width: 640px !important;
  }

  .\!w-\[760px\] {
    width: 760px !important;
  }

  .w-\(--anchor-width\) {
    width: var(--anchor-width);
  }

  .w-\(--cell-size\) {
    width: var(--cell-size);
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-1\/5 {
    width: 20%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-2\/5 {
    width: 40%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-3\/5 {
    width: 60%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\/6 {
    width: 83.3333%;
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-30 {
    width: calc(var(--spacing) * 30);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-60 {
    width: calc(var(--spacing) * 60);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-88 {
    width: calc(var(--spacing) * 88);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[2px\] {
    width: 2px;
  }

  .w-\[3px\] {
    width: 3px;
  }

  .w-\[4px\] {
    width: 4px;
  }

  .w-\[6px\] {
    width: 6px;
  }

  .w-\[9px\] {
    width: 9px;
  }

  .w-\[12px\] {
    width: 12px;
  }

  .w-\[13px\] {
    width: 13px;
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[19rem\] {
    width: 19rem;
  }

  .w-\[26px\] {
    width: 26px;
  }

  .w-\[30px\] {
    width: 30px;
  }

  .w-\[46px\] {
    width: 46px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[60px\] {
    width: 60px;
  }

  .w-\[66px\] {
    width: 66px;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[78px\] {
    width: 78px;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[90px\] {
    width: 90px;
  }

  .w-\[92dvw\] {
    width: 92dvw;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110px\] {
    width: 110px;
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[126px\] {
    width: 126px;
  }

  .w-\[140px\] {
    width: 140px;
  }

  .w-\[148px\] {
    width: 148px;
  }

  .w-\[150px\] {
    width: 150px;
  }

  .w-\[170px\] {
    width: 170px;
  }

  .w-\[180px\] {
    width: 180px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[208px\] {
    width: 208px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[238px\] {
    width: 238px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[254px\] {
    width: 254px;
  }

  .w-\[260px\] {
    width: 260px;
  }

  .w-\[278px\] {
    width: 278px;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[288px\] {
    width: 288px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[328px\] {
    width: 328px;
  }

  .w-\[336px\] {
    width: 336px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-\[348px\] {
    width: 348px;
  }

  .w-\[360px\] {
    width: 360px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[420px\] {
    width: 420px;
  }

  .w-\[460px\] {
    width: 460px;
  }

  .w-\[480px\] {
    width: 480px;
  }

  .w-\[520px\] {
    width: 520px;
  }

  .w-\[620px\] {
    width: 620px;
  }

  .w-\[680px\] {
    width: 680px;
  }

  .w-\[760px\] {
    width: 760px;
  }

  .w-\[calc\(100\%\+0\.5rem\)\] {
    width: calc(100% + .5rem);
  }

  .w-\[calc\(100\%\+1rem\)\] {
    width: calc(100% + 1rem);
  }

  .w-\[calc\(100\%-1rem\)\] {
    width: calc(100% - 1rem);
  }

  .w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem);
  }

  .w-\[calc\(100\%_-_1rem\)\] {
    width: calc(100% - 1rem);
  }

  .w-\[calc\(100vw-2rem\)\] {
    width: calc(100vw - 2rem);
  }

  .w-\[min\(256px\,calc\(100\%-2rem\)\)\] {
    width: min(256px, 100% - 2rem);
  }

  .w-\[min\(288px\,calc\(100vw-24px\)\)\] {
    width: min(288px, 100vw - 24px);
  }

  .w-\[min\(300px\,calc\(100cqw-2\.5rem\)\)\] {
    width: min(300px, 100cqw - 2.5rem);
  }

  .w-\[min\(360px\,calc\(100vw-24px\)\)\] {
    width: min(360px, 100vw - 24px);
  }

  .w-\[min\(480px\,80vw\)\] {
    width: min(480px, 80vw);
  }

  .w-\[min\(680px\,calc\(100vw-24px\)\)\] {
    width: min(680px, 100vw - 24px);
  }

  .w-\[min\(960px\,calc\(100vw-2rem\)\)\] {
    width: min(960px, 100vw - 2rem);
  }

  .w-\[var\(--brutalist-border-width\)\] {
    width: var(--brutalist-border-width);
  }

  .w-\[var\(--home-input-toolbar-divider-width\)\] {
    width: var(--home-input-toolbar-divider-width);
  }

  .w-\[var\(--sidebar-width\)\] {
    width: var(--sidebar-width);
  }

  .w-auto {
    width: auto;
  }

  .w-dvw {
    width: 100dvw;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .\!max-w-\[26rem\] {
    max-width: 26rem !important;
  }

  .\!max-w-\[640px\] {
    max-width: 640px !important;
  }

  .\!max-w-\[760px\] {
    max-width: 760px !important;
  }

  .\!max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem) !important;
  }

  .max-w-0 {
    max-width: calc(var(--spacing) * 0);
  }

  .max-w-1\/2 {
    max-width: 50%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3\/4 {
    max-width: 75%;
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7 {
    max-width: calc(var(--spacing) * 7);
  }

  .max-w-16 {
    max-width: calc(var(--spacing) * 16);
  }

  .max-w-20 {
    max-width: calc(var(--spacing) * 20);
  }

  .max-w-24 {
    max-width: calc(var(--spacing) * 24);
  }

  .max-w-28 {
    max-width: calc(var(--spacing) * 28);
  }

  .max-w-36 {
    max-width: calc(var(--spacing) * 36);
  }

  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }

  .max-w-44 {
    max-width: calc(var(--spacing) * 44);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }

  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }

  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }

  .max-w-\[16rem\] {
    max-width: 16rem;
  }

  .max-w-\[18rem\] {
    max-width: 18rem;
  }

  .max-w-\[40\%\] {
    max-width: 40%;
  }

  .max-w-\[40px\] {
    max-width: 40px;
  }

  .max-w-\[40vw\] {
    max-width: 40vw;
  }

  .max-w-\[55\%\] {
    max-width: 55%;
  }

  .max-w-\[60vw\] {
    max-width: 60vw;
  }

  .max-w-\[61\.5rem\] {
    max-width: 61.5rem;
  }

  .max-w-\[72px\] {
    max-width: 72px;
  }

  .max-w-\[80\%\] {
    max-width: 80%;
  }

  .max-w-\[80vw\] {
    max-width: 80vw;
  }

  .max-w-\[82px\] {
    max-width: 82px;
  }

  .max-w-\[86vw\] {
    max-width: 86vw;
  }

  .max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-w-\[92px\] {
    max-width: 92px;
  }

  .max-w-\[92vw\] {
    max-width: 92vw;
  }

  .max-w-\[112px\] {
    max-width: 112px;
  }

  .max-w-\[120px\] {
    max-width: 120px;
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[160px\] {
    max-width: 160px;
  }

  .max-w-\[170px\] {
    max-width: 170px;
  }

  .max-w-\[180px\] {
    max-width: 180px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[208px\] {
    max-width: 208px;
  }

  .max-w-\[220px\] {
    max-width: 220px;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[256px\] {
    max-width: 256px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[264px\] {
    max-width: 264px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[360px\] {
    max-width: 360px;
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[520px\] {
    max-width: 520px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[720px\] {
    max-width: 720px;
  }

  .max-w-\[760px\] {
    max-width: 760px;
  }

  .max-w-\[860px\] {
    max-width: 860px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[960px\] {
    max-width: 960px;
  }

  .max-w-\[1120px\] {
    max-width: 1120px;
  }

  .max-w-\[1200px\] {
    max-width: 1200px;
  }

  .max-w-\[calc\(100\%-1rem\)\] {
    max-width: calc(100% - 1rem);
  }

  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem);
  }

  .max-w-\[calc\(100\%-40px\)\] {
    max-width: calc(100% - 40px);
  }

  .max-w-\[calc\(100\%-64px\)\] {
    max-width: calc(100% - 64px);
  }

  .max-w-\[calc\(100\%_-_5rem\)\] {
    max-width: calc(100% - 5rem);
  }

  .max-w-\[calc\(100\%_-_40px\)\] {
    max-width: calc(100% - 40px);
  }

  .max-w-\[calc\(100vw-1rem\)\] {
    max-width: calc(100vw - 1rem);
  }

  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }

  .max-w-\[calc\(100vw-4rem\)\] {
    max-width: calc(100vw - 4rem);
  }

  .max-w-\[calc\(100vw-8rem\)\] {
    max-width: calc(100vw - 8rem);
  }

  .max-w-\[calc\(100vw-16px\)\] {
    max-width: calc(100vw - 16px);
  }

  .max-w-\[calc\(100vw-24px\)\] {
    max-width: calc(100vw - 24px);
  }

  .max-w-\[min\(310px\,calc\(100vw-105px\)\)\] {
    max-width: min(310px, 100vw - 105px);
  }

  .max-w-\[var\(--home-primary-stack-width\)\] {
    max-width: var(--home-primary-stack-width);
  }

  .max-w-\[此值\] {
    max-width: 此值;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-none\! {
    max-width: none !important;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .\!min-w-6 {
    min-width: calc(var(--spacing) * 6) !important;
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-3 {
    min-width: calc(var(--spacing) * 3);
  }

  .min-w-3\.5 {
    min-width: calc(var(--spacing) * 3.5);
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }

  .min-w-7 {
    min-width: calc(var(--spacing) * 7);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-12 {
    min-width: calc(var(--spacing) * 12);
  }

  .min-w-14 {
    min-width: calc(var(--spacing) * 14);
  }

  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }

  .min-w-18 {
    min-width: calc(var(--spacing) * 18);
  }

  .min-w-20 {
    min-width: calc(var(--spacing) * 20);
  }

  .min-w-22 {
    min-width: calc(var(--spacing) * 22);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-26 {
    min-width: calc(var(--spacing) * 26);
  }

  .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-64 {
    min-width: calc(var(--spacing) * 64);
  }

  .min-w-\[2\.5rem\] {
    min-width: 2.5rem;
  }

  .min-w-\[3rem\] {
    min-width: 3rem;
  }

  .min-w-\[6rem\] {
    min-width: 6rem;
  }

  .min-w-\[7rem\] {
    min-width: 7rem;
  }

  .min-w-\[8\.5rem\] {
    min-width: 8.5rem;
  }

  .min-w-\[10rem\] {
    min-width: 10rem;
  }

  .min-w-\[28rem\] {
    min-width: 28rem;
  }

  .min-w-\[32rem\] {
    min-width: 32rem;
  }

  .min-w-\[34px\] {
    min-width: 34px;
  }

  .min-w-\[36rem\] {
    min-width: 36rem;
  }

  .min-w-\[40rem\] {
    min-width: 40rem;
  }

  .min-w-\[42px\] {
    min-width: 42px;
  }

  .min-w-\[42rem\] {
    min-width: 42rem;
  }

  .min-w-\[70px\] {
    min-width: 70px;
  }

  .min-w-\[72px\] {
    min-width: 72px;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[176px\] {
    min-width: 176px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[208px\] {
    min-width: 208px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[1320px\] {
    min-width: 1320px;
  }

  .min-w-\[1520px\] {
    min-width: 1520px;
  }

  .min-w-\[1850px\] {
    min-width: 1850px;
  }

  .min-w-\[var\(--home-scene-tag-min-width\)\] {
    min-width: var(--home-scene-tag-min-width);
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-max {
    min-width: max-content;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[1_0_var\(--home-scene-tag-min-width\)\] {
    flex: 1 0 var(--home-scene-tag-min-width);
  }

  .flex-\[1_1_0\%\] {
    flex: 1;
  }

  .flex-initial {
    flex: 0 auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .shrink-\[999\] {
    flex-shrink: 999;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-0 {
    flex-basis: calc(var(--spacing) * 0);
  }

  .basis-\[220px\] {
    flex-basis: 220px;
  }

  .basis-auto {
    flex-basis: auto;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--transform-origin\) {
    transform-origin: var(--transform-origin);
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-bottom-left {
    transform-origin: 0 100%;
  }

  .origin-bottom-right {
    transform-origin: 100% 100%;
  }

  .origin-center {
    transform-origin: center;
  }

  .origin-right {
    transform-origin: 100%;
  }

  .origin-top {
    transform-origin: top;
  }

  .origin-top-left {
    transform-origin: 0 0;
  }

  .origin-top-right {
    transform-origin: 100% 0;
  }

  .-translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-20 {
    --tw-translate-x: calc(var(--spacing) * 20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[2px\] {
    --tw-translate-x: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[18px\] {
    --tw-translate-x: 18px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\!translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0) !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .-translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -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);
  }

  .-translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * -3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-px {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[calc\(100\%\+80px\)\] {
    --tw-translate-y: calc(100% + 80px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-px {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-75 {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-80 {
    --tw-scale-x: 80%;
    --tw-scale-y: 80%;
    --tw-scale-z: 80%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-\[0\.84\] {
    scale: .84;
  }

  .scale-\[0\.625\] {
    scale: .625;
  }

  .scale-\[1\.2\] {
    scale: 1.2;
  }

  .scale-\[1\.04\] {
    scale: 1.04;
  }

  .scale-\[1\.15\] {
    scale: 1.15;
  }

  .scale-\[1\.125\] {
    scale: 1.125;
  }

  .scale-\[1\.331\] {
    scale: 1.331;
  }

  .-rotate-3 {
    rotate: -3deg;
  }

  .-rotate-6 {
    rotate: -6deg;
  }

  .-rotate-12 {
    rotate: -12deg;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-0 {
    rotate: 0deg;
  }

  .rotate-2 {
    rotate: 2deg;
  }

  .rotate-6 {
    rotate: 6deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[8deg\] {
    rotate: 8deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[bottom-anchor-in_150ms_ease-out\] {
    animation: .15s ease-out bottom-anchor-in;
  }

  .animate-\[canvas-menu-in_100ms_ease-out\] {
    animation: .1s ease-out canvas-menu-in;
  }

  .animate-\[canvas-spin_0\.8s_linear_infinite\] {
    animation: .8s linear infinite canvas-spin;
  }

  .animate-\[crop-panel-in_0\.2s_ease-out\] {
    animation: .2s ease-out crop-panel-in;
  }

  .animate-\[i2v-popover-in_0\.15s_ease-out\] {
    animation: .15s ease-out i2v-popover-in;
  }

  .animate-\[lightbox-fade-in_0\.15s_ease-out\] {
    animation: .15s ease-out lightbox-fade-in;
  }

  .animate-\[toolbar-fade-in_0\.12s_ease-out\] {
    animation: .12s ease-out toolbar-fade-in;
  }

  .animate-\[toolbar-fade-in_0\.15s_ease-out\] {
    animation: .15s ease-out toolbar-fade-in;
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-none\! {
    animation: none !important;
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-auto {
    cursor: auto;
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-e-resize {
    cursor: e-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-n-resize {
    cursor: n-resize;
  }

  .cursor-ne-resize {
    cursor: ne-resize;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-nw-resize {
    cursor: nw-resize;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-row-resize {
    cursor: row-resize;
  }

  .cursor-s-resize {
    cursor: s-resize;
  }

  .cursor-se-resize {
    cursor: se-resize;
  }

  .cursor-sw-resize {
    cursor: sw-resize;
  }

  .cursor-text {
    cursor: text;
  }

  .cursor-w-resize {
    cursor: w-resize;
  }

  .cursor-wait {
    cursor: wait;
  }

  .cursor-zoom-in {
    cursor: zoom-in;
  }

  .cursor-zoom-out {
    cursor: zoom-out;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .scroll-my-1 {
    scroll-margin-block: calc(var(--spacing) * 1);
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .\[appearance\:textfield\] {
    appearance: textfield;
  }

  .appearance-none {
    appearance: none;
  }

  .columns-2 {
    columns: 2;
  }

  .auto-rows-\[60px\] {
    grid-auto-rows: 60px;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .\!grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid-cols-\[1\.5rem_minmax\(0\,1fr\)\] {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .grid-cols-\[2\.5rem_minmax\(0\,1fr\)\] {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .grid-cols-\[5rem_minmax\(0\,1fr\)\] {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .grid-cols-\[7rem_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
  }

  .grid-cols-\[28px_minmax\(0\,1fr\)_24px\] {
    grid-template-columns: 28px minmax(0, 1fr) 24px;
  }

  .grid-cols-\[28px_minmax\(150px\,1\.25fr\)_minmax\(130px\,1fr\)_minmax\(190px\,\.8fr\)_minmax\(100px\,\.8fr\)_minmax\(145px\,1\.1fr\)_minmax\(128px\,1fr\)_minmax\(100px\,\.8fr\)_minmax\(120px\,1fr\)_minmax\(85px\,\.7fr\)_minmax\(460px\,2fr\)\] {
    grid-template-columns: 28px minmax(150px, 1.25fr) minmax(130px, 1fr) minmax(190px, .8fr) minmax(100px, .8fr) minmax(145px, 1.1fr) minmax(128px, 1fr) minmax(100px, .8fr) minmax(120px, 1fr) minmax(85px, .7fr) minmax(460px, 2fr);
  }

  .grid-cols-\[90px_90px_90px\] {
    grid-template-columns: 90px 90px 90px;
  }

  .grid-cols-\[96px_minmax\(0\,1fr\)\] {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .grid-cols-\[120px_minmax\(0\,1fr\)\] {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .grid-cols-\[260px_minmax\(480px\,760px\)\] {
    grid-template-columns: 260px minmax(480px, 760px);
  }

  .grid-cols-\[320px_1fr\] {
    grid-template-columns: 320px 1fr;
  }

  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .grid-cols-\[auto_auto_minmax\(180px\,0\.8fr\)_minmax\(220px\,0\.85fr\)_100px_120px_100px_minmax\(320px\,1\.35fr\)_100px\] {
    grid-template-columns: auto auto minmax(180px, .8fr) minmax(220px, .85fr) 100px 120px 100px minmax(320px, 1.35fr) 100px;
  }

  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(0\,1\.5fr\)_minmax\(8rem\,1fr\)_minmax\(5rem\,0\.8fr\)\] {
    grid-template-columns: minmax(0, 1.5fr) minmax(8rem, 1fr) minmax(5rem, .8fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)_300px\] {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .grid-cols-\[minmax\(0\,1fr\)_320px\] {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .grid-cols-\[minmax\(0\,1fr\)_clamp\(10rem\,22vw\,18rem\)\] {
    grid-template-columns: minmax(0, 1fr) clamp(10rem, 22vw, 18rem);
  }

  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.5fr\)\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(5\.5rem\,0\.9fr\)_minmax\(7rem\,1\.1fr\)_minmax\(8rem\,1\.2fr\)_minmax\(7\.5rem\,1fr\)_minmax\(4\.5rem\,0\.7fr\)\] {
    grid-template-columns: minmax(5.5rem, .9fr) minmax(7rem, 1.1fr) minmax(8rem, 1.2fr) minmax(7.5rem, 1fr) minmax(4.5rem, .7fr);
  }

  .grid-cols-\[minmax\(7rem\,1fr\)_minmax\(9rem\,1\.3fr\)_minmax\(8rem\,1fr\)_minmax\(5rem\,0\.8fr\)\] {
    grid-template-columns: minmax(7rem, 1fr) minmax(9rem, 1.3fr) minmax(8rem, 1fr) minmax(5rem, .8fr);
  }

  .grid-cols-\[minmax\(7rem\,1fr\)_minmax\(10rem\,2fr\)_8rem_minmax\(4\.5rem\,0\.7fr\)\] {
    grid-template-columns: minmax(7rem, 1fr) minmax(10rem, 2fr) 8rem minmax(4.5rem, .7fr);
  }

  .grid-cols-\[minmax\(10rem\,1\.5fr\)_minmax\(6rem\,0\.8fr\)_minmax\(9rem\,1fr\)\] {
    grid-template-columns: minmax(10rem, 1.5fr) minmax(6rem, .8fr) minmax(9rem, 1fr);
  }

  .grid-cols-\[minmax\(120px\,160px\)_88px_auto\] {
    grid-template-columns: minmax(120px, 160px) 88px auto;
  }

  .grid-cols-\[minmax\(140px\,0\.7fr\)_1fr_1fr_80px_64px_48px\] {
    grid-template-columns: minmax(140px, .7fr) 1fr 1fr 80px 64px 48px;
  }

  .grid-cols-\[minmax\(180px\,1fr\)_auto_auto\] {
    grid-template-columns: minmax(180px, 1fr) auto auto;
  }

  .grid-cols-\[minmax\(220px\,1fr\)_minmax\(160px\,0\.7fr\)_160px_180px_180px\] {
    grid-template-columns: minmax(220px, 1fr) minmax(160px, .7fr) 160px 180px 180px;
  }

  .grid-cols-\[repeat\(3\,90px\)\] {
    grid-template-columns: repeat(3, 90px);
  }

  .grid-cols-\[repeat\(auto-fill\,minmax\(220px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .\!grid-rows-\[auto\] {
    grid-template-rows: auto !important;
  }

  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
  }

  .grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
  }

  .grid-rows-\[auto_1fr\] {
    grid-template-rows: auto 1fr;
  }

  .grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }

  .grid-rows-\[auto_auto_minmax\(0\,1fr\)_auto\] {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .grid-rows-\[auto_minmax\(0\,1fr\)_auto\] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .\!flex-row {
    flex-direction: row !important;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-content-center {
    place-content: center;
  }

  .place-items-center {
    place-items: center;
  }

  .place-items-stretch {
    place-items: stretch stretch;
  }

  .content-start {
    align-content: flex-start;
  }

  .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-end {
    justify-content: flex-end !important;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .\!gap-0 {
    gap: calc(var(--spacing) * 0) !important;
  }

  .\!gap-2 {
    gap: calc(var(--spacing) * 2) !important;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .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-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-6\! {
    gap: calc(var(--spacing) * 6) !important;
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }

  .gap-\[--spacing\(var\(--gap\)\)\] {
    gap: calc(var(--spacing) * var(--gap));
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  .gap-\[6px\] {
    gap: 6px;
  }

  .gap-\[var\(--home-input-control-content-gap\)\] {
    gap: var(--home-input-control-content-gap);
  }

  .gap-\[var\(--home-scene-tag-content-gap\)\] {
    gap: var(--home-scene-tag-content-gap);
  }

  .gap-\[var\(--home-scene-tag-gap\)\] {
    gap: var(--home-scene-tag-gap);
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * 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)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  :where(.-space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  :where(.divide-x > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  :where(.divide-x-\[var\(--divider-width\)\] > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(var(--divider-width) * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(var(--divider-width) * calc(1 - var(--tw-divide-x-reverse)));
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-border > :not(:last-child)), :where(.divide-border\/40 > :not(:last-child)) {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-border\/40 > :not(:last-child)) {
      border-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  :where(.divide-border\/70 > :not(:last-child)) {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-border\/70 > :not(:last-child)) {
      border-color: color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-self-center {
    justify-self: center;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .overscroll-none {
    overscroll-behavior: none;
  }

  .overscroll-x-contain {
    overscroll-behavior-x: contain;
  }

  .\!rounded-\[4px\] {
    border-radius: 4px !important;
  }

  .\!rounded-sm {
    border-radius: calc(var(--radius) * .6) !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: calc(var(--radius) * 1.8);
  }

  .rounded-\[1px\] {
    border-radius: 1px;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[5px\] {
    border-radius: 5px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[7px\] {
    border-radius: 7px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[16px\] {
    border-radius: 16px;
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[100px\] {
    border-radius: 100px;
  }

  .rounded-\[calc\(var\(--home-media-showcase-card-radius\)-4px\)\] {
    border-radius: calc(var(--home-media-showcase-card-radius) - 4px);
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-\[var\(--home-input-radius\)\] {
    border-radius: var(--home-input-radius);
  }

  .rounded-\[var\(--home-media-showcase-card-radius\)\] {
    border-radius: var(--home-media-showcase-card-radius);
  }

  .rounded-\[var\(--home-query-card-radius\)\] {
    border-radius: var(--home-query-card-radius);
  }

  .rounded-\[var\(--home-scene-tag-radius\)\] {
    border-radius: var(--home-scene-tag-radius);
  }

  .rounded-\[var\(--message-input-surface-radius\)\] {
    border-radius: var(--message-input-surface-radius);
  }

  .rounded-\[var\(--nav-item-radius\)\] {
    border-radius: var(--nav-item-radius);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-lg\! {
    border-radius: var(--radius) !important;
  }

  .rounded-md {
    border-radius: calc(var(--radius) * .8);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-none\! {
    border-radius: 0 !important;
  }

  .rounded-sm {
    border-radius: calc(var(--radius) * .6);
  }

  .rounded-xl {
    border-radius: calc(var(--radius) * 1.4);
  }

  .rounded-t-\[32px\] {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rounded-r-md {
    border-top-right-radius: calc(var(--radius) * .8);
    border-bottom-right-radius: calc(var(--radius) * .8);
  }

  .rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .rounded-r-sm {
    border-top-right-radius: calc(var(--radius) * .6);
    border-bottom-right-radius: calc(var(--radius) * .6);
  }

  .rounded-tr-\[30px\] {
    border-top-right-radius: 30px;
  }

  .rounded-b-\[24px\] {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
  }

  .rounded-b-\[var\(--home-input-radius\)\] {
    border-bottom-right-radius: var(--home-input-radius);
    border-bottom-left-radius: var(--home-input-radius);
  }

  .rounded-b-lg {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  .rounded-bl-md {
    border-bottom-left-radius: calc(var(--radius) * .8);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: .5px;
  }

  .border-\[0\.75px\] {
    border-style: var(--tw-border-style);
    border-width: .75px;
  }

  .border-\[0\.85px\] {
    border-style: var(--tw-border-style);
    border-width: .85px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[border-width\:0\.5px\] {
    border-width: .5px;
  }

  .\[border-width\:var\(--divider-width\)\] {
    border-width: var(--divider-width);
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-t-\[3px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 3px;
  }

  .\[border-top-width\:var\(--control-border-width\)\] {
    border-top-width: var(--control-border-width);
  }

  .\[border-top-width\:var\(--divider-width\)\] {
    border-top-width: var(--divider-width);
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-\[3px\] {
    border-right-style: var(--tw-border-style);
    border-right-width: 3px;
  }

  .\[border-right-width\:var\(--control-border-width\)\] {
    border-right-width: var(--control-border-width);
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-b-\[0\.5px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: .5px;
  }

  .border-b-\[3px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 3px;
  }

  .\[border-bottom-width\:var\(--control-border-width\)\] {
    border-bottom-width: var(--control-border-width);
  }

  .\[border-bottom-width\:var\(--divider-width\)\] {
    border-bottom-width: var(--divider-width);
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }

  .\[border-left-width\:var\(--control-border-width\)\] {
    border-left-width: var(--control-border-width);
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-none\! {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-\[var\(--workflow-selected-border\)\] {
    border-color: var(--workflow-selected-border) !important;
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\] {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--foreground) 20%,transparent);
    }
  }

  .border-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_4\%\,transparent\)\] {
    border-color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_4\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--sidebar-foreground) 4%,transparent);
    }
  }

  .border-\[rgba\(0\,0\,0\,0\.3\)\] {
    border-color: #0000004d;
  }

  .border-\[rgba\(0\,0\,0\,0\.4\)\] {
    border-color: #0006;
  }

  .border-\[var\(--Line-line_03\,rgba\(255\,255\,255\,0\.06\)\)\] {
    border-color: var(--Line-line_03, #ffffff0f);
  }

  .border-\[var\(--border-solid\)\]\! {
    border-color: var(--border-solid) !important;
  }

  .border-\[var\(--brutalist-border\)\] {
    border-color: var(--brutalist-border);
  }

  .border-\[var\(--brutalist-border-subtle\)\] {
    border-color: var(--brutalist-border-subtle);
  }

  .border-\[var\(--canvas-controls-active\)\] {
    border-color: var(--canvas-controls-active);
  }

  .border-\[var\(--canvas-controls-border\)\] {
    border-color: var(--canvas-controls-border);
  }

  .border-\[var\(--canvas-controls-text\)\] {
    border-color: var(--canvas-controls-text);
  }

  .border-\[var\(--canvas-controls-text-muted\)\] {
    border-color: var(--canvas-controls-text-muted);
  }

  .border-\[var\(--canvas-model-selector-icon-border\)\] {
    border-color: var(--canvas-model-selector-icon-border);
  }

  .border-\[var\(--canvas-node-border\)\] {
    border-color: var(--canvas-node-border);
  }

  .border-\[var\(--canvas-node-border\,\#e3e3e3\)\] {
    border-color: var(--canvas-node-border, #e3e3e3);
  }

  .border-\[var\(--canvas-node-border-selected\)\] {
    border-color: var(--canvas-node-border-selected);
  }

  .border-\[var\(--canvas-node-frame-color\)\] {
    border-color: var(--canvas-node-frame-color);
  }

  .border-\[var\(--canvas-param-selected-border\)\] {
    border-color: var(--canvas-param-selected-border);
  }

  .border-\[var\(--fg-muted\,\#525252\)\] {
    border-color: var(--fg-muted, #525252);
  }

  .border-\[var\(--hl_text_00\)\] {
    border-color: var(--hl_text_00);
  }

  .border-\[var\(--model-selector-icon-border\)\] {
    border-color: var(--model-selector-icon-border);
  }

  .border-\[var\(--node-tag-border\)\] {
    border-color: var(--node-tag-border);
  }

  .border-\[var\(--workflow-learning-banner-border\)\] {
    border-color: var(--workflow-learning-banner-border);
  }

  .border-\[var\(--workflow-learning-banner-border-strong\)\] {
    border-color: var(--workflow-learning-banner-border-strong);
  }

  .border-\[var\(--workflow-learning-banner-card-border\)\] {
    border-color: var(--workflow-learning-banner-card-border);
  }

  .border-amber-500\/50 {
    border-color: #f99c0080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/50 {
      border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
  }

  .border-background, .border-background\/70 {
    border-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-background\/70 {
      border-color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-black\/70 {
    border-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/70 {
      border-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .border-border {
    border-color: var(--border);
  }

  .border-border\! {
    border-color: var(--border) !important;
  }

  .border-border-soft {
    border-color: var(--border-soft);
  }

  .border-border-solid {
    border-color: var(--border-solid);
  }

  .border-border-strong {
    border-color: var(--border-strong);
  }

  .border-border\/30 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/30 {
      border-color: color-mix(in oklab, var(--border) 30%, transparent);
    }
  }

  .border-border\/40 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/40 {
      border-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  .border-border\/50 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .border-border\/60 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/60 {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .border-border\/70 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/70 {
      border-color: color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

  .border-brand-accent, .border-brand-accent\/20 {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-accent\/20 {
      border-color: color-mix(in oklab, var(--brand-accent) 20%, transparent);
    }
  }

  .border-brand-accent\/30 {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-accent\/30 {
      border-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
    }
  }

  .border-brand-accent\/40 {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-accent\/40 {
      border-color: color-mix(in oklab, var(--brand-accent) 40%, transparent);
    }
  }

  .border-brand-accent\/50 {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-accent\/50 {
      border-color: color-mix(in oklab, var(--brand-accent) 50%, transparent);
    }
  }

  .border-brand-accent\/80 {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-accent\/80 {
      border-color: color-mix(in oklab, var(--brand-accent) 80%, transparent);
    }
  }

  .border-brutalist-border {
    border-color: var(--brutalist-border);
  }

  .border-card {
    border-color: var(--card);
  }

  .border-current {
    border-color: currentColor;
  }

  .border-destructive {
    border-color: var(--destructive);
  }

  .border-destructive\! {
    border-color: var(--destructive) !important;
  }

  .border-destructive\/10 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/10 {
      border-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .border-destructive\/20 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/20 {
      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .border-destructive\/25 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/25 {
      border-color: color-mix(in oklab, var(--destructive) 25%, transparent);
    }
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-destructive\/40 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/40 {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .border-destructive\/50 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/50 {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .border-emerald-500\/50 {
    border-color: #00bb7f80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/50 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
    }
  }

  .border-foreground, .border-foreground\/5 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/5 {
      border-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .border-foreground\/10 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/10 {
      border-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .border-foreground\/12 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/12 {
      border-color: color-mix(in oklab, var(--foreground) 12%, transparent);
    }
  }

  .border-foreground\/15 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/15 {
      border-color: color-mix(in oklab, var(--foreground) 15%, transparent);
    }
  }

  .border-foreground\/20 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/20 {
      border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
    }
  }

  .border-foreground\/25 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/25 {
      border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
    }
  }

  .border-foreground\/30 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/30 {
      border-color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .border-foreground\/35 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/35 {
      border-color: color-mix(in oklab, var(--foreground) 35%, transparent);
    }
  }

  .border-foreground\/70 {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-foreground\/70 {
      border-color: color-mix(in oklab, var(--foreground) 70%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-muted-foreground, .border-muted-foreground\/20 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/20 {
      border-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
    }
  }

  .border-muted-foreground\/25 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/25 {
      border-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
    }
  }

  .border-muted-foreground\/30 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/30 {
      border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .border-muted-foreground\/40 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/40 {
      border-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .border-primary, .border-primary\/10 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/10 {
      border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .border-primary\/20 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-primary\/50 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/50 {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .border-project-assets-row-checkbox-border\! {
    border-color: var(--project-assets-row-checkbox-border) !important;
  }

  .border-purple-500\/50 {
    border-color: #ac4bff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-purple-500\/50 {
      border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
    }
  }

  .border-ring {
    border-color: var(--ring);
  }

  .border-rose-500\/50 {
    border-color: #ff235780;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-500\/50 {
      border-color: color-mix(in oklab, var(--color-rose-500) 50%, transparent);
    }
  }

  .border-sidebar {
    border-color: var(--sidebar);
  }

  .border-sidebar-border {
    border-color: var(--sidebar-border);
  }

  .border-success\/20 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/20 {
      border-color: color-mix(in oklab, var(--success) 20%, transparent);
    }
  }

  .border-success\/30 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/30 {
      border-color: color-mix(in oklab, var(--success) 30%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-warning\/10 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/10 {
      border-color: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .border-warning\/20 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/20 {
      border-color: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .border-warning\/30 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/30 {
      border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .border-warning\/40 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/40 {
      border-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .border-warning\/50 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/50 {
      border-color: color-mix(in oklab, var(--warning) 50%, transparent);
    }
  }

  .border-warning\/\[\.45\] {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/\[\.45\] {
      border-color: color-mix(in oklab, var(--warning) 45%, transparent);
    }
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/50 {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .border-white\/80 {
    border-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/80 {
      border-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .border-yellow-500\/30 {
    border-color: #edb2004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-500\/30 {
      border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
    }
  }

  .border-t-\[var\(--canvas-controls-text\)\] {
    border-top-color: var(--canvas-controls-text);
  }

  .border-t-foreground {
    border-top-color: var(--foreground);
  }

  .border-t-muted-foreground {
    border-top-color: var(--muted-foreground);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-t-white\/80 {
    border-top-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-t-white\/80 {
      border-top-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .border-b-transparent {
    border-bottom-color: #0000;
  }

  .border-l-primary-foreground\/25 {
    border-left-color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-l-primary-foreground\/25 {
      border-left-color: color-mix(in oklab, var(--primary-foreground) 25%, transparent);
    }
  }

  .\!bg-black {
    background-color: var(--color-black) !important;
  }

  .\!bg-popover {
    background-color: var(--popover) !important;
  }

  .bg-\[\#8b8af8\] {
    background-color: #8b8af8;
  }

  .bg-\[\#28c840\] {
    background-color: #28c840;
  }

  .bg-\[\#f5f1e8\] {
    background-color: #f5f1e8;
  }

  .bg-\[\#febc2e\] {
    background-color: #febc2e;
  }

  .bg-\[\#ff5f57\] {
    background-color: #ff5f57;
  }

  .bg-\[color-mix\(in_srgb\,var\(--canvas-controls-hover\)_60\%\,transparent\)\] {
    background-color: var(--canvas-controls-hover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_srgb\,var\(--canvas-controls-hover\)_60\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--canvas-controls-hover) 60%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,color-mix\(in_srgb\,var\(--sidebar-accent\)_98\%\,var\(--sidebar-foreground\)\)_88\%\,transparent\)\] {
    background-color: var(--sidebar-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,color-mix\(in_srgb\,var\(--sidebar-accent\)_98\%\,var\(--sidebar-foreground\)\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,color-mix(in srgb,var(--sidebar-accent) 98%,var(--sidebar-foreground)) 88%,transparent);
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_22\%\,var\(--card\)\)\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_22\%\,var\(--card\)\)\] {
      background-color: color-mix(in srgb,var(--brand-accent) 22%,var(--card));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_30\%\,var\(--background\)\)\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_30\%\,var\(--background\)\)\] {
      background-color: color-mix(in srgb,var(--brand-accent) 30%,var(--background));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_42\%\,var\(--background\)\)\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_42\%\,var\(--background\)\)\] {
      background-color: color-mix(in srgb,var(--brand-accent) 42%,var(--background));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--destructive\)_20\%\,var\(--card\)\)\] {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--destructive\)_20\%\,var\(--card\)\)\] {
      background-color: color-mix(in srgb,var(--destructive) 20%,var(--card));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--foreground\)_2\%\,var\(--background\)\)\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--foreground\)_2\%\,var\(--background\)\)\] {
      background-color: color-mix(in srgb,var(--foreground) 2%,var(--background));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--info\)_22\%\,var\(--card\)\)\] {
    background-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--info\)_22\%\,var\(--card\)\)\] {
      background-color: color-mix(in srgb,var(--info) 22%,var(--card));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent\)_98\%\,var\(--sidebar-foreground\)\)\] {
    background-color: var(--sidebar-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent\)_98\%\,var\(--sidebar-foreground\)\)\] {
      background-color: color-mix(in srgb,var(--sidebar-accent) 98%,var(--sidebar-foreground));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--success\)_22\%\,var\(--card\)\)\] {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--success\)_22\%\,var\(--card\)\)\] {
      background-color: color-mix(in srgb,var(--success) 22%,var(--card));
    }
  }

  .bg-\[color\:color-mix\(in_srgb\,var\(--warning\)_22\%\,var\(--card\)\)\] {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color\:color-mix\(in_srgb\,var\(--warning\)_22\%\,var\(--card\)\)\] {
      background-color: color-mix(in srgb,var(--warning) 22%,var(--card));
    }
  }

  .bg-\[color\:var\(--canvas-controls-bg\)\] {
    background-color: var(--canvas-controls-bg);
  }

  .bg-\[var\(--bg-subtle\)\] {
    background-color: var(--bg-subtle);
  }

  .bg-\[var\(--bg-subtle\,\#f5f5f5\)\] {
    background-color: var(--bg-subtle, #f5f5f5);
  }

  .bg-\[var\(--bg-subtle\,\#fafafa\)\] {
    background-color: var(--bg-subtle, #fafafa);
  }

  .bg-\[var\(--bg-surface-secondary\,\#f7f7f7\)\] {
    background-color: var(--bg-surface-secondary, #f7f7f7);
  }

  .bg-\[var\(--button-subtle-bg\)\] {
    background-color: var(--button-subtle-bg);
  }

  .bg-\[var\(--canvas-controls-active\)\] {
    background-color: var(--canvas-controls-active);
  }

  .bg-\[var\(--canvas-controls-bg\)\] {
    background-color: var(--canvas-controls-bg);
  }

  .bg-\[var\(--canvas-controls-border\)\] {
    background-color: var(--canvas-controls-border);
  }

  .bg-\[var\(--canvas-controls-hover\)\] {
    background-color: var(--canvas-controls-hover);
  }

  .bg-\[var\(--canvas-controls-text\)\] {
    background-color: var(--canvas-controls-text);
  }

  .bg-\[var\(--canvas-empty-action-bg\)\] {
    background-color: var(--canvas-empty-action-bg);
  }

  .bg-\[var\(--canvas-media-control-bg\)\] {
    background-color: var(--canvas-media-control-bg);
  }

  .bg-\[var\(--canvas-node-bg\)\] {
    background-color: var(--canvas-node-bg);
  }

  .bg-\[var\(--canvas-node-bg\,_\#fff\)\] {
    background-color: var(--canvas-node-bg, #fff);
  }

  .bg-\[var\(--canvas-param-selected-bg\)\] {
    background-color: var(--canvas-param-selected-bg);
  }

  .bg-\[var\(--canvas-primary-btn-bg\)\] {
    background-color: var(--canvas-primary-btn-bg);
  }

  .bg-\[var\(--chat-audio-artifact-icon-bg\)\] {
    background-color: var(--chat-audio-artifact-icon-bg);
  }

  .bg-\[var\(--chat-inline-code-bg\,var\(--canvas-controls-hover\)\)\] {
    background-color: var(--chat-inline-code-bg, var(--canvas-controls-hover));
  }

  .bg-\[var\(--elevated-surface\)\] {
    background-color: var(--elevated-surface);
  }

  .bg-\[var\(--hl_relight_surface\)\] {
    background-color: var(--hl_relight_surface);
  }

  .bg-\[var\(--home-composer-tray-bg\)\] {
    background-color: var(--home-composer-tray-bg);
  }

  .bg-\[var\(--home-content-surface\)\] {
    background-color: var(--home-content-surface);
  }

  .bg-\[var\(--home-sidebar-nav-hover\)\] {
    background-color: var(--home-sidebar-nav-hover);
  }

  .bg-\[var\(--im-bridge-channel-card-bg\)\] {
    background-color: var(--im-bridge-channel-card-bg);
  }

  .bg-\[var\(--media-overlay-surface\)\] {
    background-color: var(--media-overlay-surface);
  }

  .bg-\[var\(--media-overlay-surface-strong\)\] {
    background-color: var(--media-overlay-surface-strong);
  }

  .bg-\[var\(--message-input-attachment-bg\)\] {
    background-color: var(--message-input-attachment-bg);
  }

  .bg-\[var\(--node-tag-surface\)\] {
    background-color: var(--node-tag-surface);
  }

  .bg-\[var\(--secondary-tab-active-bg\)\] {
    background-color: var(--secondary-tab-active-bg);
  }

  .bg-\[var\(--topbar-bg\)\] {
    background-color: var(--topbar-bg);
  }

  .bg-\[var\(--topbar-tab-active-bg\)\] {
    background-color: var(--topbar-tab-active-bg);
  }

  .bg-\[var\(--topbar-tab-inactive-bg\)\] {
    background-color: var(--topbar-tab-inactive-bg);
  }

  .bg-\[var\(--window-shell-fallback-bg\)\] {
    background-color: var(--window-shell-fallback-bg);
  }

  .bg-\[var\(--workflow-learning-banner-border\)\] {
    background-color: var(--workflow-learning-banner-border);
  }

  .bg-\[var\(--workflow-learning-banner-card-back\)\] {
    background-color: var(--workflow-learning-banner-card-back);
  }

  .bg-accent {
    background-color: var(--accent);
  }

  .bg-amber-500\/5 {
    background-color: #f99c000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/5 {
      background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
    }
  }

  .bg-amber-500\/20 {
    background-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/20 {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .bg-background, .bg-background\/20 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/20 {
      background-color: color-mix(in oklab, var(--background) 20%, transparent);
    }
  }

  .bg-background\/40 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/40 {
      background-color: color-mix(in oklab, var(--background) 40%, transparent);
    }
  }

  .bg-background\/50 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/50 {
      background-color: color-mix(in oklab, var(--background) 50%, transparent);
    }
  }

  .bg-background\/60 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/60 {
      background-color: color-mix(in oklab, var(--background) 60%, transparent);
    }
  }

  .bg-background\/70 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/70 {
      background-color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .bg-background\/75 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/75 {
      background-color: color-mix(in oklab, var(--background) 75%, transparent);
    }
  }

  .bg-background\/80 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/80 {
      background-color: color-mix(in oklab, var(--background) 80%, transparent);
    }
  }

  .bg-background\/90 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/90 {
      background-color: color-mix(in oklab, var(--background) 90%, transparent);
    }
  }

  .bg-background\/95 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
      background-color: color-mix(in oklab, var(--background) 95%, transparent);
    }
  }

  .bg-badge-hot-bg {
    background-color: var(--badge-hot-bg);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/45 {
    background-color: #00000073;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/45 {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/55 {
    background-color: #0000008c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/55 {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/65 {
    background-color: #000000a6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/65 {
      background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
    }
  }

  .bg-black\/70 {
    background-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-black\/85 {
    background-color: #000000d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/85 {
      background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
    }
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-border-soft {
    background-color: var(--border-soft);
  }

  .bg-border\/50 {
    background-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-border\/50 {
      background-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .bg-border\/70 {
    background-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-border\/70 {
      background-color: color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

  .bg-brand-accent {
    background-color: var(--brand-accent);
  }

  .bg-brand-accent-foreground {
    background-color: var(--brand-accent-foreground);
  }

  .bg-brand-accent\/10 {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/10 {
      background-color: color-mix(in oklab, var(--brand-accent) 10%, transparent);
    }
  }

  .bg-brand-accent\/12 {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/12 {
      background-color: color-mix(in oklab, var(--brand-accent) 12%, transparent);
    }
  }

  .bg-brand-accent\/70 {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/70 {
      background-color: color-mix(in oklab, var(--brand-accent) 70%, transparent);
    }
  }

  .bg-brand-accent\/80 {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/80 {
      background-color: color-mix(in oklab, var(--brand-accent) 80%, transparent);
    }
  }

  .bg-brand-accent\/\[0\.04\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--brand-accent) 4%, transparent);
    }
  }

  .bg-brand-accent\/\[0\.06\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--brand-accent) 6%, transparent);
    }
  }

  .bg-brand-accent\/\[0\.08\] {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-accent\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--brand-accent) 8%, transparent);
    }
  }

  .bg-card, .bg-card\/40 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/40 {
      background-color: color-mix(in oklab, var(--card) 40%, transparent);
    }
  }

  .bg-card\/85 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/85 {
      background-color: color-mix(in oklab, var(--card) 85%, transparent);
    }
  }

  .bg-card\/88 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/88 {
      background-color: color-mix(in oklab, var(--card) 88%, transparent);
    }
  }

  .bg-card\/90 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/90 {
      background-color: color-mix(in oklab, var(--card) 90%, transparent);
    }
  }

  .bg-card\/95 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/95 {
      background-color: color-mix(in oklab, var(--card) 95%, transparent);
    }
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-destructive, .bg-destructive\/5 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/5 {
      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
    }
  }

  .bg-destructive\/8 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/8 {
      background-color: color-mix(in oklab, var(--destructive) 8%, transparent);
    }
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-destructive\/15 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/15 {
      background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
    }
  }

  .bg-destructive\/\[0\.03\] {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--destructive) 3%, transparent);
    }
  }

  .bg-emerald-500\/5 {
    background-color: #00bb7f0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/5 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
    }
  }

  .bg-emerald-500\/20 {
    background-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .bg-foreground, .bg-foreground\/0 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/0 {
      background-color: color-mix(in oklab, var(--foreground) 0%, transparent);
    }
  }

  .bg-foreground\/5 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/5 {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .bg-foreground\/8 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/8 {
      background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    }
  }

  .bg-foreground\/10 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/10 {
      background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .bg-foreground\/15 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/15 {
      background-color: color-mix(in oklab, var(--foreground) 15%, transparent);
    }
  }

  .bg-foreground\/20 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/20 {
      background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
    }
  }

  .bg-foreground\/25 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/25 {
      background-color: color-mix(in oklab, var(--foreground) 25%, transparent);
    }
  }

  .bg-foreground\/30 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/30 {
      background-color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .bg-foreground\/35 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/35 {
      background-color: color-mix(in oklab, var(--foreground) 35%, transparent);
    }
  }

  .bg-foreground\/40 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/40 {
      background-color: color-mix(in oklab, var(--foreground) 40%, transparent);
    }
  }

  .bg-foreground\/45 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/45 {
      background-color: color-mix(in oklab, var(--foreground) 45%, transparent);
    }
  }

  .bg-foreground\/50 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/50 {
      background-color: color-mix(in oklab, var(--foreground) 50%, transparent);
    }
  }

  .bg-foreground\/60 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/60 {
      background-color: color-mix(in oklab, var(--foreground) 60%, transparent);
    }
  }

  .bg-foreground\/70 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/70 {
      background-color: color-mix(in oklab, var(--foreground) 70%, transparent);
    }
  }

  .bg-foreground\/80 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/80 {
      background-color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .bg-foreground\/\[0\.02\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.02\] {
      background-color: color-mix(in oklab, var(--foreground) 2%, transparent);
    }
  }

  .bg-foreground\/\[0\.03\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
    }
  }

  .bg-foreground\/\[0\.04\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
    }
  }

  .bg-foreground\/\[0\.05\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.05\] {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .bg-foreground\/\[0\.06\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
    }
  }

  .bg-foreground\/\[0\.07\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--foreground) 7.0%, transparent);
    }
  }

  .bg-foreground\/\[0\.08\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    }
  }

  .bg-foreground\/\[0\.12\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.12\] {
      background-color: color-mix(in oklab, var(--foreground) 12%, transparent);
    }
  }

  .bg-foreground\/\[0\.025\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.025\] {
      background-color: color-mix(in oklab, var(--foreground) 2.5%, transparent);
    }
  }

  .bg-foreground\/\[0\.035\] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/\[0\.035\] {
      background-color: color-mix(in oklab, var(--foreground) 3.5%, transparent);
    }
  }

  .bg-indigo-500\/20 {
    background-color: #625fff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/20 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
  }

  .bg-info, .bg-info\/10 {
    background-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-info\/10 {
      background-color: color-mix(in oklab, var(--info) 10%, transparent);
    }
  }

  .bg-input {
    background-color: var(--input);
  }

  .bg-modal-content {
    background-color: var(--modal-content-surface);
  }

  .bg-modal-shell {
    background-color: var(--modal-shell-surface);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted-foreground\/5 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/5 {
      background-color: color-mix(in oklab, var(--muted-foreground) 5%, transparent);
    }
  }

  .bg-muted-foreground\/10 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/10 {
      background-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent);
    }
  }

  .bg-muted-foreground\/15 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/15 {
      background-color: color-mix(in oklab, var(--muted-foreground) 15%, transparent);
    }
  }

  .bg-muted-foreground\/20 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/20 {
      background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
    }
  }

  .bg-muted-foreground\/30 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/30 {
      background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .bg-muted-foreground\/40 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/40 {
      background-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .bg-muted-foreground\/50 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/50 {
      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .bg-muted-foreground\/60 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/60 {
      background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .bg-muted\/20 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/20 {
      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
    }
  }

  .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .bg-muted\/30\! {
    background-color: var(--muted) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30\! {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent) !important;
    }
  }

  .bg-muted\/35 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/35 {
      background-color: color-mix(in oklab, var(--muted) 35%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-muted\/60 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/60 {
      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
    }
  }

  .bg-muted\/70 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/70 {
      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
    }
  }

  .bg-muted\/90 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/90 {
      background-color: color-mix(in oklab, var(--muted) 90%, transparent);
    }
  }

  .bg-neutral-950\/95 {
    background-color: #0a0a0af2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-950\/95 {
      background-color: color-mix(in oklab, var(--color-neutral-950) 95%, transparent);
    }
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-popover\! {
    background-color: var(--popover) !important;
  }

  .bg-popover\/60 {
    background-color: var(--popover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-popover\/60 {
      background-color: color-mix(in oklab, var(--popover) 60%, transparent);
    }
  }

  .bg-popover\/90 {
    background-color: var(--popover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-popover\/90 {
      background-color: color-mix(in oklab, var(--popover) 90%, transparent);
    }
  }

  .bg-popover\/95 {
    background-color: var(--popover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-popover\/95 {
      background-color: color-mix(in oklab, var(--popover) 95%, transparent);
    }
  }

  .bg-popup-item-active {
    background-color: var(--popup-item-active);
  }

  .bg-popup-item-hover {
    background-color: var(--popup-item-hover);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-primary-foreground {
    background-color: var(--primary-foreground);
  }

  .bg-primary\/5 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/15 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/15 {
      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-project-assets-row-checkbox-bg\! {
    background-color: var(--project-assets-row-checkbox-bg) !important;
  }

  .bg-purple-500\/5 {
    background-color: #ac4bff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/5 {
      background-color: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
    }
  }

  .bg-purple-500\/20 {
    background-color: #ac4bff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/20 {
      background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .bg-rose-500\/5 {
    background-color: #ff23570d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/5 {
      background-color: color-mix(in oklab, var(--color-rose-500) 5%, transparent);
    }
  }

  .bg-rose-500\/20 {
    background-color: #ff235733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/20 {
      background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
    }
  }

  .bg-secondary, .bg-secondary\/40 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/40 {
      background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
    }
  }

  .bg-secondary\/45 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/45 {
      background-color: color-mix(in oklab, var(--secondary) 45%, transparent);
    }
  }

  .bg-secondary\/50 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/50 {
      background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
    }
  }

  .bg-secondary\/60 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/60 {
      background-color: color-mix(in oklab, var(--secondary) 60%, transparent);
    }
  }

  .bg-secondary\/70 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/70 {
      background-color: color-mix(in oklab, var(--secondary) 70%, transparent);
    }
  }

  .bg-sidebar, .bg-sidebar\/70 {
    background-color: var(--sidebar);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sidebar\/70 {
      background-color: color-mix(in oklab, var(--sidebar) 70%, transparent);
    }
  }

  .bg-sidebar\/80 {
    background-color: var(--sidebar);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sidebar\/80 {
      background-color: color-mix(in oklab, var(--sidebar) 80%, transparent);
    }
  }

  .bg-success, .bg-success\/5 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/5 {
      background-color: color-mix(in oklab, var(--success) 5%, transparent);
    }
  }

  .bg-success\/10 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/10 {
      background-color: color-mix(in oklab, var(--success) 10%, transparent);
    }
  }

  .bg-success\/15 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/15 {
      background-color: color-mix(in oklab, var(--success) 15%, transparent);
    }
  }

  .bg-tab-list-bg {
    background-color: var(--tab-list-bg);
  }

  .bg-tertiary\/25 {
    background-color: var(--text-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-tertiary\/25 {
      background-color: color-mix(in oklab, var(--text-tertiary) 25%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-transparent\! {
    background-color: #0000 !important;
  }

  .bg-warning, .bg-warning\/5 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/5 {
      background-color: color-mix(in oklab, var(--warning) 5%, transparent);
    }
  }

  .bg-warning\/10 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/10 {
      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .bg-warning\/15 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/15 {
      background-color: color-mix(in oklab, var(--warning) 15%, transparent);
    }
  }

  .bg-warning\/\[\.14\] {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/\[\.14\] {
      background-color: color-mix(in oklab, var(--warning) 14.0%, transparent);
    }
  }

  .bg-warning\/\[0\.02\] {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/\[0\.02\] {
      background-color: color-mix(in oklab, var(--warning) 2%, transparent);
    }
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-workspace-display-mode-current-mask {
    background-color: var(--workspace-display-mode-current-mask);
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(90deg\,transparent_0\%\,color-mix\(in_srgb\,var\(--brand-accent\)_8\%\,transparent\)_18\%\,color-mix\(in_srgb\,var\(--brand-accent\)_8\%\,transparent\)_82\%\,transparent_100\%\)\] {
    background-image: linear-gradient(90deg,transparent 0%,var(--brand-accent) 18%,var(--brand-accent) 82%,transparent 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[linear-gradient\(90deg\,transparent_0\%\,color-mix\(in_srgb\,var\(--brand-accent\)_8\%\,transparent\)_18\%\,color-mix\(in_srgb\,var\(--brand-accent\)_8\%\,transparent\)_82\%\,transparent_100\%\)\] {
      background-image: linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--brand-accent) 8%,transparent) 18%,color-mix(in srgb,var(--brand-accent) 8%,transparent) 82%,transparent 100%);
    }
  }

  .bg-\[linear-gradient\(90deg\,var\(--border\)_0\%\,var\(--border\)_35\%\,color-mix\(in_srgb\,var\(--foreground\)_42\%\,var\(--border\)\)_50\%\,var\(--border\)_65\%\,var\(--border\)_100\%\)\] {
    background-image: linear-gradient(90deg,var(--border) 0%,var(--border) 35%,var(--foreground) 50%,var(--border) 65%,var(--border) 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[linear-gradient\(90deg\,var\(--border\)_0\%\,var\(--border\)_35\%\,color-mix\(in_srgb\,var\(--foreground\)_42\%\,var\(--border\)\)_50\%\,var\(--border\)_65\%\,var\(--border\)_100\%\)\] {
      background-image: linear-gradient(90deg,var(--border) 0%,var(--border) 35%,color-mix(in srgb,var(--foreground) 42%,var(--border)) 50%,var(--border) 65%,var(--border) 100%);
    }
  }

  .bg-\[radial-gradient\(120\%_120\%_at_0\%_0\%\,oklch\(from_var\(--primary\)_l_c_h\/0\.18\)\,transparent_55\%\)\] {
    background-image: radial-gradient(120% 120% at 0% 0%,oklch(from var(--primary) l c h/.18),transparent 55%);
  }

  .bg-\[repeating-linear-gradient\(to_bottom\,var\(--muted-foreground\)_0\,var\(--muted-foreground\)_1px\,transparent_1px\,transparent_3px\)\] {
    background-image: repeating-linear-gradient(to bottom,var(--muted-foreground) 0,var(--muted-foreground) 1px,transparent 1px,transparent 3px);
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-1\)_28\%\,transparent\)\] {
    --tw-gradient-from: var(--chart-1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[color-mix\(in_oklab\,var\(--chart-1\)_28\%\,transparent\)\] {
      --tw-gradient-from: color-mix(in oklab,var(--chart-1) 28%,transparent);
    }
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-1\)_28\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-2\)_28\%\,transparent\)\] {
    --tw-gradient-from: var(--chart-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[color-mix\(in_oklab\,var\(--chart-2\)_28\%\,transparent\)\] {
      --tw-gradient-from: color-mix(in oklab,var(--chart-2) 28%,transparent);
    }
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-2\)_28\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-3\)_28\%\,transparent\)\] {
    --tw-gradient-from: var(--chart-3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[color-mix\(in_oklab\,var\(--chart-3\)_28\%\,transparent\)\] {
      --tw-gradient-from: color-mix(in oklab,var(--chart-3) 28%,transparent);
    }
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-3\)_28\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-4\)_28\%\,transparent\)\] {
    --tw-gradient-from: var(--chart-4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[color-mix\(in_oklab\,var\(--chart-4\)_28\%\,transparent\)\] {
      --tw-gradient-from: color-mix(in oklab,var(--chart-4) 28%,transparent);
    }
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-4\)_28\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-5\)_28\%\,transparent\)\] {
    --tw-gradient-from: var(--chart-5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-\[color-mix\(in_oklab\,var\(--chart-5\)_28\%\,transparent\)\] {
      --tw-gradient-from: color-mix(in oklab,var(--chart-5) 28%,transparent);
    }
  }

  .from-\[color-mix\(in_oklab\,var\(--chart-5\)_28\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[var\(--canvas-reference-thumbnail-gradient\)\] {
    --tw-gradient-from: var(--canvas-reference-thumbnail-gradient);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-background\/95 {
    --tw-gradient-from: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-background\/95 {
      --tw-gradient-from: color-mix(in oklab, var(--background) 95%, transparent);
    }
  }

  .from-background\/95 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-card {
    --tw-gradient-from: var(--card);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-foreground\/\[0\.06\] {
    --tw-gradient-from: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-foreground\/\[0\.06\] {
      --tw-gradient-from: color-mix(in oklab, var(--foreground) 6%, transparent);
    }
  }

  .from-foreground\/\[0\.06\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-background\/70 {
    --tw-gradient-via: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-background\/70 {
      --tw-gradient-via: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .via-background\/70 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-card\/80 {
    --tw-gradient-via: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-card\/80 {
      --tw-gradient-via: color-mix(in oklab, var(--card) 80%, transparent);
    }
  }

  .via-card\/80 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-foreground\/\[0\.1\] {
    --tw-gradient-via: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-foreground\/\[0\.1\] {
      --tw-gradient-via: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .via-foreground\/\[0\.1\] {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-1\)_8\%\,transparent\)\] {
    --tw-gradient-to: var(--chart-1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[color-mix\(in_oklab\,var\(--chart-1\)_8\%\,transparent\)\] {
      --tw-gradient-to: color-mix(in oklab,var(--chart-1) 8%,transparent);
    }
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-1\)_8\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-2\)_8\%\,transparent\)\] {
    --tw-gradient-to: var(--chart-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[color-mix\(in_oklab\,var\(--chart-2\)_8\%\,transparent\)\] {
      --tw-gradient-to: color-mix(in oklab,var(--chart-2) 8%,transparent);
    }
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-2\)_8\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-3\)_8\%\,transparent\)\] {
    --tw-gradient-to: var(--chart-3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[color-mix\(in_oklab\,var\(--chart-3\)_8\%\,transparent\)\] {
      --tw-gradient-to: color-mix(in oklab,var(--chart-3) 8%,transparent);
    }
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-3\)_8\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-4\)_8\%\,transparent\)\] {
    --tw-gradient-to: var(--chart-4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[color-mix\(in_oklab\,var\(--chart-4\)_8\%\,transparent\)\] {
      --tw-gradient-to: color-mix(in oklab,var(--chart-4) 8%,transparent);
    }
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-4\)_8\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-5\)_8\%\,transparent\)\] {
    --tw-gradient-to: var(--chart-5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-\[color-mix\(in_oklab\,var\(--chart-5\)_8\%\,transparent\)\] {
      --tw-gradient-to: color-mix(in oklab,var(--chart-5) 8%,transparent);
    }
  }

  .to-\[color-mix\(in_oklab\,var\(--chart-5\)_8\%\,transparent\)\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-background\/0 {
    --tw-gradient-to: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-background\/0 {
      --tw-gradient-to: color-mix(in oklab, var(--background) 0%, transparent);
    }
  }

  .to-background\/0 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-card {
    --tw-gradient-to: var(--card);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-foreground\/\[0\.06\] {
    --tw-gradient-to: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-foreground\/\[0\.06\] {
      --tw-gradient-to: color-mix(in oklab, var(--foreground) 6%, transparent);
    }
  }

  .to-foreground\/\[0\.06\] {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-muted {
    --tw-gradient-to: var(--muted);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-\[length\:200\%_100\%\] {
    background-size: 200% 100%;
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-padding {
    background-clip: padding-box;
  }

  .bg-center {
    background-position: center;
  }

  .\!fill-none {
    fill: none !important;
  }

  .fill-background {
    fill: var(--background);
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-foreground {
    fill: var(--foreground);
  }

  .fill-popover {
    fill: var(--popover);
  }

  .fill-primary {
    fill: var(--primary);
  }

  .stroke-border {
    stroke: var(--border);
  }

  .stroke-brand-accent {
    stroke: var(--brand-accent);
  }

  .stroke-current {
    stroke: currentColor;
  }

  .stroke-destructive {
    stroke: var(--destructive);
  }

  .stroke-foreground\/\[0\.08\] {
    stroke: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-foreground\/\[0\.08\] {
      stroke: color-mix(in oklab, var(--foreground) 8%, transparent);
    }
  }

  .stroke-warning {
    stroke: var(--warning);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-fill {
    object-fit: fill;
  }

  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\! {
    padding: calc(var(--spacing) * 0) !important;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .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-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-16 {
    padding: calc(var(--spacing) * 16);
  }

  .p-\[2px\] {
    padding: 2px;
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .p-\[5px\] {
    padding: 5px;
  }

  .p-\[var\(--message-input-card-padding\)\] {
    padding: var(--message-input-card-padding);
  }

  .p-px {
    padding: 1px;
  }

  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .\!px-1 {
    padding-inline: calc(var(--spacing) * 1) !important;
  }

  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size);
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .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-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .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-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-\[7px\] {
    padding-inline: 7px;
  }

  .px-\[9px\] {
    padding-inline: 9px;
  }

  .px-\[var\(--btn-padding-icon\)\] {
    padding-inline: var(--btn-padding-icon);
  }

  .px-\[var\(--btn-padding-x-md\)\] {
    padding-inline: var(--btn-padding-x-md);
  }

  .px-\[var\(--home-input-toolbar-padding-x\)\] {
    padding-inline: var(--home-input-toolbar-padding-x);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-0\.75 {
    padding-block: calc(var(--spacing) * .75);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-\[7px\] {
    padding-block: 7px;
  }

  .py-px {
    padding-block: 1px;
  }

  .ps-1\.5 {
    padding-inline-start: calc(var(--spacing) * 1.5);
  }

  .\!pt-2 {
    padding-top: calc(var(--spacing) * 2) !important;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-\[14px\] {
    padding-top: 14px;
  }

  .pt-\[18px\] {
    padding-top: 18px;
  }

  .pt-\[20vh\] {
    padding-top: 20vh;
  }

  .pt-\[100px\] {
    padding-top: 100px;
  }

  .pt-\[clamp\(2rem\,9vh\,6rem\)\] {
    padding-top: clamp(2rem, 9vh, 6rem);
  }

  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }

  .pr-0\.5 {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .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-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }

  .pr-\[144px\] {
    padding-right: 144px;
  }

  .\!pb-0 {
    padding-bottom: calc(var(--spacing) * 0) !important;
  }

  .\!pb-2 {
    padding-bottom: calc(var(--spacing) * 2) !important;
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-\[54px\] {
    padding-bottom: 54px;
  }

  .pb-\[var\(--home-input-toolbar-padding-bottom\)\] {
    padding-bottom: var(--home-input-toolbar-padding-bottom);
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-0\.5 {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }

  .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);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-14 {
    padding-left: calc(var(--spacing) * 14);
  }

  .pl-\[9px\] {
    padding-left: 9px;
  }

  .pl-\[15px\] {
    padding-left: 15px;
  }

  .pl-\[21px\] {
    padding-left: 21px;
  }

  .pl-\[26px\] {
    padding-left: 26px;
  }

  .pl-\[30px\] {
    padding-left: 30px;
  }

  .pl-\[var\(--window-leading-content-inset\)\] {
    padding-left: var(--window-leading-content-inset);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-start {
    text-align: start;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-heading {
    font-family: Outfit, sans-serif;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-pixel {
    font-family: Pixelify Sans, Outfit, sans-serif;
  }

  .font-sans {
    font-family: Inter Variable, sans-serif;
  }

  .\!text-body-14 {
    font-size: 14px !important;
    line-height: var(--tw-leading, 22px) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-\[12px\]\/relaxed {
    font-size: 12px;
    line-height: var(--leading-relaxed);
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-body-12 {
    font-size: 12px;
    line-height: var(--tw-leading, 18px);
  }

  .text-body-13 {
    font-size: 13px;
    line-height: var(--tw-leading, 20px);
  }

  .text-body-14 {
    font-size: 14px;
    line-height: var(--tw-leading, 22px);
  }

  .text-body-15 {
    font-size: 15px;
    line-height: var(--tw-leading, 23px);
  }

  .text-caption-10 {
    font-size: 10px;
    line-height: var(--tw-leading, 14px);
  }

  .text-caption-11 {
    font-size: 11px;
    line-height: var(--tw-leading, 16px);
  }

  .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-sm\/relaxed {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .text-title-15 {
    font-size: 15px;
    line-height: var(--tw-leading, 22px);
  }

  .text-title-16 {
    font-size: 16px;
    line-height: var(--tw-leading, 24px);
  }

  .text-title-20 {
    font-size: 20px;
    line-height: var(--tw-leading, 28px);
  }

  .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-xs\/relaxed {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[2\.75rem\] {
    font-size: 2.75rem;
  }

  .text-\[7px\] {
    font-size: 7px;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .text-\[64px\] {
    font-size: 64px;
  }

  .text-\[length\:inherit\] {
    font-size: inherit;
  }

  .text-\[length\:var\(--home-input-toolbar-font-size\)\] {
    font-size: var(--home-input-toolbar-font-size);
  }

  .text-\[length\:var\(--message-input-editor-font-size\)\] {
    font-size: var(--message-input-editor-font-size);
  }

  .leading-3 {
    --tw-leading: calc(var(--spacing) * 3);
    line-height: calc(var(--spacing) * 3);
  }

  .leading-3\.5 {
    --tw-leading: calc(var(--spacing) * 3.5);
    line-height: calc(var(--spacing) * 3.5);
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }

  .leading-\[1\.25\] {
    --tw-leading: 1.25;
    line-height: 1.25;
  }

  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .leading-\[13px\] {
    --tw-leading: 13px;
    line-height: 13px;
  }

  .leading-\[14px\] {
    --tw-leading: 14px;
    line-height: 14px;
  }

  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }

  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }

  .leading-\[19px\] {
    --tw-leading: 19px;
    line-height: 19px;
  }

  .leading-\[20px\] {
    --tw-leading: 20px;
    line-height: 20px;
  }

  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }

  .leading-\[72px\] {
    --tw-leading: 72px;
    line-height: 72px;
  }

  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }

  .leading-\[var\(--text-body-14--line-height\)\] {
    --tw-leading: var(--text-body-14--line-height);
    line-height: var(--text-body-14--line-height);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .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-\[-0\.52px\] {
    --tw-tracking: -.52px;
    letter-spacing: -.52px;
  }

  .tracking-\[0\.02em\] {
    --tw-tracking: .02em;
    letter-spacing: .02em;
  }

  .tracking-\[0\.2px\] {
    --tw-tracking: .2px;
    letter-spacing: .2px;
  }

  .tracking-\[0\.03em\] {
    --tw-tracking: .03em;
    letter-spacing: .03em;
  }

  .tracking-\[0\.005em\] {
    --tw-tracking: .005em;
    letter-spacing: .005em;
  }

  .tracking-\[0\.6px\] {
    --tw-tracking: .6px;
    letter-spacing: .6px;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.44px\] {
    --tw-tracking: .44px;
    letter-spacing: .44px;
  }

  .tracking-\[var\(--home-input-toolbar-letter-spacing\)\] {
    --tw-tracking: var(--home-input-toolbar-letter-spacing);
    letter-spacing: var(--home-input-toolbar-letter-spacing);
  }

  .tracking-\[var\(--home-scene-tag-letter-spacing\)\] {
    --tw-tracking: var(--home-scene-tag-letter-spacing);
    letter-spacing: var(--home-scene-tag-letter-spacing);
  }

  .tracking-\[var\(--tracking-toolbar\)\] {
    --tw-tracking: var(--tracking-toolbar);
    letter-spacing: var(--tracking-toolbar);
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }

  .\[overflow-wrap\:normal\] {
    overflow-wrap: normal;
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .\[word-break\:normal\] {
    word-break: normal;
  }

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre {
    white-space: pre;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-popover-foreground {
    color: var(--popover-foreground) !important;
  }

  .text-\[\#555555\] {
    color: #555;
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_70\%\,var\(--foreground\)\)\] {
    color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--brand-accent\)_70\%\,var\(--foreground\)\)\] {
      color: color-mix(in srgb,var(--brand-accent) 70%,var(--foreground));
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--destructive\)_65\%\,var\(--foreground\)\)\] {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--destructive\)_65\%\,var\(--foreground\)\)\] {
      color: color-mix(in srgb,var(--destructive) 65%,var(--foreground));
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--info\)_70\%\,var\(--foreground\)\)\] {
    color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--info\)_70\%\,var\(--foreground\)\)\] {
      color: color-mix(in srgb,var(--info) 70%,var(--foreground));
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_68\%\,transparent\)\] {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_68\%\,transparent\)\] {
      color: color-mix(in srgb,var(--sidebar-foreground) 68%,transparent);
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--success\)_70\%\,var\(--foreground\)\)\] {
    color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--success\)_70\%\,var\(--foreground\)\)\] {
      color: color-mix(in srgb,var(--success) 70%,var(--foreground));
    }
  }

  .text-\[color\:color-mix\(in_srgb\,var\(--warning\)_70\%\,var\(--foreground\)\)\] {
    color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[color\:color-mix\(in_srgb\,var\(--warning\)_70\%\,var\(--foreground\)\)\] {
      color: color-mix(in srgb,var(--warning) 70%,var(--foreground));
    }
  }

  .text-\[var\(--canvas-controls-bg\)\] {
    color: var(--canvas-controls-bg);
  }

  .text-\[var\(--canvas-controls-text\)\], .text-\[var\(--canvas-controls-text\)\]\/70 {
    color: var(--canvas-controls-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[var\(--canvas-controls-text\)\]\/70 {
      color: color-mix(in oklab, var(--canvas-controls-text) 70%, transparent);
    }
  }

  .text-\[var\(--canvas-controls-text\,\#fff\)\]\/70 {
    color: var(--canvas-controls-text, #fff);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[var\(--canvas-controls-text\,\#fff\)\]\/70 {
      color: color-mix(in oklab, var(--canvas-controls-text, #fff) 70%, transparent);
    }
  }

  .text-\[var\(--canvas-controls-text-muted\)\] {
    color: var(--canvas-controls-text-muted);
  }

  .text-\[var\(--canvas-controls-text-muted-solid\)\] {
    color: var(--canvas-controls-text-muted-solid);
  }

  .text-\[var\(--canvas-empty-action-fg\)\] {
    color: var(--canvas-empty-action-fg);
  }

  .text-\[var\(--canvas-empty-action-icon-fg\)\] {
    color: var(--canvas-empty-action-icon-fg);
  }

  .text-\[var\(--canvas-empty-guidance-fg\)\] {
    color: var(--canvas-empty-guidance-fg);
  }

  .text-\[var\(--canvas-empty-placeholder-fg\)\] {
    color: var(--canvas-empty-placeholder-fg);
  }

  .text-\[var\(--canvas-media-control-fg\)\] {
    color: var(--canvas-media-control-fg);
  }

  .text-\[var\(--canvas-primary-btn-icon\)\] {
    color: var(--canvas-primary-btn-icon);
  }

  .text-\[var\(--canvas-video-control-fg\)\] {
    color: var(--canvas-video-control-fg);
  }

  .text-\[var\(--canvas-video-control-label\)\] {
    color: var(--canvas-video-control-label);
  }

  .text-\[var\(--catalog-page-subtitle-foreground\)\] {
    color: var(--catalog-page-subtitle-foreground);
  }

  .text-\[var\(--chat-audio-artifact-icon-fg\)\] {
    color: var(--chat-audio-artifact-icon-fg);
  }

  .text-\[var\(--fg-default\)\] {
    color: var(--fg-default);
  }

  .text-\[var\(--fg-default\,\#141414\)\] {
    color: var(--fg-default, #141414);
  }

  .text-\[var\(--fg-muted\)\] {
    color: var(--fg-muted);
  }

  .text-\[var\(--fg-muted\,\#999\)\] {
    color: var(--fg-muted, #999);
  }

  .text-\[var\(--fg-muted\,\#525252\)\] {
    color: var(--fg-muted, #525252);
  }

  .text-\[var\(--home-brand-foreground\)\] {
    color: var(--home-brand-foreground);
  }

  .text-\[var\(--home-query-card-text\)\] {
    color: var(--home-query-card-text);
  }

  .text-\[var\(--home-sidebar-primary-text\)\] {
    color: var(--home-sidebar-primary-text);
  }

  .text-\[var\(--home-sidebar-secondary-text\)\] {
    color: var(--home-sidebar-secondary-text);
  }

  .text-\[var\(--home-sidebar-section-text\)\] {
    color: var(--home-sidebar-section-text);
  }

  .text-\[var\(--media-overlay-foreground\)\] {
    color: var(--media-overlay-foreground);
  }

  .text-\[var\(--muted-foreground\)\] {
    color: var(--muted-foreground);
  }

  .text-\[var\(--topbar-icon-fg\)\] {
    color: var(--topbar-icon-fg);
  }

  .text-\[var\(--topbar-tab-active-fg\)\] {
    color: var(--topbar-tab-active-fg);
  }

  .text-\[var\(--topbar-tab-inactive-fg\)\] {
    color: var(--topbar-tab-inactive-fg);
  }

  .text-\[var\(--topbar-transparent-muted-foreground\)\] {
    color: var(--topbar-transparent-muted-foreground);
  }

  .text-\[var\(--workflow-learning-banner-accent\)\] {
    color: var(--workflow-learning-banner-accent);
  }

  .text-\[var\(--workflow-learning-banner-foreground\)\] {
    color: var(--workflow-learning-banner-foreground);
  }

  .text-\[var\(--workflow-learning-banner-foreground-muted\)\] {
    color: var(--workflow-learning-banner-foreground-muted);
  }

  .text-accent-foreground {
    color: var(--accent-foreground);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-background, .text-background\/70 {
    color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background\/70 {
      color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .text-background\/85 {
    color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background\/85 {
      color: color-mix(in oklab, var(--background) 85%, transparent);
    }
  }

  .text-badge-hot-fg {
    color: var(--badge-hot-fg);
  }

  .text-brand-accent {
    color: var(--brand-accent);
  }

  .text-brand-accent-foreground, .text-brand-accent-foreground\/70 {
    color: var(--brand-accent-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-brand-accent-foreground\/70 {
      color: color-mix(in oklab, var(--brand-accent-foreground) 70%, transparent);
    }
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-current, .text-current\/70 {
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-current\/70 {
      color: color-mix(in oklab, currentcolor 70%, transparent);
    }
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-destructive-foreground {
    color: var(--destructive-foreground);
  }

  .text-destructive\/50 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/50 {
      color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .text-destructive\/70 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/70 {
      color: color-mix(in oklab, var(--destructive) 70%, transparent);
    }
  }

  .text-destructive\/80 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/80 {
      color: color-mix(in oklab, var(--destructive) 80%, transparent);
    }
  }

  .text-destructive\/90 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/90 {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-foreground, .text-foreground\/25 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/25 {
      color: color-mix(in oklab, var(--foreground) 25%, transparent);
    }
  }

  .text-foreground\/30 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/30 {
      color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .text-foreground\/35 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/35 {
      color: color-mix(in oklab, var(--foreground) 35%, transparent);
    }
  }

  .text-foreground\/40 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/40 {
      color: color-mix(in oklab, var(--foreground) 40%, transparent);
    }
  }

  .text-foreground\/45 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/45 {
      color: color-mix(in oklab, var(--foreground) 45%, transparent);
    }
  }

  .text-foreground\/50 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/50 {
      color: color-mix(in oklab, var(--foreground) 50%, transparent);
    }
  }

  .text-foreground\/55 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/55 {
      color: color-mix(in oklab, var(--foreground) 55%, transparent);
    }
  }

  .text-foreground\/60 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/60 {
      color: color-mix(in oklab, var(--foreground) 60%, transparent);
    }
  }

  .text-foreground\/65 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/65 {
      color: color-mix(in oklab, var(--foreground) 65%, transparent);
    }
  }

  .text-foreground\/70 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/70 {
      color: color-mix(in oklab, var(--foreground) 70%, transparent);
    }
  }

  .text-foreground\/75 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/75 {
      color: color-mix(in oklab, var(--foreground) 75%, transparent);
    }
  }

  .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-foreground\/85 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/85 {
      color: color-mix(in oklab, var(--foreground) 85%, transparent);
    }
  }

  .text-foreground\/90 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/90 {
      color: color-mix(in oklab, var(--foreground) 90%, transparent);
    }
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-info {
    color: var(--info);
  }

  .text-inherit {
    color: inherit;
  }

  .text-input {
    color: var(--input);
  }

  .text-modal-mask-foreground {
    color: var(--modal-mask-foreground);
  }

  .text-muted-foreground, .text-muted-foreground\/30 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/30 {
      color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .text-muted-foreground\/40 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/40 {
      color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .text-muted-foreground\/50 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/60 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/60 {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    }
  }

  .text-muted-foreground\/90 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/90 {
      color: color-mix(in oklab, var(--muted-foreground) 90%, transparent);
    }
  }

  .text-popover-foreground, .text-popover-foreground\/50 {
    color: var(--popover-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-popover-foreground\/50 {
      color: color-mix(in oklab, var(--popover-foreground) 50%, transparent);
    }
  }

  .text-popover-foreground\/70 {
    color: var(--popover-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-popover-foreground\/70 {
      color: color-mix(in oklab, var(--popover-foreground) 70%, transparent);
    }
  }

  .text-popover-foreground\/90 {
    color: var(--popover-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-popover-foreground\/90 {
      color: color-mix(in oklab, var(--popover-foreground) 90%, transparent);
    }
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-primary\/60 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/60 {
      color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .text-primary\/70 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/70 {
      color: color-mix(in oklab, var(--primary) 70%, transparent);
    }
  }

  .text-primary\/80 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/80 {
      color: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .text-purple-400 {
    color: var(--color-purple-400);
  }

  .text-rose-500 {
    color: var(--color-rose-500);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-sidebar-foreground, .text-sidebar-foreground\/60 {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sidebar-foreground\/60 {
      color: color-mix(in oklab, var(--sidebar-foreground) 60%, transparent);
    }
  }

  .text-sidebar-foreground\/70 {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sidebar-foreground\/70 {
      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
    }
  }

  .text-success {
    color: var(--success);
  }

  .text-success-foreground {
    color: var(--success-foreground);
  }

  .text-success\/80 {
    color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-success\/80 {
      color: color-mix(in oklab, var(--success) 80%, transparent);
    }
  }

  .text-tertiary {
    color: var(--text-tertiary);
  }

  .text-transparent {
    color: #0000;
  }

  .text-warning {
    color: var(--warning);
  }

  .text-warning-foreground {
    color: var(--warning-foreground);
  }

  .text-warning\/80 {
    color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-warning\/80 {
      color: color-mix(in oklab, var(--warning) 80%, transparent);
    }
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/85 {
    color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .text-workspace-display-mode-current-tag-foreground {
    color: var(--workspace-display-mode-current-tag-foreground);
  }

  .text-workspace-display-mode-mask-foreground, .text-workspace-display-mode-mask-foreground\/60 {
    color: var(--workspace-display-mode-mask-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-workspace-display-mode-mask-foreground\/60 {
      color: color-mix(in oklab, var(--workspace-display-mode-mask-foreground) 60%, transparent);
    }
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .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, );
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-foreground\/40 {
    -webkit-text-decoration-color: var(--foreground);
    -webkit-text-decoration-color: var(--foreground);
    text-decoration-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .decoration-foreground\/40 {
      -webkit-text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
      -webkit-text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
      text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
    }
  }

  .decoration-dotted {
    text-decoration-style: dotted;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .caret-transparent {
    caret-color: #0000;
  }

  .accent-foreground {
    accent-color: var(--foreground);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-35 {
    opacity: .35;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-45 {
    opacity: .45;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-55 {
    opacity: .55;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-65 {
    opacity: .65;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.04\] {
    opacity: .04;
  }

  .opacity-\[0\.07\] {
    opacity: .07;
  }

  .opacity-\[0\.12\] {
    opacity: .12;
  }

  .opacity-\[0\.13\] {
    opacity: .13;
  }

  .opacity-\[var\(--canvas-controls-text-muted-opacity\)\] {
    opacity: var(--canvas-controls-text-muted-opacity);
  }

  .bg-blend-color {
    background-blend-mode: color;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.4\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #0006);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #00000008);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.06\)\,0_0_0_1px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000000f), 0 0 0 1px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000001f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 1px 3px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_3px_8px_rgba\(0\,0\,0\,0\.10\)\] {
    --tw-shadow: 0 3px 8px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_10px_rgba\(0\,0\,0\,0\.14\)\] {
    --tw-shadow: 0 4px 10px var(--tw-shadow-color, #00000024);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 8px 32px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_16px_40px_rgba\(20\,22\,31\,0\.14\)\,0_3px_10px_rgba\(20\,22\,31\,0\.06\)\] {
    --tw-shadow: 0 16px 40px var(--tw-shadow-color, #14161f24), 0 3px 10px var(--tw-shadow-color, #14161f0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--canvas-shadow-dropdown\)\] {
    --tw-shadow: var(--canvas-shadow-dropdown);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--canvas-shadow-menu\)\] {
    --tw-shadow: var(--canvas-shadow-menu);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--canvas-shadow-panel\)\] {
    --tw-shadow: var(--canvas-shadow-panel);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--workflow-selected-shadow\)\] {
    --tw-shadow: var(--workflow-selected-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-brutalist {
    --tw-shadow: var(--brutalist-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-brutalist-sm {
    --tw-shadow: var(--brutalist-shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none\! {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-tab-active {
    --tw-shadow: var(--tab-active-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    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-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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-1 {
    --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-\[0\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + 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-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1.5px + 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);
  }

  .shadow-black\/10 {
    --tw-shadow-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/10 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[var\(--canvas-controls-bg\)\] {
    --tw-ring-color: var(--canvas-controls-bg);
  }

  .ring-\[var\(--topbar-bg\)\] {
    --tw-ring-color: var(--topbar-bg);
  }

  .ring-\[var\(--topbar-transparent-bg\)\] {
    --tw-ring-color: var(--topbar-transparent-bg);
  }

  .ring-background {
    --tw-ring-color: var(--background);
  }

  .ring-border, .ring-border\/60 {
    --tw-ring-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-border\/60 {
      --tw-ring-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .ring-brand-accent\/30 {
    --tw-ring-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-brand-accent\/30 {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
    }
  }

  .ring-card {
    --tw-ring-color: var(--card);
  }

  .ring-destructive\/20 {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-destructive\/20 {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .ring-destructive\/30 {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-destructive\/30 {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .ring-foreground, .ring-foreground\/5 {
    --tw-ring-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-foreground\/5 {
      --tw-ring-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .ring-foreground\/10 {
    --tw-ring-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-foreground\/10 {
      --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .ring-primary\/20 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/20 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .ring-primary\/30 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/30 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .ring-primary\/40 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/40 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .ring-ring, .ring-ring\/50 {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-ring\/50 {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-card {
    --tw-ring-offset-color: var(--card);
  }

  .ring-offset-popover {
    --tw-ring-offset-color: var(--popover);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .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, );
  }

  .brightness-50 {
    --tw-brightness: brightness(50%);
    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, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    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, );
  }

  .drop-shadow-\[0_1px_3px_var\(--canvas-video-control-shadow\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 3px var(--tw-drop-shadow-color, var(--canvas-video-control-shadow)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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, );
  }

  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    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, );
  }

  .drop-shadow-sm {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    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, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    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, );
  }

  .invert {
    --tw-invert: invert(100%);
    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\:drop-shadow\(var\(--canvas-media-icon-shadow\)\)\] {
    filter: drop-shadow(var(--canvas-media-icon-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, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[4px\] {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[6px\] {
    --tw-backdrop-blur: blur(6px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[8px\] {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[20px\] {
    --tw-backdrop-blur: blur(20px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-none {
    --tw-backdrop-blur:  ;
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .\!\[backdrop-filter\:none\] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .\!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 !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
  }

  .\!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 !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
  }

  .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-\[background-color\,border-color\,box-shadow\] {
    transition-property: background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,color\,transform\] {
    transition-property: background-color, border-color, color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,opacity\] {
    transition-property: background-color, border-color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,color\,transform\] {
    transition-property: background-color, color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,padding\] {
    transition-property: background-color, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,transform\] {
    transition-property: background-color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\] {
    transition-property: background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,background-color\,border-radius\] {
    transition-property: border-color, background-color, border-radius;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,background-color\,box-shadow\] {
    transition-property: border-color, background-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,transform\] {
    transition-property: border-color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\] {
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[box-shadow\,transform\] {
    transition-property: box-shadow, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[box-shadow\] {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[clip-path\,opacity\,box-shadow\] {
    transition-property: clip-path, opacity, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[clip-path\] {
    transition-property: clip-path;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,background-color\,border-color\,box-shadow\] {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,background-color\,opacity\] {
    transition-property: color, background-color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,opacity\] {
    transition-property: color, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[grid-template-rows\,opacity\] {
    transition-property: grid-template-rows, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[grid-template-rows\] {
    transition-property: grid-template-rows;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[height\] {
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\,transform\,background-color\,color\,border-radius\,padding\] {
    transition-property: left, transform, background-color, color, border-radius, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\,width\] {
    transition-property: left, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,background-color\] {
    transition-property: margin, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-height\,opacity\] {
    transition-property: max-height, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-height\] {
    transition-property: max-height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-width\,opacity\,margin\] {
    transition-property: max-width, opacity, margin;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,background-color\,color\] {
    transition-property: opacity, background-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,background-color\] {
    transition-property: opacity, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,colors\] {
    transition-property: opacity, colors;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,transform\,background-color\] {
    transition-property: opacity, transform, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,transform\] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[padding-left\] {
    transition-property: padding-left;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[padding\] {
    transition-property: padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[stroke-dashoffset\] {
    transition-property: stroke-dashoffset;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[top\] {
    transition-property: top;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,border-color\,box-shadow\] {
    transition-property: transform, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,box-shadow\,background-color\] {
    transition-property: transform, box-shadow, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,opacity\] {
    transition-property: transform, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,color\] {
    transition-property: width, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\,background-color\] {
    transition-property: width, height, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\] {
    transition-property: width, height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,opacity\,transform\] {
    transition-property: width, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    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-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    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));
  }

  .transition-none {
    transition-property: none;
  }

  .duration-0 {
    --tw-duration: 0s;
    transition-duration: 0s;
  }

  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-\[80ms\] {
    --tw-duration: 80ms;
    transition-duration: 80ms;
  }

  .duration-\[160ms\] {
    --tw-duration: .16s;
    transition-duration: .16s;
  }

  .duration-\[220ms\] {
    --tw-duration: .22s;
    transition-duration: .22s;
  }

  .duration-\[250ms\] {
    --tw-duration: .25s;
    transition-duration: .25s;
  }

  .duration-\[260ms\] {
    --tw-duration: .26s;
    transition-duration: .26s;
  }

  .ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
    --tw-ease: cubic-bezier(.16,1,.3,1);
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  }

  .ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\] {
    --tw-ease: cubic-bezier(.22,1,.36,1);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .\[transition-timing-function\:cubic-bezier\(0\.45\,0\,0\.2\,1\)\] {
    transition-timing-function: cubic-bezier(.45, 0, .2, 1);
  }

  .\[will-change\:scroll-position\] {
    will-change: scroll-position;
  }

  .will-change-transform {
    will-change: transform;
  }

  .contain-paint {
    --tw-contain-paint: paint;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .\[contain\:layout_style\] {
    contain: layout style;
  }

  .\[contain\:paint\] {
    contain: paint;
  }

  .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  .\!\[-webkit-backdrop-filter\:none\] {
    -webkit-backdrop-filter: none !important;
  }

  .\[--cell-size\:--spacing\(7\)\] {
    --cell-size: calc(var(--spacing) * 7);
  }

  .\[--tabs-track-inset\:3px\]\! {
    --tabs-track-inset: 3px !important;
  }

  .\[--tabs-track-radius\:12px\]\! {
    --tabs-track-radius: 12px !important;
  }

  .\[canvas\:attachment-debug\] {
    canvas: attachment-debug;
  }

  .\[canvas\:i2v-debug\] {
    canvas: i2v-debug;
  }

  .\[canvas\:popover-close-debug\] {
    canvas: popover-close-debug;
  }

  .\[scrollbar-color\:var\(--scrollbar-thumb\)_transparent\] {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  .\[scrollbar-gutter\:stable\] {
    scrollbar-gutter: stable;
  }

  .\[scrollbar-gutter\:stable_both-edges\] {
    scrollbar-gutter: stable both-edges;
  }

  .\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }

  .\[scrollbar-width\:thin\] {
    scrollbar-width: thin;
  }

  .\[stroke-dasharray\:4_2\] {
    stroke-dasharray: 4 2;
  }

  .fade-in {
    --tw-enter-opacity: 0;
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }

  .paused {
    animation-play-state: paused;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-left-1 {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .slide-in-from-left-4 {
    --tw-enter-translate-x: calc(4*var(--spacing)*-1);
  }

  .slide-in-from-right-4 {
    --tw-enter-translate-x: calc(4*var(--spacing));
  }

  .slide-in-from-top-1 {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .zoom-in {
    --tw-enter-scale: 0;
  }

  .zoom-out {
    --tw-exit-scale: 0;
  }

  .not-first\:mt-1:not(:first-child) {
    margin-top: calc(var(--spacing) * 1);
  }

  .not-first\:mt-3:not(:first-child) {
    margin-top: calc(var(--spacing) * 3);
  }

  .not-last\:\[border-bottom-width\:var\(--divider-width\)\]:not(:last-child) {
    border-bottom-width: var(--divider-width);
  }

  .group-focus-within\:pointer-events-auto:is(:where(.group):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\:hidden:is(:where(.group):focus-within *) {
    display: none;
  }

  .group-focus-within\:w-4:is(:where(.group):focus-within *) {
    width: calc(var(--spacing) * 4);
  }

  .group-focus-within\:w-5:is(:where(.group):focus-within *) {
    width: calc(var(--spacing) * 5);
  }

  .group-focus-within\:translate-y-0:is(:where(.group):focus-within *) {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-focus-within\:opacity-0:is(:where(.group):focus-within *) {
    opacity: 0;
  }

  .group-focus-within\:opacity-70:is(:where(.group):focus-within *) {
    opacity: .7;
  }

  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/assistant\:pointer-events-auto:is(:where(.group\/assistant):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/assistant\:opacity-100:is(:where(.group\/assistant):focus-within *), .group-focus-within\/markdown-media\:opacity-100:is(:where(.group\/markdown-media):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/tag\:pointer-events-auto:is(:where(.group\/tag):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/tag\:pr-5:is(:where(.group\/tag):focus-within *) {
    padding-right: calc(var(--spacing) * 5);
  }

  .group-focus-within\/tag\:opacity-100:is(:where(.group\/tag):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
      pointer-events: auto;
    }

    .group-hover\:mr-1\.5:is(:where(.group):hover *) {
      margin-right: calc(var(--spacing) * 1.5);
    }

    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:hidden:is(:where(.group):hover *) {
      display: none;
    }

    .group-hover\:w-4:is(:where(.group):hover *) {
      width: calc(var(--spacing) * 4);
    }

    .group-hover\:w-5:is(:where(.group):hover *) {
      width: calc(var(--spacing) * 5);
    }

    .group-hover\:translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-\[1\.02\]:is(:where(.group):hover *) {
      scale: 1.02;
    }

    .group-hover\:rotate-0:is(:where(.group):hover *) {
      rotate: 0deg;
    }

    .group-hover\:border-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_10\%\,transparent\)\]:is(:where(.group):hover *) {
      border-color: var(--sidebar-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_10\%\,transparent\)\]:is(:where(.group):hover *) {
        border-color: color-mix(in srgb,var(--sidebar-foreground) 10%,transparent);
      }
    }

    .group-hover\:border-foreground\/40:is(:where(.group):hover *) {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-foreground\/40:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
      }
    }

    .group-hover\:bg-\[color\:color-mix\(in_srgb\,color-mix\(in_srgb\,var\(--sidebar-accent\)_92\%\,var\(--brand-accent\)\)_88\%\,transparent\)\]:is(:where(.group):hover *) {
      background-color: var(--sidebar-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-\[color\:color-mix\(in_srgb\,color-mix\(in_srgb\,var\(--sidebar-accent\)_92\%\,var\(--brand-accent\)\)_88\%\,transparent\)\]:is(:where(.group):hover *) {
        background-color: color-mix(in srgb,color-mix(in srgb,var(--sidebar-accent) 92%,var(--brand-accent)) 88%,transparent);
      }
    }

    .group-hover\:bg-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent\)_92\%\,var\(--brand-accent\)\)\]:is(:where(.group):hover *) {
      background-color: var(--sidebar-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent\)_92\%\,var\(--brand-accent\)\)\]:is(:where(.group):hover *) {
        background-color: color-mix(in srgb,var(--sidebar-accent) 92%,var(--brand-accent));
      }
    }

    .group-hover\:bg-background:is(:where(.group):hover *) {
      background-color: var(--background);
    }

    .group-hover\:bg-black\/20:is(:where(.group):hover *) {
      background-color: #0003;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-black\/20:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
      }
    }

    .group-hover\:bg-foreground\/5:is(:where(.group):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-foreground\/5:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
      }
    }

    .group-hover\:bg-foreground\/10:is(:where(.group):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-foreground\/10:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
      }
    }

    .group-hover\:bg-foreground\/\[0\.04\]:is(:where(.group):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-foreground\/\[0\.04\]:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
      }
    }

    .group-hover\:bg-foreground\/\[0\.05\]:is(:where(.group):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-foreground\/\[0\.05\]:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
      }
    }

    .group-hover\:bg-sidebar\/20:is(:where(.group):hover *) {
      background-color: var(--sidebar);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-sidebar\/20:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--sidebar) 20%, transparent);
      }
    }

    .group-hover\:pr-13:is(:where(.group):hover *) {
      padding-right: calc(var(--spacing) * 13);
    }

    .group-hover\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent-foreground\)_76\%\,transparent\)\]:is(:where(.group):hover *) {
      color: var(--sidebar-accent-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent-foreground\)_76\%\,transparent\)\]:is(:where(.group):hover *) {
        color: color-mix(in srgb,var(--sidebar-accent-foreground) 76%,transparent);
      }
    }

    .group-hover\:text-brand-accent:is(:where(.group):hover *) {
      color: var(--brand-accent);
    }

    .group-hover\:text-foreground:is(:where(.group):hover *) {
      color: var(--foreground);
    }

    .group-hover\:text-muted-foreground:is(:where(.group):hover *) {
      color: var(--muted-foreground);
    }

    .group-hover\:text-sidebar-accent-foreground\/70:is(:where(.group):hover *) {
      color: var(--sidebar-accent-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-sidebar-accent-foreground\/70:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--sidebar-accent-foreground) 70%, transparent);
      }
    }

    .group-hover\:text-sidebar-foreground:is(:where(.group):hover *) {
      color: var(--sidebar-foreground);
    }

    .group-hover\:opacity-0:is(:where(.group):hover *) {
      opacity: 0;
    }

    .group-hover\:opacity-70:is(:where(.group):hover *) {
      opacity: .7;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.06\)\]:is(:where(.group):hover *) {
      --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0000000f);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\:shadow-md:is(:where(.group):hover *) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-hover\/add\:opacity-0:is(:where(.group\/add):hover *) {
      opacity: 0;
    }

    .group-hover\/add\:opacity-100:is(:where(.group\/add):hover *) {
      opacity: 1;
    }

    .group-hover\/assistant\:pointer-events-auto:is(:where(.group\/assistant):hover *) {
      pointer-events: auto;
    }

    .group-hover\/assistant\:opacity-100:is(:where(.group\/assistant):hover *), .group-hover\/att\:opacity-100:is(:where(.group\/att):hover *), .group-hover\/audio\:opacity-100:is(:where(.group\/audio):hover *) {
      opacity: 1;
    }

    .group-hover\/avatar-trigger\:bg-foreground\/\[0\.04\]:is(:where(.group\/avatar-trigger):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/avatar-trigger\:bg-foreground\/\[0\.04\]:is(:where(.group\/avatar-trigger):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
      }
    }

    .group-hover\/avatar-trigger\:opacity-100:is(:where(.group\/avatar-trigger):hover *) {
      opacity: 1;
    }

    .group-hover\/chip\:flex:is(:where(.group\/chip):hover *) {
      display: flex;
    }

    .group-hover\/clear\:bg-muted-foreground:is(:where(.group\/clear):hover *) {
      background-color: var(--muted-foreground);
    }

    .group-hover\/clear\:text-background:is(:where(.group\/clear):hover *) {
      color: var(--background);
    }

    .group-hover\/credit\:opacity-100:is(:where(.group\/credit):hover *) {
      opacity: 1;
    }

    .group-hover\/download-all\:border-foreground\/50:is(:where(.group\/download-all):hover *) {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/download-all\:border-foreground\/50:is(:where(.group\/download-all):hover *) {
        border-color: color-mix(in oklab, var(--foreground) 50%, transparent);
      }
    }

    .group-hover\/file-chip\:scale-\[1\.03\]:is(:where(.group\/file-chip):hover *) {
      scale: 1.03;
    }

    .group-hover\/file-chip\:opacity-100:is(:where(.group\/file-chip):hover *) {
      opacity: 1;
    }

    .group-hover\/markdown-media\:opacity-90:is(:where(.group\/markdown-media):hover *) {
      opacity: .9;
    }

    .group-hover\/markdown-media\:opacity-100:is(:where(.group\/markdown-media):hover *) {
      opacity: 1;
    }

    .group-hover\/media\:block:is(:where(.group\/media):hover *) {
      display: block;
    }

    .group-hover\/panorama\:opacity-100:is(:where(.group\/panorama):hover *), .group-hover\/progress\:opacity-100:is(:where(.group\/progress):hover *), .group-hover\/prompt\:opacity-100:is(:where(.group\/prompt):hover *) {
      opacity: 1;
    }

    .group-hover\/queued-row\:text-foreground\/70:is(:where(.group\/queued-row):hover *) {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/queued-row\:text-foreground\/70:is(:where(.group\/queued-row):hover *) {
        color: color-mix(in oklab, var(--foreground) 70%, transparent);
      }
    }

    .group-hover\/reference\:pointer-events-auto:is(:where(.group\/reference):hover *) {
      pointer-events: auto;
    }

    .group-hover\/reference\:scale-\[1\.04\]:is(:where(.group\/reference):hover *) {
      scale: 1.04;
    }

    .group-hover\/reference\:opacity-100:is(:where(.group\/reference):hover *) {
      opacity: 1;
    }

    .group-hover\/resize\:bg-\[var\(--canvas-accent\,\#3b82f6\)\]:is(:where(.group\/resize):hover *) {
      background-color: var(--canvas-accent, #3b82f6);
    }

    .group-hover\/result\:border-border:is(:where(.group\/result):hover *) {
      border-color: var(--border);
    }

    .group-hover\/result\:text-foreground\/70:is(:where(.group\/result):hover *) {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/result\:text-foreground\/70:is(:where(.group\/result):hover *) {
        color: color-mix(in oklab, var(--foreground) 70%, transparent);
      }
    }

    .group-hover\/round-dot\:h-2:is(:where(.group\/round-dot):hover *) {
      height: calc(var(--spacing) * 2);
    }

    .group-hover\/round-dot\:bg-foreground\/25:is(:where(.group\/round-dot):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/round-dot\:bg-foreground\/25:is(:where(.group\/round-dot):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 25%, transparent);
      }
    }

    .group-hover\/round-dot\:bg-foreground\/55:is(:where(.group\/round-dot):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/round-dot\:bg-foreground\/55:is(:where(.group\/round-dot):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 55%, transparent);
      }
    }

    .group-hover\/row\:border-foreground:is(:where(.group\/row):hover *) {
      border-color: var(--foreground);
    }

    .group-hover\/row\:bg-foreground:is(:where(.group\/row):hover *) {
      background-color: var(--foreground);
    }

    .group-hover\/row\:opacity-60:is(:where(.group\/row):hover *) {
      opacity: .6;
    }

    .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
      opacity: 1;
    }

    .group-hover\/row-resize\:bg-\[var\(--canvas-accent\,\#3b82f6\)\]:is(:where(.group\/row-resize):hover *) {
      background-color: var(--canvas-accent, #3b82f6);
    }

    .group-hover\/step\:bg-foreground\/90:is(:where(.group\/step):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/step\:bg-foreground\/90:is(:where(.group\/step):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
      }
    }

    .group-hover\/step\:bg-secondary\/80:is(:where(.group\/step):hover *) {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/step\:bg-secondary\/80:is(:where(.group\/step):hover *) {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .group-hover\/step\:text-foreground:is(:where(.group\/step):hover *) {
      color: var(--foreground);
    }

    .group-hover\/sub\:bg-background:is(:where(.group\/sub):hover *) {
      background-color: var(--background);
    }

    .group-hover\/sub\:text-foreground:is(:where(.group\/sub):hover *) {
      color: var(--foreground);
    }

    .group-hover\/tab\:flex:is(:where(.group\/tab):hover *) {
      display: flex;
    }

    .group-hover\/tab\:hidden:is(:where(.group\/tab):hover *) {
      display: none;
    }

    .group-hover\/tab\:pr-5:is(:where(.group\/tab):hover *) {
      padding-right: calc(var(--spacing) * 5);
    }

    .group-hover\/tab\:opacity-100:is(:where(.group\/tab):hover *) {
      opacity: 1;
    }

    .group-hover\/tag\:pointer-events-auto:is(:where(.group\/tag):hover *) {
      pointer-events: auto;
    }

    .group-hover\/tag\:pr-5:is(:where(.group\/tag):hover *) {
      padding-right: calc(var(--spacing) * 5);
    }

    .group-hover\/tag\:opacity-100:is(:where(.group\/tag):hover *) {
      opacity: 1;
    }

    .group-hover\/thumb\:flex:is(:where(.group\/thumb):hover *) {
      display: flex;
    }

    .group-hover\/thumb\:hidden:is(:where(.group\/thumb):hover *) {
      display: none;
    }

    .group-hover\/user\:opacity-100:is(:where(.group\/user):hover *), .group-hover\/version\:opacity-100:is(:where(.group\/version):hover *) {
      opacity: 1;
    }
  }

  .group-focus\:bg-background:is(:where(.group):focus *) {
    background-color: var(--background);
  }

  .group-focus\:text-foreground:is(:where(.group):focus *) {
    color: var(--foreground);
  }

  .group-focus\/context-menu-item\:text-accent-foreground:is(:where(.group\/context-menu-item):focus *) {
    color: var(--accent-foreground);
  }

  .group-focus\/sub\:bg-background:is(:where(.group\/sub):focus *) {
    background-color: var(--background);
  }

  .group-focus\/sub\:text-foreground:is(:where(.group\/sub):focus *) {
    color: var(--foreground);
  }

  .group-focus-visible\/asset-view\:ring-2:is(:where(.group\/asset-view):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);
  }

  .group-focus-visible\/asset-view\:ring-ring:is(:where(.group\/asset-view):focus-visible *) {
    --tw-ring-color: var(--ring);
  }

  .group-focus-visible\/asset-view\:ring-offset-1:is(:where(.group\/asset-view):focus-visible *) {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .group-focus-visible\/asset-view\:ring-inset:is(:where(.group\/asset-view):focus-visible *) {
    --tw-ring-inset: inset;
  }

  .group-focus-visible\/download-all\:border-foreground\/50:is(:where(.group\/download-all):focus-visible *) {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-focus-visible\/download-all\:border-foreground\/50:is(:where(.group\/download-all):focus-visible *) {
      border-color: color-mix(in oklab, var(--foreground) 50%, transparent);
    }
  }

  .group-focus-visible\/keyword-delete\:opacity-100:is(:where(.group\/keyword-delete):focus-visible *) {
    opacity: 1;
  }

  .group-has-disabled\/field\:opacity-50:is(:where(.group\/field):has(:disabled) *) {
    opacity: .5;
  }

  .group-has-data-\[size\=lg\]\/avatar-group\:size-10:is(:where(.group\/avatar-group):has([data-size="lg"]) *) {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .group-has-data-\[size\=sm\]\/avatar-group\:size-6:is(:where(.group\/avatar-group):has([data-size="sm"]) *) {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .group-has-\[\>svg\]\/alert\:col-start-2:is(:where(.group\/alert):has( > svg) *) {
    grid-column-start: 2;
  }

  .group-aria-expanded\/accordion-trigger\:hidden:is(:where(.group\/accordion-trigger)[aria-expanded="true"] *) {
    display: none;
  }

  .group-aria-expanded\/accordion-trigger\:inline:is(:where(.group\/accordion-trigger)[aria-expanded="true"] *) {
    display: inline;
  }

  .group-aria-expanded\/accordion-trigger\:bg-brand-accent\/10:is(:where(.group\/accordion-trigger)[aria-expanded="true"] *) {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-aria-expanded\/accordion-trigger\:bg-brand-accent\/10:is(:where(.group\/accordion-trigger)[aria-expanded="true"] *) {
      background-color: color-mix(in oklab, var(--brand-accent) 10%, transparent);
    }
  }

  .group-aria-expanded\/accordion-trigger\:text-brand-accent:is(:where(.group\/accordion-trigger)[aria-expanded="true"] *) {
    color: var(--brand-accent);
  }

  .group-data-\[actions-compact\=true\]\/composer\:block:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    display: block;
  }

  .group-data-\[actions-compact\=true\]\/composer\:hidden:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    display: none;
  }

  .group-data-\[actions-compact\=true\]\/composer\:size-\[var\(--btn-height-sm\)\]:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
  }

  .group-data-\[actions-compact\=true\]\/composer\:justify-center:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    justify-content: center;
  }

  .group-data-\[actions-compact\=true\]\/composer\:gap-0:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    gap: calc(var(--spacing) * 0);
  }

  .group-data-\[actions-compact\=true\]\/composer\:p-0:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    padding: calc(var(--spacing) * 0);
  }

  .group-data-\[actions-compact\=true\]\/composer\:px-0:is(:where(.group\/composer)[data-actions-compact="true"] *) {
    padding-inline: calc(var(--spacing) * 0);
  }

  .group-data-\[active\]\:bg-brand-accent:is(:where(.group)[data-active] *) {
    background-color: var(--brand-accent);
  }

  .group-data-\[active\]\:text-brand-accent-foreground:is(:where(.group)[data-active] *) {
    color: var(--brand-accent-foreground);
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
    position: relative;
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
    z-index: 10;
  }

  .group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused="true"] *) {
    border-color: var(--ring);
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .group-data-\[indeterminate\]\/checkbox-indicator\:block:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
    display: block;
  }

  .group-data-\[indeterminate\]\/checkbox-indicator\:hidden:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
    display: none;
  }

  .group-data-\[size\=default\]\/avatar\:size-2\.5:is(:where(.group\/avatar)[data-size="default"] *) {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .group-data-\[size\=lg\]\/avatar\:size-3:is(:where(.group\/avatar)[data-size="lg"] *) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .group-data-\[size\=sm\]\/alert-dialog-content\:grid:is(:where(.group\/alert-dialog-content)[data-size="sm"] *) {
    display: grid;
  }

  .group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2:is(:where(.group\/alert-dialog-content)[data-size="sm"] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-data-\[size\=sm\]\/avatar\:size-2:is(:where(.group\/avatar)[data-size="sm"] *) {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .group-data-\[size\=sm\]\/avatar\:text-xs:is(:where(.group\/avatar)[data-size="sm"] *) {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .group-data-\[size\=sm\]\/card\:p-3:is(:where(.group\/card)[data-size="sm"] *) {
    padding: calc(var(--spacing) * 3);
  }

  .group-data-\[size\=sm\]\/card\:px-3:is(:where(.group\/card)[data-size="sm"] *) {
    padding-inline: calc(var(--spacing) * 3);
  }

  .group-data-\[size\=sm\]\/card\:text-sm:is(:where(.group\/card)[data-size="sm"] *) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .group-data-\[spacing\=0\]\/toggle-group\:rounded-sm:is(:where(.group\/toggle-group)[data-spacing="0"] *) {
    border-radius: calc(var(--radius) * .6);
  }

  .group-data-\[spacing\=0\]\/toggle-group\:px-2:is(:where(.group\/toggle-group)[data-spacing="0"] *) {
    padding-inline: calc(var(--spacing) * 2);
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-6::file-selector-button {
    height: calc(var(--spacing) * 6);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-xs::file-selector-button {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:truncate::placeholder {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .placeholder\:text-\[var\(--canvas-controls-text-muted\)\]::placeholder {
    color: var(--canvas-controls-text-muted);
  }

  .placeholder\:text-\[var\(--fg-disabled\,\#919191\)\]::placeholder {
    color: var(--fg-disabled, #919191);
  }

  .placeholder\:text-destructive\/65::placeholder {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-destructive\/65::placeholder {
      color: color-mix(in oklab, var(--destructive) 65%, transparent);
    }
  }

  .placeholder\:text-foreground\/30::placeholder {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-foreground\/30::placeholder {
      color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .placeholder\:text-foreground\/40::placeholder {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-foreground\/40::placeholder {
      color: color-mix(in oklab, var(--foreground) 40%, transparent);
    }
  }

  .placeholder\:text-muted-foreground::placeholder, .placeholder\:text-muted-foreground\/40::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/40::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .placeholder\:text-muted-foreground\/50::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/50::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .placeholder\:text-muted-foreground\/60::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/60::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .placeholder\:text-tertiary::placeholder {
    color: var(--text-tertiary);
  }

  .before\:pointer-events-none:before {
    content: var(--tw-content);
    pointer-events: none;
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:-inset-1:before {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -1);
  }

  .before\:-inset-y-1:before {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * -1);
  }

  .before\:inset-y-0:before {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0);
  }

  .before\:top-\[7px\]:before {
    content: var(--tw-content);
    top: 7px;
  }

  .before\:-right-1\.5:before {
    content: var(--tw-content);
    right: calc(var(--spacing) * -1.5);
  }

  .before\:right-0:before {
    content: var(--tw-content);
    right: calc(var(--spacing) * 0);
  }

  .before\:left-0:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .before\:left-\[calc\(var\(--hover-left\)_-_6px\)\]:before {
    content: var(--tw-content);
    left: calc(var(--hover-left) - 6px);
  }

  .before\:-z-10:before {
    content: var(--tw-content);
    z-index: calc(10 * -1);
  }

  .before\:size-\[3px\]:before {
    content: var(--tw-content);
    width: 3px;
    height: 3px;
  }

  .before\:w-10:before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 10);
  }

  .before\:rounded-full:before {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .before\:rounded-md:before {
    content: var(--tw-content);
    border-radius: calc(var(--radius) * .8);
  }

  .before\:rounded-r-md:before {
    content: var(--tw-content);
    border-top-right-radius: calc(var(--radius) * .8);
    border-bottom-right-radius: calc(var(--radius) * .8);
  }

  .before\:bg-\[var\(--home-sidebar-nav-active\)\]:before {
    content: var(--tw-content);
    background-color: var(--home-sidebar-nav-active);
  }

  .before\:bg-\[var\(--home-sidebar-nav-hover\)\]:before {
    content: var(--tw-content);
    background-color: var(--home-sidebar-nav-hover);
  }

  .before\:bg-border-soft:before {
    content: var(--tw-content);
    background-color: var(--border-soft);
  }

  .before\:bg-foreground\/\[0\.04\]:before {
    content: var(--tw-content);
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .before\:bg-foreground\/\[0\.04\]:before {
      background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
    }
  }

  .before\:bg-muted-foreground:before {
    content: var(--tw-content);
    background-color: var(--muted-foreground);
  }

  .before\:bg-transparent:before {
    content: var(--tw-content);
    background-color: #0000;
  }

  .before\:bg-gradient-to-l:before {
    content: var(--tw-content);
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .before\:from-secondary:before {
    content: var(--tw-content);
    --tw-gradient-from: var(--secondary);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .before\:via-secondary\/95:before {
    content: var(--tw-content);
    --tw-gradient-via: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .before\:via-secondary\/95:before {
      --tw-gradient-via: color-mix(in oklab, var(--secondary) 95%, transparent);
    }
  }

  .before\:via-secondary\/95:before {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .before\:to-transparent:before {
    content: var(--tw-content);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  @media (hover: hover) {
    .group-hover\:before\:bg-\[var\(--home-sidebar-nav-hover\)\]:is(:where(.group):hover *):before {
      content: var(--tw-content);
      background-color: var(--home-sidebar-nav-hover);
    }
  }

  .after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none;
  }

  .after\:invisible:after {
    content: var(--tw-content);
    visibility: hidden;
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2);
  }

  .after\:inset-0:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * 0);
  }

  .after\:-inset-x-1:after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * -1);
  }

  .after\:-inset-x-3:after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * -3);
  }

  .after\:inset-x-0:after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * 0);
  }

  .after\:-inset-y-2:after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * -2);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0);
  }

  .after\:right-0:after {
    content: var(--tw-content);
    right: calc(var(--spacing) * 0);
  }

  .after\:bottom-\[2px\]:after {
    content: var(--tw-content);
    bottom: 2px;
  }

  .after\:left-0:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .after\:col-start-1:after {
    content: var(--tw-content);
    grid-column-start: 1;
  }

  .after\:row-start-1:after {
    content: var(--tw-content);
    grid-row-start: 1;
  }

  .after\:h-px:after {
    content: var(--tw-content);
    height: 1px;
  }

  .after\:w-4:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 4);
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:border:after {
    content: var(--tw-content);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .after\:border-border:after {
    content: var(--tw-content);
    border-color: var(--border);
  }

  .after\:bg-current:after {
    content: var(--tw-content);
    background-color: currentColor;
  }

  .after\:bg-primary\/10:after {
    content: var(--tw-content);
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .after\:bg-primary\/10:after {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .after\:font-medium:after {
    content: var(--tw-content);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .after\:tracking-\[0\.005em\]:after {
    content: var(--tw-content);
    --tw-tracking: .005em;
    letter-spacing: .005em;
  }

  .after\:text-destructive:after {
    content: var(--tw-content);
    color: var(--destructive);
  }

  .after\:mix-blend-darken:after {
    content: var(--tw-content);
    mix-blend-mode: darken;
  }

  .after\:content-\[\'\*\'\]:after {
    --tw-content: "*";
    content: var(--tw-content);
  }

  .after\:content-\[attr\(data-label\)\]:after {
    --tw-content: attr(data-label);
    content: var(--tw-content);
  }

  .after\:select-none:after {
    content: var(--tw-content);
    -webkit-user-select: none;
    user-select: none;
  }

  .first\:mt-0:first-child {
    margin-top: calc(var(--spacing) * 0);
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .first\:pt-0:first-child {
    padding-top: calc(var(--spacing) * 0);
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:border-r-0:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .empty\:hidden:empty {
    display: none;
  }

  .focus-within\:pointer-events-auto:focus-within {
    pointer-events: auto;
  }

  .focus-within\:z-10:focus-within {
    z-index: 10;
  }

  .focus-within\:z-20:focus-within {
    z-index: 20;
  }

  .focus-within\:scale-\[1\.015\]:focus-within {
    scale: 1.015;
  }

  .focus-within\:overflow-visible:focus-within {
    overflow: visible;
  }

  .focus-within\:border-\[var\(--brutalist-border\)\]:focus-within {
    border-color: var(--brutalist-border);
  }

  .focus-within\:border-\[var\(--canvas-node-border-selected\)\]:focus-within {
    border-color: var(--canvas-node-border-selected);
  }

  .focus-within\:border-border-strong:focus-within {
    border-color: var(--border-strong);
  }

  .focus-within\:border-foreground:focus-within {
    border-color: var(--foreground);
  }

  .focus-within\:border-primary:focus-within {
    border-color: var(--primary);
  }

  .focus-within\:border-ring:focus-within {
    border-color: var(--ring);
  }

  .focus-within\:bg-accent:focus-within {
    background-color: var(--accent);
  }

  .focus-within\:bg-background:focus-within {
    background-color: var(--background);
  }

  .focus-within\:bg-card:focus-within {
    background-color: var(--card);
  }

  .focus-within\:bg-foreground\/\[0\.03\]:focus-within {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:bg-foreground\/\[0\.03\]:focus-within {
      background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
    }
  }

  .focus-within\:bg-muted\/80:focus-within {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:bg-muted\/80:focus-within {
      background-color: color-mix(in oklab, var(--muted) 80%, transparent);
    }
  }

  .focus-within\:bg-popup-item-hover:focus-within {
    background-color: var(--popup-item-hover);
  }

  .focus-within\:text-foreground:focus-within {
    color: var(--foreground);
  }

  .focus-within\:opacity-100:focus-within {
    opacity: 1;
  }

  .focus-within\:shadow-md:focus-within {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-0:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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-within\:ring-1:focus-within {
    --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);
  }

  .focus-within\:ring-2:focus-within {
    --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-within\:ring-\[0\.5px\]:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + 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-within\:ring-border-strong:focus-within {
    --tw-ring-color: var(--border-strong);
  }

  .focus-within\:ring-ring\/50:focus-within {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:ring-ring\/50:focus-within {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-within\:outline-none:focus-within {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-within\:ring-inset:focus-within {
    --tw-ring-inset: inset;
  }

  @media (hover: hover) {
    .hover\:z-10:hover {
      z-index: 10;
    }

    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-\[1\.03\]:hover {
      scale: 1.03;
    }

    .hover\:scale-\[1\.015\]:hover {
      scale: 1.015;
    }

    .hover\:cursor-not-allowed:hover {
      cursor: not-allowed;
    }

    .hover\:border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_50\%\,transparent\)\]:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_50\%\,transparent\)\]:hover {
        border-color: color-mix(in srgb,var(--foreground) 50%,transparent);
      }
    }

    .hover\:border-\[var\(--brutalist-border\)\]:hover {
      border-color: var(--brutalist-border);
    }

    .hover\:border-\[var\(--canvas-controls-text-muted\)\]:hover {
      border-color: var(--canvas-controls-text-muted);
    }

    .hover\:border-border:hover {
      border-color: var(--border);
    }

    .hover\:border-border-strong:hover {
      border-color: var(--border-strong);
    }

    .hover\:border-brand-accent:hover, .hover\:border-brand-accent\/30:hover {
      border-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-brand-accent\/30:hover {
        border-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
      }
    }

    .hover\:border-destructive:hover, .hover\:border-destructive\/40:hover {
      border-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-destructive\/40:hover {
        border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }

    .hover\:border-foreground:hover, .hover\:border-foreground\/15:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/15:hover {
        border-color: color-mix(in oklab, var(--foreground) 15%, transparent);
      }
    }

    .hover\:border-foreground\/20:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/20:hover {
        border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
      }
    }

    .hover\:border-foreground\/25:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/25:hover {
        border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
      }
    }

    .hover\:border-foreground\/25\!:hover {
      border-color: var(--foreground) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/25\!:hover {
        border-color: color-mix(in oklab, var(--foreground) 25%, transparent) !important;
      }
    }

    .hover\:border-foreground\/30:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/30:hover {
        border-color: color-mix(in oklab, var(--foreground) 30%, transparent);
      }
    }

    .hover\:border-foreground\/40:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/40:hover {
        border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
      }
    }

    .hover\:border-foreground\/80:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/80:hover {
        border-color: color-mix(in oklab, var(--foreground) 80%, transparent);
      }
    }

    .hover\:border-muted-foreground\/50:hover {
      border-color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-muted-foreground\/50:hover {
        border-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
      }
    }

    .hover\:border-warning\/70:hover {
      border-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-warning\/70:hover {
        border-color: color-mix(in oklab, var(--warning) 70%, transparent);
      }
    }

    .hover\:border-white:hover {
      border-color: var(--color-white);
    }

    .hover\:border-white\/20:hover {
      border-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/20:hover {
        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }

    .hover\:border-white\/35:hover {
      border-color: #ffffff59;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/35:hover {
        border-color: color-mix(in oklab, var(--color-white) 35%, transparent);
      }
    }

    .hover\:border-b-\[var\(--canvas-node-border\,\#e0e0e0\)\]:hover {
      border-bottom-color: var(--canvas-node-border, #e0e0e0);
    }

    .hover\:\!bg-tab-active-bg\/80:hover {
      background-color: var(--tab-active-bg) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-tab-active-bg\/80:hover {
        background-color: color-mix(in oklab, var(--tab-active-bg) 80%, transparent) !important;
      }
    }

    .hover\:bg-\[var\(--bg-subtle\,\#eee\)\]:hover {
      background-color: var(--bg-subtle, #eee);
    }

    .hover\:bg-\[var\(--bg-subtle\,\#f5f5f5\)\]:hover {
      background-color: var(--bg-subtle, #f5f5f5);
    }

    .hover\:bg-\[var\(--bg-subtle-hover\)\]:hover {
      background-color: var(--bg-subtle-hover);
    }

    .hover\:bg-\[var\(--bg-subtle-hover\,\#eee\)\]:hover {
      background-color: var(--bg-subtle-hover, #eee);
    }

    .hover\:bg-\[var\(--bg-surface\,\#fff\)\]:hover {
      background-color: var(--bg-surface, #fff);
    }

    .hover\:bg-\[var\(--canvas-controls-active\)\]:hover {
      background-color: var(--canvas-controls-active);
    }

    .hover\:bg-\[var\(--canvas-controls-hover\)\]:hover {
      background-color: var(--canvas-controls-hover);
    }

    .hover\:bg-\[var\(--canvas-controls-hover\,\#0000000d\)\]:hover {
      background-color: var(--canvas-controls-hover, #0000000d);
    }

    .hover\:bg-\[var\(--canvas-empty-action-bg-hover\)\]:hover {
      background-color: var(--canvas-empty-action-bg-hover);
    }

    .hover\:bg-\[var\(--canvas-media-control-bg-hover\)\]:hover {
      background-color: var(--canvas-media-control-bg-hover);
    }

    .hover\:bg-\[var\(--canvas-primary-btn-bg-hover\)\]:hover {
      background-color: var(--canvas-primary-btn-bg-hover);
    }

    .hover\:bg-\[var\(--canvas-video-control-hover\)\]:hover {
      background-color: var(--canvas-video-control-hover);
    }

    .hover\:bg-\[var\(--clip-studio-export-row-bg\)\]:hover {
      background-color: var(--clip-studio-export-row-bg);
    }

    .hover\:bg-\[var\(--message-input-attachment-bg-hover\)\]:hover {
      background-color: var(--message-input-attachment-bg-hover);
    }

    .hover\:bg-\[var\(--message-input-control-hover\)\]:hover {
      background-color: var(--message-input-control-hover);
    }

    .hover\:bg-\[var\(--topbar-tab-inactive-bg-hover\)\]:hover {
      background-color: var(--topbar-tab-inactive-bg-hover);
    }

    .hover\:bg-accent:hover, .hover\:bg-accent\/30:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/30:hover {
        background-color: color-mix(in oklab, var(--accent) 30%, transparent);
      }
    }

    .hover\:bg-accent\/50:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/50:hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }

    .hover\:bg-background:hover, .hover\:bg-background\/15:hover {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-background\/15:hover {
        background-color: color-mix(in oklab, var(--background) 15%, transparent);
      }
    }

    .hover\:bg-background\/20:hover {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-background\/20:hover {
        background-color: color-mix(in oklab, var(--background) 20%, transparent);
      }
    }

    .hover\:bg-background\/40:hover {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-background\/40:hover {
        background-color: color-mix(in oklab, var(--background) 40%, transparent);
      }
    }

    .hover\:bg-background\/80:hover {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-background\/80:hover {
        background-color: color-mix(in oklab, var(--background) 80%, transparent);
      }
    }

    .hover\:bg-black\/55:hover {
      background-color: #0000008c;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/55:hover {
        background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
      }
    }

    .hover\:bg-black\/60:hover {
      background-color: #0009;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/60:hover {
        background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
      }
    }

    .hover\:bg-black\/70:hover {
      background-color: #000000b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/70:hover {
        background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
      }
    }

    .hover\:bg-black\/80:hover {
      background-color: #000c;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/80:hover {
        background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
      }
    }

    .hover\:bg-brand-accent:hover, .hover\:bg-brand-accent\/10:hover {
      background-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-brand-accent\/10:hover {
        background-color: color-mix(in oklab, var(--brand-accent) 10%, transparent);
      }
    }

    .hover\:bg-brand-accent\/15:hover {
      background-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-brand-accent\/15:hover {
        background-color: color-mix(in oklab, var(--brand-accent) 15%, transparent);
      }
    }

    .hover\:bg-brand-accent\/90:hover {
      background-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-brand-accent\/90:hover {
        background-color: color-mix(in oklab, var(--brand-accent) 90%, transparent);
      }
    }

    .hover\:bg-card:hover, .hover\:bg-card\/80:hover {
      background-color: var(--card);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-card\/80:hover {
        background-color: color-mix(in oklab, var(--card) 80%, transparent);
      }
    }

    .hover\:bg-destructive:hover, .hover\:bg-destructive\/5:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/5:hover {
        background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
      }
    }

    .hover\:bg-destructive\/10:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/10:hover {
        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
      }
    }

    .hover\:bg-destructive\/20:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/20:hover {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }

    .hover\:bg-foreground:hover, .hover\:bg-foreground\/5:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/5:hover {
        background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
      }
    }

    .hover\:bg-foreground\/8:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/8:hover {
        background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
      }
    }

    .hover\:bg-foreground\/10:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/10:hover {
        background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
      }
    }

    .hover\:bg-foreground\/60:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/60:hover {
        background-color: color-mix(in oklab, var(--foreground) 60%, transparent);
      }
    }

    .hover\:bg-foreground\/80:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/80:hover {
        background-color: color-mix(in oklab, var(--foreground) 80%, transparent);
      }
    }

    .hover\:bg-foreground\/90:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/90:hover {
        background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.1\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.1\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.02\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.02\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 2%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.03\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.03\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.03\]\!:hover {
      background-color: var(--foreground) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.03\]\!:hover {
        background-color: color-mix(in oklab, var(--foreground) 3%, transparent) !important;
      }
    }

    .hover\:bg-foreground\/\[0\.04\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.04\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.05\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.05\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.06\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.06\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.07\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.07\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 7.0%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.08\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.08\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.12\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.12\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 12%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.025\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.025\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 2.5%, transparent);
      }
    }

    .hover\:bg-foreground\/\[0\.055\]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/\[0\.055\]:hover {
        background-color: color-mix(in oklab, var(--foreground) 5.5%, transparent);
      }
    }

    .hover\:bg-muted:hover {
      background-color: var(--muted);
    }

    .hover\:bg-muted-foreground:hover, .hover\:bg-muted-foreground\/25:hover {
      background-color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted-foreground\/25:hover {
        background-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
      }
    }

    .hover\:bg-muted\/30:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/30:hover {
        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
      }
    }

    .hover\:bg-muted\/40:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/40:hover {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
      }
    }

    .hover\:bg-muted\/45:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/45:hover {
        background-color: color-mix(in oklab, var(--muted) 45%, transparent);
      }
    }

    .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-muted\/60:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/60:hover {
        background-color: color-mix(in oklab, var(--muted) 60%, transparent);
      }
    }

    .hover\:bg-muted\/80:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/80:hover {
        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
      }
    }

    .hover\:bg-muted\/90:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/90:hover {
        background-color: color-mix(in oklab, var(--muted) 90%, transparent);
      }
    }

    .hover\:bg-popover:hover {
      background-color: var(--popover);
    }

    .hover\:bg-popup-item-active:hover {
      background-color: var(--popup-item-active);
    }

    .hover\:bg-popup-item-hover:hover {
      background-color: var(--popup-item-hover);
    }

    .hover\:bg-primary\/30:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/30:hover {
        background-color: color-mix(in oklab, var(--primary) 30%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

    .hover\:bg-red-500\/80:hover {
      background-color: #fb2c36cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-500\/80:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 80%, transparent);
      }
    }

    .hover\:bg-secondary:hover, .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .hover\:bg-sidebar:hover {
      background-color: var(--sidebar);
    }

    .hover\:bg-success\/85:hover {
      background-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-success\/85:hover {
        background-color: color-mix(in oklab, var(--success) 85%, transparent);
      }
    }

    .hover\:bg-transparent:hover {
      background-color: #0000;
    }

    .hover\:bg-transparent\!:hover {
      background-color: #0000 !important;
    }

    .hover\:bg-warning\/10:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/10:hover {
        background-color: color-mix(in oklab, var(--warning) 10%, transparent);
      }
    }

    .hover\:bg-warning\/15:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/15:hover {
        background-color: color-mix(in oklab, var(--warning) 15%, transparent);
      }
    }

    .hover\:bg-warning\/\[\.22\]:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/\[\.22\]:hover {
        background-color: color-mix(in oklab, var(--warning) 22%, transparent);
      }
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:pl-6:hover {
      padding-left: calc(var(--spacing) * 6);
    }

    .hover\:text-\[var\(--canvas-controls-text\)\]:hover {
      color: var(--canvas-controls-text);
    }

    .hover\:text-\[var\(--canvas-controls-text\,\#fff\)\]:hover {
      color: var(--canvas-controls-text, #fff);
    }

    .hover\:text-\[var\(--fg-default\,\#141414\)\]:hover {
      color: var(--fg-default, #141414);
    }

    .hover\:text-\[var\(--muted-foreground\)\]:hover {
      color: var(--muted-foreground);
    }

    .hover\:text-\[var\(--topbar-icon-fg-hover\)\]:hover {
      color: var(--topbar-icon-fg-hover);
    }

    .hover\:text-\[var\(--topbar-tab-inactive-fg-hover\)\]:hover {
      color: var(--topbar-tab-inactive-fg-hover);
    }

    .hover\:text-\[var\(--workflow-learning-banner-foreground\)\]:hover {
      color: var(--workflow-learning-banner-foreground);
    }

    .hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }

    .hover\:text-background:hover {
      color: var(--background);
    }

    .hover\:text-brand-accent:hover {
      color: var(--brand-accent);
    }

    .hover\:text-brand-accent-foreground:hover {
      color: var(--brand-accent-foreground);
    }

    .hover\:text-brand-accent\/80:hover {
      color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-brand-accent\/80:hover {
        color: color-mix(in oklab, var(--brand-accent) 80%, transparent);
      }
    }

    .hover\:text-destructive:hover {
      color: var(--destructive);
    }

    .hover\:text-destructive-foreground:hover {
      color: var(--destructive-foreground);
    }

    .hover\:text-foreground:hover, .hover\:text-foreground\/60:hover {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-foreground\/60:hover {
        color: color-mix(in oklab, var(--foreground) 60%, transparent);
      }
    }

    .hover\:text-foreground\/65:hover {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-foreground\/65:hover {
        color: color-mix(in oklab, var(--foreground) 65%, transparent);
      }
    }

    .hover\:text-foreground\/70:hover {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-foreground\/70:hover {
        color: color-mix(in oklab, var(--foreground) 70%, transparent);
      }
    }

    .hover\:text-muted-foreground:hover {
      color: var(--muted-foreground);
    }

    .hover\:text-popover-foreground:hover {
      color: var(--popover-foreground);
    }

    .hover\:text-sidebar-foreground:hover {
      color: var(--sidebar-foreground);
    }

    .hover\:text-warning:hover {
      color: var(--warning);
    }

    .hover\:text-warning-foreground:hover {
      color: var(--warning-foreground);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:decoration-foreground:hover {
      -webkit-text-decoration-color: var(--foreground);
      -webkit-text-decoration-color: var(--foreground);
      text-decoration-color: var(--foreground);
    }

    .hover\:\!opacity-100:hover {
      opacity: 1 !important;
    }

    .hover\:opacity-35:hover {
      opacity: .35;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-85:hover {
      opacity: .85;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-95:hover {
      opacity: .95;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.06\)\]:hover {
      --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0000000f);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[var\(--canvas-shadow-dropdown\)\]:hover {
      --tw-shadow: var(--canvas-shadow-dropdown);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      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-1:hover {
      --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);
    }

    .hover\:ring-\[0\.5px\]:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + 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-border-strong:hover {
      --tw-ring-color: var(--border-strong);
    }

    .hover\:ring-foreground\/30:hover {
      --tw-ring-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:ring-foreground\/30:hover {
        --tw-ring-color: color-mix(in oklab, var(--foreground) 30%, transparent);
      }
    }

    .hover\:ring-inset:hover {
      --tw-ring-inset: inset;
    }

    .hover\:before\:bg-\[var\(--home-sidebar-nav-hover\)\]:hover:before {
      content: var(--tw-content);
      background-color: var(--home-sidebar-nav-hover);
    }

    .hover\:before\:bg-muted:hover:before {
      content: var(--tw-content);
      background-color: var(--muted);
    }
  }

  .focus\:z-10:focus {
    z-index: 10;
  }

  .focus\:border-\[var\(--canvas-controls-text\)\]:focus {
    border-color: var(--canvas-controls-text);
  }

  .focus\:border-\[var\(--canvas-node-border-selected\)\]:focus {
    border-color: var(--canvas-node-border-selected);
  }

  .focus\:border-\[var\(--canvas-node-border-selected\,\#141414\)\]:focus {
    border-color: var(--canvas-node-border-selected, #141414);
  }

  .focus\:border-\[var\(--fg-default\,\#141414\)\]:focus {
    border-color: var(--fg-default, #141414);
  }

  .focus\:border-destructive:focus {
    border-color: var(--destructive);
  }

  .focus\:border-primary\/50:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/50:focus {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .focus\:border-ring\/50:focus {
    border-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-ring\/50:focus {
      border-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus\:border-b-\[var\(--fg-default\,\#141414\)\]:focus {
    border-bottom-color: var(--fg-default, #141414);
  }

  .focus\:bg-\[var\(--canvas-controls-hover\)\]:focus {
    background-color: var(--canvas-controls-hover);
  }

  .focus\:bg-background:focus {
    background-color: var(--background);
  }

  .focus\:bg-foreground\/\[0\.03\]:focus {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:bg-foreground\/\[0\.03\]:focus {
      background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
    }
  }

  .focus\:bg-popup-item-hover:focus {
    background-color: var(--popup-item-hover);
  }

  .focus\:bg-popup-item-hover\!:focus {
    background-color: var(--popup-item-hover) !important;
  }

  .focus\:bg-transparent:focus {
    background-color: #0000;
  }

  .focus\:text-destructive:focus {
    color: var(--destructive);
  }

  .focus\:text-foreground:focus {
    color: var(--foreground);
  }

  .focus\:text-foreground\!:focus {
    color: var(--foreground) !important;
  }

  .focus\:opacity-100:focus {
    opacity: 1;
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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\:ring-1:focus {
    --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);
  }

  .focus\:ring-ring\/30:focus {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-ring\/30:focus {
      --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  :is(.not-data-\[variant\=destructive\]\:focus\:\*\*\:text-foreground:not([data-variant="destructive"]):focus *) {
    color: var(--foreground);
  }

  .focus-visible\:pointer-events-auto:focus-visible {
    pointer-events: auto;
  }

  .focus-visible\:z-10:focus-visible {
    z-index: 10;
  }

  .focus-visible\:flex:focus-visible {
    display: flex;
  }

  .focus-visible\:translate-y-0:focus-visible {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .focus-visible\:border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_50\%\,transparent\)\]:focus-visible {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-\[color\:color-mix\(in_srgb\,var\(--foreground\)_50\%\,transparent\)\]:focus-visible {
      border-color: color-mix(in srgb,var(--foreground) 50%,transparent);
    }
  }

  .focus-visible\:border-brand-accent:focus-visible, .focus-visible\:border-brand-accent\/30:focus-visible {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-brand-accent\/30:focus-visible {
      border-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
    }
  }

  .focus-visible\:border-brand-accent\/40:focus-visible {
    border-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-brand-accent\/40:focus-visible {
      border-color: color-mix(in oklab, var(--brand-accent) 40%, transparent);
    }
  }

  .focus-visible\:border-destructive\/40:focus-visible {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-destructive\/40:focus-visible {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .focus-visible\:border-foreground:focus-visible {
    border-color: var(--foreground);
  }

  .focus-visible\:border-ring:focus-visible, .focus-visible\:border-ring\/60:focus-visible {
    border-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-ring\/60:focus-visible {
      border-color: color-mix(in oklab, var(--ring) 60%, transparent);
    }
  }

  .focus-visible\:border-transparent:focus-visible {
    border-color: #0000;
  }

  .focus-visible\:border-transparent\!:focus-visible {
    border-color: #0000 !important;
  }

  .focus-visible\:bg-accent\/40:focus-visible {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-accent\/40:focus-visible {
      background-color: color-mix(in oklab, var(--accent) 40%, transparent);
    }
  }

  .focus-visible\:bg-brand-accent\/5:focus-visible {
    background-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-brand-accent\/5:focus-visible {
      background-color: color-mix(in oklab, var(--brand-accent) 5%, transparent);
    }
  }

  .focus-visible\:bg-destructive:focus-visible, .focus-visible\:bg-destructive\/10:focus-visible {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-destructive\/10:focus-visible {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .focus-visible\:bg-foreground:focus-visible, .focus-visible\:bg-foreground\/\[0\.03\]:focus-visible {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-foreground\/\[0\.03\]:focus-visible {
      background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
    }
  }

  .focus-visible\:bg-foreground\/\[0\.04\]:focus-visible {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-foreground\/\[0\.04\]:focus-visible {
      background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
    }
  }

  .focus-visible\:bg-muted:focus-visible, .focus-visible\:bg-muted\/30:focus-visible {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-muted\/30:focus-visible {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .focus-visible\:bg-popup-item-hover:focus-visible {
    background-color: var(--popup-item-hover);
  }

  .focus-visible\:bg-transparent:focus-visible {
    background-color: #0000;
  }

  .focus-visible\:bg-white\/10:focus-visible {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:bg-white\/10:focus-visible {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .focus-visible\:stroke-foreground:focus-visible {
    stroke: var(--foreground);
  }

  .focus-visible\:pr-13:focus-visible {
    padding-right: calc(var(--spacing) * 13);
  }

  .focus-visible\:text-destructive-foreground:focus-visible {
    color: var(--destructive-foreground);
  }

  .focus-visible\:text-foreground:focus-visible, .focus-visible\:text-foreground\/70:focus-visible {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:text-foreground\/70:focus-visible {
      color: color-mix(in oklab, var(--foreground) 70%, transparent);
    }
  }

  .focus-visible\:\!opacity-100:focus-visible {
    opacity: 1 !important;
  }

  .focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .focus-visible\:shadow-none:focus-visible {
    --tw-shadow: 0 0 #0000;
    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-0:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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-0\!:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .focus-visible\:ring-1:focus-visible {
    --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);
  }

  .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-3:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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-\[0\.5px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + 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-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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-\[var\(--canvas-controls-border\)\]:focus-visible {
    --tw-ring-color: var(--canvas-controls-border);
  }

  .focus-visible\:ring-\[var\(--canvas-controls-text\)\]:focus-visible {
    --tw-ring-color: var(--canvas-controls-text);
  }

  .focus-visible\:ring-\[var\(--canvas-node-border-selected\)\]:focus-visible {
    --tw-ring-color: var(--canvas-node-border-selected);
  }

  .focus-visible\:ring-brand-accent\/30:focus-visible {
    --tw-ring-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-brand-accent\/30:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
    }
  }

  .focus-visible\:ring-brand-accent\/35:focus-visible {
    --tw-ring-color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-brand-accent\/35:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent) 35%, transparent);
    }
  }

  .focus-visible\:ring-current\/50:focus-visible {
    --tw-ring-color: currentcolor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-current\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-foreground:focus-visible {
    --tw-ring-color: var(--foreground);
  }

  .focus-visible\:ring-info\/20:focus-visible {
    --tw-ring-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-info\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--info) 20%, transparent);
    }
  }

  .focus-visible\:ring-ring:focus-visible, .focus-visible\:ring-ring\/35:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/35:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 35%, transparent);
    }
  }

  .focus-visible\:ring-ring\/40:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/40:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 40%, transparent);
    }
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:ring-success\/20:focus-visible {
    --tw-ring-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-success\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--success) 20%, transparent);
    }
  }

  .focus-visible\:ring-warning\/20:focus-visible {
    --tw-ring-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-warning\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .focus-visible\:ring-warning\/30:focus-visible {
    --tw-ring-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-warning\/30:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .focus-visible\:ring-white:focus-visible {
    --tw-ring-color: var(--color-white);
  }

  .focus-visible\:ring-white\/60:focus-visible {
    --tw-ring-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-white\/60:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .focus-visible\:ring-white\/80:focus-visible {
    --tw-ring-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-white\/80:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .focus-visible\:ring-offset-0:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: var(--background);
  }

  .focus-visible\:outline-hidden:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus-visible\:outline-hidden:focus-visible {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .focus-visible\:after\:border-ring:focus-visible:after {
    content: var(--tw-content);
    border-color: var(--ring);
  }

  .active\:\!-translate-y-1\/2:active {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1) !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .active\:\!translate-y-0:active {
    --tw-translate-y: calc(var(--spacing) * 0) !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .active\:scale-90:active {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-primary\/50:active {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-primary\/50:active {
      background-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .active\:opacity-90:active {
    opacity: .9;
  }

  .active\:opacity-100:active {
    opacity: 1;
  }

  .active\:ring-1:active {
    --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);
  }

  .active\:not-aria-\[haspopup\]\:translate-y-0:active:not([aria-haspopup]) {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  @media (hover: hover) {
    .hover\:enabled\:border-\[var\(--canvas-node-border-selected\)\]:hover:enabled {
      border-color: var(--canvas-node-border-selected);
    }

    .hover\:enabled\:bg-\[var\(--canvas-controls-hover\)\]:hover:enabled {
      background-color: var(--canvas-controls-hover);
    }

    .hover\:enabled\:text-\[var\(--canvas-controls-text\)\]:hover:enabled {
      color: var(--canvas-controls-text);
    }

    .hover\:enabled\:text-foreground:hover:enabled {
      color: var(--foreground);
    }

    .hover\:enabled\:opacity-90:hover:enabled {
      opacity: .9;
    }

    .hover\:enabled\:opacity-100:hover:enabled {
      opacity: 1;
    }

    .hover\:enabled\:shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.18\)\]:hover:enabled {
      --tw-shadow: 0 1px 3px var(--tw-shadow-color, #0000002e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-default:disabled {
    cursor: default;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:cursor-wait:disabled {
    cursor: wait;
  }

  .disabled\:bg-input\/50:disabled {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:bg-input\/50:disabled {
      background-color: color-mix(in oklab, var(--input) 50%, transparent);
    }
  }

  .disabled\:bg-transparent:disabled {
    background-color: #0000;
  }

  .disabled\:text-brand-accent\/60:disabled {
    color: var(--brand-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:text-brand-accent\/60:disabled {
      color: color-mix(in oklab, var(--brand-accent) 60%, transparent);
    }
  }

  .disabled\:text-foreground\/30:disabled {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:text-foreground\/30:disabled {
      color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .disabled\:text-muted-foreground:disabled, .disabled\:text-muted-foreground\/50:disabled {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:text-muted-foreground\/50:disabled {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .disabled\:opacity-0:disabled {
    opacity: 0;
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-35:disabled {
    opacity: .35;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-55:disabled {
    opacity: .55;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  .disabled\:opacity-100:disabled {
    opacity: 1;
  }

  @media (hover: hover) {
    .disabled\:hover\:border-white\/10:disabled:hover {
      border-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .disabled\:hover\:border-white\/10:disabled:hover {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .disabled\:hover\:bg-black\/55:disabled:hover {
      background-color: #0000008c;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .disabled\:hover\:bg-black\/55:disabled:hover {
        background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
      }
    }

    .disabled\:hover\:bg-transparent:disabled:hover {
      background-color: #0000;
    }

    .disabled\:hover\:text-muted-foreground:disabled:hover {
      color: var(--muted-foreground);
    }

    .disabled\:hover\:text-white\/85:disabled:hover {
      color: #ffffffd9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .disabled\:hover\:text-white\/85:disabled:hover {
        color: color-mix(in oklab, var(--color-white) 85%, transparent);
      }
    }

    .disabled\:hover\:shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.03\)\]:disabled:hover {
      --tw-shadow: 0 1px 2px var(--tw-shadow-color, #00000008);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .disabled\:active\:scale-100:disabled:active {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  :where([data-slot="card-content"]) .in-data-\[slot\=card-content\]\:bg-transparent, :where([data-slot="popover-content"]) .in-data-\[slot\=popover-content\]\:bg-transparent {
    background-color: #0000;
  }

  :where([data-slot="tooltip-content"]) .in-data-\[slot\=tooltip-content\]\:bg-background\/20 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where([data-slot="tooltip-content"]) .in-data-\[slot\=tooltip-content\]\:bg-background\/20 {
      background-color: color-mix(in oklab, var(--background) 20%, transparent);
    }
  }

  :where([data-slot="tooltip-content"]) .in-data-\[slot\=tooltip-content\]\:text-background {
    color: var(--background);
  }

  .has-focus-visible\:ring-2:has(: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);
  }

  .has-focus-visible\:ring-ring\/50:has(:focus-visible) {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-focus-visible\:ring-ring\/50:has(:focus-visible) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .has-disabled\:pointer-events-none:has(:disabled) {
    pointer-events: none;
  }

  .has-disabled\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .has-data-\[icon\=inline-end\]\:pr-2:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 2);
  }

  .group-data-\[spacing\=0\]\/toggle-group\:has-data-\[icon\=inline-end\]\:pr-1\.5:is(:where(.group\/toggle-group)[data-spacing="0"] *):has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .has-data-\[icon\=inline-start\]\:pl-2:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 2);
  }

  .group-data-\[spacing\=0\]\/toggle-group\:has-data-\[icon\=inline-start\]\:pl-1\.5:is(:where(.group\/toggle-group)[data-spacing="0"] *):has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .has-data-\[slot\=alert-action\]\:relative:has([data-slot="alert-action"]) {
    position: relative;
  }

  .has-data-\[slot\=alert-action\]\:pr-18:has([data-slot="alert-action"]) {
    padding-right: calc(var(--spacing) * 18);
  }

  .has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_auto_1fr\]:has([data-slot="alert-dialog-media"]) {
    grid-template-rows: auto auto 1fr;
  }

  .has-data-\[slot\=alert-dialog-media\]\:gap-x-6:has([data-slot="alert-dialog-media"]) {
    column-gap: calc(var(--spacing) * 6);
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-data-\[slot\=card-description\]\:grid-rows-\[auto_auto\]:has([data-slot="card-description"]) {
    grid-template-rows: auto auto;
  }

  .has-data-\[slot\=card-footer\]\:pb-0:has([data-slot="card-footer"]) {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .has-data-\[slot\=kbd\]\:pr-1\.5:has([data-slot="kbd"]) {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .has-\[\>img\:first-child\]\:pt-0:has( > img:first-child) {
    padding-top: calc(var(--spacing) * 0);
  }

  .has-\[\>svg\]\:grid-cols-\[auto_1fr\]:has( > svg) {
    grid-template-columns: auto 1fr;
  }

  .has-\[\>svg\]\:gap-x-2:has( > svg) {
    column-gap: calc(var(--spacing) * 2);
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
    cursor: not-allowed;
  }

  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: .5;
  }

  .aria-expanded\:bg-muted[aria-expanded="true"] {
    background-color: var(--muted);
  }

  .aria-expanded\:bg-secondary[aria-expanded="true"] {
    background-color: var(--secondary);
  }

  .aria-expanded\:bg-transparent[aria-expanded="true"] {
    background-color: #0000;
  }

  .aria-expanded\:text-foreground[aria-expanded="true"] {
    color: var(--foreground);
  }

  .aria-expanded\:text-muted-foreground[aria-expanded="true"] {
    color: var(--muted-foreground);
  }

  .aria-expanded\:text-secondary-foreground[aria-expanded="true"] {
    color: var(--secondary-foreground);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  .aria-invalid\:ring-0[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
  }

  .aria-invalid\:ring-1[aria-invalid="true"] {
    --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);
  }

  .aria-invalid\:ring-3[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .aria-invalid\:aria-checked\:border-primary[aria-invalid="true"][aria-checked="true"] {
    border-color: var(--primary);
  }

  .aria-pressed\:\!h-\[calc\(100\%-4px\)\][aria-pressed="true"] {
    height: calc(100% - 4px) !important;
  }

  .aria-pressed\:\!rounded-full[aria-pressed="true"] {
    border-radius: 3.40282e38px !important;
  }

  .aria-pressed\:bg-foreground\/10[aria-pressed="true"] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-pressed\:bg-foreground\/10[aria-pressed="true"] {
      background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .aria-pressed\:bg-muted[aria-pressed="true"] {
    background-color: var(--muted);
  }

  .aria-pressed\:font-medium[aria-pressed="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .aria-pressed\:text-foreground[aria-pressed="true"] {
    color: var(--foreground);
  }

  .aria-selected\:bg-tab-active-bg[aria-selected="true"] {
    background-color: var(--tab-active-bg);
  }

  .aria-selected\:text-foreground[aria-selected="true"] {
    color: var(--foreground);
  }

  .aria-selected\:text-muted-foreground[aria-selected="true"] {
    color: var(--muted-foreground);
  }

  .aria-selected\:shadow-tab-active[aria-selected="true"] {
    --tw-shadow: var(--tab-active-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-ending-style\:h-0[data-ending-style] {
    height: calc(var(--spacing) * 0);
  }

  .data-ending-style\:opacity-0[data-ending-style] {
    opacity: 0;
  }

  .data-highlighted\:bg-\[var\(--canvas-controls-hover\)\][data-highlighted] {
    background-color: var(--canvas-controls-hover);
  }

  .data-highlighted\:bg-transparent[data-highlighted] {
    background-color: #0000;
  }

  .data-inset\:pl-9\.5[data-inset] {
    padding-left: calc(var(--spacing) * 9.5);
  }

  .data-placeholder\:text-\[var\(--canvas-controls-text-muted\)\][data-placeholder] {
    color: var(--canvas-controls-text-muted);
  }

  .data-placeholder\:text-muted-foreground[data-placeholder] {
    color: var(--muted-foreground);
  }

  .data-popup-open\:bg-\[var\(--canvas-controls-active\)\][data-popup-open] {
    background-color: var(--canvas-controls-active);
  }

  .data-popup-open\:bg-\[var\(--canvas-controls-hover\)\][data-popup-open] {
    background-color: var(--canvas-controls-hover);
  }

  .data-popup-open\:text-\[var\(--canvas-controls-text\)\][data-popup-open] {
    color: var(--canvas-controls-text);
  }

  .data-starting-style\:h-0[data-starting-style] {
    height: calc(var(--spacing) * 0);
  }

  .data-starting-style\:opacity-0[data-starting-style] {
    opacity: 0;
  }

  .data-\[active\]\:border-transparent[data-active] {
    border-color: #0000;
  }

  .data-\[active\]\:bg-\[var\(--home-media-showcase-secondary-tab-active-bg\)\][data-active] {
    background-color: var(--home-media-showcase-secondary-tab-active-bg);
  }

  .data-\[active\]\:bg-muted-foreground\/15[data-active] {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[active\]\:bg-muted-foreground\/15[data-active] {
      background-color: color-mix(in oklab, var(--muted-foreground) 15%, transparent);
    }
  }

  .data-\[active\]\:bg-tab-active-bg[data-active] {
    background-color: var(--tab-active-bg);
  }

  .data-\[active\]\:bg-transparent[data-active] {
    background-color: #0000;
  }

  .data-\[active\]\:font-medium[data-active] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-\[active\]\:tracking-normal[data-active] {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .data-\[active\]\:text-foreground[data-active] {
    color: var(--foreground);
  }

  .data-\[active\]\:shadow-none[data-active] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[active\]\:shadow-tab-active[data-active] {
    --tw-shadow: var(--tab-active-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[align-trigger\=true\]\:animate-none[data-align-trigger="true"] {
    animation: none;
  }

  .data-\[checked\]\:translate-x-3[data-checked] {
    --tw-translate-x: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[checked\]\:translate-x-4[data-checked] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[checked\]\:bg-\[var\(--canvas-controls-bg\)\][data-checked] {
    background-color: var(--canvas-controls-bg);
  }

  .data-\[checked\]\:bg-\[var\(--canvas-node-border-selected\)\][data-checked] {
    background-color: var(--canvas-node-border-selected);
  }

  .data-\[checked\]\:bg-brand-accent[data-checked] {
    background-color: var(--brand-accent);
  }

  .data-\[checked\]\:bg-foreground\/65[data-checked] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[checked\]\:bg-foreground\/65[data-checked] {
      background-color: color-mix(in oklab, var(--foreground) 65%, transparent);
    }
  }

  @media (hover: hover) {
    .data-\[checked\]\:hover\:bg-brand-accent\/90[data-checked]:hover {
      background-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .data-\[checked\]\:hover\:bg-brand-accent\/90[data-checked]:hover {
        background-color: color-mix(in oklab, var(--brand-accent) 90%, transparent);
      }
    }

    .data-\[checked\]\:hover\:bg-foreground\/75[data-checked]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .data-\[checked\]\:hover\:bg-foreground\/75[data-checked]:hover {
        background-color: color-mix(in oklab, var(--foreground) 75%, transparent);
      }
    }
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-40[data-disabled] {
    opacity: .4;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[highlighted\]\:bg-popup-item-hover[data-highlighted] {
    background-color: var(--popup-item-hover);
  }

  .data-\[highlighted\]\:bg-popup-item-hover\![data-highlighted] {
    background-color: var(--popup-item-hover) !important;
  }

  .data-\[highlighted\]\:text-foreground[data-highlighted] {
    color: var(--foreground);
  }

  .data-\[highlighted\]\:text-foreground\![data-highlighted] {
    color: var(--foreground) !important;
  }

  .data-\[indeterminate\]\:border-primary[data-indeterminate] {
    border-color: var(--primary);
  }

  .data-\[indeterminate\]\:bg-primary[data-indeterminate] {
    background-color: var(--primary);
  }

  .data-\[indeterminate\]\:text-primary-foreground[data-indeterminate] {
    color: var(--primary-foreground);
  }

  .data-\[invalid\]\:border-destructive[data-invalid] {
    border-color: var(--destructive);
  }

  .data-\[invalid\]\:ring-1[data-invalid] {
    --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);
  }

  .data-\[invalid\]\:ring-destructive\/20[data-invalid] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[invalid\]\:ring-destructive\/20[data-invalid] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-\[popup-open\]\:pointer-events-auto[data-popup-open] {
    pointer-events: auto;
  }

  .data-\[popup-open\]\:bg-\[var\(--topbar-tab-inactive-bg-hover\)\][data-popup-open] {
    background-color: var(--topbar-tab-inactive-bg-hover);
  }

  .data-\[popup-open\]\:bg-foreground\/5[data-popup-open] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[popup-open\]\:bg-foreground\/5[data-popup-open] {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .data-\[popup-open\]\:bg-foreground\/\[0\.05\][data-popup-open] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[popup-open\]\:bg-foreground\/\[0\.05\][data-popup-open] {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .data-\[popup-open\]\:bg-foreground\/\[0\.06\][data-popup-open] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[popup-open\]\:bg-foreground\/\[0\.06\][data-popup-open] {
      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
    }
  }

  .data-\[popup-open\]\:bg-foreground\/\[0\.08\][data-popup-open] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[popup-open\]\:bg-foreground\/\[0\.08\][data-popup-open] {
      background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    }
  }

  .data-\[popup-open\]\:bg-popup-item-active[data-popup-open] {
    background-color: var(--popup-item-active);
  }

  .data-\[popup-open\]\:text-\[var\(--topbar-icon-fg-hover\)\][data-popup-open] {
    color: var(--topbar-icon-fg-hover);
  }

  .data-\[popup-open\]\:text-foreground[data-popup-open] {
    color: var(--foreground);
  }

  .data-\[popup-open\]\:opacity-100[data-popup-open] {
    opacity: 1;
  }

  .data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
    background-color: var(--primary);
  }

  .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
    color: var(--primary-foreground);
  }

  .data-\[range-middle\=true\]\:bg-muted[data-range-middle="true"] {
    background-color: var(--muted);
  }

  .data-\[range-middle\=true\]\:bg-primary\/10[data-range-middle="true"] {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[range-middle\=true\]\:bg-primary\/10[data-range-middle="true"] {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .data-\[range-middle\=true\]\:text-foreground[data-range-middle="true"] {
    color: var(--foreground);
  }

  .data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
    background-color: var(--primary);
  }

  .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
    color: var(--primary-foreground);
  }

  .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
    background-color: var(--primary);
  }

  .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
    color: var(--primary-foreground);
  }

  .data-\[selected\=true\]\:rounded-lg[data-selected="true"] {
    border-radius: var(--radius);
  }

  .data-\[selected\=true\]\:bg-popup-item-hover[data-selected="true"] {
    background-color: var(--popup-item-hover);
  }

  .data-\[side\=bottom\]\:inset-x-0[data-side="bottom"] {
    inset-inline: calc(var(--spacing) * 0);
  }

  .data-\[side\=bottom\]\:-top-1\.5[data-side="bottom"] {
    top: calc(var(--spacing) * -1.5);
  }

  .data-\[side\=bottom\]\:bottom-0[data-side="bottom"] {
    bottom: calc(var(--spacing) * 0);
  }

  .data-\[side\=bottom\]\:h-auto[data-side="bottom"] {
    height: auto;
  }

  .data-\[side\=bottom\]\:rotate-45[data-side="bottom"] {
    rotate: 45deg;
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=bottom\]\:data-ending-style\:translate-y-\[2\.5rem\][data-side="bottom"][data-ending-style], .data-\[side\=bottom\]\:data-starting-style\:translate-y-\[2\.5rem\][data-side="bottom"][data-starting-style] {
    --tw-translate-y: 2.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=inline-end\]\:slide-in-from-left-2[data-side="inline-end"] {
    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=inline-start\]\:slide-in-from-right-2[data-side="inline-start"] {
    --tw-enter-translate-x: calc(2*var(--spacing));
  }

  .data-\[side\=left\]\:inset-y-0[data-side="left"] {
    inset-block: calc(var(--spacing) * 0);
  }

  .data-\[side\=left\]\:-right-1\.5[data-side="left"] {
    right: calc(var(--spacing) * -1.5);
  }

  .data-\[side\=left\]\:left-0[data-side="left"] {
    left: calc(var(--spacing) * 0);
  }

  .data-\[side\=left\]\:h-full[data-side="left"] {
    height: 100%;
  }

  .data-\[side\=left\]\:w-3\/4[data-side="left"] {
    width: 75%;
  }

  .data-\[side\=left\]\:rotate-135[data-side="left"] {
    rotate: 135deg;
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2*var(--spacing));
  }

  .data-\[side\=left\]\:data-ending-style\:translate-x-\[-2\.5rem\][data-side="left"][data-ending-style], .data-\[side\=left\]\:data-starting-style\:translate-x-\[-2\.5rem\][data-side="left"][data-starting-style] {
    --tw-translate-x: -2.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:inset-y-0[data-side="right"] {
    inset-block: calc(var(--spacing) * 0);
  }

  .data-\[side\=right\]\:right-0[data-side="right"] {
    right: calc(var(--spacing) * 0);
  }

  .data-\[side\=right\]\:-left-1\.5[data-side="right"] {
    left: calc(var(--spacing) * -1.5);
  }

  .data-\[side\=right\]\:h-full[data-side="right"] {
    height: 100%;
  }

  .data-\[side\=right\]\:w-3\/4[data-side="right"] {
    width: 75%;
  }

  .data-\[side\=right\]\:-rotate-45[data-side="right"] {
    rotate: -45deg;
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=right\]\:data-ending-style\:translate-x-\[2\.5rem\][data-side="right"][data-ending-style], .data-\[side\=right\]\:data-starting-style\:translate-x-\[2\.5rem\][data-side="right"][data-starting-style] {
    --tw-translate-x: 2.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:inset-x-0[data-side="top"] {
    inset-inline: calc(var(--spacing) * 0);
  }

  .data-\[side\=top\]\:top-0[data-side="top"] {
    top: calc(var(--spacing) * 0);
  }

  .data-\[side\=top\]\:-bottom-1\.5[data-side="top"] {
    bottom: calc(var(--spacing) * -1.5);
  }

  .data-\[side\=top\]\:h-auto[data-side="top"] {
    height: auto;
  }

  .data-\[side\=top\]\:-rotate-135[data-side="top"] {
    rotate: -135deg;
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2*var(--spacing));
  }

  .data-\[side\=top\]\:data-ending-style\:translate-y-\[-2\.5rem\][data-side="top"][data-ending-style], .data-\[side\=top\]\:data-starting-style\:translate-y-\[-2\.5rem\][data-side="top"][data-starting-style] {
    --tw-translate-y: -2.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[size\=default\]\:h-8[data-size="default"] {
    height: calc(var(--spacing) * 8);
  }

  .data-\[size\=default\]\:h-10[data-size="default"] {
    height: calc(var(--spacing) * 10);
  }

  .data-\[size\=default\]\:max-w-xs[data-size="default"] {
    max-width: var(--container-xs);
  }

  .data-\[size\=lg\]\:size-10[data-size="lg"] {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .data-\[size\=sm\]\:size-6[data-size="sm"] {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .data-\[size\=sm\]\:h-7[data-size="sm"] {
    height: calc(var(--spacing) * 7);
  }

  .data-\[size\=sm\]\:max-w-xs[data-size="sm"] {
    max-width: var(--container-xs);
  }

  .data-\[size\=sm\]\:gap-2[data-size="sm"] {
    gap: calc(var(--spacing) * 2);
  }

  .data-\[size\=sm\]\:rounded-lg[data-size="sm"] {
    border-radius: var(--radius);
  }

  .data-\[size\=sm\]\:rounded-sm[data-size="sm"] {
    border-radius: calc(var(--radius) * .6);
  }

  .data-\[size\=sm\]\:py-3[data-size="sm"] {
    padding-block: calc(var(--spacing) * 3);
  }

  .data-\[size\=sm\]\:has-data-\[slot\=card-footer\]\:pb-0[data-size="sm"]:has([data-slot="card-footer"]) {
    padding-bottom: calc(var(--spacing) * 0);
  }

  :is(.\*\*\:data-\[slot\$\=-item\]\:focus\:bg-popup-item-hover *)[data-slot$="-item"]:focus, :is(.\*\*\:data-\[slot\$\=-item\]\:data-highlighted\:bg-popup-item-hover *)[data-slot$="-item"][data-highlighted] {
    background-color: var(--popup-item-hover);
  }

  :is(.\*\*\:data-\[slot\$\=-separator\]\:bg-foreground\/5 *)[data-slot$="-separator"] {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\*\:data-\[slot\$\=-separator\]\:bg-foreground\/5 *)[data-slot$="-separator"] {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  :is(.\*\*\:data-\[slot\$\=-trigger\]\:focus\:bg-popup-item-hover *)[data-slot$="-trigger"]:focus {
    background-color: var(--popup-item-hover);
  }

  :is(.\*\*\:data-\[slot\$\=-trigger\]\:aria-expanded\:bg-popup-item-active\! *)[data-slot$="-trigger"][aria-expanded="true"] {
    background-color: var(--popup-item-active) !important;
  }

  :is(.\*\*\:data-\[slot\=accordion-trigger-icon\]\:ml-auto *)[data-slot="accordion-trigger-icon"] {
    margin-left: auto;
  }

  :is(.\*\*\:data-\[slot\=accordion-trigger-icon\]\:size-4 *)[data-slot="accordion-trigger-icon"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  :is(.\*\*\:data-\[slot\=accordion-trigger-icon\]\:text-muted-foreground *)[data-slot="accordion-trigger-icon"] {
    color: var(--muted-foreground);
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=avatar\]\:ring-2 > *)[data-slot="avatar"] {
    --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);
  }

  :is(.\*\:data-\[slot\=avatar\]\:ring-background > *)[data-slot="avatar"] {
    --tw-ring-color: var(--background);
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:relative *)[data-slot="kbd"] {
    position: relative;
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:isolate *)[data-slot="kbd"] {
    isolation: isolate;
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:z-\[100\] *)[data-slot="kbd"] {
    z-index: 100;
  }

  :is(.\*\*\:data-\[slot\=kbd\]\:rounded-sm *)[data-slot="kbd"] {
    border-radius: calc(var(--radius) * .6);
  }

  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
    display: flex;
  }

  :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
    align-items: center;
  }

  :is(.\*\:data-\[slot\=select-value\]\:gap-1\.5 > *)[data-slot="select-value"] {
    gap: calc(var(--spacing) * 1.5);
  }

  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:first\:rounded-sm:is(:where(.group\/toggle-group):where([data-orientation="horizontal"]) *)[data-spacing="0"]:first-child, .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:first\:rounded-sm:is(:where(.group\/toggle-group):where([data-orientation="vertical"]) *)[data-spacing="0"]:first-child, .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:last\:rounded-sm:is(:where(.group\/toggle-group):where([data-orientation="horizontal"]) *)[data-spacing="0"]:last-child, .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:last\:rounded-sm:is(:where(.group\/toggle-group):where([data-orientation="vertical"]) *)[data-spacing="0"]:last-child {
    border-radius: calc(var(--radius) * .6);
  }

  .data-\[state\=delayed-open\]\:opacity-100[data-state="delayed-open"] {
    opacity: 1;
  }

  .data-\[state\=on\]\:bg-muted[data-state="on"] {
    background-color: var(--muted);
  }

  .data-\[unchecked\]\:translate-x-0[data-unchecked] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[unchecked\]\:bg-\[var\(--canvas-controls-border\)\][data-unchecked] {
    background-color: var(--canvas-controls-border);
  }

  .data-\[unchecked\]\:bg-\[var\(--canvas-controls-text\)\][data-unchecked] {
    background-color: var(--canvas-controls-text);
  }

  .data-\[unchecked\]\:bg-input[data-unchecked] {
    background-color: var(--input);
  }

  @media (hover: hover) {
    .data-\[unchecked\]\:hover\:bg-foreground\/15[data-unchecked]:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .data-\[unchecked\]\:hover\:bg-foreground\/15[data-unchecked]:hover {
        background-color: color-mix(in oklab, var(--foreground) 15%, transparent);
      }
    }
  }

  .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
    color: var(--destructive);
  }

  :is(:is(.\*\*\:data-\[variant\=destructive\]\:\*\*\:text-accent-foreground\! *)[data-variant="destructive"] *), :is(.\*\*\:data-\[variant\=destructive\]\:text-accent-foreground\! *)[data-variant="destructive"] {
    color: var(--accent-foreground) !important;
  }

  @media (hover: hover) {
    .data-\[variant\=destructive\]\:hover\:bg-destructive\/10[data-variant="destructive"]:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .data-\[variant\=destructive\]\:hover\:bg-destructive\/10[data-variant="destructive"]:hover {
        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
      }
    }

    .data-\[variant\=destructive\]\:hover\:text-destructive[data-variant="destructive"]:hover {
      color: var(--destructive);
    }
  }

  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
    color: var(--destructive);
  }

  :is(.\*\*\:data-\[variant\=destructive\]\:focus\:bg-popup-item-active\! *)[data-variant="destructive"]:focus {
    background-color: var(--popup-item-active) !important;
  }

  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-l-0:is(:where(.group\/toggle-group):where([data-orientation="horizontal"]) *)[data-spacing="0"][data-variant="outline"] {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-t-0:is(:where(.group\/toggle-group):where([data-orientation="vertical"]) *)[data-spacing="0"][data-variant="outline"] {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:\[border-left-width\:var\(--control-border-width\)\]:is(:where(.group\/toggle-group):where([data-orientation="horizontal"]) *)[data-spacing="0"][data-variant="outline"]:first-child {
    border-left-width: var(--control-border-width);
  }

  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:\[border-top-width\:var\(--control-border-width\)\]:is(:where(.group\/toggle-group):where([data-orientation="vertical"]) *)[data-spacing="0"][data-variant="outline"]:first-child {
    border-top-width: var(--control-border-width);
  }

  @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
    .supports-backdrop-filter\:backdrop-blur-xs {
      --tw-backdrop-blur: blur(var(--blur-xs));
      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    }

    .supports-\[backdrop-filter\]\:bg-popover\/45 {
      background-color: var(--popover);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-popover\/45 {
        background-color: color-mix(in oklab, var(--popover) 45%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
      background-color: var(--sidebar);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
        background-color: color-mix(in oklab, var(--sidebar) 70%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:backdrop-blur {
      --tw-backdrop-blur: blur(8px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-\[im-status-radar_3600ms_ease-out_infinite\] {
      animation: 3.6s ease-out infinite im-status-radar;
    }

    .motion-safe\:animate-\[im-step-line-flow_1400ms_linear_infinite\] {
      animation: 1.4s linear infinite im-step-line-flow;
    }

    .motion-safe\:animate-in {
      animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    }

    .motion-safe\:animate-pulse {
      animation: var(--animate-pulse);
    }

    .motion-safe\:transition-\[height\] {
      transition-property: height;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }

    .motion-safe\:duration-200 {
      --tw-duration: .2s;
      transition-duration: .2s;
    }

    .motion-safe\:duration-300 {
      --tw-duration: .3s;
      transition-duration: .3s;
    }

    .motion-safe\:ease-out {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }

    .motion-safe\:fade-in-0 {
      --tw-enter-opacity: 0;
    }

    .motion-safe\:zoom-in-95 {
      --tw-enter-scale: .95;
    }

    .motion-safe\:slide-in-from-bottom-1 {
      --tw-enter-translate-y: calc(1*var(--spacing));
    }

    .motion-safe\:slide-in-from-bottom-2 {
      --tw-enter-translate-y: calc(2*var(--spacing));
    }

    .motion-safe\:slide-in-from-left-2 {
      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
    }

    .motion-safe\:slide-in-from-right-2 {
      --tw-enter-translate-x: calc(2*var(--spacing));
    }

    .motion-safe\:slide-in-from-top-2 {
      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:translate-y-0 {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .motion-reduce\:transform-none {
      transform: none;
    }

    .motion-reduce\:animate-none {
      animation: none;
    }

    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .sm\:w-\[calc\(100\%\+1\.5rem\)\] {
      width: calc(100% + 1.5rem);
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:\!max-w-2xl {
      max-width: var(--container-2xl) !important;
    }

    .sm\:\!max-w-\[528px\] {
      max-width: 528px !important;
    }

    .sm\:\!max-w-\[640px\] {
      max-width: 640px !important;
    }

    .sm\:\!max-w-\[760px\] {
      max-width: 760px !important;
    }

    .sm\:\!max-w-\[min\(1120px\,94vw\)\] {
      max-width: min(1120px, 94vw) !important;
    }

    .sm\:\!max-w-\[min\(1280px\,90vw\)\] {
      max-width: min(1280px, 90vw) !important;
    }

    .sm\:\!max-w-\[min\(1280px\,96vw\)\] {
      max-width: min(1280px, 96vw) !important;
    }

    .sm\:\!max-w-lg {
      max-width: var(--container-lg) !important;
    }

    .sm\:max-w-2xl {
      max-width: var(--container-2xl);
    }

    .sm\:max-w-4xl {
      max-width: var(--container-4xl);
    }

    .sm\:max-w-\[360px\] {
      max-width: 360px;
    }

    .sm\:max-w-\[420px\] {
      max-width: 420px;
    }

    .sm\:max-w-\[440px\] {
      max-width: 440px;
    }

    .sm\:max-w-\[460px\] {
      max-width: 460px;
    }

    .sm\:max-w-\[480px\] {
      max-width: 480px;
    }

    .sm\:max-w-\[520px\] {
      max-width: 520px;
    }

    .sm\:max-w-\[560px\] {
      max-width: 560px;
    }

    .sm\:max-w-\[600px\] {
      max-width: 600px;
    }

    .sm\:max-w-\[720px\] {
      max-width: 720px;
    }

    .sm\:max-w-\[760px\] {
      max-width: 760px;
    }

    .sm\:max-w-\[960px\] {
      max-width: 960px;
    }

    .sm\:max-w-lg {
      max-width: var(--container-lg);
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:max-w-none {
      max-width: none;
    }

    .sm\:max-w-none\! {
      max-width: none !important;
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:max-w-xl {
      max-width: var(--container-xl);
    }

    .sm\:auto-cols-fr {
      grid-auto-columns: minmax(0, 1fr);
    }

    .sm\:grid-flow-col {
      grid-auto-flow: column;
    }

    .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-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.2fr\)\] {
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:items-start {
      align-items: flex-start;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-center {
      justify-content: center;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:justify-stretch {
      justify-content: stretch;
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    :where(.sm\:divide-x > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }

    :where(.sm\:divide-border > :not(:last-child)) {
      border-color: var(--border);
    }

    .sm\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }

    .sm\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }

    .sm\:pr-2 {
      padding-right: calc(var(--spacing) * 2);
    }

    .sm\:pr-16 {
      padding-right: calc(var(--spacing) * 16);
    }

    .sm\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .sm\:pb-5 {
      padding-bottom: calc(var(--spacing) * 5);
    }

    .sm\:pl-3 {
      padding-left: calc(var(--spacing) * 3);
    }

    .sm\:text-center {
      text-align: center;
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2:is(:where(.group\/alert-dialog-content)[data-size="default"] *) {
      grid-row: span 2 / span 2;
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start:is(:where(.group\/alert-dialog-content)[data-size="default"] *) {
      place-items: start;
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left:is(:where(.group\/alert-dialog-content)[data-size="default"] *) {
      text-align: left;
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.group\/alert-dialog-content)[data-size="default"] *):is(:where(.group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) *) {
      grid-column-start: 2;
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:is(:where(.group\/alert-dialog-content)[data-size="default"] *):has([data-slot="alert-dialog-media"]) {
      grid-template-rows: auto 1fr;
    }

    .data-\[side\=left\]\:sm\:max-w-sm[data-side="left"], .data-\[side\=right\]\:sm\:max-w-sm[data-side="right"] {
      max-width: var(--container-sm);
    }

    .data-\[size\=default\]\:sm\:max-w-md[data-size="default"] {
      max-width: var(--container-md);
    }
  }

  @media (min-width: 48rem) {
    .md\:mx-12 {
      margin-inline: calc(var(--spacing) * 12);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .md\:text-\[length\:inherit\] {
      font-size: inherit;
    }

    .md\:text-pretty {
      text-wrap: pretty;
    }
  }

  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }

    .lg\:h-\[calc\(100dvh-9rem\)\] {
      height: calc(100dvh - 9rem);
    }

    .lg\:h-full {
      height: 100%;
    }

    .lg\:max-h-\[52rem\] {
      max-height: 52rem;
    }

    .lg\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }

    .lg\:w-full {
      width: 100%;
    }

    .lg\:min-w-0 {
      min-width: calc(var(--spacing) * 0);
    }

    .lg\:flex-1 {
      flex: 1;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
      grid-template-columns: 1.2fr .8fr;
    }

    .lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 16rem minmax(0, 1fr);
    }

    .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 18rem minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(300px\,0\.8fr\)_minmax\(0\,1\.2fr\)\] {
      grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    }

    .lg\:flex-col {
      flex-direction: column;
    }

    .lg\:overflow-y-auto {
      overflow-y: auto;
    }

    .lg\:overscroll-contain {
      overscroll-behavior: contain;
    }

    .lg\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .lg\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:px-16 {
      padding-inline: calc(var(--spacing) * 16);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[minmax\(240px\,0\.8fr\)_minmax\(0\,1\.2fr\)\] {
      grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
    }
  }

  @container canvas-area not (min-width: 640px) {
    .\@max-\[640px\]\/canvas-area\:hidden {
      display: none;
    }
  }

  @container canvas-shell not (min-width: 640px) {
    .\@max-\[640px\]\/canvas-shell\:hidden {
      display: none;
    }
  }

  @container mode-menu not (min-width: 260px) {
    .\@max-\[260px\]\/mode-menu\:hidden {
      display: none;
    }
  }

  @container mode-menu not (min-width: 220px) {
    .\@max-\[220px\]\/mode-menu\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .\@max-\[220px\]\/mode-menu\:hidden {
      display: none;
    }

    .\@max-\[220px\]\/mode-menu\:items-center {
      align-items: center;
    }
  }

  @container turn-artifacts (min-width: 350px) {
    .\@min-\[350px\]\/turn-artifacts\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container empty-recommendations (min-width: 400px) {
    .\@min-\[400px\]\/empty-recommendations\:inline {
      display: inline;
    }
  }

  @container recommendations (min-width: 480px) {
    .\@min-\[480px\]\/recommendations\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container workflow-detail (min-width: 46rem) {
    .\@min-\[46rem\]\/workflow-detail\:grid-cols-\[minmax\(0\,1\.25fr\)_minmax\(16rem\,0\.9fr\)\] {
      grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .9fr);
    }
  }

  @container workflow-detail (min-width: 48rem) {
    .\@min-\[48rem\]\/workflow-detail\:min-h-80 {
      min-height: calc(var(--spacing) * 80);
    }

    .\@min-\[48rem\]\/workflow-detail\:grid-cols-\[minmax\(240px\,0\.8fr\)_minmax\(0\,1\.2fr\)\] {
      grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
    }

    .\@min-\[48rem\]\/workflow-detail\:pr-0 {
      padding-right: calc(var(--spacing) * 0);
    }

    .\@min-\[48rem\]\/workflow-detail\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .\@min-\[48rem\]\/workflow-detail\:leading-7 {
      --tw-leading: calc(var(--spacing) * 7);
      line-height: calc(var(--spacing) * 7);
    }
  }

  .dark\:border-\[rgba\(255\,255\,255\,0\.4\)\]:is(.dark *) {
    border-color: #fff6;
  }

  .dark\:border-\[rgba\(255\,255\,255\,0\.6\)\]:is(.dark *) {
    border-color: #fff9;
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--input);
  }

  .dark\:border-white\/50:is(.dark *) {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-white\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .dark\:bg-\[var\(--canvas-controls-bg\)\]:is(.dark *) {
    background-color: var(--canvas-controls-bg);
  }

  .dark\:bg-background:is(.dark *) {
    background-color: var(--background);
  }

  .dark\:bg-destructive\/20:is(.dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .dark\:bg-foreground\/\[0\.05\]:is(.dark *) {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-foreground\/\[0\.05\]:is(.dark *) {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .dark\:bg-foreground\/\[0\.06\]:is(.dark *) {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-foreground\/\[0\.06\]:is(.dark *) {
      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
    }
  }

  .dark\:bg-foreground\/\[0\.08\]:is(.dark *) {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-foreground\/\[0\.08\]:is(.dark *) {
      background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
    }
  }

  .dark\:bg-foreground\/\[0\.14\]:is(.dark *) {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-foreground\/\[0\.14\]:is(.dark *) {
      background-color: color-mix(in oklab, var(--foreground) 14.0%, transparent);
    }
  }

  .dark\:bg-info\/20:is(.dark *) {
    background-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-info\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--info) 20%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:bg-success\/20:is(.dark *) {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-success\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--success) 20%, transparent);
    }
  }

  .dark\:bg-transparent:is(.dark *) {
    background-color: #0000;
  }

  .dark\:bg-warning\/20:is(.dark *) {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-warning\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .dark\:bg-white:is(.dark *) {
    background-color: var(--color-white);
  }

  .dark\:bg-white\/\[0\.08\]:is(.dark *) {
    background-color: #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-white\/\[0\.08\]:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }

  .dark\:text-\[\#c2c2c2\]:is(.dark *) {
    color: #c2c2c2;
  }

  .dark\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_92\%\,transparent\)\]:is(.dark *) {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-foreground\)_92\%\,transparent\)\]:is(.dark *) {
      color: color-mix(in srgb,var(--sidebar-foreground) 92%,transparent);
    }
  }

  .dark\:text-black:is(.dark *) {
    color: var(--color-black);
  }

  .dark\:text-muted-foreground\/30:is(.dark *) {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-muted-foreground\/30:is(.dark *) {
      color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .dark\:text-sidebar-foreground\/80:is(.dark *) {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-sidebar-foreground\/80:is(.dark *) {
      color: color-mix(in oklab, var(--sidebar-foreground) 80%, transparent);
    }
  }

  .dark\:shadow-\[0_18px_48px_rgba\(0\,0\,0\,0\.46\)\,0_3px_12px_rgba\(0\,0\,0\,0\.28\)\]:is(.dark *) {
    --tw-shadow: 0 18px 48px var(--tw-shadow-color, #00000075), 0 3px 12px var(--tw-shadow-color, #00000047);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .dark\:shadow-none:is(.dark *) {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (hover: hover) {
    .dark\:group-hover\:bg-foreground\/\[0\.1\]:is(.dark *):is(:where(.group):hover *) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:group-hover\:bg-foreground\/\[0\.1\]:is(.dark *):is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
      }
    }

    .dark\:group-hover\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent-foreground\)_98\%\,transparent\)\]:is(.dark *):is(:where(.group):hover *) {
      color: var(--sidebar-accent-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:group-hover\:text-\[color\:color-mix\(in_srgb\,var\(--sidebar-accent-foreground\)_98\%\,transparent\)\]:is(.dark *):is(:where(.group):hover *) {
        color: color-mix(in srgb,var(--sidebar-accent-foreground) 98%,transparent);
      }
    }

    .dark\:group-hover\:text-sidebar-accent-foreground\/90:is(.dark *):is(:where(.group):hover *) {
      color: var(--sidebar-accent-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:group-hover\:text-sidebar-accent-foreground\/90:is(.dark *):is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--sidebar-accent-foreground) 90%, transparent);
      }
    }
  }

  .dark\:after\:mix-blend-lighten:is(.dark *):after {
    content: var(--tw-content);
    mix-blend-mode: lighten;
  }

  @media (hover: hover) {
    .dark\:hover\:bg-\[var\(--canvas-controls-active\)\]:is(.dark *):hover {
      background-color: var(--canvas-controls-active);
    }

    .dark\:hover\:bg-brand-accent\/90:is(.dark *):hover {
      background-color: var(--brand-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-brand-accent\/90:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--brand-accent) 90%, transparent);
      }
    }

    .dark\:hover\:bg-destructive\/30:is(.dark *):hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-destructive\/30:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
      }
    }

    .dark\:hover\:bg-foreground\/\[0\.06\]:is(.dark *):hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-foreground\/\[0\.06\]:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
      }
    }

    .dark\:hover\:bg-foreground\/\[0\.12\]:is(.dark *):hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-foreground\/\[0\.12\]:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--foreground) 12%, transparent);
      }
    }

    .dark\:hover\:bg-foreground\/\[0\.18\]:is(.dark *):hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-foreground\/\[0\.18\]:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--foreground) 18%, transparent);
      }
    }

    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }

    .dark\:hover\:bg-muted\/50:is(.dark *):hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-muted\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .dark\:hover\:text-foreground\/60:is(.dark *):hover {
      color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:text-foreground\/60:is(.dark *):hover {
        color: color-mix(in oklab, var(--foreground) 60%, transparent);
      }
    }

    .dark\:hover\:before\:bg-muted\/50:is(.dark *):hover:before {
      content: var(--tw-content);
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:before\:bg-muted\/50:is(.dark *):hover:before {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:focus-visible\:ring-info\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-info\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--info) 40%, transparent);
    }
  }

  .dark\:focus-visible\:ring-success\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-success\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--success) 40%, transparent);
    }
  }

  .dark\:focus-visible\:ring-warning\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-warning\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .dark\:disabled\:bg-input\/80:is(.dark *):disabled {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:disabled\:bg-input\/80:is(.dark *):disabled {
      background-color: color-mix(in oklab, var(--input) 80%, transparent);
    }
  }

  :where([data-slot="tooltip-content"]) .dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:is(.dark *) {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where([data-slot="tooltip-content"]) .dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:is(.dark *) {
      background-color: color-mix(in oklab, var(--background) 10%, transparent);
    }
  }

  .dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid="true"] {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:data-\[indeterminate\]\:bg-primary:is(.dark *)[data-indeterminate] {
    background-color: var(--primary);
  }

  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-open\:animate-accordion-down:where([data-state="open"]), .data-open\:animate-accordion-down:where([data-open]:not([data-open="false"])) {
    animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-open\:animate-in:where([data-state="open"]), .data-open\:animate-in:where([data-open]:not([data-open="false"])) {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-open\:bg-popup-item-active:where([data-state="open"]), .data-open\:bg-popup-item-active:where([data-open]:not([data-open="false"])) {
    background-color: var(--popup-item-active);
  }

  .data-open\:text-foreground:where([data-state="open"]), .data-open\:text-foreground:where([data-open]:not([data-open="false"])) {
    color: var(--foreground);
  }

  .data-open\:opacity-100:where([data-state="open"]), .data-open\:opacity-100:where([data-open]:not([data-open="false"])) {
    opacity: 1;
  }

  .data-open\:fade-in-0:where([data-state="open"]), .data-open\:fade-in-0:where([data-open]:not([data-open="false"])) {
    --tw-enter-opacity: 0;
  }

  .data-open\:zoom-in-95:where([data-state="open"]), .data-open\:zoom-in-95:where([data-open]:not([data-open="false"])) {
    --tw-enter-scale: .95;
  }

  .data-open\:zoom-in-100:where([data-state="open"]), .data-open\:zoom-in-100:where([data-open]:not([data-open="false"])) {
    --tw-enter-scale: 1;
  }

  .data-open\:slide-in-from-top-2:where([data-state="open"]), .data-open\:slide-in-from-top-2:where([data-open]:not([data-open="false"])) {
    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:data-open\:animate-in:where([data-state="open"]), .motion-safe\:data-open\:animate-in:where([data-open]:not([data-open="false"])) {
      animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    }

    .motion-safe\:data-open\:fade-in-0:where([data-state="open"]), .motion-safe\:data-open\:fade-in-0:where([data-open]:not([data-open="false"])) {
      --tw-enter-opacity: 0;
    }

    .motion-safe\:data-open\:zoom-in-95:where([data-state="open"]), .motion-safe\:data-open\:zoom-in-95:where([data-open]:not([data-open="false"])) {
      --tw-enter-scale: .95;
    }

    .motion-safe\:data-\[side\=bottom\]\:data-open\:slide-in-from-top-2[data-side="bottom"]:where([data-state="open"]), .motion-safe\:data-\[side\=bottom\]\:data-open\:slide-in-from-top-2[data-side="bottom"]:where([data-open]:not([data-open="false"])) {
      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
    }

    .motion-safe\:data-\[side\=left\]\:data-open\:slide-in-from-right-2[data-side="left"]:where([data-state="open"]), .motion-safe\:data-\[side\=left\]\:data-open\:slide-in-from-right-2[data-side="left"]:where([data-open]:not([data-open="false"])) {
      --tw-enter-translate-x: calc(2*var(--spacing));
    }

    .motion-safe\:data-\[side\=right\]\:data-open\:slide-in-from-left-2[data-side="right"]:where([data-state="open"]), .motion-safe\:data-\[side\=right\]\:data-open\:slide-in-from-left-2[data-side="right"]:where([data-open]:not([data-open="false"])) {
      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
    }

    .motion-safe\:data-\[side\=top\]\:data-open\:slide-in-from-bottom-2[data-side="top"]:where([data-state="open"]), .motion-safe\:data-\[side\=top\]\:data-open\:slide-in-from-bottom-2[data-side="top"]:where([data-open]:not([data-open="false"])) {
      --tw-enter-translate-y: calc(2*var(--spacing));
    }
  }

  .data-closed\:animate-accordion-up:where([data-state="closed"]), .data-closed\:animate-accordion-up:where([data-closed]:not([data-closed="false"])) {
    animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-closed\:animate-out:where([data-state="closed"]), .data-closed\:animate-out:where([data-closed]:not([data-closed="false"])) {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-closed\:opacity-0:where([data-state="closed"]), .data-closed\:opacity-0:where([data-closed]:not([data-closed="false"])) {
    opacity: 0;
  }

  .data-closed\:duration-1000:where([data-state="closed"]), .data-closed\:duration-1000:where([data-closed]:not([data-closed="false"])) {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .data-closed\:ease-out:where([data-state="closed"]), .data-closed\:ease-out:where([data-closed]:not([data-closed="false"])) {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .data-closed\:fade-out-0:where([data-state="closed"]), .data-closed\:fade-out-0:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-opacity: 0;
  }

  .data-closed\:fill-mode-forwards:where([data-state="closed"]), .data-closed\:fill-mode-forwards:where([data-closed]:not([data-closed="false"])) {
    --tw-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .data-closed\:zoom-out-95:where([data-state="closed"]), .data-closed\:zoom-out-95:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-scale: .95;
  }

  .data-closed\:zoom-out-100:where([data-state="closed"]), .data-closed\:zoom-out-100:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-scale: 1;
  }

  .data-closed\:slide-out-to-top-2:where([data-state="closed"]), .data-closed\:slide-out-to-top-2:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-translate-y: calc(2*var(--spacing)*-1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:data-closed\:animate-out:where([data-state="closed"]), .motion-safe\:data-closed\:animate-out:where([data-closed]:not([data-closed="false"])) {
      animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    }

    .motion-safe\:data-closed\:fade-out-0:where([data-state="closed"]), .motion-safe\:data-closed\:fade-out-0:where([data-closed]:not([data-closed="false"])) {
      --tw-exit-opacity: 0;
    }
  }

  .data-checked\:border-foreground\/65:where([data-state="checked"]), .data-checked\:border-foreground\/65:where([data-checked]:not([data-checked="false"])) {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-checked\:border-foreground\/65:where([data-state="checked"]), .data-checked\:border-foreground\/65:where([data-checked]:not([data-checked="false"])) {
      border-color: color-mix(in oklab, var(--foreground) 65%, transparent);
    }
  }

  .data-checked\:border-primary:where([data-state="checked"]), .data-checked\:border-primary:where([data-checked]:not([data-checked="false"])) {
    border-color: var(--primary);
  }

  .data-checked\:border-primary\!:where([data-state="checked"]), .data-checked\:border-primary\!:where([data-checked]:not([data-checked="false"])) {
    border-color: var(--primary) !important;
  }

  .data-checked\:bg-foreground\/65:where([data-state="checked"]), .data-checked\:bg-foreground\/65:where([data-checked]:not([data-checked="false"])) {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-checked\:bg-foreground\/65:where([data-state="checked"]), .data-checked\:bg-foreground\/65:where([data-checked]:not([data-checked="false"])) {
      background-color: color-mix(in oklab, var(--foreground) 65%, transparent);
    }
  }

  .data-checked\:bg-primary:where([data-state="checked"]), .data-checked\:bg-primary:where([data-checked]:not([data-checked="false"])) {
    background-color: var(--primary);
  }

  .data-checked\:bg-primary\!:where([data-state="checked"]), .data-checked\:bg-primary\!:where([data-checked]:not([data-checked="false"])) {
    background-color: var(--primary) !important;
  }

  .data-checked\:text-background:where([data-state="checked"]), .data-checked\:text-background:where([data-checked]:not([data-checked="false"])) {
    color: var(--background);
  }

  .data-checked\:text-primary-foreground:where([data-state="checked"]), .data-checked\:text-primary-foreground:where([data-checked]:not([data-checked="false"])) {
    color: var(--primary-foreground);
  }

  .dark\:data-checked\:bg-primary:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:bg-primary:is(.dark *):where([data-checked]:not([data-checked="false"])) {
    background-color: var(--primary);
  }

  .data-disabled\:pointer-events-none:where([data-disabled="true"]), .data-disabled\:pointer-events-none:where([data-disabled]:not([data-disabled="false"])) {
    pointer-events: none;
  }

  .data-disabled\:opacity-50:where([data-disabled="true"]), .data-disabled\:opacity-50:where([data-disabled]:not([data-disabled="false"])) {
    opacity: .5;
  }

  .data-active\:border-foreground:where([data-state="active"]), .data-active\:border-foreground:where([data-active]:not([data-active="false"])) {
    border-color: var(--foreground);
  }

  .data-active\:font-medium:where([data-state="active"]), .data-active\:font-medium:where([data-active]:not([data-active="false"])) {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-active\:text-foreground:where([data-state="active"]), .data-active\:text-foreground:where([data-active]:not([data-active="false"])) {
    color: var(--foreground);
  }

  .data-horizontal\:h-1:where([data-orientation="horizontal"]) {
    height: calc(var(--spacing) * 1);
  }

  .data-horizontal\:h-2\.5:where([data-orientation="horizontal"]) {
    height: calc(var(--spacing) * 2.5);
  }

  .data-horizontal\:h-\[var\(--divider-width\)\]:where([data-orientation="horizontal"]) {
    height: var(--divider-width);
  }

  .data-horizontal\:h-full:where([data-orientation="horizontal"]) {
    height: 100%;
  }

  .data-horizontal\:w-full:where([data-orientation="horizontal"]) {
    width: 100%;
  }

  .data-horizontal\:flex-col:where([data-orientation="horizontal"]) {
    flex-direction: column;
  }

  .data-horizontal\:border-t-\[var\(--divider-width\)\]:where([data-orientation="horizontal"]) {
    border-top-color: var(--divider-width);
  }

  .data-horizontal\:border-t-transparent:where([data-orientation="horizontal"]) {
    border-top-color: #0000;
  }

  .data-vertical\:h-full:where([data-orientation="vertical"]) {
    height: 100%;
  }

  .data-vertical\:min-h-40:where([data-orientation="vertical"]) {
    min-height: calc(var(--spacing) * 40);
  }

  .data-vertical\:w-1:where([data-orientation="vertical"]) {
    width: calc(var(--spacing) * 1);
  }

  .data-vertical\:w-2\.5:where([data-orientation="vertical"]) {
    width: calc(var(--spacing) * 2.5);
  }

  .data-vertical\:w-\[var\(--divider-width\)\]:where([data-orientation="vertical"]) {
    width: var(--divider-width);
  }

  .data-vertical\:w-auto:where([data-orientation="vertical"]) {
    width: auto;
  }

  .data-vertical\:w-full:where([data-orientation="vertical"]) {
    width: 100%;
  }

  .data-vertical\:flex-col:where([data-orientation="vertical"]) {
    flex-direction: column;
  }

  .data-vertical\:items-stretch:where([data-orientation="vertical"]) {
    align-items: stretch;
  }

  .data-vertical\:self-stretch:where([data-orientation="vertical"]) {
    align-self: stretch;
  }

  .data-vertical\:border-l-\[var\(--divider-width\)\]:where([data-orientation="vertical"]) {
    border-left-color: var(--divider-width);
  }

  .data-vertical\:border-l-transparent:where([data-orientation="vertical"]) {
    border-left-color: #0000;
  }

  .\[\&_\.hljs\]\:\!bg-transparent .hljs {
    background-color: #0000 !important;
  }

  .\[\&_\.hljs\]\:\!p-0 .hljs {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\[\&_\.hljs-attr\]\:\!text-\[\#E45649\] .hljs-attr {
    color: #e45649 !important;
  }

  .\[\&_\.hljs-string\]\:\!text-\[\#50A14F\] .hljs-string {
    color: #50a14f !important;
  }

  .\[\&_\[data-action-ui-id\=workspace-stage\]\[data-layout-mode\=focus\]_\[data-action-ui-id\=session-tabs\]\]\:pr-\[120px\] [data-action-ui-id="workspace-stage"][data-layout-mode="focus"] [data-action-ui-id="session-tabs"], .\[\&_\[data-action-ui-id\=workspace-stage\]\[data-pane-order\=canvas-chat\]_\[data-action-ui-id\=session-tabs\]\]\:pr-\[120px\] [data-action-ui-id="workspace-stage"][data-pane-order="canvas-chat"] [data-action-ui-id="session-tabs"] {
    padding-right: 120px;
  }

  .\[\&_\[data-error-suffix\]\]\:text-destructive\! [data-error-suffix], .\[\&_\[data-error-title\]\]\:text-destructive\! [data-error-title] {
    color: var(--destructive) !important;
  }

  .\[\&_\[data-slot\=button\]\]\:rounded-md [data-slot="button"] {
    border-radius: calc(var(--radius) * .8);
  }

  .\[\&_\[data-slot\=catalog-page-subtitle\]\]\:truncate [data-slot="catalog-page-subtitle"] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&_\[data-slot\=checkbox-indicator\]\>svg\]\:size-3 [data-slot="checkbox-indicator"] > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_\[data-slot\=dialog-close\]\]\:size-8\! [data-slot="dialog-close"] {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
  }

  .\[\&_\[data-slot\=dialog-close\]_svg\]\:size-\[18px\]\! [data-slot="dialog-close"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]\]\:\!h-9 [data-slot="dropdown-menu-trigger"] {
    height: calc(var(--spacing) * 9) !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]\]\:\!w-full [data-slot="dropdown-menu-trigger"] {
    width: 100% !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]\]\:\!rounded-full [data-slot="dropdown-menu-trigger"] {
    border-radius: 3.40282e38px !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]\]\:\!text-\[13px\] [data-slot="dropdown-menu-trigger"] {
    font-size: 13px !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]\]\:\!font-normal [data-slot="dropdown-menu-trigger"] {
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
  }

  .\[\&_\[data-slot\=dropdown-menu-trigger\]_svg\]\:\[stroke-width\:1\.75\] [data-slot="dropdown-menu-trigger"] svg {
    stroke-width: 1.75px;
  }

  .\[\&_\[data-slot\=input\]\]\:rounded-md [data-slot="input"] {
    border-radius: calc(var(--radius) * .8);
  }

  .\[\&_\[data-slot\=page-state-copy\]\]\:mt-0 [data-slot="page-state-copy"] {
    margin-top: calc(var(--spacing) * 0);
  }

  .\[\&_\[data-slot\=page-state-copy\]\]\:max-w-none [data-slot="page-state-copy"] {
    max-width: none;
  }

  .\[\&_\[data-slot\=page-state-copy\]\>div\]\:w-full [data-slot="page-state-copy"] > div {
    width: 100%;
  }

  .\[\&_\[data-slot\=progress-indicator\]\]\:bg-background [data-slot="progress-indicator"] {
    background-color: var(--background);
  }

  .\[\&_\[data-slot\=progress-indicator\]\]\:bg-foreground [data-slot="progress-indicator"] {
    background-color: var(--foreground);
  }

  .\[\&_\[data-slot\=progress-track\]\]\:bg-background\/20 [data-slot="progress-track"] {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\[data-slot\=progress-track\]\]\:bg-background\/20 [data-slot="progress-track"] {
      background-color: color-mix(in oklab, var(--background) 20%, transparent);
    }
  }

  .\[\&_\[data-slot\=select-trigger\]\]\:rounded-md [data-slot="select-trigger"] {
    border-radius: calc(var(--radius) * .8);
  }

  .\[\&_\[data-slot\=table-container\]\]\:overflow-visible [data-slot="table-container"] {
    overflow: visible;
  }

  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }

  .\[\&_a\]\:underline-offset-3 a {
    text-underline-offset: 3px;
  }

  @media (hover: hover) {
    .\[\&_a\]\:hover\:text-foreground a:hover {
      color: var(--foreground);
    }
  }

  .\[\&_button\]\:\!size-6 button {
    width: calc(var(--spacing) * 6) !important;
    height: calc(var(--spacing) * 6) !important;
  }

  .\[\&_button\]\:rounded-\[4px\] button {
    border-radius: 4px;
  }

  .\[\&_code\]\:\!border-0 code {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .\[\&_code\]\:\!bg-transparent code {
    background-color: #0000 !important;
  }

  .\[\&_code\]\:\!p-0 code {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\[\&_g\:has\(\>\[data-hub-logo-eye\]\)\]\:transform-none\! g:has( > [data-hub-logo-eye]) {
    transform: none !important;
  }

  .\[\&_g\>path\:nth-child\(n\+10\)\]\:fill-\[var\(--hub-wordmark-accent\)\] g > path:nth-child(n+10) {
    fill: var(--hub-wordmark-accent);
  }

  .\[\&_h2\]\:truncate h2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&_input\]\:h-9 input {
    height: calc(var(--spacing) * 9);
  }

  .\[\&_input\]\:rounded-md input {
    border-radius: calc(var(--radius) * .8);
  }

  .\[\&_input\]\:border-transparent input {
    border-color: #0000;
  }

  .\[\&_input\]\:bg-muted input {
    background-color: var(--muted);
  }

  .\[\&_input\]\:focus-visible\:bg-card input:focus-visible {
    background-color: var(--card);
  }

  .\[\&_ol\]\:list-decimal ol {
    list-style-type: decimal;
  }

  .\[\&_ol\]\:\!pl-\[1em\] ol {
    padding-left: 1em !important;
  }

  .\[\&_p\]\:m-0 p {
    margin: calc(var(--spacing) * 0);
  }

  .\[\&_p\]\:leading-\[inherit\] p {
    --tw-leading: inherit;
    line-height: inherit;
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:pointer-events-none p.is-editor-empty:first-child:before {
    pointer-events: none;
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:float-left p.is-editor-empty:first-child:before {
    float: left;
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:hidden p.is-editor-empty:first-child:before {
    display: none;
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:h-0 p.is-editor-empty:first-child:before {
    height: calc(var(--spacing) * 0);
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:text-foreground\/30 p.is-editor-empty:first-child:before {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:text-foreground\/30 p.is-editor-empty:first-child:before {
      color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .\[\&_p\.is-editor-empty\:first-child\:\:before\]\:content-\[attr\(data-placeholder\)\] p.is-editor-empty:first-child:before {
    --tw-content: attr(data-placeholder);
    content: var(--tw-content);
  }

  .\[\&_p\:not\(\:last-child\)\]\:mb-2 p:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .\[\&_p\:not\(\:last-child\)\]\:mb-4 p:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .\[\&_path\]\:transition-\[stroke-dashoffset\] path {
    transition-property: stroke-dashoffset;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .\[\&_path\]\:duration-200 path {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .\[\&_path\]\:ease-out path {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .\[\&_path\]\:\[stroke-dasharray\:24\] path {
    stroke-dasharray: 24;
  }

  .\[\&_path\]\:\[stroke-dashoffset\:-24\] path {
    stroke-dashoffset: -24px;
  }

  .\[\&_path\]\:\[stroke-dashoffset\:0\] path {
    stroke-dashoffset: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:\[\&_path\]\:transition-none path {
      transition-property: none;
    }
  }

  .\[\&_pre\]\:\!m-0 pre {
    margin: calc(var(--spacing) * 0) !important;
  }

  .\[\&_pre\]\:\!border-0 pre {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .\[\&_pre\]\:\!bg-transparent pre {
    background-color: #0000 !important;
  }

  .\[\&_pre\]\:\!p-0 pre {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\[\&_strong\]\:text-background strong {
    color: var(--background);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:relative svg {
    position: relative;
  }

  .\[\&_svg\]\:z-10 svg {
    z-index: 10;
  }

  .\[\&_svg\]\:size-3\.5 svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\]\:text-white svg {
    color: var(--color-white);
  }

  .\[\&_svg\]\:drop-shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.85\)\] svg {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #000000d9));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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, );
  }

  .\[\&_svg\]\:transition-transform svg {
    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));
  }

  .\[\&_svg\]\:duration-150 svg {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .data-popup-open\:\[\&_svg\]\:rotate-180[data-popup-open] svg {
    rotate: 180deg;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-3\.5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&_tr\]\:\[border-bottom-width\:var\(--divider-width\)\] tr {
    border-bottom-width: var(--divider-width);
  }

  .\[\&_tr\+tr\]\:border-t tr + tr {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .\[\&_tr\+tr\]\:border-foreground\/5 tr + tr {
    border-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_tr\+tr\]\:border-foreground\/5 tr + tr {
      border-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&_ul\]\:list-disc ul {
    list-style-type: disc;
  }

  .\[\&_ul\]\:\!pl-\[1em\] ul {
    padding-left: 1em !important;
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }

  .\[\&\:\:-webkit-scrollbar\]\:h-1::-webkit-scrollbar {
    height: calc(var(--spacing) * 1);
  }

  .\[\&\:\:-webkit-scrollbar\]\:w-1::-webkit-scrollbar {
    width: calc(var(--spacing) * 1);
  }

  .\[\&\:\:-webkit-scrollbar\]\:w-1\!::-webkit-scrollbar {
    width: calc(var(--spacing) * 1) !important;
  }

  .\[\&\:\:-webkit-scrollbar\]\:w-1\.5::-webkit-scrollbar {
    width: calc(var(--spacing) * 1.5);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
    border-radius: 3.40282e38px;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full\!::-webkit-scrollbar-thumb {
    border-radius: 3.40282e38px !important;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-sm::-webkit-scrollbar-thumb {
    border-radius: calc(var(--radius) * .6);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--scrollbar-thumb\)\]::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/0\!::-webkit-scrollbar-thumb {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/0\!::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--foreground) 0%, transparent) !important;
    }
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/15::-webkit-scrollbar-thumb {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/15::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--foreground) 15%, transparent);
    }
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/20\!::-webkit-scrollbar-thumb {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/20\!::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--foreground) 20%, transparent) !important;
    }
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground::-webkit-scrollbar-thumb {
    background-color: var(--muted-foreground);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground\/30::-webkit-scrollbar-thumb {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground\/30::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:transition-colors::-webkit-scrollbar-thumb {
    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));
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:duration-300\!::-webkit-scrollbar-thumb {
    --tw-duration: .3s !important;
    transition-duration: .3s !important;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:ease-in-out\!::-webkit-scrollbar-thumb {
    --tw-ease: var(--ease-in-out) !important;
    transition-timing-function: var(--ease-in-out) !important;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-\[var\(--scrollbar-thumb-hover\)\]::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-foreground\/30::-webkit-scrollbar-thumb:hover {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-foreground\/30::-webkit-scrollbar-thumb:hover {
      background-color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-foreground\/35\!::-webkit-scrollbar-thumb:hover {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-foreground\/35\!::-webkit-scrollbar-thumb:hover {
      background-color: color-mix(in oklab, var(--foreground) 35%, transparent) !important;
    }
  }

  .\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track {
    background-color: #0000;
  }

  .\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent\!::-webkit-scrollbar-track {
    background-color: #0000 !important;
  }

  .\[\&\:\:-webkit-slider-thumb\]\:h-3\.5::-webkit-slider-thumb {
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\:\:-webkit-slider-thumb\]\:w-3\.5::-webkit-slider-thumb {
    width: calc(var(--spacing) * 3.5);
  }

  .\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb {
    cursor: pointer;
  }

  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
    appearance: none;
  }

  .\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
    border-radius: 3.40282e38px;
  }

  .\[\&\:\:-webkit-slider-thumb\]\:border::-webkit-slider-thumb {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&\:\:-webkit-slider-thumb\]\:border-foreground::-webkit-slider-thumb {
    border-color: var(--foreground);
  }

  .\[\&\:\:-webkit-slider-thumb\]\:bg-background::-webkit-slider-thumb {
    background-color: var(--background);
  }

  .\[\&\:has\(\[data-browser-annotating\=true\]\)_\.workspace-view-switch\]\:hidden:has([data-browser-annotating="true"]) .workspace-view-switch {
    display: none;
  }

  .\[\.border-b\]\:pb-4.border-b {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .group-data-\[size\=sm\]\/card\:\[\.border-b\]\:pb-3:is(:where(.group\/card)[data-size="sm"] *).border-b {
    padding-bottom: calc(var(--spacing) * 3);
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
    rotate: 180deg;
  }

  :is(.\*\:\[a\]\:underline > *):is(a) {
    text-decoration-line: underline;
  }

  :is(.\*\:\[a\]\:underline-offset-3 > *):is(a) {
    text-underline-offset: 3px;
  }

  @media (hover: hover) {
    .\[a\]\:hover\:bg-destructive\/20:is(a):hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-destructive\/20:is(a):hover {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
      }
    }

    .\[a\]\:hover\:bg-info\/20:is(a):hover {
      background-color: var(--info);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-info\/20:is(a):hover {
        background-color: color-mix(in oklab, var(--info) 20%, transparent);
      }
    }

    .\[a\]\:hover\:bg-muted:is(a):hover {
      background-color: var(--muted);
    }

    .\[a\]\:hover\:bg-primary\/80:is(a):hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-primary\/80:is(a):hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }

    .\[a\]\:hover\:bg-secondary\/80:is(a):hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-secondary\/80:is(a):hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .\[a\]\:hover\:bg-success\/20:is(a):hover {
      background-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-success\/20:is(a):hover {
        background-color: color-mix(in oklab, var(--success) 20%, transparent);
      }
    }

    .\[a\]\:hover\:bg-warning\/20:is(a):hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-warning\/20:is(a):hover {
        background-color: color-mix(in oklab, var(--warning) 20%, transparent);
      }
    }

    .\[a\]\:hover\:text-muted-foreground:is(a):hover {
      color: var(--muted-foreground);
    }

    :is(.\*\:\[a\]\:hover\:text-foreground > *):is(a):hover {
      color: var(--foreground);
    }
  }

  :is(.\*\:\[img\:first-child\]\:rounded-t-lg > *):is(img:first-child) {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  :is(.\*\:\[img\:last-child\]\:rounded-b-lg > *):is(img:last-child) {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
    display: flex;
  }

  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
    align-items: center;
  }

  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
    gap: calc(var(--spacing) * 2);
  }

  :is(.\*\:\[svg\]\:row-span-2 > *):is(svg) {
    grid-row: span 2 / span 2;
  }

  :is(.\*\:\[svg\]\:translate-y-0 > *):is(svg) {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  :is(.\*\:\[svg\]\:text-current > *):is(svg) {
    color: currentColor;
  }

  :is(.focus\:\*\:\[svg\]\:text-foreground:focus > *):is(svg) {
    color: var(--foreground);
  }

  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive[data-variant="destructive"] > *):is(svg) {
    color: var(--destructive);
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > *):is(svg:not([class*="size-"])) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-8 > *):is(svg:not([class*="size-"])) {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .\[\&\>\*\]\:min-h-full > * {
    min-height: 100%;
  }

  .\[\&\>\*\]\:max-w-full > * {
    max-width: 100%;
  }

  .\[\&\>\*\]\:flex-1 > * {
    flex: 1;
  }

  .\[\&\>\*\:first-child\]\:ml-auto > :first-child {
    margin-left: auto;
  }

  .\[\&\>div\]\:min-w-0 > div {
    min-width: calc(var(--spacing) * 0);
  }

  .\[\&\>div\]\:flex-1 > div {
    flex: 1;
  }

  .\[\&\>img\]\:opacity-50 > img {
    opacity: .5;
  }

  .\[\&\>img\]\:grayscale > img {
    --tw-grayscale: grayscale(100%);
    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, );
  }

  .\[\&\>section\]\:mb-3 > section {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .\[\&\>section\]\:break-inside-avoid > section {
    break-inside: avoid;
  }

  .\[\&\>span\]\:\!h-6 > span {
    height: calc(var(--spacing) * 6) !important;
  }

  .\[\&\>span\]\:\!rounded-\[5px\] > span {
    border-radius: 5px !important;
  }

  .\[\&\>span\]\:text-xs > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&\>span\]\:opacity-70 > span {
    opacity: .7;
  }

  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }

  .\[\&\>svg\]\:hidden > svg {
    display: none;
  }

  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:size-3\! > svg {
    width: calc(var(--spacing) * 3) !important;
    height: calc(var(--spacing) * 3) !important;
  }

  .\[\&\>svg\]\:size-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:size-full > svg {
    width: 100%;
    height: 100%;
  }

  .\[\&\>svg\]\:\!h-6 > svg {
    height: calc(var(--spacing) * 6) !important;
  }

  .\[\&\>svg\]\:\!h-12 > svg {
    height: calc(var(--spacing) * 12) !important;
  }

  .\[\&\>svg\]\:\!w-6 > svg {
    width: calc(var(--spacing) * 6) !important;
  }

  .\[\&\>svg\]\:\!w-12 > svg {
    width: calc(var(--spacing) * 12) !important;
  }

  .\[\&\>svg\]\:text-muted-foreground > svg {
    color: var(--muted-foreground);
  }

  .\[\&\>svg\]\:opacity-50 > svg {
    opacity: .5;
  }

  .group-has-data-\[size\=lg\]\/avatar-group\:\[\&\>svg\]\:size-5:is(:where(.group\/avatar-group):has([data-size="lg"]) *) > svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .group-has-data-\[size\=sm\]\/avatar-group\:\[\&\>svg\]\:size-3:is(:where(.group\/avatar-group):has([data-size="sm"]) *) > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .group-data-\[size\=default\]\/avatar\:\[\&\>svg\]\:size-2:is(:where(.group\/avatar)[data-size="default"] *) > svg, .group-data-\[size\=lg\]\/avatar\:\[\&\>svg\]\:size-2:is(:where(.group\/avatar)[data-size="lg"] *) > svg {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .group-data-\[size\=sm\]\/avatar\:\[\&\>svg\]\:hidden:is(:where(.group\/avatar)[data-size="sm"] *) > svg {
    display: none;
  }

  .\[\&\[data-scrolling\=true\]\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/20\![data-scrolling="true"]::-webkit-scrollbar-thumb {
    background-color: var(--foreground) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\[data-scrolling\=true\]\:\:-webkit-scrollbar-thumb\]\:bg-foreground\/20\![data-scrolling="true"]::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--foreground) 20%, transparent) !important;
    }
  }

  .font-heading {
    letter-spacing: 0;
  }

  .border-top, .border-t {
    border-top-width: var(--divider-width);
  }

  .border-right, .border-r {
    border-right-width: var(--divider-width);
  }

  .border-bottom, .border-b {
    border-bottom-width: var(--divider-width);
  }

  .border-left, .border-l {
    border-left-width: var(--divider-width);
  }

  .border-x {
    border-right-width: var(--divider-width);
    border-left-width: var(--divider-width);
  }

  .border-y {
    border-top-width: var(--divider-width);
    border-bottom-width: var(--divider-width);
  }

  .divider-line-horizontal, .h-px {
    height: var(--divider-width);
  }

  .divider-line-vertical, .w-px {
    width: var(--divider-width);
  }

  .divide-y > :not(:last-child) {
    border-top-width: 0;
    border-bottom-width: var(--divider-width);
  }

  .divide-x > :not(:last-child) {
    border-right-width: var(--divider-width);
    border-left-width: 0;
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

pre code.hljs {
  padding: 1em;
  display: block;
  overflow-x: auto;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  color: #adbac7;
  background: #22272e;
}

.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
  color: #f47067;
}

.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
  color: #dcbdfb;
}

.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable {
  color: #6cb6ff;
}

.hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
  color: #96d0ff;
}

.hljs-built_in, .hljs-symbol {
  color: #f69d50;
}

.hljs-code, .hljs-comment, .hljs-formula {
  color: #768390;
}

.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag {
  color: #8ddb8c;
}

.hljs-subst {
  color: #adbac7;
}

.hljs-section {
  color: #316dca;
  font-weight: 700;
}

.hljs-bullet {
  color: #eac55f;
}

.hljs-emphasis {
  color: #adbac7;
  font-style: italic;
}

.hljs-strong {
  color: #adbac7;
  font-weight: 700;
}

.hljs-addition {
  color: #b4f1b4;
  background-color: #1b4721;
}

.hljs-deletion {
  color: #ffd8d3;
  background-color: #78191b;
}

@keyframes sd-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sd-blurIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    filter: blur();
  }
}

@keyframes sd-slideUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-sd-animate] {
  animation: var(--sd-animation, sd-fadeIn) var(--sd-duration, .15s) var(--sd-easing, ease) var(--sd-delay, 0s) both;
}

.workspace-browser-tab:not(:last-child):after {
  pointer-events: none;
  content: "";
  background-color: var(--border);
  opacity: .55;
  width: 1px;
  height: 14px;
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
}

.workspace-browser-tab[data-exiting="true"], .workspace-browser-tab[data-exiting="true"] [data-browser-tab-close] {
  transition: none;
}

.workspace-browser-tabs[data-closing-tabs="true"] .workspace-browser-tab:not([data-exiting="true"]) [data-browser-tab-close]:not(:focus-visible) {
  pointer-events: none;
  opacity: 0;
  transition: none;
}

.workspace-browser-tab-title {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), #0000);
  mask-image: linear-gradient(to right, #000 calc(100% - 12px), #0000);
}

.workspace-browser-tabs[data-overflow-left="true"] {
  -webkit-mask-image: linear-gradient(to right, #0000, #000 16px);
  mask-image: linear-gradient(to right, #0000, #000 16px);
}

.workspace-browser-tabs[data-overflow-right="true"] {
  -webkit-mask-image: linear-gradient(to left, #0000, #000 16px);
  mask-image: linear-gradient(to left, #0000, #000 16px);
}

.workspace-browser-tabs[data-overflow-left="true"][data-overflow-right="true"] {
  -webkit-mask-image: linear-gradient(to right, #0000, #000 16px calc(100% - 16px), #0000);
  mask-image: linear-gradient(to right, #0000, #000 16px calc(100% - 16px), #0000);
}

@keyframes onboarding-slide-next {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes onboarding-slide-prev {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.workspace-display-mode-panel {
  animation: .22s cubic-bezier(.16, 1, .3, 1) both workspace-display-mode-panel-enter;
}

.workspace-display-mode-card {
  outline: var(--workspace-display-mode-card-outline-width) solid transparent;
  outline-offset: var(--workspace-display-mode-card-outline-offset);
  transition: background-color .22s cubic-bezier(.16, 1, .3, 1), border-color .22s cubic-bezier(.16, 1, .3, 1);
}

.workspace-display-mode-card-selected {
  outline-color: var(--primary);
}

.workspace-display-mode-preview-fallback {
  background-image: var(--workspace-display-mode-preview-fallback);
}

@keyframes workspace-display-mode-panel-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

[data-workspace-layout-shortcut="true"] [data-shortcut-token-kind="command"] {
  font-size: 13px;
}

[data-workspace-layout-shortcut="true"] [data-shortcut-token-kind="key"] {
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-display-mode-panel {
    animation: none;
  }

  .workspace-display-mode-card, .workspace-display-mode-mask {
    transition: none;
  }
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/5b687c5d-b9bb-4ce1-8c7d-5f0e726465c5.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/a303811c-90c1-4995-8eda-e6c07b093193.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/b33bc555-e289-449f-a094-eac0ae6947e8.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/7f7bdbe5-9653-438a-ab88-40ab47d4eadd.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/3bddc953-6b96-4017-b327-eadcf9b4787f.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/58de1555-d553-47b1-b7fe-8cb75f9a48f4.woff2") format("woff2-variations");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/7e888616-bdbe-4797-b6c1-903e8950dd8f.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/1f499498-351d-4eab-a25d-935139f451b0.woff2") format("woff2-variations");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/8c506307-b105-4330-8956-9ec19e0e204b.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/69cea587-20e5-47bf-895d-935dda1b912c.woff2") format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/702a1762-9403-4d4a-afd7-1b16cb0b1561.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/a483b656-ba2f-46b1-a90c-82012599a3de.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/0a4ecfb4-4d60-4fa6-9f57-a596f4560e49.woff2") format("woff2-variations"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/9a3191ef-b54f-4065-bcdb-a504afedb948.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Outfit;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/df6610f1-f02a-4539-94fc-4b4cee175221.woff2") format("woff2"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/27094317-3d19-4413-acf1-7742af48c612.woff2") format("woff2");
}

@font-face {
  font-family: Outfit;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/a00d3598-9afb-4f6b-9eba-77b20bef5680.woff2") format("woff2"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/f1e15603-0e6e-44b0-88e5-7a8c20dc7ad8.woff2") format("woff2");
}

@font-face {
  font-family: Pixelify Sans;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.hailuoai.com/hailuo-video-web/public_assets/d529a48c-e942-4794-b7d5-653321a75c31.woff2") format("woff2"), url("https://cdn.hailuoai.video/open-hailuo-video-web/public_assets/55fba8eb-703f-44ca-979f-5025bdabdbef.woff2") format("woff2");
}

:root {
  --radius: .75rem;
  --background: #fafafa;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --divider-width: .5px;
  --control-border-width: 1px;
  --elevated-surface: #fff;
  --elevated-border-width: var(--divider-width);
  --elevated-border-color: #00000014;
  --resize-grip-border: color-mix(in srgb, var(--foreground) 18%, var(--elevated-surface));
  --resize-grip-mark: color-mix(in srgb, var(--foreground) 62%, var(--elevated-surface));
  --resize-grip-shadow: 0 4px 10px #0000001f;
  --popover: var(--elevated-surface);
  --popover-foreground: #000;
  --primary: #000;
  --primary-foreground: #fff;
  --secondary: #f5f5f5;
  --secondary-foreground: #000;
  --secondary-tab-active-bg: #f0f0f0;
  --button-subtle-bg: #f0f0f0;
  --button-subtle-bg-hover: #e8e8e8;
  --modal-shell-surface: var(--secondary);
  --modal-content-surface: var(--card);
  --im-bridge-channel-card-bg: color-mix(in srgb, var(--secondary) 40%, transparent);
  --muted: #fafafa;
  --muted-foreground: #00000080;
  --catalog-page-subtitle-foreground: #0000004d;
  --hint-surface: #eee;
  --chat-inline-code-bg: color-mix(in oklch, var(--muted) 97%, var(--foreground));
  --chat-audio-artifact-icon-bg: color-mix(in srgb, var(--foreground) 45%, var(--background));
  --chat-audio-artifact-icon-fg: #fff;
  --text-tertiary: #00000052;
  --accent: #f5f5f5;
  --accent-foreground: #000;
  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: #fff;
  --warning: oklch(75% .183 55);
  --warning-foreground: oklch(41% .16 55);
  --success: oklch(60% .19 145);
  --success-foreground: oklch(36% .15 145);
  --workflow-learning-banner-foreground: #f5f7f5;
  --workflow-learning-banner-foreground-muted: #f5f7f599;
  --workflow-learning-banner-border: #f5f7f51f;
  --workflow-learning-banner-border-strong: #f5f7f533;
  --info: oklch(62% .18 250);
  --info-foreground: oklch(40% .15 250);
  --border: #00000014;
  --model-selector-icon-border: var(--border);
  --border-solid: #e6e6e6;
  --input: #00000014;
  --ring: #0000004d;
  --project-assets-row-checkbox-bg: color-mix(in oklab,
    var(--background) 90%,
    transparent);
  --project-assets-row-checkbox-border: color-mix(in oklab,
    var(--foreground) 40%,
    transparent);
  --modal-mask-bg: #0000009e;
  --modal-mask-blur: 16px;
  --modal-mask-foreground: #fff;
  --workspace-display-mode-mask-bg: #ffffffb8;
  --workspace-display-mode-mask-foreground: #000;
  --workspace-display-mode-current-mask: #0000004d;
  --workspace-display-mode-current-tag-foreground: #fff;
  --workspace-display-mode-card-outline-width: 3px;
  --workspace-display-mode-card-outline-offset: 4px;
  --workspace-display-mode-preview-fallback: linear-gradient(135deg,
    #343642 0%,
    #54586c 100%);
  --popover-trigger-gap: 2px;
  --home-popover-trigger-gap: 4px;
  --chart-1: oklch(81.1% .094 280);
  --chart-2: oklch(60.6% .213 280);
  --chart-3: oklch(54.1% .239 280);
  --chart-4: oklch(49.1% .23 280);
  --chart-5: oklch(43.2% .197 280);
  --sidebar: #fff;
  --sidebar-foreground: #000;
  --sidebar-primary: #000;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #000;
  --sidebar-border: #0000001a;
  --sidebar-ring: #0000004d;
  --window-leading-content-inset: 21px;
  --brand-accent: #6d6cff;
  --brand-accent-foreground: #fff;
  --hub-wordmark-foreground: #000;
  --hub-wordmark-accent: var(--brand-accent);
  --app-caret-width: 3px;
  --scrollbar-thumb: #00000014;
  --scrollbar-thumb-hover: #0003;
  --popup-item-hover: #00000008;
  --popup-item-active: #0000000f;
  --tab-list-bg: var(--background);
  --tab-track-bg: var(--secondary-tab-active-bg);
  --tab-active-bg: #fff;
  --tab-active-shadow: 0 1px 2px #0000000f;
  --badge-hot-bg: #f4f55d;
  --badge-hot-fg: #000;
  --brutalist-border: var(--border-strong);
  --brutalist-border-subtle: var(--border-soft);
  --brutalist-border-strong: var(--border-strong);
  --brutalist-border-width: 1px;
  --brutalist-shadow: var(--shadow-soft-popover);
  --brutalist-shadow-sm: var(--shadow-soft-card);
  --brutalist-shadow-zero: 0 0 0 transparent;
  --brutalist-radius-sm: 6px;
  --brutalist-radius-md: 12px;
  --brutalist-radius-lg: 16px;
  --topbar-height: 40px;
  --topbar-bg: #efeff2;
  --topbar-transparent-bg: #fafafadb;
  --topbar-transparent-foreground: #000;
  --topbar-transparent-muted-foreground: #000000a6;
  --topbar-transparent-border: #00000014;
  --transparent-window-sidebar-blur: 18px;
  --topbar-blur: 16px;
  --window-shell-material-bg: var(--topbar-transparent-bg);
  --window-shell-fallback-bg: #efeff2;
  --topbar-border: var(--border);
  --topbar-saturate: 115%;
  --topbar-tab-active-bg: #ffffffeb;
  --topbar-tab-active-fg: #000;
  --topbar-tab-inactive-bg: #fff0;
  --topbar-tab-inactive-bg-hover: #0000000f;
  --topbar-tab-inactive-fg: #000000b3;
  --topbar-tab-inactive-fg-hover: #000c;
  --topbar-tab-divider: transparent;
  --topbar-tab-radius: 0px;
  --topbar-icon-fg: #000000b3;
  --topbar-icon-fg-hover: #000000e6;
  --home-content-surface: var(--background);
  --home-composer-tray-bg: #f0f0f0;
  --home-brand-foreground: var(--foreground);
  --home-brand-accent: var(--brand-accent);
  --home-sidebar-primary-text: #000000b3;
  --home-sidebar-secondary-text: #000000a6;
  --home-sidebar-section-text: #00000080;
  --home-sidebar-nav-hover: color-mix(in srgb, var(--foreground) 8%, var(--background));
  --home-sidebar-nav-active: color-mix(in srgb, var(--foreground) 8%, var(--background));
  --home-new-task-icon-bg: #fff;
  --home-new-task-icon-fg: #000;
  --home-new-task-icon-shadow: none;
  --sidebar-width: 264px;
  --content-gap: 24px;
  --nav-item-height: 40px;
  --nav-item-padding: 8px;
  --nav-item-inner-padding: 6px;
  --nav-item-gap: 8px;
  --nav-item-radius: 4px;
  --btn-height-sm: 32px;
  --btn-height-md: 36px;
  --btn-padding-icon: 6px;
  --btn-padding-x: 8px;
  --btn-padding-x-md: 12px;
  --btn-padding-x-lg: 16px;
  --btn-padding-y: 4px;
  --tag-height: 36px;
  --tag-padding-x: 16px;
  --tag-padding-y: 4px;
  --tag-gap: 4px;
  --tag-row-gap: 12px;
  --input-card-height: 150px;
  --input-card-padding: 16px;
  --message-input-card-padding: 8px;
  --message-input-surface-radius: 20px;
  --message-input-attachment-radius: calc(var(--message-input-surface-radius) - var(--message-input-card-padding));
  --workspace-chat-composer-default-height: 146px;
  --message-input-editor-font-size: var(--text-body-14);
  --message-input-control-hover: color-mix(in srgb, var(--foreground) 5%, transparent);
  --message-input-attachment-bg: color-mix(in srgb, var(--foreground) 4%, transparent);
  --message-input-attachment-bg-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
  --home-input-border-width: .5px;
  --home-input-radius: 20px;
  --home-input-editor-font-size: 15px;
  --home-input-editor-min-height: 90px;
  --home-input-toolbar-font-size: 14px;
  --home-input-editor-letter-spacing: 0px;
  --home-input-toolbar-letter-spacing: 0px;
  --home-input-toolbar-padding-x: 12px;
  --home-input-toolbar-divider-width: 1.5px;
  --home-input-control-content-gap: 4px;
  --home-composer-scroll-runway: 0px;
  --home-composer-sticky-backdrop-height: 164px;
  --home-composer-sticky-backdrop-fade-height: 24px;
  --home-input-surface: var(--card);
  --home-input-border: var(--border);
  --home-input-border-hover: var(--border-strong);
  --home-input-border-focus: var(--border-strong);
  --home-input-shadow: 0 10px 24px -20px #11111329,
    0 1px 4px -3px #11111314;
  --home-input-shadow-hover: var(--home-input-shadow);
  --home-input-shadow-focus: var(--home-input-shadow);
  --home-input-to-tags-gap: 56px;
  --home-input-to-quick-start-gap: 28px;
  --home-input-to-media-showcase-gap: 112px;
  --home-showcase-bottom-safe-inset: 88px;
  --home-quick-start-to-recommendations-gap: 16px;
  --home-scene-tag-gap: 8px;
  --home-scene-tag-content-gap: 8px;
  --home-scene-tag-content-reserve: 66px;
  --home-scene-tag-content-reserve-hover: 66px;
  --home-scene-tag-height: 52px;
  --home-scene-tag-min-width: 148px;
  --home-scene-tag-letter-spacing: 0px;
  --home-scene-tag-radius: 14px;
  --home-scene-tag-surface: var(--card);
  --home-scene-tag-surface-hover: var(--home-scene-tag-surface);
  --home-scene-tag-surface-active: color-mix(in srgb, var(--foreground) 6%, var(--card));
  --home-scene-tag-border-hover: color-mix(in srgb, var(--foreground) 16%, transparent);
  --home-scene-tag-artwork-opacity: 1;
  --home-scene-tag-artwork-opacity-hover: 1;
  --home-scene-tag-artwork-filter: none;
  --home-scene-tag-artwork-divider: color-mix(in srgb, var(--foreground) 28%, transparent);
  --home-scene-tag-artwork-divider-width: var(--home-input-border-width);
  --home-scene-tag-artwork-inset-block: 4px;
  --home-scene-tag-artwork-inset-end: 4px;
  --home-scene-tag-artwork-radius: 10px;
  --home-scene-tag-artwork-blur: 4px;
  --home-scene-tag-shadow-hover: 0 10px 22px -18px color-mix(in srgb, var(--foreground) 24%, transparent);
  --home-query-card-gap: 12px;
  --home-query-card-radius: 16px;
  --home-secondary-panel-inline-expansion: 200px;
  --home-secondary-panel-safe-inset: 40px;
  --home-primary-stack-width: 793px;
  --home-primary-recommendation-card-min-width: 192.25px;
  --home-secondary-panel-min-width: calc(var(--home-primary-recommendation-card-min-width) +
      var(--home-primary-recommendation-card-min-width) +
      var(--home-primary-recommendation-card-min-width) +
      var(--home-primary-recommendation-card-min-width) +
      var(--home-primary-recommendation-card-min-width) + var(--home-query-card-gap) +
      var(--home-query-card-gap) + var(--home-query-card-gap) + var(--home-query-card-gap));
  --home-query-card-overlay: #0000008f;
  --home-query-card-overlay-blur: 12px;
  --home-query-card-border: color-mix(in srgb, var(--border) 45%, transparent);
  --home-query-card-text: var(--brand-accent-foreground);
  --home-query-card-cta-bg: #fff;
  --home-query-card-cta-text: #15171f;
  --home-query-card-hover-blur: 8px;
  --home-media-showcase-max-width: 1400px;
  --home-media-showcase-card-radius: 12px;
  --home-media-showcase-gap: 8px;
  --home-media-showcase-secondary-tab-active-bg: var(--secondary-tab-active-bg);
  --home-media-showcase-card-hover: color-mix(in srgb, var(--foreground) 3%, var(--card));
  --home-media-showcase-action-min-width: 112px;
  --home-media-showcase-action-safe-inset: max(24px,
    min(88px,
      calc((100% - var(--home-media-showcase-action-min-width)) / 2)));
  --home-media-showcase-overlay-bg: #0000008f;
  --home-media-showcase-overlay-bg-hover: #000000b8;
  --home-media-showcase-overlay-fg: var(--modal-mask-foreground);
  --home-media-showcase-overlay-blur: 12px;
  --home-skill-install-surface: color-mix(in srgb, var(--brand-accent-foreground) 22%, transparent);
  --home-skill-install-track: color-mix(in srgb, var(--brand-accent-foreground) 12%, transparent);
  --home-skill-install-progress: color-mix(in srgb, var(--brand-accent-foreground) 88%, transparent);
  --home-skill-install-border: color-mix(in srgb, var(--brand-accent-foreground) 70%, transparent);
  --home-skill-install-blur: 4px;
  --home-skill-install-shadow: 0 4px 14px color-mix(in srgb, var(--foreground) 28%, transparent);
  --home-active-scene-bg: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  --home-active-scene-bg-hover: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --home-active-scene-border: color-mix(in srgb, var(--brand-accent) 30%, transparent);
  --home-active-scene-foreground: color-mix(in srgb,
    var(--foreground) 80%,
    var(--brand-accent) 20%);
  --topbar-tab-padding-x: 14px;
  --topbar-tab-text-size: 14px;
  --topbar-tab-text-opacity: .7;
  --toolbar-control-size: 32px;
  --toolbar-text-size: 13px;
  --toolbar-gap: 4px;
  --tracking-toolbar: -.52px;
  --user-area-height: 56px;
  --user-area-padding-x: 20px;
  --user-area-padding-y: 8px;
  --user-area-gap: 10px;
  --user-avatar-size: 32px;
  --user-avatar-radius: 20px;
  --section-gap: 12px;
  --home-hero-padding-x: 40px;
  --home-hero-safe-inset: 24px;
  --home-hero-bottom-balance: 80px;
  --home-whats-new-height: 35px;
  --home-whats-new-to-logo-gap: 40px;
  --home-whats-new-roll-transition-duration: .6s;
  --home-hero-content-gap: 24px;
  --home-hero-title-block-gap: 12px;
  --home-hero-title-row-gap: 16px;
  --home-hero-title-size: 40px;
  --home-hero-title-line-height: 40px;
  --home-hero-subtitle-size: 16px;
  --home-hero-subtitle-line-height: 24px;
  --home-hero-subtitle-tracking-zh: .08em;
  --home-hero-subtitle-tracking-en: .04em;
  --global-search-dialog-max-height: min(640px, 72vh);
  --global-search-dialog-min-height: 240px;
  --global-search-dialog-anchor-offset: min(320px, 36vh);
  --home-grid-line: color-mix(in srgb, var(--foreground) 12%, transparent);
  --home-grid-line-hover: color-mix(in srgb, var(--foreground) 18%, transparent);
  --workspace-loader-orb: color-mix(in srgb, var(--brand-accent) 68%, var(--background));
  --workspace-loader-body: #050505;
  --workspace-loader-icon: #fff;
  --workspace-loader-size: 48px;
  --workspace-loader-shell-size: 56px;
  --workspace-loader-frame-center-offset: 4px;
  --home-grid-focus-line: #0000001f;
  --workspace-loading-dot: #52577e47;
  --workspace-loading-dot-bright: #7b76ff94;
  --tracking-tight: -.56px;
  --tracking-tighter: -1.16px;
  --island-gap: .375rem;
  --island-radius: .75rem;
  --island-control-radius: .6875rem;
  --layout-divider: var(--border);
  --cm-bg: #15171f;
  --cm-text: #f6f7fb;
  --cm-text-muted: #f6f7fb99;
  --cm-text-icon: #f6f7fbb3;
  --cm-border: transparent;
  --cm-shadow: 0 24px 48px -16px #00000073, 0 8px 16px -8px #00000052;
  --cm-step-inactive: #f6f7fb38;
  --cm-step-active: #f6f7fb;
  --cm-cta-bg: #f6f7fb;
  --cm-cta-bg-hover: #fff;
  --cm-cta-text: #15171f;
  --cm-close-hover-bg: #f6f7fb1f;
  --media-overlay-surface: #00000073;
  --media-overlay-surface-strong: #000000b8;
  --media-overlay-foreground: #fff;
}

.dark {
  --background: #181818;
  --foreground: #e0e0e0;
  --home-content-surface: #111113;
  --home-composer-tray-bg: #1f1f1f;
  --home-brand-foreground: #f2f2f2;
  --home-brand-accent: #9a99ff;
  --home-sidebar-primary-text: #ffffffd6;
  --home-sidebar-secondary-text: #fffc;
  --home-sidebar-section-text: #fff9;
  --home-sidebar-nav-hover: color-mix(in srgb, var(--foreground) 8%, var(--background));
  --home-sidebar-nav-active: color-mix(in srgb, var(--foreground) 8%, var(--background));
  --window-shell-fallback-bg: #19191a;
  --card: #161616;
  --card-foreground: #fafafa;
  --elevated-surface: #1f1f1f;
  --elevated-border-color: #ffffff1a;
  --resize-grip-border: color-mix(in srgb, var(--foreground) 12%, var(--elevated-surface));
  --resize-grip-mark: color-mix(in srgb, var(--foreground) 48%, var(--elevated-surface));
  --resize-grip-shadow: 0 4px 12px #0000007a;
  --popover: var(--elevated-surface);
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #000;
  --secondary: #1a1a1a;
  --secondary-foreground: #fafafa;
  --secondary-tab-active-bg: #262626;
  --button-subtle-bg: #262626;
  --button-subtle-bg-hover: #303030;
  --modal-shell-surface: var(--elevated-surface);
  --modal-content-surface: var(--elevated-surface);
  --im-bridge-channel-card-bg: color-mix(in srgb, var(--secondary) 94%, var(--foreground) 6%);
  --muted: #1a1a1a;
  --muted-foreground: #fff9;
  --catalog-page-subtitle-foreground: #ffffff4d;
  --hint-surface: #262626;
  --chat-inline-code-bg: color-mix(in oklch, var(--muted) 90%, var(--foreground));
  --chat-audio-artifact-icon-bg: color-mix(in srgb, var(--foreground) 45%, var(--background));
  --chat-audio-artifact-icon-fg: #fff;
  --text-tertiary: #ffffff6b;
  --accent: #1a1a1a;
  --accent-foreground: #fafafa;
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: #fafafa;
  --warning: oklch(80% .15 75);
  --warning-foreground: oklch(75% .15 75);
  --success: oklch(70% .17 150);
  --success-foreground: oklch(80% .17 150);
  --workflow-learning-banner-foreground: #f5f7f5;
  --workflow-learning-banner-foreground-muted: #f5f7f59e;
  --workflow-learning-banner-border: #f5f7f524;
  --workflow-learning-banner-border-strong: #f5f7f538;
  --info: oklch(70% .16 255);
  --info-foreground: oklch(80% .14 255);
  --border: #ffffff1a;
  --model-selector-icon-border: var(--border-soft);
  --border-solid: #454545;
  --input: #ffffff1a;
  --ring: #ffffff4d;
  --project-assets-row-checkbox-bg: color-mix(in oklab,
    var(--background) 90%,
    transparent);
  --project-assets-row-checkbox-border: color-mix(in oklab,
    var(--foreground) 50%,
    transparent);
  --workspace-display-mode-mask-bg: var(--modal-mask-bg);
  --workspace-display-mode-mask-foreground: #fff;
  --workspace-display-mode-current-mask: #0009;
  --border-soft: #ffffff0d;
  --border-strong: #ffffff24;
  --shadow-soft-card: 0 0 0 1px #ffffff0f, 0 1px 2px #0006;
  --shadow-soft-popover: 0 0 0 1px #ffffff14, 0 4px 8px #0006,
    0 8px 16px #0006;
  --shadow-soft-floating: 0 0 0 var(--elevated-border-width) #ffffff1f, 0 8px 16px #00000080,
    0 16px 32px #00000080;
  --workflow-selected-shadow: 0 8px 24px -12px #000000b3;
  --workflow-selected-border: #ffffff5c;
  --chart-1: oklch(81.1% .094 280);
  --chart-2: oklch(60.6% .213 280);
  --chart-3: oklch(54.1% .239 280);
  --chart-4: oklch(49.1% .23 280);
  --chart-5: oklch(43.2% .197 280);
  --sidebar: #161616;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fafafa;
  --sidebar-primary-foreground: #000;
  --sidebar-accent: #222;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #fff3;
  --sidebar-ring: #ffffff4d;
  --brand-accent: #8b8aff;
  --brand-accent-foreground: #fff;
  --hub-wordmark-foreground: #fff;
  --hub-wordmark-accent: var(--brand-accent);
  --home-input-shadow: 0 16px 34px -24px #000000b8,
    0 2px 10px -8px #000000b8;
  --home-input-shadow-hover: var(--home-input-shadow);
  --home-input-shadow-focus: var(--home-input-shadow);
  --home-scene-tag-shadow-hover: 0 16px 30px -20px #000000d6;
  --home-scene-tag-content-reserve: 0px;
  --home-scene-tag-content-reserve-hover: 0px;
  --home-scene-tag-artwork-opacity: .86;
  --home-scene-tag-artwork-opacity-hover: .96;
  --home-scene-tag-artwork-filter: saturate(.8) contrast(1.08) brightness(.92);
  --home-scene-tag-artwork-divider: color-mix(in srgb, var(--foreground) 10%, transparent);
  --home-scene-tag-artwork-divider-width: var(--home-input-border-width);
  --home-scene-tag-artwork-inset-block: 0px;
  --home-scene-tag-artwork-inset-end: 0px;
  --home-scene-tag-artwork-radius: inherit;
  --home-scene-tag-artwork-blur: 0px;
  --home-scene-tag-border-hover: color-mix(in srgb, var(--foreground) 18%, transparent);
  --home-query-card-overlay: #000000ad;
  --home-query-card-border: color-mix(in srgb, var(--border) 55%, transparent);
  --workspace-loader-orb: color-mix(in srgb, var(--brand-accent) 68%, var(--background));
  --workspace-loader-body: #0b0b0b;
  --workspace-loader-icon: #fff;
  --workspace-loader-size: 48px;
  --workspace-loader-shell-size: 56px;
  --brutalist-border: var(--border-strong);
  --brutalist-border-subtle: var(--border-soft);
  --brutalist-border-strong: var(--border-strong);
  --brutalist-shadow: var(--shadow-soft-popover);
  --brutalist-shadow-sm: var(--shadow-soft-card);
  --brutalist-shadow-zero: 0 0 0 transparent;
  --topbar-bg: var(--background);
  --topbar-transparent-bg: #19191ae0;
  --topbar-transparent-foreground: #fff;
  --topbar-transparent-muted-foreground: #ffffffb8;
  --topbar-transparent-border: #ffffff1a;
  --topbar-saturate: 110%;
  --topbar-border: var(--border);
  --topbar-tab-active-bg: #ffffff17;
  --topbar-tab-active-fg: #fff;
  --topbar-tab-inactive-bg: #fff0;
  --topbar-tab-inactive-bg-hover: #ffffff14;
  --topbar-tab-inactive-fg: #ffffffb8;
  --topbar-tab-inactive-fg-hover: #fffffff2;
  --topbar-tab-divider: transparent;
  --topbar-icon-fg: #ffffffb8;
  --topbar-icon-fg-hover: #fffffff2;
  --home-new-task-icon-bg: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--foreground) 18%, transparent),
    color-mix(in srgb, var(--foreground) 6%, transparent) 68%,
    color-mix(in srgb, var(--foreground) 12%, transparent));
  --home-new-task-icon-fg: #fff;
  --home-new-task-icon-shadow: inset 0 0 8px color-mix(in srgb, var(--foreground) 20%, transparent);
  --scrollbar-thumb: #ffffff40;
  --scrollbar-thumb-hover: #fff6;
  --home-grid-line: color-mix(in srgb, var(--foreground) 10.206%, transparent);
  --home-grid-line-hover: color-mix(in srgb, var(--foreground) 22%, transparent);
  --home-grid-focus-line: #ffffff29;
  --workspace-loading-dot: #ecefff1f;
  --workspace-loading-dot-bright: #e2ddff47;
  --popup-item-hover: #ffffff0a;
  --popup-item-active: #ffffff0f;
  --tab-list-bg: var(--muted);
  --tab-track-bg: var(--tab-list-bg);
  --tab-active-bg: #262626;
  --tab-active-shadow: 0 1px 2px #00000080;
  --cm-bg: #161616;
  --cm-text: #fff;
  --cm-text-muted: #ffffffa6;
  --cm-text-icon: #ffffffbf;
  --cm-border: #fff3;
  --cm-shadow: 0 28px 56px -18px #000000d9, 0 12px 24px -10px #000000b3;
  --cm-step-inactive: #ffffff40;
  --cm-step-active: #fff;
  --cm-cta-bg: #fff;
  --cm-cta-bg-hover: #f6f7fb;
  --cm-cta-text: #15171f;
  --cm-close-hover-bg: #ffffff24;
}

html[data-hilo-gpu="disabled"] {
  --brutalist-shadow: 0 0 0 1px var(--border-strong);
  --brutalist-shadow-sm: 0 0 0 1px var(--border-soft);
  --brutalist-shadow-zero: 0 0 0 transparent;
}

html[data-hilo-gpu="disabled"] [class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-hilo-gpu="disabled"] .home-content-grid {
  --home-grid-background-image: none;
  background-image: none;
}

html[data-hilo-gpu="disabled"] .home-fade-up, html[data-hilo-gpu="disabled"] .home-whats-new__track, html[data-hilo-gpu="disabled"] .placeholder-shimmer::placeholder, html[data-hilo-gpu="disabled"] [data-home-query-card="true"], html[data-hilo-gpu="disabled"] [data-home-featured-skill-placeholder="true"], html[data-hilo-gpu="disabled"] .home-media-showcase-loading-surface:after, html[data-hilo-gpu="disabled"] .home-recommendation-layer, html[data-hilo-gpu="disabled"] .home-media-showcase-content-layer {
  animation: none !important;
}

html[data-hilo-gpu="disabled"] .home-recommendation-layer[data-motion="exit"] {
  display: none;
}

html[data-hilo-gpu="disabled"] .home-scene-tag-artwork:before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-hilo-gpu="disabled"] [data-reduced-compositing="true"] {
  transition-duration: 75ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-fade-up, .home-whats-new__track, .placeholder-shimmer::placeholder, [data-home-query-card="true"], [data-home-featured-skill-placeholder="true"], .home-media-showcase-loading-surface:after, .home-recommendation-layer, .home-media-showcase-content-layer {
    animation: none !important;
  }

  .home-recommendation-layer[data-motion="exit"] {
    display: none;
  }

  .home-query-card-content, .home-query-card-cta {
    transition-duration: 0s !important;
  }
}

html, body, #root {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  overflow: hidden;
}

#root {
  -webkit-user-select: none;
  user-select: none;
}

#root :where(input, textarea, [contenteditable="true"], [contenteditable="plaintext-only"], .ProseMirror, .chat-markdown, pre, code, .select-text, [data-text-selectable="true"]) {
  -webkit-user-select: text;
  user-select: text;
}

.transparent-window-floating-sidebar {
  background: var(--window-shell-fallback-bg);
}

html[data-window-transparent="true"], html[data-window-transparent="true"] body, html[data-window-transparent="true"] #root {
  background: none !important;
}

html[data-window-transparent="true"] .transparent-window-home-sidebar, html[data-window-transparent="true"] .transparent-window-narrow-sidebar {
  z-index: 30;
  position: relative;
}

html[data-window-transparent="true"] .transparent-window-home-sidebar, html[data-window-transparent="true"] .transparent-window-narrow-sidebar, html[data-window-transparent="true"] .transparent-window-topbar {
  --foreground: var(--topbar-transparent-foreground);
  --muted-foreground: var(--topbar-transparent-muted-foreground);
  --border: var(--topbar-transparent-border);
  -webkit-backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
  backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
  background: var(--topbar-transparent-bg) !important;
}

html[data-window-transparent="true"] .transparent-window-narrow-sidebar {
  -webkit-backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
  backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
}

html[data-window-transparent="true"] .transparent-window-sidebar-panel {
  background: var(--card) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-window-transparent="true"] .transparent-window-sidebar-panel {
    background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  }
}

html[data-window-transparent="true"] .transparent-window-sidebar-panel {
  -webkit-backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
  backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
}

html[data-window-transparent="true"] .transparent-window-sidebar-content {
  background: none !important;
}

html[data-hilo-gpu="disabled"] .transparent-window-home-sidebar, html[data-hilo-gpu="disabled"] .transparent-window-narrow-sidebar, html[data-hilo-gpu="disabled"] .transparent-window-sidebar-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-window-transparent="true"] .transparent-window-root, html[data-window-transparent="true"] .transparent-window-workspace-shell {
  background: none !important;
}

html[data-window-transparent="true"] .transparent-window-shell-material {
  -webkit-backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
  backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
  background: var(--window-shell-material-bg) !important;
}

html[data-window-transparent="true"] .transparent-window-home-sidebar[data-presentation="docked"], html[data-window-transparent="true"] .transparent-window-home-sidebar[data-presentation="rail"], html[data-window-transparent="true"] .transparent-window-home-sidebar[data-presentation="floating-preview"], html[data-window-transparent="true"] .transparent-window-shell-material > .transparent-window-topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none !important;
}

html[data-window-transparent="true"] .transparent-window-floating-sidebar {
  -webkit-backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
  backdrop-filter: blur(var(--transparent-window-sidebar-blur)) saturate(120%);
  background: var(--window-shell-material-bg) !important;
}

html[data-window-transparent="true"] .transparent-window-surface-gap {
  background: none !important;
}

html[data-window-transparent="true"] .transparent-window-topbar {
  border-color: var(--topbar-transparent-border) !important;
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="focus"] [data-workspace-pane="chat"][data-pane-visible="true"] [data-action-ui-id="session-tabs"] {
  padding-left: var(--window-traffic-light-inset, 0px);
  padding-right: var(--window-app-controls-inset, 116px);
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="split"][data-physical-pane-order="chat-canvas"] [data-workspace-pane="chat"] [data-action-ui-id="session-tabs"] {
  padding-left: var(--window-traffic-light-inset, 0px);
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="split"][data-physical-pane-order="canvas-chat"] [data-workspace-pane="chat"] [data-action-ui-id="session-tabs"] {
  padding-right: var(--window-app-controls-inset, 116px);
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="focus"] [data-workspace-pane="canvas"][data-pane-visible="true"] {
  --canvas-top-left-overlay-inset: var(--window-traffic-light-inset, 0px);
  --canvas-top-right-overlay-inset: var(--window-app-controls-inset, 116px);
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="split"][data-physical-pane-order="chat-canvas"] [data-workspace-pane="canvas"] {
  --canvas-top-right-overlay-inset: var(--window-app-controls-inset, 116px);
}

[data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="focus"] [data-workspace-pane="canvas"][data-pane-visible="true"] [data-action-ui-id="canvas.physical-top-right-actions"], [data-action-ui-id="workbench-shell"] [data-action-ui-id="workspace-stage"][data-layout-mode="split"][data-physical-pane-order="chat-canvas"] [data-workspace-pane="canvas"] [data-action-ui-id="canvas.physical-top-right-actions"] {
  right: calc(12px + var(--window-app-controls-inset, 116px));
}

[data-action-ui-id="workbench-sheet"][data-surface="global"] [data-window-app-controls-safe-row="true"] {
  padding-right: calc(var(--window-app-controls-inset, 116px) + 12px);
  transition: padding-right .16s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-action-ui-id="workbench-sheet"][data-surface="global"] [data-window-app-controls-safe-row="true"], [data-action-ui-id="workspace-stage"] [data-action-ui-id="canvas.viewport-controls"], [data-action-ui-id="workspace-stage"] .react-flow__minimap {
    transition: none !important;
  }
}

html[data-hilo-gpu="disabled"] .transparent-window-shell-material, html[data-hilo-gpu="disabled"] .transparent-window-floating-sidebar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--window-shell-fallback-bg) !important;
}

.modal-mask {
  background: var(--modal-mask-bg);
  -webkit-backdrop-filter: blur(var(--modal-mask-blur));
  backdrop-filter: blur(var(--modal-mask-blur));
}

.modal-mask.asset-picker-overlay {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal-mask.workspace-display-mode-mask {
  background: var(--workspace-display-mode-mask-bg);
  -webkit-backdrop-filter: blur(var(--modal-mask-blur));
  backdrop-filter: blur(var(--modal-mask-blur));
}

.elevated-surface-border {
  border: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-surface-border-width {
  border-width: var(--elevated-border-width);
  border-style: solid;
}

.elevated-surface-border-top {
  border-top: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-surface-border-right {
  border-right: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-surface-border-bottom {
  border-bottom: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-surface-border-left {
  border-left: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-surface-border-top-left {
  border-top: var(--elevated-border-width) solid var(--elevated-border-color);
  border-left: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-sheet-border[data-side="bottom"] {
  border-top: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-sheet-border[data-side="left"] {
  border-right: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-sheet-border[data-side="right"] {
  border-left: var(--elevated-border-width) solid var(--elevated-border-color);
}

.elevated-sheet-border[data-side="top"] {
  border-bottom: var(--elevated-border-width) solid var(--elevated-border-color);
}

.cn-toast {
  border: var(--elevated-border-width) solid var(--elevated-border-color) !important;
}

html[data-hilo-gpu="disabled"] .modal-mask {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

[data-density="compact"] {
  --border: #0000000d;
  --border-strong: #00000014;
  --input: #0000000d;
}

.dark [data-density="compact"] {
  --border: #ffffff0f;
  --border-strong: #ffffff1a;
  --input: #ffffff0f;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: none;
}

.island {
  position: relative;
}

:not(.dark) .island {
  background: linear-gradient(var(--island-fill, var(--background)) 0 0) padding-box, linear-gradient(135deg, oklch(0% 0 0 / .14) 0%, oklch(0% 0 0 / .06) 12%, oklch(0% 0 0 / .04) 30%, oklch(0% 0 0 / .03) 50%, oklch(0% 0 0 / .04) 70%, oklch(0% 0 0 / .06) 88%, oklch(0% 0 0 / .12) 100%) border-box;
  box-shadow: 0 1px 2px oklch(0% 0 0 / .04);
}

.dark .island {
  will-change: auto;
}

.island:before {
  content: "";
  z-index: 1;
  border-radius: inherit;
  background: var(--island-overlay-bg, transparent);
  pointer-events: none;
  transition: background .3s;
  position: absolute;
  inset: 0;
}

.resize-row {
  position: relative;
}

.resize-col:after {
  content: "";
  z-index: 10;
  border-radius: var(--brutalist-radius-sm);
  background-color: var(--info);
  width: 16px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .resize-col:after {
    background-color: color-mix(in srgb, var(--info) 16%, transparent);
  }
}

.resize-col:after {
  background-image: linear-gradient(to right, transparent 0 4px, var(--info) 4px 5px, transparent 5px 10px, var(--info) 10px 11px, transparent 11px 100%);
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 12px;
  transition: opacity .1s ease-out;
  transform: translate(-50%, -50%);
}

.resize-col:before {
  content: "";
  width: var(--divider-width);
  z-index: 1;
  background: var(--border-soft);
  pointer-events: none;
  inset-block: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.resize-col[data-indicator-variant="grip"]:before {
  display: none;
}

.resize-col[data-indicator-variant="grip"] {
  z-index: 30;
  overflow: visible;
}

.resize-col[data-active="true"], .resize-col:focus-visible {
  z-index: 40;
}

.resize-col[data-indicator-variant="grip"]:after {
  z-index: 50;
  border: var(--divider-width) solid var(--resize-grip-border);
  background-color: var(--elevated-surface);
  background-image: linear-gradient(to right, transparent 0 calc(50% - 2px), var(--resize-grip-mark) calc(50% - 2px) calc(50% - 1px), transparent calc(50% - 1px) calc(50% + 1px), var(--resize-grip-mark) calc(50% + 1px) calc(50% + 2px), transparent calc(50% + 2px) 100%);
  width: 10px;
  height: 40px;
  box-shadow: var(--resize-grip-shadow);
  background-size: 100% 16px;
  border-radius: 3px;
}

.resize-col:hover:after, .resize-col[data-active="true"]:after, .resize-col:focus-visible:after {
  opacity: 1;
}

[data-workspace-divider-seam="chat-canvas"][data-text-edit-canvas-side="left"] .resize-col {
  width: 6px;
  margin-inline: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
}

[data-workspace-divider-seam="chat-canvas"][data-text-edit-canvas-side="left"] .resize-col:after {
  left: 0;
}

html[data-column-resize-active="true"] [data-action-ui-id="global-sidebar-dock"], html[data-column-resize-active="true"] [data-action-ui-id="global-sidebar-visual-panel"], html[data-column-resize-active="true"] [data-action-ui-id="global-sidebar-content"] {
  transition-property: none !important;
  transition-duration: 0s !important;
}

body.workspace-stage-resizing iframe {
  pointer-events: none !important;
}

[data-workspace-pane="canvas"]:has([data-plugin-editor-overlay-open="true"]) {
  z-index: 40;
  overflow: visible;
}

[data-workspace-pane-surface="canvas"]:has([data-plugin-editor-overlay-open="true"]), [data-workspace-pane-surface="canvas"]:has([data-plugin-editor-overlay-open="true"]) [data-workspace-canvas-surface="base"], [data-workspace-pane-surface="canvas"]:has([data-plugin-editor-overlay-open="true"]) [data-workspace-canvas-viewport-host="true"], [data-workspace-pane-surface="canvas"]:has([data-plugin-editor-overlay-open="true"]) [data-workspace-canvas-area-island="true"] {
  overflow: visible;
}

[data-action-ui-id="home-sidebar"][data-presentation="docked"] [data-action-ui-id="home-sidebar.resize-handle"] {
  transform: translateX(8px);
}

[data-action-ui-id="home-sidebar"][data-presentation="floating-preview"] [data-action-ui-id="home-sidebar.resize-handle"] {
  transform: translateX(4px);
}

.resize-row:after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.no-islands .island {
  background: var(--island-fill, var(--background));
  will-change: auto;
  border: none;
  border-radius: 0;
}

.no-islands .island:before {
  display: none;
}

.no-islands .resize-col {
  background: none;
  width: 9px;
  margin-inline: -4.5px;
}

.no-islands .resize-col[data-indicator-variant="grip"] {
  margin-inline: -4.5px;
}

.no-islands .resize-col[data-action-ui-id="home-sidebar.resize-handle"] {
  width: 8px;
  margin-inline: 0;
}

.no-islands .resize-row {
  height: var(--divider-width);
  background: var(--layout-divider);
  position: relative;
}

.no-islands .resize-row:after {
  content: "";
  z-index: 10;
  position: absolute;
  inset: -6px 0;
}

.no-islands .resize-row > * {
  display: none;
}

.no-islands .flat-divider-s {
  border-inline-start: var(--divider-width) solid var(--layout-divider);
}

.drag-region {
  app-region: drag;
  -webkit-app-region: drag;
}

.no-drag, [data-action-ui-id="global-sidebar-surface"][data-interaction-bridge="true"] .drag-region, .mac-window-drag-region {
  app-region: no-drag;
  -webkit-app-region: no-drag;
}

.mac-window-drag-overlay {
  pointer-events: none;
}

[data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"] .mac-window-drag-region {
  app-region: drag;
  -webkit-app-region: drag;
}

[data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"] .mac-window-drag-overlay {
  pointer-events: auto;
}

body:has([data-slot="dialog-overlay"][data-open]) .drag-region, body:has([data-slot="dialog-overlay"][data-open]) .mac-window-drag-region {
  app-region: no-drag;
  -webkit-app-region: no-drag;
}

[data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"][data-global-sidebar-preview-active="true"] [data-action-ui-id="home.window-drag-region-top"], [data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"][data-global-sidebar-preview-active="true"] [data-action-ui-id="workbench.window-drag-fallback-top"], [data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"][data-global-sidebar-preview-active="true"] [data-action-ui-id="workbench.window-drag-fallback-bottom"], [data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"][data-global-sidebar-preview-active="true"] [data-action-ui-id="workbench.window-drag-hot-zone-left"], [data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"][data-global-sidebar-preview-active="true"] [data-action-ui-id="session-tabs"] {
  pointer-events: none;
  app-region: no-drag;
  -webkit-app-region: no-drag;
}

.mac-window-drag-handle {
  display: none;
}

[data-window-chrome-mode="mac-integrated"][data-window-fullscreen="false"] .mac-window-drag-handle {
  display: block;
}

.home-sidebar-chrome-controls [data-action-ui-id="topbar.diagnostics-trigger"], .home-sidebar-chrome-controls [data-action-ui-id="home-sidebar.global-search"], [data-action-ui-id="home-sidebar.brand-actions"] [data-action-ui-id="topbar.diagnostics-trigger"] {
  margin-inline: 0;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.home-new-task-icon {
  background: var(--home-new-task-icon-bg);
  color: var(--home-new-task-icon-fg);
  box-shadow: var(--home-new-task-icon-shadow);
}

.home-sidebar-brand-row {
  padding-left: var(--window-leading-content-inset);
}

.home-sidebar-nav-pill, .home-new-task-pill {
  padding-left: calc(var(--home-sidebar-icon-axis, 32px) - 12px);
}

.sidebar-user-menu {
  --home-sidebar-icon-axis: 32px;
}

.sidebar-user-menu-trigger-row {
  padding-left: calc(var(--home-sidebar-icon-axis, 32px) - 16px);
  padding-right: 2px;
}

.sidebar-user-menu-trigger-content {
  padding-left: 2px;
}

.home-sidebar-scroll-divider {
  z-index: 10;
  background: var(--foreground);
  height: .5px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-sidebar-scroll-divider {
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
  }
}

.home-sidebar-scroll-divider {
  pointer-events: none;
}

.home-sidebar-scroll-mask-active {
  --home-sidebar-mask-top: 0px;
  --home-sidebar-mask-bottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--foreground) var(--home-sidebar-mask-top), var(--foreground) calc(100% - var(--home-sidebar-mask-bottom)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--foreground) var(--home-sidebar-mask-top), var(--foreground) calc(100% - var(--home-sidebar-mask-bottom)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--foreground) var(--home-sidebar-mask-top), var(--foreground) calc(100% - var(--home-sidebar-mask-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, var(--foreground) var(--home-sidebar-mask-top), var(--foreground) calc(100% - var(--home-sidebar-mask-bottom)), transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.home-sidebar-scroll-mask-top {
  --home-sidebar-mask-top: 18px;
}

.home-sidebar-scroll-mask-bottom {
  --home-sidebar-mask-bottom: 18px;
}

.home-sidebar-detail {
  opacity: 1;
  visibility: visible;
  transition: opacity .1s cubic-bezier(.16, 1, .3, 1), visibility linear;
}

[data-sidebar-density="rail"] .home-sidebar-detail {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0s;
}

.sidebar-user-menu-detail {
  opacity: 1;
  visibility: visible;
  transition: opacity .14s cubic-bezier(.16, 1, .3, 1), visibility linear;
}

.sidebar-user-menu[data-expanded="false"] .sidebar-user-menu-detail {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.home-sidebar-nav-pill:before {
  left: calc(var(--home-sidebar-icon-axis, 32px) - 16px);
  width: calc(100% - 18px);
  clip-path: inset(0 0 0 0 round var(--radius-md));
  transition: clip-path .16s cubic-bezier(.22, 1, .36, 1), background-color .1s ease-out;
  right: auto;
}

[data-sidebar-density="rail"] .home-sidebar-nav-pill:before {
  clip-path: inset(0 calc(100% - 32px) 0 0 round var(--radius-md));
}

@media (prefers-reduced-motion: reduce) {
  .home-sidebar-detail, .sidebar-user-menu-detail, .home-sidebar-nav-pill:before {
    transition: none;
  }
}

.home-sidebar-recent-drag-over {
  position: relative;
}

.home-sidebar-recent-drag-over:before {
  content: "";
  background: var(--brand-accent);
  height: 2px;
  box-shadow: 0 0 8px var(--brand-accent);
  border-radius: 999px;
  position: absolute;
  left: 16px;
  right: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-sidebar-recent-drag-over:before {
    box-shadow: 0 0 8px color-mix(in srgb, var(--brand-accent) 32%, transparent);
  }
}

.home-sidebar-recent-drag-over:before {
  pointer-events: none;
}

.home-sidebar-recent-drag-over:after {
  content: "";
  border: 2px solid var(--brand-accent);
  background: var(--sidebar);
  pointer-events: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  left: 8px;
}

.home-sidebar-recent-drag-over-before:before {
  top: -1px;
}

.home-sidebar-recent-drag-over-before:after {
  top: -4px;
}

.home-sidebar-recent-drag-over-after:before {
  bottom: -1px;
}

.home-sidebar-recent-drag-over-after:after {
  bottom: -4px;
}

.home-sidebar-footer {
  border-top: .5px solid #0000;
}

.global-sidebar-footer-divider {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .global-sidebar-footer-divider {
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
  }
}

.topbar-tabs-mask-active {
  --topbar-tabs-mask-left: 0px;
  --topbar-tabs-mask-right: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--foreground) var(--topbar-tabs-mask-left), var(--foreground) calc(100% - var(--topbar-tabs-mask-right)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--foreground) var(--topbar-tabs-mask-left), var(--foreground) calc(100% - var(--topbar-tabs-mask-right)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--foreground) var(--topbar-tabs-mask-left), var(--foreground) calc(100% - var(--topbar-tabs-mask-right)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, var(--foreground) var(--topbar-tabs-mask-left), var(--foreground) calc(100% - var(--topbar-tabs-mask-right)), transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.topbar-tabs-mask-left {
  --topbar-tabs-mask-left: 24px;
}

.topbar-tabs-mask-right {
  --topbar-tabs-mask-right: 24px;
}

.scrollbar-fade {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.scrollbar-fade::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-fade.scrollbar-fade-compact::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.scrollbar-fade.connector-dialog-scrollbar::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.scrollbar-fade::-webkit-scrollbar-track {
  background: none;
}

.scrollbar-fade::-webkit-scrollbar-thumb {
  background-color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .scrollbar-fade::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--foreground) 0%, transparent);
  }
}

.scrollbar-fade::-webkit-scrollbar-thumb {
  border-radius: 999px;
  transition: background-color .3s ease-in-out;
}

.scrollbar-fade[data-scrolling="true"] {
  scrollbar-color: var(--foreground) transparent;
}

@supports (color: color-mix(in lab, red, red)) {
  .scrollbar-fade[data-scrolling="true"] {
    scrollbar-color: color-mix(in srgb, var(--foreground) 20%, transparent) transparent;
  }
}

.scrollbar-fade[data-scrolling="true"]::-webkit-scrollbar-thumb {
  background-color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .scrollbar-fade[data-scrolling="true"]::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--foreground) 20%, transparent);
  }
}

.scrollbar-fade::-webkit-scrollbar-thumb:hover {
  background-color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .scrollbar-fade::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--foreground) 35%, transparent);
  }
}

.scrollbar-primary::-webkit-scrollbar {
  height: 2px;
}

.scrollbar-primary::-webkit-scrollbar-track {
  background: none;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
  background-color: #0000;
  border-radius: 1px;
  transition: background-color .3s;
}

.scrollbar-primary:hover::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}

.scrollbar-primary::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
}

.chat-markdown {
  font-size: var(--text-body-15);
  line-height: var(--text-body-15--line-height);
  overflow-wrap: break-word;
  word-break: break-word;
  flex-direction: column;
  gap: 14px;
  display: flex;
  container-type: inline-size;
}

.chat-markdown > div {
  flex-direction: column !important;
  gap: 14px !important;
  display: flex !important;
}

.chat-markdown > div > :not(:first-child) {
  margin-top: 0 !important;
}

.chat-markdown > div > * {
  margin-bottom: 0 !important;
}

.chat-markdown p {
  margin: 0;
}

.chat-markdown code:not(pre code) {
  background: var(--chat-inline-code-bg);
  font-size: var(--text-prose-code);
  border-radius: 4px;
  padding: .18em .5em;
}

.chat-markdown pre {
  background: var(--muted);
  border-radius: 6px;
  max-width: 100%;
  max-height: 200px;
  margin: 0;
  overflow: auto;
}

.chat-markdown pre code {
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 20px;
  display: block;
}

.chat-markdown ul, .chat-markdown ol {
  margin: 0;
  padding-left: 1.5em !important;
  list-style-position: outside !important;
}

.chat-markdown ul {
  list-style-type: disc;
}

.chat-markdown ol {
  list-style-type: decimal;
}

.chat-markdown li {
  margin: 0;
  padding: 0;
}

.chat-markdown li + li {
  margin-top: 8px;
}

.chat-markdown li > * {
  margin: 0;
}

.chat-markdown li > p {
  display: inline;
}

.chat-markdown a {
  color: var(--primary);
  text-decoration: underline;
}

.chat-markdown a.chat-browser-link {
  color: var(--brand-accent);
  font-weight: 500;
  text-decoration: none;
  transition: color .12s;
}

.chat-markdown a.chat-browser-link:hover {
  color: var(--brand-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-markdown a.chat-browser-link:hover {
    color: color-mix(in srgb, var(--brand-accent) 80%, var(--foreground));
  }
}

.chat-markdown a.chat-browser-link:focus-visible {
  outline: 2px solid var(--brand-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-markdown a.chat-browser-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  }
}

.chat-markdown a.chat-browser-link:focus-visible {
  outline-offset: 2px;
}

.chat-markdown blockquote {
  border-left: 3px solid var(--border);
  color: var(--muted-foreground);
  margin: 0;
  padding-left: .75em;
}

.chat-markdown hr {
  border: none;
  border-top: var(--divider-width) solid var(--border);
  margin: 0;
}

@keyframes text-shimmer {
  0% {
    background-position: 150%;
  }

  100% {
    background-position: -50%;
  }
}

@keyframes im-status-radar {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  24% {
    opacity: .18;
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes im-step-line-flow {
  0% {
    background-position: 150%;
  }

  100% {
    background-position: -50%;
  }
}

.text-shimmer {
  background: linear-gradient(110deg, currentColor 0%, currentColor 40%, var(--background) 50%, currentColor 60%, currentColor 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-shimmer {
    background: linear-gradient(110deg, currentColor 0%, currentColor 40%, color-mix(in srgb, var(--background) 55%, currentColor) 50%, currentColor 60%, currentColor 100%);
  }
}

.text-shimmer {
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  background-position: 150%;
  background-size: 220%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 2.8s linear infinite text-shimmer;
}

@media (prefers-reduced-motion: reduce) {
  .text-shimmer {
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
  }
}

@keyframes question-card-flow-travel-outer {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100px;
  }
}

@keyframes question-card-flow-travel-middle {
  from {
    stroke-dashoffset: -2px;
  }

  to {
    stroke-dashoffset: -102px;
  }
}

@keyframes question-card-flow-travel-core {
  from {
    stroke-dashoffset: -5px;
  }

  to {
    stroke-dashoffset: -105px;
  }
}

.question-card-waiting-flow {
  isolation: isolate;
  position: relative;
}

.question-card-flow-stroke-outer {
  animation: 3.8s linear infinite question-card-flow-travel-outer;
}

.question-card-flow-stroke-middle {
  animation: 3.8s linear infinite question-card-flow-travel-middle;
}

.question-card-flow-stroke-core {
  animation: 3.8s linear infinite question-card-flow-travel-core;
}

@media (prefers-reduced-motion: reduce) {
  .question-card-flow-stroke-outer, .question-card-flow-stroke-middle, .question-card-flow-stroke-core {
    animation: none;
  }
}

@property --question-shimmer-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes question-shimmer-rotate {
  to {
    --question-shimmer-angle: 360deg;
  }
}

.question-shimmer-border {
  isolation: isolate;
  background-clip: padding-box;
  border: 1.5px solid #0000;
  position: relative;
}

.question-shimmer-border:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--question-shimmer-angle), var(--foreground) 0%, var(--foreground) 25%, var(--foreground) 50%, var(--foreground) 75%, var(--foreground) 100%);
  padding: 1.5px;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .question-shimmer-border:before {
    background: conic-gradient(from var(--question-shimmer-angle), color-mix(in srgb, var(--foreground) 18%, transparent) 0%, color-mix(in srgb, var(--foreground) 4%, transparent) 25%, color-mix(in srgb, var(--foreground) 18%, transparent) 50%, color-mix(in srgb, var(--foreground) 4%, transparent) 75%, color-mix(in srgb, var(--foreground) 18%, transparent) 100%);
  }
}

.question-shimmer-border:before {
  -webkit-mask-composite: xor;
  pointer-events: none;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  animation: 3s linear infinite question-shimmer-rotate;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

@media (prefers-reduced-motion: reduce) {
  .question-shimmer-border:before {
    animation: none;
  }
}

@keyframes placeholder-shimmer {
  0%, 100% {
    opacity: .45;
  }

  50% {
    opacity: .25;
  }
}

.placeholder-shimmer::placeholder {
  animation: 3s ease-in-out infinite placeholder-shimmer;
}

@keyframes home-fade-up {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.home-fade-up {
  animation: .5s ease-out both home-fade-up;
}

@keyframes hub-logo-wink {
  0%, 3%, 68.1%, 100% {
    transform: rotate(28.8202deg) scaleY(1) rotate(-28.8202deg);
  }

  7.5%, 68% {
    transform: rotate(31.8202deg) scale(1.05, .08) rotate(-28.8202deg);
  }
}

@keyframes hub-logo-wink-highlight {
  0%, 3%, 68.1%, 100% {
    opacity: 1;
  }

  7.5%, 68% {
    opacity: 0;
  }
}

@keyframes hub-logo-blink {
  0%, 8%, 100% {
    transform: rotate(28.8202deg) scaleY(1) rotate(-28.8202deg);
  }

  30%, 38% {
    transform: rotate(28.8202deg) scaleY(.36) rotate(-28.8202deg);
  }

  58% {
    transform: rotate(28.8202deg) scaleY(.62) rotate(-28.8202deg);
  }

  78% {
    transform: rotate(28.8202deg) scaleY(.9) rotate(-28.8202deg);
  }
}

.hub-logo-eye-motion {
  transform-box: view-box;
}

.hub-logo-eye-motion[data-hub-logo-eye="left"] {
  transform-origin: 10.7172px 32.088px;
}

.hub-logo-eye-motion[data-hub-logo-eye="right"] {
  transform-origin: 37.3652px 46.7917px;
}

.hub-logo-eye-motion[data-hub-logo-motion="wink"] {
  will-change: transform;
  animation: .56s cubic-bezier(.3, .72, .2, 1) hub-logo-wink;
}

.hub-logo-eye-motion[data-hub-logo-motion="wink"] [data-hub-logo-highlight] {
  animation: .56s linear hub-logo-wink-highlight;
}

.hub-logo-eye-motion[data-hub-logo-motion="blink"] {
  will-change: transform;
  animation: .24s cubic-bezier(.3, .72, .2, 1) hub-logo-blink;
}

@media (prefers-reduced-motion: reduce) {
  .hub-logo-eye-motion {
    animation: none !important;
  }
}

.home-whats-new {
  border-width: var(--divider-width);
}

@keyframes home-whats-new-roll {
  from {
    transform: translateY(24px);
  }

  to {
    transform: translateY(0);
  }
}

.home-whats-new__track {
  animation: home-whats-new-roll var(--home-whats-new-roll-transition-duration) ease-out both;
  will-change: transform;
}

.home-whats-new__item {
  width: max-content;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .home-whats-new__track {
    animation: none;
  }
}

.home-input-surface {
  --message-input-editor-font-size: var(--home-input-editor-font-size);
  isolation: isolate;
  border: var(--home-input-border-width) solid var(--home-input-border);
  background: var(--home-input-surface);
  box-shadow: var(--home-input-shadow);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.message-input-surface [data-message-input-attachment-preview="true"] [data-file-chip-layout="tile"] {
  border-radius: var(--message-input-attachment-radius);
}

.home-composer-placeholder {
  min-height: var(--input-card-height);
}

@keyframes home-composer-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.home-composer-motion-layer {
  z-index: 30;
  visibility: hidden;
  transform-origin: top;
  will-change: translate, width;
  animation: .5s ease-out both home-composer-enter;
  position: fixed;
  top: 0;
  translate: -50%;
}

.home-composer-motion-layer[data-home-composer-ready="true"] {
  visibility: visible;
}

.home-composer-project-tray {
  opacity: 1;
  visibility: visible;
  transition: opacity .1s, translate .16s cubic-bezier(.22, 1, .36, 1), visibility linear;
  translate: 0;
}

.home-composer-motion-layer[data-motion="true"] .home-composer-project-tray {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .1s, translate .16s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .16s;
  translate: 0 -8px;
}

.home-composer-motion-layer .home-input-surface {
  min-height: var(--home-composer-min-height, var(--input-card-height));
  border-radius: var(--home-composer-radius, var(--home-input-radius));
  will-change: height, border-radius;
  transition: height .18s cubic-bezier(.22, 1, .36, 1), border-radius .18s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface > div:last-child {
  inset-inline: var(--message-input-card-padding);
  min-height: 0;
  position: absolute;
  inset-block-start: calc(var(--message-input-card-padding) + var(--home-composer-attachment-offset, 0px));
  inset-block-end: var(--message-input-card-padding);
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface > div:last-child > .message-input-editor {
  inset-inline: var(--home-composer-editor-inset, 0px);
  min-width: 0;
  position: absolute;
  inset-block-start: var(--home-composer-editor-top, 0px);
  inset-block-end: var(--home-composer-editor-bottom, 32px);
  inset-inline-end: calc(var(--home-composer-editor-inset, 0px) + max(0px, var(--home-composer-actions-right-width, var(--btn-height-sm)) - var(--btn-height-sm)) * var(--home-composer-progress, 0));
  overflow: hidden;
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface [data-composer-action-row="true"] {
  inset-inline: 0;
  bottom: var(--home-composer-action-bottom, 0px);
  position: absolute;
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface .message-input-editor .ProseMirror {
  min-height: var(--home-composer-editor-min-height, var(--home-input-editor-min-height));
  max-height: var(--home-composer-editor-max-height, 200px);
  opacity: var(--home-composer-live-editor-opacity, 1);
  scrollbar-gutter: auto;
  scrollbar-width: none;
  overflow-y: hidden;
}

.message-input-compact-preview {
  z-index: 2;
  color: var(--foreground);
  font-size: var(--message-input-editor-font-size);
  font-weight: 400;
  line-height: var(--text-body-14--line-height);
  letter-spacing: -.01em;
  opacity: var(--home-composer-prompt-preview-opacity, 0);
  pointer-events: none;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  position: absolute;
  inset-block-start: 4px;
  inset-inline: 8px;
  overflow: hidden;
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface .message-input-editor .ProseMirror::-webkit-scrollbar {
  display: none;
}

.home-composer-motion-layer .home-input-surface [data-composer-actions-left="true"] > div > :not([data-action-ui-id="home-attachment-add"]):not([data-action-ui-id="home-attachment-local"]) {
  opacity: var(--home-composer-toolbar-opacity, 1);
}

.home-composer-motion-layer[data-motion="true"] .home-input-surface [data-message-input-attachment-preview="true"] {
  z-index: 1;
  inset-inline: var(--message-input-card-padding);
  top: var(--message-input-card-padding);
  width: calc(100% - var(--message-input-card-padding) - var(--message-input-card-padding));
  opacity: var(--home-composer-toolbar-opacity, 1);
  pointer-events: none;
  position: absolute;
}

.home-composer-motion-layer[data-home-composer-controls-hidden="true"] .home-input-surface [data-composer-actions-left="true"] {
  overflow: hidden;
}

.home-composer-motion-layer[data-home-composer-controls-hidden="true"] .home-input-surface [data-composer-actions-left="true"] > div > :not([data-action-ui-id="home-attachment-add"]):not([data-action-ui-id="home-attachment-local"]), .home-composer-motion-layer[data-home-composer-controls-hidden="true"] .home-input-surface [data-message-input-attachment-preview="true"], .home-composer-motion-layer[data-home-composer-controls-hidden="true"] .home-composer-promotion {
  visibility: hidden;
  pointer-events: none;
}

.home-composer-motion-layer[data-motion="true"] .home-placeholder-typewriter {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.home-composer-promotion {
  opacity: 1;
}

.home-composer-scroll-runway {
  height: var(--home-composer-scroll-runway);
}

.home-composer-sticky-backdrop {
  z-index: 15;
  height: var(--home-composer-sticky-backdrop-height);
  margin-bottom: calc(0px - var(--home-composer-sticky-backdrop-height));
  background-color: var(--home-content-surface);
  background-image: var(--home-grid-background-image);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--home-composer-sticky-backdrop-fade-height)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--home-composer-sticky-backdrop-fade-height)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--home-composer-sticky-backdrop-fade-height)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--home-composer-sticky-backdrop-fade-height)), transparent 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  background-position: 0 0;
  background-size: 20px 20px;
  flex: none;
  position: sticky;
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-composer-motion-layer, .home-composer-project-tray, .home-composer-motion-layer .home-input-surface, .home-composer-sticky-backdrop {
    will-change: auto;
    transition: none;
    animation: none;
  }
}

html[data-hilo-gpu="disabled"] .home-composer-motion-layer {
  animation: none;
}

html[data-hilo-gpu="disabled"] .home-composer-sticky-backdrop {
  will-change: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.update-shortcut-trigger {
  border-radius: 999px;
  flex: none;
  width: 28px;
  height: 28px;
  transition: width .36s cubic-bezier(.22, 1, .36, 1), transform .16s;
  position: relative;
  overflow: hidden;
}

.sidebar-user-menu-rail-shortcut {
  bottom: calc(100% + 16px);
  left: var(--home-sidebar-icon-axis, 32px);
  z-index: 20;
  position: absolute;
  transform: translateX(-50%);
}

.update-shortcut-trigger:hover, .update-shortcut-trigger:focus-visible, .update-shortcut-trigger[data-open="true"] {
  width: 76px;
}

.update-shortcut-trigger.update-shortcut-trigger--compact {
  width: 28px;
  height: 28px;
  position: absolute;
}

.update-shortcut-trigger.update-shortcut-trigger--compact:hover, .update-shortcut-trigger.update-shortcut-trigger--compact:focus-visible, .update-shortcut-trigger.update-shortcut-trigger--compact[data-open="true"] {
  width: 28px;
}

.update-shortcut-icon {
  width: 16px;
  height: 16px;
  transition: opacity 60ms linear, transform 60ms ease-out;
  position: absolute;
  top: 6px;
  right: 6px;
}

.update-shortcut-trigger:hover .update-shortcut-icon, .update-shortcut-trigger:focus-visible .update-shortcut-icon, .update-shortcut-trigger[data-open="true"] .update-shortcut-icon {
  opacity: 0;
  transform: translateX(2px) scale(.94);
}

.update-shortcut-trigger.update-shortcut-trigger--compact:hover .update-shortcut-icon, .update-shortcut-trigger.update-shortcut-trigger--compact:focus-visible .update-shortcut-icon, .update-shortcut-trigger.update-shortcut-trigger--compact[data-open="true"] .update-shortcut-icon {
  opacity: 1;
  transform: none;
}

.update-shortcut-label {
  font-size: var(--text-body-13);
  opacity: 0;
  place-items: center;
  font-weight: 400;
  transition: opacity .12s, transform .15s cubic-bezier(.22, 1, .36, 1);
  display: grid;
  position: absolute;
  inset: 0;
  transform: translateX(-8px);
}

.update-shortcut-trigger:hover .update-shortcut-label, .update-shortcut-trigger:focus-visible .update-shortcut-label, .update-shortcut-trigger[data-open="true"] .update-shortcut-label {
  opacity: 1;
  transition-delay: 20ms;
  transform: translateX(0);
}

.update-shortcut-trigger.update-shortcut-trigger--compact:hover .update-shortcut-label, .update-shortcut-trigger.update-shortcut-trigger--compact:focus-visible .update-shortcut-label, .update-shortcut-trigger.update-shortcut-trigger--compact[data-open="true"] .update-shortcut-label {
  opacity: 0;
  transition-delay: 0s;
  transform: translateX(-8px);
}

.update-sidebar-shortcut-slot {
  flex: none;
  justify-content: flex-end;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  transition: width .16s ease-out;
  display: inline-flex;
}

.update-sidebar-shortcut-slot--expanded {
  width: 48px;
  min-width: 48px;
}

.update-sidebar-shortcut-slot--compact {
  width: 24px;
  min-width: 24px;
}

.update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):hover, .update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):focus-visible {
  width: 24px;
}

.update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):hover .update-sidebar-shortcut-icon, .update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):focus-visible .update-sidebar-shortcut-icon {
  opacity: 1;
}

.update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):hover .update-sidebar-shortcut-label, .update-sidebar-shortcut-slot--compact .update-sidebar-shortcut:not(:disabled):focus-visible .update-sidebar-shortcut-label {
  opacity: 0;
}

.update-sidebar-shortcut {
  transform-origin: 0;
  border-radius: 999px;
  flex: none;
  width: 24px;
  min-width: 24px;
  height: 24px;
  transition: width .16s ease-out;
  position: relative;
  overflow: hidden;
}

.update-sidebar-shortcut:not(:disabled):hover, .update-sidebar-shortcut:not(:disabled):focus-visible {
  width: 48px;
}

.update-sidebar-shortcut-icon {
  pointer-events: none;
  transition: opacity .16s ease-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes update-sidebar-shortcut-icon-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.update-sidebar-shortcut-icon--loading {
  animation: 1s linear infinite update-sidebar-shortcut-icon-spin;
}

.update-sidebar-shortcut-label {
  pointer-events: none;
  opacity: 0;
  place-items: center;
  transition: opacity .16s ease-out;
  display: grid;
  position: absolute;
  inset: 0;
  transform: none;
}

.update-sidebar-shortcut:not(:disabled):hover .update-sidebar-shortcut-icon, .update-sidebar-shortcut:not(:disabled):focus-visible .update-sidebar-shortcut-icon {
  opacity: 0;
}

.update-sidebar-shortcut:not(:disabled):hover .update-sidebar-shortcut-label, .update-sidebar-shortcut:not(:disabled):focus-visible .update-sidebar-shortcut-label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .update-sidebar-shortcut-slot, .update-sidebar-shortcut, .update-sidebar-shortcut-icon, .update-sidebar-shortcut-label {
    transition: none;
  }

  .update-sidebar-shortcut-icon--loading {
    animation: none;
  }
}

.home-skill-install-indicator {
  --home-skill-install-angle: 30deg;
  border: var(--divider-width) solid var(--home-skill-install-border);
  background: conic-gradient(from -90deg, var(--home-skill-install-progress) 0deg var(--home-skill-install-angle), var(--home-skill-install-track) var(--home-skill-install-angle) 360deg);
  -webkit-backdrop-filter: blur(var(--home-skill-install-blur));
  backdrop-filter: blur(var(--home-skill-install-blur));
  box-shadow: var(--home-skill-install-shadow);
  border-radius: 999px;
  place-items: center;
  transition: background .24s ease-out;
  display: grid;
}

html[data-hilo-gpu="disabled"] .home-skill-install-indicator {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-input-surface .message-input-editor .ProseMirror {
  min-height: var(--home-input-editor-min-height);
  letter-spacing: var(--home-input-editor-letter-spacing);
  overscroll-behavior-y: contain;
}

.workspace-mascot-loader {
  box-sizing: border-box;
  width: var(--workspace-loader-shell-size);
  height: var(--workspace-loader-shell-size);
  place-items: center;
  padding-bottom: 8px;
  display: grid;
  position: relative;
  overflow: visible;
}

.workspace-mascot-loader:after {
  background: radial-gradient(circle at center, var(--foreground), transparent 72%);
  border-radius: 999px;
  height: 8px;
  position: absolute;
  bottom: -2px;
  left: 4px;
  right: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .workspace-mascot-loader:after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--foreground) 16%, transparent), transparent 72%);
  }
}

.workspace-mascot-loader:after {
  content: "";
  opacity: .34;
  filter: blur(3px);
  transform-origin: center;
  animation: 4.4s ease-in-out infinite workspace-mascot-shadow-drift;
}

.workspace-mascot-loader-frame {
  width: var(--workspace-loader-size);
  height: var(--workspace-loader-size);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.workspace-mascot-loader-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.workspace-mascot-loader-body {
  transform-box: fill-box;
  transform-origin: 22% 86%;
  will-change: transform;
  animation: 3.1s ease-in-out infinite workspace-mascot-body-float;
}

.workspace-mascot-loader-icon-stage {
  transform-box: fill-box;
  transform-origin: 18% 86%;
}

.workspace-mascot-loader-symbol {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 18% 86%;
  will-change: transform, opacity;
  transition: opacity .26s;
  transform: translate3d(-3px, 8px, 0) scale(.72) rotate(12deg);
}

.workspace-mascot-loader-symbol[data-active="true"] {
  opacity: 1;
  animation: .54s linear workspace-mascot-icon-spring-in;
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

@keyframes workspace-mascot-icon-spring-in {
  0% {
    transform: translate3d(-3px, 8px, 0) scale(.72) rotate(12deg);
  }

  28% {
    transform: translate3d(1px, -2px, 0) scale(1.11) rotate(-2.2deg);
  }

  46% {
    transform: translate3d(0, 0, 0) scale(.948) rotate(1.1deg);
  }

  64% {
    transform: translate3d(0, 0, 0) scale(1.036) rotate(-.5deg);
  }

  80% {
    transform: translate3d(0, 0, 0) scale(.992) rotate(.18deg);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes workspace-mascot-body-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  26% {
    transform: translate3d(0, 0, 0) scale(1.014);
  }

  52% {
    transform: translate3d(0, 0, 0) scale(1.03);
  }

  76% {
    transform: translate3d(0, 0, 0) scale(1.018);
  }
}

@keyframes workspace-mascot-shadow-drift {
  0%, 100% {
    opacity: .34;
    transform: scaleX(1) scaleY(1);
  }

  52% {
    opacity: .22;
    transform: scaleX(.87) scaleY(.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-mascot-loader:after, .workspace-mascot-loader-body, .workspace-mascot-loader-symbol[data-active="true"] {
    animation: none !important;
  }
}

.home-input-surface:hover {
  border-color: var(--home-input-border-hover);
  box-shadow: var(--home-input-shadow-hover);
}

.home-input-surface:focus-within, .home-input-surface:focus-within:hover {
  border-color: var(--home-input-border-focus);
  box-shadow: var(--home-input-shadow-focus);
}

.home-scene-section {
  margin-top: calc(var(--home-input-to-tags-gap) - var(--home-hero-content-gap));
  overflow: visible;
}

.home-scene-section:has(.home-recommendation-layer[data-view="secondary"]) {
  height: 132px;
}

.home-below-anchor {
  top: calc(100% + var(--home-input-to-media-showcase-gap));
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  will-change: translate;
  width: 100cqi;
  flex-direction: column;
  align-items: center;
  padding-block-end: var(--home-showcase-bottom-safe-inset);
  display: flex;
  position: absolute;
  left: 50%;
  overflow: hidden auto;
  translate: -50%;
}

.home-below-anchor::-webkit-scrollbar {
  display: none;
}

.home-content-grid[data-home-showcase-scroll-active="true"] .home-below-anchor {
  overflow-y: auto;
}

.home-media-showcase-block {
  --home-media-showcase-content-min-width: min(calc(100cqi - var(--home-hero-padding-x) - var(--home-hero-padding-x)),
    var(--home-primary-stack-width));
  width: max(var(--home-media-showcase-content-min-width), min(calc(100cqi - var(--home-hero-padding-x) - var(--home-hero-padding-x)), var(--home-media-showcase-max-width)));
  max-width: var(--home-media-showcase-max-width);
  flex: none;
}

.home-media-showcase-block [data-home-media-showcase-content] {
  container: home-media-showcase / inline-size;
}

.home-media-showcase-toolbar {
  z-index: 10;
  isolation: isolate;
  align-items: center;
  gap: var(--home-query-card-gap);
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-end: calc(0px - var(--home-query-card-gap));
  margin-inline: auto;
  padding-block-end: var(--home-query-card-gap);
  display: grid;
  position: sticky;
  top: 0;
}

.home-media-showcase-toolbar:before {
  content: "";
  z-index: 0;
  background-color: var(--home-content-surface);
  background-image: var(--home-grid-background-image);
  background-position: 0 var(--home-showcase-grid-background-offset-y, 0px);
  pointer-events: none;
  background-size: 20px 20px;
  width: 100cqi;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50%;
}

.home-media-showcase-toolbar > * {
  z-index: 1;
  position: relative;
}

.home-media-showcase-toolbar[data-two-level="true"] {
  gap: var(--home-query-card-gap);
  grid-template-columns: minmax(0, 1fr);
}

.home-media-showcase-primary-row, .home-media-showcase-secondary-row {
  align-items: center;
  gap: var(--home-query-card-gap);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  display: grid;
}

.home-media-showcase-primary-tab {
  position: relative;
}

.home-media-showcase-primary-tab-indicator {
  bottom: 0;
  left: calc(var(--active-tab-left) + 8px);
  width: calc(var(--active-tab-width) - 16px);
  background-color: var(--foreground);
  pointer-events: none;
  will-change: left;
  border-radius: 999px;
  height: 2px;
  transition: left .18s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
}

[data-slot="tabs-list"][data-variant="track"] {
  --tabs-track-inset: .25rem;
  --tabs-track-radius: var(--radius-xl);
  --tabs-track-inner-radius: max(0px, calc(var(--tabs-track-radius) - var(--tabs-track-inset)));
  isolation: isolate;
  padding: var(--tabs-track-inset);
  border-radius: var(--tabs-track-radius);
  background-color: var(--tab-track-bg);
  position: relative;
}

[data-slot="tabs-list"].skills-capability-track {
  --tabs-track-inset: 3px;
  --tabs-track-radius: 12px;
}

[data-slot="tabs-list"].skills-capability-track .tabs-track-indicator {
  box-shadow: none;
}

[data-slot="tabs-list"][data-variant="track"] [data-slot="tabs-trigger"] {
  z-index: 1;
  border-radius: var(--tabs-track-inner-radius);
  position: relative;
}

[data-slot="tabs-list"][data-variant="track"] [data-slot="tabs-trigger"][data-active] {
  box-shadow: none;
  background-color: #0000;
}

.tabs-track-indicator {
  width: var(--active-tab-width);
  height: var(--active-tab-height);
  transform: translate(var(--active-tab-left), var(--active-tab-top));
  border-radius: var(--tabs-track-inner-radius);
  background-color: var(--tab-active-bg);
  box-shadow: var(--tab-active-shadow);
  pointer-events: none;
  transition: transform .2s ease-out, width .2s ease-out, height .2s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tabs-track-indicator {
    transition: none;
  }
}

.tabs-underline-indicator {
  left: calc(var(--active-tab-left) + 8px);
  width: calc(var(--active-tab-width) - 16px);
  background-color: var(--foreground);
  pointer-events: none;
  will-change: left, width;
  border-radius: 999px;
  height: 2px;
  transition: left .18s cubic-bezier(.22, 1, .36, 1), width .18s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
}

[data-slot="tabs-list"][data-variant="underline"] svg {
  stroke-width: 2.25px;
}

@media (prefers-reduced-motion: reduce) {
  .tabs-underline-indicator {
    transition: none;
  }
}

.home-media-showcase-secondary-tab[data-active] {
  background-color: var(--home-media-showcase-secondary-tab-active-bg);
  color: var(--foreground);
  box-shadow: none;
  border-color: #0000;
}

.skills-category-secondary-tab [data-slot="stable-tab-label"]:after {
  letter-spacing: .02em;
}

.home-media-showcase-grid {
  --home-media-showcase-column-count: 4;
  grid-template-columns: repeat(var(--home-media-showcase-column-count), minmax(0, 1fr));
  align-content: start;
  gap: var(--home-media-showcase-gap);
  width: 100%;
  margin-inline: auto;
  display: grid;
}

@keyframes home-media-showcase-content-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-media-showcase-content-layer {
  will-change: opacity, transform;
  animation: .18s ease-out both home-media-showcase-content-enter;
}

.home-media-showcase-grid[data-video-orientation="portrait"] {
  --home-media-showcase-column-count: 5;
}

@container home-media-showcase (max-width: 831.99px) {
  .home-media-showcase-grid[data-video-orientation="portrait"] {
    --home-media-showcase-column-count: 4;
  }
}

@container home-media-showcase (max-width: 792.99px) {
  .home-media-showcase-grid[data-video-orientation="landscape"] {
    --home-media-showcase-column-count: 3;
  }
}

@container home-media-showcase (max-width: 663.99px) {
  .home-media-showcase-grid[data-video-orientation="portrait"] {
    --home-media-showcase-column-count: 3;
  }
}

@container home-media-showcase (max-width: 592.99px) {
  .home-media-showcase-grid[data-video-orientation="landscape"] {
    --home-media-showcase-column-count: 2;
  }
}

@container home-media-showcase (max-width: 495.99px) {
  .home-media-showcase-grid[data-video-orientation="portrait"] {
    --home-media-showcase-column-count: 2;
  }
}

@container home-media-showcase (max-width: 392.99px) {
  .home-media-showcase-grid[data-video-orientation="landscape"] {
    --home-media-showcase-column-count: 1;
  }
}

@container home-media-showcase (max-width: 327.99px) {
  .home-media-showcase-grid[data-video-orientation="portrait"] {
    --home-media-showcase-column-count: 1;
  }
}

.home-media-showcase-media-frame[data-video-orientation="landscape"] {
  aspect-ratio: 16 / 9;
}

.home-media-showcase-media-frame[data-video-orientation="portrait"] {
  aspect-ratio: 9 / 16;
}

.home-media-showcase-card {
  isolation: isolate;
  border-width: var(--divider-width);
  transition: background-color .15s, border-color .15s, box-shadow .18s;
}

.home-media-showcase-card:hover, .home-media-showcase-card:focus-within {
  border-color: var(--home-input-border-hover);
  background-color: var(--home-media-showcase-card-hover);
}

.home-media-showcase-use-button {
  background-color: var(--home-query-card-cta-bg);
  color: var(--home-query-card-cta-text);
  border: 0;
  font-weight: 600;
}

.home-media-showcase-use-button:hover {
  background-color: var(--home-query-card-cta-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-media-showcase-use-button:hover {
    background-color: color-mix(in srgb, var(--home-query-card-cta-bg) 92%, var(--home-query-card-cta-text));
  }
}

.home-media-showcase-use-button:hover {
  color: var(--home-query-card-cta-text);
}

.home-media-showcase-loading-surface {
  background-color: var(--foreground);
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-media-showcase-loading-surface {
    background-color: color-mix(in srgb, var(--foreground) 5%, var(--card));
  }
}

.home-media-showcase-loading-surface {
  pointer-events: none;
}

.home-media-showcase-loading-surface:after {
  content: "";
  z-index: 1;
  background: linear-gradient(105deg, transparent 28%, var(--foreground) 48%, transparent 68%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-media-showcase-loading-surface:after {
    background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--foreground) 8%, transparent) 48%, transparent 68%);
  }
}

.home-media-showcase-loading-surface:after {
  animation: 2.2s ease-in-out infinite home-query-placeholder-sweep;
  transform: translate3d(-100%, 0, 0);
}

.home-use-prompt-flight-ball {
  z-index: 45;
  background-color: var(--home-query-card-cta-bg);
  color: var(--home-query-card-cta-text);
  visibility: hidden;
  pointer-events: none;
  transform-origin: center;
  contain: layout paint style;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: 0;
  display: flex;
  position: fixed;
}

.home-use-prompt-flight-ball > svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.home-use-prompt-flight {
  visibility: visible;
  will-change: transform, opacity;
}

.home-use-prompt-arrival {
  z-index: 44;
  border: var(--divider-width) solid var(--foreground);
  position: fixed;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-use-prompt-arrival {
    border: var(--divider-width) solid color-mix(in srgb, var(--foreground) 24%, transparent);
  }
}

.home-use-prompt-arrival {
  box-shadow: 0 0 0 1px var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-use-prompt-arrival {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent);
  }
}

.home-use-prompt-arrival {
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
  contain: strict;
}

.home-media-showcase-control-button {
  background-color: var(--home-media-showcase-overlay-bg);
  color: var(--home-media-showcase-overlay-fg);
  -webkit-backdrop-filter: blur(var(--home-media-showcase-overlay-blur));
  backdrop-filter: blur(var(--home-media-showcase-overlay-blur));
  border: 0;
}

.home-media-showcase-control-button:hover {
  background-color: var(--home-media-showcase-overlay-bg-hover);
  color: var(--home-media-showcase-overlay-fg);
}

.home-media-showcase-media {
  opacity: 0;
  transition: opacity .18s ease-out, transform .22s ease-out;
}

.home-media-showcase-media[data-home-media-loaded="true"] {
  opacity: 1;
}

.home-media-showcase-card:hover .home-media-showcase-media, .home-media-showcase-card:focus-within .home-media-showcase-media {
  transform: scale(1.012);
}

.home-media-showcase-media-frame:after {
  content: "";
  z-index: 1;
  background: var(--home-query-card-overlay);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-media-showcase-media-frame:after {
    background: color-mix(in srgb, var(--home-query-card-overlay) 28%, transparent);
  }
}

.home-media-showcase-media-frame:after {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}

.home-media-showcase-card:hover .home-media-showcase-media-frame:after, .home-media-showcase-card:focus-within .home-media-showcase-media-frame:after {
  opacity: 1;
}

.home-media-showcase-duration {
  background-color: var(--home-media-showcase-overlay-bg);
  color: var(--home-media-showcase-overlay-fg);
  -webkit-backdrop-filter: blur(var(--home-media-showcase-overlay-blur));
  backdrop-filter: blur(var(--home-media-showcase-overlay-blur));
  opacity: 1;
  pointer-events: none;
  border: 0;
  transition: opacity .15s;
}

.home-media-showcase-card:hover .home-media-showcase-duration, .home-media-showcase-card:focus-within .home-media-showcase-duration {
  opacity: 0;
}

.home-media-showcase-use-layer {
  inset-inline: var(--home-media-showcase-action-safe-inset);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .22s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(calc(100% + 12px));
}

.home-media-showcase-action-row {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .22s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(calc(100% + 12px));
}

.home-media-showcase-audio-button, .home-media-showcase-fullscreen-button {
  transition: background-color .15s, border-color .15s;
}

.home-media-showcase-card:hover .home-media-showcase-use-layer, .home-media-showcase-card:focus-within .home-media-showcase-use-layer, .home-media-showcase-card:hover .home-media-showcase-action-row, .home-media-showcase-card:focus-within .home-media-showcase-action-row {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-media-showcase-card, .home-media-showcase-media, .home-media-showcase-media-frame:after, .home-media-showcase-duration, .home-media-showcase-use-layer, .home-media-showcase-action-row, .home-media-showcase-primary-tab-indicator {
    transition-duration: .01ms;
  }

  .home-media-showcase-card:hover .home-media-showcase-media, .home-media-showcase-card:focus-within .home-media-showcase-media {
    transform: none;
  }
}

html[data-hilo-gpu="disabled"] .home-media-showcase-media {
  transform: none;
}

html[data-hilo-gpu="disabled"] .home-media-showcase-control-button, html[data-hilo-gpu="disabled"] .home-media-showcase-duration {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-quick-start-header {
  margin-top: calc(var(--home-input-to-quick-start-gap) - var(--home-hero-content-gap));
  margin-bottom: calc(var(--home-quick-start-to-recommendations-gap) - var(--home-hero-content-gap));
}

.home-recommendation-layer[data-view="primary"] {
  z-index: 0;
}

.home-recommendation-layer[data-view="secondary"] {
  z-index: 1;
  width: min(calc(100% + var(--home-secondary-panel-inline-expansion) + var(--home-secondary-panel-inline-expansion)), calc(100cqi - var(--home-secondary-panel-safe-inset) - var(--home-secondary-panel-safe-inset)));
  overscroll-behavior-inline: contain;
  bottom: auto;
  left: 50%;
  right: auto;
  overflow: auto hidden;
  translate: -50%;
}

.home-query-panel {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--home-query-card-gap) * 4)) / 5);
  gap: var(--home-query-card-gap);
  min-width: var(--home-secondary-panel-min-width);
  display: grid;
}

.home-query-panel:is([data-card-count="1"], [data-card-count="2"], [data-card-count="3"], [data-card-count="4"]) {
  justify-content: center;
}

.home-recommendation-layer[data-view="primary"][data-motion="enter"] {
  animation: .22s cubic-bezier(.32, .72, .24, 1) both home-recommendation-primary-enter;
}

.home-recommendation-layer[data-view="primary"][data-motion="exit"] {
  animation: .16s ease-out both home-recommendation-primary-exit;
}

.home-recommendation-layer[data-view="secondary"][data-motion="exit"] {
  z-index: 2;
}

.home-scene-tag {
  --home-scene-tag-mask-surface: var(--home-scene-tag-surface);
  isolation: isolate;
  border: var(--home-input-border-width) solid var(--home-input-border);
  background: var(--home-scene-tag-surface);
  color: var(--foreground);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-scene-tag {
    color: color-mix(in srgb, var(--foreground) 70%, transparent);
  }
}

.home-scene-tag {
  transition: border-color .18s cubic-bezier(.22, 1, .36, 1), color .18s cubic-bezier(.22, 1, .36, 1), background-color .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1);
}

.home-scene-tag:hover {
  --home-scene-tag-mask-surface: var(--home-scene-tag-surface-hover);
  border-color: var(--home-scene-tag-border-hover);
  background: var(--home-scene-tag-surface-hover);
  color: var(--foreground);
  box-shadow: var(--home-scene-tag-shadow-hover);
}

.home-scene-tag[data-active="true"] {
  --home-scene-tag-mask-surface: var(--home-scene-tag-surface-active);
  border-color: var(--home-input-border-focus);
  background: var(--home-scene-tag-surface-active);
  color: var(--foreground);
}

.home-scene-tag-artwork {
  inset-block: var(--home-scene-tag-artwork-inset-block);
  right: var(--home-scene-tag-artwork-inset-end);
  height: calc(100% - (var(--home-scene-tag-artwork-inset-block) * 2));
  aspect-ratio: 16 / 9;
  border-radius: var(--home-scene-tag-artwork-radius);
  width: auto;
  box-shadow: inset var(--home-scene-tag-artwork-divider-width) 0 0 var(--home-scene-tag-artwork-divider);
  pointer-events: none;
  opacity: var(--home-scene-tag-artwork-opacity);
  transition: opacity .18s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  overflow: hidden;
}

.home-scene-tag-artwork img, .home-scene-tag-artwork video {
  z-index: 0;
  filter: var(--home-scene-tag-artwork-filter);
  transform-origin: 100%;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  transform: scale(1.01);
}

.home-scene-tag-artwork:before {
  content: "";
  z-index: 1;
  -webkit-backdrop-filter: blur(var(--home-scene-tag-artwork-blur));
  backdrop-filter: blur(var(--home-scene-tag-artwork-blur));
  -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, var(--foreground) 34%, transparent 74%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-scene-tag-artwork:before {
    -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 88%, transparent) 34%, transparent 74%);
  }
}

.home-scene-tag-artwork:before {
  -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, var(--foreground) 34%, transparent 74%);
  -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, var(--foreground) 34%, transparent 74%);
  mask-image: linear-gradient(to right, var(--foreground) 0%, var(--foreground) 34%, transparent 74%);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-scene-tag-artwork:before {
    -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 88%, transparent) 34%, transparent 74%);
    -webkit-mask-image: linear-gradient(to right, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 88%, transparent) 34%, transparent 74%);
    mask-image: linear-gradient(to right, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 88%, transparent) 34%, transparent 74%);
  }
}

.home-scene-tag-artwork:after {
  content: "";
  z-index: 2;
  background: linear-gradient(to right, var(--home-scene-tag-mask-surface) 0%, var(--home-scene-tag-mask-surface) 22%, var(--home-scene-tag-mask-surface) 52%, transparent 86%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-scene-tag-artwork:after {
    background: linear-gradient(to right, var(--home-scene-tag-mask-surface) 0%, color-mix(in srgb, var(--home-scene-tag-mask-surface) 92%, transparent) 22%, color-mix(in srgb, var(--home-scene-tag-mask-surface) 54%, transparent) 52%, transparent 86%);
  }
}

:root:not(.dark) .home-scene-tag-artwork:before, :root:not(.dark) .home-scene-tag-artwork:after {
  display: none;
}

:root:not(.dark) .home-scene-tag-artwork img, :root:not(.dark) .home-scene-tag-artwork video {
  filter: none;
}

.home-scene-tag--feature {
  background: #0a0a0b;
  border-color: #0000;
  flex-grow: 2.6;
}

.home-scene-tag--h3-feature {
  border: 0;
}

.home-scene-tag--feature:hover, .home-scene-tag--feature[data-active="true"] {
  box-shadow: none;
  background: #0a0a0b;
  border-color: #0000;
}

.home-scene-tag-artwork--cover {
  aspect-ratio: auto;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  box-shadow: none;
  opacity: 1;
  position: absolute;
  inset: 0;
}

.home-scene-tag--h3-feature .home-scene-tag-artwork--cover {
  border-radius: 0;
}

.home-scene-tag-artwork--cover img, .home-scene-tag-artwork--cover video {
  filter: none;
  transform-origin: center;
}

.home-scene-tag-artwork--cover:before {
  display: none;
}

.home-scene-tag-artwork--cover:after, :root:not(.dark) .home-scene-tag-artwork--cover:after {
  background: linear-gradient(to right, #000000bd 0%, #00000080 32%, #00000029 60%, #0000 100%);
  display: block;
}

.home-scene-tag--feature .home-scene-tag-content {
  max-width: 100%;
  color: var(--home-query-card-text);
}

.home-scene-tag--feature .home-scene-tag-label {
  font-size: 18px;
  font-weight: 600;
}

.home-scene-tag--h3-feature .home-scene-tag-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.home-scene-tag--feature:hover .home-scene-tag-content, .home-scene-tag--feature:focus-visible .home-scene-tag-content {
  gap: var(--home-scene-tag-content-gap);
  max-width: 100%;
}

.home-scene-tag:hover .home-scene-tag-artwork {
  opacity: var(--home-scene-tag-artwork-opacity-hover);
}

.home-scene-tag--feature:hover .home-scene-tag-artwork {
  opacity: 1;
}

.home-scene-tag:hover .home-scene-tag-artwork img, .home-scene-tag:hover .home-scene-tag-artwork video {
  transform: scale(1.04);
}

.home-scene-tag-icon {
  width: 16px;
  color: var(--foreground);
  opacity: .7;
  flex: 0 0 16px;
  transition: width .18s cubic-bezier(.22, 1, .36, 1), flex-basis .18s cubic-bezier(.22, 1, .36, 1), opacity .18s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.home-scene-tag-content {
  max-width: calc(100% - var(--home-scene-tag-content-reserve));
  transition: gap .18s cubic-bezier(.22, 1, .36, 1), max-width .18s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.home-scene-tag-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.home-scene-tag:hover .home-scene-tag-content, .home-scene-tag:focus-visible .home-scene-tag-content {
  max-width: calc(100% - var(--home-scene-tag-content-reserve-hover));
  gap: 0;
}

.home-scene-tag:hover .home-scene-tag-icon, .home-scene-tag:focus-visible .home-scene-tag-icon {
  opacity: 0;
  flex-basis: 0;
  width: 0;
}

.home-active-scene-tag {
  border: var(--home-input-border-width) solid var(--home-active-scene-border);
  background: var(--home-active-scene-bg);
  color: var(--home-active-scene-foreground);
}

.home-active-scene-tag:hover {
  background: var(--home-active-scene-bg-hover);
}

.home-query-card {
  border: var(--home-input-border-width) solid transparent;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--home-input-border-width) var(--home-query-card-border);
  isolation: isolate;
  transition: border-color .15s, box-shadow .15s;
}

.home-query-card-content {
  filter: blur();
  transition: filter .18s;
}

.home-query-card-cta {
  border: var(--divider-width) solid var(--home-query-card-cta-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-query-card-cta {
    border: var(--divider-width) solid color-mix(in srgb, var(--home-query-card-cta-text) 8%, transparent);
  }
}

.home-query-card-cta {
  background: var(--home-query-card-cta-bg);
  color: var(--home-query-card-cta-text);
  opacity: 0;
  box-shadow: 0 3px 10px var(--home-query-card-cta-text);
  transform: translate(-50%, -50%) scale(.96);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-query-card-cta {
    box-shadow: 0 3px 10px color-mix(in srgb, var(--home-query-card-cta-text) 12%, transparent);
  }
}

.home-query-card-cta {
  transition: opacity .15s, transform .18s;
}

.home-query-card:not(:disabled):hover .home-query-card-content, .home-query-card:not(:disabled):focus-visible .home-query-card-content {
  filter: blur(var(--home-query-card-hover-blur));
}

.home-query-card:not(:disabled):hover .home-query-card-cta, .home-query-card:not(:disabled):focus-visible .home-query-card-cta {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.home-query-card-media {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .32s ease-out, filter .42s ease-out, transform .42s ease-out;
  transform: scale(1.015);
}

.home-query-card-media[data-home-query-media-loaded="true"] {
  opacity: 1;
  filter: blur();
  transform: scale(1);
}

[data-home-query-placeholder="true"], [data-home-featured-skill-placeholder="true"] {
  animation: 1.6s ease-in-out infinite home-recommendation-placeholder-shimmer;
}

.home-recommendation-card-placeholder {
  border: var(--home-input-border-width) solid var(--border);
  background: var(--foreground);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-recommendation-card-placeholder {
    background: color-mix(in srgb, var(--foreground) 7%, var(--card));
  }
}

.home-recommendation-card-placeholder {
  box-shadow: inset 0 0 0 var(--home-input-border-width) var(--border);
  isolation: isolate;
}

.home-recommendation-card-placeholder:after {
  content: "";
  background: linear-gradient(105deg, transparent 28%, var(--foreground) 48%, transparent 68%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-recommendation-card-placeholder:after {
    background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--foreground) 6%, transparent) 48%, transparent 68%);
  }
}

.home-recommendation-card-placeholder:after {
  animation: 2.2s ease-in-out infinite home-query-placeholder-sweep;
  transform: translate3d(-100%, 0, 0);
}

.home-recommendation-layer[data-view="secondary"][data-motion="enter"] {
  will-change: transform, opacity;
  animation: .22s ease-out both home-recommendation-secondary-enter;
}

.home-recommendation-layer[data-view="secondary"][data-motion="exit"] {
  will-change: transform, opacity;
  animation: .16s ease-out both home-recommendation-secondary-exit;
}

.home-query-card-content:after {
  content: "";
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(to bottom, transparent 0%, var(--home-query-card-overlay) 16%, var(--home-query-card-overlay) 38%, var(--home-query-card-overlay) 66%, var(--home-query-card-overlay) 86%, var(--home-query-card-overlay) 100%);
  height: 88%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-query-card-content:after {
    background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--home-query-card-overlay) 6%, transparent) 16%, color-mix(in srgb, var(--home-query-card-overlay) 18%, transparent) 38%, color-mix(in srgb, var(--home-query-card-overlay) 48%, transparent) 66%, color-mix(in srgb, var(--home-query-card-overlay) 82%, transparent) 86%, var(--home-query-card-overlay) 100%);
  }
}

.home-query-card-content:after {
  -webkit-backdrop-filter: blur(var(--home-query-card-overlay-blur));
  backdrop-filter: blur(var(--home-query-card-overlay-blur));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--foreground) 22%, var(--foreground) 68%, var(--foreground) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-query-card-content:after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--foreground) 12%, transparent) 22%, color-mix(in srgb, var(--foreground) 68%, transparent) 68%, var(--foreground) 100%);
  }
}

.home-query-card-content:after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--foreground) 22%, var(--foreground) 68%, var(--foreground) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--foreground) 22%, var(--foreground) 68%, var(--foreground) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--foreground) 22%, var(--foreground) 68%, var(--foreground) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-query-card-content:after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--foreground) 12%, transparent) 22%, color-mix(in srgb, var(--foreground) 68%, transparent) 68%, var(--foreground) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--foreground) 12%, transparent) 22%, color-mix(in srgb, var(--foreground) 68%, transparent) 68%, var(--foreground) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--foreground) 12%, transparent) 22%, color-mix(in srgb, var(--foreground) 68%, transparent) 68%, var(--foreground) 100%);
  }
}

.home-query-card-content:after {
  pointer-events: none;
}

.home-query-card:hover {
  border-color: var(--home-input-border-hover);
  box-shadow: inset 0 0 0 var(--home-input-border-width) var(--home-input-border-hover), var(--home-scene-tag-shadow-hover);
}

.inline-color-value {
  vertical-align: baseline;
  align-items: center;
  gap: 4px;
  margin-inline: 2px;
  display: inline-flex;
}

.inline-color-value-label {
  border: var(--divider-width) solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 6px;
  padding-inline: 6px;
  line-height: 1.4;
}

.inline-color-swatch {
  border: var(--divider-width) solid var(--border-strong);
  background: var(--background);
  vertical-align: -2px;
  border-radius: 4px;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.inline-color-swatch[data-has-alpha="true"] {
  background-color: var(--background);
}

.inline-color-swatch[data-has-alpha="true"]:before {
  content: "";
  background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
  position: absolute;
  inset: 0;
}

.inline-color-swatch-fill {
  position: absolute;
  inset: 0;
}

.inline-color-swatch-widget {
  margin-inline: 4px 2px;
}

.home-content-grid {
  --home-grid-hover-size: 120px;
  --home-grid-hover-half: calc(var(--home-grid-hover-size) / 2);
  --home-grid-hover-core-stop: 20%;
  --home-grid-hover-soft-stop: 56%;
  --home-grid-pointer-x: -9999px;
  --home-grid-pointer-y: -9999px;
  --home-grid-line-active: var(--home-grid-line);
  --home-grid-background-image: radial-gradient(circle,
    var(--home-grid-line-active) 1px,
    transparent 1px);
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  background-image: var(--home-grid-background-image);
  background-position: 0 0;
  background-size: 20px 20px;
  position: relative;
  container-type: inline-size;
}

.home-content-grid input, .home-content-grid textarea, .home-content-grid [contenteditable="true"], .home-content-grid .ProseMirror {
  -webkit-user-select: text;
  user-select: text;
}

.home-content-grid:after {
  content: "";
  z-index: 0;
  top: calc(var(--home-grid-pointer-y) - var(--home-grid-hover-half));
  left: calc(var(--home-grid-pointer-x) - var(--home-grid-hover-half));
  width: var(--home-grid-hover-size);
  height: var(--home-grid-hover-size);
  background-image: radial-gradient(circle, var(--home-grid-line-hover) 1px, transparent 1px);
  background-position: calc(var(--home-grid-hover-half) - var(--home-grid-pointer-x)) calc(var(--home-grid-hover-half) - var(--home-grid-pointer-y));
  -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), var(--foreground) var(--home-grid-hover-soft-stop), transparent 100%);
  background-size: 20px 20px;
  border-radius: 50%;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-content-grid:after {
    -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), color-mix(in srgb, var(--foreground) 72%, transparent) var(--home-grid-hover-soft-stop), transparent 100%);
  }
}

.home-content-grid:after {
  -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), var(--foreground) var(--home-grid-hover-soft-stop), transparent 100%);
  -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), var(--foreground) var(--home-grid-hover-soft-stop), transparent 100%);
  mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), var(--foreground) var(--home-grid-hover-soft-stop), transparent 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-content-grid:after {
    -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), color-mix(in srgb, var(--foreground) 72%, transparent) var(--home-grid-hover-soft-stop), transparent 100%);
    -webkit-mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), color-mix(in srgb, var(--foreground) 72%, transparent) var(--home-grid-hover-soft-stop), transparent 100%);
    mask-image: radial-gradient(circle, var(--foreground) 0%, var(--foreground) var(--home-grid-hover-core-stop), color-mix(in srgb, var(--foreground) 72%, transparent) var(--home-grid-hover-soft-stop), transparent 100%);
  }
}

.home-content-grid:after {
  opacity: 0;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.home-content-grid:hover:after {
  opacity: 1;
}

.home-hero-zone {
  --home-hero-padding-block: var(--home-hero-safe-inset);
  min-height: 100%;
  padding-inline: var(--home-hero-padding-x);
  padding-block: var(--home-hero-padding-block);
  justify-content: safe center;
  padding-block-end: calc(var(--home-hero-padding-block) + var(--home-hero-bottom-balance));
}

.home-hero-zone[data-has-whats-new="true"] {
  --home-hero-padding-block: calc(var(--home-hero-safe-inset) + var(--home-whats-new-height) +
      var(--home-whats-new-to-logo-gap));
}

.home-hero-content {
  gap: var(--home-hero-content-gap);
}

.home-hero-announcement {
  bottom: calc(100% + var(--home-whats-new-to-logo-gap));
}

.home-hero-title-block {
  gap: var(--home-hero-title-block-gap);
}

.home-hero-title-row {
  gap: var(--home-hero-title-row-gap);
}

.home-hero-title-row-placeholder {
  flex: none;
  width: 325px;
  height: 46px;
}

.home-hero-brand-motion-layer {
  transform-origin: bottom;
  white-space: nowrap;
  will-change: translate, scale;
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% -16px;
  scale: 1;
}

.home-composer-motion-layer[data-motion="true"] .home-hero-brand-motion-layer, [data-home-composer-motion="true"] .home-hero-title-block {
  app-region: no-drag;
  -webkit-app-region: no-drag;
  pointer-events: none;
}

.home-hero-announcement, .home-hero-subtitle {
  opacity: 1;
}

[data-home-composer-motion="true"] .home-hero-announcement {
  pointer-events: none;
}

[data-home-composer-compact="true"] .home-hero-announcement, [data-home-composer-compact="true"] .home-hero-subtitle {
  visibility: hidden;
  pointer-events: none;
}

.home-hero-title {
  font-size: var(--home-hero-title-size);
  line-height: var(--home-hero-title-line-height);
}

.home-hero-subtitle {
  font-size: var(--home-hero-subtitle-size);
  line-height: var(--home-hero-subtitle-line-height);
  letter-spacing: var(--home-hero-subtitle-tracking-en);
}

.home-hero-title-block[data-locale="zh"] .home-hero-subtitle {
  letter-spacing: var(--home-hero-subtitle-tracking-zh);
}

@media (max-height: 860px) {
  .home-content-grid {
    --home-input-to-media-showcase-gap: 64px;
    --home-showcase-bottom-safe-inset: 64px;
  }
}

@media (max-height: 720px) {
  .home-content-grid {
    --home-hero-content-gap: 24px;
    --home-hero-title-block-gap: 8px;
    --home-input-to-media-showcase-gap: 64px;
    --home-showcase-bottom-safe-inset: 64px;
    --input-card-height: 140px;
  }
}

@media (max-height: 620px) {
  .home-content-grid {
    --home-hero-content-gap: 16px;
    --home-input-to-media-showcase-gap: 56px;
    --home-showcase-bottom-safe-inset: 48px;
    --input-card-height: 132px;
  }
}

@media (max-width: 1100px) {
  .home-content-grid {
    --home-hero-padding-x: 24px;
  }
}

.home-content-grid:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(circle, var(--home-grid-focus-line) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 20px 20px;
  transition: opacity .22s ease-out;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(68% 38% at 50% 39%, #000 0%, #000000eb 38%, #0000 100%);
  mask-image: radial-gradient(68% 38% at 50% 39%, #000 0%, #000000eb 38%, #0000 100%);
}

.home-content-grid:has(.home-input-card:focus-within):before {
  opacity: 1;
}

html[data-hilo-gpu="disabled"] .home-content-grid:before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-title-block, .home-hero-brand-motion-layer, .home-hero-announcement, .home-hero-subtitle {
    will-change: auto;
    transition: none;
    animation: none;
  }

  .home-content-grid:before {
    transition: none;
  }
}

.workspace-loading-mascot-anchor {
  width: var(--workspace-loader-shell-size);
  height: var(--workspace-loader-shell-size);
  isolation: isolate;
  place-items: center;
  display: grid;
  position: relative;
  overflow: visible;
}

.workspace-loading-mascot-anchor > .workspace-mascot-loader {
  z-index: 1;
}

.workspace-loading-dot-field {
  z-index: 0;
  left: 50%;
  top: calc(50% - var(--workspace-loader-frame-center-offset));
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 999px;
  width: min(720px, 90vmin);
  position: absolute;
  overflow: hidden;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle, #0000 0 8%, #000000fa 21%, #000c 56%, #00000052 76%, #0000 100%);
  mask-image: radial-gradient(circle, #0000 0 8%, #000000fa 21%, #000c 56%, #00000052 76%, #0000 100%);
}

.workspace-loading-dot-layer {
  background-image: radial-gradient(circle, var(--workspace-loading-dot) 0 1.15px, transparent 1.65px);
  background-position: center;
  background-size: 18px 18px;
  position: absolute;
  inset: 0;
}

.workspace-loading-dot-layer-base {
  opacity: .34;
}

.workspace-loading-dot-layer-wave {
  background-image: radial-gradient(circle, var(--workspace-loading-dot-bright) 0 1.25px, transparent 1.8px);
  opacity: 0;
  animation: 3.6s ease-out infinite workspace-loading-dot-wave;
  -webkit-mask-image: radial-gradient(circle, #0000 54%, #000 60%, #0000 66%);
  mask-image: radial-gradient(circle, #0000 54%, #000 60%, #0000 66%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 18% 18%;
  mask-size: 18% 18%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@keyframes workspace-loading-dot-wave {
  0% {
    opacity: 0;
    -webkit-mask-size: 18% 18%;
    mask-size: 18% 18%;
  }

  20% {
    opacity: .56;
  }

  64% {
    opacity: .16;
  }

  100% {
    opacity: 0;
    -webkit-mask-size: 128% 128%;
    mask-size: 128% 128%;
  }
}

html[data-hilo-gpu="disabled"] .workspace-loading-dot-layer-wave {
  opacity: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-loading-dot-layer-wave {
    animation: none;
  }
}

@property --chat-history-sweep-x {
  syntax: "<length>";
  inherits: true;
  initial-value: -280px;
}

@keyframes chat-history-skeleton-sweep {
  to {
    --chat-history-sweep-x: 100vw;
  }
}

.chat-history-skeleton-stage {
  --chat-history-sweep-x: -280px;
  animation: 1.8s linear infinite chat-history-skeleton-sweep;
}

.chat-history-skeleton-bar {
  background: linear-gradient(100deg, transparent 20%, var(--foreground) 50%, transparent 80%) var(--chat-history-sweep-x) 0 / 280px 100% no-repeat fixed, var(--muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-history-skeleton-bar {
    background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--foreground) 16%, transparent) 50%, transparent 80%) var(--chat-history-sweep-x) 0 / 280px 100% no-repeat fixed, var(--muted);
  }
}

@keyframes chat-history-skeleton-breathe {
  0%, 100% {
    opacity: .18;
  }

  50% {
    opacity: .42;
  }
}

:root {
  --chat-history-turn-animation: chat-history-skeleton-breathe 4s
    cubic-bezier(.37, 0, .63, 1) infinite;
  --chat-history-turn-opacity: 1;
  --chat-reconnecting-dot-animation: chat-reconnecting-loading-dot 1.4s ease-in-out infinite;
  --chat-reconnecting-title-animation: text-shimmer 3.2s linear infinite;
  --chat-reconnecting-title-background: linear-gradient(110deg,
    currentColor 0%,
    currentColor 40%,
    var(--background) 50%,
    currentColor 60%,
    currentColor 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --chat-reconnecting-title-background: linear-gradient(110deg,
    currentColor 0%,
    currentColor 40%,
    color-mix(in srgb, var(--background) 55%, currentColor) 50%,
    currentColor 60%,
    currentColor 100%);
  }
}

:root {
  --chat-reconnecting-title-fill: transparent;
  --chat-reconnecting-title-will-change: background-position;
}

[data-chat-loading-motion="breathe"] :is(.chat-history-skeleton-stage, .chat-history-skeleton-bar) {
  animation: none;
}

[data-chat-loading-motion="breathe"] .chat-history-skeleton-bar {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-chat-loading-motion="breathe"] .chat-history-skeleton-bar {
    background: color-mix(in srgb, var(--foreground) 16%, var(--card));
  }
}

.chat-history-loading-default-turn {
  display: none;
}

[data-chat-loading-motion="breathe"] .chat-history-skeleton-viewport {
  justify-content: flex-start;
}

[data-chat-loading-motion="breathe"] .chat-history-loading-default-turn {
  opacity: var(--chat-history-turn-opacity);
  animation: var(--chat-history-turn-animation);
  animation-delay: var(--chat-history-breathe-delay, 0s);
  animation-fill-mode: both;
  display: flex;
}

.chat-history-loading-turn-phase-0 {
  --chat-history-breathe-delay: 0s;
}

.chat-history-loading-turn-phase-1 {
  --chat-history-breathe-delay: -100ms;
}

.chat-history-loading-turn-phase-2 {
  --chat-history-breathe-delay: -200ms;
}

.chat-history-loading-turn-phase-3 {
  --chat-history-breathe-delay: -300ms;
}

[data-chat-loading-motion="breathe"] [data-layout-slot="chat-history-loading-composer"] {
  opacity: var(--chat-history-turn-opacity);
  animation: var(--chat-history-turn-animation);
  animation-delay: -300ms;
  animation-fill-mode: both;
}

[data-chat-loading-motion="breathe"] [data-layout-slot="chat-history-loading-content"] {
  flex-shrink: 0;
  gap: 2.25rem;
}

[data-chat-loading-motion="breathe"] :is(.chat-history-loading-node-turn, .chat-history-loading-label, .chat-history-loading-spinner) {
  display: none;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-notice {
  border-width: var(--divider-width);
  background: var(--card);
  padding-block: .375rem;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-title {
  color: var(--foreground);
  font-size: var(--text-body-13);
  font-weight: 500;
  line-height: var(--text-body-12--line-height);
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-description {
  font-size: var(--text-body-12);
  line-height: var(--text-body-12--line-height);
  margin-top: .25rem;
}

@keyframes chat-reconnecting-loading-dot {
  0%, 60%, 100% {
    opacity: .36;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-.0625rem);
  }
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-loading-dots {
  vertical-align: middle;
  align-items: center;
  gap: .125rem;
  margin-left: .25rem;
  display: inline-flex;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-loading-dot {
  background: var(--foreground);
  opacity: 1;
  width: .1875rem;
  height: .1875rem;
  animation: var(--chat-reconnecting-dot-animation);
  border-radius: 999px;
  flex-shrink: 0;
  animation-fill-mode: both;
  display: inline-block;
  transform: none;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-loading-dot:nth-child(2) {
  animation-delay: .14s;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-loading-dot:nth-child(3) {
  animation-delay: .28s;
}

[data-chat-loading-motion="breathe"] .chat-reconnecting-notice[data-reconnect-animated="true"] .chat-reconnecting-title {
  background: var(--chat-reconnecting-title-background);
  -webkit-text-fill-color: var(--chat-reconnecting-title-fill);
  animation: var(--chat-reconnecting-title-animation);
  will-change: var(--chat-reconnecting-title-will-change);
  background-position: 150%;
  background-size: 220%;
  -webkit-background-clip: text;
  background-clip: text;
}

@media (max-height: 640px) {
  [data-chat-loading-motion="breathe"] .chat-history-skeleton-viewport {
    padding-block: 1rem;
  }

  [data-chat-loading-motion="breathe"] [data-layout-slot="chat-history-loading-content"] {
    gap: 1.5rem;
  }
}

html[data-hilo-gpu="disabled"] {
  --chat-history-turn-animation: none;
  --chat-history-turn-opacity: .3;
  --chat-reconnecting-dot-animation: none;
  --chat-reconnecting-title-animation: none;
  --chat-reconnecting-title-background: none;
  --chat-reconnecting-title-fill: currentColor;
  --chat-reconnecting-title-will-change: auto;
}

html[data-hilo-gpu="disabled"] .chat-history-skeleton-stage {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --chat-history-turn-animation: none;
    --chat-history-turn-opacity: .3;
    --chat-reconnecting-dot-animation: none;
    --chat-reconnecting-title-animation: none;
    --chat-reconnecting-title-background: none;
    --chat-reconnecting-title-fill: currentColor;
    --chat-reconnecting-title-will-change: auto;
  }

  .chat-history-skeleton-stage {
    animation: none;
  }
}

@keyframes home-recommendation-primary-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-recommendation-primary-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes home-recommendation-card-enter {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round var(--home-query-card-radius));
    transform: translate3d(-10px, 0, 0) scale(.985);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--home-query-card-radius));
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes home-recommendation-card-exit {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--home-query-card-radius));
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round var(--home-query-card-radius));
    transform: translate3d(-8px, 0, 0) scale(.985);
  }
}

@keyframes home-recommendation-secondary-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-recommendation-secondary-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes home-recommendation-placeholder-shimmer {
  0%, 100% {
    opacity: .84;
  }

  50% {
    opacity: .68;
  }
}

@keyframes home-query-placeholder-sweep {
  0%, 35% {
    transform: translate3d(-100%, 0, 0);
  }

  78%, 100% {
    transform: translate3d(100%, 0, 0);
  }
}

.home-media-tag {
  z-index: 3;
  border: var(--divider-width) solid var(--media-overlay-foreground);
  align-items: center;
  max-width: calc(100% - 8px);
  display: inline-flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .home-media-tag {
    border: var(--divider-width) solid color-mix(in srgb, var(--media-overlay-foreground) 18%, transparent);
  }
}

.home-media-tag {
  background: var(--media-overlay-surface);
  color: var(--media-overlay-foreground);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1;
}

html[data-hilo-gpu="disabled"] .home-media-tag {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--media-overlay-surface);
}

.home-media-tag span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.global-search-dialog {
  top: calc(50% - var(--global-search-dialog-anchor-offset)) !important;
  min-height: var(--global-search-dialog-min-height) !important;
  max-height: var(--global-search-dialog-max-height) !important;
  bottom: auto !important;
}

.media-model-tabs [data-slot="chat-model-tabs-thumb"] {
  background: var(--card);
}

@keyframes scene-slide-down {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

@keyframes scene-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scene-fade-in-up {
  from {
    opacity: 0;
    transform: translate(-50%, calc(4px - 100%));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

@keyframes bottom-anchor-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-turn-highlight-fade {
  0% {
    background-color: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  }

  100% {
    background-color: #0000;
  }
}

.chat-turn-highlight:before {
  content: "";
  pointer-events: none;
  border-radius: 8px;
  animation: .8s ease-out forwards chat-turn-highlight-fade;
  position: absolute;
  inset-block: 0;
  inset-inline: 8px 0;
}

.bg-brand-accent, .bg-brand-accent\/60 {
  background-color: var(--brand-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-brand-accent\/60 {
    background-color: color-mix(in srgb, var(--brand-accent) 60%, transparent);
  }
}

.chat-markdown [data-streamdown="table-wrapper"] {
  background: none;
  border: 0;
  border-radius: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}

.chat-markdown [data-streamdown="code-block"], .chat-markdown [data-streamdown="mermaid-block"] {
  position: relative;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-markdown [data-streamdown="table-wrapper"] > div:last-child {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  overflow-y: visible;
}

.chat-markdown [data-streamdown="code-block-body"] {
  background: none;
  border: 0;
  border-radius: 6px;
  margin: 0;
  padding: 0;
}

.chat-markdown [data-streamdown="code-block-header"] {
  display: none;
}

.chat-markdown [data-streamdown="code-block"] > div:has([data-streamdown="code-block-actions"]) {
  pointer-events: auto;
  z-index: 10;
  opacity: 0;
  align-items: center;
  height: 1.75rem;
  transition: opacity .15s;
  display: flex;
  top: .5rem;
  right: .5rem;
  margin: 0 !important;
  position: absolute !important;
}

.chat-markdown [data-streamdown="code-block"]:hover > div:has([data-streamdown="code-block-actions"]), .chat-markdown [data-streamdown="code-block"] > div:focus-within:has([data-streamdown="code-block-actions"]) {
  opacity: 1;
}

.chat-markdown [data-streamdown="code-block-actions"] {
  border: 1px solid var(--border);
  background: var(--background);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 4px;
  padding: .125rem;
  box-shadow: 0 1px 2px #0000000a;
}

.chat-markdown [data-streamdown="code-block-download-button"] {
  display: none;
}

.chat-markdown [data-streamdown="mermaid-block"] > div:last-child {
  white-space: pre-wrap;
  border: 0;
  border-radius: 6px;
  margin: 0;
  padding: 0;
}

.chat-markdown [data-streamdown="table-wrapper"] table {
  margin: 0;
}

.chat-markdown table {
  border-collapse: collapse;
  max-width: 100%;
  margin: 0;
  display: block;
  overflow-x: auto;
}

.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {
  margin: 0;
}

.chat-markdown h1 {
  font-size: var(--text-prose-h1);
  margin-top: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.chat-markdown h2 {
  font-size: var(--text-prose-h2);
  margin-top: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.chat-markdown h3 {
  font-size: var(--text-prose-h3);
  margin-top: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.chat-markdown h4 {
  font-size: var(--text-body-15);
  line-height: var(--text-body-15--line-height);
  font-weight: 500;
}

.chat-markdown > :first-child, .chat-markdown > div > :first-child {
  margin-top: 0 !important;
}

.chat-markdown code.chat-inline-code {
  white-space: nowrap;
}

.chat-markdown code.chat-inline-code-plain {
  font-size: var(--text-prose-code);
  white-space: normal;
  word-break: break-word;
  background: none;
  border-radius: 0;
  padding: 0;
}

.chat-markdown button.chat-inline-code-button {
  color: inherit;
  font: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline;
}

.chat-markdown code.chat-inline-code-file-ref {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .15s;
}

.chat-markdown button.chat-local-file-reference, .chat-markdown a.chat-local-file-reference {
  vertical-align: baseline;
  max-width: 100%;
  display: inline-flex;
}

.chat-markdown .chat-local-file-reference > code {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.chat-markdown .chat-local-file-reference > code > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.chat-markdown button.chat-inline-code-button:hover code.chat-inline-code-file-ref {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-markdown button.chat-inline-code-button:hover code.chat-inline-code-file-ref {
    background: color-mix(in srgb, var(--foreground) 5%, transparent);
  }
}

.chat-markdown button.chat-inline-code-button:hover code.chat-inline-code-file-ref {
  text-underline-offset: 2px;
  text-decoration: underline;
}

.chat-markdown button.chat-inline-code-button:focus-visible {
  outline: none;
}

.chat-markdown button.chat-inline-code-button:focus-visible code.chat-inline-code-file-ref {
  outline: 1px solid var(--ring);
  outline-offset: 2px;
}

.chat-markdown code.chat-inline-code-plain.chat-inline-code-file-ref {
  padding: .08em .25em;
}

.chat-markdown .chat-file-reference-code-block-body {
  background: var(--muted);
  border-radius: 6px;
  max-height: 200px;
  font-size: 13px;
  overflow: auto;
}

.chat-markdown .chat-file-reference-code-block-body pre {
  background: none;
  border-radius: 0;
  max-height: none;
  margin: 0;
  overflow: visible;
}

.chat-markdown .chat-file-reference-code-block-body pre code {
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
}

.chat-markdown .chat-code-block-file-reference {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 4px;
  margin: 0;
  padding: 0 4px;
  display: block;
}

.chat-markdown button.chat-code-block-file-reference {
  border: 1px solid var(--border);
  background: var(--foreground);
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-markdown button.chat-code-block-file-reference {
    background: color-mix(in srgb, var(--foreground) 4%, transparent);
  }
}

.chat-markdown button.chat-code-block-file-reference {
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.chat-markdown button.chat-code-block-file-reference .chat-code-block-file-reference-label {
  overflow-wrap: anywhere;
  text-underline-offset: 2px;
  min-width: 0;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

.chat-markdown button.chat-code-block-file-reference .chat-code-block-file-reference-open-icon {
  color: var(--muted-foreground);
  transition: color .15s;
}

.chat-markdown button.chat-code-block-file-reference:hover {
  border-color: var(--border-strong);
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-markdown button.chat-code-block-file-reference:hover {
    background: color-mix(in srgb, var(--foreground) 8%, transparent);
  }
}

.chat-markdown button.chat-code-block-file-reference:hover .chat-code-block-file-reference-open-icon {
  color: var(--foreground);
}

.chat-markdown button.chat-code-block-file-reference:focus-visible {
  outline: 1px solid var(--ring);
  outline-offset: 2px;
}

.chat-markdown th, .chat-markdown td {
  border: 1px solid var(--border);
  padding: .25em .5em;
  font-size: 1em;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.animate-shake {
  animation: .5s ease-in-out shake;
}

@keyframes topbar-workspace-tab-enter {
  from {
    opacity: 0;
    translate: -6px;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

.topbar-workspace-tab-enter {
  animation: .16s cubic-bezier(.2, .8, .2, 1) topbar-workspace-tab-enter;
}

@media (prefers-reduced-motion: reduce) {
  .topbar-workspace-tab-enter {
    animation: none;
  }
}

.topbar-tab + .topbar-tab:before {
  content: "";
  width: var(--divider-width);
  background: var(--border-strong);
  pointer-events: none;
  height: 10px;
  transition: opacity .12s;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translate(-50%, -50%);
}

.dark .topbar-tab + .topbar-tab:before {
  background: #ffffff47;
}

.topbar-tab:hover:before, .topbar-tab.is-active:before, .topbar-tab:hover + .topbar-tab:before, .topbar-tab.is-active + .topbar-tab:before {
  opacity: 0;
}

.chat-tab-bar {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-tab-bar {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
  }
}

.dark .chat-tab-bar {
  background: var(--background);
}

.chat-tab-slot + .chat-tab-slot:before {
  content: "";
  background: var(--border-strong);
  pointer-events: none;
  width: 1.5px;
  height: 9px;
  transition: opacity .12s;
  position: absolute;
  top: 50%;
  left: -2.75px;
  transform: translateY(-50%);
}

.dark .chat-tab-slot + .chat-tab-slot:before {
  background: #ffffff47;
}

.chat-tab-slot:has(.chat-tab.is-active):before, .chat-tab-slot:has(.chat-tab:hover):before, .chat-tab-slot:has(.chat-tab.is-active) + .chat-tab-slot:before, .chat-tab-slot:has(.chat-tab:hover) + .chat-tab-slot:before {
  opacity: 0;
}

.chat-tab.is-active:before, .chat-tab.is-active:after {
  content: "";
  pointer-events: none;
  background: none;
  width: 10px;
  height: 10px;
  animation: .12s ease-out chat-tab-corner-in;
  position: absolute;
  bottom: 0;
}

.chat-tab.is-active:before {
  box-shadow: 5px 5px 0 5px var(--card);
  border-bottom-right-radius: 10px;
  left: -10px;
}

.chat-tab.is-active:after {
  box-shadow: -5px 5px 0 5px var(--card);
  border-bottom-left-radius: 10px;
  right: -10px;
}

.chat-tab.is-inactive:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: none;
  border-radius: 8px;
  transition: background-color .12s, opacity .12s;
  position: absolute;
  inset: 5px 3px 4px;
}

.chat-tab.is-inactive:hover:before {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-tab.is-inactive:hover:before {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
  }
}

@keyframes chat-tab-corner-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.four-corner-loading {
  vertical-align: middle;
  flex: none;
  display: inline-block;
  position: relative;
}

.four-corner-loading.is-md {
  width: 14px;
  height: 14px;
}

.four-corner-loading.is-sm {
  width: 12px;
  height: 12px;
}

.four-corner-loading-dot {
  background: var(--fcl-rest);
  opacity: .42;
  border-radius: 1px;
  animation: 1.08s ease-in-out infinite four-corner-loading-pulse;
  display: block;
  position: absolute;
}

.four-corner-loading.is-md .four-corner-loading-dot {
  width: 4px;
  height: 4px;
}

.four-corner-loading.is-sm .four-corner-loading-dot {
  width: 3px;
  height: 3px;
}

.four-corner-loading.is-md .four-corner-loading-dot:first-child {
  animation-delay: 0s;
  top: 2px;
  left: 2px;
}

.four-corner-loading.is-md .four-corner-loading-dot:nth-child(2) {
  animation-delay: .27s;
  top: 2px;
  right: 2px;
}

.four-corner-loading.is-md .four-corner-loading-dot:nth-child(3) {
  animation-delay: .54s;
  bottom: 2px;
  right: 2px;
}

.four-corner-loading.is-md .four-corner-loading-dot:nth-child(4) {
  animation-delay: .81s;
  bottom: 2px;
  left: 2px;
}

.four-corner-loading.is-sm .four-corner-loading-dot:first-child {
  animation-delay: 0s;
  top: 2px;
  left: 2px;
}

.four-corner-loading.is-sm .four-corner-loading-dot:nth-child(2) {
  animation-delay: .27s;
  top: 2px;
  right: 2px;
}

.four-corner-loading.is-sm .four-corner-loading-dot:nth-child(3) {
  animation-delay: .54s;
  bottom: 2px;
  right: 2px;
}

.four-corner-loading.is-sm .four-corner-loading-dot:nth-child(4) {
  animation-delay: .81s;
  bottom: 2px;
  left: 2px;
}

.four-corner-loading.is-global, .four-corner-loading.is-panel {
  --fcl-rest: var(--brand-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .four-corner-loading.is-global, .four-corner-loading.is-panel {
    --fcl-rest: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  }
}

.four-corner-loading.is-global, .four-corner-loading.is-panel {
  --fcl-active: var(--brand-accent);
}

.dark .four-corner-loading.is-global, .dark .four-corner-loading.is-panel {
  --fcl-rest: var(--brand-accent);
}

.four-corner-loading.is-tab {
  --fcl-rest: var(--foreground);
  --fcl-active: var(--foreground);
}

@keyframes four-corner-loading-pulse {
  0%, 100% {
    background: var(--fcl-rest);
    opacity: .42;
  }

  18% {
    background: var(--fcl-active);
    opacity: 1;
  }

  36% {
    background: var(--fcl-rest);
    opacity: .5;
  }
}

.four-corner-loading.is-tab .four-corner-loading-dot {
  opacity: .28;
  animation-name: four-corner-loading-pulse-tab;
}

@keyframes four-corner-loading-pulse-tab {
  0%, 100% {
    opacity: .28;
  }

  12% {
    opacity: 1;
  }

  28% {
    opacity: .32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .four-corner-loading-dot {
    opacity: .5;
    animation: none;
  }

  .four-corner-loading-dot:first-child {
    opacity: 1;
  }

  .four-corner-loading.is-global .four-corner-loading-dot:first-child, .four-corner-loading.is-panel .four-corner-loading-dot:first-child {
    background: var(--brand-accent);
  }
}

.global-task-status-label {
  color: #0000;
  background-image: linear-gradient(110deg, var(--foreground) 0%, var(--foreground) 40%, var(--background) 50%, var(--foreground) 60%, var(--foreground) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .global-task-status-label {
    background-image: linear-gradient(110deg, var(--foreground) 0%, var(--foreground) 40%, color-mix(in srgb, var(--background) 55%, var(--foreground)) 50%, var(--foreground) 60%, var(--foreground) 100%);
  }
}

.global-task-status-label {
  will-change: background-position;
  background-position: 150% 0;
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 2.8s linear infinite global-task-status-shine;
}

@keyframes global-task-status-shine {
  0% {
    background-position: 150% 0;
  }

  100% {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-task-status-label {
    color: var(--foreground);
    background: none;
    animation: none;
  }
}

.workflow-learning-banner-theme-course {
  --workflow-learning-banner-bg: #102523;
  --workflow-learning-banner-accent: #60d3ca;
  --workflow-learning-banner-card-back: #101918;
  --workflow-learning-banner-card-start: #3bb8ae;
  --workflow-learning-banner-card-end: #17766f;
  --workflow-learning-banner-card-border: #9ceee573;
}

.workflow-learning-banner-theme-video {
  --workflow-learning-banner-bg: #202036;
  --workflow-learning-banner-accent: #b6b8ff;
  --workflow-learning-banner-card-back: #151526;
  --workflow-learning-banner-card-start: #8185e8;
  --workflow-learning-banner-card-end: #4b4f98;
  --workflow-learning-banner-card-border: #cbcdff73;
}

.workflow-learning-banner-theme-article {
  --workflow-learning-banner-bg: #302219;
  --workflow-learning-banner-accent: #efb879;
  --workflow-learning-banner-card-back: #201710;
  --workflow-learning-banner-card-start: #d99152;
  --workflow-learning-banner-card-end: #8c512f;
  --workflow-learning-banner-card-border: #facd9b73;
}

.workflow-learning-banner-surface {
  background: radial-gradient(circle at 18% 24%, var(--workflow-learning-banner-accent), transparent 46%), linear-gradient(112deg, var(--workflow-learning-banner-bg) 0%, var(--workflow-learning-banner-bg) 62%, var(--workflow-learning-banner-accent) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .workflow-learning-banner-surface {
    background: radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--workflow-learning-banner-accent) 16%, transparent), transparent 46%), linear-gradient(112deg, var(--workflow-learning-banner-bg) 0%, var(--workflow-learning-banner-bg) 62%, color-mix(in srgb, var(--workflow-learning-banner-accent) 10%, var(--workflow-learning-banner-bg)) 100%);
  }
}

.workflow-learning-banner-visual-card {
  background: linear-gradient(145deg, var(--workflow-learning-banner-card-start), var(--workflow-learning-banner-card-end));
}

.workflow-learning-banner-dots button {
  background: var(--workflow-learning-banner-foreground-muted);
  border-radius: 999px;
  width: .5rem;
  height: .25rem;
}

.workflow-learning-banner-dots button.bg-foreground {
  background: var(--workflow-learning-banner-foreground);
  width: 2.5rem;
}

.showcase-video-player {
  --canvas-video-control-label: var(--modal-mask-foreground);
  --canvas-video-control-progress: var(--modal-mask-foreground);
  --canvas-video-control-track: var(--modal-mask-foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .showcase-video-player {
    --canvas-video-control-track: color-mix(in srgb, var(--modal-mask-foreground) 35%, transparent);
  }
}

.showcase-video-player {
  --canvas-video-control-shadow: var(--modal-mask-bg);
}

.showcase-video-player-scrim {
  background: linear-gradient(to top, var(--modal-mask-bg), transparent);
}

.showcase-video-player-button {
  color: var(--modal-mask-foreground);
  background: none;
  transition: background-color .15s;
}

.showcase-video-player-button:hover {
  background: var(--modal-mask-foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .showcase-video-player-button:hover {
    background: color-mix(in srgb, var(--modal-mask-foreground) 16%, transparent);
  }
}

@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-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@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-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@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: 0;
}

@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-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-contain-size {
  syntax: "*";
  inherits: false
}

@property --tw-contain-layout {
  syntax: "*";
  inherits: false
}

@property --tw-contain-paint {
  syntax: "*";
  inherits: false
}

@property --tw-contain-style {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
  }

  to {
    height: 0;
  }
}
.new-workspace-modal-overlay {
  /* The global modal mask is 62% black. Mixing 48% of it with transparent
   * yields the requested ~30% weak mask without introducing another raw color. */
  background: color-mix(in srgb, var(--modal-mask-bg) 48%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.new-workspace-dialog {
  border: var(--elevated-border-width) solid var(--elevated-border-color);
  background: var(--elevated-surface);
  box-shadow: var(--shadow-soft-popover);
}

.new-workspace-dialog [data-slot='dialog-close'] {
  top: var(--message-input-card-padding);
  right: var(--message-input-card-padding);
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
}

.new-workspace-dialog [data-slot='dialog-close'] svg {
  width: 18px;
  height: 18px;
}

.new-workspace-name-input {
  border-radius: var(--radius);
  border: var(--control-border-width) solid var(--border);
  background: var(--elevated-surface) !important;
  color: var(--foreground);
  font-size: var(--text-body-15);
  line-height: var(--text-body-15--line-height);
  box-shadow: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.new-workspace-name-input:hover {
  background: var(--elevated-surface) !important;
}

.new-workspace-name-input:focus,
.new-workspace-name-input:focus-visible {
  border-color: var(--foreground);
  background: var(--elevated-surface) !important;
  box-shadow: none;
  outline: none;
}

.new-workspace-name-input::selection {
  color: var(--brand-accent-foreground);
  background: color-mix(in srgb, var(--brand-accent) 72%, transparent);
}

.new-workspace-path-picker {
  --new-workspace-path-bottom-safe-area: 12px;
  margin-top: calc(var(--radius) * -1);
  padding-bottom: calc(0.5rem + 4px + var(--new-workspace-path-bottom-safe-area));
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--foreground) 5%, var(--elevated-surface));
  font-size: var(--text-body-14);
  line-height: var(--text-body-14--line-height);
}

.new-workspace-path-picker > * {
  transform: translateY(var(--radius));
}

.new-workspace-path-picker:hover {
  color: var(--foreground);
  background: var(--secondary);
}

/* Project row sits directly under the save-location row and shares its
 * surface, separated by a hairline so both read as one grouped control. */
.new-workspace-project-picker {
  border-top: var(--control-border-width) solid var(--border);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--foreground) 5%, var(--elevated-surface));
  font-size: var(--text-body-14);
  line-height: var(--text-body-14--line-height);
}

.new-workspace-project-picker:hover {
  color: var(--foreground);
  background: var(--secondary);
}

/* Save-location row is temporarily offline: the project row then sits directly
 * under the name input and takes over its tuck-under treatment. */
.new-workspace-project-picker--tucked {
  margin-top: calc(var(--radius) * -1);
  border-top: none;
  padding-bottom: calc(0.5rem + var(--radius));
}

.new-workspace-project-picker--tucked > * {
  transform: translateY(var(--radius));
}

.new-workspace-action-button {
  border-radius: calc(var(--radius-sm) + 4px);
  padding-inline: 12px;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .new-workspace-name-input,
  .new-workspace-action-button {
    transition: none;
  }
}
/**
 * Coach mark bubble styles — ported 1:1 from the design prototype so the
 * runtime component matches the demo pixel-for-pixel.
 *
 * Theme tokens (--cm-*) live in index.css (:root = light, .dark = dark); only
 * structural rules live here. Do not hardcode colors — adjust via the tokens.
 */

.cm {
  position: relative;
  width: 286px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  background: var(--cm-bg);
  color: var(--cm-text);
  box-shadow: var(--cm-shadow), inset 0 0 0 1px var(--cm-border);
  border-radius: var(--brutalist-radius-md);
  font-family: inherit;
}

.cm--with-media {
  padding: 12px 12px 0;
}

.cm-media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  position: relative;
  background: var(--cm-bg);
}

.cm-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cm-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cm-media-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cm-media--placeholder {
  background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 8px,
      transparent 8px,
      transparent 16px
    ),
    rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
}

.cm--with-media .cm-content {
  margin: 0 -12px;
  padding: 14px 12px 12px;
}

.cm-content {
  position: relative;
}

.cm-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--cm-text-icon);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--brutalist-radius-sm);
  transition: color 80ms, background 80ms;
  z-index: 2;
}

.cm--with-media .cm-close {
  top: 16px;
  right: 16px;
}

.cm-close:hover {
  color: var(--cm-text);
}

.cm-close:focus,
.cm-close:focus-visible {
  outline: none;
  background: transparent;
}

.cm-close svg {
  width: 14px;
  height: 14px;
}

.cm-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
  margin: 0;
  padding-right: 24px;
}

.cm--with-media .cm-title {
  padding-right: 4px;
}

.cm-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--cm-text-muted);
  margin: 6px 0 0;
}

.cm-footer {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.cm-footer--steps {
  justify-content: space-between;
}

.cm-footer--no-steps {
  justify-content: flex-end;
}

.cm-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cm-left-close {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--cm-text);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 80ms;
  font-family: inherit;
}

.cm-left-close:hover,
.cm-left-close:active {
  opacity: 1;
}

.cm-left-close:focus,
.cm-left-close:focus-visible {
  outline: none;
  background: transparent;
}

.cm-left-close svg {
  width: 16px;
  height: 16px;
}

.cm-steps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cm-step {
  height: 3px;
  width: 22px;
  border-radius: 999px;
  background: var(--cm-step-inactive);
  transition: background 200ms;
}

.cm-step.is-active {
  background: var(--cm-step-active);
}

.cm-cta {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--brutalist-radius-sm);
  background: var(--cm-cta-bg);
  color: var(--cm-cta-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 80ms, transform 80ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cm-cta:hover {
  background: var(--cm-cta-bg-hover);
}

.cm-cta:active {
  transform: translateY(1px);
}

.cm-cta:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--cm-bg), 0 0 0 4px var(--cm-cta-bg);
}

/* Loading / disabled CTA: keep the resting fill, drop interactivity cues. */
.cm-cta:disabled {
  opacity: 0.5;
  cursor: default;
}

.cm-cta:disabled:hover {
  background: var(--cm-cta-bg);
}

.cm-cta:disabled:active {
  transform: none;
}

.cm-cta-spinner {
  animation: cm-spin 1s linear infinite;
}

@keyframes cm-spin {
  to {
    transform: rotate(360deg);
  }
}

.cm-left-close:disabled {
  opacity: 0.3;
  cursor: default;
}

.cm-left-close:disabled:hover,
.cm-left-close:disabled:active {
  opacity: 0.3;
}

.cm-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--cm-bg);
  box-sizing: border-box;
  pointer-events: none;
  transform: rotate(45deg);
  z-index: 1;
}

.cm-arrow--up {
  top: -6px;
  border-top: 1px solid var(--cm-border);
  border-left: 1px solid var(--cm-border);
}

.cm-arrow--down {
  bottom: -6px;
  border-bottom: 1px solid var(--cm-border);
  border-right: 1px solid var(--cm-border);
}

.cm-arrow--left {
  left: -6px;
  border-bottom: 1px solid var(--cm-border);
  border-left: 1px solid var(--cm-border);
}

.cm-arrow--right {
  right: -6px;
  border-top: 1px solid var(--cm-border);
  border-right: 1px solid var(--cm-border);
}
:root {
  --fg-default: var(--foreground);
  --fg-muted: var(--muted-foreground);
  --fg-disabled: color-mix(in srgb, var(--foreground) 35%, transparent);
  --border-muted: var(--border);
  --bg-surface-secondary: var(--muted);
  --bg-subtle: #f5f5f5;
  --bg-subtle-hover: #eaeaea;

  --canvas-bg: #fafafa;
  --canvas-bg-warm: #f3f0ea;
  --canvas-bg-cool: #eef2f5;
  --canvas-bg-dot: var(--home-grid-line);
  --canvas-node-bg: #ffffff;
  --canvas-node-border: #e3e3e3;
  --canvas-node-border-selected: #141414;
  --canvas-node-tag-surface-strength: 35%;
  --canvas-node-tag-surface-base: #ffffff;
  --canvas-tag-presentation-strength: 70%;
  --canvas-tag-presentation-base: #ffffff;
  --canvas-node-tag-ink-strength: 30%;
  --canvas-node-tag-ink-base: #141414;
  --canvas-node-tag-border-strength: 18%;
  --canvas-node-tag-blue: #0a84ff;
  --canvas-node-tag-purple: #bf5af2;
  --canvas-node-tag-orange: #ff9f0a;
  --canvas-node-tag-deep-purple: #5e3df5;
  --canvas-node-tag-red: #ff5f57;
  --canvas-node-tag-green: #30d158;
  --canvas-node-tag-yellow: #ffd60a;
  /* Non-canvas swatches use a stronger 70% solid presentation while the
   * external labels above canvas nodes remain at the quieter 35% surface. */
  --canvas-node-tag-blue-surface: #54a9ff;
  --canvas-node-tag-purple-surface: #d28cf6;
  --canvas-node-tag-orange-surface: #ffbc54;
  --canvas-node-tag-deep-purple-surface: #8e77f8;
  --canvas-node-tag-red-surface: #ff8f89;
  --canvas-node-tag-green-surface: #6edf8a;
  --canvas-node-tag-yellow-surface: #ffe254;
  --canvas-node-tag-yellow-selected-foreground: #a87e00;
  --canvas-node-tag-blue-foreground: #141414;
  --canvas-node-tag-purple-foreground: #141414;
  --canvas-node-tag-orange-foreground: #141414;
  --canvas-node-tag-deep-purple-foreground: #ffffff;
  --canvas-node-tag-red-foreground: #141414;
  --canvas-node-tag-green-foreground: #141414;
  --canvas-node-tag-yellow-foreground: #141414;
  --canvas-accent: #3b82f6;
  --canvas-text-accent: var(--brand-accent);
  --canvas-text-accent-foreground: var(--brand-accent-foreground);
  --canvas-handle: #919191;
  --canvas-handle-bg: transparent;
  --canvas-handle-icon: #000000b3;
  --canvas-edge: #c4c4c4;
  --canvas-edge-hover: #919191;
  --canvas-edge-selected: #525252;
  --canvas-controls-bg: #ffffff;
  --canvas-controls-border: #0000000f;
  --canvas-model-selector-icon-border: var(--canvas-controls-border);
  --canvas-controls-text: #262626;
  --canvas-controls-text-muted: #737373;
  /* Solid + element-opacity pair for multi-primitive muted icons (e.g.
   * FileUnpreviewable / FileMissing). Half-transparent strokes on overlapping
   * primitives alpha-blend at the seams and read as a darker "weld point";
   * painting the whole glyph at full color then dropping element opacity avoids
   * it. Light is already solid (opacity 1) so this matches --canvas-controls-text-muted
   * exactly; only Dark needs the split. */
  --canvas-controls-text-muted-solid: #737373;
  --canvas-controls-text-muted-opacity: 1;
  --canvas-controls-icon: #262626;
  --canvas-empty-video-icon-filter: none;
  --canvas-empty-video-action-bg: #f5f5f5;
  --canvas-empty-video-action-bg-hover: #eaeaea;
  --canvas-controls-hover: #0000000d;
  --canvas-controls-active: #00000014;
  --canvas-minimap-bg: #ffffffe6;
  --canvas-minimap-mask: #0000000a;
  --canvas-minimap-node: #c4c4c4;
  --canvas-minimap-mask-stroke: #0003;
  --canvas-shadow-panel: 0px 2px 5px #00000014;
  --canvas-shadow-dropdown: 0px 4px 10px #0000001f, 0px 2px 4px #0000000f;
  --canvas-shadow-menu: 0 8px 32px #00000014, 0 2px 8px #0000000a;
  --canvas-primary-btn-bg: #000000d9;
  --canvas-primary-btn-bg-hover: #000000b3;
  --canvas-primary-btn-icon: #ffffff;
  --canvas-selection-bg: #0000000f;
  --canvas-group-bg: #0000000d;
  --canvas-group-border: #00000014;
  /* Swatch chrome shared by GroupColorPicker. Hairline matches the
   * canvas-controls border weight; reset bg is a neutral chip used as
   * the "no color" option. */
  --canvas-group-swatch-border: #0000001a;
  --canvas-group-swatch-reset-bg: #d9d9d999;
  --canvas-group-swatch-check: #1c1c1e;
  --canvas-group-swatch-red: color-mix(
    in srgb,
    var(--canvas-node-tag-red-surface) 92%,
    black
  );
  --canvas-group-swatch-orange: color-mix(
    in srgb,
    var(--canvas-node-tag-orange-surface) 92%,
    black
  );
  --canvas-group-swatch-yellow: color-mix(
    in srgb,
    var(--canvas-node-tag-yellow-surface) 92%,
    black
  );
  --canvas-group-swatch-green: color-mix(
    in srgb,
    var(--canvas-node-tag-green-surface) 92%,
    black
  );
  --canvas-group-swatch-cyan: color-mix(in srgb, #64d2ff 92%, black);
  --canvas-group-swatch-blue: color-mix(
    in srgb,
    var(--canvas-node-tag-blue-surface) 92%,
    black
  );
  --canvas-group-swatch-purple: color-mix(
    in srgb,
    var(--canvas-node-tag-purple-surface) 92%,
    black
  );
  --canvas-group-fill-red: color-mix(
    in srgb,
    var(--canvas-group-swatch-red) 24%,
    transparent
  );
  --canvas-group-fill-orange: color-mix(
    in srgb,
    var(--canvas-group-swatch-orange) 24%,
    transparent
  );
  --canvas-group-fill-yellow: color-mix(
    in srgb,
    var(--canvas-group-swatch-yellow) 24%,
    transparent
  );
  --canvas-group-fill-green: color-mix(
    in srgb,
    var(--canvas-group-swatch-green) 24%,
    transparent
  );
  --canvas-group-fill-cyan: color-mix(
    in srgb,
    var(--canvas-group-swatch-cyan) 24%,
    transparent
  );
  --canvas-group-fill-blue: color-mix(
    in srgb,
    var(--canvas-group-swatch-blue) 24%,
    transparent
  );
  --canvas-group-fill-purple: color-mix(
    in srgb,
    var(--canvas-group-swatch-purple) 24%,
    transparent
  );
  --canvas-pin-marker: #ef4444;
  --canvas-pin-marker-stroke: #b91c1c;
  --canvas-pin-marker-dot: #ffffff;
  /* Fullscreen text editor: purple emphasis + diff-review hunk fills.
   * Declared here rather than left to the `var(x, fallback)` fallbacks inside
   * canvas-overrides.css: a fallback-only token can never be theme-aware, so
   * Dark was painting light-tuned alphas on a dark ground.
   * Text selection, annotation, caret, and local CTA all derive from the
   * product brand accent while generic Canvas tools keep --canvas-accent. */
  --canvas-text-accent-soft: color-mix(in srgb, var(--canvas-text-accent) 16%, transparent);
  --canvas-diff-add-bg: oklch(0.72 0.19 145 / 0.18);
  --canvas-diff-del-bg: oklch(0.63 0.21 25 / 0.12);
}

.dark {
  --fg-default: var(--foreground);
  --fg-muted: var(--muted-foreground);
  --fg-disabled: color-mix(in srgb, var(--foreground) 30%, transparent);
  --border-muted: var(--border);
  --bg-surface-secondary: var(--muted);
  --bg-subtle: #232a33;
  --bg-subtle-hover: #2c343f;

  --canvas-bg: #0a0a0a;
  --canvas-bg-warm: #211f1b;
  --canvas-bg-cool: #1b2024;
  --canvas-bg-dot: var(--home-grid-line);
  --canvas-node-bg: #1a1a1a;
  --canvas-border-subtle: rgb(255 255 255 / 8%);
  --canvas-divider-subtle: rgb(255 255 255 / 6%);
  --canvas-node-border: var(--canvas-border-subtle);
  --canvas-node-border-selected: #ffffffee;
  --canvas-node-tag-surface-strength: 100%;
  --canvas-node-tag-surface-base: var(--canvas-bg);
  --canvas-tag-presentation-strength: 100%;
  --canvas-tag-presentation-base: var(--canvas-bg);
  --canvas-node-tag-ink-strength: 0%;
  --canvas-node-tag-ink-base: var(--canvas-bg);
  --canvas-node-tag-border-strength: 0%;
  --canvas-node-tag-blue: #7cb6f9;
  --canvas-node-tag-purple: #d897f9;
  --canvas-node-tag-orange: #f4b453;
  --canvas-node-tag-deep-purple: #9d8af8;
  --canvas-node-tag-red: #ee7b73;
  --canvas-node-tag-green: #9de591;
  --canvas-node-tag-yellow: #fbe77d;
  --canvas-node-tag-blue-surface: #7cb6f9;
  --canvas-node-tag-purple-surface: #d897f9;
  --canvas-node-tag-orange-surface: #f4b453;
  --canvas-node-tag-deep-purple-surface: #9d8af8;
  --canvas-node-tag-red-surface: #ee7b73;
  --canvas-node-tag-green-surface: #9de591;
  --canvas-node-tag-yellow-surface: #fbe77d;
  --canvas-node-tag-yellow-selected-foreground: #fbe77d;
  --canvas-node-tag-blue-foreground: var(--canvas-bg);
  --canvas-node-tag-purple-foreground: var(--canvas-bg);
  --canvas-node-tag-orange-foreground: var(--canvas-bg);
  --canvas-node-tag-deep-purple-foreground: var(--canvas-bg);
  --canvas-node-tag-red-foreground: var(--canvas-bg);
  --canvas-node-tag-green-foreground: var(--canvas-bg);
  --canvas-node-tag-yellow-foreground: var(--canvas-bg);
  --canvas-accent: #60a5fa;
  --canvas-text-accent: var(--brand-accent);
  --canvas-text-accent-foreground: var(--brand-accent-foreground);
  --canvas-handle: #86909c;
  --canvas-handle-bg: #161616e6;
  --canvas-handle-icon: #ffffffb3;
  --canvas-edge: #525252;
  --canvas-edge-hover: #86909c;
  --canvas-edge-selected: #737373;
  --canvas-controls-bg: #1a1a1a;
  --canvas-controls-border: #4a4a4a;
  --canvas-model-selector-icon-border: color-mix(
    in srgb,
    var(--canvas-controls-text) 6%,
    transparent
  );
  --canvas-controls-text: #ffffff;
  --canvas-controls-text-muted: #ffffff8c;
  /* Dark muted is half-transparent (8c = 140/255 ≈ 0.549). Split into solid
   * white + element opacity so overlapping glyph primitives stop welding.
   * 0.549 * #ffffff is visually identical to #ffffff8c. */
  --canvas-controls-text-muted-solid: #ffffff;
  --canvas-controls-text-muted-opacity: 0.549;
  --canvas-controls-icon: #ffffffd9;
  --canvas-empty-video-icon-filter: invert(1);
  --canvas-empty-video-action-bg: #252525;
  --canvas-empty-video-action-bg-hover: #2d2d2d;
  --canvas-controls-hover: #ffffff1a;
  --canvas-controls-active: #ffffff26;
  --canvas-minimap-bg: #161616e6;
  --canvas-minimap-mask: #ffffff0a;
  --canvas-minimap-node: #525252;
  --canvas-minimap-mask-stroke: #ffffff59;
  --canvas-shadow-panel: 0px 2px 5px #00000026;
  --canvas-shadow-dropdown: 0px 4px 10px #00000040, 0px 2px 4px #0000004d;
  --canvas-shadow-menu: 0 8px 32px #00000026, 0 2px 8px #0000001a;
  --canvas-primary-btn-bg: #ffffffe6;
  --canvas-primary-btn-bg-hover: #ffffffb3;
  --canvas-primary-btn-icon: #141414;
  --canvas-selection-bg: #ffffff0f;
  --canvas-group-bg: #ffffff1a;
  --canvas-group-border: #ffffff1a;
  --canvas-group-swatch-border: #ffffff26;
  --canvas-group-swatch-reset-bg: #ffffff26;
  --canvas-group-swatch-check: #ffffff;
  --canvas-group-swatch-red: rgb(150, 66, 67);
  --canvas-group-swatch-orange: rgb(131, 73, 21);
  --canvas-group-swatch-yellow: rgb(143, 128, 48);
  --canvas-group-swatch-green: rgb(61, 115, 68);
  --canvas-group-swatch-cyan: rgb(51, 114, 130);
  --canvas-group-swatch-blue: rgb(43, 82, 132);
  --canvas-group-swatch-purple: rgb(118, 56, 134);
  --canvas-group-fill-red: rgba(150, 66, 67, 0.32);
  --canvas-group-fill-orange: rgba(131, 73, 21, 0.32);
  --canvas-group-fill-yellow: rgba(143, 128, 48, 0.32);
  --canvas-group-fill-green: rgba(61, 115, 68, 0.32);
  --canvas-group-fill-cyan: rgba(51, 114, 130, 0.32);
  --canvas-group-fill-blue: rgba(43, 82, 132, 0.32);
  --canvas-group-fill-purple: rgba(118, 56, 134, 0.32);
  --canvas-pin-marker: #f87171;
  --canvas-pin-marker-stroke: #ef4444;
  --canvas-pin-marker-dot: #ffffff;
  /* Higher alpha + lifted lightness: the light-mode values are tuned against
   * a white page and all but vanish on the dark editor ground. */
  --canvas-text-accent-soft: color-mix(in srgb, var(--canvas-text-accent) 24%, transparent);
  --canvas-diff-add-bg: oklch(0.74 0.19 145 / 0.26);
  --canvas-diff-del-bg: oklch(0.66 0.21 25 / 0.28);
}

/* The Label entry stays fixed in the bottom dock. The portalled palette keeps
 * the original compact stack, Hover expansion, and active-count capsule. */
.canvas-global-tag-manager__manager {
  height: 36px;
  width: 36px;
  min-width: 36px;
  padding-inline: 0;
  align-self: center;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag {
  min-width: 16px;
  max-width: 16px;
  margin-left: 5px;
  padding-inline: 2px;
  overflow: hidden;
  transition-property: background-color, color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag:first-of-type {
  margin-left: 0;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag[aria-pressed='false'] {
  overflow: visible;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag[aria-pressed='false']:hover {
  background-color: transparent;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag[aria-pressed='true'] {
  height: 28px;
  min-width: max-content;
  max-width: 80px;
  margin-left: 8px;
  padding-inline: 8px;
  border-radius: 9999px;
  color: var(--canvas-tag-selected-foreground, var(--canvas-tag-color));
  background-color: color-mix(in srgb, var(--canvas-tag-color) 16%, transparent);
}

.canvas-global-tag-manager__palette
  .canvas-global-tag-manager__tag[aria-pressed='true']:first-of-type {
  margin-left: 0;
}

.canvas-global-tag-manager__palette
  .canvas-global-tag-manager__tag[aria-pressed='true']:hover {
  background-color: color-mix(in srgb, var(--canvas-tag-color) 16%, transparent);
}

.canvas-global-tag-manager__palette
  .canvas-global-tag-manager__tag[aria-pressed='true']
  + .canvas-global-tag-manager__tag {
  margin-left: 8px;
}

.canvas-global-tag-manager__palette .canvas-global-tag-manager__tag [data-canvas-tag-swatch] {
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.canvas-global-tag-manager__palette
  .canvas-global-tag-manager__tag[aria-pressed='false']:is(:hover, :focus-visible)
  [data-canvas-tag-swatch] {
  transform: scale(1.25);
}

.canvas-global-tag-manager__palette-action {
  height: 28px;
  width: 28px;
  min-width: 28px;
  align-self: center;
  margin-left: 2px;
  padding-inline: 6px;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(3px);
  transition-property: background-color, color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.canvas-global-tag-manager__palette [data-action-ui-id='canvas.tag-filter-status'] {
  margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-global-tag-manager__tag,
  .canvas-global-tag-manager__palette-action,
  .canvas-global-tag-manager__tag [data-canvas-tag-swatch] {
    transition: none;
  }
}
.message-input-editor .ProseMirror {
  outline: none;
  font-size: var(--message-input-editor-font-size);
  font-weight: 400;
  line-height: var(--text-body-14--line-height);
  font-family: inherit;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 4;
  padding: 0;
  min-height: 84px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  caret-color: var(--brand-accent);
}

/* QuestionDock keeps the shared rich composer but starts at one text line.
 * Attachments and wrapped text still expand naturally up to four lines. */
.question-dock-composer .message-input-editor .ProseMirror {
  min-height: 1lh;
  max-height: 4lh;
  padding-right: 2.25rem;
}

.question-dock-composer [data-message-input-composer-body='true'] {
  min-height: 2rem;
}

.question-dock-composer .message-input-editor {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Question replies use a compact attachment treatment: previews stay above
 * the prompt while the attachment action sits inline at the prompt's right. */
.question-dock-composer [data-message-input-attachment-preview='true'] {
  gap: 0.25rem;
  padding: 0 0.5rem 0.375rem;
}

.question-dock-composer
  [data-message-input-attachment-preview='true']
  [data-file-chip-layout='tile'] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
}

.question-dock-composer [data-message-input-attachment-preview='true'] > div {
  gap: 0.375rem;
  padding-bottom: 0;
}

.question-dock-composer [data-message-input-placeholder='true'] {
  top: 50%;
  right: 2.5rem;
  transform: translateY(-50%);
}

.question-dock-composer [data-composer-action-row='true'] {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  z-index: 3;
  width: auto;
  min-width: 0;
  gap: 0;
  transform: translateY(-50%);
}

.question-dock-composer [data-composer-actions-left='true'] {
  flex: none;
}

.message-input-editor .ProseMirror p {
  margin: 0;
  line-height: inherit;
}

.message-input-editor .ProseMirror p.is-editor-empty:first-child {
  position: relative;
  line-height: var(--text-body-14--line-height);
}

.message-input-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--color-foreground);
  opacity: 0.3;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

@keyframes skill-install-progress {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(420%);
  }
}

/*
 * Not scoped under `.message-input-editor`: the Skill panel that renders this
 * bar is portalled to `document.body`, so it has no editor ancestor and an
 * `.message-input-editor .skill-install-progress` selector never matches.
 */
.skill-install-progress {
  animation: skill-install-progress 1.2s ease-in-out infinite;
}

.message-input-editor .hl-skill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: var(--radius-sm);
  /* 浅紫底:brand-accent 12% 透明 */
  background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  /* 深紫近黑文字:在 foreground(近黑/近白) 上混 brand-accent 增加紫调
     light: 80% 黑 + 20% 紫 ≈ #1a1a3b (深紫近黑)
     dark : 80% 白 + 20% 紫 ≈ #d3d2ff (浅紫近白,在深底上读) */
  color: color-mix(in srgb, var(--foreground) 80%, var(--brand-accent) 20%);
}

.message-input-editor .hl-mention-model {
  --mention-visual-radius: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 1px 6px 1px 23px;
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border: 1px solid transparent;
  border-radius: 6px;
  line-height: 16px;
  vertical-align: text-bottom;
}

.message-input-editor .hl-mention-file {
  --mention-visual-radius: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  min-height: 22px;
  padding: 1px 6px 1px 23px;
  color: var(--color-foreground);
  background: var(--chat-inline-code-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  line-height: 16px;
  vertical-align: text-bottom;
  overflow: hidden;
  white-space: nowrap !important;
  /* `.ProseMirror` sets `overflow-wrap: break-word`, which is inheritable
     and overrides `white-space: nowrap` when content would overflow. Reset
     it (and `word-break`) here so the chip clips with an ellipsis instead
     of wrapping mid-filename. */
  overflow-wrap: normal;
  word-break: normal;
}

/* Connector references are text-sized inline controls, not media thumbnails.
   Keep their 20px box centered inside the 22px body line and let the shared
   connector icon render its own clean, uncropped 16px visual. */
.message-input-editor .hl-mention-file[data-mention-kind='connector'] {
  gap: 4px;
  min-height: 20px;
  padding: 0 6px 0 3px;
  line-height: 18px;
  vertical-align: middle;
}

.message-input-editor .hl-mention-file[data-mention-kind='connector']::before {
  display: none;
}

.message-input-editor .hl-mention-connector-icon {
  position: static;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  background: transparent;
  border: 0;
  transform: none;
}

/* Finder-style label: the stem truncates while the extension stays pinned,
   so `plan.md` and `plan.txt` never collapse into the same "@plan" chip. */
.message-input-editor .hl-mention-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-input-editor .hl-mention-file-ext {
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}

.message-input-editor .hl-mention-model::before,
.message-input-editor .hl-mention-file::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  box-sizing: border-box;
  background-color: var(--color-background);
  background-image: var(--mention-thumb);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--mention-visual-radius);
  transform: translateY(-50%);
  transition: transform 150ms ease-out;
}

.message-input-editor .hl-mention-file[data-mention-kind='image']:hover::before,
.message-input-editor .hl-mention-file[data-mention-kind='video']:hover::before {
  transform: translateY(-50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .message-input-editor .hl-mention-model::before,
  .message-input-editor .hl-mention-file::before {
    transition: none;
  }

  .message-input-editor .hl-mention-file[data-mention-kind='image']:hover::before,
  .message-input-editor .hl-mention-file[data-mention-kind='video']:hover::before {
    transform: translateY(-50%);
  }
}

.message-input-editor .hl-mention-file[data-mention-kind='audio']::before,
.message-input-editor .hl-mention-file[data-mention-kind='text']::before,
.message-input-editor .hl-mention-file[data-mention-kind='other']::before,
.message-input-editor .hl-mention-model[data-mention-kind='model']::before {
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.message-input-editor .hl-mention-file[data-mention-kind='audio']::before,
.message-input-editor .hl-mention-file[data-mention-kind='text']::before,
.message-input-editor .hl-mention-file[data-mention-kind='other']::before,
.message-input-editor .hl-mention-file[data-mention-kind='workflow']::before,
.message-input-editor .hl-mention-model[data-mention-has-thumb='0']::before {
  display: none;
}

/* Asset chips: no icon slot — left padding shrinks back to a normal pill,
   right padding still accommodates a small type tag. Outer stroke is removed
   so the tag becomes the visual anchor instead of competing with a border.
   Height aligned to image/video/audio chips (min-height: 20px, line-height: 16px). */
.message-input-editor .hl-mention-file[data-mention-kind='asset'] {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--chat-inline-code-bg);
  line-height: 16px;
  vertical-align: text-bottom;
}

.message-input-editor .hl-mention-file[data-mention-kind='asset']::before {
  display: none;
}

.message-input-editor .hl-mention-asset-type {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 0 2px;
  padding: 1px 4px;
  font-size: var(--text-caption-11);
  line-height: var(--text-caption-11--line-height);
  color: var(--color-background);
  background: var(--color-foreground);
  border: 0;
  border-radius: 4px;
}

.message-input-editor .hl-mention-model-icon,
.message-input-editor .hl-mention-audio-icon,
.message-input-editor .hl-mention-text-icon,
.message-input-editor .hl-mention-folder-icon,
.message-input-editor .hl-mention-file-ext-icon {
  position: absolute;
  left: 1px;
  top: 50%;
  display: inline-flex;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-foreground);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transform: translateY(-50%);
}

.message-input-editor .hl-mention-model[data-mention-has-thumb='0'],
.message-input-editor .hl-mention-file[data-mention-kind='audio'],
.message-input-editor .hl-mention-file[data-mention-kind='text'],
.message-input-editor .hl-mention-file[data-mention-kind='other'],
.message-input-editor .hl-mention-file[data-mention-kind='workflow'] {
  padding-left: 25px;
}

.message-input-editor .hl-mention-file-ext-icon {
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  text-transform: uppercase;
}

.message-input-editor .hl-mention-file-ext-icon::before {
  content: attr(data-ext-initial);
}

.message-input-editor .hl-mention-remove {
  position: absolute;
  top: 50%;
  right: 2px;
  z-index: 1;
  display: inline-flex;
  width: 14px;
  height: 14px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-background);
  background: var(--color-foreground);
  border: 0;
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 150ms ease-out;
}

.message-input-editor .hl-mention-model:hover .hl-mention-remove,
.message-input-editor .hl-mention-file:hover .hl-mention-remove,
.message-input-editor .hl-mention-remove:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.message-input-editor .hl-mention-remove:focus-visible {
  outline: 1px solid var(--color-ring);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .message-input-editor .hl-mention-remove {
    transition: none;
  }
}

/* Home folder placeholder chip (`[下载文件夹]`): clickable, hover deepens to
   hint it opens the native folder picker. Selector specificity beats the base
   `.hl-mention-file` so no !important is needed; tokens auto-adapt light/dark. */
.message-input-editor .hl-mention-file[data-mention-folder='1'] {
  cursor: pointer;
}

.message-input-editor .hl-mention-file[data-mention-folder='1']:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
}

.message-input-editor .ghost-text-wrapper {
  user-select: none;
  pointer-events: none;
}

.message-input-editor .ghost-text {
  color: var(--color-muted-foreground);
  opacity: 0.4;
}

.message-input-editor .ghost-tab-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 4px;
  font-size: 10px;
  color: var(--color-muted-foreground);
  opacity: 0.3;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1;
  vertical-align: middle;
}

.mention-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-muted-foreground) 42%, transparent) transparent;
  scrollbar-gutter: stable;
}

.mention-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mention-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.mention-scrollbar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-muted-foreground) 22%, transparent);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.mention-scrollbar:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-muted-foreground) 42%, transparent);
  border: 2px solid transparent;
  background-clip: content-box;
}


.mention-body-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}

.mention-body-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mention-body-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.mention-body-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.mention-body-scrollbar[data-scrolling='true'] {
  scrollbar-color: color-mix(in srgb, var(--color-muted-foreground) 42%, transparent) transparent;
}

.mention-body-scrollbar[data-scrolling='true']::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-muted-foreground) 42%, transparent);
  border: 2px solid transparent;
  background-clip: content-box;
}
.browser-annotation-header {
  background: var(--browser-annotation-header-bg);
  color: var(--browser-annotation-header-fg);
}

.browser-annotation-header-button {
  color: var(--browser-annotation-header-fg-muted);
}

.browser-annotation-header-button:hover:not(:disabled) {
  background: var(--browser-annotation-header-control-hover);
  color: var(--browser-annotation-header-fg);
}

.browser-annotation-send {
  background: var(--browser-annotation-send-bg);
  color: var(--browser-annotation-send-fg);
}

.browser-annotation-send:hover:not(:disabled) {
  background: var(--browser-annotation-send-bg-hover);
}

.browser-annotation-comment {
  min-width: 0;
}

.browser-annotation-image-editor {
  display: block !important;
}

:root {
  --browser-annotation-header-bg: #203653;
  --browser-annotation-header-fg: #f8fbff;
  --browser-annotation-header-fg-muted: rgba(248, 251, 255, 0.72);
  --browser-annotation-header-control-hover: rgba(255, 255, 255, 0.12);
  --browser-annotation-send-bg: #3d83f6;
  --browser-annotation-send-bg-hover: #4b8df7;
  --browser-annotation-send-fg: #ffffff;
}

.dark {
  --browser-annotation-header-bg: #203653;
  --browser-annotation-header-fg: #f8fbff;
  --browser-annotation-header-fg-muted: rgba(248, 251, 255, 0.72);
  --browser-annotation-header-control-hover: rgba(255, 255, 255, 0.12);
  --browser-annotation-send-bg: #3d83f6;
  --browser-annotation-send-bg-hover: #4b8df7;
  --browser-annotation-send-fg: #ffffff;
}