.agent-introduction-page {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: #101114;
  min-height: 100dvh;
}
.agent-introduction-content {
  color: #ffffffe6;
  background: #242424;
  border: 1px solid #ffffff1f;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.agent-introduction-header {
  min-height: 0;
  color: inherit;
  background: 0 0;
  padding: 24px 56px 20px 24px;
}
.agent-introduction-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}
.agent-introduction-description {
  padding: 0 24px;
  font-size: 14px;
  line-height: 22px;
}
.agent-introduction-intro {
  margin: 0;
}
.agent-introduction-checklist {
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  padding-inline-start: 22px;
  list-style: decimal;
}
.agent-introduction-checklist li + li {
  margin-top: 4px;
}
.agent-introduction-actions {
  justify-content: flex-end;
  gap: 8px;
  padding: 24px;
  display: flex;
}
.agent-introduction-primary,
.agent-introduction-secondary {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-width: 80px;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
  display: inline-flex;
}
.agent-introduction-secondary {
  color: #ffffffe6;
  background: #ffffff0f;
}
.agent-introduction-primary {
  color: #000000e6;
  background: #fff;
}
.agent-introduction-primary:focus-visible,
.agent-introduction-secondary:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #fff;
}
.feedback-panel-panel {
  box-sizing: border-box;
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  width: min(339px, 100vw - 24px);
  color: var(--nt-text-default);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 12px 32px #0000001f;
}
.feedback-panel-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.feedback-panel-link-field {
  box-sizing: border-box;
  background: var(--nt-bg-overlay);
  width: 100%;
  min-width: 0;
  height: 77px;
  color: var(--nt-text-default);
  text-overflow: ellipsis;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
}
.feedback-panel-feedback {
  color: var(--mantine-color-red-text);
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
}
.feedback-panel-footer {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 1.45fr);
  gap: 8px;
  margin-top: 16px;
  display: grid;
}
.feedback-panel-scope-button,
.feedback-panel-primary {
  border: 1px solid var(--nt-border-neutral-l2);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  display: inline-flex;
}
.feedback-panel-scope-button {
  background: var(--nt-bg-overlay);
  color: var(--nt-text-default);
  justify-content: space-between;
}
.feedback-panel-scope-button:hover:not(:disabled) {
  background: var(--nt-bg-overlay-hover);
}
.feedback-panel-scope-button:disabled,
.feedback-panel-primary:disabled {
  opacity: 0.45;
  cursor: default;
}
.feedback-panel-primary {
  background: var(--nt-bg-brand);
  color: var(--nt-white);
  border-color: #0000;
}
.feedback-panel-primary:hover:not(:disabled) {
  background: var(--nt-bg-brand-hover);
}
.feedback-panel-panel[data-region="cn"] .feedback-panel-primary {
  color: var(--nt-neutral-1000);
}
.feedback-panel-link-field:focus-visible,
.feedback-panel-scope-button:focus-visible,
.feedback-panel-primary:focus-visible {
  outline: 2px solid var(--nt-border-brand-contrast);
  outline-offset: 2px;
}
.feedback-panel-hint {
  color: var(--nt-text-secondary);
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
}
.feedback-panel-scope-menu {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  border-radius: 12px;
  min-width: 140px;
  padding: 4px;
  box-shadow: 0 8px 24px #0000001a;
}
.feedback-panel-scope-item {
  min-height: 36px;
  color: var(--nt-text-default);
  border-radius: 8px;
  font-size: 13px;
}
.feedback-panel-scope-item[data-selected] {
  background: var(--nt-bg-overlay-active);
  font-weight: 500;
}
.feedback-panel-scope-item:hover:not([data-disabled]) {
  background: var(--nt-bg-overlay-hover);
}
.agent-editor-page {
  color: #f0f0f1;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: #101114;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.agent-editor-header {
  display: contents;
}
.agent-editor-share-export-group {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}
.agent-editor-share-button,
.agent-editor-export-button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
}
.agent-editor-share-button {
  color: #fff;
  background: 0 0;
  width: 28px;
  padding: 0;
}
.agent-editor-share-button:hover {
  background: var(--nt-bg-overlay-hover, #ffffff1a);
}
.agent-editor-export-button {
  background: var(--nt-bg-brand, #6640ff);
  min-width: 72px;
  color: var(--nt-text-onbrand, #fff);
  white-space: nowrap;
}
[data-region="intl"] .agent-editor-export-button {
  color: #fff;
}
.agent-editor-export-button[data-exporting]:disabled {
  opacity: 1;
}
.agent-editor-export-stop-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.agent-editor-export-stop-icon path {
  fill: currentColor;
}
.agent-editor-message-close {
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
  background: 0 0;
  border: 0;
  border-radius: 4px;
  margin-left: 12px;
  padding: 4px;
  display: inline-flex;
}
.agent-editor-message-close:hover {
  background: #ffffff1a;
}
.agent-editor-share-button:disabled,
.agent-editor-export-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.agent-editor-share-popover {
  box-shadow: none;
  background: 0 0;
  border: 0;
  padding: 0;
  overflow: visible;
}
.agent-editor-project-navigation {
  background: var(--canvas-controls-bg, #262626);
  max-width: 100%;
  color: var(--canvas-controls-text, #fff);
  border-radius: 12px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  padding: 4px;
  display: flex;
}
.agent-editor-project-menu-trigger,
.agent-editor-project-sidebar-toggle {
  height: 28px;
  color: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  display: flex;
}
.agent-editor-project-menu-trigger:hover,
.agent-editor-project-sidebar-toggle:hover {
  background: var(--canvas-controls-hover, #ffffff1a);
}
.agent-editor-project-sidebar-toggle {
  width: 28px;
  padding: 0;
}
.agent-editor-project-logo {
  width: 25.0248px;
  height: 14.5455px;
}
.agent-editor-project-logo-intl {
  width: 23px;
  height: 20px;
}
.agent-editor-project-menu-chevron {
  transition: transform 0.15s;
}
.agent-editor-project-menu-chevron[data-open] {
  transform: rotate(180deg);
}
.agent-editor-project-name {
  min-width: 0;
  max-width: 240px;
  color: inherit;
  cursor: default;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
}
.agent-editor-project-name:not(:disabled):hover {
  background: var(--canvas-controls-hover, #ffffff1a);
}
.agent-editor-project-name-input {
  background: var(--canvas-controls-active, #ffffff24);
  width: 240px;
  min-width: 0;
  max-width: 240px;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  outline: 0;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
}
.agent-editor-project-name-input:disabled {
  opacity: 0.65;
}
.agent-editor-project-name-input::selection {
  background: var(--canvas-controls-selected, #ffffff3d);
}
.agent-editor-shared-project-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-right: auto;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
}
.agent-editor-shared-back-link {
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
}
.agent-editor-project-menu {
  border: 0.5px solid var(--canvas-controls-border, #363636);
  background: var(--canvas-controls-bg, #262626);
  box-shadow: var(--canvas-shadow-menu, 0 8px 32px #0003);
  color: var(--canvas-controls-text, #fff);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 4px;
}
.agent-editor-project-menu[data-region="intl"] {
  min-width: 200px;
  max-width: calc(100vw - 32px);
}
.agent-editor-project-menu-item {
  height: 44px;
  color: inherit;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
}
.agent-editor-project-menu-item:hover,
.agent-editor-project-menu-item[data-hovered] {
  background: var(--canvas-controls-hover, #ffffff1a);
}
.agent-editor-project-menu-divider {
  border-color: var(--canvas-controls-border, #363636);
  margin: 2px 0;
}
.agent-editor-save-state {
  color: #92949c;
  margin-right: 12px;
  font-size: 11px;
}
.agent-editor-button {
  color: #eeeef0;
  cursor: pointer;
  background: #1c1d22;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}
.agent-editor-export-panel {
  color: var(--text-default, #fff);
  font-size: 14px;
}
.agent-editor-export-panel-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 24px 24px 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  overflow: hidden;
}
.agent-editor-export-panel-body {
  padding: 0 24px;
}
.agent-editor-export-tabs {
  background: var(--bg-overlay, #ffffff0f);
  border-radius: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  height: 40px;
  padding: 4px;
  display: grid;
}
.agent-editor-export-tab {
  min-width: 0;
  color: var(--text-secondary, #fff9);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}
.agent-editor-export-tab:hover {
  color: var(--text-default, #fff);
}
.agent-editor-export-tab[data-active] {
  background: var(--bg-body, #161616);
  color: var(--text-default, #fff);
}
.agent-editor-export-fields {
  margin-top: 12px;
}
.agent-editor-export-disabled-hint {
  color: var(--text-secondary, #fff9);
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 18px;
}
.agent-editor-export-field {
  border-bottom: 1px solid var(--border-neutral-l1, #ffffff14);
  min-height: 48px;
  color: var(--text-secondary, #fff9);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 20px;
  display: flex;
}
.agent-editor-export-field:last-child {
  border-bottom: 0;
}
.agent-editor-export-field strong {
  color: var(--text-default, #fff);
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
}
.agent-editor-export-format-select {
  color: var(--text-default, #fff);
  flex-shrink: 0;
}
.agent-editor-export-format-trigger {
  min-width: 88px;
  height: 32px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  background: 0 0;
  border: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0;
  display: flex;
}
.agent-editor-export-format-trigger svg {
  flex-shrink: 0;
}
.agent-editor-export-format-menu {
  border: 1px solid var(--border-neutral-l1, #ffffff14);
  background: #2c2c2c;
  border-radius: 10px;
  padding: 6px;
  position: absolute;
  box-shadow: 0 8px 24px #0006;
}
.agent-editor-export-format-options {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.agent-editor-export-format-option {
  width: 100%;
  min-height: 32px;
  color: var(--text-default, #fff);
  cursor: pointer;
  font: inherit;
  background: 0 0;
  border: 0;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  display: flex;
}
.agent-editor-export-format-option[data-combobox-active] {
  background: #ffffff0a;
}
.agent-editor-export-format-option:hover,
.agent-editor-export-format-option[data-combobox-selected] {
  background: #ffffff14;
}
.agent-editor-export-panel-footer {
  gap: 8px;
  padding: 20px 24px 24px;
  display: flex;
}
.agent-editor-export-button-hint-target {
  flex: 1;
  min-width: 0;
  display: flex;
}
.agent-editor-export-download-button {
  white-space: nowrap;
  background: var(--bg-invert, #fff);
  width: 100%;
  min-width: 0;
  height: 36px;
  color: var(--text-onbrand, #000);
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
}
.agent-editor-export-download-button:hover {
  opacity: 0.92;
}
.agent-editor-export-canvas-button {
  background: var(--bg-brand, #35d4f5);
  color: var(--special-black, #000);
}
.agent-editor-export-generate-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.agent-editor-export-generate-icon path {
  fill: currentColor;
}
.agent-editor-export-download-button:disabled {
  cursor: default;
  opacity: 0.45;
}
.agent-editor-export-tab:focus-visible,
.agent-editor-export-format-trigger:focus-visible,
.agent-editor-export-format-option:focus-visible,
.agent-editor-export-download-button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #a2a2ff;
}
.agent-editor-primary {
  border-color: var(--nt-primary-color, #7878f5);
  background: var(--nt-primary-color, #7878f5);
  color: #fff;
}
.agent-editor-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.agent-editor-button:not(:disabled):hover {
  background: #ffffff18;
}
.agent-editor-debug-wrap {
  flex-shrink: 0;
  position: relative;
}
.agent-editor-debug-button {
  color: #c6c6ff;
  border-color: #8d8dff66;
}
.agent-editor-debug-dock {
  z-index: 21;
  position: absolute;
  bottom: 16px;
  right: 16px;
}
.agent-editor-debug-panel {
  z-index: 20;
  color: #e8e8ec;
  background: #181a20;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  width: min(520px, 100vw - 24px);
  max-height: min(70vh, 680px);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  overflow: hidden;
  box-shadow: 0 18px 50px #0008;
}
.agent-editor-debug-panel-header {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px 12px;
  display: flex;
}
.agent-editor-debug-panel-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.agent-editor-debug-panel-header p {
  color: #92949c;
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.5;
}
.agent-editor-debug-copy {
  color: #d8d8ff;
  cursor: pointer;
  background: #22242c;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 5px 8px;
  font-size: 10px;
}
.agent-editor-debug-content {
  max-height: min(62vh, 590px);
  padding: 4px 16px 14px;
  overflow-y: auto;
}
.agent-editor-debug-section {
  padding: 10px 0 4px;
}
.agent-editor-debug-section h3 {
  color: #bfc1ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
}
.agent-editor-debug-section dl {
  margin: 0;
}
.agent-editor-debug-section dl > div {
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  gap: 10px;
  padding: 3px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.45;
  display: grid;
}
.agent-editor-debug-section dt {
  color: #858894;
}
.agent-editor-debug-section dd {
  color: #e2e3e8;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}
.agent-editor-debug-value {
  max-width: 100%;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  display: flex;
}
.agent-editor-debug-value:hover .agent-editor-debug-value-text {
  color: #fff;
  text-underline-offset: 2px;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
.agent-editor-debug-value-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.agent-editor-debug-value-copied {
  color: #7fd6a0;
  flex-shrink: 0;
}
.agent-editor-page button:focus-visible,
.agent-editor-page a:focus-visible,
.agent-editor-page select:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #a2a2ff;
}
.agent-editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.agent-editor-editor-area {
  --preview-stage-center: calc(
    (var(--preview-left-width, 0px) + 100% - var(--preview-right-width, 0px)) /
      2
  );
  --preview-stage-max-width: calc(
    100% - var(--preview-left-width, 0px) - var(--preview-right-width, 0px) -
      32px
  );
  --preview-commercial-bg: var(--vip-tab-bg);
  --preview-commercial-text: var(--vip-text-primary);
  --preview-commercial-border: var(--vip-btn-normal-border);
  --preview-commercial-action-bg: var(--vip-btn-normal-bg);
  --preview-commercial-action-hover: var(--vip-tab-selected-bg);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  position: relative;
}
.agent-editor-editor {
  isolation: isolate;
  color: #fff;
  background: #08090b;
  flex: 1;
  min-width: 0;
  min-height: 0;
  font-family: Arial, sans-serif;
  display: flex;
  position: relative;
  overflow: hidden;
}
.agent-editor-empty {
  color: #a2a4ac;
  flex: 1;
  place-items: center;
  padding: 30px;
  font-size: 13px;
  display: grid;
}
.agent-editor-message {
  z-index: 41;
  top: 68px;
  right: calc(var(--preview-right-width, 0px) + 16px);
  left: calc(var(--preview-left-width, 0px) + 16px);
  color: #c9d6cb;
  background: #20222a;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12px;
  position: absolute;
}
.agent-editor-message[data-error="true"] {
  color: #ffc0bb;
}
.agent-editor-scene-loading {
  z-index: 41;
  top: 68px;
  right: calc(var(--preview-right-width, 0px) + 16px);
  left: calc(var(--preview-left-width, 0px) + 16px);
  width: fit-content;
  max-width: calc(
    100% - var(--preview-left-width, 0px) - var(--preview-right-width, 0px) -
      32px
  );
  border: 1px solid var(--canvas-controls-border, #363636);
  background: var(--canvas-controls-bg, #262626);
  min-height: 32px;
  color: var(--canvas-controls-text, #fff);
  pointer-events: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  position: absolute;
}
.agent-editor-canvas-success-toast {
  z-index: 41;
  top: 68px;
  left: var(--preview-stage-center);
  box-sizing: border-box;
  width: max-content;
  min-width: 280px;
  max-width: var(--preview-stage-max-width);
  border: 1px solid var(--border-neutral-l1, #ffffff14);
  background: var(--bg-float, #242424);
  height: 46px;
  color: var(--text-default, #fff);
  border-radius: 16px;
  align-items: center;
  padding: 12px 14px;
  display: flex;
  position: absolute;
  overflow: hidden;
  transform: translate(-50%);
  box-shadow:
    0 1px 1px #00000005,
    0 8px 16px -4px #0000000a,
    0 24px 32px -8px #0000000f;
}
.agent-editor-page .agent-editor-message {
  right: auto;
  left: var(--preview-stage-center);
  box-sizing: border-box;
  width: min(384px, var(--preview-stage-max-width));
  max-width: var(--preview-stage-max-width);
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  color: var(--nt-text-default);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  transform: translate(-50%);
  box-shadow: 0 8px 24px #00000026;
}
.agent-editor-page .agent-editor-message .agent-editor-message-icon {
  color: var(--nt-success-default);
  flex: 0 0 20px;
  align-self: flex-start;
  display: flex;
}
.agent-editor-page
  .agent-editor-message[data-error="true"]
  .agent-editor-message-icon {
  color: var(--nt-danger-default);
}
.agent-editor-page .agent-editor-message .agent-editor-message-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  flex: 1;
  min-width: 0;
}
.agent-editor-page .agent-editor-message .agent-editor-message-close {
  color: var(--nt-text-secondary);
  border-radius: 50%;
  flex: 0 0 24px;
  align-self: flex-start;
  place-items: center;
  margin: -2px 0;
  padding: 4px;
  display: grid;
}
.agent-editor-page .agent-editor-message .agent-editor-message-close:hover {
  background: var(--nt-bg-overlay-hover);
}
.agent-editor-page
  .agent-editor-message
  .agent-editor-message-close:focus-visible {
  outline: 2px solid var(--nt-icon-brand);
  outline-offset: 2px;
}
.agent-editor-canvas-success-close {
  cursor: pointer;
  background: 0 0;
  border: 0;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
}
.agent-editor-canvas-success-close svg {
  opacity: 0.55;
  width: 20px;
  height: 20px;
  display: block;
}
.agent-editor-canvas-success-link {
  min-width: 0;
  color: inherit;
  flex: 1;
  align-items: center;
  padding-left: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  display: flex;
}
.agent-editor-canvas-success-link span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.agent-editor-canvas-success-link svg {
  opacity: 0.9;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: block;
}
.agent-editor-canvas-success-close:hover,
.agent-editor-canvas-success-link:hover {
  opacity: 0.8;
}
.agent-editor-canvas-success-close:focus-visible,
.agent-editor-canvas-success-link:focus-visible {
  outline: 2px solid var(--nt-icon-brand, #35d5f5);
  outline-offset: -2px;
}
@media (max-width: 1000px) {
  .agent-editor-header {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .agent-editor-save-state {
    display: none;
  }
  .agent-editor-debug-panel {
    position: fixed;
    bottom: 64px;
    right: 12px;
  }
}
.agent-editor-left-chrome,
.agent-editor-right-chrome {
  z-index: 40;
  background: #262626;
  border-radius: 12px;
  align-items: center;
  max-width: 240px;
  height: 36px;
  padding: 4px;
  display: flex;
  position: absolute;
  top: 12px;
}
.agent-editor-left-chrome {
  left: 12px;
}
.agent-editor-left-chrome .agent-editor-project-navigation {
  background: 0 0;
  min-width: 0;
  padding: 0;
}
.agent-editor-left-chrome[data-open="true"] {
  width: var(--preview-left-panel-width, 240px);
  max-width: var(--preview-left-panel-width, 240px);
  background: #111;
  border-bottom: 1px solid #ffffff14;
  border-right: 1px solid #ffffff14;
  border-radius: 0;
  height: 48px;
  padding: 6px 7px 6px 4px;
  top: 0;
  left: 0;
}
.agent-editor-left-chrome[data-open="true"] .agent-editor-project-navigation {
  width: 100%;
}
.agent-editor-left-chrome[data-open="true"]
  .agent-editor-project-sidebar-toggle {
  margin-left: auto;
}
.canvas-light .agent-editor-page .agent-editor-left-chrome {
  background: var(--canvas-controls-bg);
  color: var(--canvas-controls-text);
  box-shadow: inset 0 0 0 0.5px var(--canvas-controls-border);
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}
.canvas-light .agent-editor-page .agent-editor-left-chrome[data-open="true"] {
  border-color: var(--canvas-controls-border);
  box-shadow: none;
}
.agent-editor-right-chrome {
  gap: 4px;
  right: 12px;
}
.agent-editor-right-chrome[data-open="true"] {
  width: var(--preview-right-panel-width, 240px);
  max-width: var(--preview-right-panel-width, 240px);
  background: #111;
  border-bottom: 1px solid #ffffff14;
  border-radius: 0;
  justify-content: space-between;
  height: 48px;
  padding: 6px 8px 6px 7px;
  top: 0;
  right: 0;
}
.agent-editor-right-chrome[data-open="true"] .agent-editor-share-export-group {
  margin-left: auto;
}
.agent-editor-readonly-copy {
  z-index: 40;
  position: absolute;
  top: 12px;
  right: 12px;
}
.agent-editor-monitor-panel {
  z-index: 3;
  top: 48px;
  bottom: var(--preview-dock-height, 0px);
  width: var(--preview-left-panel-width, 240px);
  background: #111;
  border-right: 1px solid #ffffff14;
  flex-direction: column;
  display: flex;
  position: absolute;
  left: 0;
  overflow: hidden;
}
.agent-editor-monitor-panel[hidden] {
  display: none;
}
.agent-editor-sidebar-resize-handle {
  z-index: 42;
  top: 48px;
  bottom: var(--preview-dock-height, 0px);
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  outline: none;
  width: 8px;
  position: absolute;
}
.agent-editor-outliner-resize-handle {
  z-index: 1;
  cursor: row-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
}
.agent-editor-sidebar-resize-overlay {
  z-index: 60;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  inset: 0;
}
.agent-editor-panel-title {
  color: #f0f0f1;
  flex: 0 0 48px;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
}
.agent-editor-monitor-content {
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: 0 12px 12px;
  overflow: hidden auto;
}
.agent-editor-monitor-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.agent-editor-monitor-item {
  color: #ffffffa6;
  text-align: left;
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.agent-editor-monitor-item:not([data-disabled]):not(
    .agent-editor-monitor-item-selected
  ):hover
  .agent-editor-monitor-thumb {
  border-color: #ffffff3d;
}
.agent-editor-monitor-item:not([data-disabled]):hover
  .agent-editor-monitor-actions {
  opacity: 1;
  pointer-events: auto;
}
.agent-editor-monitor-thumb-button {
  cursor: pointer;
  background: 0 0;
  border: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
}
.agent-editor-monitor-thumb-button:disabled {
  cursor: default;
}
.agent-editor-monitor-item-selected .agent-editor-monitor-thumb {
  border: 1.5px solid #fff;
}
.agent-editor-monitor-thumb {
  aspect-ratio: 16/9;
  background: #141414;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  display: block;
  position: relative;
  overflow: hidden;
}
.agent-editor-monitor-thumb img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}
.agent-editor-monitor-actions {
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: #0006;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  transition: opacity 0.16s;
  display: flex;
  position: absolute;
  inset: 0;
}
.agent-editor-monitor-item:not([data-disabled]):hover
  .agent-editor-monitor-top-actions {
  pointer-events: none;
}
.agent-editor-monitor-item:not([data-disabled]):hover
  .agent-editor-monitor-top-actions
  .agent-editor-monitor-enter-action {
  pointer-events: auto;
}
.agent-editor-monitor-locate-action,
.agent-editor-monitor-enter-action {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: #fff;
  cursor: pointer;
  background: #ffffff1f;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  align-items: center;
  height: 32px;
  display: flex;
}
.agent-editor-monitor-locate-action:disabled,
.agent-editor-monitor-enter-action:disabled {
  opacity: 0.5;
  cursor: default;
}
.agent-editor-monitor-locate-action {
  justify-content: center;
  width: 32px;
}
.agent-editor-monitor-enter-action {
  min-width: 60px;
  padding: 0 8px 0 10px;
}
.agent-editor-monitor-enter-action-active {
  color: #101114;
  background: #fff;
  border-color: #0000;
}
.agent-editor-monitor-enter-action-active .agent-editor-monitor-enter-label {
  color: inherit;
}
.agent-editor-monitor-enter-label {
  color: #fff;
  white-space: nowrap;
  padding: 0 4px;
  font-size: 13px;
  line-height: 20px;
}
.agent-editor-monitor-thumb-empty {
  width: 100%;
  height: 100%;
  display: block;
}
.agent-editor-monitor-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
}
.agent-editor-compose-icon,
.agent-editor-animation-icon,
.agent-editor-monitor-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: block;
}
.agent-editor-compose-icon path,
.agent-editor-animation-icon path,
.agent-editor-monitor-icon path {
  fill: currentColor;
}
.agent-editor-monitor-icon {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
}
.agent-editor-editor [data-preview-workspace] .agent-editor-asset-title-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.agent-editor-editor [data-preview-workspace] {
  --color-q-background-secondary: #262626;
  --color-q-background-tertiary: #202020;
  --color-q-icon-accent: #35d5f5;
  --color-q-transparent-lime-70: #35d5f5;
  --color-q-transparent-lime-80: #53dfff;
}
.agent-editor-editor [data-preview-workspace]:before {
  z-index: 10;
  top: 0;
  right: 0;
  bottom: var(--preview-dock-height, 0px);
  width: var(--preview-right-width, 0px);
  content: "";
  background: #111;
  position: absolute;
}
.agent-editor-editor [data-preview-workspace] [data-preview-stage] {
  right: var(--preview-right-width, 0px);
  bottom: var(--preview-dock-height, 0px);
  left: var(--preview-left-width, 0px);
}
.agent-editor-editor [data-preview-workspace] [data-preview-add] {
  margin-left: auto;
}
.agent-editor-editor [data-preview-workspace] [data-preview-add] button {
  color: #fff;
  background: 0 0;
  border-radius: 10px;
  width: 28px;
  height: 28px;
  padding: 6px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-add] button > svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-pip] {
  outline-offset: -1px;
  background: linear-gradient(#0000004d, #0000 30%);
  border-radius: 12px;
  outline: 1px solid #ffffff29;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.agent-editor-editor [data-preview-workspace] [data-preview-pip-label] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #ffffffe6;
  background: 0 0;
  gap: 4px;
  max-width: calc(100% - 56px);
  height: 28px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 16px;
  top: 0;
  left: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-pip-actions] {
  gap: 0;
  top: 0;
  right: 0;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-pip-actions]
  button {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  background: 0 0;
  width: 28px;
  height: 28px;
  padding: 8px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-pip-actions]
  button
  > svg {
  width: 12px;
  height: 12px;
}
.agent-editor-editor [data-preview-workspace] [role="toolbar"] {
  top: 12px;
  left: calc(
    (var(--preview-left-width, 0px) + 100% - var(--preview-right-width, 0px)) /
      2
  );
  gap: 8px;
}
.agent-editor-editor [data-preview-workspace] [role="toolbar"] > div {
  box-shadow: none;
  background: #262626;
  border-radius: 9999px;
  gap: 2px;
  padding: 8px;
}
.agent-editor-editor [data-preview-workspace] [role="toolbar"] button {
  border-radius: 9999px;
  height: 32px;
  font-size: 13px;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="toolbar"]
  button:not(:has(> span)) {
  width: 32px;
}
:is(
  .agent-editor-editor
    [data-preview-workspace]
    [data-preview-panel="scene-inspector"],
  .agent-editor-editor
    [data-preview-workspace]
    [data-preview-panel="animation-inspector"]
) {
  top: 48px;
  right: 0;
  bottom: var(--preview-dock-height, 0px);
  max-width: var(--preview-right-panel-width, 240px);
  overscroll-behavior: contain;
  background: #111;
  border-radius: 0;
  padding: 0;
  transition: none;
  left: auto;
  overflow: hidden auto;
  width: var(--preview-right-panel-width, 240px) !important;
  height: auto !important;
  max-height: none !important;
}
:is(
  .agent-editor-editor
    [data-preview-workspace][data-preview-right-open="false"]
    [data-preview-panel="scene-inspector"],
  .agent-editor-editor
    [data-preview-workspace][data-preview-right-open="false"]
    [data-preview-panel="animation-inspector"]
) {
  display: none;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-panel="animation-inspector"]
  > [data-scene-inspector-header] {
  height: 48px;
  padding: 0 12px;
  display: flex;
}
.agent-editor-editor [data-preview-workspace] [data-scene-inspector-scroll] {
  gap: 0;
  overflow: visible;
}
:is(
  .agent-editor-editor [data-preview-workspace] [data-scene-inspector-card],
  .agent-editor-editor [data-preview-workspace] [data-object-state]
) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  gap: 16px;
  padding: 12px;
}
.agent-editor-editor [data-preview-workspace] [data-scene-inspector-card] {
  border-bottom: 1px solid #ffffff14;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-scene-inspector-card]
  [data-preview-outliner] {
  height: var(--preview-outliner-height, 160px);
}
.agent-editor-editor [data-preview-workspace] [data-preview-outliner] > span {
  display: none;
}
.agent-editor-editor [data-preview-workspace] [data-scene-inspector-header] {
  flex: 0 0 48px;
  gap: 4px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-scene-inspector-header]
  > span:first-child {
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-transform] {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: auto;
  padding: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-transform] > span {
  flex: none;
}
.agent-editor-editor [data-preview-workspace] [data-preview-transform] > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  display: grid;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-transform]
  > div
  > label {
  cursor: default;
  gap: 4px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
}
.agent-editor-editor [data-preview-workspace] [data-color-row] {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.agent-editor-editor [data-preview-workspace] [data-color-row] > div {
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-color-row]
  > [role="listbox"] {
  flex-wrap: wrap;
  gap: 3px;
  padding-left: 8px;
  padding-right: 8px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-dock] {
  bottom: 0;
  left: 0;
  right: 0;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-dock]:not([data-preview-dock-cn])
  > div {
  box-shadow: none;
  background: #111;
  border-top: 1px solid #ffffff14;
  border-radius: 0;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-dock][data-preview-dock-cn]
  > div {
  box-shadow: none;
  background: 0 0;
  border-radius: 0;
  padding: 0;
  display: block;
}
.agent-editor-editor [data-preview-workspace] [data-preview-transport] {
  flex: 0 0 28px;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  font-size: 12px;
  display: flex;
  position: relative;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-transport]
  > button {
  background: #222;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  position: absolute;
  left: 0;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-transport]
  > button
  > svg {
  width: 18px;
  height: 18px;
}
.agent-editor-editor [data-preview-scrub] {
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  align-self: stretch;
  align-items: center;
  margin: 0 -6px;
  padding: 0 6px;
  display: flex;
}
.agent-editor-editor
  [data-preview-transform]
  label:has(input:disabled)
  [data-preview-scrub] {
  cursor: default;
}
.agent-editor-editor [data-preview-transform] input:enabled {
  cursor: text;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="toolbar"]
  button:not([aria-pressed="true"]):not(:disabled) {
  color: #eee;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-scene-inspector-header]
  > span:first-child {
  place-items: center;
  width: 16px;
  height: 16px;
  display: grid;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-dock]:not([data-preview-dock-cn])
  > div
  > div:last-child {
  overflow: visible;
}
.agent-editor-editor [data-preview-workspace] [data-preview-ruler] {
  order: -1;
  height: 22px;
  margin-bottom: 4px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-ruler]
  > span:empty {
  border-radius: 50%;
  width: 2px;
  bottom: 8px;
  height: 2px !important;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-ruler]
  > span:not(:empty) {
  color: #777;
  padding-left: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-tracks] {
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-keyframes] {
  height: 20px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-playhead] {
  height: auto;
  top: 0;
  bottom: 0;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-playhead]
  > span:first-child {
  background: #fff;
  height: calc(100% - 12px);
  top: 12px;
}
.agent-editor-editor [data-preview-workspace] [data-preview-playhead] > svg {
  display: none;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-playhead]
  > span:last-child {
  color: #111;
  background: #fff;
  border-radius: 5px;
  padding: 0 5px;
  font-size: 11px;
  top: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-timeline-tools] {
  background: #111;
  top: -36px;
  height: 28px !important;
}
:is(
  .agent-editor-editor
    [data-preview-workspace]
    [data-preview-panel="animation-settings"],
  .agent-editor-editor
    [data-preview-workspace]
    [data-preview-panel="animation-transform"]
) {
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #ffffff14;
  border-radius: 0;
  padding: 12px;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-transform]
  > div
  > div {
  gap: 4px;
  width: 100%;
}
.agent-editor-editor [data-preview-workspace] [role="tree"] {
  grid-template-columns: minmax(0, 1fr);
}
.agent-editor-editor [data-preview-workspace] [role="treeitem"] {
  min-width: 0;
  padding-left: calc(4px + min(var(--preview-tree-depth), 4) * 12px) !important;
}
.agent-editor-editor [data-preview-workspace] [role="treeitem"] > span[style] {
  display: none;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]
  > button:has(+ [data-preview-tree-label]) {
  background: 0 0;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]
  > button:nth-last-child(-n + 2) {
  z-index: 1;
  width: 20px;
  height: 24px;
  position: absolute;
  right: 2px;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]
  > button:nth-last-child(-n + 2):nth-last-child(2) {
  right: 24px;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]:has(> button:nth-last-child(2)):is(:hover, :focus-within)
  [data-preview-tree-label] {
  margin-right: 44px;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]:has(> button:nth-last-child(2):not([class~="opacity-0"]))
  [data-preview-tree-label] {
  margin-right: 44px;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]:has([data-preview-tree-label] > input)
  > span:last-child {
  display: none;
}
.agent-editor-editor [data-preview-workspace] [data-preview-outliner] {
  background: 0 0;
  border-radius: 0;
  padding: 0;
}
.agent-editor-editor [data-preview-workspace] [data-preview-outliner] > div {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  overflow-x: hidden;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-outliner]
  > div[data-preview-scrolling] {
  scrollbar-color: #ffffff2e transparent;
}
.agent-editor-editor
  [data-preview-workspace]
  [role="treeitem"]:not(:hover, :focus-within)
  > span:last-child:not(:has(button:not([class~="opacity-0"]))) {
  display: none;
}
.agent-editor-editor
  [data-preview-workspace]
  [class~="bg-q-transparent-lime-70"] {
  color: #111;
  background-color: #35d5f5;
}
.agent-editor-editor
  [data-preview-workspace]
  [class~="bg-q-transparent-lime-70"]:hover {
  background-color: #53dfff;
}
.agent-editor-editor
  [data-preview-workspace]
  [class~="bg-q-transparent-lime-70"]
  > span {
  color: inherit;
}
.agent-editor-editor
  [data-preview-workspace]
  [class~="bg-q-transparent-lime-10"] {
  color: #35d5f5;
  background-color: #35d5f51a;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-preview-dock]
  [class~="bg-q-icon-accent"] {
  background-color: #35d5f5;
}
.agent-editor-editor
  [data-preview-workspace]
  [data-scene-inspector-card]
  > div:last-child
  > div:first-child {
  height: min(240px, 35vh);
}
.agent-editor-editor [data-preview-workspace] [data-object-state] > h2 {
  display: none;
}
.agent-editor-export-progress-track {
  z-index: 20;
  pointer-events: none;
  background: var(--bg-overlay, #ffffff0f);
  height: 2.5px;
  position: absolute;
  inset-inline: 0;
}
.agent-editor-export-progress-track > div {
  background: var(--bg-brand, #3fdafd);
  height: 100%;
  transition: width 0.15s ease-out;
}
.agent-editor-export-panel .agent-editor-export-format-menu {
  background: var(--bg-float);
}
.agent-editor-export-panel
  .agent-editor-export-format-option[data-combobox-active] {
  background: var(--bg-overlay);
}
.agent-editor-export-panel .agent-editor-export-format-option:hover,
.agent-editor-export-panel
  .agent-editor-export-format-option[data-combobox-selected] {
  background: var(--bg-overlay-hover, var(--bg-overlay));
}
.agent-editor-export-panel .agent-editor-export-canvas-button {
  color: var(--special-black, #000);
}
.agent-editor-export-panel[data-region="intl"]
  .agent-editor-export-canvas-button {
  color: #fff;
  background: linear-gradient(#7a65ff 0%, #6640ff 60%);
  border: 1px solid #6640ff;
  box-shadow:
    inset 0 1px 2px #ffffffb3,
    0 8px 12px -8px #5d34ff80;
}
.agent-editor-export-panel[data-region="intl"]
  .agent-editor-export-canvas-button:hover:not(:disabled) {
  filter: none;
  background: linear-gradient(#9582ff 0%, #8162ff 60%);
  border-color: #8566ff;
}
.ChatRichInput-editor p.is-editor-empty:before {
  content: attr(data-placeholder);
  float: left;
  pointer-events: none;
  color: #ffffff59;
  white-space: pre-wrap;
  max-width: 100%;
  height: 0;
  font-size: 13px;
  line-height: 24px;
}
[data-mantine-color-scheme="light"]
  .ChatRichInput-editor
  p.is-editor-empty:before {
  color: var(--input-placeholder, #919191);
}
.ChatRichInput-content-width-paragraph > p {
  width: fit-content;
  max-width: 100%;
}
.ChatRich-dark-inline-tags [data-node-view-wrapper] {
  color: #f7f7f7;
  background-color: #0000;
  border-color: #525252;
}
.ChatRich-dark-inline-tags
  [data-node-view-wrapper][data-inline-tag-highlight="true"] {
  background-color: #0000;
  border-color: #07b8dd;
}
.ChatRich-dark-inline-tags [data-node-view-wrapper] svg {
  color: #f7f7f7;
}
.agent-composer-composer {
  z-index: 4;
  width: min(
    480px,
    calc(
      100% - var(--preview-left-width, 0px) - var(--preview-right-width, 0px) -
        32px
    )
  );
  transform: translate(
    calc(
      -50% +
        (var(--preview-left-width, 0px) - var(--preview-right-width, 0px)) / 2 +
        var(--preview-composer-slide, 0px) +
        var(--preview-composer-avoid-x, 0px)
    ),
    var(--preview-composer-avoid-y, 0px)
  );
  transition: transform var(--preview-composer-slide-duration, 0.18s)
    var(--preview-composer-slide-easing, ease-out);
  background: var(--nt-bg-float, #242424);
  color: #fff;
  --fg-default: #ffffffe6;
  --fg-muted: #ffffff8c;
  --bg-surface-secondary: #ffffff0a;
  --border-default: #ffffff1f;
  --studio-upload-background: var(--nt-bg-overlay);
  --studio-upload-hover-background: var(--nt-bg-overlay-hover);
  --studio-upload-color: var(--nt-text-default);
  border-radius: 24px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  position: absolute;
  left: 50%;
  box-shadow:
    0 10px 24px -10px #0008,
    0 1px 2px -1px #0008;
}
.agent-composer-composer[data-dragging="true"],
.agent-composer-composer[data-sliding="true"] {
  -webkit-user-select: none;
  user-select: none;
}
.agent-composer-composer[data-panel-resizing] {
  transition: none;
}
.agent-composer-composer[data-sliding="true"] {
  cursor: grabbing;
  transition: none;
}
.agent-composer-composer[data-sliding="true"] .agent-composer-history-header {
  cursor: grabbing;
}
.agent-composer-composer button:focus-visible,
.agent-composer-composer [role="separator"]:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #35d5f5;
}
.agent-composer-composer[data-morphing] {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}
.agent-composer-composer[data-morphing] > * {
  width: var(--preview-composer-morph-width, auto);
  flex-shrink: 0;
  align-self: center;
}
.agent-composer-composer[data-morphing="expand"] {
  overflow: hidden;
}
.agent-composer-history {
  border-radius: 24px 24px 0 0;
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.agent-composer-history[hidden] {
  display: none;
}
.agent-composer-history-header {
  cursor: grab;
  touch-action: none;
  flex: 0 0 45px;
  min-height: 45px;
  position: relative;
}
.agent-composer-resize-handle {
  z-index: 1;
  cursor: ns-resize;
  touch-action: none;
  border-radius: 12px;
  place-items: center;
  width: 64px;
  height: 18px;
  display: grid;
  position: absolute;
  top: 0;
  left: calc(50% - 32px);
}
.agent-composer-resize-handle span {
  background: #ffffff1f;
  border-radius: 999px;
  width: 28px;
  height: 3px;
}
.agent-composer-resize-handle:hover span,
.agent-composer-resize-handle:focus-visible span {
  background: #ffffff70;
}
.agent-composer-project-title {
  color: #ffffff4d;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 17px 44px 8px;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
}
.agent-composer-icon-button {
  color: #ffffff8c;
  cursor: pointer;
  background: #ffffff0a;
  border: 0;
  border-radius: 50%;
  flex: 0 0 32px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
}
.agent-composer-icon-button:hover {
  color: #fff;
  background: #ffffff14;
}
.agent-composer-upload-button {
  background: var(--studio-upload-background, #ffffff0a);
  color: var(--studio-upload-color, #ffffff8c);
}
.agent-composer-upload-button:hover {
  background: var(--studio-upload-hover-background, #ffffff14);
  color: var(--studio-upload-color, #fff);
}
.agent-composer-upload-button[aria-expanded="true"] {
  background: var(--studio-upload-active-background, #ffffff1f);
  color: var(--studio-upload-color, #fff);
}
.agent-composer-collapse-button {
  background: 0 0;
  position: absolute;
  top: 8px;
  right: 8px;
}
.agent-composer-composer .agent-composer-resize-handle:focus-visible {
  outline: none;
}
.agent-composer-composer .agent-composer-history-header {
  box-sizing: border-box;
  flex: 0 0 55px;
  grid-template-columns: minmax(0, 1fr) 160px 28px;
  align-items: center;
  gap: 6px;
  min-height: 55px;
  padding: 15px 12px 12px;
  display: grid;
}
.agent-composer-composer .agent-composer-project-title {
  min-width: 0;
  color: var(--nt-text-default);
  text-align: left;
  margin: 0;
  padding-left: 8px;
  font-size: 14px;
  line-height: 22px;
}
.agent-composer-composer .agent-composer-collapse-button {
  grid-column: 3;
  width: 28px;
  height: 28px;
  position: static;
}
.agent-composer-messages {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff2e transparent;
  overflow-wrap: anywhere;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 12px 16px 24px;
  display: flex;
  overflow: auto;
}
.agent-composer-messages > * {
  flex-shrink: 0;
}
.agent-composer-messages > div:first-child {
  margin-bottom: 12px;
}
.agent-composer-messages .justify-end > div {
  background: #ffffff0a;
}
.agent-composer-input-area {
  padding: var(--studio-input-padding, 12px);
  border: 1px solid var(--studio-input-border, #ffffff14);
  background: var(--studio-input-background, #202020f2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  position: relative;
  box-shadow:
    inset 0 1px #ffffff14,
    0 10px 24px -10px #0008;
}
.agent-composer-input-slot {
  min-width: 0;
  margin-bottom: 16px;
  padding: 0 4px;
  position: relative;
}
.agent-composer-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: var(--studio-input-max-height, 160px);
  resize: none;
  color: var(--studio-input-color, #ffffffe6);
  font: inherit;
  scrollbar-width: thin;
  background: 0 0;
  border: 0;
  outline: none;
  padding: 0;
  line-height: 24px;
  display: block;
  overflow: auto;
}
.agent-composer-input::placeholder {
  color: var(--studio-input-placeholder, #ffffff4d);
}
.agent-composer-input:disabled {
  cursor: default;
}
.agent-composer-attachment-row {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 0 4px;
  display: flex;
}
.agent-composer-attachment-chip {
  color: #f7f7f7;
  border: 0.5px solid #525252;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  max-width: 180px;
  height: 24px;
  padding: 0 4px 0 8px;
  font-size: 13px;
  line-height: 16px;
  display: inline-flex;
}
.agent-composer-attachment-chip[data-status="uploading"] {
  opacity: 0.6;
}
.agent-composer-attachment-chip[data-status="error"] {
  color: #fca5a5;
  border-color: #f87171;
}
.agent-composer-attachment-thumb {
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  width: 16px;
  height: 16px;
}
.agent-composer-attachment-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.agent-composer-input-slot[data-with-selection] {
  align-items: flex-start;
  gap: 8px;
  display: flex;
}
.agent-composer-input-slot[data-with-selection] .agent-composer-input {
  flex: 1;
  min-width: 0;
}
.agent-composer-selection-tag {
  color: #f7f7f7;
  background: 0 0;
  border: 0.5px solid #525252;
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 4px;
  max-width: 135px;
  height: 24px;
  padding: 0 4px 0 6px;
  font-size: 13px;
  line-height: 16px;
  transition: border-color 0.15s;
  display: inline-flex;
}
.agent-composer-selection-tag:hover {
  border-color: #07b8dd;
}
.agent-composer-selection-tag-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.agent-composer-selection-tag-remove {
  color: #ffffff8c;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  display: grid;
}
.agent-composer-selection-tag-remove:hover {
  color: #f7f7f7;
  background: #ffffff1f;
}
.agent-composer-status {
  pointer-events: none;
  color: #ffffff8c;
  align-items: flex-start;
  gap: 12px;
  display: flex;
  position: absolute;
  inset: 0 4px;
}
.agent-composer-status > span:first-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0000;
  background: linear-gradient(110deg, #ffffff8c 20%, #fff 45%, #ffffff8c 70%) 0
    0/220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  min-width: 0;
  animation: 2s linear infinite agent-composer-generating;
  overflow: hidden;
}
@keyframes agent-composer-generating {
  to {
    background-position: -220% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-composer-status > span:first-child {
    animation: none;
  }
  .agent-composer-composer {
    transition: none;
  }
}
.agent-composer-actions {
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}
.agent-composer-options {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.agent-composer-options > div {
  flex-wrap: wrap;
}
.agent-composer-send-button {
  color: #071b20;
  cursor: pointer;
  background: linear-gradient(#53dfff, #00bee9);
  border: 0;
  border-radius: 50%;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  box-shadow:
    inset 0 1px 2px #ffffff80,
    0 4px 6px #3fdafd14;
}
.agent-composer-send-button:hover:not(:disabled) {
  filter: brightness(1.08);
}
.agent-composer-send-button:disabled {
  cursor: default;
  opacity: 0.55;
}
[data-region="intl"] .agent-composer-send-button {
  color: #fff;
  background: linear-gradient(#7a65ff 0%, #6640ff 60%);
  border: 1px solid #6640ff;
  box-shadow:
    inset 0 1px 2px #ffffffb3,
    0 8px 12px -8px #5d34ff80;
}
[data-region="intl"] .agent-composer-send-button:hover:not(:disabled) {
  filter: none;
  background: linear-gradient(#9582ff 0%, #8162ff 60%);
  border-color: #8566ff;
}
.agent-composer-asset-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: block;
}
.agent-composer-asset-icon path {
  fill: currentColor;
}
.agent-composer-shortcut-label {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}
.agent-composer-shortcut-key {
  opacity: 0.5;
  white-space: nowrap;
}
.agent-composer-upload-menu {
  border: 1px solid var(--nt-border-default, #ffffff14);
  background: var(--nt-bg-float, #262626);
  width: 220px;
  color: var(--nt-text-default, #fff);
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.agent-composer-upload-menu-item {
  min-height: 36px;
  color: inherit;
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 14px;
  line-height: 22px;
}
.agent-composer-upload-menu-item:hover {
  background: var(--nt-bg-overlay-hover, #ffffff0a);
}
.agent-composer-commercial-notice {
  grid-area: 2/1 / auto/-1;
  min-width: 0;
}
.agent-composer-studio-credit-card {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-overlay);
  min-width: 0;
  color: var(--nt-text-default);
  overflow-wrap: anywhere;
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}
.agent-composer-studio-credit-title {
  margin: 0;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
}
.agent-composer-studio-credit-description {
  color: var(--nt-text-secondary);
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 20px;
}
.agent-composer-studio-credit-actions {
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}
.agent-composer-studio-credit-recharge,
.agent-composer-studio-credit-continue {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 20px;
}
.agent-composer-studio-credit-recharge:hover:not(:disabled),
.agent-composer-studio-credit-continue:hover:not(:disabled) {
  opacity: 0.9;
}
.agent-composer-studio-credit-recharge:disabled,
.agent-composer-studio-credit-continue:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.agent-composer-studio-credit-recharge {
  background: var(--nt-bg-invert);
  color: var(--nt-text-onbrand);
}
.agent-composer-studio-credit-continue {
  background: var(--nt-bg-overlay);
  color: var(--nt-text-default);
}
.agent-composer-commercial-card {
  border: 1px solid var(--preview-commercial-border);
  background: var(--preview-commercial-bg);
  color: var(--preview-commercial-text);
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  margin: 4px 8px 8px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}
.agent-composer-commercial-title {
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}
.agent-composer-commercial-actions {
  gap: 8px;
  display: flex;
}
.agent-composer-commercial-action {
  border: 1px solid var(--preview-commercial-border);
  background: var(--preview-commercial-action-bg);
  min-height: 32px;
  color: var(--preview-commercial-text);
  cursor: pointer;
  border-radius: 8px;
  flex: 1;
  padding: 4px 12px;
  font-size: 13px;
}
.agent-composer-commercial-action:hover:not(:disabled) {
  background: var(--preview-commercial-action-hover);
}
.agent-composer-commercial-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.agent-composer-composer[data-compact="true"] {
  border-radius: 24px;
  width: min(320px, 100% - 32px);
}
.agent-composer-composer[data-compact="true"] .agent-composer-input-area {
  box-sizing: border-box;
  border-radius: 24px;
  grid-template-rows: 32px;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 7px;
  display: grid;
}
.agent-composer-composer[data-compact="true"] .agent-composer-attachment-row,
.agent-composer-composer[data-compact="true"] .agent-composer-annotate-button,
.agent-composer-composer[data-compact="true"] .agent-composer-commercial-notice,
.agent-composer-composer[data-compact="true"]
  .agent-composer-selection-tag-remove {
  display: none;
}
.agent-composer-composer[data-compact="true"] .agent-composer-input-slot {
  grid-area: 1/1;
  margin: 0;
  padding: 0 0 0 10px;
}
.agent-composer-composer[data-compact="true"]
  .agent-composer-input-slot[data-with-selection] {
  align-items: center;
  gap: 4px;
}
.agent-composer-composer[data-compact="true"] .agent-composer-selection-tag {
  border-width: 1px;
  flex: 0 auto;
  min-width: 0;
  max-width: min(240px, 60%);
  padding: 0 4px;
  line-height: 20px;
}
.agent-composer-composer[data-compact="true"]
  .agent-composer-selection-tag
  > svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.agent-composer-composer[data-compact="true"] .agent-composer-input {
  white-space: pre;
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
  overflow: hidden;
}
.agent-composer-composer[data-compact="true"] .agent-composer-status {
  align-items: center;
  line-height: 22px;
  inset: 0;
}
.agent-composer-composer[data-compact="true"] .agent-composer-actions {
  display: contents;
}
.agent-composer-composer[data-compact="true"] .agent-composer-options {
  display: none;
}
.agent-composer-composer[data-compact="true"] .agent-composer-send-button {
  grid-area: 1/2;
}
.agent-composer-composer[hidden],
.agent-composer-composer[data-compact="true"][data-running]
  .agent-composer-attachment-row {
  display: none;
}
.agent-composer-composer[data-compact="true"][data-running]
  .agent-composer-status {
  align-items: center;
  inset-inline: 10px 0;
}
.generation-model-settings-settings {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.generation-model-settings-settings .generation-model-settings-setting-trigger {
  background: var(--nt-bg-overlay);
  flex-shrink: 0;
}
.generation-model-settings-settings
  .generation-model-settings-setting-trigger:hover {
  background: var(--nt-bg-overlay-hover);
}
.generation-model-settings-settings
  .generation-model-settings-setting-trigger[aria-expanded="true"] {
  background: var(--nt-bg-overlay-active);
}
.generation-model-settings-settings
  .generation-model-settings-setting-trigger
  > svg {
  flex-shrink: 0;
}
.generation-model-settings-model-icon,
.generation-model-settings-aspect-ratio-icon {
  flex: 0 0 18px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
}
.generation-model-settings-aspect-ratio-icon path {
  fill: currentColor;
}
.generation-model-settings-setting-trigger {
  background: var(--nt-bg-overlay-hover, #8881);
  height: 32px;
  color: var(--nt-text-default, #f4f4f4);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 8px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
}
.generation-model-settings-setting-trigger:hover,
.generation-model-settings-setting-trigger[aria-expanded="true"] {
  background: var(--nt-bg-overlay-active, #8882);
}
.generation-model-settings-setting-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.generation-model-settings-model-trigger {
  max-width: 220px;
  padding-left: 10px;
}
.generation-model-settings-model-chevron {
  flex: 0 0 18px;
  transition: transform 0.16s ease-out;
}
[aria-expanded="true"] > .generation-model-settings-model-chevron {
  transform: rotate(180deg);
}
.generation-model-settings-model-label {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.generation-model-settings-model-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.generation-model-settings-vip-icon {
  color: var(--nt-icon-brand, #04caf6);
  flex: 0 0 12px;
}
.generation-model-settings-model-menu {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  display: flex;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.generation-model-settings-model-menu-item {
  height: 58px;
  color: var(--nt-text-default);
  border-radius: 10px;
  padding: 8px;
}
.generation-model-settings-model-menu-item[data-hovered],
.generation-model-settings-model-menu-item:hover {
  background: var(--nt-bg-overlay-hover);
}
.generation-model-settings-model-menu-item-selected {
  background: var(--nt-bg-overlay);
}
.generation-model-settings-model-menu-item[data-has-tags] {
  height: auto;
  min-height: 58px;
}
.generation-model-settings-model-menu-item[data-has-tags]
  .generation-model-settings-model-menu-label {
  flex-wrap: wrap;
}
.generation-model-settings-model-menu-item[data-has-tags]
  .generation-model-settings-model-menu-name {
  max-width: 100%;
}
.generation-model-settings-model-menu-item-content {
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  display: flex;
}
.generation-model-settings-model-menu-icon {
  background: var(--nt-bg-overlay-hover);
  width: 40px;
  height: 40px;
  color: var(--nt-text-default);
  border-radius: 12px;
  flex: 0 0 40px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.generation-model-settings-model-menu-icon[data-highlight="true"] {
  color: #000;
  background: linear-gradient(#1971d7 0%, #00d1ff 35%, #c2efe7 100%);
}
.generation-model-settings-model-menu-icon[data-highlight="true"] > img {
  filter: brightness(0);
}
.generation-model-settings-model-menu-icon[data-highlight="true"][data-region="intl"] {
  background: linear-gradient(#320774 0%, #875dea 55.77%, #e9d8f0 100%);
}
.generation-model-settings-model-menu-label {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
.generation-model-settings-model-menu-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  overflow: hidden;
}
.generation-model-settings-model-menu-vip-icon {
  flex-basis: 14px;
}
.generation-model-settings-model-menu-tags {
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  display: inline-flex;
}
.generation-model-settings-model-menu-free-tag,
.generation-model-settings-model-menu-tag {
  background: var(--nt-bg-brand-overlay);
  height: 16px;
  color: var(--nt-text-brand);
  white-space: nowrap;
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  display: inline-flex;
}
.generation-model-settings-model-menu-tag {
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  overflow: hidden;
}
.generation-model-settings-model-menu-check {
  color: var(--nt-icon-default);
  flex: 0 0 16px;
  margin-left: auto;
}
.generation-model-settings-ratio-dropdown {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  color: var(--nt-text-default);
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 16px;
  display: flex;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.generation-model-settings-ratio-title {
  color: var(--nt-text-secondary);
  padding: 4px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.generation-model-settings-ratio-options {
  grid-template-columns: repeat(4, 64px);
  gap: 8px;
  padding: 0 16px;
  display: grid;
}
.generation-model-settings-ratio-option {
  border: 1px solid var(--nt-border-neutral-l2);
  width: 64px;
  height: 72px;
  color: var(--nt-text-default);
  cursor: pointer;
  background: 0 0;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
  transition:
    border-color 0.16s,
    background 0.16s,
    color 0.16s;
  display: flex;
}
.generation-model-settings-ratio-option:hover:not(:disabled),
.generation-model-settings-ratio-option:focus-visible {
  background: var(--nt-bg-overlay-hover);
  color: var(--nt-text-default);
}
.generation-model-settings-ratio-option[aria-pressed="true"] {
  border-color: var(--nt-border-contrast);
  background: var(--nt-bg-overlay);
  color: var(--nt-text-default);
}
.generation-model-settings-ratio-option:focus-visible {
  outline: 2px solid var(--nt-text-brand);
  outline-offset: 2px;
}
.generation-model-settings-ratio-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.generation-model-settings-ratio-icon {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}
.generation-model-settings-ratio-icon-frame {
  border: 1.5px solid;
  border-radius: 3px;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.generation-model-settings-duration-dropdown {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  color: var(--nt-text-default);
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 16px;
  display: flex;
  overflow: hidden;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.generation-model-settings-duration-header-label {
  font-weight: 500;
}
.generation-model-settings-duration-header-value {
  font-family: Inter, sans-serif;
  font-weight: 400;
}
.generation-model-settings-duration-header {
  height: 28px;
  color: var(--nt-text-secondary);
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
}
.generation-model-settings-duration-body {
  flex-direction: column;
  gap: 16px;
  width: 100%;
  display: flex;
}
.generation-model-settings-duration-slider-wrap {
  height: 12px;
  padding: 0 16px;
}
.generation-model-settings-duration-slider-automatic {
  opacity: 0.3;
}
.generation-model-settings-duration-slider {
  --slider-color: var(--nt-bg-invert, #fff);
  --slider-track-bg: var(--nt-bg-overlay, #ffffff0a);
  width: 100%;
  height: 12px;
  padding-inline: 0;
  display: block;
  --slider-size: 2px !important;
  --slider-thumb-size: 14px !important;
}
.generation-model-settings-duration-auto-row {
  border: 1px solid var(--nt-border-neutral-l2);
  height: 48px;
  color: var(--nt-text-default);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  margin: 0 16px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  display: flex;
}
.generation-model-settings-duration-auto-switch {
  --switch-thumb-size: 16px;
  --switch-track-label-padding: 2px;
  flex: none;
}
.generation-model-settings-duration-auto-switch input {
  cursor: pointer;
}
.generation-model-settings-duration-auto-switch input:disabled {
  cursor: not-allowed;
}
.generation-model-settings-duration-auto-switch-track {
  cursor: pointer;
  background: var(--nt-bg-overlay-active);
  border: 0;
  width: 36px;
  min-width: 36px;
  height: 20px;
}
.generation-model-settings-duration-auto-switch[data-checked="true"]
  .generation-model-settings-duration-auto-switch-track {
  background: var(--nt-bg-invert);
}
.generation-model-settings-duration-auto-switch-thumb {
  background: var(--nt-white);
  border: 0;
  width: 16px;
  height: 16px;
}
.generation-model-settings-duration-auto-switch[data-checked="true"]
  .generation-model-settings-duration-auto-switch-thumb {
  background: var(--nt-bg-body);
}
.generation-model-settings-precision-dropdown {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  color: var(--nt-text-default);
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  display: flex;
}
.generation-model-settings-precision-title {
  color: var(--nt-text-secondary);
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.generation-model-settings-precision-options {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.generation-model-settings-precision-option {
  width: 100%;
  height: 36px;
  color: var(--nt-text-default);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
}
.generation-model-settings-precision-option:hover:not(:disabled),
.generation-model-settings-precision-option:focus-visible,
.generation-model-settings-precision-option[aria-pressed="true"] {
  background: var(--nt-bg-overlay-hover);
}
.generation-model-settings-precision-option:focus-visible {
  outline: 2px solid var(--nt-text-brand);
  outline-offset: 2px;
}
.generation-model-settings-precision-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.animation-projects-page {
  width: 100%;
  max-width: 1400px;
  color: var(--nt-text-default);
  margin: 0 auto;
  padding: 32px 0 64px;
}
.animation-projects-hero {
  isolation: isolate;
  padding-bottom: 68px;
  position: relative;
  overflow: hidden;
}
.animation-projects-hero:before {
  z-index: -1;
  content: "";
  background: var(--nt-border-default, #8882);
  pointer-events: none;
  position: absolute;
  inset: 0;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2880 800%22 width=%222880%22 height=%22800%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221%22 fill=%22none%22%3E%3Cline x1=%220%22 y1=%220%22 x2=%222880%22 y2=%220%22/%3E%3Cline x1=%220%22 y1=%220.82%22 x2=%222880%22 y2=%220.82%22/%3E%3Cline x1=%220%22 y1=%223.29%22 x2=%222880%22 y2=%223.29%22/%3E%3Cline x1=%220%22 y1=%227.41%22 x2=%222880%22 y2=%227.41%22/%3E%3Cline x1=%220%22 y1=%2213.17%22 x2=%222880%22 y2=%2213.17%22/%3E%3Cline x1=%220%22 y1=%2220.57%22 x2=%222880%22 y2=%2220.57%22/%3E%3Cline x1=%220%22 y1=%2229.62%22 x2=%222880%22 y2=%2229.62%22/%3E%3Cline x1=%220%22 y1=%2240.32%22 x2=%222880%22 y2=%2240.32%22/%3E%3Cline x1=%220%22 y1=%2252.67%22 x2=%222880%22 y2=%2252.67%22/%3E%3Cline x1=%220%22 y1=%2266.65%22 x2=%222880%22 y2=%2266.65%22/%3E%3Cline x1=%220%22 y1=%2282.29%22 x2=%222880%22 y2=%2282.29%22/%3E%3Cline x1=%220%22 y1=%2299.57%22 x2=%222880%22 y2=%2299.57%22/%3E%3Cline x1=%220%22 y1=%22118.5%22 x2=%222880%22 y2=%22118.5%22/%3E%3Cline x1=%220%22 y1=%22139.07%22 x2=%222880%22 y2=%22139.07%22/%3E%3Cline x1=%220%22 y1=%22161.29%22 x2=%222880%22 y2=%22161.29%22/%3E%3Cline x1=%220%22 y1=%22185.15%22 x2=%222880%22 y2=%22185.15%22/%3E%3Cline x1=%220%22 y1=%22210.66%22 x2=%222880%22 y2=%22210.66%22/%3E%3Cline x1=%220%22 y1=%22237.82%22 x2=%222880%22 y2=%22237.82%22/%3E%3Cline x1=%220%22 y1=%22266.62%22 x2=%222880%22 y2=%22266.62%22/%3E%3Cline x1=%220%22 y1=%22297.07%22 x2=%222880%22 y2=%22297.07%22/%3E%3Cline x1=%220%22 y1=%22329.16%22 x2=%222880%22 y2=%22329.16%22/%3E%3Cline x1=%220%22 y1=%22362.9%22 x2=%222880%22 y2=%22362.9%22/%3E%3Cline x1=%220%22 y1=%22398.28%22 x2=%222880%22 y2=%22398.28%22/%3E%3Cline x1=%220%22 y1=%22435.31%22 x2=%222880%22 y2=%22435.31%22/%3E%3Cline x1=%220%22 y1=%22473.99%22 x2=%222880%22 y2=%22473.99%22/%3E%3Cline x1=%220%22 y1=%22514.31%22 x2=%222880%22 y2=%22514.31%22/%3E%3Cline x1=%220%22 y1=%22556.28%22 x2=%222880%22 y2=%22556.28%22/%3E%3Cline x1=%220%22 y1=%22599.89%22 x2=%222880%22 y2=%22599.89%22/%3E%3Cline x1=%220%22 y1=%22645.15%22 x2=%222880%22 y2=%22645.15%22/%3E%3Cline x1=%220%22 y1=%22692.06%22 x2=%222880%22 y2=%22692.06%22/%3E%3Cline x1=%220%22 y1=%22740.61%22 x2=%222880%22 y2=%22740.61%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-7046.19%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6834.03%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6621.88%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6409.72%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6197.57%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5985.41%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5773.26%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5561.1%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5348.95%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5136.8%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4924.64%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4712.49%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4500.33%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4288.18%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4076.02%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3863.87%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3651.71%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3439.56%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3227.4%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3015.25%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2803.09%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2590.94%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2378.78%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2166.63%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1954.48%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1742.32%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1530.17%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1318.01%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1105.86%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-893.7%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-681.55%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-469.39%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-257.24%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-45.08%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22167.07%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22379.23%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22591.38%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22803.54%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221015.69%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221227.85%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221440%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221652.15%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221864.31%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222076.46%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222288.62%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222500.77%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222712.93%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222925.08%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223137.24%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223349.39%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223561.55%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223773.7%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223985.86%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224198.01%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224410.17%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224622.32%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224834.48%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225046.63%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225258.78%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225470.94%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225683.09%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225895.25%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226107.4%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226319.56%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226531.71%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226743.87%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226956.02%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227168.18%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227380.33%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227592.49%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227804.64%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228016.8%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228228.95%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228441.1%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228653.26%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228865.41%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229077.57%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229289.72%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229501.88%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229714.03%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229926.19%22 y2=%22800%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 50% 30%, #0008, #0005 50%, #0000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2880 800%22 width=%222880%22 height=%22800%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221%22 fill=%22none%22%3E%3Cline x1=%220%22 y1=%220%22 x2=%222880%22 y2=%220%22/%3E%3Cline x1=%220%22 y1=%220.82%22 x2=%222880%22 y2=%220.82%22/%3E%3Cline x1=%220%22 y1=%223.29%22 x2=%222880%22 y2=%223.29%22/%3E%3Cline x1=%220%22 y1=%227.41%22 x2=%222880%22 y2=%227.41%22/%3E%3Cline x1=%220%22 y1=%2213.17%22 x2=%222880%22 y2=%2213.17%22/%3E%3Cline x1=%220%22 y1=%2220.57%22 x2=%222880%22 y2=%2220.57%22/%3E%3Cline x1=%220%22 y1=%2229.62%22 x2=%222880%22 y2=%2229.62%22/%3E%3Cline x1=%220%22 y1=%2240.32%22 x2=%222880%22 y2=%2240.32%22/%3E%3Cline x1=%220%22 y1=%2252.67%22 x2=%222880%22 y2=%2252.67%22/%3E%3Cline x1=%220%22 y1=%2266.65%22 x2=%222880%22 y2=%2266.65%22/%3E%3Cline x1=%220%22 y1=%2282.29%22 x2=%222880%22 y2=%2282.29%22/%3E%3Cline x1=%220%22 y1=%2299.57%22 x2=%222880%22 y2=%2299.57%22/%3E%3Cline x1=%220%22 y1=%22118.5%22 x2=%222880%22 y2=%22118.5%22/%3E%3Cline x1=%220%22 y1=%22139.07%22 x2=%222880%22 y2=%22139.07%22/%3E%3Cline x1=%220%22 y1=%22161.29%22 x2=%222880%22 y2=%22161.29%22/%3E%3Cline x1=%220%22 y1=%22185.15%22 x2=%222880%22 y2=%22185.15%22/%3E%3Cline x1=%220%22 y1=%22210.66%22 x2=%222880%22 y2=%22210.66%22/%3E%3Cline x1=%220%22 y1=%22237.82%22 x2=%222880%22 y2=%22237.82%22/%3E%3Cline x1=%220%22 y1=%22266.62%22 x2=%222880%22 y2=%22266.62%22/%3E%3Cline x1=%220%22 y1=%22297.07%22 x2=%222880%22 y2=%22297.07%22/%3E%3Cline x1=%220%22 y1=%22329.16%22 x2=%222880%22 y2=%22329.16%22/%3E%3Cline x1=%220%22 y1=%22362.9%22 x2=%222880%22 y2=%22362.9%22/%3E%3Cline x1=%220%22 y1=%22398.28%22 x2=%222880%22 y2=%22398.28%22/%3E%3Cline x1=%220%22 y1=%22435.31%22 x2=%222880%22 y2=%22435.31%22/%3E%3Cline x1=%220%22 y1=%22473.99%22 x2=%222880%22 y2=%22473.99%22/%3E%3Cline x1=%220%22 y1=%22514.31%22 x2=%222880%22 y2=%22514.31%22/%3E%3Cline x1=%220%22 y1=%22556.28%22 x2=%222880%22 y2=%22556.28%22/%3E%3Cline x1=%220%22 y1=%22599.89%22 x2=%222880%22 y2=%22599.89%22/%3E%3Cline x1=%220%22 y1=%22645.15%22 x2=%222880%22 y2=%22645.15%22/%3E%3Cline x1=%220%22 y1=%22692.06%22 x2=%222880%22 y2=%22692.06%22/%3E%3Cline x1=%220%22 y1=%22740.61%22 x2=%222880%22 y2=%22740.61%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-7046.19%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6834.03%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6621.88%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6409.72%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-6197.57%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5985.41%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5773.26%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5561.1%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5348.95%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-5136.8%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4924.64%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4712.49%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4500.33%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4288.18%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-4076.02%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3863.87%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3651.71%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3439.56%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3227.4%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-3015.25%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2803.09%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2590.94%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2378.78%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-2166.63%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1954.48%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1742.32%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1530.17%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1318.01%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-1105.86%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-893.7%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-681.55%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-469.39%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-257.24%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22-45.08%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22167.07%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22379.23%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22591.38%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%22803.54%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221015.69%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221227.85%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221440%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221652.15%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%221864.31%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222076.46%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222288.62%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222500.77%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222712.93%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%222925.08%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223137.24%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223349.39%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223561.55%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223773.7%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%223985.86%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224198.01%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224410.17%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224622.32%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%224834.48%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225046.63%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225258.78%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225470.94%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225683.09%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%225895.25%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226107.4%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226319.56%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226531.71%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226743.87%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%226956.02%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227168.18%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227380.33%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227592.49%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%227804.64%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228016.8%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228228.95%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228441.1%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228653.26%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%228865.41%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229077.57%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229289.72%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229501.88%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229714.03%22 y2=%22800%22/%3E%3Cline x1=%221440%22 y1=%220%22 x2=%229926.19%22 y2=%22800%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 50% 30%, #0008, #0005 50%, #0000);
  -webkit-mask-position:
    50% 54px,
    0 0;
  mask-position:
    50% 54px,
    0 0;
  -webkit-mask-size:
    2880px 800px,
    100% 100%;
  mask-size:
    2880px 800px,
    100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.animation-projects-carousel {
  align-items: center;
  display: grid;
  position: relative;
}
.animation-projects-carousel-track.swiper {
  perspective: 1240px;
  grid-area: 1/1;
  width: 100%;
  padding: 40px 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
}
.animation-projects-carousel-track.swiper .swiper-wrapper {
  transform-style: preserve-3d;
}
.animation-projects-preset-slide.swiper-slide {
  width: var(--studio-ring-frame-width, min(240px, 21.82vw));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
:is(
  .animation-projects-preset-slide.swiper-slide:hover,
  .animation-projects-preset-slide.swiper-slide:focus-within
) {
  z-index: 3 !important;
}
.animation-projects-preset-card {
  border-radius: var(--studio-ring-radius, 8px);
  cursor: pointer;
  background: 0 0;
  border: 0;
  width: 100%;
  padding: 0;
  display: block;
  position: relative;
}
.animation-projects-preset-card-static {
  cursor: default;
}
.animation-projects-preset-media {
  aspect-ratio: 16/9;
  border: 1px solid var(--nt-border-default, #8883);
  border-radius: var(--studio-ring-radius, 8px);
  background: var(--nt-bg-overlay-hover, #8881);
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.animation-projects-preset-media:after {
  content: "";
  opacity: var(--preset-shade, 0);
  pointer-events: none;
  background: #000;
  transition: opacity 0.16s ease-out;
  position: absolute;
  inset: 0;
}
.animation-projects-preset-action {
  z-index: 1;
  color: #171717;
  text-align: center;
  opacity: 0;
  background: #fff;
  border-radius: 999px;
  min-width: 78px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  transition:
    opacity 0.16s ease-out,
    transform 0.16s ease-out;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-45%);
}
.animation-projects-preset-card:hover .animation-projects-preset-media:after,
.animation-projects-preset-card:focus-visible
  .animation-projects-preset-media:after {
  opacity: 0;
}
.animation-projects-preset-card:hover .animation-projects-preset-action,
.animation-projects-preset-card:focus-visible
  .animation-projects-preset-action {
  opacity: 1;
  transform: translateY(-50%);
}
.animation-projects-heading {
  text-align: center;
  color: var(--fg-default, var(--nt-text-default));
  font-family: "HuoshanQinghe Title", var(--font-text);
  margin: 8px 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
}
.animation-projects-heading-art {
  width: min(425px, 100%);
  height: auto;
  margin: 0 auto;
  display: block;
}
.animation-projects-prompt-suggestions {
  width: min(800px, 100%);
  margin: 16px auto 0;
  padding: 0 16px;
  list-style: none;
}
.animation-projects-prompt-suggestion {
  width: 100%;
  color: var(--nt-text-secondary);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 24px;
  transition: color 0.1s ease-out;
  display: flex;
}
.animation-projects-prompt-suggestion:hover:not(:disabled),
.animation-projects-prompt-suggestion:focus-visible {
  color: var(--nt-text-default);
}
.animation-projects-prompt-suggestion:disabled {
  cursor: default;
  opacity: 0.5;
}
.animation-projects-prompt-arrow {
  flex-shrink: 0;
  align-items: center;
  height: 24px;
  display: flex;
}
.animation-projects-subtitle {
  text-align: center;
  color: var(--fg-muted, var(--nt-text-tertiary));
  margin: 0;
  font-size: 14px;
  line-height: 22px;
}
.animation-projects-composer {
  border: 1px solid var(--nt-border-default, #8883);
  background: var(--nt-bg-elevated, var(--nt-bg-overlay-hover, #8881));
  border-radius: 24px;
  width: min(800px, 100%);
  min-height: 124px;
  margin: 48px auto 0;
  padding: 14px 16px 12px;
  box-shadow: 0 12px 32px #00000012;
}
.animation-projects-composer:focus-within {
  border-color: var(--nt-bg-brand);
}
.animation-projects-composer textarea {
  resize: vertical;
  width: 100%;
  min-height: 56px;
  max-height: 160px;
  color: inherit;
  font: inherit;
  background: 0 0;
  border: 0;
  outline: none;
  font-size: 16px;
  line-height: 24px;
  display: block;
}
.animation-projects-composer textarea::placeholder {
  color: var(--nt-text-tertiary);
}
.animation-projects-generate {
  background: var(--nt-bg-brand);
  min-width: 108px;
  height: 32px;
  color: var(--nt-black);
  cursor: pointer;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}
.animation-projects-generate:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.animation-projects-studio-composer {
  width: min(800px, 100%);
  color: var(--nt-text-default);
  --studio-input-padding: 15px 11px 11px;
  --studio-input-background: var(--nt-bg-float-glass-l1);
  --studio-input-border: var(--nt-border-default, #8883);
  --studio-input-color: var(--nt-text-default);
  --studio-input-placeholder: var(--nt-text-tertiary);
  --studio-input-max-height: 192px;
  --studio-upload-background: var(--nt-bg-overlay);
  --studio-upload-hover-background: var(--nt-bg-overlay-hover);
  --studio-upload-active-background: var(--nt-bg-overlay-active);
  --studio-upload-color: var(--nt-text-default);
  border-radius: 24px;
  margin: 36px auto 0;
  font-size: 14px;
  line-height: 24px;
}
.animation-projects-studio-composer .animation-projects-generate {
  background: var(--nt-bg-brand);
  flex-shrink: 0;
  min-width: 80px;
  padding: 0 16px;
  box-shadow: inset 0 1px 2px #ffffff80;
}
.animation-projects-studio-composer .animation-projects-generate svg {
  width: 18px;
  height: 18px;
}
.animation-projects-studio-composer[data-cn="true"]
  .animation-projects-generate {
  background: linear-gradient(#53dfff, #00b5de);
}
.animation-projects-studio-composer:not([data-cn])
  .animation-projects-generate {
  color: #fff;
  background: linear-gradient(#7a65ff 0%, #6640ff 60%);
  border: 1px solid #6640ff;
  box-shadow:
    inset 0 1px 2px #ffffffb3,
    0 8px 12px -8px #5d34ff80;
}
.animation-projects-studio-composer:not([data-cn])
  .animation-projects-generate:hover:not(:disabled) {
  background: linear-gradient(#9582ff 0%, #8162ff 60%);
  border-color: #8566ff;
}
.animation-projects-studio-composer button:focus-visible {
  outline: 2px solid var(--nt-text-brand);
  outline-offset: 2px;
}
.animation-projects-composer-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  margin-top: 8px;
  display: flex;
}
.animation-projects-generation-settings {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.animation-projects-section-title {
  margin: 0 0 20px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
}
.animation-projects-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 14px;
  display: grid;
}
.animation-projects-card {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.animation-projects-cover {
  aspect-ratio: 16/9;
  border: 1px solid var(--nt-border-neutral-l1, #8883);
  width: 100%;
  color: var(--nt-text-tertiary);
  cursor: pointer;
  background: 0 0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.animation-projects-cover:not([data-empty]):after {
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: 0 0;
  transition: background 0.16s ease-out;
  position: absolute;
  inset: 0;
}
.animation-projects-cover:not([data-empty]):hover:after {
  background: var(--nt-bg-overlay-hover, #8881);
}
.animation-projects-cover[data-empty] {
  background: var(--nt-bg-overlay, #8881);
  transition: background 0.16s ease-out;
}
.animation-projects-cover[data-empty]:hover {
  background: var(--nt-bg-overlay-hover, #8881);
}
.animation-projects-blank {
  background-color: var(--nt-bg-overlay-hover, #8881);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.animation-projects-details {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  height: 42px;
  padding: 0 8px;
  display: flex;
  overflow: hidden;
}
.animation-projects-name-row {
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  display: flex;
}
.animation-projects-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  display: block;
  overflow: hidden;
}
.animation-projects-date {
  color: var(--nt-text-secondary);
  font-size: 12px;
  line-height: 18px;
}
.animation-projects-more {
  opacity: 0;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  transition: opacity 0.16s ease-out;
  display: grid;
}
.animation-projects-more:hover {
  background: var(--nt-bg-overlay-hover, #8882);
}
.animation-projects-card:hover .animation-projects-more,
.animation-projects-card:focus-within .animation-projects-more,
.animation-projects-more[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .animation-projects-more {
    opacity: 1;
  }
}
.animation-projects-project-menu {
  border: 1px solid var(--nt-border-neutral-l1);
  background: var(--nt-bg-float);
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.animation-projects-project-menu-item {
  min-height: 36px;
  color: var(--nt-text-default);
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 14px;
  line-height: 22px;
}
.animation-projects-project-menu-item:hover,
.animation-projects-project-menu-item[data-hovered] {
  background: var(--nt-bg-overlay-hover);
}
.animation-projects-project-menu-item
  .mantine-Menu-itemSection[data-position="left"] {
  margin-inline-end: 8px;
}
.animation-projects-project-menu-item-danger {
  color: var(--nt-danger-default);
}
.animation-projects-status {
  min-height: 64px;
  color: var(--nt-text-tertiary);
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  display: flex;
}
@media (min-width: 768px) {
  .animation-projects-page {
    padding-top: 0;
  }
  .animation-projects-page .animation-projects-carousel-track.swiper {
    padding-top: 20px;
  }
}
@media (max-width: 1199px) {
  .animation-projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .animation-projects-page {
    padding: 16px 0 32px;
  }
  .animation-projects-hero {
    padding-bottom: 40px;
  }
  .animation-projects-preset-slide.swiper-slide {
    width: var(--studio-ring-frame-width, 70vw);
  }
  .animation-projects-composer,
  .animation-projects-studio-composer {
    margin-top: 28px;
  }
  .animation-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.image-annotation-overlay {
  z-index: 2;
  position: absolute;
  inset: 0;
}
.image-annotation-overlay.image-annotation-capture-outline:after {
  z-index: 2;
  inset: 0 var(--preview-right-width, 0px) var(--preview-dock-height, 0px)
    var(--preview-left-width, 0px);
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  border: 4px solid #3fdafd;
  position: absolute;
}
[data-region="intl"]
  .image-annotation-overlay.image-annotation-capture-outline:after {
  border-color: #6640ff;
}
.image-annotation-overlay[data-tool="select"],
.image-annotation-overlay[data-tool="none"] {
  pointer-events: none;
}
.image-annotation-canvas {
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.image-annotation-overlay[data-tool="eraser"] .image-annotation-canvas {
  cursor: cell;
}
.image-annotation-overlay[data-tool="text"] .image-annotation-canvas {
  cursor: text;
}
.image-annotation-overlay .image-annotation-text-input {
  z-index: 1;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  resize: none;
  white-space: pre-wrap;
  background: 0 0;
  border: 0;
  outline: none;
  min-width: 120px;
  padding: 0;
  font-family: inherit;
  line-height: 1.4;
  position: absolute;
  overflow: hidden;
}
.image-annotation-annotate {
  transform: translateX(
    calc(
      -50% +
        (var(--preview-left-width, 0px) - var(--preview-right-width, 0px)) / 2
    )
  );
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
}
.image-annotation-row {
  align-items: center;
  gap: 8px;
  display: flex;
}
.image-annotation-bar {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #1f1f1fe6;
  border: 1px solid #ffffff14;
  border-radius: 9999px;
  align-items: center;
  padding: 8px;
  display: flex;
  box-shadow:
    0 16px 24px #0000001f,
    0 4px 8px #00000014,
    0 1px 1px #0000000a;
}
.image-annotation-options,
.image-annotation-toolbar {
  gap: 8px;
}
.image-annotation-exit {
  padding: 8px;
}
.image-annotation-tools {
  align-items: center;
  gap: 8px;
  display: flex;
}
.image-annotation-tool {
  color: #ffffffb8;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transition:
    background-color 0.15s,
    color 0.15s;
  display: inline-flex;
}
.image-annotation-tool:hover {
  color: #fff;
  background: #ffffff14;
}
.image-annotation-tool[data-active="true"],
.image-annotation-tool[data-active="true"]:hover {
  color: #1a1a1a;
  background: #fff;
}
.image-annotation-confirm {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(#53dfff 0%, #00bee9 100%);
  border: 0;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  box-shadow:
    inset 0 1px 2px #ffffff80,
    0 4px 6px #3fdafd14;
}
[data-region="intl"] .image-annotation-confirm {
  color: #fff;
  background: linear-gradient(#7a65ff 0%, #6640ff 60%);
  border: 1px solid #6640ff;
  box-shadow:
    inset 0 1px 2px #ffffffb3,
    0 8px 12px -8px #5d34ff80;
}
[data-region="intl"] .image-annotation-confirm:hover {
  filter: none;
  background: linear-gradient(#9582ff 0%, #8162ff 60%);
  border-color: #8566ff;
}
.image-annotation-confirm:hover {
  filter: brightness(1.06);
}
.image-annotation-size {
  color: #fff;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 9999px;
  justify-content: space-between;
  align-items: center;
  width: 72px;
  height: 32px;
  padding: 0 4px 0 8px;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
}
.image-annotation-size:hover {
  background: #ffffff14;
}
.image-annotation-size[data-expanded="true"] {
  background: #ffffff1a;
}
.image-annotation-font-size-menu {
  background: #242424;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  padding: 6px;
  overflow: hidden;
  box-shadow:
    0 16px 24px -8px #0000000f,
    0 4px 8px -4px #0000000a,
    0 1px 1px #00000005;
}
.image-annotation-font-size-option {
  color: #ffffffe6;
  border-radius: 10px;
  height: 36px;
  min-height: 36px;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 20px;
}
.image-annotation-font-size-option:hover {
  background: #ffffff1a;
}
.image-annotation-strokes {
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  display: flex;
}
.image-annotation-stroke {
  cursor: pointer;
  background: 0 0;
  border: 0;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
}
.image-annotation-dot {
  background: #ffffff59;
  border-radius: 50%;
  display: block;
}
.image-annotation-stroke[data-active="true"] .image-annotation-dot {
  background: #fff;
}
.image-annotation-divider {
  background: #ffffff1f;
  width: 1px;
  height: 26px;
}
.image-annotation-colors {
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  display: flex;
}
.image-annotation-color {
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
}
.image-annotation-swatch {
  background: var(--preview-annotate-color);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: block;
  box-shadow: inset 0 0 0 1px #0000001f;
}
.image-annotation-color[data-active="true"] .image-annotation-swatch {
  width: 18px;
  height: 18px;
  box-shadow:
    inset 0 0 0 1px #0000001f,
    0 0 0 2px #1f1f1f,
    0 0 0 3.5px #ffffffd9;
}
.agent-timeline-timeline[data-preview-timeline-cn] {
  border-top: 1px solid var(--border-neutral-l1, #ffffff14);
  color: #ffffffe6;
  height: 100%;
  min-height: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: #1a1a1a;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 0;
  font-size: 12px;
  line-height: 14px;
  display: flex;
}
.agent-timeline-timeline[data-preview-timeline-cn] button:focus-visible {
  outline-offset: -1px;
  outline: 1px solid #35d5f5;
}
.agent-timeline-timeline .agent-timeline-transport {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  display: flex;
}
.agent-timeline-timeline .agent-timeline-buttons {
  flex-shrink: 0;
  gap: 8px;
  width: 88px;
  display: flex;
}
.agent-timeline-timeline .agent-timeline-play,
.agent-timeline-timeline .agent-timeline-speed {
  min-width: 28px;
  height: 28px;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  padding: 0;
  display: grid;
}
.agent-timeline-timeline .agent-timeline-play:hover,
.agent-timeline-timeline .agent-timeline-speed:hover {
  background: #ffffff14;
}
.agent-timeline-timeline .agent-timeline-play {
  background: #ffffff0a;
  width: 28px;
}
.agent-timeline-timeline .agent-timeline-speed {
  padding-inline: 3px;
}
.agent-timeline-timeline .agent-timeline-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.agent-timeline-timeline .agent-timeline-zoom {
  cursor: pointer;
  flex-shrink: 0;
  width: 88px;
  height: 28px;
  position: relative;
}
.agent-timeline-timeline .agent-timeline-zoom input {
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}
.agent-timeline-timeline .agent-timeline-zoom:has(input:focus-visible) {
  outline-offset: 2px;
  outline: 1px solid #35d5f5;
}
.agent-timeline-timeline .agent-timeline-zoom-track {
  pointer-events: none;
  background: #ffffff0a;
  border-radius: 9999px;
  height: 4px;
  position: absolute;
  inset: 12px 0;
}
.agent-timeline-timeline .agent-timeline-zoom-track > span {
  border-radius: inherit;
  background: #ffffff8c;
  height: 100%;
  display: block;
}
.agent-timeline-timeline .agent-timeline-thumb {
  pointer-events: none;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 8px;
  transform: translate(-50%);
}
.agent-timeline-timeline .agent-timeline-thumb > svg {
  position: absolute;
  top: 0;
  left: -16px;
}
.agent-timeline-timeline .agent-timeline-scroll {
  scrollbar-width: none;
  flex: 1;
  min-height: 0;
  margin-top: -1px;
  padding-top: 1px;
  overflow: auto hidden;
}
.agent-timeline-timeline .agent-timeline-track {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  min-width: 100%;
  height: 100%;
  position: relative;
}
.agent-timeline-timeline .agent-timeline-track:active {
  cursor: grabbing;
}
.agent-timeline-timeline .agent-timeline-ruler {
  color: #ffffff4d;
  height: 14px;
  position: relative;
}
.agent-timeline-timeline .agent-timeline-tick-label {
  white-space: nowrap;
  position: absolute;
  top: 0;
  transform: translate(-50%);
}
.agent-timeline-timeline .agent-timeline-tick-label[data-edge="start"] {
  transform: none;
}
.agent-timeline-timeline .agent-timeline-tick-label[data-edge="end"] {
  transform: translate(-100%);
}
.agent-timeline-timeline .agent-timeline-dot {
  background: currentColor;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 6px;
  transform: translate(-50%);
}
.agent-timeline-timeline .agent-timeline-shots {
  height: 32px;
  margin-top: 8px;
  position: relative;
}
.agent-timeline-timeline .agent-timeline-shot {
  color: #ffffff4d;
  cursor: pointer;
  background: #ffffff0a;
  border-radius: 6px;
  grid-template-rows: repeat(2, 12px);
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
  height: 32px;
  padding: 3px 4px;
  display: grid;
  position: absolute;
  overflow: hidden;
}
.agent-timeline-timeline .agent-timeline-shot > svg {
  flex-shrink: 0;
  grid-row: 1/3;
}
.agent-timeline-timeline .agent-timeline-shot:hover {
  background: #ffffff14;
}
.agent-timeline-timeline .agent-timeline-shot[aria-pressed="true"] {
  color: #111;
  background: #fff;
}
.agent-timeline-timeline .agent-timeline-cut {
  opacity: 0.5;
  background: currentColor;
  border-radius: 9999px;
  flex-shrink: 0;
  width: 1.5px;
  height: 12px;
  display: none;
}
.agent-timeline-timeline .agent-timeline-shot-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-family: var(--font-sans, sans-serif);
  flex: 1;
  overflow: hidden;
}
.agent-timeline-timeline .agent-timeline-shot-duration {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  line-height: 12px;
  overflow: hidden;
}
.agent-timeline-timeline .agent-timeline-playhead {
  z-index: 1;
  pointer-events: none;
  width: 0;
  position: absolute;
  top: -1px;
  bottom: 0;
}
.agent-timeline-timeline .agent-timeline-badge {
  z-index: 1;
  color: #111;
  pointer-events: none;
  white-space: nowrap;
  background: #35d5f5;
  border-radius: 6px;
  height: 16px;
  padding: 1px 6px;
  position: absolute;
  top: -1px;
  transform: translate(-50%);
}
.agent-timeline-timeline .agent-timeline-line {
  background: #35d5f5;
  width: 1px;
  position: absolute;
  top: 16px;
  bottom: 0;
}
[data-region="intl"] .agent-timeline-timeline button:focus-visible {
  outline-color: var(--nt-bg-brand, #6640ff);
}
[data-region="intl"] .agent-timeline-timeline .agent-timeline-badge {
  background: var(--nt-bg-brand, #6640ff);
  color: #fff;
}
[data-region="intl"] .agent-timeline-timeline .agent-timeline-line,
[data-region="intl"]
  .agent-timeline-timeline
  .agent-timeline-trim-handle
  > span {
  background: var(--nt-bg-brand, #6640ff);
}
.agent-timeline-timeline .agent-timeline-trim-handle {
  z-index: 2;
  cursor: ew-resize;
  opacity: 0;
  touch-action: none;
  background: 0 0;
  border: 0;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 32px;
  padding: 0;
  transition: opacity 0.12s ease-out;
  display: flex;
  position: absolute;
  top: 0;
  transform: translate(-50%);
}
.agent-timeline-timeline .agent-timeline-trim-handle > span {
  background: #35d5f5;
  border-radius: 8px;
  width: 4px;
  height: 16px;
  transition: height 0.12s ease-out;
}
.agent-timeline-timeline .agent-timeline-trim-handle:hover > span,
.agent-timeline-timeline .agent-timeline-trim-handle[data-dragging] > span {
  height: 32px;
}
.agent-timeline-timeline
  .agent-timeline-shots:hover
  .agent-timeline-trim-handle,
.agent-timeline-timeline .agent-timeline-trim-handle[data-active],
.agent-timeline-timeline .agent-timeline-trim-handle:focus-visible {
  opacity: 1;
}
.image-tools-tools {
  z-index: 30;
  top: var(--preview-tools-top, 16px);
  left: var(--preview-tools-left, calc(var(--preview-left-width, 0px) + 10px));
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
}
.image-tools-history {
  background: #222;
  border-radius: 8px;
  padding: 1px;
  display: flex;
  overflow: hidden;
}
.image-tools-history:empty {
  display: none;
}
.image-tools-history [data-preview-history] {
  gap: 0;
  display: flex;
}
.image-tools-history button {
  color: #fff;
  background: 0 0;
  border: 0;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  min-width: 0;
  height: 26px;
  padding: 0;
  display: grid;
}
.image-tools-history button:disabled {
  opacity: 0.3;
}
.image-tools-history button:hover:not(:disabled) {
  background: #333;
}
.image-tools-button {
  color: #fff;
  cursor: pointer;
  background: #222;
  border: 1px solid #0000;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
}
.image-tools-button[aria-pressed="true"] {
  color: #000;
  background: #fff;
  border-color: #2c2c2c;
}
.image-tools-button:hover:not(:disabled):not([aria-pressed="true"]) {
  background: #333;
}
.image-tools-button:focus-visible {
  outline: 2px solid var(--border-brand, #00e59d);
  outline-offset: 2px;
}
.image-tools-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.image-tools-target {
  display: flex;
}
.image-tools-dropdown {
  border: 1px solid var(--border-neutral-l1, #ffffff14);
  background: var(--bg-float, #242424);
  color: var(--text-primary, #fff);
  border-radius: 12px;
  padding: 12px;
}
.image-tools-title {
  margin-bottom: 8px;
  font-size: 12px;
}
.image-tools-ratios {
  grid-template-columns: repeat(3, 48px);
  gap: 4px;
  display: grid;
}
.image-tools-ratio {
  border-radius: 6px;
  height: 28px;
  font-size: 12px;
}
.image-tools-ratio:hover {
  background: var(--bg-hover, #ffffff14);
}
.image-tools-ratio[aria-pressed="true"] {
  color: #000;
  background: #fff;
}